refactor(types): shorten ref, id JSDocs, use CarbonIcon type, export component props

This commit is contained in:
Eric Liu 2020-11-06 11:30:46 -08:00
commit 75d4b4cf03
219 changed files with 5168 additions and 5259 deletions

View file

@ -16,7 +16,7 @@
/**
* Specify the icon from `carbon-icons-svelte` to render
* @type {typeof import("carbon-icons-svelte/lib/Add16").default}
* @type {import("carbon-icons-svelte").CarbonIcon}
*/
export let icon = undefined;
@ -63,10 +63,7 @@
/** Specify the `type` attribute for the button element */
export let type = "button";
/**
* Obtain a reference to the HTML element
* @type {null | HTMLAnchorElement | HTMLButtonElement}
*/
/** Obtain a reference to the HTML element */
export let ref = null;
import { getContext } from "svelte";

View file

@ -33,16 +33,10 @@
*/
export let title = undefined;
/**
* Set an id for the input label
* @type {string}
*/
/** Set an id for the input label */
export let id = "ccs-" + Math.random().toString(36);
/**
* Obtain a reference to the input HTML element
* @type {null | HTMLInputElement}
*/
/** Obtain a reference to the input HTML element */
export let ref = null;
import { createEventDispatcher } from "svelte";

View file

@ -11,16 +11,10 @@
*/
export let title = undefined;
/**
* Set an id for the input label
* @type {string}
*/
/** Set an id for the input label */
export let id = "ccs-" + Math.random().toString(36);
/**
* Obtain a reference to the input HTML element
* @type {null | HTMLInputElement}
*/
/** Obtain a reference to the input HTML element */
export let ref = null;
</script>

View file

@ -63,16 +63,10 @@
/** Set to `true` to enable the show more/less button */
export let showMoreLess = false;
/**
* Set an id for the code element
* @type {string}
*/
/** Set an id for the code element */
export let id = "ccs-" + Math.random().toString(36);
/**
* Obtain a reference to the pre HTML element
* @type {null | HTMLPreElement}
*/
/** Obtain a reference to the pre HTML element */
export let ref = null;
import { tick } from "svelte";

View file

