@oiz/stzh-components 4.9.0-beta3 → 4.9.0-beta4

package/dist/components/p-CEtAPJ_k.js

@@ -1,681 +0,0 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-ptAFQZzh.js';
-import { i as isStzhElement } from './p-CN5apKPb.js';
-import { a as addMediaChangeListener, r as removeMediaChangeListener, m as media } from './p-CUGRmgip.js';
-
-const stzhCarouselCss = () => `.sc-stzh-carousel-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-carousel-h,[stzh-hidden].sc-stzh-carousel-h{display:none}.sc-stzh-carousel-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-carousel-h *.sc-stzh-carousel,.sc-stzh-carousel-h *.sc-stzh-carousel::before,.sc-stzh-carousel-h *.sc-stzh-carousel::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-carousel-h .has-focus.sc-stzh-carousel{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-carousel-h .stzh-fylingfocus-focused.sc-stzh-carousel{outline-style:none !important}.sc-stzh-carousel-h .stzh-fylingfocus-focused.sc-stzh-carousel::-moz-focus-inner{border:0 !important}.sc-stzh-carousel-h{--gutter:var(--stzh-space-medium)}@media screen and (min-width: 600px){.sc-stzh-carousel-h{--gutter:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sc-stzh-carousel-h{--gutter:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.sc-stzh-carousel-h{--gutter:var(--stzh-space-xxlarge)}}.sc-stzh-carousel-h{--peek:calc(var(--peek-in, 0px) + var(--peek-out, 0px));--peek-in:calc(var(--stzh-space-medium) + var(--stzh-space-medium));--padding-top:0px;--padding-bottom:0px;--snap-stop:always;--slides:1;--slide-size:calc(
-    (100% - (var(--slides) - 1) * var(--gutter)) / var(--slides)
-  )}@media screen and (min-width: 600px){.sc-stzh-carousel-h{--peek-in:calc(
-      var(--stzh-space-xxxlarge) + var(--stzh-space-xlarge)
-    )}}@media screen and (min-width: 900px){.sc-stzh-carousel-h{--peek-in:calc(var(--stzh-space-big) + var(--stzh-space-xxlarge))}}.sc-stzh-carousel-h.sc-stzh-carousel-s>*,.sc-stzh-carousel-h .sc-stzh-carousel-s>*{width:100%;height:inherit;flex-shrink:0;scroll-snap-align:start;scroll-snap-stop:var(--snap-stop);transition:opacity var(--stzh-base-transition-animation-speed)}.sc-stzh-carousel-h .sc-stzh-carousel-s [inert]{opacity:0.5}.sc-stzh-carousel-h.sc-stzh-carousel-s>*,.sc-stzh-carousel-h.sc-stzh-carousel-s>*:where(stzh-figure[inert]),.sc-stzh-carousel-h .sc-stzh-carousel-s>*:where(stzh-figure[inert]){--caption-opacity:0}.sc-stzh-carousel-h .sc-stzh-carousel-s img{-webkit-user-drag:none;user-drag:none;-webkit-user-select:none;user-select:none}.sc-stzh-carousel-h.sc-stzh-carousel-s>[slot=actions],.sc-stzh-carousel-h .sc-stzh-carousel-s>[slot=actions]{position:absolute;top:0;left:0;z-index:1;pointer-events:none;padding:0 var(--peek)}@media print{.sc-stzh-carousel-h.sc-stzh-carousel-s>[slot=actions],.sc-stzh-carousel-h .sc-stzh-carousel-s>[slot=actions]{display:none}}.sc-stzh-carousel-h.sc-stzh-carousel-s>[slot=actions],.sc-stzh-carousel-h.sc-stzh-carousel-s>[slot=actions] stzh-text,.sc-stzh-carousel-h .sc-stzh-carousel-s>[slot=actions] stzh-text{width:auto}.sc-stzh-carousel-h.sc-stzh-carousel-s>[slot=actions],.sc-stzh-carousel-h.sc-stzh-carousel-s>[slot=actions] stzh-button,.sc-stzh-carousel-h .sc-stzh-carousel-s>[slot=actions] stzh-button{pointer-events:all}.sc-stzh-carousel-h.sc-stzh-carousel-s>[slot=actions],.sc-stzh-carousel-h.sc-stzh-carousel-s>[slot=actions] .stzh-carousel-action-previous,.sc-stzh-carousel-h .sc-stzh-carousel-s>[slot=actions] .stzh-carousel-action-previous,.sc-stzh-carousel-h.sc-stzh-carousel-s>[slot=actions] .stzh-carousel-action-next,.sc-stzh-carousel-h .sc-stzh-carousel-s>[slot=actions] .stzh-carousel-action-next{position:absolute;top:50%;transform:translateY(-50%)}.sc-stzh-carousel-h.sc-stzh-carousel-s>[slot=actions],.sc-stzh-carousel-h.sc-stzh-carousel-s>[slot=actions] .stzh-carousel-action-previous,.sc-stzh-carousel-h .sc-stzh-carousel-s>[slot=actions] .stzh-carousel-action-previous{left:calc((var(--stzh-space-medium) + var(--stzh-space-medium)) / -1)}@media screen and (min-width: 600px){.sc-stzh-carousel-h.sc-stzh-carousel-s>[slot=actions],.sc-stzh-carousel-h.sc-stzh-carousel-s>[slot=actions] .stzh-carousel-action-previous,.sc-stzh-carousel-h .sc-stzh-carousel-s>[slot=actions] .stzh-carousel-action-previous{left:calc((var(--stzh-space-xxxlarge) + var(--stzh-space-xlarge)) / -1)}}@media screen and (min-width: 900px){.sc-stzh-carousel-h.sc-stzh-carousel-s>[slot=actions],.sc-stzh-carousel-h.sc-stzh-carousel-s>[slot=actions] .stzh-carousel-action-previous,.sc-stzh-carousel-h .sc-stzh-carousel-s>[slot=actions] .stzh-carousel-action-previous{left:calc((var(--stzh-space-big) + var(--stzh-space-xxlarge)) / -1)}}.sc-stzh-carousel-h.sc-stzh-carousel-s>[slot=actions],.sc-stzh-carousel-h.sc-stzh-carousel-s>[slot=actions] .stzh-carousel-action-next,.sc-stzh-carousel-h .sc-stzh-carousel-s>[slot=actions] .stzh-carousel-action-next{right:calc((var(--stzh-space-medium) + var(--stzh-space-medium)) / -1)}@media screen and (min-width: 600px){.sc-stzh-carousel-h.sc-stzh-carousel-s>[slot=actions],.sc-stzh-carousel-h.sc-stzh-carousel-s>[slot=actions] .stzh-carousel-action-next,.sc-stzh-carousel-h .sc-stzh-carousel-s>[slot=actions] .stzh-carousel-action-next{right:calc((var(--stzh-space-xxxlarge) + var(--stzh-space-xlarge)) / -1)}}@media screen and (min-width: 900px){.sc-stzh-carousel-h.sc-stzh-carousel-s>[slot=actions],.sc-stzh-carousel-h.sc-stzh-carousel-s>[slot=actions] .stzh-carousel-action-next,.sc-stzh-carousel-h .sc-stzh-carousel-s>[slot=actions] .stzh-carousel-action-next{right:calc((var(--stzh-space-big) + var(--stzh-space-xxlarge)) / -1)}}.sc-stzh-carousel-h.sc-stzh-carousel-s>stzh-ratio[slot=actions] stzh-space,.sc-stzh-carousel-h.sc-stzh-carousel-s>stzh-ratio[slot=actions],.sc-stzh-carousel-h .sc-stzh-carousel-s>stzh-ratio[slot=actions] stzh-space,.sc-stzh-carousel-h.sc-stzh-carousel-s>stzh-ratio[slot=actions] stzh-hspace,.sc-stzh-carousel-h .sc-stzh-carousel-s>stzh-ratio[slot=actions] stzh-hspace,.sc-stzh-carousel-h.sc-stzh-carousel-s>stzh-ratio[slot=actions] stzh-vspace,.sc-stzh-carousel-h .sc-stzh-carousel-s>stzh-ratio[slot=actions] stzh-vspace{padding:var(--stzh-space-xsmall)}.sc-stzh-carousel-h.sc-stzh-carousel-s>stzh-ratio[slot=actions],.sc-stzh-carousel-h .sc-stzh-carousel-s>stzh-ratio[slot=actions]{--background-color:transparent}[variant=cards].sc-stzh-carousel-h{--gutter:var(--stzh-space-xxsmall)}@media screen and (min-width: 900px){[variant=cards].sc-stzh-carousel-h{--gutter:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){[variant=cards].sc-stzh-carousel-h{--gutter:var(--stzh-space-small)}}[variant=cards].sc-stzh-carousel-h{--padding-top:0.25rem;--padding-bottom:0.25rem}@media screen and (min-width: 900px){[variant=cards].sc-stzh-carousel-h{--peek-out:2.5rem}}@media screen and (min-width: 1260px){[variant=cards].sc-stzh-carousel-h{--peek-out:4rem}}@media screen and (min-width: 1600px){[variant=cards].sc-stzh-carousel-h{--peek-out:calc(
-      (100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / 2
-    )}}.sc-stzh-carousel-h[variant=cards].sc-stzh-carousel-s>[slot=actions],.sc-stzh-carousel-h[variant=cards] .sc-stzh-carousel-s>[slot=actions]{position:absolute;order:1;margin-top:calc(var(--stzh-space-medium) - var(--padding-bottom))}[no-peek].sc-stzh-carousel-h:not([no-peek=false]){--peek-out:0px;--peek-in:0px}.stzh-carousel.sc-stzh-carousel{position:relative;display:flex;flex-direction:column;width:calc(100% + var(--peek-out) * 2);margin-left:calc(var(--peek-out) / -1);margin-right:calc(var(--peek-out) / -1)}.stzh-carousel__vhidden.sc-stzh-carousel{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-carousel__indicator.sc-stzh-carousel{margin-top:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-carousel__indicator.sc-stzh-carousel{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-carousel__indicator.sc-stzh-carousel{margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-carousel__indicator.sc-stzh-carousel{margin-top:var(--stzh-space-xxlarge)}}.stzh-carousel__indicator.sc-stzh-carousel{margin-left:auto;margin-right:auto;position:relative;width:14.375rem;height:0.25rem;background-color:var(--stzh-color-black20op)}.stzh-carousel__indicator-track.sc-stzh-carousel{position:absolute;background-color:var(--stzh-color-secondary50);height:0.375rem;left:0px;bottom:0px;transition-property:left, width;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-carousel__scroll.sc-stzh-carousel{position:relative;grid-area:slides;display:grid;width:100%;height:100%;place-items:center;overflow-x:auto;overflow-y:visible;grid-auto-flow:column;grid-auto-columns:var(--slide-size);grid-auto-rows:100%;column-gap:var(--gutter);-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 var(--peek);padding:var(--padding-top) var(--peek) var(--padding-bottom)}@media (prefers-reduced-motion: reduce){.stzh-carousel__scroll.sc-stzh-carousel{scroll-behavior:auto}}.stzh-carousel__scroll.sc-stzh-carousel::-webkit-scrollbar{display:none}.stzh-carousel--is-draggable.sc-stzh-carousel .stzh-carousel__scroll.sc-stzh-carousel{cursor:grab}.stzh-carousel--is-dragging.sc-stzh-carousel .stzh-carousel__scroll.sc-stzh-carousel{cursor:grabbing}.stzh-carousel--is-disabled.sc-stzh-carousel .stzh-carousel__scroll.sc-stzh-carousel{cursor:not-allowed;overflow:hidden}.stzh-carousel--is-non-interactive.sc-stzh-carousel{pointer-events:none;touch-action:none}`;
-
-const reducedMotionMedia = window.matchMedia("(prefers-reduced-motion: reduce)");
-let carouselCounter = 0;
-const StzhCarousel = /*@__PURE__*/ proxyCustomElement(class StzhCarousel extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.stzhSlideStart = createEvent(this, "stzhSlideStart");
-        this.stzhSlidePassed = createEvent(this, "stzhSlidePassed");
-        this.stzhSlideEnd = createEvent(this, "stzhSlideEnd");
-        /** Carousel variant */
-        this.variant = "default";
-        /** Whether carousel is disabled */
-        this.disabled = false;
-        /** Whether to remove inside/outside peek. */
-        this.noPeek = false;
-        /** Slides number */
-        this.slides = 1;
-        /** Slides number above small breakpoint */
-        this.slidesSmall = 0;
-        /** Slides number above medium breakpoint */
-        this.slidesMedium = 0;
-        /** Slides number above large breakpoint */
-        this.slidesLarge = 0;
-        /** Slides number above ultra breakpoint */
-        this.slidesUltra = 0;
-        // /** How many slides per swipe */
-        // @Prop() swipeSlides: number = 1;
-        // /** How many slides per swipe above small breakpoint */
-        // @Prop() swipeSlidesSmall: number = 0;
-        // /** How many slides per swipe above medium breakpoint */
-        // @Prop() swipeSlidesMedium: number = 0;
-        // /** How many slides per swipe above large breakpoint */
-        // @Prop() swipeSlidesLarge: number = 0;
-        // /** How many slides per swipe above ultra breakpoint */
-        // @Prop() swipeSlidesUltra: number = 0;
-        /** Active slide (readonly) */
-        this.slide = 0;
-        /**
-         * Whether autoplay is enabled.
-         * Gets paused, when user has focus inside carousel element or hovers over it.
-         * Also when reduced motion media query is active or carousel is set disabled.
-         * Gets disabled permanently, when user interacts with carousel manually (clicks prev/next, scrolls or drags)
-         */
-        this.autoplay = false;
-        /** Timeout delay in milliseconds used for autoplay */
-        this.autoplayTimeout = 3000;
-        /** Whether scrolling & dragging should be disabled */
-        this.nonInteractive = false;
-        /** Whether drag with mouse should be disabled (still will be able to scroll with wheeling or arrow keys) */
-        this.preventMouseDrag = false;
-        /** Whether autoplay pause should be prevented when user hovers/focuses carousel */
-        this.preventAutoplayPause = false;
-        /** Whether autoplay stop should be prevented when user scroll or drags carousel */
-        this.preventAutoplayStop = false;
-        /**
-         * Enable all slides to be tabbable (will disable prev/next arrows from being tabbable).
-         * By default only the visible slides will be tabbable and the prev/next can be used to change slides
-         * (enabled when `variant` is set to `cards`).
-         */
-        this.tabThrough = false;
-        /** Whether indicator should be shown */
-        this.withTrack = false;
-        /** Timeout delay in milliseconds used to catch the end of scroll events */
-        this.scrollTimeout = 100;
-        /** Minimum drag distance that needs to be reached to swipe to next/previous slide(s). */
-        this.distanceQuickSwipe = 40;
-        /** Minimum drag distance that neeeds to be reached to prevent click on slide elements. */
-        this.distancePreventClick = 6;
-        /** Whether autoplay is currently running */
-        this.autoplayRunning = false;
-        /** Whether autoplay is currently disabled by reduced motion media */
-        this.autoplayDisabledByMotionMedia = false;
-        /** Whether autoplay is currently disabled by mouse */
-        this.autoplayDisabledByMouse = false;
-        /** Whether autoplay is currently disabled by focus */
-        this.autoplayDisabledByFocus = false;
-        /** Whether autoplay is currently disabled by scroll */
-        this.autoplayDisabledByScroll = false;
-        /** Whether autoplay is currently disabled by drag */
-        this.autoplayDisabledByDrag = false;
-        /** Whether user is currently dragging with mouse */
-        this.dragging = false;
-        /** Whether user is currently scrolling */
-        this.scrolling = false;
-        /** Aria live text */
-        this.ariaLive = "";
-        /** Currently shown slides */
-        this.currentSlides = 1;
-        /** How many slides should be moved currently */
-        this.currentSwipeSlides = 1;
-        /** Slide elements */
-        this.slideElements = [];
-        /** Previous elements */
-        this.previousElements = [];
-        /** Next elements */
-        this.nextElements = [];
-        /** Navigation text elements */
-        this.navigationTextElements = [];
-        /** Current scroll position */
-        this.slideScrollLeft = 0;
-        /** Flag whether scrolling was done by user or not */
-        this.scrolledByAutoplay = false;
-        /** Timeout ID used to catch the end of scroll events */
-        this.scrollTimeoutId = null;
-        /** Last drag event position */
-        this.lastX = null;
-        /** Where the dragging started */
-        this.startX = null;
-        /** Where the dragging started scroll position */
-        this.startScrollLeft = null;
-        /** Timeout ID for a smooth drag release */
-        this.disableTimeoutId = null;
-        /** Whether user has just stopped dragging */
-        this.stoppedDragging = false;
-        this.onReducedMotionMediaChange = () => {
-            this.autoplayDisabledByMotionMedia = reducedMotionMedia.matches;
-        };
-        this.onMouseenter = () => {
-            if (!this.preventAutoplayPause) {
-                this.autoplayDisabledByMouse = true;
-            }
-        };
-        this.onMouseleave = () => {
-            this.autoplayDisabledByMouse = false;
-        };
-        this.onFocusin = () => {
-            if (!this.preventAutoplayPause) {
-                this.autoplayDisabledByFocus = true;
-            }
-        };
-        this.onFocusout = () => {
-            this.autoplayDisabledByFocus = false;
-        };
-        this.onPreviousClick = () => {
-            this.scrollToPreviousSnapPoint();
-        };
-        this.onNextClick = () => {
-            this.scrollToNextSnapPoint();
-        };
-        this.onSlideResize = () => {
-            if (this.scrollElement) {
-                this.itemSize = this.sizingMethod();
-            }
-        };
-        this.onMutation = () => {
-            if (!this.scrollElement) {
-                return;
-            }
-            this.slideElements = Array.from(this.scrollElement.children);
-            this.slideElements.forEach((slide, index) => {
-                slide.setAttribute("role", "group");
-                slide.setAttribute("aria-roledescription", "slide");
-                slide.setAttribute("aria-label", this.localization.slideLabel
-                    .replace(/\{current\}/gi, (index + 1).toString())
-                    .replace(/\{total\}/gi, this.slideElements.length.toString()));
-            });
-            this.previousElements = Array.from(this.element.querySelectorAll("[data-stzh-carousel-previous]"));
-            this.nextElements = Array.from(this.element.querySelectorAll("[data-stzh-carousel-next]"));
-            this.navigationTextElements = Array.from(this.element.querySelectorAll("[data-stzh-carousel-navigation-text]"));
-        };
-        this.onScroll = () => {
-            if (this.scrollTimeoutId === null) {
-                const direction = this.scrollElement.scrollLeft > this.slideScrollLeft ? 1 : -1;
-                this.scrolling = true;
-                if (!this.scrolledByAutoplay) {
-                    if (this.preventAutoplayStop) {
-                        this.autoplayDisabledByScroll = true;
-                    }
-                    else {
-                        this.autoplay = false;
-                    }
-                }
-                this.stzhSlideStart.emit({
-                    component: "stzh-carousel",
-                    index: this.slide + direction,
-                });
-            }
-            if (this.slide !== this.calculateSlide()) {
-                this.update();
-                this.stzhSlidePassed.emit({
-                    component: "stzh-carousel",
-                    index: this.slide,
-                });
-            }
-            this.scrollTimeoutId && window.clearTimeout(this.scrollTimeoutId);
-            this.scrollTimeoutId = window.setTimeout(this.onScrollEnd, this.scrollTimeout);
-        };
-        this.onScrollEnd = () => {
-            this.scrollTimeoutId = null;
-            this.update();
-            this.scrolling = false;
-            this.scrolledByAutoplay = false;
-            this.autoplayDisabledByScroll = false;
-            if (this.stoppedDragging) {
-                this.stoppedDragging = false;
-                this.scrollElement.style.removeProperty("scroll-behavior");
-                this.scrollElement.style.removeProperty("scroll-snap-type");
-            }
-            if (this.tabThrough || this.variant === "cards") {
-                this.ariaLive = "";
-            }
-            else {
-                this.ariaLive = (this.currentSlides > 1 ? this.localization.slidesLabel : this.localization.slideLabel)
-                    .replace(/\{(current|from)\}/gi, (this.slide + 1).toString())
-                    .replace(/\{to\}/gi, (this.slide + this.currentSlides).toString())
-                    .replace(/\{total\}/gi, this.slideElements.length.toString());
-            }
-            this.stzhSlideEnd.emit({
-                component: "stzh-carousel",
-                index: this.slide,
-            });
-        };
-        this.onMediaChange = () => {
-            const ultra = media("ultra").matches;
-            const large = media("large").matches;
-            const medium = media("medium").matches;
-            const small = media("small").matches;
-            if (ultra && this.slidesUltra !== 0) {
-                this.currentSlides = this.slidesUltra;
-            }
-            else if (large && this.slidesLarge !== 0) {
-                this.currentSlides = this.slidesLarge;
-            }
-            else if (medium && this.slidesMedium !== 0) {
-                this.currentSlides = this.slidesMedium;
-            }
-            else if (small && this.slidesSmall !== 0) {
-                this.currentSlides = this.slidesSmall;
-            }
-            else {
-                this.currentSlides = this.slides;
-            }
-            // if (ultra && this.swipeSlidesUltra !== 0) {
-            //   this.currentSwipeSlides = this.swipeSlidesUltra;
-            // } else if (large && this.swipeSlidesLarge !== 0) {
-            //   this.currentSwipeSlides = this.swipeSlidesLarge;
-            // } else if (medium && this.swipeSlidesMedium !== 0) {
-            //   this.currentSwipeSlides = this.swipeSlidesMedium;
-            // } else if (small && this.swipeSlidesSmall !== 0) {
-            //   this.currentSwipeSlides = this.swipeSlidesSmall;
-            // } else {
-            //   this.currentSwipeSlides = this.swipeSlides;
-            // }
-            this.currentSwipeSlides = this.currentSlides;
-        };
-        /** Scroll the slider the appropriate amount of pixels and update the last event position */
-        this.mouseMove = (event) => {
-            const distance = this.lastX - event.clientX;
-            this.lastX = event.clientX;
-            this.scrollElement.scrollLeft += distance;
-        };
-        /** Clear disable timeout, set up variables and styles and attach the listener. */
-        this.startDragging = (event) => {
-            event.preventDefault();
-            this.disableTimeoutId && window.clearTimeout(this.disableTimeoutId);
-            this.disableTimeoutId = null;
-            this.startX = this.lastX = event.clientX;
-            this.startScrollLeft = this.scrollElement.scrollLeft;
-            this.scrollElement.style.setProperty("scroll-behavior", "auto");
-            this.scrollElement.style.setProperty("scroll-snap-type", "unset");
-            this.dragging = true;
-            if (this.preventAutoplayStop) {
-                this.autoplayDisabledByDrag = true;
-            }
-            else {
-                this.autoplay = false;
-            }
-            window.addEventListener("mousemove", this.mouseMove);
-            window.addEventListener("mouseup", this.stopDragging, { capture: true });
-            window.addEventListener("click", this.checkClick, { capture: true });
-        };
-        /** User stopped dragging */
-        this.stopDragging = (event) => {
-            event.preventDefault();
-            const distance = Math.abs(this.startX - this.lastX);
-            const minimumReached = distance > this.distanceQuickSwipe;
-            const direction = this.lastX > this.startX ? 1 : -1;
-            this.dragging = false;
-            this.autoplayDisabledByDrag = false;
-            const endDraddingLeft = this.scrollElement.scrollLeft;
-            this.scrollElement.style.removeProperty("scroll-snap-type");
-            const finalLeft = this.scrollElement.scrollLeft;
-            this.scrollElement.style.setProperty("scroll-snap-type", "unset");
-            this.scrollElement.scrollTo({ left: endDraddingLeft, behavior: "auto" });
-            if (finalLeft !== this.startScrollLeft || !minimumReached) {
-                this.scrollElement.scrollTo({ left: finalLeft, behavior: reducedMotionMedia.matches ? "auto" : "smooth" });
-            }
-            else if (direction === 1) {
-                this.slideToPrevious();
-            }
-            else {
-                this.slideToNext();
-            }
-            window.removeEventListener("mousemove", this.mouseMove);
-            window.removeEventListener("mouseup", this.stopDragging, { capture: true });
-            this.stoppedDragging = true;
-        };
-        this.checkClick = (event) => {
-            const distance = Math.abs(this.startX - this.lastX);
-            const minimumReached = distance > this.distancePreventClick;
-            if (minimumReached) {
-                event.preventDefault();
-                event.stopPropagation();
-            }
-            this.lastX = null;
-            window.removeEventListener("click", this.checkClick, { capture: true });
-        };
-        this.autoplayInterval = () => {
-            this.scrolledByAutoplay = true;
-            if (this.hasReachedLastSlide()) {
-                this.slideTo(0);
-            }
-            else {
-                this.slideToNext();
-            }
-        };
-    }
-    /** Scroll to a slide by index */
-    async slideTo(index, behaviour = "smooth") {
-        this.scrollToSlide(index, behaviour);
-    }
-    /** Scroll to previous snap point */
-    async slideToPrevious(behaviour = "smooth") {
-        this.scrollToPreviousSnapPoint(behaviour);
-    }
-    /** Scroll to next snap point */
-    async slideToNext(behaviour = "smooth") {
-        this.scrollToNextSnapPoint(behaviour);
-    }
-    disabledWatcher() {
-        if (this.disabled) {
-            this.scrollElement && this.scrollElement.removeEventListener("scroll", this.onScroll);
-            this.scrollTimeoutId && window.clearTimeout(this.scrollTimeoutId);
-            this.scrollTimeoutId = null;
-            this.element.removeEventListener("mouseenter", this.onMouseenter);
-            this.element.removeEventListener("mouseleave", this.onMouseleave);
-            this.element.removeEventListener("focusin", this.onFocusin);
-            this.element.removeEventListener("focusout", this.onFocusout);
-            this.onReducedMotionMediaChange();
-            reducedMotionMedia && reducedMotionMedia.removeEventListener("change", this.onReducedMotionMediaChange);
-        }
-        else {
-            this.scrollElement && this.scrollElement.addEventListener("scroll", this.onScroll, { passive: true });
-            this.element.addEventListener("mouseenter", this.onMouseenter);
-            this.element.addEventListener("mouseleave", this.onMouseleave);
-            this.element.addEventListener("focusin", this.onFocusin);
-            this.element.addEventListener("focusout", this.onFocusout);
-            reducedMotionMedia && reducedMotionMedia.addEventListener("change", this.onReducedMotionMediaChange);
-        }
-    }
-    preventMouseDragWatcher() {
-        if (this.preventMouseDrag || this.disabled) {
-            this.disableTimeoutId && window.clearTimeout(this.disableTimeoutId);
-            this.disableTimeoutId = null;
-            this.scrollElement && this.scrollElement.removeEventListener("mousedown", this.startDragging);
-            this.lastX = null;
-        }
-        else {
-            this.scrollElement && this.scrollElement.addEventListener("mousedown", this.startDragging);
-        }
-    }
-    autoplayRunningWatcher() {
-        if (!this.autoplay ||
-            this.disabled ||
-            this.autoplayDisabledByMotionMedia ||
-            this.autoplayDisabledByMouse ||
-            this.autoplayDisabledByFocus ||
-            this.autoplayDisabledByScroll ||
-            this.autoplayDisabledByDrag) {
-            this.autoplayIntervalId && window.clearInterval(this.autoplayIntervalId);
-            this.autoplayIntervalId = null;
-            this.autoplayRunning = false;
-        }
-        else {
-            this.autoplayIntervalId && window.clearInterval(this.autoplayIntervalId);
-            this.autoplayIntervalId = window.setInterval(this.autoplayInterval, this.autoplayTimeout);
-            this.autoplayRunning = true;
-        }
-    }
-    snapAlignWatcher() {
-        this.slideElements.forEach((slide, index) => {
-            const shouldSnap = (index - this.currentSwipeSlides) % this.currentSwipeSlides === 0;
-            if (shouldSnap) {
-                slide.style.removeProperty("scroll-snap-align");
-            }
-            else {
-                slide.style.setProperty("scroll-snap-align", "none");
-            }
-        });
-    }
-    inertWatcher() {
-        this.slideElements.forEach((slide, index) => {
-            const isActive = this.tabThrough || this.variant === "cards" || (index >= this.slide && index < this.slide + this.currentSlides);
-            slide.inert = !isActive;
-            if (isActive) {
-                slide.removeAttribute("aria-hidden");
-            }
-            else {
-                slide.setAttribute("aria-hidden", isActive ? "false" : "true");
-            }
-        });
-    }
-    prevNextNavigationWatcher() {
-        const tabThrough = this.tabThrough || this.variant === "cards";
-        const setAriaAttributes = element => {
-            const isStzh = isStzhElement(element);
-            if (tabThrough) {
-                element.setAttribute("aria-hidden", "true");
-                element.setAttribute(isStzh ? "a11y-tabindex" : "tabindex", "-1");
-            }
-            else {
-                element.removeAttribute("aria-hidden");
-                element.removeAttribute(isStzh ? "a11y-tabindex" : "tabindex");
-            }
-        };
-        this.nextElements.forEach(setAriaAttributes);
-        this.previousElements.forEach(setAriaAttributes);
-    }
-    prevNextHiddenWatcher() {
-        const hideElements = this.slideElements.length <= this.currentSlides;
-        const setHiddenAttribute = element => {
-            if (hideElements) {
-                element.setAttribute("hidden", "");
-            }
-            else {
-                element.removeAttribute("hidden");
-            }
-        };
-        this.navigationTextElements.forEach(setHiddenAttribute);
-        this.nextElements.forEach(setHiddenAttribute);
-        this.previousElements.forEach(setHiddenAttribute);
-    }
-    nextPrevDisabledWatcher() {
-        if (!this.scrollElement) {
-            return;
-        }
-        const reachedFirstSlide = this.slide === 0;
-        const reachedLastSlide = this.hasReachedLastSlide();
-        this.nextElements.forEach(element => {
-            const isStzh = isStzhElement(element);
-            element.setAttribute(isStzh ? "a11y-disabled" : "aria-disabled", reachedLastSlide || this.disabled ? "true" : "false");
-        });
-        this.previousElements.forEach(element => {
-            const isStzh = isStzhElement(element);
-            element.setAttribute(isStzh ? "a11y-disabled" : "aria-disabled", reachedFirstSlide || this.disabled ? "true" : "false");
-        });
-    }
-    nextElementsWatcher() {
-        this.nextElements.forEach(nextElement => {
-            const isStzh = isStzhElement(nextElement);
-            nextElement.addEventListener("click", this.onNextClick);
-            nextElement.setAttribute(isStzh ? "a11y-controls" : "aria-controls", `${this.carouselId}-scroll`);
-        });
-    }
-    previousElementsWatcher() {
-        this.previousElements.forEach(previousElement => {
-            const isStzh = isStzhElement(previousElement);
-            previousElement.addEventListener("click", this.onPreviousClick);
-            previousElement.setAttribute(isStzh ? "a11y-controls" : "aria-controls", `${this.carouselId}-scroll`);
-        });
-    }
-    scrollToSlide(index, behaviour = "smooth") {
-        if (this.disabled) {
-            return;
-        }
-        this.scrollElement.scrollTo({
-            left: index * this.itemSize,
-            behavior: reducedMotionMedia.matches ? "auto" : behaviour,
-        });
-    }
-    /** Width of a slide  */
-    sizingMethod() {
-        const css = window.getComputedStyle(this.scrollElement);
-        return ((this.scrollElement.firstElementChild || this.scrollElement).offsetWidth +
-            parseInt(css.getPropertyValue("column-gap"), 10));
-    }
-    /**
-     * Calculates the active slide.
-     * The scroll-snap-type property makes sure that the container snaps perfectly to integer multiples.
-     */
-    calculateSlide() {
-        // Math.round: Dispatch 'stzhSlidePassed' events around the center of each slide
-        // Math.ceil: Dispatch 'stzhSlidePassed' events as soon as the next one is visible
-        // Math.floor: Dispatch 'stzhSlidePassed' events only when the next one is fully visible
-        return Math.round(this.scrollElement.scrollLeft / this.itemSize);
-    }
-    scrollToPreviousSnapPoint(behaviour = "smooth") {
-        if (this.disabled) {
-            return;
-        }
-        let previousIndex = this.slide;
-        let canSnap = false;
-        while (!canSnap && previousIndex > 0) {
-            previousIndex = previousIndex - 1;
-            canSnap = (previousIndex - this.currentSwipeSlides) % this.currentSwipeSlides === 0;
-        }
-        this.slideTo(previousIndex, behaviour);
-    }
-    scrollToNextSnapPoint(behaviour = "smooth") {
-        if (this.disabled) {
-            return;
-        }
-        this.slideTo(this.slide + this.currentSwipeSlides, behaviour);
-    }
-    update() {
-        this.slide = this.calculateSlide();
-        this.slideScrollLeft = this.slide * this.itemSize;
-        this.onMutation();
-    }
-    hasReachedLastSlide() {
-        const { scrollLeft, offsetWidth, scrollWidth } = this.scrollElement;
-        return Math.ceil(scrollLeft + offsetWidth) >= scrollWidth;
-    }
-    async componentWillLoad() {
-        this.carouselId = `stzh-carousel-${carouselCounter++}`;
-        this.onMediaChange();
-        if (!this.localization) {
-            this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "carousel");
-        }
-    }
-    componentDidLoad() {
-        this.itemSize = this.sizingMethod();
-        this.update();
-        this.disabledWatcher();
-        this.preventMouseDragWatcher();
-        this.autoplayRunningWatcher();
-    }
-    connectedCallback() {
-        addMediaChangeListener(this.onMediaChange);
-        this.resizeObserver = new ResizeObserver(this.onSlideResize);
-        this.resizeObserver.observe(this.element);
-        this.mutationObserver = new MutationObserver(this.onMutation);
-        this.mutationObserver.observe(this.element, {
-            childList: true,
-            subtree: true,
-        });
-    }
-    disconnectedCallback() {
-        this.scrollTimeoutId && window.clearTimeout(this.scrollTimeoutId);
-        this.scrollTimeoutId = null;
-        removeMediaChangeListener(this.onMediaChange);
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-        }
-        if (this.mutationObserver) {
-            this.mutationObserver.disconnect();
-        }
-    }
-    render() {
-        var _a, _b;
-        const classes = {
-            "stzh-carousel": true,
-            "stzh-carousel--is-disabled": this.disabled,
-            "stzh-carousel--is-draggable": !this.preventMouseDrag,
-            "stzh-carousel--is-non-interactive": this.nonInteractive,
-            "stzh-carousel--is-dragging": this.dragging,
-            "stzh-carousel--is-scrolling": this.scrolling,
-            "stzh-carousel--has-autoplay": this.autoplay,
-            "stzh-carousel--is-autoplay-running": this.autoplayRunning,
-        };
-        return (h(Host, { key: 'b05585785ab010a769dfa39821313d5a12a1339c', "aria-roledescription": "carousel", style: {
-                "--slides": this.currentSlides.toString(),
-            } }, h("div", { key: 'd6181fcda037a23a6f1949cef0ebc6a7c3ba1729', class: classes }, h("slot", { key: '51ec8e8d87532c157964d4ed2962cda1462788ac', name: "actions" }), h("div", { key: 'a25581c30cf3e244e006c5a46a7853fe2b99f985', class: "stzh-carousel__vhidden", "aria-live": this.autoplayDisabledByFocus || this.autoplayDisabledByMouse ? "polite" : "off" }, this.ariaLive), h("div", { key: '05119011c9a6424d90bb4de7fbfcaa9ea3b319c1', ref: el => (this.scrollElement = el), id: `${this.carouselId}-scroll`, class: "stzh-carousel__scroll" }, h("slot", { key: 'b12757bcf0e6b72162c57bc8cde3c82d27094cdb' })), this.withTrack && (h("div", { key: '9038a2f155990f86daafa91c3ad2d2c093828655', class: "stzh-carousel__indicator" }, h("div", { key: 'a4802b6a4c7d919179ecab542a932629fc26058a', class: "stzh-carousel__indicator-track", style: {
-                left: `${(100 / (((_a = this.slideElements) === null || _a === void 0 ? void 0 : _a.length) || 1)) * this.slide}%`,
-                width: `${(100 / (((_b = this.slideElements) === null || _b === void 0 ? void 0 : _b.length) || 1)) * this.currentSlides || 0}%`,
-            } }))))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "disabled": ["disabledWatcher", "preventMouseDragWatcher", "autoplayRunningWatcher", "nextPrevDisabledWatcher"],
-        "preventMouseDrag": ["preventMouseDragWatcher"],
-        "autoplay": ["autoplayRunningWatcher"],
-        "autoplayDisabledByMotionMedia": ["autoplayRunningWatcher"],
-        "autoplayDisabledByMouse": ["autoplayRunningWatcher"],
-        "autoplayDisabledByFocus": ["autoplayRunningWatcher"],
-        "autoplayDisabledByScroll": ["autoplayRunningWatcher"],
-        "autoplayDisabledByDrag": ["autoplayRunningWatcher"],
-        "autoplayTimeout": ["autoplayRunningWatcher"],
-        "slideElements": ["snapAlignWatcher", "inertWatcher", "prevNextHiddenWatcher", "nextPrevDisabledWatcher"],
-        "currentSwipeSlides": ["snapAlignWatcher"],
-        "slide": ["inertWatcher", "nextPrevDisabledWatcher"],
-        "variant": ["inertWatcher", "prevNextNavigationWatcher"],
-        "currentSlides": ["inertWatcher", "prevNextHiddenWatcher", "nextPrevDisabledWatcher"],
-        "tabThrough": ["inertWatcher", "prevNextNavigationWatcher"],
-        "nextElements": ["prevNextNavigationWatcher", "prevNextHiddenWatcher", "nextPrevDisabledWatcher", "nextElementsWatcher"],
-        "previousElements": ["prevNextNavigationWatcher", "prevNextHiddenWatcher", "nextPrevDisabledWatcher", "previousElementsWatcher"],
-        "navigationTextElements": ["prevNextHiddenWatcher"]
-    }; }
-    static get style() { return stzhCarouselCss(); }
-}, [262, "stzh-carousel", {
-        "localization": [16],
-        "variant": [513],
-        "disabled": [516],
-        "noPeek": [516, "no-peek"],
-        "slides": [2],
-        "slidesSmall": [2, "slides-small"],
-        "slidesMedium": [2, "slides-medium"],
-        "slidesLarge": [2, "slides-large"],
-        "slidesUltra": [2, "slides-ultra"],
-        "slide": [2],
-        "autoplay": [1028],
-        "autoplayTimeout": [2, "autoplay-timeout"],
-        "nonInteractive": [4, "non-interactive"],
-        "preventMouseDrag": [4, "prevent-mouse-drag"],
-        "preventAutoplayPause": [4, "prevent-autoplay-pause"],
-        "preventAutoplayStop": [4, "prevent-autoplay-stop"],
-        "tabThrough": [4, "tab-through"],
-        "withTrack": [4, "with-track"],
-        "scrollTimeout": [32],
-        "distanceQuickSwipe": [32],
-        "distancePreventClick": [32],
-        "autoplayRunning": [32],
-        "autoplayDisabledByMotionMedia": [32],
-        "autoplayDisabledByMouse": [32],
-        "autoplayDisabledByFocus": [32],
-        "autoplayDisabledByScroll": [32],
-        "autoplayDisabledByDrag": [32],
-        "dragging": [32],
-        "scrolling": [32],
-        "ariaLive": [32],
-        "currentSlides": [32],
-        "currentSwipeSlides": [32],
-        "slideElements": [32],
-        "previousElements": [32],
-        "nextElements": [32],
-        "navigationTextElements": [32],
-        "slideTo": [64],
-        "slideToPrevious": [64],
-        "slideToNext": [64]
-    }, undefined, {
-        "disabled": ["disabledWatcher", "preventMouseDragWatcher", "autoplayRunningWatcher", "nextPrevDisabledWatcher"],
-        "preventMouseDrag": ["preventMouseDragWatcher"],
-        "autoplay": ["autoplayRunningWatcher"],
-        "autoplayDisabledByMotionMedia": ["autoplayRunningWatcher"],
-        "autoplayDisabledByMouse": ["autoplayRunningWatcher"],
-        "autoplayDisabledByFocus": ["autoplayRunningWatcher"],
-        "autoplayDisabledByScroll": ["autoplayRunningWatcher"],
-        "autoplayDisabledByDrag": ["autoplayRunningWatcher"],
-        "autoplayTimeout": ["autoplayRunningWatcher"],
-        "slideElements": ["snapAlignWatcher", "inertWatcher", "prevNextHiddenWatcher", "nextPrevDisabledWatcher"],
-        "currentSwipeSlides": ["snapAlignWatcher"],
-        "slide": ["inertWatcher", "nextPrevDisabledWatcher"],
-        "variant": ["inertWatcher", "prevNextNavigationWatcher"],
-        "currentSlides": ["inertWatcher", "prevNextHiddenWatcher", "nextPrevDisabledWatcher"],
-        "tabThrough": ["inertWatcher", "prevNextNavigationWatcher"],
-        "nextElements": ["prevNextNavigationWatcher", "prevNextHiddenWatcher", "nextPrevDisabledWatcher", "nextElementsWatcher"],
-        "previousElements": ["prevNextNavigationWatcher", "prevNextHiddenWatcher", "nextPrevDisabledWatcher", "previousElementsWatcher"],
-        "navigationTextElements": ["prevNextHiddenWatcher"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["stzh-carousel"];
-    components.forEach(tagName => { switch (tagName) {
-        case "stzh-carousel":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), StzhCarousel);
-            }
-            break;
-    } });
-}
-
-export { StzhCarousel as S, defineCustomElement as d };
-//# sourceMappingURL=p-CEtAPJ_k.js.map
-
-//# sourceMappingURL=p-CEtAPJ_k.js.map