@sankhyalabs/ezui 5.22.0-dev.12 → 5.22.0-dev.120

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

@@ -5,37 +5,35 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-9e5554cb.js');
 const core = require('@sankhyalabs/core');
 
-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--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__input--background-color:var(--background--medium, #e0e0e0);--ez-text-input__input--border:var(--border--medium, 2px solid);--ez-text-input__input--border-color:var(--ez-text-input__input--background-color);--ez-text-input__input--focus--border-color:var(--color--primary, #008561);--ez-text-input__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-text-input__input--disabled--color:var(--text--disable, #AFB6C0);--ez-text-input__input--error--border-color:#CC2936;--ez-text-input__input--noborder-color:white;--ez-text-input__input--padding:var(--space--medium, 6px);--ez-text-input__message_box--font-size:var(--text--small, 12px);--ez-text-input__message_box--info--color:var(--color--success, #22085d);--ez-text-input__message_box--error--color:var(--color--error, #FF0000);--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(--ez-text-input__input--focus--border-color);display:flex;flex-wrap:wrap;position:relative;width:var(--ez-text-input--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)}input:disabled{background-color:var(--ez-text-input__input--disabled--background-color);color:var(--ez-text-input__input--disabled--color)}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--right{padding-right:var(--ez-text-input__icon--width)}input.hasError{color:var(--ez-text-input--color);border-color:var(--ez-text-input__input--error--border-color)}input:disabled.hasError{color:var(--ez-text-input__input--disabled--color)}input.text--right{text-align:right}input:read-only{cursor:default}.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(--ez-text-input--font-family);font-size:var(--ez-text-input__message_box--font-size);color:var(--ez-text-input__message_box--info--color)}.hasError{color:var(--ez-text-input__message_box--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--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)}.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--right{right:var(--ez-text-input__icon--width);width:calc(100% - var(--ez-text-input__icon--width))}.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{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)}.input--slim:-moz-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--color)}.input--slim::-moz-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--color)}.input--slim:-ms-input-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--color)}.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--color)}.input--slim:disabled::-webkit-input-placeholder{color:var(--ez-text-input__input--disabled--color)}.input--slim:disabled:-moz-placeholder{color:var(--ez-text-input__input--disabled--color)}.input--slim:disabled::-moz-placeholder{color:var(--ez-text-input__input--disabled--color)}.input--slim:disabled:-ms-input-placeholder{color:var(--ez-text-input__input--disabled--color)}.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)}";
+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.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) {
     index.registerInstance(this, hostRef);
     this.ezChange = index.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;
     this.restrict = undefined;
     this.mode = "regular";
     this.noBorder = false;
     this.password = false;
+    this.autoFocus = false;
+    this.hasRightSlotContent = false;
+    this.forceLabelFloat = false;
   }
