@sankhyalabs/ezui 5.22.0-dev.12 → 5.22.0-dev.121

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

@@ -2,31 +2,29 @@ import { h, Host } from "@stencil/core";
 import { ElementIDUtils, MaskFormatter } from "@sankhyalabs/core";
 export class EzTextInput {
   constructor() {
+    this._isOverflowing = false;
     this.label = undefined;
+    this.alternativePlaceholder = undefined;
     this.value = undefined;
     this.enabled = true;
     this.errorMessage = undefined;
+    this.hasInvalid = false;
     this.mask = undefined;
+    this.cleanValueMask = false;
     this.canShowError = true;
     this.restrict = undefined;
     this.mode = "regular";
     this.noBorder = false;
     this.password = false;
+    this.autoFocus = false;
+    this.hasRightSlotContent = false;
+    this.forceLabelFloat = false;
   }
-  observeErrorMessage() {
-    if (this._inputElem) {
-      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");
-        }
-      });
+  observeHasInvalid(newValue, oldValue) {
+    if (newValue === oldValue) {
+      return;
     }
+    this.validateErrors();
   }
   observeMask() {
     if (this.mask) {
@@ -44,6 +42,7 @@ export class EzTextInput {
         this._inputElem.value = this.value || "";
         this.handleChange();
         this.adjustFloatingLabel();
+        this.checkIsOverflowing();
         if (!this.isSlaveMode()) {
           this.errorMessage = "";
           this.ezChange.emit(this.value);
@@ -51,14 +50,38 @@ export class EzTextInput {
       }
     }
   }
+  observeAlternativePlaceholder(newValue) {
+    this.forceLabelFloat = !!newValue;
+  }
   //---------------------------------------------
   // Private methods
   //---------------------------------------------
+  validateErrors() {
+    const hasErrorMessage = this.handleValidateErrorMessage(this.errorMessage);
+    const hasError = this.canShowError && (hasErrorMessage || this.hasInvalid);
+    this.updateClassError(hasError);
+  }
+  handleValidateErrorMessage(message = this.errorMessage) {
+    return typeof message === "string" && message.trim() !== "";
+  }
+  updateClassError(status) {
+    if (!this._inputElem) {
+      return;
+    }
+    if (status) {
+      this._inputElem.classList.add("hasError");
+    }
+    else {
+      this._inputElem.classList.remove("hasError");
+    }
+  }
   adjustFloatingLabel() {
     if (this.label && this._labelElem) {
       if (this._inputElem && !this._inputElem.classList.contains("input--with--label")) {
         this._inputElem.classList.add("input--with--label");
       }
+      if (this.forceLabelFloat)
+        return;
       const hasValue = this.value && this.value.toString().length > 0;
       const containsFloatedClass = this._labelElem.classList.contains("input__label--floated");
       if (hasValue || this.isFocused()) {
@@ -112,7 +135,7 @@ export class EzTextInput {
    * Retorna se o conteúdo é inválido.
    */
   async isInvalid() {
-    return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
+    return this.handleValidateErrorMessage();
   }
   //---------------------------------------------
   // Event handlers
@@ -121,7 +144,12 @@ export class EzTextInput {
     const value = this._inputElem.value;
     if (value && this._maskFormatter) {
       try {
-        this._inputElem.value = this._maskFormatter.format(value);
+        if (this.cleanValueMask) {
+          this.applyMask(value);
+        }
+        else {
+          this._inputElem.value = this._maskFormatter.format(value);
+        }
       }
       catch (e) {
         this.errorMessage = e.message;
@@ -139,8 +167,34 @@ export class EzTextInput {
   }
   controlChangeValue() {
     if (this._inputElem && (this.value || '') !== this._inputElem.value) {
-      this.value = this._inputElem.value;
+      if (this.cleanValueMask) {
+        this.value = this._maskFormatter.removeMask(this._inputElem.value);
+      }
+      else {
+        this.value = this._inputElem.value;
+      }
+    }
+  }
+  applyMask(value) {
+    if (!value || value === "")
+      return value;
+    if (this._maskFormatter) {
+      try {
+        const formattedValue = this._maskFormatter.applyMask(this._maskFormatter.removeMask(value));
+        if (this._inputElem) {
+          this._inputElem.value = formattedValue;
+          return this._inputElem.value;
+        }
+        else {
+          this.value = formattedValue;
+          return this.value;
+        }
+      }
+      catch (e) {
+        this.errorMessage = e.message;
+      }
     }
+    return value;
   }
   handleChange() {
     if (!this._inputElem) {
@@ -156,8 +210,10 @@ export class EzTextInput {
     this.controlChangeValue();
   }
   handleSlotChange(ev) {
+    var _a;
     const slot = ev.target;
     const content = slot.assignedElements()[0];
+    this.hasRightSlotContent = false;
     if (content) {
       content.style.position = "absolute";
       content.style.display = "flex";
@@ -183,10 +239,14 @@ export class EzTextInput {
         if (this._labelElem) {
           this._labelElem.classList.add("input__label--right");
         }
+        if (this._tooltipIconElem) {
+          this._tooltipIconElem.classList.add("rightIconSlot");
+        }
+        this.hasRightSlotContent = ((_a = content.children) === null || _a === void 0 ? void 0 : _a.length) > 0;
       }
       slot.name && ElementIDUtils.addIDInfo(content, slot.name);
     }
-    this.observeErrorMessage();
+    this.validateErrors();
   }
   doFocus() {
     if (this.label && this._labelElem && !this._labelElem.classList.contains("input__label--floated")) {
@@ -194,21 +254,43 @@ export class EzTextInput {
     }
     this.adjustColorContentSlot("var(--ez-text-input__input--focus--icon-color)");
   }
+  getValue() {
+    return this.mask && this.cleanValueMask ? this.applyMask(this.value) : this.value;
+  }
+  buildLabelClass() {
+    let classList = this.enabled ? 'input__label' : 'input__label input__label--disabled';
+    if (this.errorMessage)
+      classList = classList + ' hasError';
+    if (this.forceLabelFloat)
+      classList = classList + ' input__label--floated';
+    return classList;
+  }
+  buildPlaceholder() {
+    if (this.alternativePlaceholder)
+      return this.alternativePlaceholder;
+    return (this.mode === "slim" && this.label) ? this.label : '';
+  }
+  checkIsOverflowing() {
+    if (this._inputElem) {
+      this._isOverflowing = this._inputElem.offsetWidth < this._inputElem.scrollWidth;
+      return;
+    }
+    this._isOverflowing = false;
+  }
   //---------------------------------------------
   // Lifecycle web component
   //---------------------------------------------
-  componentDidLoad() {
-    this.observeErrorMessage();
-    this.observeMask();
-    this.adjustFloatingLabel();
-    this.adjustBorderInput();
-  }
   componentWillLoad() {
     this.observeMask();
     if (this.value) {
       if (this._maskFormatter) {
         try {
-          this.value = this._maskFormatter.format(this.value);
+          if (this.cleanValueMask) {
+            this.applyMask(this.value);
+          }
+          else {
+            this.value = this._maskFormatter.format(this.value);
+          }
         }
         catch (e) {
           this.errorMessage = e.message;
@@ -220,12 +302,32 @@ export class EzTextInput {
       }
     }
   }
+  componentDidLoad() {
+    var _a;
+    this.validateErrors();
+    this.observeMask();
+    this.adjustFloatingLabel();
+    this.adjustBorderInput();
+    this.checkIsOverflowing();
+    if (this.autoFocus) {
+      requestAnimationFrame(() => {
+        this.setFocus({ selectText: true });
+      });
+    }
+    (_a = this._inputElem) === null || _a === void 0 ? void 0 : _a.addEventListener('focus', () => {
+      var _a;
+      this._inputElem.setSelectionRange(0, (_a = this._inputElem) === null || _a === void 0 ? void 0 : _a.value.length);
+    });
+  }
+  componentDidRender() {
+    this.adjustFloatingLabel();
+  }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
     return (h(Host, { style: this._hostElement.classList.contains("grid_editor") ? { "height": "100%" } : null }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), 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", { "data-element-id": ElementIDUtils.getInternalIDInfo("input"), onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: this.password ? "password" : "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, "data-element-id": ElementIDUtils.getInternalIDInfo("message_box") }, this.errorMessage)));
+      h("label", { ref: (el) => this._labelElem = el, class: this.buildLabelClass(), onClick: () => this._inputElem.focus(), title: this.label }, this.label)
+      : null, h("input", { "data-element-id": ElementIDUtils.getInternalIDInfo("input"), onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: this.password ? "password" : "text", class: `${this.mode === "slim" ? "input--slim" : ""}`, placeholder: this.buildPlaceholder(), value: this.getValue(), disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), h("ez-tooltip", { anchoringElement: this._hostElement, message: this.getValue(), active: this._isOverflowing, useAnchorSize: true }), this.canShowError && this.mode != "slim" && this.errorMessage &&
+      h("ez-tooltip", { type: "error", message: this.errorMessage }, h("ez-icon", { class: `tooltip-icon ${this.errorMessage ? "hasError" : ""} ${this.hasRightSlotContent ? "rightIconSlot" : ""}`, "data-element-id": ElementIDUtils.getInternalIDInfo("tooltip-icon"), ref: (el) => this._tooltipIconElem = el, iconName: "alert-circle" })), h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }, " ")));
   }
   static get is() { return "ez-text-input"; }
   static get encapsulation() { return "shadow"; }
@@ -258,6 +360,23 @@ export class EzTextInput {
         "attribute": "label",
         "reflect": true
       },
+      "alternativePlaceholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Texto alternativo a ser apresentado como t\u00EDtulo do campo."
+        },
+        "attribute": "alternative-placeholder",
+        "reflect": true
+      },
       "value": {
         "type": "string",
         "mutable": true,
@@ -310,6 +429,24 @@ export class EzTextInput {
         "attribute": "error-message",
         "reflect": true
       },
+      "hasInvalid": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o campo est\u00E1 em estado inv\u00E1lido (bordas vermelhas)."
+        },
+        "attribute": "has-invalid",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "mask": {
         "type": "string",
         "mutable": false,
@@ -327,6 +464,24 @@ export class EzTextInput {
         "attribute": "mask",
         "reflect": false
       },
+      "cleanValueMask": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Para remover a m\u00E1scara quando fizer um apply no formul\u00E1rio."
+        },
+        "attribute": "clean-value-mask",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "canShowError": {
         "type": "boolean",
         "mutable": false,
@@ -415,9 +570,33 @@ export class EzTextInput {
         "attribute": "password",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "autoFocus": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true o campo receber\u00E1 o foco ao ser renderizado."
+        },
+        "attribute": "auto-focus",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
+  static get states() {
+    return {
+      "hasRightSlotContent": {},
+      "forceLabelFloat": {}
+    };
+  }
   static get events() {
     return [{
         "method": "ezChange",
@@ -497,14 +676,23 @@ export class EzTextInput {
   static get elementRef() { return "_hostElement"; }
   static get watchers() {
     return [{
+        "propName": "hasInvalid",
+        "methodName": "observeHasInvalid"
+      }, {
         "propName": "errorMessage",
-        "methodName": "observeErrorMessage"
+        "methodName": "observeHasInvalid"
+      }, {
+        "propName": "canShowError",
+        "methodName": "observeHasInvalid"
       }, {
         "propName": "mask",
         "methodName": "observeMask"
       }, {
         "propName": "value",
         "methodName": "observeValue"
+      }, {
+        "propName": "alternativePlaceholder",
+        "methodName": "observeAlternativePlaceholder"
       }];
   }
 }

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

@@ -10,6 +10,8 @@ export class EzTimeInput {
     this.showSeconds = false;
     this.mode = "regular";
     this.canShowError = true;
+    this.autoFocus = false;
+    this.alternativePlaceholder = undefined;
   }
   observeErrorMessage() {
     var _a;
@@ -130,6 +132,11 @@ export class EzTimeInput {
   //---------------------------------------------
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
+    if (this.autoFocus) {
+      requestAnimationFrame(() => {
+        this.setFocus({ selectText: true });
+      });
+    }
   }
   componentWillLoad() {
     this.observeShowSeconds();
@@ -142,7 +149,7 @@ export class EzTimeInput {
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (h(Host, null, h("ez-text-input", { class: "time__input", "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), 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, canShowError: this.canShowError }, h("ez-icon", { slot: "leftIcon", iconName: "timer-outline" }))));
+    return (h(Host, null, h("ez-text-input", { class: "time__input", "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), 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, canShowError: this.canShowError, alternativePlaceholder: this.alternativePlaceholder }, h("ez-icon", { slot: "leftIcon", iconName: "timer-outline" }))));
   }
   static get is() { return "ez-time-input"; }
   static get encapsulation() { return "shadow"; }
@@ -281,6 +288,41 @@ export class EzTimeInput {
         "attribute": "can-show-error",
         "reflect": true,
         "defaultValue": "true"
+      },
+      "autoFocus": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true o campo de texto receber\u00E1 o foco ao ser renderizado."
+        },
+        "attribute": "auto-focus",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "alternativePlaceholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Texto alternativo ser apresentado como t\u00EDtulo do campo."
+        },
+        "attribute": "alternative-placeholder",
+        "reflect": false
       }
     };
   }

package/dist/collection/components/ez-tooltip/ez-tooltip.css

@@ -0,0 +1,61 @@
+:host {
+    --triangle-size: 8px;
+}
+
+.tooltip {
+    position: absolute;
+    z-index: var(--elevation--24);
+    padding: var(--space--extra-small, 3px) var(--space--small, 6px);
+    border-radius: var(--border--radius-small);
+    box-sizing: border-box;
+    font-family: var(--font-pattern	, 'Roboto', sans-serif);
+    font-size: var(--text--small, 12px);
+    font-weight: var(--text-weight--medium, 400);
+    text-align: center;
+    width: max-content;
+    /* Initially hide the tooltip */
+    display: none;
+}
+
+.arrow {
+    position: absolute;
+    width: var(--triangle-size);
+    height: var(--triangle-size);
+    transform: rotate(45deg);
+}
+
+.default-tooltip {
+    background: var(--title--primary, #2b3a54);
+    color: var(--color--inverted);
+}
+
+.default-tooltip .arrow {
+    background: var(--title--primary, #2b3a54);
+}
+
+.error-tooltip {
+    background: var(--color-alert--error-800, #BD0025);
+    color: var(--color--error-200, #F7E0E5);
+}
+
+.error-tooltip .arrow {
+    background: var(--color-alert--error-800, #BD0025);
+}
+
+.success-tooltip {
+    background: var(--color--success, #00cb94);
+    color: var(--color--success-200, #EBFFFA);
+}
+
+.success-tooltip .arrow {
+    background: var(--color--success, #00cb94);
+}
+
+.warning-tooltip {
+    background: var(--color--warning, #f2d410);
+    color: var(--color--warning-200, #FDF8D8);
+}
+
+.warning-tooltip .arrow {
+    background: var(--color--warning, #f2d410);
+}