chore: remove legacy types

Update docs with sveld
This commit is contained in:
Enrico Sacchetti 2023-01-25 23:31:48 -05:00
commit 3f188ce4a1
No known key found for this signature in database
GPG key ID: 3374B89ECA60D796
176 changed files with 183 additions and 8865 deletions

View file

@ -4121,19 +4121,19 @@ None.
### Events
| Event name | Type | Detail |
| :--------- | :--------- | :-------------------------------------------- |
| change | dispatched | <code>null &#124; number &#124; string</code> |
| input | dispatched | <code>null &#124; number &#124; string</code> |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
| paste | forwarded | -- |
| Event name | Type | Detail |
| :--------- | :--------- | :----- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
| paste | forwarded | -- |
| input | dispatched | -- |
| change | dispatched | -- |
## `TextInputSkeleton`

File diff suppressed because it is too large Load diff

View file

@ -4,6 +4,7 @@
"license": "Apache-2.0",
"description": "Svelte implementation of the Carbon Design System",
"type": "module",
"svelte": "src/carbon-components-svelte/index.js",
"module": "src/carbon-components-svelte",
"scripts": {
"test:types": "svelte-check --workspace tests",

View file

@ -6,6 +6,7 @@ import pkg from "../package.json" assert { type: "json" };
sveld({
glob: true,
markdown: true,
types: false,
markdownOptions: {
onAppend: (type, document, components) => {
if (type === "h1")

View file

@ -1,40 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
import type { AccordionSkeletonProps } from "./AccordionSkeleton.svelte";
export interface AccordionProps extends AccordionSkeletonProps {
/**
* Specify alignment of accordion item chevron icon
* @default "end"
*/
align?: "start" | "end";
/**
* Specify the size of the accordion
* @default undefined
*/
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 extends SvelteComponentTyped<
AccordionProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{ default: {} }
> {}

View file

@ -1,43 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface AccordionItemProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
/**
* Specify the title of the accordion item heading
* Alternatively, use the "title" slot (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 extends SvelteComponentTyped<
AccordionItemProps,
{
animationend: WindowEventMap["animationend"];
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
keydown: WindowEventMap["keydown"];
},
{ default: {}; title: {} }
> {}

View file

@ -1,40 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "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
* @default undefined
*/
size?: "sm" | "xl";
/**
* Set to `false` to close the first accordion item
* @default true
*/
open?: boolean;
}
export default class AccordionSkeleton extends SvelteComponentTyped<
AccordionSkeletonProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{}
> {}

View file

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

View file

@ -1,28 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
import type { BreadcrumbSkeletonProps } from "./BreadcrumbSkeleton.svelte";
export interface BreadcrumbProps extends BreadcrumbSkeletonProps {
/**
* 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 extends SvelteComponentTyped<
BreadcrumbProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{ default: {} }
> {}

View file

@ -1,28 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface BreadcrumbItemProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
/**
* Set the `href` to use an anchor link
* @default undefined
*/
href?: string;
/**
* Set to `true` if the breadcrumb item represents the current page
* @default false
*/
isCurrentPage?: boolean;
}
export default class BreadcrumbItem extends SvelteComponentTyped<
BreadcrumbItemProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{ default: { props?: { ["aria-current"]?: string; class: "bx--link" } } }
> {}

View file

@ -1,28 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "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 extends SvelteComponentTyped<
BreadcrumbSkeletonProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{}
> {}

View file

@ -1,31 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export type BreakpointSize = "sm" | "md" | "lg" | "xlg" | "max";
export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
export interface BreakpointProps {
/**
* Determine the current Carbon grid breakpoint size
* @default undefined
*/
size?: BreakpointSize;
/**
* Carbon grid sizes as an object
* @default { sm: false, md: false, lg: false, xlg: false, max: false, }
*/
sizes?: Record<BreakpointSize, boolean>;
}
export default class Breakpoint extends SvelteComponentTyped<
BreakpointProps,
{
change: CustomEvent<{
size: BreakpointSize;
breakpointValue: BreakpointValue;
}>;
},
{ default: { size: BreakpointSize; sizes: Record<BreakpointSize, boolean> } }
> {}

View file

@ -1,28 +0,0 @@
import type { Readable, Subscriber, Unsubscriber } from "svelte/store";
import type { BreakpointSize, BreakpointValue } from "./breakpoints";
/**
* Creates a readable store that returns the current breakpoint size.
* It also provides functions for creating derived stores used to do comparisons.
*/
export function breakpointObserver(): {
subscribe: (
this: void,
run: Subscriber<any>,
invalidate?: (value?: any) => void
) => Unsubscriber;
/**
* Returns a store readable store that returns whether the current
* breakpoint is smaller than {@link size}.
* @param {BreakpointSize} size Size to compare against.
*/
smallerThan: (size: BreakpointSize) => Readable<boolean>;
/**
* Returns a store readable store that returns whether the current
* breakpoint is larger than {@link size}.
* @param {BreakpointSize} size Size to compare against.
*/
largerThan: (size: BreakpointSize) => Readable<boolean>;
};
export default breakpointObserver;

View file

@ -1,11 +0,0 @@
/**
* Pixel sizes of Carbon grid breakpoints.
* @type {Record<BreakpointSize, BreakpointValue>}
*/
export const breakpoints: Record<BreakpointSize, BreakpointValue>;
export type BreakpointSize = "sm" | "md" | "lg" | "xlg" | "max";
export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
export default breakpoints;

View file

@ -1,3 +0,0 @@
export { default as Breakpoint } from "./Breakpoint.svelte";
export { breakpointObserver } from "./breakpointObserver";
export { breakpoints } from "./breakpoints";

View file

@ -1,131 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
import type { ButtonSkeletonProps } from "./ButtonSkeleton.svelte";
export interface ButtonProps
extends ButtonSkeletonProps,
svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]>,
svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]>,
svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* 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" | "lg" | "xl";
/**
* Set to `true` to use Carbon's expressive typesetting
* @default false
*/
expressive?: boolean;
/**
* Set to `true` to enable the selected state for an icon-only, ghost button
* @default false
*/
isSelected?: boolean;
/**
* Specify the icon to render
* @default undefined
*/
icon?: typeof import("svelte").SvelteComponent;
/**
* Specify the ARIA label for the button icon
* @default undefined
*/
iconDescription?: string;
/**
* Set the alignment of the tooltip relative to the icon.
* Only applies to icon-only buttons
* @default "center"
*/
tooltipAlignment?: "start" | "center" | "end";
/**
* Set the position of the tooltip relative to the icon
* @default "bottom"
*/
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
* @default undefined
*/
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 extends SvelteComponentTyped<
ButtonProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{
default: {
props: {
role: "button";
type?: string;
tabindex: any;
disabled: boolean;
href?: string;
class: string;
[key: string]: any;
};
};
}
> {}

View file

@ -1,17 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
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 extends SvelteComponentTyped<
ButtonSetProps,
{},
{ default: {} }
> {}

View file

@ -1,28 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface ButtonSkeletonProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
/**
* Set the `href` to use an anchor link
* @default undefined
*/
href?: string;
/**
* Specify the size of button skeleton
* @default "default"
*/
size?: "default" | "field" | "small" | "lg" | "xl";
}
export default class ButtonSkeleton extends SvelteComponentTyped<
ButtonSkeletonProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{}
> {}

View file

@ -1,102 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface CheckboxProps {
/**
* Specify the value of the checkbox
* @default ""
*/
value?: any;
/**
* Specify whether the checkbox is checked
* @default false
*/
checked?: boolean;
/**
* Specify the bound group
* @default undefined
*/
group?: ReadonlyArray<any>;
/**
* 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` to mark the field as required
* @default false
*/
required?: 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
* @default undefined
*/
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 extends SvelteComponentTyped<
CheckboxProps,
{
check: CustomEvent<boolean>;
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
change: WindowEventMap["change"];
blur: WindowEventMap["blur"];
},
{ labelText: {} }
> {}

View file

@ -1,16 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface CheckboxSkeletonProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {}
export default class CheckboxSkeleton extends SvelteComponentTyped<
CheckboxSkeletonProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{}
> {}

View file

@ -1,133 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "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>)
* You must use the `code` prop to copy the code
* @default undefined
*/
code?: string;
/**
* Override the default copy behavior of using the navigator.clipboard.writeText API to copy text
* @default async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } }
*/
copy?: (code: string) => void;
/**
* 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` for the disabled variant
* Only applies to the "single", "multi" types
* @default false
*/
disabled?: 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
* @default undefined
*/
copyButtonDescription?: string;
/**
* Specify the ARIA label of the copy button
* @default undefined
*/
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 extends SvelteComponentTyped<
CodeSnippetProps,
{
expand: CustomEvent<null>;
collapse: CustomEvent<null>;
copy: CustomEvent<null>;
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
animationend: WindowEventMap["animationend"];
},
{ default: {} }
> {}

View file

@ -1,22 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface CodeSnippetSkeletonProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Set the type of code snippet
* @default "single"
*/
type?: "single" | "multi";
}
export default class CodeSnippetSkeleton extends SvelteComponentTyped<
CodeSnippetSkeletonProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{}
> {}

View file

@ -1,178 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export type ComboBoxItemId = any;
export interface ComboBoxItem {
id: ComboBoxItemId;
text: string;
disabled?: boolean;
}
export interface ComboBoxProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
/**
* Set the combobox items
* @default []
*/
items?: ReadonlyArray<ComboBoxItem>;
/**
* Override the display of a combobox item
* @default (item) => item.text || item.id
*/
itemToString?: (item: ComboBoxItem) => string;
/**
* Set the selected item by value id
* @default undefined
*/
selectedId?: ComboBoxItemId;
/**
* Specify the selected combobox value
* @default ""
*/
value?: string;
/**
* Specify the direction of the combobox dropdown menu
* @default "bottom"
*/
direction?: "bottom" | "top";
/**
* Set the size of the combobox
* @default undefined
*/
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 indicate an warning state
* @default false
*/
warn?: boolean;
/**
* Specify the warning state text
* @default ""
*/
warnText?: string;
/**
* 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 chevron icon label based on the open state.
* Defaults to "Open menu" when closed and "Close menu" when open
* @default undefined
*/
translateWithId?: (
id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId
) => string;
/**
* Override the label of the clear button when the input has a selection.
* Defaults to "Clear selected item" since a combo box can only have on selection.
* @default undefined
*/
translateWithIdSelection?: (id: "clearSelection") => string;
/**
* Set an id for the list box component
* @default "ccs-" + Math.random().toString(36)
*/
id?: string;
/**
* Specify a name attribute for the input
* @default undefined
*/
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 extends SvelteComponentTyped<
ComboBoxProps,
{
select: CustomEvent<{
selectedId: ComboBoxItemId;
selectedItem: ComboBoxItem;
}>;
keydown: WindowEventMap["keydown"];
keyup: WindowEventMap["keyup"];
focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"];
paste: DocumentAndElementEventHandlersEventMap["paste"];
clear: WindowEventMap["clear"];
scroll: WindowEventMap["scroll"];
},
{ default: { item: ComboBoxItem; index: number } }
> {
/**
* Clear the combo box programmatically
*/
clear: (options?: { focus?: boolean }) => void;
}

View file

@ -1,64 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface ComposedModalProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Set the size of the composed modal
* @default undefined
*/
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?: null | string;
/**
* Obtain a reference to the top-level HTML element
* @default null
*/
ref?: null | HTMLDivElement;
}
export default class ComposedModal extends SvelteComponentTyped<
ComposedModalProps,
{
transitionend: CustomEvent<{ open: boolean }>;
keydown: WindowEventMap["keydown"];
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
submit: CustomEvent<null>;
["click:button--primary"]: CustomEvent<null>;
close: CustomEvent<null>;
open: CustomEvent<null>;
},
{ default: {} }
> {}

View file

@ -1,23 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "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 extends SvelteComponentTyped<
ModalBodyProps,
{},
{ default: {} }
> {}

View file

@ -1,60 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface ModalFooterProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Specify the primary button text
* @default ""
*/
primaryButtonText?: string;
/**
* Specify the primary button icon
* @default undefined
*/
primaryButtonIcon?: typeof import("svelte").SvelteComponent;
/**
* Set to `true` to disable the primary button
* @default false
*/
primaryButtonDisabled?: boolean;
/**
* Specify a class for the primary button
* @default undefined
*/
primaryClass?: string;
/**
* Specify the secondary button text
* @default ""
*/
secondaryButtonText?: string;
/**
* 2-tuple prop to render two secondary buttons for a 3 button modal
* supersedes `secondaryButtonText`
* @default []
*/
secondaryButtons?: [{ text: string }, { text: string }];
/**
* Specify a class for the secondary button
* @default undefined
*/
secondaryClass?: string;
/**
* Set to `true` to use the danger variant
* @default false
*/
danger?: boolean;
}
export default class ModalFooter extends SvelteComponentTyped<
ModalFooterProps,
{ ["click:button--secondary"]: CustomEvent<{ text: string }> },
{ default: {} }
> {}

