@sankhyalabs/ezui 1.1.159 → 1.1.160

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

@@ -3,6 +3,7 @@ import { Component, h, Event, Prop, Element, Method, Watch } from "@stencil/core
 import CSSVarsUtils from "../../utils/CSSVarsUtils";
 export class EzNumberInput {
   constructor() {
+    this._focused = false;
     /**
      * Deixa o campo disponível ou não para uso.
      */
@@ -24,66 +25,107 @@ export class EzNumberInput {
   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() !== "";
+  }
   observeLabel() {
     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() {
-    if (this._textInput) {
-      this._textInput.value = this.getTextValue(this.value) || '';
+  observeValue(newValue, oldValue) {
+    if (this._textInput && newValue != oldValue) {
+      const newValueValidated = this.validateValue(newValue);
+      const oldValueValidated = this.validateValue(oldValue);
+      if (newValueValidated != oldValueValidated) {
+        const textValue = this.getTextValue(newValueValidated) || '';
+        if ((this._textInput.value || '') !== textValue) {
+          const parsedNumber = this.getParsedNumber(textValue);
+          if (parsedNumber !== undefined || !this._focused) {
+            this._textInput.value = textValue;
+            this._focused = false;
+            this.errorMessage = "";
+          }
+        }
+        const valueEmitted = newValueValidated === null ? undefined : newValueValidated;
+        this.ezChange.emit(valueEmitted);
+      }
+    }
+  }
+  validateValue(value) {
+    return isNaN(value) || value === undefined ? null : value;
+  }
+  getTextValue(value) {
+    if (value != undefined) {
+      return this.precision > 0 ? NumberUtils.format(value.toString(), Number(this.precision), Number(this.prettyPrecision)) : value.toString();
     }
+    return undefined;
   }
   changeValue(newValue) {
     this.errorMessage = "";
-    if (newValue !== this.value) {
-      this.value = newValue;
-      this.ezChange.emit(this.value);
-      return true;
+    if (this.value != newValue) {
+      this.value = newValue === undefined ? null : newValue;
     }
     else {
-      this.observeValue();
+      this.ezCancelWaitingChange.emit();
     }
-    return false;
   }
-  parseNumber() {
-    const parsedNumber = this._textInput.value ? NumberUtils.stringToNumber(this._textInput.value) : undefined;
+  setError(msg) {
+    this.value = null;
+    this.errorMessage = msg;
+    this.ezCancelWaitingChange.emit();
+  }
+  handleBlur() {
+    const parsedNumber = this.getParsedNumber();
     if (parsedNumber !== undefined && isNaN(parsedNumber)) {
-      this.ezCancelWaitingChange.emit();
-      this.errorMessage = "O valor digitado não é um número válido";
+      this.setError("O valor digitado não é um número válido");
     }
     else {
       try {
-        if (!this.changeValue(parsedNumber)) {
-          this.ezCancelWaitingChange.emit();
-        }
+        this.changeValue(parsedNumber);
       }
       catch (e) {
-        this.ezCancelWaitingChange.emit();
-        this.errorMessage = e.message;
+        this.setError(e.message);
         return;
       }
     }
   }
-  getTextValue(value) {
-    if (value) {
-      return this.precision > 0 ? NumberUtils.format(value.toString(), Number(this.precision), Number(this.prettyPrecision)) : value.toString();
+  handleInput() {
+    const parsedNumber = this.getParsedNumber();
+    if (parsedNumber !== this.value) {
+      this._focused = true;
+      this.ezStartChange.emit({ waitmessage: "", blocking: false });
     }
-    return undefined;
   }
-  startChange() {
-    this.ezStartChange.emit({ waitmessage: "", blocking: false });
+  getParsedNumber(value) {
+    var _a;
+    if (value === void 0) { value = (_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value; }
+    return (value === null || value === void 0 ? void 0 : value.trim()) ? NumberUtils.stringToNumber(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("ez-text-input", { ref: elem => this._textInput = elem, onBlur: () => this.parseNumber(), label: this.label, onInput: () => this.startChange(), value: this.getTextValue(this.value), restrict: this.precision > 0 ? "0123456789-,." : "0123456789-", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, slaveMode: true }));
+    return (h("ez-text-input", { ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), restrict: this.precision > 0 ? "0123456789-,." : "0123456789-", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode }));
   }
   static get is() { return "ez-number-input"; }
   static get encapsulation() { return "shadow"; }
@@ -299,6 +341,22 @@ export class EzNumberInput {
         "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"; }

package/dist/collection/components/ez-search/ez-search.js

@@ -23,6 +23,11 @@ export class EzSearch {
       */
     this.mode = "regular";
   }
+  observeErrorMessage() {
+    if (this._comboElement) {
+      this._comboElement.errorMessage = this.errorMessage;
+    }
+  }
   observeValue() {
     if (this._comboElement) {
       this._comboElement.value = this.value;
@@ -40,16 +45,25 @@ export class EzSearch {
   async setBlur() {
     this._comboElement.setBlur();
   }
-  onComboChange(evt) {
-    evt.stopPropagation();
-    this.value = evt.detail;
-    this.ezChange.emit(evt.detail);
+  /**
+   * Retorna informando se o campo está inválido (true | false)
+   */
+  async isInvalid() {
+    return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
+  }
+  onComboChange(event) {
+    event.stopPropagation();
+    this.value = event.detail;
+    this.ezChange.emit(event.detail);
+    if (this.errorMessage !== this._comboElement.errorMessage) {
+      this.errorMessage = this._comboElement.errorMessage;
+    }
   }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._comboElement);
   }
   render() {
-    return (h("ez-combo-box", { ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, optionLoader: this.optionLoader, searchMode: true, onEzChange: evt => this.onComboChange(evt), showSelectedValue: this.showSelectedValue, showOptionValue: this.showOptionValue, suppressEmptyOption: this.suppressEmptyOption, mode: this.mode }));
+    return (h("ez-combo-box", { ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, optionLoader: this.optionLoader, searchMode: true, onEzChange: event => this.onComboChange(event), showSelectedValue: this.showSelectedValue, showOptionValue: this.showOptionValue, suppressEmptyOption: this.suppressEmptyOption, mode: this.mode }));
   }
   ;
   static get is() { return "ez-search"; }
@@ -295,10 +309,29 @@ export class EzSearch {
         "text": "Remove o foco no componente de pesquisa",
         "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": "value",
       "methodName": "observeValue"
     }]; }

package/dist/collection/components/ez-text-area/ez-text-area.css

@@ -67,7 +67,7 @@ textarea {
   resize: none;
   margin-top: calc(var(--space--medium, 12px) + 4px);
   width: 100%;
-  font-weight: var(--text-weight--large, 600);
+  font-weight: var(--text-area--font-weight);
   font-family: var(--text-area--font-family);
   font-size: var(--text-area--font-size);
   color: var(--text-area--color);

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

@@ -73,6 +73,12 @@ export class EzTextArea {
   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() !== "";
+  }
   //---------------------------------------------
   // Private methods
   //---------------------------------------------
@@ -134,7 +140,7 @@ export class EzTextArea {
         this.label && this.mode != "slim" ?
           h("label", { ref: (el) => this._labelElem = el, class: this.enabled ? "textarea__label" : "textarea__label textarea__label--disabled", onClick: () => this._inputElem.focus(), title: this.label }, this.label)
           : null,
-        h("textarea", { onFocus: () => this.handleFocus(), ref: (el) => this._inputElem = el, value: this.value, disabled: !this.enabled, class: this.mode == "slim" ? "textarea--slim" : "", placeholder: this.mode == "slim" && this.label ? this.label : "", onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, onKeyDown: event => event.stopPropagation(), rows: this.rows })),
+        h("textarea", { onFocus: () => this.handleFocus(), ref: (el) => this._inputElem = el, value: this.value, disabled: !this.enabled, class: this.mode === "slim" ? "textarea--slim" : "", placeholder: this.mode === "slim" && this.label ? this.label : "", onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, onKeyDown: event => event.stopPropagation(), rows: this.rows })),
       this.canShowError && this.mode != "slim" &&
         h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
   }
@@ -336,6 +342,22 @@ export class EzTextArea {
         "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-text-input/ez-text-input.css

@@ -73,7 +73,6 @@ input {
   width: 100%;
   box-sizing: border-box;
   padding: var(--space--medium, 6px);
-  font-weight: var(--text-weight--large, 600);
 
   /*public*/
   height: var(--ez-text-input--height);
@@ -84,6 +83,7 @@ input {
   border-color: var(--ez-text-input__input--border-color);
   background-color: var(--ez-text-input__input--background-color);
   color: var(--ez-text-input--color);
+  font-weight: var(--ez-text-input--font-weight);
 }
 
 input:disabled {

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"; }