npm - @sula-tech/webcomponents - Versions diffs - 0.5.0 → 0.6.0 - Mend

@sula-tech/webcomponents 0.5.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (92) hide show

package/dist/collection/components/sula-search-bar/sula-search-bar.js ADDED Viewed

@@ -0,0 +1,240 @@
+import { Host, h } from "@stencil/core";
+import { SulaSearchBarStyle } from "./model/sula-search.bar-model";
+export class SulaSearchBar {
+    constructor() {
+        /**
+         * Search bar style
+         */
+        this.searchBarStyle = SulaSearchBarStyle.Default;
+        this.isFocused = false;
+        this.textValue = '';
+        this.handleInputFocus = () => {
+            this.isFocused = true;
+            this.inputElement.focus();
+            this.focusedOn.emit();
+        };
+        this.handleInputBlur = () => {
+            this.isFocused = false;
+            this.inputElement.blur();
+            this.focusedOut.emit();
+        };
+        this.handleRightIconClick = (event) => {
+            this.rightIconClicked.emit();
+            event.stopPropagation();
+            event.preventDefault();
+        };
+        this.handleValueChanges = (event) => {
+            const newValue = event.target.value;
+            this.textValue = newValue;
+            this.value = newValue;
+            this.valueChanged.emit(newValue);
+        };
+    }
+    componentWillLoad() {
+        if (this.value && this.value.trim().length > 0) {
+            this.textValue = this.value;
+        }
+    }
+    getStyleClass() {
+        const style = {
+            [SulaSearchBarStyle.Default]: 'bg-surface-on-body hover:bg-states-empty-bg-hover',
+            [SulaSearchBarStyle.Highlight]: 'bg-surface-body search-bar-shadow border border-surface-on-body',
+        };
+        return style[this.searchBarStyle];
+    }
+    render() {
+        return (h(Host, { key: 'd4d90e7c772577043a926f5c4da9940cb5540fb9' }, h("div", { key: '9d99122174667fca977c37e3cd707571f2fb5d54', class: {
+                'flex flex-row items-center space-x-12 px-16 rounded-xxl h-44 caret-brand-primary outline-none group': true,
+                [this.getStyleClass()]: true,
+                'search-bar-focus': this.isFocused,
+            }, tabIndex: 0, onFocus: this.handleInputFocus, onClick: this.handleInputFocus }, !this.isFocused && this.leftIcon && (h("div", { key: 'c95b9cdde31fcae4c990a9b1fd31e26354925903', class: "flex justify-center items-center leading-6" }, h("sula-icon", { key: '7c8087041097973cbef0a2b694c80e17545b1667', icon: this.leftIcon, customClass: "text-2xl text-icon-primary group-hover:text-brand-primary" }))), h("input", { key: 'a637dbc3e075bd9262140adf932ec828b5c2c4eb', ref: node => (this.inputElement = node), type: "text", class: "outline-none border-none w-full bg-transparent text-text-primary", placeholder: this.placeholder, onBlur: this.handleInputBlur, value: this.textValue, onInput: this.handleValueChanges }), this.rightIcon && (h("div", { key: '76c21444a58564a0fdcb741f38623005d2c445b5', class: "flex justify-center items-center leading-6 cursor-pointer", onClick: this.handleRightIconClick, onMouseDown: e => e.preventDefault() }, h("sula-icon", { key: '9e10c4ead0b0563277e0ddf0e0cf6e9ee79171f8', icon: this.rightIcon, customClass: "text-2xl text-icon-primary" }))))));
+    }
+    static get is() { return "sula-search-bar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sula-search-bar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sula-search-bar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Value for the search bar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "searchBarStyle": {
+                "type": "string",
+                "attribute": "search-bar-style",
+                "mutable": true,
+                "complexType": {
+                    "original": "SulaSearchBarStyle",
+                    "resolved": "SulaSearchBarStyle.Default | SulaSearchBarStyle.Highlight",
+                    "references": {
+                        "SulaSearchBarStyle": {
+                            "location": "import",
+                            "path": "./model/sula-search.bar-model",
+                            "id": "src/components/sula-search-bar/model/sula-search.bar-model.ts::SulaSearchBarStyle"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Search bar style"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "SulaSearchBarStyle.Default"
+            },
+            "placeholder": {
+                "type": "string",
+                "attribute": "placeholder",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Search bar placeholder"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "leftIcon": {
+                "type": "string",
+                "attribute": "left-icon",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Search bar left icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "rightIcon": {
+                "type": "string",
+                "attribute": "right-icon",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Search bar right icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isFocused": {},
+            "textValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChanged",
+                "name": "valueChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when search bar value changes."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "focusedOn",
+                "name": "focusedOn",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when search bar is focused."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "focusedOut",
+                "name": "focusedOut",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when search bar is focused out."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "rightIconClicked",
+                "name": "rightIconClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when right icon is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=sula-search-bar.js.map

package/dist/collection/components/sula-search-bar/sula-search-bar.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"sula-search-bar.js","sourceRoot":"","sources":["../../../src/components/sula-search-bar/sula-search-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core';\nimport { SulaSearchBarStyle } from './model/sula-search.bar-model';\n\n@Component({\n tag: 'sula-search-bar',\n styleUrl: 'sula-search-bar.scss',\n shadow: true,\n})\nexport class SulaSearchBar {\n /**\n * Value for the search bar.\n */\n @Prop({ mutable: true })\n value?: string;\n\n /**\n * Search bar style\n */\n @Prop({ mutable: true })\n searchBarStyle: SulaSearchBarStyle = SulaSearchBarStyle.Default;\n\n /**\n * Search bar placeholder\n */\n @Prop({ mutable: true })\n placeholder: string;\n\n /**\n * Search bar left icon\n */\n @Prop({ mutable: true })\n leftIcon: string;\n\n /**\n * Search bar right icon\n */\n @Prop({ mutable: true })\n rightIcon: string;\n\n /**\n * Event emitted when search bar value changes.\n */\n @Event()\n valueChanged: EventEmitter<string>;\n\n /**\n * Event emitted when search bar is focused.\n */\n @Event()\n focusedOn: EventEmitter<void>;\n\n /**\n * Event emitted when search bar is focused out.\n */\n @Event()\n focusedOut: EventEmitter<void>;\n\n /**\n * Event emitted when right icon is clicked\n */\n @Event()\n rightIconClicked: EventEmitter<void>;\n\n @State()\n isFocused = false;\n\n @State()\n textValue: string = '';\n\n inputElement: HTMLInputElement;\n\n componentWillLoad() {\n if (this.value && this.value.trim().length > 0) {\n this.textValue = this.value;\n }\n }\n\n getStyleClass() {\n const style = {\n [SulaSearchBarStyle.Default]: 'bg-surface-on-body hover:bg-states-empty-bg-hover',\n [SulaSearchBarStyle.Highlight]: 'bg-surface-body search-bar-shadow border border-surface-on-body',\n };\n\n return style[this.searchBarStyle];\n }\n\n handleInputFocus = () => {\n this.isFocused = true;\n this.inputElement.focus();\n this.focusedOn.emit();\n };\n\n handleInputBlur = () => {\n this.isFocused = false;\n this.inputElement.blur();\n this.focusedOut.emit();\n };\n\n handleRightIconClick = (event: MouseEvent) => {\n this.rightIconClicked.emit();\n\n event.stopPropagation();\n event.preventDefault();\n };\n\n handleValueChanges = (event: InputEvent) => {\n const newValue = (event.target as HTMLTextAreaElement).value;\n this.textValue = newValue;\n this.value = newValue;\n\n this.valueChanged.emit(newValue);\n };\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'flex flex-row items-center space-x-12 px-16 rounded-xxl h-44 caret-brand-primary outline-none group': true,\n [this.getStyleClass()]: true,\n 'search-bar-focus': this.isFocused,\n }}\n tabIndex={0}\n onFocus={this.handleInputFocus}\n onClick={this.handleInputFocus}\n >\n {!this.isFocused && this.leftIcon && (\n <div class=\"flex justify-center items-center leading-6\">\n <sula-icon icon={this.leftIcon} customClass=\"text-2xl text-icon-primary group-hover:text-brand-primary\"></sula-icon>\n </div>\n )}\n\n <input\n ref={node => (this.inputElement = node)}\n type=\"text\"\n class=\"outline-none border-none w-full bg-transparent text-text-primary\"\n placeholder={this.placeholder}\n onBlur={this.handleInputBlur}\n value={this.textValue}\n onInput={this.handleValueChanges}\n />\n\n {this.rightIcon && (\n <div class=\"flex justify-center items-center leading-6 cursor-pointer\" onClick={this.handleRightIconClick} onMouseDown={e => e.preventDefault()}>\n <sula-icon icon={this.rightIcon} customClass=\"text-2xl text-icon-primary\"></sula-icon>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/sula-search-bar/sula-search-bar.stories.js ADDED Viewed

@@ -0,0 +1,119 @@
+import { SulaSearchBarStyle } from "./model/sula-search.bar-model";
+export default {
+    title: 'Components/sula-search-bar',
+    tags: ['autodocs'],
+    argTypes: {
+        value: {
+            control: 'text',
+            defaultValue: '',
+            description: 'Value for the search bar',
+            type: {
+                required: false,
+            },
+        },
+        searchBarStyle: {
+            control: { type: 'select' },
+            options: Object.values(SulaSearchBarStyle),
+            defaultValue: SulaSearchBarStyle.Default,
+            description: 'The search bar style',
+            type: {
+                required: false,
+            },
+        },
+        placeholder: {
+            control: 'text',
+            defaultValue: 'Pesquisar...',
+            description: 'The search bar placeholder',
+            type: {
+                required: false,
+            },
+        },
+        leftIcon: {
+            control: 'text',
+            defaultValue: 'ph ph-magnifying-glass',
+            description: 'The search bar left icon',
+            type: {
+                required: false,
+            },
+        },
+        rightIcon: {
+            control: 'text',
+            defaultValue: 'ph ph-x',
+            description: 'The search bar right icon',
+            type: {
+                required: false,
+            },
+        },
+        valueChanged: {
+            action: 'valueChanged',
+            description: 'Evento emitido quando o valor da busca muda',
+        },
+        focusedOn: {
+            action: 'focusedOn',
+            description: 'Evento emitido quando a barra de busca recebe foco',
+        },
+        focusedOut: {
+            action: 'focusedOut',
+            description: 'Evento emitido quando a barra de busca perde foco',
+        },
+        rightIconClicked: {
+            action: 'rightIconClicked',
+            description: 'Evento emitido quando o ícone da direita é clicado',
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: 'O componente Search Bar do Sula Design System é utilizado para implementar funcionalidades de busca em aplicações. Suporta diferentes estilos, ícones personalizáveis e eventos para interação completa.',
+            },
+        },
+    },
+};
+const Template = args => {
+    const container = document.createElement('div');
+    container.style.maxWidth = '400px';
+    container.style.margin = '20px';
+    const el = document.createElement('sula-search-bar');
+    if (args.value)
+        el.setAttribute('value', args.value);
+    el.setAttribute('search-bar-style', args.searchBarStyle);
+    if (args.placeholder)
+        el.setAttribute('placeholder', args.placeholder);
+    if (args.leftIcon)
+        el.setAttribute('left-icon', args.leftIcon);
+    if (args.rightIcon)
+        el.setAttribute('right-icon', args.rightIcon);
+    el.addEventListener('valueChanged', args.valueChanged);
+    el.addEventListener('focusedOn', args.focusedOn);
+    el.addEventListener('focusedOut', args.focusedOut);
+    el.addEventListener('rightIconClicked', args.rightIconClicked);
+    container.appendChild(el);
+    return container;
+};
+export const Default = Template.bind({});
+Default.args = {
+    value: '',
+    searchBarStyle: SulaSearchBarStyle.Default,
+    placeholder: 'Pesquisar...',
+    leftIcon: 'ph ph-magnifying-glass',
+    rightIcon: '',
+};
+export const WithValue = Template.bind({});
+WithValue.args = Object.assign(Object.assign({}, Default.args), { value: 'Texto de busca' });
+export const WithRightIcon = Template.bind({});
+WithRightIcon.args = Object.assign(Object.assign({}, Default.args), { rightIcon: 'ph ph-x' });
+export const HighlightStyle = Template.bind({});
+HighlightStyle.args = Object.assign(Object.assign({}, Default.args), { searchBarStyle: SulaSearchBarStyle.Highlight });
+export const WithoutLeftIcon = Template.bind({});
+WithoutLeftIcon.args = Object.assign(Object.assign({}, Default.args), { leftIcon: '', placeholder: 'Busca sem ícone esquerdo' });
+export const WithBothIcons = Template.bind({});
+WithBothIcons.args = Object.assign(Object.assign({}, Default.args), { leftIcon: 'ph ph-magnifying-glass', rightIcon: 'ph ph-x', placeholder: 'Busca com ambos ícones' });
+export const CustomPlaceholder = Template.bind({});
+CustomPlaceholder.args = Object.assign(Object.assign({}, Default.args), { placeholder: 'Digite para buscar produtos...' });
+export const HighlightWithIcons = Template.bind({});
+HighlightWithIcons.args = Object.assign(Object.assign({}, Default.args), { searchBarStyle: SulaSearchBarStyle.Highlight, leftIcon: 'ph ph-magnifying-glass', rightIcon: 'ph ph-x' });
+export const CustomIcons = Template.bind({});
+CustomIcons.args = Object.assign(Object.assign({}, Default.args), { leftIcon: 'ph ph-funnel', rightIcon: 'ph ph-sliders', placeholder: 'Filtrar resultados...' });
+export const WithValueAndRightIcon = Template.bind({});
+WithValueAndRightIcon.args = Object.assign(Object.assign({}, Default.args), { value: 'Texto de busca', rightIcon: 'ph ph-x' });
+//# sourceMappingURL=sula-search-bar.stories.js.map

package/dist/collection/components/sula-search-bar/sula-search-bar.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"sula-search-bar.stories.js","sourceRoot":"","sources":["../../../src/components/sula-search-bar/sula-search-bar.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { SulaSearchBarStyle } from './model/sula-search.bar-model';\n\nexport default {\n title: 'Components/sula-search-bar',\n tags: ['autodocs'],\n argTypes: {\n value: {\n control: 'text',\n defaultValue: '',\n description: 'Value for the search bar',\n type: {\n required: false,\n },\n },\n searchBarStyle: {\n control: { type: 'select' },\n options: Object.values(SulaSearchBarStyle),\n defaultValue: SulaSearchBarStyle.Default,\n description: 'The search bar style',\n type: {\n required: false,\n },\n },\n placeholder: {\n control: 'text',\n defaultValue: 'Pesquisar...',\n description: 'The search bar placeholder',\n type: {\n required: false,\n },\n },\n leftIcon: {\n control: 'text',\n defaultValue: 'ph ph-magnifying-glass',\n description: 'The search bar left icon',\n type: {\n required: false,\n },\n },\n rightIcon: {\n control: 'text',\n defaultValue: 'ph ph-x',\n description: 'The search bar right icon',\n type: {\n required: false,\n },\n },\n valueChanged: {\n action: 'valueChanged',\n description: 'Evento emitido quando o valor da busca muda',\n },\n focusedOn: {\n action: 'focusedOn',\n description: 'Evento emitido quando a barra de busca recebe foco',\n },\n focusedOut: {\n action: 'focusedOut',\n description: 'Evento emitido quando a barra de busca perde foco',\n },\n rightIconClicked: {\n action: 'rightIconClicked',\n description: 'Evento emitido quando o ícone da direita é clicado',\n },\n },\n parameters: {\n docs: {\n description: {\n component:\n 'O componente Search Bar do Sula Design System é utilizado para implementar funcionalidades de busca em aplicações. Suporta diferentes estilos, ícones personalizáveis e eventos para interação completa.',\n },\n },\n },\n};\n\nconst Template = args => {\n const container = document.createElement('div');\n container.style.maxWidth = '400px';\n container.style.margin = '20px';\n\n const el = document.createElement('sula-search-bar');\n\n if (args.value) el.setAttribute('value', args.value);\n el.setAttribute('search-bar-style', args.searchBarStyle);\n if (args.placeholder) el.setAttribute('placeholder', args.placeholder);\n if (args.leftIcon) el.setAttribute('left-icon', args.leftIcon);\n if (args.rightIcon) el.setAttribute('right-icon', args.rightIcon);\n\n el.addEventListener('valueChanged', args.valueChanged);\n el.addEventListener('focusedOn', args.focusedOn);\n el.addEventListener('focusedOut', args.focusedOut);\n el.addEventListener('rightIconClicked', args.rightIconClicked);\n\n container.appendChild(el);\n\n return container;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n value: '',\n searchBarStyle: SulaSearchBarStyle.Default,\n placeholder: 'Pesquisar...',\n leftIcon: 'ph ph-magnifying-glass',\n rightIcon: '',\n};\n\nexport const WithValue = Template.bind({});\nWithValue.args = {\n ...Default.args,\n value: 'Texto de busca',\n};\n\nexport const WithRightIcon = Template.bind({});\nWithRightIcon.args = {\n ...Default.args,\n rightIcon: 'ph ph-x',\n};\n\nexport const HighlightStyle = Template.bind({});\nHighlightStyle.args = {\n ...Default.args,\n searchBarStyle: SulaSearchBarStyle.Highlight,\n};\n\nexport const WithoutLeftIcon = Template.bind({});\nWithoutLeftIcon.args = {\n ...Default.args,\n leftIcon: '',\n placeholder: 'Busca sem ícone esquerdo',\n};\n\nexport const WithBothIcons = Template.bind({});\nWithBothIcons.args = {\n ...Default.args,\n leftIcon: 'ph ph-magnifying-glass',\n rightIcon: 'ph ph-x',\n placeholder: 'Busca com ambos ícones',\n};\n\nexport const CustomPlaceholder = Template.bind({});\nCustomPlaceholder.args = {\n ...Default.args,\n placeholder: 'Digite para buscar produtos...',\n};\n\nexport const HighlightWithIcons = Template.bind({});\nHighlightWithIcons.args = {\n ...Default.args,\n searchBarStyle: SulaSearchBarStyle.Highlight,\n leftIcon: 'ph ph-magnifying-glass',\n rightIcon: 'ph ph-x',\n};\n\nexport const CustomIcons = Template.bind({});\nCustomIcons.args = {\n ...Default.args,\n leftIcon: 'ph ph-funnel',\n rightIcon: 'ph ph-sliders',\n placeholder: 'Filtrar resultados...',\n};\n\nexport const WithValueAndRightIcon = Template.bind({});\nWithValueAndRightIcon.args = {\n ...Default.args,\n value: 'Texto de busca',\n rightIcon: 'ph ph-x',\n};\n"]}

package/dist/collection/components/sula-switch/sula-switch.js CHANGED Viewed

@@ -35,23 +35,23 @@ export class SulaSwitch {
         };
     }
     render() {
-        return (h(Host, { key: '425b13b4cfe06248cbd3430c99b29255a9c538bd' }, h("div", { key: 'e355543bb922e764e3c5c3e8fbde1075f2476fc5', class: {
+        return (h(Host, { key: 'e920dbb868a5bdde5e34ac4d015529aef08a8e3d' }, h("div", { key: '7552191cc1632d04c0c496f382fdbbb166547236', class: {
                 'outline-none': true,
                 'flex items-center space-x-12': !!this.label && this.type === SulaSwitchType.Default,
                 'flex items-center justify-between bg-surface-on-body rounded-md w-[280px] min-h-[85px] px-24 py-16': this.type === SulaSwitchType.List,
                 'hover:bg-states-empty-bg-hover active:bg-states-empty-bg-pressed cursor-pointer': this.type === SulaSwitchType.List && !this.disabled,
                 'container-focus': this.isFocus && this.type === SulaSwitchType.List,
-            }, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick, tabIndex: 0 }, this.type === SulaSwitchType.List && (h("div", { key: 'ead58713450e048721633a12ddedd6bf16deb065', class: "flex flex-col flex-1 mr-16 overflow-hidden" }, !!this.label && h("label", { key: 'ac7a9a521750ed26e173d05853238723ea16bdea', class: "text-text-primary font-bold text-base cursor-pointer break-words" }, this.label), !!this.subTitle && h("span", { key: 'fb1bbe47dc4883a2b5c5b9a6579ceb4eec4f40f8', class: "text-text-secondary text-base break-words" }, this.subTitle))), h("div", { key: '0a877452403d41931999eb29c7c733d75ceee339', class: {
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick, tabIndex: 0 }, this.type === SulaSwitchType.List && (h("div", { key: '322c268b6e010f49cb1b61509398d9f7a1b9b8a1', class: "flex flex-col flex-1 mr-16 overflow-hidden" }, !!this.label && h("label", { key: '0da8b536c781a7d0fdfc1539b115c11171328455', class: "text-text-primary font-bold text-base cursor-pointer break-words" }, this.label), !!this.subTitle && h("span", { key: '8ff30bb13d52d759c6b2a2892ec608d14e9ece86', class: "text-text-secondary text-base break-words" }, this.subTitle))), h("div", { key: 'cec3a0d3f3620af6e25c2ae1e6ac771eb7acaef2', class: {
                 'switch-container w-56 h-32 flex items-center rounded-xxl p-2 outline-none': true,
                 'switch-on bg-brand-primary justify-end': this.active,
                 'switch-off bg-neutral-neutral-3 justify-start': !this.active,
                 'cursor-not-allowed bg-states-bg-disabled': this.disabled,
                 'switch-focus': this.isFocus && this.type === SulaSwitchType.Default,
-            }, tabIndex: 0, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: 'ed09a35a7e3cc0bebb96734acbcc1aca3c5820aa', class: {
+            }, tabIndex: 0, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: 'ae01eb32010e93fbc3fb652c0fdd653df57b7835', class: {
                 'switch-thumb w-[28px] h-[28px] rounded-full flex justify-center items-center': true,
                 'bg-negative-negative-1': !this.disabled,
                 'bg-states-bg-disabled shadow-md': this.disabled,
-            } }, h("div", { key: '4fb356403c6915e650bc668db6114af0bcb466cc', class: {
+            } }, h("div", { key: 'f965f1fa8af298f87383c8549a82990a9daeafee', class: {
                 'switch-indicator rounded-full': true,
                 'switch-indicator-on w-12 h-12 bg-brand-primary': this.active,
                 'switch-indicator-off w-[10px] h-4 bg-neutral-neutral-4': !this.active,

package/dist/collection/components/sula-tag/sula-tag.js CHANGED Viewed

@@ -72,14 +72,14 @@ export class SulaTag {
         return iconStatusStyles[this.iconStatus];
     }
     render() {
-        return (h(Host, { key: 'ef63a16e25727a48a1be7fd5df82c0ab7ac0b98d' }, h("div", { key: '7eeb7fc42154369ab8a19d820ed8f9449c032296', class: {
+        return (h(Host, { key: 'ea42eeb4ee80620a790938eb08c6322fa4dee214' }, h("div", { key: '29745dd127c152c8e2e74534f8fa53cc8d305534', class: {
                 'flex items-center rounded-xxl w-fit': true,
                 [this.getSizeClass()]: true,
                 [this.getAppearanceClass()]: true,
-            } }, this.icon && (h("div", { key: '3fd56c3eb8478100bc407069899da5243d3311e3', class: {
+            } }, this.icon && (h("div", { key: '2eb1b3d506d98a12b5513c947237289fcacfe035', class: {
                 'flex justify-center items-center mr-8 rounded-full leading-4 px-2 py-1': true,
                 [this.getIconStatusClass()]: true,
-            } }, h("sula-icon", { key: '818aaf5a5238a6068e39631f0b18b872f1f1f4a9', icon: this.icon, "custom-class": "text-base text-negative-negative-1 leading-4" }))), h("span", { key: '88726c6b57eec983a450aa3b83e739e40f95a9f8', class: {
+            } }, h("sula-icon", { key: 'b3daed5248632ce22ee43f9d64987939a3682242', icon: this.icon, "custom-class": "text-base text-negative-negative-1 leading-4" }))), h("span", { key: 'd436740cbce0feab73152447b7694818fe87f90e', class: {
                 'text-base leading-4': true,
                 [this.getTextColorClass()]: true,
                 [this.getTextWeightClass()]: true,

package/dist/collection/components/sula-textarea/sula-textarea.js CHANGED Viewed

@@ -94,34 +94,34 @@ export class SulaTextarea {
     }
     render() {
         const containerHeight = this.rows * 24 + 48;
-        return (h(Host, { key: 'f92eb28cf8d28e5489f27978c839f65591c79146', ref: node => (this.node = node) }, h("div", { key: '41adf9b4d79527dd5e9690062f026324123fb65d' }, h("div", { key: '87300f79d1a4ac9340b746b938cf74bfe0dcc6be', id: "textarea-container", class: {
+        return (h(Host, { key: 'ed754651792554736de45340f7a2eca30303517e', ref: node => (this.node = node) }, h("div", { key: '7c8422829a17136e4f98792da018fa4a4c531de4' }, h("div", { key: '16f16305b5b1a059e8d1e0b956eb78d2443bd9e0', id: "textarea-container", class: {
                 'relative border rounded-sm px-16 py-12 outline-none caret-brand-primary': true,
                 'textarea-focus': this.textareaIsFocused && !this.disabled && this.status === SulaTextareaStatus.Default,
                 'textarea-error': this.status === SulaTextareaStatus.Error && !this.disabled,
                 'bg-states-bg-disabled border-line-general cursor-not-allowed': this.disabled,
                 'bg-surface-body border-line-input cursor-text': !this.disabled,
-            }, style: { height: `${containerHeight}px` }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleTextareaClick }, h("label", { key: '2b0cd8be5aa596dd69809f6c4d7234491750f8c3', class: {
+            }, style: { height: `${containerHeight}px` }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleTextareaClick }, h("label", { key: 'ca41cf5b404b52684d6597a6976b86a596bb613f', class: {
                 'text-base top-16 left-12 absolute transition-all duration-200 ease-in-out pointer-events-none z-10 w-[85%]': true,
                 'text-text-primary': !this.disabled && (this.isActive || this.status === SulaTextareaStatus.Default),
                 'text-text-disabled': this.disabled,
                 'bg-surface-body': !this.disabled && this.isActive,
-            }, ref: node => (this.labelElement = node) }, this.label), h("label", { key: 'ef9f0f3ed0e456c6ad28345f27438d1f2b248f5e', class: {
+            }, ref: node => (this.labelElement = node) }, this.label), h("label", { key: 'cfcb85fadb260a530be91f347c55e6f98ae3168b', class: {
                 'absolute font-bold transition-all duration-200 ease-in-out pointer-events-none z-10 active-label hidden from-down': true,
                 'text-sm top-12 left-16': this.isActive,
                 'text-text-primary': !this.disabled && (this.isActive || this.status === SulaTextareaStatus.Default),
                 'text-text-disabled': this.disabled,
                 'bg-surface-body': !this.disabled && this.isActive,
-            }, ref: node => (this.activeLabelElement = node) }, this.label), h("textarea", { key: '35048b74ed9a1bcd9df10ea7af1d1aaee2c5e640', ref: node => (this.textareaElement = node), placeholder: this.isActive ? this.placeholder : '', rows: this.rows, maxLength: this.maxLength, disabled: this.disabled, class: {
+            }, ref: node => (this.activeLabelElement = node) }, this.label), h("textarea", { key: 'b020d47c6e676defc7af5703142bf28b27235b68', ref: node => (this.textareaElement = node), placeholder: this.isActive ? this.placeholder : '', rows: this.rows, maxLength: this.maxLength, disabled: this.disabled, class: {
                 'w-full h-full outline-none text-base bg-transparent border-none resize-none': true,
                 'pt-6': this.isActive,
                 'pt-0': !this.isActive,
                 'text-text-primary': !this.disabled,
                 'text-text-disabled cursor-not-allowed overflow-hidden': this.disabled,
-            }, onInput: this.handleTextareaChanges, onFocus: this.handleTextareaFocus, onBlur: this.handleBlur, value: this.textValue })), (this.helpText || this.maxLength) && (h("div", { key: '220803fef223bc00db7cb9137995a9e950abb842', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h("div", { key: 'f3a26a35db2cb8a70471126a82f1fca21dcbb058', id: "textarea-help-text", class: {
+            }, onInput: this.handleTextareaChanges, onFocus: this.handleTextareaFocus, onBlur: this.handleBlur, value: this.textValue })), (this.helpText || this.maxLength) && (h("div", { key: '5772c4879f4a2e680423a025ddf371b0682fdbfc', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h("div", { key: 'f85f4b9195cf845d110a8f3a9b4a34e8cd522783', id: "textarea-help-text", class: {
                 'text-text-primary': this.status === SulaTextareaStatus.Default && !this.disabled,
                 'text-feedback-error': this.status === SulaTextareaStatus.Error && !this.disabled,
                 'text-text-disabled': this.disabled,
-            } }, this.helpText)), this.maxLength && (h("div", { key: '34c3b09e22a85973a65718908fb1744abbffc10a', id: "max-length-container", class: {
+            } }, this.helpText)), this.maxLength && (h("div", { key: 'dffd4ae72ce81a460589f6cbb58f7615529547ea', id: "max-length-container", class: {
                 'text-text-primary': this.status === SulaTextareaStatus.Default && !this.disabled,
                 'text-feedback-error': this.status === SulaTextareaStatus.Error && !this.disabled,
                 'text-text-disabled': this.disabled,

package/dist/collection/components/sula-textfield/sula-textfield.js CHANGED Viewed

@@ -97,14 +97,14 @@ export class SulaTextfield {
         return this.icon;
     }
     render() {
-        return (h(Host, { key: 'fb42aa8b4a5f44271aedb2080f82f6c322cfef0e', ref: node => (this.node = node) }, h("div", { key: '47636efa9e1a6608d1c1636806df19b8c894deb8' }, h("div", { key: '2d42ce76232efc9c82061866cb508668e166de98', id: "button-container", class: {
+        return (h(Host, { key: '3805ff5fefc6ccc3b903384ac54bcf01ebd9527a', ref: node => (this.node = node) }, h("div", { key: 'e90a85b46e51d9c0c989bc4e0ff53b5996cc6c49' }, h("div", { key: '258fa53c0386cc3cc231a53d5d0e8da483cc51ce', id: "button-container", class: {
                 'flex items-center border rounded-sm px-16 outline-none h-[72px] caret-brand-primary': true,
                 'flex-row justify-between': !!this.icon || this.type === SulaTextfieldType.Password,
                 'button-focus': this.inputIsFocused && !this.disabled && this.status === SulaTextfieldStatus.Default,
                 'button-error': this.status === SulaTextfieldStatus.Error && !this.disabled,
                 'bg-states-bg-disabled border-line-general cursor-not-allowed': this.disabled,
                 'bg-surface-body border-line-input cursor-pointer': !this.disabled,
-            }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleInputClick }, !this.disabled && (h("div", { key: '3759391f009592e655651e3fb0eb4d3c635c567a', class: { 'hidden flex-col w-full': true, 'pr-12': !!this.icon }, ref: node => (this.inputContainer = node) }, h("label", { key: 'ff77510dc8323c9cb5754ae2fa18d746c5191025', class: "font-bold text-sm text-text-primary from-down" }, this.label), h("input", { key: '3a4d2f7d630cca89c1bf019246ba0be75551610f', type: this.type, ref: node => (this.inputElement = node), placeholder: this.placeholder, class: "outline-none text-base text-text-primary bg-transparent", onInput: this.handleInputChanges, onFocus: this.handleInputFocus, value: this.value }))), h("div", { key: '66812a11a436f2d1b9eea5b413b04d8ff1f142f9', id: "textfield-label", class: { 'text-base flex items-center': true, 'text-text-primary': !this.disabled, 'text-text-disabled': this.disabled }, ref: node => (this.labelElement = node) }, this.label), (!!this.icon || this.type === SulaTextfieldType.Password) && (h("div", { key: 'e04dd7cb805f1e3806391da6c8dfc83f761127bc', class: "flex items-center justify-center", onClick: this.handleIconClick }, h("sula-icon", { key: '84d70edba3000e811829c2bc621b513d6bc61c19', icon: this.getInputIcon(), customClass: `text-2xl ${this.disabled ? 'text-icon-disabled' : 'text-icon-primary'}` })))), (this.helpText || this.maxLength) && !this.disabled && (h("div", { key: '23378a19e251dc0d9b1785367ef1d36fa526af3c', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h("div", { key: '65a5aeccf4efbaedd86341847fef7b77e6e5da8f', id: "textfield-help-text", class: { 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error } }, this.helpText)), this.maxLength && (h("div", { key: 'ce5dcdbe6d338f56b0462a164d49c56230f59663', id: "max-length-container", class: { 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error } }, this.textValue ? this.textValue.length : 0, "/", this.maxLength)))))));
+            }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleInputClick }, !this.disabled && (h("div", { key: '0e16b2a5f2bd115b65a6d8e572bde900606fb97c', class: { 'hidden flex-col w-full': true, 'pr-12': !!this.icon }, ref: node => (this.inputContainer = node) }, h("label", { key: '1a487915bfd317c1f1b3c04917096f402e7cb7ba', class: "font-bold text-sm text-text-primary from-down" }, this.label), h("input", { key: 'b2cd0285ef6cdaa4956ac1e7dc7a9d2fb850ffed', type: this.type, ref: node => (this.inputElement = node), placeholder: this.placeholder, class: "outline-none text-base text-text-primary bg-transparent", onInput: this.handleInputChanges, onFocus: this.handleInputFocus, value: this.value }))), h("div", { key: 'c26f72728243abca768732d758f7a9992c32d146', id: "textfield-label", class: { 'text-base flex items-center': true, 'text-text-primary': !this.disabled, 'text-text-disabled': this.disabled }, ref: node => (this.labelElement = node) }, this.label), (!!this.icon || this.type === SulaTextfieldType.Password) && (h("div", { key: 'b1f375f8291a67455ae0e252321e4a0fa577bb64', class: "flex items-center justify-center", onClick: this.handleIconClick }, h("sula-icon", { key: 'a780572571be2d1b4e754ccb149b768bb9195800', icon: this.getInputIcon(), customClass: `text-2xl ${this.disabled ? 'text-icon-disabled' : 'text-icon-primary'}` })))), (this.helpText || this.maxLength) && !this.disabled && (h("div", { key: '6ac0ac18b014923a1b6a432e181beaea2f557dca', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h("div", { key: 'f8aa196b22755380105da258fa8e218ceb3894c0', id: "textfield-help-text", class: { 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error } }, this.helpText)), this.maxLength && (h("div", { key: '9a9359a270f5f84175829e2e8347e992c89a2639', id: "max-length-container", class: { 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error } }, this.textValue ? this.textValue.length : 0, "/", this.maxLength)))))));
     }
     static get is() { return "sula-textfield"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sula-tiles/sula-tiles.js CHANGED Viewed

@@ -121,7 +121,7 @@ export class SulaTiles {
         return (h("div", { class: this.getTextContainerClasses() }, h("span", { class: this.getTextClasses(true), title: this.ellipsis ? this.text : undefined }, this.text), this.hasSubText && (h("span", { class: this.getTextClasses(false), title: this.ellipsis ? this.subText : undefined }, this.subText))));
     }
     render() {
-        return (h(Host, { key: '74220546ceb45c4a934a7bf7e51ab1868d335ed0' }, h("div", { key: 'b0afa8752ee1a07de5652d7b2109272062abaf42', class: this.getContainerClasses(), tabIndex: this.getTabIndex(this.isSquare), onClick: this.handleClick }, this.renderIcon(), this.renderText())));
+        return (h(Host, { key: 'bd93893ff89e978258ceb3621a260b305de320f5' }, h("div", { key: '661f7050d9a816aa3437e2d1c0de179cfb9d605d', class: this.getContainerClasses(), tabIndex: this.getTabIndex(this.isSquare), onClick: this.handleClick }, this.renderIcon(), this.renderText())));
     }
     static get is() { return "sula-tiles"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sula-timeline-list/sula-timeline-list.js CHANGED Viewed

@@ -37,7 +37,7 @@ export class SulaTimelineList {
         return iconByStatus[status];
     }
     render() {
-        return (h(Host, { key: '07297e038cc1d0dd20219b34ebc3539c408fdab5' }, h("div", { key: '20094eed02e4e6ba917576bdae2e67337cbfac68', class: "flex flex-col bg-surface-on-body px-24 py-32 w-fit rounded-md" }, this.sulaTimelineList.map((item, index) => {
+        return (h(Host, { key: 'be18bb7bcb5cff8b45b1dc33fe9f4a14b6e21d5e' }, h("div", { key: '1a2bd5e50d78223c0ef3824beef028b0d6b8fa27', class: "flex flex-col bg-surface-on-body px-24 py-32 w-fit rounded-md" }, this.sulaTimelineList.map((item, index) => {
             const isLastItem = index === this.sulaTimelineList.length - 1;
             return (h("div", { class: {
                     'relative timeline-item': true,

package/dist/components/{p-CjYWDIHR.js → p-BNtk_d_S.js} RENAMED Viewed

@@ -21,7 +21,7 @@ const SulaMenuSelectList = /*@__PURE__*/ proxyCustomElement(class SulaMenuSelect
         };
     }
     render() {
-        return (h(Host, { key: 'abc1c0c730197c6f7789312c578ed72e6c9064b9' }, h("ul", { key: '3bb329a0ed145bb78c787687af8471276b4fba80', class: {
+        return (h(Host, { key: '4c44904613a37cc42ae3adea8e3f0c9cf5a959da' }, h("ul", { key: '5a81ff5337f1dfa8e11b159b09f543d0845e05f3', class: {
                 'bg-surface-body border border-line-general sula-menu-select-list rounded-sm py-12 max-h-[260px] overflow-auto': true,
                 'w-300': !this.fullWidth,
                 'w-full': this.fullWidth,
@@ -48,6 +48,6 @@ function defineCustomElement() {
 defineCustomElement();
 export { SulaMenuSelectList as S, defineCustomElement as d };
-//# sourceMappingURL=p-CjYWDIHR.js.map
+//# sourceMappingURL=p-BNtk_d_S.js.map
-//# sourceMappingURL=p-CjYWDIHR.js.map
+//# sourceMappingURL=p-BNtk_d_S.js.map

package/dist/components/{p-CjYWDIHR.js.map → p-BNtk_d_S.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~CjYWDIHR~~.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,4uVAA4uV;;MCQ7vV,kBAAkB,iBAAAA,kBAAA,CAAA,MAAA,kBAAA,SAAAC,CAAA,CAAA;AAL/B,IAAA,WAAA,GAAA;;;;;AAME;;AAEG;AAEH,QAAA,IAAK,CAAA,KAAA,GAAuB,EAAE;AAE9B;;AAEG;AAEH,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AAQjB,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,IAAsB,KAAI;AACvC,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;AAC9B,SAAC;AAqBF;IAnBC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,+GAA+G,EAAE,IAAI;AACrH,gBAAA,OAAO,EAAE,CAAC,IAAI,CAAC,SAAS;gBACxB,QAAQ,EAAE,IAAI,CAAC,SAAS;aACzB,EAAA,EAEA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,KAClB,CAAA,CAAA,IAAA,EAAA,EAAI,KAAK,EAAC,wGAAwG,EAAC,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IACnK,IAAI,CAAC,KAAK,CACR,CACN,CAAC,CACC,CACA;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sula-menu-select-list/sula-menu-select-list.scss?tag=sula-menu-select-list&encapsulation=shadow","src/components/sula-menu-select-list/sula-menu-select-list.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.sula-menu-select-list {\n box-shadow: 0px 8px 16px 0px #0000000a;\n}\n","import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { SulaMenuListItem } from './model/sula-menu-select-list.model';\n\n@Component({\n tag: 'sula-menu-select-list',\n styleUrl: 'sula-menu-select-list.scss',\n shadow: true,\n})\nexport class SulaMenuSelectList {\n /*\n Items for list\n /\n @Prop({ mutable: true })\n items: SulaMenuListItem[] = [];\n\n /\n Menu is full width\n /\n @Prop()\n fullWidth = false;\n\n /\n Event emitted when item is selected\n */\n @Event()\n itemSelected: EventEmitter<SulaMenuListItem>;\n\n handleClick = (item: SulaMenuListItem) => {\n this.itemSelected.emit(item);\n };\n\n render() {\n return (\n <Host>\n <ul\n class={{\n 'bg-surface-body border border-line-general sula-menu-select-list rounded-sm py-12 max-h-[260px] overflow-auto': true,\n 'w-300': !this.fullWidth,\n 'w-full': this.fullWidth,\n }}\n >\n {this.items.map(item => (\n <li class=\"w-full px-24 py-16 text-base leading-4 text-text-primary hover:bg-states-empty-bg-hover cursor-pointer\" key={item.id} onClick={() => this.handleClick(item)}>\n {item.title}\n </li>\n ))}\n </ul>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-BNtk_d_S.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,4uVAA4uV;;MCQ7vV,kBAAkB,iBAAAA,kBAAA,CAAA,MAAA,kBAAA,SAAAC,CAAA,CAAA;AAL/B,IAAA,WAAA,GAAA;;;;;AAME;;AAEG;AAEH,QAAA,IAAK,CAAA,KAAA,GAAuB,EAAE;AAE9B;;AAEG;AAEH,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AAQjB,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,IAAsB,KAAI;AACvC,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;AAC9B,SAAC;AAqBF;IAnBC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,+GAA+G,EAAE,IAAI;AACrH,gBAAA,OAAO,EAAE,CAAC,IAAI,CAAC,SAAS;gBACxB,QAAQ,EAAE,IAAI,CAAC,SAAS;aACzB,EAAA,EAEA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,KAClB,CAAA,CAAA,IAAA,EAAA,EAAI,KAAK,EAAC,wGAAwG,EAAC,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IACnK,IAAI,CAAC,KAAK,CACR,CACN,CAAC,CACC,CACA;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sula-menu-select-list/sula-menu-select-list.scss?tag=sula-menu-select-list&encapsulation=shadow","src/components/sula-menu-select-list/sula-menu-select-list.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.sula-menu-select-list {\n box-shadow: 0px 8px 16px 0px #0000000a;\n}\n","import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { SulaMenuListItem } from './model/sula-menu-select-list.model';\n\n@Component({\n tag: 'sula-menu-select-list',\n styleUrl: 'sula-menu-select-list.scss',\n shadow: true,\n})\nexport class SulaMenuSelectList {\n /*\n Items for list\n /\n @Prop({ mutable: true })\n items: SulaMenuListItem[] = [];\n\n /\n Menu is full width\n /\n @Prop()\n fullWidth = false;\n\n /\n Event emitted when item is selected\n */\n @Event()\n itemSelected: EventEmitter<SulaMenuListItem>;\n\n handleClick = (item: SulaMenuListItem) => {\n this.itemSelected.emit(item);\n };\n\n render() {\n return (\n <Host>\n <ul\n class={{\n 'bg-surface-body border border-line-general sula-menu-select-list rounded-sm py-12 max-h-[260px] overflow-auto': true,\n 'w-300': !this.fullWidth,\n 'w-full': this.fullWidth,\n }}\n >\n {this.items.map(item => (\n <li class=\"w-full px-24 py-16 text-base leading-4 text-text-primary hover:bg-states-empty-bg-hover cursor-pointer\" key={item.id} onClick={() => this.handleClick(item)}>\n {item.title}\n </li>\n ))}\n </ul>\n </Host>\n );\n }\n}\n"],"version":3}