View file

@ -1,53 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "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 extends SvelteComponentTyped<
ModalHeaderProps,
{ click: WindowEventMap["click"] },
{ default: {} }
> {}

View file

@ -1,29 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface ContentSwitcherProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Set the selected index of the switch item
* @default 0
*/
selectedIndex?: number;
/**
* Specify the size of the content switcher
* @default undefined
*/
size?: "sm" | "xl";
}
export default class ContentSwitcher extends SvelteComponentTyped<
ContentSwitcherProps,
{
change: CustomEvent<number>;
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{ default: {} }
> {}

View file

@ -1,48 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface SwitchProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
/**
* Specify the switch text
* Alternatively, use the "text" slot (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 extends SvelteComponentTyped<
SwitchProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
keydown: WindowEventMap["keydown"];
},
{ default: {} }
> {}

View file

@ -1,48 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface ContextMenuProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["ul"]> {
/**
* Specify an element or list of elements to trigger the context menu.
* If no element is specified, the context menu applies to the entire window
* @default null
*/
target?: null | ReadonlyArray<null | HTMLElement>;
/**
* Set to `true` to open the menu
* Either `x` and `y` must be greater than zero
* @default false
*/
open?: boolean;
/**
* Specify the horizontal offset of the menu position
* @default 0
*/
x?: number;
/**
* Specify the vertical offset of the menu position
* @default 0
*/
y?: number;
/**
* Obtain a reference to the unordered list HTML element
* @default null
*/
ref?: null | HTMLUListElement;
}
export default class ContextMenu extends SvelteComponentTyped<
ContextMenuProps,
{
open: CustomEvent<HTMLElement>;
click: WindowEventMap["click"];
keydown: WindowEventMap["keydown"];
close: CustomEvent<null>;
},
{ default: {} }
> {}

View file

@ -1,10 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface ContextMenuDividerProps {}
export default class ContextMenuDivider extends SvelteComponentTyped<
ContextMenuDividerProps,
{},
{}
> {}

View file

@ -1,21 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface ContextMenuGroupProps {
/**
* @default []
*/
selectedIds?: ReadonlyArray<string>;
/**
* Specify the label text
* @default ""
*/
labelText?: string;
}
export default class ContextMenuGroup extends SvelteComponentTyped<
ContextMenuGroupProps,
{},
{ default: {} }
> {}

View file

@ -1,81 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface ContextMenuOptionProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
/**
* Specify the kind of option
* @default "default"
*/
kind?: "default" | "danger";
/**
* Set to `true` to enable the disabled state
* @default false
*/
disabled?: boolean;
/**
* Set to `true` to indent the label
* @default false
*/
indented?: boolean;
/**
* Specify the icon to render
* Icon is rendered to the left of the label text
* @default undefined
*/
icon?: typeof import("svelte").SvelteComponent;
/**
* Specify the label text
* Alternatively, use the "labelText" slot (e.g., <span slot="labelText">...</span>)
* @default ""
*/
labelText?: string;
/**
* Set to `true` to use the selected variant
* @default false
*/
selected?: boolean;
/**
* Set to `true` to enable the selectable variant
* Automatically set to `true` if `selected` is `true`
* @default false
*/
selectable?: boolean;
/**
* Specify the shortcut text
* Alternatively, use the "shortcutText" slot (e.g., <span slot="shortcutText">...</span>)
* @default ""
*/
shortcutText?: string;
/**
* Specify the id
* It's recommended to provide an id as a value to bind to within a selectable/radio menu group
* @default "ccs-" + Math.random().toString(36)
*/
id?: string;
/**
* Obtain a reference to the list item HTML element
* @default null
*/
ref?: null | HTMLLIElement;
}
export default class ContextMenuOption extends SvelteComponentTyped<
ContextMenuOptionProps,
{
keydown: WindowEventMap["keydown"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
click: CustomEvent<null>;
},
{ default: {}; icon: {}; labelText: {}; shortcutText: {} }
> {}

View file

@ -1,22 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface ContextMenuRadioGroupProps {
/**
* Set the selected radio group id
* @default ""
*/
selectedId?: string;
/**
* Specify the label text
* @default ""
*/
labelText?: string;
}
export default class ContextMenuRadioGroup extends SvelteComponentTyped<
ContextMenuRadioGroupProps,
{},
{ default: {} }
> {}

View file

@ -1,45 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface CopyButtonProps
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;
/**
* Set the title and ARIA label for the copy button
* @default "Copy to clipboard"
*/
iconDescription?: string;
/**
* Specify the text to copy
* @default undefined
*/
text: string;
/**
* Override the default copy behavior of using the navigator.clipboard.writeText API to copy text
* @default async (text) => { try { await navigator.clipboard.writeText(text); } catch (e) { console.log(e); } }
*/
copy?: (text: string) => void;
}
export default class CopyButton extends SvelteComponentTyped<
CopyButtonProps,
{
click: WindowEventMap["click"];
animationend: WindowEventMap["animationend"];
copy: CustomEvent<null>;
},
{}
> {}

View file

