@sula-tech/webcomponents 0.5.0 → 0.7.0

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

@@ -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

@@ -0,0 +1 @@
+{"version":3,"file":"sula-search-bar.js","sourceRoot":"","sources":["../../../src/components/sula-search-bar/sula-search-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACrF,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAOnE,MAAM,OAAO,aAAa;IAL1B;QAYE;;WAEG;QAEH,mBAAc,GAAuB,kBAAkB,CAAC,OAAO,CAAC;QA6ChE,cAAS,GAAG,KAAK,CAAC;QAGlB,cAAS,GAAW,EAAE,CAAC;QAmBvB,qBAAgB,GAAG,GAAG,EAAE;YACtB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;YAC1B,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;QACxB,CAAC,CAAC;QAEF,oBAAe,GAAG,GAAG,EAAE;YACrB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;YACzB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;QACzB,CAAC,CAAC;QAEF,yBAAoB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC3C,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;YAE7B,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC,CAAC;QAEF,uBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;YACzC,MAAM,QAAQ,GAAI,KAAK,CAAC,MAA8B,CAAC,KAAK,CAAC;YAC7D,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;YAC1B,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;YAEtB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACnC,CAAC,CAAC;KAwCH;IAhFC,iBAAiB;QACf,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC/C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC;QAC9B,CAAC;IACH,CAAC;IAED,aAAa;QACX,MAAM,KAAK,GAAG;YACZ,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE,mDAAmD;YACjF,CAAC,kBAAkB,CAAC,SAAS,CAAC,EAAE,iEAAiE;SAClG,CAAC;QAEF,OAAO,KAAK,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IACpC,CAAC;IA6BD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DACE,KAAK,EAAE;oBACL,qGAAqG,EAAE,IAAI;oBAC3G,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,EAAE,IAAI;oBAC5B,kBAAkB,EAAE,IAAI,CAAC,SAAS;iBACnC,EACD,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,OAAO,EAAE,IAAI,CAAC,gBAAgB;gBAE7B,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,QAAQ,IAAI,CACnC,4DAAK,KAAK,EAAC,4CAA4C;oBACrD,kEAAW,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,WAAW,EAAC,2DAA2D,GAAa,CAChH,CACP;gBAED,8DACE,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,EACvC,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,kEAAkE,EACxE,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,MAAM,EAAE,IAAI,CAAC,eAAe,EAC5B,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,OAAO,EAAE,IAAI,CAAC,kBAAkB,GAChC;gBAED,IAAI,CAAC,SAAS,IAAI,CACjB,4DAAK,KAAK,EAAC,2DAA2D,EAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;oBAC7I,kEAAW,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,WAAW,EAAC,4BAA4B,GAAa,CAClF,CACP,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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,