@sankhyalabs/ezui 1.1.158 → 1.1.160

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

@@ -1,11 +1,14 @@
 import { FloatingManager } from "@sankhyalabs/core";
 import { Component, h, Host, Prop, State, Event, Element, Watch, Method } from "@stencil/core";
-import CSSVarsUtils from "../../utils/CSSVarsUtils";
+import { ApplicationUtils, CSSVarsUtils } from "../../utils";
 export class EzComboBox {
   constructor() {
+    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;
     /**
@@ -37,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 || [];
@@ -127,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" });
@@ -175,6 +204,9 @@ export class EzComboBox {
       this.selectOption(this._visibleOptions[this._preSelection]);
       this._preSelection = undefined;
     }
+    else {
+      this.controlListWithOnlyOne();
+    }
   }
   updateSource(source) {
     this._startLoading = false;
@@ -191,6 +223,10 @@ export class EzComboBox {
       if (Array.isArray(source)) {
         this._source = source;
         this.updateVisibleOptions();
+        if (this._tabPressed) {
+          this._tabPressed = false;
+          this.controlEmptySearch();
+        }
       }
       else {
         this.selectOption(source);
@@ -203,15 +239,16 @@ 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 = [];
     }
   }
   loadOptions(mode, argument = "") {
@@ -225,11 +262,43 @@ 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() {
+    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();
+      }
     }
   }
   //---------------------------------------------
@@ -264,7 +333,8 @@ export class EzComboBox {
     }
   }
   componentDidLoad() {
-    CSSVarsUtils.applyVarsTextInput(this.el, this._inputElement);
+    CSSVarsUtils.applyVarsTextInput(this.el, this._textInput);
+    this.setInputValue(false);
   }
   //---------------------------------------------
   // Event handlers
@@ -284,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)) {
@@ -316,6 +386,7 @@ export class EzComboBox {
     }
   }
   keyDownHandler(event) {
+    this._tabPressed = false;
     switch (event.key) {
       case "ArrowDown":
         this.nextOption();
@@ -329,6 +400,10 @@ export class EzComboBox {
       case "Escape":
         this.cancelPreselection();
         break;
+      case "Tab":
+        this._tabPressed = true;
+        this.controlListWithOnlyOne();
+        break;
     }
     event.stopPropagation();
   }
@@ -336,16 +411,21 @@ export class EzComboBox {
     this.cancelPreselection();
   }
   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: 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("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", { slot: "icon", "icon-name": this.searchMode ? "search" : "chevron-down" }))),
+          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" }, "Nenhum resultado encontrado"),
+                !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 })
@@ -468,7 +548,7 @@ export class EzComboBox {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Ativa o modo pesquisa do combobox"
       },
       "attribute": "search-mode",
       "reflect": false
@@ -605,7 +685,8 @@ export class EzComboBox {
     "_preSelection": {},
     "_visibleOptions": {},
     "_startLoading": {},
-    "_showLoading": {}
+    "_showLoading": {},
+    "_criteria": {}
   }; }
   static get events() { return [{
       "method": "ezChange",
@@ -659,12 +740,30 @@ 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"; }