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

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

@@ -1,673 +1,673 @@
-import { Host, h, } from "@stencil/core";
-import { computePosition, offset, shift, flip, arrow, autoUpdate, } from '@floating-ui/dom';
-import { createFocusTrap } from 'focus-trap';
-import { fetchTranslations } from "../../utils/translation-utils";
-import { media } from '../../utils/media-utils';
-import { waitForEvent } from "../../utils/event-utils";
-import { stopAnimations, animateTo } from "../../utils/animation-utils";
-import Arrow from '../stzh-tooltip/assets/arrow.svg';
-const ANIMATION_SHOW_DURATION = 200;
-const ANIMATION_HIDE_DURATION = 300;
-const ANIMATION_SHOW_DURATION_SMALL = 100;
-const ANIMATION_HIDE_DURATION_SMALL = 200;
-function animationContentWrapperShow() {
-  const isSmall = media('small').matches;
-  return {
-    keyframes: [
-      { opacity: '0' },
-      { opacity: '1' }
-    ],
-    options: {
-      duration: isSmall ? ANIMATION_SHOW_DURATION_SMALL : ANIMATION_SHOW_DURATION,
-      easing: 'linear'
-    }
-  };
-}
-function animationContentWrapperHide() {
-  const isSmall = media('small').matches;
-  return {
-    keyframes: [
-      { opacity: '1' },
-      { opacity: '0' }
-    ],
-    options: {
-      duration: isSmall ? ANIMATION_HIDE_DURATION_SMALL : ANIMATION_HIDE_DURATION,
-      easing: 'linear'
-    }
-  };
-}
-function animationDialogShow() {
-  const isSmall = media('small').matches;
-  return {
-    keyframes: [
-      { transform: isSmall ? 'translateY(-8px)' : 'translateY(100%)' },
-      { transform: 'translateY(0px)' }
-    ],
-    options: {
-      duration: isSmall ? ANIMATION_SHOW_DURATION_SMALL : ANIMATION_SHOW_DURATION,
-      easing: 'linear'
-    }
-  };
-}
-function animationDialogHide() {
-  const isSmall = media('small').matches;
-  return {
-    keyframes: [
-      { transform: 'translateY(0px)' },
-      { transform: isSmall ? 'translateY(-8px)' : 'translateY(100%)' }
-    ],
-    options: {
-      duration: isSmall ? ANIMATION_HIDE_DURATION_SMALL : ANIMATION_HIDE_DURATION,
-      easing: 'linear'
-    }
-  };
-}
-const keyCode = {
-  ESC: 27
-};
-const CLASS_BODY_OPEN = "stzh-popover-open";
-let popoverCounter = 0;
-/**
- * @slot - Trigger element for popover
- * @slot content - Any element used as popover content
- * @slot action - `stzh-button` element
- * @slot label - Label for mobile view (alternative for label property)
- *
- * @prop --min-width: Minimum width of popover above small breakpoint
- */
-export class StzhPopover {
-  constructor() {
-    /** Whether popover should be open */
-    this.open = false;
-    /** Default placement of popover relative to trigger element */
-    this.placement = "bottom";
-    /** Variant */
-    this.variant = "default";
-    /** Shifting of popover content */
-    this.skidding = 0;
-    /** Label for mobile view (use label slot as alternative) */
-    this.label = "";
-    this.initialTouchX = null;
-    this.initialTouchY = null;
-    this.handleKeydown = (event) => {
-      if (event.keyCode === keyCode.ESC) {
-        this.hide();
-      }
-    };
-    this.onClickTrigger = () => {
-      this.toggle();
-    };
-    this.computePosition = async () => {
-      if (media('small').matches) {
-        const middleware = [
-          offset({
-            mainAxis: this.distance,
-            crossAxis: this.skidding
-          }),
-          flip({
-            padding: 5
-          }),
-          shift({
-            padding: 5
-          })
-        ];
-        if (this.variant === "tooltip") {
-          middleware.push(arrow({
-            element: this.arrowElement,
-            padding: 5
-          }));
-        }
-        const { x = 0, y = 0, strategy = 'absolute', placement, middlewareData } = await computePosition(this.element, this.dialogElement, {
-          // strategy: 'fixed',
-          placement: this.placement,
-          middleware,
-        });
-        this.computedPlacement = placement;
-        Object.assign(this.dialogElement.style, {
-          position: strategy,
-          left: `${x}px`,
-          top: `${y}px`,
-        });
-        if (this.variant === "tooltip") {
-          Object.assign(this.arrowElement.style, {
-            left: x != null ? `${middlewareData.arrow.x}px` : '',
-            top: y != null ? `${middlewareData.arrow.y}px` : '',
-          });
-        }
-      }
-      else {
-        Object.assign(this.dialogElement.style, {
-          position: null,
-          left: null,
-          top: null,
-        });
-        if (this.variant === "tooltip") {
-          Object.assign(this.arrowElement.style, {
-            left: null,
-            top: null,
-          });
-        }
-      }
-    };
-    this.handleTouchStart = (event) => {
-      const touch = event.changedTouches[0];
-      this.initialTouchX = touch.pageX;
-      this.initialTouchY = touch.pageY;
-    };
-    // private handleTouchMove = (event: TouchEvent) => {
-    //   event.preventDefault()
-    // }
-    this.handleTouchEnd = (event) => {
-      const touch = event.changedTouches[0];
-      const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled
-      const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled
-      const threshold = 70;
-      const isYSwipe = Math.abs(distY) >= threshold
-        && Math.abs(distX) <= threshold;
-      if (isYSwipe) {
-        this.hide();
-      }
-      this.initialTouchY = null;
-      this.initialTouchX = null;
-    };
-  }
-  /** Show popover content */
-  async show() {
-    if (this.open) {
-      return;
-    }
-    this.toggledByMethod = true;
-    this.open = true;
-    return waitForEvent(this.element, "stzhOpened");
-  }
-  /** Hide popover content */
-  async hide() {
-    if (!this.open) {
-      return;
-    }
-    this.toggledByMethod = true;
-    this.open = false;
-    return waitForEvent(this.element, "stzhClosed");
-  }
-  /** Toggle popover content */
-  async toggle() {
-    if (this.open) {
-      return await this.hide();
-    }
-    else {
-      return await this.show();
-    }
-  }
-  async update() {
-    return await this.computePosition();
-  }
-  handleOutsideClick(event) {
-    if (!this.open) {
-      return;
-    }
-    const isClickOutside = event.target !== this.dialogElement
-      && this.dialogElement.contains(event.target) === false;
-    const isClickTrigger = event.target === this.triggerElement
-      || this.triggerElement.contains(event.target);
-    if (isClickOutside && !isClickTrigger) {
-      this.hide();
-    }
-  }
-  async openWatcher(newValue) {
-    if (newValue) {
-      if (this.toggledByMethod) {
-        this.stzhOpen.emit({
-          component: "stzh-popover",
-        });
-      }
-      const animationShow = animationContentWrapperShow();
-      const animationShowDialog = animationDialogShow();
-      await Promise.all([
-        stopAnimations(this.contentWrapperElement),
-        stopAnimations(this.contentElement),
-        stopAnimations(this.dialogElement)
-      ]);
-      // safari seems to need will-change,
-      // otherwise it has problems animating the element with the drop shadow
-      this.dialogElement.style.willChange = "transform, opacity, position, top, left, bottom, right";
-      this.contentWrapperElement.hidden = false;
-      await Promise.all([
-        animateTo(this.contentWrapperElement, animationShow.keyframes, animationShow.options),
-        animateTo(media('small').matches ? this.dialogElement : this.contentElement, animationShowDialog.keyframes, animationShowDialog.options)
-      ]);
-      if (this.toggledByMethod) {
-        this.stzhOpened.emit({
-          component: "stzh-popover"
-        });
-      }
-    }
-    else {
-      if (this.toggledByMethod) {
-        this.stzhClose.emit({
-          component: "stzh-popover",
-        });
-      }
-      const animationHide = animationContentWrapperHide();
-      const animationHideDialog = animationDialogHide();
-      await Promise.all([
-        stopAnimations(this.contentWrapperElement),
-        stopAnimations(this.contentElement),
-        stopAnimations(this.dialogElement)
-      ]);
-      await Promise.all([
-        animateTo(this.contentWrapperElement, animationHide.keyframes, animationHide.options),
-        animateTo(media('small').matches ? this.dialogElement : this.contentElement, animationHideDialog.keyframes, animationHideDialog.options),
-      ]);
-      this.contentWrapperElement.hidden = true;
-      this.dialogElement.style.willChange = "auto";
-      if (this.toggledByMethod) {
-        this.stzhClosed.emit({
-          component: "stzh-popover"
-        });
-      }
-    }
-    this.toggledByMethod = false;
-  }
-  distanceWatcher(newValue) {
-    if (typeof newValue === 'number') {
-      this.distance = newValue;
-    }
-    else {
-      this.distance = this.variant === "tooltip" ? 16 : 8;
-    }
-  }
-  async componentWillLoad() {
-    this.labelId = `stzh-popover-label-${popoverCounter}`;
-    popoverCounter++;
-    this.distanceWatcher(this.distance);
-    if (!this.localization) {
-      this.localization = await fetchTranslations(this.element, 'popover');
-    }
-  }
-  popoverShown() {
-    document.body.classList.add(CLASS_BODY_OPEN);
-    this.triggerElement.firstElementChild
-      .setAttribute('aria-expanded', 'true');
-    if (this.trap) {
-      this.trap.activate();
-    }
-  }
-  popoverHidden() {
-    document.body.classList.remove(CLASS_BODY_OPEN);
-    this.triggerElement.firstElementChild
-      .setAttribute('aria-expanded', 'false');
-    if (this.trap) {
-      this.trap.deactivate();
-    }
-  }
-  componentDidRender() {
-    this.computePosition();
-    this.open ? this.popoverShown() : this.popoverHidden();
-  }
-  componentDidUpdate() {
-    this.trap.updateContainerElements(this.dialogElement);
-  }
-  componentDidLoad() {
-    this.autoUpdateCleanup = autoUpdate(this.element, this.dialogElement, this.computePosition);
-    this.contentWrapperElement.hidden = !this.open;
-    this.trap = createFocusTrap(this.dialogElement, {
-      fallbackFocus: this.dialogElement,
-      clickOutsideDeactivates: true,
-      returnFocusOnDeactivate: true
-    });
-    if (this.open) {
-      this.popoverShown();
-    }
-  }
-  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);
-    }
-  }
-  disconnectedCallback() {
-    if (this.autoUpdateCleanup) {
-      this.autoUpdateCleanup();
-    }
-    this.triggerElement.firstElementChild.removeEventListener("click", this.onClickTrigger);
-  }
-  render() {
-    const classes = {
-      "stzh-popover": true,
-      [`stzh-popover--open`]: this.open,
-      [`stzh-popover--placement-${this.computedPlacement}`]: !!this.computedPlacement,
-      [`stzh-popover--${this.variant}`]: !!this.variant
-    };
-    return (h(Host, null, h("div", { class: classes, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { ref: (el) => (this.triggerElement = el), class: "stzh-popover__trigger" }, h("slot", null)), h("div", { ref: (el) => (this.contentWrapperElement = el), class: "stzh-popover__content-wrapper" }, h("div", { class: "stzh-popover__backdrop" }), h("div", { ref: (el) => (this.contentElement = el), class: "stzh-popover__content" }, h("div", { ref: (el) => (this.dialogElement = el), class: "stzh-popover__dialog", role: "dialog", tabindex: "-1", "aria-modal": "true", "aria-labelledby": this.label ? this.labelId : null, "aria-hidden": this.open ? "false" : "true", onKeyDown: this.handleKeydown }, this.variant === "tooltip" &&
-      h("div", { class: "stzh-popover__arrow", ref: (el) => (this.arrowElement = el), innerHTML: Arrow }), h("div", { class: "stzh-popover__content-inner" }, h("div", { class: "stzh-popover__content-slot" }, h("slot", { name: "content" }), h("div", { class: "stzh-popover__action-slot" }, h("slot", { name: "action" }))), h("div", { class: "stzh-popover__label-wrapper" }, h("h2", { id: this.labelId, class: "stzh-popover__label" }, this.label ? this.label : h("slot", { name: "label" })), h("button", { class: "stzh-popover__close", onClick: () => this.hide(), type: "button" }, h("stzh-icon", { name: "close", class: "stzh-popover__icon" }), h("span", { class: "stzh-popover__vhidden" }, this.localization.close))))))))));
-  }
-  static get is() { return "stzh-popover"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["stzh-popover.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["stzh-popover.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "open": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether popover should be open"
-        },
-        "attribute": "open",
-        "reflect": true,
-        "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"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Default placement of popover relative to trigger element"
-        },
-        "attribute": "placement",
-        "reflect": true,
-        "defaultValue": "\"bottom\""
-      },
-      "variant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"default\" | \"tooltip\"",
-          "resolved": "\"default\" | \"tooltip\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Variant"
-        },
-        "attribute": "variant",
-        "reflect": true,
-        "defaultValue": "\"default\""
-      },
-      "skidding": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Shifting of popover 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 popover content to trigger. \"8\" when default variant, \"16\" when tooltip variant (arrow height + 8px)."
-        },
-        "attribute": "distance",
-        "reflect": false
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Label for mobile view (use label slot as alternative)"
-        },
-        "attribute": "label",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "localization": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "StzhPopoverLocalizedText",
-          "resolved": "StzhLocaleComponent & { close: string; }",
-          "references": {
-            "StzhPopoverLocalizedText": {
-              "location": "import",
-              "path": "./stzh-popover.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": "Popover open event"
-        },
-        "complexType": {
-          "original": "StzhPopoverOpenEvent",
-          "resolved": "{ component: \"stzh-popover\"; }",
-          "references": {
-            "StzhPopoverOpenEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }, {
-        "method": "stzhOpened",
-        "name": "stzhOpened",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Popover opened event (after animation)"
-        },
-        "complexType": {
-          "original": "StzhPopoverOpenedEvent",
-          "resolved": "{ component: \"stzh-popover\"; }",
-          "references": {
-            "StzhPopoverOpenedEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }, {
-        "method": "stzhClose",
-        "name": "stzhClose",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Popover close event"
-        },
-        "complexType": {
-          "original": "StzhPopoverCloseEvent",
-          "resolved": "{ component: \"stzh-popover\"; }",
-          "references": {
-            "StzhPopoverCloseEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }, {
-        "method": "stzhClosed",
-        "name": "stzhClosed",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Popover closed event (after animation)"
-        },
-        "complexType": {
-          "original": "StzhPopoverClosedEvent",
-          "resolved": "{ component: \"stzh-popover\"; }",
-          "references": {
-            "StzhPopoverClosedEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "show": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Show popover content",
-          "tags": []
-        }
-      },
-      "hide": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Hide popover content",
-          "tags": []
-        }
-      },
-      "toggle": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Toggle popover 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": "distance",
-        "methodName": "distanceWatcher"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "handleOutsideClick",
-        "target": "document",
-        "capture": true,
-        "passive": false
-      }];
-  }
-}
+import { Host, h, } from "@stencil/core";
+import { computePosition, offset, shift, flip, arrow, autoUpdate, } from '@floating-ui/dom';
+import { createFocusTrap } from 'focus-trap';
+import { fetchTranslations } from "../../utils/translation-utils";
+import { media } from '../../utils/media-utils';
+import { waitForEvent } from "../../utils/event-utils";
+import { stopAnimations, animateTo } from "../../utils/animation-utils";
+import Arrow from '../stzh-tooltip/assets/arrow.svg';
+const ANIMATION_SHOW_DURATION = 200;
+const ANIMATION_HIDE_DURATION = 300;
+const ANIMATION_SHOW_DURATION_SMALL = 100;
+const ANIMATION_HIDE_DURATION_SMALL = 200;
+function animationContentWrapperShow() {
+  const isSmall = media('small').matches;
+  return {
+    keyframes: [
+      { opacity: '0' },
+      { opacity: '1' }
+    ],
+    options: {
+      duration: isSmall ? ANIMATION_SHOW_DURATION_SMALL : ANIMATION_SHOW_DURATION,
+      easing: 'linear'
+    }
+  };
+}
+function animationContentWrapperHide() {
+  const isSmall = media('small').matches;
+  return {
+    keyframes: [
+      { opacity: '1' },
+      { opacity: '0' }
+    ],
+    options: {
+      duration: isSmall ? ANIMATION_HIDE_DURATION_SMALL : ANIMATION_HIDE_DURATION,
+      easing: 'linear'
+    }
+  };
+}
+function animationDialogShow() {
+  const isSmall = media('small').matches;
+  return {
+    keyframes: [
+      { transform: isSmall ? 'translateY(-8px)' : 'translateY(100%)' },
+      { transform: 'translateY(0px)' }
+    ],
+    options: {
+      duration: isSmall ? ANIMATION_SHOW_DURATION_SMALL : ANIMATION_SHOW_DURATION,
+      easing: 'linear'
+    }
+  };
+}
+function animationDialogHide() {
+  const isSmall = media('small').matches;
+  return {
+    keyframes: [
+      { transform: 'translateY(0px)' },
+      { transform: isSmall ? 'translateY(-8px)' : 'translateY(100%)' }
+    ],
+    options: {
+      duration: isSmall ? ANIMATION_HIDE_DURATION_SMALL : ANIMATION_HIDE_DURATION,
+      easing: 'linear'
+    }
+  };
+}
+const keyCode = {
+  ESC: 27
+};
+const CLASS_BODY_OPEN = "stzh-popover-open";
+let popoverCounter = 0;
+/**
+ * @slot - Trigger element for popover
+ * @slot content - Any element used as popover content
+ * @slot action - `stzh-button` element
+ * @slot label - Label for mobile view (alternative for label property)
+ *
+ * @prop --min-width: Minimum width of popover above small breakpoint
+ */
+export class StzhPopover {
+  constructor() {
+    /** Whether popover should be open */
+    this.open = false;
+    /** Default placement of popover relative to trigger element */
+    this.placement = "bottom";
+    /** Variant */
+    this.variant = "default";
+    /** Shifting of popover content */
+    this.skidding = 0;
+    /** Label for mobile view (use label slot as alternative) */
+    this.label = "";
+    this.initialTouchX = null;
+    this.initialTouchY = null;
+    this.handleKeydown = (event) => {
+      if (event.keyCode === keyCode.ESC) {
+        this.hide();
+      }
+    };
+    this.onClickTrigger = () => {
+      this.toggle();
+    };
+    this.computePosition = async () => {
+      if (media('small').matches) {
+        const middleware = [
+          offset({
+            mainAxis: this.distance,
+            crossAxis: this.skidding
+          }),
+          flip({
+            padding: 5
+          }),
+          shift({
+            padding: 5
+          })
+        ];
+        if (this.variant === "tooltip") {
+          middleware.push(arrow({
+            element: this.arrowElement,
+            padding: 5
+          }));
+        }
+        const { x = 0, y = 0, strategy = 'absolute', placement, middlewareData } = await computePosition(this.element, this.dialogElement, {
+          // strategy: 'fixed',
+          placement: this.placement,
+          middleware,
+        });
+        this.computedPlacement = placement;
+        Object.assign(this.dialogElement.style, {
+          position: strategy,
+          left: `${x}px`,
+          top: `${y}px`,
+        });
+        if (this.variant === "tooltip") {
+          Object.assign(this.arrowElement.style, {
+            left: x != null ? `${middlewareData.arrow.x}px` : '',
+            top: y != null ? `${middlewareData.arrow.y}px` : '',
+          });
+        }
+      }
+      else {
+        Object.assign(this.dialogElement.style, {
+          position: null,
+          left: null,
+          top: null,
+        });
+        if (this.variant === "tooltip") {
+          Object.assign(this.arrowElement.style, {
+            left: null,
+            top: null,
+          });
+        }
+      }
+    };
+    this.handleTouchStart = (event) => {
+      const touch = event.changedTouches[0];
+      this.initialTouchX = touch.pageX;
+      this.initialTouchY = touch.pageY;
+    };
+    // private handleTouchMove = (event: TouchEvent) => {
+    //   event.preventDefault()
+    // }
+    this.handleTouchEnd = (event) => {
+      const touch = event.changedTouches[0];
+      const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled
+      const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled
+      const threshold = 70;
+      const isYSwipe = Math.abs(distY) >= threshold
+        && Math.abs(distX) <= threshold;
+      if (isYSwipe) {
+        this.hide();
+      }
+      this.initialTouchY = null;
+      this.initialTouchX = null;
+    };
+  }
+  /** Show popover content */
+  async show() {
+    if (this.open) {
+      return;
+    }
+    this.toggledByMethod = true;
+    this.open = true;
+    return waitForEvent(this.element, "stzhOpened");
+  }
+  /** Hide popover content */
+  async hide() {
+    if (!this.open) {
+      return;
+    }
+    this.toggledByMethod = true;
+    this.open = false;
+    return waitForEvent(this.element, "stzhClosed");
+  }
+  /** Toggle popover content */
+  async toggle() {
+    if (this.open) {
+      return await this.hide();
+    }
+    else {
+      return await this.show();
+    }
+  }
+  async update() {
+    return await this.computePosition();
+  }
+  handleOutsideClick(event) {
+    if (!this.open) {
+      return;
+    }
+    const isClickOutside = event.target !== this.dialogElement
+      && this.dialogElement.contains(event.target) === false;
+    const isClickTrigger = event.target === this.triggerElement
+      || this.triggerElement.contains(event.target);
+    if (isClickOutside && !isClickTrigger) {
+      this.hide();
+    }
+  }
+  async openWatcher(newValue) {
+    if (newValue) {
+      if (this.toggledByMethod) {
+        this.stzhOpen.emit({
+          component: "stzh-popover",
+        });
+      }
+      const animationShow = animationContentWrapperShow();
+      const animationShowDialog = animationDialogShow();
+      await Promise.all([
+        stopAnimations(this.contentWrapperElement),
+        stopAnimations(this.contentElement),
+        stopAnimations(this.dialogElement)
+      ]);
+      // safari seems to need will-change,
+      // otherwise it has problems animating the element with the drop shadow
+      this.dialogElement.style.willChange = "transform, opacity, position, top, left, bottom, right";
+      this.contentWrapperElement.hidden = false;
+      await Promise.all([
+        animateTo(this.contentWrapperElement, animationShow.keyframes, animationShow.options),
+        animateTo(media('small').matches ? this.dialogElement : this.contentElement, animationShowDialog.keyframes, animationShowDialog.options)
+      ]);
+      if (this.toggledByMethod) {
+        this.stzhOpened.emit({
+          component: "stzh-popover"
+        });
+      }
+    }
+    else {
+      if (this.toggledByMethod) {
+        this.stzhClose.emit({
+          component: "stzh-popover",
+        });
+      }
+      const animationHide = animationContentWrapperHide();
+      const animationHideDialog = animationDialogHide();
+      await Promise.all([
+        stopAnimations(this.contentWrapperElement),
+        stopAnimations(this.contentElement),
+        stopAnimations(this.dialogElement)
+      ]);
+      await Promise.all([
+        animateTo(this.contentWrapperElement, animationHide.keyframes, animationHide.options),
+        animateTo(media('small').matches ? this.dialogElement : this.contentElement, animationHideDialog.keyframes, animationHideDialog.options),
+      ]);
+      this.contentWrapperElement.hidden = true;
+      this.dialogElement.style.willChange = "auto";
+      if (this.toggledByMethod) {
+        this.stzhClosed.emit({
+          component: "stzh-popover"
+        });
+      }
+    }
+    this.toggledByMethod = false;
+  }
+  distanceWatcher(newValue) {
+    if (typeof newValue === 'number') {
+      this.distance = newValue;
+    }
+    else {
+      this.distance = this.variant === "tooltip" ? 16 : 8;
+    }
+  }
+  async componentWillLoad() {
+    this.labelId = `stzh-popover-label-${popoverCounter}`;
+    popoverCounter++;
+    this.distanceWatcher(this.distance);
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, 'popover');
+    }
+  }
+  popoverShown() {
+    document.body.classList.add(CLASS_BODY_OPEN);
+    this.triggerElement.firstElementChild
+      .setAttribute('aria-expanded', 'true');
+    if (this.trap) {
+      this.trap.activate();
+    }
+  }
+  popoverHidden() {
+    document.body.classList.remove(CLASS_BODY_OPEN);
+    this.triggerElement.firstElementChild
+      .setAttribute('aria-expanded', 'false');
+    if (this.trap) {
+      this.trap.deactivate();
+    }
+  }
+  componentDidRender() {
+    this.computePosition();
+    this.open ? this.popoverShown() : this.popoverHidden();
+  }
+  componentDidUpdate() {
+    this.trap.updateContainerElements(this.dialogElement);
+  }
+  componentDidLoad() {
+    this.autoUpdateCleanup = autoUpdate(this.element, this.dialogElement, this.computePosition);
+    this.contentWrapperElement.hidden = !this.open;
+    this.trap = createFocusTrap(this.dialogElement, {
+      fallbackFocus: this.dialogElement,
+      clickOutsideDeactivates: true,
+      returnFocusOnDeactivate: true
+    });
+    if (this.open) {
+      this.popoverShown();
+    }
+  }
+  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);
+    }
+  }
+  disconnectedCallback() {
+    if (this.autoUpdateCleanup) {
+      this.autoUpdateCleanup();
+    }
+    this.triggerElement.firstElementChild.removeEventListener("click", this.onClickTrigger);
+  }
+  render() {
+    const classes = {
+      "stzh-popover": true,
+      [`stzh-popover--open`]: this.open,
+      [`stzh-popover--placement-${this.computedPlacement}`]: !!this.computedPlacement,
+      [`stzh-popover--${this.variant}`]: !!this.variant
+    };
+    return (h(Host, null, h("div", { class: classes, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { ref: (el) => (this.triggerElement = el), class: "stzh-popover__trigger" }, h("slot", null)), h("div", { ref: (el) => (this.contentWrapperElement = el), class: "stzh-popover__content-wrapper" }, h("div", { class: "stzh-popover__backdrop" }), h("div", { ref: (el) => (this.contentElement = el), class: "stzh-popover__content" }, h("div", { ref: (el) => (this.dialogElement = el), class: "stzh-popover__dialog", role: "dialog", tabindex: "-1", "aria-modal": "true", "aria-labelledby": this.label ? this.labelId : null, "aria-hidden": this.open ? "false" : "true", onKeyDown: this.handleKeydown }, this.variant === "tooltip" &&
+      h("div", { class: "stzh-popover__arrow", ref: (el) => (this.arrowElement = el), innerHTML: Arrow }), h("div", { class: "stzh-popover__content-inner" }, h("div", { class: "stzh-popover__content-slot" }, h("slot", { name: "content" }), h("div", { class: "stzh-popover__action-slot" }, h("slot", { name: "action" }))), h("div", { class: "stzh-popover__label-wrapper" }, h("h2", { id: this.labelId, class: "stzh-popover__label" }, this.label ? this.label : h("slot", { name: "label" })), h("button", { class: "stzh-popover__close", onClick: () => this.hide(), type: "button" }, h("stzh-icon", { name: "close", class: "stzh-popover__icon" }), h("span", { class: "stzh-popover__vhidden" }, this.localization.close))))))))));
+  }
+  static get is() { return "stzh-popover"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-popover.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-popover.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "open": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether popover should be open"
+        },
+        "attribute": "open",
+        "reflect": true,
+        "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"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Default placement of popover relative to trigger element"
+        },
+        "attribute": "placement",
+        "reflect": true,
+        "defaultValue": "\"bottom\""
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"default\" | \"tooltip\"",
+          "resolved": "\"default\" | \"tooltip\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Variant"
+        },
+        "attribute": "variant",
+        "reflect": true,
+        "defaultValue": "\"default\""
+      },
+      "skidding": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Shifting of popover 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 popover content to trigger. \"8\" when default variant, \"16\" when tooltip variant (arrow height + 8px)."
+        },
+        "attribute": "distance",
+        "reflect": false
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label for mobile view (use label slot as alternative)"
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhPopoverLocalizedText",
+          "resolved": "StzhLocaleComponent & { close: string; }",
+          "references": {
+            "StzhPopoverLocalizedText": {
+              "location": "import",
+              "path": "./stzh-popover.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": "Popover open event"
+        },
+        "complexType": {
+          "original": "StzhPopoverOpenEvent",
+          "resolved": "{ component: \"stzh-popover\"; }",
+          "references": {
+            "StzhPopoverOpenEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhOpened",
+        "name": "stzhOpened",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Popover opened event (after animation)"
+        },
+        "complexType": {
+          "original": "StzhPopoverOpenedEvent",
+          "resolved": "{ component: \"stzh-popover\"; }",
+          "references": {
+            "StzhPopoverOpenedEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhClose",
+        "name": "stzhClose",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Popover close event"
+        },
+        "complexType": {
+          "original": "StzhPopoverCloseEvent",
+          "resolved": "{ component: \"stzh-popover\"; }",
+          "references": {
+            "StzhPopoverCloseEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhClosed",
+        "name": "stzhClosed",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Popover closed event (after animation)"
+        },
+        "complexType": {
+          "original": "StzhPopoverClosedEvent",
+          "resolved": "{ component: \"stzh-popover\"; }",
+          "references": {
+            "StzhPopoverClosedEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "show": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Show popover content",
+          "tags": []
+        }
+      },
+      "hide": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Hide popover content",
+          "tags": []
+        }
+      },
+      "toggle": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Toggle popover 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": "distance",
+        "methodName": "distanceWatcher"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "handleOutsideClick",
+        "target": "document",
+        "capture": true,
+        "passive": false
+      }];
+  }
+}