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

package/dist/components/p-BKjK6qOq.js

@@ -0,0 +1,681 @@
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-BOU3cRYl.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-BKjK6qOq.js.map
+
+//# sourceMappingURL=p-BKjK6qOq.js.map