@ -1,224 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export type DataTableKey = string;
export type DataTableValue = any;
export interface DataTableEmptyHeader {
key: DataTableKey;
empty: boolean;
display?: (item: Value) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
columnMenu?: boolean;
width?: string;
minWidth?: string;
}
export interface DataTableNonEmptyHeader {
key: DataTableKey;
value: DataTableValue;
display?: (item: Value) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
columnMenu?: boolean;
width?: string;
minWidth?: string;
}
export type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader;
export interface DataTableRow {
id: any;
[key: string]: DataTableValue;
}
export type DataTableRowId = any;
export interface DataTableCell {
key: DataTableKey;
value: DataTableValue;
display?: (item: Value) => DataTableValue;
}
export interface DataTableProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Specify the data table headers
* @default []
*/
headers?: ReadonlyArray<DataTableHeader>;
/**
* Specify the rows the data table should render
* keys defined in `headers` are used for the row ids
* @default []
*/
rows?: ReadonlyArray<DataTableRow>;
/**
* Set the size of the data table
* @default undefined
*/
size?: "compact" | "short" | "medium" | "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;
/**
* Specify the header key to sort by
* @default null
*/
sortKey?: DataTableKey;
/**
* Specify the sort direction
* @default "none"
*/
sortDirection?: "none" | "ascending" | "descending";
/**
* 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?: ReadonlyArray<DataTableRowId>;
/**
* Specify the ids for rows that should not be expandable
* @default []
*/
nonExpandableRowIds?: ReadonlyArray<DataTableRowId>;
/**
* 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?: ReadonlyArray<DataTableRowId>;
/**
* Specify the ids of rows that should not be selectable
* @default []
*/
nonSelectableRowIds?: ReadonlyArray<DataTableRowId>;
/**
* Set to `true` to enable a sticky header
* @default false
*/
stickyHeader?: boolean;
/**
* Set to `true` to use static width
* @default false
*/
useStaticWidth?: boolean;
/**
* Specify the number of items to display in a page
* @default 0
*/
pageSize?: number;
/**
* Set to `number` to set current page
* @default 0
*/
page?: number;
}
export default class DataTable extends SvelteComponentTyped<
DataTableProps,
{
click: CustomEvent<{
header?: DataTableHeader;
row?: DataTableRow;
cell?: DataTableCell;
}>;
["click:header--expand"]: CustomEvent<{ expanded: boolean }>;
["click:header"]: CustomEvent<{
header: DataTableHeader;
sortDirection?: "ascending" | "descending" | "none";
}>;
["click:header--select"]: CustomEvent<{
indeterminate: boolean;
selected: boolean;
}>;
["click:row"]: CustomEvent<DataTableRow>;
["mouseenter:row"]: CustomEvent<DataTableRow>;
["mouseleave:row"]: CustomEvent<DataTableRow>;
["click:row--expand"]: CustomEvent<{
expanded: boolean;
row: DataTableRow;
}>;
["click:row--select"]: CustomEvent<{
selected: boolean;
row: DataTableRow;
}>;
["click:cell"]: CustomEvent<DataTableCell>;
},
{
default: {};
cell: {
row: DataTableRow;
cell: DataTableCell;
rowIndex: number;
cellIndex: number;
};
["cell-header"]: { header: DataTableNonEmptyHeader };
description: {};
["expanded-row"]: { row: DataTableRow };
title: {};
}
> {}

View file

@ -1,62 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
import type { DataTableHeader } from "./DataTable.svelte";
export interface DataTableSkeletonProps
extends DataTableHeader,
svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Specify the number of columns
* Superseded by `headers` if `headers` is a non-empty array
* @default 5
*/
columns?: number;
/**
* Specify the number of rows
* @default 5
*/
rows?: number;
/**
* Set the size of the data table
* @default undefined
*/
size?: "compact" | "short" | "tall";
/**
* Set to `true` to apply zebra styles to the datatable rows
* @default false
*/
zebra?: boolean;
/**
* Set to `false` to hide the header
* @default true
*/
showHeader?: boolean;
/**
* Set the column headers
* Supersedes `columns` if value is a non-empty array
* @default []
*/
headers?: ReadonlyArray<string | Partial<DataTableHeader>>;
/**
* Set to `false` to hide the toolbar
* @default true
*/
showToolbar?: boolean;
}
export default class DataTableSkeleton extends SvelteComponentTyped<
DataTableSkeletonProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{}
> {}

View file

@ -1,47 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface TableProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["section"]> {
/**
* Set the size of the table
* @default undefined
*/
size?: "compact" | "short" | "medium" | "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 sortable variant
* @default false
*/
sortable?: boolean;
/**
* Set to `true` to enable a sticky header
* @default false
*/
stickyHeader?: boolean;
/**
* Set the style attribute on the `table` element
* @default undefined
*/
tableStyle?: string;
}
export default class Table extends SvelteComponentTyped<
TableProps,
{},
{ default: {} }
> {}

View file

@ -1,11 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface TableBodyProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["tbody"]> {}
export default class TableBody extends SvelteComponentTyped<
TableBodyProps,
{},
{ default: {} }
> {}

View file

@ -1,16 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface TableCellProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["td"]> {}
export default class TableCell extends SvelteComponentTyped<
TableCellProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{ default: {} }
> {}

View file

@ -1,35 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "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;
/**
* Set to `true` to use static width
* @default false
*/
useStaticWidth?: boolean;
}
export default class TableContainer extends SvelteComponentTyped<
TableContainerProps,
{},
{ default: {} }
> {}

View file

@ -1,16 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface TableHeadProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["thead"]> {}
export default class TableHead extends SvelteComponentTyped<
TableHeadProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{ default: {} }
> {}

View file

@ -1,52 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface TableHeaderProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["th"]> {
/**
* Set to `true` for the sortable variant
* @default false
*/
sortable?: boolean;
/**
* Specify the sort direction
* @default "none"
*/
sortDirection?: "none" | "ascending" | "descending";
/**
* Set to `true` if the column sorting
* @default false
*/
active?: boolean;
/**
* 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 extends SvelteComponentTyped<
TableHeaderProps,
{
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
click: WindowEventMap["click"];
},
{ default: {} }
> {}

View file

@ -1,16 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface TableRowProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["tr"]> {}
export default class TableRow extends SvelteComponentTyped<
TableRowProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{ default: {} }
> {}

View file

@ -1,17 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface ToolbarProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["section"]> {
/**
* Specify the toolbar size
* @default "default"
*/
size?: "sm" | "default";
}
export default class Toolbar extends SvelteComponentTyped<
ToolbarProps,
{},
{ default: {} }
> {}

View file

@ -1,23 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
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;
/**
* Use a boolean to show or hide the toolbar
* @default undefined
*/
active?: undefined | boolean;
}
export default class ToolbarBatchActions extends SvelteComponentTyped<
ToolbarBatchActionsProps,
{ cancel: CustomEvent<null> },
{ default: {}; cancel: {} }
> {}

View file

@ -1,10 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface ToolbarContentProps {}
export default class ToolbarContent extends SvelteComponentTyped<
ToolbarContentProps,
{},
{ default: {} }
> {}

View file

@ -1,11 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
import type { OverflowMenuProps } from "../OverflowMenu/OverflowMenu.svelte";
export interface ToolbarMenuProps extends OverflowMenuProps {}
export default class ToolbarMenu extends SvelteComponentTyped<
ToolbarMenuProps,
{},
{ default: {} }
> {}

View file

@ -1,11 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
import type { OverflowMenuItemProps } from "../OverflowMenu/OverflowMenuItem.svelte";
export interface ToolbarMenuItemProps extends OverflowMenuItemProps {}
export default class ToolbarMenuItem extends SvelteComponentTyped<
ToolbarMenuItemProps,
{ click: WindowEventMap["click"]; keydown: WindowEventMap["keydown"] },
{ default: {} }
> {}

View file

@ -1,79 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface ToolbarSearchProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
/**
* Specify the value of the search input
* @default ""
*/
value?: number | string;
/**
* Set to `true` to expand the search bar
* @default false
*/
expanded?: boolean;
/**
* Set to `true` to keep the search bar expanded
* @default false
*/
persistent?: boolean;
/**
* Set to `true` to disable the search bar
* @default false
*/
disabled?: boolean;
/**
* Set to `true` to filter table rows using the search value.
*
* If `true`, the default search excludes `id`, `cells` fields and
* only does a basic comparison on string and number type cell values.
*
* To implement your own client-side filtering, pass a function
* that accepts a row and value and returns a boolean.
* @default false
*/
shouldFilterRows?:
| boolean
| ((
row: import("./DataTable.svelte").DataTableRow,
value: number | string
) => boolean);
/**
* The filtered row ids
* @default []
*/
filteredRowIds?: ReadonlyArray<import("./DataTable.svelte").DataTableRowId>;
/**
* Specify the tabindex
* @default "0"
*/
tabindex?: string;
/**
* Obtain a reference to the input HTML element
* @default null
*/
ref?: null | HTMLInputElement;
}
export default class ToolbarSearch extends SvelteComponentTyped<
ToolbarSearchProps,
{
clear: WindowEventMap["clear"];
change: WindowEventMap["change"];
input: WindowEventMap["input"];
focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"];
keyup: WindowEventMap["keyup"];
keydown: WindowEventMap["keydown"];
paste: DocumentAndElementEventHandlersEventMap["paste"];
},
{}
> {}

View file

