2020-07-15 21:30:37 +00:00
/* eslint-disable */
/* tslint:disable */
/ * *
* 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" ;
2020-10-07 13:34:05 +00:00
import { IconLibraryMutator , IconLibraryResolver } from "./components/icon-library/icon-library-registry" ;
2020-07-15 21:30:37 +00:00
export namespace Components {
interface SlAlert {
/ * *
* Set to true to make the alert closable .
* /
"closable" : boolean ;
2020-09-16 13:34:54 +00:00
/ * *
2020-09-18 13:40:21 +00:00
* The length of time , in milliseconds , the alert will show before closing itself . If the user interacts with the alert before it closes ( e . g . moves the mouse over it ) , the timer will restart .
2020-09-16 13:34:54 +00:00
* /
"duration" : number ;
2020-07-15 21:30:37 +00:00
/ * *
* Hides the alert
* /
2020-08-13 14:29:31 +00:00
"hide" : ( ) = > Promise < void > ;
2020-07-15 21:30:37 +00:00
/ * *
* Indicates whether or not the alert is open . You can use this in lieu of the show / hide methods .
* /
"open" : boolean ;
/ * *
* Shows the alert .
* /
2020-08-13 14:29:31 +00:00
"show" : ( ) = > Promise < void > ;
2020-09-16 14:16:08 +00:00
/ * *
2020-09-18 13:40:21 +00:00
* Displays the alert as a toast notification . This will move the alert out of its position in the DOM and , when dismissed , it will be removed from the DOM completely . By storing a reference to the alert , you can reuse it by calling this method again . The returned promise will resolve after the alert is hidden .
2020-09-16 14:16:08 +00:00
* /
2020-09-17 20:27:11 +00:00
"toast" : ( ) = > Promise < unknown > ;
2020-07-15 21:30:37 +00:00
/ * *
* The type of alert .
* /
"type" : 'primary' | 'success' | 'info' | 'warning' | 'danger' ;
}
2020-08-10 14:04:25 +00:00
interface SlAnimation {
/ * *
2020-08-11 13:32:10 +00:00
* Clears all KeyframeEffects caused by this animation and aborts its playback .
2020-08-10 14:04:25 +00:00
* /
"cancel" : ( ) = > Promise < void > ;
/ * *
* The number of milliseconds to delay the start of the animation .
* /
"delay" : number ;
/ * *
2020-08-11 13:32:10 +00:00
* Determines the direction of playback as well as the behavior when reaching the end of an iteration .
2020-08-10 14:04:25 +00:00
* /
2020-08-11 13:32:10 +00:00
"direction" : PlaybackDirection ;
2020-08-10 14:04:25 +00:00
/ * *
* The number of milliseconds each iteration of the animation takes to complete .
* /
"duration" : number ;
/ * *
2020-12-29 20:21:15 +00:00
* The easing function to use for the animation . This can be a Shoelace easing function or a custom easing function such as ` cubic-bezier(0, 1, .76, 1.14) ` .
2020-08-10 14:04:25 +00:00
* /
2020-08-10 14:45:46 +00:00
"easing" : string ;
2020-08-10 14:04:25 +00:00
/ * *
2020-08-11 13:32:10 +00:00
* The number of milliseconds to delay after the active period of an animation sequence .
2020-08-10 14:04:25 +00:00
* /
"endDelay" : number ;
/ * *
2020-08-11 13:32:10 +00:00
* Sets how the animation applies styles to its target before and after its execution .
2020-08-10 14:04:25 +00:00
* /
2020-08-11 13:32:10 +00:00
"fill" : FillMode ;
2020-08-10 14:04:25 +00:00
/ * *
2020-08-11 13:32:10 +00:00
* Sets the playback time to the end of the animation corresponding to the current playback direction .
2020-08-10 14:04:25 +00:00
* /
"finish" : ( ) = > Promise < void > ;
/ * *
2020-08-11 13:32:10 +00:00
* Gets a list of all supported animation names .
2020-08-10 14:04:25 +00:00
* /
2020-08-11 13:32:10 +00:00
"getAnimationNames" : ( ) = > Promise < string [ ] > ;
2020-08-10 14:04:25 +00:00
/ * *
2020-08-11 13:32:10 +00:00
* Gets the current time of the animation in milliseconds .
2020-08-10 14:04:25 +00:00
* /
2020-08-11 13:32:10 +00:00
"getCurrentTime" : ( ) = > Promise < number > ;
2020-08-10 14:04:25 +00:00
/ * *
2020-08-11 13:32:10 +00:00
* Gets a list of all supported easing function names .
2020-08-10 14:04:25 +00:00
* /
2020-08-11 13:32:10 +00:00
"getEasingNames" : ( ) = > Promise < string [ ] > ;
2020-08-10 14:04:25 +00:00
/ * *
2020-08-11 13:32:10 +00:00
* The offset at which to start the animation , usually between 0 ( start ) and 1 ( end ) .
2020-08-10 14:04:25 +00:00
* /
2020-08-10 14:45:46 +00:00
"iterationStart" : number ;
2020-08-10 14:04:25 +00:00
/ * *
2020-08-11 13:32:10 +00:00
* The number of iterations to run before the animation completes . Defaults to ` Infinity ` , which loops .
2020-08-10 14:04:25 +00:00
* /
2020-08-10 14:45:46 +00:00
"iterations" : number ;
2020-08-10 14:04:25 +00:00
/ * *
2020-08-11 13:32:10 +00:00
* The keyframes to use for the animation . If this is set , ` name ` will be ignored .
2020-08-10 14:04:25 +00:00
* /
2020-08-11 13:32:10 +00:00
"keyframes" : Keyframe [ ] ;
2020-08-10 14:04:25 +00:00
/ * *
2020-12-29 20:21:15 +00:00
* The name of the built - in animation to use . For custom animations , use the ` keyframes ` prop .
2020-08-10 14:04:25 +00:00
* /
2020-08-11 13:32:10 +00:00
"name" : string ;
2020-08-10 14:04:25 +00:00
/ * *
2020-08-11 13:32:10 +00:00
* Pauses the animation . The animation will resume when this prop is removed .
2020-08-10 14:04:25 +00:00
* /
2020-08-11 13:32:10 +00:00
"pause" : boolean ;
2020-08-10 14:04:25 +00:00
/ * *
2020-08-11 13:32:10 +00:00
* Sets the animation 's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this to `2`, for example, will double the animation' s speed . A negative value can be used to reverse the animation . This value can be changed without causing the animation to restart .
2020-08-10 14:04:25 +00:00
* /
2020-08-10 14:45:46 +00:00
"playbackRate" : number ;
2020-08-10 14:04:25 +00:00
/ * *
2020-08-11 13:32:10 +00:00
* Sets the current time of the animation in milliseconds .
2020-08-10 14:04:25 +00:00
* /
2020-08-11 13:32:10 +00:00
"setCurrentTime" : ( time : number ) = > Promise < void > ;
2020-08-10 14:04:25 +00:00
}
2020-07-15 21:30:37 +00:00
interface SlAvatar {
/ * *
* Alternative text for the image .
* /
"alt" : string ;
/ * *
* The image source to use for the avatar .
* /
"image" : string ;
/ * *
* Initials to use as a fallback when no image is available ( 1 - 2 characters max recommended ) .
* /
"initials" : string ;
/ * *
2020-07-28 12:41:45 +00:00
* The shape of the avatar .
2020-07-15 21:30:37 +00:00
* /
"shape" : 'circle' | 'square' | 'rounded' ;
}
interface SlBadge {
2020-07-16 19:31:46 +00:00
/ * *
* Set to true to draw a pill - style badge with rounded edges .
* /
"pill" : boolean ;
2020-07-27 11:32:17 +00:00
/ * *
* Set to true to make the badge pulsate to draw attention .
* /
"pulse" : boolean ;
2020-07-15 21:30:37 +00:00
/ * *
* The badge ' s type .
* /
"type" : 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'text' ;
}
interface SlButton {
/ * *
* 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 ;
2020-08-07 19:42:55 +00:00
/ * *
* Tells the browser to download the linked file as this filename . Only used when ` href ` is set .
* /
"download" : string ;
/ * *
* When set , the underlying button will be rendered as an ` <a> ` with this ` href ` instead of a ` <button> ` .
* /
"href" : string ;
2020-07-15 21:30:37 +00:00
/ * *
* Set to true to draw the button in a loading state .
* /
"loading" : boolean ;
/ * *
2020-08-07 19:42:55 +00:00
* An optional name for the button . Ignored when ` href ` is set .
2020-07-15 21:30:37 +00:00
* /
"name" : string ;
/ * *
* Set to true to draw a pill - style button with rounded edges .
* /
"pill" : boolean ;
/ * *
* Removes focus from the button .
* /
"removeFocus" : ( ) = > Promise < void > ;
/ * *
* Sets focus on the button .
* /
"setFocus" : ( ) = > Promise < void > ;
/ * *
* The button ' s size .
* /
"size" : 'small' | 'medium' | 'large' ;
/ * *
2020-08-07 19:42:55 +00:00
* Indicates if activating the button should submit the form . Ignored when ` href ` is set .
2020-07-15 21:30:37 +00:00
* /
"submit" : boolean ;
2020-08-07 19:42:55 +00:00
/ * *
* Tells the browser where to open the link . Only used when ` href ` is set .
* /
"target" : '_blank' | '_parent' | '_self' | '_top' ;
2020-07-15 21:30:37 +00:00
/ * *
* The button ' s type .
* /
"type" : 'default' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'text' ;
/ * *
2020-08-07 19:42:55 +00:00
* An optional value for the button . Ignored when ` href ` is set .
2020-07-15 21:30:37 +00:00
* /
"value" : string ;
}
2020-08-06 13:07:24 +00:00
interface SlButtonGroup {
/ * *
2020-09-04 21:11:25 +00:00
* A label to use for the button group ' s ` aria-label ` attribute .
2020-08-06 13:07:24 +00:00
* /
"label" : string ;
}
2020-07-22 20:02:49 +00:00
interface SlCard {
}
2020-07-15 21:30:37 +00:00
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 ;
2020-08-28 20:50:18 +00:00
/ * *
* This will be true when the control is in an invalid state . Validity is determined by the ` required ` prop .
* /
"invalid" : boolean ;
2020-07-15 21:30:37 +00:00
/ * *
* The checkbox ' s name attribute .
* /
"name" : string ;
/ * *
* Removes focus from the checkbox .
* /
"removeFocus" : ( ) = > Promise < void > ;
2020-08-28 20:50:18 +00:00
/ * *
* Checks for validity and shows the browser ' s validation message if the control is invalid .
* /
"reportValidity" : ( ) = > Promise < boolean > ;
2020-08-28 20:14:39 +00:00
/ * *
* Set to true to make the checkbox a required field .
* /
"required" : boolean ;
2020-08-28 20:50:18 +00:00
/ * *
* Sets a custom validation message . If ` message ` is not empty , the field will be considered invalid .
* /
"setCustomValidity" : ( message : string ) = > Promise < void > ;
2020-07-15 21:30:37 +00:00
/ * *
* Sets focus on the checkbox .
* /
"setFocus" : ( ) = > Promise < void > ;
/ * *
* The checkbox ' s value attribute .
* /
"value" : string ;
}
interface SlColorPicker {
/ * *
* Set to true to disable the color picker .
* /
"disabled" : boolean ;
/ * *
* The format to use for the display value . If opacity is enabled , these will translate to HEXA , RGBA , and HSLA respectively . The color picker will always accept user input in any format ( including CSS color names ) and convert it to the desired format .
* /
"format" : 'hex' | 'rgb' | 'hsl' ;
2020-12-11 22:10:30 +00:00
/ * *
* Returns the current value as a string in the specified format .
* /
"getFormattedValue" : ( format ? : 'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' ) = > Promise < string > ;
2020-08-25 21:07:28 +00:00
/ * *
* Enable this option to prevent the panel from being clipped when the component is placed inside a container with ` overflow: auto|scroll ` .
* /
"hoist" : boolean ;
2020-07-15 21:30:37 +00:00
/ * *
* Set to true to render the color picker inline rather than inside a dropdown .
* /
"inline" : boolean ;
2020-09-04 14:18:46 +00:00
/ * *
* This will be true when the control is in an invalid state . Validity is determined by the ` setCustomValidity() ` method using the browser ' s constraint validation API .
* /
"invalid" : boolean ;
2020-09-04 12:57:34 +00:00
/ * *
* The input ' s name attribute .
* /
"name" : string ;
2020-12-11 22:10:30 +00:00
/ * *
* Removes the format toggle .
* /
2020-12-22 14:40:11 +00:00
"noFormatToggle" : boolean ;
2020-07-15 21:30:37 +00:00
/ * *
* Whether to show the opacity slider .
* /
"opacity" : boolean ;
2020-09-04 14:18:46 +00:00
/ * *
* Checks for validity and shows the browser ' s validation message if the control is invalid .
* /
"reportValidity" : ( ) = > Promise < unknown > ;
/ * *
* Sets a custom validation message . If ` message ` is not empty , the field will be considered invalid .
* /
"setCustomValidity" : ( message : string ) = > Promise < void > ;
2020-07-15 21:30:37 +00:00
/ * *
2020-10-09 21:45:16 +00:00
* Determines the size of the color picker ' s trigger . This has no effect on inline color pickers .
2020-07-15 21:30:37 +00:00
* /
"size" : 'small' | 'medium' | 'large' ;
/ * *
* An array of predefined color swatches to display . Can include any format the color picker can parse , including HEX ( A ) , RGB ( A ) , HSL ( A ) , and CSS color names .
* /
"swatches" : string [ ] ;
/ * *
* By default , the value will be set in lowercase . Set this to true to set it in uppercase instead .
* /
"uppercase" : boolean ;
/ * *
* The current color .
* /
"value" : string ;
}
interface SlDetails {
/ * *
* Set to true to prevent the user from toggling the details .
* /
"disabled" : boolean ;
/ * *
* Hides the alert
* /
2020-08-13 14:29:31 +00:00
"hide" : ( ) = > Promise < void > ;
2020-07-15 21:30:37 +00:00
/ * *
* Indicates whether or not the details is open . You can use this in lieu of the show / hide methods .
* /
"open" : boolean ;
/ * *
* Shows the alert .
* /
2020-08-13 14:29:31 +00:00
"show" : ( ) = > Promise < void > ;
2020-07-15 21:30:37 +00:00
/ * *
2020-08-03 16:54:47 +00:00
* The summary to show in the details header . If you need to display HTML , use the ` summary ` slot instead .
2020-07-15 21:30:37 +00:00
* /
"summary" : string ;
}
interface SlDialog {
/ * *
* Hides the dialog
* /
2020-08-13 14:29:31 +00:00
"hide" : ( ) = > Promise < void > ;
2020-07-15 21:30:37 +00:00
/ * *
* The dialog ' s label as displayed in the header . You should always include a relevant label even when using ` no-header ` , as it is required for proper accessibility .
* /
"label" : string ;
/ * *
* Set to true to disable the header . This will also remove the default close button , so please ensure you provide an easy , accessible way for users to dismiss the dialog .
* /
"noHeader" : boolean ;
/ * *
* Indicates whether or not the dialog is open . You can use this in lieu of the show / hide methods .
* /
"open" : boolean ;
/ * *
* Shows the dialog
* /
2020-08-13 14:29:31 +00:00
"show" : ( ) = > Promise < void > ;
2020-07-15 21:30:37 +00:00
}
interface SlDrawer {
/ * *
* By default , the drawer slides out of its containing block ( usually the viewport ) . To make the drawer slide out of its parent element , set this prop and add ` position: relative ` to the parent .
* /
"contained" : boolean ;
/ * *
* Hides the drawer
* /
2020-08-13 14:29:31 +00:00
"hide" : ( ) = > Promise < void > ;
2020-07-15 21:30:37 +00:00
/ * *
* The drawer ' s label as displayed in the header . You should always include a relevant label even when using ` no-header ` , as it is required for proper accessibility .
* /
"label" : string ;
/ * *
* Removes the header . This will also remove the default close button , so please ensure you provide an easy , accessible way for users to dismiss the drawer .
* /
"noHeader" : boolean ;
/ * *
* Indicates whether or not the drawer is open . You can use this in lieu of the show / hide methods .
* /
"open" : boolean ;
/ * *
* The direction from which the drawer will open .
* /
"placement" : 'top' | 'right' | 'bottom' | 'left' ;
/ * *
* Shows the drawer
* /
2020-08-13 14:29:31 +00:00
"show" : ( ) = > Promise < void > ;
2020-07-15 21:30:37 +00:00
}
interface SlDropdown {
/ * *
* Determines whether the dropdown should hide when a menu item is selected .
* /
"closeOnSelect" : boolean ;
/ * *
* The dropdown will close when the user interacts outside of this element ( e . g . clicking ) .
* /
"containingElement" : HTMLElement ;
/ * *
* The distance in pixels from which to offset the panel away from its trigger .
* /
"distance" : number ;
/ * *
* Hides the dropdown panel
* /
2020-08-13 14:29:31 +00:00
"hide" : ( ) = > Promise < void > ;
2020-08-25 21:07:28 +00:00
/ * *
* Enable this option to prevent the panel from being clipped when the component is placed inside a container with ` overflow: auto|scroll ` .
* /
"hoist" : boolean ;
2020-07-15 21:30:37 +00:00
/ * *
* Indicates whether or not the dropdown is open . You can use this in lieu of the show / hide methods .
* /
"open" : boolean ;
/ * *
* The preferred placement of the dropdown panel . Note that the actual placement may vary as needed to keep the panel inside of the viewport .
* /
"placement" : | 'top'
| 'top-start'
| 'top-end'
| 'bottom'
| 'bottom-start'
| 'bottom-end'
| 'right'
| 'right-start'
| 'right-end'
| 'left'
| 'left-start'
| 'left-end' ;
/ * *
* Shows the dropdown panel
* /
2020-08-13 14:29:31 +00:00
"show" : ( ) = > Promise < void > ;
2020-07-15 21:30:37 +00:00
/ * *
* The distance in pixels from which to offset the panel along its trigger .
* /
"skidding" : number ;
}
interface SlForm {
/ * *
* Gets all form control elements ( native and custom ) .
* /
"getFormControls" : ( ) = > Promise < HTMLElement [ ] > ;
/ * *
* Serializes all form controls elements and returns a ` FormData ` object .
* /
"getFormData" : ( ) = > Promise < FormData > ;
/ * *
2020-08-29 14:39:18 +00:00
* Prevent the form from validating inputs before submitting .
2020-07-15 21:30:37 +00:00
* /
2020-08-29 14:39:18 +00:00
"novalidate" : boolean ;
2020-07-15 21:30:37 +00:00
/ * *
2020-10-15 18:33:30 +00:00
* Submits the form . If all controls are valid , the ` sl-submit ` event will be emitted and the promise will resolve with ` true ` . If any form control is invalid , the promise will resolve with ` false ` and no event will be emitted .
2020-07-15 21:30:37 +00:00
* /
2020-08-28 20:14:39 +00:00
"submit" : ( ) = > Promise < boolean > ;
2020-07-15 21:30:37 +00:00
}
2020-08-25 13:20:13 +00:00
interface SlFormatBytes {
/ * *
* The locale to use when formatting the number .
* /
"locale" : string ;
/ * *
* The unit to display .
* /
"unit" : 'bytes' | 'bits' ;
/ * *
* The number to format in bytes .
* /
"value" : number ;
}
2020-11-25 21:18:07 +00:00
interface SlFormatDate {
/ * *
* The date / time to format . If not set , the current date and time will be used .
* /
"date" : Date | string ;
/ * *
* The format for displaying the day .
* /
"day" : 'numeric' | '2-digit' ;
/ * *
* The format for displaying the era .
* /
"era" : 'narrow' | 'short' | 'long' ;
/ * *
* The format for displaying the hour .
* /
"hour" : 'numeric' | '2-digit' ;
/ * *
* When set , 24 hour time will always be used .
* /
"hourFormat" : 'auto' | '12' | '24' ;
/ * *
* The locale to use when formatting the date / time .
* /
"locale" : string ;
/ * *
* The format for displaying the minute .
* /
"minute" : 'numeric' | '2-digit' ;
/ * *
* The format for displaying the month .
* /
"month" : 'numeric' | '2-digit' | 'narrow' | 'short' | 'long' ;
/ * *
* The format for displaying the second .
* /
"second" : 'numeric' | '2-digit' ;
/ * *
* The time zone to express the time in .
* /
"timeZone" : string ;
/ * *
* The format for displaying the time .
* /
"timeZoneName" : 'short' | 'long' ;
/ * *
* The format for displaying the weekday .
* /
"weekday" : 'narrow' | 'short' | 'long' ;
/ * *
* The format for displaying the year .
* /
"year" : 'numeric' | '2-digit' ;
}
2020-11-09 14:38:30 +00:00
interface SlFormatNumber {
/ * *
* The currency to use when formatting . Must be an ISO 4217 currency code such as ` USD ` or ` EUR ` .
* /
"currency" : string ;
/ * *
* How to display the currency .
* /
"currencyDisplay" : 'symbol' | 'narrowSymbol' | 'code' | 'name' ;
/ * *
* The locale to use when formatting the number .
* /
"locale" : string ;
/ * *
* The maximum number of fraction digits to use . Possible values are 0 - 20 .
* /
"maximumFractionDigits" : number ;
/ * *
* The maximum number of significant digits to use , . Possible values are 1 - 21 .
* /
"maximumSignificantDigits" : number ;
/ * *
* The minimum number of fraction digits to use . Possible values are 0 - 20 .
* /
"minimumFractionDigits" : number ;
/ * *
* The minimum number of integer digits to use . Possible values are 1 - 21 .
* /
"minimumIntegerDigits" : number ;
/ * *
* The minimum number of significant digits to use . Possible values are 1 - 21 .
* /
"minimumSignificantDigits" : number ;
/ * *
* Turns off grouping separators .
* /
"noGrouping" : boolean ;
/ * *
* The formatting style to use .
* /
"type" : 'currency' | 'decimal' | 'percent' ;
/ * *
2020-11-11 21:52:47 +00:00
* The number to format .
2020-11-09 14:38:30 +00:00
* /
"value" : number ;
}
2020-07-15 21:30:37 +00:00
interface SlIcon {
/ * *
* An alternative description to use for accessibility . If omitted , the name or src will be used to generate it .
* /
"label" : string ;
2020-09-29 20:52:16 +00:00
/ * *
2020-10-07 13:34:05 +00:00
* The name of a registered custom icon library .
2020-09-29 20:52:16 +00:00
* /
"library" : string ;
2020-07-15 21:30:37 +00:00
/ * *
* The name of the icon to draw .
* /
"name" : string ;
2020-10-01 17:39:38 +00:00
"redraw" : ( ) = > Promise < void > ;
2020-07-15 21:30:37 +00:00
/ * *
* An external URL of an SVG file .
* /
"src" : string ;
}
2020-07-24 20:57:38 +00:00
interface SlIconButton {
/ * *
* Set to true to disable the button .
* /
"disabled" : boolean ;
/ * *
2020-10-23 03:05:28 +00:00
* A description that gets read by screen readers and other assistive devices . For optimal accessibility , you should always include a label that describes what the icon button does .
2020-07-24 20:57:38 +00:00
* /
"label" : string ;
/ * *
2020-10-07 13:34:05 +00:00
* The name of a registered custom icon library .
* /
"library" : string ;
/ * *
* The name of the icon to draw .
2020-07-24 20:57:38 +00:00
* /
"name" : string ;
/ * *
* An external URL of an SVG file .
* /
"src" : string ;
}
2020-10-07 13:34:05 +00:00
interface SlIconLibrary {
/ * *
* A function that mutates the SVG element before it renders .
* /
"mutator" : IconLibraryMutator ;
/ * *
* The name of the icon library .
* /
"name" : string ;
/ * *
* A function that translates an icon name to a URL where the corresponding SVG file exists The URL can be local or a CORS - enabled endpoint .
* /
"resolver" : IconLibraryResolver ;
}
2020-08-21 21:27:11 +00:00
interface SlImageComparer {
/ * *
* The position of the divider as a percentage .
* /
"position" : number ;
}
2020-10-16 12:57:02 +00:00
interface SlInclude {
2020-12-08 14:18:29 +00:00
/ * *
* Allows included scripts to be executed . You must ensure the content you ' re including is trusted , otherwise this option can lead to XSS vulnerabilities in your app !
* /
"allowScripts" : boolean ;
2020-10-16 12:57:02 +00:00
/ * *
* The fetch mode to use .
* /
"mode" : 'cors' | 'no-cors' | 'same-origin' ;
/ * *
* The location of the HTML file to include .
* /
"src" : string ;
}
2020-07-15 21:30:37 +00:00
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 ;
2020-12-23 20:47:13 +00:00
/ * *
* The input ' s help text . Alternatively , you can use the help - text slot .
* /
"helpText" : string ;
2020-07-15 21:30:37 +00:00
/ * *
* The input ' s inputmode attribute .
* /
"inputmode" : 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url' ;
/ * *
2020-08-28 20:50:18 +00:00
* This will be true when the control is in an invalid state . Validity is determined by props such as ` type ` , ` required ` , ` minlength ` , ` maxlength ` , and ` pattern ` using the browser ' s constraint validation API .
2020-07-15 21:30:37 +00:00
* /
"invalid" : boolean ;
/ * *
2020-12-23 20:47:13 +00:00
* The input ' s label . Alternatively , you can use the label slot .
2020-07-15 21:30:37 +00:00
* /
"label" : string ;
/ * *
2020-08-28 20:14:39 +00:00
* The input ' s maximum value .
2020-07-15 21:30:37 +00:00
* /
"max" : number ;
/ * *
2020-08-28 20:14:39 +00:00
* The maximum length of input that will be considered valid .
2020-07-15 21:30:37 +00:00
* /
"maxlength" : number ;
/ * *
2020-08-28 20:14:39 +00:00
* The input ' s minimum value .
2020-07-15 21:30:37 +00:00
* /
"min" : number ;
/ * *
2020-08-28 20:14:39 +00:00
* The minimum length of input that will be considered valid .
2020-07-15 21:30:37 +00:00
* /
"minlength" : number ;
/ * *
* The input ' s name attribute .
* /
"name" : string ;
/ * *
2020-08-28 20:14:39 +00:00
* A pattern to validate input against .
2020-07-15 21:30:37 +00:00
* /
"pattern" : string ;
/ * *
* Set to true to draw a pill - style input with rounded edges .
* /
"pill" : boolean ;
/ * *
* The input ' s placeholder text .
* /
"placeholder" : string ;
/ * *
2020-08-28 20:14:39 +00:00
* Set to true to make the input readonly .
2020-07-15 21:30:37 +00:00
* /
"readonly" : boolean ;
/ * *
* Removes focus from the input .
* /
"removeFocus" : ( ) = > Promise < void > ;
/ * *
2020-08-28 20:14:39 +00:00
* Checks for validity and shows the browser ' s validation message if the control is invalid .
* /
"reportValidity" : ( ) = > Promise < boolean > ;
/ * *
2020-10-06 11:04:40 +00:00
* Set to true to make the input a required field .
2020-07-15 21:30:37 +00:00
* /
"required" : boolean ;
/ * *
* Selects all the text in the input .
* /
"select" : ( ) = > Promise < void > ;
2020-08-28 20:50:18 +00:00
/ * *
* Sets a custom validation message . If ` message ` is not empty , the field will be considered invalid .
* /
"setCustomValidity" : ( message : string ) = > Promise < void > ;
2020-07-15 21:30:37 +00:00
/ * *
* Sets focus on the input .
* /
"setFocus" : ( ) = > Promise < void > ;
/ * *
* Replaces a range of text with a new string .
* /
"setRangeText" : ( replacement : string , start : number , end : number , selectMode ? : 'select' | 'start' | 'end' | 'preserve' ) = > Promise < void > ;
/ * *
* Sets the start and end positions of the text selection ( 0 - based ) .
* /
"setSelectionRange" : ( selectionStart : number , selectionEnd : number , selectionDirection ? : 'forward' | 'backward' | 'none' ) = > Promise < void > ;
/ * *
* The input ' s size .
* /
"size" : 'small' | 'medium' | 'large' ;
2020-10-02 19:46:58 +00:00
/ * *
* Enables spell checking on the input .
* /
"spellcheck" : boolean ;
2020-07-15 21:30:37 +00:00
/ * *
* 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 .
* /
"type" : 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' ;
/ * *
* The input ' s value attribute .
* /
"value" : string ;
}
interface SlMenu {
2020-07-24 14:41:52 +00:00
/ * *
* Initiates type - to - select logic , which automatically selects an option based on what the user is currently typing . The key passed will be appended to the internal query and the selection will be updated . After a brief period , the internal query is cleared automatically . This method is intended to be used with the keydown event . Useful for enabling type - to - select when the menu doesn ' t have focus .
* /
"typeToSelect" : ( key : string ) = > Promise < void > ;
2020-07-15 21:30:37 +00:00
}
interface SlMenuDivider {
}
interface SlMenuItem {
/ * *
* Set to true to draw the item in a checked state .
* /
"checked" : boolean ;
/ * *
* Set to true to draw the menu item in a disabled state .
* /
"disabled" : boolean ;
2020-10-22 17:41:09 +00:00
/ * *
* Removes focus from the button .
* /
"removeFocus" : ( ) = > Promise < void > ;
/ * *
* Sets focus on the button .
* /
"setFocus" : ( ) = > Promise < void > ;
2020-07-15 21:30:37 +00:00
/ * *
2020-12-30 18:32:42 +00:00
* A unique value to store in the menu item . This can be used as a way to identify menu items when selected .
2020-07-15 21:30:37 +00:00
* /
"value" : string ;
}
interface SlMenuLabel {
}
interface SlProgressBar {
2020-11-25 21:20:15 +00:00
/ * *
* When true , percentage is ignored , the label is hidden , and the progress bar is drawn in an indeterminate state .
* /
"indeterminate" : boolean ;
2020-07-15 21:30:37 +00:00
/ * *
* 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 in pixels .
* /
"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 ;
2020-08-28 20:50:18 +00:00
/ * *
* This will be true when the control is in an invalid state . Validity in range inputs is determined by the message provided by the ` setCustomValidity ` method .
* /
"invalid" : boolean ;
2020-07-15 21:30:37 +00:00
/ * *
* The radio ' s name attribute .
* /
"name" : string ;
/ * *
* Removes focus from the radio .
* /
"removeFocus" : ( ) = > Promise < void > ;
2020-08-28 20:50:18 +00:00
/ * *
* Checks for validity and shows the browser ' s validation message if the control is invalid .
* /
"reportValidity" : ( ) = > Promise < boolean > ;
/ * *
* Sets a custom validation message . If ` message ` is not empty , the field will be considered invalid .
* /
"setCustomValidity" : ( message : string ) = > Promise < void > ;
2020-07-15 21:30:37 +00:00
/ * *
* Sets focus on the radio .
* /
"setFocus" : ( ) = > Promise < void > ;
/ * *
* The radio ' s value attribute .
* /
"value" : string ;
}
interface SlRange {
/ * *
* Set to true to disable the input .
* /
"disabled" : boolean ;
2020-08-28 20:50:18 +00:00
/ * *
* This will be true when the control is in an invalid state . Validity in range inputs is determined by the message provided by the ` setCustomValidity ` method .
* /
"invalid" : boolean ;
2020-07-15 21:30:37 +00:00
/ * *
* The input ' s max attribute .
* /
"max" : number ;
/ * *
* The input ' s min attribute .
* /
"min" : number ;
/ * *
* The input ' s name attribute .
* /
"name" : string ;
/ * *
* Removes focus from the input .
* /
"removeFocus" : ( ) = > Promise < void > ;
2020-08-28 20:50:18 +00:00
/ * *
* Sets a custom validation message . If ` message ` is not empty , the field will be considered invalid .
* /
"setCustomValidity" : ( message : string ) = > Promise < void > ;
2020-07-15 21:30:37 +00:00
/ * *
* Sets focus on the input .
* /
"setFocus" : ( ) = > Promise < void > ;
/ * *
* The input ' s step attribute .
* /
"step" : number ;
/ * *
* The preferred placedment of the tooltip .
* /
"tooltip" : 'top' | 'bottom' | 'none' ;
/ * *
* A function used to format the tooltip ' s value .
* /
"tooltipFormatter" : ( value : number ) = > string ;
/ * *
* The input ' s value attribute .
* /
"value" : number ;
}
2020-07-20 10:17:20 +00:00
interface SlRating {
/ * *
* Disables the rating .
* /
"disabled" : boolean ;
2020-07-20 16:58:05 +00:00
/ * *
* A function that returns the symbols to display . Accepts an option ` value ` parameter you can use to map a specific symbol to a value .
* /
"getSymbol" : ( value? : number ) = > string ;
2020-07-20 10:17:20 +00:00
/ * *
* The highest rating to show .
* /
"max" : number ;
/ * *
* The minimum increment value allowed by the control .
* /
"precision" : number ;
/ * *
* Makes the rating readonly .
* /
"readonly" : boolean ;
2020-07-20 16:58:05 +00:00
/ * *
* Removes focus from the rating .
* /
"removeFocus" : ( ) = > Promise < void > ;
/ * *
* Sets focus on the rating .
* /
"setFocus" : ( ) = > Promise < void > ;
2020-07-20 10:17:20 +00:00
/ * *
* The current rating .
* /
"value" : number ;
}
2020-11-11 22:31:53 +00:00
interface SlRelativeTime {
/ * *
* The date from which to calculate time from .
* /
"date" : Date | string ;
/ * *
* The formatting style to use .
* /
"format" : 'long' | 'short' | 'narrow' ;
/ * *
* The locale to use when formatting the number .
* /
"locale" : string ;
/ * *
* When ` auto ` , values such as "yesterday" and "tomorrow" will be shown when possible . When ` always ` , values such as "1 day ago" and "in 1 day" will be shown .
* /
"numeric" : 'always' | 'auto' ;
2020-11-20 22:02:38 +00:00
/ * *
* Keep the displayed value up to date as time passes .
* /
"sync" : boolean ;
2020-11-11 22:31:53 +00:00
}
2020-10-29 22:15:48 +00:00
interface SlResizeObserver {
}
2020-08-31 20:47:31 +00:00
interface SlResponsiveEmbed {
/ * *
* The aspect ratio of the embedded media in the format of ` width:height ` , e . g . ` 16:9 ` , ` 4:3 ` , or ` 1:1 ` . Ratios not in this format will be ignored .
* /
"aspectRatio" : string ;
}
2020-07-15 21:30:37 +00:00
interface SlSelect {
2020-08-25 20:25:25 +00:00
/ * *
* Set to true to add a clear button when the select is populated .
* /
"clearable" : boolean ;
2020-07-15 21:30:37 +00:00
/ * *
* Set to true to disable the select control .
* /
"disabled" : boolean ;
2020-12-23 20:47:13 +00:00
/ * *
* The select ' s help text . Alternatively , you can use the help - text slot .
* /
"helpText" : string ;
2020-08-25 21:07:28 +00:00
/ * *
* Enable this option to prevent the panel from being clipped when the component is placed inside a container with ` overflow: auto|scroll ` .
* /
"hoist" : boolean ;
2020-07-15 21:30:37 +00:00
/ * *
2020-08-28 20:50:18 +00:00
* This will be true when the control is in an invalid state . Validity is determined by the ` required ` prop .
2020-07-15 21:30:37 +00:00
* /
"invalid" : boolean ;
/ * *
2020-12-23 20:47:13 +00:00
* The select ' s label . Alternatively , you can use the label slot .
2020-07-15 21:30:37 +00:00
* /
"label" : string ;
/ * *
* The maximum number of tags to show when ` multiple ` is true . After the maximum , "+n" will be shown to indicate the number of additional items that are selected . Set to - 1 to remove the limit .
* /
"maxTagsVisible" : number ;
/ * *
* Set to true to enable multiselect .
* /
"multiple" : boolean ;
/ * *
* The select ' s name .
* /
"name" : string ;
/ * *
* Set to true to draw a pill - style select with rounded edges .
* /
"pill" : boolean ;
/ * *
* The select ' s placeholder text .
* /
"placeholder" : string ;
2020-08-28 20:50:18 +00:00
/ * *
* Checks for validity and shows the browser ' s validation message if the control is invalid .
* /
"reportValidity" : ( ) = > Promise < boolean > ;
2020-08-25 13:30:28 +00:00
/ * *
* The select ' s required attribute .
* /
"required" : boolean ;
2020-07-15 21:30:37 +00:00
/ * *
2020-08-28 20:50:18 +00:00
* Sets a custom validation message . If ` message ` is not empty , the field will be considered invalid .
2020-07-15 21:30:37 +00:00
* /
2020-08-28 20:50:18 +00:00
"setCustomValidity" : ( message : string ) = > Promise < void > ;
2020-07-15 21:30:37 +00:00
/ * *
* The select ' s size .
* /
"size" : 'small' | 'medium' | 'large' ;
/ * *
* The value of the control . This will be a string or an array depending on ` multiple ` .
* /
"value" : string | Array < string > ;
}
2020-07-27 20:20:15 +00:00
interface SlSkeleton {
/ * *
2020-07-28 12:41:45 +00:00
* Determines which effect the skeleton will use .
2020-07-27 20:20:15 +00:00
* /
2020-07-28 12:41:45 +00:00
"effect" : 'pulse' | 'sheen' | 'none' ;
2020-07-27 20:20:15 +00:00
}
2020-07-15 21:30:37 +00:00
interface SlSpinner {
}
interface SlSwitch {
/ * *
* Set to true to draw the switch in a checked state .
* /
"checked" : boolean ;
/ * *
* Set to true to disable the switch .
* /
"disabled" : boolean ;
2020-08-28 20:50:18 +00:00
/ * *
* This will be true when the control is in an invalid state . Validity is determined by the ` required ` prop .
* /
"invalid" : boolean ;
2020-07-15 21:30:37 +00:00
/ * *
* The switch ' s name attribute .
* /
"name" : string ;
/ * *
* Removes focus from the switch .
* /
"removeFocus" : ( ) = > Promise < void > ;
2020-08-28 20:50:18 +00:00
/ * *
* Checks for validity and shows the browser ' s validation message if the control is invalid .
* /
"reportValidity" : ( ) = > Promise < boolean > ;
2020-08-28 20:14:39 +00:00
/ * *
* Set to true to make the switch a required field .
* /
"required" : boolean ;
2020-08-28 20:50:18 +00:00
/ * *
* Sets a custom validation message . If ` message ` is not empty , the field will be considered invalid .
* /
"setCustomValidity" : ( message : string ) = > Promise < void > ;
2020-07-15 21:30:37 +00:00
/ * *
* Sets focus on the switch .
* /
"setFocus" : ( ) = > Promise < void > ;
/ * *
* The switch ' s value attribute .
* /
"value" : string ;
}
interface SlTab {
/ * *
* Set to true to draw the tab in an active state .
* /
"active" : boolean ;
2020-11-02 13:32:54 +00:00
/ * *
* When true , the tab will be rendered with a close icon .
* /
"closable" : boolean ;
2020-07-15 21:30:37 +00:00
/ * *
* Set to true to draw the tab in a disabled state .
* /
"disabled" : boolean ;
/ * *
* The name of the tab panel the tab will control . The panel must be located in the same tab group .
* /
"panel" : string ;
/ * *
* Removes focus from the tab .
* /
"removeFocus" : ( ) = > Promise < void > ;
/ * *
* Sets focus to the tab .
* /
"setFocus" : ( ) = > Promise < void > ;
}
interface SlTabGroup {
2020-10-22 18:00:06 +00:00
/ * *
* Disables the scroll arrows that appear when tabs overflow .
* /
"noScrollControls" : boolean ;
2020-07-15 21:30:37 +00:00
/ * *
* The placement of the tabs .
* /
"placement" : 'top' | 'bottom' | 'left' | 'right' ;
/ * *
* Shows the specified tab panel .
* /
"show" : ( panel : string ) = > Promise < void > ;
}
interface SlTabPanel {
/ * *
* When true , the tab panel will be shown .
* /
"active" : boolean ;
/ * *
* The tab panel ' s name .
* /
"name" : string ;
}
interface SlTag {
/ * *
* Set to true to make the tag clearable .
* /
"clearable" : boolean ;
/ * *
* Set to true to draw a pill - style tag with rounded edges .
* /
"pill" : boolean ;
/ * *
* The tag ' s size .
* /
"size" : 'small' | 'medium' | 'large' ;
/ * *
* The tag ' s type .
* /
"type" : 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'text' ;
}
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 ;
2020-12-23 20:47:13 +00:00
/ * *
* The textarea ' s help text . Alternatively , you can use the help - text slot .
* /
"helpText" : string ;
2020-07-15 21:30:37 +00:00
/ * *
* The textarea ' s inputmode attribute .
* /
"inputmode" : 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url' ;
/ * *
2020-08-28 20:50:18 +00:00
* This will be true when the control is in an invalid state . Validity is determined by props such as ` required ` , ` minlength ` , and ` maxlength ` using the browser ' s constraint validation API .
2020-07-15 21:30:37 +00:00
* /
"invalid" : boolean ;
/ * *
2020-12-23 20:47:13 +00:00
* The textarea ' s label . Alternatively , you can use the label slot .
2020-07-15 21:30:37 +00:00
* /
"label" : string ;
/ * *
2020-08-28 20:14:39 +00:00
* The maximum length of input that will be considered valid .
2020-07-15 21:30:37 +00:00
* /
"maxlength" : number ;
2020-08-28 20:14:39 +00:00
/ * *
* The minimum length of input that will be considered valid .
* /
"minlength" : number ;
2020-07-15 21:30:37 +00:00
/ * *
* The textarea ' s name attribute .
* /
"name" : string ;
/ * *
* The textarea ' s placeholder text .
* /
"placeholder" : string ;
/ * *
* Set to true for a readonly textarea .
* /
"readonly" : boolean ;
/ * *
* Removes focus fromt the textarea .
* /
"removeFocus" : ( ) = > Promise < void > ;
2020-08-28 20:14:39 +00:00
/ * *
* Checks for validity and shows the browser ' s validation message if the control is invalid .
* /
"reportValidity" : ( ) = > Promise < boolean > ;
2020-07-15 21:30:37 +00:00
/ * *
* 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 ;
/ * *
* Selects all the text in the input .
* /
"select" : ( ) = > Promise < void > ;
2020-08-28 20:50:18 +00:00
/ * *
* Sets a custom validation message . If ` message ` is not empty , the field will be considered invalid .
* /
"setCustomValidity" : ( message : string ) = > Promise < void > ;
2020-07-15 21:30:37 +00:00
/ * *
* Sets focus on the textarea .
* /
"setFocus" : ( ) = > Promise < void > ;
/ * *
* Replaces a range of text with a new string .
* /
"setRangeText" : ( replacement : string , start : number , end : number , selectMode ? : 'select' | 'start' | 'end' | 'preserve' ) = > Promise < void > ;
/ * *
* Sets the start and end positions of the text selection ( 0 - based ) .
* /
"setSelectionRange" : ( selectionStart : number , selectionEnd : number , selectionDirection ? : 'forward' | 'backward' | 'none' ) = > Promise < void > ;
/ * *
* The textarea ' s size .
* /
"size" : 'small' | 'medium' | 'large' ;
/ * *
2020-08-28 20:14:39 +00:00
* The textarea ' s spellcheck attribute .
2020-07-15 21:30:37 +00:00
* /
2020-08-28 20:14:39 +00:00
"spellcheck" : boolean ;
2020-07-15 21:30:37 +00:00
/ * *
* The textarea ' s value attribute .
* /
"value" : string ;
}
2020-10-28 13:11:29 +00:00
interface SlTheme {
/ * *
* The name of the theme to use . The user is responsible for including the associated stylesheet ( s ) . Supportive themes must adhere to theme guidelines by exposing a class that follows the ` sl-theme-{name} ` convention .
* /
"name" : string ;
}
2020-07-15 21:30:37 +00:00
interface SlTooltip {
/ * *
* The tooltip ' s content .
* /
"content" : string ;
/ * *
* Set to true to disable the tooltip so it won ' t show when triggered .
* /
"disabled" : boolean ;
/ * *
* The distance in pixels from which to offset the tooltip away from its target .
* /
"distance" : number ;
/ * *
* Shows the tooltip .
* /
2020-08-13 14:29:31 +00:00
"hide" : ( ) = > Promise < void > ;
2020-07-15 21:30:37 +00:00
/ * *
* Indicates whether or not the tooltip is open . You can use this in lieu of the show / hide methods .
* /
"open" : boolean ;
/ * *
* 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 .
* /
2020-08-13 14:29:31 +00:00
"show" : ( ) = > Promise < void > ;
2020-07-15 21:30:37 +00:00
/ * *
* The distance in pixels from which to offset the tooltip along its target .
* /
"skidding" : number ;
/ * *
* Controls how the tooltip is activated . Possible options include ` click ` , ` hover ` , ` focus ` , and ` manual ` . Multiple options can be passed by separating them with a space . When manual is used , the tooltip must be activated programmatically .
* /
"trigger" : string ;
}
}
declare global {
interface HTMLSlAlertElement extends Components . SlAlert , HTMLStencilElement {
}
var HTMLSlAlertElement : {
prototype : HTMLSlAlertElement ;
new ( ) : HTMLSlAlertElement ;
} ;
2020-08-10 14:04:25 +00:00
interface HTMLSlAnimationElement extends Components . SlAnimation , HTMLStencilElement {
}
var HTMLSlAnimationElement : {
prototype : HTMLSlAnimationElement ;
new ( ) : HTMLSlAnimationElement ;
} ;
2020-07-15 21:30:37 +00:00
interface HTMLSlAvatarElement extends Components . SlAvatar , HTMLStencilElement {
}
var HTMLSlAvatarElement : {
prototype : HTMLSlAvatarElement ;
new ( ) : HTMLSlAvatarElement ;
} ;
interface HTMLSlBadgeElement extends Components . SlBadge , HTMLStencilElement {
}
var HTMLSlBadgeElement : {
prototype : HTMLSlBadgeElement ;
new ( ) : HTMLSlBadgeElement ;
} ;
interface HTMLSlButtonElement extends Components . SlButton , HTMLStencilElement {
}
var HTMLSlButtonElement : {
prototype : HTMLSlButtonElement ;
new ( ) : HTMLSlButtonElement ;
} ;
2020-08-06 13:07:24 +00:00
interface HTMLSlButtonGroupElement extends Components . SlButtonGroup , HTMLStencilElement {
}
var HTMLSlButtonGroupElement : {
prototype : HTMLSlButtonGroupElement ;
new ( ) : HTMLSlButtonGroupElement ;
} ;
2020-07-22 20:02:49 +00:00
interface HTMLSlCardElement extends Components . SlCard , HTMLStencilElement {
}
var HTMLSlCardElement : {
prototype : HTMLSlCardElement ;
new ( ) : HTMLSlCardElement ;
} ;
2020-07-15 21:30:37 +00:00
interface HTMLSlCheckboxElement extends Components . SlCheckbox , HTMLStencilElement {
}
var HTMLSlCheckboxElement : {
prototype : HTMLSlCheckboxElement ;
new ( ) : HTMLSlCheckboxElement ;
} ;
interface HTMLSlColorPickerElement extends Components . SlColorPicker , HTMLStencilElement {
}
var HTMLSlColorPickerElement : {
prototype : HTMLSlColorPickerElement ;
new ( ) : HTMLSlColorPickerElement ;
} ;
interface HTMLSlDetailsElement extends Components . SlDetails , HTMLStencilElement {
}
var HTMLSlDetailsElement : {
prototype : HTMLSlDetailsElement ;
new ( ) : HTMLSlDetailsElement ;
} ;
interface HTMLSlDialogElement extends Components . SlDialog , HTMLStencilElement {
}
var HTMLSlDialogElement : {
prototype : HTMLSlDialogElement ;
new ( ) : HTMLSlDialogElement ;
} ;
interface HTMLSlDrawerElement extends Components . SlDrawer , HTMLStencilElement {
}
var HTMLSlDrawerElement : {
prototype : HTMLSlDrawerElement ;
new ( ) : HTMLSlDrawerElement ;
} ;
interface HTMLSlDropdownElement extends Components . SlDropdown , HTMLStencilElement {
}
var HTMLSlDropdownElement : {
prototype : HTMLSlDropdownElement ;
new ( ) : HTMLSlDropdownElement ;
} ;
interface HTMLSlFormElement extends Components . SlForm , HTMLStencilElement {
}
var HTMLSlFormElement : {
prototype : HTMLSlFormElement ;
new ( ) : HTMLSlFormElement ;
} ;
2020-08-25 13:20:13 +00:00
interface HTMLSlFormatBytesElement extends Components . SlFormatBytes , HTMLStencilElement {
}
var HTMLSlFormatBytesElement : {
prototype : HTMLSlFormatBytesElement ;
new ( ) : HTMLSlFormatBytesElement ;
} ;
2020-11-25 21:18:07 +00:00
interface HTMLSlFormatDateElement extends Components . SlFormatDate , HTMLStencilElement {
}
var HTMLSlFormatDateElement : {
prototype : HTMLSlFormatDateElement ;
new ( ) : HTMLSlFormatDateElement ;
} ;
2020-11-09 14:38:30 +00:00
interface HTMLSlFormatNumberElement extends Components . SlFormatNumber , HTMLStencilElement {
}
var HTMLSlFormatNumberElement : {
prototype : HTMLSlFormatNumberElement ;
new ( ) : HTMLSlFormatNumberElement ;
} ;
2020-07-15 21:30:37 +00:00
interface HTMLSlIconElement extends Components . SlIcon , HTMLStencilElement {
}
var HTMLSlIconElement : {
prototype : HTMLSlIconElement ;
new ( ) : HTMLSlIconElement ;
} ;
2020-07-24 20:57:38 +00:00
interface HTMLSlIconButtonElement extends Components . SlIconButton , HTMLStencilElement {
}
var HTMLSlIconButtonElement : {
prototype : HTMLSlIconButtonElement ;
new ( ) : HTMLSlIconButtonElement ;
} ;
2020-10-07 13:34:05 +00:00
interface HTMLSlIconLibraryElement extends Components . SlIconLibrary , HTMLStencilElement {
}
var HTMLSlIconLibraryElement : {
prototype : HTMLSlIconLibraryElement ;
new ( ) : HTMLSlIconLibraryElement ;
} ;
2020-08-21 21:27:11 +00:00
interface HTMLSlImageComparerElement extends Components . SlImageComparer , HTMLStencilElement {
}
var HTMLSlImageComparerElement : {
prototype : HTMLSlImageComparerElement ;
new ( ) : HTMLSlImageComparerElement ;
} ;
2020-10-16 12:57:02 +00:00
interface HTMLSlIncludeElement extends Components . SlInclude , HTMLStencilElement {
}
var HTMLSlIncludeElement : {
prototype : HTMLSlIncludeElement ;
new ( ) : HTMLSlIncludeElement ;
} ;
2020-07-15 21:30:37 +00:00
interface HTMLSlInputElement extends Components . SlInput , HTMLStencilElement {
}
var HTMLSlInputElement : {
prototype : HTMLSlInputElement ;
new ( ) : HTMLSlInputElement ;
} ;
interface HTMLSlMenuElement extends Components . SlMenu , HTMLStencilElement {
}
var HTMLSlMenuElement : {
prototype : HTMLSlMenuElement ;
new ( ) : HTMLSlMenuElement ;
} ;
interface HTMLSlMenuDividerElement extends Components . SlMenuDivider , HTMLStencilElement {
}
var HTMLSlMenuDividerElement : {
prototype : HTMLSlMenuDividerElement ;
new ( ) : HTMLSlMenuDividerElement ;
} ;
interface HTMLSlMenuItemElement extends Components . SlMenuItem , HTMLStencilElement {
}
var HTMLSlMenuItemElement : {
prototype : HTMLSlMenuItemElement ;
new ( ) : HTMLSlMenuItemElement ;
} ;
interface HTMLSlMenuLabelElement extends Components . SlMenuLabel , HTMLStencilElement {
}
var HTMLSlMenuLabelElement : {
prototype : HTMLSlMenuLabelElement ;
new ( ) : HTMLSlMenuLabelElement ;
} ;
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 ;
} ;
2020-07-20 10:17:20 +00:00
interface HTMLSlRatingElement extends Components . SlRating , HTMLStencilElement {
}
var HTMLSlRatingElement : {
prototype : HTMLSlRatingElement ;
new ( ) : HTMLSlRatingElement ;
} ;
2020-11-11 22:31:53 +00:00
interface HTMLSlRelativeTimeElement extends Components . SlRelativeTime , HTMLStencilElement {
}
var HTMLSlRelativeTimeElement : {
prototype : HTMLSlRelativeTimeElement ;
new ( ) : HTMLSlRelativeTimeElement ;
} ;
2020-10-29 22:15:48 +00:00
interface HTMLSlResizeObserverElement extends Components . SlResizeObserver , HTMLStencilElement {
}
var HTMLSlResizeObserverElement : {
prototype : HTMLSlResizeObserverElement ;
new ( ) : HTMLSlResizeObserverElement ;
} ;
2020-08-31 20:47:31 +00:00
interface HTMLSlResponsiveEmbedElement extends Components . SlResponsiveEmbed , HTMLStencilElement {
}
var HTMLSlResponsiveEmbedElement : {
prototype : HTMLSlResponsiveEmbedElement ;
new ( ) : HTMLSlResponsiveEmbedElement ;
} ;
2020-07-15 21:30:37 +00:00
interface HTMLSlSelectElement extends Components . SlSelect , HTMLStencilElement {
}
var HTMLSlSelectElement : {
prototype : HTMLSlSelectElement ;
new ( ) : HTMLSlSelectElement ;
} ;
2020-07-27 20:20:15 +00:00
interface HTMLSlSkeletonElement extends Components . SlSkeleton , HTMLStencilElement {
}
var HTMLSlSkeletonElement : {
prototype : HTMLSlSkeletonElement ;
new ( ) : HTMLSlSkeletonElement ;
} ;
2020-07-15 21:30:37 +00:00
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 HTMLSlTabGroupElement extends Components . SlTabGroup , HTMLStencilElement {
}
var HTMLSlTabGroupElement : {
prototype : HTMLSlTabGroupElement ;
new ( ) : HTMLSlTabGroupElement ;
} ;
interface HTMLSlTabPanelElement extends Components . SlTabPanel , HTMLStencilElement {
}
var HTMLSlTabPanelElement : {
prototype : HTMLSlTabPanelElement ;
new ( ) : HTMLSlTabPanelElement ;
} ;
interface HTMLSlTagElement extends Components . SlTag , HTMLStencilElement {
}
var HTMLSlTagElement : {
prototype : HTMLSlTagElement ;
new ( ) : HTMLSlTagElement ;
} ;
interface HTMLSlTextareaElement extends Components . SlTextarea , HTMLStencilElement {
}
var HTMLSlTextareaElement : {
prototype : HTMLSlTextareaElement ;
new ( ) : HTMLSlTextareaElement ;
} ;
2020-10-28 13:11:29 +00:00
interface HTMLSlThemeElement extends Components . SlTheme , HTMLStencilElement {
}
var HTMLSlThemeElement : {
prototype : HTMLSlThemeElement ;
new ( ) : HTMLSlThemeElement ;
} ;
2020-07-15 21:30:37 +00:00
interface HTMLSlTooltipElement extends Components . SlTooltip , HTMLStencilElement {
}
var HTMLSlTooltipElement : {
prototype : HTMLSlTooltipElement ;
new ( ) : HTMLSlTooltipElement ;
} ;
interface HTMLElementTagNameMap {
"sl-alert" : HTMLSlAlertElement ;
2020-08-10 14:04:25 +00:00
"sl-animation" : HTMLSlAnimationElement ;
2020-07-15 21:30:37 +00:00
"sl-avatar" : HTMLSlAvatarElement ;
"sl-badge" : HTMLSlBadgeElement ;
"sl-button" : HTMLSlButtonElement ;
2020-08-06 13:07:24 +00:00
"sl-button-group" : HTMLSlButtonGroupElement ;
2020-07-22 20:02:49 +00:00
"sl-card" : HTMLSlCardElement ;
2020-07-15 21:30:37 +00:00
"sl-checkbox" : HTMLSlCheckboxElement ;
"sl-color-picker" : HTMLSlColorPickerElement ;
"sl-details" : HTMLSlDetailsElement ;
"sl-dialog" : HTMLSlDialogElement ;
"sl-drawer" : HTMLSlDrawerElement ;
"sl-dropdown" : HTMLSlDropdownElement ;
"sl-form" : HTMLSlFormElement ;
2020-08-25 13:20:13 +00:00
"sl-format-bytes" : HTMLSlFormatBytesElement ;
2020-11-25 21:18:07 +00:00
"sl-format-date" : HTMLSlFormatDateElement ;
2020-11-09 14:38:30 +00:00
"sl-format-number" : HTMLSlFormatNumberElement ;
2020-07-15 21:30:37 +00:00
"sl-icon" : HTMLSlIconElement ;
2020-07-24 20:57:38 +00:00
"sl-icon-button" : HTMLSlIconButtonElement ;
2020-10-07 13:34:05 +00:00
"sl-icon-library" : HTMLSlIconLibraryElement ;
2020-08-21 21:27:11 +00:00
"sl-image-comparer" : HTMLSlImageComparerElement ;
2020-10-16 12:57:02 +00:00
"sl-include" : HTMLSlIncludeElement ;
2020-07-15 21:30:37 +00:00
"sl-input" : HTMLSlInputElement ;
"sl-menu" : HTMLSlMenuElement ;
"sl-menu-divider" : HTMLSlMenuDividerElement ;
"sl-menu-item" : HTMLSlMenuItemElement ;
"sl-menu-label" : HTMLSlMenuLabelElement ;
"sl-progress-bar" : HTMLSlProgressBarElement ;
"sl-progress-ring" : HTMLSlProgressRingElement ;
"sl-radio" : HTMLSlRadioElement ;
"sl-range" : HTMLSlRangeElement ;
2020-07-20 10:17:20 +00:00
"sl-rating" : HTMLSlRatingElement ;
2020-11-11 22:31:53 +00:00
"sl-relative-time" : HTMLSlRelativeTimeElement ;
2020-10-29 22:15:48 +00:00
"sl-resize-observer" : HTMLSlResizeObserverElement ;
2020-08-31 20:47:31 +00:00
"sl-responsive-embed" : HTMLSlResponsiveEmbedElement ;
2020-07-15 21:30:37 +00:00
"sl-select" : HTMLSlSelectElement ;
2020-07-27 20:20:15 +00:00
"sl-skeleton" : HTMLSlSkeletonElement ;
2020-07-15 21:30:37 +00:00
"sl-spinner" : HTMLSlSpinnerElement ;
"sl-switch" : HTMLSlSwitchElement ;
"sl-tab" : HTMLSlTabElement ;
"sl-tab-group" : HTMLSlTabGroupElement ;
"sl-tab-panel" : HTMLSlTabPanelElement ;
"sl-tag" : HTMLSlTagElement ;
"sl-textarea" : HTMLSlTextareaElement ;
2020-10-28 13:11:29 +00:00
"sl-theme" : HTMLSlThemeElement ;
2020-07-15 21:30:37 +00:00
"sl-tooltip" : HTMLSlTooltipElement ;
}
}
declare namespace LocalJSX {
interface SlAlert {
/ * *
* Set to true to make the alert closable .
* /
"closable" ? : boolean ;
2020-09-16 13:34:54 +00:00
/ * *
2020-09-18 13:40:21 +00:00
* The length of time , in milliseconds , the alert will show before closing itself . If the user interacts with the alert before it closes ( e . g . moves the mouse over it ) , the timer will restart .
2020-09-16 13:34:54 +00:00
* /
"duration" ? : number ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted after the alert closes and all transitions are complete .
* /
2020-10-09 21:45:16 +00:00
"onSl-after-hide" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted after the alert opens and all transitions are complete .
* /
2020-10-09 21:45:16 +00:00
"onSl-after-show" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted when the alert closes . Calling ` event.preventDefault() ` will prevent it from being closed .
* /
2020-10-09 21:45:16 +00:00
"onSl-hide" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted when the alert opens . Calling ` event.preventDefault() ` will prevent it from being opened .
* /
2020-10-09 21:45:16 +00:00
"onSl-show" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Indicates whether or not the alert is open . You can use this in lieu of the show / hide methods .
* /
"open" ? : boolean ;
/ * *
* The type of alert .
* /
"type" ? : 'primary' | 'success' | 'info' | 'warning' | 'danger' ;
}
2020-08-10 14:04:25 +00:00
interface SlAnimation {
/ * *
* The number of milliseconds to delay the start of the animation .
* /
"delay" ? : number ;
/ * *
2020-08-11 13:32:10 +00:00
* Determines the direction of playback as well as the behavior when reaching the end of an iteration .
2020-08-10 14:04:25 +00:00
* /
"direction" ? : PlaybackDirection ;
/ * *
* The number of milliseconds each iteration of the animation takes to complete .
* /
"duration" ? : number ;
/ * *
2020-12-29 20:21:15 +00:00
* The easing function to use for the animation . This can be a Shoelace easing function or a custom easing function such as ` cubic-bezier(0, 1, .76, 1.14) ` .
2020-08-10 14:04:25 +00:00
* /
"easing" ? : string ;
/ * *
2020-08-11 13:32:10 +00:00
* The number of milliseconds to delay after the active period of an animation sequence .
2020-08-10 14:04:25 +00:00
* /
"endDelay" ? : number ;
/ * *
2020-08-11 13:32:10 +00:00
* Sets how the animation applies styles to its target before and after its execution .
2020-08-10 14:04:25 +00:00
* /
"fill" ? : FillMode ;
/ * *
2020-08-11 13:32:10 +00:00
* The offset at which to start the animation , usually between 0 ( start ) and 1 ( end ) .
2020-08-10 14:04:25 +00:00
* /
"iterationStart" ? : number ;
/ * *
2020-08-11 13:32:10 +00:00
* The number of iterations to run before the animation completes . Defaults to ` Infinity ` , which loops .
2020-08-10 14:04:25 +00:00
* /
2020-08-10 14:45:46 +00:00
"iterations" ? : number ;
2020-08-10 14:04:25 +00:00
/ * *
2020-08-11 13:32:10 +00:00
* The keyframes to use for the animation . If this is set , ` name ` will be ignored .
2020-08-10 14:04:25 +00:00
* /
2020-08-11 13:32:10 +00:00
"keyframes" ? : Keyframe [ ] ;
2020-08-10 14:04:25 +00:00
/ * *
2020-12-29 20:21:15 +00:00
* The name of the built - in animation to use . For custom animations , use the ` keyframes ` prop .
2020-08-10 14:04:25 +00:00
* /
2020-08-11 13:32:10 +00:00
"name" ? : string ;
2020-08-10 14:04:25 +00:00
/ * *
2020-08-10 14:45:46 +00:00
* Emitted when the animation is canceled .
2020-08-10 14:04:25 +00:00
* /
2020-10-09 21:45:16 +00:00
"onSl-cancel" ? : ( event : CustomEvent < any > ) = > void ;
2020-08-10 14:04:25 +00:00
/ * *
2020-08-10 14:45:46 +00:00
* Emitted when the animation finishes .
2020-08-10 14:04:25 +00:00
* /
2020-10-09 21:45:16 +00:00
"onSl-finish" ? : ( event : CustomEvent < any > ) = > void ;
2020-08-11 22:47:02 +00:00
/ * *
* Emitted when the animation starts or restarts .
* /
2020-10-09 21:45:16 +00:00
"onSl-start" ? : ( event : CustomEvent < any > ) = > void ;
2020-08-10 14:04:25 +00:00
/ * *
2020-08-11 13:32:10 +00:00
* Pauses the animation . The animation will resume when this prop is removed .
2020-08-10 14:04:25 +00:00
* /
2020-08-11 13:32:10 +00:00
"pause" ? : boolean ;
2020-08-10 14:04:25 +00:00
/ * *
2020-08-11 13:32:10 +00:00
* Sets the animation 's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this to `2`, for example, will double the animation' s speed . A negative value can be used to reverse the animation . This value can be changed without causing the animation to restart .
2020-08-10 14:04:25 +00:00
* /
"playbackRate" ? : number ;
}
2020-07-15 21:30:37 +00:00
interface SlAvatar {
/ * *
* Alternative text for the image .
* /
"alt" ? : string ;
/ * *
* The image source to use for the avatar .
* /
"image" ? : string ;
/ * *
* Initials to use as a fallback when no image is available ( 1 - 2 characters max recommended ) .
* /
"initials" ? : string ;
/ * *
2020-07-28 12:41:45 +00:00
* The shape of the avatar .
2020-07-15 21:30:37 +00:00
* /
"shape" ? : 'circle' | 'square' | 'rounded' ;
}
interface SlBadge {
2020-07-16 19:31:46 +00:00
/ * *
* Set to true to draw a pill - style badge with rounded edges .
* /
"pill" ? : boolean ;
2020-07-27 11:32:17 +00:00
/ * *
* Set to true to make the badge pulsate to draw attention .
* /
"pulse" ? : boolean ;
2020-07-15 21:30:37 +00:00
/ * *
* The badge ' s type .
* /
"type" ? : 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'text' ;
}
interface SlButton {
/ * *
* 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 ;
2020-08-07 19:42:55 +00:00
/ * *
* Tells the browser to download the linked file as this filename . Only used when ` href ` is set .
* /
"download" ? : string ;
/ * *
* When set , the underlying button will be rendered as an ` <a> ` with this ` href ` instead of a ` <button> ` .
* /
"href" ? : string ;
2020-07-15 21:30:37 +00:00
/ * *
* Set to true to draw the button in a loading state .
* /
"loading" ? : boolean ;
/ * *
2020-08-07 19:42:55 +00:00
* An optional name for the button . Ignored when ` href ` is set .
2020-07-15 21:30:37 +00:00
* /
"name" ? : string ;
/ * *
* Emitted when the button loses focus .
* /
2020-10-09 21:45:16 +00:00
"onSl-blur" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted when the button gains focus .
* /
2020-10-09 21:45:16 +00:00
"onSl-focus" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Set to true to draw a pill - style button with rounded edges .
* /
"pill" ? : boolean ;
/ * *
* The button ' s size .
* /
"size" ? : 'small' | 'medium' | 'large' ;
/ * *
2020-08-07 19:42:55 +00:00
* Indicates if activating the button should submit the form . Ignored when ` href ` is set .
2020-07-15 21:30:37 +00:00
* /
"submit" ? : boolean ;
2020-08-07 19:42:55 +00:00
/ * *
* Tells the browser where to open the link . Only used when ` href ` is set .
* /
"target" ? : '_blank' | '_parent' | '_self' | '_top' ;
2020-07-15 21:30:37 +00:00
/ * *
* The button ' s type .
* /
"type" ? : 'default' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'text' ;
/ * *
2020-08-07 19:42:55 +00:00
* An optional value for the button . Ignored when ` href ` is set .
2020-07-15 21:30:37 +00:00
* /
"value" ? : string ;
}
2020-08-06 13:07:24 +00:00
interface SlButtonGroup {
/ * *
2020-09-04 21:11:25 +00:00
* A label to use for the button group ' s ` aria-label ` attribute .
2020-08-06 13:07:24 +00:00
* /
"label" ? : string ;
}
2020-07-22 20:02:49 +00:00
interface SlCard {
}
2020-07-15 21:30:37 +00:00
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 ;
2020-08-28 20:50:18 +00:00
/ * *
* This will be true when the control is in an invalid state . Validity is determined by the ` required ` prop .
* /
"invalid" ? : boolean ;
2020-07-15 21:30:37 +00:00
/ * *
* The checkbox ' s name attribute .
* /
"name" ? : string ;
/ * *
* Emitted when the control loses focus .
* /
2020-10-09 21:45:16 +00:00
"onSl-blur" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted when the control ' s checked state changes .
* /
2020-10-09 21:45:16 +00:00
"onSl-change" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted when the control gains focus .
* /
2020-10-09 21:45:16 +00:00
"onSl-focus" ? : ( event : CustomEvent < any > ) = > void ;
2020-08-28 20:14:39 +00:00
/ * *
* Set to true to make the checkbox a required field .
* /
"required" ? : boolean ;
2020-07-15 21:30:37 +00:00
/ * *
* The checkbox ' s value attribute .
* /
"value" ? : string ;
}
interface SlColorPicker {
/ * *
* Set to true to disable the color picker .
* /
"disabled" ? : boolean ;
/ * *
* The format to use for the display value . If opacity is enabled , these will translate to HEXA , RGBA , and HSLA respectively . The color picker will always accept user input in any format ( including CSS color names ) and convert it to the desired format .
* /
"format" ? : 'hex' | 'rgb' | 'hsl' ;
2020-08-25 21:07:28 +00:00
/ * *
* Enable this option to prevent the panel from being clipped when the component is placed inside a container with ` overflow: auto|scroll ` .
* /
"hoist" ? : boolean ;
2020-07-15 21:30:37 +00:00
/ * *
* Set to true to render the color picker inline rather than inside a dropdown .
* /
"inline" ? : boolean ;
2020-09-04 14:18:46 +00:00
/ * *
* This will be true when the control is in an invalid state . Validity is determined by the ` setCustomValidity() ` method using the browser ' s constraint validation API .
* /
"invalid" ? : boolean ;
2020-09-04 12:57:34 +00:00
/ * *
* The input ' s name attribute .
* /
"name" ? : string ;
2020-12-11 22:10:30 +00:00
/ * *
* Removes the format toggle .
* /
2020-12-22 14:40:11 +00:00
"noFormatToggle" ? : boolean ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted after the color picker closes and all transitions are complete .
* /
2020-10-09 21:45:16 +00:00
"onSl-after-hide" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted after the color picker opens and all transitions are complete .
* /
2020-10-09 21:45:16 +00:00
"onSl-after-show" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted when the color picker ' s value changes .
* /
2020-10-09 21:45:16 +00:00
"onSl-change" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted when the color picker closes . Calling ` event.preventDefault() ` will prevent it from being closed .
* /
2020-10-09 21:45:16 +00:00
"onSl-hide" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted when the color picker opens . Calling ` event.preventDefault() ` will prevent it from being opened .
* /
2020-10-09 21:45:16 +00:00
"onSl-show" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Whether to show the opacity slider .
* /
"opacity" ? : boolean ;
/ * *
2020-10-09 21:45:16 +00:00
* Determines the size of the color picker ' s trigger . This has no effect on inline color pickers .
2020-07-15 21:30:37 +00:00
* /
"size" ? : 'small' | 'medium' | 'large' ;
/ * *
* An array of predefined color swatches to display . Can include any format the color picker can parse , including HEX ( A ) , RGB ( A ) , HSL ( A ) , and CSS color names .
* /
"swatches" ? : string [ ] ;
/ * *
* By default , the value will be set in lowercase . Set this to true to set it in uppercase instead .
* /
"uppercase" ? : boolean ;
/ * *
* The current color .
* /
"value" ? : string ;
}
interface SlDetails {
/ * *
* Set to true to prevent the user from toggling the details .
* /
"disabled" ? : boolean ;
/ * *
* Emitted after the details closes and all transitions are complete .
* /
2020-10-09 21:45:16 +00:00
"onSl-after-hide" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted after the details opens and all transitions are complete .
* /
2020-10-09 21:45:16 +00:00
"onSl-after-show" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted when the details closes . Calling ` event.preventDefault() ` will prevent it from being closed .
* /
2020-10-09 21:45:16 +00:00
"onSl-hide" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted when the details opens . Calling ` event.preventDefault() ` will prevent it from being opened .
* /
2020-10-09 21:45:16 +00:00
"onSl-show" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Indicates whether or not the details is open . You can use this in lieu of the show / hide methods .
* /
"open" ? : boolean ;
/ * *
2020-08-03 16:54:47 +00:00
* The summary to show in the details header . If you need to display HTML , use the ` summary ` slot instead .
2020-07-15 21:30:37 +00:00
* /
"summary" ? : string ;
}
interface SlDialog {
/ * *
* The dialog ' s label as displayed in the header . You should always include a relevant label even when using ` no-header ` , as it is required for proper accessibility .
* /
"label" ? : string ;
/ * *
* Set to true to disable the header . This will also remove the default close button , so please ensure you provide an easy , accessible way for users to dismiss the dialog .
* /
"noHeader" ? : boolean ;
/ * *
* Emitted after the dialog closes and all transitions are complete .
* /
2020-10-09 21:45:16 +00:00
"onSl-after-hide" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted after the dialog opens and all transitions are complete .
* /
2020-10-09 21:45:16 +00:00
"onSl-after-show" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted when the dialog closes . Calling ` event.preventDefault() ` will prevent it from being closed .
* /
2020-10-09 21:45:16 +00:00
"onSl-hide" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted when the overlay is clicked . Calling ` event.preventDefault() ` will prevent the dialog from closing .
* /
2020-10-09 21:45:16 +00:00
"onSl-overlay-dismiss" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted when the dialog opens . Calling ` event.preventDefault() ` will prevent it from being opened .
* /
2020-10-09 21:45:16 +00:00
"onSl-show" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Indicates whether or not the dialog is open . You can use this in lieu of the show / hide methods .
* /
"open" ? : boolean ;
}
interface SlDrawer {
/ * *
* By default , the drawer slides out of its containing block ( usually the viewport ) . To make the drawer slide out of its parent element , set this prop and add ` position: relative ` to the parent .
* /
"contained" ? : boolean ;
/ * *
* The drawer ' s label as displayed in the header . You should always include a relevant label even when using ` no-header ` , as it is required for proper accessibility .
* /
"label" ? : string ;
/ * *
* Removes the header . This will also remove the default close button , so please ensure you provide an easy , accessible way for users to dismiss the drawer .
* /
"noHeader" ? : boolean ;
/ * *
* Emitted after the drawer closes and all transitions are complete .
* /
2020-10-09 21:45:16 +00:00
"onSl-after-hide" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted after the drawer opens and all transitions are complete .
* /
2020-10-09 21:45:16 +00:00
"onSl-after-show" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted when the drawer closes . Calling ` event.preventDefault() ` will prevent it from being closed .
* /
2020-10-09 21:45:16 +00:00
"onSl-hide" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
2020-07-24 12:38:00 +00:00
* Emitted when the overlay is clicked . Calling ` event.preventDefault() ` will prevent the drawer from closing .
2020-07-15 21:30:37 +00:00
* /
2020-10-09 21:45:16 +00:00
"onSl-overlay-dismiss" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted when the drawer opens . Calling ` event.preventDefault() ` will prevent it from being opened .
* /
2020-10-09 21:45:16 +00:00
"onSl-show" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Indicates whether or not the drawer is open . You can use this in lieu of the show / hide methods .
* /
"open" ? : boolean ;
/ * *
* The direction from which the drawer will open .
* /
"placement" ? : 'top' | 'right' | 'bottom' | 'left' ;
}
interface SlDropdown {
/ * *
* Determines whether the dropdown should hide when a menu item is selected .
* /
"closeOnSelect" ? : boolean ;
/ * *
* The dropdown will close when the user interacts outside of this element ( e . g . clicking ) .
* /
"containingElement" ? : HTMLElement ;
/ * *
* The distance in pixels from which to offset the panel away from its trigger .
* /
"distance" ? : number ;
2020-08-25 21:07:28 +00:00
/ * *
* Enable this option to prevent the panel from being clipped when the component is placed inside a container with ` overflow: auto|scroll ` .
* /
"hoist" ? : boolean ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted after the dropdown closes and all transitions are complete .
* /
2020-10-09 21:45:16 +00:00
"onSl-after-hide" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted after the dropdown opens and all transitions are complete .
* /
2020-10-09 21:45:16 +00:00
"onSl-after-show" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted when the dropdown closes . Calling ` event.preventDefault() ` will prevent it from being closed .
* /
2020-10-09 21:45:16 +00:00
"onSl-hide" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted when the dropdown opens . Calling ` event.preventDefault() ` will prevent it from being opened .
* /
2020-10-09 21:45:16 +00:00
"onSl-show" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Indicates whether or not the dropdown is open . You can use this in lieu of the show / hide methods .
* /
"open" ? : boolean ;
/ * *
* The preferred placement of the dropdown panel . Note that the actual placement may vary as needed to keep the panel inside of the viewport .
* /
"placement" ? : | 'top'
| 'top-start'
| 'top-end'
| 'bottom'
| 'bottom-start'
| 'bottom-end'
| 'right'
| 'right-start'
| 'right-end'
| 'left'
| 'left-start'
| 'left-end' ;
/ * *
* The distance in pixels from which to offset the panel along its trigger .
* /
"skidding" ? : number ;
}
interface SlForm {
/ * *
2020-08-29 14:39:18 +00:00
* Prevent the form from validating inputs before submitting .
* /
"novalidate" ? : boolean ;
/ * *
2020-08-29 16:52:13 +00:00
* Emitted when the form is submitted . This event will not be emitted if any form control inside of it is in an invalid state , unless the form has the ` novalidate ` attribute . Note that there is never a need to prevent this event , since it doen 't send a GET or POST request like native forms. To "prevent" submission, use a conditional around the XHR request you use to submit the form' s data with .
2020-07-15 21:30:37 +00:00
* /
2020-10-15 20:34:09 +00:00
"onSl-submit" ? : ( event : CustomEvent < { formData : FormData ; formControls : HTMLElement [ ] } > ) = > void ;
2020-07-15 21:30:37 +00:00
}
2020-08-25 13:20:13 +00:00
interface SlFormatBytes {
/ * *
* The locale to use when formatting the number .
* /
"locale" ? : string ;
/ * *
* The unit to display .
* /
"unit" ? : 'bytes' | 'bits' ;
/ * *
* The number to format in bytes .
* /
"value" ? : number ;
}
2020-11-25 21:18:07 +00:00
interface SlFormatDate {
/ * *
* The date / time to format . If not set , the current date and time will be used .
* /
"date" ? : Date | string ;
/ * *
* The format for displaying the day .
* /
"day" ? : 'numeric' | '2-digit' ;
/ * *
* The format for displaying the era .
* /
"era" ? : 'narrow' | 'short' | 'long' ;
/ * *
* The format for displaying the hour .
* /
"hour" ? : 'numeric' | '2-digit' ;
/ * *
* When set , 24 hour time will always be used .
* /
"hourFormat" ? : 'auto' | '12' | '24' ;
/ * *
* The locale to use when formatting the date / time .
* /
"locale" ? : string ;
/ * *
* The format for displaying the minute .
* /
"minute" ? : 'numeric' | '2-digit' ;
/ * *
* The format for displaying the month .
* /
"month" ? : 'numeric' | '2-digit' | 'narrow' | 'short' | 'long' ;
/ * *
* The format for displaying the second .
* /
"second" ? : 'numeric' | '2-digit' ;
/ * *
* The time zone to express the time in .
* /
"timeZone" ? : string ;
/ * *
* The format for displaying the time .
* /
"timeZoneName" ? : 'short' | 'long' ;
/ * *
* The format for displaying the weekday .
* /
"weekday" ? : 'narrow' | 'short' | 'long' ;
/ * *
* The format for displaying the year .
* /
"year" ? : 'numeric' | '2-digit' ;
}
2020-11-09 14:38:30 +00:00
interface SlFormatNumber {
/ * *
* The currency to use when formatting . Must be an ISO 4217 currency code such as ` USD ` or ` EUR ` .
* /
"currency" ? : string ;
/ * *
* How to display the currency .
* /
"currencyDisplay" ? : 'symbol' | 'narrowSymbol' | 'code' | 'name' ;
/ * *
* The locale to use when formatting the number .
* /
"locale" ? : string ;
/ * *
* The maximum number of fraction digits to use . Possible values are 0 - 20 .
* /
"maximumFractionDigits" ? : number ;
/ * *
* The maximum number of significant digits to use , . Possible values are 1 - 21 .
* /
"maximumSignificantDigits" ? : number ;
/ * *
* The minimum number of fraction digits to use . Possible values are 0 - 20 .
* /
"minimumFractionDigits" ? : number ;
/ * *
* The minimum number of integer digits to use . Possible values are 1 - 21 .
* /
"minimumIntegerDigits" ? : number ;
/ * *
* The minimum number of significant digits to use . Possible values are 1 - 21 .
* /
"minimumSignificantDigits" ? : number ;
/ * *
* Turns off grouping separators .
* /
"noGrouping" ? : boolean ;
/ * *
* The formatting style to use .
* /
"type" ? : 'currency' | 'decimal' | 'percent' ;
/ * *
2020-11-11 21:52:47 +00:00
* The number to format .
2020-11-09 14:38:30 +00:00
* /
"value" ? : number ;
}
2020-07-15 21:30:37 +00:00
interface SlIcon {
/ * *
* An alternative description to use for accessibility . If omitted , the name or src will be used to generate it .
* /
"label" ? : string ;
2020-09-29 20:52:16 +00:00
/ * *
2020-10-07 13:34:05 +00:00
* The name of a registered custom icon library .
2020-09-29 20:52:16 +00:00
* /
"library" ? : string ;
2020-07-15 21:30:37 +00:00
/ * *
* The name of the icon to draw .
* /
"name" ? : string ;
/ * *
* Emitted when the icon failed to load .
* /
2020-10-16 13:28:46 +00:00
"onSl-error" ? : ( event : CustomEvent < { status? : number } > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted when the icon has loaded .
* /
2020-10-09 21:45:16 +00:00
"onSl-load" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* An external URL of an SVG file .
* /
"src" ? : string ;
}
2020-07-24 20:57:38 +00:00
interface SlIconButton {
/ * *
* Set to true to disable the button .
* /
"disabled" ? : boolean ;
/ * *
2020-10-23 03:05:28 +00:00
* A description that gets read by screen readers and other assistive devices . For optimal accessibility , you should always include a label that describes what the icon button does .
2020-07-24 20:57:38 +00:00
* /
"label" ? : string ;
/ * *
2020-10-07 13:34:05 +00:00
* The name of a registered custom icon library .
* /
"library" ? : string ;
/ * *
* The name of the icon to draw .
2020-07-24 20:57:38 +00:00
* /
"name" ? : string ;
/ * *
* An external URL of an SVG file .
* /
"src" ? : string ;
}
2020-10-07 13:34:05 +00:00
interface SlIconLibrary {
/ * *
* A function that mutates the SVG element before it renders .
* /
"mutator" ? : IconLibraryMutator ;
/ * *
* The name of the icon library .
* /
"name" ? : string ;
/ * *
* A function that translates an icon name to a URL where the corresponding SVG file exists The URL can be local or a CORS - enabled endpoint .
* /
"resolver" ? : IconLibraryResolver ;
}
2020-08-21 21:27:11 +00:00
interface SlImageComparer {
/ * *
* Emitted when the slider position changes .
* /
2020-10-09 21:45:16 +00:00
"onSl-change" ? : ( event : CustomEvent < any > ) = > void ;
2020-08-21 21:27:11 +00:00
/ * *
* The position of the divider as a percentage .
* /
"position" ? : number ;
}
2020-10-16 12:57:02 +00:00
interface SlInclude {
2020-12-08 14:18:29 +00:00
/ * *
* Allows included scripts to be executed . You must ensure the content you ' re including is trusted , otherwise this option can lead to XSS vulnerabilities in your app !
* /
"allowScripts" ? : boolean ;
2020-10-16 12:57:02 +00:00
/ * *
* The fetch mode to use .
* /
"mode" ? : 'cors' | 'no-cors' | 'same-origin' ;
/ * *
* Emitted when the included file fails to load due to an error .
* /
2020-10-16 13:28:46 +00:00
"onSl-error" ? : ( event : CustomEvent < { status? : number } > ) = > void ;
2020-10-16 12:57:02 +00:00
/ * *
* Emitted when the included file is loaded .
* /
"onSl-load" ? : ( event : CustomEvent < any > ) = > void ;
/ * *
* The location of the HTML file to include .
* /
"src" ? : string ;
}
2020-07-15 21:30:37 +00:00
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 ;
2020-12-23 20:47:13 +00:00
/ * *
* The input ' s help text . Alternatively , you can use the help - text slot .
* /
"helpText" ? : string ;
2020-07-15 21:30:37 +00:00
/ * *
* The input ' s inputmode attribute .
* /
"inputmode" ? : 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url' ;
/ * *
2020-08-28 20:50:18 +00:00
* This will be true when the control is in an invalid state . Validity is determined by props such as ` type ` , ` required ` , ` minlength ` , ` maxlength ` , and ` pattern ` using the browser ' s constraint validation API .
2020-07-15 21:30:37 +00:00
* /
"invalid" ? : boolean ;
/ * *
2020-12-23 20:47:13 +00:00
* The input ' s label . Alternatively , you can use the label slot .
2020-07-15 21:30:37 +00:00
* /
"label" ? : string ;
/ * *
2020-08-28 20:14:39 +00:00
* The input ' s maximum value .
2020-07-15 21:30:37 +00:00
* /
"max" ? : number ;
/ * *
2020-08-28 20:14:39 +00:00
* The maximum length of input that will be considered valid .
2020-07-15 21:30:37 +00:00
* /
"maxlength" ? : number ;
/ * *
2020-08-28 20:14:39 +00:00
* The input ' s minimum value .
2020-07-15 21:30:37 +00:00
* /
"min" ? : number ;
/ * *
2020-08-28 20:14:39 +00:00
* The minimum length of input that will be considered valid .
2020-07-15 21:30:37 +00:00
* /
"minlength" ? : number ;
/ * *
* The input ' s name attribute .
* /
"name" ? : string ;
/ * *
* Emitted when the control loses focus .
* /
2020-10-09 21:45:16 +00:00
"onSl-blur" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted when the control ' s value changes .
* /
2020-10-09 21:45:16 +00:00
"onSl-change" ? : ( event : CustomEvent < any > ) = > void ;
2020-08-25 20:25:25 +00:00
/ * *
* Emitted when the clear button is activated .
* /
2020-10-09 21:45:16 +00:00
"onSl-clear" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted when the control gains focus .
* /
2020-10-09 21:45:16 +00:00
"onSl-focus" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted when the control receives input .
* /
2020-10-09 21:45:16 +00:00
"onSl-input" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
2020-08-28 20:14:39 +00:00
* A pattern to validate input against .
2020-07-15 21:30:37 +00:00
* /
"pattern" ? : string ;
/ * *
* Set to true to draw a pill - style input with rounded edges .
* /
"pill" ? : boolean ;
/ * *
* The input ' s placeholder text .
* /
"placeholder" ? : string ;
/ * *
2020-08-28 20:14:39 +00:00
* Set to true to make the input readonly .
2020-07-15 21:30:37 +00:00
* /
"readonly" ? : boolean ;
/ * *
2020-10-06 11:04:40 +00:00
* Set to true to make the input a required field .
2020-07-15 21:30:37 +00:00
* /
"required" ? : boolean ;
/ * *
* The input ' s size .
* /
"size" ? : 'small' | 'medium' | 'large' ;
2020-10-02 19:46:58 +00:00
/ * *
* Enables spell checking on the input .
* /
"spellcheck" ? : boolean ;
2020-07-15 21:30:37 +00:00
/ * *
* 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 .
* /
"type" ? : 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' ;
/ * *
* The input ' s value attribute .
* /
"value" ? : string ;
}
interface SlMenu {
/ * *
* Emitted when a menu item is selected .
* /
2020-10-15 20:34:09 +00:00
"onSl-select" ? : ( event : CustomEvent < { item : HTMLSlMenuItemElement } > ) = > void ;
2020-07-15 21:30:37 +00:00
}
interface SlMenuDivider {
}
interface SlMenuItem {
/ * *
* Set to true to draw the item in a checked state .
* /
"checked" ? : boolean ;
/ * *
* Set to true to draw the menu item in a disabled state .
* /
"disabled" ? : boolean ;
/ * *
2020-12-30 18:32:42 +00:00
* A unique value to store in the menu item . This can be used as a way to identify menu items when selected .
2020-07-15 21:30:37 +00:00
* /
"value" ? : string ;
}
interface SlMenuLabel {
}
interface SlProgressBar {
2020-11-25 21:18:07 +00:00
/ * *
* When true , percentage is ignored , the label is hidden , and the progress bar is drawn in an indeterminate state .
* /
"indeterminate" ? : boolean ;
2020-07-15 21:30:37 +00:00
/ * *
* 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 in pixels .
* /
"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 ;
2020-08-28 20:50:18 +00:00
/ * *
* This will be true when the control is in an invalid state . Validity in range inputs is determined by the message provided by the ` setCustomValidity ` method .
* /
"invalid" ? : boolean ;
2020-07-15 21:30:37 +00:00
/ * *
* The radio ' s name attribute .
* /
"name" ? : string ;
/ * *
* Emitted when the control loses focus .
* /
2020-10-09 21:45:16 +00:00
"onSl-blur" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted when the control ' s checked state changes .
* /
2020-10-09 21:45:16 +00:00
"onSl-change" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted when the control gains focus .
* /
2020-10-09 21:45:16 +00:00
"onSl-focus" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* The radio ' s value attribute .
* /
"value" ? : string ;
}
interface SlRange {
/ * *
* Set to true to disable the input .
* /
"disabled" ? : boolean ;
2020-08-28 20:50:18 +00:00
/ * *
* This will be true when the control is in an invalid state . Validity in range inputs is determined by the message provided by the ` setCustomValidity ` method .
* /
"invalid" ? : boolean ;
2020-07-15 21:30:37 +00:00
/ * *
* The input ' s max attribute .
* /
"max" ? : number ;
/ * *
* The input ' s min attribute .
* /
"min" ? : number ;
/ * *
* The input ' s name attribute .
* /
"name" ? : string ;
/ * *
* Emitted when the control loses focus .
* /
2020-10-09 21:45:16 +00:00
"onSl-blur" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted when the control ' s value changes .
* /
2020-10-09 21:45:16 +00:00
"onSl-change" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted when the control gains focus .
* /
2020-10-09 21:45:16 +00:00
"onSl-focus" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* The input ' s step attribute .
* /
"step" ? : number ;
/ * *
* The preferred placedment of the tooltip .
* /
"tooltip" ? : 'top' | 'bottom' | 'none' ;
/ * *
* A function used to format the tooltip ' s value .
* /
"tooltipFormatter" ? : ( value : number ) = > string ;
/ * *
* The input ' s value attribute .
* /
"value" ? : number ;
}
2020-07-20 10:17:20 +00:00
interface SlRating {
/ * *
* Disables the rating .
* /
"disabled" ? : boolean ;
2020-07-20 16:58:05 +00:00
/ * *
* A function that returns the symbols to display . Accepts an option ` value ` parameter you can use to map a specific symbol to a value .
* /
"getSymbol" ? : ( value? : number ) = > string ;
2020-07-20 10:17:20 +00:00
/ * *
* The highest rating to show .
* /
"max" ? : number ;
/ * *
* Emitted when the rating ' s value changes .
* /
2020-10-09 21:45:16 +00:00
"onSl-change" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-20 10:17:20 +00:00
/ * *
* The minimum increment value allowed by the control .
* /
"precision" ? : number ;
/ * *
* Makes the rating readonly .
* /
"readonly" ? : boolean ;
/ * *
* The current rating .
* /
"value" ? : number ;
}
2020-11-11 22:31:53 +00:00
interface SlRelativeTime {
/ * *
* The date from which to calculate time from .
* /
"date" ? : Date | string ;
/ * *
* The formatting style to use .
* /
"format" ? : 'long' | 'short' | 'narrow' ;
/ * *
* The locale to use when formatting the number .
* /
"locale" ? : string ;
/ * *
* When ` auto ` , values such as "yesterday" and "tomorrow" will be shown when possible . When ` always ` , values such as "1 day ago" and "in 1 day" will be shown .
* /
"numeric" ? : 'always' | 'auto' ;
2020-11-20 22:02:38 +00:00
/ * *
* Keep the displayed value up to date as time passes .
* /
"sync" ? : boolean ;
2020-11-11 22:31:53 +00:00
}
2020-10-29 22:15:48 +00:00
interface SlResizeObserver {
/ * *
* Emitted when the element is resized .
* /
2020-12-07 22:29:55 +00:00
"onSl-resize" ? : ( event : CustomEvent < readonly ResizeObserverEntry [ ] > ) = > void ;
2020-10-29 22:15:48 +00:00
}
2020-08-31 20:47:31 +00:00
interface SlResponsiveEmbed {
/ * *
* The aspect ratio of the embedded media in the format of ` width:height ` , e . g . ` 16:9 ` , ` 4:3 ` , or ` 1:1 ` . Ratios not in this format will be ignored .
* /
"aspectRatio" ? : string ;
}
2020-07-15 21:30:37 +00:00
interface SlSelect {
2020-08-25 20:25:25 +00:00
/ * *
* Set to true to add a clear button when the select is populated .
* /
"clearable" ? : boolean ;
2020-07-15 21:30:37 +00:00
/ * *
* Set to true to disable the select control .
* /
"disabled" ? : boolean ;
2020-12-23 20:47:13 +00:00
/ * *
* The select ' s help text . Alternatively , you can use the help - text slot .
* /
"helpText" ? : string ;
2020-08-25 21:07:28 +00:00
/ * *
* Enable this option to prevent the panel from being clipped when the component is placed inside a container with ` overflow: auto|scroll ` .
* /
"hoist" ? : boolean ;
2020-07-15 21:30:37 +00:00
/ * *
2020-08-28 20:50:18 +00:00
* This will be true when the control is in an invalid state . Validity is determined by the ` required ` prop .
2020-07-15 21:30:37 +00:00
* /
"invalid" ? : boolean ;
/ * *
2020-12-23 20:47:13 +00:00
* The select ' s label . Alternatively , you can use the label slot .
2020-07-15 21:30:37 +00:00
* /
"label" ? : string ;
/ * *
* The maximum number of tags to show when ` multiple ` is true . After the maximum , "+n" will be shown to indicate the number of additional items that are selected . Set to - 1 to remove the limit .
* /
"maxTagsVisible" ? : number ;
/ * *
* Set to true to enable multiselect .
* /
"multiple" ? : boolean ;
/ * *
* The select ' s name .
* /
"name" ? : string ;
/ * *
2020-12-11 22:10:30 +00:00
* Emitted when the control loses focus .
2020-07-15 21:30:37 +00:00
* /
2020-10-09 21:45:16 +00:00
"onSl-blur" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted when the control ' s value changes .
* /
2020-10-09 21:45:16 +00:00
"onSl-change" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
2020-12-11 22:10:30 +00:00
* Emitted when the control gains focus .
2020-07-15 21:30:37 +00:00
* /
2020-10-09 21:45:16 +00:00
"onSl-focus" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Set to true to draw a pill - style select with rounded edges .
* /
"pill" ? : boolean ;
/ * *
* The select ' s placeholder text .
* /
"placeholder" ? : string ;
2020-08-25 13:30:28 +00:00
/ * *
* The select ' s required attribute .
* /
"required" ? : boolean ;
2020-07-15 21:30:37 +00:00
/ * *
* The select ' s size .
* /
"size" ? : 'small' | 'medium' | 'large' ;
/ * *
* The value of the control . This will be a string or an array depending on ` multiple ` .
* /
"value" ? : string | Array < string > ;
}
2020-07-27 20:20:15 +00:00
interface SlSkeleton {
/ * *
2020-07-28 12:41:45 +00:00
* Determines which effect the skeleton will use .
2020-07-27 20:20:15 +00:00
* /
2020-07-28 12:41:45 +00:00
"effect" ? : 'pulse' | 'sheen' | 'none' ;
2020-07-27 20:20:15 +00:00
}
2020-07-15 21:30:37 +00:00
interface SlSpinner {
}
interface SlSwitch {
/ * *
* Set to true to draw the switch in a checked state .
* /
"checked" ? : boolean ;
/ * *
* Set to true to disable the switch .
* /
"disabled" ? : boolean ;
2020-08-28 20:50:18 +00:00
/ * *
* This will be true when the control is in an invalid state . Validity is determined by the ` required ` prop .
* /
"invalid" ? : boolean ;
2020-07-15 21:30:37 +00:00
/ * *
* The switch ' s name attribute .
* /
"name" ? : string ;
/ * *
* Emitted when the control loses focus .
* /
2020-10-09 21:45:16 +00:00
"onSl-blur" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted when the control ' s checked state changes .
* /
2020-10-09 21:45:16 +00:00
"onSl-change" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted when the control gains focus .
* /
2020-10-09 21:45:16 +00:00
"onSl-focus" ? : ( event : CustomEvent < any > ) = > void ;
2020-08-28 20:14:39 +00:00
/ * *
* Set to true to make the switch a required field .
* /
"required" ? : boolean ;
2020-07-15 21:30:37 +00:00
/ * *
* The switch ' s value attribute .
* /
"value" ? : string ;
}
interface SlTab {
/ * *
* Set to true to draw the tab in an active state .
* /
"active" ? : boolean ;
2020-11-02 13:32:54 +00:00
/ * *
* When true , the tab will be rendered with a close icon .
* /
"closable" ? : boolean ;
2020-07-15 21:30:37 +00:00
/ * *
* Set to true to draw the tab in a disabled state .
* /
"disabled" ? : boolean ;
2020-11-02 13:32:54 +00:00
/ * *
* Emitted when the tab is closable and the close button is activated .
* /
"onSl-close" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* The name of the tab panel the tab will control . The panel must be located in the same tab group .
* /
"panel" ? : string ;
}
interface SlTabGroup {
2020-10-22 18:00:06 +00:00
/ * *
* Disables the scroll arrows that appear when tabs overflow .
* /
"noScrollControls" ? : boolean ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted when a tab is hidden .
* /
2020-10-15 20:34:09 +00:00
"onSl-tab-hide" ? : ( event : CustomEvent < { name : string } > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted when a tab is shown .
* /
2020-10-15 20:34:09 +00:00
"onSl-tab-show" ? : ( event : CustomEvent < { name : string } > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* The placement of the tabs .
* /
"placement" ? : 'top' | 'bottom' | 'left' | 'right' ;
}
interface SlTabPanel {
/ * *
* When true , the tab panel will be shown .
* /
"active" ? : boolean ;
/ * *
* The tab panel ' s name .
* /
"name" ? : string ;
}
interface SlTag {
/ * *
* Set to true to make the tag clearable .
* /
"clearable" ? : boolean ;
/ * *
* Emitted when the clear button is activated .
* /
2020-10-09 21:45:16 +00:00
"onSl-clear" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Set to true to draw a pill - style tag with rounded edges .
* /
"pill" ? : boolean ;
/ * *
* The tag ' s size .
* /
"size" ? : 'small' | 'medium' | 'large' ;
/ * *
* The tag ' s type .
* /
"type" ? : 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'text' ;
}
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 ;
2020-12-23 20:47:13 +00:00
/ * *
* The textarea ' s help text . Alternatively , you can use the help - text slot .
* /
"helpText" ? : string ;
2020-07-15 21:30:37 +00:00
/ * *
* The textarea ' s inputmode attribute .
* /
"inputmode" ? : 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url' ;
/ * *
2020-08-28 20:50:18 +00:00
* This will be true when the control is in an invalid state . Validity is determined by props such as ` required ` , ` minlength ` , and ` maxlength ` using the browser ' s constraint validation API .
2020-07-15 21:30:37 +00:00
* /
"invalid" ? : boolean ;
/ * *
2020-12-23 20:47:13 +00:00
* The textarea ' s label . Alternatively , you can use the label slot .
2020-07-15 21:30:37 +00:00
* /
"label" ? : string ;
/ * *
2020-08-28 20:14:39 +00:00
* The maximum length of input that will be considered valid .
2020-07-15 21:30:37 +00:00
* /
"maxlength" ? : number ;
2020-08-28 20:14:39 +00:00
/ * *
* The minimum length of input that will be considered valid .
* /
"minlength" ? : number ;
2020-07-15 21:30:37 +00:00
/ * *
* The textarea ' s name attribute .
* /
"name" ? : string ;
/ * *
* Emitted when the control loses focus .
* /
2020-10-09 21:45:16 +00:00
"onSl-blur" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted when the control ' s value changes .
* /
2020-10-09 21:45:16 +00:00
"onSl-change" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted when the control gains focus .
* /
2020-10-09 21:45:16 +00:00
"onSl-focus" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted when the control receives input .
* /
2020-10-09 21:45:16 +00:00
"onSl-input" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* 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' ;
/ * *
2020-08-28 20:14:39 +00:00
* The textarea ' s spellcheck attribute .
2020-07-15 21:30:37 +00:00
* /
2020-08-28 20:14:39 +00:00
"spellcheck" ? : boolean ;
2020-07-15 21:30:37 +00:00
/ * *
* The textarea ' s value attribute .
* /
"value" ? : string ;
}
2020-10-28 13:11:29 +00:00
interface SlTheme {
/ * *
* The name of the theme to use . The user is responsible for including the associated stylesheet ( s ) . Supportive themes must adhere to theme guidelines by exposing a class that follows the ` sl-theme-{name} ` convention .
* /
"name" ? : string ;
}
2020-07-15 21:30:37 +00:00
interface SlTooltip {
/ * *
* The tooltip ' s content .
* /
"content" ? : string ;
/ * *
* Set to true to disable the tooltip so it won ' t show when triggered .
* /
"disabled" ? : boolean ;
/ * *
* The distance in pixels from which to offset the tooltip away from its target .
* /
"distance" ? : number ;
/ * *
* Emitted after the tooltip has hidden and all transitions are complete .
* /
2020-10-09 21:45:16 +00:00
"onSl-after-hide" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted after the tooltip has shown and all transitions are complete .
* /
2020-10-09 21:45:16 +00:00
"onSl-aftershow" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted when the tooltip begins to hide . Calling ` event.preventDefault() ` will prevent it from being hidden .
* /
2020-10-09 21:45:16 +00:00
"onSl-hide" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Emitted when the tooltip begins to show . Calling ` event.preventDefault() ` will prevent it from being shown .
* /
2020-10-09 21:45:16 +00:00
"onSl-show" ? : ( event : CustomEvent < any > ) = > void ;
2020-07-15 21:30:37 +00:00
/ * *
* Indicates whether or not the tooltip is open . You can use this in lieu of the show / hide methods .
* /
"open" ? : boolean ;
/ * *
* 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 distance in pixels from which to offset the tooltip along its target .
* /
"skidding" ? : number ;
/ * *
* Controls how the tooltip is activated . Possible options include ` click ` , ` hover ` , ` focus ` , and ` manual ` . Multiple options can be passed by separating them with a space . When manual is used , the tooltip must be activated programmatically .
* /
"trigger" ? : string ;
}
interface IntrinsicElements {
"sl-alert" : SlAlert ;
2020-08-10 14:04:25 +00:00
"sl-animation" : SlAnimation ;
2020-07-15 21:30:37 +00:00
"sl-avatar" : SlAvatar ;
"sl-badge" : SlBadge ;
"sl-button" : SlButton ;
2020-08-06 13:07:24 +00:00
"sl-button-group" : SlButtonGroup ;
2020-07-22 20:02:49 +00:00
"sl-card" : SlCard ;
2020-07-15 21:30:37 +00:00
"sl-checkbox" : SlCheckbox ;
"sl-color-picker" : SlColorPicker ;
"sl-details" : SlDetails ;
"sl-dialog" : SlDialog ;
"sl-drawer" : SlDrawer ;
"sl-dropdown" : SlDropdown ;
"sl-form" : SlForm ;
2020-08-25 13:20:13 +00:00
"sl-format-bytes" : SlFormatBytes ;
2020-11-25 21:18:07 +00:00
"sl-format-date" : SlFormatDate ;
2020-11-09 14:38:30 +00:00
"sl-format-number" : SlFormatNumber ;
2020-07-15 21:30:37 +00:00
"sl-icon" : SlIcon ;
2020-07-24 20:57:38 +00:00
"sl-icon-button" : SlIconButton ;
2020-10-07 13:34:05 +00:00
"sl-icon-library" : SlIconLibrary ;
2020-08-21 21:27:11 +00:00
"sl-image-comparer" : SlImageComparer ;
2020-10-16 12:57:02 +00:00
"sl-include" : SlInclude ;
2020-07-15 21:30:37 +00:00
"sl-input" : SlInput ;
"sl-menu" : SlMenu ;
"sl-menu-divider" : SlMenuDivider ;
"sl-menu-item" : SlMenuItem ;
"sl-menu-label" : SlMenuLabel ;
"sl-progress-bar" : SlProgressBar ;
"sl-progress-ring" : SlProgressRing ;
"sl-radio" : SlRadio ;
"sl-range" : SlRange ;
2020-07-20 10:17:20 +00:00
"sl-rating" : SlRating ;
2020-11-11 22:31:53 +00:00
"sl-relative-time" : SlRelativeTime ;
2020-10-29 22:15:48 +00:00
"sl-resize-observer" : SlResizeObserver ;
2020-08-31 20:47:31 +00:00
"sl-responsive-embed" : SlResponsiveEmbed ;
2020-07-15 21:30:37 +00:00
"sl-select" : SlSelect ;
2020-07-27 20:20:15 +00:00
"sl-skeleton" : SlSkeleton ;
2020-07-15 21:30:37 +00:00
"sl-spinner" : SlSpinner ;
"sl-switch" : SlSwitch ;
"sl-tab" : SlTab ;
"sl-tab-group" : SlTabGroup ;
"sl-tab-panel" : SlTabPanel ;
"sl-tag" : SlTag ;
"sl-textarea" : SlTextarea ;
2020-10-28 13:11:29 +00:00
"sl-theme" : SlTheme ;
2020-07-15 21:30:37 +00:00
"sl-tooltip" : SlTooltip ;
}
}
export { LocalJSX as JSX } ;
declare module "@stencil/core" {
export namespace JSX {
interface IntrinsicElements {
"sl-alert" : LocalJSX . SlAlert & JSXBase . HTMLAttributes < HTMLSlAlertElement > ;
2020-08-10 14:04:25 +00:00
"sl-animation" : LocalJSX . SlAnimation & JSXBase . HTMLAttributes < HTMLSlAnimationElement > ;
2020-07-15 21:30:37 +00:00
"sl-avatar" : LocalJSX . SlAvatar & JSXBase . HTMLAttributes < HTMLSlAvatarElement > ;
"sl-badge" : LocalJSX . SlBadge & JSXBase . HTMLAttributes < HTMLSlBadgeElement > ;
"sl-button" : LocalJSX . SlButton & JSXBase . HTMLAttributes < HTMLSlButtonElement > ;
2020-08-06 13:07:24 +00:00
"sl-button-group" : LocalJSX . SlButtonGroup & JSXBase . HTMLAttributes < HTMLSlButtonGroupElement > ;
2020-07-22 20:02:49 +00:00
"sl-card" : LocalJSX . SlCard & JSXBase . HTMLAttributes < HTMLSlCardElement > ;
2020-07-15 21:30:37 +00:00
"sl-checkbox" : LocalJSX . SlCheckbox & JSXBase . HTMLAttributes < HTMLSlCheckboxElement > ;
"sl-color-picker" : LocalJSX . SlColorPicker & JSXBase . HTMLAttributes < HTMLSlColorPickerElement > ;
"sl-details" : LocalJSX . SlDetails & JSXBase . HTMLAttributes < HTMLSlDetailsElement > ;
"sl-dialog" : LocalJSX . SlDialog & JSXBase . HTMLAttributes < HTMLSlDialogElement > ;
"sl-drawer" : LocalJSX . SlDrawer & JSXBase . HTMLAttributes < HTMLSlDrawerElement > ;
"sl-dropdown" : LocalJSX . SlDropdown & JSXBase . HTMLAttributes < HTMLSlDropdownElement > ;
"sl-form" : LocalJSX . SlForm & JSXBase . HTMLAttributes < HTMLSlFormElement > ;
2020-08-25 13:20:13 +00:00
"sl-format-bytes" : LocalJSX . SlFormatBytes & JSXBase . HTMLAttributes < HTMLSlFormatBytesElement > ;
2020-11-25 21:18:07 +00:00
"sl-format-date" : LocalJSX . SlFormatDate & JSXBase . HTMLAttributes < HTMLSlFormatDateElement > ;
2020-11-09 14:38:30 +00:00
"sl-format-number" : LocalJSX . SlFormatNumber & JSXBase . HTMLAttributes < HTMLSlFormatNumberElement > ;
2020-07-15 21:30:37 +00:00
"sl-icon" : LocalJSX . SlIcon & JSXBase . HTMLAttributes < HTMLSlIconElement > ;
2020-07-24 20:57:38 +00:00
"sl-icon-button" : LocalJSX . SlIconButton & JSXBase . HTMLAttributes < HTMLSlIconButtonElement > ;
2020-10-07 13:34:05 +00:00
"sl-icon-library" : LocalJSX . SlIconLibrary & JSXBase . HTMLAttributes < HTMLSlIconLibraryElement > ;
2020-08-21 21:27:11 +00:00
"sl-image-comparer" : LocalJSX . SlImageComparer & JSXBase . HTMLAttributes < HTMLSlImageComparerElement > ;
2020-10-16 12:57:02 +00:00
"sl-include" : LocalJSX . SlInclude & JSXBase . HTMLAttributes < HTMLSlIncludeElement > ;
2020-07-15 21:30:37 +00:00
"sl-input" : LocalJSX . SlInput & JSXBase . HTMLAttributes < HTMLSlInputElement > ;
"sl-menu" : LocalJSX . SlMenu & JSXBase . HTMLAttributes < HTMLSlMenuElement > ;
"sl-menu-divider" : LocalJSX . SlMenuDivider & JSXBase . HTMLAttributes < HTMLSlMenuDividerElement > ;
"sl-menu-item" : LocalJSX . SlMenuItem & JSXBase . HTMLAttributes < HTMLSlMenuItemElement > ;
"sl-menu-label" : LocalJSX . SlMenuLabel & JSXBase . HTMLAttributes < HTMLSlMenuLabelElement > ;
"sl-progress-bar" : LocalJSX . SlProgressBar & JSXBase . HTMLAttributes < HTMLSlProgressBarElement > ;
"sl-progress-ring" : LocalJSX . SlProgressRing & JSXBase . HTMLAttributes < HTMLSlProgressRingElement > ;
"sl-radio" : LocalJSX . SlRadio & JSXBase . HTMLAttributes < HTMLSlRadioElement > ;
"sl-range" : LocalJSX . SlRange & JSXBase . HTMLAttributes < HTMLSlRangeElement > ;
2020-07-20 10:17:20 +00:00
"sl-rating" : LocalJSX . SlRating & JSXBase . HTMLAttributes < HTMLSlRatingElement > ;
2020-11-11 22:31:53 +00:00
"sl-relative-time" : LocalJSX . SlRelativeTime & JSXBase . HTMLAttributes < HTMLSlRelativeTimeElement > ;
2020-10-29 22:15:48 +00:00
"sl-resize-observer" : LocalJSX . SlResizeObserver & JSXBase . HTMLAttributes < HTMLSlResizeObserverElement > ;
2020-08-31 20:47:31 +00:00
"sl-responsive-embed" : LocalJSX . SlResponsiveEmbed & JSXBase . HTMLAttributes < HTMLSlResponsiveEmbedElement > ;
2020-07-15 21:30:37 +00:00
"sl-select" : LocalJSX . SlSelect & JSXBase . HTMLAttributes < HTMLSlSelectElement > ;
2020-07-27 20:20:15 +00:00
"sl-skeleton" : LocalJSX . SlSkeleton & JSXBase . HTMLAttributes < HTMLSlSkeletonElement > ;
2020-07-15 21:30:37 +00:00
"sl-spinner" : LocalJSX . SlSpinner & JSXBase . HTMLAttributes < HTMLSlSpinnerElement > ;
"sl-switch" : LocalJSX . SlSwitch & JSXBase . HTMLAttributes < HTMLSlSwitchElement > ;
"sl-tab" : LocalJSX . SlTab & JSXBase . HTMLAttributes < HTMLSlTabElement > ;
"sl-tab-group" : LocalJSX . SlTabGroup & JSXBase . HTMLAttributes < HTMLSlTabGroupElement > ;
"sl-tab-panel" : LocalJSX . SlTabPanel & JSXBase . HTMLAttributes < HTMLSlTabPanelElement > ;
"sl-tag" : LocalJSX . SlTag & JSXBase . HTMLAttributes < HTMLSlTagElement > ;
"sl-textarea" : LocalJSX . SlTextarea & JSXBase . HTMLAttributes < HTMLSlTextareaElement > ;
2020-10-28 13:11:29 +00:00
"sl-theme" : LocalJSX . SlTheme & JSXBase . HTMLAttributes < HTMLSlThemeElement > ;
2020-07-15 21:30:37 +00:00
"sl-tooltip" : LocalJSX . SlTooltip & JSXBase . HTMLAttributes < HTMLSlTooltipElement > ;
}
}
}