@oiz/stzh-components 0.0.0-pretest

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

@@ -0,0 +1,33 @@
+import { r as registerInstance, h, a as Host, g as getElement } from './index-0e6d34c6.js';
+
+const stzhMetanavCss = ".sc-stzh-metanav-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-metanav-h{display:none}.sc-stzh-metanav-h *.sc-stzh-metanav,.sc-stzh-metanav-h *.sc-stzh-metanav::before,.sc-stzh-metanav-h *.sc-stzh-metanav::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-metanav-h .sc-stzh-metanav-s>stzh-link .stzh-link{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);padding:var(--stzh-space-xsmall) var(--stzh-space-small);color:var(--stzh-color-grey61)}.sc-stzh-metanav-h .sc-stzh-metanav-s>stzh-link .stzh-link:hover{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.sc-stzh-metanav-h .sc-stzh-metanav-s>stzh-link .stzh-link:hover .stzh-link__text{text-decoration:underline}.sc-stzh-metanav-h .sc-stzh-metanav-s>stzh-link .stzh-link__text{text-decoration:none}.stzh-metanav.sc-stzh-metanav{display:-ms-flexbox;display:flex}";
+
+const StzhMetanav = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.init = () => {
+      const links = this.element.querySelectorAll("stzh-link");
+      links.forEach((link) => {
+        link.setAttribute("role", "listitem");
+      });
+    };
+  }
+  connectedCallback() {
+    this.init();
+    this.observer = new MutationObserver(this.init);
+    this.observer.observe(this.element, {
+      childList: true,
+      subtree: true
+    });
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "stzh-metanav", role: "list" }, h("slot", null))));
+  }
+  get element() { return getElement(this); }
+};
+StzhMetanav.style = stzhMetanavCss;
+
+export { StzhMetanav as stzh_metanav };

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

@@ -0,0 +1,96 @@
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-0e6d34c6.js';
+import { c as createFocusTrap } from './focus-trap.esm-074705a3.js';
+
+const stzhOverlayCss = ".sc-stzh-overlay-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-overlay-h{display:none}.sc-stzh-overlay-h *.sc-stzh-overlay,.sc-stzh-overlay-h *.sc-stzh-overlay::before,.sc-stzh-overlay-h *.sc-stzh-overlay::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-overlay.sc-stzh-overlay{display:none;z-index:var(--stzh-z-index-overlay);position:fixed;top:0;left:0;width:100%;height:100%;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:stretch;justify-content:stretch;-ms-flex-align:stretch;align-items:stretch}.stzh-overlay__backdrop.sc-stzh-overlay{z-index:1;background-color:var(--stzh-color-white);opacity:0.95;position:absolute;top:0;left:0;width:100%;height:100%}.stzh-overlay__content.sc-stzh-overlay{z-index:2;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;position:relative;-ms-flex-positive:1;flex-grow:1;overflow:auto}.stzh-overlay__content-inner.sc-stzh-overlay{margin-top:auto;margin-bottom:auto;outline:none}.stzh-overlay--is-open.sc-stzh-overlay{display:-ms-flexbox;display:flex}";
+
+const CLASS_BODY_OPEN = "stzh-overlay-open";
+const StzhOverlay = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.stzhOpen = createEvent(this, "stzhOpen", 7);
+    this.stzhClose = createEvent(this, "stzhClose", 7);
+    /** Whether overlay is open */
+    this.open = false;
+    /** Stay in original position (true) or move to body (false) */
+    this.stay = true;
+    /** Accessible label for dialog */
+    this.a11yLabel = "";
+  }
+  async show() {
+    this.open = true;
+    this.stzhOpen.emit({
+      component: "stzh-overlay"
+    });
+  }
+  async hide() {
+    this.open = false;
+    this.stzhClose.emit({
+      component: "stzh-overlay"
+    });
+  }
+  getSiblings() {
+    if (!this.parentElement) {
+      return [];
+    }
+    return Array.from(this.parentElement.children).filter((child) => child !== this.element);
+  }
+  disableSiblings() {
+    this.getSiblings().forEach((sibling) => {
+      sibling.setAttribute("aria-hidden", "true");
+    });
+  }
+  enableSiblings() {
+    this.getSiblings().forEach((sibling) => {
+      sibling.removeAttribute("aria-hidden");
+    });
+  }
+  dialogShown() {
+    document.body.classList.add(CLASS_BODY_OPEN);
+    this.disableSiblings();
+    if (this.trap) {
+      this.trap.activate();
+    }
+  }
+  dialogHidden() {
+    document.body.classList.remove(CLASS_BODY_OPEN);
+    this.enableSiblings();
+    if (this.trap) {
+      this.trap.deactivate();
+    }
+  }
+  connectedCallback() {
+    if (!this.stay && this.element.parentElement !== document.body) {
+      document.body.appendChild(this.element);
+    }
+    this.parentElement = this.element.parentElement;
+  }
+  componentDidRender() {
+    this.open ? this.dialogShown() : this.dialogHidden();
+  }
+  componentDidUpdate() {
+    this.trap.updateContainerElements(this.element);
+  }
+  componentDidLoad() {
+    this.trap = createFocusTrap(this.element, {
+      fallbackFocus: this.dialogElement,
+      returnFocusOnDeactivate: true
+    });
+    if (this.open) {
+      this.dialogShown();
+    }
+  }
+  disconnectedCallback() {
+    this.dialogHidden();
+  }
+  render() {
+    const classes = {
+      "stzh-overlay": true,
+      "stzh-overlay--is-open": this.open
+    };
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-overlay__backdrop" }), h("div", { class: "stzh-overlay__content" }, h("div", { class: "stzh-overlay__content-inner", ref: (el) => (this.dialogElement = el), tabindex: "-1", role: "dialog", "aria-label": this.a11yLabel, "aria-hidden": this.open ? "false" : "true" }, h("slot", null))))));
+  }
+  get element() { return getElement(this); }
+};
+StzhOverlay.style = stzhOverlayCss;
+
+export { StzhOverlay as stzh_overlay };

