@sankhyalabs/ezui 6.0.1 → 6.1.0-dev.2

package/dist/collection/components/ez-split-button/ez-split-button.js

@@ -13,6 +13,7 @@ export class EzSplitButton {
     this.rightTitle = 'Mais opções';
     this.mode = 'default';
     this.size = 'medium';
+    this.itemBuilder = undefined;
   }
   /**
    * Remove o foco de ambos os botões.
@@ -33,6 +34,18 @@ export class EzSplitButton {
   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();
@@ -49,16 +62,12 @@ export class EzSplitButton {
   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);
@@ -140,7 +149,7 @@ export class EzSplitButton {
     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);
@@ -162,6 +171,24 @@ export class EzSplitButton {
   }
   static get properties() {
     return {
+      "show": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "enabled": {
         "type": "boolean",
         "mutable": false,
@@ -324,14 +351,32 @@ export class EzSplitButton {
         "attribute": "size",
         "reflect": true,
         "defaultValue": "'medium'"
+      },
+      "itemBuilder": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(item: IDropdownItem, level: number) => HTMLElement | string",
+          "resolved": "(item: IDropdownItem, level: number) => string | HTMLElement",
+          "references": {
+            "IDropdownItem": {
+              "location": "import",
+              "path": "../ez-dropdown/structure/DropdownItem"
+            },
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Fun\u00E7\u00E3o builder que possibilita alterar como o item da lista vai ser apresentado.\nObserva\u00E7\u00E3o: No react ele se transforma em VNode e n\u00E3o como HTMLElement."
+        }
       }
     };
   }
-  static get states() {
-    return {
-      "show": {}
-    };
-  }
   static get events() {
     return [{
         "method": "buttonClick",
@@ -439,6 +484,38 @@ export class EzSplitButton {
           "text": "Aplica o foco no bot\u00E3o do dropdown.",
           "tags": []
         }
+      },
+      "toggleDropdown": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Abre ou Fecha o dropdown do Split Button.",
+          "tags": []
+        }
+      },
+      "isOpenedDropdown": {
+        "complexType": {
+          "signature": "() => Promise<boolean>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<boolean>"
+        },
+        "docs": {
+          "text": "Informa se a lista de a\u00E7\u00F5es est\u00E1 aberta.",
+          "tags": []
+        }
       }
     };
   }

package/dist/collection/components/ez-text-area/ez-text-area.js

@@ -14,6 +14,8 @@ export class EzTextArea {
     this.enableResize = true;
     this.autoRows = false;
     this.autoFocus = false;
+    this.alternativePlaceholder = undefined;
+    this.forceLabelFloat = false;
   }
   observeErrorMessage() {
     var _a, _b, _c, _d;
@@ -64,6 +66,9 @@ export class EzTextArea {
       (_b = this._resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
     }
   }
+  observeAlternativePlaceholder(newValue) {
+    this.forceLabelFloat = !!newValue;
+  }
   //---------------------------------------------
   // Public methods
   //---------------------------------------------
@@ -112,6 +117,8 @@ export class EzTextArea {
     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");
@@ -195,6 +202,19 @@ export class EzTextArea {
     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
   //---------------------------------------------
@@ -211,11 +231,11 @@ export class EzTextArea {
   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)));
   }
   static get is() { return "ez-text-area"; }
@@ -408,9 +428,31 @@ export class EzTextArea {
         "attribute": "auto-focus",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "alternativePlaceholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Texto alternativo a ser apresentado como t\u00EDtulo do campo."
+        },
+        "attribute": "alternative-placeholder",
+        "reflect": true
       }
     };
   }
+  static get states() {
+    return {
+      "forceLabelFloat": {}
+    };
+  }
   static get events() {
     return [{
         "method": "ezChange",
@@ -523,6 +565,9 @@ export class EzTextArea {
       }, {
         "propName": "autoRows",
         "methodName": "observeAutoRows"
+      }, {
+        "propName": "alternativePlaceholder",
+        "methodName": "observeAlternativePlaceholder"
       }];
   }
 }

package/dist/collection/components/ez-text-input/ez-text-input.css

@@ -5,7 +5,7 @@
   /*@doc Define a largura do componente.*/
   --ez-text-input--width: 100%;
   /*@doc Define a largura do slot que contém o ícone.*/
-  --ez-text-input__icon--width: 48px;
+  --ez-text-input__icon--width: 30px;
   /*@doc Define a altura do componente em modo "slim".*/
   --ez-text-input--height--slim: 32px;
   /*@doc Define a largura maxima do componente.*/
@@ -16,6 +16,16 @@
   /* general */
   /*@doc Define o raio da borda do input do componente.*/
   --ez-text-input--border-radius: var(--border--radius-medium, 12px);