@ -1,100 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface DatePickerProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Specify the date picker type
* @default "simple"
*/
datePickerType?: "simple" | "single" | "range";
/**
* Specify the date picker input value
* @default ""
*/
value?: number | string;
/**
* Specify the date picker start date value (from)
* Only works with the "range" date picker type
* @default ""
*/
valueFrom?: string;
/**
* Specify the date picker end date value (to)
* Only works with the "range" date picker type
* @default ""
*/
valueTo?: string;
/**
* Specify the date format
* @default "m/d/Y"
*/
dateFormat?: string;
/**
* Specify the maximum date
* @default null
*/
maxDate?: null | string | Date;
/**
* Specify the minimum date
* @default null
*/
minDate?: null | string | Date;
/**
* Specify the locale
* @default "en"
*/
locale?:
| import("flatpickr/dist/types/locale").CustomLocale
| import("flatpickr/dist/types/locale").key;
/**
* Set to `true` to use the short variant
* @default false
*/
short?: boolean;
/**
* Set to `true` to enable the light variant
* @default false
*/
light?: boolean;
/**
* Set an id for the date picker element
* @default "ccs-" + Math.random().toString(36)
*/
id?: string;
/**
* Override the options passed to the Flatpickr instance.
* @see https://flatpickr.js.org/options
* @default { static: true }
*/
flatpickrProps?: import("flatpickr/dist/types/options").Options;
}
export default class DatePicker extends SvelteComponentTyped<
DatePickerProps,
{
change: CustomEvent<
| string
| {
selectedDates: [dateFrom: Date, dateTo?: Date];
dateStr: string | { from: string; to: string };
}
>;
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{ default: {} }
> {}

View file

@ -1,113 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface DatePickerInputProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
/**
* Set the size of the input
* @default undefined
*/
size?: "sm" | "xl";
/**
* Specify the input type
* @default "text"
*/
type?: string;
/**
* Specify the input placeholder text
* @default ""
*/
placeholder?: string;
/**
* Specify the Regular Expression for the input value
* @default "\\d{1,2}\\/\\d{1,2}\\/\\d{4}"
*/
pattern?: string;
/**
* Set to `true` to disable the input
* @default false
*/
disabled?: boolean;
/**
* Specify the helper text
* @default ""
*/
helperText?: string;
/**
* Specify the ARIA label for the calendar icon
* @default ""
*/
iconDescription?: string;
/**
* Set an id for the input element
* @default "ccs-" + Math.random().toString(36)
*/
id?: string;
/**
* Specify the label text
* @default ""
*/
labelText?: string;
/**
* Set to `true` to visually hide the label text
* @default false
*/
hideLabel?: boolean;
/**
* Set to `true` to indicate an invalid state
* @default false
*/
invalid?: boolean;
/**
* Specify the invalid state text
* @default ""
*/
invalidText?: string;
/**
* Set to `true` to indicate an warning state
* @default false
*/
warn?: boolean;
/**
* Specify the warning state text
* @default ""
*/
warnText?: string;
/**
* Set a name for the input element
* @default undefined
*/
name?: string;
/**
* Obtain a reference to the input HTML element
* @default null
*/
ref?: null | HTMLInputElement;
}
export default class DatePickerInput extends SvelteComponentTyped<
DatePickerInputProps,
{
input: WindowEventMap["input"];
keydown: WindowEventMap["keydown"];
keyup: WindowEventMap["keyup"];
blur: WindowEventMap["blur"];
paste: DocumentAndElementEventHandlersEventMap["paste"];
},
{ labelText: {} }
> {}

View file

@ -1,28 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface DatePickerSkeletonProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Set to `true` to use the range variant
* @default false
*/
range?: boolean;
/**
* Set an id to be used by the label element
* @default "ccs-" + Math.random().toString(36)
*/
id?: string;
}
export default class DatePickerSkeleton extends SvelteComponentTyped<
DatePickerSkeletonProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{}
> {}

View file

@ -1,155 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export type DropdownItemId = any;
export type DropdownItemText = string;
export interface DropdownItem {
id: DropdownItemId;
text: DropdownItemText;
disabled?: boolean;
}
export interface DropdownProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Set the dropdown items
* @default []
*/
items?: ReadonlyArray<DropdownItem>;
/**
* Override the display of a dropdown item
* @default (item) => item.text || item.id
*/
itemToString?: (item: DropdownItem) => string;
/**
* Specify the selected item id
* @default undefined
*/
selectedId: DropdownItemId;
/**
* Specify the type of dropdown
* @default "default"
*/
type?: "default" | "inline";
/**
* Specify the direction of the dropdown menu
* @default "bottom"
*/
direction?: "bottom" | "top";
/**
* Specify the size of the dropdown field
* @default undefined
*/
size?: "sm" | "lg" | "xl";
/**
* Set to `true` to open the dropdown
* @default false
*/
open?: boolean;
/**
* Set to `true` to enable the light variant
* @default false
*/
light?: boolean;
/**
* Set to `true` to disable the dropdown
* @default false
*/
disabled?: boolean;
/**
* Specify the title text
* @default ""
*/
titleText?: string;
/**
* Set to `true` to indicate an invalid state
* @default false
*/
invalid?: boolean;
/**
* Specify the invalid state text
* @default ""
*/
invalidText?: string;
/**
* Set to `true` to indicate an warning state
* @default false
*/
warn?: boolean;
/**
* Specify the warning state text
* @default ""
*/
warnText?: string;
/**
* Specify the helper text
* @default ""
*/
helperText?: string;
/**
* Specify the list box label
* @default undefined
*/
label?: string;
/**
* Set to `true` to visually hide the label text
* @default false
*/
hideLabel?: boolean;
/**
* Override the chevron icon label based on the open state.
* Defaults to "Open menu" when closed and "Close menu" when open
* @default undefined
*/
translateWithId?: (
id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId
) => string;
/**
* Set an id for the list box component
* @default "ccs-" + Math.random().toString(36)
*/
id?: string;
/**
* Specify a name attribute for the list box
* @default undefined
*/
name?: string;
/**
* Obtain a reference to the button HTML element
* @default null
*/
ref?: null | HTMLButtonElement;
}
export default class Dropdown extends SvelteComponentTyped<
DropdownProps,
{
select: CustomEvent<{
selectedId: DropdownItemId;
selectedItem: DropdownItem;
}>;
},
{ default: { item: DropdownItem; index: number } }
> {}

View file

@ -1,22 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface DropdownSkeletonProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Set to `true` to use the inline variant
* @default false
*/
inline?: boolean;
}
export default class DropdownSkeleton extends SvelteComponentTyped<
DropdownSkeletonProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{}
> {}

View file

@ -1,91 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface FileUploaderProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Specify the file uploader status
* @default "uploading"
*/
status?: "uploading" | "edit" | "complete";
/**
* Set to `true` to disable the file uploader
* @default false
*/
disabled?: boolean;
/**
* Specify the accepted file types
* @default []
*/
accept?: ReadonlyArray<string>;
/**
* Obtain a reference to the uploaded files
* @default []
*/
files?: ReadonlyArray<File>;
/**
* Set to `true` to allow multiple files
* @default false
*/
multiple?: boolean;
/**
* Specify the label description
* @default ""
*/
labelDescription?: string;
/**
* Specify the label title
* @default ""
*/
labelTitle?: string;
/**
* Specify the kind of file uploader button
* @default "primary"
*/
kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger";
/**
* Specify the button label
* @default ""
*/
buttonLabel?: string;
/**
* Specify the ARIA label used for the status icons
* @default "Provide icon description"
*/
iconDescription?: string;
/**
* Specify a name attribute for the file button uploader input
* @default ""
*/
name?: string;
}
export default class FileUploader extends SvelteComponentTyped<
FileUploaderProps,
{
add: CustomEvent<ReadonlyArray<File>>;
remove: CustomEvent<ReadonlyArray<File>>;
change: CustomEvent<ReadonlyArray<File>>;
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
keydown: WindowEventMap["keydown"];
},
{}
> {
/**
* Programmatically clear the uploaded files
*/
clearFiles: () => void;
}

View file

@ -1,87 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface FileUploaderButtonProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
/**
* Specify the accepted file types
* @default []
*/
accept?: ReadonlyArray<string>;
/**
* Obtain a reference to the uploaded files
* @default []
*/
files?: ReadonlyArray<File>;
/**
* Set to `true` to allow multiple files
* @default false
*/
multiple?: boolean;
/**
* Set to `true` to disable the input
* @default false
*/
disabled?: boolean;
/**
* Set to `true` to disable label changes
* @default false
*/
disableLabelChanges?: boolean;
/**
* Specify the kind of file uploader button
* @default "primary"
*/
kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger";
/**
* Specify the label text
* @default "Add file"
*/
labelText?: string;
/**
* Specify the label role
* @default "button"
*/
role?: string;
/**
* Specify `tabindex` attribute
* @default "0"
*/
tabindex?: string;
/**
* Set an id for the input element
* @default "ccs-" + Math.random().toString(36)
*/
id?: string;
/**
* Specify a name attribute for the input
* @default ""
*/
name?: string;
/**
* Obtain a reference to the input HTML element
* @default null
*/
ref?: null | HTMLInputElement;
}
export default class FileUploaderButton extends SvelteComponentTyped<
FileUploaderButtonProps,
{
change: CustomEvent<ReadonlyArray<File>>;
keydown: WindowEventMap["keydown"];
click: WindowEventMap["click"];
},
{ labelText: {} }
> {}

View file

@ -1,86 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface FileUploaderDropContainerProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Specify the accepted file types
* @default []
*/
accept?: ReadonlyArray<string>;
/**
* Obtain a reference to the uploaded files
* @default []
*/
files?: ReadonlyArray<File>;
/**
* Set to `true` to allow multiple files
* @default false
*/
multiple?: boolean;
/**
* Override the default behavior of validating uploaded files.
* By default, files are not validated
* @default (files) => files
*/
validateFiles?: (files: ReadonlyArray<File>) => ReadonlyArray<File>;
/**
* Specify the label text
* @default "Add file"
*/
labelText?: string;
/**
* Specify the `role` attribute of the drop container
* @default "button"
*/
role?: string;
/**
* Set to `true` to disable the input
* @default false
*/
disabled?: boolean;
/**
* Specify `tabindex` attribute
* @default "0"
*/
tabindex?: string;
/**
* Set an id for the input element
* @default "ccs-" + Math.random().toString(36)
*/
id?: string;
/**
* Specify a name attribute for the input
* @default ""
*/
name?: string;
/**
* Obtain a reference to the input HTML element
* @default null
*/
ref?: null | HTMLInputElement;
}
export default class FileUploaderDropContainer extends SvelteComponentTyped<
FileUploaderDropContainerProps,
{
add: CustomEvent<ReadonlyArray<File>>;
change: CustomEvent<ReadonlyArray<File>>;
dragover: WindowEventMap["dragover"];
dragleave: WindowEventMap["dragleave"];
drop: WindowEventMap["drop"];
keydown: WindowEventMap["keydown"];
click: WindowEventMap["click"];
},
{ labelText: {} }
> {}

