@sankhyalabs/ezui 1.1.159 → 1.1.160

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"
     }, {