package/dist/esm/stzh-page-skiplinks.entry.js

@@ -0,0 +1,33 @@
+import { r as registerInstance, h, a as Host, g as getElement } from './index-0e6d34c6.js';
+
+const stzhPageSkiplinksCss = ".sc-stzh-page-skiplinks-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-page-skiplinks-h{display:none}.sc-stzh-page-skiplinks-h *.sc-stzh-page-skiplinks,.sc-stzh-page-skiplinks-h *.sc-stzh-page-skiplinks::before,.sc-stzh-page-skiplinks-h *.sc-stzh-page-skiplinks::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-page-skiplinks-h{z-index:var(--stzh-z-index-popup);position:absolute;top:var(--stzh-space-medium);right:var(--stzh-grid-gutter-small)}@media screen and (min-width: 800px){.sc-stzh-page-skiplinks-h{right:50%}}@media screen and (min-width: 1260px){.sc-stzh-page-skiplinks-h{top:var(--stzh-space-xlarge);right:60%}}";
+
+const StzhPageSkiplinks = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.init = () => {
+      const links = this.element.querySelectorAll('stzh-skiplink');
+      links.forEach((link) => {
+        link.setAttribute("role", "listitem");
+      });
+    };
+  }
+  connectedCallback() {
+    this.init();
+    this.observer = new MutationObserver(this.init);
+    this.observer.observe(this.element, {
+      childList: true,
+      subtree: true
+    });
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "stzh-page-skiplinks", role: "list" }, h("slot", null))));
+  }
+  get element() { return getElement(this); }
+};
+StzhPageSkiplinks.style = stzhPageSkiplinksCss;
+
+export { StzhPageSkiplinks as stzh_page_skiplinks };

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

@@ -0,0 +1,68 @@
+import { r as registerInstance, h, a as Host, g as getElement } from './index-0e6d34c6.js';
+import { s as setPropsIfNull, h as hasSlot } from './utils-c5d68020.js';
+
+const stzhPagetitleCss = ".sc-stzh-pagetitle-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-pagetitle-h{display:none}.sc-stzh-pagetitle-h *.sc-stzh-pagetitle,.sc-stzh-pagetitle-h *.sc-stzh-pagetitle::before,.sc-stzh-pagetitle-h *.sc-stzh-pagetitle::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=heading]{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=heading]{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=heading]{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=heading]{margin-bottom:var(--stzh-space-xxlarge)}}.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=image]{margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=lead]{margin-top:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=lead]{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=lead]{margin-top:var(--stzh-space-xlarge)}}.stzh-pagetitle__actions.sc-stzh-pagetitle{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}";
+
+const StzhPagetitle = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.init = () => {
+      const headings = this.element.querySelectorAll('stzh-heading[slot="heading"], [slot="heading"] stzh-heading');
+      const leads = this.element.querySelectorAll('stzh-text[slot="lead"], [slot="lead"] stzh-text');
+      const actions = this.element.querySelectorAll('stzh-link[slot="action-left"], stzh-link[slot="action-right"], [slot="action-left"] stzh-link, [slot="action-right"] stzh-link');
+      const actionsRight = this.element.querySelectorAll('stzh-link[slot="action-right"], [slot="action-right"] stzh-link');
+      headings.forEach((heading) => {
+        setPropsIfNull(heading, {
+          withBorder: true
+        });
+      });
+      leads.forEach((lead) => {
+        setPropsIfNull(lead, {
+          lead: true
+        });
+      });
+      actionsRight.forEach((link) => {
+        setPropsIfNull(link, {
+          icon: "web-link"
+        });
+      });
+      actions.forEach((link) => {
+        setPropsIfNull(link, {
+          size: "small"
+        });
+      });
+    };
+  }
+  connectedCallback() {
+    this.init();
+    this.observer = new MutationObserver(this.init);
+    this.observer.observe(this.element, {
+      childList: true,
+      subtree: true
+    });
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  render() {
+    const headingSlotUsed = hasSlot(this.element, 'heading');
+    const imageSlotUsed = hasSlot(this.element, 'image');
+    const leadSlotUsed = hasSlot(this.element, 'lead');
+    const actionLeftSlotUsed = hasSlot(this.element, 'action-left');
+    const actionRightSlotUsed = hasSlot(this.element, 'action-right');
+    const classes = {
+      "stzh-pagetitle": true,
+      "stzh-pagetitle--has-heading": headingSlotUsed,
+      "stzh-pagetitle--has-image": imageSlotUsed,
+      "stzh-pagetitle--has-lead": leadSlotUsed,
+      "stzh-pagetitle--has-action": actionLeftSlotUsed || actionRightSlotUsed,
+      "stzh-pagetitle--has-action-left": actionLeftSlotUsed,
+      "stzh-pagetitle--has-action-right": actionRightSlotUsed,
+    };
+    return (h(Host, null, h("div", { class: classes }, h("slot", { name: "heading" }), h("div", { class: "stzh-pagetitle__actions" }, h("slot", { name: "action-left" }), h("slot", { name: "action-right" })), h("slot", { name: "image" }), h("slot", { name: "lead" }))));
+  }
+  get element() { return getElement(this); }
+};
+StzhPagetitle.style = stzhPagetitleCss;
+
+export { StzhPagetitle as stzh_pagetitle };

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

@@ -0,0 +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 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';
+
+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"]
+  }; }
+};
+StzhPopover.style = stzhPopoverCss;
+
+export { StzhPopover as stzh_popover };