@sankhyalabs/ezui 5.22.0-dev.54 → 5.22.0-dev.56

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

@@ -15,18 +15,19 @@ export class EzTextInput {
     this.noBorder = false;
     this.password = false;
     this.autoFocus = false;
+    this.hasRightSlotContent = false;
   }
   observeErrorMessage() {
     if (this._inputElem) {
       this.isInvalid().then((hasError) => {
-        var _a, _b;
+        var _a;
         if (hasError) {
           this._inputElem.classList.add("hasError");
-          (_a = this._messageBoxElem) === null || _a === void 0 ? void 0 : _a.classList.add("hasError");
+          (_a = this._tooltipPositioningObserver) === null || _a === void 0 ? void 0 : _a.observe(this._inputElem);
         }
         else {
           this._inputElem.classList.remove("hasError");
-          (_b = this._messageBoxElem) === null || _b === void 0 ? void 0 : _b.classList.remove("hasError");
+          this.removeGlobalTooltip();
         }
       });
     }
@@ -190,8 +191,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";
@@ -217,6 +220,10 @@ 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);
     }
@@ -228,26 +235,39 @@ export class EzTextInput {
     }
     this.adjustColorContentSlot("var(--ez-text-input__input--focus--icon-color)");
   }
+  renderGlobalTooltip() {
+    const tooltip = document.createElement('ez-tooltip');
+    tooltip.errorMessage = this.errorMessage;
+    tooltip.anchoringElement = this._tooltipIconElem;
+    document.body.appendChild(tooltip);
+    this._tooltipElem = tooltip;
+  }
+  removeGlobalTooltip() {
+    var _a;
+    if (!this._tooltipElem)
+      return;
+    this._tooltipElem.remove();
+    this._tooltipElem = undefined;
+    (_a = this._tooltipPositioningObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this._inputElem);
+  }
+  createTooltipPositioningObserver() {
+    const observer = new ResizeObserver(() => {
+      if (!this._tooltipElem)
+        return;
+      if (!this._tooltipIconElem)
+        return;
+      clearTimeout(this._observerDebounceTimeout);
+      this._observerDebounceTimeout = setTimeout(async () => {
+        if (this._tooltipElem) {
+          await this._tooltipElem.positionTooltip();
+        }
+      }, 200);
+    });
+    this._tooltipPositioningObserver = observer;
+  }
   //---------------------------------------------
   // Lifecycle web component
   //---------------------------------------------
-  componentDidLoad() {
-    this.observeErrorMessage();
-    this.observeMask();
-    this.adjustFloatingLabel();
-    this.adjustBorderInput();
-    if (this.autoFocus) {
-      requestAnimationFrame(() => {
-        this.setFocus({ selectText: true });
-      });
-    }
-    this._inputElem.addEventListener('focus', () => {
-      this._inputElem.setSelectionRange(0, this._inputElem.value.length);
-    });
-    if (this._inputElem) {
-      applyEllipsisToInput(this._inputElem);
-    }
-  }
   componentWillLoad() {
     this.observeMask();
     if (this.value) {
@@ -270,12 +290,52 @@ export class EzTextInput {
       }
     }
   }
+  componentDidLoad() {
+    var _a, _b;
+    this.observeErrorMessage();
+    this.observeMask();
+    this.adjustFloatingLabel();
+    this.adjustBorderInput();
+    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);
+    });
+    this.createTooltipPositioningObserver();
+    if (this._inputElem) {
+      (_b = this._tooltipPositioningObserver) === null || _b === void 0 ? void 0 : _b.observe(this._inputElem);
+      applyEllipsisToInput(this._inputElem);
+    }
+  }
+  componentDidRender() {
+    if (this._tooltipIconElem && !this._tooltipElem) {
+      this.renderGlobalTooltip();
+    }
+  }
+  componentDidUpdate() {
+    if (this._tooltipIconElem && this._tooltipElem) {
+      this._tooltipElem.positionTooltip();
+    }
+  }
+  disconnectedCallback() {
+    if (this._tooltipPositioningObserver) {
+      this._tooltipPositioningObserver.disconnect();
+    }
+    if (this._observerDebounceTimeout) {
+      clearTimeout(this._observerDebounceTimeout);
+    }
+    this.removeGlobalTooltip();
+  }
   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.mask && this.cleanValueMask ? this.applyMask(this.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.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.mask && this.cleanValueMask ? this.applyMask(this.value) : this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), this.canShowError && this.mode != "slim" && 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"; }
