@sankhyalabs/ezui 6.1.0-dev.2 → 6.1.0-dev.21

package/dist/cjs/ez-sortable-list.cjs.entry.js

@@ -2,8 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-9e5554cb.js');
+const index$1 = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
+const index$2 = require('./index-02854309.js');
 
 /**!
  * Sortable 1.15.6
@@ -3313,9 +3314,9 @@ const EzSortableList = class {
     this.group = 'default';
     this.dataSource = [];
     this.idSortableList = 'DEFAULT_LIST';
-    this.entityLabel = 'item';
-    this.entityLabelPlural = 'itens';
-    this.emptyMessage = 'Nenhum item na lista';
+    this.entityLabel = undefined;
+    this.entityLabelPlural = undefined;
+    this.emptyMessage = undefined;
     this.hoverFeedback = true;
     this.enableMultipleSelection = false;
     this.removeItensMoved = false;
@@ -3336,6 +3337,12 @@ const EzSortableList = class {
     });
     this.ezSelectItens.emit([]);
   }
+  async componentWillLoad() {
+    this.i18n = await index$2.initI18n();
+    this.emptyMessage = this.i18n("ez-sortable-list.emptyMessage");
+    this.entityLabel = this.i18n("ez-sortable-list.entityLabel");
+    this.entityLabelPlural = this.i18n("ez-sortable-list.entityLabelPlural");
+  }
   componentDidLoad() {
     this.initSortable();
   }
@@ -3476,7 +3483,7 @@ const EzSortableList = class {
     }
   }
   buildTotalizer() {
-    return `Total de ${this.dataSource.length} ${this.dataSource.length === 1 ? this.entityLabel : this.entityLabelPlural}`;
+    return `${this.i18n("ez-sortable-list.total")} ${this.dataSource.length} ${this.dataSource.length === 1 ? this.entityLabel : this.entityLabelPlural}`;
   }
   renderItems() {
     const itemsToRender = core.ArrayUtils.applyStringFilter(this.filterTerm, this.dataSource);
@@ -3498,7 +3505,7 @@ const EzSortableList = class {
   renderHeader() {
     if (this.hideHeader)
       return;
-    return (index$1.h("div", { class: 'sortable-header' }, index$1.h("span", { class: 'sortable-label' }, this.title), index$1.h("ez-filter-input", { label: `Buscar ${this.entityLabel}`, mode: "slim", onEzChange: evt => this.handleFilterChanged(evt) })));
+    return (index$1.h("div", { class: 'sortable-header' }, index$1.h("span", { class: 'sortable-label' }, this.title), index$1.h("ez-filter-input", { label: `${this.i18n("ez-sortable-list.search")} ${this.entityLabel}`, mode: "slim", onEzChange: evt => this.handleFilterChanged(evt) })));
   }
   render() {
     return (index$1.h("div", { class: 'sortable-content' }, this.renderHeader(), index$1.h("div", { class: `sortable-list ${this.dataSource.length < 1 ? 'empty-content' : ''} list-scroller--fix`, "data-content": this.emptyMessage, style: { '--empty-content': `"${this.emptyMessage}"` }, id: this.idSortableList, key: this.idSortableList }, this.renderItems()), this.renderTotalizer()));

package/dist/cjs/ez-split-button.cjs.entry.js

@@ -2,8 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9e5554cb.js');
+const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
+const index$1 = require('./index-02854309.js');
 
 const ezSplitButtonCss = ":host{--ez-split-button--min-width:24;--ez-split-button--width:'auto';--ez-split-button__medium--height:32px;--ez-split-button__large--height:42px;--ez-split-button__medium-icon--width:40px;--ez-split-button__large-icon--width:44px;--ez-split-button__inline__icon--gap:6px;--ez-split-button__label--padding-top:0px;--ez-split-button__label--padding-bottom:0px;--ez-split-button__right-button--padding-left:8px;--ez-split-button--color:var(--title--primary, #2B3A54);--ez-split-button--font-size:var(--text--small, 12px);--ez-split-button--font-family:var(--font-pattern, Arial);--ez-split-button--font-weight:var(--text-weight--large);--ez-split-button--background-color:var(--background--light, #ffffff);--ez-split-button--border-radius:var(--border--radius-large, 24px);--ez-split-button--border:1px solid var(--color--strokes);--ez-split-button--justify-content:center;--ez-split-button--hover-color:var(--color--primary-600, #007a5a);--ez-split-button--hover--background-color:var(--background--light, #ffffff);--ez-split-button--disabled-color:var(--text--primary);--ez-split-button--disabled--background-color:var(--background--medium);--ez-split-button--focus--border:var(--border--medium, 2px) var(--color--primary-300);--ez-split-button--focus--box-shadow:none;--ez-split-button--active-color:var(--color--primary-700);--ez-split-button--active--background-color:var(--background--strong)}ez-icon{--ez-icon--color:inherit}button{position:relative;display:flex;align-items:center;margin:0;cursor:pointer;transition:background-color 0.2s linear;white-space:nowrap;min-width:var(--ez-split-button--min-width);width:var(--ez-split-button--width);height:var(--ez-split-button__medium--height);font-family:var(--ez-split-button--font-family);font-size:var(--ez-split-button--font-size);font-weight:var(--ez-split-button--font-weight);padding:var(--ez-split-button__label--padding-top) 0 var(--ez-split-button__label--padding-bottom) 0;border-top-left-radius:var(--ez-split-button--border-radius);border-bottom-left-radius:var(--ez-split-button--border-radius);background-color:var(--ez-split-button--background-color);color:var(--ez-split-button--color);fill:var(--ez-split-button--color);border:none;justify-content:var(--ez-split-button--justify-content)}label{cursor:pointer}button:active{outline:none;box-shadow:none;background-color:var(--ez-split-button--active--background-color);color:var(--ez-split-button--active-color);fill:var(--ez-split-button--active-color);--ez-icon--color:var(--ez-split-button--active-color)}.ez-split-button__left-button{border:var(--ez-split-button--border);border-right:none;outline:none}.ez-split-button__right-button{border:var(--ez-split-button--border);border-left:none;outline:none}.ez-split-button__left-button:focus{box-shadow:0 0 0 2px var(--color--primary-300), \n    0 2px 0 0 var(--color--primary-300), \n    0 -2px 0 0 var(--color--primary-300);}.ez-split-button__right-button:focus{box-shadow:2px 0 0 0 var(--color--primary-300), \n    0 2px 0 0 var(--color--primary-300), \n    0 -2px 0 0 var(--color--primary-300);}.ez-split-button__left-button:hover,.ez-split-button__right-button:hover{outline:none;background-color:var(--ez-split-button--hover--background-color);color:var(--ez-split-button--hover-color);fill:var(--ez-split-button--hover-color);--ez-icon--color:var(--ez-split-button--hover-color)}.ez-split-button__left-button:active,.ez-split-button__right-button:active{outline:none;box-shadow:none;background-color:var(--ez-split-button--active--background-color);color:var(--ez-split-button--active-color);fill:var(--ez-split-button--active-color);--ez-icon--color:var(--ez-split-button--active-color)}.ez-split-button__left-button:disabled,.ez-split-button__left-button:disabled label,.ez-split-button__right-button:disabled{background-color:var(--ez-split-button--disabled--background-color);color:var(--ez-split-button--disabled-color);fill:var(--ez-split-button--disabled-color);border:none;--ez-icon--color:var(--ez-split-button--disabled-color);cursor:not-allowed}.ez-split-button__left-button:disabled{border:var(--ez-split-button--disabled-border);border-right:none}.ez-split-button__right-button:disabled{border:var(--ez-split-button--disabled-border);border-left:none}button.large{height:var(--ez-split-button__large--height)}button.medium{height:var(--ez-split-button__medium--height)}.default label{padding:var(--ez-split-button__label--padding-top) 12px var(--ez-split-button__label--padding-bottom) 20px}.icon-left{gap:var(--ez-split-button__inline__icon--gap)}.icon-left label{padding-right:12px}.icon-left ez-icon{padding-left:20px}.icon-only{padding-left:12px;padding-right:12px}.ez-split-button__right-button{border-top-right-radius:var(--ez-split-button--border-radius);border-bottom-right-radius:var(--ez-split-button--border-radius);border-top-left-radius:0;border-bottom-left-radius:0;border-right:var(--ez-split-button--border)}.ez-split-button__right-button--medium{min-width:var(--ez-split-button__medium-icon--width)}.ez-split-button__right-button--large{min-width:var(--ez-split-button__large-icon--width)}.ez-split-button__right-button--divider{top:10%;bottom:10%}.ez-split-button__right-button--divider:before{content:\"\";position:absolute;left:0;border-left:1px solid rgba(0, 0, 0, 20%);border-radius:2px;height:75%}.btn-icon--medium{min-width:--ez-split-button__medium-icon--width}.btn-icon--large{min-width:--ez-split-button__large-icon--width}.ez-split-button__right-button-container{position:absolute;left:0;padding-left:var(--ez-split-button__right-button--padding-left)}.label-icon{display:flex;flex-direction:row;align-items:center;color:var(--ez-split-button--color)}.label-icon:active{color:var(--ez-split-button--active-color);fill:var(--ez-split-button--active-color);--ez-icon--color:var(--ez-split-button--active-color)}.dropdown{display:flex}.dropdown-content{display:block;position:absolute;background-color:#f1f1f1;min-width:160px;z-index:var(--ez-elevation--8);border-radius:var(--ez-split-button--border-radius)}.dropdown-content>ez-dropdown{position:relative}";
 
@@ -13,7 +14,6 @@ const EzSplitButton = class {
     this.buttonClick = index.createEvent(this, "buttonClick", 7);
     this.dropdownItemClick = index.createEvent(this, "dropdownItemClick", 7);
     this.dropdownSubActionClick = index.createEvent(this, "dropdownSubActionClick", 7);
-    this.rightDefaultTitle = 'Mais opções';
     this.show = false;
     this.enabled = true;
     this.iconName = undefined;
@@ -21,7 +21,7 @@ const EzSplitButton = class {
     this.items = undefined;
     this.label = undefined;
     this.leftTitle = undefined;
-    this.rightTitle = 'Mais opções';
+    this.rightTitle = undefined;
     this.mode = 'default';
     this.size = 'medium';
     this.itemBuilder = undefined;
@@ -134,7 +134,8 @@ const EzSplitButton = class {
     window.removeEventListener('scroll', this.positionDropdown.bind(this));
     window.addEventListener('scroll', this.positionDropdown.bind(this));
   }
-  componentWillLoad() {
+  async componentWillLoad() {
+    this.i18n = await index$1.initI18n();
     this.setEvents();
   }
   componentWillRender() {
@@ -160,7 +161,7 @@ const EzSplitButton = class {
     const hasIconButton = this.shouldShowIconOnLeftButton();
     const hasLabelButton = this.shouldShowLabelOnLeftButton();
     const iconSize = this.getIconSize();
-    return (index.h("div", { class: "label-icon" }, index.h("button", { class: `ez-split-button__left-button ${iconSize} ${this.mode}`, title: this.leftTitle || this.label, type: "button", disabled: !this.enabled, onClick: () => { this.handleButtonClick(); }, ref: el => (this.leftButton = el) }, hasIconButton && index.h("ez-icon", { href: this.image, iconName: this.iconName, size: iconSize }), hasLabelButton && index.h("label", { title: this.leftTitle || this.label }, this.label)), index.h("div", { class: "dropdown" }, index.h("button", { class: `ez-split-button__right-button ${iconSize} ez-split-button__right-button--${iconSize} ez-split-button__right-button--divider`, title: this.rightTitle || this.rightDefaultTitle, type: "button", disabled: !this.enabled, onClick: () => { this.toggleDropdown(); }, ref: el => (this.rightButton = el) }, index.h("ez-icon", { class: `ez-split-button__right-button-container ` + (iconSize ? `btn-icon--${iconSize}` : ''), iconName: 'chevron-down', size: iconSize })), index.h("div", { class: `dropdown-content dropdown-content--${this.size}`, ref: (ref) => (this.dropdownParent = ref) }, this.show && (index.h("ez-dropdown", { items: this.items, onClick: evt => { evt.stopPropagation(); }, onEzOutsideClick: () => { this.closeDropdown(); }, onEzClick: evt => { this.handleDropdownItemClick(evt); }, onEzSubActionClick: evt => { this.handleDropdownSubActionClick(evt); }, itemBuilder: this.itemBuilder }))))));
+    return (index.h("div", { class: "label-icon" }, index.h("button", { class: `ez-split-button__left-button ${iconSize} ${this.mode}`, title: this.leftTitle || this.label, type: "button", disabled: !this.enabled, onClick: () => { this.handleButtonClick(); }, ref: el => (this.leftButton = el) }, hasIconButton && index.h("ez-icon", { href: this.image, iconName: this.iconName, size: iconSize }), hasLabelButton && index.h("label", { title: this.leftTitle || this.label }, this.label)), index.h("div", { class: "dropdown" }, index.h("button", { class: `ez-split-button__right-button ${iconSize} ez-split-button__right-button--${iconSize} ez-split-button__right-button--divider`, title: this.rightTitle || this.i18n("ez-split-button.moreOptions"), type: "button", disabled: !this.enabled, onClick: () => { this.toggleDropdown(); }, ref: el => (this.rightButton = el) }, index.h("ez-icon", { class: `ez-split-button__right-button-container ` + (iconSize ? `btn-icon--${iconSize}` : ''), iconName: 'chevron-down', size: iconSize })), index.h("div", { class: `dropdown-content dropdown-content--${this.size}`, ref: (ref) => (this.dropdownParent = ref) }, this.show && (index.h("ez-dropdown", { items: this.items, onClick: evt => { evt.stopPropagation(); }, onEzOutsideClick: () => { this.closeDropdown(); }, onEzClick: evt => { this.handleDropdownItemClick(evt); }, onEzSubActionClick: evt => { this.handleDropdownSubActionClick(evt); }, itemBuilder: this.itemBuilder }))))));
   }
   shouldShowLabelOnLeftButton() {
     return ['icon-left', 'default'].includes(this.mode);

package/dist/cjs/ez-split-item.cjs.entry.js

@@ -2,12 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9e5554cb.js');
-require('./ApplicationUtils-c9d1205c.js');
+const index = require('./index-a7b0c73d.js');
+require('./ApplicationUtils-39807831.js');
 const CSSVarsUtils = require('./CSSVarsUtils-f20973d1.js');
 require('./DialogType-2114c337.js');
 require('./CheckMode-ecb90b87.js');
 require('@sankhyalabs/core');
+const index$1 = require('./index-02854309.js');
 require('./FormLayout-18853e70.js');
 
 const ezSplitItemCss = ".box_split-item{background-color:var(--background--xlight);width:100%;height:100%;border-radius:var(--border--radius-medium);box-shadow:var(--shadow--xsmall);flex-direction:column;overflow:hidden;display:flex;padding:var(--space--nano)}.box_split-item>.ez-split-item--content{overflow:auto}.expanded__item{position:absolute;z-index:var(--more-visible);top:0;left:0;width:100%;height:100%}.ez-split-item--header{display:flex;align-items:center;justify-content:space-between}.ez-split-item--header-title{flex:1;white-space:nowrap;overflow:hidden}.ez-split-item--header-title h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.ez-split-item--header-buttons{display:flex;align-items:center;max-height:20px}.ez-split-item--content{display:block;height:100%}h3.ez-margin--small{margin-left:var(--space--small)}.structural__item{background:none;box-shadow:none;padding:0;margin:0;border:0}.content__item{margin:var(--space--extra-small);width:calc(100% - 2*(var(--space--extra-small)));height:calc(100% - 2*(var(--space--extra-small)))}";
@@ -29,11 +30,14 @@ const SplitItem = class {
     this._expanded = !this._expanded;
     (_b = (_a = this.expandButtonRef.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button')) === null || _b === void 0 ? void 0 : _b.blur();
   }
+  async componentWillLoad() {
+    this.i18n = await index$1.initI18n();
+  }
   componentDidLoad() {
     CSSVarsUtils.CSSVarsUtils.applyVarsGrid(this._element, this._slot.children[0]);
   }
   render() {
-    return (index.h(index.Host, { class: `box_split-item ${this._expanded ? 'expanded__item' : ''} ${this.structural ? 'structural__item' : 'content__item'}`, ref: el => (this._element = el) }, index.h("div", { class: "ez-split-item--header" }, index.h("slot", { name: "leftButtons" }), index.h("div", { class: "ez-split-item--header-title" }, this.label && (index.h("h3", { class: "ez-text ez-text--primary ez-title ez-title--medium ez-margin--small", title: this.label }, this.label))), index.h("div", { class: "ez-split-item--header-buttons" }, index.h("slot", { name: "rightButtons" }), this.enableExpand && (index.h("ez-button", { ref: el => this.expandButtonRef = el, size: "small", mode: "icon", iconName: "expand", class: 'ez-button--tertiary', onClick: () => this.toggleExpandItem(), title: this._expanded ? 'Resumir' : 'Expandir' })))), index.h("div", { class: "ez-split-item--content grid_height-0", ref: el => (this._slot = el) }, index.h("slot", null))));
+    return (index.h(index.Host, { class: `box_split-item ${this._expanded ? 'expanded__item' : ''} ${this.structural ? 'structural__item' : 'content__item'}`, ref: el => (this._element = el) }, index.h("div", { class: "ez-split-item--header" }, index.h("slot", { name: "leftButtons" }), index.h("div", { class: "ez-split-item--header-title" }, this.label && (index.h("h3", { class: "ez-text ez-text--primary ez-title ez-title--medium ez-margin--small", title: this.label }, this.label))), index.h("div", { class: "ez-split-item--header-buttons" }, index.h("slot", { name: "rightButtons" }), this.enableExpand && (index.h("ez-button", { ref: el => this.expandButtonRef = el, size: "small", mode: "icon", iconName: "expand", class: 'ez-button--tertiary', onClick: () => this.toggleExpandItem(), title: this._expanded ? this.i18n('app.collapse') : this.i18n('app.expand') })))), index.h("div", { class: "ez-split-item--content grid_height-0", ref: el => (this._slot = el) }, index.h("slot", null))));
   }
 };
 SplitItem.style = ezSplitItemCss;

package/dist/cjs/ez-split-panel.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-9e5554cb.js');
+const index$1 = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
 
 var numeric = function (value, unit) { return Number(value.slice(0, -1 * unit.length)); };

package/dist/cjs/ez-tabselector.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9e5554cb.js');
+const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
 
 const ezTabselectorCss = "@keyframes activate{0%{clip-path:inset(calc(100% - 3px) 50% 0px 50%)}100%{clip-path:inset(calc(100% - 3px) 0px 0px 0px)}}:host{display:flex;position:relative;width:100%;overflow:hidden;--tabselector--backward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z\"/></svg>');--tabselector--forward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z\"/></svg>')}.scroll{display:flex;width:100%;scroll-behavior:smooth;overflow-x:auto;scrollbar-width:none}.scroll.startHidden{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px)}.scroll.middle{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px, #000 calc(100% - 48px), transparent calc(100% - 20px))}.scroll.endHidden{-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 48px), transparent calc(100% - 20px))}.tab{display:flex;border:none;background-color:unset;min-width:100px;max-width:260px;cursor:pointer;padding:6px 12px;align-items:center;justify-content:center;color:var(--text--primary, #626e82);font-family:var(--font-pattern, \"Roboto\");font-size:var(--title--small, 14px);flex-shrink:0}.tab:focus,.forward-button,.backward-button{outline:none}.is-active{position:relative;color:var(--color--primary, #008561)}.is-active::after{content:\"\";position:absolute;width:100%;height:100%;background-color:var(--color--primary, #008561);clip-path:inset(calc(100% - 3px) 0px 0px 0px);animation:activate 0.25s ease-in-out}.is-focused{border:1px dashed var(--color--primary, #000000c5)}.tab-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-shadow:var(--text-shadow);margin-bottom:var(--space--extra-small, 3px)}.forward-button,.backward-button{position:absolute;z-index:1;display:flex;box-sizing:border-box;padding:0px;top:0px;right:0px;width:16px;height:100%;border:none;background-color:unset;cursor:pointer;justify-content:center;align-items:center}.backward-button{left:0px}.forward-button::after,.backward-button::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:10px;height:16px}.forward-button::after{-webkit-mask-image:var(--tabselector--forward-icon);mask-image:var(--tabselector--forward-icon)}.backward-button::after{-webkit-mask-image:var(--tabselector--backward-icon);mask-image:var(--tabselector--backward-icon)}.forward-button:hover::after,.backward-button:hover::after{background-color:var(--color--primary, #4e4e4e)}.hidden{display:none}.scroll::-webkit-scrollbar{display:none}.left-icon{padding-right:var(--space--small)}.right-icon{padding-left:var(--space--small)}";

package/dist/cjs/ez-text-area.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9e5554cb.js');
+const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
 
-const ezTextAreaCss = ":host{--text-area--width:100%;--text-area--border-radius:var(--border--radius-medium, 12px);--text-area--font-size:var(--text--medium, 14px);--text-area--font-family:var(--font-pattern, Arial);--text-area--font-weight:var(--text-weight--medium, 400);--text-area--color:var(--title--primary, #2B3A54);--text-area__input--background-color:var(--background--light, #FFFFFF);--text-area__input--border:var(--border--medium, 2px solid);--text-area__input--border-color:var(--color--strokes,#DCE0E8);--text-area__input--focus--border-color:var(--color--primary, #008561);--text-area__input--disabled--background-color:var(--background--medium, #F0F3F7);--text-area__input--disabled--color:var(--text--primary, #626E82);--text-area__input--disabled--border--color:var(--color--strokes,#DCE0E8);--text-area__input--error--border-color:var(--color-alert--error-800,#BD0025);--text-area__message_box--font-size:var(--text--small, 12px);--text-area__message_box--info--color:var(--color--success, #22085d);--text-area__message_box--error--color:var(--color-alert--error-800,#BD0025);--text-area__label--floating--top:6px;--text-area__label--padding-top:12px;--text-area__label--padding-left:14px;--text-area__label--padding-right:12px;--text-area__scrollbar--color-default:var(--scrollbar--default, #626e82);--text-area__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--text-area__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--text-area__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--text-area__scrollbar--border-radius:var(--border--radius-small, 6px);--text-area__scrollbar--width:var(--space--small, 6px);display:flex;flex-wrap:wrap;position:relative;width:var(--text-area--width)}textarea{box-sizing:border-box;border:none;resize:none;width:100%;padding:0;background:none;min-height:42px;font-weight:var(--text-area--font-weight);font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);color:var(--text-area--color);margin-top:calc(var(--space--medium, 12px) + 4px);scrollbar-width:thin;scrollbar-color:var(--text-area__scrollbar--color-clicked) var(--text-area__scrollbar--color-background)}textarea:focus{outline:none}textarea:disabled{background-color:transparent;color:var(--text-area__input--disabled--color);border:var(--text-area__input--disabled--border);cursor:not-allowed}textarea::-webkit-scrollbar{background-color:var(--text-area__scrollbar--color-background);width:var(--text-area__scrollbar--width);max-width:var(--text-area__scrollbar--width);min-width:var(--text-area__scrollbar--width)}textarea::-webkit-scrollbar-thumb{background-color:var(--text-area__scrollbar--color-default);border-radius:var(--text-area__scrollbar--border-radius)}textarea::-webkit-scrollbar-track{background-color:var(--text-area__scrollbar--color-background);border-radius:var(--text-area__scrollbar--border-radius)}textarea::-webkit-scrollbar-thumb:vertical:hover,textarea::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--text-area__scrollbar--color-hover)}textarea::-webkit-scrollbar-thumb:vertical:active,textarea::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--text-area__scrollbar--color-clicked)}.textarea{width:100%;min-height:42px;max-width:100%;box-sizing:border-box;padding-left:var(--space--medium);padding-right:var(--space--extra-small);border-radius:var(--text-area--border-radius);border:var(--text-area__input--border);border-color:var(--text-area__input--border-color);background-color:var(--text-area__input--background-color)}.textarea--disabled{border-radius:var(--text-area--border-radius);border:var(--text-area__input--border);border-color:var(--text-area__input--disabled--border--color);background-color:var(--text-area__input--disabled--background-color);cursor:not-allowed}.textarea--resizable{resize:vertical}.textarea--focus{border-color:var(--text-area__input--focus--border-color)}.textarea.hasError{color:var(--text-area--color);border-color:var(--text-area__input--error--border-color)}.message-box{min-height:16px;min-width:100%;margin-top:3px;line-height:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--text-area--font-family);font-size:var(--text-area__message_box--font-size);color:var(--text-area__message_box--info--color)}.hasError{color:var(--text-area__message_box--error--color)}.textarea__label{box-sizing:border-box;position:absolute;z-index:var(--visible);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-transition:font-size .05s, top .05s;transition:font-size .05s, top .05s;width:calc(100% - var(--text-area__label--padding-right));left:var(--text-area--space--medium);font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color);top:var(--text-area__label--padding-top);left:var(--text-area__label--padding-left);padding-right:var(--text-area__label--padding-right)}.textarea__label--floated{font-family:var(--text-area--font-family);font-size:var(--text--extra-small);color:var(--text--primary);top:var(--text-area__label--floating--top)}.textarea__label--disabled{color:var(--text-area__input--disabled--color);cursor:not-allowed}.textarea--slim{margin-top:var(--space--small, 6px)}.textarea--slim::-webkit-input-placeholder{font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color)}.textarea--slim:-moz-placeholder{font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color)}.textarea--slim::-moz-placeholder{font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color)}.textarea--slim:-ms-input-placeholder{font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color)}.textarea--slim::placeholder{font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color)}.textarea--slim:disabled::-webkit-input-placeholder,.textarea--slim:disabled:-moz-placeholder,.textarea--slim:disabled::-moz-placeholder,.textarea--slim:disabled:-ms-input-placeholder,.textarea--slim:disabled::placeholder{color:var(--text-area__input--disabled--color);cursor:not-allowed}";
+const ezTextAreaCss = ":host{--text-area--width:100%;--text-area--border-radius:var(--border--radius-medium, 12px);--text-area--font-size:var(--text--medium, 14px);--text-area--font-family:var(--font-pattern, Arial);--text-area--font-weight:var(--text-weight--medium, 400);--text-area--color:var(--title--primary, #2B3A54);--text-area__input--background-color:var(--background--light, #FFFFFF);--text-area__input--border:var(--border--medium, 2px solid);--text-area__input--border-color:var(--color--strokes, #DCE0E8);--text-area__input--focus--border-color:var(--color--primary, #008561);--text-area__input--disabled--background-color:var(--background--medium, #F0F3F7);--text-area__input--disabled--color:var(--text--primary, #626E82);--text-area__input--disabled--border--color:var(--color--strokes, #DCE0E8);--text-area__input--error--border-color:var(--color-alert--error-800, #BD0025);--text-area__message_box--font-size:var(--text--small, 12px);--text-area__message_box--info--color:var(--color--success, #22085d);--text-area__message_box--error--color:var(--color-alert--error-800, #BD0025);--text-area__label--floating--top:6px;--text-area__label--padding-top:12px;--text-area__label--padding-left:14px;--text-area__label--padding-right:12px;--text-area__scrollbar--color-default:var(--scrollbar--default, #626e82);--text-area__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--text-area__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--text-area__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--text-area__scrollbar--border-radius:var(--border--radius-small, 6px);--text-area__scrollbar--width:var(--space--small, 6px);--ez-text-area__tooltip-icon--spacing:var(--space--large);--ez-text-area__tooltip-icon---width:var(--space--large);--ez-text-area__tooltip-icon---horizontal-margin:var(--space--medium, 12px);--ez-text-area__tooltip-icon---vertical-margin:10px;--ez-text-area__tooltip_icon--error--color:var(--color-alert--error-800, #BD0025);display:flex;flex-wrap:wrap;position:relative;width:var(--text-area--width)}textarea{display:flex;flex-direction:column;height:calc(100% - 16px);box-sizing:border-box;border:none;resize:none;width:100%;padding:0;background:none;min-height:42px;font-weight:var(--text-area--font-weight);font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);color:var(--text-area--color);margin-top:calc(var(--space--medium, 12px) + 4px);scrollbar-width:thin;scrollbar-color:var(--text-area__scrollbar--color-clicked) var(--text-area__scrollbar--color-background)}textarea:focus{outline:none}textarea:disabled{background-color:transparent;color:var(--text-area__input--disabled--color);border:var(--text-area__input--disabled--border);cursor:not-allowed}textarea::-webkit-scrollbar{background-color:var(--text-area__scrollbar--color-background);width:var(--text-area__scrollbar--width);max-width:var(--text-area__scrollbar--width);min-width:var(--text-area__scrollbar--width)}textarea::-webkit-scrollbar-thumb{background-color:var(--text-area__scrollbar--color-default);border-radius:var(--text-area__scrollbar--border-radius)}textarea::-webkit-scrollbar-track{background-color:var(--text-area__scrollbar--color-background);border-radius:var(--text-area__scrollbar--border-radius)}textarea::-webkit-scrollbar-thumb:vertical:hover,textarea::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--text-area__scrollbar--color-hover)}textarea::-webkit-scrollbar-thumb:vertical:active,textarea::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--text-area__scrollbar--color-clicked)}.textarea{width:100%;min-height:42px;max-width:100%;box-sizing:border-box;padding-left:var(--space--medium);padding-right:var(--space--extra-small);border-radius:var(--text-area--border-radius);border:var(--text-area__input--border);border-color:var(--text-area__input--border-color);background-color:var(--text-area__input--background-color)}.textarea--disabled{border-radius:var(--text-area--border-radius);border:var(--text-area__input--border);border-color:var(--text-area__input--disabled--border--color);background-color:var(--text-area__input--disabled--background-color);cursor:not-allowed}.textarea--focus{border-color:var(--text-area__input--focus--border-color)}.textarea.hasError{color:var(--text-area--color);border-color:var(--text-area__input--error--border-color)}.message-box{min-height:16px;min-width:100%;margin-top:3px;line-height:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--text-area--font-family);font-size:var(--text-area__message_box--font-size);color:var(--text-area__message_box--info--color)}.hasError{color:var(--text-area__message_box--error--color)}.textarea__label{box-sizing:border-box;position:absolute;z-index:var(--visible);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-transition:font-size .05s, top .05s;transition:font-size .05s, top .05s;width:calc(100% - var(--text-area__label--padding-right));left:var(--text-area--space--medium);font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color);top:var(--text-area__label--padding-top);left:var(--text-area__label--padding-left);padding-right:var(--text-area__label--padding-right)}.textarea__label--floated{font-family:var(--text-area--font-family);font-size:var(--text--extra-small);color:var(--text--primary);top:var(--text-area__label--floating--top)}.textarea__label--disabled{color:var(--text-area__input--disabled--color);cursor:not-allowed}.textarea--slim{margin-top:var(--space--small, 6px)}.textarea--slim::-webkit-input-placeholder{font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color)}.textarea--slim:-moz-placeholder{font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color)}.textarea--slim::-moz-placeholder{font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color)}.textarea--slim:-ms-input-placeholder{font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color)}.textarea--slim::placeholder{font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color)}.textarea--slim:disabled::-webkit-input-placeholder,.textarea--slim:disabled:-moz-placeholder,.textarea--slim:disabled::-moz-placeholder,.textarea--slim:disabled:-ms-input-placeholder,.textarea--slim:disabled::placeholder{color:var(--text-area__input--disabled--color);cursor:not-allowed}ez-icon.tooltip-icon.hasError{--ez-icon--color:var(--ez-text-area__tooltip_icon--error--color)}.input-container{display:flex;align-items:center}.textarea--resizable{resize:vertical;overflow:auto;min-height:42px}";
 
 const EzTextArea = class {
   constructor(hostRef) {
@@ -19,7 +19,7 @@ const EzTextArea = class {
     this.errorMessage = undefined;
     this.rows = 4;
     this.canShowError = true;
-    this.mode = "regular";
+    this.mode = 'regular';
     this.enableResize = true;
     this.autoRows = false;
     this.autoFocus = false;
@@ -42,10 +42,10 @@ const EzTextArea = class {
     if (this._inputElem) {
       if (newValue != oldValue) {
         if (this.canChangeValue()) {
-          this._inputElem.value = this.value || "";
+          this._inputElem.value = this.value || '';
         }
         this.adjustFloatingLabel();
-        this.errorMessage = "";
+        this.errorMessage = '';
         this.ezChange.emit(this.value);
       }
     }
@@ -54,13 +54,13 @@ const EzTextArea = class {
     if (this._initialRows == undefined) {
       this._initialRows = this.rows > 0 ? this.rows : undefined;
     }
-    const rows = this._initialRows > 0 ? this._initialRows : this.mode != "slim" ? 4 : 2;
+    const rows = this._initialRows > 0 ? this._initialRows : this.mode != 'slim' ? 4 : 2;
     if (rows !== this.rows) {
       this.rows = rows;
     }
   }
   observeRows() {
-    const rows = this.rows > 0 ? this.rows : this.mode != "slim" ? 4 : 2;
+    const rows = this.rows > 0 ? this.rows : this.mode != 'slim' ? 4 : 2;
     if (rows !== this.rows) {
       this.updateRows(rows);
     }
@@ -93,8 +93,8 @@ const EzTextArea = class {
     var _a, _b, _c, _d;
     const selectionStart = this._inputElem.selectionStart;
     const selectionEnd = this._inputElem.selectionEnd;
-    const textStart = (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.substring(0, selectionStart)) !== null && _b !== void 0 ? _b : "";
-    const textEnd = (_d = (_c = this.value) === null || _c === void 0 ? void 0 : _c.substring(selectionEnd)) !== null && _d !== void 0 ? _d : "";
+    const textStart = (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.substring(0, selectionStart)) !== null && _b !== void 0 ? _b : '';
+    const textEnd = (_d = (_c = this.value) === null || _c === void 0 ? void 0 : _c.substring(selectionEnd)) !== null && _d !== void 0 ? _d : '';
     this.value = `${textStart}${text}${textEnd}`;
     const newSelectionEnd = selectionStart + text.length;
     const start = (selectionStart === selectionEnd) ? newSelectionEnd : selectionStart;
@@ -117,28 +117,28 @@ const EzTextArea = class {
    * Retorna se o conteúdo é inválido.
    */
   async isInvalid() {
-    return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
+    return typeof this.errorMessage === 'string' && this.errorMessage.trim() !== '';
   }
   //---------------------------------------------
   // Private methods
   //---------------------------------------------
   canChangeValue() {
-    return this._inputElem && (this.value || "") !== this._inputElem.value;
+    return this._inputElem && (this.value || '') !== this._inputElem.value;
   }
   adjustFloatingLabel() {
     if (this.forceLabelFloat)
       return;
     if (this.label && this._labelElem) {
       const hasValue = this.value && this.value.toString().length > 0;
-      const containsFloatedClass = this._labelElem.classList.contains("textarea__label--floated");
+      const containsFloatedClass = this._labelElem.classList.contains('textarea__label--floated');
       if (hasValue || this.isFocused()) {
         if (!containsFloatedClass) {
-          this._labelElem.classList.add("textarea__label--floated");
+          this._labelElem.classList.add('textarea__label--floated');
         }
       }
       else {
         if (containsFloatedClass) {
-          this._labelElem.classList.remove("textarea__label--floated");
+          this._labelElem.classList.remove('textarea__label--floated');
         }
       }
     }
@@ -187,8 +187,8 @@ const EzTextArea = class {
   //---------------------------------------------
   handleFocusout() {
     this.adjustFloatingLabel();
-    if (this._container && this._container.classList.contains("textarea--focus")) {
-      this._container.classList.remove("textarea--focus");
+    if (this._container && this._container.classList.contains('textarea--focus')) {
+      this._container.classList.remove('textarea--focus');
     }
   }
   handleChange() {
@@ -197,11 +197,11 @@ const EzTextArea = class {
     }
   }
   handleFocus() {
-    if (this.label && this._labelElem && !this._labelElem.classList.contains("textarea__label--floated")) {
-      this._labelElem.classList.add("textarea__label--floated");
+    if (this.label && this._labelElem && !this._labelElem.classList.contains('textarea__label--floated')) {
+      this._labelElem.classList.add('textarea__label--floated');
     }
-    if (this._container && !this._container.classList.contains("textarea--focus")) {
-      this._container.classList.add("textarea--focus");
+    if (this._container && !this._container.classList.contains('textarea--focus')) {
+      this._container.classList.add('textarea--focus');
     }
   }
   connectedCallback() {
@@ -214,7 +214,7 @@ const EzTextArea = class {
   buildPlaceholder() {
     if (this.alternativePlaceholder)
       return this.alternativePlaceholder;
-    return (this.mode === "slim" && this.label) ? this.label : '';
+    return (this.mode === 'slim' && this.label) ? this.label : '';
   }
   buildLabelClass() {
     let classList = this.enabled ? 'textarea__label' : 'textarea__label textarea__label--disabled';
@@ -224,6 +224,19 @@ const EzTextArea = class {
       classList = classList + ' textarea__label--floated';
     return classList;
   }
+  renderErrorTooltip() {
+    if (!this.canShowError || this.mode == 'slim' || !this.errorMessage)
+      return;
+    return (index.h("div", { class: "tooltip-container" }, index.h("ez-tooltip", { type: "error", message: this.errorMessage }, index.h("ez-icon", { class: `tooltip-icon ${this.errorMessage ? 'hasError' : ''}`, "data-element-id": core.ElementIDUtils.getInternalIDInfo('tooltip-icon'), iconName: "alert-circle" }))));
+  }
+  renderLabel() {
+    if (!this.label || this.mode == 'slim')
+      return null;
+    return index.h("label", { ref: (el) => this._labelElem = el, class: this.buildLabelClass(), onClick: () => this._inputElem.focus(), title: this.label }, this.label);
+  }
+  renderTextArea() {
+    return index.h("textarea", { onFocus: () => this.handleFocus(), "data-element-id": core.ElementIDUtils.getInternalIDInfo('input'), ref: (el) => this._inputElem = el, value: this.value, disabled: !this.enabled, class: { 'textarea--slim': this.mode === 'slim' }, placeholder: this.buildPlaceholder(), onInput: () => this.handleChange(), onFocusout: () => this.handleFocusout(), rows: this.rows });
+  }
   //---------------------------------------------
   // Lifecycle web component
   //---------------------------------------------
@@ -239,13 +252,7 @@ const EzTextArea = class {
   }
   render() {
     core.ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
-    return (index.h(index.Host, null, index.h("div", { class: `textarea ${this.enabled ? "" : "textarea--disabled"}`, ref: (el) => this._container = el }, this.label && this.mode != "slim" ?
-      index.h("label", { ref: (el) => this._labelElem = el, class: this.buildLabelClass(), onClick: () => this._inputElem.focus(), title: this.label }, this.label)
-      : null, index.h("textarea", { onFocus: () => this.handleFocus(), "data-element-id": core.ElementIDUtils.getInternalIDInfo("input"), ref: (el) => this._inputElem = el, value: this.value, disabled: !this.enabled, class: {
-        "textarea--slim": this.mode === "slim",
-        "textarea--resizable": this.enableResize
-      }, placeholder: this.buildPlaceholder(), onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, rows: this.rows })), this.canShowError && this.mode != "slim" &&
-      index.h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
+    return (index.h(index.Host, null, index.h("div", { class: `textarea ${this.enabled ? '' : 'textarea--disabled'}`, ref: (el) => this._container = el }, this.renderLabel(), index.h("div", { class: `input-container ${this.enableResize ? 'textarea--resizable' : ""}` }, this.renderTextArea(), this.renderErrorTooltip()))));
   }
   get _hostElement() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/ez-text-input.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9e5554cb.js');
+const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
 
 const ezTextInputCss = ":host{--ez-text-input--height:42px;--ez-text-input--width:100%;--ez-text-input__icon--width:30px;--ez-text-input--height--slim:32px;--ez-text-input__min-width:0px;--ez-text-input__max-width:100%;--ez-text-input--border-radius:var(--border--radius-medium, 12px);--ez-text-input--border-top-left-radius:var(--ez-text-input--border-radius);--ez-text-input--border-bottom-left-radius:var(--ez-text-input--border-radius);--ez-text-input--border-top-right-radius:var(--ez-text-input--border-radius);--ez-text-input--border-bottom-right-radius:var(--ez-text-input--border-radius);--ez-text-input--font-size:var(--text--medium, 14px);--ez-text-input--font-family:var(--font-pattern, Arial);--ez-text-input--font-weight:var(--text-weight--medium, 400);--ez-text-input--color:var(--title--primary, #2B3A54);--ez-text-input__margin-bottom:var(--space--small);--ez-text-input__input--background-color:var(--background--light, #ffffff);--ez-text-input__input--border:var(--border--small, 1px solid);--ez-text-input__input--border-color:var(--color--strokes,#DCE0E8);--ez-text-input__input--focus--border-color:var(--color--primary, #008561);--ez-text-input__input--disabled--background-color:var(--background--medium, #F0F3F7);--ez-text-input__input--disabled--color:var(--text--primary, #626E82);--ez-text-input__input--error--border-color:var(--color-alert--error-800,#BD0025);--ez-text-input__input--noborder-color:white;--ez-text-input__input--padding:var(--space--medium, 6px);--ez-text-input__placeholder--color:var(--text--secondary, #a2abb9);--ez-text-input__tooltip_icon--error--color:var(--color-alert--error-800,#BD0025);--ez-text-input__label--floating--top:6px;--ez-text-input__label--padding-top:12px;--ez-text-input__label--padding-left:14px;--ez-text-input__label--padding-right:12px;--ez-text-input__input--focus--icon-color:var(--title--primary, #2B3A54);--ez-text-input__input--disabled--focus--icon-color:var(--text--primary, #626E82);--ez-text-input__tooltip-icon--spacing:var(--space--large);--ez-text-input__tooltip-icon---width:var(--space--large);--ez-text-input__tooltip-icon---horizontal-margin:var(--space--medium, 12px);--ez-text-input__tooltip-icon---vertical-margin:10px;display:flex;flex-wrap:wrap;position:relative;width:var(--ez-text-input--width);min-width:var(--ez-text-input__min-width);max-width:var(--ez-text-input__max-width)}:host(.grid_editor){--ez-text-input--height--slim:25px}input{width:100%;box-sizing:border-box;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;height:var(--ez-text-input--height);border-top-left-radius:var(--ez-text-input--border-top-left-radius);border-bottom-left-radius:var(--ez-text-input--border-bottom-left-radius);border-top-right-radius:var(--ez-text-input--border-top-right-radius);border-bottom-right-radius:var(--ez-text-input--border-bottom-right-radius);font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);border:var(--ez-text-input__input--border);border-color:var(--ez-text-input__input--border-color);background-color:var(--ez-text-input__input--background-color);color:var(--ez-text-input--color);font-weight:var(--ez-text-input--font-weight);padding:var(--ez-text-input__input--padding);margin-bottom:var(--ez-text-input__margin-bottom)}input.no--margin{--ez-text-input__margin-bottom:0}input:disabled{background-color:var(--ez-text-input__input--disabled--background-color);color:var(--ez-text-input__input--disabled--color);cursor:not-allowed}input:focus{outline:none;border:var(--border--medium, 2px solid);border-color:var(--ez-text-input__input--focus--border-color)}input.focused{border:var(--border--medium, 2px solid);border-color:var(--ez-text-input__input--focus--border-color)}input.icon--left{padding-left:var(--ez-text-input__icon--width)}input.icon--left.hasError{padding-right:var(--ez-text-input__icon--width)}input.icon--right{padding-right:var(--ez-text-input__icon--width)}input.icon--right.hasError{padding-right:calc(var(--ez-text-input__icon--width) + var(--ez-text-input__tooltip-icon--spacing))}input.hasError{color:var(--ez-text-input--color);border:var(--border--medium, 2px solid);border-color:var(--ez-text-input__input--error--border-color);padding-right:calc(var(--ez-text-input__tooltip-icon---width) + (2*var(--ez-text-input__tooltip-icon---horizontal-margin)))}input:disabled.hasError{color:var(--ez-text-input__input--disabled--color)}input.text--right{text-align:right}input:disabled,input:read-only{cursor:not-allowed}.hasError{color:var(--ez-text-input__tooltip_icon--error--color)}.input__label{box-sizing:border-box;position:absolute;z-index:var(--visible);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-transition:font-size .05s, top .05s;transition:font-size .05s, top .05s;width:calc(100% - var(--ez-text-input__label--padding-right));left:var(--ez-text-input--space--medium);font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);font-weight:var(--ez-text-input--font-weight);color:var(--ez-text-input--color);top:var(--ez-text-input__label--padding-top);left:var(--ez-text-input__label--padding-left);padding-right:var(--ez-text-input__label--padding-right)}.input__label.hasError{width:calc(100% - 2*(var(--ez-text-input__tooltip-icon--spacing)))}.input__label--floated{font-family:var(--ez-text-input--font-family);font-size:var(--text--extra-small);color:var(--text--primary);top:var(--ez-text-input__label--floating--top)}.input__label--disabled{color:var(--ez-text-input__input--disabled--color);cursor:not-allowed}.input__label--left{text-align:left;left:calc(var(--ez-text-input__icon--width) + 2px);width:calc(100% - var(--ez-text-input__icon--width))}.input__label--left.hasError{width:calc(100% - var(--ez-text-input__icon--width) - var(--ez-text-input__tooltip-icon--spacing))}.input__label--right{right:var(--ez-text-input__icon--width);width:calc(100% - var(--ez-text-input__icon--width))}.input__label--right.hasError{width:calc(100% - var(--ez-text-input__icon--width) - var(--ez-text-input__tooltip-icon--spacing))}.input__label--left.input__label--right{left:calc(var(--ez-text-input__icon--width) + 2px);width:calc(100% - var(--ez-text-input__icon--width) * 2)}.input--with--label{padding-bottom:0}.input--slim{padding-top:var(--space--small, 3px);padding-bottom:var(--space--small, 3px);height:var(--ez-text-input--height--slim)}.input__slim--title{font-size:16px;font-weight:bold}.input--slim::-webkit-input-placeholder,.input--slim:-moz-placeholder,.input--slim::-moz-placeholder,.input--slim:-ms-input-placeholder,.input--slim::placeholder{font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);font-weight:var(--ez-text-input--font-weight);color:var(--ez-text-input__placeholder--color)}.input--slim:disabled::-webkit-input-placeholder,.input--slim:disabled:-moz-placeholder,.input--slim:disabled::-moz-placeholder,.input--slim:disabled:-ms-input-placeholder,.input--slim:disabled::placeholder{color:var(--ez-text-input__input--disabled--color)}input.input__slim--noborder{box-shadow:0 0 0 0;border:0 none;outline:0;background:var(--ez-text-input__input--noborder-color)}ez-icon.tooltip-icon{position:absolute;display:flex;align-items:center;justify-content:center;overflow:hidden;width:var(--ez-text-input__tooltip-icon---width);height:22px;margin:var(--ez-text-input__tooltip-icon---vertical-margin) var(--ez-text-input__tooltip-icon---horizontal-margin);top:0;right:0;z-index:var(--elevation--4);border-radius:var(--ez-text-input--border-radius)}ez-icon.tooltip-icon.rightIconSlot{right:var(--ez-text-input__tooltip-icon--spacing)}ez-icon.tooltip-icon.hasError{--ez-icon--color:var(--ez-text-input__tooltip_icon--error--color)}";
@@ -181,7 +181,7 @@ const EzTextInput = class {
   }
   controlChangeValue() {
     if (this._inputElem && (this.value || '') !== this._inputElem.value) {
-      if (this.cleanValueMask) {
+      if (this.cleanValueMask && this._maskFormatter) {
         this.value = this._maskFormatter.removeMask(this._inputElem.value);
       }
       else {
@@ -296,6 +296,7 @@ const EzTextInput = class {
   //---------------------------------------------
   componentWillLoad() {
     this.observeMask();
+    this.forceLabelFloat = !!this.alternativePlaceholder;
     if (this.value) {
       if (this._maskFormatter) {
         try {

package/dist/cjs/ez-tile.cjs.entry.js

@@ -0,0 +1,62 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-a7b0c73d.js');
+const core = require('@sankhyalabs/core');
+
+const ezTileCss = ":host{--ez-tile--width:120px;--ez-tile--height:80px;--ez-tile--padding:var(--space--12, 12px);--ez-tile--icon--margin-bottom:var(--space--8);--ez-tile--border-radius:var(--border--radius-16, 16px);--ez-tile--background-color:var(--color--gray-70, #ffffff);--ez-tile--color:var(--color--ocean-green-900, #003D2D);--ez-tile--icon-color:var(--color--ocean-green-400, #42A58A);--ez-tile--hover-background-color:var(--color--gray-80, #F9F9F9);--ez-tile--hover-color:var(--color--ocean-green-900, #003D2D);--ez-tile--hover-icon-color:var(--color--ocean-green-400, #42A58A);--ez-tile--focus-visible-border:2px solid var(--color--petroleum-400, #626D80);--ez-tile--font-family:var(--font-pattern, Arial);--ez-tile--font-weight:var(--font-weight--regular, 400);--ez-tile--font-size:var(--font-size--default, 14px);--ez-tile--title-line-height:var(--line-height--20, 20px);--ez-tile--icon-line-height:var(--line-height--24, 24px)}button{display:flex;flex-wrap:wrap;align-content:space-between;overflow:hidden;outline:none;box-shadow:none;width:var(--ez-tile--custom-width, var(--ez-tile--width));height:var(--ez-tile--custom-height, var(--ez-tile--height));border-radius:var(--ez-tile--border-radius);background-color:var(--ez-tile--background-color);color:var(--ez-tile--color);box-sizing:border-box;padding:var(--ez-tile--padding);border:2px solid var(--ez-tile--background-color)}button:focus-visible{border:var(--ez-tile--focus-visible-border)}.medium{--ez-tile--width:var(--ez-tile--custom-width, 120px);--ez-tile--height:var(--ez-tile--custom-height, 170px)}.isInteractive:hover,.isInteractive:focus{--ez-icon--color:var(--ez-tile--hover-icon-color);--ez-tile--background-color:var(--ez-tile--hover-background-color);--ez-tile--color:var(--ez-tile--hover-color);cursor:pointer}span{-webkit-line-clamp:var(--ez-tile--custom-maximum-lines, 1);line-clamp:var(--ez-tile--custom-maximum-lines,1);font-family:var(--ez-tile--font-family);font-weight:var(--ez-tile--font-weight);font-size:var(--ez-tile--font-size);line-height:var(--ez-tile--title-line-height);display:-webkit-box;-webkit-box-orient:vertical;width:100%;overflow:hidden;text-overflow:ellipsis;text-align:left;white-space:pre-wrap}ez-icon{--ez-icon--color:var(--ez-tile--icon-color);margin-bottom:var(--ez-tile--icon--margin-bottom);line-height:var(--ez-tile--icon-line-height)}.isInteractive:hover,.isInteractive:focus{outline:none}.green{--ez-tile--background-color:var(--color--ocean-green-90);--ez-tile--icon-color:var(--color--ocean-green-500)}.isInteractive.green:hover,.isInteractive.green:focus{--ez-tile--hover-background-color:var(--color--ocean-green-100);--ez-tile--icon-color:var(--color--ocean-green-500);outline:none}.gray{--ez-tile--background-color:var(--color--gray-80);--ez-tile--icon-color:var(--color--ocean-green-400)}.isInteractive.gray:hover,.isInteractive.gray:focus{--ez-tile--hover-background-color:var(--color--gray-90);--ez-tile--hover-icon-color:var(--color--ocean-green-400)}.red{--ez-tile--background-color:var(--color--red-100);--ez-tile--icon-color:var(--color--red-300)}.isInteractive.red:hover,.isInteractive.red:focus{--ez-tile--hover-background-color:var(--color--red-200);--ez-tile--hover-icon-color:var(--color--red-300)}.yellow{--ez-tile--background-color:var(--color--yellow-100);--ez-tile--icon-color:var(--color--yellow-400)}.isInteractive.yellow:hover,.isInteractive.yellow:focus{--ez-tile--hover-background-color:var(--color--yellow-200);--ez-tile--hover-icon-color:var(--color--yellow-400)}";
+
+const EzTile = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.tileClick = index.createEvent(this, "tileClick", 7);
+    this.text = undefined;
+    this.size = "small";
+    this.height = undefined;
+    this.width = undefined;
+    this.color = "default";
+    this.iconName = "home";
+    this.maximumLines = undefined;
+    this.isInteractive = false;
+  }
+  /**
+   * Aplica o foco no componente.
+   */
+  async setFocus() {
+    this._container.focus();
+  }
+  /**
+   * Remove o foco do componente.
+   */
+  async setBlur() {
+    this._container.blur();
+  }
+  clickListener(evt) {
+    if (!this.isInteractive) {
+      evt.stopImmediatePropagation();
+    }
+  }
+  handleClick() {
+    if (this.isInteractive) {
+      this.tileClick.emit();
+    }
+  }
+  componentDidRender() {
+    if (this._element) {
+      core.ElementIDUtils.addIDInfo(this._element);
+    }
+    if (this._container) {
+      const dataInfo = { id: 'embedded' };
+      core.ElementIDUtils.addIDInfo(this._container, 'tile-button', dataInfo);
+    }
+  }
+  render() {
+    const customStyleVars = Object.assign(Object.assign(Object.assign({}, (this.height ? { '--ez-tile--custom-height': `${this.height}px` } : {})), (this.width ? { '--ez-tile--custom-width': `${this.width}px` } : {})), (this.maximumLines ? { '--ez-tile--custom-maximum-lines': `${this.maximumLines}` } : {}));
+    return (index.h(index.Host, { style: customStyleVars }, index.h("button", { ref: element => this._container = element, class: `${this.color} ${this.size} ${this.isInteractive ? "isInteractive" : ""}`, onClick: () => this.handleClick() }, index.h("ez-icon", { class: "icon", iconName: this.iconName, size: "large" }), index.h("span", { title: this.text }, this.text))));
+  }
+  get _element() { return index.getElement(this); }
+};
+EzTile.style = ezTileCss;
+
+exports.ez_tile = EzTile;

package/dist/cjs/ez-time-input.cjs.entry.js

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9e5554cb.js');
+const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
 const CSSVarsUtils = require('./CSSVarsUtils-f20973d1.js');
+const index$1 = require('./index-02854309.js');
 
 const ezTimeInputCss = ":host{display:flex;flex-wrap:wrap;position:relative;width:100%}.time__input{height:100%}";
 
@@ -52,7 +53,7 @@ const EzTimeInput = class {
         this._viewValue = newValueValidated == undefined ? "" : newValueValidated.toString();
         this.prepareValue(this._viewValue);
         if (this._viewValue && !core.TimeFormatter.validateTime(this._viewValue, this.showSeconds)) {
-          this.setError("Favor inserir um horário válido.");
+          this.setError(this.i18n("ez-time-input.invalidTime"));
           newValueValidated = undefined;
         }
         else {
@@ -141,15 +142,8 @@ const EzTimeInput = class {
   //---------------------------------------------
   // Lifecycle web component
   //---------------------------------------------
-  componentDidLoad() {
-    CSSVarsUtils.CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
-    if (this.autoFocus) {
-      requestAnimationFrame(() => {
-        this.setFocus({ selectText: true });
-      });
-    }
-  }
-  componentWillLoad() {
+  async componentWillLoad() {
+    this.i18n = await index$1.initI18n();
     this.observeShowSeconds();
     if (this.value) {
       this.prepareValue(this.value.toString());
@@ -158,6 +152,14 @@ const EzTimeInput = class {
       this.prepareValue(this._viewValue);
     }
   }
+  componentDidLoad() {
+    CSSVarsUtils.CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
+    if (this.autoFocus) {
+      requestAnimationFrame(() => {
+        this.setFocus({ selectText: true });
+      });
+    }
+  }
   render() {
     core.ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
     return (index.h(index.Host, null, index.h("ez-text-input", { class: "time__input", "data-element-id": core.ElementIDUtils.getInternalIDInfo("textInput"), ref: (el) => this._textInput = el, "data-slave-mode": "true", value: this._viewValue, enabled: this.enabled, label: this.label, restrict: "0123456789:", onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError, alternativePlaceholder: this.alternativePlaceholder }, index.h("ez-icon", { slot: "leftIcon", iconName: "timer-outline" }))));

package/dist/cjs/ez-toast.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9e5554cb.js');
+const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
 
 const ezToastCss = ":host{--ez-toast__btn__close__image:url('data:image/svg+xml;utf8,<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg%22%3E<path d=\"M 7.0060773,5.995511 11.461972,1.5397722 c 0.132856,-0.1328413 0.207547,-0.3130253 0.207547,-0.5009046 0,-0.18786999 -0.07469,-0.3680541 -0.207547,-0.5009048 -0.132857,-0.13284126 -0.31302,-0.20748126 -0.500927,-0.20748126 -0.187812,0 -0.36807,0.07464 -0.500926,0.20748126 L 6.0042244,4.9937015 1.5482921,0.5379628 C 1.4154357,0.40512154 1.2352533,0.33048154 1.0473657,0.33048154 c -0.18787813,0 -0.36807,0.07464 -0.50092647,0.20748126 -0.13285646,0.1328507 -0.20749026,0.31303481 -0.20749026,0.5009048 0,0.1878793 0.0746338,0.3680633 0.20749026,0.5009046 L 5.0023715,5.995511 0.54643923,10.452213 c -0.0676086,0.06534 -0.12151598,0.14352 -0.15859681,0.229916 -0.0370714,0.08639 -0.0565645,0.1794 -0.0573369,0.27335 -7.724e-4,0.09404 0.0171873,0.187331 0.0528423,0.274293 0.0356455,0.08705 0.0882688,0.166087 0.15479148,0.23256 0.0665321,0.06648 0.14562277,0.11897 0.2326735,0.154567 0.0870507,0.0356 0.18031463,0.05344 0.2743433,0.05259 0.094029,-8.5e-4 0.1869528,-0.02049 0.2733331,-0.0576 0.08639,-0.0372 0.1645078,-0.09121 0.2298029,-0.158817 L 6.0042244,6.9973204 10.460119,11.453078 c 0.132856,0.132851 0.313114,0.207444 0.500926,0.207444 0.187907,0 0.36807,-0.07459 0.500927,-0.207444 0.132856,-0.13285 0.207547,-0.313006 0.207547,-0.500904 0,-0.187898 -0.07469,-0.368054 -0.207547,-0.500905 z\"/></svg>');--ez-toast__container--z-index:var(--elevation--100, 100);--ez-toast__container--background-color:var(--color--secondary, #383c45);--ez-toast__container--left:var(--space--large, 24px);--ez-toast__container--bottom:var(--space--large, 24px);--ez-toast__container--width:400px;--ez-toast__icon--padding-left:var(--space--small, 6px)}.toast__container{position:fixed;display:flex;box-sizing:border-box;border-radius:6px;align-items:center;padding:12px;visibility:hidden;width:var(--ez-toast__container--width);left:var(--ez-toast__container--left);bottom:var(--ez-toast__container--bottom);z-index:var(--ez-toast__container--z-index);background-color:var(--ez-toast__container--background-color)}.message__container{text-shadow:0 0 0 #353535, 0 0 1px transparent;color:#FFFFFF;font-size:14px;width:90%;overflow:hidden;hyphens:auto;height:auto;-webkit-box-orient:vertical;-webkit-line-clamp:4;display:-webkit-box;text-overflow:ellipsis;font-family:var(--font-pattern, \"Roboto\")}.message__container--icon{width:80%;padding-left:var(--ez-toast__icon--padding-left)}.btn-close{margin-top:3px;display:flex;justify-content:flex-end;align-self:flex-start;padding:0;outline:none;width:10%;border:none;background-color:unset;cursor:pointer}.btn-close::after{content:'';display:flex;background-color:#FFFFFF;width:12px;height:12px;-webkit-mask-image:var(--ez-toast__btn__close__image);mask-image:var(--ez-toast__btn__close__image)}.toast__container--opened{animation:fadein 0.5s, fadeout 0.5s 3s;visibility:visible}@-webkit-keyframes fadein{from{opacity:0;left:calc(var(--ez-toast__container--left) * -1)}to{opacity:1;left:var(--ez-toast__container--left)}}@keyframes fadein{from{opacity:0;left:calc(var(--ez-toast__container--left) * -1)}to{opacity:1;left:var(--ez-toast__container--left)}}@-webkit-keyframes fadeout{from{opacity:1;left:var(--ez-toast__container--left)}to{bottom:0;opacity:0}}@keyframes fadeout{from{opacity:1;left:var(--ez-toast__container--left)}to{bottom:0;opacity:0}}";