-  observeErrorMessage() {
-    if (this._inputElem) {
-      this.isInvalid().then((hasError) => {
-        var _a, _b;
-        if (hasError) {
-          this._inputElem.classList.add("hasError");
-          (_a = this._messageBoxElem) === null || _a === void 0 ? void 0 : _a.classList.add("hasError");
-        }
-        else {
-          this._inputElem.classList.remove("hasError");
-          (_b = this._messageBoxElem) === null || _b === void 0 ? void 0 : _b.classList.remove("hasError");
-        }
-      });
+  observeHasInvalid(newValue, oldValue) {
+    if (newValue === oldValue) {
+      return;
     }
+    this.validateErrors();
   }
   observeMask() {
     if (this.mask) {
@@ -53,6 +51,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);
@@ -60,14 +59,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()) {
@@ -121,7 +144,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
@@ -130,7 +153,12 @@ const EzTextInput = class {
     const value = this._inputElem.value;
     if (value && this._maskFormatter) {
       try {
-        this._inputElem.value = this._maskFormatter.format(value);
+        if (this.cleanValueMask) {
+          this.applyMask(value);
+        }
+        else {
+          this._inputElem.value = this._maskFormatter.format(value);
+        }
       }
       catch (e) {
         this.errorMessage = e.message;
@@ -148,8 +176,34 @@ const EzTextInput = class {
   }
   controlChangeValue() {
     if (this._inputElem && (this.value || '') !== this._inputElem.value) {
-      this.value = this._inputElem.value;
+      if (this.cleanValueMask) {
+        this.value = this._maskFormatter.removeMask(this._inputElem.value);
+      }
+      else {
+        this.value = this._inputElem.value;
+      }
+    }
+  }
+  applyMask(value) {
+    if (!value || value === "")
+      return value;
+    if (this._maskFormatter) {
+      try {
+        const formattedValue = this._maskFormatter.applyMask(this._maskFormatter.removeMask(value));
+        if (this._inputElem) {
+          this._inputElem.value = formattedValue;
+          return this._inputElem.value;
+        }
+        else {
+          this.value = formattedValue;
+          return this.value;
+        }
+      }
+      catch (e) {
+        this.errorMessage = e.message;
+      }
     }
+    return value;
   }
   handleChange() {
     if (!this._inputElem) {
@@ -165,8 +219,10 @@ const EzTextInput = class {
     this.controlChangeValue();
   }
   handleSlotChange(ev) {
+    var _a;
     const slot = ev.target;
     const content = slot.assignedElements()[0];
+    this.hasRightSlotContent = false;
     if (content) {
       content.style.position = "absolute";
       content.style.display = "flex";
@@ -192,10 +248,14 @@ const EzTextInput = class {
         if (this._labelElem) {
           this._labelElem.classList.add("input__label--right");
         }
+        if (this._tooltipIconElem) {
+          this._tooltipIconElem.classList.add("rightIconSlot");
+        }
+        this.hasRightSlotContent = ((_a = content.children) === null || _a === void 0 ? void 0 : _a.length) > 0;
       }
       slot.name && core.ElementIDUtils.addIDInfo(content, slot.name);
     }
-    this.observeErrorMessage();
+    this.validateErrors();
   }
   doFocus() {
     if (this.label && this._labelElem && !this._labelElem.classList.contains("input__label--floated")) {
@@ -203,21 +263,43 @@ const EzTextInput = class {
     }
     this.adjustColorContentSlot("var(--ez-text-input__input--focus--icon-color)");
   }
+  getValue() {
+    return this.mask && this.cleanValueMask ? this.applyMask(this.value) : this.value;
+  }
+  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;
+  }
+  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
   //---------------------------------------------
-  componentDidLoad() {
-    this.observeErrorMessage();
-    this.observeMask();
-    this.adjustFloatingLabel();
-    this.adjustBorderInput();
-  }
   componentWillLoad() {
     this.observeMask();
     if (this.value) {
       if (this._maskFormatter) {
         try {
-          this.value = this._maskFormatter.format(this.value);
+          if (this.cleanValueMask) {
+            this.applyMask(this.value);
+          }
+          else {
+            this.value = this._maskFormatter.format(this.value);
+          }
         }
         catch (e) {
           this.errorMessage = e.message;
@@ -229,18 +311,41 @@ const EzTextInput = class {
       }
     }
   }
+  componentDidLoad() {
+    var _a;
+    this.validateErrors();
+    this.observeMask();
+    this.adjustFloatingLabel();
+    this.adjustBorderInput();
+    this.checkIsOverflowing();
+    if (this.autoFocus) {
+      requestAnimationFrame(() => {
+        this.setFocus({ selectText: true });
+      });
+    }
+    (_a = this._inputElem) === null || _a === void 0 ? void 0 : _a.addEventListener('focus', () => {
+      var _a;
+      this._inputElem.setSelectionRange(0, (_a = this._inputElem) === null || _a === void 0 ? void 0 : _a.value.length);
+    });
+  }
+  componentDidRender() {
+    this.adjustFloatingLabel();
+  }
   render() {
     core.ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
     return (index.h(index.Host, { style: this._hostElement.classList.contains("grid_editor") ? { "height": "100%" } : null }, index.h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label && this.mode != "slim" ?
-      index.h("label", { ref: (el) => this._labelElem = el, class: this.enabled ? "input__label" : "input__label input__label--disabled", onClick: () => this._inputElem.focus(), title: this.label }, this.label)
-      : null, index.h("input", { "data-element-id": core.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.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), index.h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.canShowError && this.mode != "slim" &&
-      index.h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage, "data-element-id": core.ElementIDUtils.getInternalIDInfo("message_box") }, this.errorMessage)));
+      index.h("label", { ref: (el) => this._labelElem = el, class: this.buildLabelClass(), onClick: () => this._inputElem.focus(), title: this.label }, this.label)
+      : null, index.h("input", { "data-element-id": core.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(); } }), index.h("ez-tooltip", { anchoringElement: this._hostElement, message: this.getValue(), active: this._isOverflowing, useAnchorSize: true }), this.canShowError && this.mode != "slim" && this.errorMessage &&
+      index.h("ez-tooltip", { type: "error", message: this.errorMessage }, index.h("ez-icon", { class: `tooltip-icon ${this.errorMessage ? "hasError" : ""} ${this.hasRightSlotContent ? "rightIconSlot" : ""}`, "data-element-id": core.ElementIDUtils.getInternalIDInfo("tooltip-icon"), ref: (el) => this._tooltipIconElem = el, iconName: "alert-circle" })), index.h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }, " ")));
   }
   get _hostElement() { return index.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/cjs/ez-time-input.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9e5554cb.js');
 const core = require('@sankhyalabs/core');
-const CSSVarsUtils = require('./CSSVarsUtils-10c9d5b4.js');
+const CSSVarsUtils = require('./CSSVarsUtils-f20973d1.js');
 
 const ezTimeInputCss = ":host{display:flex;flex-wrap:wrap;position:relative;width:100%}.time__input{height:100%}";
 
@@ -21,6 +21,8 @@ const EzTimeInput = class {
     this.showSeconds = false;
     this.mode = "regular";
     this.canShowError = true;
+    this.autoFocus = false;
+    this.alternativePlaceholder = undefined;
   }
   observeErrorMessage() {
     var _a;
@@ -141,6 +143,11 @@ const EzTimeInput = class {
   //---------------------------------------------
   componentDidLoad() {
     CSSVarsUtils.CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
+    if (this.autoFocus) {
+      requestAnimationFrame(() => {
+        this.setFocus({ selectText: true });
+      });
+    }
   }
   componentWillLoad() {
     this.observeShowSeconds();
@@ -153,7 +160,7 @@ const EzTimeInput = class {
   }
   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 }, index.h("ez-icon", { slot: "leftIcon", iconName: "timer-outline" }))));
+    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" }))));
   }
   static get assetsDirs() { return ["../assets"]; }
   get _elem() { return index.getElement(this); }

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

@@ -0,0 +1,135 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9e5554cb.js');
+const floatingUi_dom_esm = require('./floating-ui.dom.esm-017acce4.js');
+const core = require('@sankhyalabs/core');
+
+const ezTooltipCss = ":host{--triangle-size:8px}.tooltip{position:absolute;z-index:var(--elevation--24);padding:var(--space--extra-small, 3px) var(--space--small, 6px);border-radius:var(--border--radius-small);box-sizing:border-box;font-family:var(--font-pattern\t, 'Roboto', sans-serif);font-size:var(--text--small, 12px);font-weight:var(--text-weight--medium, 400);text-align:center;width:max-content;display:none}.arrow{position:absolute;width:var(--triangle-size);height:var(--triangle-size);transform:rotate(45deg)}.default-tooltip{background:var(--title--primary, #2b3a54);color:var(--color--inverted)}.default-tooltip .arrow{background:var(--title--primary, #2b3a54)}.error-tooltip{background:var(--color-alert--error-800, #BD0025);color:var(--color--error-200, #F7E0E5)}.error-tooltip .arrow{background:var(--color-alert--error-800, #BD0025)}.success-tooltip{background:var(--color--success, #00cb94);color:var(--color--success-200, #EBFFFA)}.success-tooltip .arrow{background:var(--color--success, #00cb94)}.warning-tooltip{background:var(--color--warning, #f2d410);color:var(--color--warning-200, #FDF8D8)}.warning-tooltip .arrow{background:var(--color--warning, #f2d410)}";
+
+const EzTooltip = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this._opened = false;
+    this.message = undefined;
+    this.anchoringElement = undefined;
+    this.placement = 'bottom';
+    this.gapOptions = { horizontalGap: 0, verticalGap: 0 };
+    this.type = 'default';
+    this.debouncingTime = 500;
+    this.active = true;
+    this.maxWidth = 200;
+    this.useAnchorSize = false;
+  }
+  watchAnchoringElement(newValue, oldValue) {
+    if (newValue) {
+      this.setEvents(newValue);
+      this.removeEvents(oldValue);
+    }
+  }
+  watchMessage(newValue) {
+    if (!newValue) {
+      this.closeTooltip();
+      return;
+    }
+    this.updatePosition();
+  }
+  openTooltip() {
+    if (this.message && this.active) {
+      if (this._debouncingTimeout) {
+        clearTimeout(this._debouncingTimeout);
+      }
+      this._debouncingTimeout = setTimeout(() => {
+        this._opened = true;
+        this._tooltipElement.style.display = 'block';
+        this.updatePosition();
+      }, this.debouncingTime);
+    }
+  }
+  closeTooltip() {
+    clearTimeout(this._debouncingTimeout);
+    this._tooltipElement.style.display = 'none';
+    this._opened = false;
+  }
+  async updatePosition(element = this.anchoringElement) {
+    if (!element || !this._opened) {
+      return;
+    }
+    if (this.useAnchorSize) {
+      const anchorSize = element.getBoundingClientRect().width;
+      this._tooltipElement.style.width = `${anchorSize}px`;
+    }
+    await floatingUi_dom_esm.computePosition(element, this._tooltipElement, {
+      placement: this.placement,
+      middleware: [
+        floatingUi_dom_esm.offset(5),
+        floatingUi_dom_esm.flip(),
+        floatingUi_dom_esm.shift(),
+        floatingUi_dom_esm.arrow({ element: this._arrowElement })
+      ],
+    }).then(({ x, y, placement, middlewareData }) => {
+      const newTop = placement.includes("bottom") ? y + this.gapOptions.verticalGap : y - this.gapOptions.verticalGap;
+      const newLeft = placement.includes("start") ? x + this.gapOptions.horizontalGap : x - this.gapOptions.horizontalGap;
+      Object.assign(this._tooltipElement.style, {
+        top: `${newTop}px`,
+        left: `${newLeft}px`,
+      });
+      if (middlewareData.arrow) {
+        const { x } = middlewareData.arrow;
+        const onBottom = placement.includes("bottom");
+        Object.assign(this._arrowElement.style, {
+          left: `${x}px`,
+          top: onBottom ? `${-this._arrowElement.offsetHeight / 2}px` : '',
+          bottom: !onBottom ? `${-this._arrowElement.offsetHeight / 2}px` : '',
+        });
+      }
+    });
+  }
+  handleSlotChange(ev) {
+    const slot = ev.target;
+    const content = slot.assignedElements()[0];
+    this.anchoringElement = content;
+  }
+  setEvents(element = this.anchoringElement) {
+    if (!element) {
+      return;
+    }
+    element.addEventListener('mouseenter', () => {
+      this.openTooltip();
+    });
+    element.addEventListener('mouseleave', () => {
+      this.closeTooltip();
+    });
+  }
+  removeEvents(element = this.anchoringElement) {
+    if (!element) {
+      return;
+    }
+    element.removeEventListener('mouseenter', () => {
+      this.openTooltip();
+    });
+    element.removeEventListener('mouseleave', () => {
+      this.closeTooltip();
+    });
+  }
+  componentDidLoad() {
+    this.setEvents();
+  }
+  render() {
+    return (index.h(index.Fragment, null, index.h("div", Object.assign({ ref: ref => this._tooltipElement = ref }, { inert: true }, { class: {
+        "tooltip": true,
+        [`${this.type}-tooltip`]: true,
+      }, style: {
+        maxWidth: (this.maxWidth && !this.useAnchorSize) ? `${this.maxWidth}px` : undefined,
+      }, role: "tooltip", "data-element-id": core.ElementIDUtils.getInternalIDInfo("tooltip") }), this.message, index.h("div", { ref: ref => this._arrowElement = ref, class: "arrow" })), index.h("slot", { onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
+  }
+  get _element() { return index.getElement(this); }
+  static get watchers() { return {
+    "anchoringElement": ["watchAnchoringElement"],
+    "message": ["watchMessage"]
+  }; }
+};
+EzTooltip.style = ezTooltipCss;
+
+exports.ez_tooltip = EzTooltip;

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

@@ -19,7 +19,7 @@ const defaultTooltipResolver = (item, _enabled, _level) => {
 };
 
 const TreeItem = (props) => {
-  const { node, selectedId, itemClick, iconClick, iconResolver, tooltipResolver, itemsList } = props;
+  const { node, selectedId, itemClick, iconClick, iconResolver, tooltipResolver, itemsList, itemDoubleClick } = props;
   if (!node.visible) {
     return;
   }
@@ -33,7 +33,7 @@ const TreeItem = (props) => {
     itemsList.push(treeItem);
   }
   return (index.h("ul", { class: level === 1 ? "first-level" : undefined },
-    index.h("li", Object.assign({ title: tooltipResolver(treeItem, !disabled, level), class: `tree-item ${treeItem.id !== selectedId ? "tree-item-error" : ""}`, onClick: () => available && itemClick(treeItem) }, {
+    index.h("li", Object.assign({ title: tooltipResolver(treeItem, !disabled, level), class: `tree-item ${treeItem.id !== selectedId ? "tree-item-error" : ""}`, onClick: () => available && itemClick(treeItem), onDblClick: () => available && itemDoubleClick(treeItem) }, {
       disabled,
       selected: treeItem.id === selectedId,
       [core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: core.ElementIDUtils.getInternalIDInfo(`ezTreeItem_${treeItem.id}`)
@@ -44,7 +44,7 @@ const TreeItem = (props) => {
         index.h("label", { class: `item-label ${treeItem.bold ? "item-label--bold" : ""}` }, treeItem.label)),
       getBadgeElement(treeItem.id, treeItem.badge, treeItem.id === selectedId)),
     expanded
-      && node.getChildren().map(child => index.h(TreeItem, { selectedId: selectedId, node: child, itemClick: itemClick, iconClick: iconClick, level: level + 1, iconResolver: iconResolver, tooltipResolver: tooltipResolver, itemsList: itemsList }))));
+      && node.getChildren().map(child => index.h(TreeItem, { selectedId: selectedId, node: child, itemClick: itemClick, iconClick: iconClick, level: level + 1, iconResolver: iconResolver, tooltipResolver: tooltipResolver, itemsList: itemsList, itemDoubleClick: itemDoubleClick }))));
 };
 function getBadgeElement(itemId, badge, isSelectedItem) {
   if (badge == undefined) {
@@ -310,6 +310,7 @@ const EzTree = class {
     index.registerInstance(this, hostRef);
     this.ezChange = index.createEvent(this, "ezChange", 7);
     this.ezOpenItem = index.createEvent(this, "ezOpenItem", 7);
+    this.ezDbClickItem = index.createEvent(this, "ezDbClickItem", 7);
     this._onItemClick = (item) => {
       this.value = item;
     };
@@ -579,7 +580,7 @@ const EzTree = class {
       :
         this._tree.getChildren().map(node => {
           var _a;
-          return index.h(TreeItem, { selectedId: (_a = this.value) === null || _a === void 0 ? void 0 : _a.id, node: node, itemClick: this._onItemClick, iconClick: this._onIconClick, iconResolver: this.iconResolver, tooltipResolver: this.tooltipResolver || defaultTooltipResolver, itemsList: this._visibleItems });
+          return index.h(TreeItem, { selectedId: (_a = this.value) === null || _a === void 0 ? void 0 : _a.id, node: node, itemClick: this._onItemClick, iconClick: this._onIconClick, iconResolver: this.iconResolver, tooltipResolver: this.tooltipResolver || defaultTooltipResolver, itemsList: this._visibleItems, itemDoubleClick: (item) => this.ezDbClickItem.emit(item) });
         })));
   }
   get _element() { return index.getElement(this); }

package/dist/cjs/ezListHelper-0d3970b4.js

@@ -0,0 +1,90 @@
+'use strict';
+
+/**
+ * O dragElement é posicionado ANTERIORMENTE ao targetIndex.
+ * Ex: no array: ["A", "B", "C", "D", "E"]
+ * se o dragItem for "B" e o targetIndex 3 (referente à "D"),
+ * "B" será posicionado logo antes de "D".
+ * O resultado será: ["A", "C", "B", "D", "E"]
+ *
+ * @param configs
+ */
+function processListOnDrop(configs) {
+  let newList;
+  if (hasToMoveMultipleItems(configs)) {
+    newList = processMoveMultipleItems(configs);
+  }
+  else {
+    newList = processMoveSingleItem(configs);
+    configs.clearSelection();
+  }
+  return newList;
+}
+function hasToMoveMultipleItems(configs) {
+  const { enableMultipleSelection, listItems, dragItem, moveToFinal, targetIndex } = configs;
+  if (!enableMultipleSelection)
+    return false;
+  const selectedItemsIndexes = getSelectedIndices(listItems);
+  if (selectedItemsIndexes.length <= 1)
+    return false;
+  if (!selectedItemsIndexes.includes(dragItem.index))
+    return false;
+  if (!isContinuousSequence(selectedItemsIndexes))
+    return false;
+  if (moveToFinal)
+    return true;
+  return !selectedItemsIndexes.includes(targetIndex);
+}
+function processMoveSingleItem(configs) {
+  const { listItems, dragItem, targetIndex, moveToFinal } = configs;
+  const newList = [...listItems];
+  newList.splice(dragItem.index, 1);
+  if (moveToFinal) {
+    newList.push(dragItem.item);
+  }
+  else {
+    const adjustedIndex = (targetIndex > dragItem.index) ? Math.max(0, targetIndex - 1) : targetIndex;
+    newList.splice(adjustedIndex, 0, dragItem.item);
+  }
+  return newList;
+}
+function processMoveMultipleItems(configs) {
+  const { listItems, moveToFinal, targetIndex } = configs;
+  const selectedItems = listItems.filter(item => item.selected);
+  const selectedItemsIndexes = getSelectedIndices(listItems);
+  const minorIndex = Math.min(...selectedItemsIndexes);
+  const majorIndex = Math.max(...selectedItemsIndexes);
+  const qtdToMove = selectedItems.length;
+  const newList = [...listItems];
+  newList.splice(minorIndex, qtdToMove);
+  if (moveToFinal) {
+    newList.push(...selectedItems);
+  }
+  else {
+    let adjustedIndex = (targetIndex > majorIndex) ? Math.max(0, targetIndex - qtdToMove) : targetIndex;
+    newList.splice(adjustedIndex, 0, ...selectedItems);
+  }
+  return newList;
+}
+function isContinuousSequence(numbers) {
+  if (numbers.length === 0)
+    return false;
+  const sortedNumbers = [...numbers].sort((a, b) => a - b);
+  for (let i = 1; i < sortedNumbers.length; i++) {
+    if (sortedNumbers[i] !== sortedNumbers[i - 1] + 1) {
+      return false;
+    }
+  }
+  return true;
+}
+function getSelectedIndices(listItems) {
+  return listItems.reduce((indices, item, index) => {
+    if (item.selected) {
+      indices.push(index);
+    }
+    return indices;
+  }, []);
+}
+
+exports.isContinuousSequence = isContinuousSequence;
+exports.processListOnDrop = processListOnDrop;