@oiz/stzh-components 0.0.1-pretest → 1.5.0-alpha

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

@@ -1,667 +1,667 @@
-import { Host, h } from "@stencil/core";
-import { arrow, computePosition, offset, shift, flip, autoUpdate } from "@floating-ui/dom";
-import { createFocusTrap } from "focus-trap";
-import { fetchTranslations } from "../../utils/translation-utils";
-import { waitForEvent } from "../../utils/event-utils";
-import { stopAnimations, animateTo } from "../../utils/animation-utils";
-import Arrow from "./assets/arrow.svg";
-const ANIMATION_SHOW = {
-  keyframes: [
-    { opacity: "0" },
-    { opacity: "1" }
-  ],
-  options: { duration: 100, easing: "linear" }
-};
-const ANIMATION_HIDE = {
-  keyframes: [
-    { opacity: "1" },
-    { opacity: "0" }
-  ],
-  options: { duration: 200, easing: "linear" }
-};
-const keyCode = {
-  ESC: 27
-};
-let tooltipCounter = 0;
-/**
- * @slot Trigger element inside
- * @slot content - Content of tooltip
- */
-export class StzhTooltip {
-  constructor() {
-    /** Whether tooltip should be open */
-    this.open = false;
-    /** Label of tooltip (used for screenreaders) */
-    this.label = "";
-    /** Content of tooltip (use instead of content slot) */
-    this.content = "";
-    /** Default placement of tooltip relative to trigger element */
-    this.placement = "bottom";
-    /** Shifting of tooltip content */
-    this.skidding = 0;
-    /** Distance from tooltip content to trigger (default: arrow height + 8px = 16) */
-    this.distance = 16;
-    /** Whether tooltip is interactive */
-    this.interactive = false;
-    /**
-     * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple
-     * options can be passed by separating them with a space. When manual is used, the tooltip must be activated
-     * programmatically.
-     */
-    this.trigger = "hover focus";
-    this.toggledByMethod = false;
-    this.isHovering = false;
-    this.onEscKey = (event) => {
-      if (event.keyCode === keyCode.ESC) {
-        this.hide();
-      }
-    };
-    this.computePosition = async () => {
-      if (!this.open) {
-        return;
-      }
-      const { x = 0, y = 0, strategy = "absolute", placement, middlewareData } = await computePosition(this.triggerElement.firstElementChild, this.contentElement, {
-        // strategy: 'fixed',
-        placement: this.placement,
-        middleware: [
-          offset({
-            mainAxis: this.distance,
-            crossAxis: this.skidding
-          }),
-          flip({
-            padding: 5
-          }),
-          shift({
-            padding: 5
-          }),
-          arrow({
-            element: this.arrowElement,
-            padding: 5
-          })
-        ],
-      });
-      this.middlewareData = middlewareData;
-      this.computedPlacement = placement;
-      Object.assign(this.contentElement.style, {
-        position: strategy,
-        left: `${x}px`,
-        top: `${y}px`,
-      });
-      Object.assign(this.arrowElement.style, {
-        left: x != null ? `${middlewareData.arrow.x}px` : "",
-        top: y != null ? `${middlewareData.arrow.y}px` : "",
-      });
-    };
-    this.onClickTrigger = () => {
-      if (this.hasTrigger("click")) {
-        this.toggle();
-      }
-    };
-    this.onMouseEnterTrigger = () => {
-      if (this.hasTrigger("hover")) {
-        this.isHovering = true;
-        this.show();
-      }
-    };
-    this.onMouseLeaveTrigger = () => {
-      if (this.hasTrigger("hover")) {
-        this.isHovering = false;
-        document.addEventListener("mousemove", this.onMouseMoveDocument);
-      }
-    };
-    this.onFocusTrigger = () => {
-      if (this.hasTrigger("focus")) {
-        this.show();
-      }
-    };
-    this.onBlurTrigger = () => {
-      if (this.hasTrigger("focus")) {
-        this.hide();
-      }
-    };
-    this.onMouseMoveDocument = (event) => {
-      const { clientX, clientY } = event;
-      if (!this.computedPlacement) {
-        return true;
-      }
-      const basePlacement = this.computedPlacement.split("-")[0];
-      const offsetData = this.middlewareData.offset;
-      const popperRect = this.contentElement.getBoundingClientRect();
-      if (!offsetData) {
-        return true;
-      }
-      const topDistance = basePlacement === "bottom" ? offsetData.y : 0;
-      const bottomDistance = basePlacement === "top" ? offsetData.y : 0;
-      const leftDistance = basePlacement === "right" ? offsetData.x : 0;
-      const rightDistance = basePlacement === "left" ? offsetData.x : 0;
-      const exceedsTop = popperRect.top - clientY > topDistance;
-      const exceedsBottom = clientY - popperRect.bottom > bottomDistance;
-      const exceedsLeft = popperRect.left - clientX > leftDistance;
-      const exceedsRight = clientX - popperRect.right > rightDistance;
-      if (exceedsTop || exceedsBottom || exceedsLeft || exceedsRight) {
-        document.removeEventListener("mousemove", this.onMouseMoveDocument);
-        if (!this.isHovering) {
-          this.hide();
-        }
-      }
-    };
-  }
-  /** Show tooltip content */
-  async show() {
-    if (this.open) {
-      return;
-    }
-    this.toggledByMethod = true;
-    this.open = true;
-    return waitForEvent(this.element, "stzhOpened");
-  }
-  /** Hide tooltip content */
-  async hide() {
-    if (!this.open) {
-      return;
-    }
-    this.toggledByMethod = true;
-    this.open = false;
-    return waitForEvent(this.element, "stzhClosed");
-  }
-  /** Toggle tooltip content */
-  async toggle() {
-    if (this.open) {
-      return await this.hide();
-    }
-    else {
-      return await this.show();
-    }
-  }
-  async update() {
-    return await this.computePosition();
-  }
-  async openWatcher(newValue) {
-    if (newValue) {
-      if (this.toggledByMethod) {
-        this.stzhOpen.emit({
-          component: "stzh-tooltip",
-        });
-      }
-      await stopAnimations(this.contentElement);
-      // safari seems to need will-change,
-      // otherwise it has problems animating the element with the drop shadow
-      this.contentElement.style.willChange = "transform, opacity, position, top, left, bottom, right";
-      this.contentElement.hidden = false;
-      await animateTo(this.contentElement, ANIMATION_SHOW.keyframes, ANIMATION_SHOW.options);
-      if (this.toggledByMethod) {
-        this.stzhOpened.emit({
-          component: "stzh-tooltip"
-        });
-      }
-    }
-    else {
-      if (this.toggledByMethod) {
-        this.stzhClose.emit({
-          component: "stzh-tooltip",
-        });
-      }
-      await stopAnimations(this.contentElement);
-      await animateTo(this.contentElement, ANIMATION_HIDE.keyframes, ANIMATION_HIDE.options);
-      this.contentElement.hidden = true;
-      this.contentElement.style.willChange = "auto";
-      if (this.toggledByMethod) {
-        this.stzhClosed.emit({
-          component: "stzh-tooltip"
-        });
-      }
-    }
-    this.toggledByMethod = false;
-  }
-  triggerWatcher(newValue) {
-    this._trigger = newValue.split(" ");
-  }
-  handleDocumentClick(event) {
-    if (!this.open) {
-      return;
-    }
-    const isClickOutside = event.target !== this.contentElement
-      && this.contentElement.contains(event.target) === false;
-    const isClickTrigger = event.target === this.triggerElement
-      || this.triggerElement.contains(event.target);
-    if (isClickOutside && !isClickTrigger && this.hasTrigger("click")) {
-      this.hide();
-    }
-  }
-  hasTrigger(trigger) {
-    return this._trigger.indexOf(trigger) > -1;
-  }
-  async componentWillLoad() {
-    this.labelId = `stzh-tooltip-label-${tooltipCounter}`;
-    tooltipCounter++;
-    this.triggerWatcher(this.trigger);
-    if (!this.localization) {
-      this.localization = await fetchTranslations(this.element, "tooltip");
-    }
-  }
-  componentDidRender() {
-    this.computePosition();
-    if (this.interactive) {
-      this.triggerElement.firstElementChild
-        .setAttribute("aria-expanded", this.open ? "true" : "false");
-    }
-    if (this.trap) {
-      this.open ? this.trap.activate() : this.trap.deactivate();
-    }
-  }
-  componentDidUpdate() {
-    if (this.trap) {
-      this.trap.updateContainerElements(this.contentElement);
-    }
-  }
-  componentDidLoad() {
-    this.autoUpdateCleanup = autoUpdate(this.element, this.contentElement, this.computePosition);
-    if (this.interactive) {
-      this.trap = createFocusTrap(this.contentElement, {
-        fallbackFocus: this.contentElement,
-        clickOutsideDeactivates: true,
-        returnFocusOnDeactivate: true
-      });
-      if (this.open) {
-        this.trap.activate();
-      }
-    }
-    this.contentElement.hidden = !this.open;
-  }
-  connectedCallback() {
-    var _a;
-    let trigger = (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.firstElementChild;
-    if (!trigger) {
-      const defaultSlot = Array.from(this.element.children)
-        .find(child => !child.hasAttribute('slot'));
-      trigger = defaultSlot;
-    }
-    if (trigger) {
-      trigger.addEventListener("click", this.onClickTrigger);
-      trigger.addEventListener("mouseenter", this.onMouseEnterTrigger);
-      trigger.addEventListener("mouseleave", this.onMouseLeaveTrigger);
-      trigger.addEventListener("focusin", this.onFocusTrigger);
-      trigger.addEventListener("focusout", this.onBlurTrigger);
-    }
-  }
-  disconnectedCallback() {
-    if (this.autoUpdateCleanup) {
-      this.autoUpdateCleanup();
-    }
-    this.triggerElement.firstElementChild.removeEventListener("click", this.onClickTrigger);
-    this.triggerElement.firstElementChild.removeEventListener("mouseenter", this.onMouseEnterTrigger);
-    this.triggerElement.firstElementChild.removeEventListener("mouseleave", this.onMouseLeaveTrigger);
-    this.triggerElement.firstElementChild.removeEventListener("focusin", this.onFocusTrigger);
-    this.triggerElement.firstElementChild.removeEventListener("focusout", this.onBlurTrigger);
-  }
-  render() {
-    const classes = {
-      "stzh-tooltip": true,
-      [`stzh-tooltip--open`]: this.open,
-      [`stzh-tooltip--placement-${this.computedPlacement}`]: !!this.computedPlacement
-    };
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-tooltip__trigger", ref: (el) => (this.triggerElement = el) }, h("slot", null)), h("div", { class: "stzh-tooltip__content", ref: (el) => (this.contentElement = el), tabindex: "-1", "aria-labelledby": this.label ? this.labelId : null, "aria-hidden": this.open ? "false" : "true", onKeyDown: this.onEscKey, onMouseEnter: this.onMouseEnterTrigger, onMouseLeave: this.onMouseLeaveTrigger, onFocusin: this.onFocusTrigger, onFocusout: this.onBlurTrigger }, h("div", { class: "stzh-tooltip__arrow", ref: (el) => (this.arrowElement = el), innerHTML: Arrow }), this.label &&
-      h("h2", { id: this.labelId, class: "stzh-tooltip__vhidden" }, this.label), h("div", { class: "stzh-tooltip__content-slot" }, this.content ? this.content : h("slot", { name: "content" })), this.hasTrigger("click") &&
-      h("button", { class: "stzh-tooltip__close", onClick: () => this.hide(), type: "button" }, h("stzh-icon", { name: "close", class: "stzh-tooltip__icon" }), h("span", { class: "stzh-tooltip__vhidden" }, this.localization.close))))));
-  }
-  static get is() { return "stzh-tooltip"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["stzh-tooltip.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["stzh-tooltip.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "open": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether tooltip should be open"
-        },
-        "attribute": "open",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Label of tooltip (used for screenreaders)"
-        },
-        "attribute": "label",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "content": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Content of tooltip (use instead of content slot)"
-        },
-        "attribute": "content",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "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"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Default placement of tooltip relative to trigger element"
-        },
-        "attribute": "placement",
-        "reflect": false,
-        "defaultValue": "\"bottom\""
-      },
-      "skidding": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Shifting of tooltip content"
-        },
-        "attribute": "skidding",
-        "reflect": false,
-        "defaultValue": "0"
-      },
-      "distance": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Distance from tooltip content to trigger (default: arrow height + 8px = 16)"
-        },
-        "attribute": "distance",
-        "reflect": false,
-        "defaultValue": "16"
-      },
-      "interactive": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether tooltip is interactive"
-        },
-        "attribute": "interactive",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "trigger": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\r\noptions can be passed by separating them with a space. When manual is used, the tooltip must be activated\r\nprogrammatically."
-        },
-        "attribute": "trigger",
-        "reflect": false,
-        "defaultValue": "\"hover focus\""
-      },
-      "localization": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "StzhTooltipLocalizedText",
-          "resolved": "StzhLocaleComponent & { close: string; }",
-          "references": {
-            "StzhTooltipLocalizedText": {
-              "location": "import",
-              "path": "./stzh-tooltip.localization"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Translation strings"
-        }
-      }
-    };
-  }
-  static get states() {
-    return {
-      "computedPlacement": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "stzhOpen",
-        "name": "stzhOpen",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Tooltip open event"
-        },
-        "complexType": {
-          "original": "StzhTooltipOpenEvent",
-          "resolved": "{ component: \"stzh-tooltip\"; }",
-          "references": {
-            "StzhTooltipOpenEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }, {
-        "method": "stzhOpened",
-        "name": "stzhOpened",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Tooltip opened event (after animation)"
-        },
-        "complexType": {
-          "original": "StzhTooltipOpenedEvent",
-          "resolved": "{ component: \"stzh-tooltip\"; }",
-          "references": {
-            "StzhTooltipOpenedEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }, {
-        "method": "stzhClose",
-        "name": "stzhClose",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Tooltip close event"
-        },
-        "complexType": {
-          "original": "StzhTooltipCloseEvent",
-          "resolved": "{ component: \"stzh-tooltip\"; }",
-          "references": {
-            "StzhTooltipCloseEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }, {
-        "method": "stzhClosed",
-        "name": "stzhClosed",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Tooltip closed event (after animation)"
-        },
-        "complexType": {
-          "original": "StzhTooltipClosedEvent",
-          "resolved": "{ component: \"stzh-tooltip\"; }",
-          "references": {
-            "StzhTooltipClosedEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "show": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Show tooltip content",
-          "tags": []
-        }
-      },
-      "hide": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Hide tooltip content",
-          "tags": []
-        }
-      },
-      "toggle": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Toggle tooltip content",
-          "tags": []
-        }
-      },
-      "update": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "element"; }
-  static get watchers() {
-    return [{
-        "propName": "open",
-        "methodName": "openWatcher"
-      }, {
-        "propName": "trigger",
-        "methodName": "triggerWatcher"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "handleDocumentClick",
-        "target": "document",
-        "capture": true,
-        "passive": false
-      }];
-  }
-}
+import { Host, h } from "@stencil/core";
+import { arrow, computePosition, offset, shift, flip, autoUpdate } from "@floating-ui/dom";
+import { createFocusTrap } from "focus-trap";
+import { fetchTranslations } from "../../utils/translation-utils";
+import { waitForEvent } from "../../utils/event-utils";
+import { stopAnimations, animateTo } from "../../utils/animation-utils";
+import Arrow from "./assets/arrow.svg";
+const ANIMATION_SHOW = {
+  keyframes: [
+    { opacity: "0" },
+    { opacity: "1" }
+  ],
+  options: { duration: 100, easing: "linear" }
+};
+const ANIMATION_HIDE = {
+  keyframes: [
+    { opacity: "1" },
+    { opacity: "0" }
+  ],
+  options: { duration: 200, easing: "linear" }
+};
+const keyCode = {
+  ESC: 27
+};
+let tooltipCounter = 0;
+/**
+ * @slot Trigger element inside
+ * @slot content - Content of tooltip
+ */
+export class StzhTooltip {
+  constructor() {
+    /** Whether tooltip should be open */
+    this.open = false;
+    /** Label of tooltip (used for screenreaders) */
+    this.label = "";
+    /** Content of tooltip (use instead of content slot) */
+    this.content = "";
+    /** Default placement of tooltip relative to trigger element */
+    this.placement = "bottom";
+    /** Shifting of tooltip content */
+    this.skidding = 0;
+    /** Distance from tooltip content to trigger (default: arrow height + 8px = 16) */
+    this.distance = 16;
+    /** Whether tooltip is interactive */
+    this.interactive = false;
+    /**
+     * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple
+     * options can be passed by separating them with a space. When manual is used, the tooltip must be activated
+     * programmatically.
+     */
+    this.trigger = "hover focus";
+    this.toggledByMethod = false;
+    this.isHovering = false;
+    this.onEscKey = (event) => {
+      if (event.keyCode === keyCode.ESC) {
+        this.hide();
+      }
+    };
+    this.computePosition = async () => {
+      if (!this.open) {
+        return;
+      }
+      const { x = 0, y = 0, strategy = "absolute", placement, middlewareData } = await computePosition(this.triggerElement.firstElementChild, this.contentElement, {
+        // strategy: 'fixed',
+        placement: this.placement,
+        middleware: [
+          offset({
+            mainAxis: this.distance,
+            crossAxis: this.skidding
+          }),
+          flip({
+            padding: 5
+          }),
+          shift({
+            padding: 5
+          }),
+          arrow({
+            element: this.arrowElement,
+            padding: 5
+          })
+        ],
+      });
+      this.middlewareData = middlewareData;
+      this.computedPlacement = placement;
+      Object.assign(this.contentElement.style, {
+        position: strategy,
+        left: `${x}px`,
+        top: `${y}px`,
+      });
+      Object.assign(this.arrowElement.style, {
+        left: x != null ? `${middlewareData.arrow.x}px` : "",
+        top: y != null ? `${middlewareData.arrow.y}px` : "",
+      });
+    };
+    this.onClickTrigger = () => {
+      if (this.hasTrigger("click")) {
+        this.toggle();
+      }
+    };
+    this.onMouseEnterTrigger = () => {
+      if (this.hasTrigger("hover")) {
+        this.isHovering = true;
+        this.show();
+      }
+    };
+    this.onMouseLeaveTrigger = () => {
+      if (this.hasTrigger("hover")) {
+        this.isHovering = false;
+        document.addEventListener("mousemove", this.onMouseMoveDocument);
+      }
+    };
+    this.onFocusTrigger = () => {
+      if (this.hasTrigger("focus")) {
+        this.show();
+      }
+    };
+    this.onBlurTrigger = () => {
+      if (this.hasTrigger("focus")) {
+        this.hide();
+      }
+    };
+    this.onMouseMoveDocument = (event) => {
+      const { clientX, clientY } = event;
+      if (!this.computedPlacement) {
+        return true;
+      }
+      const basePlacement = this.computedPlacement.split("-")[0];
+      const offsetData = this.middlewareData.offset;
+      const popperRect = this.contentElement.getBoundingClientRect();
+      if (!offsetData) {
+        return true;
+      }
+      const topDistance = basePlacement === "bottom" ? offsetData.y : 0;
+      const bottomDistance = basePlacement === "top" ? offsetData.y : 0;
+      const leftDistance = basePlacement === "right" ? offsetData.x : 0;
+      const rightDistance = basePlacement === "left" ? offsetData.x : 0;
+      const exceedsTop = popperRect.top - clientY > topDistance;
+      const exceedsBottom = clientY - popperRect.bottom > bottomDistance;
+      const exceedsLeft = popperRect.left - clientX > leftDistance;
+      const exceedsRight = clientX - popperRect.right > rightDistance;
+      if (exceedsTop || exceedsBottom || exceedsLeft || exceedsRight) {
+        document.removeEventListener("mousemove", this.onMouseMoveDocument);
+        if (!this.isHovering) {
+          this.hide();
+        }
+      }
+    };
+  }
+  /** Show tooltip content */
+  async show() {
+    if (this.open) {
+      return;
+    }
+    this.toggledByMethod = true;
+    this.open = true;
+    return waitForEvent(this.element, "stzhOpened");
+  }
+  /** Hide tooltip content */
+  async hide() {
+    if (!this.open) {
+      return;
+    }
+    this.toggledByMethod = true;
+    this.open = false;
+    return waitForEvent(this.element, "stzhClosed");
+  }
+  /** Toggle tooltip content */
+  async toggle() {
+    if (this.open) {
+      return await this.hide();
+    }
+    else {
+      return await this.show();
+    }
+  }
+  async update() {
+    return await this.computePosition();
+  }
+  async openWatcher(newValue) {
+    if (newValue) {
+      if (this.toggledByMethod) {
+        this.stzhOpen.emit({
+          component: "stzh-tooltip",
+        });
+      }
+      await stopAnimations(this.contentElement);
+      // safari seems to need will-change,
+      // otherwise it has problems animating the element with the drop shadow
+      this.contentElement.style.willChange = "transform, opacity, position, top, left, bottom, right";
+      this.contentElement.hidden = false;
+      await animateTo(this.contentElement, ANIMATION_SHOW.keyframes, ANIMATION_SHOW.options);
+      if (this.toggledByMethod) {
+        this.stzhOpened.emit({
+          component: "stzh-tooltip"
+        });
+      }
+    }
+    else {
+      if (this.toggledByMethod) {
+        this.stzhClose.emit({
+          component: "stzh-tooltip",
+        });
+      }
+      await stopAnimations(this.contentElement);
+      await animateTo(this.contentElement, ANIMATION_HIDE.keyframes, ANIMATION_HIDE.options);
+      this.contentElement.hidden = true;
+      this.contentElement.style.willChange = "auto";
+      if (this.toggledByMethod) {
+        this.stzhClosed.emit({
+          component: "stzh-tooltip"
+        });
+      }
+    }
+    this.toggledByMethod = false;
+  }
+  triggerWatcher(newValue) {
+    this._trigger = newValue.split(" ");
+  }
+  handleDocumentClick(event) {
+    if (!this.open) {
+      return;
+    }
+    const isClickOutside = event.target !== this.contentElement
+      && this.contentElement.contains(event.target) === false;
+    const isClickTrigger = event.target === this.triggerElement
+      || this.triggerElement.contains(event.target);
+    if (isClickOutside && !isClickTrigger && this.hasTrigger("click")) {
+      this.hide();
+    }
+  }
+  hasTrigger(trigger) {
+    return this._trigger.indexOf(trigger) > -1;
+  }
+  async componentWillLoad() {
+    this.labelId = `stzh-tooltip-label-${tooltipCounter}`;
+    tooltipCounter++;
+    this.triggerWatcher(this.trigger);
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, "tooltip");
+    }
+  }
+  componentDidRender() {
+    this.computePosition();
+    if (this.interactive) {
+      this.triggerElement.firstElementChild
+        .setAttribute("aria-expanded", this.open ? "true" : "false");
+    }
+    if (this.trap) {
+      this.open ? this.trap.activate() : this.trap.deactivate();
+    }
+  }
+  componentDidUpdate() {
+    if (this.trap) {
+      this.trap.updateContainerElements(this.contentElement);
+    }
+  }
+  componentDidLoad() {
+    this.autoUpdateCleanup = autoUpdate(this.element, this.contentElement, this.computePosition);
+    if (this.interactive) {
+      this.trap = createFocusTrap(this.contentElement, {
+        fallbackFocus: this.contentElement,
+        clickOutsideDeactivates: true,
+        returnFocusOnDeactivate: true
+      });
+      if (this.open) {
+        this.trap.activate();
+      }
+    }
+    this.contentElement.hidden = !this.open;
+  }
+  connectedCallback() {
+    var _a;
+    let trigger = (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+    if (!trigger) {
+      const defaultSlot = Array.from(this.element.children)
+        .find(child => !child.hasAttribute('slot'));
+      trigger = defaultSlot;
+    }
+    if (trigger) {
+      trigger.addEventListener("click", this.onClickTrigger);
+      trigger.addEventListener("mouseenter", this.onMouseEnterTrigger);
+      trigger.addEventListener("mouseleave", this.onMouseLeaveTrigger);
+      trigger.addEventListener("focusin", this.onFocusTrigger);
+      trigger.addEventListener("focusout", this.onBlurTrigger);
+    }
+  }
+  disconnectedCallback() {
+    if (this.autoUpdateCleanup) {
+      this.autoUpdateCleanup();
+    }
+    this.triggerElement.firstElementChild.removeEventListener("click", this.onClickTrigger);
+    this.triggerElement.firstElementChild.removeEventListener("mouseenter", this.onMouseEnterTrigger);
+    this.triggerElement.firstElementChild.removeEventListener("mouseleave", this.onMouseLeaveTrigger);
+    this.triggerElement.firstElementChild.removeEventListener("focusin", this.onFocusTrigger);
+    this.triggerElement.firstElementChild.removeEventListener("focusout", this.onBlurTrigger);
+  }
+  render() {
+    const classes = {
+      "stzh-tooltip": true,
+      [`stzh-tooltip--open`]: this.open,
+      [`stzh-tooltip--placement-${this.computedPlacement}`]: !!this.computedPlacement
+    };
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-tooltip__trigger", ref: (el) => (this.triggerElement = el) }, h("slot", null)), h("div", { class: "stzh-tooltip__content", ref: (el) => (this.contentElement = el), tabindex: "-1", "aria-labelledby": this.label ? this.labelId : null, "aria-hidden": this.open ? "false" : "true", onKeyDown: this.onEscKey, onMouseEnter: this.onMouseEnterTrigger, onMouseLeave: this.onMouseLeaveTrigger, onFocusin: this.onFocusTrigger, onFocusout: this.onBlurTrigger }, h("div", { class: "stzh-tooltip__arrow", ref: (el) => (this.arrowElement = el), innerHTML: Arrow }), this.label &&
+      h("h2", { id: this.labelId, class: "stzh-tooltip__vhidden" }, this.label), h("div", { class: "stzh-tooltip__content-slot" }, this.content ? this.content : h("slot", { name: "content" })), this.hasTrigger("click") &&
+      h("button", { class: "stzh-tooltip__close", onClick: () => this.hide(), type: "button" }, h("stzh-icon", { name: "close", class: "stzh-tooltip__icon" }), h("span", { class: "stzh-tooltip__vhidden" }, this.localization.close))))));
+  }
+  static get is() { return "stzh-tooltip"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-tooltip.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-tooltip.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "open": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether tooltip should be open"
+        },
+        "attribute": "open",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label of tooltip (used for screenreaders)"
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "content": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Content of tooltip (use instead of content slot)"
+        },
+        "attribute": "content",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "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"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Default placement of tooltip relative to trigger element"
+        },
+        "attribute": "placement",
+        "reflect": false,
+        "defaultValue": "\"bottom\""
+      },
+      "skidding": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Shifting of tooltip content"
+        },
+        "attribute": "skidding",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "distance": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Distance from tooltip content to trigger (default: arrow height + 8px = 16)"
+        },
+        "attribute": "distance",
+        "reflect": false,
+        "defaultValue": "16"
+      },
+      "interactive": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether tooltip is interactive"
+        },
+        "attribute": "interactive",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "trigger": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\noptions can be passed by separating them with a space. When manual is used, the tooltip must be activated\nprogrammatically."
+        },
+        "attribute": "trigger",
+        "reflect": false,
+        "defaultValue": "\"hover focus\""
+      },
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhTooltipLocalizedText",
+          "resolved": "StzhLocaleComponent & { close: string; }",
+          "references": {
+            "StzhTooltipLocalizedText": {
+              "location": "import",
+              "path": "./stzh-tooltip.localization"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings"
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "computedPlacement": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "stzhOpen",
+        "name": "stzhOpen",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Tooltip open event"
+        },
+        "complexType": {
+          "original": "StzhTooltipOpenEvent",
+          "resolved": "{ component: \"stzh-tooltip\"; }",
+          "references": {
+            "StzhTooltipOpenEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhOpened",
+        "name": "stzhOpened",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Tooltip opened event (after animation)"
+        },
+        "complexType": {
+          "original": "StzhTooltipOpenedEvent",
+          "resolved": "{ component: \"stzh-tooltip\"; }",
+          "references": {
+            "StzhTooltipOpenedEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhClose",
+        "name": "stzhClose",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Tooltip close event"
+        },
+        "complexType": {
+          "original": "StzhTooltipCloseEvent",
+          "resolved": "{ component: \"stzh-tooltip\"; }",
+          "references": {
+            "StzhTooltipCloseEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhClosed",
+        "name": "stzhClosed",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Tooltip closed event (after animation)"
+        },
+        "complexType": {
+          "original": "StzhTooltipClosedEvent",
+          "resolved": "{ component: \"stzh-tooltip\"; }",
+          "references": {
+            "StzhTooltipClosedEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "show": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Show tooltip content",
+          "tags": []
+        }
+      },
+      "hide": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Hide tooltip content",
+          "tags": []
+        }
+      },
+      "toggle": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Toggle tooltip content",
+          "tags": []
+        }
+      },
+      "update": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "open",
+        "methodName": "openWatcher"
+      }, {
+        "propName": "trigger",
+        "methodName": "triggerWatcher"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "handleDocumentClick",
+        "target": "document",
+        "capture": true,
+        "passive": false
+      }];
+  }
+}