@sankhyalabs/ezui 1.1.159 → 1.1.160

package/dist/custom-elements/index.js

@@ -676,40 +676,66 @@ let EzComboBox$1 = class extends HTMLElement$1 {
      */
     this.mode = "regular";
   }
-  observeValue() {
-    if (this._inputElement) {
-      this._inputElement.value = this.getText();
+  observeErrorMessage() {
+    var _a;
+    if (this._textInput) {
+      this._textInput.errorMessage = this.errorMessage;
+      if (!((_a = this.errorMessage) === null || _a === void 0 ? void 0 : _a.trim())) {
+        this.setInputValue();
+      }
+    }
+  }
+  observeValue(newValue, oldValue) {
+    var _a, _b, _c, _d;
+    if (this._textInput && newValue != oldValue) {
+      const newValueSelected = this.getSelectedOption(newValue);
+      const oldValueSelected = this.getSelectedOption(oldValue);
+      const currentValue = this.getSelectedOption(this.value);
+      if (((_a = currentValue === null || currentValue === void 0 ? void 0 : currentValue.value) === null || _a === void 0 ? void 0 : _a.toString()) != ((_b = newValueSelected === null || newValueSelected === void 0 ? void 0 : newValueSelected.value) === null || _b === void 0 ? void 0 : _b.toString())) {
+        this.value = newValueSelected;
+      }
+      if (((_c = newValueSelected === null || newValueSelected === void 0 ? void 0 : newValueSelected.value) === null || _c === void 0 ? void 0 : _c.toString()) !== ((_d = oldValueSelected === null || oldValueSelected === void 0 ? void 0 : oldValueSelected.value) === null || _d === void 0 ? void 0 : _d.toString())) {
+        this.setInputValue();
+        const valueEmitted = newValueSelected === null ? undefined : newValueSelected;
+        this.ezChange.emit(valueEmitted);
+      }
+      this.hideOptions();
+      this._criteria = undefined;
+      this._preSelection = undefined;
+      this.updateVisibleOptions();
     }
-    this.hideOptions();
-    this._criteria = undefined;
-    this._preSelection = undefined;
-    this.updateVisibleOptions();
   }
   /**
    * Realiza o foco no componente de seleção
    */
   async setFocus() {
-    this._inputElement.setFocus();
+    this._textInput.setFocus();
   }
   /**
    * Remove o foco no componente de seleção
    */
   async setBlur() {
-    this._inputElement.setBlur();
+    this._textInput.setBlur();
+  }
+  /**
+   * Retorna informando se o campo está inválido (true | false)
+   */
+  async isInvalid() {
+    return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
   }
   getText() {
     let text = "";
-    const selected = this.getSelectedOption();
-    if (selected) {
-      text = this.showSelectedValue ? `${selected.value} - ${selected.label}` : selected.label;
+    const currentValue = this.getSelectedOption(this.value);
+    if (currentValue) {
+      text = this.showSelectedValue ? `${currentValue.value} - ${currentValue.label}` : currentValue.label;
     }
     return text;
   }
-  getSelectedOption() {
-    if (typeof this.value === "string" || this.value instanceof String) {
-      return this._visibleOptions.find(o => o.value === this.value);
+  getSelectedOption(value) {
+    if (typeof value === "string" || value instanceof String) {
+      return this._visibleOptions.find(o => o.value === value);
     }
-    return this.value;
+    return value;
   }
   updateVisibleOptions() {
     let opts = this._source || [];
@@ -764,7 +790,7 @@ let EzComboBox$1 = class extends HTMLElement$1 {
     //FIXME: Provavelmente isso fará com que o popup abra em uma 
     //posição errada no futuro. Preferi fazer simples no começo,
     //porque não quis onerar o text input com essa funcionalidade...
-    const top = (this.errorMessage || !this.canShowError || this.mode == "slim") ? "0px" : "-19px";
+    const top = (this.errorMessage || !this.canShowError || this.mode === "slim") ? "0px" : "-19px";
     this._floatingID = FloatingManager.float(this._listWrapper, this._listContainer, { autoClose: true, top });
     window.requestAnimationFrame(() => {
       this._listWrapper.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
@@ -847,15 +873,13 @@ let EzComboBox$1 = class extends HTMLElement$1 {
   }
   selectOption(newOption) {
     var _a, _b;
-    const currentOpt = this.getSelectedOption();
-    if (((_a = currentOpt === null || currentOpt === void 0 ? void 0 : currentOpt.value) === null || _a === void 0 ? void 0 : _a.toString()) !== ((_b = newOption === null || newOption === void 0 ? void 0 : newOption.value) === null || _b === void 0 ? void 0 : _b.toString())) {
+    const currentValue = this.getSelectedOption(this.value);
+    if (((_a = currentValue === null || currentValue === void 0 ? void 0 : currentValue.value) === null || _a === void 0 ? void 0 : _a.toString()) !== ((_b = newOption === null || newOption === void 0 ? void 0 : newOption.value) === null || _b === void 0 ? void 0 : _b.toString())) {
       const adjustedOpt = !(newOption === null || newOption === void 0 ? void 0 : newOption.value) ? undefined : newOption;
       this.value = adjustedOpt;
-      this.errorMessage = "";
-      this.ezChange.emit(this.value);
     }
     else {
-      this.observeValue();
+      this.setInputValue();
     }
     if (this.searchMode) {
       this._visibleOptions = [];
@@ -872,11 +896,20 @@ let EzComboBox$1 = class extends HTMLElement$1 {
     }
   }
   cancelPreselection() {
-    if (!this._inputElement.value && this.value) {
+    if (!this._textInput.value && this.value) {
       this.selectOption(undefined);
     }
     else {
-      this.observeValue();
+      this.setInputValue();
+    }
+  }
+  setInputValue(clearError = true) {
+    const textValue = this.getText();
+    if ((this._textInput.value || '') !== textValue) {
+      this._textInput.value = textValue;
+      if (clearError) {
+        this.errorMessage = "";
+      }
     }
   }
   clearSearch() {
@@ -934,7 +967,8 @@ let EzComboBox$1 = class extends HTMLElement$1 {
     }
   }
   componentDidLoad() {
-    CSSVarsUtils.applyVarsTextInput(this.el, this._inputElement);
+    CSSVarsUtils.applyVarsTextInput(this.el, this._textInput);
+    this.setInputValue(false);
   }
   //---------------------------------------------
   // Event handlers
@@ -954,7 +988,7 @@ let EzComboBox$1 = class extends HTMLElement$1 {
     const argument = (_a = event.target.value) === null || _a === void 0 ? void 0 : _a.trim();
     const argumentNumber = Number(argument || undefined);
     if (!this._criteria) {
-      this._inputElement.value = event.data || argument;
+      this._textInput.value = event.data || argument;
     }
     this._criteria = argument;
     if (argument && (!isNaN(argumentNumber) || argument.length >= this._limitCharsToSearch)) {
@@ -1012,7 +1046,7 @@ let EzComboBox$1 = class extends HTMLElement$1 {
   }
   render() {
     var _a;
-    return (h(Host, null, h("ez-text-input", { class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._inputElement = elem, enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, value: this.getText(), canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode, slaveMode: true }, h("button", { class: "btn", slot: this.searchMode ? "leftIcon" : "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, h("ez-icon", { iconName: this.searchMode ? "search" : "chevron-down" })), this.searchMode && ((_a = this._inputElement) === null || _a === void 0 ? void 0 : _a.value) && (this._criteria || this.value)
+    return (h(Host, null, h("ez-text-input", { class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode }, h("button", { class: "btn", slot: this.searchMode ? "leftIcon" : "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, h("ez-icon", { iconName: this.searchMode ? "search" : "chevron-down" })), this.searchMode && ((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) && (this._criteria || this.value)
       ? h("button", { class: "btn", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.clearSearch() }, h("ez-icon", { iconName: "close" }))
       : undefined), h("section", { class: "list-container", ref: elem => this._listContainer = elem }, h("div", { class: "list-wrapper", ref: elem => this._listWrapper = elem }, h("div", { class: "list-options", ref: elem => this._optionsList = elem }, this._visibleOptions.length === 0
       && h("div", { class: "message" }, !this._showLoading && h("span", { class: "message__no-result" }, this._textEmptyList), this._showLoading && h("div", { class: "message__loading" })), this.showOptionValue
@@ -1021,6 +1055,7 @@ let EzComboBox$1 = class extends HTMLElement$1 {
   }
   get el() { return this; }
   static get watchers() { return {
+    "errorMessage": ["observeErrorMessage"],
     "value": ["observeValue"]
   }; }
   static get style() { return ezComboBoxCss; }
@@ -1036,6 +1071,7 @@ let EzDateInput$1 = class extends HTMLElement$1 {
     this.ezChange = createEvent(this, "ezChange", 7);
     this.ezStartChange = createEvent(this, "ezStartChange", 7);
     this.ezCancelWaitingChange = createEvent(this, "ezCancelWaitingChange", 7);
+    this._focused = false;
     /**
      * Deixa o campo disponível ou não para uso.
      */
@@ -1046,18 +1082,33 @@ let EzDateInput$1 = class extends HTMLElement$1 {
     this.mode = "regular";
   }
   observeLabel() {
-    this._textInput.label = this.label;
+    if (this._textInput) {
+      this._textInput.label = this.label;
+    }
   }
   observeErrorMessage() {
+    var _a;
     if (this._textInput) {
       this._textInput.errorMessage = this.errorMessage;
+      if (!((_a = this.errorMessage) === null || _a === void 0 ? void 0 : _a.trim())) {
+        this.setInputValue();
+      }
     }
   }
   observeValue(newValue, oldValue) {
-    if (newValue != oldValue) {
-      if (this._textInput) {
-        this.errorMessage = "";
-        this._textInput.value = this.getTextValue(this.value);
+    if (this._textInput && newValue != oldValue) {
+      const newValueValidated = this.validateValue(newValue);
+      const oldValueValidated = this.validateValue(oldValue);
+      if ((newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime()) !== (oldValueValidated === null || oldValueValidated === void 0 ? void 0 : oldValueValidated.getTime())) {
+        const textValue = this.getTextValue(newValueValidated) || '';
+        const parsedDate = DateUtils.strToDate(textValue);
+        if ((parsedDate || !this._focused) && (this._textInput.value || '') !== textValue) {
+          this._textInput.value = textValue;
+          this._focused = false;
+          this.errorMessage = "";
+        }
+        const valueEmitted = newValueValidated === null ? undefined : newValueValidated;
+        this.ezChange.emit(valueEmitted);
       }
     }
   }
@@ -1073,59 +1124,89 @@ let EzDateInput$1 = class extends HTMLElement$1 {
   async setBlur() {
     this._textInput.setBlur();
   }
+  /**
+   * Retorna informando se o campo está inválido (true | false)
+   */
+  async isInvalid() {
+    return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
+  }
   changeValue(newValue) {
-    var _a;
-    newValue = newValue instanceof Date ? DateUtils.clearTime(newValue) : undefined;
-    this.value = this.value instanceof Date ? DateUtils.clearTime(this.value) : undefined;
-    this._textInput.errorMessage = "";
-    if ((newValue === null || newValue === void 0 ? void 0 : newValue.toString()) !== ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toString())) {
-      this.value = newValue;
-      this.ezChange.emit(this.value);
+    const currentValue = this.validateValue(this.value);
+    const newValueValidated = this.validateValue(newValue);
+    if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) !== (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
+      this.value = newValueValidated;
     }
   }
   showCalendar() {
-    this.parseDate();
+    this.handleBlur();
     this._calendar.value = this.value;
     //FIXME: Provavelmente isso fará com que o popup abra em uma 
     //posição errada no futuro. Preferi fazer simples no começo,
     //porque não quis onerar o text input com essa funcionalidade...
-    const top = this._textInput.errorMessage || this.mode == "slim" ? 0 : -19;
+    const top = this.errorMessage || this.mode === "slim" ? 0 : -19;
     this._calendar.fitVertical(top, this._elem.clientHeight);
   }
   hideCalendar() {
     this.changeValue(this._calendar.value);
     this._calendar.hide();
   }
-  parseDate() {
+  handleBlur() {
     const strValue = this._textInput.value;
-    const parsedDate = DateUtils.strToDate(strValue);
-    if (parsedDate || !strValue) {
-      if (this.value === parsedDate) {
-        this.changeValue(this.value);
+    const newValue = DateUtils.strToDate(strValue);
+    if (newValue || !strValue) {
+      this.errorMessage = "";
+      const currentValue = this.validateValue(this.value);
+      const newValueValidated = this.validateValue(newValue);
+      if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) === (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
+        if (newValueValidated) {
+          this._textInput.value = this.getTextValue(newValueValidated) || '';
+          this._focused = false;
+        }
+        this.ezCancelWaitingChange.emit();
       }
       else {
-        this.changeValue(parsedDate);
+        this.changeValue(newValueValidated);
       }
     }
     else {
+      this.changeValue(undefined);
       this.ezCancelWaitingChange.emit();
-      this._textInput.errorMessage = "O valor digitado não é uma data válida";
+      this.errorMessage = "O valor digitado não é uma data válida";
     }
   }
   getTextValue(d) {
     return d ? new Intl.DateTimeFormat("pt-BR").format(d) : undefined;
   }
-  startChange() {
-    this.ezStartChange.emit({ waitmessage: "", blocking: false });
+  handleInput() {
+    const strValue = this._textInput.value;
+    const newValue = DateUtils.strToDate(strValue);
+    const currentValue = this.validateValue(this.value);
+    const newValueValidated = this.validateValue(newValue);
+    if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) !== (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
+      this._focused = true;
+      this.ezStartChange.emit({ waitmessage: "", blocking: false });
+    }
+  }
+  validateValue(value) {
+    return value instanceof Date && !isNaN(value.valueOf())
+      ? DateUtils.clearTime(value)
+      : undefined;
+  }
+  setInputValue() {
+    const textValue = this.getTextValue(this.value) || '';
+    if ((this._textInput.value || '') !== textValue) {
+      this._textInput.value = textValue;
+    }
   }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
+    this.setInputValue();
   }
   render() {
-    return (h(Host, null, h("ez-text-input", { ref: elem => this._textInput = elem, onBlur: () => this.parseDate(), onKeyDown: event => {
+    return (h(Host, null, h("ez-text-input", { ref: elem => this._textInput = elem, "data-slave-mode": "true", onKeyDown: event => {
         if (event.key === "H" || event.key === "h")
           this.changeValue(new Date());
-      }, label: this.label, value: this.getTextValue(this.value), onInput: () => this.startChange(), restrict: "0123456789/", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, slaveMode: true }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem })));
+      }, label: this.label, onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), restrict: "0123456789/", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem })));
   }
   get _elem() { return this; }
   static get watchers() { return {
@@ -1146,6 +1227,7 @@ let EzDateTimeInput$1 = class extends HTMLElement$1 {
     this.ezChange = createEvent(this, "ezChange", 7);
     this.ezStartChange = createEvent(this, "ezStartChange", 7);
     this.ezCancelWaitingChange = createEvent(this, "ezCancelWaitingChange", 7);
+    this._focused = false;
     /**
      * Deixa o campo disponível ou não para uso.
      */
@@ -1160,14 +1242,34 @@ let EzDateTimeInput$1 = class extends HTMLElement$1 {
     this.mode = "regular";
   }
   observeLabel() {
-    this._textInput.label = this.label;
+    if (this._textInput) {
+      this._textInput.label = this.label;
+    }
   }
   observeErrorMessage() {
-    this._textInput.errorMessage = this.errorMessage;
-  }
-  observeValue() {
+    var _a;
     if (this._textInput) {
-      this._textInput.value = this.getTextValue(this.value);
+      this._textInput.errorMessage = this.errorMessage;
+      if (!((_a = this.errorMessage) === null || _a === void 0 ? void 0 : _a.trim())) {
+        this.setInputValue();
+      }
+    }
+  }
+  observeValue(newValue, oldValue) {
+    if (this._textInput && newValue != oldValue) {
+      const newValueValidated = this.validateValue(newValue);
+      const oldValueValidated = this.validateValue(oldValue);
+      if ((newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime()) !== (oldValueValidated === null || oldValueValidated === void 0 ? void 0 : oldValueValidated.getTime())) {
+        const textValue = this.getTextValue(newValueValidated) || '';
+        const parsedDate = this.getParsedDateTime(textValue);
+        if ((parsedDate || !this._focused) && (this._textInput.value || '') !== textValue) {
+          this._textInput.value = textValue;
+          this._focused = false;
+          this.errorMessage = "";
+        }
+        const valueEmitted = newValueValidated === null ? undefined : newValueValidated;
+        this.ezChange.emit(valueEmitted);
+      }
     }
   }
   /**
@@ -1182,30 +1284,36 @@ let EzDateTimeInput$1 = class extends HTMLElement$1 {
   async setBlur() {
     this._textInput.setBlur();
   }
-  onChangeKeyDown(ev) {
+  /**
+   * Retorna informando se o campo está inválido (true | false)
+   */
+  async isInvalid() {
+    return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
+  }
+  handleKeyDown(event) {
     const input = this._textInput.shadowRoot.querySelector('input');
-    if (ev.key === "H" || ev.key === "h") {
+    if (event.key === "H" || event.key === "h") {
       this.changeValue(new Date());
     }
-    else if (ev.shiftKey && ev.key === "Tab") {
+    else if (event.shiftKey && event.key === "Tab") {
       if (input.selectionStart > 0) {
         let selectIni = input.value.lastIndexOf(" ", input.selectionStart);
         if (selectIni !== -1) {
           input.setSelectionRange(0, selectIni);
-          ev.preventDefault();
+          event.preventDefault();
         }
       }
     }
-    else if (ev.key === "Tab") {
+    else if (event.key === "Tab") {
       if (input.value.length !== input.selectionEnd) {
         let selectIni = input.value.indexOf(" ", input.selectionEnd);
         selectIni = selectIni === -1 ? input.selectionEnd : selectIni + 1;
         input.setSelectionRange(selectIni, input.value.length);
-        ev.preventDefault();
+        event.preventDefault();
       }
     }
   }
-  onFocused() {
+  handleFocus() {
     const input = this._textInput.shadowRoot.querySelector('input');
     if (input.selectionStart !== input.selectionEnd) {
       let selectIni = input.value.indexOf(" ", input.selectionStart);
@@ -1213,7 +1321,7 @@ let EzDateTimeInput$1 = class extends HTMLElement$1 {
       input.setSelectionRange(0, selectIni);
     }
   }
-  onClicked() {
+  handleClick() {
     const input = this._textInput.shadowRoot.querySelector('input');
     let selectIni = input.value.lastIndexOf(" ", input.selectionEnd);
     selectIni = selectIni === -1 ? 0 : selectIni + 1;
@@ -1222,37 +1330,55 @@ let EzDateTimeInput$1 = class extends HTMLElement$1 {
     input.setSelectionRange(selectIni, selectFin);
   }
   changeValue(newValue) {
-    var _a;
-    this._textInput.errorMessage = "";
-    if ((newValue === null || newValue === void 0 ? void 0 : newValue.toString()) !== ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toString())) {
-      this.value = newValue;
-      this.ezChange.emit(this.value);
+    const currentValue = this.validateValue(this.value);
+    const newValueValidated = this.validateValue(newValue);
+    if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) !== (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
+      this.value = newValueValidated;
     }
   }
   showCalendar() {
-    const top = this._textInput.errorMessage || this.mode == "slim" ? 0 : -19;
+    const top = this.errorMessage || this.mode === "slim" ? 0 : -19;
     this._calendar.fitVertical(top, this._elem.clientHeight);
     this._calendar.style.visibility = 'inherit';
   }
-  parseDate() {
-    const strValue = this._textInput.value;
-    const partsDateTime = (strValue && strValue.length > 0) ? strValue.split(" ") : [];
+  getParsedDateTime(strValue) {
+    var _a, _b;
+    if (strValue === void 0) {
+      strValue = (((_b = (_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.trim()) || "");
+    }
+    if (!strValue) {
+      return;
+    }
+    const partsDateTime = strValue.split(" ");
     const onlyDate = partsDateTime.length > 0 ? partsDateTime[0] : strValue;
     const onlyTime = partsDateTime[1] ? partsDateTime[1] : "";
     const parsedTime = TimeFormatter.prepareValue(onlyTime, this.showSeconds);
     const strDateTime = onlyDate + (parsedTime && " " + parsedTime);
-    const parsedDate = DateUtils.strToDate(strDateTime);
-    if (parsedDate || !strValue) {
-      if (this.value === parsedDate) {
-        this.changeValue(this.value);
+    return DateUtils.strToDate(strDateTime);
+  }
+  handleBlur() {
+    var _a, _b;
+    const strValue = ((_b = (_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.trim()) || "";
+    const newValue = this.getParsedDateTime();
+    if (newValue || !strValue) {
+      this.errorMessage = "";
+      const currentValue = this.validateValue(this.value);
+      const newValueValidated = this.validateValue(newValue);
+      if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) === (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
+        if (newValueValidated) {
+          this._textInput.value = this.getTextValue(newValueValidated) || '';
+          this._focused = false;
+        }
+        this.ezCancelWaitingChange.emit();
       }
       else {
-        this.changeValue(parsedDate);
+        this.changeValue(newValueValidated);
       }
     }
     else {
+      this.changeValue(undefined);
       this.ezCancelWaitingChange.emit();
-      this._textInput.errorMessage = "O valor digitado não é uma data válida";
+      this.errorMessage = "O valor digitado não é uma data válida";
     }
   }
   getTextValue(d) {
@@ -1266,14 +1392,32 @@ let EzDateTimeInput$1 = class extends HTMLElement$1 {
     };
     return d ? (new Intl.DateTimeFormat('pt-BR', this.showSeconds ? optionsSecond : options).format(d)) : undefined;
   }
-  startChange() {
-    this.ezStartChange.emit({ waitmessage: "", blocking: false });
+  validateValue(value) {
+    return value instanceof Date && !isNaN(value.valueOf())
+      ? value
+      : undefined;
+  }
+  handleInput() {
+    const newValue = this.getParsedDateTime();
+    const currentValue = this.validateValue(this.value);
+    const newValueValidated = this.validateValue(newValue);
+    if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) !== (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
+      this._focused = true;
+      this.ezStartChange.emit({ waitmessage: "", blocking: false });
+    }
+  }
+  setInputValue() {
+    const textValue = this.getTextValue(this.value) || '';
+    if ((this._textInput.value || '') !== textValue) {
+      this._textInput.value = textValue;
+    }
   }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
+    this.setInputValue();
   }
   render() {
-    return (h(Host, null, h("ez-text-input", { ref: elem => this._textInput = elem, onBlur: () => this.parseDate(), onKeyDown: event => { this.onChangeKeyDown(event); }, label: this.label, value: this.getTextValue(this.value), restrict: "0123456789/: ", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, onInput: () => this.startChange(), onFocus: () => this.onFocused(), onClick: () => this.onClicked(), slaveMode: true }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { onEzChange: (event) => { this.changeValue(this._calendar.value); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem, time: true, showSeconds: this.showSeconds })));
+    return (h(Host, null, h("ez-text-input", { ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, restrict: "0123456789/: ", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, onKeyDown: event => { this.handleKeyDown(event); }, onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), onFocus: () => this.handleFocus(), onClick: () => this.handleClick() }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { onEzChange: (event) => { this.changeValue(this._calendar.value); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem, time: true, showSeconds: this.showSeconds })));
   }
   get _elem() { return this; }
   static get watchers() { return {
@@ -1399,9 +1543,10 @@ let EzFilterInput$1 = class extends HTMLElement$1 {
       this._textInput.errorMessage = this.errorMessage;
     }
   }
-  observeValue() {
-    if (this._textInput) {
-      this._textInput.value = this.value;
+  observeValue(newValue, oldValue) {
+    if (this._textInput && newValue != oldValue) {
+      this._textInput.value = newValue;
+      this.ezChange.emit(newValue);
     }
   }
   /**
@@ -1416,12 +1561,17 @@ let EzFilterInput$1 = class extends HTMLElement$1 {
   async setBlur() {
     this._textInput.setBlur();
   }
+  /**
+   * Retorna informando se o campo está inválido (true | false)
+   */
+  async isInvalid() {
+    return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
+  }
   changeValue(evt) {
     const newValue = evt.detail;
     this.errorMessage = "";
     if (newValue !== this.value) {
       this.value = newValue;
-      this.ezChange.emit(this.value);
     }
   }
   componentDidLoad() {
@@ -2068,7 +2218,7 @@ class DataBinder {
         case Action.NEXT_SELECTED:
         case Action.PREVIOUS_SELECTED:
           (_a = this._fields) === null || _a === void 0 ? void 0 : _a.forEach(field => {
-            this.updateValue(field.fieldName, field.field);
+            this.updateValue(field.fieldName, field.field, action.type === Action.EDITION_CANCELED);
           });
           break;
       }
@@ -2086,15 +2236,24 @@ class DataBinder {
   onDisconnectedCallback() {
     this._dataUnit.unsubscribe(this.onDataUnitEvent);
   }
-  updateValue(fieldName, field) {
+  updateValue(fieldName, field, actionCanceled = false) {
+    var _a;
     field["value"] = this._dataUnit.getFieldValue(fieldName);
+    /**
+     * FIXME: Campo já salvo com undefined, ao inserir valor inválido e cancelar,
+     * o campo não é limpo e atualizado automaticamente, pois o value não mudou,
+     * assim, não dispara o Watch do value, que é o responsável por limpar o errorMessage.
+     */
+    if (actionCanceled && ((_a = field["errorMessage"]) === null || _a === void 0 ? void 0 : _a.trim())) {
+      field["errorMessage"] = "";
+    }
   }
   updateBind(fieldName, field) {
     const oldBind = this._fields.get(fieldName);
     if (oldBind) {
       oldBind.destroy();
     }
-    field["value"] = this._dataUnit.getFieldValue(fieldName);
+    this.updateValue(fieldName, field);
     this._fields.set(fieldName, Bind.create(fieldName, field, (fieldName, waitingChange) => this.changeStarted(fieldName, waitingChange), (fieldName) => this.cancelWaitingChange(fieldName), (fieldName, newValue) => this.setFieldValue(fieldName, newValue)));
     this.bindSearchOptionsLoader(fieldName, field);
     this.applyEzUploadContext(fieldName, field);
@@ -2226,25 +2385,58 @@ let EzForm$1 = class extends HTMLElement$1 {
     return Promise.resolve();
   }
   validate() {
-    return new Promise((accept, reject) => {
+    return new Promise(async (accept, reject) => {
       const metadata = selectFormMetadata(this._store.getState());
       const requiredFields = this._staticFields
         .filter(f => f.dataset.required)
         .map(f => f.dataset.fieldName)
         .concat(metadata.getRequiredFields());
+      let isReject = false;
       const records = this.dataUnit.getModifiedRecords();
       for (let i = 0; i < records.length; i++) {
         if (!this.validateRequired(requiredFields, records[i])) {
-          reject();
+          isReject = true;
           break;
         }
       }
-      accept();
+      if (!isReject) {
+        const validateError = await this.validateError();
+        if (!validateError) {
+          isReject = true;
+        }
+      }
+      if (isReject) {
+        reject();
+      }
+      else {
+        accept();
+      }
     });
   }
   observeConfig() {
     this.processMetadata();
   }
+  async validateError() {
+    var _a;
+    const invalidFields = [];
+    const dataFields = (_a = this._element) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[data-field-name]");
+    if (dataFields && dataFields.length > 0) {
+      for (let i = 0; i < dataFields.length; i++) {
+        const fieldElem = dataFields[i];
+        if (fieldElem && fieldElem['isInvalid']) {
+          const hasError = await fieldElem['isInvalid']();
+          if (hasError && fieldElem['dataset']) {
+            invalidFields.push(fieldElem['dataset'].fieldName);
+          }
+        }
+      }
+    }
+    const isValid = invalidFields.length === 0;
+    if (!isValid) {
+      ApplicationUtils.info("Há pelo menos um campo com conteúdo inválido.");
+    }
+    return isValid;
+  }
   validateRequired(requiredFields, record) {
     const invalidFields = [];
     requiredFields.forEach(field => {
@@ -2257,13 +2449,16 @@ let EzForm$1 = class extends HTMLElement$1 {
        * na aba, isso será tratado no card: https://sankhya.atlassian.net/browse/SKA-44182
        */
       if (fieldElem) {
+        /**
+         * Devido o StencilJS não possuir Getter e Setter, para casos que o Watch não for chamado,
+         * é necessário limpar a propriedade antes de setar o valor novamente, para que o Watch seja disparado novamente,
+         * solução necessária para controlar componentes com herança (Exemplo: EzSearch -> EzComboBox -> EzTextInput).
+         */
+        fieldElem["errorMessage"] = "";
         if (value === null || value === undefined || value === "") {
           invalidFields.push(field);
           fieldElem["errorMessage"] = "Essa informação é obrigatória";
         }
-        else {
-          fieldElem["errorMessage"] = "";
-        }
       }
     });
     const isValid = invalidFields.length === 0;
@@ -112638,7 +112833,7 @@ class AgGridController {
       throw new Error("Erro interno: Grid ainda não inicializado.");
     }
     const colDef = this._gridOptions.columnApi.getAllColumns();
-    return colDef.map(c => {
+    return colDef.filter(c => c.getColId() !== "checkBoxColumn").map(c => {
       const def = c.getColDef();
       const colDef = { name: def.field, label: def.headerName };
       this.conditionalSet(colDef, "sortable", def.sortable);
@@ -113135,6 +113330,14 @@ let EzGrid$1 = class extends HTMLElement$1 {
   async hasPreviousRecord() {
     return Promise.resolve(this._gridController.hasPreviousRecord());
   }
+  /**
+  * Método para abrir a configuração da grid.
+  */
+  async openGridConfig() {
+    this._gridConfig.columns = this._gridController.getColumnsState().filter(c => c.name);
+    this._gridConfig.selectedTab = "Colunas";
+    this._popUpGridConfig = true;
+  }
   componentWillLoad() {
     if (this.dataUnit) {
       this._dataUnitBridge = new DataUnitBridge(this._gridController, this.dataUnit);
@@ -113252,11 +113455,6 @@ let EzGrid$1 = class extends HTMLElement$1 {
   closeGridConfig() {
     this._popUpGridConfig = false;
   }
-  openGridConfig() {
-    this._gridConfig.columns = this._gridController.getColumnsState().filter(c => c.name);
-    this._gridConfig.selectedTab = "Colunas";
-    this._popUpGridConfig = true;
-  }
   render() {
     return (h(Host, null, h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" }, h("div", { class: "grid-header__container" }, h("slot", { name: "leftButtons" })), h("div", { class: "grid-header__container" }, this.getPaginationControl())), h("div", { class: "grid__container ez-grid", ref: elem => this._container = elem }), h("div", { class: "grid__footer" }), h("ez-modal", { modalSize: "small", closeEsc: false, closeOutsideClick: false, opened: this._popUpGridConfig, onEzCloseModal: () => this.closeGridConfig() }, h("grid-config", { ref: ref => this._gridConfig = ref, config: this.config, selectedTab: "Colunas", onConfigFinish: evt => { this.observeConfig(evt.detail); this.configChange.emit(evt.detail); }, onConfigCancel: _evt => this.closeGridConfig() }))));
   }
@@ -113914,6 +114112,7 @@ let EzNumberInput$1 = class extends HTMLElement$1 {
     this.ezChange = createEvent(this, "ezChange", 7);
     this.ezStartChange = createEvent(this, "ezStartChange", 7);
     this.ezCancelWaitingChange = createEvent(this, "ezCancelWaitingChange", 7);
+    this._focused = false;
     /**
      * Deixa o campo disponível ou não para uso.
      */
@@ -113935,66 +114134,109 @@ let EzNumberInput$1 = class extends HTMLElement$1 {
   async setBlur() {
     this._textInput.setBlur();
   }
+  /**
+   * Retorna informando se o campo está inválido (true | false)
+   */
+  async isInvalid() {
+    return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
+  }
   observeLabel() {
     if (this._textInput) {
       this._textInput.label = this.label;
     }
   }
   observeErrorMessage() {
+    var _a;
     if (this._textInput) {
       this._textInput.errorMessage = this.errorMessage;
+      if (!((_a = this.errorMessage) === null || _a === void 0 ? void 0 : _a.trim())) {
+        this.setInputValue();
+      }
     }
   }
-  observeValue() {
-    if (this._textInput) {
-      this._textInput.value = this.getTextValue(this.value) || '';
+  observeValue(newValue, oldValue) {
+    if (this._textInput && newValue != oldValue) {
+      const newValueValidated = this.validateValue(newValue);
+      const oldValueValidated = this.validateValue(oldValue);
+      if (newValueValidated != oldValueValidated) {
+        const textValue = this.getTextValue(newValueValidated) || '';
+        if ((this._textInput.value || '') !== textValue) {
+          const parsedNumber = this.getParsedNumber(textValue);
+          if (parsedNumber !== undefined || !this._focused) {
+            this._textInput.value = textValue;
+            this._focused = false;
+            this.errorMessage = "";
+          }
+        }
+        const valueEmitted = newValueValidated === null ? undefined : newValueValidated;
+        this.ezChange.emit(valueEmitted);
+      }
+    }
+  }
+  validateValue(value) {
+    return isNaN(value) || value === undefined ? null : value;
+  }
+  getTextValue(value) {
+    if (value != undefined) {
+      return this.precision > 0 ? NumberUtils.format(value.toString(), Number(this.precision), Number(this.prettyPrecision)) : value.toString();
     }
+    return undefined;
   }
   changeValue(newValue) {
     this.errorMessage = "";
-    if (newValue !== this.value) {
-      this.value = newValue;
-      this.ezChange.emit(this.value);
-      return true;
+    if (this.value != newValue) {
+      this.value = newValue === undefined ? null : newValue;
     }
     else {
-      this.observeValue();
+      this.ezCancelWaitingChange.emit();
     }
-    return false;
   }
-  parseNumber() {
-    const parsedNumber = this._textInput.value ? NumberUtils.stringToNumber(this._textInput.value) : undefined;
+  setError(msg) {
+    this.value = null;
+    this.errorMessage = msg;
+    this.ezCancelWaitingChange.emit();
+  }
+  handleBlur() {
+    const parsedNumber = this.getParsedNumber();
     if (parsedNumber !== undefined && isNaN(parsedNumber)) {
-      this.ezCancelWaitingChange.emit();
-      this.errorMessage = "O valor digitado não é um número válido";
+      this.setError("O valor digitado não é um número válido");
     }
     else {
       try {
-        if (!this.changeValue(parsedNumber)) {
-          this.ezCancelWaitingChange.emit();
-        }
+        this.changeValue(parsedNumber);
       }
       catch (e) {
-        this.ezCancelWaitingChange.emit();
-        this.errorMessage = e.message;
+        this.setError(e.message);
         return;
       }
     }
   }
-  getTextValue(value) {
-    if (value) {
-      return this.precision > 0 ? NumberUtils.format(value.toString(), Number(this.precision), Number(this.prettyPrecision)) : value.toString();
+  handleInput() {
+    const parsedNumber = this.getParsedNumber();
+    if (parsedNumber !== this.value) {
+      this._focused = true;
+      this.ezStartChange.emit({ waitmessage: "", blocking: false });
     }
-    return undefined;
   }
-  startChange() {
-    this.ezStartChange.emit({ waitmessage: "", blocking: false });
+  getParsedNumber(value) {
+    var _a;
+    if (value === void 0) {
+      value = (_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value;
+    }
+    return (value === null || value === void 0 ? void 0 : value.trim()) ? NumberUtils.stringToNumber(value) : undefined;
+  }
+  setInputValue() {
+    const textValue = this.getTextValue(this.value) || '';
+    if ((this._textInput.value || '') !== textValue) {
+      this._textInput.value = textValue;
+    }
   }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
+    this.setInputValue();
   }
   render() {
-    return (h("ez-text-input", { ref: elem => this._textInput = elem, onBlur: () => this.parseNumber(), label: this.label, onInput: () => this.startChange(), value: this.getTextValue(this.value), restrict: this.precision > 0 ? "0123456789-,." : "0123456789-", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, slaveMode: true }));
+    return (h("ez-text-input", { ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), restrict: this.precision > 0 ? "0123456789-,." : "0123456789-", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode }));
   }
   get _elem() { return this; }
   static get watchers() { return {
@@ -114216,6 +114458,11 @@ let EzSearch$1 = class extends HTMLElement$1 {
       */
     this.mode = "regular";
   }
+  observeErrorMessage() {
+    if (this._comboElement) {
+      this._comboElement.errorMessage = this.errorMessage;
+    }
+  }
   observeValue() {
     if (this._comboElement) {
       this._comboElement.value = this.value;
@@ -114233,20 +114480,30 @@ let EzSearch$1 = class extends HTMLElement$1 {
   async setBlur() {
     this._comboElement.setBlur();
   }
-  onComboChange(evt) {
-    evt.stopPropagation();
-    this.value = evt.detail;
-    this.ezChange.emit(evt.detail);
+  /**
+   * Retorna informando se o campo está inválido (true | false)
+   */
+  async isInvalid() {
+    return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
+  }
+  onComboChange(event) {
+    event.stopPropagation();
+    this.value = event.detail;
+    this.ezChange.emit(event.detail);
+    if (this.errorMessage !== this._comboElement.errorMessage) {
+      this.errorMessage = this._comboElement.errorMessage;
+    }
   }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._comboElement);
   }
   render() {
-    return (h("ez-combo-box", { ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, optionLoader: this.optionLoader, searchMode: true, onEzChange: evt => this.onComboChange(evt), showSelectedValue: this.showSelectedValue, showOptionValue: this.showOptionValue, suppressEmptyOption: this.suppressEmptyOption, mode: this.mode }));
+    return (h("ez-combo-box", { ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, optionLoader: this.optionLoader, searchMode: true, onEzChange: event => this.onComboChange(event), showSelectedValue: this.showSelectedValue, showOptionValue: this.showOptionValue, suppressEmptyOption: this.suppressEmptyOption, mode: this.mode }));
   }
   ;
   get _elem() { return this; }
   static get watchers() { return {
+    "errorMessage": ["observeErrorMessage"],
     "value": ["observeValue"]
   }; }
   static get style() { return ezSearchCss; }
@@ -114445,7 +114702,7 @@ let EzTabselector$1 = class extends HTMLElement$1 {
   static get style() { return ezTabselectorCss; }
 };
 
-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, #000);--text-area__input--background-color:var(--background--medium, #e0e0e0);--text-area__input--border:var(--border--medium, 2px solid);--text-area__input--border-color:var(--text-area__input--background-color);--text-area__input--focus--border-color:var(--color--primary, #008561);--text-area__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--text-area__input--disabled--color:var(--text--disable, #AFB6C0);--text-area__input--error--border-color:#CC2936;--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--error, #FF0000);--text-area__label--floating--top:6px;--text-area__label--padding-top:12px;--text-area__label--padding-left:14px;--text-area__label--padding-right:12px;display:flex;flex-wrap:wrap;position:relative;width:var(--text-area--width)}textarea{box-sizing:border-box;border:none;resize:none;margin-top:calc(var(--space--medium, 12px) + 4px);width:100%;font-weight:var(--text-weight--large, 600);font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);color:var(--text-area--color);padding:0;background:none}textarea:focus{outline:none}textarea:disabled{background-color:transparent;color:var(--text-area__input--disabled--color)}.textarea{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--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)}.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{color:var(--text-area__input--disabled--color)}.textarea--slim:disabled:-moz-placeholder{color:var(--text-area__input--disabled--color)}.textarea--slim:disabled::-moz-placeholder{color:var(--text-area__input--disabled--color)}.textarea--slim:disabled:-ms-input-placeholder{color:var(--text-area__input--disabled--color)}.textarea--slim:disabled::placeholder{color:var(--text-area__input--disabled--color)}";
+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, #000);--text-area__input--background-color:var(--background--medium, #e0e0e0);--text-area__input--border:var(--border--medium, 2px solid);--text-area__input--border-color:var(--text-area__input--background-color);--text-area__input--focus--border-color:var(--color--primary, #008561);--text-area__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--text-area__input--disabled--color:var(--text--disable, #AFB6C0);--text-area__input--error--border-color:#CC2936;--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--error, #FF0000);--text-area__label--floating--top:6px;--text-area__label--padding-top:12px;--text-area__label--padding-left:14px;--text-area__label--padding-right:12px;display:flex;flex-wrap:wrap;position:relative;width:var(--text-area--width)}textarea{box-sizing:border-box;border:none;resize:none;margin-top:calc(var(--space--medium, 12px) + 4px);width:100%;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);padding:0;background:none}textarea:focus{outline:none}textarea:disabled{background-color:transparent;color:var(--text-area__input--disabled--color)}.textarea{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--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)}.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{color:var(--text-area__input--disabled--color)}.textarea--slim:disabled:-moz-placeholder{color:var(--text-area__input--disabled--color)}.textarea--slim:disabled::-moz-placeholder{color:var(--text-area__input--disabled--color)}.textarea--slim:disabled:-ms-input-placeholder{color:var(--text-area__input--disabled--color)}.textarea--slim:disabled::placeholder{color:var(--text-area__input--disabled--color)}";
 
 let EzTextArea$1 = class extends HTMLElement$1 {
   constructor() {
@@ -114525,6 +114782,12 @@ let EzTextArea$1 = class extends HTMLElement$1 {
   async setBlur() {
     this._inputElem.blur();
   }
+  /**
+   * Retorna informando se o campo está inválido (true | false)
+   */
+  async isInvalid() {
+    return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
+  }
   //---------------------------------------------
   // Private methods
   //---------------------------------------------
@@ -114583,7 +114846,7 @@ let EzTextArea$1 = class extends HTMLElement$1 {
   render() {
     return (h(Host, null, h("div", { class: "textarea", 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)
-      : null, h("textarea", { onFocus: () => this.handleFocus(), ref: (el) => this._inputElem = el, value: this.value, disabled: !this.enabled, class: this.mode == "slim" ? "textarea--slim" : "", placeholder: this.mode == "slim" && this.label ? this.label : "", onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, onKeyDown: event => event.stopPropagation(), rows: this.rows })), this.canShowError && this.mode != "slim" &&
+      : null, h("textarea", { onFocus: () => this.handleFocus(), ref: (el) => this._inputElem = el, value: this.value, disabled: !this.enabled, class: this.mode === "slim" ? "textarea--slim" : "", placeholder: this.mode === "slim" && this.label ? this.label : "", onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, onKeyDown: event => event.stopPropagation(), 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 this; }
@@ -114596,7 +114859,7 @@ let EzTextArea$1 = class extends HTMLElement$1 {
   static get style() { return ezTextAreaCss; }
 };
 
-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__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;display:flex;flex-wrap:wrap;position:relative;width:var(--ez-text-input--width)}input{width:100%;box-sizing:border-box;padding:var(--space--medium, 6px);font-weight:var(--text-weight--large, 600);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)}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::-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)}";
+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__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;display:flex;flex-wrap:wrap;position:relative;width:var(--ez-text-input--width)}input{width:100%;box-sizing:border-box;padding:var(--space--medium, 6px);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)}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::-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)}";
 
 let EzTextInput$1 = class extends HTMLElement$1 {
   constructor() {
@@ -114616,23 +114879,20 @@ let EzTextInput$1 = class extends HTMLElement$1 {
      * Define o modo do tamanho do campo; opções: slim e regular.
      */
     this.mode = "regular";
-    /**
-     * Define se o controle de change do value será controlado por um componente pai.
-     */
-    this.slaveMode = false;
   }
   observeErrorMessage() {
-    var _a, _b;
     if (this._inputElem) {
-      const hasError = typeof this.errorMessage === "string" && this.errorMessage !== "";
-      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");
-      }
+      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");
+        }
+      });
     }
   }
   observeMask() {
@@ -114651,14 +114911,16 @@ let EzTextInput$1 = class extends HTMLElement$1 {
         this._inputElem.value = this.value || "";
         this.handleChange();
         this.adjustFloatingLabel();
-        if (this.slaveMode) {
-          return;
+        if (!this.isSlaveMode()) {
+          this.errorMessage = "";
+          this.ezChange.emit(this.value);
         }
-        this.errorMessage = "";
-        this.ezChange.emit(this.value);
       }
     }
   }
+  //---------------------------------------------
+  // Private methods
+  //---------------------------------------------
   adjustFloatingLabel() {
     if (this.label && this._labelElem) {
       if (this._inputElem && !this._inputElem.classList.contains("input--with--label")) {
@@ -114681,6 +114943,10 @@ let EzTextInput$1 = class extends HTMLElement$1 {
   isFocused() {
     return this._hostElement.shadowRoot.activeElement !== null;
   }
+  isSlaveMode() {
+    var _a, _b;
+    return ((_b = (_a = this._hostElement) === null || _a === void 0 ? void 0 : _a.dataset) === null || _b === void 0 ? void 0 : _b.slaveMode) === "true";
+  }
   adjustColorContentSlot(color = "") {
     if (this._contentLeftSlot) {
       this._contentLeftSlot.style.color = color;
@@ -114701,6 +114967,12 @@ let EzTextInput$1 = class extends HTMLElement$1 {
   async setBlur() {
     this._inputElem.blur();
   }
+  /**
+   * Retorna informando se o campo está inválido (true | false)
+   */
+  async isInvalid() {
+    return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
+  }
   //---------------------------------------------
   // Event handlers
   //---------------------------------------------
@@ -114725,7 +114997,7 @@ let EzTextInput$1 = class extends HTMLElement$1 {
     return true;
   }
   controlChangeValue() {
-    if ((this.value || '') !== this._inputElem.value) {
+    if (this._inputElem && (this.value || '') !== this._inputElem.value) {
       this.value = this._inputElem.value;
     }
   }
@@ -114808,7 +115080,7 @@ let EzTextInput$1 = class extends HTMLElement$1 {
   render() {
     return (h(Host, 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", onClick: () => this._inputElem.focus(), title: this.label }, this.label)
-      : null, h("input", { onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "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(); } }), h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.canShowError && this.mode != "slim" &&
+      : null, h("input", { onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "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(); } }), h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.canShowError && this.mode != "slim" &&
       h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
   }
   get _hostElement() { return this; }
@@ -114835,7 +115107,7 @@ let EzTimeInput$1 = class extends HTMLElement$1 {
      */
     this.enabled = true;
     /**
-    * Define se o componente irá ou não considerar os segundos
+    * Define se o componente irá ou não considerar os segundos.
     */
     this.showSeconds = false;
     /**
@@ -114843,6 +115115,18 @@ let EzTimeInput$1 = class extends HTMLElement$1 {
      */
     this.mode = "regular";
   }
+  observeErrorMessage() {
+    var _a;
+    if (this._textInput) {
+      this._textInput.errorMessage = this.errorMessage;
+      if (!((_a = this.errorMessage) === null || _a === void 0 ? void 0 : _a.trim())) {
+        this.prepareValue(this._viewValue);
+        if ((this._textInput.value || '') !== this._viewValue) {
+          this._textInput.value = this._viewValue;
+        }
+      }
+    }
+  }
   observeShowSeconds() {
     if (this.showSeconds) {
       this.prepareMask("##:##:##");
@@ -114851,9 +115135,23 @@ let EzTimeInput$1 = class extends HTMLElement$1 {
       this.prepareMask("##:##");
     }
   }
-  observeValue() {
-    if (isNaN(this.value)) {
-      this.value = undefined;
+  observeValue(newValue, oldValue) {
+    if (this._textInput && newValue != oldValue) {
+      let newValueValidated = this.validateValue(newValue);
+      const oldValueValidated = this.validateValue(oldValue);
+      if (newValueValidated != oldValueValidated) {
+        this._viewValue = newValueValidated == undefined ? "" : newValueValidated.toString();
+        this.prepareValue(this._viewValue);
+        if (this._viewValue && !TimeFormatter.validateTime(this._viewValue, this.showSeconds)) {
+          this.setError("Favor inserir um horário válido.");
+          newValueValidated = undefined;
+        }
+        else {
+          this.setError("");
+        }
+        const valueEmitted = newValueValidated === null ? undefined : newValueValidated;
+        this.ezChange.emit(valueEmitted);
+      }
     }
   }
   //---------------------------------------------
@@ -114867,79 +115165,88 @@ let EzTimeInput$1 = class extends HTMLElement$1 {
       this._maskFormatter.mask = mask;
     }
   }
+  validateValue(value) {
+    return isNaN(value) || value === undefined ? null : value;
+  }
+  setError(msg) {
+    this.errorMessage = msg;
+    if (this._textInput && (msg === null || msg === void 0 ? void 0 : msg.trim())) {
+      this.ezCancelWaitingChange.emit();
+    }
+  }
   //---------------------------------------------
   // Public methods
   //---------------------------------------------
+  getViewValue() {
+    return this._viewValue;
+  }
+  prepareValue(value) {
+    try {
+      this._viewValue = TimeFormatter.prepareValue(value, this.showSeconds);
+      if (this._textInput && this._textInput.value !== this._viewValue) {
+        this._textInput.value = this._viewValue;
+      }
+    }
+    catch (e) {
+      this.setError(e.message);
+    }
+  }
   /**
    * Faz o foco no componente de input
    */
   async setFocus() {
-    this._inputElem.setFocus();
+    this._textInput.setFocus();
   }
   /**
    * Remove o foco no componente de input
    */
   async setBlur() {
-    this._inputElem.setBlur();
+    this._textInput.setBlur();
+  }
+  /**
+   * Retorna informando se o campo está inválido (true | false)
+   */
+  async isInvalid() {
+    return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
   }
   //---------------------------------------------
   // Event handlers
   //---------------------------------------------
-  handleFocusout() {
-    this.errorMessage = "";
-    this.prepareValue(this.viewValue);
-    if (this.viewValue && !TimeFormatter.validateTime(this.viewValue, this.showSeconds)) {
-      this._oldViewValue = this.viewValue;
-      this.ezCancelWaitingChange.emit();
-      this.errorMessage = "Favor inserir um horário válido.";
-    }
-    else {
-      if (this.viewValue === this._oldViewValue) {
-        this.ezCancelWaitingChange.emit();
-        return;
-      }
-      this._oldViewValue = this.viewValue;
-      if (this.viewValue === "00:00" && this.value == undefined) {
-        this.value = 0;
-      }
-      this.ezChange.emit(this.value);
+  handleBlur() {
+    if (this._textInput) {
+      this._viewValue = this._textInput.value;
+      this.prepareValue(this._viewValue);
+      this.value = NumberUtils.stringToNumber(this._viewValue.replace(/\D/g, ""));
     }
   }
-  prepareValue(value) {
-    try {
-      this.viewValue = TimeFormatter.prepareValue(value, this.showSeconds);
-    }
-    catch (e) {
-      this.errorMessage = e.message;
+  handleInput() {
+    const parsedNumber = NumberUtils.stringToNumber(this._textInput.value.replace(/\D/g, ""));
+    if (parsedNumber !== this.value) {
+      this.ezStartChange.emit({ waitmessage: "", blocking: false });
     }
   }
-  handleChange() {
-    this.ezStartChange.emit({ waitmessage: "", blocking: false });
-    this.viewValue = this._inputElem.value;
-    this.value = NumberUtils.stringToNumber(this.viewValue.replace(/\D/g, ""));
-  }
   //---------------------------------------------
   // Lifecycle web component
   //---------------------------------------------
   componentDidLoad() {
-    this.observeValue();
-    CSSVarsUtils.applyVarsTextInput(this._elem, this._inputElem);
+    CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
   }
   componentWillLoad() {
     this.observeShowSeconds();
     if (this.value) {
       this.prepareValue(this.value.toString());
     }
-    else if (this.viewValue) {
-      this.prepareValue(this.viewValue);
+    else if (this._viewValue) {
+      this.prepareValue(this._viewValue);
     }
   }
   render() {
-    return (h(Host, null, h("ez-text-input", { ref: (el) => this._inputElem = el, value: this.viewValue, enabled: this.enabled, label: this.label, restrict: "0123456789:", onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, errorMessage: this.errorMessage, mode: this.mode, slaveMode: true }, h("ez-icon", { slot: "leftIcon", iconName: "timer-outline" }))));
+    return (h(Host, null, h("ez-text-input", { 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 }, h("ez-icon", { slot: "leftIcon", iconName: "timer-outline" }))));
   }
   static get assetsDirs() { return ["../assets"]; }
   get _elem() { return this; }
   static get watchers() { return {
+    "errorMessage": ["observeErrorMessage"],
     "showSeconds": ["observeShowSeconds"],
     "value": ["observeValue"]
   }; }
@@ -116040,8 +116347,8 @@ const EzPopup = /*@__PURE__*/proxyCustomElement(EzPopup$1, [1,"ez-popup",{"size"
 const EzSearch = /*@__PURE__*/proxyCustomElement(EzSearch$1, [1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionLoader":[16],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressEmptyOption":[4,"suppress-empty-option"],"mode":[513]}]);
 const EzTabselector = /*@__PURE__*/proxyCustomElement(EzTabselector$1, [1,"ez-tabselector",{"selectedIndex":[1538,"selected-index"],"selectedTab":[1537,"selected-tab"],"tabs":[1]}]);
 const EzTextArea = /*@__PURE__*/proxyCustomElement(EzTextArea$1, [1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"rows":[1538],"canShowError":[516,"can-show-error"],"mode":[513]}]);
-const EzTextInput = /*@__PURE__*/proxyCustomElement(EzTextInput$1, [1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"mask":[1],"canShowError":[516,"can-show-error"],"restrict":[1],"mode":[513],"slaveMode":[516,"slave-mode"]}]);
-const EzTimeInput = /*@__PURE__*/proxyCustomElement(EzTimeInput$1, [1,"ez-time-input",{"label":[513],"viewValue":[1537,"view-value"],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513]}]);
+const EzTextInput = /*@__PURE__*/proxyCustomElement(EzTextInput$1, [1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"mask":[1],"canShowError":[516,"can-show-error"],"restrict":[1],"mode":[513]}]);
+const EzTimeInput = /*@__PURE__*/proxyCustomElement(EzTimeInput$1, [1,"ez-time-input",{"label":[513],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513]}]);
 const EzToast = /*@__PURE__*/proxyCustomElement(EzToast$1, [1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"canClose":[1028,"can-close"]}]);
 const EzUpload = /*@__PURE__*/proxyCustomElement(EzUpload$1, [1,"ez-upload",{"label":[1],"enabled":[4],"maxFileSize":[2,"max-file-size"],"maxFiles":[2,"max-files"],"requestHeaders":[8,"request-headers"],"urlUpload":[1,"url-upload"],"urlDelete":[1,"url-delete"],"value":[1040]}]);
 const EzViewStack = /*@__PURE__*/proxyCustomElement(EzViewStack$1, [0,"ez-view-stack"]);