@sankhyalabs/ezui 6.0.1 → 6.1.0-dev.1

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-5a720e56.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-baa5e267.js';
 import { ElementIDUtils } from '@sankhyalabs/core';
 
-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:--ez-elevation--8;border-radius:var(--ez-split-button--border-radius)}.dropdown-content>ez-dropdown{position:relative}";
+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}";
 
 const EzSplitButton = class {
   constructor(hostRef) {
@@ -20,6 +20,7 @@ const EzSplitButton = class {
     this.rightTitle = 'Mais opções';
     this.mode = 'default';
     this.size = 'medium';
+    this.itemBuilder = undefined;
   }
   /**
    * Remove o foco de ambos os botões.
@@ -40,6 +41,18 @@ const EzSplitButton = class {
   async setRightButtonFocus() {
     this.rightButton.focus();
   }
+  /**
+   * Abre ou Fecha o dropdown do Split Button.
+   */
+  async toggleDropdown() {
+    this.show = !this.show;
+  }
+  /**
+   * Informa se a lista de ações está aberta.
+   */
+  async isOpenedDropdown() {
+    return this.show;
+  }
   clickListener(evt) {
     if (!this.enabled) {
       evt.preventDefault();
@@ -56,16 +69,12 @@ const EzSplitButton = class {
   closeDropdown() {
     this.show = false;
   }
-  toggleDropdown() {
-    this.show = !this.show;
-  }
   handleButtonClick() {
     this.buttonClick.emit();
   }
   handleDropdownItemClick(evt) {
     this.dropdownItemClick.emit(evt.detail);
     evt.stopPropagation();
-    this.closeDropdown();
   }
   handleDropdownSubActionClick(evt) {
     this.dropdownSubActionClick.emit(evt.detail);
@@ -147,7 +156,7 @@ const EzSplitButton = class {
     const hasIconButton = this.shouldShowIconOnLeftButton();
     const hasLabelButton = this.shouldShowLabelOnLeftButton();
     const iconSize = this.getIconSize();
-    return (h("div", { class: "label-icon" }, 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 && h("ez-icon", { href: this.image, iconName: this.iconName, size: iconSize }), hasLabelButton && h("label", { title: this.leftTitle || this.label }, this.label)), h("div", { class: "dropdown" }, 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) }, h("ez-icon", { class: `ez-split-button__right-button-container ` + (iconSize ? `btn-icon--${iconSize}` : ''), iconName: 'chevron-down', size: iconSize })), h("div", { class: `dropdown-content dropdown-content--${this.size}`, ref: (ref) => (this.dropdownParent = ref) }, this.show && (h("ez-dropdown", { items: this.items, onClick: evt => { evt.stopPropagation(); }, onEzOutsideClick: () => { this.closeDropdown(); }, onEzClick: evt => { this.handleDropdownItemClick(evt); }, onEzSubActionClick: evt => { this.handleDropdownSubActionClick(evt); } }))))));
+    return (h("div", { class: "label-icon" }, 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 && h("ez-icon", { href: this.image, iconName: this.iconName, size: iconSize }), hasLabelButton && h("label", { title: this.leftTitle || this.label }, this.label)), h("div", { class: "dropdown" }, 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) }, h("ez-icon", { class: `ez-split-button__right-button-container ` + (iconSize ? `btn-icon--${iconSize}` : ''), iconName: 'chevron-down', size: iconSize })), h("div", { class: `dropdown-content dropdown-content--${this.size}`, ref: (ref) => (this.dropdownParent = ref) }, this.show && (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/esm/ez-split-item.entry.js

@@ -1,10 +1,10 @@
-import { r as registerInstance, h, H as Host } from './index-5a720e56.js';
+import { r as registerInstance, h, H as Host } from './index-baa5e267.js';
 import './ApplicationUtils-eaf91331.js';
 import { C as CSSVarsUtils } from './CSSVarsUtils-acba92d7.js';
 import './DialogType-54a62731.js';
 import './CheckMode-bdb2ec19.js';
 import '@sankhyalabs/core';
-import './ICustomRender-875b5a40.js';
+import './FormLayout-071d324c.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)))}";
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5a720e56.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
 import { StringUtils } from '@sankhyalabs/core';
 
 var numeric = function (value, unit) { return Number(value.slice(0, -1 * unit.length)); };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5a720e56.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
 import { ElementIDUtils, StringUtils } from '@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/esm/ez-text-area.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5a720e56.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
 import { ElementIDUtils } from '@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}";
@@ -19,6 +19,8 @@ const EzTextArea = class {
     this.enableResize = true;
     this.autoRows = false;
     this.autoFocus = false;
+    this.alternativePlaceholder = undefined;
+    this.forceLabelFloat = false;
   }
   observeErrorMessage() {
     var _a, _b, _c, _d;
@@ -69,6 +71,9 @@ const EzTextArea = class {
       (_b = this._resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
     }
   }
+  observeAlternativePlaceholder(newValue) {
+    this.forceLabelFloat = !!newValue;
+  }
   //---------------------------------------------
   // Public methods
   //---------------------------------------------
@@ -117,6 +122,8 @@ const EzTextArea = class {
     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");
@@ -200,6 +207,19 @@ const EzTextArea = class {
     var _a;
     (_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
+  buildPlaceholder() {
+    if (this.alternativePlaceholder)
+      return this.alternativePlaceholder;
+    return (this.mode === "slim" && this.label) ? this.label : '';
+  }
+  buildLabelClass() {
+    let classList = this.enabled ? 'textarea__label' : 'textarea__label textarea__label--disabled';
+    if (this.errorMessage)
+      classList = classList + ' hasError';
+    if (this.forceLabelFloat)
+      classList = classList + ' textarea__label--floated';
+    return classList;
+  }
   //---------------------------------------------
   // Lifecycle web component
   //---------------------------------------------
@@ -216,11 +236,11 @@ const EzTextArea = class {
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
     return (h(Host, null, h("div", { class: `textarea ${this.enabled ? "" : "textarea--disabled"}`, ref: (el) => this._container = el }, this.label && this.mode != "slim" ?
-      h("label", { ref: (el) => this._labelElem = el, class: this.enabled ? "textarea__label" : "textarea__label textarea__label--disabled", onClick: () => this._inputElem.focus(), title: this.label }, this.label)
+      h("label", { ref: (el) => this._labelElem = el, class: this.buildLabelClass(), onClick: () => this._inputElem.focus(), title: this.label }, this.label)
       : null, h("textarea", { onFocus: () => this.handleFocus(), "data-element-id": 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.mode === "slim" && this.label ? this.label : "", onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, rows: this.rows })), this.canShowError && this.mode != "slim" &&
+      }, placeholder: this.buildPlaceholder(), onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, rows: this.rows })), this.canShowError && this.mode != "slim" &&
       h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
   }
   get _hostElement() { return getElement(this); }
@@ -229,7 +249,8 @@ const EzTextArea = class {
     "value": ["observeValue"],
     "mode": ["observeMode"],
     "rows": ["observeRows"],
-    "autoRows": ["observeAutoRows"]
+    "autoRows": ["observeAutoRows"],
+    "alternativePlaceholder": ["observeAlternativePlaceholder"]
   }; }
 };
 EzTextArea.style = ezTextAreaCss;

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

@@ -1,43 +1,19 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5a720e56.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
 import { MaskFormatter, ElementIDUtils } from '@sankhyalabs/core';
 
-/**
- * Aplica comportamento de elipses a um input caso o texto ultrapasse o tamanho disponível.
- *
- * @param inputElement A referência ao elemento input (HTMLInputElement).
- */
-const applyEllipsisToInput = (inputElement) => {
-  if (!inputElement || !inputElement.style) {
-    console.error('[applyEllipsisToInput] Referência ao elemento input é inválida.');
-    return;
-  }
-  inputElement.style.textOverflow = 'ellipsis';
-  inputElement.style.overflow = 'hidden';
-  inputElement.style.whiteSpace = 'nowrap';
-  const adjustEllipsis = () => {
-    const value = inputElement.value || '';
-    const isOverflowing = inputElement.scrollWidth > inputElement.clientWidth;
-    if (isOverflowing) {
-      inputElement.setAttribute('title', value);
-    }
-    else {
-      inputElement.removeAttribute('title');
-    }
-  };
-  inputElement.addEventListener('input', adjustEllipsis);
-  adjustEllipsis();
-};
-
-const ezTextInputCss = ":host{--ez-text-input--height:42px;--ez-text-input--width:100%;--ez-text-input__icon--width:48px;--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--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;height:var(--ez-text-input--height);border-radius:var(--ez-text-input--border-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-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-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)}";
+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)}";
 
 const EzTextInput = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ezChange = createEvent(this, "ezChange", 7);
+    this._isOverflowing = false;
     this.label = undefined;
+    this.alternativePlaceholder = undefined;
     this.value = undefined;
     this.enabled = true;
     this.errorMessage = undefined;
+    this.hasInvalid = false;
     this.mask = undefined;
     this.cleanValueMask = false;
     this.canShowError = true;
@@ -47,21 +23,13 @@ const EzTextInput = class {
     this.password = false;
     this.autoFocus = false;
     this.hasRightSlotContent = false;
+    this.forceLabelFloat = false;
   }
-  observeErrorMessage() {
-    if (this._inputElem) {
-      this.isInvalid().then((hasError) => {
-        var _a;
-        if (hasError) {
-          this._inputElem.classList.add("hasError");
-          (_a = this._tooltipPositioningObserver) === null || _a === void 0 ? void 0 : _a.observe(this._inputElem);
-        }
-        else {
-          this._inputElem.classList.remove("hasError");
-          this.removeGlobalTooltip();
-        }
-      });
+  observeHasInvalid(newValue, oldValue) {
+    if (newValue === oldValue) {
+      return;
     }
+    this.validateErrors();
   }
   observeMask() {
     if (this.mask) {
@@ -79,6 +47,7 @@ const EzTextInput = class {
         this._inputElem.value = this.value || "";
         this.handleChange();
         this.adjustFloatingLabel();
+        this.checkIsOverflowing();
         if (!this.isSlaveMode()) {
           this.errorMessage = "";
           this.ezChange.emit(this.value);
@@ -86,14 +55,38 @@ const EzTextInput = class {
       }
     }
   }
+  observeAlternativePlaceholder(newValue) {
+    this.forceLabelFloat = !!newValue;
+  }
   //---------------------------------------------
   // Private methods
   //---------------------------------------------
+  validateErrors() {
+    const hasErrorMessage = this.handleValidateErrorMessage(this.errorMessage);
+    const hasError = this.canShowError && (hasErrorMessage || this.hasInvalid);
+    this.updateClassError(hasError);
+  }
+  handleValidateErrorMessage(message = this.errorMessage) {
+    return typeof message === "string" && message.trim() !== "";
+  }
+  updateClassError(status) {
+    if (!this._inputElem) {
+      return;
+    }
+    if (status) {
+      this._inputElem.classList.add("hasError");
+    }
+    else {
+      this._inputElem.classList.remove("hasError");
+    }
+  }
   adjustFloatingLabel() {
     if (this.label && this._labelElem) {
       if (this._inputElem && !this._inputElem.classList.contains("input--with--label")) {
         this._inputElem.classList.add("input--with--label");
       }
+      if (this.forceLabelFloat)
+        return;
       const hasValue = this.value && this.value.toString().length > 0;
       const containsFloatedClass = this._labelElem.classList.contains("input__label--floated");
       if (hasValue || this.isFocused()) {
@@ -135,7 +128,12 @@ const EzTextInput = class {
     const { selectText } = options || {};
     if (selectText)
       this._inputElem.select();
-    this._inputElem.focus();
+    if (this._inputElem.disabled) {
+      this._inputElem.classList.add("focused");
+      this._inputElem.scrollIntoView({ behavior: "smooth", block: "start" });
+      return;
+    }
+    requestAnimationFrame(() => this._inputElem.focus());
   }
   /**
    * Remove o foco do campo.
@@ -147,7 +145,7 @@ const EzTextInput = class {
    * Retorna se o conteúdo é inválido.
    */
   async isInvalid() {
-    return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
+    return this.handleValidateErrorMessage();
   }
   //---------------------------------------------
   // Event handlers
@@ -258,7 +256,7 @@ const EzTextInput = class {
       }
       slot.name && ElementIDUtils.addIDInfo(content, slot.name);
     }
-    this.observeErrorMessage();
+    this.validateErrors();
   }
   doFocus() {
     if (this.label && this._labelElem && !this._labelElem.classList.contains("input__label--floated")) {
@@ -266,35 +264,28 @@ const EzTextInput = class {
     }
     this.adjustColorContentSlot("var(--ez-text-input__input--focus--icon-color)");
   }
-  renderGlobalTooltip() {
-    const tooltip = document.createElement('ez-tooltip');
-    tooltip.errorMessage = this.errorMessage;
-    tooltip.anchoringElement = this._tooltipIconElem;
-    document.body.appendChild(tooltip);
-    this._tooltipElem = tooltip;
+  getValue() {
+    return this.mask && this.cleanValueMask ? this.applyMask(this.value) : this.value;
   }
-  removeGlobalTooltip() {
-    var _a;
-    if (!this._tooltipElem)
-      return;
-    this._tooltipElem.remove();
-    this._tooltipElem = undefined;
-    (_a = this._tooltipPositioningObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this._inputElem);
+  buildLabelClass() {
+    let classList = this.enabled ? 'input__label' : 'input__label input__label--disabled';
+    if (this.errorMessage)
+      classList = classList + ' hasError';
+    if (this.forceLabelFloat)
+      classList = classList + ' input__label--floated';
+    return classList;
   }
-  createTooltipPositioningObserver() {
-    const observer = new ResizeObserver(() => {
-      if (!this._tooltipElem)
-        return;
-      if (!this._tooltipIconElem)
-        return;
-      clearTimeout(this._observerDebounceTimeout);
-      this._observerDebounceTimeout = setTimeout(async () => {
-        if (this._tooltipElem) {
-          await this._tooltipElem.positionTooltip();
-        }
-      }, 200);
-    });
-    this._tooltipPositioningObserver = observer;
+  buildPlaceholder() {
+    if (this.alternativePlaceholder)
+      return this.alternativePlaceholder;
+    return (this.mode === "slim" && this.label) ? this.label : '';
+  }
+  checkIsOverflowing() {
+    if (this._inputElem) {
+      this._isOverflowing = this._inputElem.offsetWidth < this._inputElem.scrollWidth;
+      return;
+    }
+    this._isOverflowing = false;
   }
   //---------------------------------------------
   // Lifecycle web component
@@ -322,11 +313,12 @@ const EzTextInput = class {
     }
   }
   componentDidLoad() {
-    var _a, _b;
-    this.observeErrorMessage();
+    var _a;
+    this.validateErrors();
     this.observeMask();
     this.adjustFloatingLabel();
     this.adjustBorderInput();
+    this.checkIsOverflowing();
     if (this.autoFocus) {
       requestAnimationFrame(() => {
         this.setFocus({ selectText: true });
@@ -336,43 +328,34 @@ const EzTextInput = class {
       var _a;
       this._inputElem.setSelectionRange(0, (_a = this._inputElem) === null || _a === void 0 ? void 0 : _a.value.length);
     });
-    this.createTooltipPositioningObserver();
-    if (this._inputElem) {
-      (_b = this._tooltipPositioningObserver) === null || _b === void 0 ? void 0 : _b.observe(this._inputElem);
-      applyEllipsisToInput(this._inputElem);
-    }
-  }
-  componentDidRender() {
-    if (this._tooltipIconElem && !this._tooltipElem) {
-      this.renderGlobalTooltip();
-    }
-  }
-  componentDidUpdate() {
-    if (this._tooltipIconElem && this._tooltipElem) {
-      this._tooltipElem.positionTooltip();
-    }
+    this.onClickOutside = (event) => {
+      if (!this._inputElem.contains(event.target)) {
+        this._inputElem.classList.remove("focused");
+      }
+    };
+    document.addEventListener("click", this.onClickOutside);
   }
   disconnectedCallback() {
-    if (this._tooltipPositioningObserver) {
-      this._tooltipPositioningObserver.disconnect();
-    }
-    if (this._observerDebounceTimeout) {
-      clearTimeout(this._observerDebounceTimeout);
-    }
-    this.removeGlobalTooltip();
+    document.removeEventListener("click", this.onClickOutside);
+  }
+  componentDidRender() {
+    this.adjustFloatingLabel();
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
     return (h(Host, { style: this._hostElement.classList.contains("grid_editor") ? { "height": "100%" } : null }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label && this.mode != "slim" ?
-      h("label", { ref: (el) => this._labelElem = el, class: `${this.enabled ? "input__label" : "input__label input__label--disabled"} ${this.errorMessage ? "hasError" : ""}`, onClick: () => this._inputElem.focus(), title: this.label }, this.label)
-      : null, h("input", { "data-element-id": ElementIDUtils.getInternalIDInfo("input"), onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: this.password ? "password" : "text", class: `${this.mode === "slim" ? "input--slim" : ""}`, placeholder: this.mode === "slim" && this.label ? this.label : "", value: this.mask && this.cleanValueMask ? this.applyMask(this.value) : this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), this.canShowError && this.mode != "slim" && this.errorMessage &&
-      h("ez-icon", { class: `tooltip-icon ${this.errorMessage ? "hasError" : ""} ${this.hasRightSlotContent ? "rightIconSlot" : ""}`, "data-element-id": ElementIDUtils.getInternalIDInfo("tooltip-icon"), ref: (el) => this._tooltipIconElem = el, iconName: "alert-circle" }), h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }, " ")));
+      h("label", { ref: (el) => this._labelElem = el, class: this.buildLabelClass(), onClick: () => this._inputElem.focus(), title: this.label }, this.label)
+      : null, h("input", { "data-element-id": ElementIDUtils.getInternalIDInfo("input"), onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: this.password ? "password" : "text", class: `${this.mode === "slim" ? "input--slim" : ""}`, placeholder: this.buildPlaceholder(), value: this.getValue(), disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), h("ez-tooltip", { anchoringElement: this._hostElement, message: this.getValue(), active: this._isOverflowing, useAnchorSize: true }), this.canShowError && this.mode != "slim" && this.errorMessage &&
+      h("ez-tooltip", { type: "error", message: this.errorMessage }, h("ez-icon", { class: `tooltip-icon ${this.errorMessage ? "hasError" : ""} ${this.hasRightSlotContent ? "rightIconSlot" : ""}`, "data-element-id": ElementIDUtils.getInternalIDInfo("tooltip-icon"), ref: (el) => this._tooltipIconElem = el, iconName: "alert-circle" })), h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }, " ")));
   }
   get _hostElement() { return getElement(this); }
   static get watchers() { return {
-    "errorMessage": ["observeErrorMessage"],
+    "hasInvalid": ["observeHasInvalid"],
+    "errorMessage": ["observeHasInvalid"],
+    "canShowError": ["observeHasInvalid"],
     "mask": ["observeMask"],
-    "value": ["observeValue"]
+    "value": ["observeValue"],
+    "alternativePlaceholder": ["observeAlternativePlaceholder"]
   }; }
 };
 EzTextInput.style = ezTextInputCss;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5a720e56.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
 import { TimeFormatter, MaskFormatter, NumberUtils, ElementIDUtils } from '@sankhyalabs/core';
 import { C as CSSVarsUtils } from './CSSVarsUtils-acba92d7.js';
 
@@ -18,6 +18,7 @@ const EzTimeInput = class {
     this.mode = "regular";
     this.canShowError = true;
     this.autoFocus = false;
+    this.alternativePlaceholder = undefined;
   }
   observeErrorMessage() {
     var _a;
@@ -155,7 +156,7 @@ const EzTimeInput = class {
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (h(Host, null, h("ez-text-input", { class: "time__input", "data-element-id": 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 }, h("ez-icon", { slot: "leftIcon", iconName: "timer-outline" }))));
+    return (h(Host, null, h("ez-text-input", { class: "time__input", "data-element-id": 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 }, h("ez-icon", { slot: "leftIcon", iconName: "timer-outline" }))));
   }
   static get assetsDirs() { return ["../assets"]; }
   get _elem() { return getElement(this); }

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, f as forceUpdate, h, H as Host, g as getElement } from './index-5a720e56.js';
+import { r as registerInstance, f as forceUpdate, h, H as Host, g as getElement } from './index-baa5e267.js';
 import { ElementIDUtils } from '@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}}";

package/dist/esm/ez-tree.entry.js

@@ -1,4 +1,4 @@
-import { h, r as registerInstance, c as createEvent, f as forceUpdate, H as Host, g as getElement } from './index-5a720e56.js';
+import { h, r as registerInstance, c as createEvent, f as forceUpdate, H as Host, g as getElement } from './index-baa5e267.js';
 import { ElementIDUtils, StringUtils, ObjectUtils } from '@sankhyalabs/core';
 
 const ICON_EXPANDED = "chevron-down";

package/dist/esm/ez-upload.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, g as getElement } from './index-5a720e56.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, g as getElement } from './index-baa5e267.js';
 import { A as ApplicationUtils } from './ApplicationUtils-eaf91331.js';
 import { ElementIDUtils } from '@sankhyalabs/core';
 import './DialogType-54a62731.js';

package/dist/esm/ez-view-stack.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement, H as Host } from './index-5a720e56.js';
+import { r as registerInstance, h, g as getElement, H as Host } from './index-baa5e267.js';
 import { JSUtils, ElementIDUtils } from '@sankhyalabs/core';
 
 const ezViewStackCss = ":host{width:100%;height:100%}.ez-view-stack__container{width:100%;height:100%}";