View file

@ -1,64 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface FileUploaderItemProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["span"]> {
/**
* Specify the file uploader status
* @default "uploading"
*/
status?: "uploading" | "edit" | "complete";
/**
* Specify the size of button skeleton
* @default "default"
*/
size?: "default" | "field" | "small";
/**
* Specify the ARIA label used for the status icons
* @default ""
*/
iconDescription?: string;
/**
* Set to `true` to indicate an invalid state
* @default false
*/
invalid?: boolean;
/**
* Specify the error subject text
* @default ""
*/
errorSubject?: string;
/**
* Specify the error body text
* @default ""
*/
errorBody?: string;
/**
* Set an id for the top-level element
* @default "ccs-" + Math.random().toString(36)
*/
id?: string;
/**
* Specify the file uploader name
* @default ""
*/
name?: string;
}
export default class FileUploaderItem extends SvelteComponentTyped<
FileUploaderItemProps,
{
delete: CustomEvent<string>;
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{}
> {}

View file

@ -1,16 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface FileUploaderSkeletonProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {}
export default class FileUploaderSkeleton extends SvelteComponentTyped<
FileUploaderSkeletonProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{}
> {}

View file

@ -1,28 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface FilenameProps {
/**
* Specify the file name status
* @default "uploading"
*/
status?: "uploading" | "edit" | "complete";
/**
* Specify the ARIA label used for the status icons
* @default ""
*/
iconDescription?: string;
/**
* Set to `true` to indicate an invalid state
* @default false
*/
invalid?: boolean;
}
export default class Filename extends SvelteComponentTyped<
FilenameProps,
{ click: WindowEventMap["click"]; keydown: WindowEventMap["keydown"] },
{}
> {}

View file

@ -1,17 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface FluidFormProps {}
export default class FluidForm extends SvelteComponentTyped<
FluidFormProps,
{
click: WindowEventMap["click"];
keydown: WindowEventMap["keydown"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
submit: WindowEventMap["submit"];
},
{ default: {} }
> {}

View file

@ -1,24 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface FormProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["form"]> {
/**
* Obtain a reference to the form element
* @default null
*/
ref?: null | HTMLFormElement;
}
export default class Form extends SvelteComponentTyped<
FormProps,
{
click: WindowEventMap["click"];
keydown: WindowEventMap["keydown"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
submit: WindowEventMap["submit"];
},
{ default: {} }
> {}

View file

@ -1,52 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface FormGroupProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["fieldset"]> {
/**
* Set to `true` for to remove the bottom margin
* @default false
*/
noMargin?: boolean;
/**
* Set to `true` to indicate an invalid state
* @default false
*/
invalid?: boolean;
/**
* Set to `true` to render a form requirement
* @default false
*/
message?: boolean;
/**
* Specify the message text
* @default ""
*/
messageText?: string;
/**
* Specify the legend text
* @default ""
*/
legendText?: string;
/**
* Specify an id for the legend element
* @default ""
*/
legendId?: string;
}
export default class FormGroup extends SvelteComponentTyped<
FormGroupProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{ default: {} }
> {}

View file

@ -1,16 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface FormItemProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {}
export default class FormItem extends SvelteComponentTyped<
FormItemProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{ default: {} }
> {}

View file

@ -1,22 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface FormLabelProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["label"]> {
/**
* Set an id to be used by the label element
* @default "ccs-" + Math.random().toString(36)
*/
id?: string;
}
export default class FormLabel extends SvelteComponentTyped<
FormLabelProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{ default: {} }
> {}

View file

@ -1,87 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export type ColumnSize = boolean | number;
export interface ColumnSizeDescriptor {
span?: ColumnSize;
offset: number;
}
export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
export interface ColumnProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Set to `true` to render a custom HTML element
* Props are destructured as `props` in the default slot (e.g., <Column let:props><article {...props}>...</article></Column>)
* @default false
*/
as?: boolean;
/**
* Set to `true` to remove the gutter
* @default false
*/
noGutter?: boolean;
/**
* Set to `true` to remove the left gutter
* @default false
*/
noGutterLeft?: boolean;
/**
* Set to `true` to remove the right gutter
* @default false
*/
noGutterRight?: boolean;
/**
* Set to `true` to add top and bottom padding to the column
* @default false
*/
padding?: boolean;
/**
* Specify the aspect ratio of the column
* @default undefined
*/
aspectRatio?: "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1";
/**
* Set the small breakpoint
* @default undefined
*/
sm?: ColumnBreakpoint;
/**
* Set the medium breakpoint
* @default undefined
*/
md?: ColumnBreakpoint;
/**
* Set the large breakpoint
* @default undefined
*/
lg?: ColumnBreakpoint;
/**
* Set the extra large breakpoint
* @default undefined
*/
xlg?: ColumnBreakpoint;
/**
* Set the maximum breakpoint
* @default undefined
*/
max?: ColumnBreakpoint;
}
export default class Column extends SvelteComponentTyped<
ColumnProps,
{},
{ default: { props: { class: string; [key: string]: any } } }
> {}

View file

@ -1,60 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface GridProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Set to `true` to render a custom HTML element
* Props are destructured as `props` in the default slot (e.g., <Grid let:props><header {...props}>...</header></Grid>)
* @default false
*/
as?: boolean;
/**
* Set to `true` to use the condensed variant
* @default false
*/
condensed?: boolean;
/**
* Set to `true` to use the narrow variant
* @default false
*/
narrow?: boolean;
/**
* Set to `true` to use the fullWidth variant
* @default false
*/
fullWidth?: boolean;
/**
* Set to `true` to remove the gutter
* @default false
*/
noGutter?: boolean;
/**
* Set to `true` to remove the left gutter
* @default false
*/
noGutterLeft?: boolean;
/**
* Set to `true` to remove the right gutter
* @default false
*/
noGutterRight?: boolean;
/**
* Set to `true` to add top and bottom padding to all columns
* @default false
*/
padding?: boolean;
}
export default class Grid extends SvelteComponentTyped<
GridProps,
{},
{ default: { props: { class: string; [key: string]: any } } }
> {}

View file

@ -1,54 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface RowProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Set to `true` to render a custom HTML element
* Props are destructured as `props` in the default slot (e.g., <Row let:props><section {...props}>...</section></Row>)
* @default false
*/
as?: boolean;
/**
* Set to `true` to use the condensed variant
* @default false
*/
condensed?: boolean;
/**
* Set to `true` to use the narrow variant
* @default false
*/
narrow?: boolean;
/**
* Set to `true` to remove the gutter
* @default false
*/
noGutter?: boolean;
/**
* Set to `true` to remove the left gutter
* @default false
*/
noGutterLeft?: boolean;
/**
* Set to `true` to remove the right gutter
* @default false
*/
noGutterRight?: boolean;
/**
* Set to `true` to add top and bottom padding to all columns
* @default false
*/
padding?: boolean;
}
export default class Row extends SvelteComponentTyped<
RowProps,
{},
{ default: { props: { class: string; [key: string]: any } } }
> {}

View file

@ -1,59 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface ImageLoaderProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["img"]> {
/**
* Specify the image source
* @default ""
*/
src?: string;
/**
* Specify the image alt text
* @default ""
*/
alt?: string;
/**
* Specify the aspect ratio for the image wrapper
* @default undefined
*/
ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2";
/**
* Set to `true` when `loaded` is `true` and `error` is false
* @default false
*/
loading?: boolean;
/**
* Set to `true` when the image is loaded
* @default false
*/
loaded?: boolean;
/**
* Set to `true` if an error occurs when loading the image
* @default false
*/
error?: boolean;
/**
* Set to `true` to fade in the image on load
* The duration uses the `fast-02` value following Carbon guidelines on motion
* @default false
*/
fadeIn?: boolean;
}
export default class ImageLoader extends SvelteComponentTyped<
ImageLoaderProps,
{ load: CustomEvent<null>; error: CustomEvent<null> },
{ error: {}; loading: {} }
> {
/**
* Method invoked to load the image provided a `src` value
*/
loadImage: (url?: string) => void;
}

View file

@ -1,41 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface InlineLoadingProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Set the loading status
* @default "active"
*/
status?: "active" | "inactive" | "finished" | "error";
/**
* Set the loading description
* @default undefined
*/
description?: string;
/**
* Specify the ARIA label for the loading icon
* @default undefined
*/
iconDescription?: string;
/**
* Specify the timeout delay (ms) after `status` is set to "success"
* @default 1500
*/
successDelay?: number;
}
export default class InlineLoading extends SvelteComponentTyped<
InlineLoadingProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
success: CustomEvent<null>;
},
{}
> {}

View file

@ -1,60 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface LinkProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]>,
svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["p"]> {
/**
* Specify the size of the link
* @default undefined
*/
size?: "sm" | "lg";
/**
* Specify the href value
* @default undefined
*/
href?: string;
/**
* Set to `true` to use the inline variant
* @default false
*/
inline?: boolean;
/**
* Specify the icon to render
* `inline` must be `false`
* @default undefined
*/
icon?: typeof import("svelte").SvelteComponent;
/**
* Set to `true` to disable the checkbox
* @default false
*/
disabled?: boolean;
/**
* Set to `true` to allow visited styles
* @default false
*/
visited?: boolean;
/**
* Obtain a reference to the top-level HTML element
* @default null
*/
ref?: null | HTMLAnchorElement | HTMLParagraphElement;
}
export default class Link extends SvelteComponentTyped<
LinkProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{ default: {}; icon: {} }
> {}

