@oiz/stzh-components 3.4.0-beta1 → 3.4.0-beta2

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

@@ -0,0 +1,445 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-92254d32.js');
+const arrow = require('./arrow-6135123b.js');
+const focusTrap_esm = require('./focus-trap.esm-46ebbbcb.js');
+const utils = require('./utils-475fb329.js');
+const mediaUtils = require('./media-utils-fa9f86b8.js');
+const eventUtils = require('./event-utils-20e7b8b1.js');
+const animationUtils = require('./animation-utils-925ee0e0.js');
+require('./string-utils-5dd70320.js');
+
+const stzhPopoverCss = ".sc-stzh-popover-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-popover-h{display:none}.sc-stzh-popover-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-popover-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-popover-h *.sc-stzh-popover,.sc-stzh-popover-h *.sc-stzh-popover::before,.sc-stzh-popover-h *.sc-stzh-popover::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-popover-h .has-focus.sc-stzh-popover{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-popover-h .stzh-fylingfocus-focused.sc-stzh-popover{outline-style:none !important}.sc-stzh-popover-h .stzh-fylingfocus-focused.sc-stzh-popover::-moz-focus-inner{border:0 !important}.sc-stzh-popover-h{display:contents;--color:var(--stzh-color-black);--width:var(--stzh-popover-width);--min-width:var(--stzh-popover-min-width);--max-width:var(--stzh-popover-max-width);--height:auto;--min-height:initial;--max-height:initial;--padding:var(--stzh-popover-padding);--content-padding:var(--stzh-popover-content-padding);--border-radius:var(--stzh-popover-border-radius);--background-color:var(--stzh-popover-background-color);--backdrop-opacity:var(--stzh-dialog-backdrop-opacity);--backdrop-background-color:var(--stzh-dialog-backdrop-background-color)}[size=large].sc-stzh-popover-h{--content-padding:var(--stzh-popover-large-content-padding)}[variant=secondary].sc-stzh-popover-h{--background-color:var(--stzh-color-secondary20)}[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);--content-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{--content-padding:var(--stzh-tooltip-padding);--color:var(--stzh-color-white);--link-color:var(--stzh-color-white);--hover-link-color:var(--stzh-color-white70op);--background-color:var(--stzh-color-coolgrey60)}}.stzh-popover.sc-stzh-popover{display:contents}.stzh-popover__arrow.sc-stzh-popover{position:absolute;display:flex;color:var(--background-color)}.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;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;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;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;transform:translateX(-0.75rem) rotate(-90deg)}.stzh-popover__trigger.sc-stzh-popover{display:contents}.stzh-popover__content-wrapper.sc-stzh-popover{display:contents}@media screen and (max-width: 599px){.stzh-popover__content-wrapper.sc-stzh-popover{z-index:var(--stzh-z-index-dialog);display:flex;position:fixed;top:0;left:0;width:100%;height:100%;flex-direction:column;align-items:stretch;justify-content:stretch}}.stzh-popover__backdrop.sc-stzh-popover{display:contents}@media screen and (max-width: 599px){.stzh-popover__backdrop.sc-stzh-popover{z-index:1;position:absolute;display:block;top:0px;left:0px;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;text-align:center;background-color:var(--backdrop-background-color);opacity:var(--backdrop-opacity)}}.stzh-popover__content.sc-stzh-popover{display:contents}@media screen and (max-width: 599px){.stzh-popover__content.sc-stzh-popover{z-index:2;position:relative;display:flex;flex-direction:column;align-items:center;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(--background-color);touch-action:none;outline:none;border-bottom:0.125rem solid var(--stzh-color-old-grey13);color:var(--color);--stzh-base-color:var(--color);--stzh-link-color:var(--link-color);--stzh-link-hover-color:var(--hover-link-color)}@media screen and (min-width: 600px){.stzh-popover__dialog.sc-stzh-popover{z-index:var(--stzh-z-index-popover);position:absolute;display:flex;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);left:auto;right:auto;bottom:auto;border-radius:var(--border-radius);box-shadow:var(--stzh-box-shadow-popover);border:none}}.stzh-popover__content-inner.sc-stzh-popover,.stzh-popover__content-slot-wrapper.sc-stzh-popover{display:flex;flex-direction:column;width:100%}.stzh-popover__content-slot-wrapper.sc-stzh-popover{padding:var(--padding)}.stzh-popover__content-slot.sc-stzh-popover{overflow-y:auto;overflow-x:hidden;overflow-scrolling:touch;padding:var(--content-padding)}.stzh-popover__action-slot.sc-stzh-popover{display:flex;flex-direction:column}.stzh-popover__label-wrapper.sc-stzh-popover{display:flex;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-old-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:var(--stzh-font-style-heavy);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: 900px){.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{visibility:var(--stzh-popover-close-visibility);cursor:pointer;display:flex;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;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:none}@media screen and (min-width: 600px){.stzh-popover__arrow.sc-stzh-popover{display:flex}}.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,.stzh-popover--secondary.sc-stzh-popover .stzh-popover__close.sc-stzh-popover:focus{box-shadow:0 0 0 0.0625rem var(--stzh-color-primary)}@media screen and (min-width: 600px){.stzh-popover--default.sc-stzh-popover .stzh-popover__close.sc-stzh-popover,.stzh-popover--secondary.sc-stzh-popover .stzh-popover__close.sc-stzh-popover{position:absolute;top:0;right:0;transform:translate(30%, -30%);background-color:var(--stzh-color-old-grey5)}.stzh-popover--default.sc-stzh-popover .stzh-popover__close.sc-stzh-popover:not(:focus):not(:active),.stzh-popover--secondary.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__content-inner.sc-stzh-popover{flex-direction:row-reverse;align-items:flex-start}}.stzh-popover--tooltip.sc-stzh-popover .stzh-popover__close.sc-stzh-popover{visibility:visible}@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;font-family:inherit;border:none;background-color:transparent;display:flex;width:2.75rem;height:2.75rem;flex-shrink:0;justify-content:center;align-items:center;color:var(--stzh-color-white);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-small)}}@media screen and (min-width: 600px){@supports (filter: var(--stzh-tooltip-drop-shadow)){.stzh-popover--tooltip.sc-stzh-popover .stzh-popover__dialog.sc-stzh-popover{box-shadow:none;filter:var(--stzh-tooltip-drop-shadow)}}}@media screen and (min-width: 600px){.stzh-popover--tooltip.sc-stzh-popover .stzh-popover__content-slot.sc-stzh-popover{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}}@media screen and (min-width: 600px){.stzh-popover--popover-fullwidth-horizontal.sc-stzh-popover .stzh-popover__dialog.sc-stzh-popover{left:0 !important;right:0 !important;width:100%}}@media screen and (min-width: 600px){.stzh-popover--popover-fullwidth-vertical.sc-stzh-popover .stzh-popover__dialog.sc-stzh-popover{top:0 !important;bottom:0 !important;height:100%}}";
+
+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 = mediaUtils.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 = mediaUtils.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 = mediaUtils.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 = mediaUtils.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) {
+    index.registerInstance(this, hostRef);
+    this.stzhOpen = index.createEvent(this, "stzhOpen", 7);
+    this.stzhOpened = index.createEvent(this, "stzhOpened", 7);
+    this.stzhClose = index.createEvent(this, "stzhClose", 7);
+    this.stzhClosed = index.createEvent(this, "stzhClosed", 7);
+    this.initialTouchX = null;
+    this.initialTouchY = null;
+    this.mediaChangeHandler = () => {
+      const isStzhHeaderStuck = document.documentElement.style.getPropertyValue("--stzh-header-is-stuck");
+      this.isHeaderStuckAndViewportMicro =
+        !mediaUtils.media("small").matches && isStzhHeaderStuck === "1" && this.hasStzhHeaderParent;
+      if (this.open && this.isBranchedOutToBody && !this.isHeaderStuckAndViewportMicro) {
+        this.branchInFromBody();
+      }
+    };
+    this.handleKeydown = (event) => {
+      if (event.keyCode === keyCode.ESC) {
+        this.hide();
+      }
+    };
+    this.onClickTrigger = () => {
+      this.toggle();
+    };
+    this.computePosition = async () => {
+      if (mediaUtils.media("small").matches) {
+        const middleware = [
+          arrow.offset({
+            mainAxis: this.distance,
+            crossAxis: this.skidding,
+          }),
+          arrow.flip({
+            padding: 5,
+          }),
+          arrow.shift({
+            padding: 5,
+          }),
+        ];
+        if (this.variant === "tooltip") {
+          middleware.push(arrow.arrow({
+            element: this.arrowElement,
+            padding: 5,
+          }));
+        }
+        const { x = 0, y = 0, strategy = "absolute", placement, middlewareData, } = await arrow.computePosition(this.triggerFirstElement, this.dialogElement, {
+          strategy: this.strategy,
+          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) {
+        const isInDropdown = event.target.closest('.stzh-dropdown') !== null;
+        if (!isInDropdown) {
+          this.hide();
+        }
+      }
+      this.initialTouchY = null;
+      this.initialTouchX = null;
+    };
+    this.init = () => {
+      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) {
+        this.triggerFirstElement = trigger;
+        trigger.addEventListener("click", this.onClickTrigger);
+      }
+    };
+    this.initializedPopover = false;
+    this.open = false;
+    this.placement = "bottom";
+    this.fullwidth = "";
+    this.variant = "default";
+    this.size = "default";
+    this.skidding = 0;
+    this.distance = undefined;
+    this.label = "";
+    this.strategy = "absolute";
+    this.localization = undefined;
+    this.computedPlacement = undefined;
+    this.isHeaderStuckAndViewportMicro = undefined;
+    this.isBranchedOutToBody = undefined;
+    this.hasStzhHeaderParent = undefined;
+  }
+  /** Show popover content */
+  async show() {
+    if (this.open) {
+      return;
+    }
+    this.mediaChangeHandler();
+    if (this.isHeaderStuckAndViewportMicro) {
+      this.branchOutToBody();
+    }
+    this.toggledByMethod = true;
+    this.open = true;
+    return eventUtils.waitForEvent(this.element, "stzhOpened");
+  }
+  /** Hide popover content */
+  async hide() {
+    if (!this.open) {
+      return;
+    }
+    this.toggledByMethod = true;
+    this.open = false;
+    await eventUtils.waitForEvent(this.element, "stzhClosed");
+    this.mediaChangeHandler();
+    if (this.isHeaderStuckAndViewportMicro) {
+      this.branchInFromBody();
+    }
+    return true;
+  }
+  /** 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 (!this.dialogElement) {
+      return;
+    }
+    if (newValue) {
+      if (this.toggledByMethod) {
+        this.stzhOpen.emit({
+          component: "stzh-popover",
+        });
+      }
+      const animationShow = animationContentWrapperShow();
+      const animationShowDialog = animationDialogShow();
+      await Promise.all([
+        animationUtils.stopAnimations(this.contentWrapperElement),
+        animationUtils.stopAnimations(this.contentElement),
+        animationUtils.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([
+        animationUtils.animateTo(mediaUtils.media("small").matches ? this.dialogElement : this.contentWrapperElement, animationShow.keyframes, animationShow.options),
+        animationUtils.animateTo(mediaUtils.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([
+        animationUtils.stopAnimations(this.contentWrapperElement),
+        animationUtils.stopAnimations(this.contentElement),
+        animationUtils.stopAnimations(this.dialogElement),
+      ]);
+      await Promise.all([
+        animationUtils.animateTo(mediaUtils.media("small").matches ? this.dialogElement : this.contentWrapperElement, animationHide.keyframes, animationHide.options),
+        animationUtils.animateTo(mediaUtils.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" ? 12 : 8;
+    }
+  }
+  setStzhHeaderParent() {
+    let parent = this.element.parentElement;
+    while (parent) {
+      if (parent.tagName && parent.tagName.toLowerCase() === "stzh-header") {
+        return true;
+      }
+      parent = parent.parentElement;
+    }
+    return false;
+  }
+  branchOutToBody() {
+    document.body.append(this.element);
+    this.parentNode.appendChild(this.triggerElement);
+    this.isBranchedOutToBody = true;
+  }
+  branchInFromBody() {
+    this.parentNode.appendChild(this.element);
+    this.rootElement.prepend(this.triggerElement);
+    this.isBranchedOutToBody = false;
+  }
+  async componentWillLoad() {
+    this.id = `stzh-popover-${popoverCounter++}`;
+    this.parentNode = this.element.parentNode;
+    this.hasStzhHeaderParent = this.setStzhHeaderParent();
+    this.distanceWatcher(this.distance);
+    if (!this.localization) {
+      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "popover");
+    }
+  }
+  popoverShown() {
+    document.body.classList.add(CLASS_BODY_OPEN);
+    const isStzh = utils.isStzhElement(this.triggerFirstElement);
+    this.triggerFirstElement.setAttribute(isStzh ? "a11y-expanded" : "aria-expanded", "true");
+    if (this.trap) {
+      this.trap.activate();
+    }
+  }
+  popoverHidden() {
+    document.body.classList.remove(CLASS_BODY_OPEN);
+    const isStzh = utils.isStzhElement(this.triggerFirstElement);
+    this.triggerFirstElement.setAttribute(isStzh ? "a11y-expanded" : "aria-expanded", "false");
+    if (this.trap) {
+      this.trap.deactivate();
+    }
+  }
+  componentDidRender() {
+    this.mediaChangeHandler();
+    const isStzh = utils.isStzhElement(this.triggerFirstElement);
+    if ((isStzh && !this.triggerFirstElement.getAttribute("a11y-describedby")) ||
+      (!isStzh && !this.triggerFirstElement.getAttribute("aria-describedby"))) {
+      this.triggerFirstElement.setAttribute(isStzh ? "a11y-describedby" : "aria-describedby", `${this.id}-trigger-description`);
+    }
+    if ((isStzh && !this.triggerFirstElement.getAttribute("a11y-label")) ||
+      (!isStzh && !this.triggerFirstElement.getAttribute("aria-label"))) {
+      this.triggerFirstElement.setAttribute(isStzh ? "a11y-label" : "aria-label", this.label);
+    }
+    if ((isStzh && !this.triggerFirstElement.getAttribute("analytics-id")) ||
+      (!isStzh && !this.triggerFirstElement.getAttribute("s-object-id"))) {
+      this.triggerFirstElement.setAttribute(isStzh ? "analytics-id" : "s-object-id", this.label);
+    }
+  }
+  componentDidUpdate() {
+    if (this.open && !this.initializedPopover) {
+      this.initializeAutoUpdate();
+      this.initializeFocusTrap();
+      this.popoverShown();
+      this.initializedPopover = true;
+    }
+    if (this.initializedPopover) {
+      if (this.open) {
+        this.popoverShown();
+      }
+      else {
+        this.popoverHidden();
+      }
+      this.computePosition();
+      if (this.trap) {
+        this.trap.updateContainerElements(this.dialogElement);
+      }
+    }
+  }
+  initializeAutoUpdate() {
+    this.autoUpdateCleanup = arrow.autoUpdate(this.triggerFirstElement, this.dialogElement, this.computePosition);
+  }
+  initializeFocusTrap() {
+    this.trap = focusTrap_esm.createFocusTrap(this.dialogElement, {
+      fallbackFocus: this.dialogElement,
+      clickOutsideDeactivates: true,
+      returnFocusOnDeactivate: true,
+    });
+  }
+  componentDidLoad() {
+    this.contentWrapperElement.hidden = !this.open;
+    this.open ? this.popoverShown() : this.popoverHidden();
+  }
+  connectedCallback() {
+    mediaUtils.addMediaChangeListener(this.mediaChangeHandler);
+    this.init();
+    this.observer = new MutationObserver(this.init);
+    this.observer.observe(this.element, {
+      childList: true,
+      subtree: true,
+    });
+  }
+  disconnectedCallback() {
+    mediaUtils.removeMediaChangeListener(this.mediaChangeHandler);
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+    if (this.autoUpdateCleanup) {
+      this.autoUpdateCleanup();
+    }
+    if (this.triggerFirstElement) {
+      this.triggerFirstElement.removeEventListener("click", this.onClickTrigger);
+    }
+  }
+  render() {
+    const classes = {
+      "stzh-popover": true,
+      [`stzh-popover--open`]: this.open,
+      [`stzh-popover--placement-${this.computedPlacement}`]: !!this.computedPlacement,
+      [`stzh-popover--fullwidth-${this.fullwidth}`]: !!this.fullwidth,
+      [`stzh-popover--${this.size}`]: !!this.size,
+      [`stzh-popover--${this.variant}`]: !!this.variant,
+    };
+    return (index.h(index.Host, null, index.h("div", { class: classes, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd, ref: el => (this.rootElement = el) }, index.h("div", { ref: el => (this.triggerElement = el), class: "stzh-popover__trigger" }, index.h("slot", null)), index.h("div", { class: "stzh-popover__vhidden", id: `${this.id}-trigger-description` }, this.localization.open), index.h("div", { ref: el => (this.contentWrapperElement = el), class: "stzh-popover__content-wrapper" }, index.h("div", { class: "stzh-popover__backdrop" }), index.h("div", { ref: el => (this.contentElement = el), class: "stzh-popover__content" }, index.h("div", { ref: el => (this.dialogElement = el), class: "stzh-popover__dialog", role: "dialog", tabindex: "-1", "aria-modal": "true", "aria-labelledby": this.label ? `${this.id}-label` : null, "aria-hidden": this.open ? "false" : "true", onKeyDown: this.handleKeydown }, this.variant === "tooltip" && (index.h("div", { class: "stzh-popover__arrow", ref: el => (this.arrowElement = el), innerHTML: arrow.Arrow })), index.h("div", { class: "stzh-popover__content-inner" }, index.h("div", { class: "stzh-popover__label-wrapper" }, index.h("h2", { id: `${this.id}-label`, class: "stzh-popover__label" }, this.label ? this.label : index.h("slot", { name: "label" })), index.h("button", { class: "stzh-popover__close", onClick: () => this.hide(), type: "button" }, index.h("stzh-icon", { name: "close", class: "stzh-popover__icon" }), index.h("span", { class: "stzh-popover__vhidden" }, this.localization.close))), index.h("div", { class: "stzh-popover__content-slot-wrapper" }, index.h("div", { class: "stzh-popover__content-slot" }, index.h("slot", { name: "content" })), index.h("div", { class: "stzh-popover__action-slot" }, index.h("slot", { name: "action" }))))))))));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "open": ["openWatcher"],
+    "distance": ["distanceWatcher"]
+  }; }
+};
+StzhPopover.style = stzhPopoverCss;
+
+exports.stzh_popover = StzhPopover;
+
+//# sourceMappingURL=stzh-popover.cjs.entry.js.map

package/dist/cjs/stzh-popover.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"stzh-popover.entry.cjs.js","mappings":"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","names":["media","offset","flip","shift","arrow","computePosition","waitForEvent","stopAnimations","animateTo","isStzhElement","autoUpdate","createFocusTrap","addMediaChangeListener","removeMediaChangeListener","h","Host","Arrow"],"sources":["src/components/stzh-popover/stzh-popover.scss?tag=stzh-popover&encapsulation=scoped","src/components/stzh-popover/stzh-popover.tsx"],"sourcesContent":["/**\n * @prop --width: Width of popover above small breakpoint\n * @prop --min-width: Minimum width of popover above small breakpoint\n * @prop --max-width: Maximum width of popover above small breakpoint\n * @prop --padding: Padding of popover\n * @prop --content-padding: Padding of popover content\n * @prop --border-radius: Border radius of popover\n * @prop --backdrop-opacity: Opacity of popover backdrop (used on mikro breakpoint)\n *\n * @prop --stzh-popover-width: **Global**: Width of popover above small breakpoint (default `223px`)\n * @prop --stzh-popover-min-width: **Global**: Minimum width of popover above small breakpoint (default `initial`)\n * @prop --stzh-popover-max-width: **Global**: Maximum width of popover above small breakpoint (default `initial`)\n * @prop --stzh-popover-padding: **Global**: Padding of popover (default `0px`)\n * @prop --stzh-popover-content-padding: **Global**: Padding of popover content (default `8px 0px`)\n * @prop --stzh-popover-border-radius: **Global**: Border radius of popover above small breakpoint (default `3px`)\n *\n * @prop --stzh-dialog-backdrop-opacity: **Global**: Opacity of backdrops\n * @prop --stzh-dialog-backdrop-background-color: **Global**: Background color of backdrops\n */\n\n:host {\n  display: contents;\n\n  --color: #{$colorBlack};\n  --width: #{$popoverWidth};\n  --min-width: #{$popoverMinWidth};\n  --max-width: #{$popoverMaxWidth};\n  --height: auto;\n  --min-height: initial;\n  --max-height: initial;\n  --padding: #{$popoverPadding};\n  --content-padding: #{$popoverContentPadding};\n  --border-radius: #{$popoverBorderRadius};\n  --background-color: #{$popoverBackgroundColor};\n  --backdrop-opacity: #{$dialogBackdropOpacity};\n  --backdrop-background-color: #{$dialogBackdropBackgroundColor};\n\n  &[size=\"large\"] {\n    --content-padding: #{$popoverLargeContentPadding};\n  }\n\n  &[variant=\"secondary\"] {\n    --background-color: #{$colorSecondary20};\n  }\n\n  &[variant=\"tooltip\"] {\n    --width: #{$tooltipWidth};\n    --min-width: #{$tooltipMinWidth};\n    --max-width: #{$tooltipMaxWidth};\n    --content-padding: #{space('small')} #{space('large')};\n    --border-radius: #{$tooltipBorderRadius};\n\n    @include mq($from: small) {\n      --content-padding: #{$tooltipPadding};\n      --color: #{$colorWhite};\n      --link-color: #{$colorWhite};\n      --hover-link-color: #{$colorWhite70op};\n      --background-color: #{$colorCoolgrey60};\n    }\n  }\n}\n\n.stzh-popover {\n  @include tooltip-arrow;\n  display: contents;\n\n  &__trigger {\n    display: contents;\n  }\n\n  &__content-wrapper {\n    // position: absolute;\n    // width: 100%;\n    // height: 100%;\n    // pointer-events: none;\n    display: contents;\n\n    @include mq($to: small) {\n      z-index: $zIndexDialog;\n      display: flex;\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      flex-direction: column;\n      align-items: stretch;\n      justify-content: stretch;\n    }\n  }\n\n  &__backdrop {\n    display: contents;\n\n    @include mq($to: small) {\n      z-index: 1;\n      position: absolute;\n      display: block;\n      top: 0px;\n      left: 0px;\n      width: 100%;\n      height: 100%;\n      overflow-x: hidden;\n      overflow-y: auto;\n      text-align: center;\n      background-color: var(--backdrop-background-color);\n      opacity: var(--backdrop-opacity);\n    }\n  }\n\n  &__content {\n    // pointer-events: all;\n    display: contents;\n\n    @include mq($to: small) {\n      z-index: 2;\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      flex-grow: 1;\n      overflow: auto;\n    }\n  }\n\n  &__dialog {\n    margin-top: auto;\n    width: 100%;\n    overflow: visible;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n    background-color: var(--background-color);\n    touch-action: none;\n    outline: none;\n    border-bottom: 2px solid $colorOldGrey13;\n    color: var(--color);\n\n    --stzh-base-color: var(--color);\n    --stzh-link-color: var(--link-color);\n    // TODO: check with designer\n    --stzh-link-hover-color: var(--hover-link-color);\n\n    @include mq($from: small) {\n      z-index: $zIndexPopover;\n      position: absolute;\n      display: flex;\n      width: var(--width);\n      min-width: var(--min-width);\n      max-width: var(--max-width);\n      // max-width: calc(100vw - var(--stzh-scrollbar-width) - #{space('small')});\n      height: var(--height);\n      min-height: var(--min-height);\n      max-height: var(--max-height);\n      left: auto;\n      right: auto;\n      bottom: auto;\n      border-radius: var(--border-radius);\n      box-shadow: $boxShadowPopover;\n      border: none;\n    }\n  }\n\n  &__content-inner,\n  &__content-slot-wrapper {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  }\n\n  &__content-slot-wrapper {\n    padding: var(--padding);\n  }\n\n  &__content-slot {\n    overflow-y: auto;\n    overflow-x: hidden;\n    overflow-scrolling: touch;\n    padding: var(--content-padding);\n  }\n\n  &__action-slot {\n    display: flex;\n    flex-direction: column;\n\n    // &:not(:empty) {\n    //   margin: space('xsmall') space('small');\n    //   margin-bottom: space('medium');\n    // }\n  }\n\n  &__label-wrapper {\n    display: flex;\n    align-items: center;\n    padding: space('small') space('large');\n    padding-right: space('medium');\n    border-bottom: 1px solid $baseBorderColor;\n    color: $colorOldGrey70;\n\n    @include mq($from: small) {\n      padding: 0;\n      border-bottom: 0;\n    }\n  }\n\n  &__label {\n    @include font('heavy');\n    @include fontCurve('p2');\n    margin: 0;\n    margin-right: space('small');\n\n    @include mq($from: small) {\n      @include visuallyhidden;\n    }\n  }\n\n  &__close {\n    visibility: $popoverCloseVisibility;\n    cursor: pointer;\n    display: flex;\n    appearance: none;\n    font-family: inherit;\n    border: none;\n    background-color: transparent;\n    padding: 0;\n    margin-left: auto;\n    border-radius: 50%;\n    color: $baseLeadColor;\n    padding: space('xxsmall');\n  }\n\n  &__icon {\n    --size: #{iconSize('xsmall')};\n  }\n\n  &__arrow {\n    position: absolute;\n    display: none;\n\n    @include mq($from: small) {\n      display: flex;\n    }\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  /* Only non tooltip variants */\n\n  &--default &__close,\n  &--secondary &__close {\n    &:focus {\n      box-shadow: 0 0 0 1px $colorPrimary;\n    }\n\n    @include mq($from: small) {\n      @include visuallyhiddenFocusable;\n      position: absolute;\n      top: 0;\n      right: 0;\n      transform: translate(30%, -30%);\n      background-color: $colorOldGrey5;\n    }\n  }\n\n  /* Tooltip variant */\n\n  &--tooltip &__content-inner {\n    @include mq($from: small) {\n      flex-direction: row-reverse;\n      align-items: flex-start;\n    }\n  }\n\n  &--tooltip &__close {\n    visibility: visible;\n\n    @include mq($from: small) {\n      @include tooltip__close;\n    }\n  }\n\n  &--tooltip &__icon {\n    @include mq($from: small) {\n      @include tooltip__icon;\n    }\n  }\n\n  &--tooltip &__dialog {\n    @include mq($from: small) {\n      @include tooltip-dropshadow;\n    }\n  }\n\n  &--tooltip &__content-slot {\n    @include mq($from: small) {\n      @include tooltip-fontsize;\n    }\n  }\n\n  /* Has fullwidth popover */\n\n  &--popover-fullwidth-horizontal &__dialog {\n    @include mq($from: small) {\n      left: 0 !important;\n      right: 0 !important;\n      width: 100%;\n    }\n  }\n\n  &--popover-fullwidth-vertical &__dialog {\n    @include mq($from: small) {\n      top: 0 !important;\n      bottom: 0 !important;\n      height: 100%;\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n  StzhPopoverClosedEvent,\n  StzhPopoverCloseEvent,\n  StzhPopoverOpenedEvent,\n  StzhPopoverOpenEvent,\n} from \"../../index\";\n\nimport { arrow, autoUpdate, computePosition, flip, offset, Placement, shift } from \"@floating-ui/dom\";\n\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\nimport { isStzhElement } from \"../../utils/utils\";\nimport { addMediaChangeListener, media, removeMediaChangeListener } from \"../../utils/media-utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { animateTo, stopAnimations } from \"../../utils/animation-utils\";\n\nimport { StzhPopoverLocalizedText } from \"./stzh-popover.localization\";\n\nimport Arrow from \"../stzh-tooltip/assets/arrow.svg\";\n\nconst ANIMATION_SHOW_DURATION = 200;\nconst ANIMATION_HIDE_DURATION = 300;\nconst ANIMATION_SHOW_DURATION_SMALL = 100;\nconst ANIMATION_HIDE_DURATION_SMALL = 200;\n\nfunction animationContentWrapperShow() {\n  const isSmall = media(\"small\").matches;\n  return {\n    keyframes: [{ opacity: \"0\" }, { opacity: \"1\" }],\n    options: {\n      duration: isSmall ? ANIMATION_SHOW_DURATION_SMALL : ANIMATION_SHOW_DURATION,\n      easing: \"linear\",\n    },\n  };\n}\n\nfunction animationContentWrapperHide() {\n  const isSmall = media(\"small\").matches;\n  return {\n    keyframes: [{ opacity: \"1\" }, { opacity: \"0\" }],\n    options: {\n      duration: isSmall ? ANIMATION_HIDE_DURATION_SMALL : ANIMATION_HIDE_DURATION,\n      easing: \"linear\",\n    },\n  };\n}\n\nfunction animationDialogShow() {\n  const isSmall = media(\"small\").matches;\n  return {\n    keyframes: [{ transform: isSmall ? \"translateY(-8px)\" : \"translateY(100%)\" }, { transform: \"translateY(0px)\" }],\n    options: {\n      duration: isSmall ? ANIMATION_SHOW_DURATION_SMALL : ANIMATION_SHOW_DURATION,\n      easing: \"linear\",\n    },\n  };\n}\n\nfunction animationDialogHide() {\n  const isSmall = media(\"small\").matches;\n  return {\n    keyframes: [{ transform: \"translateY(0px)\" }, { transform: isSmall ? \"translateY(-8px)\" : \"translateY(100%)\" }],\n    options: {\n      duration: isSmall ? ANIMATION_HIDE_DURATION_SMALL : ANIMATION_HIDE_DURATION,\n      easing: \"linear\",\n    },\n  };\n}\n\nconst keyCode = {\n  ESC: 27,\n};\n\nconst CLASS_BODY_OPEN = \"stzh-popover-open\";\n\nlet popoverCounter = 0;\n\n/**\n * @slot - Trigger element for popover\n * @slot content - Any element used as popover content\n * @slot action - `stzh-button` element\n * @slot label - Label for mobile view (alternative for label property)\n */\n@Component({\n  tag: \"stzh-popover\",\n  styleUrl: \"stzh-popover.scss\",\n  scoped: true,\n})\nexport class StzhPopover {\n  /** Whether popover should be open */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /** Default placement of popover relative to trigger element */\n  @Prop({ reflect: true }) placement: Placement = \"bottom\";\n\n  /** Whether to stretch popover to fullwith of parent */\n  @Prop({ reflect: true }) fullwidth: \"horizontal\" | \"vertical\" | \"\" = \"\";\n\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"secondary\" | \"tooltip\" = \"default\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: \"default\" | \"large\" = \"default\";\n\n  /** Shifting of popover content */\n  @Prop() skidding: number = 0;\n\n  /** Distance from popover content to trigger. \"8\" when default variant, \"16\" when tooltip variant, arrow height (8px) + spacing (4px) = 12. */\n  @Prop() distance: number;\n\n  /** Label for mobile view (use label slot as alternative) */\n  @Prop() label: string = \"\";\n\n  /** Position strategy */\n  @Prop() strategy: \"absolute\" | \"fixed\" = \"absolute\";\n\n  /** Translation strings. */\n  @Prop() localization: StzhPopoverLocalizedText;\n\n  @Element() element: HTMLStzhPopoverElement;\n\n  /** Popover open event */\n  @Event() stzhOpen: EventEmitter<StzhPopoverOpenEvent>;\n\n  /** Popover opened event (after animation) */\n  @Event() stzhOpened: EventEmitter<StzhPopoverOpenedEvent>;\n\n  /** Popover close event */\n  @Event() stzhClose: EventEmitter<StzhPopoverCloseEvent>;\n\n  /** Popover closed event (after animation) */\n  @Event() stzhClosed: EventEmitter<StzhPopoverClosedEvent>;\n\n  private parentNode: Node;\n\n  /** Show popover content */\n  @Method()\n  async show() {\n    if (this.open) {\n      return;\n    }\n\n    this.mediaChangeHandler();\n    if (this.isHeaderStuckAndViewportMicro) {\n      this.branchOutToBody();\n    }\n\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  /** Hide popover content */\n  @Method()\n  async hide() {\n    if (!this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n\n    await waitForEvent(this.element, \"stzhClosed\");\n\n    this.mediaChangeHandler();\n    if (this.isHeaderStuckAndViewportMicro) {\n      this.branchInFromBody();\n    }\n\n    return true;\n  }\n\n  /** Toggle popover content */\n  @Method()\n  async toggle() {\n    if (this.open) {\n      return await this.hide();\n    } else {\n      return await this.show();\n    }\n  }\n\n  @Method()\n  async update() {\n    return await this.computePosition();\n  }\n\n  @Listen(\"click\", { target: \"document\", capture: true })\n  handleOutsideClick(event: MouseEvent) {\n    if (!this.open) {\n      return;\n    }\n\n    const isClickOutside =\n      event.target !== this.dialogElement && this.dialogElement.contains(event.target as HTMLElement) === false;\n\n    const isClickTrigger =\n      event.target === this.triggerElement || this.triggerElement.contains(event.target as HTMLElement);\n\n    if (isClickOutside && !isClickTrigger) {\n      this.hide();\n    }\n  }\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.dialogElement) {\n      return;\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-popover\",\n        });\n      }\n\n      const animationShow = animationContentWrapperShow();\n      const animationShowDialog = animationDialogShow();\n\n      await Promise.all([\n        stopAnimations(this.contentWrapperElement),\n        stopAnimations(this.contentElement),\n        stopAnimations(this.dialogElement),\n      ]);\n\n      // safari seems to need will-change,\n      // otherwise it has problems animating the element with the drop shadow\n      this.dialogElement.style.willChange = \"transform, opacity, position, top, left, bottom, right\";\n      this.contentWrapperElement.hidden = false;\n\n      await Promise.all([\n        animateTo(\n          media(\"small\").matches ? this.dialogElement : this.contentWrapperElement,\n          animationShow.keyframes,\n          animationShow.options\n        ),\n        animateTo(\n          media(\"small\").matches ? this.dialogElement : this.contentElement,\n          animationShowDialog.keyframes,\n          animationShowDialog.options\n        ),\n      ]);\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-popover\",\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-popover\",\n        });\n      }\n\n      const animationHide = animationContentWrapperHide();\n      const animationHideDialog = animationDialogHide();\n\n      await Promise.all([\n        stopAnimations(this.contentWrapperElement),\n        stopAnimations(this.contentElement),\n        stopAnimations(this.dialogElement),\n      ]);\n\n      await Promise.all([\n        animateTo(\n          media(\"small\").matches ? this.dialogElement : this.contentWrapperElement,\n          animationHide.keyframes,\n          animationHide.options\n        ),\n        animateTo(\n          media(\"small\").matches ? this.dialogElement : this.contentElement,\n          animationHideDialog.keyframes,\n          animationHideDialog.options\n        ),\n      ]);\n\n      this.contentWrapperElement.hidden = true;\n      this.dialogElement.style.willChange = \"auto\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-popover\",\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  @Watch(\"distance\")\n  distanceWatcher(newValue: number) {\n    if (typeof newValue === \"number\") {\n      this.distance = newValue;\n    } else {\n      this.distance = this.variant === \"tooltip\" ? 12 : 8;\n    }\n  }\n\n  @State() computedPlacement: Placement;\n  @State() isHeaderStuckAndViewportMicro: boolean;\n  @State() isBranchedOutToBody: boolean;\n  @State() hasStzhHeaderParent: boolean;\n\n  private observer: MutationObserver;\n\n  private contentWrapperElement: HTMLElement;\n  private contentElement: HTMLElement;\n  private arrowElement: HTMLElement;\n  private rootElement: HTMLElement;\n  private triggerElement: HTMLElement;\n  private triggerFirstElement: HTMLElement;\n  private dialogElement: HTMLElement;\n  private autoUpdateCleanup: Function;\n\n  private initialTouchX: number = null;\n  private initialTouchY: number = null;\n\n  private id: string;\n  private trap: FocusTrap;\n  private toggledByMethod: boolean;\n\n  private setStzhHeaderParent(): boolean {\n    let parent = this.element.parentElement;\n    while (parent) {\n      if (parent.tagName && parent.tagName.toLowerCase() === \"stzh-header\") {\n        return true;\n      }\n      parent = parent.parentElement;\n    }\n    return false;\n  }\n\n  private mediaChangeHandler = () => {\n    const isStzhHeaderStuck = document.documentElement.style.getPropertyValue(\"--stzh-header-is-stuck\");\n    this.isHeaderStuckAndViewportMicro =\n      !media(\"small\").matches && isStzhHeaderStuck === \"1\" && this.hasStzhHeaderParent;\n\n    if (this.open && this.isBranchedOutToBody && !this.isHeaderStuckAndViewportMicro) {\n      this.branchInFromBody();\n    }\n  };\n\n  private branchOutToBody() {\n    document.body.append(this.element);\n    this.parentNode.appendChild(this.triggerElement);\n    this.isBranchedOutToBody = true;\n  }\n\n  private branchInFromBody() {\n    this.parentNode.appendChild(this.element);\n    this.rootElement.prepend(this.triggerElement);\n    this.isBranchedOutToBody = false;\n  }\n\n  private handleKeydown = (event: KeyboardEvent) => {\n    if (event.keyCode === keyCode.ESC) {\n      this.hide();\n    }\n  };\n\n  private onClickTrigger = () => {\n    this.toggle();\n  };\n\n  private computePosition = async () => {\n    if (media(\"small\").matches) {\n      const middleware = [\n        offset({\n          mainAxis: this.distance,\n          crossAxis: this.skidding,\n        }),\n        flip({\n          padding: 5,\n        }),\n        shift({\n          padding: 5,\n        }),\n      ];\n\n      if (this.variant === \"tooltip\") {\n        middleware.push(\n          arrow({\n            element: this.arrowElement,\n            padding: 5,\n          })\n        );\n      }\n\n      const {\n        x = 0,\n        y = 0,\n        strategy = \"absolute\",\n        placement,\n        middlewareData,\n      } = await computePosition(this.triggerFirstElement, this.dialogElement, {\n        strategy: this.strategy,\n        placement: this.placement,\n        middleware,\n      });\n\n      this.computedPlacement = placement;\n\n      Object.assign(this.dialogElement.style, {\n        position: strategy,\n        left: `${x}px`,\n        top: `${y}px`,\n      });\n\n      if (this.variant === \"tooltip\") {\n        Object.assign(this.arrowElement.style, {\n          left: x != null ? `${middlewareData.arrow.x}px` : \"\",\n          top: y != null ? `${middlewareData.arrow.y}px` : \"\",\n        });\n      }\n    } else {\n      Object.assign(this.dialogElement.style, {\n        position: null,\n        left: null,\n        top: null,\n      });\n\n      if (this.variant === \"tooltip\") {\n        Object.assign(this.arrowElement.style, {\n          left: null,\n          top: null,\n        });\n      }\n    }\n  };\n\n  private handleTouchStart = (event: TouchEvent) => {\n    const touch = event.changedTouches[0];\n    this.initialTouchX = touch.pageX;\n    this.initialTouchY = touch.pageY;\n  };\n\n  // private handleTouchMove = (event: TouchEvent) => {\n  //   event.preventDefault()\n  // }\n\n  private handleTouchEnd = (event: TouchEvent) => {\n    const touch = event.changedTouches[0];\n    const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled\n    const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled\n    const threshold = 70;\n\n    const isYSwipe = Math.abs(distY) >= threshold && Math.abs(distX) <= threshold;\n\n    if (isYSwipe) {\n      const isInDropdown = (event.target as HTMLElement).closest('.stzh-dropdown') !== null;\n      if (!isInDropdown){\n        this.hide();\n      }\n    }\n\n    this.initialTouchY = null;\n    this.initialTouchX = null;\n  };\n\n  private init = () => {\n    let trigger = this.triggerElement?.firstElementChild as HTMLElement;\n\n    if (!trigger) {\n      const defaultSlot = Array.from(this.element.children).find(child => !child.hasAttribute(\"slot\")) as HTMLElement;\n\n      trigger = defaultSlot;\n    }\n\n    if (trigger) {\n      this.triggerFirstElement = trigger;\n      trigger.addEventListener(\"click\", this.onClickTrigger);\n    }\n  };\n\n  async componentWillLoad() {\n    this.id = `stzh-popover-${popoverCounter++}`;\n    this.parentNode = this.element.parentNode;\n    this.hasStzhHeaderParent = this.setStzhHeaderParent();\n\n    this.distanceWatcher(this.distance);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"popover\");\n    }\n  }\n\n  private popoverShown() {\n    document.body.classList.add(CLASS_BODY_OPEN);\n\n    const isStzh = isStzhElement(this.triggerFirstElement);\n\n    this.triggerFirstElement.setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", \"true\");\n\n    if (this.trap) {\n      this.trap.activate();\n    }\n  }\n\n  private popoverHidden() {\n    document.body.classList.remove(CLASS_BODY_OPEN);\n\n    const isStzh = isStzhElement(this.triggerFirstElement);\n\n    this.triggerFirstElement.setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", \"false\");\n\n    if (this.trap) {\n      this.trap.deactivate();\n    }\n  }\n\n  componentDidRender() {\n    this.mediaChangeHandler();\n    const isStzh = isStzhElement(this.triggerFirstElement);\n\n    if (\n      (isStzh && !this.triggerFirstElement.getAttribute(\"a11y-describedby\")) ||\n      (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-describedby\"))\n    ) {\n      this.triggerFirstElement.setAttribute(\n        isStzh ? \"a11y-describedby\" : \"aria-describedby\",\n        `${this.id}-trigger-description`\n      );\n    }\n\n    if (\n      (isStzh && !this.triggerFirstElement.getAttribute(\"a11y-label\")) ||\n      (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-label\"))\n    ) {\n      this.triggerFirstElement.setAttribute(isStzh ? \"a11y-label\" : \"aria-label\", this.label);\n    }\n\n    if (\n      (isStzh && !this.triggerFirstElement.getAttribute(\"analytics-id\")) ||\n      (!isStzh && !this.triggerFirstElement.getAttribute(\"s-object-id\"))\n    ) {\n      this.triggerFirstElement.setAttribute(isStzh ? \"analytics-id\" : \"s-object-id\", this.label);\n    }\n  }\n\n  private initializedPopover = false\n\n  componentDidUpdate() {\n    if (this.open && !this.initializedPopover) {\n      this.initializeAutoUpdate();\n      this.initializeFocusTrap();\n      this.popoverShown();\n      this.initializedPopover = true\n    }\n\n    if (this.initializedPopover) {\n      if (this.open) {\n        this.popoverShown();\n      } else {\n        this.popoverHidden();\n      }\n\n      this.computePosition();\n      if (this.trap) {\n        this.trap.updateContainerElements(this.dialogElement);\n      }\n    }\n  }\n\n  initializeAutoUpdate() {\n    this.autoUpdateCleanup = autoUpdate(this.triggerFirstElement, this.dialogElement, this.computePosition);\n  }\n\n  initializeFocusTrap() {\n    this.trap = createFocusTrap(this.dialogElement, {\n      fallbackFocus: this.dialogElement,\n      clickOutsideDeactivates: true,\n      returnFocusOnDeactivate: true,\n    });\n  }\n\n  componentDidLoad() {\n    this.contentWrapperElement.hidden = !this.open;\n    this.open ? this.popoverShown() : this.popoverHidden();\n  }\n\n  connectedCallback() {\n    addMediaChangeListener(this.mediaChangeHandler);\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.mediaChangeHandler);\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n    }\n\n    if (this.triggerFirstElement) {\n      this.triggerFirstElement.removeEventListener(\"click\", this.onClickTrigger);\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-popover\": true,\n      [`stzh-popover--open`]: this.open,\n      [`stzh-popover--placement-${this.computedPlacement}`]: !!this.computedPlacement,\n      [`stzh-popover--fullwidth-${this.fullwidth}`]: !!this.fullwidth,\n      [`stzh-popover--${this.size}`]: !!this.size,\n      [`stzh-popover--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host>\n        <div\n          class={classes}\n          onTouchStart={this.handleTouchStart}\n          onTouchEnd={this.handleTouchEnd}\n          ref={el => (this.rootElement = el as HTMLDivElement)}\n        >\n          <div ref={el => (this.triggerElement = el as HTMLDivElement)} class=\"stzh-popover__trigger\">\n            <slot></slot>\n          </div>\n          <div class=\"stzh-popover__vhidden\" id={`${this.id}-trigger-description`}>\n            {this.localization.open}\n          </div>\n          <div ref={el => (this.contentWrapperElement = el as HTMLDivElement)} class=\"stzh-popover__content-wrapper\">\n            <div class=\"stzh-popover__backdrop\"></div>\n            <div ref={el => (this.contentElement = el as HTMLDivElement)} class=\"stzh-popover__content\">\n              <div\n                ref={el => (this.dialogElement = el as HTMLDivElement)}\n                class=\"stzh-popover__dialog\"\n                role=\"dialog\"\n                tabindex=\"-1\"\n                aria-modal=\"true\"\n                aria-labelledby={this.label ? `${this.id}-label` : null}\n                aria-hidden={this.open ? \"false\" : \"true\"}\n                onKeyDown={this.handleKeydown}\n              >\n                {this.variant === \"tooltip\" && (\n                  <div\n                    class=\"stzh-popover__arrow\"\n                    ref={el => (this.arrowElement = el as HTMLDivElement)}\n                    innerHTML={Arrow}\n                  ></div>\n                )}\n                <div class=\"stzh-popover__content-inner\">\n                  <div class=\"stzh-popover__label-wrapper\">\n                    <h2 id={`${this.id}-label`} class=\"stzh-popover__label\">\n                      {this.label ? this.label : <slot name=\"label\"></slot>}\n                    </h2>\n                    <button class=\"stzh-popover__close\" onClick={() => this.hide()} type=\"button\">\n                      <stzh-icon name=\"close\" class=\"stzh-popover__icon\"></stzh-icon>\n                      <span class=\"stzh-popover__vhidden\">{this.localization.close}</span>\n                    </button>\n                  </div>\n                  <div class=\"stzh-popover__content-slot-wrapper\">\n                    <div class=\"stzh-popover__content-slot\">\n                      <slot name=\"content\"></slot>\n                    </div>\n                    <div class=\"stzh-popover__action-slot\">\n                      <slot name=\"action\"></slot>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/stzh-saptcha.cjs.entry.js

@@ -10,7 +10,16 @@ let saptchaCounter = 0;
 const StzhSaptcha = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.stzhChange = index.createEvent(this, "stzhChange", 7);
     this._numbers = [];
+    this.onInputChange = (event) => {
+      this.value = event.detail.value;
+      this.stzhChange.emit({
+        component: "stzh-saptcha",
+        originalEvent: event,
+        value: this.value
+      });
+    };
     this.localization = undefined;
     this.numbers = [];
     this.value = "";
@@ -18,10 +27,6 @@ const StzhSaptcha = class {
     this.error = undefined;
     this.invalid = false;
     this.disabled = false;
-    this.inputValue = "";
-  }
-  valueWatcher(newValue) {
-    this.inputValue = newValue;
   }
   numbersWatcher(newValue) {
     if (typeof newValue === "string") {
@@ -52,9 +57,6 @@ const StzhSaptcha = class {
       this._error = [];
     }
   }
-  componentDidLoad() {
-    this.inputValue = this.value;
-  }
   async componentWillLoad() {
     this.saptchaId = `stzh-saptcha-${saptchaCounter++}`;
     this.numbersWatcher(this.numbers);
@@ -70,11 +72,10 @@ const StzhSaptcha = class {
     return (index.h(index.Host, { "is-invalid": this.invalid || this._error.length > 0 }, index.h("div", { class: classes }, index.h("div", { class: "stzh-saptcha__box" }, index.h("div", { class: "stzh-saptcha__info", id: `${this.saptchaId}-info` }, this.localization.info, " ", this.localization.question), index.h("div", { class: "stzh-saptcha__answer", id: `${this.saptchaId}-answer` }, this._numbers.map((number, index$1) => index.h("span", { class: "stzh-saptcha__number" }, number, index$1 < this._numbers.length - 1 &&
       (index$1 === this._numbers.length - 2
         ? this.localization.answerOr
-        : ", ")))), index.h("stzh-input", { class: "stzh-saptcha__input", label: this.localization.answer, name: this.name, invalid: this.invalid, error: this.error, disabled: this.disabled, value: this.inputValue, required: true, a11yDescribedby: `${this.saptchaId}-info ${this.saptchaId}-answer` })))));
+        : ", ")))), index.h("stzh-input", { class: "stzh-saptcha__input", label: this.localization.answer, name: this.name, invalid: this.invalid, error: this.error, disabled: this.disabled, value: this.value, onStzhChange: this.onInputChange, required: true, a11yDescribedby: `${this.saptchaId}-info ${this.saptchaId}-answer` })))));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
-    "value": ["valueWatcher"],
     "numbers": ["numbersWatcher"],
     "error": ["errorWatcher"]
   }; }