@sankhyalabs/ezui 1.1.159 → 1.1.161

package/dist/collection/components/ez-combo-box/ez-combo-box.js

@@ -40,40 +40,66 @@ export class EzComboBox {
      */
     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 || [];
@@ -130,7 +156,7 @@ export class EzComboBox {
     //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" });
@@ -213,15 +239,13 @@ export class EzComboBox {
   }
   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 = [];
@@ -238,11 +262,20 @@ export class EzComboBox {
     }
   }
   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() {
@@ -300,7 +333,8 @@ export class EzComboBox {
     }
   }
   componentDidLoad() {
-    CSSVarsUtils.applyVarsTextInput(this.el, this._inputElement);
+    CSSVarsUtils.applyVarsTextInput(this.el, this._textInput);
+    this.setInputValue(false);
   }
   //---------------------------------------------
   // Event handlers
@@ -320,7 +354,7 @@ export class EzComboBox {
     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)) {
@@ -379,10 +413,10 @@ export class EzComboBox {
   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("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._inputElement) === null || _a === void 0 ? void 0 : _a.value) && (this._criteria || this.value)
+        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),
@@ -706,10 +740,29 @@ export class EzComboBox {
         "text": "Remove o foco no componente de sele\u00E7\u00E3o",
         "tags": []
       }
+    },
+    "isInvalid": {
+      "complexType": {
+        "signature": "() => Promise<boolean>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
+      "docs": {
+        "text": "Retorna informando se o campo est\u00E1 inv\u00E1lido (true | false)",
+        "tags": []
+      }
     }
   }; }
   static get elementRef() { return "el"; }
   static get watchers() { return [{
+      "propName": "errorMessage",
+      "methodName": "observeErrorMessage"
+    }, {
       "propName": "value",
       "methodName": "observeValue"
     }]; }

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

@@ -3,6 +3,7 @@ import { DateUtils } from '@sankhyalabs/core';
 import CSSVarsUtils from '../../utils/CSSVarsUtils';
 export class EzDateInput {
   constructor() {
+    this._focused = false;
     /**
      * Deixa o campo disponível ou não para uso.
      */
@@ -13,18 +14,33 @@ export class EzDateInput {
     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);
       }
     }
   }
@@ -40,58 +56,88 @@ export class EzDateInput {
   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 => { 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("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, 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 })));
   }
@@ -281,6 +327,22 @@ export class EzDateInput {
         "text": "Remove o foco no componente de data",
         "tags": []
       }
+    },
+    "isInvalid": {
+      "complexType": {
+        "signature": "() => Promise<boolean>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
+      "docs": {
+        "text": "Retorna informando se o campo est\u00E1 inv\u00E1lido (true | false)",
+        "tags": []
+      }
     }
   }; }
   static get elementRef() { return "_elem"; }

package/dist/collection/components/ez-date-time-input/ez-date-time-input.js

@@ -3,6 +3,7 @@ import { DateUtils, TimeFormatter } from '@sankhyalabs/core';
 import CSSVarsUtils from '../../utils/CSSVarsUtils';
 export class EzDateTimeInput {
   constructor() {
+    this._focused = false;
     /**
      * Deixa o campo disponível ou não para uso.
      */
@@ -17,14 +18,34 @@ export class EzDateTimeInput {
     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);
+      }
     }
   }
   /**
@@ -39,30 +60,36 @@ export class EzDateTimeInput {
   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);
@@ -70,7 +97,7 @@ export class EzDateTimeInput {
       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;
@@ -79,37 +106,53 @@ export class EzDateTimeInput {
     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) {
@@ -123,15 +166,33 @@ export class EzDateTimeInput {
     };
     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("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 })));
   }
@@ -339,6 +400,22 @@ export class EzDateTimeInput {
         "text": "Remove o foco no componente de datetime",
         "tags": []
       }
+    },
+    "isInvalid": {
+      "complexType": {
+        "signature": "() => Promise<boolean>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
+      "docs": {
+        "text": "Retorna informando se o campo est\u00E1 inv\u00E1lido (true | false)",
+        "tags": []
+      }
     }
   }; }
   static get elementRef() { return "_elem"; }

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

@@ -21,9 +21,10 @@ export class EzFilterInput {
       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);
     }
   }
   /**
@@ -38,12 +39,17 @@ export class EzFilterInput {
   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() {
@@ -232,6 +238,22 @@ export class EzFilterInput {
         "text": "Remove o foco no componente de input",
         "tags": []
       }
+    },
+    "isInvalid": {
+      "complexType": {
+        "signature": "() => Promise<boolean>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
+      "docs": {
+        "text": "Retorna informando se o campo est\u00E1 inv\u00E1lido (true | false)",
+        "tags": []
+      }
     }
   }; }
   static get elementRef() { return "_elem"; }