@@ -504,6 +564,11 @@ export class EzTextInput {
       }
     };
   }
+  static get states() {
+    return {
+      "hasRightSlotContent": {}
+    };
+  }
   static get events() {
     return [{
         "method": "ezChange",

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

@@ -0,0 +1,20 @@
+:host {
+    position: absolute;
+    z-index: var(--elevation--24);
+    background: var(--color-alert--error-800, #BD0025);
+    padding: var(--space--extra-small, 3px) var(--space--small, 6px);
+    color: var(--color--inverted);
+    border-radius: var(--border--radius-small);
+    display: none; /* Initially hide the tooltip */
+    transform: translateX(calc(-50% + 12px)) translateY(8px);
+}
+
+.tooltip::after{
+    --triangle-size: 8px;
+    content: '';
+    right: 50%;
+    border: var(--triangle-size) solid transparent;
+    border-bottom-color: var(--color-alert--error-800, #BD0025);
+    position: absolute;
+    transform: translateX(calc(50%)) translateY(-100%);
+  }

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

@@ -0,0 +1,116 @@
+import { ElementIDUtils } from "@sankhyalabs/core";
+import { h } from "@stencil/core";
+export class EzTooltip {
+  constructor() {
+    this.errorMessage = undefined;
+    this.anchoringElement = undefined;
+  }
+  /**
+   * TODO: Implementar a possibilidade de definir a posição do tooltip.
+   */
+  // @Prop() tooltipSide: 'left' | 'right' | 'top' | 'bottom' = 'bottom';
+  /**
+   * Reposiciona o tooltip de acordo com a posição do elemento de ancoragem.
+   */
+  async positionTooltip() {
+    const anchorRect = this.anchoringElement.getBoundingClientRect();
+    const top = (anchorRect.bottom + window.scrollY);
+    const left = (anchorRect.left + window.scrollX);
+    this._element.style.top = `${top}px`;
+    this._element.style.left = `${left}px`;
+  }
+  setEvents() {
+    window.addEventListener('scroll', () => {
+      this.positionTooltip();
+    }, { capture: true });
+    window.addEventListener('resize', () => {
+      this.positionTooltip();
+    }, { capture: true });
+    this.anchoringElement.addEventListener('mouseover', () => {
+      this._element.style.display = 'block';
+    });
+    this.anchoringElement.addEventListener('mouseout', () => {
+      this._element.style.display = 'none';
+    });
+  }
+  componentDidLoad() {
+    this.positionTooltip();
+    this.setEvents();
+  }
+  render() {
+    return (h("div", { inert: true, class: "tooltip", role: "tooltip", "data-element-id": ElementIDUtils.getInternalIDInfo("tooltip") }, this.errorMessage));
+  }
+  static get is() { return "ez-tooltip"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-tooltip.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-tooltip.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "errorMessage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Mensagem de erro que ser\u00E1 apresentada no tooltip."
+        },
+        "attribute": "error-message",
+        "reflect": false
+      },
+      "anchoringElement": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLElement",
+          "resolved": "HTMLElement",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Elemento HTML que ser\u00E1 utilizado como ancoragem do tooltip."
+        }
+      }
+    };
+  }
+  static get methods() {
+    return {
+      "positionTooltip": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Reposiciona o tooltip de acordo com a posi\u00E7\u00E3o do elemento de ancoragem.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "_element"; }
+}

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

@@ -296,6 +296,12 @@ export const EzToast: {
   new (): EzToast;
 };
 
+interface EzTooltip extends Components.EzTooltip, HTMLElement {}
+export const EzTooltip: {
+  prototype: EzTooltip;
+  new (): EzTooltip;
+};
+
 interface EzTree extends Components.EzTree, HTMLElement {}
 export const EzTree: {
   prototype: EzTree;