@sula-tech/webcomponents 0.17.4 → 0.17.6

package/dist/collection/components/sula-table-row/sula-table-row.js

@@ -5,7 +5,7 @@ export class SulaTableRow {
         replaceHostWithRenderedElement(this.host, 'tr');
     }
     render() {
-        return (h(Host, { key: '8fc81f60429198205a8b59d2be38cf5d74945aa0' }, h("tr", { key: '9d480d9bda2291528fd9a9588362405148e7d430' }, h("slot", { key: 'aaee751960359eab8fefd8dfc8f63fafd2a551ec' }))));
+        return (h(Host, { key: 'b50904b0e7a340a2c59ed70448c0a1b0a2c7095d' }, h("tr", { key: '6055f44975ae0ce19b380f9badec73a66d26b0ea' }, h("slot", { key: 'a7c8efe725c4a9b52f14be88a1f4fc86230bad63' }))));
     }
     static get is() { return "sula-table-row"; }
     static get originalStyleUrls() {

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: 'df50b3593a291cd7df8bd89a301cead2360d1efc' }, h("div", { key: 'e0821fd661100e5c2e162099f283d4d12153391f', class: {
+        return (h(Host, { key: '7fa65feb03069f4195fe0b02497f2ed1b269a302' }, h("div", { key: 'dcf9d0817a0c208bfd2e33527dbb23695528ec62', class: {
                 'flex items-center rounded-xxl w-fit': true,
                 [this.getSizeClass()]: true,
                 [this.getAppearanceClass()]: true,
-            } }, this.icon && (h("div", { key: 'a3b08bd5d4343abf0f7d1a5733855053f7242da9', class: {
+            } }, this.icon && (h("div", { key: '2c7e5bc40795acce82cebc6129859ce733419686', class: {
                 'flex justify-center items-center mr-8 rounded-full leading-4 px-2 py-1': true,
                 [this.getIconStatusClass()]: true,
-            } }, h("sula-icon", { key: 'c695e38d99044f0fbdda06b0a8334f69c14b829d', icon: this.icon, "custom-class": "text-base text-negative-negative-1 leading-4" }))), h("span", { key: '3d76ab32b97c433ca81e8fee2d00899ab4ec9acb', class: {
+            } }, h("sula-icon", { key: '916971b011cace9d210484e4465eb1927985e8bc', icon: this.icon, "custom-class": "text-base text-negative-negative-1 leading-4" }))), h("span", { key: '7587ddfdfc8bb764e2108f2b7145b2f2801c51a1', class: {
                 'text-base leading-4': true,
                 [this.getTextColorClass()]: true,
                 [this.getTextWeightClass()]: true,

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

@@ -124,32 +124,32 @@ export class SulaTextarea {
     }
     render() {
         const containerHeight = this.rows * 24 + 48;
-        return (h(Host, { key: '44d0dac1a81b77bcc611103a4281568bfacc90f6', ref: node => (this.node = node) }, h("div", { key: 'aa3b163921b2bcc4fbc4fe1d2bf01fb57f7f3559' }, h("div", { key: '9ddde5d026bbde9d18c9acf6ed79a59543f8cd8f', id: "textarea-container", class: {
+        return (h(Host, { key: '7656b022c7545b930dc22a20018e307d1208934b', ref: node => (this.node = node) }, h("div", { key: 'c98a79a8b8791187b161676b5616c87360ef1b5e' }, h("div", { key: '95e8581a69ac055689be4ced3b06bbc6a77c5693', 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: '2defbc0428db3c7d68ed80fda1d73e0e95cbfff0', class: {
+            }, style: { height: `${containerHeight}px` }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleTextareaClick }, h("label", { key: '795b6e54da17a34d27be93c36dadc83469a9983e', 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: '8bf3e371a1e68667262fbaddd2cfb7fac49e6265', class: {
+            }, ref: node => (this.labelElement = node) }, this.label), h("label", { key: 'e7afb52d2d41be28e79ffa3c3c33967daae252e7', 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: 'a5ba9a4d84f5b9484b65f79ecd6656793a27b6ca', 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: '064c1bd7d0f6d39b2bab31b0735707058298d00b', 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,
                 'text-text-primary': !this.disabled,
                 'text-text-disabled cursor-not-allowed overflow-hidden': this.disabled,
-            }, style: { paddingTop: this.isActive ? `${this.labelPadding}px` : '0' }, onInput: this.handleTextareaChanges, onFocus: this.handleTextareaFocus, onBlur: this.handleBlur, value: this.textValue })), (this.helpText || this.maxLength) && (h("div", { key: 'fecd5cce1867cc6408d2c9dacdf2cd336c949b7f', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h("div", { key: '94c221b943bab3fe523e35a80aa164c90b145252', id: "textarea-help-text", class: {
+            }, style: { paddingTop: this.isActive ? `${this.labelPadding}px` : '0' }, onInput: this.handleTextareaChanges, onFocus: this.handleTextareaFocus, onBlur: this.handleBlur, value: this.textValue })), (this.helpText || this.maxLength) && (h("div", { key: 'edff6adbd2f75bdbd9178459ff7b2dfb7ee8e0e1', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h("div", { key: 'ed7699069648023632444a04d30966c3e72d669a', 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: '408ba83bf4c5c2a31fa37c83a725a597391eace9', id: "max-length-container", class: {
+            } }, this.helpText)), this.maxLength && (h("div", { key: 'd2e69f71725c41c238282d3cf6b8e849036ec45d', 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

@@ -232,14 +232,14 @@ export class SulaTextfield {
         return this.icon;
     }
     render() {
-        return (h(Host, { key: '620b171b85261163d68e930f03f8d4c9687ff68f', ref: node => (this.node = node) }, h("div", { key: '2166eac80c831d5ceabca0386e52e6feae2d9e57' }, h("div", { key: '2d3524e843d704a65ea160e9d007aa3be5f7c04f', id: "button-container", class: {
+        return (h(Host, { key: '4f79598068fc26d0da85046107c7d3f86f718faa', ref: node => (this.node = node) }, h("div", { key: 'a04fd8998155e121521c9041e59b12bddefa9642' }, h("div", { key: '51d112d7433e828222e3ecd5fc4d56c79ff0d234', 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 }, h("div", { key: '6852fab46418d0ea83ea847281358eab2425baf9', class: { 'hidden flex-col w-full': true, 'pr-12': !!this.icon }, ref: node => (this.inputContainer = node) }, h("label", { key: '7d0ee4029cecd727b5c6c5793853ecb4a8857010', class: { 'font-bold text-sm from-down': true, 'text-text-primary': !this.disabled, 'text-text-disabled': this.disabled } }, this.label), h("input", { key: '7d7304e012410885b757cade150b7aec4521887b', type: this.type, ref: node => (this.inputElement = node), placeholder: this.placeholder, class: { 'outline-none text-base bg-transparent': true, 'text-text-primary': !this.disabled, 'text-text-disabled': this.disabled }, onInput: this.handleInputChanges, onFocus: this.handleInputFocus, value: this.textValue, disabled: this.disabled })), h("div", { key: '301e50f4ed3af4227a8e293b79c37f494f667d4c', 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: '353fa6606ba96c33944545988ff7d94e26b5ff4a', class: "flex items-center justify-center", onClick: this.handleIconClick }, h("sula-icon", { key: 'fbca0269f63ad0ea471d647fcf53957320f74619', icon: this.getInputIcon(), customClass: `text-2xl ${this.disabled ? 'text-icon-disabled' : 'text-icon-primary'}` })))), (this.helpText || this.maxLength) && !this.disabled && (h("div", { key: '1948638269c2f9efec5435a858ecd658eee669f7', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h("div", { key: '259f4c480474585f36201b0f033af5cdaac7b131', 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: 'fd8ba62718d8a8eaa7ff6946b4e0b92b224c29e3', 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 }, h("div", { key: '76d35e1f52b83283aa01ca00c8ca8449e4c9f769', class: { 'hidden flex-col w-full': true, 'pr-12': !!this.icon }, ref: node => (this.inputContainer = node) }, h("label", { key: '04483fdf77992f83471d83e16ddc629f08eae2d0', class: { 'font-bold text-sm from-down': true, 'text-text-primary': !this.disabled, 'text-text-disabled': this.disabled } }, this.label), h("input", { key: 'f9bf7f7af0de3dd5ba87238afd611398a2122936', type: this.type, ref: node => (this.inputElement = node), placeholder: this.placeholder, class: { 'outline-none text-base bg-transparent': true, 'text-text-primary': !this.disabled, 'text-text-disabled': this.disabled }, onInput: this.handleInputChanges, onFocus: this.handleInputFocus, value: this.textValue, disabled: this.disabled })), h("div", { key: 'e3b131e038441af0190a446552960940143f81b8', 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: '7b61eba4a612546572ab62be87a6e394bf0e6062', class: "flex items-center justify-center", onClick: this.handleIconClick }, h("sula-icon", { key: '02c9cace5b4553ae5b2cd8ac6e563ddabbfe68ea', icon: this.getInputIcon(), customClass: `text-2xl ${this.disabled ? 'text-icon-disabled' : 'text-icon-primary'}` })))), (this.helpText || this.maxLength) && !this.disabled && (h("div", { key: '55c5dac7fd4602a53394fb0b0bd4856893f8bf07', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h("div", { key: '37fa016f1e136635d2e2fead44bc7c4364b71ee0', 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: '289e59d646731611ca1f6271aad0675d78982f3d', 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: 'bd0f90e1295fcf3554977adc2c956335b1742e95' }, h("div", { key: '303545a230ec3a7e8fd446f6dc10ee8e57df9ccd', class: this.getContainerClasses(), tabIndex: this.getTabIndex(this.isSquare), onClick: this.handleClick }, this.renderIcon(), this.renderText())));
+        return (h(Host, { key: '2a2ec056596961f8e07ebfdc3f056fcb89b9a42b' }, h("div", { key: 'fd69113042f871fd28a8b0389cd51f8543b4fada', 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: '6ac056e92ae8af3e126256f0a80eeb0b442c84f5' }, h("div", { key: '9ce711a6af42e45d6c6b080b1e48f4df1957236b', 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: '3caead2afcf62c17f2f6ac76976afde55d0834a3' }, h("div", { key: 'f9dbc541a4e9dad9bf216a1c09da4cf45be01a8e', 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/collection/components/sula-toggle/sula-toggle.js

@@ -38,7 +38,7 @@ export class SulaToggle {
         return `${base} bg-surface-on-body hover:bg-states-empty-bg-hover active:bg-states-empty-bg-pressed`;
     }
     render() {
-        return (h(Host, { key: '30d1fe15a8095b23952353c7a5406b8be01474a0' }, h("button", { key: 'dd35f75599e716093bb59c3da13fa1b5d8183516', id: "favorite-button", class: this.getButtonClass(), disabled: this.buttonDisabled, onClick: this.handleClick, "aria-pressed": this.selected ? 'true' : 'false', "aria-label": this.selected ? 'Remover dos favoritos' : 'Adicionar aos favoritos' }, h("sula-icon", { key: '36883b0c589cf78d36825320a2a3ef896b86d5b8', icon: this.getIconName(), customClass: `text-2xl ${this.getIconColorClass()} ${!this.buttonDisabled && !this.selected ? 'active:text-feedback-error' : ''}`, class: "flex leading-6" }))));
+        return (h(Host, { key: 'c1e3feffd4ddfa93fb7df88f992cbe15dd6745ba' }, h("button", { key: '3778675d10b39c15ce3a55f0d3a32e1595b1fc1a', id: "favorite-button", class: this.getButtonClass(), disabled: this.buttonDisabled, onClick: this.handleClick, "aria-pressed": this.selected ? 'true' : 'false', "aria-label": this.selected ? 'Remover dos favoritos' : 'Adicionar aos favoritos' }, h("sula-icon", { key: 'a901c2eede34f16d1d3f86424d28f3d112c66f3a', icon: this.getIconName(), customClass: `text-2xl ${this.getIconColorClass()} ${!this.buttonDisabled && !this.selected ? 'active:text-feedback-error' : ''}`, class: "flex leading-6" }))));
     }
     static get is() { return "sula-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sula-tooltip/sula-tooltip.js

@@ -99,7 +99,7 @@ export class SulaTooltip {
         const hostClass = isParentMode
             ? 'absolute inset-0 pointer-events-none overflow-visible'
             : 'inline-block relative';
-        return (h(Host, { key: 'd956da097b13617092e90a00d2abb209bdcaf046', class: hostClass }, !isParentMode && (h("div", { key: '0e8265bbd03ce89dc5ab88552efc0fa2e325fb32', class: this.getIconClasses(), onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, role: "button", "aria-label": "Tooltip trigger", ref: (el) => (this.triggerEl = el) }, h("sula-icon", { key: '1680ed4bdba2e29f12d4a2f2c453ce66f5278157', class: "flex items-center justify-center w-full h-full leading-[0]", icon: this.icon, customClass: "text-icon-primary text-[18px] leading-none" }))), this.displayText && (h("div", { key: '97fd111befdd2eb116d09544a03c603205f67b86', class: this.getHintClasses(), role: "tooltip", ref: (el) => (this.hintEl = el) }, this.displayText, h("div", { key: '0a12d3604b4d280d37c3c6b3b27469d93c3889d4', class: "tooltip-arrow", "data-popper-arrow": true, ref: (el) => (this.arrowEl = el) })))));
+        return (h(Host, { key: '1749f7b44ef30504ecce491b4859f9515519265e', class: hostClass }, !isParentMode && (h("div", { key: 'f76902766e86ac4835da267dc8c9d01c70062668', class: this.getIconClasses(), onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, role: "button", "aria-label": "Tooltip trigger", ref: (el) => (this.triggerEl = el) }, h("sula-icon", { key: 'cbd5f793255ee1017a5335e867bd18de598b37c3', class: "flex items-center justify-center w-full h-full leading-[0]", icon: this.icon, customClass: "text-icon-primary text-[18px] leading-none" }))), this.displayText && (h("div", { key: '04a929fcd51750a4450d1104a8dee9b912a5da7a', class: this.getHintClasses(), role: "tooltip", ref: (el) => (this.hintEl = el) }, this.displayText, h("div", { key: 'a10a53512e69146284365393b72864c8c3b1a0f5', class: "tooltip-arrow", "data-popper-arrow": true, ref: (el) => (this.arrowEl = el) })))));
     }
     static get is() { return "sula-tooltip"; }
     static get encapsulation() { return "shadow"; }