+
+  /*@doc Define o raio da borda no top esquerdo do componente.*/
+  --ez-text-input--border-top-left-radius: var(--ez-text-input--border-radius);
+  /*@doc Define o raio da borda inferior esquerda do componente.*/
+  --ez-text-input--border-bottom-left-radius: var(--ez-text-input--border-radius);
+  /*@doc Define o raio da borda no top direito do componente.*/
+  --ez-text-input--border-top-right-radius: var(--ez-text-input--border-radius);
+  /*@doc Define o raio da borda inferior direita do componente.*/
+  --ez-text-input--border-bottom-right-radius: var(--ez-text-input--border-radius);
+
   /*@doc Define o tamanho da fonte do input e label do componente.*/
   --ez-text-input--font-size: var(--text--medium, 14px);
   /*@doc Define a família da fonte do input, label e caixa de mensagem do componente.*/
@@ -108,10 +118,16 @@ input {
   /*private*/
   width: 100%;
   box-sizing: border-box;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 
   /*public*/
   height: var(--ez-text-input--height);
-  border-radius: var(--ez-text-input--border-radius);
+  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);
@@ -137,6 +153,14 @@ input:disabled {
 input:focus {
   /*private*/
   outline: none;
+  border: var(--border--medium, 2px solid);
+  /*public*/
+  border-color: var(--ez-text-input__input--focus--border-color);
+}
+
+input.focused{
+  /*private*/
+  border: var(--border--medium, 2px solid);
   /*public*/
   border-color: var(--ez-text-input__input--focus--border-color);
 }
@@ -157,6 +181,7 @@ input.icon--right.hasError {
 
 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)));
 }

package/dist/collection/components/ez-text-input/ez-text-input.js

@@ -1,12 +1,14 @@
 import { h, Host } from "@stencil/core";
 import { ElementIDUtils, MaskFormatter } from "@sankhyalabs/core";
-import { applyEllipsisToInput } from "../../utils/ResponsiveInputUtils";
 export class EzTextInput {
   constructor() {
+    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;
@@ -16,21 +18,13 @@ export class EzTextInput {
     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) {
@@ -48,6 +42,7 @@ export class EzTextInput {
         this._inputElem.value = this.value || "";
         this.handleChange();
         this.adjustFloatingLabel();
+        this.checkIsOverflowing();
         if (!this.isSlaveMode()) {
           this.errorMessage = "";
           this.ezChange.emit(this.value);
@@ -55,14 +50,38 @@ export class EzTextInput {
       }
     }
   }
+  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()) {
@@ -104,7 +123,12 @@ export class EzTextInput {
     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.
@@ -116,7 +140,7 @@ export class EzTextInput {
    * Retorna se o conteúdo é inválido.
    */
   async isInvalid() {
-    return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
+    return this.handleValidateErrorMessage();
   }
   //---------------------------------------------
   // Event handlers
@@ -227,7 +251,7 @@ export class EzTextInput {
       }
       slot.name && ElementIDUtils.addIDInfo(content, slot.name);
     }
-    this.observeErrorMessage();
+    this.validateErrors();
   }
   doFocus() {
     if (this.label && this._labelElem && !this._labelElem.classList.contains("input__label--floated")) {
@@ -235,35 +259,28 @@ export class EzTextInput {
     }
     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
@@ -291,11 +308,12 @@ export class EzTextInput {
     }
   }
   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 });
@@ -305,37 +323,25 @@ export class EzTextInput {
       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); } }, " ")));
   }
   static get is() { return "ez-text-input"; }
   static get encapsulation() { return "shadow"; }
@@ -368,6 +374,23 @@ export class EzTextInput {
         "attribute": "label",
         "reflect": true
       },
+      "alternativePlaceholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Texto alternativo a ser apresentado como t\u00EDtulo do campo."
+        },
+        "attribute": "alternative-placeholder",
+        "reflect": true
+      },
       "value": {
         "type": "string",
         "mutable": true,
@@ -420,6 +443,24 @@ export class EzTextInput {
         "attribute": "error-message",
         "reflect": true
       },
+      "hasInvalid": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o campo est\u00E1 em estado inv\u00E1lido (bordas vermelhas)."
+        },
+        "attribute": "has-invalid",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "mask": {
         "type": "string",
         "mutable": false,
@@ -566,7 +607,8 @@ export class EzTextInput {
   }
   static get states() {
     return {
-      "hasRightSlotContent": {}
+      "hasRightSlotContent": {},
+      "forceLabelFloat": {}
     };
   }
   static get events() {
@@ -648,14 +690,23 @@ export class EzTextInput {
   static get elementRef() { return "_hostElement"; }
   static get watchers() {
     return [{
+        "propName": "hasInvalid",
+        "methodName": "observeHasInvalid"
+      }, {
         "propName": "errorMessage",
-        "methodName": "observeErrorMessage"
+        "methodName": "observeHasInvalid"
+      }, {
+        "propName": "canShowError",
+        "methodName": "observeHasInvalid"
       }, {
         "propName": "mask",
         "methodName": "observeMask"
       }, {
         "propName": "value",
         "methodName": "observeValue"
+      }, {
+        "propName": "alternativePlaceholder",
+        "methodName": "observeAlternativePlaceholder"
       }];
   }
 }