@sankhyalabs/ezui 1.1.158 → 1.1.160

package/dist/esm/ez-combo-box.entry.js

@@ -1,16 +1,20 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b21f0a10.js';
 import { FloatingManager } from '@sankhyalabs/core';
+import { A as ApplicationUtils } from './ApplicationUtils-35350d20.js';
 import { C as CSSVarsUtils } from './CSSVarsUtils-eb4c5af6.js';
 
-const ezComboBoxCss = ":host{--ez-combo-box--height:42px;--ez-combo-box--width:100%;--ez-combo-box__icon--width:48px;--ez-combo-box--border-radius:var(--border--radius-medium, 12px);--ez-combo-box--border-radius-small:var(--border--radius-small, 6px);--ez-combo-box--font-size:var(--text--medium, 14px);--ez-combo-box--font-family:var(--font-pattern, Arial);--ez-combo-box--font-weight--large:var(--text-weight--large, 500);--ez-combo-box--font-weight--medium:var(--text-weight--medium, 400);--ez-combo-box--background-color--xlight:var(--background--xlight, #fff);--ez-combo-box--background-medium:var(--background--medium, #f0f3f7);--ez-combo-box__input--background-color:var(--background--medium, #e0e0e0);--ez-combo-box__input--border:var(--border--medium, 2px solid);--ez-combo-box__input--border-color:var(--ez-combo-box__input--background-color);--ez-combo-box__input--focus--border-color:var(--color--primary, #008561);--ez-combo-box__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-combo-box__input--disabled--color:var(--text--disable, #AFB6C0);--ez-combo-box__input--error--border-color:#CC2936;--ez-combo-box__btn--color:var(--text--primary, #626e82);--ez-combo-box__btn-disabled--color:var(--text--disable, #AFB6C0);--ez-combo-box__btn-hover--color:var(--color--primary, #4e4e4e);--ez-combo-box__label--color:var(--title--primary, #2B3A54);--ez-combo-box__list-title--primary:var(--title--primary, #2B3A54);--ez-combo-box__list-text--primary:var(--text--primary, #626e82);--ez-combo-box__list-height:calc(var(--ez-combo-box--font-size) + var(--ez-combo-box--space--medium));--ez-combo-box--space--medium:var(--space--medium, 12px);--ez-combo-box--space--small:var(--space--small, 6px);--ez-combo-box__list-scrollbar--background-color:var(--text--primary, #626e82);--ez-combo-box__list-scrollbar--border-radius:var(--border--radius-small, 6px);--ez-combo-box__list-scrollbar--width:var(--space--medium, 12px);display:flex;flex-wrap:wrap;position:relative;width:var(--ez-combo-box--width)}ez-icon{--ez-icon--color:inherit}.suppressed-search-input{--ez-text-input__input--border-color:var(--color--strokes, #dce0e8);--ez-text-input__input--disabled--background-color:var(--background--xlight, #fff);--ez-text-input__input--disabled--color:var(--title--primary, #2B3A54)}.list-container{position:relative;width:100%}.list-wrapper{display:flex;flex-direction:column;box-sizing:border-box;width:100%;z-index:var(--more-visible, 2);max-height:calc(4*var(--ez-combo-box__list-height) + 2*var(--ez-combo-box--space--small));background-color:var(--ez-combo-box--background-color--xlight);border-radius:var(--ez-combo-box--border-radius);box-shadow:var(--shadow, 0px 0px 16px 0px #000);padding:var(--ez-combo-box--space--small)}.list-options{box-sizing:border-box;width:100%;height:100%;display:flex;flex-direction:column;scroll-behavior:smooth;overflow:auto}.list-options::-webkit-scrollbar-track{background-color:#f0f2f5;border-radius:var(--ez-combo-box__list-scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb{background-color:var(--ez-combo-box__list-scrollbar--background-color);border-radius:var(--ez-combo-box__list-scrollbar--border-radius)}.list-options::-webkit-scrollbar{background-color:#f0f2f5;width:var(--ez-combo-box__list-scrollbar--width);max-width:var(--ez-combo-box__list-scrollbar--width);min-width:var(--ez-combo-box__list-scrollbar--width)}.item{display:flex;align-items:center;width:100%;box-sizing:border-box;list-style-type:none;cursor:pointer;border-radius:var(--ez-combo-box--border-radius-small);padding:0 var(--ez-combo-box--space--small);min-height:var(--ez-combo-box__list-height);gap:var(--space--small, 6px)}.item__value,.item__label{font-weight:var(--ez-combo-box--font-weight--large);font-family:var(--ez-combo-box--font-family);font-size:var(--ez-combo-box--font-size)}.item__value,.item__label{flex-basis:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-combo-box__list-title--primary)}.item__value{text-align:center;color:var(--ez-combo-box__list-text--primary)}.item__value--hidden{visibility:hidden;position:absolute;z-index:-1;top:0;left:0}.item__label{text-align:left}.message{text-align:center;display:flex;justify-content:center;align-items:center;list-style-type:none;padding:var(--ez-combo-box--space--small);border-radius:var(--ez-combo-box--border-radius-small);min-height:var(--ez-combo-box__list-height)}.message__no-result{color:var(--ez-combo-box__list-title--primary);font-family:var(--ez-combo-box--font-family)}.message__loading{border-radius:50%;width:20px;height:20px;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;border:2px solid var(--color--secondary-700);border-top:2px solid transparent}li:hover{background-color:var(--ez-combo-box--background-medium)}.preselected{background-color:var(--background--medium)}.btn{outline:none;border:none;background:none;cursor:pointer;color:var(--ez-combo-box__btn--color)}.btn:disabled{cursor:unset;color:var(--ez-combo-box__btn-disabled--color)}.btn:disabled:hover{cursor:unset;color:var(--ez-combo-box__btn-disabled--color)}.btn:hover{color:var(--ez-combo-box__btn-hover--color)}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
+const ezComboBoxCss = ":host{--ez-combo-box--height:42px;--ez-combo-box--width:100%;--ez-combo-box__icon--width:48px;--ez-combo-box--border-radius:var(--border--radius-medium, 12px);--ez-combo-box--border-radius-small:var(--border--radius-small, 6px);--ez-combo-box--font-size:var(--text--medium, 14px);--ez-combo-box--font-family:var(--font-pattern, Arial);--ez-combo-box--font-weight--large:var(--text-weight--large, 500);--ez-combo-box--font-weight--medium:var(--text-weight--medium, 400);--ez-combo-box--background-color--xlight:var(--background--xlight, #fff);--ez-combo-box--background-medium:var(--background--medium, #f0f3f7);--ez-combo-box__input--background-color:var(--background--medium, #e0e0e0);--ez-combo-box__input--border:var(--border--medium, 2px solid);--ez-combo-box__input--border-color:var(--ez-combo-box__input--background-color);--ez-combo-box__input--focus--border-color:var(--color--primary, #008561);--ez-combo-box__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-combo-box__input--disabled--color:var(--text--disable, #AFB6C0);--ez-combo-box__input--error--border-color:#CC2936;--ez-combo-box__btn--color:var(--title--primary, #2B3A54);--ez-combo-box__btn-disabled--color:var(--text--disable, #AFB6C0);--ez-combo-box__btn-hover--color:var(--color--primary, #4e4e4e);--ez-combo-box__label--color:var(--title--primary, #2B3A54);--ez-combo-box__list-title--primary:var(--title--primary, #2B3A54);--ez-combo-box__list-text--primary:var(--text--primary, #626e82);--ez-combo-box__list-height:calc(var(--ez-combo-box--font-size) + var(--ez-combo-box--space--medium));--ez-combo-box--space--medium:var(--space--medium, 12px);--ez-combo-box--space--small:var(--space--small, 6px);--ez-combo-box__list-scrollbar--background-color:var(--title--primary, #2B3A54);--ez-combo-box__list-scrollbar--border-radius:var(--border--radius-small, 6px);--ez-combo-box__list-scrollbar--width:var(--space--medium, 12px);display:flex;flex-wrap:wrap;position:relative;width:var(--ez-combo-box--width)}ez-icon{--ez-icon--color:inherit;font-weight:var(--text-weight--large, 600)}.suppressed-search-input{--ez-text-input__input--border-color:var(--color--strokes, #dce0e8);--ez-text-input__input--disabled--background-color:var(--background--xlight, #fff);--ez-text-input__input--disabled--color:var(--title--primary, #2B3A54)}.list-container{position:relative;width:100%}.list-wrapper{display:flex;flex-direction:column;box-sizing:border-box;width:100%;z-index:var(--more-visible, 2);max-height:calc(4*var(--ez-combo-box__list-height) + 2*var(--ez-combo-box--space--small));background-color:var(--ez-combo-box--background-color--xlight);border-radius:var(--ez-combo-box--border-radius);box-shadow:var(--shadow, 0px 0px 16px 0px #000);padding:var(--ez-combo-box--space--small)}.list-options{box-sizing:border-box;width:100%;height:100%;display:flex;flex-direction:column;scroll-behavior:smooth;overflow:auto}.list-options::-webkit-scrollbar-track{background-color:#f0f2f5;border-radius:var(--ez-combo-box__list-scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb{background-color:var(--ez-combo-box__list-scrollbar--background-color);border-radius:var(--ez-combo-box__list-scrollbar--border-radius)}.list-options::-webkit-scrollbar{background-color:#f0f2f5;width:var(--ez-combo-box__list-scrollbar--width);max-width:var(--ez-combo-box__list-scrollbar--width);min-width:var(--ez-combo-box__list-scrollbar--width)}.item{display:flex;align-items:center;width:100%;box-sizing:border-box;list-style-type:none;cursor:pointer;border-radius:var(--ez-combo-box--border-radius-small);padding:0 var(--ez-combo-box--space--small);min-height:var(--ez-combo-box__list-height);gap:var(--space--small, 6px)}.item__value,.item__label{flex-basis:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-combo-box__list-title--primary);font-weight:var(--ez-combo-box--font-weight--large);font-family:var(--ez-combo-box--font-family);font-size:var(--ez-combo-box--font-size)}.item__value{text-align:center;color:var(--ez-combo-box__list-text--primary)}.item__value--hidden{visibility:hidden;position:absolute;z-index:-1;top:0;left:0}.item__label{text-align:left}.message{text-align:center;display:flex;justify-content:center;align-items:center;list-style-type:none;min-height:calc(var(--ez-combo-box__list-height) * 1.5)}.message__no-result{color:var(--ez-combo-box__list-title--primary);font-family:var(--ez-combo-box--font-family);font-size:var(--ez-combo-box--font-size)}.message__loading{border-radius:50%;width:16px;height:16px;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;border:3px solid var(--ez-combo-box__list-title--primary);border-top:3px solid transparent}li:hover{background-color:var(--ez-combo-box--background-medium)}.preselected{background-color:var(--background--medium)}.btn{outline:none;border:none;background:none;cursor:pointer;color:var(--ez-combo-box__btn--color)}.btn:disabled{cursor:unset;color:var(--ez-combo-box__btn-disabled--color)}.btn:disabled:hover{cursor:unset;color:var(--ez-combo-box__btn-disabled--color)}.btn:hover{color:var(--ez-combo-box__btn-hover--color)}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
 
 let EzComboBox = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ezChange = createEvent(this, "ezChange", 7);
