@oiz/stzh-components 0.0.1-pretest → 1.4.0-npmjstest

package/dist/components/stzh-tooltip2.js

@@ -8,346 +8,346 @@ import { d as defineCustomElement$1 } from './stzh-icon2.js';
 
 const stzhTooltipCss = ".sc-stzh-tooltip-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-tooltip-h{display:none}.sc-stzh-tooltip-h *.sc-stzh-tooltip,.sc-stzh-tooltip-h *.sc-stzh-tooltip::before,.sc-stzh-tooltip-h *.sc-stzh-tooltip::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-tooltip-h{--width:var(--stzh-tooltip-width);--min-width:var(--stzh-tooltip-min-width);--max-width:var(--stzh-tooltip-max-width);--padding:var(--stzh-tooltip-padding);--border-radius:var(--stzh-tooltip-border-radius)}.stzh-tooltip__arrow.sc-stzh-tooltip{position:absolute;display:-ms-flexbox;display:flex;color:var(--stzh-color-white)}.stzh-tooltip--placement-bottom.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-bottom-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-bottom-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{top:0;-webkit-transform:translateY(-0.5rem);transform:translateY(-0.5rem)}.stzh-tooltip--placement-top.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-top-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-top-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{bottom:0;-webkit-transform:translateY(0.5rem) rotate(180deg);transform:translateY(0.5rem) rotate(180deg)}.stzh-tooltip--placement-left.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-left-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-left-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{right:0;-webkit-transform:translateX(0.75rem) rotate(90deg);transform:translateX(0.75rem) rotate(90deg)}.stzh-tooltip--placement-right.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-right-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-right-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{left:0;-webkit-transform:translateX(-0.75rem) rotate(-90deg);transform:translateX(-0.75rem) rotate(-90deg)}.stzh-tooltip__content.sc-stzh-tooltip{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);position:absolute;z-index:var(--stzh-z-index-popover);-webkit-box-shadow:var(--stzh-box-shadow-popover);box-shadow:var(--stzh-box-shadow-popover);border-radius:var(--border-radius);background-color:var(--stzh-color-white);width:var(--width);min-width:var(--min-width);max-width:var(--max-width)}@supports ((-webkit-filter: var(--stzh-tooltip-drop-shadow)) or (filter: var(--stzh-tooltip-drop-shadow))){.stzh-tooltip__content.sc-stzh-tooltip{-webkit-box-shadow:none;box-shadow:none;-webkit-filter:var(--stzh-tooltip-drop-shadow);filter:var(--stzh-tooltip-drop-shadow)}}.stzh-tooltip__content-slot.sc-stzh-tooltip{padding:var(--padding)}.stzh-tooltip__close.sc-stzh-tooltip{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background-color:transparent;padding:0;position:absolute;top:0;right:0;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;padding:var(--stzh-space-xxsmall);padding-bottom:var(--stzh-space-xxxsmall);color:var(--stzh-base-lead-color);border-radius:var(--stzh-button-border-radius)}.stzh-tooltip__icon.sc-stzh-tooltip{--size:var(--stzh-icon-size-xxsmall)}.stzh-tooltip__vhidden.sc-stzh-tooltip{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}";
 
-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;
-const StzhTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.stzhOpen = createEvent(this, "stzhOpen", 7);
-    this.stzhOpened = createEvent(this, "stzhOpened", 7);
-    this.stzhClose = createEvent(this, "stzhClose", 7);
-    this.stzhClosed = createEvent(this, "stzhClosed", 7);
-    /** 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))))));
-  }
-  get element() { return this; }
-  static get watchers() { return {
-    "open": ["openWatcher"],
-    "trigger": ["triggerWatcher"]
-  }; }
-  static get style() { return stzhTooltipCss; }
-}, [6, "stzh-tooltip", {
-    "open": [1028],
-    "label": [1],
-    "content": [1],
-    "placement": [1],
-    "skidding": [2],
-    "distance": [2],
-    "interactive": [4],
-    "trigger": [1],
-    "localization": [16],
-    "computedPlacement": [32],
-    "show": [64],
-    "hide": [64],
-    "toggle": [64],
-    "update": [64]
-  }, [[6, "click", "handleDocumentClick"]]]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["stzh-tooltip", "stzh-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "stzh-tooltip":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, StzhTooltip);
-      }
-      break;
-    case "stzh-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+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;
+const StzhTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.stzhOpen = createEvent(this, "stzhOpen", 7);
+    this.stzhOpened = createEvent(this, "stzhOpened", 7);
+    this.stzhClose = createEvent(this, "stzhClose", 7);
+    this.stzhClosed = createEvent(this, "stzhClosed", 7);
+    /** 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))))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "open": ["openWatcher"],
+    "trigger": ["triggerWatcher"]
+  }; }
+  static get style() { return stzhTooltipCss; }
+}, [6, "stzh-tooltip", {
+    "open": [1028],
+    "label": [1],
+    "content": [1],
+    "placement": [1],
+    "skidding": [2],
+    "distance": [2],
+    "interactive": [4],
+    "trigger": [1],
+    "localization": [16],
+    "computedPlacement": [32],
+    "show": [64],
+    "hide": [64],
+    "toggle": [64],
+    "update": [64]
+  }, [[6, "click", "handleDocumentClick"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-tooltip", "stzh-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-tooltip":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhTooltip);
+      }
+      break;
+    case "stzh-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
 }
 
 export { StzhTooltip as S, defineCustomElement as d };