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

package/dist/esm/stzh-popover.entry.js

@@ -1,357 +1,357 @@
 import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-0e6d34c6.js';
-import { c as computePosition, a as autoUpdate, A as Arrow, o as offset, f as flip, s as shift, b as arrow } from './arrow-18769ca6.js';
+import { c as computePosition, a as autoUpdate, A as Arrow, o as offset, f as flip, s as shift, b as arrow } from './arrow-86a679c7.js';
 import { c as createFocusTrap } from './focus-trap.esm-074705a3.js';
-import { f as fetchTranslations } from './translation-utils-f5b09945.js';
-import { m as media } from './media-utils-db7c9057.js';
-import { w as waitForEvent } from './event-utils-68b64805.js';
-import { s as stopAnimations, a as animateTo } from './animation-utils-27dcfc1e.js';
+import { f as fetchTranslations } from './translation-utils-2623783f.js';
+import { m as media } from './media-utils-9b041ceb.js';
+import { w as waitForEvent } from './event-utils-7a709e21.js';
+import { s as stopAnimations, a as animateTo } from './animation-utils-25c74e5b.js';
 
 const stzhPopoverCss = ".sc-stzh-popover-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-popover-h{display:none}.sc-stzh-popover-h *.sc-stzh-popover,.sc-stzh-popover-h *.sc-stzh-popover::before,.sc-stzh-popover-h *.sc-stzh-popover::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-popover-h{--width:var(--stzh-popover-width);--min-width:var(--stzh-popover-min-width);--max-width:var(--stzh-popover-max-width);--padding:0;--border-radius:var(--stzh-popover-border-radius)}[variant=tooltip].sc-stzh-popover-h{--width:var(--stzh-tooltip-width);--min-width:var(--stzh-tooltip-min-width);--max-width:var(--stzh-tooltip-max-width);--padding:var(--stzh-space-small) var(--stzh-space-large);--border-radius:var(--stzh-tooltip-border-radius)}@media screen and (min-width: 600px){[variant=tooltip].sc-stzh-popover-h{--padding:var(--stzh-tooltip-padding)}}.stzh-popover__arrow.sc-stzh-popover{position:absolute;display:-ms-flexbox;display:flex;color:var(--stzh-color-white)}.stzh-popover--placement-bottom.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover,.stzh-popover--placement-bottom-start.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover,.stzh-popover--placement-bottom-end.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover{top:0;-webkit-transform:translateY(-0.5rem);transform:translateY(-0.5rem)}.stzh-popover--placement-top.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover,.stzh-popover--placement-top-start.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover,.stzh-popover--placement-top-end.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover{bottom:0;-webkit-transform:translateY(0.5rem) rotate(180deg);transform:translateY(0.5rem) rotate(180deg)}.stzh-popover--placement-left.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover,.stzh-popover--placement-left-start.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover,.stzh-popover--placement-left-end.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover{right:0;-webkit-transform:translateX(0.75rem) rotate(90deg);transform:translateX(0.75rem) rotate(90deg)}.stzh-popover--placement-right.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover,.stzh-popover--placement-right-start.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover,.stzh-popover--placement-right-end.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover{left:0;-webkit-transform:translateX(-0.75rem) rotate(-90deg);transform:translateX(-0.75rem) rotate(-90deg)}@media screen and (max-width: 599px){.stzh-popover__content-wrapper.sc-stzh-popover{z-index:var(--stzh-z-index-dialog);display:-ms-flexbox;display:flex;position:fixed;top:0;left:0;width:100%;height:100%;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:stretch;justify-content:stretch}}@media screen and (max-width: 599px){.stzh-popover__backdrop.sc-stzh-popover{z-index:1;position:absolute;top:0;left:0;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;text-align:center;background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));opacity:0.8}}@media screen and (max-width: 599px){.stzh-popover__content.sc-stzh-popover{z-index:2;position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-positive:1;flex-grow:1;overflow:auto}}.stzh-popover__dialog.sc-stzh-popover{margin-top:auto;width:100%;overflow:visible;border-top-left-radius:0.125rem;border-top-right-radius:0.125rem;background-color:var(--stzh-color-white);-ms-touch-action:none;touch-action:none;outline:none;border-bottom:0.125rem solid var(--stzh-color-grey13)}@media screen and (min-width: 600px){.stzh-popover__dialog.sc-stzh-popover{z-index:var(--stzh-z-index-popover);position:absolute;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);left:auto;right:auto;bottom:auto;border-radius:var(--border-radius);-webkit-box-shadow:var(--stzh-box-shadow-popover);box-shadow:var(--stzh-box-shadow-popover);border:none}}.stzh-popover__content-inner.sc-stzh-popover{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-popover__content-slot.sc-stzh-popover{padding:var(--padding)}.stzh-popover__action-slot.sc-stzh-popover{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.stzh-popover__action-slot.sc-stzh-popover:not(:empty){margin:var(--stzh-space-xsmall) var(--stzh-space-small);margin-bottom:var(--stzh-space-medium)}.stzh-popover__label-wrapper.sc-stzh-popover{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:var(--stzh-space-small) var(--stzh-space-large);padding-right:var(--stzh-space-medium);border-bottom:0.0625rem solid var(--stzh-base-border-color);color:var(--stzh-color-grey70)}@media screen and (min-width: 600px){.stzh-popover__label-wrapper.sc-stzh-popover{padding:0;border-bottom:0}}.stzh-popover__label.sc-stzh-popover{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;font-size:var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height));margin:0;margin-right:var(--stzh-space-small)}@media screen and (min-width: 1024px){.stzh-popover__label.sc-stzh-popover{font-size:var(--stzh-font-curve-p2-medium-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p2-medium-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p2-medium-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-popover__label.sc-stzh-popover{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}}.stzh-popover__close.sc-stzh-popover{cursor:pointer;display:-ms-flexbox;display:flex;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background-color:transparent;padding:0;margin-left:auto;border-radius:50%;color:var(--stzh-base-lead-color);padding:var(--stzh-space-xxsmall)}.stzh-popover__icon.sc-stzh-popover{--size:var(--stzh-icon-size-xsmall)}.stzh-popover__arrow.sc-stzh-popover{position:absolute;display:-ms-flexbox;display:flex;color:var(--stzh-color-white)}.stzh-popover__vhidden.sc-stzh-popover{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}.stzh-popover--default.sc-stzh-popover .stzh-popover__close.sc-stzh-popover:focus{-webkit-box-shadow:0 0 0 0.0625rem var(--stzh-color-primary, var(--stzh-color-zueriblue));box-shadow:0 0 0 0.0625rem var(--stzh-color-primary, var(--stzh-color-zueriblue))}@media screen and (min-width: 600px){.stzh-popover--default.sc-stzh-popover .stzh-popover__close.sc-stzh-popover{position:absolute;top:0;right:0;-webkit-transform:translate(30%, -30%);transform:translate(30%, -30%);background-color:var(--stzh-color-grey5)}.stzh-popover--default.sc-stzh-popover .stzh-popover__close.sc-stzh-popover:not(:focus):not(:active){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}}@media screen and (min-width: 600px){.stzh-popover--tooltip.sc-stzh-popover .stzh-popover__close.sc-stzh-popover{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)}}@media screen and (min-width: 600px){.stzh-popover--tooltip.sc-stzh-popover .stzh-popover__icon.sc-stzh-popover{--size:var(--stzh-icon-size-xxsmall)}}@media screen and (min-width: 600px){@supports ((-webkit-filter: var(--stzh-tooltip-drop-shadow)) or (filter: var(--stzh-tooltip-drop-shadow))){.stzh-popover--tooltip.sc-stzh-popover .stzh-popover__dialog.sc-stzh-popover{-webkit-box-shadow:none;box-shadow:none;-webkit-filter:var(--stzh-tooltip-drop-shadow);filter:var(--stzh-tooltip-drop-shadow)}}}.stzh-popover--tooltip.sc-stzh-popover .stzh-popover__content-slot.sc-stzh-popover{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}";
 
-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;
-const StzhPopover = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    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 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))))))))));
-  }
-  get element() { return getElement(this); }
-  static get watchers() { return {
-    "open": ["openWatcher"],
-    "distance": ["distanceWatcher"]
-  }; }
-};
+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;
+const StzhPopover = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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 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))))))))));
+  }
+  get element() { return getElement(this); }
+  static get watchers() { return {
+    "open": ["openWatcher"],
+    "distance": ["distanceWatcher"]
+  }; }
+};
 StzhPopover.style = stzhPopoverCss;
 
 export { StzhPopover as stzh_popover };