+    this._changeDeboucingTimeout = null;
     this._limitCharsToSearch = 3;
     this._deboucingTime = 300;
     this._maxWidthValue = 0;
+    this._tabPressed = false;
+    this._textEmptyList = "Nenhum resultado encontrado";
     this._startLoading = false;
     this._showLoading = true;
     /**
@@ -42,40 +46,66 @@ let EzComboBox = class {
      */
     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 +160,7 @@ let EzComboBox = class {
     //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" });
@@ -178,6 +208,9 @@ let EzComboBox = class {
       this.selectOption(this._visibleOptions[this._preSelection]);
       this._preSelection = undefined;
     }
+    else {
+      this.controlListWithOnlyOne();
+    }
   }
   updateSource(source) {
     this._startLoading = false;
@@ -194,6 +227,10 @@ let EzComboBox = class {
       if (Array.isArray(source)) {
         this._source = source;
         this.updateVisibleOptions();
+        if (this._tabPressed) {
+          this._tabPressed = false;
+          this.controlEmptySearch();
+        }
       }
       else {
         this.selectOption(source);
@@ -206,15 +243,16 @@ let EzComboBox = class {
   }
   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 = [];
     }
   }
   loadOptions(mode, argument = "") {
@@ -228,11 +266,43 @@ let EzComboBox = class {
     }
   }
   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() {
+    this.value = null;
+  }
+  controlListWithOnlyOne() {
+    if (this.searchMode) {
+      const source = this._visibleOptions;
+      if ((source === null || source === void 0 ? void 0 : source.length) === 1) {
+        this.selectOption(source[0]);
+      }
+    }
+  }
+  controlEmptySearch() {
+    var _a;
+    if (this.searchMode) {
+      if (!((_a = this._visibleOptions) === null || _a === void 0 ? void 0 : _a.length)) {
+        this.clearSearch();
+        ApplicationUtils.info(this._textEmptyList);
+      }
+      else {
+        this.controlListWithOnlyOne();
+      }
     }
   }
   //---------------------------------------------
@@ -267,7 +337,8 @@ let EzComboBox = class {
     }
   }
   componentDidLoad() {
-    CSSVarsUtils.applyVarsTextInput(this.el, this._inputElement);
+    CSSVarsUtils.applyVarsTextInput(this.el, this._textInput);
+    this.setInputValue(false);
   }
   //---------------------------------------------
   // Event handlers
