@oiz/stzh-components 2.10.0-beta → 2.10.0

package/dist/components/stzh-carousel.js

@@ -1,582 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { i as isStzhElement } from './utils.js';
-import { a as addMediaChangeListener, r as removeMediaChangeListener, m as media } from './media-utils.js';
-
-const stzhCarouselCss = ".sc-stzh-carousel-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-carousel-h{display:none}.sc-stzh-carousel-h *.sc-stzh-carousel,.sc-stzh-carousel-h *.sc-stzh-carousel::before,.sc-stzh-carousel-h *.sc-stzh-carousel::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-carousel-h .has-focus.sc-stzh-carousel{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.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{--peek:calc(var(--peek-in, 0px) + var(--peek-out, 0px));--peek-out:1.25rem;--padding-top:0px;--padding-bottom:0px;--gutter:var(--stzh-space-xxxsmall);--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-out:2rem}}@media screen and (min-width: 1024px){.sc-stzh-carousel-h{--peek-out:0px}}[variant=cards].sc-stzh-carousel-h{--padding-top:0.25rem;--padding-bottom:0.25rem;--gutter:var(--stzh-space-xsmall)}@media screen and (min-width: 1024px){[variant=cards].sc-stzh-carousel-h{--peek-out:2.5rem;--gutter:var(--stzh-space-small)}}@media screen and (min-width: 1260px){[variant=cards].sc-stzh-carousel-h{--peek-out:5.5rem;--gutter:var(--stzh-space-medium)}}@media screen and (min-width: 1440px){[variant=cards].sc-stzh-carousel-h{--peek-out:calc((100vw - 78.75rem - var(--stzh-scrollbar-width, 0px)) / 2)}}.sc-stzh-carousel-h .sc-stzh-carousel-s>*{width:100%;height:100%;-ms-flex-negative:0;flex-shrink:0;scroll-snap-align:start;scroll-snap-stop:var(--snap-stop)}.sc-stzh-carousel-h .sc-stzh-carousel-s img{-webkit-user-drag:none;user-drag:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.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)}.sc-stzh-carousel-h .sc-stzh-carousel-s>[slot=actions] stzh-text{width:auto}.sc-stzh-carousel-h .sc-stzh-carousel-s>[slot=actions] stzh-button{pointer-events:all}.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-vspace{padding:var(--stzh-space-xsmall)}.sc-stzh-carousel-h .sc-stzh-carousel-s>stzh-ratio[slot=actions]{--background-color:transparent}.sc-stzh-carousel-h[variant=cards] .sc-stzh-carousel-s>[slot=actions]{position:relative;-ms-flex-order:1;order:1;margin-top:calc(var(--stzh-space-medium) - var(--padding-bottom))}.stzh-carousel.sc-stzh-carousel{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;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);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.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%;-moz-column-gap:var(--gutter);-webkit-column-gap:var(--gutter);column-gap:var(--gutter);-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;overscroll-behavior-x:contain;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;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:-webkit-grab;cursor:grab}.stzh-carousel--is-dragging.sc-stzh-carousel .stzh-carousel__scroll.sc-stzh-carousel{cursor:-webkit-grabbing;cursor:grabbing}.stzh-carousel--is-disabled.sc-stzh-carousel .stzh-carousel__scroll.sc-stzh-carousel{cursor:not-allowed;overflow:hidden}";
-
-const reducedMotionMedia = window.matchMedia("(prefers-reduced-motion: reduce)");
-let carouselCounter = 0;
-const StzhCarousel$1 = /*@__PURE__*/ proxyCustomElement(class StzhCarousel extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.stzhSlideStart = createEvent(this, "stzhSlideStart", 7);
-    this.stzhSlidePassed = createEvent(this, "stzhSlidePassed", 7);
-    this.stzhSlideEnd = createEvent(this, "stzhSlideEnd", 7);
-    /** 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 = () => {
-      this.autoplayDisabledByMouse = true;
-    };
-    this.onMouseleave = () => {
-      this.autoplayDisabledByMouse = false;
-    };
-    this.onFocusin = () => {
-      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) {
-          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;
-      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;
-      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;
-      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();
-      }
-      this.lastX = null;
-      window.removeEventListener("click", this.checkClick, { capture: true });
-    };
-    this.autoplayInterval = () => {
-      this.scrolledByAutoplay = true;
-      if (this.hasReachedLastSlide()) {
-        this.slideTo(0);
-      }
-      else {
-        this.slideToNext();
-      }
-    };
-    this.localization = undefined;
-    this.variant = "default";
-    this.disabled = false;
-    this.slides = 1;
-    this.slidesSmall = 0;
-    this.slidesMedium = 0;
-    this.slidesLarge = 0;
-    this.slidesUltra = 0;
-    this.slide = 0;
-    this.autoplay = false;
-    this.tabThrough = false;
-    this.preventMouseDrag = false;
-    this.scrollTimeout = 100;
-    this.autoplayTimeout = 3000;
-    this.distanceQuickSwipe = 40;
-    this.distancePreventClick = 6;
-    this.autoplayRunning = false;
-    this.autoplayDisabledByMotionMedia = false;
-    this.autoplayDisabledByMouse = false;
-    this.autoplayDisabledByFocus = false;
-    this.dragging = false;
-    this.scrolling = false;
-    this.ariaLive = "";
-    this.currentSlides = 1;
-    this.currentSwipeSlides = 1;
-    this.slideElements = [];
-    this.previousElements = [];
-    this.nextElements = [];
-    this.navigationTextElements = [];
-  }
-  /** 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.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 ? "true" : "false");
-    });
-    this.previousElements.forEach((element) => {
-      const isStzh = isStzhElement(element);
-      element.setAttribute(isStzh ? "a11y-disabled" : "aria-disabled", reachedFirstSlide ? "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.floor(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;
-    this.disabled = true;
-    removeMediaChangeListener(this.onMediaChange);
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-    }
-    if (this.mutationObserver) {
-      this.mutationObserver.disconnect();
-    }
-  }
-  render() {
-    const classes = {
-      "stzh-carousel": true,
-      "stzh-carousel--is-disabled": this.disabled,
-      "stzh-carousel--is-draggable": !this.preventMouseDrag,
-      "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,
-      "stzh-carousel--is-autoplay-disabled-by-motion-media": this.autoplayDisabledByMotionMedia,
-      "stzh-carousel--is-autoplay-disabled-by-mouse": this.autoplayDisabledByMouse,
-      "stzh-carousel--is-autoplay-disabled-by-focus": this.autoplayDisabledByFocus
-    };
-    return (h(Host, { "aria-roledescription": "carousel", style: {
-        '--slides': this.currentSlides.toString()
-      } }, h("div", { class: classes }, h("slot", { name: "actions" }), h("div", { class: "stzh-carousel__vhidden", "aria-live": this.autoplayDisabledByFocus || this.autoplayDisabledByMouse ? "polite" : "off" }, this.ariaLive), h("div", { ref: (el) => (this.scrollElement = el), id: `${this.carouselId}-scroll`, class: "stzh-carousel__scroll" }, h("slot", null)))));
-  }
-  get element() { return this; }
-  static get watchers() { return {
-    "disabled": ["disabledWatcher", "preventMouseDragWatcher", "autoplayRunningWatcher"],
-    "preventMouseDrag": ["preventMouseDragWatcher"],
-    "autoplay": ["autoplayRunningWatcher"],
-    "autoplayDisabledByMotionMedia": ["autoplayRunningWatcher"],
-    "autoplayDisabledByMouse": ["autoplayRunningWatcher"],
-    "autoplayDisabledByFocus": ["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; }
-}, [6, "stzh-carousel", {
-    "localization": [16],
-    "variant": [513],
-    "disabled": [516],
-    "slides": [2],
-    "slidesSmall": [2, "slides-small"],
-    "slidesMedium": [2, "slides-medium"],
-    "slidesLarge": [2, "slides-large"],
-    "slidesUltra": [2, "slides-ultra"],
-    "slide": [2],
-    "autoplay": [1028],
-    "tabThrough": [4, "tab-through"],
-    "preventMouseDrag": [32],
-    "scrollTimeout": [32],
-    "autoplayTimeout": [32],
-    "distanceQuickSwipe": [32],
-    "distancePreventClick": [32],
-    "autoplayRunning": [32],
-    "autoplayDisabledByMotionMedia": [32],
-    "autoplayDisabledByMouse": [32],
-    "autoplayDisabledByFocus": [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"],
-    "preventMouseDrag": ["preventMouseDragWatcher"],
-    "autoplay": ["autoplayRunningWatcher"],
-    "autoplayDisabledByMotionMedia": ["autoplayRunningWatcher"],
-    "autoplayDisabledByMouse": ["autoplayRunningWatcher"],
-    "autoplayDisabledByFocus": ["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$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["stzh-carousel"];
-  components.forEach(tagName => { switch (tagName) {
-    case "stzh-carousel":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, StzhCarousel$1);
-      }
-      break;
-  } });
-}
+import { S as StzhCarousel$1, d as defineCustomElement$1 } from './stzh-carousel2.js';
 
 const StzhCarousel = StzhCarousel$1;
 const defineCustomElement = defineCustomElement$1;