{ "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json", "name": "@skf-design-system/ui-components", "version": "0.0.0", "description-markup": "markdown", "contributions": { "html": { "elements": [ { "name": "skf-accordion", "description": "The `` component consists of multiple ``, working together.\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/6590bf-accordion) for design principles.\n---\n\n\n### **Slots:**\n - _default_ - Expects one or more element(s)", "doc-url": "", "attributes": [ { "name": "animated", "description": "If true, will animate the expand/collapse state", "value": { "type": "boolean | undefined" } }, { "name": "heading-as", "description": "Defines which heading element will be rendered", "value": { "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\"", "default": "'h2'" } }, { "name": "gap", "description": "If true, adds a gap between each item", "value": { "type": "boolean | undefined" } }, { "name": "multiple", "description": "If true, allowes multiple accordion items to open", "value": { "type": "boolean | undefined" } }, { "name": "small", "description": "If true, renders the small version", "value": { "type": "boolean | undefined" } }, { "name": "truncate", "description": "If true, will truncate all headings in collapsed state", "value": { "type": "boolean | undefined" } } ], "slots": [ { "name": "", "description": "Expects one or more element(s)" } ], "events": [], "js": { "properties": [ { "name": "animated", "description": "If true, will animate the expand/collapse state", "type": "boolean | undefined" }, { "name": "headingAs", "description": "Defines which heading element will be rendered", "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\"" }, { "name": "gap", "description": "If true, adds a gap between each item", "type": "boolean | undefined" }, { "name": "multiple", "description": "If true, allowes multiple accordion items to open", "type": "boolean | undefined" }, { "name": "small", "description": "If true, renders the small version", "type": "boolean | undefined" }, { "name": "truncate", "description": "If true, will truncate all headings in collapsed state", "type": "boolean | undefined" } ], "events": [] } }, { "name": "skf-button", "description": "Component to be used in forms or for interactivity\n---\n\n\n### **Slots:**\n - _default_ - The Primary content", "doc-url": "", "attributes": [ { "name": "destructive", "description": "If true, gives destructive appearance. **Notice!** Only applicable if `variant` is `primary`.", "value": { "type": "boolean", "default": "false" } }, { "name": "disabled", "description": "If true, removes border", "value": { "type": "boolean", "default": "false" } }, { "name": "icon", "description": "If provided, renders an icon before or after the text", "value": { "type": "\"arrowDown\" | \"arrowDownUp\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"article\" | \"artificialIntelligence\" | \"asset\" | \"attachment\" | \"bandCursor\" | \"bands\" | \"batteryEmpty\" | \"batteryFull\" | \"batteryLow\" | \"bearingFault\" | \"book\" | \"bulb\" | \"burger\" | \"cPM\" | \"calendar\" | \"calendarBooked\" | \"calendarEmpty\" | \"calendarNotBooked\" | \"calendarRecurring\" | \"caretDown\" | \"caretUp\" | \"caretUpDown\" | \"chat\" | \"check\" | \"checkCircle\" | \"checkSmall\" | \"chevronDown\" | \"chevronLeft\" | \"chevronRight\" | \"chevronUp\" | \"chevronUpDown\" | \"close\" | \"closeAllFaults\" | \"closeFault\" | \"closeSmall\" | \"columnGraph\" | \"comment\" | \"connection1\" | \"connection2\" | \"connection3\" | \"connection4\" | \"danger\" | \"defectFrequencies\" | \"defectFrequenciesAlternative\" | \"doubleChevronLeft\" | \"doubleChevronRight\" | \"download\" | \"draft\" | \"draftFilled\" | \"draftOutlined\" | \"dragNDrop\" | \"drop\" | \"duplicate\" | \"edit\" | \"emailFilled\" | \"emailOutlined\" | \"exclamation\" | \"eye\" | \"eyeHidden\" | \"eyeVisible\" | \"filter\" | \"forbidden\" | \"fullScreen\" | \"fullScreenExit\" | \"functionalLocation\" | \"harmonicCursor\" | \"heatmap\" | \"hierarchy\" | \"history\" | \"historyAlt\" | \"hourglassFramedFilled\" | \"hourglassFramedOutlined\" | \"hourglassOutlined\" | \"hz\" | \"iMX\" | \"image\" | \"infoCircleFilled\" | \"infoCircleOutlined\" | \"integration\" | \"kebab\" | \"link\" | \"listGroup\" | \"listItem\" | \"locationPin\" | \"lock\" | \"logOut\" | \"meatballs\" | \"microphone\" | \"minus\" | \"minusSmall\" | \"noData\" | \"o\" | \"openInNew\" | \"overlayBaseline\" | \"pDF\" | \"paper\" | \"pause\" | \"pieChart\" | \"pin\" | \"play\" | \"plus\" | \"powerOff\" | \"printer\" | \"proCollect\" | \"recAction\" | \"received\" | \"refresh\" | \"reorder\" | \"replace\" | \"reply\" | \"rewalkableRoute\" | \"routes\" | \"search\" | \"send\" | \"sensorA\" | \"sensorB\" | \"settings\" | \"sidebandCursor\" | \"singleCursor\" | \"spectrum\" | \"starFilled\" | \"starOutlined\" | \"statusCircle\" | \"stop\" | \"structuralVibration\" | \"sync\" | \"timewave\" | \"trash\" | \"trend\" | \"trendingUp\" | \"undo\" | \"unknownCircle\" | \"unknownDiamond\" | \"unlink\" | \"unlock\" | \"unscheduledAction\" | \"upload\" | \"user\" | \"viewFull\" | \"viewHorizontal\" | \"viewVertical\" | \"warning\" | \"warningCircle\" | \"warningDiamond\" | \"zoomIn\" | \"zoomOut\"" } }, { "name": "icon-position", "description": "If provided, determines the positioning of the icon in relation to the text", "value": { "type": "'left' | 'right' | undefined", "default": "'left'" } }, { "name": "loading", "description": "If true, hides text & icon and shows loading indicator. **Notice!** Only applicable if `variant` is `primary`.", "value": { "type": "boolean", "default": "false" } }, { "name": "size", "description": "If provided, displays an alternative size", "value": { "type": "'sm' | 'md' | 'lg'", "default": "'md'" } }, { "name": "type", "description": "If provided, changes the button type", "value": { "type": "'button' | 'submit' | 'reset'", "default": "'button'" } }, { "name": "variant", "description": "If provided, alters the appearance", "value": { "type": "'primary' | 'secondary'", "default": "'primary'" } } ], "slots": [{ "name": "", "description": "The Primary content" }], "events": [], "js": { "properties": [ { "name": "destructive", "description": "If true, gives destructive appearance. **Notice!** Only applicable if `variant` is `primary`.", "type": "boolean" }, { "name": "disabled", "description": "If true, removes border", "type": "boolean" }, { "name": "icon", "description": "If provided, renders an icon before or after the text", "type": "\"arrowDown\" | \"arrowDownUp\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"article\" | \"artificialIntelligence\" | \"asset\" | \"attachment\" | \"bandCursor\" | \"bands\" | \"batteryEmpty\" | \"batteryFull\" | \"batteryLow\" | \"bearingFault\" | \"book\" | \"bulb\" | \"burger\" | \"cPM\" | \"calendar\" | \"calendarBooked\" | \"calendarEmpty\" | \"calendarNotBooked\" | \"calendarRecurring\" | \"caretDown\" | \"caretUp\" | \"caretUpDown\" | \"chat\" | \"check\" | \"checkCircle\" | \"checkSmall\" | \"chevronDown\" | \"chevronLeft\" | \"chevronRight\" | \"chevronUp\" | \"chevronUpDown\" | \"close\" | \"closeAllFaults\" | \"closeFault\" | \"closeSmall\" | \"columnGraph\" | \"comment\" | \"connection1\" | \"connection2\" | \"connection3\" | \"connection4\" | \"danger\" | \"defectFrequencies\" | \"defectFrequenciesAlternative\" | \"doubleChevronLeft\" | \"doubleChevronRight\" | \"download\" | \"draft\" | \"draftFilled\" | \"draftOutlined\" | \"dragNDrop\" | \"drop\" | \"duplicate\" | \"edit\" | \"emailFilled\" | \"emailOutlined\" | \"exclamation\" | \"eye\" | \"eyeHidden\" | \"eyeVisible\" | \"filter\" | \"forbidden\" | \"fullScreen\" | \"fullScreenExit\" | \"functionalLocation\" | \"harmonicCursor\" | \"heatmap\" | \"hierarchy\" | \"history\" | \"historyAlt\" | \"hourglassFramedFilled\" | \"hourglassFramedOutlined\" | \"hourglassOutlined\" | \"hz\" | \"iMX\" | \"image\" | \"infoCircleFilled\" | \"infoCircleOutlined\" | \"integration\" | \"kebab\" | \"link\" | \"listGroup\" | \"listItem\" | \"locationPin\" | \"lock\" | \"logOut\" | \"meatballs\" | \"microphone\" | \"minus\" | \"minusSmall\" | \"noData\" | \"o\" | \"openInNew\" | \"overlayBaseline\" | \"pDF\" | \"paper\" | \"pause\" | \"pieChart\" | \"pin\" | \"play\" | \"plus\" | \"powerOff\" | \"printer\" | \"proCollect\" | \"recAction\" | \"received\" | \"refresh\" | \"reorder\" | \"replace\" | \"reply\" | \"rewalkableRoute\" | \"routes\" | \"search\" | \"send\" | \"sensorA\" | \"sensorB\" | \"settings\" | \"sidebandCursor\" | \"singleCursor\" | \"spectrum\" | \"starFilled\" | \"starOutlined\" | \"statusCircle\" | \"stop\" | \"structuralVibration\" | \"sync\" | \"timewave\" | \"trash\" | \"trend\" | \"trendingUp\" | \"undo\" | \"unknownCircle\" | \"unknownDiamond\" | \"unlink\" | \"unlock\" | \"unscheduledAction\" | \"upload\" | \"user\" | \"viewFull\" | \"viewHorizontal\" | \"viewVertical\" | \"warning\" | \"warningCircle\" | \"warningDiamond\" | \"zoomIn\" | \"zoomOut\"" }, { "name": "iconPosition", "description": "If provided, determines the positioning of the icon in relation to the text", "type": "'left' | 'right' | undefined" }, { "name": "loading", "description": "If true, hides text & icon and shows loading indicator. **Notice!** Only applicable if `variant` is `primary`.", "type": "boolean" }, { "name": "size", "description": "If provided, displays an alternative size", "type": "'sm' | 'md' | 'lg'" }, { "name": "type", "description": "If provided, changes the button type", "type": "'button' | 'submit' | 'reset'" }, { "name": "variant", "description": "If provided, alters the appearance", "type": "'primary' | 'secondary'" } ], "events": [] } }, { "name": "skf-card", "description": "The `` can be used to group related subjects in a container\n---\n\n\n### **Slots:**\n - _default_ - The card's main content", "doc-url": "", "attributes": [ { "name": "no-border", "description": "If true, removes border", "value": { "type": "boolean | undefined" } }, { "name": "no-padding", "description": "If true, removes padding", "value": { "type": "boolean | undefined" } }, { "name": "stretch", "description": "If true, the Card fills the parent element height", "value": { "type": "boolean | undefined" } } ], "slots": [{ "name": "", "description": "The card's main content" }], "events": [], "js": { "properties": [ { "name": "noBorder", "description": "If true, removes border", "type": "boolean | undefined" }, { "name": "noPadding", "description": "If true, removes padding", "type": "boolean | undefined" }, { "name": "stretch", "description": "If true, the Card fills the parent element height", "type": "boolean | undefined" } ], "events": [] } }, { "name": "skf-alert", "description": "The `` is a type of notification that appears in-line\n---\n\n\n### **Events:**\n - **skf-alert-close** - Fires when the close button is clicked\n\n### **Slots:**\n - _default_ - Alert message. **Notice!** See design principles for approved content\n- **link** - Slot for the link", "doc-url": "", "attributes": [ { "name": "closeable", "description": "If true, alert is being used as a toast (alertdialog) with an close button", "value": { "type": "boolean | undefined" } }, { "name": "button-label", "description": "Close button aria-label", "value": { "type": "string", "default": "'Close'" } }, { "name": "icon", "description": "If defined, displays leading icon", "value": { "type": "SkfIcon['name'] | undefined" } }, { "name": "severity", "description": "If defined, gives the supplied appearance", "value": { "type": "\"error\" | \"info\" | \"warning\" | \"success\" | \"alert\"" } } ], "slots": [ { "name": "", "description": "Alert message. **Notice!** See design principles for approved content" }, { "name": "link", "description": "Slot for the link" } ], "events": [ { "name": "skf-alert-close", "description": "Fires when the close button is clicked" } ], "js": { "properties": [ { "name": "closeable", "description": "If true, alert is being used as a toast (alertdialog) with an close button", "type": "boolean | undefined" }, { "name": "buttonLabel", "description": "Close button aria-label", "type": "string" }, { "name": "icon", "description": "If defined, displays leading icon", "type": "SkfIcon['name'] | undefined" }, { "name": "severity", "description": "If defined, gives the supplied appearance", "type": "\"error\" | \"info\" | \"warning\" | \"success\" | \"alert\"" } ], "events": [ { "name": "skf-alert-close", "description": "Fires when the close button is clicked" } ] } }, { "name": "skf-checkbox", "description": "The `` component is used to create a checkbox input\n---\n\n\n### **Events:**\n - **change** - {object} - When the value of the input changes\n\n### **Slots:**\n - _default_ - The Radios label. Alternatively, you can use the `label` attribute.", "doc-url": "", "attributes": [ { "name": "disabled", "description": "If true, sets disabled state", "value": { "type": "boolean" } }, { "name": "required", "description": "If true, value is required or must be checked for the form to be submittable", "value": { "type": "boolean" } }, { "name": "debug", "description": "If defined, outputs helping hints in console", "value": { "type": "boolean | undefined" } }, { "name": "checked", "description": "If true, outputs helping hints in console", "value": { "type": "boolean | undefined" } }, { "name": "custom-invalid", "description": "If true, forces component to invalid state until removed", "value": { "type": "boolean | undefined" } }, { "name": "hide-label", "description": "If true, hides the label visually", "value": { "type": "boolean | undefined" } }, { "name": "indeterminate", "description": "If true and the checkbox is unchecked, the checkbox will appear indeterminate", "value": { "type": "boolean | undefined" } }, { "name": "label", "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.", "value": { "type": "string | undefined" } }, { "name": "name", "description": "If defined, adds name to the input-element", "value": { "type": "string | undefined" } }, { "name": "required-label", "description": "If defined, renders an alternative A11y text for the asterisk", "value": { "type": "string | undefined" } }, { "name": "severity", "description": "If defined, styles checkbox using provided severity", "value": { "type": "\"alert\" | \"success\" | \"info\" | \"warning\"" } }, { "name": "show-valid", "description": "If true, displays valid state after interaction", "value": { "type": "boolean | undefined" } }, { "name": "size", "description": "Size of the checkbox", "value": { "type": "'sm' | 'md'", "default": "'md'" } }, { "name": "value", "description": "The current value of the input field", "value": { "type": "string", "default": "''" } } ], "slots": [ { "name": "", "description": "The Radios label. Alternatively, you can use the `label` attribute." } ], "events": [ { "name": "change", "description": "{object} - When the value of the input changes" } ], "js": { "properties": [ { "name": "debug", "description": "If defined, outputs helping hints in console", "type": "boolean | undefined" }, { "name": "checked", "description": "If true, outputs helping hints in console", "type": "boolean | undefined" }, { "name": "customInvalid", "description": "If true, forces component to invalid state until removed", "type": "boolean | undefined" }, { "name": "hideLabel", "description": "If true, hides the label visually", "type": "boolean | undefined" }, { "name": "indeterminate", "description": "If true and the checkbox is unchecked, the checkbox will appear indeterminate", "type": "boolean | undefined" }, { "name": "label", "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.", "type": "string | undefined" }, { "name": "name", "description": "If defined, adds name to the input-element", "type": "string | undefined" }, { "name": "requiredLabel", "description": "If defined, renders an alternative A11y text for the asterisk", "type": "string | undefined" }, { "name": "severity", "description": "If defined, styles checkbox using provided severity", "type": "\"alert\" | \"success\" | \"info\" | \"warning\"" }, { "name": "showValid", "description": "If true, displays valid state after interaction", "type": "boolean | undefined" }, { "name": "size", "description": "Size of the checkbox", "type": "'sm' | 'md'" }, { "name": "value", "description": "The current value of the input field", "type": "string" } ], "events": [ { "name": "change", "description": "{object} - When the value of the input changes" } ] } }, { "name": "skf-divider", "description": "The `` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information\n---\n\n\n### **CSS Properties:**\n - **--skf-divider-spacing** - The amount of space the divider occupies. Pass valid CSS **margin-block** values when horizontal and **margin-inline** when vertical _(default: undefined)_\n- **--skf-divider-inset** - The amount of space the divider should be indented. Pass valid CSS **margin-inline** values when horizontal and **margin-block** when vertical _(default: undefined)_", "doc-url": "", "attributes": [ { "name": "color", "description": "Defines the Divider color", "value": { "type": "\"emphasised\" | \"primary\" | \"secondary\" | \"tertiary\" | \"inverse\"", "default": "'primary'" } }, { "name": "decorative", "description": "If true, renders a div for presentational purpose instead of the semantic hr-element", "value": { "type": "boolean | undefined" } }, { "name": "vertical", "description": "If true, renders the divider vertically", "value": { "type": "boolean | undefined" } } ], "events": [], "js": { "properties": [ { "name": "color", "description": "Defines the Divider color", "type": "\"emphasised\" | \"primary\" | \"secondary\" | \"tertiary\" | \"inverse\"" }, { "name": "decorative", "description": "If true, renders a div for presentational purpose instead of the semantic hr-element", "type": "boolean | undefined" }, { "name": "vertical", "description": "If true, renders the divider vertically", "type": "boolean | undefined" } ], "events": [] } }, { "name": "skf-collapse", "description": "The `` component is a general purpose container for content that can be collapsed / expanded.\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/6590bf-accordion) for design principles.\n---\n\n\n### **Events:**\n - **skf-collapse-toggle** - Event emitted when toggled\n\n### **Methods:**\n - **setClose()** - Class method as alternative to manipulate attribute\n- **setOpen()** - Class method as alternative to manipulate attribute\n\n### **Slots:**\n - _default_ - Main content", "doc-url": "", "attributes": [ { "name": "animated", "description": "If true, will animate the expand/collapse state", "value": { "type": "boolean | undefined" } }, { "name": "expanded", "description": "If true, will set the collapse to be expanded by default", "value": { "type": "boolean | undefined" } }, { "name": "heading", "description": "Heading for the collapse", "value": { "type": "string | undefined" } }, { "name": "heading-as", "description": "Defines which heading element will be rendered", "value": { "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\"", "default": "'h2'" } }, { "name": "small", "description": "If true, renders the small version", "value": { "type": "boolean | undefined" } }, { "name": "truncate", "description": "If true, will truncate the heading in collapsed state", "value": { "type": "boolean | undefined" } } ], "slots": [{ "name": "", "description": "Main content" }], "events": [ { "name": "skf-collapse-toggle", "type": "CustomEvent", "description": "Event emitted when toggled" } ], "js": { "properties": [ { "name": "animated", "description": "If true, will animate the expand/collapse state", "type": "boolean | undefined" }, { "name": "expanded", "description": "If true, will set the collapse to be expanded by default", "type": "boolean | undefined" }, { "name": "heading", "description": "Heading for the collapse", "type": "string | undefined" }, { "name": "headingAs", "description": "Defines which heading element will be rendered", "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\"" }, { "name": "small", "description": "If true, renders the small version", "type": "boolean | undefined" }, { "name": "truncate", "description": "If true, will truncate the heading in collapsed state", "type": "boolean | undefined" } ], "events": [ { "name": "skf-collapse-toggle", "type": "CustomEvent", "description": "Event emitted when toggled" } ] } }, { "name": "skf-heading", "description": "The `` component is to deliniate content on a page. When using, take note not to skip heading levels.
\nIt extends the interface of native html `

` to `

` elements.\n---\n\n\n### **Slots:**\n - _default_ - The headings content", "doc-url": "", "attributes": [ { "name": "as", "description": "Controls which heading element will be rendered. Should not be used to affect appearance", "value": { "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\"", "default": "'h1'" } }, { "name": "styled-as", "description": "If provided, changes the appearance of the heading", "value": { "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\"" } } ], "slots": [{ "name": "", "description": "The headings content" }], "events": [], "js": { "properties": [ { "name": "as", "description": "Controls which heading element will be rendered. Should not be used to affect appearance", "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\"" }, { "name": "styledAs", "description": "If provided, changes the appearance of the heading", "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\"" } ], "events": [] } }, { "name": "skf-icon", "description": "The `` component is used to clarify interface elements. When used, should always be paired with (possibly invisible) text\n---\n", "doc-url": "", "attributes": [ { "name": "color", "description": "Sets the color of the icon", "value": { "type": "\"primary\" | \"inverse\" | \"emphasised\" | \"secondary\" | \"success\" | \"info\" | \"warning\" | \"error\" | \"alert\"", "default": "'primary'" } }, { "name": "label", "description": "If defined, adds an alternate description to use for assistive devices", "value": { "type": "string | undefined" } }, { "name": "name", "description": "Name of the icon to display", "value": { "type": "\"arrowDown\" | \"arrowDownUp\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"article\" | \"artificialIntelligence\" | \"asset\" | \"attachment\" | \"bandCursor\" | \"bands\" | \"batteryEmpty\" | \"batteryFull\" | \"batteryLow\" | \"bearingFault\" | \"book\" | \"bulb\" | \"burger\" | \"cPM\" | \"calendar\" | \"calendarBooked\" | \"calendarEmpty\" | \"calendarNotBooked\" | \"calendarRecurring\" | \"caretDown\" | \"caretUp\" | \"caretUpDown\" | \"chat\" | \"check\" | \"checkCircle\" | \"checkSmall\" | \"chevronDown\" | \"chevronLeft\" | \"chevronRight\" | \"chevronUp\" | \"chevronUpDown\" | \"close\" | \"closeAllFaults\" | \"closeFault\" | \"closeSmall\" | \"columnGraph\" | \"comment\" | \"connection1\" | \"connection2\" | \"connection3\" | \"connection4\" | \"danger\" | \"defectFrequencies\" | \"defectFrequenciesAlternative\" | \"doubleChevronLeft\" | \"doubleChevronRight\" | \"download\" | \"draft\" | \"draftFilled\" | \"draftOutlined\" | \"dragNDrop\" | \"drop\" | \"duplicate\" | \"edit\" | \"emailFilled\" | \"emailOutlined\" | \"exclamation\" | \"eye\" | \"eyeHidden\" | \"eyeVisible\" | \"filter\" | \"forbidden\" | \"fullScreen\" | \"fullScreenExit\" | \"functionalLocation\" | \"harmonicCursor\" | \"heatmap\" | \"hierarchy\" | \"history\" | \"historyAlt\" | \"hourglassFramedFilled\" | \"hourglassFramedOutlined\" | \"hourglassOutlined\" | \"hz\" | \"iMX\" | \"image\" | \"infoCircleFilled\" | \"infoCircleOutlined\" | \"integration\" | \"kebab\" | \"link\" | \"listGroup\" | \"listItem\" | \"locationPin\" | \"lock\" | \"logOut\" | \"meatballs\" | \"microphone\" | \"minus\" | \"minusSmall\" | \"noData\" | \"o\" | \"openInNew\" | \"overlayBaseline\" | \"pDF\" | \"paper\" | \"pause\" | \"pieChart\" | \"pin\" | \"play\" | \"plus\" | \"powerOff\" | \"printer\" | \"proCollect\" | \"recAction\" | \"received\" | \"refresh\" | \"reorder\" | \"replace\" | \"reply\" | \"rewalkableRoute\" | \"routes\" | \"search\" | \"send\" | \"sensorA\" | \"sensorB\" | \"settings\" | \"sidebandCursor\" | \"singleCursor\" | \"spectrum\" | \"starFilled\" | \"starOutlined\" | \"statusCircle\" | \"stop\" | \"structuralVibration\" | \"sync\" | \"timewave\" | \"trash\" | \"trend\" | \"trendingUp\" | \"undo\" | \"unknownCircle\" | \"unknownDiamond\" | \"unlink\" | \"unlock\" | \"unscheduledAction\" | \"upload\" | \"user\" | \"viewFull\" | \"viewHorizontal\" | \"viewVertical\" | \"warning\" | \"warningCircle\" | \"warningDiamond\" | \"zoomIn\" | \"zoomOut\"" } }, { "name": "size", "description": "Size of the icon", "value": { "type": "\"xs\" | \"sm\" | \"md\" | \"lg\"", "default": "'md'" } } ], "events": [], "js": { "properties": [ { "name": "color", "description": "Sets the color of the icon", "type": "\"primary\" | \"inverse\" | \"emphasised\" | \"secondary\" | \"success\" | \"info\" | \"warning\" | \"error\" | \"alert\"" }, { "name": "label", "description": "If defined, adds an alternate description to use for assistive devices", "type": "string | undefined" }, { "name": "name", "description": "Name of the icon to display", "type": "\"arrowDown\" | \"arrowDownUp\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"article\" | \"artificialIntelligence\" | \"asset\" | \"attachment\" | \"bandCursor\" | \"bands\" | \"batteryEmpty\" | \"batteryFull\" | \"batteryLow\" | \"bearingFault\" | \"book\" | \"bulb\" | \"burger\" | \"cPM\" | \"calendar\" | \"calendarBooked\" | \"calendarEmpty\" | \"calendarNotBooked\" | \"calendarRecurring\" | \"caretDown\" | \"caretUp\" | \"caretUpDown\" | \"chat\" | \"check\" | \"checkCircle\" | \"checkSmall\" | \"chevronDown\" | \"chevronLeft\" | \"chevronRight\" | \"chevronUp\" | \"chevronUpDown\" | \"close\" | \"closeAllFaults\" | \"closeFault\" | \"closeSmall\" | \"columnGraph\" | \"comment\" | \"connection1\" | \"connection2\" | \"connection3\" | \"connection4\" | \"danger\" | \"defectFrequencies\" | \"defectFrequenciesAlternative\" | \"doubleChevronLeft\" | \"doubleChevronRight\" | \"download\" | \"draft\" | \"draftFilled\" | \"draftOutlined\" | \"dragNDrop\" | \"drop\" | \"duplicate\" | \"edit\" | \"emailFilled\" | \"emailOutlined\" | \"exclamation\" | \"eye\" | \"eyeHidden\" | \"eyeVisible\" | \"filter\" | \"forbidden\" | \"fullScreen\" | \"fullScreenExit\" | \"functionalLocation\" | \"harmonicCursor\" | \"heatmap\" | \"hierarchy\" | \"history\" | \"historyAlt\" | \"hourglassFramedFilled\" | \"hourglassFramedOutlined\" | \"hourglassOutlined\" | \"hz\" | \"iMX\" | \"image\" | \"infoCircleFilled\" | \"infoCircleOutlined\" | \"integration\" | \"kebab\" | \"link\" | \"listGroup\" | \"listItem\" | \"locationPin\" | \"lock\" | \"logOut\" | \"meatballs\" | \"microphone\" | \"minus\" | \"minusSmall\" | \"noData\" | \"o\" | \"openInNew\" | \"overlayBaseline\" | \"pDF\" | \"paper\" | \"pause\" | \"pieChart\" | \"pin\" | \"play\" | \"plus\" | \"powerOff\" | \"printer\" | \"proCollect\" | \"recAction\" | \"received\" | \"refresh\" | \"reorder\" | \"replace\" | \"reply\" | \"rewalkableRoute\" | \"routes\" | \"search\" | \"send\" | \"sensorA\" | \"sensorB\" | \"settings\" | \"sidebandCursor\" | \"singleCursor\" | \"spectrum\" | \"starFilled\" | \"starOutlined\" | \"statusCircle\" | \"stop\" | \"structuralVibration\" | \"sync\" | \"timewave\" | \"trash\" | \"trend\" | \"trendingUp\" | \"undo\" | \"unknownCircle\" | \"unknownDiamond\" | \"unlink\" | \"unlock\" | \"unscheduledAction\" | \"upload\" | \"user\" | \"viewFull\" | \"viewHorizontal\" | \"viewVertical\" | \"warning\" | \"warningCircle\" | \"warningDiamond\" | \"zoomIn\" | \"zoomOut\"" }, { "name": "size", "description": "Size of the icon", "type": "\"xs\" | \"sm\" | \"md\" | \"lg\"" } ], "events": [] } }, { "name": "skf-input", "description": "The skf-text-field is used to create a text input field. It can be used inside a form element or standalone.\n---\n\n\n### **Events:**\n - **change** - Fires when the value of the input changes\n- **invalid** - Fires when the input is invalid\n\n### **Slots:**\n - _default_ - The Inputs label. Alternatively, you can use the `label` attribute.", "doc-url": "", "attributes": [ { "name": "disabled", "description": "If true, sets disabled state", "value": { "type": "boolean" } }, { "name": "required", "description": "If true, value is required or must be checked for the form to be submittable", "value": { "type": "boolean" } }, { "name": "button-aria-label-clear", "description": "Custom aria-label for the clear button. **Notice!** Only applicable to type=search.", "value": { "type": "string", "default": "'Clear input'" } }, { "name": "button-aria-label-hide", "description": "Custom aria-label for the visibility button. **Notice!** Only applicable to type=password.", "value": { "type": "string", "default": "'Hide password'" } }, { "name": "button-aria-label-show", "description": "Custom aria-label for the visibility button **Notice!** Only applicable to type=password.", "value": { "type": "string", "default": "'Show password'" } }, { "name": "custom-invalid", "description": "If defined, forces component to invalid state until removed. Its value is used as hint text.", "value": { "type": "string" } }, { "name": "debug", "description": "If true, outputs helping hints in console", "value": { "type": "boolean | undefined" } }, { "name": "hide-label", "description": "If true, hides the label visually", "value": { "type": "boolean | undefined" } }, { "name": "hint", "description": "If defined, displays informational text below the field", "value": { "type": "string | undefined" } }, { "name": "inputmode", "description": "Tells what keyboard to use if applicable", "value": { "type": "'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'", "default": "'text'" } }, { "name": "label", "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.", "value": { "type": "string | undefined" } }, { "name": "leading", "description": "If defined, displays a prefix/adornment before the input-element", "value": { "type": "string | undefined" } }, { "name": "max", "description": "If defined, sets the maximum value to accept for this input", "value": { "type": "number | string | undefined" } }, { "name": "maxlength", "description": "If defined, sets the maximum character length to accept for this input", "value": { "type": "number | undefined" } }, { "name": "min", "description": "If defined, sets the minimum value to accept for this input", "value": { "type": "number | string | undefined" } }, { "name": "minlength", "description": "If defined, sets the minimum character length to accept for this input", "value": { "type": "number | undefined" } }, { "name": "name", "description": "If defined, adds name to the input-element", "value": { "type": "string | undefined" } }, { "name": "pattern", "description": "If defined, adds name to the input-element", "value": { "type": "string | undefined" } }, { "name": "placeholder", "description": "If defined, displays placeholder text", "value": { "type": "string | undefined" } }, { "name": "readonly", "description": "If true, makes the element not mutable, meaning the user can not edit the control", "value": { "type": "boolean | undefined" } }, { "name": "required-label", "description": "If defined, renders an alternative A11y text for the asterisk", "value": { "type": "string | undefined" } }, { "name": "severity", "description": "If defined, displays provided severity state", "value": { "type": "\"alert\" | \"success\" | \"info\" | \"warning\"" } }, { "name": "show-valid", "description": "If true, displays valid state after interaction", "value": { "type": "boolean | undefined" } }, { "name": "size", "description": "Size of the input", "value": { "type": "'sm' | 'md'", "default": "'md'" } }, { "name": "trailing", "description": "If defined, displays a suffix/adornment after the input-element", "value": { "type": "string | undefined" } }, { "name": "type", "description": "Type of input control", "value": { "type": "'button' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week'", "default": "'text'" } }, { "name": "validate-on", "description": "Sets validation start", "value": { "type": "'input' | 'change' | 'submit'", "default": "'change'" } }, { "name": "value", "description": "The current value of the input field", "value": { "type": "string", "default": "''" } } ], "slots": [ { "name": "", "description": "The Inputs label. Alternatively, you can use the `label` attribute." } ], "events": [ { "name": "change", "description": "Fires when the value of the input changes" }, { "name": "invalid", "description": "Fires when the input is invalid" } ], "js": { "properties": [ { "name": "buttonAriaLabelClear", "description": "Custom aria-label for the clear button. **Notice!** Only applicable to type=search.", "type": "string" }, { "name": "buttonAriaLabelHide", "description": "Custom aria-label for the visibility button. **Notice!** Only applicable to type=password.", "type": "string" }, { "name": "buttonAriaLabelShow", "description": "Custom aria-label for the visibility button **Notice!** Only applicable to type=password.", "type": "string" }, { "name": "customInvalid", "description": "If defined, forces component to invalid state until removed. Its value is used as hint text." }, { "name": "debug", "description": "If true, outputs helping hints in console", "type": "boolean | undefined" }, { "name": "hideLabel", "description": "If true, hides the label visually", "type": "boolean | undefined" }, { "name": "hint", "description": "If defined, displays informational text below the field", "type": "string | undefined" }, { "name": "inputmode", "description": "Tells what keyboard to use if applicable", "type": "'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'" }, { "name": "label", "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.", "type": "string | undefined" }, { "name": "leading", "description": "If defined, displays a prefix/adornment before the input-element", "type": "string | undefined" }, { "name": "max", "description": "If defined, sets the maximum value to accept for this input", "type": "number | string | undefined" }, { "name": "maxLength", "description": "If defined, sets the maximum character length to accept for this input", "type": "number | undefined" }, { "name": "min", "description": "If defined, sets the minimum value to accept for this input", "type": "number | string | undefined" }, { "name": "minLength", "description": "If defined, sets the minimum character length to accept for this input", "type": "number | undefined" }, { "name": "name", "description": "If defined, adds name to the input-element", "type": "string | undefined" }, { "name": "pattern", "description": "If defined, adds name to the input-element", "type": "string | undefined" }, { "name": "placeholder", "description": "If defined, displays placeholder text", "type": "string | undefined" }, { "name": "readonly", "description": "If true, makes the element not mutable, meaning the user can not edit the control", "type": "boolean | undefined" }, { "name": "requiredLabel", "description": "If defined, renders an alternative A11y text for the asterisk", "type": "string | undefined" }, { "name": "severity", "description": "If defined, displays provided severity state", "type": "\"alert\" | \"success\" | \"info\" | \"warning\"" }, { "name": "showValid", "description": "If true, displays valid state after interaction", "type": "boolean | undefined" }, { "name": "size", "description": "Size of the input", "type": "'sm' | 'md'" }, { "name": "trailing", "description": "If defined, displays a suffix/adornment after the input-element", "type": "string | undefined" }, { "name": "type", "description": "Type of input control", "type": "'button' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week'" }, { "name": "validateOn", "description": "Sets validation start", "type": "'input' | 'change' | 'submit'" }, { "name": "value", "description": "The current value of the input field", "type": "string" } ], "events": [ { "name": "change", "description": "Fires when the value of the input changes" }, { "name": "invalid", "description": "Fires when the input is invalid" } ] } }, { "name": "skf-link", "description": "The `` can be used as either a regular link or a link styled semantic button\n---\n\n\n### **Slots:**\n - _default_ - The links' main content", "doc-url": "", "attributes": [ { "name": "as", "description": "Defines the semantic element to render", "value": { "type": "'button' | 'a'", "default": "'a'" } }, { "name": "color", "description": "Defines the text-color", "value": { "type": "'primary' | 'inverse'", "default": "'primary'" } }, { "name": "disabled", "description": "If true, disables the link", "value": { "type": "boolean | undefined" } }, { "name": "download", "description": "If defined, downloads the url", "value": { "type": "string | undefined" } }, { "name": "href", "description": "If defined, loads url on click", "value": { "type": "string | undefined" } }, { "name": "icon", "description": "If defined, renders an icon before or after the text", "value": { "type": "\"arrowDown\" | \"arrowDownUp\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"article\" | \"artificialIntelligence\" | \"asset\" | \"attachment\" | \"bandCursor\" | \"bands\" | \"batteryEmpty\" | \"batteryFull\" | \"batteryLow\" | \"bearingFault\" | \"book\" | \"bulb\" | \"burger\" | \"cPM\" | \"calendar\" | \"calendarBooked\" | \"calendarEmpty\" | \"calendarNotBooked\" | \"calendarRecurring\" | \"caretDown\" | \"caretUp\" | \"caretUpDown\" | \"chat\" | \"check\" | \"checkCircle\" | \"checkSmall\" | \"chevronDown\" | \"chevronLeft\" | \"chevronRight\" | \"chevronUp\" | \"chevronUpDown\" | \"close\" | \"closeAllFaults\" | \"closeFault\" | \"closeSmall\" | \"columnGraph\" | \"comment\" | \"connection1\" | \"connection2\" | \"connection3\" | \"connection4\" | \"danger\" | \"defectFrequencies\" | \"defectFrequenciesAlternative\" | \"doubleChevronLeft\" | \"doubleChevronRight\" | \"download\" | \"draft\" | \"draftFilled\" | \"draftOutlined\" | \"dragNDrop\" | \"drop\" | \"duplicate\" | \"edit\" | \"emailFilled\" | \"emailOutlined\" | \"exclamation\" | \"eye\" | \"eyeHidden\" | \"eyeVisible\" | \"filter\" | \"forbidden\" | \"fullScreen\" | \"fullScreenExit\" | \"functionalLocation\" | \"harmonicCursor\" | \"heatmap\" | \"hierarchy\" | \"history\" | \"historyAlt\" | \"hourglassFramedFilled\" | \"hourglassFramedOutlined\" | \"hourglassOutlined\" | \"hz\" | \"iMX\" | \"image\" | \"infoCircleFilled\" | \"infoCircleOutlined\" | \"integration\" | \"kebab\" | \"link\" | \"listGroup\" | \"listItem\" | \"locationPin\" | \"lock\" | \"logOut\" | \"meatballs\" | \"microphone\" | \"minus\" | \"minusSmall\" | \"noData\" | \"o\" | \"openInNew\" | \"overlayBaseline\" | \"pDF\" | \"paper\" | \"pause\" | \"pieChart\" | \"pin\" | \"play\" | \"plus\" | \"powerOff\" | \"printer\" | \"proCollect\" | \"recAction\" | \"received\" | \"refresh\" | \"reorder\" | \"replace\" | \"reply\" | \"rewalkableRoute\" | \"routes\" | \"search\" | \"send\" | \"sensorA\" | \"sensorB\" | \"settings\" | \"sidebandCursor\" | \"singleCursor\" | \"spectrum\" | \"starFilled\" | \"starOutlined\" | \"statusCircle\" | \"stop\" | \"structuralVibration\" | \"sync\" | \"timewave\" | \"trash\" | \"trend\" | \"trendingUp\" | \"undo\" | \"unknownCircle\" | \"unknownDiamond\" | \"unlink\" | \"unlock\" | \"unscheduledAction\" | \"upload\" | \"user\" | \"viewFull\" | \"viewHorizontal\" | \"viewVertical\" | \"warning\" | \"warningCircle\" | \"warningDiamond\" | \"zoomIn\" | \"zoomOut\"" } }, { "name": "icon-placement", "description": "Defines the position of the icon in relation to the text", "value": { "type": "'left' | 'right'", "default": "'left'" } }, { "name": "rel", "description": "Defines the relationship of the target object to the link object", "value": { "type": "string", "default": "'noreferrer noopener'" } }, { "name": "route", "description": "If defined, used on conjunction with onClick property, second argument", "value": { "type": "string | undefined" } }, { "name": "stretch", "description": "If true, fills the parents horizontal axis", "value": { "type": "boolean | undefined" } }, { "name": "target", "description": "If defined, specifies where to open the linked document", "value": { "type": "'_blank' | '_parent' | '_self' | '_top' | undefined" } }, { "name": "type", "description": "Defines the type of button", "value": { "type": "'button' | 'submit' | 'reset'", "default": "'button'" } } ], "slots": [{ "name": "", "description": "The links' main content" }], "events": [], "js": { "properties": [ { "name": "as", "description": "Defines the semantic element to render", "type": "'button' | 'a'" }, { "name": "color", "description": "Defines the text-color", "type": "'primary' | 'inverse'" }, { "name": "disabled", "description": "If true, disables the link", "type": "boolean | undefined" }, { "name": "download", "description": "If defined, downloads the url", "type": "string | undefined" }, { "name": "href", "description": "If defined, loads url on click", "type": "string | undefined" }, { "name": "icon", "description": "If defined, renders an icon before or after the text", "type": "\"arrowDown\" | \"arrowDownUp\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"article\" | \"artificialIntelligence\" | \"asset\" | \"attachment\" | \"bandCursor\" | \"bands\" | \"batteryEmpty\" | \"batteryFull\" | \"batteryLow\" | \"bearingFault\" | \"book\" | \"bulb\" | \"burger\" | \"cPM\" | \"calendar\" | \"calendarBooked\" | \"calendarEmpty\" | \"calendarNotBooked\" | \"calendarRecurring\" | \"caretDown\" | \"caretUp\" | \"caretUpDown\" | \"chat\" | \"check\" | \"checkCircle\" | \"checkSmall\" | \"chevronDown\" | \"chevronLeft\" | \"chevronRight\" | \"chevronUp\" | \"chevronUpDown\" | \"close\" | \"closeAllFaults\" | \"closeFault\" | \"closeSmall\" | \"columnGraph\" | \"comment\" | \"connection1\" | \"connection2\" | \"connection3\" | \"connection4\" | \"danger\" | \"defectFrequencies\" | \"defectFrequenciesAlternative\" | \"doubleChevronLeft\" | \"doubleChevronRight\" | \"download\" | \"draft\" | \"draftFilled\" | \"draftOutlined\" | \"dragNDrop\" | \"drop\" | \"duplicate\" | \"edit\" | \"emailFilled\" | \"emailOutlined\" | \"exclamation\" | \"eye\" | \"eyeHidden\" | \"eyeVisible\" | \"filter\" | \"forbidden\" | \"fullScreen\" | \"fullScreenExit\" | \"functionalLocation\" | \"harmonicCursor\" | \"heatmap\" | \"hierarchy\" | \"history\" | \"historyAlt\" | \"hourglassFramedFilled\" | \"hourglassFramedOutlined\" | \"hourglassOutlined\" | \"hz\" | \"iMX\" | \"image\" | \"infoCircleFilled\" | \"infoCircleOutlined\" | \"integration\" | \"kebab\" | \"link\" | \"listGroup\" | \"listItem\" | \"locationPin\" | \"lock\" | \"logOut\" | \"meatballs\" | \"microphone\" | \"minus\" | \"minusSmall\" | \"noData\" | \"o\" | \"openInNew\" | \"overlayBaseline\" | \"pDF\" | \"paper\" | \"pause\" | \"pieChart\" | \"pin\" | \"play\" | \"plus\" | \"powerOff\" | \"printer\" | \"proCollect\" | \"recAction\" | \"received\" | \"refresh\" | \"reorder\" | \"replace\" | \"reply\" | \"rewalkableRoute\" | \"routes\" | \"search\" | \"send\" | \"sensorA\" | \"sensorB\" | \"settings\" | \"sidebandCursor\" | \"singleCursor\" | \"spectrum\" | \"starFilled\" | \"starOutlined\" | \"statusCircle\" | \"stop\" | \"structuralVibration\" | \"sync\" | \"timewave\" | \"trash\" | \"trend\" | \"trendingUp\" | \"undo\" | \"unknownCircle\" | \"unknownDiamond\" | \"unlink\" | \"unlock\" | \"unscheduledAction\" | \"upload\" | \"user\" | \"viewFull\" | \"viewHorizontal\" | \"viewVertical\" | \"warning\" | \"warningCircle\" | \"warningDiamond\" | \"zoomIn\" | \"zoomOut\"" }, { "name": "iconPlacement", "description": "Defines the position of the icon in relation to the text", "type": "'left' | 'right'" }, { "name": "rel", "description": "Defines the relationship of the target object to the link object", "type": "string" }, { "name": "route", "description": "If defined, used on conjunction with onClick property, second argument", "type": "string | undefined" }, { "name": "stretch", "description": "If true, fills the parents horizontal axis", "type": "boolean | undefined" }, { "name": "target", "description": "If defined, specifies where to open the linked document", "type": "'_blank' | '_parent' | '_self' | '_top' | undefined" }, { "name": "type", "description": "Defines the type of button", "type": "'button' | 'submit' | 'reset'" }, { "name": "onClick", "description": "If provided, custom function triggered by click where the second return parameter enables custom routing.", "type": "function" } ], "events": [] } }, { "name": "skf-loader", "description": "The `` component is a progress indicator that uses circular indicators for short, indeterminate activities\n---\n", "doc-url": "", "attributes": [ { "name": "aria-label", "description": "Defines the aria-label", "value": { "type": "string", "default": "'Loading...'" } }, { "name": "invert", "description": "If true, inverts the color (to be used on colored backgrounds)", "value": { "type": "boolean | undefined" } }, { "name": "size", "description": "Defines the size of the loader", "value": { "type": "'md' | 'sm' | undefined", "default": "'md'" } } ], "events": [], "js": { "properties": [ { "name": "ariaLabel", "description": "Defines the aria-label", "type": "string" }, { "name": "invert", "description": "If true, inverts the color (to be used on colored backgrounds)", "type": "boolean | undefined" }, { "name": "size", "description": "Defines the size of the loader", "type": "'md' | 'sm' | undefined" }, { "name": "role", "type": "string" }, { "name": "ariaLive", "type": "string" } ], "events": [] } }, { "name": "skf-logo", "description": "The `` component is used to display the SKF logo.\n---\n\n\n### **CSS Properties:**\n - **--skf-logo-height** - The height of the logo _(default: undefined)_", "doc-url": "", "attributes": [ { "name": "title", "description": "Defines the title of the logo", "value": { "type": "string", "default": "'SKF logotype'" } }, { "name": "color", "description": "If defined, sets color of the logo", "value": { "type": "\"primary\" | \"secondary\" | \"inverse\"", "default": "'primary'" } } ], "events": [], "js": { "properties": [ { "name": "title", "description": "Defines the title of the logo", "type": "string" }, { "name": "color", "description": "If defined, sets color of the logo", "type": "\"primary\" | \"secondary\" | \"inverse\"" } ], "events": [] } }, { "name": "skf-radio", "description": "The `` component is used to create a radio input\n---\n\n\n### **Events:**\n - **change** - {object} - When the value of the input changes\n\n### **Slots:**\n - _default_ - The radios label. Alternatively, you can use the `label` attribute.", "doc-url": "", "attributes": [ { "name": "disabled", "description": "If true, sets disabled state", "value": { "type": "boolean" } }, { "name": "required", "description": "If true, value is required or must be checked for the form to be submittable", "value": { "type": "boolean" } }, { "name": "debug", "description": "If true, outputs helping hints in console", "value": { "type": "boolean | undefined" } }, { "name": "checked", "description": "If true, outputs helping hints in console", "value": { "type": "boolean | undefined" } }, { "name": "custom-invalid", "description": "If true, forces component to invalid state until removed", "value": { "type": "boolean | undefined" } }, { "name": "hide-label", "description": "If true, hides the label visually", "value": { "type": "boolean | undefined" } }, { "name": "label", "description": "If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute.", "value": { "type": "string | undefined" } }, { "name": "name", "description": "If defined, adds name to the input-element", "value": { "type": "string | undefined" } }, { "name": "required-label", "description": "If defined, renders an alternative A11y text for the asterisk", "value": { "type": "string | undefined" } }, { "name": "size", "description": "Size of the Radio", "value": { "type": "'sm' | 'md'", "default": "'md'" } }, { "name": "severity", "description": "If defined, displays provided severity state", "value": { "type": "\"success\" | \"info\" | \"warning\" | \"alert\"" } }, { "name": "show-valid", "description": "If true, displays valid state after interaction", "value": { "type": "boolean | undefined" } }, { "name": "value", "description": "The current value of the input field", "value": { "type": "string", "default": "''" } } ], "slots": [ { "name": "", "description": "The radios label. Alternatively, you can use the `label` attribute." } ], "events": [ { "name": "change", "description": "{object} - When the value of the input changes" } ], "js": { "properties": [ { "name": "debug", "description": "If true, outputs helping hints in console", "type": "boolean | undefined" }, { "name": "checked", "description": "If true, outputs helping hints in console", "type": "boolean | undefined" }, { "name": "customInvalid", "description": "If true, forces component to invalid state until removed", "type": "boolean | undefined" }, { "name": "hideLabel", "description": "If true, hides the label visually", "type": "boolean | undefined" }, { "name": "label", "description": "If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute.", "type": "string | undefined" }, { "name": "name", "description": "If defined, adds name to the input-element", "type": "string | undefined" }, { "name": "requiredLabel", "description": "If defined, renders an alternative A11y text for the asterisk", "type": "string | undefined" }, { "name": "size", "description": "Size of the Radio", "type": "'sm' | 'md'" }, { "name": "severity", "description": "If defined, displays provided severity state", "type": "\"success\" | \"info\" | \"warning\" | \"alert\"" }, { "name": "showValid", "description": "If true, displays valid state after interaction", "type": "boolean | undefined" }, { "name": "value", "description": "The current value of the input field", "type": "string" } ], "events": [ { "name": "change", "description": "{object} - When the value of the input changes" } ] } }, { "name": "skf-select", "description": "The `` is a component that displays a list of actions or options. A click in the options list toggle the selected state of the option. Use it together with the ´skf-select-option` tag.\n---\n\n\n### **Events:**\n - **change** - Fired when the selected option(s) changes\n- **invalid** - Fired when the select is invalid\n- **reset** - Fired when the form is reset\n- **skf-select:dropdown** - {detail: {expanded: boolean}} Fired when the select dropdown is toggled\n- **skf-select-option:select** - {detail: {value: string | null, option: SkfSelectOption}} Fired when the select dropdown is toggled\n\n### **Slots:**\n - _default_ - The select's placeholder content", "doc-url": "", "attributes": [ { "name": "disabled", "description": "If true, the select is disabled\t`default: false`", "value": { "type": "boolean" } }, { "name": "button-label", "description": "Sets the first visible text on the component", "value": { "type": "string", "default": "'Select an option'" } }, { "name": "custom-invalid", "description": "If defined, forces component to invalid state until removed", "value": { "type": "string | undefined" } }, { "name": "hide-label", "description": "If true, hides the label visually", "value": { "type": "boolean | undefined" } }, { "name": "hide-tags", "description": "If true and mulltiple is true, no tags are displayed under the select", "value": { "type": "boolean | undefined" } }, { "name": "hint", "description": "If defined, sets the hint text under the select component in the form", "value": { "type": "string | undefined" } }, { "name": "label", "description": "If defined, displays provided label", "value": { "type": "string | undefined" } }, { "name": "max", "description": "If defined, limits the number of selectable options", "value": { "type": "number | undefined" } }, { "name": "min", "description": "If defined, sets the minimum number of required options", "value": { "type": "number | undefined" } }, { "name": "multiple", "description": "If true, allows for multiple options to be selected", "value": { "type": "boolean | undefined" } }, { "name": "name", "description": "If defined, set name of the component", "value": { "type": "string | undefined" } }, { "name": "required-label", "description": "If defined, renders an alternative A11y text for the asterisk", "value": { "type": "string | undefined" } }, { "name": "severity", "description": "If defined, displays provided severity state", "value": { "type": "FormFieldBaseProps['severity'] | undefined" } }, { "name": "show-valid", "description": "If true, displays valid state after interaction", "value": { "type": "boolean | undefined" } }, { "name": "size", "description": "Size of the Select", "value": { "type": "'sm' | 'md'", "default": "'md'" } } ], "slots": [ { "name": "", "description": "The select's placeholder content" } ], "events": [ { "name": "change", "description": "Fired when the selected option(s) changes" }, { "name": "invalid", "description": "Fired when the select is invalid" }, { "name": "reset", "description": "Fired when the form is reset" }, { "name": "skf-select:dropdown", "description": "{detail: {expanded: boolean}} Fired when the select dropdown is toggled" }, { "name": "skf-select-option:select", "description": "{detail: {value: string | null, option: SkfSelectOption}} Fired when the select dropdown is toggled" } ], "js": { "properties": [ { "name": "buttonLabel", "description": "Sets the first visible text on the component", "type": "string" }, { "name": "customInvalid", "description": "If defined, forces component to invalid state until removed", "type": "string | undefined" }, { "name": "hideLabel", "description": "If true, hides the label visually", "type": "boolean | undefined" }, { "name": "hideTags", "description": "If true and mulltiple is true, no tags are displayed under the select", "type": "boolean | undefined" }, { "name": "hint", "description": "If defined, sets the hint text under the select component in the form", "type": "string | undefined" }, { "name": "getSelectedValues", "description": "A readonly property that returns the selected value(s) in a array" }, { "name": "getSelectedOptionsText", "description": "A readonly property that returns the selected slot(s) text content in a array" }, { "name": "label", "description": "If defined, displays provided label", "type": "string | undefined" }, { "name": "max", "description": "If defined, limits the number of selectable options", "type": "number | undefined" }, { "name": "min", "description": "If defined, sets the minimum number of required options", "type": "number | undefined" }, { "name": "multiple", "description": "If true, allows for multiple options to be selected", "type": "boolean | undefined" }, { "name": "name", "description": "If defined, set name of the component", "type": "string | undefined" }, { "name": "requiredLabel", "description": "If defined, renders an alternative A11y text for the asterisk", "type": "string | undefined" }, { "name": "severity", "description": "If defined, displays provided severity state", "type": "FormFieldBaseProps['severity'] | undefined" }, { "name": "showValid", "description": "If true, displays valid state after interaction", "type": "boolean | undefined" }, { "name": "size", "description": "Size of the Select", "type": "'sm' | 'md'" }, { "name": "value", "description": "Read only, returns the selected value. (if multiple: in a comma separated string)" }, { "name": "_selectedOptions", "type": "array" } ], "events": [ { "name": "change", "description": "Fired when the selected option(s) changes" }, { "name": "invalid", "description": "Fired when the select is invalid" }, { "name": "reset", "description": "Fired when the form is reset" }, { "name": "skf-select:dropdown", "description": "{detail: {expanded: boolean}} Fired when the select dropdown is toggled" }, { "name": "skf-select-option:select", "description": "{detail: {value: string | null, option: SkfSelectOption}} Fired when the select dropdown is toggled" } ] } }, { "name": "skf-select-option", "description": "The `` is a component is used nested in a skf-select or skf-select-option-group.\n---\n\n\n### **Events:**\n - **skf-select-option:select** - {detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected.\n\n### **Slots:**\n - _default_ - The option's text content\n- **icon** - The option's slot for icon or custom meta information (svg).", "doc-url": "", "attributes": [ { "name": "disabled", "description": "If true, prevents interaction with the option", "value": { "type": "boolean | undefined" } }, { "name": "icon", "description": "If defined, set an icon", "value": { "type": "SkfIcon['name'] | undefined" } }, { "name": "icon-color", "description": "If defined, sets provided color on the icon", "value": { "type": "IconColor | undefined" } }, { "name": "selected", "description": "If true, sets the option as selected", "value": { "type": "boolean | undefined" } }, { "name": "short-label", "description": "If defined, sets a short label", "value": { "type": "string | undefined" } }, { "name": "value", "description": "Returns or sets the tags value. If value is omitted, defaults to the tags text.", "value": { "type": "string" } } ], "slots": [ { "name": "", "description": "The option's text content" }, { "name": "icon", "description": "The option's slot for icon or custom meta information (svg)." } ], "events": [ { "name": "skf-select-option:select", "description": "{detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected." } ], "js": { "properties": [ { "name": "disabled", "description": "If true, prevents interaction with the option", "type": "boolean | undefined" }, { "name": "icon", "description": "If defined, set an icon", "type": "SkfIcon['name'] | undefined" }, { "name": "iconColor", "description": "If defined, sets provided color on the icon", "type": "IconColor | undefined" }, { "name": "selected", "description": "If true, sets the option as selected", "type": "boolean | undefined" }, { "name": "shortLabel", "description": "If defined, sets a short label", "type": "string | undefined" }, { "name": "text", "description": "The option's label text (equivalent to the tags textContent)" }, { "name": "value", "description": "Returns or sets the tags value. If value is omitted, defaults to the tags text." }, { "name": "role", "type": "string" }, { "name": "_parent" }, { "name": "_shortcutUpdate", "type": "boolean" } ], "events": [ { "name": "skf-select-option:select", "description": "{detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected." } ] } }, { "name": "skf-select-option-group", "description": "The `` is a component that groups select-options\n---\n\n\n### **Slots:**\n - _default_ - The component's placeholder content", "doc-url": "", "attributes": [ { "name": "label", "value": { "type": "string", "default": "'Default label'" } } ], "slots": [ { "name": "", "description": "The component's placeholder content" } ], "events": [], "js": { "properties": [{ "name": "label", "type": "string" }], "events": [] } }, { "name": "skf-switch", "description": "The `` is a component that displays a list of actions or options\n---\n\n\n### **Slots:**\n - _default_ - The Switchs label. Alternatively, you can use the `label` attribute.", "doc-url": "", "attributes": [ { "name": "disabled", "description": "If true, sets disabled state", "value": { "type": "boolean" } }, { "name": "required", "description": "If true, value is required or must be checked for the form to be submittable", "value": { "type": "boolean" } }, { "name": "debug", "description": "If true, outputs helping hints in console", "value": { "type": "boolean | undefined" } }, { "name": "checked", "description": "If true, outputs helping hints in console", "value": { "type": "boolean | undefined" } }, { "name": "hide-label", "description": "If true, hides the label visually", "value": { "type": "boolean | undefined" } }, { "name": "label", "description": "If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute.", "value": { "type": "string | undefined" } }, { "name": "name", "description": "If defined, adds name to the input-element", "value": { "type": "string | undefined" } }, { "name": "required-label", "description": "If defined, renders an alternative A11y text for the asterisk", "value": { "type": "string | undefined" } }, { "name": "size", "description": "Size of the Switch", "value": { "type": "'sm' | 'md'", "default": "'md'" } }, { "name": "value", "description": "The current value of the input field", "value": { "type": "string", "default": "''" } } ], "slots": [ { "name": "", "description": "The Switchs label. Alternatively, you can use the `label` attribute." } ], "events": [], "js": { "properties": [ { "name": "debug", "description": "If true, outputs helping hints in console", "type": "boolean | undefined" }, { "name": "checked", "description": "If true, outputs helping hints in console", "type": "boolean | undefined" }, { "name": "hideLabel", "description": "If true, hides the label visually", "type": "boolean | undefined" }, { "name": "label", "description": "If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute.", "type": "string | undefined" }, { "name": "name", "description": "If defined, adds name to the input-element", "type": "string | undefined" }, { "name": "requiredLabel", "description": "If defined, renders an alternative A11y text for the asterisk", "type": "string | undefined" }, { "name": "size", "description": "Size of the Switch", "type": "'sm' | 'md'" }, { "name": "value", "description": "The current value of the input field", "type": "string" } ], "events": [] } }, { "name": "skf-tag", "description": "The `` is a component that displays a list of actions or options\n---\n\n\n### **Slots:**\n - _default_ - The component's placeholder content", "doc-url": "", "attributes": [ { "name": "size", "description": "Specifies Tag size", "value": { "type": "'sm' | 'md' | 'lg'", "default": "'md'" } }, { "name": "icon", "description": "If defined, displays leading/provided icon", "value": { "type": "\"arrowDown\" | \"arrowDownUp\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"article\" | \"artificialIntelligence\" | \"asset\" | \"attachment\" | \"bandCursor\" | \"bands\" | \"batteryEmpty\" | \"batteryFull\" | \"batteryLow\" | \"bearingFault\" | \"book\" | \"bulb\" | \"burger\" | \"cPM\" | \"calendar\" | \"calendarBooked\" | \"calendarEmpty\" | \"calendarNotBooked\" | \"calendarRecurring\" | \"caretDown\" | \"caretUp\" | \"caretUpDown\" | \"chat\" | \"check\" | \"checkCircle\" | \"checkSmall\" | \"chevronDown\" | \"chevronLeft\" | \"chevronRight\" | \"chevronUp\" | \"chevronUpDown\" | \"close\" | \"closeAllFaults\" | \"closeFault\" | \"closeSmall\" | \"columnGraph\" | \"comment\" | \"connection1\" | \"connection2\" | \"connection3\" | \"connection4\" | \"danger\" | \"defectFrequencies\" | \"defectFrequenciesAlternative\" | \"doubleChevronLeft\" | \"doubleChevronRight\" | \"download\" | \"draft\" | \"draftFilled\" | \"draftOutlined\" | \"dragNDrop\" | \"drop\" | \"duplicate\" | \"edit\" | \"emailFilled\" | \"emailOutlined\" | \"exclamation\" | \"eye\" | \"eyeHidden\" | \"eyeVisible\" | \"filter\" | \"forbidden\" | \"fullScreen\" | \"fullScreenExit\" | \"functionalLocation\" | \"harmonicCursor\" | \"heatmap\" | \"hierarchy\" | \"history\" | \"historyAlt\" | \"hourglassFramedFilled\" | \"hourglassFramedOutlined\" | \"hourglassOutlined\" | \"hz\" | \"iMX\" | \"image\" | \"infoCircleFilled\" | \"infoCircleOutlined\" | \"integration\" | \"kebab\" | \"link\" | \"listGroup\" | \"listItem\" | \"locationPin\" | \"lock\" | \"logOut\" | \"meatballs\" | \"microphone\" | \"minus\" | \"minusSmall\" | \"noData\" | \"o\" | \"openInNew\" | \"overlayBaseline\" | \"pDF\" | \"paper\" | \"pause\" | \"pieChart\" | \"pin\" | \"play\" | \"plus\" | \"powerOff\" | \"printer\" | \"proCollect\" | \"recAction\" | \"received\" | \"refresh\" | \"reorder\" | \"replace\" | \"reply\" | \"rewalkableRoute\" | \"routes\" | \"search\" | \"send\" | \"sensorA\" | \"sensorB\" | \"settings\" | \"sidebandCursor\" | \"singleCursor\" | \"spectrum\" | \"starFilled\" | \"starOutlined\" | \"statusCircle\" | \"stop\" | \"structuralVibration\" | \"sync\" | \"timewave\" | \"trash\" | \"trend\" | \"trendingUp\" | \"undo\" | \"unknownCircle\" | \"unknownDiamond\" | \"unlink\" | \"unlock\" | \"unscheduledAction\" | \"upload\" | \"user\" | \"viewFull\" | \"viewHorizontal\" | \"viewVertical\" | \"warning\" | \"warningCircle\" | \"warningDiamond\" | \"zoomIn\" | \"zoomOut\"" } }, { "name": "color", "description": "If defined, gives the supplied appearance", "value": { "type": "\"warning\" | \"success\" | \"info\" | \"error\" | \"alert\"" } }, { "name": "removable", "description": "If true, adds trailing button to remove tag", "value": { "type": "boolean | undefined" } } ], "slots": [ { "name": "", "description": "The component's placeholder content" } ], "events": [], "js": { "properties": [ { "name": "size", "description": "Specifies Tag size", "type": "'sm' | 'md' | 'lg'" }, { "name": "icon", "description": "If defined, displays leading/provided icon", "type": "\"arrowDown\" | \"arrowDownUp\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"article\" | \"artificialIntelligence\" | \"asset\" | \"attachment\" | \"bandCursor\" | \"bands\" | \"batteryEmpty\" | \"batteryFull\" | \"batteryLow\" | \"bearingFault\" | \"book\" | \"bulb\" | \"burger\" | \"cPM\" | \"calendar\" | \"calendarBooked\" | \"calendarEmpty\" | \"calendarNotBooked\" | \"calendarRecurring\" | \"caretDown\" | \"caretUp\" | \"caretUpDown\" | \"chat\" | \"check\" | \"checkCircle\" | \"checkSmall\" | \"chevronDown\" | \"chevronLeft\" | \"chevronRight\" | \"chevronUp\" | \"chevronUpDown\" | \"close\" | \"closeAllFaults\" | \"closeFault\" | \"closeSmall\" | \"columnGraph\" | \"comment\" | \"connection1\" | \"connection2\" | \"connection3\" | \"connection4\" | \"danger\" | \"defectFrequencies\" | \"defectFrequenciesAlternative\" | \"doubleChevronLeft\" | \"doubleChevronRight\" | \"download\" | \"draft\" | \"draftFilled\" | \"draftOutlined\" | \"dragNDrop\" | \"drop\" | \"duplicate\" | \"edit\" | \"emailFilled\" | \"emailOutlined\" | \"exclamation\" | \"eye\" | \"eyeHidden\" | \"eyeVisible\" | \"filter\" | \"forbidden\" | \"fullScreen\" | \"fullScreenExit\" | \"functionalLocation\" | \"harmonicCursor\" | \"heatmap\" | \"hierarchy\" | \"history\" | \"historyAlt\" | \"hourglassFramedFilled\" | \"hourglassFramedOutlined\" | \"hourglassOutlined\" | \"hz\" | \"iMX\" | \"image\" | \"infoCircleFilled\" | \"infoCircleOutlined\" | \"integration\" | \"kebab\" | \"link\" | \"listGroup\" | \"listItem\" | \"locationPin\" | \"lock\" | \"logOut\" | \"meatballs\" | \"microphone\" | \"minus\" | \"minusSmall\" | \"noData\" | \"o\" | \"openInNew\" | \"overlayBaseline\" | \"pDF\" | \"paper\" | \"pause\" | \"pieChart\" | \"pin\" | \"play\" | \"plus\" | \"powerOff\" | \"printer\" | \"proCollect\" | \"recAction\" | \"received\" | \"refresh\" | \"reorder\" | \"replace\" | \"reply\" | \"rewalkableRoute\" | \"routes\" | \"search\" | \"send\" | \"sensorA\" | \"sensorB\" | \"settings\" | \"sidebandCursor\" | \"singleCursor\" | \"spectrum\" | \"starFilled\" | \"starOutlined\" | \"statusCircle\" | \"stop\" | \"structuralVibration\" | \"sync\" | \"timewave\" | \"trash\" | \"trend\" | \"trendingUp\" | \"undo\" | \"unknownCircle\" | \"unknownDiamond\" | \"unlink\" | \"unlock\" | \"unscheduledAction\" | \"upload\" | \"user\" | \"viewFull\" | \"viewHorizontal\" | \"viewVertical\" | \"warning\" | \"warningCircle\" | \"warningDiamond\" | \"zoomIn\" | \"zoomOut\"" }, { "name": "color", "description": "If defined, gives the supplied appearance", "type": "\"warning\" | \"success\" | \"info\" | \"error\" | \"alert\"" }, { "name": "onClick", "description": "If defined, accepts a function that runs on click" }, { "name": "onRemove", "description": "If defined, accepts a function that runs on click. Self removal can be overridden by using `event.stopPropagation()`." }, { "name": "removable", "description": "If true, adds trailing button to remove tag", "type": "boolean | undefined" } ], "events": [] } }, { "name": "skf-textarea", "description": "The skf-textarea is used to create a textarea. Use it inside a form element or wherever you like.\n---\n\n\n### **Events:**\n - **change** - Fires when the value of the input changes\n- **invalid** - Fires when the input is invalid\n\n### **Slots:**\n - _default_ - The textareas label. Alternatively, you can use the `label` attribute.", "doc-url": "", "attributes": [ { "name": "disabled", "description": "If true, sets disabled state", "value": { "type": "boolean" } }, { "name": "required", "description": "If true, value is required or must be checked for the form to be submittable", "value": { "type": "boolean" } }, { "name": "cols", "description": "If defined, sets the cols of the textarea", "value": { "type": "number | undefined" } }, { "name": "custom-invalid", "description": "If defined, forces component to invalid state until removed. Its value is used as hint text.", "value": { "type": "string" } }, { "name": "debug", "description": "If true, outputs helping hints in console", "value": { "type": "boolean | undefined" } }, { "name": "hide-label", "description": "If true, hides the label visually", "value": { "type": "boolean | undefined" } }, { "name": "hint", "description": "If defined, displays informational text below the field", "value": { "type": "string | undefined" } }, { "name": "label", "description": "If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute.", "value": { "type": "string | undefined" } }, { "name": "name", "description": "If defined, adds name to the input-element", "value": { "type": "string | undefined" } }, { "name": "maxlength", "description": "If defined, sets the maximum character length to accept for this input", "value": { "type": "number | undefined" } }, { "name": "minlength", "description": "If defined, sets the minimum character length to accept for this input", "value": { "type": "number | undefined" } }, { "name": "placeholder", "description": "If defined, displays placeholder text", "value": { "type": "string | undefined" } }, { "name": "readonly", "description": "If true, makes the element not mutable, meaning the user can not edit the control", "value": { "type": "boolean | undefined" } }, { "name": "required-label", "description": "If defined, renders an alternative A11y text for the asterisk", "value": { "type": "string | undefined" } }, { "name": "rows", "description": "If defined, sets the rows of the textarea", "value": { "type": "number | undefined" } }, { "name": "severity", "description": "If defined, displays provided severity state", "value": { "type": "\"success\" | \"info\" | \"warning\" | \"alert\"" } }, { "name": "show-valid", "description": "If true, displays valid state after interaction", "value": { "type": "boolean | undefined" } }, { "name": "size", "description": "Size of the Textarea", "value": { "type": "'sm' | 'md' | undefined", "default": "'md'" } }, { "name": "validate-on", "description": "Sets validation start", "value": { "type": "'input' | 'change' | 'submit'", "default": "'change'" } }, { "name": "value", "description": "The current value of the text area", "value": { "type": "string", "default": "''" } } ], "slots": [ { "name": "", "description": "The textareas label. Alternatively, you can use the `label` attribute." } ], "events": [ { "name": "change", "description": "Fires when the value of the input changes" }, { "name": "invalid", "description": "Fires when the input is invalid" } ], "js": { "properties": [ { "name": "cols", "description": "If defined, sets the cols of the textarea", "type": "number | undefined" }, { "name": "customInvalid", "description": "If defined, forces component to invalid state until removed. Its value is used as hint text." }, { "name": "debug", "description": "If true, outputs helping hints in console", "type": "boolean | undefined" }, { "name": "hideLabel", "description": "If true, hides the label visually", "type": "boolean | undefined" }, { "name": "hint", "description": "If defined, displays informational text below the field", "type": "string | undefined" }, { "name": "label", "description": "If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute.", "type": "string | undefined" }, { "name": "name", "description": "If defined, adds name to the input-element", "type": "string | undefined" }, { "name": "maxLength", "description": "If defined, sets the maximum character length to accept for this input", "type": "number | undefined" }, { "name": "minLength", "description": "If defined, sets the minimum character length to accept for this input", "type": "number | undefined" }, { "name": "placeholder", "description": "If defined, displays placeholder text", "type": "string | undefined" }, { "name": "readonly", "description": "If true, makes the element not mutable, meaning the user can not edit the control", "type": "boolean | undefined" }, { "name": "requiredLabel", "description": "If defined, renders an alternative A11y text for the asterisk", "type": "string | undefined" }, { "name": "rows", "description": "If defined, sets the rows of the textarea", "type": "number | undefined" }, { "name": "severity", "description": "If defined, displays provided severity state", "type": "\"success\" | \"info\" | \"warning\" | \"alert\"" }, { "name": "showValid", "description": "If true, displays valid state after interaction", "type": "boolean | undefined" }, { "name": "size", "description": "Size of the Textarea", "type": "'sm' | 'md' | undefined" }, { "name": "validateOn", "description": "Sets validation start", "type": "'input' | 'change' | 'submit'" }, { "name": "value", "description": "The current value of the text area", "type": "string" } ], "events": [ { "name": "change", "description": "Fires when the value of the input changes" }, { "name": "invalid", "description": "Fires when the input is invalid" } ] } } ] } } }