@@ -287,7 +358,7 @@ let EzComboBox = class {
     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)) {
@@ -319,6 +390,7 @@ let EzComboBox = class {
     }
   }
   keyDownHandler(event) {
+    this._tabPressed = false;
     switch (event.key) {
       case "ArrowDown":
         this.nextOption();
@@ -332,6 +404,10 @@ let EzComboBox = class {
       case "Escape":
         this.cancelPreselection();
         break;
+      case "Tab":
+        this._tabPressed = true;
+        this.controlListWithOnlyOne();
+        break;
     }
     event.stopPropagation();
   }
@@ -339,13 +415,17 @@ let EzComboBox = class {
     this.cancelPreselection();
   }
   render() {
-    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: evt => this.onTextInputChangeHandler(evt), 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", { slot: "icon", "icon-name": this.searchMode ? "search" : "chevron-down" }))), 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" }, "Nenhum resultado encontrado"), this._showLoading && h("div", { class: "message__loading" })), this.showOptionValue
+    var _a;
+    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
       ? h("span", { class: "item__value item__value--hidden", ref: elem => this._itemValueBasis = elem })
       : undefined, this._visibleOptions.length > 0 && this._visibleOptions.map((opt, index) => this.buildItem(opt, index)))))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {
+    "errorMessage": ["observeErrorMessage"],
     "value": ["observeValue"]
   }; }
 };

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

@@ -10,6 +10,7 @@ let EzDateInput = class {
     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.
      */
@@ -20,18 +21,33 @@ let EzDateInput = class {
     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);
       }
     }
   }
@@ -47,59 +63,89 @@ let EzDateInput = class {
   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 getElement(this); }
   static get watchers() { return {

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

@@ -10,6 +10,7 @@ let EzDateTimeInput = class {
     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.
      */
@@ -24,14 +25,34 @@ let EzDateTimeInput = class {
     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);
+      }
     }
   }
   /**
@@ -46,30 +67,36 @@ let EzDateTimeInput = class {
   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);
@@ -77,7 +104,7 @@ let EzDateTimeInput = class {
       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;
@@ -86,37 +113,55 @@ let EzDateTimeInput = class {
     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) {
@@ -130,14 +175,32 @@ let EzDateTimeInput = class {
     };
     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 getElement(this); }
   static get watchers() { return {