View file

@ -1,16 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
import type { LinkProps } from "./Link.svelte";
export interface OutboundLinkProps extends LinkProps {}
export default class OutboundLink extends SvelteComponentTyped<
OutboundLinkProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{ default: {} }
> {}

View file

@ -1,65 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface ListBoxProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Set the size of the list box
* @default undefined
*/
size?: "sm" | "xl";
/**
* Set the type of the list box
* @default "default"
*/
type?: "default" | "inline";
/**
* Set to `true` to open the list box
* @default false
*/
open?: boolean;
/**
* Set to `true` to enable the light variant
* @default false
*/
light?: boolean;
/**
* Set to `true` to disable the list box
* @default false
*/
disabled?: boolean;
/**
* Set to `true` to indicate an invalid state
* @default false
*/
invalid?: boolean;
/**
* Specify the invalid state text
* @default ""
*/
invalidText?: string;
/**
* Set to `true` to indicate an warning state
* @default false
*/
warn?: boolean;
/**
* Specify the warning state text
* @default ""
*/
warnText?: string;
}
export default class ListBox extends SvelteComponentTyped<
ListBoxProps,
{ keydown: WindowEventMap["keydown"]; click: WindowEventMap["click"] },
{ default: {} }
> {}

View file

@ -1,62 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export type ListBoxFieldTranslationId = "close" | "open";
export interface ListBoxFieldProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Set to `true` to disable the list box field
* @default false
*/
disabled?: boolean;
/**
* Specify the role attribute
* @default "combobox"
*/
role?: string;
/**
* Specify the tabindex
* @default "-1"
*/
tabindex?: string;
/**
* Override the default translation ids
* @default (id) => defaultTranslations[id]
*/
translateWithId?: (id: ListBoxFieldTranslationId) => string;
/**
* Set an id for the top-level element
* @default "ccs-" + Math.random().toString(36)
*/
id?: string;
/**
* Obtain a reference to the top-level HTML element
* @default null
*/
ref?: null | HTMLDivElement;
}
export default class ListBoxField extends SvelteComponentTyped<
ListBoxFieldProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
keydown: WindowEventMap["keydown"];
focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"];
},
{ default: {} }
> {
/**
* Default translation ids
*/
translationIds: { close: "close"; open: "open" };
}

View file

@ -1,23 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface ListBoxMenuProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Set an id for the top-level element
* @default "ccs-" + Math.random().toString(36)
*/
id?: string;
/**
* Obtain a reference to the HTML element
* @default null
*/
ref?: null | HTMLDivElement;
}
export default class ListBoxMenu extends SvelteComponentTyped<
ListBoxMenuProps,
{ scroll: WindowEventMap["scroll"] },
{ default: {} }
> {}

View file

@ -1,30 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export type ListBoxMenuIconTranslationId = "close" | "open";
export interface ListBoxMenuIconProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Set to `true` to open the list box menu icon
* @default false
*/
open?: boolean;
/**
* Override the default translation ids
* @default (id) => defaultTranslations[id]
*/
translateWithId?: (id: ListBoxMenuIconTranslationId) => string;
}
export default class ListBoxMenuIcon extends SvelteComponentTyped<
ListBoxMenuIconProps,
{ click: WindowEventMap["click"] },
{}
> {
/**
* Default translation ids
*/
translationIds: { close: "close"; open: "open" };
}

View file

@ -1,33 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface ListBoxMenuItemProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Set to `true` to enable the active state
* @default false
*/
active?: boolean;
/**
* Set to `true` to enable the highlighted state
* @default false
*/
highlighted?: boolean;
/**
* Set to `true` to disable the menu item
* @default false
*/
disabled?: boolean;
}
export default class ListBoxMenuItem extends SvelteComponentTyped<
ListBoxMenuItemProps,
{
click: WindowEventMap["click"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{ default: {} }
> {}

View file

@ -1,42 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export type ListBoxSelectionTranslationId = "clearAll" | "clearSelection";
export interface ListBoxSelectionProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Specify the number of selected items
* @default undefined
*/
selectionCount?: number;
/**
* Set to `true` to disable the list box selection
* @default false
*/
disabled?: boolean;
/**
* Override the default translation ids
* @default (id) => defaultTranslations[id]
*/
translateWithId?: (id: ListBoxSelectionTranslationId) => string;
/**
* Obtain a reference to the top-level HTML element
* @default null
*/
ref?: null | HTMLDivElement;
}
export default class ListBoxSelection extends SvelteComponentTyped<
ListBoxSelectionProps,
{ clear: CustomEvent<any> },
{}
> {
/**
* Default translation ids
*/
translationIds: { clearAll: "clearAll"; clearSelection: "clearSelection" };
}

View file

@ -1,16 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface ListItemProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {}
export default class ListItem extends SvelteComponentTyped<
ListItemProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{ default: {} }
> {}

View file

@ -1,41 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface LoadingProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Set to `true` to use the small variant
* @default false
*/
small?: boolean;
/**
* Set to `false` to disable the active state
* @default true
*/
active?: boolean;
/**
* Set to `false` to disable the overlay
* @default true
*/
withOverlay?: boolean;
/**
* Specify the label description
* @default "Active loading indicator"
*/
description?: string;
/**
* Set an id for the label element
* @default "ccs-" + Math.random().toString(36)
*/
id?: string;
}
export default class Loading extends SvelteComponentTyped<
LoadingProps,
{},
{}
> {}

View file

@ -1,35 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface LocalStorageProps {
/**
* Specify the local storage key
* @default "local-storage-key"
*/
key?: string;
/**
* Provide a value to persist
* @default ""
*/
value?: any;
}
export default class LocalStorage extends SvelteComponentTyped<
LocalStorageProps,
{
save: CustomEvent<null>;
update: CustomEvent<{ prevValue: any; value: any }>;
},
{}
> {
/**
* Remove the persisted key value from the browser's local storage
*/
clearItem: () => void;
/**
* Clear all key values from the browser's local storage
*/
clearAll: () => void;
}

View file

@ -1,151 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface ModalProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Set the size of the modal
* @default undefined
*/
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 enable alert mode
* @default false
*/
alert?: boolean;
/**
* Set to `true` to use the passive variant
* @default false
*/
passiveModal?: boolean;
/**
* Specify the modal heading
* @default undefined
*/
modalHeading?: string;
/**
* Specify the modal label
* @default undefined
*/
modalLabel?: string;
/**
* Specify the ARIA label for the modal
* @default undefined
*/
modalAriaLabel?: string;
/**
* Specify the ARIA label for the close icon
* @default "Close the modal"
*/
iconDescription?: string;
/**
* 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;
/**
* Specify the primary button text
* @default ""
*/
primaryButtonText?: string;
/**
* Set to `true` to disable the primary button
* @default false
*/
primaryButtonDisabled?: boolean;
/**
* Specify the primary button icon
* @default undefined
*/
primaryButtonIcon?: typeof import("svelte").SvelteComponent;
/**
* Set to `true` for the "submit" and "click:button--primary" events
* to be dispatched when pressing "Enter"
* @default true
*/
shouldSubmitOnEnter?: boolean;
/**
* Specify the secondary button text
* @default ""
*/
secondaryButtonText?: string;
/**
* 2-tuple prop to render two secondary buttons for a 3 button modal
* supersedes `secondaryButtonText`
* @default []
*/
secondaryButtons?: [{ text: string }, { text: string }];
/**
* Specify a selector to be focused when opening the modal
* @default "[data-modal-primary-focus]"
*/
selectorPrimaryFocus?: string;
/**
* Set to `true` to prevent the modal from closing when clicking outside
* @default false
*/
preventCloseOnClickOutside?: boolean;
/**
* Set an id for the top-level element
* @default "ccs-" + Math.random().toString(36)
*/
id?: string;
/**
* Obtain a reference to the top-level HTML element
* @default null
*/
ref?: null | HTMLDivElement;
}
export default class Modal extends SvelteComponentTyped<
ModalProps,
{
transitionend: CustomEvent<{ open: boolean }>;
["click:button--secondary"]: CustomEvent<{ text: string }>;
keydown: WindowEventMap["keydown"];
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
submit: CustomEvent<null>;
["click:button--primary"]: CustomEvent<null>;
close: CustomEvent<null>;
open: CustomEvent<null>;
},
{ default: {}; heading: {}; label: {} }
> {}

View file

