@3t-transform/threeteeui 1.9.102 → 1.9.103

package/dist/collection/components/molecules/tttx-tooltip/tttx-tooltip.js

@@ -1,253 +1,253 @@
-import { h } from '@stencil/core';
-export class TttxTooltip {
-  constructor() {
-    this.show = () => {
-      if (this.disabled)
-        return;
-      if (this.showOnlyOnOverflow && !this.contentOverflows())
-        return;
-      this.timeoutId = setTimeout(() => {
-        const rect = this.el.getBoundingClientRect();
-        this.tooltipStyles = this.getFixedStyles(rect);
-        this.visible = true;
-      }, this.delay);
-    };
-    this.hide = () => {
-      clearTimeout(this.timeoutId);
-      this.visible = false;
-    };
-    this.toggle = () => {
-      this.visible ? this.hide() : this.show();
-    };
-    this.text = undefined;
-    this.placement = 'top';
-    this.trigger = ['hover', 'click'];
-    this.delay = 0;
-    this.disabled = false;
-    this.ariaLabel = '';
-    this.showShadow = true;
-    this.showOnlyOnOverflow = false;
-    this.visible = false;
-    this.tooltipStyles = {};
-  }
-  connectedCallback() {
-    if (this.trigger.includes('hover')) {
-      this.el.addEventListener('mouseenter', this.show);
-      this.el.addEventListener('mouseleave', this.hide);
-    }
-    if (this.trigger.includes('focus')) {
-      this.el.addEventListener('focus', this.show);
-      this.el.addEventListener('blur', this.hide);
-    }
-    if (this.trigger.includes('click')) {
-      this.el.addEventListener('click', this.toggle);
-    }
-  }
-  disconnectedCallback() {
-    this.el.removeEventListener('mouseenter', this.show);
-    this.el.removeEventListener('mouseleave', this.hide);
-    this.el.removeEventListener('focus', this.show);
-    this.el.removeEventListener('blur', this.hide);
-    this.el.removeEventListener('click', this.toggle);
-  }
-  /**
-   * Helps determine where the tooltip should sit relative to its parent element.
-   * It looks at the element's current position and size, then offsets
-   * the tooltip based on the placement (top, bottom, left, right).
-   * This makes sure the tooltip always appears in the right spot,
-   * even inside a shadow DOM.
-   */
-  getFixedStyles(rect) {
-    var _a;
-    const centerX = rect.left + rect.width / 2;
-    const centerY = rect.top + rect.height / 2;
-    const stylesMap = {
-      top: { top: `${rect.top - 8}px`, left: `${centerX}px`, transform: 'translate(-50%, -100%)' },
-      bottom: { top: `${rect.bottom + 8}px`, left: `${centerX}px`, transform: 'translateX(-50%)' },
-      left: { top: `${centerY}px`, left: `${rect.left - 8}px`, transform: 'translate(-100%, -50%)' },
-      right: { top: `${centerY}px`, left: `${rect.right + 8}px`, transform: 'translateY(-50%)' },
-    };
-    return (_a = stylesMap[this.placement]) !== null && _a !== void 0 ? _a : stylesMap.top;
-  }
-  contentOverflows() {
-    var _a;
-    const slotEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
-    if (!slotEl)
-      return false;
-    const assignedElements = slotEl.assignedElements();
-    if (!assignedElements.length)
-      return false;
-    return assignedElements.some(el => el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight);
-  }
-  render() {
-    return (h("div", { class: "tooltip-wrapper" }, h("slot", null), this.visible && (h("div", { class: `tooltip-box ${this.placement} ${!this.showShadow ? 'no-shadow' : ''}`, style: this.tooltipStyles, role: "tooltip", "aria-label": this.ariaLabel || this.text }, this.text, h("span", { class: "arrow" })))));
-  }
-  static get is() { return "tttx-tooltip_localcomponent"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tttx-tooltip.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tttx-tooltip.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "text": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "text",
-        "reflect": false
-      },
-      "placement": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'top' | 'bottom' | 'left' | 'right'",
-          "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "placement",
-        "reflect": false,
-        "defaultValue": "'top'"
-      },
-      "trigger": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "Array<'hover' | 'click' | 'focus'>",
-          "resolved": "(\"click\" | \"focus\" | \"hover\")[]",
-          "references": {
-            "Array": {
-              "location": "global"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "defaultValue": "['hover', 'click']"
-      },
-      "delay": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "delay",
-        "reflect": false,
-        "defaultValue": "0"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "ariaLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "aria-label",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "showShadow": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "show-shadow",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "showOnlyOnOverflow": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "show-only-on-overflow",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "visible": {},
-      "tooltipStyles": {}
-    };
-  }
-  static get elementRef() { return "el"; }
-}
+import { h } from '@stencil/core';
+export class TttxTooltip {
+  constructor() {
+    this.show = () => {
+      if (this.disabled)
+        return;
+      if (this.showOnlyOnOverflow && !this.contentOverflows())
+        return;
+      this.timeoutId = setTimeout(() => {
+        const rect = this.el.getBoundingClientRect();
+        this.tooltipStyles = this.getFixedStyles(rect);
+        this.visible = true;
+      }, this.delay);
+    };
+    this.hide = () => {
+      clearTimeout(this.timeoutId);
+      this.visible = false;
+    };
+    this.toggle = () => {
+      this.visible ? this.hide() : this.show();
+    };
+    this.text = undefined;
+    this.placement = 'top';
+    this.trigger = ['hover', 'click'];
+    this.delay = 0;
+    this.disabled = false;
+    this.ariaLabel = '';
+    this.showShadow = true;
+    this.showOnlyOnOverflow = false;
+    this.visible = false;
+    this.tooltipStyles = {};
+  }
+  connectedCallback() {
+    if (this.trigger.includes('hover')) {
+      this.el.addEventListener('mouseenter', this.show);
+      this.el.addEventListener('mouseleave', this.hide);
+    }
+    if (this.trigger.includes('focus')) {
+      this.el.addEventListener('focus', this.show);
+      this.el.addEventListener('blur', this.hide);
+    }
+    if (this.trigger.includes('click')) {
+      this.el.addEventListener('click', this.toggle);
+    }
+  }
+  disconnectedCallback() {
+    this.el.removeEventListener('mouseenter', this.show);
+    this.el.removeEventListener('mouseleave', this.hide);
+    this.el.removeEventListener('focus', this.show);
+    this.el.removeEventListener('blur', this.hide);
+    this.el.removeEventListener('click', this.toggle);
+  }
+  /**
+   * Helps determine where the tooltip should sit relative to its parent element.
+   * It looks at the element's current position and size, then offsets
+   * the tooltip based on the placement (top, bottom, left, right).
+   * This makes sure the tooltip always appears in the right spot,
+   * even inside a shadow DOM.
+   */
+  getFixedStyles(rect) {
+    var _a;
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+    const stylesMap = {
+      top: { top: `${rect.top - 8}px`, left: `${centerX}px`, transform: 'translate(-50%, -100%)' },
+      bottom: { top: `${rect.bottom + 8}px`, left: `${centerX}px`, transform: 'translateX(-50%)' },
+      left: { top: `${centerY}px`, left: `${rect.left - 8}px`, transform: 'translate(-100%, -50%)' },
+      right: { top: `${centerY}px`, left: `${rect.right + 8}px`, transform: 'translateY(-50%)' },
+    };
+    return (_a = stylesMap[this.placement]) !== null && _a !== void 0 ? _a : stylesMap.top;
+  }
+  contentOverflows() {
+    var _a;
+    const slotEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+    if (!slotEl)
+      return false;
+    const assignedElements = slotEl.assignedElements();
+    if (!assignedElements.length)
+      return false;
+    return assignedElements.some(el => el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight);
+  }
+  render() {
+    return (h("div", { class: "tooltip-wrapper" }, h("slot", null), this.visible && (h("div", { class: `tooltip-box ${this.placement} ${!this.showShadow ? 'no-shadow' : ''}`, style: this.tooltipStyles, role: "tooltip", "aria-label": this.ariaLabel || this.text }, this.text, h("span", { class: "arrow" })))));
+  }
+  static get is() { return "tttx-tooltip_1_9_103"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-tooltip.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-tooltip.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "text": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "text",
+        "reflect": false
+      },
+      "placement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'top' | 'bottom' | 'left' | 'right'",
+          "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placement",
+        "reflect": false,
+        "defaultValue": "'top'"
+      },
+      "trigger": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Array<'hover' | 'click' | 'focus'>",
+          "resolved": "(\"click\" | \"focus\" | \"hover\")[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "['hover', 'click']"
+      },
+      "delay": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "delay",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "ariaLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "aria-label",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "showShadow": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-shadow",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "showOnlyOnOverflow": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-only-on-overflow",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "visible": {},
+      "tooltipStyles": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+}