@haiilo/catalyst 8.1.0 → 8.2.0

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

@@ -3,317 +3,318 @@ import { h, Host } from "@stencil/core";
 import isTouchScreen from "../../utils/is-touch-screen";
 let nextUniqueId = 0;
 export class CatTooltip {
-  constructor() {
-    this.id = `cat-tooltip-${nextUniqueId++}`;
-    this.hidden = false;
-    this.hasSlottedContent = false;
-    this.content = '';
-    this.disabled = false;
-    this.placement = 'top';
-    this.round = false;
-    this.size = 'm';
-    this.showDelay = 250;
-    this.hideDelay = 0;
-    this.longTouchDuration = 1000;
-    this.boundShowListener = this.showListener.bind(this);
-    this.boundHideListener = this.hideListener.bind(this);
-    this.boundWindowTouchStartListener = this.windowTouchStartListener.bind(this);
-    this.boundTouchStartListener = this.touchStartListener.bind(this);
-    this.boundTouchEndListener = this.touchEndListener.bind(this);
-  }
-  handleKeyDown({ key }) {
-    key === 'Escape' && this.hideTooltip();
-  }
-  componentDidLoad() {
-    const slot = this.hostElement.shadowRoot?.querySelector('slot');
-    this.trigger = slot?.assignedElements?.()?.[0];
-    if (this.trigger && !this.trigger.hasAttribute('aria-describedby')) {
-      this.trigger.setAttribute('aria-describedby', this.id);
+    constructor() {
+        this.id = `cat-tooltip-${nextUniqueId++}`;
+        this.inactive = false;
+        this.open = false;
+        this.content = '';
+        this.disabled = false;
+        this.placement = 'top';
+        this.round = false;
+        this.size = 'm';
+        this.showDelay = 250;
+        this.hideDelay = 0;
+        this.longTouchDuration = 1000;
+        this.boundShowListener = this.showListener.bind(this);
+        this.boundHideListener = this.hideListener.bind(this);
+        this.boundWindowTouchStartListener = this.windowTouchStartListener.bind(this);
+        this.boundTouchStartListener = this.touchStartListener.bind(this);
+        this.boundTouchEndListener = this.touchEndListener.bind(this);
     }
-    if (isTouchScreen) {
-      window.addEventListener('touchstart', this.boundWindowTouchStartListener);
-      this.trigger?.addEventListener('touchstart', this.boundTouchStartListener);
-      this.trigger?.addEventListener('touchend', this.boundTouchEndListener);
+    handleKeyDown({ key }) {
+        key === 'Escape' && this.hideTooltip();
     }
-    else {
-      this.trigger?.addEventListener('focusin', this.boundShowListener);
-      this.trigger?.addEventListener('focusout', this.boundHideListener);
-      this.trigger?.addEventListener('mouseenter', this.boundShowListener);
-      this.trigger?.addEventListener('mouseleave', this.boundHideListener);
+    componentDidLoad() {
+        const slot = this.hostElement.shadowRoot?.querySelector('slot');
+        this.trigger = slot?.assignedElements?.()?.[0];
+        if (this.trigger && !this.trigger.hasAttribute('aria-describedby')) {
+            this.trigger.setAttribute('aria-describedby', this.id);
+        }
+        if (isTouchScreen) {
+            window.addEventListener('touchstart', this.boundWindowTouchStartListener);
+            this.trigger?.addEventListener('touchstart', this.boundTouchStartListener);
+            this.trigger?.addEventListener('touchend', this.boundTouchEndListener);
+        }
+        else {
+            this.trigger?.addEventListener('focusin', this.boundShowListener);
+            this.trigger?.addEventListener('focusout', this.boundHideListener);
+            this.trigger?.addEventListener('mouseenter', this.boundShowListener);
+            this.trigger?.addEventListener('mouseleave', this.boundHideListener);
+        }
+    }
+    componentWillRender() {
+        this.inactive = this.disabled || (!this.content && !this.hostElement.querySelector('[slot="content"]'));
+    }
+    disconnectedCallback() {
+        if (isTouchScreen) {
+            window.removeEventListener('touchstart', this.boundWindowTouchStartListener);
+            this.trigger?.removeEventListener('touchstart', this.boundTouchStartListener);
+            this.trigger?.removeEventListener('touchend', this.boundTouchEndListener);
+        }
+        else {
+            this.trigger?.removeEventListener('mouseenter', this.boundShowListener);
+            this.trigger?.removeEventListener('mouseleave', this.boundHideListener);
+            this.trigger?.removeEventListener('focusin', this.boundShowListener);
+            this.trigger?.removeEventListener('focusout', this.boundHideListener);
+        }
     }
-  }
-  componentWillRender() {
-    this.hasSlottedContent = !!this.hostElement.querySelector('[slot="content"]');
-    this.hidden = this.disabled || (!this.content && !this.hasSlottedContent);
-  }
-  disconnectedCallback() {
-    if (isTouchScreen) {
-      window.removeEventListener('touchstart', this.boundWindowTouchStartListener);
-      this.trigger?.removeEventListener('touchstart', this.boundTouchStartListener);
-      this.trigger?.removeEventListener('touchend', this.boundTouchEndListener);
+    render() {
+        return (h(Host, null, h("slot", null), h("div", { ref: el => (this.tooltip = el), id: this.id, role: "tooltip", "aria-hidden": !this.open, "aria-live": this.open ? 'polite' : 'off', class: {
+                tooltip: true,
+                'tooltip-hidden': this.inactive,
+                'tooltip-round': this.round,
+                [`tooltip-${this.size}`]: Boolean(this.size)
+            } }, h("slot", { name: "content" }, h("p", null, this.content)))));
     }
-    else {
-      this.trigger?.removeEventListener('mouseenter', this.boundShowListener);
-      this.trigger?.removeEventListener('mouseleave', this.boundHideListener);
-      this.trigger?.removeEventListener('focusin', this.boundShowListener);
-      this.trigger?.removeEventListener('focusout', this.boundHideListener);
+    async update() {
+        if (this.trigger && this.tooltip) {
+            await computePosition(this.trigger, this.tooltip, {
+                strategy: 'fixed',
+                placement: this.placement,
+                middleware: [offset(CatTooltip.OFFSET), flip(), shift({ padding: CatTooltip.SHIFT_PADDING })]
+            }).then(({ x, y }) => {
+                if (this.tooltip) {
+                    Object.assign(this.tooltip.style, {
+                        left: `${Math.max(0, x)}px`,
+                        top: `${y}px`
+                    });
+                }
+            });
+        }
     }
-  }
-  render() {
-    return (h(Host, null, h("slot", null), h("div", { ref: el => (this.tooltip = el), id: this.id, "aria-hidden": this.hidden, class: {
-        tooltip: true,
-        'tooltip-hidden': this.hidden,
-        'tooltip-round': this.round,
-        [`tooltip-${this.size}`]: Boolean(this.size)
-      } }, this.hasSlottedContent ? h("slot", { name: "content" }) : this.content)));
-  }
-  async update() {
-    if (this.trigger && this.tooltip) {
-      await computePosition(this.trigger, this.tooltip, {
-        strategy: 'fixed',
-        placement: this.placement,
-        middleware: [offset(CatTooltip.OFFSET), flip(), shift({ padding: CatTooltip.SHIFT_PADDING })]
-      }).then(({ x, y }) => {
-        if (this.tooltip) {
-          Object.assign(this.tooltip.style, {
-            left: `${Math.max(0, x)}px`,
-            top: `${y}px`
-          });
+    showListener() {
+        window.clearTimeout(this.hideTimeout);
+        this.hideTimeout = undefined;
+        if (!this.showTimeout) {
+            this.showTimeout = window.setTimeout(() => {
+                this.showTimeout = undefined;
+                this.showTooltip();
+            }, this.showDelay);
         }
-      });
     }
-  }
-  showListener() {
-    window.clearTimeout(this.hideTimeout);
-    this.hideTimeout = undefined;
-    if (!this.showTimeout) {
-      this.showTimeout = window.setTimeout(() => {
+    hideListener() {
+        window.clearTimeout(this.showTimeout);
         this.showTimeout = undefined;
-        this.showTooltip();
-      }, this.showDelay);
+        if (!this.hideTimeout) {
+            this.hideTimeout = window.setTimeout(() => {
+                this.hideTimeout = undefined;
+                this.hideTooltip();
+            }, this.hideDelay);
+        }
     }
-  }
-  hideListener() {
-    window.clearTimeout(this.showTimeout);
-    this.showTimeout = undefined;
-    if (!this.hideTimeout) {
-      this.hideTimeout = window.setTimeout(() => {
-        this.hideTimeout = undefined;
-        this.hideTooltip();
-      }, this.hideDelay);
+    touchStartListener(event) {
+        event.stopPropagation();
+        if (!this.touchTimeout) {
+            this.touchTimeout = window.setTimeout(() => {
+                this.touchTimeout = undefined;
+                this.showTooltip();
+            }, this.longTouchDuration);
+        }
     }
-  }
-  touchStartListener(event) {
-    event.stopPropagation();
-    if (!this.touchTimeout) {
-      this.touchTimeout = window.setTimeout(() => {
+    touchEndListener() {
+        window.clearTimeout(this.touchTimeout);
         this.touchTimeout = undefined;
-        this.showTooltip();
-      }, this.longTouchDuration);
+        this.hideTooltip();
+    }
+    windowTouchStartListener() {
+        this.hideTooltip();
     }
-  }
-  touchEndListener() {
-    window.clearTimeout(this.touchTimeout);
-    this.touchTimeout = undefined;
-    this.hideTooltip();
-  }
-  windowTouchStartListener() {
-    this.hideTooltip();
-  }
-  showTooltip() {
-    if (this.trigger && this.tooltip) {
-      this.cleanupFloatingUi = autoUpdate(this.trigger, this.tooltip, () => this.update());
+    showTooltip() {
+        if (this.trigger && this.tooltip) {
+            this.cleanupFloatingUi = autoUpdate(this.trigger, this.tooltip, () => this.update());
+        }
+        if (!this.inactive) {
+            this.open = true;
+            this.tooltip?.classList.add('tooltip-show');
+        }
     }
-    if (!this.hidden) {
-      this.tooltip?.classList.add('tooltip-show');
+    hideTooltip() {
+        this.open = false;
+        this.tooltip?.classList.remove('tooltip-show');
+        this.cleanupFloatingUi?.();
+        this.cleanupFloatingUi = undefined;
     }
-  }
-  hideTooltip() {
-    this.tooltip?.classList.remove('tooltip-show');
-    this.cleanupFloatingUi?.();
-    this.cleanupFloatingUi = undefined;
-  }
-  static get is() { return "cat-tooltip"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["cat-tooltip.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["cat-tooltip.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "content": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The content of the tooltip."
-        },
-        "attribute": "content",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Specifies that the tooltip should be disabled. A disabled tooltip is unusable,\nand invisible. Corresponds with the native HTML disabled attribute."
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "placement": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Placement",
-          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
-          "references": {
-            "Placement": {
-              "location": "import",
-              "path": "@floating-ui/dom",
-              "id": "../node_modules/.pnpm/@floating-ui+dom@1.5.3/node_modules/@floating-ui/dom/src/types.d.ts::Placement"
+    static get is() { return "cat-tooltip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cat-tooltip.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cat-tooltip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "content": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The content of the tooltip."
+                },
+                "attribute": "content",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies that the tooltip should be disabled. A disabled tooltip is unusable,\nand invisible. Corresponds with the native HTML disabled attribute."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Placement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "@floating-ui/dom",
+                            "id": "../node_modules/.pnpm/@floating-ui+dom@1.5.3/node_modules/@floating-ui/dom/src/types.d.ts::Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The placement of the tooltip."
+                },
+                "attribute": "placement",
+                "reflect": false,
+                "defaultValue": "'top'"
+            },
+            "round": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use round tooltip edges."
+                },
+                "attribute": "round",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'s' | 'm' | 'l'",
+                    "resolved": "\"l\" | \"m\" | \"s\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the tooltip."
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'m'"
+            },
+            "showDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The delay time for showing tooltip in ms."
+                },
+                "attribute": "show-delay",
+                "reflect": false,
+                "defaultValue": "250"
+            },
+            "hideDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The delay time for hiding tooltip in ms."
+                },
+                "attribute": "hide-delay",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "longTouchDuration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The duration of tap to show the tooltip."
+                },
+                "attribute": "long-touch-duration",
+                "reflect": false,
+                "defaultValue": "1000"
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The placement of the tooltip."
-        },
-        "attribute": "placement",
-        "reflect": false,
-        "defaultValue": "'top'"
-      },
-      "round": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Use round tooltip edges."
-        },
-        "attribute": "round",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'s' | 'm' | 'l'",
-          "resolved": "\"l\" | \"m\" | \"s\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The size of the tooltip."
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'m'"
-      },
-      "showDelay": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The delay time for showing tooltip in ms."
-        },
-        "attribute": "show-delay",
-        "reflect": false,
-        "defaultValue": "250"
-      },
-      "hideDelay": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The delay time for hiding tooltip in ms."
-        },
-        "attribute": "hide-delay",
-        "reflect": false,
-        "defaultValue": "0"
-      },
-      "longTouchDuration": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The duration of tap to show the tooltip."
-        },
-        "attribute": "long-touch-duration",
-        "reflect": false,
-        "defaultValue": "1000"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "hasSlottedContent": {}
-    };
-  }
-  static get elementRef() { return "hostElement"; }
-  static get listeners() {
-    return [{
-        "name": "keydown",
-        "method": "handleKeyDown",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "open": {}
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 CatTooltip.OFFSET = 4;
 CatTooltip.SHIFT_PADDING = 4;