diff --git a/package-lock.json b/package-lock.json index 060dd0fca..fbc6d68c8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -54,9 +54,9 @@ "dev": true }, "@hapi/hoek": { - "version": "8.5.0", - "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-8.5.0.tgz", - "integrity": "sha512-7XYT10CZfPsH7j9F1Jmg1+d0ezOux2oM2GfArAzLwWe4mE2Dr3hVjsAL6+TFY49RRJlCdJDMw3nJsLFroTc8Kw==", + "version": "8.5.1", + "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-8.5.1.tgz", + "integrity": "sha512-yN7kbciD87WzLGc5539Tn0sApjyiGHAJgKvG9W8C7O+6c7qmoQMfVs0W4bX17eqz6C78QJqqFrtgdK5EWf6Qow==", "dev": true }, "@hapi/joi": { @@ -107,11 +107,11 @@ } }, "@stencil/core": { - "version": "1.8.8", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-1.8.8.tgz", - "integrity": "sha512-ATru3WAQxWsc+Z2ji5l0wc28yyirgRB25AmZTLSnWeRUn388AkY2tn2Dderz+c7Rnsd9kpAdln6tsv0/KuQLkQ==", + "version": "1.10.1", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-1.10.1.tgz", + "integrity": "sha512-GKmCme53w3R9isNA7ll7MrcaXi8ztQxqgue2TQoRxYW1KzqdcIoTubWKTQa1Jn+6kTmn79hH+ckoAibasFEFgw==", "requires": { - "typescript": "3.7.5" + "typescript": "3.8.3" } }, "@stencil/sass": { @@ -4956,9 +4956,9 @@ "dev": true }, "typescript": { - "version": "3.7.5", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.7.5.tgz", - "integrity": "sha512-/P5lkRXkWHNAbcJIiHPfRoKqyd7bsyCma1hZNUGfn20qm64T6ZBlrzprymeu918H+mB/0rIg2gGK/BXkhhYgBw==" + "version": "3.8.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.8.3.tgz", + "integrity": "sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==" }, "unc-path-regex": { "version": "0.1.2", diff --git a/package.json b/package.json index 1b4e97b26..fda376752 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ }, "license": "MIT", "dependencies": { - "@stencil/core": "^1.8.8", + "@stencil/core": "^1.10.1", "@stencil/sass": "^1.1.1", "popper.js": "^1.16.0", "resize-observer": "^1.0.0", diff --git a/src/components.d.ts b/src/components.d.ts index a775f7f2d..94b4c700a 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -4,1227 +4,1194 @@ * This is an autogenerated file created by the Stencil compiler. * It contains typing information for all components that exist in this project. */ - - -import { HTMLStencilElement, JSXBase } from '@stencil/core/internal'; - - +import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; export namespace Components { - interface SlAlert { - /** - * Set to true to make the alert closable. - */ - 'closable': boolean; - /** - * Set to true to close the alert. - */ - 'closed': boolean; - /** - * The type of alert to draw. - */ - 'type': string; - } - interface SlButton { - /** - * Set to true to draw a full-width button. - */ - 'block': boolean; - /** - * Set to true to draw the button with a caret for use with dropdowns, popovers, etc. - */ - 'caret': boolean; - /** - * Set to true to draw a circle button. - */ - 'circle': boolean; - /** - * Set to true to disable the button. - */ - 'disabled': boolean; - /** - * Set to true to draw the button in a loading state. - */ - 'loading': boolean; - /** - * The button's tabindex attribute. - */ - 'nativeTabindex': number; - /** - * Set to true to draw an outlined button. - */ - 'outline': boolean; - /** - * Removes focus from the button. - */ - 'removeFocus': () => Promise; - /** - * Set to true to draw a rounded button. - */ - 'round': boolean; - /** - * Sets focus on the button. - */ - 'setFocus': () => Promise; - /** - * The button's size. - */ - 'size': 'small' | 'medium' | 'large'; - /** - * The button's type. - */ - 'type': 'default' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'text'; - } - interface SlCheckbox { - /** - * Set to true to draw the checkbox in a checked state. - */ - 'checked': boolean; - /** - * Set to true to disable the checkbox. - */ - 'disabled': boolean; - /** - * Set to true to draw the checkbox in an indeterminate state. - */ - 'indeterminate': boolean; - /** - * A native input's name attribute. - */ - 'name': string; - /** - * The checkbox's tabindex attribute. - */ - 'nativeTabindex': number; - /** - * Removes focus from the checkbox. - */ - 'removeFocus': () => Promise; - /** - * Sets focus on the checkbox. - */ - 'setFocus': () => Promise; - /** - * The native input's value attribute. - */ - 'value': string; - } - interface SlDropdown { - 'close': () => Promise; - 'open': () => Promise; - /** - * The preferred placement of the dropdown menu. Note that the actual placement may vary as needed to keep the menu inside of the viewport. - */ - 'placement': 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end'; - } - interface SlDropdownDivider {} - interface SlDropdownItem { - /** - * Set to true to draw the dropdown item in an active state. - */ - 'active': boolean; - /** - * Set to true to draw the item in a checked state. - */ - 'checked': boolean; - /** - * Set to true to draw the dropdown item in a disabled state. - */ - 'disabled': boolean; - } - interface SlInput { - /** - * The input's autocaptialize attribute. - */ - 'autocapitalize': string; - /** - * The input's autocomplete attribute. - */ - 'autocomplete': string; - /** - * The input's autocorrect attribute. - */ - 'autocorrect': string; - /** - * The input's autofocus attribute. - */ - 'autofocus': boolean; - /** - * Set to true to add a clear button when the input is populated. - */ - 'clearable': boolean; - /** - * Set to true to disable the input. - */ - 'disabled': boolean; - /** - * The input's max attribute. - */ - 'max': number; - /** - * The input's maxlength attribute. - */ - 'maxlength': number; - /** - * The input's min attribute. - */ - 'min': number; - /** - * The input's minlength attribute. - */ - 'minlength': number; - /** - * The input's name attribute. - */ - 'name': string; - /** - * The input's inputmode attribute. - */ - 'nativeInputmode': 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'; - /** - * The input's tabindex attribute. - */ - 'nativeTabindex': number; - /** - * The input's pattern attribute. - */ - 'pattern': string; - /** - * The input's placeholder text. - */ - 'placeholder': string; - /** - * Set to true for a readonly input. - */ - 'readonly': boolean; - /** - * Removes focus from the input. - */ - 'removeFocus': () => Promise; - /** - * The input's required attribute. - */ - 'required': boolean; - /** - * Sets focus on the input. - */ - 'setFocus': () => Promise; - /** - * The input's size, one of `small`, `medium`, or `large`. - */ - 'size': string; - /** - * The input's step attribute. - */ - 'step': number; - /** - * Set to true to add a password toggle button for password inputs. - */ - 'togglePassword': boolean; - /** - * The input's type, one of `text`, `number`, `email`, etc. - */ - 'type': 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url'; - /** - * The input's value attribute. - */ - 'value': string; - } - interface SlProgressBar { - /** - * The height of the progress bar in pixels. - */ - 'height': number; - /** - * The progress bar's percentage, 0 to 100. - */ - 'percentage': number; - } - interface SlProgressRing { - /** - * The current progress percentage, 0 - 100. - */ - 'percentage': number; - /** - * The size of the progress ring. - */ - 'size': number; - /** - * The stroke width of the progress ring in pixels. - */ - 'strokeWidth': number; - } - interface SlRadio { - /** - * Set to true to draw the radio in a checked state. - */ - 'checked': boolean; - /** - * Set to true to disable the radio. - */ - 'disabled': boolean; - /** - * A native input's name attribute. - */ - 'name': string; - /** - * The radio's tabindex attribute. - */ - 'nativeTabindex': number; - /** - * Removes focus from the radio. - */ - 'removeFocus': () => Promise; - /** - * Sets focus on the radio. - */ - 'setFocus': () => Promise; - /** - * The native input's value attribute. - */ - 'value': string; - } - interface SlRange { - /** - * Set to true to disable the input. - */ - 'disabled': boolean; - /** - * The input's max attribute. - */ - 'max': number; - /** - * The input's min attribute. - */ - 'min': number; - /** - * The input's name attribute. - */ - 'name': string; - /** - * The range's tabindex attribute. - */ - 'nativeTabindex': number; - /** - * Removes focus from the input. - */ - 'removeFocus': () => Promise; - /** - * Sets focus on the input. - */ - 'setFocus': () => Promise; - /** - * The input's step attribute. - */ - 'step': number; - /** - * The tooltip's position. - */ - 'tooltip': 'top' | 'bottom' | 'off'; - /** - * A function used to format the tooltip's value. - */ - 'tooltipFormatter': (value: number) => string; - /** - * The input's value attribute. - */ - 'value': number; - } - interface SlSpinner { - /** - * The spinner's size. - */ - 'size': string; - } - interface SlSwitch { - /** - * Set to true to draw the switch in a checked state. - */ - 'checked': boolean; - /** - * Set to true to disable the switch. - */ - 'disabled': boolean; - /** - * A native input's name attribute. - */ - 'name': string; - /** - * The switch's tabindex attribute. - */ - 'nativeTabindex': number; - /** - * Removes focus from the switch. - */ - 'removeFocus': () => Promise; - /** - * Sets focus on the switch. - */ - 'setFocus': () => Promise; - /** - * The native input's value attribute. - */ - 'value': string; - } - interface SlTab { - /** - * Set to true to draw the tab in an active state. - */ - 'active': boolean; - /** - * Set to true to draw the tab in a disabled state. - */ - 'disabled': boolean; - /** - * The name of the tab panel the tab will be synced to. The panel must exist in the same `` element. - */ - 'panel': string; - /** - * Removes focus from the tab. - */ - 'removeFocus': () => Promise; - /** - * Sets focus to the tab. - */ - 'setFocus': () => Promise; - } - interface SlTabPanel { - /** - * Set to true to show the tab panel. - */ - 'active': boolean; - /** - * The tab panel's name. - */ - 'name': string; - } - interface SlTabs { - /** - * The position of the tabs. - */ - 'position': 'top' | 'bottom' | 'left' | 'right'; - /** - * Shows the specified tab panel. - */ - 'show': (panel: string) => Promise; - } - interface SlTextarea { - /** - * The textarea's autocaptialize attribute. - */ - 'autocapitalize': string; - /** - * The textarea's autocomplete attribute. - */ - 'autocomplete': string; - /** - * The textarea's autocorrect attribute. - */ - 'autocorrect': string; - /** - * The textarea's autofocus attribute. - */ - 'autofocus': boolean; - /** - * Set to true to disable the textarea. - */ - 'disabled': boolean; - /** - * The textarea's maxlength attribute. - */ - 'maxlength': number; - /** - * The textarea's name attribute. - */ - 'name': string; - /** - * The input's inputmode attribute. - */ - 'nativeInputmode': 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'; - /** - * The input's tabindex attribute. - */ - 'nativeTabindex': number; - /** - * The textarea's placeholder text. - */ - 'placeholder': string; - /** - * Set to true for a readonly textarea. - */ - 'readonly': boolean; - /** - * Removes focus fromt the textarea. - */ - 'removeFocus': () => Promise; - /** - * The textarea's required attribute. - */ - 'required': boolean; - /** - * Controls how the textarea can be resized. - */ - 'resize': 'none' | 'vertical' | 'auto'; - /** - * The number of rows to display by default. - */ - 'rows': number; - /** - * Sets focus on the textarea. - */ - 'setFocus': () => Promise; - /** - * The textarea's size. - */ - 'size': 'small' | 'medium' | 'large'; - /** - * The textarea's value attribute. - */ - 'value': string; - } - interface SlTooltip { - /** - * Set to true to draw the the tooltip with an arrow. - */ - 'arrow': boolean; - /** - * Set to true to disable the tooltip so it won't show when triggered. - */ - 'disabled': boolean; - /** - * The distance in pixels from which to draw the tooltip from its target element. - */ - 'distance': number; - /** - * Shows the tooltip. - */ - 'hide': () => Promise; - /** - * The delay in ms before the tooltip hides. - */ - 'hideDelay': number; - /** - * The duration in ms of the tooltip's hide transition. - */ - 'hideDuration': number; - /** - * The maximum width in pixels the tooltip can be before its content wraps. - */ - 'maxWidth': number; - /** - * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip inside of the viewport. - */ - 'placement': | 'top' - | 'top-start' - | 'top-end' - | 'right' - | 'right-start' - | 'right-end' - | 'bottom' - | 'bottom-start' - | 'bottom-end' - | 'left' - | 'left-start' - | 'left-end'; - /** - * Shows the tooltip. - */ - 'show': () => Promise; - /** - * The delay in ms before showing the tooltip. - */ - 'showDelay': number; - /** - * The duration in ms of the tooltip's show transition. - */ - 'showDuration': number; - /** - * A selector or element to use as the tooltip's target. This is the element that will trigger the tooltip to show upon interaction. If no target is specified, the previous sibling element of the tooltip will be used. A common way to link a tooltip to a target is to give the target an `id` and pass `#id` to the `target` prop. - */ - 'target': string | HTMLElement; - /** - * The events that cause a tooltip to show, separated by a space. Possible values include any combination of `mouseenter`, `focus`, `click`, and `manual`. Use `manual` if you only want to show and hide the tooltip programmatically. - */ - 'trigger': string; - /** - * Sets the tooltip's z-index. - */ - 'zIndex': number; - } -} - -declare global { - - - interface HTMLSlAlertElement extends Components.SlAlert, HTMLStencilElement {} - var HTMLSlAlertElement: { - prototype: HTMLSlAlertElement; - new (): HTMLSlAlertElement; - }; - - interface HTMLSlButtonElement extends Components.SlButton, HTMLStencilElement {} - var HTMLSlButtonElement: { - prototype: HTMLSlButtonElement; - new (): HTMLSlButtonElement; - }; - - interface HTMLSlCheckboxElement extends Components.SlCheckbox, HTMLStencilElement {} - var HTMLSlCheckboxElement: { - prototype: HTMLSlCheckboxElement; - new (): HTMLSlCheckboxElement; - }; - - interface HTMLSlDropdownElement extends Components.SlDropdown, HTMLStencilElement {} - var HTMLSlDropdownElement: { - prototype: HTMLSlDropdownElement; - new (): HTMLSlDropdownElement; - }; - - interface HTMLSlDropdownDividerElement extends Components.SlDropdownDivider, HTMLStencilElement {} - var HTMLSlDropdownDividerElement: { - prototype: HTMLSlDropdownDividerElement; - new (): HTMLSlDropdownDividerElement; - }; - - interface HTMLSlDropdownItemElement extends Components.SlDropdownItem, HTMLStencilElement {} - var HTMLSlDropdownItemElement: { - prototype: HTMLSlDropdownItemElement; - new (): HTMLSlDropdownItemElement; - }; - - interface HTMLSlInputElement extends Components.SlInput, HTMLStencilElement {} - var HTMLSlInputElement: { - prototype: HTMLSlInputElement; - new (): HTMLSlInputElement; - }; - - interface HTMLSlProgressBarElement extends Components.SlProgressBar, HTMLStencilElement {} - var HTMLSlProgressBarElement: { - prototype: HTMLSlProgressBarElement; - new (): HTMLSlProgressBarElement; - }; - - interface HTMLSlProgressRingElement extends Components.SlProgressRing, HTMLStencilElement {} - var HTMLSlProgressRingElement: { - prototype: HTMLSlProgressRingElement; - new (): HTMLSlProgressRingElement; - }; - - interface HTMLSlRadioElement extends Components.SlRadio, HTMLStencilElement {} - var HTMLSlRadioElement: { - prototype: HTMLSlRadioElement; - new (): HTMLSlRadioElement; - }; - - interface HTMLSlRangeElement extends Components.SlRange, HTMLStencilElement {} - var HTMLSlRangeElement: { - prototype: HTMLSlRangeElement; - new (): HTMLSlRangeElement; - }; - - interface HTMLSlSpinnerElement extends Components.SlSpinner, HTMLStencilElement {} - var HTMLSlSpinnerElement: { - prototype: HTMLSlSpinnerElement; - new (): HTMLSlSpinnerElement; - }; - - interface HTMLSlSwitchElement extends Components.SlSwitch, HTMLStencilElement {} - var HTMLSlSwitchElement: { - prototype: HTMLSlSwitchElement; - new (): HTMLSlSwitchElement; - }; - - interface HTMLSlTabElement extends Components.SlTab, HTMLStencilElement {} - var HTMLSlTabElement: { - prototype: HTMLSlTabElement; - new (): HTMLSlTabElement; - }; - - interface HTMLSlTabPanelElement extends Components.SlTabPanel, HTMLStencilElement {} - var HTMLSlTabPanelElement: { - prototype: HTMLSlTabPanelElement; - new (): HTMLSlTabPanelElement; - }; - - interface HTMLSlTabsElement extends Components.SlTabs, HTMLStencilElement {} - var HTMLSlTabsElement: { - prototype: HTMLSlTabsElement; - new (): HTMLSlTabsElement; - }; - - interface HTMLSlTextareaElement extends Components.SlTextarea, HTMLStencilElement {} - var HTMLSlTextareaElement: { - prototype: HTMLSlTextareaElement; - new (): HTMLSlTextareaElement; - }; - - interface HTMLSlTooltipElement extends Components.SlTooltip, HTMLStencilElement {} - var HTMLSlTooltipElement: { - prototype: HTMLSlTooltipElement; - new (): HTMLSlTooltipElement; - }; - interface HTMLElementTagNameMap { - 'sl-alert': HTMLSlAlertElement; - 'sl-button': HTMLSlButtonElement; - 'sl-checkbox': HTMLSlCheckboxElement; - 'sl-dropdown': HTMLSlDropdownElement; - 'sl-dropdown-divider': HTMLSlDropdownDividerElement; - 'sl-dropdown-item': HTMLSlDropdownItemElement; - 'sl-input': HTMLSlInputElement; - 'sl-progress-bar': HTMLSlProgressBarElement; - 'sl-progress-ring': HTMLSlProgressRingElement; - 'sl-radio': HTMLSlRadioElement; - 'sl-range': HTMLSlRangeElement; - 'sl-spinner': HTMLSlSpinnerElement; - 'sl-switch': HTMLSlSwitchElement; - 'sl-tab': HTMLSlTabElement; - 'sl-tab-panel': HTMLSlTabPanelElement; - 'sl-tabs': HTMLSlTabsElement; - 'sl-textarea': HTMLSlTextareaElement; - 'sl-tooltip': HTMLSlTooltipElement; - } -} - -declare namespace LocalJSX { - interface SlAlert { - /** - * Set to true to make the alert closable. - */ - 'closable'?: boolean; - /** - * Set to true to close the alert. - */ - 'closed'?: boolean; - /** - * Emitted when the alert is closed. - */ - 'onSlClose'?: (event: CustomEvent) => void; - /** - * The type of alert to draw. - */ - 'type'?: string; - } - interface SlButton { - /** - * Set to true to draw a full-width button. - */ - 'block'?: boolean; - /** - * Set to true to draw the button with a caret for use with dropdowns, popovers, etc. - */ - 'caret'?: boolean; - /** - * Set to true to draw a circle button. - */ - 'circle'?: boolean; - /** - * Set to true to disable the button. - */ - 'disabled'?: boolean; - /** - * Set to true to draw the button in a loading state. - */ - 'loading'?: boolean; - /** - * The button's tabindex attribute. - */ - 'nativeTabindex'?: number; - /** - * Set to true to draw an outlined button. - */ - 'outline'?: boolean; - /** - * Set to true to draw a rounded button. - */ - 'round'?: boolean; - /** - * The button's size. - */ - 'size'?: 'small' | 'medium' | 'large'; - /** - * The button's type. - */ - 'type'?: 'default' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'text'; - } - interface SlCheckbox { - /** - * Set to true to draw the checkbox in a checked state. - */ - 'checked'?: boolean; - /** - * Set to true to disable the checkbox. - */ - 'disabled'?: boolean; - /** - * Set to true to draw the checkbox in an indeterminate state. - */ - 'indeterminate'?: boolean; - /** - * A native input's name attribute. - */ - 'name'?: string; - /** - * The checkbox's tabindex attribute. - */ - 'nativeTabindex'?: number; - /** - * The native input's value attribute. - */ - 'value'?: string; - } - interface SlDropdown { - /** - * The preferred placement of the dropdown menu. Note that the actual placement may vary as needed to keep the menu inside of the viewport. - */ - 'placement'?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end'; - } - interface SlDropdownDivider {} - interface SlDropdownItem { - /** - * Set to true to draw the dropdown item in an active state. - */ - 'active'?: boolean; - /** - * Set to true to draw the item in a checked state. - */ - 'checked'?: boolean; - /** - * Set to true to draw the dropdown item in a disabled state. - */ - 'disabled'?: boolean; - 'onShoelaceSelect'?: (event: CustomEvent) => void; - } - interface SlInput { - /** - * The input's autocaptialize attribute. - */ - 'autocapitalize'?: string; - /** - * The input's autocomplete attribute. - */ - 'autocomplete'?: string; - /** - * The input's autocorrect attribute. - */ - 'autocorrect'?: string; - /** - * The input's autofocus attribute. - */ - 'autofocus'?: boolean; - /** - * Set to true to add a clear button when the input is populated. - */ - 'clearable'?: boolean; - /** - * Set to true to disable the input. - */ - 'disabled'?: boolean; - /** - * The input's max attribute. - */ - 'max'?: number; - /** - * The input's maxlength attribute. - */ - 'maxlength'?: number; - /** - * The input's min attribute. - */ - 'min'?: number; - /** - * The input's minlength attribute. - */ - 'minlength'?: number; - /** - * The input's name attribute. - */ - 'name'?: string; - /** - * The input's inputmode attribute. - */ - 'nativeInputmode'?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'; - /** - * The input's tabindex attribute. - */ - 'nativeTabindex'?: number; - /** - * The input's pattern attribute. - */ - 'pattern'?: string; - /** - * The input's placeholder text. - */ - 'placeholder'?: string; - /** - * Set to true for a readonly input. - */ - 'readonly'?: boolean; - /** - * The input's required attribute. - */ - 'required'?: boolean; - /** - * The input's size, one of `small`, `medium`, or `large`. - */ - 'size'?: string; - /** - * The input's step attribute. - */ - 'step'?: number; - /** - * Set to true to add a password toggle button for password inputs. - */ - 'togglePassword'?: boolean; - /** - * The input's type, one of `text`, `number`, `email`, etc. - */ - 'type'?: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url'; - /** - * The input's value attribute. - */ - 'value'?: string; - } - interface SlProgressBar { - /** - * The height of the progress bar in pixels. - */ - 'height'?: number; - /** - * The progress bar's percentage, 0 to 100. - */ - 'percentage'?: number; - } - interface SlProgressRing { - /** - * The current progress percentage, 0 - 100. - */ - 'percentage'?: number; - /** - * The size of the progress ring. - */ - 'size'?: number; - /** - * The stroke width of the progress ring in pixels. - */ - 'strokeWidth'?: number; - } - interface SlRadio { - /** - * Set to true to draw the radio in a checked state. - */ - 'checked'?: boolean; - /** - * Set to true to disable the radio. - */ - 'disabled'?: boolean; - /** - * A native input's name attribute. - */ - 'name'?: string; - /** - * The radio's tabindex attribute. - */ - 'nativeTabindex'?: number; - /** - * The native input's value attribute. - */ - 'value'?: string; - } - interface SlRange { - /** - * Set to true to disable the input. - */ - 'disabled'?: boolean; - /** - * The input's max attribute. - */ - 'max'?: number; - /** - * The input's min attribute. - */ - 'min'?: number; - /** - * The input's name attribute. - */ - 'name'?: string; - /** - * The range's tabindex attribute. - */ - 'nativeTabindex'?: number; - /** - * The input's step attribute. - */ - 'step'?: number; - /** - * The tooltip's position. - */ - 'tooltip'?: 'top' | 'bottom' | 'off'; - /** - * A function used to format the tooltip's value. - */ - 'tooltipFormatter'?: (value: number) => string; - /** - * The input's value attribute. - */ - 'value'?: number; - } - interface SlSpinner { - /** - * The spinner's size. - */ - 'size'?: string; - } - interface SlSwitch { - /** - * Set to true to draw the switch in a checked state. - */ - 'checked'?: boolean; - /** - * Set to true to disable the switch. - */ - 'disabled'?: boolean; - /** - * A native input's name attribute. - */ - 'name'?: string; - /** - * The switch's tabindex attribute. - */ - 'nativeTabindex'?: number; - /** - * The native input's value attribute. - */ - 'value'?: string; - } - interface SlTab { - /** - * Set to true to draw the tab in an active state. - */ - 'active'?: boolean; - /** - * Set to true to draw the tab in a disabled state. - */ - 'disabled'?: boolean; - /** - * The name of the tab panel the tab will be synced to. The panel must exist in the same `` element. - */ - 'panel'?: string; - } - interface SlTabPanel { - /** - * Set to true to show the tab panel. - */ - 'active'?: boolean; - /** - * The tab panel's name. - */ - 'name'?: string; - } - interface SlTabs { - /** - * Emitted when a tab is hidden. - */ - 'onSlTabHide'?: (event: CustomEvent) => void; - /** - * Emitted when a tab is shown. - */ - 'onSlTabShow'?: (event: CustomEvent) => void; - /** - * The position of the tabs. - */ - 'position'?: 'top' | 'bottom' | 'left' | 'right'; - } - interface SlTextarea { - /** - * The textarea's autocaptialize attribute. - */ - 'autocapitalize'?: string; - /** - * The textarea's autocomplete attribute. - */ - 'autocomplete'?: string; - /** - * The textarea's autocorrect attribute. - */ - 'autocorrect'?: string; - /** - * The textarea's autofocus attribute. - */ - 'autofocus'?: boolean; - /** - * Set to true to disable the textarea. - */ - 'disabled'?: boolean; - /** - * The textarea's maxlength attribute. - */ - 'maxlength'?: number; - /** - * The textarea's name attribute. - */ - 'name'?: string; - /** - * The input's inputmode attribute. - */ - 'nativeInputmode'?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'; - /** - * The input's tabindex attribute. - */ - 'nativeTabindex'?: number; - /** - * The textarea's placeholder text. - */ - 'placeholder'?: string; - /** - * Set to true for a readonly textarea. - */ - 'readonly'?: boolean; - /** - * The textarea's required attribute. - */ - 'required'?: boolean; - /** - * Controls how the textarea can be resized. - */ - 'resize'?: 'none' | 'vertical' | 'auto'; - /** - * The number of rows to display by default. - */ - 'rows'?: number; - /** - * The textarea's size. - */ - 'size'?: 'small' | 'medium' | 'large'; - /** - * The textarea's value attribute. - */ - 'value'?: string; - } - interface SlTooltip { - /** - * Set to true to draw the the tooltip with an arrow. - */ - 'arrow'?: boolean; - /** - * Set to true to disable the tooltip so it won't show when triggered. - */ - 'disabled'?: boolean; - /** - * The distance in pixels from which to draw the tooltip from its target element. - */ - 'distance'?: number; - /** - * The delay in ms before the tooltip hides. - */ - 'hideDelay'?: number; - /** - * The duration in ms of the tooltip's hide transition. - */ - 'hideDuration'?: number; - /** - * The maximum width in pixels the tooltip can be before its content wraps. - */ - 'maxWidth'?: number; - /** - * Emitted when the tooltip has fully transitioned out and gets unmounted from the DOM. - */ - 'onSlHidden'?: (event: CustomEvent) => void; - /** - * Emitted when the tooltip begins to hide. - */ - 'onSlHide'?: (event: CustomEvent) => void; - /** - * Emitted when the tooltip begins to show, but before it gets mounted to the DOM. - */ - 'onSlShow'?: (event: CustomEvent) => void; - /** - * Emitted when the tooltip has fully transitioned in. - */ - 'onSlShown'?: (event: CustomEvent) => void; - /** - * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip inside of the viewport. - */ - 'placement'?: | 'top' - | 'top-start' - | 'top-end' - | 'right' - | 'right-start' - | 'right-end' - | 'bottom' - | 'bottom-start' - | 'bottom-end' - | 'left' - | 'left-start' - | 'left-end'; - /** - * The delay in ms before showing the tooltip. - */ - 'showDelay'?: number; - /** - * The duration in ms of the tooltip's show transition. - */ - 'showDuration'?: number; - /** - * A selector or element to use as the tooltip's target. This is the element that will trigger the tooltip to show upon interaction. If no target is specified, the previous sibling element of the tooltip will be used. A common way to link a tooltip to a target is to give the target an `id` and pass `#id` to the `target` prop. - */ - 'target'?: string | HTMLElement; - /** - * The events that cause a tooltip to show, separated by a space. Possible values include any combination of `mouseenter`, `focus`, `click`, and `manual`. Use `manual` if you only want to show and hide the tooltip programmatically. - */ - 'trigger'?: string; - /** - * Sets the tooltip's z-index. - */ - 'zIndex'?: number; - } - - interface IntrinsicElements { - 'sl-alert': SlAlert; - 'sl-button': SlButton; - 'sl-checkbox': SlCheckbox; - 'sl-dropdown': SlDropdown; - 'sl-dropdown-divider': SlDropdownDivider; - 'sl-dropdown-item': SlDropdownItem; - 'sl-input': SlInput; - 'sl-progress-bar': SlProgressBar; - 'sl-progress-ring': SlProgressRing; - 'sl-radio': SlRadio; - 'sl-range': SlRange; - 'sl-spinner': SlSpinner; - 'sl-switch': SlSwitch; - 'sl-tab': SlTab; - 'sl-tab-panel': SlTabPanel; - 'sl-tabs': SlTabs; - 'sl-textarea': SlTextarea; - 'sl-tooltip': SlTooltip; - } -} - -export { LocalJSX as JSX }; - - -declare module "@stencil/core" { - export namespace JSX { - interface IntrinsicElements { - 'sl-alert': LocalJSX.SlAlert & JSXBase.HTMLAttributes; - 'sl-button': LocalJSX.SlButton & JSXBase.HTMLAttributes; - 'sl-checkbox': LocalJSX.SlCheckbox & JSXBase.HTMLAttributes; - 'sl-dropdown': LocalJSX.SlDropdown & JSXBase.HTMLAttributes; - 'sl-dropdown-divider': LocalJSX.SlDropdownDivider & JSXBase.HTMLAttributes; - 'sl-dropdown-item': LocalJSX.SlDropdownItem & JSXBase.HTMLAttributes; - 'sl-input': LocalJSX.SlInput & JSXBase.HTMLAttributes; - 'sl-progress-bar': LocalJSX.SlProgressBar & JSXBase.HTMLAttributes; - 'sl-progress-ring': LocalJSX.SlProgressRing & JSXBase.HTMLAttributes; - 'sl-radio': LocalJSX.SlRadio & JSXBase.HTMLAttributes; - 'sl-range': LocalJSX.SlRange & JSXBase.HTMLAttributes; - 'sl-spinner': LocalJSX.SlSpinner & JSXBase.HTMLAttributes; - 'sl-switch': LocalJSX.SlSwitch & JSXBase.HTMLAttributes; - 'sl-tab': LocalJSX.SlTab & JSXBase.HTMLAttributes; - 'sl-tab-panel': LocalJSX.SlTabPanel & JSXBase.HTMLAttributes; - 'sl-tabs': LocalJSX.SlTabs & JSXBase.HTMLAttributes; - 'sl-textarea': LocalJSX.SlTextarea & JSXBase.HTMLAttributes; - 'sl-tooltip': LocalJSX.SlTooltip & JSXBase.HTMLAttributes; + interface SlAlert { + /** + * Set to true to make the alert closable. + */ + "closable": boolean; + /** + * Set to true to close the alert. + */ + "closed": boolean; + /** + * The type of alert to draw. + */ + "type": string; + } + interface SlButton { + /** + * Set to true to draw a full-width button. + */ + "block": boolean; + /** + * Set to true to draw the button with a caret for use with dropdowns, popovers, etc. + */ + "caret": boolean; + /** + * Set to true to draw a circle button. + */ + "circle": boolean; + /** + * Set to true to disable the button. + */ + "disabled": boolean; + /** + * Set to true to draw the button in a loading state. + */ + "loading": boolean; + /** + * The button's tabindex attribute. + */ + "nativeTabindex": number; + /** + * Set to true to draw an outlined button. + */ + "outline": boolean; + /** + * Removes focus from the button. + */ + "removeFocus": () => Promise; + /** + * Set to true to draw a rounded button. + */ + "round": boolean; + /** + * Sets focus on the button. + */ + "setFocus": () => Promise; + /** + * The button's size. + */ + "size": "small" | "medium" | "large"; + /** + * The button's type. + */ + "type": "default" | "primary" | "success" | "info" | "warning" | "danger" | "text"; + } + interface SlCheckbox { + /** + * Set to true to draw the checkbox in a checked state. + */ + "checked": boolean; + /** + * Set to true to disable the checkbox. + */ + "disabled": boolean; + /** + * Set to true to draw the checkbox in an indeterminate state. + */ + "indeterminate": boolean; + /** + * A native input's name attribute. + */ + "name": string; + /** + * The checkbox's tabindex attribute. + */ + "nativeTabindex": number; + /** + * Removes focus from the checkbox. + */ + "removeFocus": () => Promise; + /** + * Sets focus on the checkbox. + */ + "setFocus": () => Promise; + /** + * The native input's value attribute. + */ + "value": string; + } + interface SlDropdown { + "close": () => Promise; + "open": () => Promise; + /** + * The preferred placement of the dropdown menu. Note that the actual placement may vary as needed to keep the menu inside of the viewport. + */ + "placement": "bottom-start" | "bottom-end" | "top-start" | "top-end"; + } + interface SlDropdownDivider { + } + interface SlDropdownItem { + /** + * Set to true to draw the dropdown item in an active state. + */ + "active": boolean; + /** + * Set to true to draw the item in a checked state. + */ + "checked": boolean; + /** + * Set to true to draw the dropdown item in a disabled state. + */ + "disabled": boolean; + } + interface SlInput { + /** + * The input's autocaptialize attribute. + */ + "autocapitalize": string; + /** + * The input's autocomplete attribute. + */ + "autocomplete": string; + /** + * The input's autocorrect attribute. + */ + "autocorrect": string; + /** + * The input's autofocus attribute. + */ + "autofocus": boolean; + /** + * Set to true to add a clear button when the input is populated. + */ + "clearable": boolean; + /** + * Set to true to disable the input. + */ + "disabled": boolean; + /** + * The input's max attribute. + */ + "max": number; + /** + * The input's maxlength attribute. + */ + "maxlength": number; + /** + * The input's min attribute. + */ + "min": number; + /** + * The input's minlength attribute. + */ + "minlength": number; + /** + * The input's name attribute. + */ + "name": string; + /** + * The input's inputmode attribute. + */ + "nativeInputmode": "none" | "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url"; + /** + * The input's tabindex attribute. + */ + "nativeTabindex": number; + /** + * The input's pattern attribute. + */ + "pattern": string; + /** + * The input's placeholder text. + */ + "placeholder": string; + /** + * Set to true for a readonly input. + */ + "readonly": boolean; + /** + * Removes focus from the input. + */ + "removeFocus": () => Promise; + /** + * The input's required attribute. + */ + "required": boolean; + /** + * Sets focus on the input. + */ + "setFocus": () => Promise; + /** + * The input's size, one of `small`, `medium`, or `large`. + */ + "size": string; + /** + * The input's step attribute. + */ + "step": number; + /** + * Set to true to add a password toggle button for password inputs. + */ + "togglePassword": boolean; + /** + * The input's type, one of `text`, `number`, `email`, etc. + */ + "type": "email" | "number" | "password" | "search" | "tel" | "text" | "url"; + /** + * The input's value attribute. + */ + "value": string; + } + interface SlProgressBar { + /** + * The height of the progress bar in pixels. + */ + "height": number; + /** + * The progress bar's percentage, 0 to 100. + */ + "percentage": number; + } + interface SlProgressRing { + /** + * The current progress percentage, 0 - 100. + */ + "percentage": number; + /** + * The size of the progress ring. + */ + "size": number; + /** + * The stroke width of the progress ring in pixels. + */ + "strokeWidth": number; + } + interface SlRadio { + /** + * Set to true to draw the radio in a checked state. + */ + "checked": boolean; + /** + * Set to true to disable the radio. + */ + "disabled": boolean; + /** + * A native input's name attribute. + */ + "name": string; + /** + * The radio's tabindex attribute. + */ + "nativeTabindex": number; + /** + * Removes focus from the radio. + */ + "removeFocus": () => Promise; + /** + * Sets focus on the radio. + */ + "setFocus": () => Promise; + /** + * The native input's value attribute. + */ + "value": string; + } + interface SlRange { + /** + * Set to true to disable the input. + */ + "disabled": boolean; + /** + * The input's max attribute. + */ + "max": number; + /** + * The input's min attribute. + */ + "min": number; + /** + * The input's name attribute. + */ + "name": string; + /** + * The range's tabindex attribute. + */ + "nativeTabindex": number; + /** + * Removes focus from the input. + */ + "removeFocus": () => Promise; + /** + * Sets focus on the input. + */ + "setFocus": () => Promise; + /** + * The input's step attribute. + */ + "step": number; + /** + * The tooltip's position. + */ + "tooltip": "top" | "bottom" | "off"; + /** + * A function used to format the tooltip's value. + */ + "tooltipFormatter": (value: number) => string; + /** + * The input's value attribute. + */ + "value": number; + } + interface SlSpinner { + /** + * The spinner's size. + */ + "size": string; + } + interface SlSwitch { + /** + * Set to true to draw the switch in a checked state. + */ + "checked": boolean; + /** + * Set to true to disable the switch. + */ + "disabled": boolean; + /** + * A native input's name attribute. + */ + "name": string; + /** + * The switch's tabindex attribute. + */ + "nativeTabindex": number; + /** + * Removes focus from the switch. + */ + "removeFocus": () => Promise; + /** + * Sets focus on the switch. + */ + "setFocus": () => Promise; + /** + * The native input's value attribute. + */ + "value": string; + } + interface SlTab { + /** + * Set to true to draw the tab in an active state. + */ + "active": boolean; + /** + * Set to true to draw the tab in a disabled state. + */ + "disabled": boolean; + /** + * The name of the tab panel the tab will be synced to. The panel must exist in the same `` element. + */ + "panel": string; + /** + * Removes focus from the tab. + */ + "removeFocus": () => Promise; + /** + * Sets focus to the tab. + */ + "setFocus": () => Promise; + } + interface SlTabPanel { + /** + * Set to true to show the tab panel. + */ + "active": boolean; + /** + * The tab panel's name. + */ + "name": string; + } + interface SlTabs { + /** + * The position of the tabs. + */ + "position": "top" | "bottom" | "left" | "right"; + /** + * Shows the specified tab panel. + */ + "show": (panel: string) => Promise; + } + interface SlTextarea { + /** + * The textarea's autocaptialize attribute. + */ + "autocapitalize": string; + /** + * The textarea's autocomplete attribute. + */ + "autocomplete": string; + /** + * The textarea's autocorrect attribute. + */ + "autocorrect": string; + /** + * The textarea's autofocus attribute. + */ + "autofocus": boolean; + /** + * Set to true to disable the textarea. + */ + "disabled": boolean; + /** + * The textarea's maxlength attribute. + */ + "maxlength": number; + /** + * The textarea's name attribute. + */ + "name": string; + /** + * The input's inputmode attribute. + */ + "nativeInputmode": "none" | "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url"; + /** + * The input's tabindex attribute. + */ + "nativeTabindex": number; + /** + * The textarea's placeholder text. + */ + "placeholder": string; + /** + * Set to true for a readonly textarea. + */ + "readonly": boolean; + /** + * Removes focus fromt the textarea. + */ + "removeFocus": () => Promise; + /** + * The textarea's required attribute. + */ + "required": boolean; + /** + * Controls how the textarea can be resized. + */ + "resize": "none" | "vertical" | "auto"; + /** + * The number of rows to display by default. + */ + "rows": number; + /** + * Sets focus on the textarea. + */ + "setFocus": () => Promise; + /** + * The textarea's size. + */ + "size": "small" | "medium" | "large"; + /** + * The textarea's value attribute. + */ + "value": string; + } + interface SlTooltip { + /** + * Set to true to draw the the tooltip with an arrow. + */ + "arrow": boolean; + /** + * Set to true to disable the tooltip so it won't show when triggered. + */ + "disabled": boolean; + /** + * The distance in pixels from which to draw the tooltip from its target element. + */ + "distance": number; + /** + * Shows the tooltip. + */ + "hide": () => Promise; + /** + * The delay in ms before the tooltip hides. + */ + "hideDelay": number; + /** + * The duration in ms of the tooltip's hide transition. + */ + "hideDuration": number; + /** + * The maximum width in pixels the tooltip can be before its content wraps. + */ + "maxWidth": number; + /** + * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip inside of the viewport. + */ + "placement": "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end"; + /** + * Shows the tooltip. + */ + "show": () => Promise; + /** + * The delay in ms before showing the tooltip. + */ + "showDelay": number; + /** + * The duration in ms of the tooltip's show transition. + */ + "showDuration": number; + /** + * A selector or element to use as the tooltip's target. This is the element that will trigger the tooltip to show upon interaction. If no target is specified, the previous sibling element of the tooltip will be used. A common way to link a tooltip to a target is to give the target an `id` and pass `#id` to the `target` prop. + */ + "target": string | HTMLElement; + /** + * The events that cause a tooltip to show, separated by a space. Possible values include any combination of `mouseenter`, `focus`, `click`, and `manual`. Use `manual` if you only want to show and hide the tooltip programmatically. + */ + "trigger": string; + /** + * Sets the tooltip's z-index. + */ + "zIndex": number; + } +} +declare global { + interface HTMLSlAlertElement extends Components.SlAlert, HTMLStencilElement { + } + var HTMLSlAlertElement: { + prototype: HTMLSlAlertElement; + new (): HTMLSlAlertElement; + }; + interface HTMLSlButtonElement extends Components.SlButton, HTMLStencilElement { + } + var HTMLSlButtonElement: { + prototype: HTMLSlButtonElement; + new (): HTMLSlButtonElement; + }; + interface HTMLSlCheckboxElement extends Components.SlCheckbox, HTMLStencilElement { + } + var HTMLSlCheckboxElement: { + prototype: HTMLSlCheckboxElement; + new (): HTMLSlCheckboxElement; + }; + interface HTMLSlDropdownElement extends Components.SlDropdown, HTMLStencilElement { + } + var HTMLSlDropdownElement: { + prototype: HTMLSlDropdownElement; + new (): HTMLSlDropdownElement; + }; + interface HTMLSlDropdownDividerElement extends Components.SlDropdownDivider, HTMLStencilElement { + } + var HTMLSlDropdownDividerElement: { + prototype: HTMLSlDropdownDividerElement; + new (): HTMLSlDropdownDividerElement; + }; + interface HTMLSlDropdownItemElement extends Components.SlDropdownItem, HTMLStencilElement { + } + var HTMLSlDropdownItemElement: { + prototype: HTMLSlDropdownItemElement; + new (): HTMLSlDropdownItemElement; + }; + interface HTMLSlInputElement extends Components.SlInput, HTMLStencilElement { + } + var HTMLSlInputElement: { + prototype: HTMLSlInputElement; + new (): HTMLSlInputElement; + }; + interface HTMLSlProgressBarElement extends Components.SlProgressBar, HTMLStencilElement { + } + var HTMLSlProgressBarElement: { + prototype: HTMLSlProgressBarElement; + new (): HTMLSlProgressBarElement; + }; + interface HTMLSlProgressRingElement extends Components.SlProgressRing, HTMLStencilElement { + } + var HTMLSlProgressRingElement: { + prototype: HTMLSlProgressRingElement; + new (): HTMLSlProgressRingElement; + }; + interface HTMLSlRadioElement extends Components.SlRadio, HTMLStencilElement { + } + var HTMLSlRadioElement: { + prototype: HTMLSlRadioElement; + new (): HTMLSlRadioElement; + }; + interface HTMLSlRangeElement extends Components.SlRange, HTMLStencilElement { + } + var HTMLSlRangeElement: { + prototype: HTMLSlRangeElement; + new (): HTMLSlRangeElement; + }; + interface HTMLSlSpinnerElement extends Components.SlSpinner, HTMLStencilElement { + } + var HTMLSlSpinnerElement: { + prototype: HTMLSlSpinnerElement; + new (): HTMLSlSpinnerElement; + }; + interface HTMLSlSwitchElement extends Components.SlSwitch, HTMLStencilElement { + } + var HTMLSlSwitchElement: { + prototype: HTMLSlSwitchElement; + new (): HTMLSlSwitchElement; + }; + interface HTMLSlTabElement extends Components.SlTab, HTMLStencilElement { + } + var HTMLSlTabElement: { + prototype: HTMLSlTabElement; + new (): HTMLSlTabElement; + }; + interface HTMLSlTabPanelElement extends Components.SlTabPanel, HTMLStencilElement { + } + var HTMLSlTabPanelElement: { + prototype: HTMLSlTabPanelElement; + new (): HTMLSlTabPanelElement; + }; + interface HTMLSlTabsElement extends Components.SlTabs, HTMLStencilElement { + } + var HTMLSlTabsElement: { + prototype: HTMLSlTabsElement; + new (): HTMLSlTabsElement; + }; + interface HTMLSlTextareaElement extends Components.SlTextarea, HTMLStencilElement { + } + var HTMLSlTextareaElement: { + prototype: HTMLSlTextareaElement; + new (): HTMLSlTextareaElement; + }; + interface HTMLSlTooltipElement extends Components.SlTooltip, HTMLStencilElement { + } + var HTMLSlTooltipElement: { + prototype: HTMLSlTooltipElement; + new (): HTMLSlTooltipElement; + }; + interface HTMLElementTagNameMap { + "sl-alert": HTMLSlAlertElement; + "sl-button": HTMLSlButtonElement; + "sl-checkbox": HTMLSlCheckboxElement; + "sl-dropdown": HTMLSlDropdownElement; + "sl-dropdown-divider": HTMLSlDropdownDividerElement; + "sl-dropdown-item": HTMLSlDropdownItemElement; + "sl-input": HTMLSlInputElement; + "sl-progress-bar": HTMLSlProgressBarElement; + "sl-progress-ring": HTMLSlProgressRingElement; + "sl-radio": HTMLSlRadioElement; + "sl-range": HTMLSlRangeElement; + "sl-spinner": HTMLSlSpinnerElement; + "sl-switch": HTMLSlSwitchElement; + "sl-tab": HTMLSlTabElement; + "sl-tab-panel": HTMLSlTabPanelElement; + "sl-tabs": HTMLSlTabsElement; + "sl-textarea": HTMLSlTextareaElement; + "sl-tooltip": HTMLSlTooltipElement; + } +} +declare namespace LocalJSX { + interface SlAlert { + /** + * Set to true to make the alert closable. + */ + "closable"?: boolean; + /** + * Set to true to close the alert. + */ + "closed"?: boolean; + /** + * Emitted when the alert is closed. + */ + "onSlClose"?: (event: CustomEvent) => void; + /** + * The type of alert to draw. + */ + "type"?: string; + } + interface SlButton { + /** + * Set to true to draw a full-width button. + */ + "block"?: boolean; + /** + * Set to true to draw the button with a caret for use with dropdowns, popovers, etc. + */ + "caret"?: boolean; + /** + * Set to true to draw a circle button. + */ + "circle"?: boolean; + /** + * Set to true to disable the button. + */ + "disabled"?: boolean; + /** + * Set to true to draw the button in a loading state. + */ + "loading"?: boolean; + /** + * The button's tabindex attribute. + */ + "nativeTabindex"?: number; + /** + * Set to true to draw an outlined button. + */ + "outline"?: boolean; + /** + * Set to true to draw a rounded button. + */ + "round"?: boolean; + /** + * The button's size. + */ + "size"?: "small" | "medium" | "large"; + /** + * The button's type. + */ + "type"?: "default" | "primary" | "success" | "info" | "warning" | "danger" | "text"; + } + interface SlCheckbox { + /** + * Set to true to draw the checkbox in a checked state. + */ + "checked"?: boolean; + /** + * Set to true to disable the checkbox. + */ + "disabled"?: boolean; + /** + * Set to true to draw the checkbox in an indeterminate state. + */ + "indeterminate"?: boolean; + /** + * A native input's name attribute. + */ + "name"?: string; + /** + * The checkbox's tabindex attribute. + */ + "nativeTabindex"?: number; + /** + * The native input's value attribute. + */ + "value"?: string; + } + interface SlDropdown { + /** + * The preferred placement of the dropdown menu. Note that the actual placement may vary as needed to keep the menu inside of the viewport. + */ + "placement"?: "bottom-start" | "bottom-end" | "top-start" | "top-end"; + } + interface SlDropdownDivider { + } + interface SlDropdownItem { + /** + * Set to true to draw the dropdown item in an active state. + */ + "active"?: boolean; + /** + * Set to true to draw the item in a checked state. + */ + "checked"?: boolean; + /** + * Set to true to draw the dropdown item in a disabled state. + */ + "disabled"?: boolean; + "onShoelaceSelect"?: (event: CustomEvent) => void; + } + interface SlInput { + /** + * The input's autocaptialize attribute. + */ + "autocapitalize"?: string; + /** + * The input's autocomplete attribute. + */ + "autocomplete"?: string; + /** + * The input's autocorrect attribute. + */ + "autocorrect"?: string; + /** + * The input's autofocus attribute. + */ + "autofocus"?: boolean; + /** + * Set to true to add a clear button when the input is populated. + */ + "clearable"?: boolean; + /** + * Set to true to disable the input. + */ + "disabled"?: boolean; + /** + * The input's max attribute. + */ + "max"?: number; + /** + * The input's maxlength attribute. + */ + "maxlength"?: number; + /** + * The input's min attribute. + */ + "min"?: number; + /** + * The input's minlength attribute. + */ + "minlength"?: number; + /** + * The input's name attribute. + */ + "name"?: string; + /** + * The input's inputmode attribute. + */ + "nativeInputmode"?: "none" | "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url"; + /** + * The input's tabindex attribute. + */ + "nativeTabindex"?: number; + /** + * The input's pattern attribute. + */ + "pattern"?: string; + /** + * The input's placeholder text. + */ + "placeholder"?: string; + /** + * Set to true for a readonly input. + */ + "readonly"?: boolean; + /** + * The input's required attribute. + */ + "required"?: boolean; + /** + * The input's size, one of `small`, `medium`, or `large`. + */ + "size"?: string; + /** + * The input's step attribute. + */ + "step"?: number; + /** + * Set to true to add a password toggle button for password inputs. + */ + "togglePassword"?: boolean; + /** + * The input's type, one of `text`, `number`, `email`, etc. + */ + "type"?: "email" | "number" | "password" | "search" | "tel" | "text" | "url"; + /** + * The input's value attribute. + */ + "value"?: string; + } + interface SlProgressBar { + /** + * The height of the progress bar in pixels. + */ + "height"?: number; + /** + * The progress bar's percentage, 0 to 100. + */ + "percentage"?: number; + } + interface SlProgressRing { + /** + * The current progress percentage, 0 - 100. + */ + "percentage"?: number; + /** + * The size of the progress ring. + */ + "size"?: number; + /** + * The stroke width of the progress ring in pixels. + */ + "strokeWidth"?: number; + } + interface SlRadio { + /** + * Set to true to draw the radio in a checked state. + */ + "checked"?: boolean; + /** + * Set to true to disable the radio. + */ + "disabled"?: boolean; + /** + * A native input's name attribute. + */ + "name"?: string; + /** + * The radio's tabindex attribute. + */ + "nativeTabindex"?: number; + /** + * The native input's value attribute. + */ + "value"?: string; + } + interface SlRange { + /** + * Set to true to disable the input. + */ + "disabled"?: boolean; + /** + * The input's max attribute. + */ + "max"?: number; + /** + * The input's min attribute. + */ + "min"?: number; + /** + * The input's name attribute. + */ + "name"?: string; + /** + * The range's tabindex attribute. + */ + "nativeTabindex"?: number; + /** + * The input's step attribute. + */ + "step"?: number; + /** + * The tooltip's position. + */ + "tooltip"?: "top" | "bottom" | "off"; + /** + * A function used to format the tooltip's value. + */ + "tooltipFormatter"?: (value: number) => string; + /** + * The input's value attribute. + */ + "value"?: number; + } + interface SlSpinner { + /** + * The spinner's size. + */ + "size"?: string; + } + interface SlSwitch { + /** + * Set to true to draw the switch in a checked state. + */ + "checked"?: boolean; + /** + * Set to true to disable the switch. + */ + "disabled"?: boolean; + /** + * A native input's name attribute. + */ + "name"?: string; + /** + * The switch's tabindex attribute. + */ + "nativeTabindex"?: number; + /** + * The native input's value attribute. + */ + "value"?: string; + } + interface SlTab { + /** + * Set to true to draw the tab in an active state. + */ + "active"?: boolean; + /** + * Set to true to draw the tab in a disabled state. + */ + "disabled"?: boolean; + /** + * The name of the tab panel the tab will be synced to. The panel must exist in the same `` element. + */ + "panel"?: string; + } + interface SlTabPanel { + /** + * Set to true to show the tab panel. + */ + "active"?: boolean; + /** + * The tab panel's name. + */ + "name"?: string; + } + interface SlTabs { + /** + * Emitted when a tab is hidden. + */ + "onSlTabHide"?: (event: CustomEvent) => void; + /** + * Emitted when a tab is shown. + */ + "onSlTabShow"?: (event: CustomEvent) => void; + /** + * The position of the tabs. + */ + "position"?: "top" | "bottom" | "left" | "right"; + } + interface SlTextarea { + /** + * The textarea's autocaptialize attribute. + */ + "autocapitalize"?: string; + /** + * The textarea's autocomplete attribute. + */ + "autocomplete"?: string; + /** + * The textarea's autocorrect attribute. + */ + "autocorrect"?: string; + /** + * The textarea's autofocus attribute. + */ + "autofocus"?: boolean; + /** + * Set to true to disable the textarea. + */ + "disabled"?: boolean; + /** + * The textarea's maxlength attribute. + */ + "maxlength"?: number; + /** + * The textarea's name attribute. + */ + "name"?: string; + /** + * The input's inputmode attribute. + */ + "nativeInputmode"?: "none" | "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url"; + /** + * The input's tabindex attribute. + */ + "nativeTabindex"?: number; + /** + * The textarea's placeholder text. + */ + "placeholder"?: string; + /** + * Set to true for a readonly textarea. + */ + "readonly"?: boolean; + /** + * The textarea's required attribute. + */ + "required"?: boolean; + /** + * Controls how the textarea can be resized. + */ + "resize"?: "none" | "vertical" | "auto"; + /** + * The number of rows to display by default. + */ + "rows"?: number; + /** + * The textarea's size. + */ + "size"?: "small" | "medium" | "large"; + /** + * The textarea's value attribute. + */ + "value"?: string; + } + interface SlTooltip { + /** + * Set to true to draw the the tooltip with an arrow. + */ + "arrow"?: boolean; + /** + * Set to true to disable the tooltip so it won't show when triggered. + */ + "disabled"?: boolean; + /** + * The distance in pixels from which to draw the tooltip from its target element. + */ + "distance"?: number; + /** + * The delay in ms before the tooltip hides. + */ + "hideDelay"?: number; + /** + * The duration in ms of the tooltip's hide transition. + */ + "hideDuration"?: number; + /** + * The maximum width in pixels the tooltip can be before its content wraps. + */ + "maxWidth"?: number; + /** + * Emitted when the tooltip has fully transitioned out and gets unmounted from the DOM. + */ + "onSlHidden"?: (event: CustomEvent) => void; + /** + * Emitted when the tooltip begins to hide. + */ + "onSlHide"?: (event: CustomEvent) => void; + /** + * Emitted when the tooltip begins to show, but before it gets mounted to the DOM. + */ + "onSlShow"?: (event: CustomEvent) => void; + /** + * Emitted when the tooltip has fully transitioned in. + */ + "onSlShown"?: (event: CustomEvent) => void; + /** + * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip inside of the viewport. + */ + "placement"?: "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end"; + /** + * The delay in ms before showing the tooltip. + */ + "showDelay"?: number; + /** + * The duration in ms of the tooltip's show transition. + */ + "showDuration"?: number; + /** + * A selector or element to use as the tooltip's target. This is the element that will trigger the tooltip to show upon interaction. If no target is specified, the previous sibling element of the tooltip will be used. A common way to link a tooltip to a target is to give the target an `id` and pass `#id` to the `target` prop. + */ + "target"?: string | HTMLElement; + /** + * The events that cause a tooltip to show, separated by a space. Possible values include any combination of `mouseenter`, `focus`, `click`, and `manual`. Use `manual` if you only want to show and hide the tooltip programmatically. + */ + "trigger"?: string; + /** + * Sets the tooltip's z-index. + */ + "zIndex"?: number; + } + interface IntrinsicElements { + "sl-alert": SlAlert; + "sl-button": SlButton; + "sl-checkbox": SlCheckbox; + "sl-dropdown": SlDropdown; + "sl-dropdown-divider": SlDropdownDivider; + "sl-dropdown-item": SlDropdownItem; + "sl-input": SlInput; + "sl-progress-bar": SlProgressBar; + "sl-progress-ring": SlProgressRing; + "sl-radio": SlRadio; + "sl-range": SlRange; + "sl-spinner": SlSpinner; + "sl-switch": SlSwitch; + "sl-tab": SlTab; + "sl-tab-panel": SlTabPanel; + "sl-tabs": SlTabs; + "sl-textarea": SlTextarea; + "sl-tooltip": SlTooltip; + } +} +export { LocalJSX as JSX }; +declare module "@stencil/core" { + export namespace JSX { + interface IntrinsicElements { + "sl-alert": LocalJSX.SlAlert & JSXBase.HTMLAttributes; + "sl-button": LocalJSX.SlButton & JSXBase.HTMLAttributes; + "sl-checkbox": LocalJSX.SlCheckbox & JSXBase.HTMLAttributes; + "sl-dropdown": LocalJSX.SlDropdown & JSXBase.HTMLAttributes; + "sl-dropdown-divider": LocalJSX.SlDropdownDivider & JSXBase.HTMLAttributes; + "sl-dropdown-item": LocalJSX.SlDropdownItem & JSXBase.HTMLAttributes; + "sl-input": LocalJSX.SlInput & JSXBase.HTMLAttributes; + "sl-progress-bar": LocalJSX.SlProgressBar & JSXBase.HTMLAttributes; + "sl-progress-ring": LocalJSX.SlProgressRing & JSXBase.HTMLAttributes; + "sl-radio": LocalJSX.SlRadio & JSXBase.HTMLAttributes; + "sl-range": LocalJSX.SlRange & JSXBase.HTMLAttributes; + "sl-spinner": LocalJSX.SlSpinner & JSXBase.HTMLAttributes; + "sl-switch": LocalJSX.SlSwitch & JSXBase.HTMLAttributes; + "sl-tab": LocalJSX.SlTab & JSXBase.HTMLAttributes; + "sl-tab-panel": LocalJSX.SlTabPanel & JSXBase.HTMLAttributes; + "sl-tabs": LocalJSX.SlTabs & JSXBase.HTMLAttributes; + "sl-textarea": LocalJSX.SlTextarea & JSXBase.HTMLAttributes; + "sl-tooltip": LocalJSX.SlTooltip & JSXBase.HTMLAttributes; + } } - } } - -