@ -16,10 +16,7 @@
*/
export let itemToString = (item) => item.text || item.id;
/**
* Set the selected item by value index
* @type {number}
*/
/** Set the selected item by value index */
export let selectedIndex = -1;
/** Specify the selected combobox value */
@ -67,10 +64,7 @@
*/
export let translateWithId = undefined;
/**
* Set an id for the list box component
* @type {string}
*/
/** Set an id for the list box component */
export let id = "ccs-" + Math.random().toString(36);
/**
@ -79,10 +73,7 @@
*/
export let name = undefined;
/**
* Obtain a reference to the input HTML element
* @type {null | HTMLInputElement}
*/
/** Obtain a reference to the input HTML element */
export let ref = null;
/**

View file

@ -20,10 +20,7 @@
/** Specify a selector to be focused when opening the modal */
export let selectorPrimaryFocus = "[data-modal-primary-focus]";
/**
* Obtain a reference to the top-level HTML element
* @type {null | HTMLDivElement}
*/
/** Obtain a reference to the top-level HTML element */
export let ref = null;
import {

View file

@ -11,16 +11,10 @@
/** Set to `true` to disable the switch */
export let disabled = false;
/**
* Set an id for the button element
* @type {string}
*/
/** Set an id for the button element */
export let id = "ccs-" + Math.random().toString(36);
/**
* Obtain a reference to the button HTML element
* @type {null | HTMLButtonElement}
*/
/** Obtain a reference to the button HTML element */
export let ref = null;
import { afterUpdate, getContext, onDestroy } from "svelte";

View file

@ -5,10 +5,7 @@
/** Set the timeout duration (ms) to display feedback text */
export let feedbackTimeout = 2000;
/**
* Obtain a reference to the button HTML element
* @type {null | HTMLButtonElement}
*/
/** Obtain a reference to the button HTML element */
export let ref = null;
import { onMount } from "svelte";

View file

@ -8,10 +8,7 @@
*/
export let translateWithId = () => "";
/**
* Set an id for the top-level element
* @type {string}
*/
/** Set an id for the top-level element */
export let id = "ccs-" + Math.random().toString(36);
import { getContext } from "svelte";

View file

@ -42,10 +42,7 @@
/** Set to `true` to enable the light variant */
export let light = false;
/**
* Set an id for the date picker element
* @type {string}
*/
/** Set an id for the date picker element */
export let id = "ccs-" + Math.random().toString(36);
import {

View file

@ -20,10 +20,7 @@
/** Specify the ARIA label for the calendar icon */
export let iconDescription = "";
/**
* Set an id for the input element
* @type {string}
*/
/** Set an id for the input element */
export let id = "ccs-" + Math.random().toString(36);
/** Specify the label text */
@ -44,10 +41,7 @@
*/
export let name = undefined;
/**
* Obtain a reference to the input HTML element
* @type {null | HTMLInputElement}
*/
/** Obtain a reference to the input HTML element */
export let ref = null;
import { getContext, onMount } from "svelte";

View file

@ -2,10 +2,7 @@
/** Set to `true` to use the range variant */
export let range = false;
/**
* Set an id to be used by the label element
* @type {string}
*/
/** Set an id to be used by the label element */
export let id = "ccs-" + Math.random().toString(36);
</script>

View file

@ -18,10 +18,7 @@
*/
export let itemToString = (item) => item.text || item.id;
/**
* Specify the selected item index
* @type {number}
*/
/** Specify the selected item index */
export let selectedIndex = -1;
/**
@ -72,10 +69,7 @@
*/
export let translateWithId = undefined;
/**
* Set an id for the list box component
* @type {string}
*/
/** Set an id for the list box component */
export let id = "ccs-" + Math.random().toString(36);
/**
@ -84,10 +78,7 @@
*/
export let name = undefined;
/**
* Obtain a reference to the button HTML element
* @type {null | HTMLButtonElement}
*/
/** Obtain a reference to the button HTML element */
export let ref = null;
import { createEventDispatcher } from "svelte";

View file

@ -33,19 +33,13 @@
/** Specify `tabindex` attribute */
export let tabindex = "0";
/**
* Set an id for the input element
* @type {string}
*/
/** Set an id for the input element */
export let id = "ccs-" + Math.random().toString(36);
/** Specify a name attribute for the input */
export let name = "";
/**
* Obtain a reference to the input HTML element
* @type {null | HTMLInputElement}
*/
/** Obtain a reference to the input HTML element */
export let ref = null;
</script>

View file

@ -32,19 +32,13 @@
/** Specify `tabindex` attribute */
export let tabindex = "0";
/**
* Set an id for the input element
* @type {string}
*/
/** Set an id for the input element */
export let id = "ccs-" + Math.random().toString(36);
/** Specify a name attribute for the input */
export let name = "";
/**
* Obtain a reference to the input HTML element
* @type {null | HTMLInputElement}
*/
/** Obtain a reference to the input HTML element */
export let ref = null;
import { createEventDispatcher } from "svelte";

View file

@ -21,10 +21,7 @@
/** Specify the error body text */
export let errorBody = "";
/**
* Set an id for the top-level element
* @type {string}
*/
/** Set an id for the top-level element */
export let id = "ccs-" + Math.random().toString(36);
/** Specify the file uploader name */

View file

@ -1,8 +1,5 @@
<script>
/**
* Set an id to be used by the label element
* @type {string}
*/
/** Set an id to be used by the label element */
export let id = "ccs-" + Math.random().toString(36);
</script>

View file

@ -2,7 +2,7 @@
/**
* Specify the icon from `carbon-icons-svelte` to render
* Icon size must be 16px (e.g. `Add16`, `Task16`)
* @type {typeof import("carbon-icons-svelte/lib/Add16").default}
* @type {import("carbon-icons-svelte").CarbonIcon}
*/
export let render = undefined;

View file

@ -20,10 +20,7 @@
/** Set to `true` to allow visited styles */
export let visited = false;
/**
* Obtain a reference to the top-level HTML element
* @type {null | HTMLAnchorElement | HTMLParagraphElement}
*/
/** Obtain a reference to the top-level HTML element */
export let ref = null;
</script>

View file

@ -21,16 +21,10 @@
*/
export let translateWithId = (id) => defaultTranslations[id];
/**
* Set an id for the top-level element
* @type {string}
*/
/** Set an id for the top-level element */
export let id = "ccs-" + Math.random().toString(36);
/**
* Obtain a reference to the top-level HTML element
* @type {null | HTMLDivElement}
*/
/** Obtain a reference to the top-level HTML element */
export let ref = null;
import { getContext } from "svelte";

View file

@ -1,14 +1,8 @@
<script>
/**
* Set an id for the top-level element
* @type {string}
*/
/** Set an id for the top-level element */
export let id = "ccs-" + Math.random().toString(36);
/**
* Obtain a reference to the HTML element
* @type {null | HTMLDivElement}
*/
/** Obtain a reference to the HTML element */
export let ref = null;
</script>

View file

@ -24,10 +24,7 @@
*/
export let translateWithId = (id) => defaultTranslations[id];
/**
* Obtain a reference to the top-level HTML element
* @type {null | HTMLElement}
*/
/** Obtain a reference to the top-level HTML element */
export let ref = null;
import { createEventDispatcher, getContext } from "svelte";

View file

@ -11,10 +11,7 @@
/** Specify the label description */
export let description = "Active loading indicator";
/**
* Set an id for the label element
* @type {string}
*/
/** Set an id for the label element */
export let id = "ccs-" + Math.random().toString(36);
$: spinnerRadius = small ? "26.8125" : "37.5";

View file

@ -62,16 +62,10 @@
/** Set to `true` to prevent the modal from closing when clicking outside */
export let preventCloseOnClickOutside = false;
/**
* Set an id for the top-level element
* @type {string}
*/
/** Set an id for the top-level element */
export let id = "ccs-" + Math.random().toString(36);
/**
* Obtain a reference to the top-level HTML element
* @type {null | HTMLDivElement}
*/
/** Obtain a reference to the top-level HTML element */
export let ref = null;
import { createEventDispatcher, onMount, afterUpdate } from "svelte";

View file

@ -96,10 +96,7 @@
/** Specify the list box label */
export let label = "";
/**
* Set an id for the list box component
* @type {string}
*/
/** Set an id for the list box component */
export let id = "ccs-" + Math.random().toString(36);
/**

View file

@ -7,7 +7,7 @@
/**
* Specify the icon from `carbon-icons-svelte` to render
* @type {typeof import("carbon-icons-svelte/lib/Add16").default}
* @type {import("carbon-icons-svelte").CarbonIcon}
*/
export let renderIcon = Close20;

View file

@ -1,4 +1,8 @@
<script>
/**
* @typedef {"increment" | "decrement"} NumberInputTranslationId
*/
/**
* Set the size of the input
* @type {"sm" | "xl"}
@ -71,10 +75,7 @@
decrement: "decrement",
};
/**
* Set an id for the input element
* @type {string}
*/
/** Set an id for the input element */
export let id = "ccs-" + Math.random().toString(36);
/**
@ -83,16 +84,9 @@
*/
export let name = undefined;
/**
* Obtain a reference to the input HTML element
* @type {null | HTMLInputElement} [ref=null]
*/
/** Obtain a reference to the input HTML element */
export let ref = null;
/**
* @typedef {"increment" | "decrement"} NumberInputTranslationId
*/
import { createEventDispatcher, afterUpdate } from "svelte";
import CaretDownGlyph from "carbon-icons-svelte/lib/CaretDownGlyph";
import CaretUpGlyph from "carbon-icons-svelte/lib/CaretUpGlyph";

View file

@ -28,7 +28,7 @@
/**
* Specify the icon from `carbon-icons-svelte` to render
* @type {typeof import("carbon-icons-svelte/lib/Add16").default}
* @type {import("carbon-icons-svelte").CarbonIcon}
*/
export let icon = OverflowMenuVertical16;
@ -41,22 +41,13 @@
/** Specify the ARIA label for the icon */
export let iconDescription = "Open and close list of options";
/**
* Set an id for the button element
* @type {string}
*/
/** Set an id for the button element */
export let id = "ccs-" + Math.random().toString(36);
/**
* Obtain a reference to the trigger button element
* @type {null | HTMLButtonElement}
*/
/** Obtain a reference to the trigger button element */
export let buttonRef = null;
/**
* Obtain a reference to the overflow menu element
* @type {null | HTMLUListElement}
*/
/** Obtain a reference to the overflow menu element */
export let menuRef = null;
import { createEventDispatcher, setContext, afterUpdate } from "svelte";

View file

@ -23,16 +23,10 @@
/** Set to `false` to omit the button `title` attribute */
export let requireTitle = true;
/**
* Set an id for the top-level element
* @type {string}
*/
/** Set an id for the top-level element */
export let id = "ccs-" + Math.random().toString(36);
/**
* Obtain a reference to the HTML element
* @type {null | HTMLAnchorElement | HTMLButtonElement}
*/
/** Obtain a reference to the HTML element */
export let ref = null;
import { getContext, afterUpdate } from "svelte";

View file

@ -61,10 +61,7 @@
export let pageRangeText = (current, total) =>
`of ${total} page${total === 1 ? "" : "s"}`;
/**
* Set an id for the top-level element
* @type {string}
*/
/** Set an id for the top-level element */
export let id = "ccs-" + Math.random().toString(36);
import { createEventDispatcher } from "svelte";

View file

@ -20,10 +20,7 @@
/** Specify the step secondary label */
export let secondaryLabel = "";
/**
* Set an id for the top-level element
* @type {string}
*/
/** Set an id for the top-level element */
export let id = "ccs-" + Math.random().toString(36);
import { getContext } from "svelte";

View file

@ -20,19 +20,13 @@
/** Set to `true` to visually hide the label text */
export let hideLabel = false;
/**
* Set an id for the input element
* @type {string}
*/
/** Set an id for the input element */
export let id = "ccs-" + Math.random().toString(36);
/** Specify a name attribute for the checkbox input */
export let name = "";
/**
* Obtain a reference to the input HTML element
* @type {null | HTMLInputElement}
*/
/** Obtain a reference to the input HTML element */
export let ref = null;
import { getContext } from "svelte";

View file

@ -63,16 +63,10 @@
/** Specify the label text */
export let labelText = "";
/**
* Set an id for the input element
* @type {string}
*/
/** Set an id for the input element */
export let id = "ccs-" + Math.random().toString(36);
/**
* Obtain a reference to the input HTML element
* @type {null | HTMLInputElement}
*/
/** Obtain a reference to the input HTML element */
export let ref = null;
import { createEventDispatcher } from "svelte";

View file

@ -17,10 +17,7 @@
/** Set to `true` to disable the select element */
export let disabled = false;
/**
* Set an id for the select element
* @type {string}
*/
/** Set an id for the select element */
export let id = "ccs-" + Math.random().toString(36);
/**
@ -47,10 +44,7 @@
/** Set to `true` to visually hide the label text */
export let hideLabel = false;
/**
* Obtain a reference to the select HTML element
* @type {null | HTMLSelectElement}
*/
/** Obtain a reference to the select HTML element */
export let ref = null;
import { createEventDispatcher, setContext, afterUpdate } from "svelte";

View file

@ -35,10 +35,7 @@
/** Set to `true` to hide the text input */
export let hideTextInput = false;
/**
* Set an id for the slider div element
* @type {string}
*/
/** Set an id for the slider div element */
export let id = "ccs-" + Math.random().toString(36);
/** Set to `true` to indicate an invalid state */
@ -50,10 +47,7 @@
/** Set a name for the slider element */
export let name = "";
/**
* Obtain a reference to the HTML element
* @type {null | HTMLElement}
*/
/** Obtain a reference to the HTML element */
export let ref = null;
import { createEventDispatcher } from "svelte";

View file

@ -8,19 +8,13 @@
/** Specify the value of the input */
export let value = "value";
/**
* Set an id for the input element
* @type {string}
*/
/** Set an id for the input element */
export let id = "ccs-" + Math.random().toString(36);
/** Specify a name attribute for the input */
export let name = "";
/**
* Obtain a reference to the input HTML element
* @type {null | HTMLInputElement}
*/
/** Obtain a reference to the input HTML element */
export let ref = null;
import { getContext } from "svelte";

View file

@ -14,16 +14,10 @@
/** Specify the tabindex */
export let tabindex = "0";
/**
* Set an id for the top-level element
* @type {string}
*/
/** Set an id for the top-level element */
export let id = "ccs-" + Math.random().toString(36);
/**
* Obtain a reference to the anchor HTML element
* @type {null | HTMLAnchorElement}
*/
/** Obtain a reference to the anchor HTML element */
export let ref = null;
import { getContext } from "svelte";

View file

@ -1,8 +1,5 @@
<script>
/**
* Set an id for the top-level element
* @type {string}
*/
/** Set an id for the top-level element */
export let id = "ccs-" + Math.random().toString(36);
import { getContext } from "svelte";

View file

@ -29,10 +29,7 @@
*/
export let title = "Clear filter";
/**
* Set an id for the filterable tag
* @type {string}
*/
/** Set an id for the filterable tag */
export let id = "ccs-" + Math.random().toString(36);
import Close16 from "carbon-icons-svelte/lib/Close16";

View file

@ -32,10 +32,7 @@
/** Specify the text for the invalid state */
export let invalidText = "";
/**
* Set an id for the textarea element
* @type {string}
*/
/** Set an id for the textarea element */
export let id = "ccs-" + Math.random().toString(36);
/**
@ -44,10 +41,7 @@
*/
export let name = undefined;
/**
* Obtain a reference to the textarea HTML element
* @type {null | HTMLTextAreaElement}
*/
/** Obtain a reference to the textarea HTML element */
export let ref = null;
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";

View file

@ -53,10 +53,7 @@
/** Specify the text for the invalid state */
export let invalidText = "";
/**
* Set an id for the input element
* @type {string}
*/
/** Set an id for the input element */
export let id = "ccs-" + Math.random().toString(36);
/**
@ -65,10 +62,7 @@
*/
export let name = undefined;
/**
* Obtain a reference to the input HTML element
* @type {null | HTMLInputElement}
*/
/** Obtain a reference to the input HTML element */
export let ref = null;
import { getContext } from "svelte";

View file

@ -23,10 +23,7 @@
/** Specify the helper text */
export let helperText = "";
/**
* Set an id for the input element
* @type {string}
*/
/** Set an id for the input element */
export let id = "ccs-" + Math.random().toString(36);
/**
@ -53,10 +50,7 @@
/** Specify the warning state text */
export let warnText = "";
/**
* Obtain a reference to the input HTML element
* @type {null | HTMLInputElement}
*/
/** Obtain a reference to the input HTML element */
export let ref = null;
/** Set to `true` to mark the field as required */

View file

@ -20,16 +20,10 @@
/** Specify the tabindex */
export let tabindex = "0";
/**
* Set an id for the top-level div element
* @type {string}
*/
/** Set an id for the top-level div element */
export let id = "ccs-" + Math.random().toString(36);
/**
* Obtain a reference to the top-level element
* @type {null | HTMLDivElement}
*/
/** Obtain a reference to the top-level element */
export let ref = null;
import { afterUpdate } from "svelte";

View file

@ -14,10 +14,7 @@
/** Specify the ARIA label for the radio tile checkmark icon */
export let iconDescription = "Tile checkmark";
/**
* Set an id for the input element
* @type {string}
*/
/** Set an id for the input element */
export let id = "ccs-" + Math.random().toString(36);
/** Specify a name attribute for the input */

View file

@ -17,10 +17,7 @@
/** Specify the ARIA label for the selectable tile checkmark icon */
export let iconDescription = "Tile checkmark";
/**
* Set an id for the input element
* @type {string}
*/
/** Set an id for the input element */
export let id = "ccs-" + Math.random().toString(36);
/**
@ -29,10 +26,7 @@
*/
export let name = "";
/**
* Obtain a reference to the input HTML element
* @type {null | HTMLInputElement}
*/
/** Obtain a reference to the input HTML element */
export let ref = null;
import { createEventDispatcher } from "svelte";

View file

@ -44,10 +44,7 @@
/** Specify the invalid state text */
export let invalidText = "";
/**
* Set an id for the input element
* @type {string}
*/
/** Set an id for the input element */
export let id = "ccs-" + Math.random().toString(36);
/**
@ -56,10 +53,7 @@
*/
export let name = undefined;
/**
* Obtain a reference to the input HTML element
* @type {null | HTMLInputElement}
*/
/** Obtain a reference to the input HTML element */
export let ref = null;
</script>

View file

@ -17,10 +17,7 @@
*/
export let hideLabel = true;
/**
* Set an id for the select element
* @type {string}
*/
/** Set an id for the select element */
export let id = "ccs-" + Math.random().toString(36);
/**
@ -29,10 +26,7 @@
*/
export let name = undefined;
/**
* Obtain a reference to the select HTML element
* @type {null | HTMLSelectElement}
*/
/** Obtain a reference to the select HTML element */
export let ref = null;
import { setContext } from "svelte";

View file

@ -14,10 +14,7 @@
/** Specify the label text */
export let labelText = "";
/**
* Set an id for the input element
* @type {string}
*/
/** Set an id for the input element */
export let id = "ccs-" + Math.random().toString(36);
/**

View file

@ -2,10 +2,7 @@
/** Specify the label text */
export let labelText = "";
/**
* Set an id for the input element
* @type {string}
*/
/** Set an id for the input element */
export let id = "ccs-" + Math.random().toString(36);
</script>

View file

@ -14,10 +14,7 @@
/** Specify the label text */
export let labelText = "";
/**
* Set an id for the input element
* @type {string}
*/
/** Set an id for the input element */
export let id = "ccs-" + Math.random().toString(36);
/**

View file

@ -2,10 +2,7 @@
/** Specify the label text */
export let labelText = "";
/**
* Set an id for the input element
* @type {string}
*/
/** Set an id for the input element */
export let id = "ccs-" + Math.random().toString(36);
</script>

View file

@ -20,7 +20,7 @@
/**
* Specify the icon from `carbon-icons-svelte` to render for the tooltip button
* Icon size must be 16px (e.g. `Add16`, `Task16`)
* @type {typeof import("carbon-icons-svelte/lib/Add16").default} [icon=Information16]
* @type {import("carbon-icons-svelte").CarbonIcon} [icon=Information16]
*/
export let icon = Information16;
@ -48,22 +48,13 @@
/** Set the tooltip button text */
export let triggerText = "";
/**
* Obtain a reference to the trigger text HTML element
* @type {null | HTMLElement}
*/
/** Obtain a reference to the trigger text HTML element */
export let ref = null;
/**
* Obtain a reference to the tooltip HTML element
* @type {null | HTMLElement}
*/
/** Obtain a reference to the tooltip HTML element */
export let refTooltip = null;
/**
* Obtain a reference to the icon HTML element
* @type {null | HTMLElement}
*/
/** Obtain a reference to the icon HTML element */
export let refIcon = null;
import { createEventDispatcher, afterUpdate } from "svelte";

View file

@ -14,16 +14,10 @@
*/
export let direction = "bottom";
/**
* Set an id for the tooltip div element
* @type {string}
*/
/** Set an id for the tooltip div element */
export let id = "ccs-" + Math.random().toString(36);
/**
* Obtain a reference to the button HTML element
* @type {null | HTMLButtonElement}
*/
/** Obtain a reference to the button HTML element */
export let ref = null;
let visible = false;

View file

@ -14,16 +14,10 @@
*/
export let direction = "bottom";
/**
* Set an id for the span element
* @type {string}
*/
/** Set an id for the span element */
export let id = "ccs-" + Math.random().toString(36);
/**
* Obtain a reference to the button HTML element
* @type {null | HTMLButtonElement} [ref=null]
*/
/** Obtain a reference to the button HTML element */
export let ref = null;
let hidden = false;

View file

@ -29,10 +29,7 @@
*/
export let platformName = "";
/**
* Obtain a reference to the HTML anchor element
* @type {null | HTMLAnchorElement}
*/
/** Obtain a reference to the HTML anchor element */
export let ref = null;
import HamburgerMenu from "../SideNav/HamburgerMenu.svelte";

View file

@ -4,7 +4,7 @@
/**
* Specify the icon props
* @type {{ render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }}
* @type {{ render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; }}
*/
export let icon = undefined;
@ -15,10 +15,7 @@
*/
export let text = undefined;
/**
* Obtain a reference to the button HTML element
* @type {null | HTMLButtonElement}
*/
/** Obtain a reference to the button HTML element */
export let ref = null;
import { createEventDispatcher } from "svelte";

View file

@ -10,14 +10,11 @@
/**
* Specify the icon props
* @type {{ render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }}
* @type {{ render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; }}
*/
export let icon = undefined;
/**
* Obtain a reference to the HTML anchor element
* @type {null | HTMLAnchorElement}
*/
/** Obtain a reference to the HTML anchor element */
export let ref = null;
import { Icon } from "../../Icon";

View file

@ -11,10 +11,7 @@
*/
export let text = undefined;
/**
* Obtain a reference to the HTML anchor element
* @type {null | HTMLAnchorElement}
*/
/** Obtain a reference to the HTML anchor element */
export let ref = null;
</script>

View file

@ -11,10 +11,7 @@
*/
export let text = undefined;
/**
* Obtain a reference to the HTML anchor element
* @type {null | HTMLAnchorElement}
*/
/** Obtain a reference to the HTML anchor element */
export let ref = null;
/** Specify the ARIA label for the chevron icon */

View file

@ -5,10 +5,7 @@
*/
export let href = undefined;
/**
* Obtain a reference to the HTML anchor element
* @type {null | HTMLAnchorElement}
*/
/** Obtain a reference to the HTML anchor element */
export let ref = null;
</script>

View file

@ -4,14 +4,11 @@
/**
* Specify the icon to render
* @type {typeof import("carbon-icons-svelte/lib/Add16").default}
* @type {import("carbon-icons-svelte").CarbonIcon}
*/
export let icon = undefined;
/**
* Obtain a reference to the HTML button element
* @type {null | HTMLButtonElement}
*/
/** Obtain a reference to the HTML button element */
export let ref = null;
</script>

View file

@ -8,10 +8,7 @@
/** Set to `true` to toggle the open state */
export let isOpen = false;
/**
* Obtain a reference to the HTML button element
* @type {null | HTMLButtonElement}
*/
/** Obtain a reference to the HTML button element */
export let ref = null;
import { fly } from "svelte/transition";

View file

@ -16,14 +16,11 @@
/**
* Specify the icon props
* @type {{ render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }}
* @type {{ render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; }}
*/
export let icon = undefined;
/**
* Obtain a reference to the HTML anchor element
* @type {null | HTMLAnchorElement}
*/
/** Obtain a reference to the HTML anchor element */
export let ref = null;
import { Icon } from "../../Icon";

View file

@ -10,14 +10,11 @@
/**
* Specify the icon props
* @type {{ render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }}
* @type {{ render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; }}
*/
export let icon = undefined;
/**
* Obtain a reference to the HTML button element
* @type {null | HTMLButtonElement}
*/
/** Obtain a reference to the HTML button element */
export let ref = null;
import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";

View file

@ -17,10 +17,7 @@
*/
export let text = undefined;
/**
* Obtain a reference to the HTML anchor element
* @type {null | HTMLAnchorElement}
*/
/** Obtain a reference to the HTML anchor element */
export let ref = null;
</script>

View file

@ -1,31 +1,32 @@
/// <reference types="svelte" />
export interface AccordionProps {
/**
* Specify alignment of accordion item chevron icon
* @default "end"
*/
align?: "start" | "end";
/**
* Specify the size of the accordion
*/
size?: "sm" | "xl";
/**
* Set to `true` to disable the accordion
* @default false
*/
disabled?: boolean;
/**
* Set to `true` to display the skeleton state
* @default false
*/
skeleton?: boolean;
}
export default class Accordion {
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["ul"]> & {
/**
* Specify alignment of accordion item chevron icon
* @default "end"
*/
align?: "start" | "end";
/**
* Specify the size of the accordion
*/
size?: "sm" | "xl";
/**
* Set to `true` to disable the accordion
* @default false
*/
disabled?: boolean;
/**
* Set to `true` to display the skeleton state
* @default false
*/
skeleton?: boolean;
};
$$prop_def: AccordionProps;
$$slot_def: {
default: {};
};

View file

@ -1,33 +1,34 @@
/// <reference types="svelte" />
export interface AccordionItemProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
/**
* Specify the title of the accordion item heading
* Alternatively, use the named slot "title" (e.g. <div slot="title">...</div>)
* @default "title"
*/
title?: string;
/**
* Set to `true` to open the first accordion item
* @default false
*/
open?: boolean;
/**
* Set to `true` to disable the accordion item
* @default false
*/
disabled?: boolean;
/**
* Specify the ARIA label for the accordion item chevron icon
* @default "Expand/Collapse"
*/
iconDescription?: string;
}
export default class AccordionItem {
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> & {
/**
* Specify the title of the accordion item heading
* Alternatively, use the named slot "title" (e.g. <div slot="title">...</div>)
* @default "title"
*/
title?: string;
/**
* Set to `true` to open the first accordion item
* @default false
*/
open?: boolean;
/**
* Set to `true` to disable the accordion item
* @default false
*/
disabled?: boolean;
/**
* Specify the ARIA label for the accordion item chevron icon
* @default "Expand/Collapse"
*/
iconDescription?: string;
};
$$prop_def: AccordionItemProps;
$$slot_def: {
default: {};
title: {};

View file

@ -1,31 +1,32 @@
/// <reference types="svelte" />
export interface AccordionSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["ul"]> {
/**
* Specify the number of accordion items to render
* @default 4
*/
count?: number;
/**
* Specify alignment of accordion item chevron icon
* @default "end"
*/
align?: "start" | "end";
/**
* Specify the size of the accordion
*/
size?: "sm" | "xl";
/**
* Set to `false` to close the first accordion item
* @default true
*/
open?: boolean;
}
export default class AccordionSkeleton {
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["ul"]> & {
/**
* Specify the number of accordion items to render
* @default 4
*/
count?: number;
/**
* Specify alignment of accordion item chevron icon
* @default "end"
*/
align?: "start" | "end";
/**
* Specify the size of the accordion
*/
size?: "sm" | "xl";
/**
* Set to `false` to close the first accordion item
* @default true
*/
open?: boolean;
};
$$prop_def: AccordionSkeletonProps;
$$slot_def: {};
$on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

View file

@ -1,14 +1,15 @@
/// <reference types="svelte" />
export default class AspectRatio {
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
/**
* Specify the aspect ratio
* @default "2x1"
*/
ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2";
};
export interface AspectRatioProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Specify the aspect ratio
* @default "2x1"
*/
ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2";
}
export default class AspectRatio {
$$prop_def: AspectRatioProps;
$$slot_def: {
default: {};
};

View file

@ -1,20 +1,21 @@
/// <reference types="svelte" />
export interface BreadcrumbProps {
/**
* Set to `true` to hide the breadcrumb trailing slash
* @default false
*/
noTrailingSlash?: boolean;
/**
* Set to `true` to display skeleton state
* @default false
*/
skeleton?: boolean;
}
export default class Breadcrumb {
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["nav"]> & {
/**
* Set to `true` to hide the breadcrumb trailing slash
* @default false
*/
noTrailingSlash?: boolean;
/**
* Set to `true` to display skeleton state
* @default false
*/
skeleton?: boolean;
};
$$prop_def: BreadcrumbProps;
$$slot_def: {
default: {};
};

View file

@ -1,19 +1,20 @@
/// <reference types="svelte" />
export interface BreadcrumbItemProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
/**
* Set the `href` to use an anchor link
*/
href?: string;
/**
* Set to `true` if the breadcrumb item represents the current page
* @default false
*/
isCurrentPage?: boolean;
}
export default class BreadcrumbItem {
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> & {
/**
* Set the `href` to use an anchor link
*/
href?: string;
/**
* Set to `true` if the breadcrumb item represents the current page
* @default false
*/
isCurrentPage?: boolean;
};
$$prop_def: BreadcrumbItemProps;
$$slot_def: {
default: {};
};

View file

@ -1,20 +1,21 @@
/// <reference types="svelte" />
export interface BreadcrumbSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Set to `true` to hide the breadcrumb trailing slash
* @default false
*/
noTrailingSlash?: boolean;
/**
* Specify the number of breadcrumb items to render
* @default 3
*/
count?: number;
}
export default class BreadcrumbSkeleton {
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
/**
* Set to `true` to hide the breadcrumb trailing slash
* @default false
*/
noTrailingSlash?: boolean;
/**
* Specify the number of breadcrumb items to render
* @default 3
*/
count?: number;
};
$$prop_def: BreadcrumbSkeletonProps;
$$slot_def: {};
$on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

View file

@ -1,89 +1,90 @@
/// <reference types="svelte" />
export interface ButtonProps {
/**
* Specify the kind of button
* @default "primary"
*/
kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost";
/**
* Specify the size of button
* @default "default"
*/
size?: "default" | "field" | "small";
/**
* Set to `true` for the icon-only variant
* @default false
*/
hasIconOnly?: boolean;
/**
* Specify the icon from `carbon-icons-svelte` to render
*/
icon?: import("carbon-icons-svelte").CarbonIcon;
/**
* Specify the ARIA label for the button icon
*/
iconDescription?: string;
/**
* Set the alignment of the tooltip relative to the icon
* `hasIconOnly` must be set to `true`
*/
tooltipAlignment?: "start" | "center" | "end";
/**
* Set the position of the tooltip relative to the icon
*/
tooltipPosition?: "top" | "right" | "bottom" | "left";
/**
* Set to `true` to render a custom HTML element
* Props are destructured as `props` in the default slot (e.g. <Button let:props><div {...props}>...</div></Button>)
* @default false
*/
as?: boolean;
/**
* Set to `true` to display the skeleton state
* @default false
*/
skeleton?: boolean;
/**
* Set to `true` to disable the button
* @default false
*/
disabled?: boolean;
/**
* Set the `href` to use an anchor link
*/
href?: string;
/**
* Specify the tabindex
* @default "0"
*/
tabindex?: string;
/**
* Specify the `type` attribute for the button element
* @default "button"
*/
type?: string;
/**
* Obtain a reference to the HTML element
* @default null
*/
ref?: null | HTMLAnchorElement | HTMLButtonElement;
}
export default class Button {
$$prop_def: {
/**
* Specify the kind of button
* @default "primary"
*/
kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost";
/**
* Specify the size of button
* @default "default"
*/
size?: "default" | "field" | "small";
/**
* Set to `true` for the icon-only variant
* @default false
*/
hasIconOnly?: boolean;
/**
* Specify the icon from `carbon-icons-svelte` to render
*/
icon?: typeof import("carbon-icons-svelte/lib/Add16").default;
/**
* Specify the ARIA label for the button icon
*/
iconDescription?: string;
/**
* Set the alignment of the tooltip relative to the icon
* `hasIconOnly` must be set to `true`
*/
tooltipAlignment?: "start" | "center" | "end";
/**
* Set the position of the tooltip relative to the icon
*/
tooltipPosition?: "top" | "right" | "bottom" | "left";
/**
* Set to `true` to render a custom HTML element
* Props are destructured as `props` in the default slot (e.g. <Button let:props><div {...props}>...</div></Button>)
* @default false
*/
as?: boolean;
/**
* Set to `true` to display the skeleton state
* @default false
*/
skeleton?: boolean;
/**
* Set to `true` to disable the button
* @default false
*/
disabled?: boolean;
/**
* Set the `href` to use an anchor link
*/
href?: string;
/**
* Specify the tabindex
* @default "0"
*/
tabindex?: string;
/**
* Specify the `type` attribute for the button element
* @default "button"
*/
type?: string;
/**
* Obtain a reference to the HTML element
* @default null
*/
ref?: null | HTMLAnchorElement | HTMLButtonElement;
};
$$prop_def: ButtonProps;
$$slot_def: {
default: { props: undefined };
};

View file

@ -1,14 +1,15 @@
/// <reference types="svelte" />
export default class ButtonSet {
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
/**
* Set to `true` to stack the buttons vertically
* @default false
*/
stacked?: boolean;
};
export interface ButtonSetProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Set to `true` to stack the buttons vertically
* @default false
*/
stacked?: boolean;
}
export default class ButtonSet {
$$prop_def: ButtonSetProps;
$$slot_def: {
default: {};
};

View file

@ -1,25 +1,26 @@
/// <reference types="svelte" />
export interface ButtonSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
/**
* Set the `href` to use an anchor link
*/
href?: string;
/**
* Specify the size of button skeleton
* @default "default"
*/
size?: "default" | "field" | "small";
/**
* Set to `true` to use the small variant
* @default false
*/
small?: boolean;
}
export default class ButtonSkeleton {
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
/**
* Set the `href` to use an anchor link
*/
href?: string;
/**
* Specify the size of button skeleton
* @default "default"
*/
size?: "default" | "field" | "small";
/**
* Set to `true` to use the small variant
* @default false
*/
small?: boolean;
};
$$prop_def: ButtonSkeletonProps;
$$slot_def: {};
$on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

View file

@ -1,72 +1,74 @@
/// <reference types="svelte" />
export interface CheckboxProps {
/**
* Specify whether the checkbox is checked
* @default false
*/
checked?: boolean;
/**
* Specify whether the checkbox is indeterminate
* @default false
*/
indeterminate?: boolean;
/**
* Set to `true` to display the skeleton state
* @default false
*/
skeleton?: boolean;
/**
* Set to `true` for the checkbox to be read-only
* @default false
*/
readonly?: boolean;
/**
* Set to `true` to disable the checkbox
* @default false
*/
disabled?: boolean;
/**
* Specify the label text
* @default ""
*/
labelText?: string;
/**
* Set to `true` to visually hide the label text
* @default false
*/
hideLabel?: boolean;
/**
* Set a name for the input element
* @default ""
*/
name?: string;
/**
* Specify the title attribute for the label element
*/
title?: string;
/**
* Set an id for the input label
* @default "ccs-" + Math.random().toString(36)
*/
id?: string;
/**
* Obtain a reference to the input HTML element
* @default null
*/
ref?: null | HTMLInputElement;
}
export default class Checkbox {
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
/**
* Specify whether the checkbox is checked
* @default false
*/
checked?: boolean;
/**
* Specify whether the checkbox is indeterminate
* @default false
*/
indeterminate?: boolean;
/**
* Set to `true` to display the skeleton state
* @default false
*/
skeleton?: boolean;
/**
* Set to `true` for the checkbox to be read-only
* @default false
*/
readonly?: boolean;
/**
* Set to `true` to disable the checkbox
* @default false
*/
disabled?: boolean;
/**
* Specify the label text
* @default ""
*/
labelText?: string;
/**
* Set to `true` to visually hide the label text
* @default false
*/
hideLabel?: boolean;
/**
* Set a name for the input element
* @default ""
*/
name?: string;
/**
* Specify the title attribute for the label element
*/
title?: string;
/**
* Set an id for the input label
*/
id?: string;
/**
* Obtain a reference to the input HTML element
* @default null
*/
ref?: null | HTMLInputElement;
};
$$prop_def: CheckboxProps;
$$slot_def: {};
$on(eventname: "check", cb: (event: CustomEvent<boolean>) => void): () => void;

View file

@ -1,8 +1,9 @@
/// <reference types="svelte" />
export default class CheckboxSkeleton {
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {};
export interface CheckboxSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {}
export default class CheckboxSkeleton {
$$prop_def: CheckboxSkeletonProps;
$$slot_def: {};
$on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

View file

@ -1,104 +1,106 @@
/// <reference types="svelte" />
export interface CodeSnippetProps {
/**
* Set the type of code snippet
* @default "single"
*/
type?: "single" | "inline" | "multi";
/**
* Set the code snippet text
* Alternatively, use the default slot (e.g. <CodeSnippet>{`code`}</CodeSnippet>)
*/
code?: string;
/**
* Set to `true` to expand a multi-line code snippet (type="multi")
* @default false
*/
expanded?: boolean;
/**
* Set to `true` to hide the copy button
* @default false
*/
hideCopyButton?: boolean;
/**
* Set to `true` to wrap the text
* Note that `type` must be "multi"
* @default false
*/
wrapText?: boolean;
/**
* Set to `true` to enable the light variant
* @default false
*/
light?: boolean;
/**
* Set to `true` to display the skeleton state
* @default false
*/
skeleton?: boolean;
/**
* Specify the ARIA label for the copy button icon
*/
copyButtonDescription?: string;
/**
* Specify the ARIA label of the copy button
*/
copyLabel?: string;
/**
* Specify the feedback text displayed when clicking the snippet
* @default "Copied!"
*/
feedback?: string;
/**
* Set the timeout duration (ms) to display feedback text
* @default 2000
*/
feedbackTimeout?: number;
/**
* Specify the show less text
* `type` must be "multi"
* @default "Show less"
*/
showLessText?: string;
/**
* Specify the show more text
* `type` must be "multi"
* @default "Show more"
*/
showMoreText?: string;
/**
* Set to `true` to enable the show more/less button
* @default false
*/
showMoreLess?: boolean;
/**
* Set an id for the code element
* @default "ccs-" + Math.random().toString(36)
*/
id?: string;
/**
* Obtain a reference to the pre HTML element
* @default null
*/
ref?: null | HTMLPreElement;
}
export default class CodeSnippet {
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
/**
* Set the type of code snippet
* @default "single"
*/
type?: "single" | "inline" | "multi";
/**
* Set the code snippet text
* Alternatively, use the default slot (e.g. <CodeSnippet>{`code`}</CodeSnippet>)
*/
code?: string;
/**
* Set to `true` to expand a multi-line code snippet (type="multi")
* @default false
*/
expanded?: boolean;
/**
* Set to `true` to hide the copy button
* @default false
*/
hideCopyButton?: boolean;
/**
* Set to `true` to wrap the text
* Note that `type` must be "multi"
* @default false
*/
wrapText?: boolean;
/**
* Set to `true` to enable the light variant
* @default false
*/
light?: boolean;
/**
* Set to `true` to display the skeleton state
* @default false
*/
skeleton?: boolean;
/**
* Specify the ARIA label for the copy button icon
*/
copyButtonDescription?: string;
/**
* Specify the ARIA label of the copy button
*/
copyLabel?: string;
/**
* Specify the feedback text displayed when clicking the snippet
* @default "Copied!"
*/
feedback?: string;
/**
* Set the timeout duration (ms) to display feedback text
* @default 2000
*/
feedbackTimeout?: number;
/**
* Specify the show less text
* `type` must be "multi"
* @default "Show less"
*/
showLessText?: string;
/**
* Specify the show more text
* `type` must be "multi"
* @default "Show more"
*/
showMoreText?: string;
/**
* Set to `true` to enable the show more/less button
* @default false
*/
showMoreLess?: boolean;
/**
* Set an id for the code element
*/
id?: string;
/**
* Obtain a reference to the pre HTML element
* @default null
*/
ref?: null | HTMLPreElement;
};
$$prop_def: CodeSnippetProps;
$$slot_def: {
default: {};
};

View file

@ -1,14 +1,15 @@
/// <reference types="svelte" />
export default class CodeSnippetSkeleton {
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
/**
* Set the type of code snippet
* @default "single"
*/
type?: "single" | "inline" | "multi";
};
export interface CodeSnippetSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Set the type of code snippet
* @default "single"
*/
type?: "single" | "inline" | "multi";
}
export default class CodeSnippetSkeleton {
$$prop_def: CodeSnippetSkeletonProps;
$$slot_def: {};
$on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

View file

@ -5,118 +5,121 @@ interface ComboBoxItem {
text: string;
}
export interface ComboBoxProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Set the combobox items
* @default []
*/
items?: ComboBoxItem[];
/**
* Override the display of a combobox item
* @default (item) => item.text || item.id
*/
itemToString?: (item: ComboBoxItem) => string;
/**
* Set the selected item by value index
* @default -1
*/
selectedIndex?: number;
/**
* Specify the selected combobox value
* @default ""
*/
value?: string;
/**
* Set the size of the combobox
*/
size?: "sm" | "xl";
/**
* Set to `true` to disable the combobox
* @default false
*/
disabled?: boolean;
/**
* Specify the title text of the combobox
* @default ""
*/
titleText?: string;
/**
* Specify the placeholder text
* @default ""
*/
placeholder?: string;
/**
* Specify the helper text
* @default ""
*/
helperText?: string;
/**
* Specify the invalid state text
* @default ""
*/
invalidText?: string;
/**
* Set to `true` to indicate an invalid state
* @default false
*/
invalid?: boolean;
/**
* Set to `true` to enable the light variant
* @default false
*/
light?: boolean;
/**
* Set to `true` to open the combobox menu dropdown
* @default false
*/
open?: boolean;
/**
* Determine if an item should be filtered given the current combobox value
* @default () => true
*/
shouldFilterItem?: (item: ComboBoxItem, value: string) => boolean;
/**
* Override the default translation ids
*/
translateWithId?: (id: any) => string;
/**
* Set an id for the list box component
* @default "ccs-" + Math.random().toString(36)
*/
id?: string;
/**
* Specify a name attribute for the input
*/
name?: string;
/**
* Obtain a reference to the input HTML element
* @default null
*/
ref?: null | HTMLInputElement;
/**
* Obtain a reference to the list HTML element
* @default null
*/
listRef?: null | HTMLDivElement;
}
export default class ComboBox {
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
/**
* Set the combobox items
* @default []
*/
items?: ComboBoxItem[];
/**
* Override the display of a combobox item
* @default (item) => item.text || item.id
*/
itemToString?: (item: ComboBoxItem) => string;
/**
* Set the selected item by value index
*/
selectedIndex?: number;
/**
* Specify the selected combobox value
* @default ""
*/
value?: string;
/**
* Set the size of the combobox
*/
size?: "sm" | "xl";
/**
* Set to `true` to disable the combobox
* @default false
*/
disabled?: boolean;
/**
* Specify the title text of the combobox
* @default ""
*/
titleText?: string;
/**
* Specify the placeholder text
* @default ""
*/
placeholder?: string;
/**
* Specify the helper text
* @default ""
*/
helperText?: string;
/**
* Specify the invalid state text
* @default ""
*/
invalidText?: string;
/**
* Set to `true` to indicate an invalid state
* @default false
*/
invalid?: boolean;
/**
* Set to `true` to enable the light variant
* @default false
*/
light?: boolean;
/**
* Set to `true` to open the combobox menu dropdown
* @default false
*/
open?: boolean;
/**
* Determine if an item should be filtered given the current combobox value
* @default () => true
*/
shouldFilterItem?: (item: ComboBoxItem, value: string) => boolean;
/**
* Override the default translation ids
*/
translateWithId?: (id: any) => string;
/**
* Set an id for the list box component
*/
id?: string;
/**
* Specify a name attribute for the input
*/
name?: string;
/**
* Obtain a reference to the input HTML element
* @default null
*/
ref?: null | HTMLInputElement;
/**
* Obtain a reference to the list HTML element
* @default null
*/
listRef?: null | HTMLDivElement;
};
$$prop_def: ComboBoxProps;
$$slot_def: {};
$on(

View file

@ -1,49 +1,50 @@
/// <reference types="svelte" />
export interface ComposedModalProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Set the size of the composed modal
*/
size?: "xs" | "sm" | "lg";
/**
* Set to `true` to open the modal
* @default false
*/
open?: boolean;
/**
* Set to `true` to use the danger variant
* @default false
*/
danger?: boolean;
/**
* Set to `true` to prevent the modal from closing when clicking outside
* @default false
*/
preventCloseOnClickOutside?: boolean;
/**
* Specify a class for the inner modal
* @default ""
*/
containerClass?: string;
/**
* Specify a selector to be focused when opening the modal
* @default "[data-modal-primary-focus]"
*/
selectorPrimaryFocus?: string;
/**
* Obtain a reference to the top-level HTML element
* @default null
*/
ref?: null | HTMLDivElement;
}
export default class ComposedModal {
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
/**
* Set the size of the composed modal
*/
size?: "xs" | "sm" | "lg";
/**
* Set to `true` to open the modal
* @default false
*/
open?: boolean;
/**
* Set to `true` to use the danger variant
* @default false
*/
danger?: boolean;
/**
* Set to `true` to prevent the modal from closing when clicking outside
* @default false
*/
preventCloseOnClickOutside?: boolean;
/**
* Specify a class for the inner modal
* @default ""
*/
containerClass?: string;
/**
* Specify a selector to be focused when opening the modal
* @default "[data-modal-primary-focus]"
*/
selectorPrimaryFocus?: string;
/**
* Obtain a reference to the top-level HTML element
* @default null
*/
ref?: null | HTMLDivElement;
};
$$prop_def: ComposedModalProps;
$$slot_def: {
default: {};
};

View file

@ -1,20 +1,21 @@
/// <reference types="svelte" />
export interface ModalBodyProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Set to `true` if the modal contains form elements
* @default false
*/
hasForm?: boolean;
/**
* Set to `true` if the modal contains scrolling content
* @default false
*/
hasScrollingContent?: boolean;
}
export default class ModalBody {
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
/**
* Set to `true` if the modal contains form elements
* @default false
*/
hasForm?: boolean;
/**
* Set to `true` if the modal contains scrolling content
* @default false
*/
hasScrollingContent?: boolean;
};
$$prop_def: ModalBodyProps;
$$slot_def: {
default: {};
};

View file

@ -1,42 +1,43 @@
/// <reference types="svelte" />
export interface ModalFooterProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Specify the primary button text
* @default ""
*/
primaryButtonText?: string;
/**
* Set to `true` to disable the primary button
* @default false
*/
primaryButtonDisabled?: boolean;
/**
* Specify a class for the primary button
*/
primaryClass?: string;
/**
* Specify the secondary button text
* @default ""
*/
secondaryButtonText?: string;
/**
* Specify a class for the secondary button
*/
secondaryClass?: string;
/**
* Set to `true` to use the danger variant
* @default false
*/
danger?: boolean;
}
export default class ModalFooter {
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
/**
* Specify the primary button text
* @default ""
*/
primaryButtonText?: string;
/**
* Set to `true` to disable the primary button
* @default false
*/
primaryButtonDisabled?: boolean;
/**
* Specify a class for the primary button
*/
primaryClass?: string;
/**
* Specify the secondary button text
* @default ""
*/
secondaryButtonText?: string;
/**
* Specify a class for the secondary button
*/
secondaryClass?: string;
/**
* Set to `true` to use the danger variant
* @default false
*/
danger?: boolean;
};
$$prop_def: ModalFooterProps;
$$slot_def: {
default: {};
};

View file

@ -1,50 +1,51 @@
/// <reference types="svelte" />
export interface ModalHeaderProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Specify the modal title
* @default ""
*/
title?: string;
/**
* Specify the modal label
* @default ""
*/
label?: string;
/**
* Specify the label class
* @default ""
*/
labelClass?: string;
/**
* Specify the title class
* @default ""
*/
titleClass?: string;
/**
* Specify the close class
* @default ""
*/
closeClass?: string;
/**
* Specify the close icon class
* @default ""
*/
closeIconClass?: string;
/**
* Specify the ARIA label for the close icon
* @default "Close"
*/
iconDescription?: string;
}
export default class ModalHeader {
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
/**
* Specify the modal title
* @default ""
*/
title?: string;
/**
* Specify the modal label
* @default ""
*/
label?: string;
/**
* Specify the label class
* @default ""
*/
labelClass?: string;
/**
* Specify the title class
* @default ""
*/
titleClass?: string;
/**
* Specify the close class
* @default ""
*/
closeClass?: string;
/**
* Specify the close icon class
* @default ""
*/
closeIconClass?: string;
/**
* Specify the ARIA label for the close icon
* @default "Close"
*/
iconDescription?: string;
};
$$prop_def: ModalHeaderProps;
$$slot_def: {
default: {};
};

View file

@ -1,25 +1,26 @@
/// <reference types="svelte" />
export interface ContentSwitcherProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Set the selected index of the switch item
* @default 0
*/
selectedIndex?: number;
/**
* Set to `true` to enable the light variant
* @default false
*/
light?: boolean;
/**
* Specify the size of the content switcher
*/
size?: "sm" | "xl";
}
export default class ContentSwitcher {
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
/**
* Set the selected index of the switch item
* @default 0
*/
selectedIndex?: number;
/**
* Set to `true` to enable the light variant
* @default false
*/
light?: boolean;
/**
* Specify the size of the content switcher
*/
size?: "sm" | "xl";
};
$$prop_def: ContentSwitcherProps;
$$slot_def: {
default: {};
};

View file

@ -1,38 +1,40 @@
/// <reference types="svelte" />
export interface SwitchProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
/**
* Specify the switch text
* Alternatively, use the named slot "text" (e.g. <span slot="text">...</span>)
* @default "Provide text"
*/
text?: string;
/**
* Set to `true` for the switch to be selected
* @default false
*/
selected?: boolean;
/**
* Set to `true` to disable the switch
* @default false
*/
disabled?: boolean;
/**
* Set an id for the button element
* @default "ccs-" + Math.random().toString(36)
*/
id?: string;
/**
* Obtain a reference to the button HTML element
* @default null
*/
ref?: null | HTMLButtonElement;
}
export default class Switch {
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> & {
/**
* Specify the switch text
* Alternatively, use the named slot "text" (e.g. <span slot="text">...</span>)
* @default "Provide text"
*/
text?: string;
/**
* Set to `true` for the switch to be selected
* @default false
*/
selected?: boolean;
/**
* Set to `true` to disable the switch
* @default false
*/
disabled?: boolean;
/**
* Set an id for the button element
*/
id?: string;
/**
* Obtain a reference to the button HTML element
* @default null
*/
ref?: null | HTMLButtonElement;
};
$$prop_def: SwitchProps;
$$slot_def: {
default: {};
};

41
types/Copy/Copy.d.ts vendored
View file

@ -1,26 +1,27 @@
/// <reference types="svelte" />
export interface CopyProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
/**
* Set the feedback text shown after clicking the button
* @default "Copied!"
*/
feedback?: string;
/**
* Set the timeout duration (ms) to display feedback text
* @default 2000
*/
feedbackTimeout?: number;
/**
* Obtain a reference to the button HTML element
* @default null
*/
ref?: null | HTMLButtonElement;
}
export default class Copy {
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> & {
/**
* Set the feedback text shown after clicking the button
* @default "Copied!"
*/
feedback?: string;
/**
* Set the timeout duration (ms) to display feedback text
* @default 2000
*/
feedbackTimeout?: number;
/**
* Obtain a reference to the button HTML element
* @default null
*/
ref?: null | HTMLButtonElement;
};
$$prop_def: CopyProps;
$$slot_def: {
default: {};
};

View file

@ -1,14 +1,15 @@
/// <reference types="svelte" />
export default class CopyButton {
$$prop_def: {
/**
* Set the title and ARIA label for the copy button
* @default "Copy to clipboard"
*/
iconDescription?: string;
};
export interface CopyButtonProps {
/**
* Set the title and ARIA label for the copy button
* @default "Copy to clipboard"
*/
iconDescription?: string;
}
export default class CopyButton {
$$prop_def: CopyButtonProps;
$$slot_def: {};
$on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

View file

@ -11,106 +11,107 @@ interface Header {
type Headers = Header[];
export interface DataTableProps {
/**
* Specify the data table headers
* @default []
*/
headers?: Headers;
/**
* Specify the rows the data table should render
* keys defined in `headers` are used for the row ids
* @default []
*/
rows?: Object[];
/**
* Set the size of the data table
*/
size?: "compact" | "short" | "tall";
/**
* Specify the title of the data table
* @default ""
*/
title?: string;
/**
* Specify the description of the data table
* @default ""
*/
description?: string;
/**
* Set to `true` to use zebra styles
* @default false
*/
zebra?: boolean;
/**
* Set to `true` for the sortable variant
* @default false
*/
sortable?: boolean;
/**
* Set to `true` for the expandable variant
* Automatically set to `true` if `batchExpansion` is `true`
* @default false
*/
expandable?: boolean;
/**
* Set to `true` to enable batch expansion
* @default false
*/
batchExpansion?: boolean;
/**
* Specify the row ids to be expanded
* @default []
*/
expandedRowIds?: string[];
/**
* Set to `true` for the radio selection variant
* @default false
*/
radio?: boolean;
/**
* Set to `true` for the selectable variant
* Automatically set to `true` if `radio` or `batchSelection` are `true`
* @default false
*/
selectable?: boolean;
/**
* Set to `true` to enable batch selection
* @default false
*/
batchSelection?: boolean;
/**
* Specify the row ids to be selected
* @default []
*/
selectedRowIds?: string[];
/**
* Set to `true` to enable a sticky header
* @default false
*/
stickyHeader?: boolean;
}
export default class DataTable {
$$prop_def: {
/**
* Specify the data table headers
* @default []
*/
headers?: Headers;
/**
* Specify the rows the data table should render
* keys defined in `headers` are used for the row ids
* @default []
*/
rows?: Object[];
/**
* Set the size of the data table
*/
size?: "compact" | "short" | "tall";
/**
* Specify the title of the data table
* @default ""
*/
title?: string;
/**
* Specify the description of the data table
* @default ""
*/
description?: string;
/**
* Set to `true` to use zebra styles
* @default false
*/
zebra?: boolean;
/**
* Set to `true` for the sortable variant
* @default false
*/
sortable?: boolean;
/**
* Set to `true` for the expandable variant
* Automatically set to `true` if `batchExpansion` is `true`
* @default false
*/
expandable?: boolean;
/**
* Set to `true` to enable batch expansion
* @default false
*/
batchExpansion?: boolean;
/**
* Specify the row ids to be expanded
* @default []
*/
expandedRowIds?: string[];
/**
* Set to `true` for the radio selection variant
* @default false
*/
radio?: boolean;
/**
* Set to `true` for the selectable variant
* Automatically set to `true` if `radio` or `batchSelection` are `true`
* @default false
*/
selectable?: boolean;
/**
* Set to `true` to enable batch selection
* @default false
*/
batchSelection?: boolean;
/**
* Specify the row ids to be selected
* @default []
*/
selectedRowIds?: string[];
/**
* Set to `true` to enable a sticky header
* @default false
*/
stickyHeader?: boolean;
};
$$prop_def: DataTableProps;
$$slot_def: {
default: {};
["expanded-row"]: { row: Object };
["cell-header"]: { header: Header };
cell: { row: Object; cell: Object };
["cell-header"]: { header: Header };
["expanded-row"]: { row: Object };
};
$on(

View file

@ -1,43 +1,44 @@
/// <reference types="svelte" />
export interface TableProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["section"]> {
/**
* Set the size of the table
*/
size?: "compact" | "short" | "tall";
/**
* Set to `true` to use zebra styles
* @default false
*/
zebra?: boolean;
/**
* Set to `true` to use static width
* @default false
*/
useStaticWidth?: boolean;
/**
* Set to `true` for the bordered variant
* @default false
*/
shouldShowBorder?: boolean;
/**
* Set to `true` for the sortable variant
* @default false
*/
sortable?: boolean;
/**
* Set to `true` to enable a sticky header
* @default false
*/
stickyHeader?: boolean;
}
export default class Table {
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["table"]> & {
/**
* Set the size of the table
*/
size?: "compact" | "short" | "tall";
/**
* Set to `true` to use zebra styles
* @default false
*/
zebra?: boolean;
/**
* Set to `true` to use static width
* @default false
*/
useStaticWidth?: boolean;
/**
* Set to `true` for the bordered variant
* @default false
*/
shouldShowBorder?: boolean;
/**
* Set to `true` for the sortable variant
* @default false
*/
sortable?: boolean;
/**
* Set to `true` to enable a sticky header
* @default false
*/
stickyHeader?: boolean;
};
$$prop_def: TableProps;
$$slot_def: {
default: {};
};

View file

@ -1,8 +1,9 @@
/// <reference types="svelte" />
export default class TableBody {
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["tbody"]> & {};
export interface TableBodyProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["tbody"]> {}
export default class TableBody {
$$prop_def: TableBodyProps;
$$slot_def: {
default: {};
};

View file

@ -1,8 +1,9 @@
/// <reference types="svelte" />
export default class TableCell {
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["td"]> & {};
export interface TableCellProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["td"]> {}
export default class TableCell {
$$prop_def: TableCellProps;
$$slot_def: {
default: {};
};

View file

@ -1,26 +1,27 @@
/// <reference types="svelte" />
export interface TableContainerProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Specify the title of the data table
* @default ""
*/
title?: string;
/**
* Specify the description of the data table
* @default ""
*/
description?: string;
/**
* Set to `true` to enable a sticky header
* @default false
*/
stickyHeader?: boolean;
}
export default class TableContainer {
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
/**
* Specify the title of the data table
* @default ""
*/
title?: string;
/**
* Specify the description of the data table
* @default ""
*/
description?: string;
/**
* Set to `true` to enable a sticky header
* @default false
*/
stickyHeader?: boolean;
};
$$prop_def: TableContainerProps;
$$slot_def: {
default: {};
};

View file

@ -1,8 +1,9 @@
/// <reference types="svelte" />
export default class TableHead {
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["thead"]> & {};
export interface TableHeadProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["thead"]> {}
export default class TableHead {
$$prop_def: TableHeadProps;
$$slot_def: {
default: {};
};

View file

@ -1,25 +1,27 @@
/// <reference types="svelte" />
export interface TableHeaderProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["th"]> {
/**
* Specify the `scope` attribute
* @default "col"
*/
scope?: string;
/**
* Override the default id translations
* @default () => ""
*/
translateWithId?: () => string;
/**
* Set an id for the top-level element
* @default "ccs-" + Math.random().toString(36)
*/
id?: string;
}
export default class TableHeader {
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["th"]> & {
/**
* Specify the `scope` attribute
* @default "col"
*/
scope?: string;
/**
* Override the default id translations
* @default () => ""
*/
translateWithId?: () => string;
/**
* Set an id for the top-level element
*/
id?: string;
};
$$prop_def: TableHeaderProps;
$$slot_def: {
default: {};
};

View file

@ -1,8 +1,9 @@
/// <reference types="svelte" />
export default class TableRow {
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["tr"]> & {};
export interface TableRowProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["tr"]> {}
export default class TableRow {
$$prop_def: TableRowProps;
$$slot_def: {
default: {};
};

View file

@ -1,14 +1,15 @@
/// <reference types="svelte" />
export default class Toolbar {
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["section"]> & {
/**
* Specify the toolbar size
* @default "default"
*/
size?: "sm" | "default";
};
export interface ToolbarProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["section"]> {
/**
* Specify the toolbar size
* @default "default"
*/
size?: "sm" | "default";
}
export default class Toolbar {
$$prop_def: ToolbarProps;
$$slot_def: {
default: {};
};

View file

@ -1,14 +1,15 @@
/// <reference types="svelte" />
export default class ToolbarBatchActions {
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
/**
* Override the total items selected text
* @default (totalSelected) => `${totalSelected} item${totalSelected === 1 ? "" : "s"} selected`
*/
formatTotalSelected?: (totalSelected: number) => string;
};
export interface ToolbarBatchActionsProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Override the total items selected text
* @default (totalSelected) => `${totalSelected} item${totalSelected === 1 ? "" : "s"} selected`
*/
formatTotalSelected?: (totalSelected: number) => string;
}
export default class ToolbarBatchActions {
$$prop_def: ToolbarBatchActionsProps;
$$slot_def: {
default: {};
};

View file

@ -1,8 +1,9 @@
/// <reference types="svelte" />
export default class ToolbarContent {
$$prop_def: {};
export interface ToolbarContentProps {}
export default class ToolbarContent {
$$prop_def: ToolbarContentProps;
$$slot_def: {
default: {};
};

View file

@ -1,8 +1,9 @@
/// <reference types="svelte" />
export default class ToolbarMenu {
$$prop_def: {};
export interface ToolbarMenuProps {}
export default class ToolbarMenu {
$$prop_def: ToolbarMenuProps;
$$slot_def: {
default: {};
};

Some files were not shown because too many files have changed in this diff Show more