@ -1,257 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export type MultiSelectItemId = any;
export type MultiSelectItemText = string;
export interface MultiSelectItem {
id: MultiSelectItemId;
text: MultiSelectItemText;
disabled?: boolean;
}
export interface MultiSelectProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
/**
* Set the multiselect items
* @default []
*/
items?: ReadonlyArray<MultiSelectItem>;
/**
* Override the display of a multiselect item
* @default (item) => item.text || item.id
*/
itemToString?: (item: MultiSelectItem) => any;
/**
* Override the item name, title, labelText passed to the checkbox input
* @default (item) => {}
*/
itemToInput?: (item: MultiSelectItem) => {
name?: string;
labelText?: any;
title?: string;
};
/**
* Set the selected ids
* @default []
*/
selectedIds?: ReadonlyArray<MultiSelectItemId>;
/**
* Specify the multiselect value
* @default ""
*/
value?: string;
/**
* Set the size of the combobox
* @default undefined
*/
size?: "sm" | "lg" | "xl";
/**
* Specify the type of multiselect
* @default "default"
*/
type?: "default" | "inline";
/**
* Specify the direction of the multiselect dropdown menu
* @default "bottom"
*/
direction?: "bottom" | "top";
/**
* Specify the selection feedback after selecting items
* @default "top-after-reopen"
*/
selectionFeedback?: "top" | "fixed" | "top-after-reopen";
/**
* Set to `true` to disable the dropdown
* @default false
*/
disabled?: boolean;
/**
* Set to `true` to filter items
* @default false
*/
filterable?: boolean;
/**
* Override the filtering logic
* The default filtering is an exact string comparison
* @default (item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase())
*/
filterItem?: (item: MultiSelectItem, value: string) => string;
/**
* Set to `true` to open the dropdown
* @default false
*/
open?: boolean;
/**
* Set to `true` to enable the light variant
* @default false
*/
light?: boolean;
/**
* Specify the locale
* @default "en"
*/
locale?: string;
/**
* Specify the placeholder text
* @default ""
*/
placeholder?: string;
/**
* Override the sorting logic
* The default sorting compare the item text value
* @default (a, b) => a.text.localeCompare(b.text, locale, { numeric: true })
*/
sortItem?:
| ((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem)
| (() => void);
/**
* Override the chevron icon label based on the open state.
* Defaults to "Open menu" when closed and "Close menu" when open
* @default undefined
*/
translateWithId?: (
id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId
) => string;
/**
* Override the label of the clear button when the input has a selection.
* Defaults to "Clear selected item" and "Clear all items" if more than one item is selected
* @default undefined
*/
translateWithIdSelection?: (
id: import("../ListBox/ListBoxSelection.svelte").ListBoxSelectionTranslationId
) => string;
/**
* Specify the title text
* @default ""
*/
titleText?: string;
/**
* Set to `true` to pass the item to `itemToString` in the checkbox
* @default false
*/
useTitleInItem?: boolean;
/**
* Set to `true` to indicate an invalid state
* @default false
*/
invalid?: boolean;
/**
* Specify the invalid state text
* @default ""
*/
invalidText?: string;
/**
* Set to `true` to indicate an warning state
* @default false
*/
warn?: boolean;
/**
* Specify the warning state text
* @default ""
*/
warnText?: string;
/**
* Specify the helper text
* @default ""
*/
helperText?: string;
/**
* Specify the list box label
* @default ""
*/
label?: string;
/**
* Set to `true` to visually hide the label text
* @default false
*/
hideLabel?: boolean;
/**
* Set an id for the list box component
* @default "ccs-" + Math.random().toString(36)
*/
id?: string;
/**
* Specify a name attribute for the select
* @default undefined
*/
name?: string;
/**
* Obtain a reference to the input HTML element
* @default null
*/
inputRef?: null | HTMLInputElement;
/**
* Obtain a reference to the outer div element
* @default null
*/
multiSelectRef?: null | HTMLDivElement;
/**
* Obtain a reference to the field box element
* @default null
*/
fieldRef?: null | HTMLDivElement;
/**
* Obtain a reference to the selection element
* @default null
*/
selectionRef?: null | HTMLDivElement;
/**
* Id of the highlighted ListBoxMenuItem
* @default null
*/
highlightedId?: null | MultiSelectItemId;
}
export default class MultiSelect extends SvelteComponentTyped<
MultiSelectProps,
{
select: CustomEvent<{
selectedIds: MultiSelectItemId[];
selected: MultiSelectItem[];
unselected: MultiSelectItem[];
}>;
clear: CustomEvent<null>;
blur: FocusEvent | CustomEvent<FocusEvent>;
keydown: WindowEventMap["keydown"];
keyup: WindowEventMap["keyup"];
focus: WindowEventMap["focus"];
paste: DocumentAndElementEventHandlersEventMap["paste"];
},
{ default: { item: MultiSelectItem; index: number } }
> {}

View file

@ -1,77 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface InlineNotificationProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Specify the kind of notification
* @default "error"
*/
kind?:
| "error"
| "info"
| "info-square"
| "success"
| "warning"
| "warning-alt";
/**
* Set to `true` to use the low contrast variant
* @default false
*/
lowContrast?: boolean;
/**
* Set the timeout duration (ms) to hide the notification after opening it
* @default 0
*/
timeout?: number;
/**
* Set the `role` attribute
* @default "alert"
*/
role?: string;
/**
* Specify the title text
* @default ""
*/
title?: string;
/**
* Specify the subtitle text
* @default ""
*/
subtitle?: string;
/**
* Set to `true` to hide the close button
* @default false
*/
hideCloseButton?: boolean;
/**
* Specify the ARIA label for the status icon
* @default kind + " icon"
*/
statusIconDescription?: string;
/**
* Specify the ARIA label for the close button
* @default "Close notification"
*/
closeButtonDescription?: string;
}
export default class InlineNotification extends SvelteComponentTyped<
InlineNotificationProps,
{
close: CustomEvent<{ timeout: boolean }>;
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{ default: {}; actions: {}; subtitle: {}; title: {} }
> {}

View file

@ -1,16 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
import type { ButtonProps } from "../Button/Button.svelte";
export interface NotificationActionButtonProps extends ButtonProps {}
export default class NotificationActionButton extends SvelteComponentTyped<
NotificationActionButtonProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{ default: {} }
> {}

View file

@ -1,40 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface NotificationButtonProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
/**
* Set the type of notification
* @default "toast"
*/
notificationType?: "toast" | "inline";
/**
* Specify the icon to render
* @default undefined
*/
icon?: typeof import("svelte").SvelteComponent;
/**
* Specify the title of the icon
* @default undefined
*/
title?: string;
/**
* Specify the ARIA label for the icon
* @default "Close icon"
*/
iconDescription?: string;
}
export default class NotificationButton extends SvelteComponentTyped<
NotificationButtonProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{}
> {}

View file

@ -1,34 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface NotificationIconProps {
/**
* Specify the kind of notification icon
* @default "error"
*/
kind?:
| "error"
| "info"
| "info-square"
| "success"
| "warning"
| "warning-alt";
/**
* Set the type of notification
* @default "toast"
*/
notificationType?: "toast" | "inline";
/**
* Specify the ARIA label for the icon
* @default undefined
*/
iconDescription: undefined;
}
export default class NotificationIcon extends SvelteComponentTyped<
NotificationIconProps,
{},
{}
> {}

View file

@ -1,90 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface ToastNotificationProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Specify the kind of notification
* @default "error"
*/
kind?:
| "error"
| "info"
| "info-square"
| "success"
| "warning"
| "warning-alt";
/**
* Set to `true` to use the low contrast variant
* @default false
*/
lowContrast?: boolean;
/**
* Set the timeout duration (ms) to hide the notification after opening it
* @default 0
*/
timeout?: number;
/**
* Set the `role` attribute
* @default "alert"
*/
role?: string;
/**
* Specify the title text
* @default ""
*/
title?: string;
/**
* Specify the subtitle text
* @default ""
*/
subtitle?: string;
/**
* Specify the caption text
* @default ""
*/
caption?: string;
/**
* Specify the ARIA label for the status icon
* @default kind + " icon"
*/
statusIconDescription?: string;
/**
* Specify the ARIA label for the close button
* @default "Close notification"
*/
closeButtonDescription?: string;
/**
* Set to `true` to hide the close button
* @default false
*/
hideCloseButton?: boolean;
/**
* Set to `true` for the notification to span
* the full width of its containing element.
* @default false
*/
fullWidth?: boolean;
}
export default class ToastNotification extends SvelteComponentTyped<
ToastNotificationProps,
{
close: CustomEvent<{ timeout: boolean }>;
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{ default: {}; caption: {}; subtitle: {}; title: {} }
> {}

View file

@ -1,163 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export type NumberInputTranslationId = "increment" | "decrement";
export interface NumberInputProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
/**
* Set the size of the input
* @default undefined
*/
size?: "sm" | "xl";
/**
* Specify the input value.
* Use `null` to denote "no value"
* @default null
*/
value?: null | number;
/**
* Specify the step increment
* @default 1
*/
step?: number;
/**
* Specify the maximum value
* @default undefined
*/
max?: number;
/**
* Specify the minimum value
* @default undefined
*/
min?: number;
/**
* Set to `true` to enable the light variant
* @default false
*/
light?: boolean;
/**
* Set to `true` for the input to be read-only
* @default false
*/
readonly?: boolean;
/**
* Set to `true` to allow for an empty value
* @default false
*/
allowEmpty?: boolean;
/**
* Set to `true` to disable the input
* @default false
*/
disabled?: boolean;
/**
* Set to `true` to hide the input stepper buttons
* @default false
*/
hideSteppers?: boolean;
/**
* Specify the ARIA label for the increment icons
* @default ""
*/
iconDescription?: string;
/**
* Set to `true` to indicate an invalid state
* @default false
*/
invalid?: boolean;
/**
* Specify the invalid state text
* @default ""
*/
invalidText?: string;
/**
* Set to `true` to indicate an warning state
* @default false
*/
warn?: boolean;
/**
* Specify the warning state text
* @default ""
*/
warnText?: string;
/**
* Specify the helper text
* @default ""
*/
helperText?: string;
/**
* Specify the label text
* @default ""
*/
label?: string;
/**
* Set to `true` to visually hide the label text
* @default false
*/
hideLabel?: boolean;
/**
* Override the default translation ids
* @default (id) => defaultTranslations[id]
*/
translateWithId?: (id: NumberInputTranslationId) => string;
/**
* Set an id for the input element
* @default "ccs-" + Math.random().toString(36)
*/
id?: string;
/**
* Specify a name attribute for the input
* @default undefined
*/
name?: string;
/**
* Obtain a reference to the input HTML element
* @default null
*/
ref?: null | HTMLInputElement;
}
export default class NumberInput extends SvelteComponentTyped<
NumberInputProps,
{
change: CustomEvent<null | number>;
input: CustomEvent<null | number>;
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
keydown: WindowEventMap["keydown"];
keyup: WindowEventMap["keyup"];
focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"];
paste: DocumentAndElementEventHandlersEventMap["paste"];
},
{ label: {} }
> {
/**
* Default translation ids
*/
translationIds: { increment: "increment"; decrement: "decrement" };
}

