@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-81596.1 → 0.0.0-bugfix-dev-KB-85226.0

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

@@ -2,6 +2,7 @@ import { h, Host } from "@stencil/core";
 import { ElementIDUtils, MaskFormatter } from "@sankhyalabs/core";
 export class EzTextInput {
   constructor() {
+    this._isOverflowing = false;
     this.label = undefined;
     this.value = undefined;
     this.enabled = true;
@@ -17,29 +18,17 @@ export class EzTextInput {
     this.autoFocus = false;
     this.hasRightSlotContent = false;
   }
-  observeHasInvalid() {
-    if (!this._inputElem)
+  observeHasInvalid(newValue, oldValue) {
+    if (newValue === oldValue) {
       return;
-    if (this.hasInvalid) {
-      this._inputElem.classList.add("hasError");
-    }
-    else {
-      this._inputElem.classList.remove("hasError");
     }
+    this.validateErrors();
   }
-  observeErrorMessage() {
-    if (this._inputElem) {
-      this.isInvalid().then((hasError) => {
-        if (hasError) {
-          this._inputElem.classList.add("hasError");
-          // this._tooltipPositioningObserver?.observe(this._inputElem);
-        }
-        else {
-          this._inputElem.classList.remove("hasError");
-          // this.removeGlobalTooltip();
-        }
-      });
+  observeErrorMessage(newValue, oldValue) {
+    if (newValue === oldValue) {
+      return;
     }
+    this.validateErrors();
   }
   observeMask() {
     if (this.mask) {
@@ -57,6 +46,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);
@@ -67,6 +57,25 @@ export class EzTextInput {
   //---------------------------------------------
   // Private methods
   //---------------------------------------------
+  validateErrors() {
+    const hasErrorMessage = this.handleValidateErrorMessage(this.errorMessage);
+    const hasError = 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")) {
@@ -125,7 +134,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
@@ -236,7 +245,7 @@ export class EzTextInput {
       }
       slot.name && ElementIDUtils.addIDInfo(content, slot.name);
     }
-    this.observeErrorMessage();
+    this.validateErrors();
   }
   doFocus() {
     if (this.label && this._labelElem && !this._labelElem.classList.contains("input__label--floated")) {
@@ -247,6 +256,13 @@ export class EzTextInput {
   getValue() {
     return this.mask && this.cleanValueMask ? this.applyMask(this.value) : this.value;
   }
+  checkIsOverflowing() {
+    if (this._inputElem) {
+      this._isOverflowing = this._inputElem.offsetWidth < this._inputElem.scrollWidth;
+      return;
+    }
+    this._isOverflowing = false;
+  }
   //---------------------------------------------
   // Lifecycle web component
   //---------------------------------------------
@@ -274,10 +290,11 @@ export class EzTextInput {
   }
   componentDidLoad() {
     var _a;
-    this.observeErrorMessage();
+    this.validateErrors();
     this.observeMask();
     this.adjustFloatingLabel();
     this.adjustBorderInput();
+    this.checkIsOverflowing();
     if (this.autoFocus) {
       requestAnimationFrame(() => {
         this.setFocus({ selectText: true });
@@ -292,7 +309,7 @@ export class EzTextInput {
     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"} ${this.errorMessage ? "hasError" : ""}`, 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.getValue(), disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), h("ez-tooltip", { anchoringElement: this._hostElement, message: this.getValue(), minWidth: 30 }), this.canShowError && this.mode != "slim" && this.errorMessage &&
+      : 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.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"; }

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

@@ -12,6 +12,7 @@
     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;
 }

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

@@ -11,7 +11,8 @@ export class EzTooltip {
     this.type = 'default';
     this.debouncingTime = 500;
     this.active = true;
-    this.minWidth = 150;
+    this.maxWidth = 200;
+    this.useAnchorSize = false;
   }
   watchAnchoringElement(newValue, oldValue) {
     if (newValue) {
@@ -47,6 +48,10 @@ export class EzTooltip {
     if (!element || !this._opened) {
       return;
     }
+    if (this.useAnchorSize) {
+      const anchorSize = element.getBoundingClientRect().width;
+      this._tooltipElement.style.width = `${anchorSize}px`;
+    }
     await computePosition(element, this._tooltipElement, {
       placement: this.placement,
       middleware: [
@@ -108,7 +113,7 @@ export class EzTooltip {
         "tooltip": true,
         [`${this.type}-tooltip`]: true,
       }, style: {
-        minWidth: `${this.minWidth}px`
+        maxWidth: (this.maxWidth && !this.useAnchorSize) ? `${this.maxWidth}px` : undefined,
       }, role: "tooltip", "data-element-id": ElementIDUtils.getInternalIDInfo("tooltip") }), this.message, h("div", { ref: ref => this._arrowElement = ref, class: "arrow" })), h("slot", { onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
   }
   static get is() { return "ez-tooltip"; }
@@ -254,7 +259,7 @@ export class EzTooltip {
         "reflect": false,
         "defaultValue": "true"
       },
-      "minWidth": {
+      "maxWidth": {
         "type": "number",
         "mutable": false,
         "complexType": {
@@ -266,11 +271,29 @@ export class EzTooltip {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Define a largura m\u00EDnima do elemento."
+          "text": "Define a largura m\u00E1xima do elemento."
+        },
+        "attribute": "max-width",
+        "reflect": false,
+        "defaultValue": "200"
+      },
+      "useAnchorSize": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o elemento manter\u00E1 o mesmo tamanho do componente de ancora."
         },
-        "attribute": "min-width",
+        "attribute": "use-anchor-size",
         "reflect": false,
-        "defaultValue": "150"
+        "defaultValue": "false"
       }
     };
   }