{ "schemaVersion": "1.0.0", "readme": "", "modules": [ { "kind": "javascript-module", "path": "src/components/accordion/accordion.component.ts", "declarations": [ { "kind": "class", "description": "The `` component consists of multiple ``, working together.\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/6590bf-accordion) for design principles.", "name": "SkfAccordion", "slots": [ { "description": "Expects one or more element(s)", "name": "" } ], "members": [ { "kind": "field", "name": "animated", "type": { "text": "boolean | undefined" }, "description": "If true, will animate the expand/collapse state", "attribute": "animated", "reflects": true }, { "kind": "field", "name": "headingAs", "type": { "text": "\"h1\" | \"h2\" | \"h3\" | \"h4\"" }, "default": "'h2'", "description": "Defines which heading element will be rendered", "attribute": "heading-as" }, { "kind": "field", "name": "gap", "type": { "text": "boolean | undefined" }, "description": "If true, adds a gap between each item", "attribute": "gap", "reflects": true }, { "kind": "field", "name": "multiple", "type": { "text": "boolean | undefined" }, "description": "If true, allowes multiple accordion items to open", "attribute": "multiple" }, { "kind": "field", "name": "small", "type": { "text": "boolean | undefined" }, "description": "If true, renders the small version", "attribute": "small", "reflects": true }, { "kind": "field", "name": "truncate", "type": { "text": "boolean | undefined" }, "description": "If true, will truncate all headings in collapsed state", "attribute": "truncate", "reflects": true }, { "kind": "method", "name": "_onChildToggle", "privacy": "private", "parameters": [ { "name": "event", "type": { "text": "Event" } } ] } ], "attributes": [ { "name": "animated", "type": { "text": "boolean | undefined" }, "description": "If true, will animate the expand/collapse state", "fieldName": "animated" }, { "name": "heading-as", "type": { "text": "\"h1\" | \"h2\" | \"h3\" | \"h4\"" }, "default": "'h2'", "description": "Defines which heading element will be rendered", "fieldName": "headingAs" }, { "name": "gap", "type": { "text": "boolean | undefined" }, "description": "If true, adds a gap between each item", "fieldName": "gap" }, { "name": "multiple", "type": { "text": "boolean | undefined" }, "description": "If true, allowes multiple accordion items to open", "fieldName": "multiple" }, { "name": "small", "type": { "text": "boolean | undefined" }, "description": "If true, renders the small version", "fieldName": "small" }, { "name": "truncate", "type": { "text": "boolean | undefined" }, "description": "If true, will truncate all headings in collapsed state", "fieldName": "truncate" } ], "superclass": { "name": "SkfElement", "package": "@internal/components/skf-element.js" }, "tagName": "skf-accordion", "customElement": true } ], "exports": [ { "kind": "js", "name": "SkfAccordion", "declaration": { "name": "SkfAccordion", "module": "src/components/accordion/accordion.component.ts" } } ] }, { "kind": "javascript-module", "path": "src/components/button/button.component.ts", "declarations": [ { "kind": "class", "description": "Component to be used in forms or for interactivity", "name": "SkfButton", "slots": [ { "description": "The Primary content", "name": "" } ], "members": [ { "kind": "field", "name": "destructive", "type": { "text": "boolean" }, "default": "false", "description": "If true, gives destructive appearance. **Notice!** Only applicable if `variant` is `primary`.", "attribute": "destructive" }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "If true, removes border", "attribute": "disabled" }, { "kind": "field", "name": "icon", "type": { "text": "\"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\"" }, "description": "If provided, renders an icon before or after the text", "attribute": "icon" }, { "kind": "field", "name": "iconPosition", "type": { "text": "'left' | 'right' | undefined" }, "default": "'left'", "description": "If provided, determines the positioning of the icon in relation to the text", "attribute": "icon-position" }, { "kind": "field", "name": "loading", "type": { "text": "boolean" }, "default": "false", "description": "If true, hides text & icon and shows loading indicator. **Notice!** Only applicable if `variant` is `primary`.", "attribute": "loading" }, { "kind": "field", "name": "size", "type": { "text": "'sm' | 'md' | 'lg'" }, "default": "'md'", "description": "If provided, displays an alternative size", "attribute": "size", "reflects": true }, { "kind": "field", "name": "type", "type": { "text": "'button' | 'submit' | 'reset'" }, "default": "'button'", "description": "If provided, changes the button type", "attribute": "type" }, { "kind": "field", "name": "variant", "type": { "text": "'primary' | 'secondary'" }, "default": "'primary'", "description": "If provided, alters the appearance", "attribute": "variant", "reflects": true }, { "kind": "method", "name": "_showLoader", "privacy": "private" }, { "kind": "method", "name": "_hideLoader", "privacy": "private" } ], "attributes": [ { "name": "destructive", "type": { "text": "boolean" }, "default": "false", "description": "If true, gives destructive appearance. **Notice!** Only applicable if `variant` is `primary`.", "fieldName": "destructive" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "If true, removes border", "fieldName": "disabled" }, { "name": "icon", "type": { "text": "\"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\"" }, "description": "If provided, renders an icon before or after the text", "fieldName": "icon" }, { "name": "icon-position", "type": { "text": "'left' | 'right' | undefined" }, "default": "'left'", "description": "If provided, determines the positioning of the icon in relation to the text", "fieldName": "iconPosition" }, { "name": "loading", "type": { "text": "boolean" }, "default": "false", "description": "If true, hides text & icon and shows loading indicator. **Notice!** Only applicable if `variant` is `primary`.", "fieldName": "loading" }, { "name": "size", "type": { "text": "'sm' | 'md' | 'lg'" }, "default": "'md'", "description": "If provided, displays an alternative size", "fieldName": "size" }, { "name": "type", "type": { "text": "'button' | 'submit' | 'reset'" }, "default": "'button'", "description": "If provided, changes the button type", "fieldName": "type" }, { "name": "variant", "type": { "text": "'primary' | 'secondary'" }, "default": "'primary'", "description": "If provided, alters the appearance", "fieldName": "variant" } ], "superclass": { "name": "SkfElement", "package": "@internal/components/skf-element.js" }, "tagName": "skf-button", "customElement": true } ], "exports": [ { "kind": "js", "name": "SkfButton", "declaration": { "name": "SkfButton", "module": "src/components/button/button.component.ts" } } ] }, { "kind": "javascript-module", "path": "src/components/card/card.component.ts", "declarations": [ { "kind": "class", "description": "The `` can be used to group related subjects in a container", "name": "SkfCard", "slots": [ { "description": "The card's main content", "name": "" } ], "members": [ { "kind": "field", "name": "noBorder", "type": { "text": "boolean | undefined" }, "description": "If true, removes border", "attribute": "no-border" }, { "kind": "field", "name": "noPadding", "type": { "text": "boolean | undefined" }, "description": "If true, removes padding", "attribute": "no-padding" }, { "kind": "field", "name": "stretch", "type": { "text": "boolean | undefined" }, "description": "If true, the Card fills the parent element height", "attribute": "stretch", "reflects": true } ], "attributes": [ { "name": "no-border", "type": { "text": "boolean | undefined" }, "description": "If true, removes border", "fieldName": "noBorder" }, { "name": "no-padding", "type": { "text": "boolean | undefined" }, "description": "If true, removes padding", "fieldName": "noPadding" }, { "name": "stretch", "type": { "text": "boolean | undefined" }, "description": "If true, the Card fills the parent element height", "fieldName": "stretch" } ], "superclass": { "name": "SkfElement", "package": "@internal/components/skf-element.js" }, "tagName": "skf-card", "customElement": true } ], "exports": [ { "kind": "js", "name": "SkfCard", "declaration": { "name": "SkfCard", "module": "src/components/card/card.component.ts" } } ] }, { "kind": "javascript-module", "path": "src/components/alert/alert.component.ts", "declarations": [ { "kind": "class", "description": "The `` is a type of notification that appears in-line", "name": "SkfAlert", "slots": [ { "description": "Alert message. **Notice!** See design principles for approved content", "name": "" }, { "description": "Slot for the link", "name": "link" } ], "members": [ { "kind": "field", "name": "closeable", "type": { "text": "boolean | undefined" }, "description": "If true, alert is being used as a toast (alertdialog) with an close button", "attribute": "closeable" }, { "kind": "field", "name": "buttonLabel", "type": { "text": "string" }, "default": "'Close'", "description": "Close button aria-label", "attribute": "button-label" }, { "kind": "field", "name": "icon", "type": { "text": "SkfIcon['name'] | undefined" }, "description": "If defined, displays leading icon", "attribute": "icon" }, { "kind": "field", "name": "severity", "type": { "text": "\"error\" | \"info\" | \"warning\" | \"success\" | \"alert\"" }, "description": "If defined, gives the supplied appearance", "attribute": "severity" } ], "events": [ { "description": "Fires when the close button is clicked", "name": "skf-alert-close" } ], "attributes": [ { "name": "closeable", "type": { "text": "boolean | undefined" }, "description": "If true, alert is being used as a toast (alertdialog) with an close button", "fieldName": "closeable" }, { "name": "button-label", "type": { "text": "string" }, "default": "'Close'", "description": "Close button aria-label", "fieldName": "buttonLabel" }, { "name": "icon", "type": { "text": "SkfIcon['name'] | undefined" }, "description": "If defined, displays leading icon", "fieldName": "icon" }, { "name": "severity", "type": { "text": "\"error\" | \"info\" | \"warning\" | \"success\" | \"alert\"" }, "description": "If defined, gives the supplied appearance", "fieldName": "severity" } ], "superclass": { "name": "SkfElement", "package": "@internal/components/skf-element.js" }, "tagName": "skf-alert", "customElement": true } ], "exports": [ { "kind": "js", "name": "SkfAlert", "declaration": { "name": "SkfAlert", "module": "src/components/alert/alert.component.ts" } } ] }, { "kind": "javascript-module", "path": "src/components/checkbox/checkbox.component.ts", "declarations": [ { "kind": "class", "description": "The `` component is used to create a checkbox input", "name": "SkfCheckbox", "slots": [ { "description": "The Radios label. Alternatively, you can use the `label` attribute.", "name": "" } ], "members": [ { "kind": "field", "name": "debug", "type": { "text": "boolean | undefined" }, "description": "If defined, outputs helping hints in console", "attribute": "debug" }, { "kind": "field", "name": "checked", "type": { "text": "boolean | undefined" }, "description": "If true, outputs helping hints in console", "attribute": "checked", "reflects": true }, { "kind": "field", "name": "customInvalid", "type": { "text": "boolean | undefined" }, "description": "If true, forces component to invalid state until removed", "attribute": "custom-invalid" }, { "kind": "field", "name": "hideLabel", "type": { "text": "boolean | undefined" }, "description": "If true, hides the label visually", "attribute": "hide-label", "reflects": true }, { "kind": "field", "name": "indeterminate", "type": { "text": "boolean | undefined" }, "description": "If true and the checkbox is unchecked, the checkbox will appear indeterminate", "attribute": "indeterminate", "reflects": true }, { "kind": "field", "name": "label", "type": { "text": "string | undefined" }, "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.", "attribute": "label" }, { "kind": "field", "name": "name", "type": { "text": "string | undefined" }, "description": "If defined, adds name to the input-element", "attribute": "name" }, { "kind": "field", "name": "requiredLabel", "type": { "text": "string | undefined" }, "description": "If defined, renders an alternative A11y text for the asterisk", "attribute": "required-label" }, { "kind": "field", "name": "severity", "type": { "text": "\"alert\" | \"success\" | \"info\" | \"warning\"" }, "description": "If defined, styles checkbox using provided severity", "attribute": "severity", "reflects": true }, { "kind": "field", "name": "showValid", "type": { "text": "boolean | undefined" }, "description": "If true, displays valid state after interaction", "attribute": "show-valid" }, { "kind": "field", "name": "size", "type": { "text": "'sm' | 'md'" }, "default": "'md'", "description": "Size of the checkbox", "attribute": "size", "reflects": true }, { "kind": "field", "name": "value", "type": { "text": "string" }, "default": "''", "description": "The current value of the input field", "attribute": "value" }, { "kind": "method", "name": "debugOutput" } ], "events": [ { "description": "{object} - When the value of the input changes", "name": "change" } ], "attributes": [ { "type": { "text": "boolean" }, "description": "If true, sets disabled state", "name": "disabled" }, { "type": { "text": "boolean" }, "description": "If true, value is required or must be checked for the form to be submittable", "name": "required" }, { "name": "debug", "type": { "text": "boolean | undefined" }, "description": "If defined, outputs helping hints in console", "fieldName": "debug" }, { "name": "checked", "type": { "text": "boolean | undefined" }, "description": "If true, outputs helping hints in console", "fieldName": "checked" }, { "name": "custom-invalid", "type": { "text": "boolean | undefined" }, "description": "If true, forces component to invalid state until removed", "fieldName": "customInvalid" }, { "name": "hide-label", "type": { "text": "boolean | undefined" }, "description": "If true, hides the label visually", "fieldName": "hideLabel" }, { "name": "indeterminate", "type": { "text": "boolean | undefined" }, "description": "If true and the checkbox is unchecked, the checkbox will appear indeterminate", "fieldName": "indeterminate" }, { "name": "label", "type": { "text": "string | undefined" }, "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.", "fieldName": "label" }, { "name": "name", "type": { "text": "string | undefined" }, "description": "If defined, adds name to the input-element", "fieldName": "name" }, { "name": "required-label", "type": { "text": "string | undefined" }, "description": "If defined, renders an alternative A11y text for the asterisk", "fieldName": "requiredLabel" }, { "name": "severity", "type": { "text": "\"alert\" | \"success\" | \"info\" | \"warning\"" }, "description": "If defined, styles checkbox using provided severity", "fieldName": "severity" }, { "name": "show-valid", "type": { "text": "boolean | undefined" }, "description": "If true, displays valid state after interaction", "fieldName": "showValid" }, { "name": "size", "type": { "text": "'sm' | 'md'" }, "default": "'md'", "description": "Size of the checkbox", "fieldName": "size" }, { "name": "value", "type": { "text": "string" }, "default": "''", "description": "The current value of the input field", "fieldName": "value" } ], "superclass": { "name": "FormBase", "package": "@internal/components/formBase.js" }, "tagName": "skf-checkbox", "customElement": true } ], "exports": [ { "kind": "js", "name": "SkfCheckbox", "declaration": { "name": "SkfCheckbox", "module": "src/components/checkbox/checkbox.component.ts" } } ] }, { "kind": "javascript-module", "path": "src/components/divider/divider.component.ts", "declarations": [ { "kind": "class", "description": "The `` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information", "name": "SkfDivider", "cssProperties": [ { "description": "The amount of space the divider occupies. Pass valid CSS **margin-block** values when horizontal and **margin-inline** when vertical", "name": "--skf-divider-spacing" }, { "description": "The amount of space the divider should be indented. Pass valid CSS **margin-inline** values when horizontal and **margin-block** when vertical", "name": "--skf-divider-inset" } ], "members": [ { "kind": "field", "name": "#internals", "privacy": "private", "type": { "text": "ElementInternals" } }, { "kind": "field", "name": "color", "type": { "text": "\"emphasised\" | \"primary\" | \"secondary\" | \"tertiary\" | \"inverse\"" }, "default": "'primary'", "description": "Defines the Divider color", "attribute": "color", "reflects": true }, { "kind": "field", "name": "decorative", "type": { "text": "boolean | undefined" }, "description": "If true, renders a div for presentational purpose instead of the semantic hr-element", "attribute": "decorative" }, { "kind": "field", "name": "vertical", "type": { "text": "boolean | undefined" }, "description": "If true, renders the divider vertically", "attribute": "vertical", "reflects": true } ], "attributes": [ { "name": "color", "type": { "text": "\"emphasised\" | \"primary\" | \"secondary\" | \"tertiary\" | \"inverse\"" }, "default": "'primary'", "description": "Defines the Divider color", "fieldName": "color" }, { "name": "decorative", "type": { "text": "boolean | undefined" }, "description": "If true, renders a div for presentational purpose instead of the semantic hr-element", "fieldName": "decorative" }, { "name": "vertical", "type": { "text": "boolean | undefined" }, "description": "If true, renders the divider vertically", "fieldName": "vertical" } ], "superclass": { "name": "SkfElement", "package": "@internal/components/skf-element.js" }, "tagName": "skf-divider", "customElement": true } ], "exports": [ { "kind": "js", "name": "SkfDivider", "declaration": { "name": "SkfDivider", "module": "src/components/divider/divider.component.ts" } } ] }, { "kind": "javascript-module", "path": "src/components/collapse/collapse.component.ts", "declarations": [ { "kind": "class", "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.", "name": "SkfCollapse", "slots": [ { "description": "Main content", "name": "" } ], "members": [ { "kind": "field", "name": "animated", "type": { "text": "boolean | undefined" }, "description": "If true, will animate the expand/collapse state", "attribute": "animated", "reflects": true }, { "kind": "field", "name": "expanded", "type": { "text": "boolean | undefined" }, "description": "If true, will set the collapse to be expanded by default", "attribute": "expanded", "reflects": true }, { "kind": "field", "name": "heading", "type": { "text": "string | undefined" }, "description": "Heading for the collapse", "attribute": "heading" }, { "kind": "field", "name": "headingAs", "type": { "text": "\"h1\" | \"h2\" | \"h3\" | \"h4\"" }, "default": "'h2'", "description": "Defines which heading element will be rendered", "attribute": "heading-as" }, { "kind": "field", "name": "small", "type": { "text": "boolean | undefined" }, "description": "If true, renders the small version", "attribute": "small", "reflects": true }, { "kind": "field", "name": "truncate", "type": { "text": "boolean | undefined" }, "description": "If true, will truncate the heading in collapsed state", "attribute": "truncate", "reflects": true }, { "kind": "method", "name": "setClose", "description": "Class method as alternative to manipulate attribute" }, { "kind": "method", "name": "setOpen", "description": "Class method as alternative to manipulate attribute" } ], "events": [ { "type": { "text": "CustomEvent" }, "description": "Event emitted when toggled", "name": "skf-collapse-toggle" } ], "attributes": [ { "name": "animated", "type": { "text": "boolean | undefined" }, "description": "If true, will animate the expand/collapse state", "fieldName": "animated" }, { "name": "expanded", "type": { "text": "boolean | undefined" }, "description": "If true, will set the collapse to be expanded by default", "fieldName": "expanded" }, { "name": "heading", "type": { "text": "string | undefined" }, "description": "Heading for the collapse", "fieldName": "heading" }, { "name": "heading-as", "type": { "text": "\"h1\" | \"h2\" | \"h3\" | \"h4\"" }, "default": "'h2'", "description": "Defines which heading element will be rendered", "fieldName": "headingAs" }, { "name": "small", "type": { "text": "boolean | undefined" }, "description": "If true, renders the small version", "fieldName": "small" }, { "name": "truncate", "type": { "text": "boolean | undefined" }, "description": "If true, will truncate the heading in collapsed state", "fieldName": "truncate" } ], "superclass": { "name": "SkfElement", "package": "@internal/components/skf-element.js" }, "tagName": "skf-collapse", "customElement": true } ], "exports": [ { "kind": "js", "name": "SkfCollapse", "declaration": { "name": "SkfCollapse", "module": "src/components/collapse/collapse.component.ts" } } ] }, { "kind": "javascript-module", "path": "src/components/heading/heading.component.ts", "declarations": [ { "kind": "class", "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.", "name": "SkfHeading", "slots": [ { "description": "The headings content", "name": "" } ], "members": [ { "kind": "field", "name": "as", "type": { "text": "\"h1\" | \"h2\" | \"h3\" | \"h4\"" }, "default": "'h1'", "description": "Controls which heading element will be rendered. Should not be used to affect appearance", "attribute": "as", "reflects": true }, { "kind": "field", "name": "styledAs", "type": { "text": "\"h1\" | \"h2\" | \"h3\" | \"h4\"" }, "description": "If provided, changes the appearance of the heading", "attribute": "styled-as" } ], "attributes": [ { "name": "as", "type": { "text": "\"h1\" | \"h2\" | \"h3\" | \"h4\"" }, "default": "'h1'", "description": "Controls which heading element will be rendered. Should not be used to affect appearance", "fieldName": "as" }, { "name": "styled-as", "type": { "text": "\"h1\" | \"h2\" | \"h3\" | \"h4\"" }, "description": "If provided, changes the appearance of the heading", "fieldName": "styledAs" } ], "superclass": { "name": "SkfElement", "package": "@internal/components/skf-element.js" }, "tagName": "skf-heading", "customElement": true } ], "exports": [ { "kind": "js", "name": "SkfHeading", "declaration": { "name": "SkfHeading", "module": "src/components/heading/heading.component.ts" } } ] }, { "kind": "javascript-module", "path": "src/components/icon/icon.component.ts", "declarations": [ { "kind": "class", "description": "The `` component is used to clarify interface elements. When used, should always be paired with (possibly invisible) text", "name": "SkfIcon", "members": [ { "kind": "field", "name": "_rootId", "type": { "text": "string" }, "privacy": "private", "default": "'root'" }, { "kind": "field", "name": "color", "type": { "text": "\"primary\" | \"inverse\" | \"emphasised\" | \"secondary\" | \"success\" | \"info\" | \"warning\" | \"error\" | \"alert\"" }, "default": "'primary'", "description": "Sets the color of the icon", "attribute": "color", "reflects": true }, { "kind": "field", "name": "label", "type": { "text": "string | undefined" }, "description": "If defined, adds an alternate description to use for assistive devices", "attribute": "label" }, { "kind": "field", "name": "name", "type": { "text": "\"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\"" }, "description": "Name of the icon to display", "attribute": "name" }, { "kind": "field", "name": "size", "type": { "text": "\"xs\" | \"sm\" | \"md\" | \"lg\"" }, "default": "'md'", "description": "Size of the icon", "attribute": "size", "reflects": true }, { "kind": "field", "name": "renderDecorativeIcon", "privacy": "private" }, { "kind": "field", "name": "renderInformativeIcon", "privacy": "private" } ], "attributes": [ { "name": "color", "type": { "text": "\"primary\" | \"inverse\" | \"emphasised\" | \"secondary\" | \"success\" | \"info\" | \"warning\" | \"error\" | \"alert\"" }, "default": "'primary'", "description": "Sets the color of the icon", "fieldName": "color" }, { "name": "label", "type": { "text": "string | undefined" }, "description": "If defined, adds an alternate description to use for assistive devices", "fieldName": "label" }, { "name": "name", "type": { "text": "\"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\"" }, "description": "Name of the icon to display", "fieldName": "name" }, { "name": "size", "type": { "text": "\"xs\" | \"sm\" | \"md\" | \"lg\"" }, "default": "'md'", "description": "Size of the icon", "fieldName": "size" } ], "superclass": { "name": "SkfElement", "package": "@internal/components/skf-element.js" }, "tagName": "skf-icon", "customElement": true } ], "exports": [ { "kind": "js", "name": "SkfIcon", "declaration": { "name": "SkfIcon", "module": "src/components/icon/icon.component.ts" } } ] }, { "kind": "javascript-module", "path": "src/components/input/input.component.ts", "declarations": [ { "kind": "class", "description": "The skf-text-field is used to create a text input field. It can be used inside a form element or standalone.", "name": "SkfInput", "slots": [ { "description": "The Inputs label. Alternatively, you can use the `label` attribute.", "name": "" } ], "members": [ { "kind": "field", "name": "customError", "type": { "text": "string | undefined" }, "privacy": "private" }, { "kind": "field", "name": "buttonAriaLabelClear", "type": { "text": "string" }, "default": "'Clear input'", "description": "Custom aria-label for the clear button. **Notice!** Only applicable to type=search.", "attribute": "button-aria-label-clear" }, { "kind": "field", "name": "buttonAriaLabelHide", "type": { "text": "string" }, "default": "'Hide password'", "description": "Custom aria-label for the visibility button. **Notice!** Only applicable to type=password.", "attribute": "button-aria-label-hide" }, { "kind": "field", "name": "buttonAriaLabelShow", "type": { "text": "string" }, "default": "'Show password'", "description": "Custom aria-label for the visibility button **Notice!** Only applicable to type=password.", "attribute": "button-aria-label-show" }, { "kind": "field", "name": "customInvalid", "description": "If defined, forces component to invalid state until removed. Its value is used as hint text.", "attribute": "custom-invalid", "reflects": true }, { "kind": "field", "name": "debug", "type": { "text": "boolean | undefined" }, "description": "If true, outputs helping hints in console", "attribute": "debug" }, { "kind": "field", "name": "hideLabel", "type": { "text": "boolean | undefined" }, "description": "If true, hides the label visually", "attribute": "hide-label" }, { "kind": "field", "name": "hint", "type": { "text": "string | undefined" }, "description": "If defined, displays informational text below the field", "attribute": "hint" }, { "kind": "field", "name": "inputmode", "type": { "text": "'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'" }, "default": "'text'", "description": "Tells what keyboard to use if applicable", "attribute": "inputmode" }, { "kind": "field", "name": "label", "type": { "text": "string | undefined" }, "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.", "attribute": "label" }, { "kind": "field", "name": "leading", "type": { "text": "string | undefined" }, "description": "If defined, displays a prefix/adornment before the input-element", "attribute": "leading" }, { "kind": "field", "name": "max", "type": { "text": "number | string | undefined" }, "description": "If defined, sets the maximum value to accept for this input", "attribute": "max" }, { "kind": "field", "name": "maxLength", "type": { "text": "number | undefined" }, "description": "If defined, sets the maximum character length to accept for this input", "attribute": "maxlength" }, { "kind": "field", "name": "min", "type": { "text": "number | string | undefined" }, "description": "If defined, sets the minimum value to accept for this input", "attribute": "min" }, { "kind": "field", "name": "minLength", "type": { "text": "number | undefined" }, "description": "If defined, sets the minimum character length to accept for this input", "attribute": "minlength" }, { "kind": "field", "name": "name", "type": { "text": "string | undefined" }, "description": "If defined, adds name to the input-element", "attribute": "name" }, { "kind": "field", "name": "pattern", "type": { "text": "string | undefined" }, "description": "If defined, adds name to the input-element", "attribute": "pattern" }, { "kind": "field", "name": "placeholder", "type": { "text": "string | undefined" }, "description": "If defined, displays placeholder text", "attribute": "placeholder" }, { "kind": "field", "name": "readonly", "type": { "text": "boolean | undefined" }, "description": "If true, makes the element not mutable, meaning the user can not edit the control", "attribute": "readonly" }, { "kind": "field", "name": "requiredLabel", "type": { "text": "string | undefined" }, "description": "If defined, renders an alternative A11y text for the asterisk", "attribute": "required-label" }, { "kind": "field", "name": "severity", "type": { "text": "\"alert\" | \"success\" | \"info\" | \"warning\"" }, "description": "If defined, displays provided severity state", "attribute": "severity", "reflects": true }, { "kind": "field", "name": "showValid", "type": { "text": "boolean | undefined" }, "description": "If true, displays valid state after interaction", "attribute": "show-valid" }, { "kind": "field", "name": "size", "type": { "text": "'sm' | 'md'" }, "default": "'md'", "description": "Size of the input", "attribute": "size", "reflects": true }, { "kind": "field", "name": "trailing", "type": { "text": "string | undefined" }, "description": "If defined, displays a suffix/adornment after the input-element", "attribute": "trailing" }, { "kind": "field", "name": "type", "type": { "text": "'button' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week'" }, "default": "'text'", "description": "Type of input control", "attribute": "type" }, { "kind": "field", "name": "validateOn", "type": { "text": "'input' | 'change' | 'submit'" }, "default": "'change'", "description": "Sets validation start", "attribute": "validate-on" }, { "kind": "field", "name": "value", "type": { "text": "string" }, "default": "''", "description": "The current value of the input field", "attribute": "value" } ], "events": [ { "description": "Fires when the value of the input changes", "name": "change" }, { "description": "Fires when the input is invalid", "name": "invalid" } ], "attributes": [ { "type": { "text": "boolean" }, "description": "If true, sets disabled state", "name": "disabled" }, { "type": { "text": "boolean" }, "description": "If true, value is required or must be checked for the form to be submittable", "name": "required" }, { "name": "button-aria-label-clear", "type": { "text": "string" }, "default": "'Clear input'", "description": "Custom aria-label for the clear button. **Notice!** Only applicable to type=search.", "fieldName": "buttonAriaLabelClear" }, { "name": "button-aria-label-hide", "type": { "text": "string" }, "default": "'Hide password'", "description": "Custom aria-label for the visibility button. **Notice!** Only applicable to type=password.", "fieldName": "buttonAriaLabelHide" }, { "name": "button-aria-label-show", "type": { "text": "string" }, "default": "'Show password'", "description": "Custom aria-label for the visibility button **Notice!** Only applicable to type=password.", "fieldName": "buttonAriaLabelShow" }, { "name": "custom-invalid", "description": "If defined, forces component to invalid state until removed. Its value is used as hint text.", "fieldName": "customInvalid" }, { "name": "debug", "type": { "text": "boolean | undefined" }, "description": "If true, outputs helping hints in console", "fieldName": "debug" }, { "name": "hide-label", "type": { "text": "boolean | undefined" }, "description": "If true, hides the label visually", "fieldName": "hideLabel" }, { "name": "hint", "type": { "text": "string | undefined" }, "description": "If defined, displays informational text below the field", "fieldName": "hint" }, { "name": "inputmode", "type": { "text": "'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'" }, "default": "'text'", "description": "Tells what keyboard to use if applicable", "fieldName": "inputmode" }, { "name": "label", "type": { "text": "string | undefined" }, "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.", "fieldName": "label" }, { "name": "leading", "type": { "text": "string | undefined" }, "description": "If defined, displays a prefix/adornment before the input-element", "fieldName": "leading" }, { "name": "max", "type": { "text": "number | string | undefined" }, "description": "If defined, sets the maximum value to accept for this input", "fieldName": "max" }, { "name": "maxlength", "type": { "text": "number | undefined" }, "description": "If defined, sets the maximum character length to accept for this input", "fieldName": "maxLength" }, { "name": "min", "type": { "text": "number | string | undefined" }, "description": "If defined, sets the minimum value to accept for this input", "fieldName": "min" }, { "name": "minlength", "type": { "text": "number | undefined" }, "description": "If defined, sets the minimum character length to accept for this input", "fieldName": "minLength" }, { "name": "name", "type": { "text": "string | undefined" }, "description": "If defined, adds name to the input-element", "fieldName": "name" }, { "name": "pattern", "type": { "text": "string | undefined" }, "description": "If defined, adds name to the input-element", "fieldName": "pattern" }, { "name": "placeholder", "type": { "text": "string | undefined" }, "description": "If defined, displays placeholder text", "fieldName": "placeholder" }, { "name": "readonly", "type": { "text": "boolean | undefined" }, "description": "If true, makes the element not mutable, meaning the user can not edit the control", "fieldName": "readonly" }, { "name": "required-label", "type": { "text": "string | undefined" }, "description": "If defined, renders an alternative A11y text for the asterisk", "fieldName": "requiredLabel" }, { "name": "severity", "type": { "text": "\"alert\" | \"success\" | \"info\" | \"warning\"" }, "description": "If defined, displays provided severity state", "fieldName": "severity" }, { "name": "show-valid", "type": { "text": "boolean | undefined" }, "description": "If true, displays valid state after interaction", "fieldName": "showValid" }, { "name": "size", "type": { "text": "'sm' | 'md'" }, "default": "'md'", "description": "Size of the input", "fieldName": "size" }, { "name": "trailing", "type": { "text": "string | undefined" }, "description": "If defined, displays a suffix/adornment after the input-element", "fieldName": "trailing" }, { "name": "type", "type": { "text": "'button' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week'" }, "default": "'text'", "description": "Type of input control", "fieldName": "type" }, { "name": "validate-on", "type": { "text": "'input' | 'change' | 'submit'" }, "default": "'change'", "description": "Sets validation start", "fieldName": "validateOn" }, { "name": "value", "type": { "text": "string" }, "default": "''", "description": "The current value of the input field", "fieldName": "value" } ], "superclass": { "name": "FormBase", "package": "@internal/components/formBase.js" }, "tagName": "skf-input", "customElement": true } ], "exports": [ { "kind": "js", "name": "SkfInput", "declaration": { "name": "SkfInput", "module": "src/components/input/input.component.ts" } } ] }, { "kind": "javascript-module", "path": "src/components/link/link.component.ts", "declarations": [ { "kind": "class", "description": "The `` can be used as either a regular link or a link styled semantic button", "name": "SkfLink", "slots": [ { "description": "The links' main content", "name": "" } ], "members": [ { "kind": "field", "name": "_onClick", "type": { "text": "(event: Event, route?: string) => void | undefined" }, "privacy": "private" }, { "kind": "field", "name": "as", "type": { "text": "'button' | 'a'" }, "default": "'a'", "description": "Defines the semantic element to render", "attribute": "as", "reflects": true }, { "kind": "field", "name": "color", "type": { "text": "'primary' | 'inverse'" }, "default": "'primary'", "description": "Defines the text-color", "attribute": "color", "reflects": true }, { "kind": "field", "name": "disabled", "type": { "text": "boolean | undefined" }, "description": "If true, disables the link", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "download", "type": { "text": "string | undefined" }, "description": "If defined, downloads the url", "attribute": "download" }, { "kind": "field", "name": "href", "type": { "text": "string | undefined" }, "description": "If defined, loads url on click", "attribute": "href", "reflects": true }, { "kind": "field", "name": "icon", "type": { "text": "\"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\"" }, "description": "If defined, renders an icon before or after the text", "attribute": "icon" }, { "kind": "field", "name": "iconPlacement", "type": { "text": "'left' | 'right'" }, "default": "'left'", "description": "Defines the position of the icon in relation to the text", "attribute": "icon-placement", "reflects": true }, { "kind": "field", "name": "rel", "type": { "text": "string" }, "default": "'noreferrer noopener'", "description": "Defines the relationship of the target object to the link object", "attribute": "rel" }, { "kind": "field", "name": "route", "type": { "text": "string | undefined" }, "description": "If defined, used on conjunction with onClick property, second argument", "attribute": "route", "reflects": true }, { "kind": "field", "name": "stretch", "type": { "text": "boolean | undefined" }, "description": "If true, fills the parents horizontal axis", "attribute": "stretch", "reflects": true }, { "kind": "field", "name": "target", "type": { "text": "'_blank' | '_parent' | '_self' | '_top' | undefined" }, "description": "If defined, specifies where to open the linked document", "attribute": "target" }, { "kind": "field", "name": "type", "type": { "text": "'button' | 'submit' | 'reset'" }, "default": "'button'", "description": "Defines the type of button", "attribute": "type" }, { "kind": "field", "name": "onClick", "description": "If provided, custom function triggered by click where the second return parameter enables custom routing.", "type": { "text": "function" } } ], "attributes": [ { "name": "as", "type": { "text": "'button' | 'a'" }, "default": "'a'", "description": "Defines the semantic element to render", "fieldName": "as" }, { "name": "color", "type": { "text": "'primary' | 'inverse'" }, "default": "'primary'", "description": "Defines the text-color", "fieldName": "color" }, { "name": "disabled", "type": { "text": "boolean | undefined" }, "description": "If true, disables the link", "fieldName": "disabled" }, { "name": "download", "type": { "text": "string | undefined" }, "description": "If defined, downloads the url", "fieldName": "download" }, { "name": "href", "type": { "text": "string | undefined" }, "description": "If defined, loads url on click", "fieldName": "href" }, { "name": "icon", "type": { "text": "\"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\"" }, "description": "If defined, renders an icon before or after the text", "fieldName": "icon" }, { "name": "icon-placement", "type": { "text": "'left' | 'right'" }, "default": "'left'", "description": "Defines the position of the icon in relation to the text", "fieldName": "iconPlacement" }, { "name": "rel", "type": { "text": "string" }, "default": "'noreferrer noopener'", "description": "Defines the relationship of the target object to the link object", "fieldName": "rel" }, { "name": "route", "type": { "text": "string | undefined" }, "description": "If defined, used on conjunction with onClick property, second argument", "fieldName": "route" }, { "name": "stretch", "type": { "text": "boolean | undefined" }, "description": "If true, fills the parents horizontal axis", "fieldName": "stretch" }, { "name": "target", "type": { "text": "'_blank' | '_parent' | '_self' | '_top' | undefined" }, "description": "If defined, specifies where to open the linked document", "fieldName": "target" }, { "name": "type", "type": { "text": "'button' | 'submit' | 'reset'" }, "default": "'button'", "description": "Defines the type of button", "fieldName": "type" } ], "superclass": { "name": "SkfElement", "package": "@internal/components/skf-element.js" }, "tagName": "skf-link", "customElement": true } ], "exports": [ { "kind": "js", "name": "SkfLink", "declaration": { "name": "SkfLink", "module": "src/components/link/link.component.ts" } } ] }, { "kind": "javascript-module", "path": "src/components/loader/loader.component.ts", "declarations": [ { "kind": "class", "description": "The `` component is a progress indicator that uses circular indicators for short, indeterminate activities", "name": "SkfLoader", "members": [ { "kind": "field", "name": "#internals", "privacy": "private", "type": { "text": "ElementInternals" } }, { "kind": "field", "name": "ariaLabel", "type": { "text": "string" }, "default": "'Loading...'", "description": "Defines the aria-label", "attribute": "aria-label", "reflects": true }, { "kind": "field", "name": "invert", "type": { "text": "boolean | undefined" }, "description": "If true, inverts the color (to be used on colored backgrounds)", "attribute": "invert" }, { "kind": "field", "name": "size", "type": { "text": "'md' | 'sm' | undefined" }, "default": "'md'", "description": "Defines the size of the loader", "attribute": "size", "reflects": true }, { "kind": "field", "name": "role", "type": { "text": "string" }, "default": "'progressbar'" }, { "kind": "field", "name": "ariaLive", "type": { "text": "string" }, "default": "'polite'" } ], "attributes": [ { "name": "aria-label", "type": { "text": "string" }, "default": "'Loading...'", "description": "Defines the aria-label", "fieldName": "ariaLabel" }, { "name": "invert", "type": { "text": "boolean | undefined" }, "description": "If true, inverts the color (to be used on colored backgrounds)", "fieldName": "invert" }, { "name": "size", "type": { "text": "'md' | 'sm' | undefined" }, "default": "'md'", "description": "Defines the size of the loader", "fieldName": "size" } ], "superclass": { "name": "SkfElement", "package": "@internal/components/skf-element.js" }, "tagName": "skf-loader", "customElement": true } ], "exports": [ { "kind": "js", "name": "SkfLoader", "declaration": { "name": "SkfLoader", "module": "src/components/loader/loader.component.ts" } } ] }, { "kind": "javascript-module", "path": "src/components/logo/logo.component.ts", "declarations": [ { "kind": "class", "description": "The `` component is used to display the SKF logo.", "name": "SkfLogo", "cssProperties": [ { "description": "The height of the logo", "name": "--skf-logo-height" } ], "members": [ { "kind": "field", "name": "title", "type": { "text": "string" }, "default": "'SKF logotype'", "description": "Defines the title of the logo", "attribute": "title" }, { "kind": "field", "name": "color", "type": { "text": "\"primary\" | \"secondary\" | \"inverse\"" }, "default": "'primary'", "description": "If defined, sets color of the logo", "attribute": "color" } ], "attributes": [ { "name": "title", "type": { "text": "string" }, "default": "'SKF logotype'", "description": "Defines the title of the logo", "fieldName": "title" }, { "name": "color", "type": { "text": "\"primary\" | \"secondary\" | \"inverse\"" }, "default": "'primary'", "description": "If defined, sets color of the logo", "fieldName": "color" } ], "superclass": { "name": "SkfElement", "package": "@internal/components/skf-element.js" }, "tagName": "skf-logo", "customElement": true } ], "exports": [ { "kind": "js", "name": "SkfLogo", "declaration": { "name": "SkfLogo", "module": "src/components/logo/logo.component.ts" } } ] }, { "kind": "javascript-module", "path": "src/components/radio/radio.component.ts", "declarations": [ { "kind": "class", "description": "The `` component is used to create a radio input", "name": "SkfRadio", "slots": [ { "description": "The radios label. Alternatively, you can use the `label` attribute.", "name": "" } ], "members": [ { "kind": "field", "name": "_initialChecked", "type": { "text": "boolean | undefined" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "debug", "type": { "text": "boolean | undefined" }, "description": "If true, outputs helping hints in console", "attribute": "debug" }, { "kind": "field", "name": "checked", "type": { "text": "boolean | undefined" }, "description": "If true, outputs helping hints in console", "attribute": "checked", "reflects": true }, { "kind": "field", "name": "customInvalid", "type": { "text": "boolean | undefined" }, "description": "If true, forces component to invalid state until removed", "attribute": "custom-invalid" }, { "kind": "field", "name": "hideLabel", "type": { "text": "boolean | undefined" }, "description": "If true, hides the label visually", "attribute": "hide-label", "reflects": true }, { "kind": "field", "name": "label", "type": { "text": "string | undefined" }, "description": "If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute.", "attribute": "label" }, { "kind": "field", "name": "name", "type": { "text": "string | undefined" }, "description": "If defined, adds name to the input-element", "attribute": "name" }, { "kind": "field", "name": "requiredLabel", "type": { "text": "string | undefined" }, "description": "If defined, renders an alternative A11y text for the asterisk", "attribute": "required-label" }, { "kind": "field", "name": "size", "type": { "text": "'sm' | 'md'" }, "default": "'md'", "description": "Size of the Radio", "attribute": "size", "reflects": true }, { "kind": "field", "name": "severity", "type": { "text": "\"success\" | \"info\" | \"warning\" | \"alert\"" }, "description": "If defined, displays provided severity state", "attribute": "severity" }, { "kind": "field", "name": "showValid", "type": { "text": "boolean | undefined" }, "description": "If true, displays valid state after interaction", "attribute": "show-valid" }, { "kind": "field", "name": "value", "type": { "text": "string" }, "default": "''", "description": "The current value of the input field", "attribute": "value" }, { "kind": "method", "name": "debugOutput" } ], "events": [ { "description": "{object} - When the value of the input changes", "name": "change" } ], "attributes": [ { "type": { "text": "boolean" }, "description": "If true, sets disabled state", "name": "disabled" }, { "type": { "text": "boolean" }, "description": "If true, value is required or must be checked for the form to be submittable", "name": "required" }, { "name": "debug", "type": { "text": "boolean | undefined" }, "description": "If true, outputs helping hints in console", "fieldName": "debug" }, { "name": "checked", "type": { "text": "boolean | undefined" }, "description": "If true, outputs helping hints in console", "fieldName": "checked" }, { "name": "custom-invalid", "type": { "text": "boolean | undefined" }, "description": "If true, forces component to invalid state until removed", "fieldName": "customInvalid" }, { "name": "hide-label", "type": { "text": "boolean | undefined" }, "description": "If true, hides the label visually", "fieldName": "hideLabel" }, { "name": "label", "type": { "text": "string | undefined" }, "description": "If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute.", "fieldName": "label" }, { "name": "name", "type": { "text": "string | undefined" }, "description": "If defined, adds name to the input-element", "fieldName": "name" }, { "name": "required-label", "type": { "text": "string | undefined" }, "description": "If defined, renders an alternative A11y text for the asterisk", "fieldName": "requiredLabel" }, { "name": "size", "type": { "text": "'sm' | 'md'" }, "default": "'md'", "description": "Size of the Radio", "fieldName": "size" }, { "name": "severity", "type": { "text": "\"success\" | \"info\" | \"warning\" | \"alert\"" }, "description": "If defined, displays provided severity state", "fieldName": "severity" }, { "name": "show-valid", "type": { "text": "boolean | undefined" }, "description": "If true, displays valid state after interaction", "fieldName": "showValid" }, { "name": "value", "type": { "text": "string" }, "default": "''", "description": "The current value of the input field", "fieldName": "value" } ], "superclass": { "name": "FormBase", "package": "@internal/components/formBase.js" }, "tagName": "skf-radio", "customElement": true } ], "exports": [ { "kind": "js", "name": "SkfRadio", "declaration": { "name": "SkfRadio", "module": "src/components/radio/radio.component.ts" } } ] }, { "kind": "javascript-module", "path": "src/components/select/select.component.ts", "declarations": [ { "kind": "class", "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.", "name": "SkfSelect", "slots": [ { "description": "The select's placeholder content", "name": "" } ], "members": [ { "kind": "field", "name": "buttonLabel", "type": { "text": "string" }, "default": "'Select an option'", "description": "Sets the first visible text on the component", "attribute": "button-label", "reflects": true }, { "kind": "field", "name": "customInvalid", "type": { "text": "string | undefined" }, "description": "If defined, forces component to invalid state until removed", "attribute": "custom-invalid" }, { "kind": "field", "name": "hideLabel", "type": { "text": "boolean | undefined" }, "description": "If true, hides the label visually", "attribute": "hide-label" }, { "kind": "field", "name": "hideTags", "type": { "text": "boolean | undefined" }, "description": "If true and mulltiple is true, no tags are displayed under the select", "attribute": "hide-tags", "reflects": true }, { "kind": "field", "name": "hint", "type": { "text": "string | undefined" }, "description": "If defined, sets the hint text under the select component in the form", "attribute": "hint" }, { "kind": "field", "name": "getSelectedValues", "description": "A readonly property that returns the selected value(s) in a array", "readonly": true }, { "kind": "field", "name": "getSelectedOptionsText", "description": "A readonly property that returns the selected slot(s) text content in a array", "readonly": true }, { "kind": "field", "name": "label", "type": { "text": "string | undefined" }, "description": "If defined, displays provided label", "attribute": "label", "reflects": true }, { "kind": "field", "name": "max", "type": { "text": "number | undefined" }, "description": "If defined, limits the number of selectable options", "attribute": "max" }, { "kind": "field", "name": "min", "type": { "text": "number | undefined" }, "description": "If defined, sets the minimum number of required options", "attribute": "min" }, { "kind": "field", "name": "multiple", "type": { "text": "boolean | undefined" }, "description": "If true, allows for multiple options to be selected", "attribute": "multiple", "reflects": true }, { "kind": "field", "name": "name", "type": { "text": "string | undefined" }, "description": "If defined, set name of the component", "attribute": "name" }, { "kind": "field", "name": "requiredLabel", "type": { "text": "string | undefined" }, "description": "If defined, renders an alternative A11y text for the asterisk", "attribute": "required-label" }, { "kind": "field", "name": "severity", "type": { "text": "FormFieldBaseProps['severity'] | undefined" }, "description": "If defined, displays provided severity state", "attribute": "severity" }, { "kind": "field", "name": "showValid", "type": { "text": "boolean | undefined" }, "description": "If true, displays valid state after interaction", "attribute": "show-valid" }, { "kind": "field", "name": "size", "type": { "text": "'sm' | 'md'" }, "default": "'md'", "description": "Size of the Select", "attribute": "size", "reflects": true }, { "kind": "field", "name": "value", "description": "Read only, returns the selected value. (if multiple: in a comma separated string)", "readonly": true }, { "kind": "field", "name": "_selectedOptions", "type": { "text": "array" }, "default": "[]" } ], "events": [ { "description": "Fired when the selected option(s) changes", "name": "change" }, { "description": "Fired when the select is invalid", "name": "invalid" }, { "description": "Fired when the form is reset", "name": "reset" }, { "description": "{detail: {expanded: boolean}} Fired when the select dropdown is toggled", "name": "skf-select:dropdown" }, { "description": "{detail: {value: string | null, option: SkfSelectOption}} Fired when the select dropdown is toggled", "name": "skf-select-option:select" } ], "attributes": [ { "type": { "text": "boolean" }, "description": "If true, the select is disabled\t`default: false`", "name": "disabled" }, { "name": "button-label", "type": { "text": "string" }, "default": "'Select an option'", "description": "Sets the first visible text on the component", "fieldName": "buttonLabel" }, { "name": "custom-invalid", "type": { "text": "string | undefined" }, "description": "If defined, forces component to invalid state until removed", "fieldName": "customInvalid" }, { "name": "hide-label", "type": { "text": "boolean | undefined" }, "description": "If true, hides the label visually", "fieldName": "hideLabel" }, { "name": "hide-tags", "type": { "text": "boolean | undefined" }, "description": "If true and mulltiple is true, no tags are displayed under the select", "fieldName": "hideTags" }, { "name": "hint", "type": { "text": "string | undefined" }, "description": "If defined, sets the hint text under the select component in the form", "fieldName": "hint" }, { "name": "label", "type": { "text": "string | undefined" }, "description": "If defined, displays provided label", "fieldName": "label" }, { "name": "max", "type": { "text": "number | undefined" }, "description": "If defined, limits the number of selectable options", "fieldName": "max" }, { "name": "min", "type": { "text": "number | undefined" }, "description": "If defined, sets the minimum number of required options", "fieldName": "min" }, { "name": "multiple", "type": { "text": "boolean | undefined" }, "description": "If true, allows for multiple options to be selected", "fieldName": "multiple" }, { "name": "name", "type": { "text": "string | undefined" }, "description": "If defined, set name of the component", "fieldName": "name" }, { "name": "required-label", "type": { "text": "string | undefined" }, "description": "If defined, renders an alternative A11y text for the asterisk", "fieldName": "requiredLabel" }, { "name": "severity", "type": { "text": "FormFieldBaseProps['severity'] | undefined" }, "description": "If defined, displays provided severity state", "fieldName": "severity" }, { "name": "show-valid", "type": { "text": "boolean | undefined" }, "description": "If true, displays valid state after interaction", "fieldName": "showValid" }, { "name": "size", "type": { "text": "'sm' | 'md'" }, "default": "'md'", "description": "Size of the Select", "fieldName": "size" } ], "superclass": { "name": "FormBase", "package": "@internal/components/formBase.js" }, "tagName": "skf-select", "customElement": true } ], "exports": [ { "kind": "js", "name": "SkfSelect", "declaration": { "name": "SkfSelect", "module": "src/components/select/select.component.ts" } } ] }, { "kind": "javascript-module", "path": "src/components/select-option/select-option.component.ts", "declarations": [ { "kind": "class", "description": "The `` is a component is used nested in a skf-select or skf-select-option-group.", "name": "SkfSelectOption", "slots": [ { "description": "The option's text content", "name": "" }, { "description": "The option's slot for icon or custom meta information (svg).", "name": "icon" } ], "members": [ { "kind": "field", "name": "shadowRootOptions", "type": { "text": "object" }, "static": true, "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true }" }, { "kind": "field", "name": "disabled", "type": { "text": "boolean | undefined" }, "description": "If true, prevents interaction with the option", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "icon", "type": { "text": "SkfIcon['name'] | undefined" }, "description": "If defined, set an icon", "attribute": "icon", "reflects": true }, { "kind": "field", "name": "iconColor", "type": { "text": "IconColor | undefined" }, "description": "If defined, sets provided color on the icon", "attribute": "icon-color", "reflects": true }, { "kind": "field", "name": "selected", "type": { "text": "boolean | undefined" }, "description": "If true, sets the option as selected", "attribute": "selected", "reflects": true }, { "kind": "field", "name": "shortLabel", "type": { "text": "string | undefined" }, "description": "If defined, sets a short label", "attribute": "short-label", "reflects": true }, { "kind": "field", "name": "text", "description": "The option's label text (equivalent to the tags textContent)" }, { "kind": "field", "name": "value", "description": "Returns or sets the tags value. If value is omitted, defaults to the tags text.", "attribute": "value", "reflects": true }, { "kind": "field", "name": "role", "type": { "text": "string" }, "default": "'option'" }, { "kind": "field", "name": "_parent" }, { "kind": "field", "name": "_shortcutUpdate", "type": { "text": "boolean" }, "default": "false" } ], "events": [ { "description": "{detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected.", "name": "skf-select-option:select" } ], "attributes": [ { "name": "disabled", "type": { "text": "boolean | undefined" }, "description": "If true, prevents interaction with the option", "fieldName": "disabled" }, { "name": "icon", "type": { "text": "SkfIcon['name'] | undefined" }, "description": "If defined, set an icon", "fieldName": "icon" }, { "name": "icon-color", "type": { "text": "IconColor | undefined" }, "description": "If defined, sets provided color on the icon", "fieldName": "iconColor" }, { "name": "selected", "type": { "text": "boolean | undefined" }, "description": "If true, sets the option as selected", "fieldName": "selected" }, { "name": "short-label", "type": { "text": "string | undefined" }, "description": "If defined, sets a short label", "fieldName": "shortLabel" }, { "name": "value", "description": "Returns or sets the tags value. If value is omitted, defaults to the tags text.", "fieldName": "value" } ], "superclass": { "name": "SkfElement", "package": "@internal/components/skf-element.js" }, "tagName": "skf-select-option", "customElement": true } ], "exports": [ { "kind": "js", "name": "SkfSelectOption", "declaration": { "name": "SkfSelectOption", "module": "src/components/select-option/select-option.component.ts" } } ] }, { "kind": "javascript-module", "path": "src/components/select-option-group/select-option-group.component.ts", "declarations": [ { "kind": "class", "description": "The `` is a component that groups select-options", "name": "SkfSelectOptionGroup", "slots": [ { "description": "The component's placeholder content", "name": "" } ], "members": [ { "kind": "field", "name": "label", "type": { "text": "string" }, "default": "'Default label'", "attribute": "label", "reflects": true } ], "attributes": [ { "name": "label", "type": { "text": "string" }, "default": "'Default label'", "fieldName": "label" } ], "superclass": { "name": "SkfElement", "package": "@internal/components/skf-element" }, "tagName": "skf-select-option-group", "customElement": true } ], "exports": [ { "kind": "js", "name": "SkfSelectOptionGroup", "declaration": { "name": "SkfSelectOptionGroup", "module": "src/components/select-option-group/select-option-group.component.ts" } } ] }, { "kind": "javascript-module", "path": "src/components/switch/switch.component.ts", "declarations": [ { "kind": "class", "description": "The `` is a component that displays a list of actions or options", "name": "SkfSwitch", "slots": [ { "description": "The Switchs label. Alternatively, you can use the `label` attribute.", "name": "" } ], "members": [ { "kind": "field", "name": "_initialChecked", "type": { "text": "boolean | undefined" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "debug", "type": { "text": "boolean | undefined" }, "description": "If true, outputs helping hints in console", "attribute": "debug" }, { "kind": "field", "name": "checked", "type": { "text": "boolean | undefined" }, "description": "If true, outputs helping hints in console", "attribute": "checked", "reflects": true }, { "kind": "field", "name": "hideLabel", "type": { "text": "boolean | undefined" }, "description": "If true, hides the label visually", "attribute": "hide-label", "reflects": true }, { "kind": "field", "name": "label", "type": { "text": "string | undefined" }, "description": "If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute.", "attribute": "label" }, { "kind": "field", "name": "name", "type": { "text": "string | undefined" }, "description": "If defined, adds name to the input-element", "attribute": "name" }, { "kind": "field", "name": "requiredLabel", "type": { "text": "string | undefined" }, "description": "If defined, renders an alternative A11y text for the asterisk", "attribute": "required-label" }, { "kind": "field", "name": "size", "type": { "text": "'sm' | 'md'" }, "default": "'md'", "description": "Size of the Switch", "attribute": "size", "reflects": true }, { "kind": "field", "name": "value", "type": { "text": "string" }, "default": "''", "description": "The current value of the input field", "attribute": "value" }, { "kind": "method", "name": "debugOutput" } ], "attributes": [ { "type": { "text": "boolean" }, "description": "If true, sets disabled state", "name": "disabled" }, { "type": { "text": "boolean" }, "description": "If true, value is required or must be checked for the form to be submittable", "name": "required" }, { "name": "debug", "type": { "text": "boolean | undefined" }, "description": "If true, outputs helping hints in console", "fieldName": "debug" }, { "name": "checked", "type": { "text": "boolean | undefined" }, "description": "If true, outputs helping hints in console", "fieldName": "checked" }, { "name": "hide-label", "type": { "text": "boolean | undefined" }, "description": "If true, hides the label visually", "fieldName": "hideLabel" }, { "name": "label", "type": { "text": "string | undefined" }, "description": "If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute.", "fieldName": "label" }, { "name": "name", "type": { "text": "string | undefined" }, "description": "If defined, adds name to the input-element", "fieldName": "name" }, { "name": "required-label", "type": { "text": "string | undefined" }, "description": "If defined, renders an alternative A11y text for the asterisk", "fieldName": "requiredLabel" }, { "name": "size", "type": { "text": "'sm' | 'md'" }, "default": "'md'", "description": "Size of the Switch", "fieldName": "size" }, { "name": "value", "type": { "text": "string" }, "default": "''", "description": "The current value of the input field", "fieldName": "value" } ], "superclass": { "name": "FormBase", "package": "@internal/components/formBase.js" }, "tagName": "skf-switch", "customElement": true } ], "exports": [ { "kind": "js", "name": "SkfSwitch", "declaration": { "name": "SkfSwitch", "module": "src/components/switch/switch.component.ts" } } ] }, { "kind": "javascript-module", "path": "src/components/tag/tag.component.ts", "declarations": [ { "kind": "class", "description": "The `` is a component that displays a list of actions or options", "name": "SkfTag", "slots": [ { "description": "The component's placeholder content", "name": "" } ], "members": [ { "kind": "field", "name": "_onClick", "type": { "text": "(event: Event) => void | undefined" }, "privacy": "private" }, { "kind": "field", "name": "_onRemove", "type": { "text": "(event: Event) => void | undefined" }, "privacy": "protected" }, { "kind": "field", "name": "size", "type": { "text": "'sm' | 'md' | 'lg'" }, "default": "'md'", "description": "Specifies Tag size", "attribute": "size", "reflects": true }, { "kind": "field", "name": "icon", "type": { "text": "\"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\"" }, "description": "If defined, displays leading/provided icon", "attribute": "icon" }, { "kind": "field", "name": "color", "type": { "text": "\"warning\" | \"success\" | \"info\" | \"error\" | \"alert\"" }, "description": "If defined, gives the supplied appearance", "attribute": "color", "reflects": true }, { "kind": "field", "name": "onClick", "description": "If defined, accepts a function that runs on click" }, { "kind": "field", "name": "onRemove", "description": "If defined, accepts a function that runs on click. Self removal can be overridden by using `event.stopPropagation()`." }, { "kind": "field", "name": "removable", "type": { "text": "boolean | undefined" }, "description": "If true, adds trailing button to remove tag", "attribute": "removable", "reflects": true }, { "kind": "field", "name": "_handleKeyDown", "privacy": "protected" }, { "kind": "field", "name": "_handleRemove", "privacy": "protected", "description": "run externally provided callback (if any) first. Let click propagate to handleClick." }, { "kind": "field", "name": "_handleClick", "privacy": "protected" } ], "attributes": [ { "name": "size", "type": { "text": "'sm' | 'md' | 'lg'" }, "default": "'md'", "description": "Specifies Tag size", "fieldName": "size" }, { "name": "icon", "type": { "text": "\"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\"" }, "description": "If defined, displays leading/provided icon", "fieldName": "icon" }, { "name": "color", "type": { "text": "\"warning\" | \"success\" | \"info\" | \"error\" | \"alert\"" }, "description": "If defined, gives the supplied appearance", "fieldName": "color" }, { "name": "removable", "type": { "text": "boolean | undefined" }, "description": "If true, adds trailing button to remove tag", "fieldName": "removable" } ], "superclass": { "name": "SkfElement", "package": "@internal/components/skf-element" }, "tagName": "skf-tag", "customElement": true } ], "exports": [ { "kind": "js", "name": "SkfTag", "declaration": { "name": "SkfTag", "module": "src/components/tag/tag.component.ts" } } ] }, { "kind": "javascript-module", "path": "src/components/textarea/textarea.component.ts", "declarations": [ { "kind": "class", "description": "The skf-textarea is used to create a textarea. Use it inside a form element or wherever you like.", "name": "SkfTextArea", "slots": [ { "description": "The textareas label. Alternatively, you can use the `label` attribute.", "name": "" } ], "members": [ { "kind": "field", "name": "customError", "type": { "text": "string | undefined" }, "privacy": "private" }, { "kind": "field", "name": "cols", "type": { "text": "number | undefined" }, "description": "If defined, sets the cols of the textarea", "attribute": "cols" }, { "kind": "field", "name": "customInvalid", "description": "If defined, forces component to invalid state until removed. Its value is used as hint text.", "attribute": "custom-invalid", "reflects": true }, { "kind": "field", "name": "debug", "type": { "text": "boolean | undefined" }, "description": "If true, outputs helping hints in console", "attribute": "debug" }, { "kind": "field", "name": "hideLabel", "type": { "text": "boolean | undefined" }, "description": "If true, hides the label visually", "attribute": "hide-label" }, { "kind": "field", "name": "hint", "type": { "text": "string | undefined" }, "description": "If defined, displays informational text below the field", "attribute": "hint" }, { "kind": "field", "name": "label", "type": { "text": "string | undefined" }, "description": "If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute.", "attribute": "label" }, { "kind": "field", "name": "name", "type": { "text": "string | undefined" }, "description": "If defined, adds name to the input-element", "attribute": "name" }, { "kind": "field", "name": "maxLength", "type": { "text": "number | undefined" }, "description": "If defined, sets the maximum character length to accept for this input", "attribute": "maxlength" }, { "kind": "field", "name": "minLength", "type": { "text": "number | undefined" }, "description": "If defined, sets the minimum character length to accept for this input", "attribute": "minlength" }, { "kind": "field", "name": "placeholder", "type": { "text": "string | undefined" }, "description": "If defined, displays placeholder text", "attribute": "placeholder" }, { "kind": "field", "name": "readonly", "type": { "text": "boolean | undefined" }, "description": "If true, makes the element not mutable, meaning the user can not edit the control", "attribute": "readonly" }, { "kind": "field", "name": "requiredLabel", "type": { "text": "string | undefined" }, "description": "If defined, renders an alternative A11y text for the asterisk", "attribute": "required-label" }, { "kind": "field", "name": "rows", "type": { "text": "number | undefined" }, "description": "If defined, sets the rows of the textarea", "attribute": "rows" }, { "kind": "field", "name": "severity", "type": { "text": "\"success\" | \"info\" | \"warning\" | \"alert\"" }, "description": "If defined, displays provided severity state", "attribute": "severity" }, { "kind": "field", "name": "showValid", "type": { "text": "boolean | undefined" }, "description": "If true, displays valid state after interaction", "attribute": "show-valid" }, { "kind": "field", "name": "size", "type": { "text": "'sm' | 'md' | undefined" }, "default": "'md'", "description": "Size of the Textarea", "attribute": "size", "reflects": true }, { "kind": "field", "name": "validateOn", "type": { "text": "'input' | 'change' | 'submit'" }, "default": "'change'", "description": "Sets validation start", "attribute": "validate-on" }, { "kind": "field", "name": "value", "type": { "text": "string" }, "default": "''", "description": "The current value of the text area", "attribute": "value" } ], "events": [ { "description": "Fires when the value of the input changes", "name": "change" }, { "description": "Fires when the input is invalid", "name": "invalid" } ], "attributes": [ { "type": { "text": "boolean" }, "description": "If true, sets disabled state", "name": "disabled" }, { "type": { "text": "boolean" }, "description": "If true, value is required or must be checked for the form to be submittable", "name": "required" }, { "name": "cols", "type": { "text": "number | undefined" }, "description": "If defined, sets the cols of the textarea", "fieldName": "cols" }, { "name": "custom-invalid", "description": "If defined, forces component to invalid state until removed. Its value is used as hint text.", "fieldName": "customInvalid" }, { "name": "debug", "type": { "text": "boolean | undefined" }, "description": "If true, outputs helping hints in console", "fieldName": "debug" }, { "name": "hide-label", "type": { "text": "boolean | undefined" }, "description": "If true, hides the label visually", "fieldName": "hideLabel" }, { "name": "hint", "type": { "text": "string | undefined" }, "description": "If defined, displays informational text below the field", "fieldName": "hint" }, { "name": "label", "type": { "text": "string | undefined" }, "description": "If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute.", "fieldName": "label" }, { "name": "name", "type": { "text": "string | undefined" }, "description": "If defined, adds name to the input-element", "fieldName": "name" }, { "name": "maxlength", "type": { "text": "number | undefined" }, "description": "If defined, sets the maximum character length to accept for this input", "fieldName": "maxLength" }, { "name": "minlength", "type": { "text": "number | undefined" }, "description": "If defined, sets the minimum character length to accept for this input", "fieldName": "minLength" }, { "name": "placeholder", "type": { "text": "string | undefined" }, "description": "If defined, displays placeholder text", "fieldName": "placeholder" }, { "name": "readonly", "type": { "text": "boolean | undefined" }, "description": "If true, makes the element not mutable, meaning the user can not edit the control", "fieldName": "readonly" }, { "name": "required-label", "type": { "text": "string | undefined" }, "description": "If defined, renders an alternative A11y text for the asterisk", "fieldName": "requiredLabel" }, { "name": "rows", "type": { "text": "number | undefined" }, "description": "If defined, sets the rows of the textarea", "fieldName": "rows" }, { "name": "severity", "type": { "text": "\"success\" | \"info\" | \"warning\" | \"alert\"" }, "description": "If defined, displays provided severity state", "fieldName": "severity" }, { "name": "show-valid", "type": { "text": "boolean | undefined" }, "description": "If true, displays valid state after interaction", "fieldName": "showValid" }, { "name": "size", "type": { "text": "'sm' | 'md' | undefined" }, "default": "'md'", "description": "Size of the Textarea", "fieldName": "size" }, { "name": "validate-on", "type": { "text": "'input' | 'change' | 'submit'" }, "default": "'change'", "description": "Sets validation start", "fieldName": "validateOn" }, { "name": "value", "type": { "text": "string" }, "default": "''", "description": "The current value of the text area", "fieldName": "value" } ], "superclass": { "name": "FormBase", "package": "@internal/components/formBase.js" }, "tagName": "skf-textarea", "customElement": true } ], "exports": [ { "kind": "js", "name": "SkfTextArea", "declaration": { "name": "SkfTextArea", "module": "src/components/textarea/textarea.component.ts" } } ] } ] }