View file

@ -1,22 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface NumberInputSkeletonProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Set to `true` to hide the label text
* @default false
*/
hideLabel?: boolean;
}
export default class NumberInputSkeleton extends SvelteComponentTyped<
NumberInputSkeletonProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{}
> {}

View file

@ -1,34 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface OrderedListProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["ol"]> {
/**
* Set to `true` to use the nested variant
* @default false
*/
nested?: boolean;
/**
* Set to `true` to use native list styles
* @default false
*/
native?: boolean;
/**
* Set to `true` to use Carbon's expressive typesetting
* @default false
*/
expressive?: boolean;
}
export default class OrderedList extends SvelteComponentTyped<
OrderedListProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{ default: {} }
> {}

View file

@ -1,91 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface OverflowMenuProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
/**
* Specify the size of the overflow menu
* @default undefined
*/
size?: "sm" | "xl";
/**
* Specify the direction of the overflow menu relative to the button
* @default "bottom"
*/
direction?: "top" | "bottom";
/**
* Set to `true` to open the menu
* @default false
*/
open?: boolean;
/**
* Set to `true` to enable the light variant
* @default false
*/
light?: boolean;
/**
* Set to `true` to flip the menu relative to the button
* @default false
*/
flipped?: boolean;
/**
* Specify the menu options class
* @default undefined
*/
menuOptionsClass?: string;
/**
* Specify the icon to render.
* Defaults to `<OverflowMenuVertical />`
* @default undefined
*/
icon?: typeof import("svelte").SvelteComponent;
/**
* Specify the icon class
* @default undefined
*/
iconClass?: string;
/**
* Specify the ARIA label for the icon
* @default "Open and close list of options"
*/
iconDescription?: string;
/**
* Set an id for the button element
* @default "ccs-" + Math.random().toString(36)
*/
id?: string;
/**
* Obtain a reference to the trigger button element
* @default null
*/
buttonRef?: null | HTMLButtonElement;
/**
* Obtain a reference to the overflow menu element
* @default null
*/
menuRef?: null | HTMLUListElement;
}
export default class OverflowMenu extends SvelteComponentTyped<
OverflowMenuProps,
{
close: CustomEvent<null | { index: number; text: string }>;
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
keydown: WindowEventMap["keydown"];
},
{ default: {}; menu: {} }
> {}

View file

@ -1,66 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface OverflowMenuItemProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
/**
* Specify the item text
* Alternatively, use the default slot for a custom element
* @default "Provide text"
*/
text?: string;
/**
* Specify the `href` attribute if the item is a link
* @default ""
*/
href?: string;
/**
* Set to `true` if the item should be focused when opening the menu
* @default false
*/
primaryFocus?: boolean;
/**
* Set to `true` to disable the item
* @default false
*/
disabled?: boolean;
/**
* Set to `true` to include a divider
* @default false
*/
hasDivider?: boolean;
/**
* Set to `true` to use the danger variant
* @default false
*/
danger?: boolean;
/**
* Set to `false` to omit the button `title` attribute
* @default true
*/
requireTitle?: boolean;
/**
* Set an id for the top-level element
* @default "ccs-" + Math.random().toString(36)
*/
id?: string;
/**
* Obtain a reference to the HTML element
* @default null
*/
ref?: null | HTMLAnchorElement | HTMLButtonElement;
}
export default class OverflowMenuItem extends SvelteComponentTyped<
OverflowMenuItemProps,
{ click: WindowEventMap["click"]; keydown: WindowEventMap["keydown"] },
{ default: {} }
> {}

View file

@ -1,113 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface PaginationProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Specify the current page index
* @default 1
*/
page?: number;
/**
* Specify the total number of items
* @default 0
*/
totalItems?: number;
/**
* Set to `true` to disable the pagination
* @default false
*/
disabled?: boolean;
/**
* Specify the forward button text
* @default "Next page"
*/
forwardText?: string;
/**
* Specify the backward button text
* @default "Previous page"
*/
backwardText?: string;
/**
* Specify the items per page text
* @default "Items per page:"
*/
itemsPerPageText?: string;
/**
* Override the item text
* @default (min, max) => `${min}${max} item${max === 1 ? "" : "s"}`
*/
itemText?: (min: number, max: number) => string;
/**
* Override the item range text
* @default (min, max, total) => `${min}${max} of ${total} item${max === 1 ? "" : "s"}`
*/
itemRangeText?: (min: number, max: number, total: number) => string;
/**
* Set to `true` to disable the page input
* @default false
*/
pageInputDisabled?: boolean;
/**
* Set to `true` to disable the page size input
* @default false
*/
pageSizeInputDisabled?: boolean;
/**
* Specify the number of items to display in a page
* @default 10
*/
pageSize?: number;
/**
* Specify the available page sizes
* @default [10]
*/
pageSizes?: ReadonlyArray<number>;
/**
* Set to `true` if the number of pages is unknown
* @default false
*/
pagesUnknown?: boolean;
/**
* Override the page text
* @default (page) => `page ${page}`
*/
pageText?: (page: number) => string;
/**
* Override the page range text
* @default (current, total) => `of ${total} page${total === 1 ? "" : "s"}`
*/
pageRangeText?: (current: number, total: number) => string;
/**
* Set an id for the top-level element
* @default "ccs-" + Math.random().toString(36)
*/
id?: string;
}
export default class Pagination extends SvelteComponentTyped<
PaginationProps,
{
/** Dispatched after any user interaction */
change: CustomEvent<{ page?: number; pageSize?: number }>;
["click:button--previous"]: CustomEvent<{ page: number }>;
["click:button--next"]: CustomEvent<{ page: number }>;
update: CustomEvent<{ pageSize: number; page: number }>;
},
{}
> {}

View file

@ -1,16 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface PaginationSkeletonProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {}
export default class PaginationSkeleton extends SvelteComponentTyped<
PaginationSkeletonProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{}
> {}

View file

@ -1,52 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface PaginationNavProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["nav"]> {
/**
* Specify the current page index
* @default 1
*/
page?: number;
/**
* Specify the total number of pages
* @default 10
*/
total?: number;
/**
* Specify the total number of pages to show
* @default 10
*/
shown?: number;
/**
* Set to `true` to loop the navigation
* @default false
*/
loop?: boolean;
/**
* Specify the forward button text
* @default "Next page"
*/
forwardText?: string;
/**
* Specify the backward button text
* @default "Previous page"
*/
backwardText?: string;
}
export default class PaginationNav extends SvelteComponentTyped<
PaginationNavProps,
{
/** fires after every user interaction */
change: CustomEvent<{ page: number }>;
["click:button--previous"]: CustomEvent<{ page: number }>;
["click:button--next"]: CustomEvent<{ page: number }>;
},
{}
> {}

View file

@ -1,65 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface PopoverProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Set to `true` to display the popover
* @default false
*/
open?: boolean;
/**
* Set to `true` to close the popover on an outside click
* @default false
*/
closeOnOutsideClick?: boolean;
/**
* Set to `true` render a caret
* @default false
*/
caret?: boolean;
/**
* Specify the alignment of the caret
* @default "top"
*/
align?:
| "top"
| "top-left"
| "top-right"
| "bottom"
| "bottom-left"
| "bottom-right"
| "left"
| "left-bottom"
| "left-top"
| "right"
| "right-bottom"
| "right-top";
/**
* Set to `true` to enable the light variant
* @default false
*/
light?: boolean;
/**
* Set to `true` to enable the high contrast variant
* @default false
*/
highContrast?: boolean;
/**
* Set to `true` to use a relative position
* @default false
*/
relative?: boolean;
}
export default class Popover extends SvelteComponentTyped<
PopoverProps,
{ ["click:outside"]: CustomEvent<{ target: HTMLElement }> },
{ default: {} }
> {}

View file

@ -1,59 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface ProgressBarProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Specify the current value
* @default undefined
*/
value?: number;
/**
* Specify the maximum value
* @default 100
*/
max?: number;
/**
* Specify the kind of progress bar
* @default "default"
*/
kind?: "default" | "inline" | "indented";
/**
* Specify the size
* @default "md"
*/
size?: "sm" | "md";
/**
* Specify the label text
* @default ""
*/
labelText?: string;
/**
* Set to `true` to visually hide the label text
* @default false
*/
hideLabel?: boolean;
/**
* Specify the helper text
* @default ""
*/
helperText?: string;
/**
* Set an id for the progress bar element
* @default "ccs-" + Math.random().toString(36)
*/
id?: string;
}
export default class ProgressBar extends SvelteComponentTyped<
ProgressBarProps,
{},
{ labelText: {} }
> {}

View file

@ -1,41 +0,0 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface ProgressIndicatorProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["ul"]> {
/**
* Specify the current step index
* @default 0
*/
currentIndex?: number;
/**
* Set to `true` to use the vertical variant
* @default false
*/
vertical?: boolean;
/**
* Set to `true` to specify whether the progress steps should be split equally in size in the div
* @default false
*/
spaceEqually?: boolean;
/**
* Set to `true` to prevent `currentIndex` from updating
* @default false
*/
preventChangeOnClick?: boolean;
}
export default class ProgressIndicator extends SvelteComponentTyped<
ProgressIndicatorProps,
{
change: CustomEvent<number>;
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{ default: {} }
> {}

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