@sankhyalabs/ezui 1.1.159 → 1.1.161

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

@@ -14,23 +14,20 @@ export class EzTextInput {
      * 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() {
@@ -49,14 +46,16 @@ export class EzTextInput {
         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")) {
@@ -79,6 +78,10 @@ export class EzTextInput {
   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;
@@ -99,6 +102,12 @@ export class EzTextInput {
   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
   //---------------------------------------------
@@ -123,7 +132,7 @@ export class EzTextInput {
     return true;
   }
   controlChangeValue() {
-    if ((this.value || '') !== this._inputElem.value) {
+    if (this._inputElem && (this.value || '') !== this._inputElem.value) {
       this.value = this._inputElem.value;
     }
   }
@@ -209,7 +218,7 @@ export class EzTextInput {
       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("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)));
@@ -378,24 +387,6 @@ export class EzTextInput {
       "attribute": "mode",
       "reflect": true,
       "defaultValue": "\"regular\""
-    },
-    "slaveMode": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Define se o controle de change do value ser\u00E1 controlado por um componente pai."
-      },
-      "attribute": "slave-mode",
-      "reflect": true,
-      "defaultValue": "false"
     }
   }; }
   static get events() { return [{
@@ -446,6 +437,22 @@ export class EzTextInput {
         "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 "_hostElement"; }

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

@@ -8,7 +8,7 @@ export class EzTimeInput {
      */
     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;
     /**
@@ -16,6 +16,18 @@ export class EzTimeInput {
      */
     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("##:##:##");
@@ -24,9 +36,23 @@ export class EzTimeInput {
       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);
+      }
     }
   }
   //---------------------------------------------
@@ -40,76 +66,84 @@ export class EzTimeInput {
       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);
+  handleInput() {
+    const parsedNumber = NumberUtils.stringToNumber(this._textInput.value.replace(/\D/g, ""));
+    if (parsedNumber !== this.value) {
+      this.ezStartChange.emit({ waitmessage: "", blocking: false });
     }
-    catch (e) {
-      this.errorMessage = e.message;
-    }
-  }
-  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-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 is() { return "ez-time-input"; }
@@ -139,23 +173,6 @@ export class EzTimeInput {
       "attribute": "label",
       "reflect": true
     },
-    "viewValue": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Valor digitado pelo usu\u00E1rio. Este valor \u00E9 o que fica vis\u00EDvel no campo."
-      },
-      "attribute": "view-value",
-      "reflect": true
-    },
     "value": {
       "type": "number",
       "mutable": true,
@@ -203,7 +220,7 @@ export class EzTimeInput {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Quando h\u00E1 um problema de valida\u00E7\u00E3o, serve como orienta\u00E7\u00E3o ao usu\u00E1rio"
+        "text": "Quando h\u00E1 um problema de valida\u00E7\u00E3o, serve como orienta\u00E7\u00E3o ao usu\u00E1rio."
       },
       "attribute": "error-message",
       "reflect": true
@@ -220,7 +237,7 @@ export class EzTimeInput {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Define se o componente ir\u00E1 ou n\u00E3o considerar os segundos"
+        "text": "Define se o componente ir\u00E1 ou n\u00E3o considerar os segundos."
       },
       "attribute": "show-seconds",
       "reflect": true,
@@ -328,10 +345,29 @@ export class EzTimeInput {
         "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"; }
   static get watchers() { return [{
+      "propName": "errorMessage",
+      "methodName": "observeErrorMessage"
+    }, {
       "propName": "showSeconds",
       "methodName": "observeShowSeconds"
     }, {

package/dist/custom-elements/index.d.ts

@@ -86,6 +86,12 @@ export const EzGrid: {
   new (): EzGrid;
 };
 
+interface EzGridConfig extends Components.EzGridConfig, HTMLElement {}
+export const EzGridConfig: {
+  prototype: EzGridConfig;
+  new (): EzGridConfig;
+};
+
 interface EzIcon extends Components.EzIcon, HTMLElement {}
 export const EzIcon: {
   prototype: EzIcon;
@@ -134,6 +140,12 @@ export const EzSearch: {
   new (): EzSearch;
 };
 
+interface EzSelectBox extends Components.EzSelectBox, HTMLElement {}
+export const EzSelectBox: {
+  prototype: EzSelectBox;
+  new (): EzSelectBox;
+};
+
 interface EzTabselector extends Components.EzTabselector, HTMLElement {}
 export const EzTabselector: {
   prototype: EzTabselector;
@@ -176,18 +188,6 @@ export const EzViewStack: {
   new (): EzViewStack;
 };
 
-interface GridConfig extends Components.GridConfig, HTMLElement {}
-export const GridConfig: {
-  prototype: GridConfig;
-  new (): GridConfig;
-};
-
-interface SelectBox extends Components.SelectBox, HTMLElement {}
-export const SelectBox: {
-  prototype: SelectBox;
-  new (): SelectBox;
-};
-
 interface TestDu extends Components.TestDu, HTMLElement {}
 export const TestDu: {
   prototype: TestDu;