{ "timestamp": "2026-02-04T14:07:36", "compiler": { "name": "@stencil/core", "version": "4.41.0", "typescriptVersion": "5.8.3" }, "components": [ { "filePath": "src/components/som-accordion/som-accordion.tsx", "encapsulation": "shadow", "tag": "som-accordion", "docs": "", "docsTags": [ { "name": "part", "text": "accordion - This part is the full accordion container." }, { "name": "part", "text": "button - This part is the button that triggers toggling the accordion content." }, { "name": "part", "text": "button-open - This part is the button that triggers toggling the accordion content in the open state." }, { "name": "part", "text": "icon - This part is the icon next to the label." }, { "name": "part", "text": "arrow - This part is the arrow icon that indicates if the accordion is open or closed." }, { "name": "part", "text": "label - This part is the accordion label." } ], "usage": {}, "props": [ { "name": "collapsed", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": true, "attr": "collapsed", "reflectToAttr": true, "docs": "This boolean controls if the accordion is collapsed or expanded.", "docsTags": [ { "name": "default", "text": "true" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "icon", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "icon", "reflectToAttr": false, "docs": "The property is the name of an icon that will display before the headline.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": false, "docs": "This property will be the accordion button label.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "hide", "returns": { "type": "Promise", "docs": "Promise will resolve after the hide animation ends." }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "hide() => Promise", "parameters": [], "docs": "This method hides content regardless of the current state.", "docsTags": [ { "name": "returns", "text": "Promise will resolve after the hide animation ends." } ] }, { "name": "show", "returns": { "type": "Promise", "docs": "Promise will resolve after the show animation ends." }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "show() => Promise", "parameters": [], "docs": "Show the collapse content regardless of the current state.", "docsTags": [ { "name": "returns", "text": "Promise will resolve after the show animation ends." } ] }, { "name": "toggle", "returns": { "type": "Promise", "docs": "Promise will resolve after the toggle animation ends." }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "toggle() => Promise", "parameters": [], "docs": "This method will toggle the collapse content. Toggle will show content if it is currently hidden or hide content if it is currently visibile.", "docsTags": [ { "name": "returns", "text": "Promise will resolve after the toggle animation ends." } ] } ], "events": [ { "event": "accordionToggled", "detail": "boolean", "bubbles": true, "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "cancelable": true, "composed": true, "docs": "This event will be triggered any time the accordion is toggled.", "docsTags": [ { "name": "Returns", "text": "`event.detail` will contain the current collapsed state of the accordion." } ] } ], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "accordion", "docs": "This part is the full accordion container." }, { "name": "arrow", "docs": "This part is the arrow icon that indicates if the accordion is open or closed." }, { "name": "button", "docs": "This part is the button that triggers toggling the accordion content." }, { "name": "button-open", "docs": "This part is the button that triggers toggling the accordion content in the open state." }, { "name": "icon", "docs": "This part is the icon next to the label." }, { "name": "label", "docs": "This part is the accordion label." } ], "dependents": [ "som-list-parent-item" ], "dependencies": [ "som-icon", "som-collapse" ], "dependencyGraph": { "som-accordion": [ "som-icon", "som-collapse" ], "som-list-parent-item": [ "som-accordion" ] } }, { "filePath": "src/components/som-accordion-group/som-accordion-group.tsx", "encapsulation": "shadow", "tag": "som-accordion-group", "docs": "Accordions are a simple wrapper for a group of som-accordion components", "docsTags": [], "usage": {}, "props": [ { "name": "borders", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "borders", "reflectToAttr": false, "docs": "This boolean adds or removes the border for the accordion group.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "singleOpen", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "single-open", "reflectToAttr": false, "docs": "This boolean determines if multiple accordions can be open at the same time.", "docsTags": [ { "name": "default", "text": "true" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [ { "event": "accordionToggled", "target": "body", "capture": false, "passive": false } ], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/som-alert/som-alert.tsx", "encapsulation": "none", "tag": "som-alert", "docs": "Alerts notify the user of important information in a timely and effective manner.", "docsTags": [], "usage": {}, "props": [ { "name": "dismissible", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "dismissible", "reflectToAttr": false, "docs": "This property determines if an alert can be dismissed.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "headline", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "headline", "reflectToAttr": false, "docs": "This property sets the headline of the alert.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "hidden", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "hidden", "reflectToAttr": true, "docs": "This boolean sets the initial state of alert.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "noIcon", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "no-icon", "reflectToAttr": false, "docs": "This boolean sets whether to include an icon or not.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "type", "type": "\"error\" | \"info\" | \"success\" | \"warning\"", "complexType": { "original": "'success' | 'warning' | 'error' | 'info'", "resolved": "\"error\" | \"info\" | \"success\" | \"warning\"", "references": {} }, "mutable": false, "attr": "type", "reflectToAttr": false, "docs": "This property styles the component which includes color and default icon.", "docsTags": [ { "name": "default", "text": "'success'" } ], "default": "'success'", "values": [ { "value": "error", "type": "string" }, { "value": "info", "type": "string" }, { "value": "success", "type": "string" }, { "value": "warning", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "hide", "returns": { "type": "Promise", "docs": "Promise will resolve after alert is hidden." }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "hide() => Promise", "parameters": [], "docs": "This public method is used to hide an alert.", "docsTags": [ { "name": "returns", "text": "Promise will resolve after alert is hidden." } ] }, { "name": "show", "returns": { "type": "Promise", "docs": "Promise will resolve after alert is shown." }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "show() => Promise", "parameters": [], "docs": "This public method is used to show an alert.", "docsTags": [ { "name": "returns", "text": "Promise will resolve after alert is shown." } ] } ], "events": [ { "event": "somDismissed", "detail": "void", "bubbles": true, "complexType": { "original": "void", "resolved": "void", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted when the alert is dismissed.", "docsTags": [] } ], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [ "som-icon" ], "dependencyGraph": { "som-alert": [ "som-icon" ] } }, { "filePath": "src/components/som-badge/som-badge.tsx", "encapsulation": "shadow", "tag": "som-badge", "docs": "", "docsTags": [ { "name": "part", "text": "label - This part is the badge label." } ], "usage": {}, "props": [ { "name": "closeButtonAriaLabel", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "close-button-aria-label", "reflectToAttr": false, "docs": "This property overrides the close button aria label.", "docsTags": [ { "name": "default", "text": "\"dismiss\"" } ], "default": "\"dismiss\"", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "color", "type": "\"danger\" | \"gray\" | \"info\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "complexType": { "original": "\"primary\" | \"secondary\" | \"gray\" | \"danger\" | \"warning\" | \"success\" | \"info\"", "resolved": "\"danger\" | \"gray\" | \"info\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "references": {} }, "mutable": false, "attr": "color", "reflectToAttr": false, "docs": "This property shows the color of the badge.", "docsTags": [ { "name": "default", "text": "\"gray\"" } ], "default": "\"gray\"", "values": [ { "value": "danger", "type": "string" }, { "value": "gray", "type": "string" }, { "value": "info", "type": "string" }, { "value": "primary", "type": "string" }, { "value": "secondary", "type": "string" }, { "value": "success", "type": "string" }, { "value": "warning", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "dismissible", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "dismissible", "reflectToAttr": false, "docs": "This boolean determines if a badge can be dismissed.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "icon", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "icon", "reflectToAttr": false, "docs": "This property determines which icon should be used. The property should match an icon name such as `checkmark`.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": false, "docs": "This property shows the text to be displayed in badge.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "light", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "light", "reflectToAttr": false, "docs": "This boolean shows the determines whether to use the light or dark theme.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "size", "type": "\"lg\" | \"md\" | \"sm\" | \"xs\"", "complexType": { "original": "\"xs\" | \"sm\" | \"md\" | \"lg\"", "resolved": "\"lg\" | \"md\" | \"sm\" | \"xs\"", "references": {} }, "mutable": false, "attr": "size", "reflectToAttr": false, "docs": "This property shows the size of badge.", "docsTags": [ { "name": "default", "text": "\"md\"" } ], "default": "\"md\"", "values": [ { "value": "lg", "type": "string" }, { "value": "md", "type": "string" }, { "value": "sm", "type": "string" }, { "value": "xs", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "hide", "returns": { "type": "Promise", "docs": "Promise will resolve after badge is hidden." }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "hide() => Promise", "parameters": [], "docs": "This public method is used to hide a badge.", "docsTags": [ { "name": "returns", "text": "Promise will resolve after badge is hidden." } ] }, { "name": "show", "returns": { "type": "Promise", "docs": "Promise will resolve after badge is shown." }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "show() => Promise", "parameters": [], "docs": "This public method is used to show a badge.", "docsTags": [ { "name": "returns", "text": "Promise will resolve after badge is shown." } ] } ], "events": [ { "event": "somDismissed", "detail": "void", "bubbles": true, "complexType": { "original": "void", "resolved": "void", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted when the badge is dismissed.", "docsTags": [] } ], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "label", "docs": "This part is the badge label." } ], "dependents": [ "som-combobox" ], "dependencies": [ "som-icon" ], "dependencyGraph": { "som-badge": [ "som-icon" ], "som-combobox": [ "som-badge" ] } }, { "filePath": "src/components/som-button/som-button.tsx", "encapsulation": "scoped", "tag": "som-button", "docs": "Buttons serve as interactive components that perform a specified action when clicked. Buttons should be clear in their function and facilitate simple task completion for the user.", "docsTags": [], "usage": {}, "props": [ { "name": "buttonAriaLabel", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "button-aria-label", "reflectToAttr": false, "docs": "This property is used to set a specific label for screen reader users. This is helpful when using an icon only button.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "buttonType", "type": "\"clear\" | \"default\" | \"outline\"", "complexType": { "original": "'default' | 'outline' | 'clear'", "resolved": "\"clear\" | \"default\" | \"outline\"", "references": {} }, "mutable": false, "attr": "button-type", "reflectToAttr": false, "docs": "This property determines the button style", "docsTags": [ { "name": "default", "text": "'default'" } ], "default": "'default'", "values": [ { "value": "clear", "type": "string" }, { "value": "default", "type": "string" }, { "value": "outline", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "color", "type": "\"danger\" | \"gray\" | \"nav\" | \"primary\" | \"secondary\" | \"white\"", "complexType": { "original": "'primary' | 'secondary' | 'white' | 'nav' | 'gray' | 'danger'", "resolved": "\"danger\" | \"gray\" | \"nav\" | \"primary\" | \"secondary\" | \"white\"", "references": {} }, "mutable": true, "attr": "color", "reflectToAttr": false, "docs": "This property determines the color of the button.", "docsTags": [ { "name": "default", "text": "'gray'" } ], "default": "'gray'", "values": [ { "value": "danger", "type": "string" }, { "value": "gray", "type": "string" }, { "value": "nav", "type": "string" }, { "value": "primary", "type": "string" }, { "value": "secondary", "type": "string" }, { "value": "white", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "disabled", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "disabled", "reflectToAttr": true, "docs": "This boolean property indicates that the user cannot interact with the button. Specifies that a button should be disabled.", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "icon", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "icon", "reflectToAttr": false, "docs": "This property determines which icon to be placed. It should be used in conjunction with iconPosition.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "iconPosition", "type": "\"left\" | \"none\" | \"only\" | \"right\"", "complexType": { "original": "'left' | 'right' | 'only' | 'none'", "resolved": "\"left\" | \"none\" | \"only\" | \"right\"", "references": {} }, "mutable": false, "attr": "icon-position", "reflectToAttr": false, "docs": "This property determines which side of the button the icon should appear", "docsTags": [ { "name": "default", "text": "'none'" } ], "default": "'none'", "values": [ { "value": "left", "type": "string" }, { "value": "none", "type": "string" }, { "value": "only", "type": "string" }, { "value": "right", "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "loading", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "loading", "reflectToAttr": false, "docs": "This boolean is used to toggle the loading mode.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "loadingMessage", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "loading-message", "reflectToAttr": false, "docs": "This property is used to read a message to screen reader users while the button is loading.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "size", "type": "\"block\" | \"lg\" | \"md\" | \"sm\"", "complexType": { "original": "'sm' | 'md' | 'lg' | 'block'", "resolved": "\"block\" | \"lg\" | \"md\" | \"sm\"", "references": {} }, "mutable": false, "attr": "size", "reflectToAttr": false, "docs": "This property determines the size of the button.", "docsTags": [ { "name": "default", "text": "'md'" } ], "default": "'md'", "values": [ { "value": "block", "type": "string" }, { "value": "lg", "type": "string" }, { "value": "md", "type": "string" }, { "value": "sm", "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "type", "type": "\"button\" | \"reset\" | \"submit\"", "complexType": { "original": "'submit' | 'reset' | 'button'", "resolved": "\"button\" | \"reset\" | \"submit\"", "references": {} }, "mutable": false, "attr": "type", "reflectToAttr": false, "docs": "The type of the button.", "docsTags": [ { "name": "default", "text": "'button'" } ], "default": "'button'", "values": [ { "value": "button", "type": "string" }, { "value": "reset", "type": "string" }, { "value": "submit", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "somBlur", "detail": "void", "bubbles": true, "complexType": { "original": "void", "resolved": "void", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted when the button loses focus.", "docsTags": [] }, { "event": "somFocus", "detail": "void", "bubbles": true, "complexType": { "original": "void", "resolved": "void", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted when the button has focus.", "docsTags": [] } ], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [ "som-button-dropdown", "som-calendar-vertical", "som-checkbox", "som-checkbox-group", "som-combobox", "som-date-picker-input", "som-date-picker-mobile", "som-date-range-picker-button", "som-dialog", "som-input", "som-pagination", "som-radio-button-group", "som-select", "som-tab-group", "som-textarea" ], "dependencies": [ "som-spinner" ], "dependencyGraph": { "som-button": [ "som-spinner" ], "som-button-dropdown": [ "som-button" ], "som-calendar-vertical": [ "som-button" ], "som-checkbox": [ "som-button" ], "som-checkbox-group": [ "som-button" ], "som-combobox": [ "som-button" ], "som-date-picker-input": [ "som-button" ], "som-date-picker-mobile": [ "som-button" ], "som-date-range-picker-button": [ "som-button" ], "som-dialog": [ "som-button" ], "som-input": [ "som-button" ], "som-pagination": [ "som-button" ], "som-radio-button-group": [ "som-button" ], "som-select": [ "som-button" ], "som-tab-group": [ "som-button" ], "som-textarea": [ "som-button" ] } }, { "filePath": "src/components/som-button-dropdown/som-button-dropdown.tsx", "encapsulation": "scoped", "tag": "som-button-dropdown", "docs": "Button Dropdowns control overlays for displaying lists of links. These can be used to add contextual menus to different areas of an application.", "docsTags": [], "usage": {}, "props": [ { "name": "buttonAriaLabel", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "button-aria-label", "reflectToAttr": false, "docs": "This property can be used to set the ARIA label associated with this input (for screen readers).", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "buttonText", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "button-text", "reflectToAttr": false, "docs": "This attribute controls the text displayed inside the button.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "buttonType", "type": "\"clear\" | \"default\" | \"outline\"", "complexType": { "original": "'default' | 'outline' | 'clear'", "resolved": "\"clear\" | \"default\" | \"outline\"", "references": {} }, "mutable": false, "attr": "button-type", "reflectToAttr": false, "docs": "This property determines the button style.", "docsTags": [ { "name": "default", "text": "'default'" } ], "default": "'default'", "values": [ { "value": "clear", "type": "string" }, { "value": "default", "type": "string" }, { "value": "outline", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "collapsed", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": true, "attr": "collapsed", "reflectToAttr": true, "docs": "This property will toggle the open state.", "docsTags": [ { "name": "default", "text": "true" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "color", "type": "\"danger\" | \"gray\" | \"nav\" | \"primary\" | \"secondary\" | \"white\"", "complexType": { "original": "'primary' | 'secondary' | 'white' | 'nav' | 'gray' | 'danger'", "resolved": "\"danger\" | \"gray\" | \"nav\" | \"primary\" | \"secondary\" | \"white\"", "references": {} }, "mutable": false, "attr": "color", "reflectToAttr": false, "docs": "This attribute controls the color of the button.", "docsTags": [ { "name": "default", "text": "'gray'" } ], "default": "'gray'", "values": [ { "value": "danger", "type": "string" }, { "value": "gray", "type": "string" }, { "value": "nav", "type": "string" }, { "value": "primary", "type": "string" }, { "value": "secondary", "type": "string" }, { "value": "white", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "disabled", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "disabled", "reflectToAttr": false, "docs": "This property is used to set the button as disabled.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "horizontalPosition", "type": "\"left\" | \"right\"", "complexType": { "original": "'left' | 'right'", "resolved": "\"left\" | \"right\"", "references": {} }, "mutable": false, "attr": "horizontal-position", "reflectToAttr": false, "docs": "This property controls the horizontal position of the overlay.", "docsTags": [ { "name": "default", "text": "'left'" } ], "default": "'left'", "values": [ { "value": "left", "type": "string" }, { "value": "right", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "icon", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "icon", "reflectToAttr": false, "docs": "This property determines which icon to be placed. It should be used in conjunction with iconPosition.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "size", "type": "\"block\" | \"lg\" | \"md\" | \"sm\"", "complexType": { "original": "'sm' | 'md' | 'lg' | 'block'", "resolved": "\"block\" | \"lg\" | \"md\" | \"sm\"", "references": {} }, "mutable": false, "attr": "size", "reflectToAttr": false, "docs": "This attribute controls the size of the button.", "docsTags": [ { "name": "default", "text": "'md'" } ], "default": "'md'", "values": [ { "value": "block", "type": "string" }, { "value": "lg", "type": "string" }, { "value": "md", "type": "string" }, { "value": "sm", "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "verticalPosition", "type": "\"bottom\" | \"top\"", "complexType": { "original": "'top' | 'bottom'", "resolved": "\"bottom\" | \"top\"", "references": {} }, "mutable": false, "attr": "vertical-position", "reflectToAttr": false, "docs": "The property controls the vertical position of the overlay.", "docsTags": [ { "name": "default", "text": "'bottom'" } ], "default": "'bottom'", "values": [ { "value": "bottom", "type": "string" }, { "value": "top", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "close", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "close() => Promise", "parameters": [], "docs": "This method will close the popover.", "docsTags": [] }, { "name": "open", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "open() => Promise", "parameters": [], "docs": "This method will open the popover.", "docsTags": [] } ], "events": [], "listeners": [ { "event": "blur", "target": "window", "capture": true, "passive": false }, { "event": "focus", "target": "window", "capture": true, "passive": false }, { "event": "keydown", "capture": false, "passive": false } ], "styles": [], "slots": [], "parts": [], "dependents": [ "som-list-parent-item" ], "dependencies": [ "som-button", "som-icon", "som-popover" ], "dependencyGraph": { "som-button-dropdown": [ "som-button", "som-icon", "som-popover" ], "som-button": [ "som-spinner" ], "som-list-parent-item": [ "som-button-dropdown" ] } }, { "filePath": "src/components/som-calendar/som-calendar.tsx", "encapsulation": "none", "tag": "som-calendar", "docs": "", "docsTags": [], "usage": {}, "props": [ { "name": "date1", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": true, "attr": "date-1", "reflectToAttr": true, "docs": "This date variable will hold either:\n- The picked date when `enableRangePicker === false`\n- The range's start date when `enableRangePicker === true`", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "date2", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": true, "attr": "date-2", "reflectToAttr": true, "docs": "", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "enableRangePicker", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "enable-range-picker", "reflectToAttr": false, "docs": "", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "maxDate", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "max-date", "reflectToAttr": false, "docs": "", "docsTags": [ { "name": "default", "text": "null" } ], "default": "null", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "minDate", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "min-date", "reflectToAttr": false, "docs": "", "docsTags": [ { "name": "default", "text": "null" } ], "default": "null", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "month", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "month", "reflectToAttr": false, "docs": "", "docsTags": [ { "name": "default", "text": "null" } ], "default": "null", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "monthsNb", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "months-nb", "reflectToAttr": false, "docs": "", "docsTags": [ { "name": "default", "text": "DEFAULT_MONTHS_TO_SHOW" } ], "default": "DEFAULT_MONTHS_TO_SHOW", "values": [ { "type": "number" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "readonly", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "readonly", "reflectToAttr": false, "docs": "Public properties", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "reset", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "reset() => Promise", "parameters": [], "docs": "Public methods", "docsTags": [] }, { "name": "setFocus", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "setFocus() => Promise", "parameters": [], "docs": "", "docsTags": [] } ], "events": [ { "event": "dateChange", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "Events section", "docsTags": [] } ], "listeners": [ { "event": "keydown", "target": "window", "capture": false, "passive": false }, { "event": "keydown", "capture": false, "passive": false } ], "styles": [], "slots": [], "parts": [], "dependents": [ "som-date-picker", "som-date-range-picker" ], "dependencies": [ "som-icon" ], "dependencyGraph": { "som-calendar": [ "som-icon" ], "som-date-picker": [ "som-calendar" ], "som-date-range-picker": [ "som-calendar" ] } }, { "filePath": "src/components/som-calendar-vertical/som-calendar-vertical.tsx", "encapsulation": "none", "tag": "som-calendar-vertical", "docs": "", "docsTags": [], "usage": {}, "props": [ { "name": "date1", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "date-1", "reflectToAttr": false, "docs": "This date variable will hold either:\n- The picked date when `enableRangePicker === false`\n- The range's start date when `enableRangePicker === true`", "docsTags": [ { "name": "default", "text": "null" } ], "default": "null", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "date2", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "date-2", "reflectToAttr": false, "docs": "", "docsTags": [ { "name": "default", "text": "null" } ], "default": "null", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "enableRangePicker", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "enable-range-picker", "reflectToAttr": false, "docs": "", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "maxDate", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "max-date", "reflectToAttr": false, "docs": "", "docsTags": [ { "name": "default", "text": "null" } ], "default": "null", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "minDate", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "min-date", "reflectToAttr": false, "docs": "", "docsTags": [ { "name": "default", "text": "null" } ], "default": "null", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "month", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "month", "reflectToAttr": false, "docs": "", "docsTags": [ { "name": "default", "text": "null" } ], "default": "null", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "monthsNb", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "months-nb", "reflectToAttr": false, "docs": "", "docsTags": [ { "name": "default", "text": "DEFAULT_MONTHS_TO_SHOW" } ], "default": "DEFAULT_MONTHS_TO_SHOW", "values": [ { "type": "number" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "readonly", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "readonly", "reflectToAttr": false, "docs": "Public properties", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "reset", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "reset() => Promise", "parameters": [], "docs": "Public methods", "docsTags": [] }, { "name": "setFocus", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "setFocus() => Promise", "parameters": [], "docs": "", "docsTags": [] } ], "events": [ { "event": "dateChange", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "Events section", "docsTags": [] } ], "listeners": [ { "event": "keydown", "capture": false, "passive": false } ], "styles": [], "slots": [], "parts": [], "dependents": [ "som-date-picker", "som-date-range-picker" ], "dependencies": [ "som-button" ], "dependencyGraph": { "som-calendar-vertical": [ "som-button" ], "som-button": [ "som-spinner" ], "som-date-picker": [ "som-calendar-vertical" ], "som-date-range-picker": [ "som-calendar-vertical" ] } }, { "filePath": "src/components/som-card/som-card.tsx", "encapsulation": "shadow", "tag": "som-card", "docs": "A card is a flexible and extensible content container. It can include a wide variety of content, contextual background colors, and powerful display options.", "docsTags": [], "usage": {}, "props": [ { "name": "buttonAriaLabel", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "button-aria-label", "reflectToAttr": false, "docs": "This property can be used to set the ARIA label associated with this card (for screen readers).", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "color", "type": "\"danger\" | \"info\" | \"light-gray\" | \"success\" | \"transparent\" | \"warning\" | \"white\"", "complexType": { "original": "'white' | 'light-gray' | 'success' | 'warning' | 'danger' | 'info' | 'transparent'", "resolved": "\"danger\" | \"info\" | \"light-gray\" | \"success\" | \"transparent\" | \"warning\" | \"white\"", "references": {} }, "mutable": false, "attr": "color", "reflectToAttr": false, "docs": "This property will determine the color applied to the card background and border", "docsTags": [ { "name": "default", "text": "'white'" } ], "default": "'white'", "values": [ { "value": "danger", "type": "string" }, { "value": "info", "type": "string" }, { "value": "light-gray", "type": "string" }, { "value": "success", "type": "string" }, { "value": "transparent", "type": "string" }, { "value": "warning", "type": "string" }, { "value": "white", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "matchHeight", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "match-height", "reflectToAttr": false, "docs": "This boolean is used to add 100% height to the card which is helpful when you want the card height to expand to match\nthe height of surrounding elements.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "type", "type": "\"button\" | \"default\"", "complexType": { "original": "'default' | 'button'", "resolved": "\"button\" | \"default\"", "references": {} }, "mutable": false, "attr": "type", "reflectToAttr": false, "docs": "The type of card.", "docsTags": [ { "name": "default", "text": "'default'" } ], "default": "'default'", "values": [ { "value": "button", "type": "string" }, { "value": "default", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [ { "event": "keyup", "capture": false, "passive": false } ], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/som-checkbox/som-checkbox.tsx", "encapsulation": "none", "tag": "som-checkbox", "docs": "", "docsTags": [ { "name": "slot", "text": "label - Label for the checkbox. Alternatively, you can use the label attribute." } ], "usage": {}, "props": [ { "name": "checked", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": true, "attr": "checked", "reflectToAttr": true, "docs": "This boolean is used to set the toggle as \"checked\".", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "disabled", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "disabled", "reflectToAttr": false, "docs": "This boolean is used to set the checkbox as disabled.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "error", "type": "string", "complexType": { "original": "string | null", "resolved": "string", "references": {} }, "mutable": false, "attr": "error", "reflectToAttr": false, "docs": "This property can be used to set an error. If a non-empty string is given, it will be used as the error message.", "docsTags": [ { "name": "default", "text": "null" } ], "default": "null", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "hasGroupParent", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "has-group-parent", "reflectToAttr": false, "docs": "This boolean is used if within `som-form-field-group`, this will be set to true by `som-form-field-group`.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "help", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "help", "reflectToAttr": false, "docs": "This property can be used to set a help text.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "hideLabel", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "hide-label", "reflectToAttr": false, "docs": "This property will visually hide the label. A label is still required to be provided for screenreader support.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "indeterminate", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": true, "attr": "indeterminate", "reflectToAttr": false, "docs": "This property controls whether the checkbox is in an indeterminate state.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "inputAriaLabel", "type": "string", "complexType": { "original": "string | null", "resolved": "string", "references": {} }, "mutable": false, "attr": "input-aria-label", "reflectToAttr": false, "docs": "This property can be used to set the ARIA label associated with this input (for screen readers).", "docsTags": [ { "name": "default", "text": "null" } ], "default": "null", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "inputId", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "input-id", "reflectToAttr": false, "docs": "This property can be used to specifically set an ID to the input field. If an ID is not provided, it will be dynamically generated.", "docsTags": [ { "name": "default", "text": "generateId('som-checkbox')" } ], "default": "generateId('som-checkbox')", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": false, "docs": "This property is the checkbox label text.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "labelClass", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label-class", "reflectToAttr": false, "docs": "This property is a list of CSS classes that can be used to style the label.", "docsTags": [ { "name": "deprecated", "text": "with version 4.0.1 release" }, { "name": "default", "text": "''" } ], "default": "''", "deprecation": "with version 4.0.1 release", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "name", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "name", "reflectToAttr": false, "docs": "This property is the form element name (used when submitting the form).", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "readonly", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "readonly", "reflectToAttr": false, "docs": "This boolean can be used to set the checkbox as readonly.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "required", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "required", "reflectToAttr": false, "docs": "This boolean sets whether the form field is required or not.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "requiredInd", "type": "\"none\" | \"optional\" | \"required\"", "complexType": { "original": "'required' | 'optional' | 'none'", "resolved": "\"none\" | \"optional\" | \"required\"", "references": {} }, "mutable": false, "attr": "required-ind", "reflectToAttr": false, "docs": "This property is used to override the required indicator. By default, forms elements will show an `optional` indicator\nbut some forms are better served showing the `required` indicator instead.", "docsTags": [], "values": [ { "value": "none", "type": "string" }, { "value": "optional", "type": "string" }, { "value": "required", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "tooltip", "type": "string", "complexType": { "original": "string | null", "resolved": "string", "references": {} }, "mutable": false, "attr": "tooltip", "reflectToAttr": false, "docs": "This property is used to set the tooltip text.", "docsTags": [ { "name": "default", "text": "null" } ], "default": "null", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "value", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "value", "reflectToAttr": false, "docs": "This property is the checkbox value sent on submit when using it in a form.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "setFocus", "returns": { "type": "Promise", "docs": "Promise will resolve after focus." }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "setFocus() => Promise", "parameters": [], "docs": "This public method sets focus to the checkbox element.", "docsTags": [ { "name": "returns", "text": "Promise will resolve after focus." } ] } ], "events": [ { "event": "somBlur", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted when when the checkbox loses focus.", "docsTags": [] }, { "event": "somChange", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted when the checkbox is toggled.", "docsTags": [] }, { "event": "somClick", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted when the checkbox is clicked.", "docsTags": [] }, { "event": "somFocus", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted when when the checkbox gets focus.", "docsTags": [] } ], "listeners": [], "styles": [], "slots": [ { "name": "label", "docs": "Label for the checkbox. Alternatively, you can use the label attribute." } ], "parts": [], "dependents": [ "som-checkbox-group", "som-combobox" ], "dependencies": [ "som-button", "som-tooltip" ], "dependencyGraph": { "som-checkbox": [ "som-button", "som-tooltip" ], "som-button": [ "som-spinner" ], "som-checkbox-group": [ "som-checkbox" ], "som-combobox": [ "som-checkbox" ] } }, { "filePath": "src/components/som-checkbox-group/som-checkbox-group.tsx", "encapsulation": "none", "tag": "som-checkbox-group", "docs": "", "docsTags": [ { "name": "slot", "text": "label - Label for the checkbox group. Alternatively, you can use the label attribute." } ], "usage": {}, "props": [ { "name": "disabled", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "disabled", "reflectToAttr": false, "docs": "This boolean is used to set the form field group as disabled.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "error", "type": "string", "complexType": { "original": "string | null", "resolved": "string", "references": {} }, "mutable": true, "attr": "error", "reflectToAttr": false, "docs": "This property can be used to set an error. If a non-empty string is given, it will be used as the error message.", "docsTags": [ { "name": "default", "text": "null" } ], "default": "null", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "help", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "help", "reflectToAttr": false, "docs": "This property can be used to set a help text.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "hideLabel", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "hide-label", "reflectToAttr": false, "docs": "This property will visually hide the label. A label is still required to be provided for screenreader support.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "indeterminate", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "indeterminate", "reflectToAttr": false, "docs": "This property controls whether the checkbox is in an indeterminate state.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "inline", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "inline", "reflectToAttr": false, "docs": "This boolean sets whether the form field group should display the checkboxes inline or not.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": false, "docs": "This property can be used to set the inline label.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "labelClass", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label-class", "reflectToAttr": false, "docs": "This property is a list of CSS classes that can be used to style the label.", "docsTags": [ { "name": "deprecated", "text": "with version 4.0.1 release" }, { "name": "default", "text": "''" } ], "default": "''", "deprecation": "with version 4.0.1 release", "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "readonly", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "readonly", "reflectToAttr": false, "docs": "This boolean can be used to set the field group as readonly.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "required", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "required", "reflectToAttr": false, "docs": "This boolean sets whether the form field group is required or not.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "requiredInd", "type": "\"none\" | \"optional\" | \"required\"", "complexType": { "original": "'required' | 'optional' | 'none'", "resolved": "\"none\" | \"optional\" | \"required\"", "references": {} }, "mutable": false, "attr": "required-ind", "reflectToAttr": false, "docs": "This property is used to override the required indicator. By default, forms elements will show an `optional` indicator\nbut some forms are better served showing the `required` indicator instead.", "docsTags": [], "values": [ { "value": "none", "type": "string" }, { "value": "optional", "type": "string" }, { "value": "required", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "tooltip", "type": "string", "complexType": { "original": "string | null", "resolved": "string", "references": {} }, "mutable": false, "attr": "tooltip", "reflectToAttr": false, "docs": "This property is used to set the tooltip text.", "docsTags": [ { "name": "default", "text": "null" } ], "default": "null", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [ { "event": "somChange", "target": "body", "capture": false, "passive": false } ], "styles": [], "slots": [ { "name": "label", "docs": "Label for the checkbox group. Alternatively, you can use the label attribute." } ], "parts": [], "dependents": [], "dependencies": [ "som-checkbox", "som-button", "som-tooltip" ], "dependencyGraph": { "som-checkbox-group": [ "som-checkbox", "som-button", "som-tooltip" ], "som-checkbox": [ "som-button", "som-tooltip" ], "som-button": [ "som-spinner" ] } }, { "filePath": "src/components/som-collapse/som-collapse.tsx", "encapsulation": "none", "tag": "som-collapse", "docs": "A collapse section simplifies the user interface by condensing long content into collapsible content sections.", "docsTags": [], "usage": {}, "props": [ { "name": "collapsed", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "collapsed", "reflectToAttr": false, "docs": "This boolean property that sets the initial state of the collapse element.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "hide", "returns": { "type": "Promise", "docs": "Promise will resolve after the hide animation ends." }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "hide() => Promise", "parameters": [], "docs": "This method hides content regardless of the current state.", "docsTags": [ { "name": "returns", "text": "Promise will resolve after the hide animation ends." } ] }, { "name": "refresh", "returns": { "type": "Promise", "docs": "Promise" }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "refresh() => Promise", "parameters": [], "docs": "DEPRECATED - This method was used to recalculate and update the tab content height.\nWe do not need to call this method anymore since content height is automatically updated internally.", "docsTags": [ { "name": "returns", "text": "Promise" } ] }, { "name": "show", "returns": { "type": "Promise", "docs": "Promise will resolve after the show animation ends." }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "show() => Promise", "parameters": [], "docs": "This method shows the collapse content regardless of the current state.", "docsTags": [ { "name": "returns", "text": "Promise will resolve after the show animation ends." } ] }, { "name": "toggle", "returns": { "type": "Promise", "docs": "Promise will resolve after the toggle animation ends." }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "toggle() => Promise", "parameters": [], "docs": "This method toggles the collapse content. Toggle will show content if it is currently hidden or hide content if it is currently visibile.", "docsTags": [ { "name": "returns", "text": "Promise will resolve after the toggle animation ends." } ] } ], "events": [ { "event": "collapseToggled", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "Event triggered anytime the component is toggled.", "docsTags": [ { "name": "Returns", "text": "`event.detail` will contain the state of the collapse as a `boolean` value." } ] } ], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [ "som-accordion" ], "dependencies": [], "dependencyGraph": { "som-accordion": [ "som-collapse" ] } }, { "filePath": "src/components/som-combobox/som-combobox.tsx", "encapsulation": "none", "tag": "som-combobox", "docs": "A combobox is a hybrid form element that combines a searchable input field with a select dropdown menu. Users can type a value and/or choose from a list of predefined options.", "docsTags": [], "usage": {}, "props": [ { "name": "badgeDismissible", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "badge-dismissible", "reflectToAttr": false, "docs": "This property will show/hide the close `X` button on badge elements.", "docsTags": [ { "name": "default", "text": "true" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "data", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "data", "reflectToAttr": false, "docs": "This property is used as the API layer to populate the combobox popover items. The data structure should be a stringified array of objects. Each object should have keys for `label`, `name`, and `value` fields. An optional boolean `checked` key can be added to the object to set the default checked state.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "error", "type": "string", "complexType": { "original": "string | null", "resolved": "string", "references": {} }, "mutable": false, "attr": "error", "reflectToAttr": false, "docs": "This property can be used to set an error. If a non-empty string is given, it will be used as the error message.", "docsTags": [ { "name": "default", "text": "null" } ], "default": "null", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "formatChecked", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "format-checked", "reflectToAttr": false, "docs": "This property can be used to map your data structure to the `data` API that populates the `checked` key/value pair. Pass in a string for the key that will represent the `checked` value.", "docsTags": [ { "name": "default", "text": "'checked'" } ], "default": "'checked'", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "formatDisabled", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "format-disabled", "reflectToAttr": false, "docs": "\nThis property can be used to map your data structure to the `data` API that populates the `checked` key/value pair. Pass in a string for the key that will represent the `checked` value.", "docsTags": [ { "name": "default", "text": "'disabled'" } ], "default": "'disabled'", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "formatLabel", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "format-label", "reflectToAttr": false, "docs": "This property can be used to map your data structure to the `data` API that populates the `label` key/value pair. Pass in a string for the key that will represent the `label` value.", "docsTags": [ { "name": "default", "text": "'label'" } ], "default": "'label'", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "formatName", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "format-name", "reflectToAttr": false, "docs": "This property can be used to map your data structure to the `data` API that populates the `name` key/value pair. Pass in a string for the key that will represent the `name` value. This value will also represent the `name` attribute used for each radio/checkbox element in the dropdown.", "docsTags": [ { "name": "default", "text": "'name'" } ], "default": "'name'", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "formatValue", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "format-value", "reflectToAttr": false, "docs": "This property can be used to map your data structure to the `data` API that populates the `value` key/value pair. Pass in a string for the key that will represent `value`.", "docsTags": [ { "name": "default", "text": "'value'" } ], "default": "'value'", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "help", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "help", "reflectToAttr": false, "docs": "This property can be used to set help text.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "hideLabel", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "hide-label", "reflectToAttr": false, "docs": "This property will visually hide the label. A label is still required for screenreader support.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "inputId", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "input-id", "reflectToAttr": false, "docs": "This property can be used to specifically set an ID to the combobox field. If an ID is not provided, it will be dynamically generated.", "docsTags": [ { "name": "default", "text": "generateId('som-combobox-')" } ], "default": "generateId('som-combobox-')", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "isClearable", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "is-clearable", "reflectToAttr": false, "docs": "This property will show/hide the `X` icon that clears all selected items.", "docsTags": [ { "name": "default", "text": "true" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": false, "docs": "This property can be used to set a label.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "noResultsMessage", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "no-results-message", "reflectToAttr": false, "docs": "This property sets the message that will display if no results are found. Defaults to \"No results found\".", "docsTags": [ { "name": "default", "text": "'No results found'" } ], "default": "'No results found'", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "placeholder", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "placeholder", "reflectToAttr": false, "docs": "This property can be used to set a placeholder text.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "required", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "required", "reflectToAttr": false, "docs": "This boolean can be used to set the combobox as required.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "requiredInd", "type": "\"none\" | \"optional\" | \"required\"", "complexType": { "original": "'required' | 'optional' | 'none'", "resolved": "\"none\" | \"optional\" | \"required\"", "references": {} }, "mutable": false, "attr": "required-ind", "reflectToAttr": false, "docs": "This property is used to override the required indicator. By default, forms elements will show an `optional` indicator\nbut some forms are better served showing the `required` indicator instead.", "docsTags": [], "values": [ { "value": "none", "type": "string" }, { "value": "optional", "type": "string" }, { "value": "required", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "searchField", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "search-field", "reflectToAttr": false, "docs": "This property is used to set the key to search against. Default behavior will search against `value`, but can be changed to search against any other key, such as `label`.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "selectedItemsLimit", "type": "number", "complexType": { "original": "number | null", "resolved": "number", "references": {} }, "mutable": false, "attr": "selected-items-limit", "reflectToAttr": false, "docs": "This property limits the number of items that can be selected. Once limit is hit items inside will become disabled.", "docsTags": [ { "name": "default", "text": "null" } ], "default": "null", "values": [ { "type": "number" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "tooltip", "type": "string", "complexType": { "original": "string | null", "resolved": "string", "references": {} }, "mutable": false, "attr": "tooltip", "reflectToAttr": false, "docs": "This property is used to set the tooltip text.", "docsTags": [ { "name": "default", "text": "null" } ], "default": "null", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "type", "type": "\"checkbox\" | \"radio\"", "complexType": { "original": "'checkbox' | 'radio'", "resolved": "\"checkbox\" | \"radio\"", "references": {} }, "mutable": false, "attr": "type", "reflectToAttr": false, "docs": "", "docsTags": [ { "name": "default", "text": "'checkbox'" } ], "default": "'checkbox'", "values": [ { "value": "checkbox", "type": "string" }, { "value": "radio", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "addItem", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "(val: any) => Promise", "parameters": [ { "name": "val", "type": "any", "docs": "" } ], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "addItem(val: any) => Promise", "parameters": [ { "name": "val", "type": "any", "docs": "" } ], "docs": "This method will add a specific item to the selected list of items when passing the label value as a string.", "docsTags": [] }, { "name": "clearSelectedItems", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "clearSelectedItems() => Promise", "parameters": [], "docs": "This method will clear all selected items and close the popover if open.", "docsTags": [] }, { "name": "closePopover", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "closePopover() => Promise", "parameters": [], "docs": "This method will close the list of results.", "docsTags": [] }, { "name": "deleteItem", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "(val: any) => Promise", "parameters": [ { "name": "val", "type": "any", "docs": "" } ], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "deleteItem(val: any) => Promise", "parameters": [ { "name": "val", "type": "any", "docs": "" } ], "docs": "This method will delete a specific item from the selected list of items when passing the label value as a string.", "docsTags": [] }, { "name": "getSelectedItems", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "getSelectedItems() => Promise", "parameters": [], "docs": "This method will get all selected items.", "docsTags": [] }, { "name": "openPopover", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "openPopover() => Promise", "parameters": [], "docs": "This method will open the list of results.", "docsTags": [] } ], "events": [ { "event": "comboboxClosed", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is triggered after combobox is closed.", "docsTags": [] }, { "event": "comboboxInput", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted when a keyboard input occurs.", "docsTags": [] }, { "event": "comboboxOpened", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is triggered after combobox is opened.", "docsTags": [] }, { "event": "itemAdded", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted when an item is added.", "docsTags": [] }, { "event": "itemRemoved", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted when an item is removed.", "docsTags": [] }, { "event": "itemsRemoved", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted when all items are removed.", "docsTags": [] } ], "listeners": [ { "event": "keydown", "capture": false, "passive": false }, { "event": "somInput", "capture": false, "passive": false }, { "event": "somDismissed", "capture": false, "passive": false }, { "event": "somChange", "capture": false, "passive": false }, { "event": "popoverOpened", "capture": false, "passive": false }, { "event": "popoverClosed", "capture": false, "passive": false }, { "event": "itemAdded", "capture": false, "passive": false }, { "event": "itemRemoved", "capture": false, "passive": false } ], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [ "som-button", "som-tooltip", "som-badge", "som-popover", "som-list", "som-list-item", "som-checkbox", "som-radio-button-group", "som-radio-button", "som-content" ], "dependencyGraph": { "som-combobox": [ "som-button", "som-tooltip", "som-badge", "som-popover", "som-list", "som-list-item", "som-checkbox", "som-radio-button-group", "som-radio-button", "som-content" ], "som-button": [ "som-spinner" ], "som-badge": [ "som-icon" ], "som-checkbox": [ "som-button", "som-tooltip" ], "som-radio-button-group": [ "som-button", "som-tooltip" ] } }, { "filePath": "src/components/som-content/som-content.tsx", "encapsulation": "shadow", "tag": "som-content", "docs": "", "docsTags": [ { "name": "part", "text": "content - This part is the full content block." } ], "usage": {}, "props": [ { "name": "padding", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "padding", "reflectToAttr": false, "docs": "This property controls the amount of padding added to the card content.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [ { "name": "--padding-bottom", "annotation": "prop", "docs": "This style control the bottom padding of content container." }, { "name": "--padding-left", "annotation": "prop", "docs": "This style control the left padding of content container." }, { "name": "--padding-right", "annotation": "prop", "docs": "This style control the right padding of content container." }, { "name": "--padding-top", "annotation": "prop", "docs": "This style control the top padding of content container." } ], "slots": [], "parts": [ { "name": "content", "docs": "This part is the full content block." } ], "dependents": [ "som-combobox", "som-toast" ], "dependencies": [], "dependencyGraph": { "som-combobox": [ "som-content" ], "som-toast": [ "som-content" ] } }, { "filePath": "src/components/som-date-picker/som-date-picker.tsx", "encapsulation": "none", "tag": "som-date-picker", "docs": "A date picker present a calendar to the user making it easy to select a date.", "docsTags": [], "usage": {}, "props": [ { "name": "date", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": true, "attr": "date", "reflectToAttr": true, "docs": "This property shows the current date selected. You can use this property to set a default date.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "maxDate", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "max-date", "reflectToAttr": false, "docs": "This property shows the maximum date that can be selected.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "minDate", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "min-date", "reflectToAttr": false, "docs": "This property shows the minimum date that can be selected.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "readonly", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "readonly", "reflectToAttr": false, "docs": "When set to `true`, this boolean makes the date picker read only.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "singleMonthView", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "single-month-view", "reflectToAttr": false, "docs": "This boolean enables viewing only one month at a time. Display only one month at a time.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "vertical", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "vertical", "reflectToAttr": false, "docs": "This boolean switches the date picker to vertical mode, which lets users go through months by a top-down format.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "reset", "returns": { "type": "Promise", "docs": "Promise when date picker has been reset." }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "reset() => Promise", "parameters": [], "docs": "This method resets the date picker.", "docsTags": [ { "name": "returns", "text": "Promise when date picker has been reset." } ] }, { "name": "setFocus", "returns": { "type": "Promise", "docs": "Promise when focus has been set." }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "setFocus() => Promise", "parameters": [], "docs": "This method sets the focus onto the date picker.", "docsTags": [ { "name": "returns", "text": "Promise when focus has been set." } ] } ], "events": [ { "event": "dateChange", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted whenever a new date is selected.", "docsTags": [ { "name": "Returns", "text": "`event.detail` will contain the current selected date." } ] } ], "listeners": [ { "event": "resize", "target": "window", "capture": false, "passive": true } ], "styles": [], "slots": [], "parts": [], "dependents": [ "som-date-picker-input", "som-date-picker-mobile" ], "dependencies": [ "som-calendar-vertical", "som-calendar" ], "dependencyGraph": { "som-date-picker": [ "som-calendar-vertical", "som-calendar" ], "som-calendar-vertical": [ "som-button" ], "som-button": [ "som-spinner" ], "som-calendar": [ "som-icon" ], "som-date-picker-input": [ "som-date-picker" ], "som-date-picker-mobile": [ "som-date-picker" ] } }, { "filePath": "src/components/som-date-picker-input/som-date-picker-input.tsx", "encapsulation": "none", "tag": "som-date-picker-input", "docs": "", "docsTags": [ { "name": "slot", "text": "label - Label for the date picker input. Alternatively, you can use the label attribute." } ], "usage": {}, "props": [ { "name": "disabled", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "disabled", "reflectToAttr": false, "docs": "When set to `true`, this boolean ensures that the input will be disabled.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "error", "type": "string", "complexType": { "original": "string | null", "resolved": "string", "references": {} }, "mutable": true, "attr": "error", "reflectToAttr": true, "docs": "This property sets the input error message. If a non-empty string is given, it will be used as the error message.", "docsTags": [ { "name": "default", "text": "null" } ], "default": "null", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "format", "type": "\"MM-DD-YYYY\" | \"MM/DD/YYYY\" | \"YYYY-MM-DD\" | \"YYYY/MM/DD\"", "complexType": { "original": "'MM-DD-YYYY' | 'MM/DD/YYYY' | 'YYYY-MM-DD' | 'YYYY/MM/DD'", "resolved": "\"MM-DD-YYYY\" | \"MM/DD/YYYY\" | \"YYYY-MM-DD\" | \"YYYY/MM/DD\"", "references": {} }, "mutable": false, "attr": "format", "reflectToAttr": false, "docs": "This property sets the date format.", "docsTags": [ { "name": "default", "text": "'MM/DD/YYYY'" } ], "default": "'MM/DD/YYYY'", "values": [ { "value": "MM-DD-YYYY", "type": "string" }, { "value": "MM/DD/YYYY", "type": "string" }, { "value": "YYYY-MM-DD", "type": "string" }, { "value": "YYYY/MM/DD", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "help", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "help", "reflectToAttr": false, "docs": "This property sets the help text rendered below input.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "hideLabel", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "hide-label", "reflectToAttr": false, "docs": "This property will visually hide the label. A label is still required to be provided for screenreader support.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "horizontalPosition", "type": "\"left\" | \"right\"", "complexType": { "original": "'left' | 'right'", "resolved": "\"left\" | \"right\"", "references": {} }, "mutable": false, "attr": "horizontal-position", "reflectToAttr": false, "docs": "This property sets the horizontal position of the date picker popover.", "docsTags": [ { "name": "default", "text": "'left'" } ], "default": "'left'", "values": [ { "value": "left", "type": "string" }, { "value": "right", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "inputAriaLabel", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "input-aria-label", "reflectToAttr": false, "docs": "This property sets the ARIA label associated with this input.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "inputId", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "input-id", "reflectToAttr": false, "docs": "This property can be used to specifically set an ID to the input field. If an ID is not provided, it will be dynamically generated.", "docsTags": [ { "name": "default", "text": "generateId('som-date-picker-input')" } ], "default": "generateId('som-date-picker-input')", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": false, "docs": "This property sets the input label.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "labelClass", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label-class", "reflectToAttr": false, "docs": "This property is a list of CSS classes that can be used to style the label.", "docsTags": [ { "name": "deprecated", "text": "with version 4.0.1 release" }, { "name": "default", "text": "''" } ], "default": "''", "deprecation": "with version 4.0.1 release", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "maxDate", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "max-date", "reflectToAttr": false, "docs": "This property shows the maximum date that can be selected.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "minDate", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "min-date", "reflectToAttr": false, "docs": "This property shows the minimum date that can be selected.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "name", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "name", "reflectToAttr": false, "docs": "This property sets the input name, used when submitting the form.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "placeholder", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "placeholder", "reflectToAttr": false, "docs": "This property sets the input placeholder text.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "readonly", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "readonly", "reflectToAttr": false, "docs": "When set to `true`, this boolean ensures that the input will be read only.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "required", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "required", "reflectToAttr": false, "docs": "This boolean sets the input to required.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "requiredInd", "type": "\"none\" | \"optional\" | \"required\"", "complexType": { "original": "'required' | 'optional' | 'none'", "resolved": "\"none\" | \"optional\" | \"required\"", "references": {} }, "mutable": false, "attr": "required-ind", "reflectToAttr": false, "docs": "This property is used to override the required indicator. By default, forms elements will show an `optional` indicator\nbut some forms are better served showing the `required` indicator instead.", "docsTags": [], "values": [ { "value": "none", "type": "string" }, { "value": "optional", "type": "string" }, { "value": "required", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "singleMonthView", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "single-month-view", "reflectToAttr": false, "docs": "This boolean displays only one month at a time.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "tooltip", "type": "string", "complexType": { "original": "string | null", "resolved": "string", "references": {} }, "mutable": false, "attr": "tooltip", "reflectToAttr": false, "docs": "This property is used to set the tooltip text.", "docsTags": [ { "name": "default", "text": "null" } ], "default": "null", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "value", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": true, "attr": "value", "reflectToAttr": true, "docs": "This property sets the value of the input.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "verticalPosition", "type": "\"bottom\" | \"top\"", "complexType": { "original": "'top' | 'bottom'", "resolved": "\"bottom\" | \"top\"", "references": {} }, "mutable": false, "attr": "vertical-position", "reflectToAttr": false, "docs": "This property sets the vertical position of the date picker popover.", "docsTags": [ { "name": "default", "text": "'bottom'" } ], "default": "'bottom'", "values": [ { "value": "bottom", "type": "string" }, { "value": "top", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "resetValue", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "resetValue() => Promise", "parameters": [], "docs": "This method resets the date picker value to null.", "docsTags": [] } ], "events": [ { "event": "dateChanged", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is fired whenever a new date is selected.", "docsTags": [ { "name": "Returns", "text": "`event.detail` will contain the current selected date." } ] } ], "listeners": [ { "event": "blur", "target": "window", "capture": true, "passive": false }, { "event": "focus", "target": "window", "capture": true, "passive": false }, { "event": "resize", "target": "window", "capture": false, "passive": true }, { "event": "keydown", "capture": false, "passive": false } ], "styles": [], "slots": [ { "name": "label", "docs": "Label for the date picker input. Alternatively, you can use the label attribute." } ], "parts": [], "dependents": [], "dependencies": [ "som-button", "som-tooltip", "som-date-picker-mobile", "som-popover", "som-date-picker" ], "dependencyGraph": { "som-date-picker-input": [ "som-button", "som-tooltip", "som-date-picker-mobile", "som-popover", "som-date-picker" ], "som-button": [ "som-spinner" ], "som-date-picker-mobile": [ "som-icon", "som-date-range-picker", "som-date-picker", "som-button" ], "som-date-range-picker": [ "som-calendar-vertical", "som-calendar" ], "som-calendar-vertical": [ "som-button" ], "som-calendar": [ "som-icon" ], "som-date-picker": [ "som-calendar-vertical", "som-calendar" ] } }, { "filePath": "src/components/som-date-picker-mobile/som-date-picker-mobile.tsx", "encapsulation": "none", "tag": "som-date-picker-mobile", "docs": "", "docsTags": [], "usage": {}, "props": [ { "name": "date1", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "date-1", "reflectToAttr": false, "docs": "", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "date2", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "date-2", "reflectToAttr": false, "docs": "", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "enableRangePicker", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "enable-range-picker", "reflectToAttr": false, "docs": "", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "focusInputOnShow", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "focus-input-on-show", "reflectToAttr": false, "docs": "", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "format", "type": "\"MM-DD-YYYY\" | \"MM/DD/YYYY\" | \"YYYY-MM-DD\" | \"YYYY/MM/DD\"", "complexType": { "original": "'MM-DD-YYYY' | 'MM/DD/YYYY' | 'YYYY-MM-DD' | 'YYYY/MM/DD'", "resolved": "\"MM-DD-YYYY\" | \"MM/DD/YYYY\" | \"YYYY-MM-DD\" | \"YYYY/MM/DD\"", "references": {} }, "mutable": false, "attr": "format", "reflectToAttr": false, "docs": "", "docsTags": [ { "name": "default", "text": "'MM/DD/YYYY'" } ], "default": "'MM/DD/YYYY'", "values": [ { "value": "MM-DD-YYYY", "type": "string" }, { "value": "MM/DD/YYYY", "type": "string" }, { "value": "YYYY-MM-DD", "type": "string" }, { "value": "YYYY/MM/DD", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "maxDate", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "max-date", "reflectToAttr": false, "docs": "This property shows the maximum date that can be selected.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "minDate", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "min-date", "reflectToAttr": false, "docs": "This property shows the minimum date that can be selected.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "show", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": true, "attr": "show", "reflectToAttr": true, "docs": "", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "value1", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": true, "attr": "value-1", "reflectToAttr": true, "docs": "", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "value2", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": true, "attr": "value-2", "reflectToAttr": true, "docs": "", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "reset", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "reset() => Promise", "parameters": [], "docs": "", "docsTags": [] } ], "events": [ { "event": "close", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "", "docsTags": [] }, { "event": "datesChanged", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "", "docsTags": [] } ], "listeners": [ { "event": "keydown", "capture": false, "passive": false } ], "styles": [], "slots": [], "parts": [], "dependents": [ "som-date-picker-input", "som-date-range-picker-button" ], "dependencies": [ "som-icon", "som-date-range-picker", "som-date-picker", "som-button" ], "dependencyGraph": { "som-date-picker-mobile": [ "som-icon", "som-date-range-picker", "som-date-picker", "som-button" ], "som-date-range-picker": [ "som-calendar-vertical", "som-calendar" ], "som-calendar-vertical": [ "som-button" ], "som-button": [ "som-spinner" ], "som-calendar": [ "som-icon" ], "som-date-picker": [ "som-calendar-vertical", "som-calendar" ], "som-date-picker-input": [ "som-date-picker-mobile" ], "som-date-range-picker-button": [ "som-date-picker-mobile" ] } }, { "filePath": "src/components/som-date-range-picker/som-date-range-picker.tsx", "encapsulation": "none", "tag": "som-date-range-picker", "docs": "", "docsTags": [], "usage": {}, "props": [ { "name": "endDate", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": true, "attr": "end-date", "reflectToAttr": true, "docs": "This property sets the end date.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "maxDate", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "max-date", "reflectToAttr": false, "docs": "This property represents the maximum date that can be selected.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "minDate", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "min-date", "reflectToAttr": false, "docs": "This property represents the minimum date that can be selected.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "readonly", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "readonly", "reflectToAttr": false, "docs": "When set to `true`, this property sets the date range picker to read only.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "startDate", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": true, "attr": "start-date", "reflectToAttr": true, "docs": "This property sets the start date.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "vertical", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "vertical", "reflectToAttr": false, "docs": "Switch the date range picker to vertical mode allowing users to navigate months vertically instead of horizontally.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "reset", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "reset() => Promise", "parameters": [], "docs": "This method resets the date range picker.", "docsTags": [] }, { "name": "setFocus", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "setFocus() => Promise", "parameters": [], "docs": "This method sets the focus onto the date range picker.", "docsTags": [] } ], "events": [ { "event": "datesChanged", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted whenever new dates are selected.", "docsTags": [ { "name": "Returns", "text": "`event.detail` will contain the new start date and end date. \n\nStart Date : `event.detail.startDate`\n\nEnd Date : `event.detail.endDate`" } ] } ], "listeners": [ { "event": "resize", "target": "window", "capture": false, "passive": true } ], "styles": [], "slots": [], "parts": [], "dependents": [ "som-date-picker-mobile", "som-date-range-picker-button" ], "dependencies": [ "som-calendar-vertical", "som-calendar" ], "dependencyGraph": { "som-date-range-picker": [ "som-calendar-vertical", "som-calendar" ], "som-calendar-vertical": [ "som-button" ], "som-button": [ "som-spinner" ], "som-calendar": [ "som-icon" ], "som-date-picker-mobile": [ "som-date-range-picker" ], "som-date-range-picker-button": [ "som-date-range-picker" ] } }, { "filePath": "src/components/som-date-range-picker-button/som-date-range-picker-button.tsx", "encapsulation": "none", "tag": "som-date-range-picker-button", "docs": "", "docsTags": [], "usage": {}, "props": [ { "name": "buttonAriaLabel", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "button-aria-label", "reflectToAttr": false, "docs": "This property can be used to set the ARIA label associated with this input (for screen readers).", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "buttonColor", "type": "\"danger\" | \"gray\" | \"nav\" | \"primary\" | \"secondary\" | \"white\"", "complexType": { "original": "'primary' | 'secondary' | 'white' | 'nav' | 'gray' | 'danger'", "resolved": "\"danger\" | \"gray\" | \"nav\" | \"primary\" | \"secondary\" | \"white\"", "references": {} }, "mutable": false, "attr": "button-color", "reflectToAttr": false, "docs": "This property determines the color of the button.", "docsTags": [ { "name": "default", "text": "'gray'" } ], "default": "'gray'", "values": [ { "value": "danger", "type": "string" }, { "value": "gray", "type": "string" }, { "value": "nav", "type": "string" }, { "value": "primary", "type": "string" }, { "value": "secondary", "type": "string" }, { "value": "white", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "buttonIcon", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "button-icon", "reflectToAttr": false, "docs": "This property determines which icon to be placed. It should be used in conjunction with iconPosition.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "buttonIconPosition", "type": "\"left\" | \"none\" | \"only\" | \"right\"", "complexType": { "original": "'left' | 'right' | 'only' | 'none'", "resolved": "\"left\" | \"none\" | \"only\" | \"right\"", "references": {} }, "mutable": false, "attr": "button-icon-position", "reflectToAttr": false, "docs": "This property determines which side of the button the icon should appear.", "docsTags": [ { "name": "default", "text": "'none'" } ], "default": "'none'", "values": [ { "value": "left", "type": "string" }, { "value": "none", "type": "string" }, { "value": "only", "type": "string" }, { "value": "right", "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "buttonLabel", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "button-label", "reflectToAttr": false, "docs": "This property determines the initial label of the button. Once a date range is selected, the label will switch to the selected values.", "docsTags": [ { "name": "default", "text": "'Select Date Range'" } ], "default": "'Select Date Range'", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "buttonSize", "type": "\"block\" | \"lg\" | \"md\" | \"sm\"", "complexType": { "original": "'sm' | 'md' | 'lg' | 'block'", "resolved": "\"block\" | \"lg\" | \"md\" | \"sm\"", "references": {} }, "mutable": false, "attr": "button-size", "reflectToAttr": false, "docs": "This property determines the size of the button.", "docsTags": [ { "name": "default", "text": "'md'" } ], "default": "'md'", "values": [ { "value": "block", "type": "string" }, { "value": "lg", "type": "string" }, { "value": "md", "type": "string" }, { "value": "sm", "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "buttonType", "type": "\"clear\" | \"default\" | \"outline\"", "complexType": { "original": "'default' | 'outline' | 'clear'", "resolved": "\"clear\" | \"default\" | \"outline\"", "references": {} }, "mutable": false, "attr": "button-type", "reflectToAttr": false, "docs": "This property determines the button style.", "docsTags": [ { "name": "default", "text": "'default'" } ], "default": "'default'", "values": [ { "value": "clear", "type": "string" }, { "value": "default", "type": "string" }, { "value": "outline", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "disabled", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "disabled", "reflectToAttr": false, "docs": "This property is used to set the date picker as disabled.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "endDate", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": true, "attr": "end-date", "reflectToAttr": true, "docs": "This property sets the end date.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "format", "type": "\"MM-DD-YYYY\" | \"MM/DD/YYYY\" | \"YYYY-MM-DD\" | \"YYYY/MM/DD\"", "complexType": { "original": "'MM-DD-YYYY' | 'MM/DD/YYYY' | 'YYYY-MM-DD' | 'YYYY/MM/DD'", "resolved": "\"MM-DD-YYYY\" | \"MM/DD/YYYY\" | \"YYYY-MM-DD\" | \"YYYY/MM/DD\"", "references": {} }, "mutable": false, "attr": "format", "reflectToAttr": false, "docs": "This property sets the date format.", "docsTags": [ { "name": "default", "text": "'MM/DD/YYYY'" } ], "default": "'MM/DD/YYYY'", "values": [ { "value": "MM-DD-YYYY", "type": "string" }, { "value": "MM/DD/YYYY", "type": "string" }, { "value": "YYYY-MM-DD", "type": "string" }, { "value": "YYYY/MM/DD", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "horizontalPosition", "type": "\"left\" | \"right\"", "complexType": { "original": "'left' | 'right'", "resolved": "\"left\" | \"right\"", "references": {} }, "mutable": false, "attr": "horizontal-position", "reflectToAttr": false, "docs": "This property sets the horizontal position of the date picker popover.", "docsTags": [ { "name": "default", "text": "'left'" } ], "default": "'left'", "values": [ { "value": "left", "type": "string" }, { "value": "right", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "loading", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "loading", "reflectToAttr": false, "docs": "This property is used to toggle the loading mode.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "maxDate", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "max-date", "reflectToAttr": false, "docs": "This property shows the maximum date that can be selected.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "minDate", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "min-date", "reflectToAttr": false, "docs": "This property shows the minimum date that can be selected.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "name", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "name", "reflectToAttr": false, "docs": "This property is the form element name (used when submitting the form).", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "startDate", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": true, "attr": "start-date", "reflectToAttr": true, "docs": "This property sets the start date.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "verticalPosition", "type": "\"bottom\" | \"top\"", "complexType": { "original": "'top' | 'bottom'", "resolved": "\"bottom\" | \"top\"", "references": {} }, "mutable": false, "attr": "vertical-position", "reflectToAttr": false, "docs": "This property sets the vertical position of the date picker popover.", "docsTags": [ { "name": "default", "text": "'bottom'" } ], "default": "'bottom'", "values": [ { "value": "bottom", "type": "string" }, { "value": "top", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "valueChange", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted when the date range changes.", "docsTags": [] } ], "listeners": [ { "event": "blur", "target": "window", "capture": true, "passive": false }, { "event": "focus", "target": "window", "capture": true, "passive": false }, { "event": "resize", "target": "window", "capture": false, "passive": true }, { "event": "keydown", "capture": false, "passive": false } ], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [ "som-icon", "som-button", "som-date-picker-mobile", "som-popover", "som-date-range-picker" ], "dependencyGraph": { "som-date-range-picker-button": [ "som-icon", "som-button", "som-date-picker-mobile", "som-popover", "som-date-range-picker" ], "som-button": [ "som-spinner" ], "som-date-picker-mobile": [ "som-icon", "som-date-range-picker", "som-date-picker", "som-button" ], "som-date-range-picker": [ "som-calendar-vertical", "som-calendar" ], "som-calendar-vertical": [ "som-button" ], "som-calendar": [ "som-icon" ], "som-date-picker": [ "som-calendar-vertical", "som-calendar" ] } }, { "filePath": "src/components/som-dialog/som-dialog.tsx", "encapsulation": "none", "tag": "som-dialog", "docs": "Dialog are overlays that interrupt user interaction and demand a confirmation.", "docsTags": [], "usage": {}, "props": [ { "name": "cancelText", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "cancel-text", "reflectToAttr": false, "docs": "This property is used to customize the text of the cancel option in a confirmation dialog.", "docsTags": [ { "name": "default", "text": "'Cancel'" } ], "default": "'Cancel'", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "confirmText", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "confirm-text", "reflectToAttr": false, "docs": "This property is used to customize the text of the confirm option in a confirmation dialog.", "docsTags": [ { "name": "default", "text": "'Confirm'" } ], "default": "'Confirm'", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "description", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "description", "reflectToAttr": false, "docs": "This property will be used to further describe the dialog to users with screen readers. It won’t be displayed on the screen.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "dialogAriaLabel", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "dialog-aria-label", "reflectToAttr": false, "docs": "This property sets the aria label of the dialog.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "enableKeyboardClose", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "enable-keyboard-close", "reflectToAttr": false, "docs": "This boolean property is used to enable closing the dialog with keyboard's `ESC` key.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "enableOverlayClose", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "enable-overlay-close", "reflectToAttr": false, "docs": "This boolean property is used to enable closing the dialog when clicking on the overlay outside of the dialog.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "headline", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "headline", "reflectToAttr": false, "docs": "This property will be displayed in the header of your dialog.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "hideCloseButton", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "hide-close-button", "reflectToAttr": false, "docs": "This boolean property is used to hide the header's close button.", "docsTags": [ { "name": "default", "text": "true" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "isDestructive", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "is-destructive", "reflectToAttr": false, "docs": "This boolean property is used to determine what color the confirm action button will be in a confirmation dialog.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "size", "type": "\"lg\" | \"md\" | \"sm\"", "complexType": { "original": "'sm' | 'md' | 'lg'", "resolved": "\"lg\" | \"md\" | \"sm\"", "references": {} }, "mutable": false, "attr": "size", "reflectToAttr": false, "docs": "This property is used to control the width of the dialog.", "docsTags": [ { "name": "default", "text": "'md'" } ], "default": "'md'", "values": [ { "value": "lg", "type": "string" }, { "value": "md", "type": "string" }, { "value": "sm", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "close", "returns": { "type": "Promise", "docs": "Promise will resolve when the close animation ends." }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "close() => Promise", "parameters": [], "docs": "This method will close the dialog.", "docsTags": [ { "name": "returns", "text": "Promise will resolve when the close animation ends." } ] }, { "name": "open", "returns": { "type": "Promise", "docs": "Promise will resolve when the open animation ends." }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "open() => Promise", "parameters": [], "docs": "This method will open the dialog.", "docsTags": [ { "name": "returns", "text": "Promise will resolve when the open animation ends." } ] }, { "name": "refresh", "returns": { "type": "Promise", "docs": "Promise will resolve after the refresh." }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "refresh() => Promise", "parameters": [], "docs": "This method will refresh the dialog. This is useful when dialog data is loaded asynchronously, which allows the component to find elements to focus on and provide accessibility support.", "docsTags": [ { "name": "returns", "text": "Promise will resolve after the refresh." } ] } ], "events": [ { "event": "dialogClose", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted after the dialog closes.", "docsTags": [] }, { "event": "dialogConfirm", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted when a confirmation button is clicked. The boolean `event.detail.confirmation` is returned, where confirm is equal to `true` and cancel is equal to `false`.", "docsTags": [ { "name": "Returns", "text": "`event.detail` will contain the confirmation status in as a `boolean` value where confirm is equal to `true` and cancel is equal to `false`." } ] }, { "event": "dialogOpen", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted before the dialog opens.", "docsTags": [] } ], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [ "som-modal", "som-button" ], "dependencyGraph": { "som-dialog": [ "som-modal", "som-button" ], "som-modal": [ "som-icon" ], "som-button": [ "som-spinner" ] } }, { "filePath": "src/components/som-footer/som-footer.tsx", "encapsulation": "shadow", "tag": "som-footer", "docs": "Footers signify the end of page content and provide required information that a user may have missed. Footers should stay thematically the same throughout a digital product, in the effort to create a cohesive user experience.", "docsTags": [], "usage": {}, "props": [ { "name": "light", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "light", "reflectToAttr": false, "docs": "This boolean determines whether to use the light or dark theme. Dark is the default but adding the light parameter will switch it to the light theme.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [ "som-footer-item" ], "dependencyGraph": { "som-footer": [ "som-footer-item" ] } }, { "filePath": "src/components/som-footer-item/som-footer-item.tsx", "encapsulation": "none", "tag": "som-footer-item", "docs": "Footer Items provide an area for application or business specific links in the footer.", "docsTags": [], "usage": {}, "props": [ { "name": "showDivider", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "show-divider", "reflectToAttr": false, "docs": "This boolean shows the visual divider between items.", "docsTags": [ { "name": "default", "text": "true" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [ "som-footer" ], "dependencies": [], "dependencyGraph": { "som-footer": [ "som-footer-item" ] } }, { "filePath": "src/components/som-grid/som-grid.tsx", "encapsulation": "none", "tag": "som-grid", "docs": "Grids are used when displaying a data table.", "docsTags": [], "usage": {}, "props": [ { "name": "borders", "type": "\"all\" | \"none\" | \"outside\"", "complexType": { "original": "'none' | 'all' | 'outside'", "resolved": "\"all\" | \"none\" | \"outside\"", "references": {} }, "mutable": false, "attr": "borders", "reflectToAttr": false, "docs": "This is the value used to set the table style as bordered.", "docsTags": [ { "name": "default", "text": "'none'" } ], "default": "'none'", "values": [ { "value": "all", "type": "string" }, { "value": "none", "type": "string" }, { "value": "outside", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "hoverable", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "hoverable", "reflectToAttr": false, "docs": "This boolean is the value used to set the table style as hoverable.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "labelledBy", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "labelled-by", "reflectToAttr": false, "docs": "This is the DOM element ID used to label this table. This is used for accessibility.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "loading", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "loading", "reflectToAttr": true, "docs": "This boolean is used to set the grid in `loading` mode.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "loadingMessage", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "loading-message", "reflectToAttr": false, "docs": "This property is the message to be displayed when loading property is set to `true`.", "docsTags": [ { "name": "default", "text": "'loading...'" } ], "default": "'loading...'", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "sortDirection", "type": "\"ascending\" | \"descending\" | \"none\"", "complexType": { "original": "'none' | 'ascending' | 'descending'", "resolved": "\"ascending\" | \"descending\" | \"none\"", "references": {} }, "mutable": false, "attr": "sort-direction", "reflectToAttr": true, "docs": "This property represents the direction for sorting.\nPossible values: `\"none\"`, `\"ascending\"`, `\"descending\"`", "docsTags": [ { "name": "default", "text": "'none'" } ], "default": "'none'", "values": [ { "value": "ascending", "type": "string" }, { "value": "descending", "type": "string" }, { "value": "none", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "sortOn", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "sort-on", "reflectToAttr": true, "docs": "This property turns column sorting on. This is used with `` and should be set to the name of the column being sorted.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "striped", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "striped", "reflectToAttr": false, "docs": "This boolean is the value used to set the table style as striped.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "sortCompleted", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "(_sortOn: any, _sortDirection: any) => Promise", "parameters": [ { "name": "_sortOn", "type": "any", "docs": "" }, { "name": "_sortDirection", "type": "any", "docs": "" } ], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "sortCompleted(_sortOn: any, _sortDirection: any) => Promise", "parameters": [ { "name": "_sortOn", "type": "any", "docs": "" }, { "name": "_sortDirection", "type": "any", "docs": "" } ], "docs": "This public method sets `sort-on` and `sort-direction`.", "docsTags": [] } ], "events": [ { "event": "sortChange", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event will be triggered when a column sorting is emitted by a column header", "docsTags": [] } ], "listeners": [ { "event": "resize", "target": "window", "capture": false, "passive": true }, { "event": "columnSortDirectionChange", "capture": false, "passive": false }, { "event": "click", "capture": false, "passive": false }, { "event": "keydown", "capture": false, "passive": false } ], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [ "som-spinner" ], "dependencyGraph": { "som-grid": [ "som-spinner" ] } }, { "filePath": "src/components/som-grid-th/som-grid-th.tsx", "encapsulation": "none", "tag": "som-grid-th", "docs": "", "docsTags": [], "usage": {}, "props": [ { "name": "direction", "type": "\"ascending\" | \"descending\" | \"none\"", "complexType": { "original": "'none' | 'ascending' | 'descending'", "resolved": "\"ascending\" | \"descending\" | \"none\"", "references": {} }, "mutable": false, "attr": "direction", "reflectToAttr": false, "docs": "This property sets the sorting direction of the data grid.", "docsTags": [ { "name": "default", "text": "'none'" } ], "default": "'none'", "values": [ { "value": "ascending", "type": "string" }, { "value": "descending", "type": "string" }, { "value": "none", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "name", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "name", "reflectToAttr": false, "docs": "This property sets the name of the data grid column.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "sortable", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "sortable", "reflectToAttr": false, "docs": "This property determines if a column is sortable.", "docsTags": [ { "name": "default", "text": "true" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "columnSortDirectionChange", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event will be triggered any time sorting is changed.", "docsTags": [] } ], "listeners": [ { "event": "keydown", "capture": false, "passive": false }, { "event": "click", "capture": false, "passive": false } ], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [ "som-icon" ], "dependencyGraph": { "som-grid-th": [ "som-icon" ] } }, { "filePath": "src/components/som-header/som-header.tsx", "encapsulation": "shadow", "tag": "som-header", "docs": "", "docsTags": [ { "name": "slot", "text": "header-menu - This slot is used for the main horizontal header menu." }, { "name": "slot", "text": "panel-menu - This slot is used for the fly out panel menu." } ], "usage": {}, "props": [ { "name": "appName", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "app-name", "reflectToAttr": false, "docs": "This property is the name of the application.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "breakpoint", "type": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\"", "complexType": { "original": "'sm' | 'md' | 'lg' | 'xl' | 'none'", "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\"", "references": {} }, "mutable": false, "attr": "breakpoint", "reflectToAttr": false, "docs": "This property is the breakpoint where the mobile navigation should take effect. Setting the value to `\"none\"` will always show the flyout menu.", "docsTags": [ { "name": "default", "text": "'lg'" } ], "default": "'lg'", "values": [ { "value": "lg", "type": "string" }, { "value": "md", "type": "string" }, { "value": "none", "type": "string" }, { "value": "sm", "type": "string" }, { "value": "xl", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "departmentName", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "department-name", "reflectToAttr": false, "docs": "This property is the name of the department where the application resides.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "homeLink", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "home-link", "reflectToAttr": false, "docs": "This optional property is used to set a link on the header logo and title text.", "docsTags": [ { "name": "default", "text": "null" } ], "default": "null", "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "mainContentId", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "main-content-id", "reflectToAttr": false, "docs": "This property is the ID of the main content section of the application. It is used to establish a connection for the \"skip navigation\" link.\nThis is a **required** field", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "overrideHomeLink", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "override-home-link", "reflectToAttr": false, "docs": "This boolean property will fire an event instead of navigating to the home link when the value is set to true.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "sticky", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "sticky", "reflectToAttr": false, "docs": "This boolean determines if the header should stick to the top of scroll with the content", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "closePanelMenu", "returns": { "type": "Promise", "docs": "Promise will resolve when the close animation ends." }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "closePanelMenu() => Promise", "parameters": [], "docs": "This method will close the panel menu if opened. It can be useful when a menu link is clicked but the page doesn't refresh.", "docsTags": [ { "name": "returns", "text": "Promise will resolve when the close animation ends." } ] } ], "events": [ { "event": "homeLinkClicked", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is triggered when a user clicks on the home link and the `override-home-link` is set to true. This is useful if you need to interrupt the user flow such as warning a user they may have unsaved changes.", "docsTags": [] } ], "listeners": [ { "event": "resize", "target": "window", "capture": false, "passive": true }, { "event": "menuClosed", "capture": false, "passive": false }, { "event": "menuOpened", "capture": false, "passive": false } ], "styles": [], "slots": [ { "name": "header-menu", "docs": "This slot is used for the main horizontal header menu." }, { "name": "panel-menu", "docs": "This slot is used for the fly out panel menu." } ], "parts": [], "dependents": [], "dependencies": [ "som-icon", "som-panel" ], "dependencyGraph": { "som-header": [ "som-icon", "som-panel" ], "som-panel": [ "som-icon" ] } }, { "filePath": "src/components/som-icon/som-icon.tsx", "encapsulation": "shadow", "tag": "som-icon", "docs": "", "docsTags": [], "usage": {}, "props": [ { "name": "color", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "color", "reflectToAttr": false, "docs": "This property represents the color of the icon. By default, the color will match the current font color. However, you can override this color by passing in the name of SASS variable (`primary`, `secondary`, `success`, `warning`, `danger`, `black`, `white`, `dark-gray`, `light-gray`, `body-copy`, `caption`).", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "display", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "display", "reflectToAttr": false, "docs": "This property represents the CSS display property. In certain circumstances you may need to adjust the display property to properly align the icon.", "docsTags": [ { "name": "default", "text": "'inline-block'" } ], "default": "'inline-block'", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "name", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "name", "reflectToAttr": true, "docs": "The name of the icon", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "size", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "size", "reflectToAttr": false, "docs": "This property represents the size of the icon. By default, the size will be determined by the current font size. However, you can override this size using pre-built sizes (`sm`, `md`, `lg`, `xl`).", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "url", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "url", "reflectToAttr": false, "docs": "This property represents the URL of the icon. If this property is provided, the icon will be fetched from the URL instead of the default path.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [ "som-accordion", "som-alert", "som-badge", "som-button-dropdown", "som-calendar", "som-date-picker-mobile", "som-date-range-picker-button", "som-grid-th", "som-header", "som-mobile-subheader", "som-modal", "som-panel", "som-toast", "som-toggle" ], "dependencies": [], "dependencyGraph": { "som-accordion": [ "som-icon" ], "som-alert": [ "som-icon" ], "som-badge": [ "som-icon" ], "som-button-dropdown": [ "som-icon" ], "som-calendar": [ "som-icon" ], "som-date-picker-mobile": [ "som-icon" ], "som-date-range-picker-button": [ "som-icon" ], "som-grid-th": [ "som-icon" ], "som-header": [ "som-icon" ], "som-mobile-subheader": [ "som-icon" ], "som-modal": [ "som-icon" ], "som-panel": [ "som-icon" ], "som-toast": [ "som-icon" ], "som-toggle": [ "som-icon" ] } }, { "filePath": "src/components/som-input/som-input.tsx", "encapsulation": "none", "tag": "som-input", "docs": "", "docsTags": [ { "name": "slot", "text": "label - Label for the The input. Alternatively, you can use the label attribute." }, { "name": "slot", "text": "before-input - This slot is used to place an icon or prefix at the start of the input." }, { "name": "slot", "text": "after-input - This slot is used to place an icon or suffix at the end of the input." } ], "usage": {}, "props": [ { "name": "autocomplete", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "autocomplete", "reflectToAttr": false, "docs": "This property indicates that the value of the control can be automatically completed by the browser.", "docsTags": [ { "name": "default", "text": "'off'" } ], "default": "'off'", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "disabled", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "disabled", "reflectToAttr": false, "docs": "This boolean can be used to disable the text input.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "error", "type": "string", "complexType": { "original": "string | null", "resolved": "string", "references": {} }, "mutable": false, "attr": "error", "reflectToAttr": false, "docs": "This property can be used to set an error. If a non-empty string is given, it will be used as the error message.", "docsTags": [ { "name": "default", "text": "null" } ], "default": "null", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "grouped", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "grouped", "reflectToAttr": false, "docs": "This boolean property is used when passing a children component to a text input as a grouped element.", "docsTags": [ { "name": "deprecated", "text": "with version 4.0.2 release" }, { "name": "default", "text": "false" } ], "default": "false", "deprecation": "with version 4.0.2 release", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "help", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "help", "reflectToAttr": false, "docs": "This property can be used to set a help text.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "hideLabel", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "hide-label", "reflectToAttr": false, "docs": "This property will visually hide the label. A label is still required to be provided for screenreader support.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "inputAriaLabel", "type": "string", "complexType": { "original": "string | null", "resolved": "string", "references": {} }, "mutable": false, "attr": "input-aria-label", "reflectToAttr": false, "docs": "This property can be used to set the ARIA label associated with this input (for screen readers).", "docsTags": [ { "name": "default", "text": "null" } ], "default": "null", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "inputId", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "input-id", "reflectToAttr": false, "docs": "This property can be used to specifically set an ID to the input field. If an ID is not provided, it will be dynamically generated.", "docsTags": [ { "name": "default", "text": "generateId('som-input')" } ], "default": "generateId('som-input')", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": false, "docs": "This property can be used to set a label.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "labelClass", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label-class", "reflectToAttr": false, "docs": "This property is a list of CSS classes that can be used to style the label.", "docsTags": [ { "name": "deprecated", "text": "with version 4.0.1 release" }, { "name": "default", "text": "''" } ], "default": "''", "deprecation": "with version 4.0.1 release", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "max", "type": "number | string", "complexType": { "original": "string | number", "resolved": "number | string", "references": {} }, "mutable": false, "attr": "max", "reflectToAttr": false, "docs": "This property sets the maximum value of the input.", "docsTags": [], "values": [ { "type": "number" }, { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "maxlength", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "maxlength", "reflectToAttr": false, "docs": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.", "docsTags": [], "values": [ { "type": "number" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "min", "type": "number | string", "complexType": { "original": "string | number", "resolved": "number | string", "references": {} }, "mutable": false, "attr": "min", "reflectToAttr": false, "docs": "This property sets the minimum value, which must not be greater than its maximum (max attribute) value.", "docsTags": [], "values": [ { "type": "number" }, { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "name", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "name", "reflectToAttr": false, "docs": "This property can be used to set the form field name (used when submitting the form).", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "placeholder", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "placeholder", "reflectToAttr": false, "docs": "This property can be used to set a placeholder text.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "readonly", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "readonly", "reflectToAttr": false, "docs": "This boolean can be used to set the text input as readonly.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "required", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "required", "reflectToAttr": false, "docs": "This boolean can be used to set the input as required.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "requiredInd", "type": "\"none\" | \"optional\" | \"required\"", "complexType": { "original": "'required' | 'optional' | 'none'", "resolved": "\"none\" | \"optional\" | \"required\"", "references": {} }, "mutable": false, "attr": "required-ind", "reflectToAttr": false, "docs": "This property is used to override the required indicator. By default, forms elements will show an `optional` indicator\nbut some forms are better served showing the `required` indicator instead.", "docsTags": [], "values": [ { "value": "none", "type": "string" }, { "value": "optional", "type": "string" }, { "value": "required", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "step", "type": "number | string", "complexType": { "original": "string | number", "resolved": "number | string", "references": {} }, "mutable": false, "attr": "step", "reflectToAttr": false, "docs": "This property sets the interval between numbers in the input field.", "docsTags": [], "values": [ { "type": "number" }, { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "tooltip", "type": "string", "complexType": { "original": "string | null", "resolved": "string", "references": {} }, "mutable": false, "attr": "tooltip", "reflectToAttr": false, "docs": "This property is used to set the tooltip text.", "docsTags": [ { "name": "default", "text": "null" } ], "default": "null", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "type", "type": "\"date\" | \"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"time\" | \"url\"", "complexType": { "original": "'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'date' | 'time'", "resolved": "\"date\" | \"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"time\" | \"url\"", "references": {} }, "mutable": false, "attr": "type", "reflectToAttr": false, "docs": "This property can be used to set the type.", "docsTags": [ { "name": "default", "text": "'text'" } ], "default": "'text'", "values": [ { "value": "date", "type": "string" }, { "value": "email", "type": "string" }, { "value": "number", "type": "string" }, { "value": "password", "type": "string" }, { "value": "search", "type": "string" }, { "value": "tel", "type": "string" }, { "value": "text", "type": "string" }, { "value": "time", "type": "string" }, { "value": "url", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "value", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": true, "attr": "value", "reflectToAttr": true, "docs": "This property can be used to set the text input value.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "setFocus", "returns": { "type": "Promise", "docs": "Promise will resolve after focus." }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "setFocus() => Promise", "parameters": [], "docs": "This public method sets focus to the text input element.", "docsTags": [ { "name": "returns", "text": "Promise will resolve after focus." } ] } ], "events": [ { "event": "somBlur", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted when when the input field loses focus.", "docsTags": [] }, { "event": "somChange", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted when the input value changes.", "docsTags": [] }, { "event": "somFocus", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted when when the input field gets focus.", "docsTags": [] }, { "event": "somInput", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted when when a keyboard input occurs.", "docsTags": [] } ], "listeners": [], "styles": [], "slots": [ { "name": "after-input", "docs": "This slot is used to place an icon or suffix at the end of the input." }, { "name": "before-input", "docs": "This slot is used to place an icon or prefix at the start of the input." }, { "name": "label", "docs": "Label for the The input. Alternatively, you can use the label attribute." } ], "parts": [], "dependents": [], "dependencies": [ "som-button", "som-tooltip" ], "dependencyGraph": { "som-input": [ "som-button", "som-tooltip" ], "som-button": [ "som-spinner" ] } }, { "filePath": "src/components/som-list/som-list.tsx", "encapsulation": "shadow", "tag": "som-list", "docs": "Badges help draw attention to important content and can provide additional context to UI elements.", "docsTags": [], "usage": {}, "props": [ { "name": "type", "type": "\"dropdown\" | \"header\" | \"panel\" | \"sidebar\"", "complexType": { "original": "'header' | 'panel' | 'dropdown' | 'sidebar'", "resolved": "\"dropdown\" | \"header\" | \"panel\" | \"sidebar\"", "references": {} }, "mutable": false, "attr": "type", "reflectToAttr": false, "docs": "This property determines what style the list will use.", "docsTags": [ { "name": "default", "text": "'panel'" } ], "default": "'panel'", "values": [ { "value": "dropdown", "type": "string" }, { "value": "header", "type": "string" }, { "value": "panel", "type": "string" }, { "value": "sidebar", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [ { "event": "listOpened", "capture": false, "passive": false }, { "event": "beforeListClosed", "capture": false, "passive": false } ], "styles": [], "slots": [], "parts": [], "dependents": [ "som-combobox" ], "dependencies": [], "dependencyGraph": { "som-combobox": [ "som-list" ] } }, { "filePath": "src/components/som-list-header/som-list-header.tsx", "encapsulation": "scoped", "tag": "som-list-header", "docs": "Badges help draw attention to important content and can provide additional context to UI elements.", "docsTags": [], "usage": {}, "props": [], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/som-list-item/som-list-item.tsx", "encapsulation": "scoped", "tag": "som-list-item", "docs": "Badges help draw attention to important content and can provide additional context to UI elements.", "docsTags": [], "usage": {}, "props": [ { "name": "active", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "active", "reflectToAttr": false, "docs": "This boolean is used to set the active list item.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "showDivider", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "show-divider", "reflectToAttr": false, "docs": "This boolean is used to set the divider.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "type", "type": "\"dropdown\" | \"header\" | \"panel\" | \"sidebar\"", "complexType": { "original": "'header' | 'panel' | 'dropdown' | 'sidebar'", "resolved": "\"dropdown\" | \"header\" | \"panel\" | \"sidebar\"", "references": {} }, "mutable": false, "attr": "type", "reflectToAttr": true, "docs": "This property determines what style the list will use.", "docsTags": [ { "name": "default", "text": "'panel'" } ], "default": "'panel'", "values": [ { "value": "dropdown", "type": "string" }, { "value": "header", "type": "string" }, { "value": "panel", "type": "string" }, { "value": "sidebar", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [ "som-combobox" ], "dependencies": [], "dependencyGraph": { "som-combobox": [ "som-list-item" ] } }, { "filePath": "src/components/som-list-parent-item/som-list-parent-item.tsx", "encapsulation": "scoped", "tag": "som-list-parent-item", "docs": "Badges help draw attention to important content and can provide additional context to UI elements.", "docsTags": [], "usage": {}, "props": [ { "name": "collapsed", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": true, "attr": "collapsed", "reflectToAttr": true, "docs": "This property will toggle the open state.", "docsTags": [ { "name": "default", "text": "true" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "displayName", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "display-name", "reflectToAttr": false, "docs": "This property represents the name that is displayed as the parent in the list.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "horizontalPosition", "type": "\"left\" | \"right\"", "complexType": { "original": "'right' | 'left'", "resolved": "\"left\" | \"right\"", "references": {} }, "mutable": false, "attr": "horizontal-position", "reflectToAttr": false, "docs": "This property represents the horizontal position of the dropdown menu. This is used for header menu items with children and is helpful when the last item aligns to the right.", "docsTags": [ { "name": "default", "text": "'left'" } ], "default": "'left'", "values": [ { "value": "left", "type": "string" }, { "value": "right", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "showDivider", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "show-divider", "reflectToAttr": false, "docs": "This Boolean is used to set the divider.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "type", "type": "\"header\" | \"panel\" | \"sidebar\"", "complexType": { "original": "'header' | 'panel' | 'sidebar'", "resolved": "\"header\" | \"panel\" | \"sidebar\"", "references": {} }, "mutable": false, "attr": "type", "reflectToAttr": true, "docs": "This property identifies the type of list.", "docsTags": [ { "name": "default", "text": "'panel'" } ], "default": "'panel'", "values": [ { "value": "header", "type": "string" }, { "value": "panel", "type": "string" }, { "value": "sidebar", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "close", "returns": { "type": "Promise", "docs": "Promise will resolve when the close animation ends." }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "close() => Promise", "parameters": [], "docs": "This method will close the panel.", "docsTags": [ { "name": "returns", "text": "Promise will resolve when the close animation ends." } ] }, { "name": "open", "returns": { "type": "Promise", "docs": "Promise will resolve when the open animation ends." }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "open() => Promise", "parameters": [], "docs": "This method will open the panel.", "docsTags": [ { "name": "returns", "text": "Promise will resolve when the open animation ends." } ] } ], "events": [ { "event": "beforeListClosed", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted before the list closes.", "docsTags": [] }, { "event": "beforeListOpened", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted before the list opens.", "docsTags": [] }, { "event": "listClosed", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted after the list closes.", "docsTags": [] }, { "event": "listOpened", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted after the list opens.", "docsTags": [] } ], "listeners": [ { "event": "beforeClose", "target": "window", "capture": false, "passive": false } ], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [ "som-button-dropdown", "som-accordion" ], "dependencyGraph": { "som-list-parent-item": [ "som-button-dropdown", "som-accordion" ], "som-button-dropdown": [ "som-button", "som-icon", "som-popover" ], "som-button": [ "som-spinner" ], "som-accordion": [ "som-icon", "som-collapse" ] } }, { "filePath": "src/components/som-mobile-subheader/som-mobile-subheader.tsx", "encapsulation": "none", "tag": "som-mobile-subheader", "docs": "The mobile subheader should only be used in conjunction with the [header component](/header). It is designed to provide an easy mechanism for handling complex navigation items on smaller screens. This is particularly useful when you have multiple navigation menus on the same page such as a main menu and side menu.", "docsTags": [], "usage": {}, "props": [ { "name": "breakpoint", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "breakpoint", "reflectToAttr": false, "docs": "This property is the breakpoint where the mobile navigation should take effect.", "docsTags": [ { "name": "default", "text": "'lg'" } ], "default": "'lg'", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "subheaderTitle", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "subheader-title", "reflectToAttr": false, "docs": "This property is the title of mobile subheader.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "closeMobileMenu", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "closeMobileMenu() => Promise", "parameters": [], "docs": "", "docsTags": [] } ], "events": [], "listeners": [ { "event": "resize", "target": "window", "capture": false, "passive": true } ], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [ "som-icon", "som-panel" ], "dependencyGraph": { "som-mobile-subheader": [ "som-icon", "som-panel" ], "som-panel": [ "som-icon" ] } }, { "filePath": "src/components/som-modal/som-modal.tsx", "encapsulation": "none", "tag": "som-modal", "docs": "Modal dialogs are full screen overlays that interrupt user interaction and demand an action. They are appropriate when user’s attention needs to be directed toward important information.", "docsTags": [], "usage": {}, "props": [ { "name": "description", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "description", "reflectToAttr": false, "docs": "This property will not be displayed on the screen but will be used to further describe the modal to screen reader users.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "enableKeyboardClose", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "enable-keyboard-close", "reflectToAttr": false, "docs": "This boolean is used to enable closing the modal with keyboard's ESC key.", "docsTags": [ { "name": "default", "text": "true" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "enableOverlayClose", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "enable-overlay-close", "reflectToAttr": false, "docs": "This boolean is used to enable closing the modal when clicking on the overlay outside of the modal.", "docsTags": [ { "name": "default", "text": "true" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "headline", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "headline", "reflectToAttr": false, "docs": "This property will be displayed in the header of your modal.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "hideCloseButton", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "hide-close-button", "reflectToAttr": false, "docs": "This boolean is used to hide the header's close button.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "modalAriaLabel", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "modal-aria-label", "reflectToAttr": false, "docs": "This property sets the aria label of the modal.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "modalPadding", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "modal-padding", "reflectToAttr": false, "docs": "This property is used to set padding around the card", "docsTags": [ { "name": "default", "text": "\"2\"" } ], "default": "\"2\"", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "size", "type": "\"lg\" | \"md\" | \"sm\"", "complexType": { "original": "'sm' | 'md' | 'lg'", "resolved": "\"lg\" | \"md\" | \"sm\"", "references": {} }, "mutable": false, "attr": "size", "reflectToAttr": false, "docs": "This boolean is used to control the width of the modal.", "docsTags": [ { "name": "default", "text": "'md'" } ], "default": "'md'", "values": [ { "value": "lg", "type": "string" }, { "value": "md", "type": "string" }, { "value": "sm", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "close", "returns": { "type": "Promise", "docs": "Promise will resolve when the close animation ends." }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "close() => Promise", "parameters": [], "docs": "This method will close the modal.", "docsTags": [ { "name": "returns", "text": "Promise will resolve when the close animation ends." } ] }, { "name": "open", "returns": { "type": "Promise", "docs": "Promise will resolve when the open animation ends." }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "open() => Promise", "parameters": [], "docs": "This method will open the modal.", "docsTags": [ { "name": "returns", "text": "Promise will resolve when the open animation ends." } ] }, { "name": "refresh", "returns": { "type": "Promise", "docs": "Promise will resolve after the refresh." }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "refresh() => Promise", "parameters": [], "docs": "This method will refresh the modal. This is useful when modal data is loaded asynchronously.", "docsTags": [ { "name": "deprecated", "text": "with version 4.0 release" }, { "name": "returns", "text": "Promise will resolve after the refresh." } ], "deprecation": "with version 4.0 release" } ], "events": [ { "event": "modalClose", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted after the modal closes.", "docsTags": [] }, { "event": "modalOpen", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted before the modal opens.", "docsTags": [] } ], "listeners": [ { "event": "keydown", "capture": false, "passive": false } ], "styles": [], "slots": [], "parts": [], "dependents": [ "som-dialog" ], "dependencies": [ "som-icon" ], "dependencyGraph": { "som-modal": [ "som-icon" ], "som-dialog": [ "som-modal" ] } }, { "filePath": "src/components/som-pagination/som-pagination.tsx", "encapsulation": "none", "tag": "som-pagination", "docs": "TODO", "docsTags": [], "usage": {}, "props": [ { "name": "borders", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "borders", "reflectToAttr": false, "docs": "This boolean adds borders to grid view.", "docsTags": [ { "name": "default", "text": "true" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "itemsPerPage", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "items-per-page", "reflectToAttr": false, "docs": "This property shows the number of items to display per page", "docsTags": [ { "name": "default", "text": "10" } ], "default": "10", "values": [ { "type": "number" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "page", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": true, "attr": "page", "reflectToAttr": true, "docs": "This property shows the current active page (starting index is `0`).", "docsTags": [ { "name": "default", "text": "0" } ], "default": "0", "values": [ { "type": "number" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "tableName", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "table-name", "reflectToAttr": false, "docs": "This property describes the table associated with the pagination. It is used to describe the pagination actions for screen readers.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "totalItems", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "total-items", "reflectToAttr": false, "docs": "This property shows the total number of items in the grid", "docsTags": [], "values": [ { "type": "number" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "view", "type": "\"grid\" | \"page\"", "complexType": { "original": "'grid' | 'page'", "resolved": "\"grid\" | \"page\"", "references": {} }, "mutable": false, "attr": "view", "reflectToAttr": false, "docs": "This property determines the UI in which the pagination component will be rendered. Use `grid` for add the element to `som-grid` and use `page` when adding it to non-grid use cases.", "docsTags": [ { "name": "default", "text": "'grid'" } ], "default": "'grid'", "values": [ { "value": "grid", "type": "string" }, { "value": "page", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "pageChanged", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event will be triggered anytime the page is changed.", "docsTags": [] } ], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [ "som-button" ], "dependencyGraph": { "som-pagination": [ "som-button" ], "som-button": [ "som-spinner" ] } }, { "filePath": "src/components/som-panel/som-panel.tsx", "encapsulation": "none", "tag": "som-panel", "docs": "Panels are partial screen overlays that interrupt user interaction and demand an action. They are appropriate when user interaction is temporary and needed only to perform a specific action such as filtering.", "docsTags": [], "usage": {}, "props": [ { "name": "belowHeader", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "below-header", "reflectToAttr": false, "docs": "This boolean property is used to determine if the panel should show over or below header.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "breakpoint", "type": "\"lg\" | \"md\" | \"sm\" | \"xl\"", "complexType": { "original": "'sm' | 'md' | 'lg' | 'xl'", "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\"", "references": {} }, "mutable": true, "attr": "breakpoint", "reflectToAttr": false, "docs": "This property is where the mobile navigation should take effect.", "docsTags": [ { "name": "default", "text": "'lg'" } ], "default": "'lg'", "values": [ { "value": "lg", "type": "string" }, { "value": "md", "type": "string" }, { "value": "sm", "type": "string" }, { "value": "xl", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "enableOverlayClose", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "enable-overlay-close", "reflectToAttr": false, "docs": "This boolean allows the panel to be closed when clicking on the overlay outside the panel.", "docsTags": [ { "name": "default", "text": "true" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "hideCloseButton", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "hide-close-button", "reflectToAttr": false, "docs": "This boolean property is used to hide the panel's close button.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "position", "type": "\"left\" | \"right\"", "complexType": { "original": "'left' | 'right'", "resolved": "\"left\" | \"right\"", "references": {} }, "mutable": true, "attr": "position", "reflectToAttr": false, "docs": "This property is where the panel should appear.", "docsTags": [ { "name": "default", "text": "'left'" } ], "default": "'left'", "values": [ { "value": "left", "type": "string" }, { "value": "right", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "scrollToTop", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "scroll-to-top", "reflectToAttr": false, "docs": "This boolean determines whether the page scrolls back to the top upon panel opening.", "docsTags": [ { "name": "default", "text": "true" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "shown", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": true, "attr": "shown", "reflectToAttr": false, "docs": "This boolean property is used to display or hide the panel on initial load.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "size", "type": "\"lg\" | \"md\" | \"sm\" | \"xl\"", "complexType": { "original": "'sm' | 'md' | 'lg' | 'xl'", "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\"", "references": {} }, "mutable": true, "attr": "size", "reflectToAttr": false, "docs": "This property is used to control the panel’s width. The sizes are as follows: `sm = 20rem`, `md = 30rem`, `lg = 40rem`, `xl = fullscreen - 38px`.", "docsTags": [ { "name": "default", "text": "'md'" } ], "default": "'md'", "values": [ { "value": "lg", "type": "string" }, { "value": "md", "type": "string" }, { "value": "sm", "type": "string" }, { "value": "xl", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "close", "returns": { "type": "Promise", "docs": "Promise will resolve when the close animation ends." }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "close() => Promise", "parameters": [], "docs": "This method will close the panel.", "docsTags": [ { "name": "returns", "text": "Promise will resolve when the close animation ends." } ] }, { "name": "open", "returns": { "type": "Promise", "docs": "Promise will resolve when the open animation ends." }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "open() => Promise", "parameters": [], "docs": "This method will open the panel.", "docsTags": [ { "name": "returns", "text": "Promise will resolve when the open animation ends." } ] }, { "name": "refresh", "returns": { "type": "Promise", "docs": "Promise will resolve after the refresh." }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "refresh() => Promise", "parameters": [], "docs": "This method will refresh the panel. This can be used when loading asynchronous data, which allows the component to find focusable elements and provide optimal accessibility support.", "docsTags": [ { "name": "returns", "text": "Promise will resolve after the refresh." } ] } ], "events": [ { "event": "afterClose", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is triggered right after panel is closed.", "docsTags": [] }, { "event": "afterOpen", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is triggered right after panel is opened.", "docsTags": [] }, { "event": "beforeClose", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is triggered just before panel is closed.", "docsTags": [] }, { "event": "beforeOpen", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is triggered just before panel is opened.", "docsTags": [] } ], "listeners": [ { "event": "listClosed", "target": "window", "capture": false, "passive": false } ], "styles": [], "slots": [], "parts": [], "dependents": [ "som-header", "som-mobile-subheader" ], "dependencies": [ "som-icon" ], "dependencyGraph": { "som-panel": [ "som-icon" ], "som-header": [ "som-panel" ], "som-mobile-subheader": [ "som-panel" ] } }, { "filePath": "src/components/som-popover/som-popover.tsx", "encapsulation": "none", "tag": "som-popover", "docs": "", "docsTags": [], "usage": {}, "props": [ { "name": "for", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "for", "reflectToAttr": false, "docs": "This property is used to associate the popover with the corresponding element. The corresponding element's ID should be used as the value.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "horizontalPosition", "type": "\"left\" | \"right\"", "complexType": { "original": "'left' | 'right'", "resolved": "\"left\" | \"right\"", "references": {} }, "mutable": false, "attr": "horizontal-position", "reflectToAttr": false, "docs": "This property controls the horizontal position of the popover.", "docsTags": [ { "name": "default", "text": "'left'" } ], "default": "'left'", "values": [ { "value": "left", "type": "string" }, { "value": "right", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "labelledBy", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "labelled-by", "reflectToAttr": false, "docs": "This is the DOM element ID used to label this popover. This is used for accessibility.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "show", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": true, "attr": "show", "reflectToAttr": true, "docs": "This boolean property is used to display or hide the popover.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "verticalPosition", "type": "\"bottom\" | \"top\"", "complexType": { "original": "'top' | 'bottom'", "resolved": "\"bottom\" | \"top\"", "references": {} }, "mutable": false, "attr": "vertical-position", "reflectToAttr": false, "docs": "This property controls the vertical position of the popover.", "docsTags": [ { "name": "default", "text": "'bottom'" } ], "default": "'bottom'", "values": [ { "value": "bottom", "type": "string" }, { "value": "top", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "close", "returns": { "type": "Promise", "docs": "Promise will resolve when the close animation ends." }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "close() => Promise", "parameters": [], "docs": "This method will close the popover.", "docsTags": [ { "name": "returns", "text": "Promise will resolve when the close animation ends." } ] }, { "name": "hasFocus", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "hasFocus() => Promise", "parameters": [], "docs": "This method is emitted when the popover gets focus.", "docsTags": [] }, { "name": "open", "returns": { "type": "Promise", "docs": "Promise will resolve when the open animation ends." }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "open() => Promise", "parameters": [], "docs": "This method will open the popover.", "docsTags": [ { "name": "returns", "text": "Promise will resolve when the open animation ends." } ] }, { "name": "updatePosition", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "updatePosition() => Promise", "parameters": [], "docs": "This method will update the position of the popover.", "docsTags": [] } ], "events": [ { "event": "popoverClosed", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is triggered after popover is closed.", "docsTags": [] }, { "event": "popoverOpened", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is triggered after popover is opened.", "docsTags": [] } ], "listeners": [ { "event": "keydown", "capture": false, "passive": false }, { "event": "click", "target": "window", "capture": false, "passive": false }, { "event": "resize", "target": "window", "capture": false, "passive": true }, { "event": "keydown", "capture": false, "passive": false } ], "styles": [], "slots": [], "parts": [], "dependents": [ "som-button-dropdown", "som-combobox", "som-date-picker-input", "som-date-range-picker-button" ], "dependencies": [], "dependencyGraph": { "som-button-dropdown": [ "som-popover" ], "som-combobox": [ "som-popover" ], "som-date-picker-input": [ "som-popover" ], "som-date-range-picker-button": [ "som-popover" ] } }, { "filePath": "src/components/som-radio-button/som-radio-button.tsx", "encapsulation": "none", "tag": "som-radio-button", "docs": "", "docsTags": [ { "name": "slot", "text": "label - Label for the radio button. Alternatively, you can use the label attribute." } ], "usage": {}, "props": [ { "name": "checked", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": true, "attr": "checked", "reflectToAttr": true, "docs": "This property is used to set the radio button as \"checked\".", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "disabled", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "disabled", "reflectToAttr": false, "docs": "This boolean is used to set the radio button as disabled.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "hideLabel", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "hide-label", "reflectToAttr": false, "docs": "This property will visually hide the label. A label is still required to be provided for screenreader support.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "inputAriaLabel", "type": "string", "complexType": { "original": "string | null", "resolved": "string", "references": {} }, "mutable": false, "attr": "input-aria-label", "reflectToAttr": false, "docs": "This property can be used to set the ARIA label associated with this input (for screen readers).", "docsTags": [ { "name": "default", "text": "null" } ], "default": "null", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "inputId", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "input-id", "reflectToAttr": false, "docs": "This property can be used to specifically set an ID to the input field. If an ID is not provided, it will be dynamically generated.", "docsTags": [ { "name": "default", "text": "generateId('som-radio-button')" } ], "default": "generateId('som-radio-button')", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": false, "docs": "This property is the radio button label text.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "labelClass", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label-class", "reflectToAttr": false, "docs": "This property is a list of CSS classes that can be used to style the label.", "docsTags": [ { "name": "deprecated", "text": "with version 4.0.1 release" }, { "name": "default", "text": "''" } ], "default": "''", "deprecation": "with version 4.0.1 release", "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "name", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "name", "reflectToAttr": false, "docs": "This property is the form element name (used when submitting the form).", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "readonly", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "readonly", "reflectToAttr": false, "docs": "This boolean can be used to set the radio button as readonly.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "required", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "required", "reflectToAttr": false, "docs": "This boolean can be used to set the input as required.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "value", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "value", "reflectToAttr": false, "docs": "This property is the radio button value sent on submit when using it in a form.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "setFocus", "returns": { "type": "Promise", "docs": "Promise will resolve after focus." }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "setFocus() => Promise", "parameters": [], "docs": "This public method sets focus to the radio element.", "docsTags": [ { "name": "returns", "text": "Promise will resolve after focus." } ] } ], "events": [ { "event": "somBlur", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted when when the radio button loses focus.", "docsTags": [] }, { "event": "somChange", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted when the radio button is toggled.", "docsTags": [] }, { "event": "somFocus", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted when when the radio button gets focus.", "docsTags": [] } ], "listeners": [], "styles": [], "slots": [ { "name": "label", "docs": "Label for the radio button. Alternatively, you can use the label attribute." } ], "parts": [], "dependents": [ "som-combobox" ], "dependencies": [], "dependencyGraph": { "som-combobox": [ "som-radio-button" ] } }, { "filePath": "src/components/som-radio-button-group/som-radio-button-group.tsx", "encapsulation": "none", "tag": "som-radio-button-group", "docs": "", "docsTags": [ { "name": "slot", "text": "label - Label for the radio button group. Alternatively, you can use the label attribute." } ], "usage": {}, "props": [ { "name": "error", "type": "string", "complexType": { "original": "string | null", "resolved": "string", "references": {} }, "mutable": true, "attr": "error", "reflectToAttr": false, "docs": "This property can be used to set an error. If a non-empty string is given, it will be used as the error message.", "docsTags": [ { "name": "default", "text": "null" } ], "default": "null", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "help", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "help", "reflectToAttr": false, "docs": "This property can be used to set a help text.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "hideLabel", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "hide-label", "reflectToAttr": false, "docs": "This property will visually hide the label. A label is still required to be provided for screenreader support.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "inline", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "inline", "reflectToAttr": false, "docs": "This boolean sets whether the form field group should display the checkboxes inline or not.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": false, "docs": "This property can be used to set the inline label.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "labelClass", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label-class", "reflectToAttr": false, "docs": "This property is a list of CSS classes that can be used to style the label.", "docsTags": [ { "name": "deprecated", "text": "with version 4.0.1 release" }, { "name": "default", "text": "''" } ], "default": "''", "deprecation": "with version 4.0.1 release", "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "readonly", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "readonly", "reflectToAttr": false, "docs": "This boolean can be used to set the radio button group as readonly.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "required", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "required", "reflectToAttr": false, "docs": "This boolean sets whether the form field group is required or not.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "requiredInd", "type": "\"none\" | \"optional\" | \"required\"", "complexType": { "original": "'required' | 'optional' | 'none'", "resolved": "\"none\" | \"optional\" | \"required\"", "references": {} }, "mutable": false, "attr": "required-ind", "reflectToAttr": false, "docs": "This property is used to override the required indicator. By default, forms elements will show an `optional` indicator\nbut some forms are better served showing the `required` indicator instead.", "docsTags": [], "values": [ { "value": "none", "type": "string" }, { "value": "optional", "type": "string" }, { "value": "required", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "tooltip", "type": "string", "complexType": { "original": "string | null", "resolved": "string", "references": {} }, "mutable": false, "attr": "tooltip", "reflectToAttr": false, "docs": "This property is used to set the tooltip text.", "docsTags": [ { "name": "default", "text": "null" } ], "default": "null", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "value", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": true, "attr": "value", "reflectToAttr": true, "docs": "This property is the radio button value sent on submit when used in a form.", "docsTags": [ { "name": "default", "text": "null" } ], "default": "null", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "somChange", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted when the radio button is toggled.", "docsTags": [] } ], "listeners": [ { "event": "somChange", "capture": false, "passive": false } ], "styles": [], "slots": [ { "name": "label", "docs": "Label for the radio button group. Alternatively, you can use the label attribute." } ], "parts": [], "dependents": [ "som-combobox" ], "dependencies": [ "som-button", "som-tooltip" ], "dependencyGraph": { "som-radio-button-group": [ "som-button", "som-tooltip" ], "som-button": [ "som-spinner" ], "som-combobox": [ "som-radio-button-group" ] } }, { "filePath": "src/components/som-select/som-select.tsx", "encapsulation": "none", "tag": "som-select", "docs": "", "docsTags": [ { "name": "slot", "text": "label - Label for the select. Alternatively, you can use the label attribute." } ], "usage": {}, "props": [ { "name": "disabled", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "disabled", "reflectToAttr": false, "docs": "This boolean can be used to disable the select.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "error", "type": "string", "complexType": { "original": "string | null", "resolved": "string", "references": {} }, "mutable": false, "attr": "error", "reflectToAttr": false, "docs": "This property can be used to set an error. If a non-empty string is given, it will be used as the error message.", "docsTags": [ { "name": "default", "text": "null" } ], "default": "null", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "help", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "help", "reflectToAttr": false, "docs": "This property can be used to set a help text.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "hideLabel", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "hide-label", "reflectToAttr": false, "docs": "This property will visually hide the label. A label is still required to be provided for screenreader support.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "inputAriaLabel", "type": "string", "complexType": { "original": "string | null", "resolved": "string", "references": {} }, "mutable": false, "attr": "input-aria-label", "reflectToAttr": false, "docs": "This property can be used to set the ARIA label associated with this input (for screen readers).", "docsTags": [ { "name": "default", "text": "null" } ], "default": "null", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "inputId", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "input-id", "reflectToAttr": false, "docs": "This property can be used to specifically set an ID to the input field. If an ID is not provided, it will be dynamically generated.", "docsTags": [ { "name": "default", "text": "generateId('som-input')" } ], "default": "generateId('som-input')", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": false, "docs": "This property can be used to set a label.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "labelClass", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label-class", "reflectToAttr": false, "docs": "This property is a list of CSS classes that can be used to style the label.", "docsTags": [ { "name": "deprecated", "text": "with version 4.0.1 release" }, { "name": "default", "text": "''" } ], "default": "''", "deprecation": "with version 4.0.1 release", "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "name", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "name", "reflectToAttr": false, "docs": "This property can be used to set the form field name (used when submitting the form).", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "readonly", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "readonly", "reflectToAttr": false, "docs": "This boolean can be used to set the select input as readonly.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "required", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "required", "reflectToAttr": false, "docs": "This boolean can be used to set the select as required.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "requiredInd", "type": "\"none\" | \"optional\" | \"required\"", "complexType": { "original": "'required' | 'optional' | 'none'", "resolved": "\"none\" | \"optional\" | \"required\"", "references": {} }, "mutable": false, "attr": "required-ind", "reflectToAttr": false, "docs": "This property is used to override the required indicator. By default, forms elements will show an `optional` indicator\nbut some forms are better served showing the `required` indicator instead.", "docsTags": [], "values": [ { "value": "none", "type": "string" }, { "value": "optional", "type": "string" }, { "value": "required", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "tooltip", "type": "string", "complexType": { "original": "string | null", "resolved": "string", "references": {} }, "mutable": false, "attr": "tooltip", "reflectToAttr": false, "docs": "This property is used to set the tooltip text.", "docsTags": [ { "name": "default", "text": "null" } ], "default": "null", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "value", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": true, "attr": "value", "reflectToAttr": true, "docs": "This property can be used to set the select value.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "setFocus", "returns": { "type": "Promise", "docs": "Promise will resolve after focus." }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "setFocus() => Promise", "parameters": [], "docs": "This public method sets focus to the select element.", "docsTags": [ { "name": "returns", "text": "Promise will resolve after focus." } ] } ], "events": [ { "event": "somBlur", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted when when the select field loses focus.", "docsTags": [] }, { "event": "somChange", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted when the select value changes.", "docsTags": [] }, { "event": "somFocus", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted when when the select field gets focus.", "docsTags": [] } ], "listeners": [], "styles": [], "slots": [ { "name": "label", "docs": "Label for the select. Alternatively, you can use the label attribute." } ], "parts": [], "dependents": [], "dependencies": [ "som-button", "som-tooltip" ], "dependencyGraph": { "som-select": [ "som-button", "som-tooltip" ], "som-button": [ "som-spinner" ] } }, { "filePath": "src/components/som-sidebar/som-sidebar.tsx", "encapsulation": "none", "tag": "som-sidebar", "docs": "A card is a flexible and extensible content container. It can include a wide variety of content, contextual background colors, and powerful display options.", "docsTags": [], "usage": {}, "props": [ { "name": "breakpoint", "type": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\"", "complexType": { "original": "'sm' | 'md' | 'lg' | 'xl' | 'none'", "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\"", "references": {} }, "mutable": false, "attr": "breakpoint", "reflectToAttr": false, "docs": "This property is the breakpoint to hide sidebar.", "docsTags": [ { "name": "default", "text": "'lg'" } ], "default": "'lg'", "values": [ { "value": "lg", "type": "string" }, { "value": "md", "type": "string" }, { "value": "none", "type": "string" }, { "value": "sm", "type": "string" }, { "value": "xl", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/som-spinner/som-spinner.tsx", "encapsulation": "shadow", "tag": "som-spinner", "docs": "TODO", "docsTags": [], "usage": {}, "props": [ { "name": "size", "type": "\"lg\" | \"md\" | \"sm\" | \"xl\"", "complexType": { "original": "'sm' | 'md' | 'lg' | 'xl'", "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\"", "references": {} }, "mutable": false, "attr": "size", "reflectToAttr": false, "docs": "This attribute controls the size of the spinner. Possible values are: `\"sm\"`, `\"md\"`, `\"lg\"`, `\"xl\"`. By default, the spinner will match the font-size of the parent container.", "docsTags": [], "values": [ { "value": "lg", "type": "string" }, { "value": "md", "type": "string" }, { "value": "sm", "type": "string" }, { "value": "xl", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [ "som-button", "som-grid" ], "dependencies": [], "dependencyGraph": { "som-button": [ "som-spinner" ], "som-grid": [ "som-spinner" ] } }, { "filePath": "src/components/som-status-card/som-status.card.tsx", "encapsulation": "shadow", "tag": "som-status-card", "docs": "A status card is a flexible and extensible content container where the color associated is meant to indicate specific meaning.", "docsTags": [], "usage": {}, "props": [ { "name": "buttonAriaLabel", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "button-aria-label", "reflectToAttr": false, "docs": "This property can be used to set the ARIA label associated with this status card (for screen readers).", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "color", "type": "\"danger\" | \"gray\" | \"info\" | \"primary\" | \"success\" | \"warning\"", "complexType": { "original": "'gray' | 'primary' | 'success' | 'warning' | 'danger' | 'info'", "resolved": "\"danger\" | \"gray\" | \"info\" | \"primary\" | \"success\" | \"warning\"", "references": {} }, "mutable": false, "attr": "color", "reflectToAttr": false, "docs": "This property is the color of the status indicator.", "docsTags": [ { "name": "default", "text": "'gray'" } ], "default": "'gray'", "values": [ { "value": "danger", "type": "string" }, { "value": "gray", "type": "string" }, { "value": "info", "type": "string" }, { "value": "primary", "type": "string" }, { "value": "success", "type": "string" }, { "value": "warning", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "matchHeight", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "match-height", "reflectToAttr": false, "docs": "This boolean is used to add 100% height to the card which is helpful when you want the card height to expand to match\nthe height of surrounding elements.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "type", "type": "\"button\" | \"default\"", "complexType": { "original": "'default' | 'button'", "resolved": "\"button\" | \"default\"", "references": {} }, "mutable": false, "attr": "type", "reflectToAttr": false, "docs": "The type of status card.", "docsTags": [ { "name": "default", "text": "'default'" } ], "default": "'default'", "values": [ { "value": "button", "type": "string" }, { "value": "default", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [ { "event": "keyup", "capture": false, "passive": false } ], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/som-tab/som-tab.tsx", "encapsulation": "none", "tag": "som-tab", "docs": "", "docsTags": [], "usage": {}, "props": [ { "name": "active", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": true, "attr": "active", "reflectToAttr": true, "docs": "This boolean controls if the tab is active.", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "dark", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": true, "attr": "dark", "reflectToAttr": true, "docs": "", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "name", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "name", "reflectToAttr": true, "docs": "This property sets the name of the tab.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "tabId", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "tab-id", "reflectToAttr": true, "docs": "This property can be used to specifically set an ID to the tab. If an ID is not provided, it will be dynamically generated.", "docsTags": [ { "name": "default", "text": "generateId('som-tab')" } ], "default": "generateId('som-tab')", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [ { "event": "tabClick", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "", "docsTags": [] } ], "listeners": [ { "event": "keydown", "capture": false, "passive": false }, { "event": "click", "capture": true, "passive": false } ], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/som-tab-group/som-tab-group.tsx", "encapsulation": "none", "tag": "som-tab-group", "docs": "Tabs consolidate groups of content into their own sections, often simplifying a user interface and making data items easier to locate.", "docsTags": [], "usage": {}, "props": [ { "name": "color", "type": "\"gray\" | \"white\"", "complexType": { "original": "'white' | 'gray'", "resolved": "\"gray\" | \"white\"", "references": {} }, "mutable": false, "attr": "color", "reflectToAttr": true, "docs": "This property determines the background color of the tabs and tab panel", "docsTags": [ { "name": "default", "text": "'white'" } ], "default": "'white'", "values": [ { "value": "gray", "type": "string" }, { "value": "white", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "contained", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "contained", "reflectToAttr": false, "docs": "This boolean changes the style to a contained tab", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "dark", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "dark", "reflectToAttr": false, "docs": "This boolean ensures that tabs will be on a dark background", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "underline", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "underline", "reflectToAttr": false, "docs": "This boolean adds an underline to the active tab.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "showTab", "returns": { "type": "Promise", "docs": "Promise will resolve when the change animation ends." }, "complexType": { "signature": "(index: any) => Promise", "parameters": [ { "name": "index", "type": "any", "docs": "Tab index to open." } ], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "showTab(index: any) => Promise", "parameters": [ { "name": "index", "type": "any", "docs": "Tab index to open." } ], "docs": "This method will open a specific tab by passing in the tab array index.", "docsTags": [ { "name": "param", "text": "index Tab index to open." }, { "name": "returns", "text": "Promise will resolve when the change animation ends." } ] } ], "events": [ { "event": "tabChange", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event will be triggered after a tab has changed.\n\nThe return will the `index` of the new active tab.", "docsTags": [] } ], "listeners": [ { "event": "keydown", "capture": false, "passive": false }, { "event": "resize", "target": "window", "capture": false, "passive": true } ], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [ "som-button" ], "dependencyGraph": { "som-tab-group": [ "som-button" ], "som-button": [ "som-spinner" ] } }, { "filePath": "src/components/som-tab-panel/som-tab-panel.tsx", "encapsulation": "none", "tag": "som-tab-panel", "docs": "", "docsTags": [], "usage": {}, "props": [ { "name": "panelId", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "panel-id", "reflectToAttr": true, "docs": "This property can be used to specifically set an ID to the tab panel. If an ID is not provided, it will be dynamically generated.", "docsTags": [ { "name": "default", "text": "generateId('som-tab-panel')" } ], "default": "generateId('som-tab-panel')", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/som-tab-panel-group/som-tab-panel-group.tsx", "encapsulation": "none", "tag": "som-tab-panel-group", "docs": "", "docsTags": [], "usage": {}, "props": [], "methods": [ { "name": "showTabPanel", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "(_idx: any) => Promise", "parameters": [ { "name": "_idx", "type": "any", "docs": "" } ], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "showTabPanel(_idx: any) => Promise", "parameters": [ { "name": "_idx", "type": "any", "docs": "" } ], "docs": "", "docsTags": [] } ], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/som-tabs/som-tabs.tsx", "encapsulation": "none", "tag": "som-tabs", "docs": "Tabs consolidate groups of content into their own sections, often simplifying a user interface and making data items easier to locate.", "docsTags": [], "usage": {}, "props": [], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/som-textarea/som-textarea.tsx", "encapsulation": "none", "tag": "som-textarea", "docs": "", "docsTags": [ { "name": "slot", "text": "label - Label for the textarea. Alternatively, you can use the label attribute." } ], "usage": {}, "props": [ { "name": "disabled", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "disabled", "reflectToAttr": false, "docs": "This boolean can be used to disable the textarea.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "error", "type": "string", "complexType": { "original": "string | null", "resolved": "string", "references": {} }, "mutable": false, "attr": "error", "reflectToAttr": false, "docs": "This property can be used to set an error. If a non-empty string is given, it will be used as the error message.", "docsTags": [ { "name": "default", "text": "null" } ], "default": "null", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "help", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "help", "reflectToAttr": false, "docs": "This property can be used to set a help text.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "hideLabel", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "hide-label", "reflectToAttr": false, "docs": "This property will visually hide the label. A label is still required to be provided for screenreader support.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "inputAriaLabel", "type": "string", "complexType": { "original": "string | null", "resolved": "string", "references": {} }, "mutable": false, "attr": "input-aria-label", "reflectToAttr": false, "docs": "This property can be used to set the ARIA label associated with this input (for screen readers).", "docsTags": [ { "name": "default", "text": "null" } ], "default": "null", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "inputId", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "input-id", "reflectToAttr": false, "docs": "This property can be used to specifically set an ID to the input field. If an ID is not provided, it will be dynamically generated.", "docsTags": [ { "name": "default", "text": "generateId('som-textarea')" } ], "default": "generateId('som-textarea')", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": false, "docs": "This property can be used to set a label.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "labelClass", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label-class", "reflectToAttr": false, "docs": "This property is a list of CSS classes that can be used to style the label.", "docsTags": [ { "name": "deprecated", "text": "with version 4.0.1 release" }, { "name": "default", "text": "''" } ], "default": "''", "deprecation": "with version 4.0.1 release", "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "maxLength", "type": "number", "complexType": { "original": "number | null", "resolved": "number", "references": {} }, "mutable": false, "attr": "max-length", "reflectToAttr": false, "docs": "This property is used to set the textarea's maximum characters limit.", "docsTags": [ { "name": "default", "text": "null" } ], "default": "null", "values": [ { "type": "number" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "name", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "name", "reflectToAttr": false, "docs": "This property can be used to set the form field name (used when submitting the form).", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "placeholder", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "placeholder", "reflectToAttr": false, "docs": "This property can be used to set a placeholder text.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "readonly", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "readonly", "reflectToAttr": false, "docs": "This boolean is used to set the textarea as readonly.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "required", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "required", "reflectToAttr": false, "docs": "This boolean can be used to set the input as required.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "requiredInd", "type": "\"none\" | \"optional\" | \"required\"", "complexType": { "original": "'required' | 'optional' | 'none'", "resolved": "\"none\" | \"optional\" | \"required\"", "references": {} }, "mutable": false, "attr": "required-ind", "reflectToAttr": false, "docs": "This property is used to override the required indicator. By default, forms elements will show an `optional` indicator\nbut some forms are better served showing the `required` indicator instead.", "docsTags": [], "values": [ { "value": "none", "type": "string" }, { "value": "optional", "type": "string" }, { "value": "required", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "rows", "type": "number", "complexType": { "original": "number | null", "resolved": "number", "references": {} }, "mutable": true, "attr": "rows", "reflectToAttr": false, "docs": "This property is used to set the textarea's number of rows'.\nDefaults to `3`.", "docsTags": [ { "name": "default", "text": "DEFAULT_ROWS" } ], "default": "DEFAULT_ROWS", "values": [ { "type": "number" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "tooltip", "type": "string", "complexType": { "original": "string | null", "resolved": "string", "references": {} }, "mutable": false, "attr": "tooltip", "reflectToAttr": false, "docs": "This property is used to set the tooltip text.", "docsTags": [ { "name": "default", "text": "null" } ], "default": "null", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "value", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": true, "attr": "value", "reflectToAttr": true, "docs": "This property can be used to set the textarea value.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "setFocus", "returns": { "type": "Promise", "docs": "Promise will resolve after focus." }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "setFocus() => Promise", "parameters": [], "docs": "This public method resets focus to the textarea element.", "docsTags": [ { "name": "returns", "text": "Promise will resolve after focus." } ] } ], "events": [ { "event": "somBlur", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted when when the textrea loses focus.", "docsTags": [] }, { "event": "somChange", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted when the textarea changes.", "docsTags": [] }, { "event": "somFocus", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted when when the textrea gets focus.", "docsTags": [] }, { "event": "somInput", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted when when a keyboard input occurs.", "docsTags": [] } ], "listeners": [], "styles": [], "slots": [ { "name": "label", "docs": "Label for the textarea. Alternatively, you can use the label attribute." } ], "parts": [], "dependents": [], "dependencies": [ "som-button", "som-tooltip" ], "dependencyGraph": { "som-textarea": [ "som-button", "som-tooltip" ], "som-button": [ "som-spinner" ] } }, { "filePath": "src/components/som-toast/som-toast.tsx", "encapsulation": "shadow", "tag": "som-toast", "docs": "", "docsTags": [ { "name": "part", "text": "icon - This part is the optional icon next to the headline." }, { "name": "part", "text": "headline - This part is the headline content." }, { "name": "part", "text": "body - This part is the body text content." }, { "name": "part", "text": "close-button - This part is the close button." } ], "usage": {}, "props": [ { "name": "autoDismiss", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "auto-dismiss", "reflectToAttr": false, "docs": "This boolean property determines whether the toast will dismiss automatically or not.", "docsTags": [ { "name": "default", "text": "true" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "autoDismissTime", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "auto-dismiss-time", "reflectToAttr": false, "docs": "The timeout in milliseconds before the toast is automatically dismissed.", "docsTags": [ { "name": "default", "text": "10000" } ], "default": "10000", "values": [ { "type": "number" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "closeButtonAriaLabel", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "close-button-aria-label", "reflectToAttr": false, "docs": "This property overrides the close button aria label.", "docsTags": [ { "name": "default", "text": "\"dismiss\"" } ], "default": "\"dismiss\"", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "color", "type": "\"danger\" | \"info\" | \"success\" | \"warning\"", "complexType": { "original": "'success' | 'warning' | 'danger' | 'info'", "resolved": "\"danger\" | \"info\" | \"success\" | \"warning\"", "references": {} }, "mutable": false, "attr": "color", "reflectToAttr": false, "docs": "This property sets the toast container color.", "docsTags": [ { "name": "default", "text": "'info'" } ], "default": "'info'", "values": [ { "value": "danger", "type": "string" }, { "value": "info", "type": "string" }, { "value": "success", "type": "string" }, { "value": "warning", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "dismissible", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "dismissible", "reflectToAttr": false, "docs": "This boolean determines if a toast can be dismissed.", "docsTags": [ { "name": "default", "text": "true" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "headline", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "headline", "reflectToAttr": false, "docs": "This property sets the headline for the toast.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "icon", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "icon", "reflectToAttr": false, "docs": "This boolean property sets the visual status icon visibility.", "docsTags": [ { "name": "default", "text": "true" } ], "default": "true", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "dismiss", "returns": { "type": "Promise", "docs": "Promise will resolve after toast is dismissed." }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "dismiss() => Promise", "parameters": [], "docs": "This public method is used to dismiss a toast.", "docsTags": [ { "name": "returns", "text": "Promise will resolve after toast is dismissed." } ] } ], "events": [ { "event": "toastDismissed", "detail": "void", "bubbles": true, "complexType": { "original": "void", "resolved": "void", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted when the toast is dismissed.", "docsTags": [] } ], "listeners": [], "styles": [], "slots": [], "parts": [ { "name": "body", "docs": "This part is the body text content." }, { "name": "close-button", "docs": "This part is the close button." }, { "name": "headline", "docs": "This part is the headline content." }, { "name": "icon", "docs": "This part is the optional icon next to the headline." } ], "dependents": [], "dependencies": [ "som-content", "som-icon" ], "dependencyGraph": { "som-toast": [ "som-content", "som-icon" ] } }, { "filePath": "src/components/som-toast-group/som-toast-group.tsx", "encapsulation": "shadow", "tag": "som-toast-group", "docs": "Toast group is used to position and style a group of toasts.", "docsTags": [], "usage": {}, "props": [ { "name": "position", "type": "\"center\" | \"end\" | \"start\"", "complexType": { "original": "'start' | 'center' | 'end'", "resolved": "\"center\" | \"end\" | \"start\"", "references": {} }, "mutable": false, "attr": "position", "reflectToAttr": false, "docs": "This property sets the position on the screen toast will display.", "docsTags": [ { "name": "default", "text": "'end'" } ], "default": "'end'", "values": [ { "value": "center", "type": "string" }, { "value": "end", "type": "string" }, { "value": "start", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "addToast", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "(text: string, { color, headline, dismissible, icon, autoDismiss, autoDismissTime, closeButtonAriaLabel }: HTMLSomToastElement) => Promise", "parameters": [ { "name": "text", "type": "string", "docs": "" }, { "name": "__1", "type": "HTMLSomToastElement", "docs": "" } ], "references": { "Promise": { "location": "global", "id": "global::Promise" }, "HTMLSomToastElement": { "location": "global", "id": "global::HTMLSomToastElement" } }, "return": "Promise" }, "signature": "addToast(text: string, { color, headline, dismissible, icon, autoDismiss, autoDismissTime, closeButtonAriaLabel }: HTMLSomToastElement) => Promise", "parameters": [ { "name": "text", "type": "string", "docs": "" }, { "name": "__1", "type": "HTMLSomToastElement", "docs": "" } ], "docs": "This public method is used to show a toast.", "docsTags": [] } ], "events": [ { "event": "toastGroupDismissed", "detail": "void", "bubbles": true, "complexType": { "original": "void", "resolved": "void", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted when a toast is dismissed.", "docsTags": [] } ], "listeners": [ { "event": "toastDismissed", "capture": false, "passive": false } ], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/som-toggle/som-toggle.tsx", "encapsulation": "none", "tag": "som-toggle", "docs": "", "docsTags": [ { "name": "slot", "text": "label - Label for the toggle. Alternatively, you can use the label attribute." } ], "usage": {}, "props": [ { "name": "checked", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": true, "attr": "checked", "reflectToAttr": true, "docs": "This boolean is used to set the toggle as \"checked\".", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "disabled", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "disabled", "reflectToAttr": false, "docs": "This boolean is used to disable the toggle.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "hideLabel", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "hide-label", "reflectToAttr": false, "docs": "This property will visually hide the label. A label is still required to be provided for screenreader support.", "docsTags": [ { "name": "default", "text": "false" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "inputAriaLabel", "type": "string", "complexType": { "original": "string | null", "resolved": "string", "references": {} }, "mutable": false, "attr": "input-aria-label", "reflectToAttr": false, "docs": "This property can be used to set the ARIA label associated with this input (for screen readers).", "docsTags": [ { "name": "default", "text": "null" } ], "default": "null", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "inputId", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "input-id", "reflectToAttr": false, "docs": "This property can be used to specifically set an ID to the input field. If an ID is not provided, it will be dynamically generated.", "docsTags": [ { "name": "default", "text": "generateId('som-input')" } ], "default": "generateId('som-input')", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": false, "docs": "This property can be used to set the inline label.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "labelClass", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label-class", "reflectToAttr": false, "docs": "This property is a list of CSS classes that can be used to style the label.", "docsTags": [ { "name": "deprecated", "text": "with version 4.0.1 release" }, { "name": "default", "text": "''" } ], "default": "''", "deprecation": "with version 4.0.1 release", "values": [ { "type": "string" } ], "optional": true, "required": false, "getter": false, "setter": false }, { "name": "name", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "name", "reflectToAttr": false, "docs": "This property is the form element name (used when submitting the form).", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "size", "type": "\"lg\" | \"sm\"", "complexType": { "original": "'sm' | 'lg'", "resolved": "\"lg\" | \"sm\"", "references": {} }, "mutable": false, "attr": "size", "reflectToAttr": false, "docs": "This property determines the size of the toggle", "docsTags": [ { "name": "default", "text": "'sm'" } ], "default": "'sm'", "values": [ { "value": "lg", "type": "string" }, { "value": "sm", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "value", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "value", "reflectToAttr": false, "docs": "This property is the toggle value sent on submit when using it in a form.", "docsTags": [ { "name": "default", "text": "''" } ], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "setFocus", "returns": { "type": "Promise", "docs": "Promise will resolve after focus." }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "setFocus() => Promise", "parameters": [], "docs": "This public method sets focus to the checkbox element.", "docsTags": [ { "name": "returns", "text": "Promise will resolve after focus." } ] } ], "events": [ { "event": "somBlur", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted when when the toggle loses focus.", "docsTags": [] }, { "event": "somChange", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted when the toggle value changes.", "docsTags": [] }, { "event": "somFocus", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted when when the toggle gets focus.", "docsTags": [] } ], "listeners": [ { "event": "keydown", "capture": false, "passive": false } ], "styles": [], "slots": [ { "name": "label", "docs": "Label for the toggle. Alternatively, you can use the label attribute." } ], "parts": [], "dependents": [], "dependencies": [ "som-icon" ], "dependencyGraph": { "som-toggle": [ "som-icon" ] } }, { "filePath": "src/components/som-tooltip/som-tooltip.tsx", "encapsulation": "none", "tag": "som-tooltip", "docs": "A tooltip is a floating, non-actionable label that displays additional information about the interface element or feature.", "docsTags": [], "usage": {}, "props": [ { "name": "content", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "content", "reflectToAttr": false, "docs": "This property shows the text to be displayed in the tooltip.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "horizontalPosition", "type": "\"auto\" | \"left\" | \"right\"", "complexType": { "original": "'left' | 'right' | 'auto'", "resolved": "\"auto\" | \"left\" | \"right\"", "references": {} }, "mutable": true, "attr": "horizontal-position", "reflectToAttr": false, "docs": "This property controls the horizontal position of the popover.", "docsTags": [ { "name": "default", "text": "'auto'" } ], "default": "'auto'", "values": [ { "value": "auto", "type": "string" }, { "value": "left", "type": "string" }, { "value": "right", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "tooltipId", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "tooltip-id", "reflectToAttr": false, "docs": "The id for the active element to reference via aria-describedby.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false }, { "name": "verticalPosition", "type": "\"auto\" | \"bottom\" | \"top\"", "complexType": { "original": "'top' | 'bottom' | 'auto'", "resolved": "\"auto\" | \"bottom\" | \"top\"", "references": {} }, "mutable": true, "attr": "vertical-position", "reflectToAttr": false, "docs": "This property controls the vertical position of the popover.", "docsTags": [ { "name": "default", "text": "'auto'" } ], "default": "'auto'", "values": [ { "value": "auto", "type": "string" }, { "value": "bottom", "type": "string" }, { "value": "top", "type": "string" } ], "optional": false, "required": false, "getter": false, "setter": false } ], "methods": [ { "name": "close", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "close() => Promise", "parameters": [], "docs": "", "docsTags": [] }, { "name": "open", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "open() => Promise", "parameters": [], "docs": "", "docsTags": [] } ], "events": [ { "event": "closed", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted when the popover is closed.", "docsTags": [] }, { "event": "opened", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "This event is emitted when the popover is opened.", "docsTags": [] } ], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [ "som-checkbox", "som-checkbox-group", "som-combobox", "som-date-picker-input", "som-input", "som-radio-button-group", "som-select", "som-textarea" ], "dependencies": [], "dependencyGraph": { "som-checkbox": [ "som-tooltip" ], "som-checkbox-group": [ "som-tooltip" ], "som-combobox": [ "som-tooltip" ], "som-date-picker-input": [ "som-tooltip" ], "som-input": [ "som-tooltip" ], "som-radio-button-group": [ "som-tooltip" ], "som-select": [ "som-tooltip" ], "som-textarea": [ "som-tooltip" ] } } ], "typeLibrary": {} }