@oiz/stzh-components 2.4.0-beta → 2.5.0-alpha-carousel

package/dist/collection/components/stzh-carousel/stzh-carousel.js

@@ -0,0 +1,966 @@
+import { Host, h } from "@stencil/core";
+import { isStzhElement } from "../../utils/utils";
+import { fetchTranslations } from "../../utils/translation-utils";
+import { media, addMediaChangeListener, removeMediaChangeListener } from '../../utils/media-utils';
+const reducedMotionMedia = window.matchMedia("(prefers-reduced-motion: reduce)");
+let carouselCounter = 0;
+/*
+* Inspired by:
+*
+* - https://github.com/barthy-koeln/scroll-snap-slider
+* - https://tannerhodges.github.io/snap-slider/
+* - https://www.w3.org/WAI/ARIA/apg/patterns/carousel/examples/carousel-1-prev-next/
+* - https://dev.to/jasonwebb/how-to-build-a-more-accessible-carousel-or-slider-35lp
+* - http://web-accessibility.carnegiemuseums.org/code/carousels/
+*/
+/**
+ * @slot - Slot any element
+ */
+export class StzhCarousel {
+  constructor() {
+    /** 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.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 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)))));
+  }
+  static get is() { return "stzh-carousel"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-carousel.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-carousel.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhCarouselLocalizedText",
+          "resolved": "StzhLocaleComponent & { slideLabel: string; slidesLabel: string; }",
+          "references": {
+            "StzhCarouselLocalizedText": {
+              "location": "import",
+              "path": "./stzh-carousel.localization"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings"
+        }
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"default\" | \"cards\"",
+          "resolved": "\"cards\" | \"default\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Carousel variant"
+        },
+        "attribute": "variant",
+        "reflect": true,
+        "defaultValue": "\"default\""
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether carousel is disabled"
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "slides": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Slides number"
+        },
+        "attribute": "slides",
+        "reflect": false,
+        "defaultValue": "1"
+      },
+      "slidesSmall": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Slides number above small breakpoint"
+        },
+        "attribute": "slides-small",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "slidesMedium": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Slides number above medium breakpoint"
+        },
+        "attribute": "slides-medium",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "slidesLarge": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Slides number above large breakpoint"
+        },
+        "attribute": "slides-large",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "slidesUltra": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Slides number above ultra breakpoint"
+        },
+        "attribute": "slides-ultra",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "slide": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Active slide (readonly)"
+        },
+        "attribute": "slide",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "autoplay": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether autoplay is enabled.\nGets paused, when user has focus inside carousel element or hovers over it.\nAlso when reduced motion media query is active or carousel is set disabled.\nGets disabled permanently, when user interacts with carousel manually (clicks prev/next, scrolls or drags)"
+        },
+        "attribute": "autoplay",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "tabThrough": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enable all slides to be tabbable (will disable prev/next arrows from being tabbable).\nBy default only the visible slides will be tabbable and the prev/next can be used to change slides\n(enabled when `variant` is set to `cards`)."
+        },
+        "attribute": "tab-through",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "preventMouseDrag": {},
+      "scrollTimeout": {},
+      "autoplayTimeout": {},
+      "distanceQuickSwipe": {},
+      "distancePreventClick": {},
+      "autoplayRunning": {},
+      "autoplayDisabledByMotionMedia": {},
+      "autoplayDisabledByMouse": {},
+      "autoplayDisabledByFocus": {},
+      "dragging": {},
+      "scrolling": {},
+      "ariaLive": {},
+      "currentSlides": {},
+      "currentSwipeSlides": {},
+      "slideElements": {},
+      "previousElements": {},
+      "nextElements": {},
+      "navigationTextElements": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "stzhSlideStart",
+        "name": "stzhSlideStart",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Slide start event"
+        },
+        "complexType": {
+          "original": "StzhCarouselSlideStartEvent",
+          "resolved": "{ component: \"stzh-carousel\"; index: number; }",
+          "references": {
+            "StzhCarouselSlideStartEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhSlidePassed",
+        "name": "stzhSlidePassed",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Slide passed event"
+        },
+        "complexType": {
+          "original": "StzhCarouselSlidePassedEvent",
+          "resolved": "{ component: \"stzh-carousel\"; index: number; }",
+          "references": {
+            "StzhCarouselSlidePassedEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhSlideEnd",
+        "name": "stzhSlideEnd",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Slide end event"
+        },
+        "complexType": {
+          "original": "StzhCarouselSlideEndEvent",
+          "resolved": "{ component: \"stzh-carousel\"; index: number; }",
+          "references": {
+            "StzhCarouselSlideEndEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "slideTo": {
+        "complexType": {
+          "signature": "(index: any, behaviour?: \"auto\" | \"smooth\") => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Scroll to a slide by index",
+          "tags": []
+        }
+      },
+      "slideToPrevious": {
+        "complexType": {
+          "signature": "(behaviour?: \"auto\" | \"smooth\") => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Scroll to previous snap point",
+          "tags": []
+        }
+      },
+      "slideToNext": {
+        "complexType": {
+          "signature": "(behaviour?: \"auto\" | \"smooth\") => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Scroll to next snap point",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "disabled",
+        "methodName": "disabledWatcher"
+      }, {
+        "propName": "disabled",
+        "methodName": "preventMouseDragWatcher"
+      }, {
+        "propName": "preventMouseDrag",
+        "methodName": "preventMouseDragWatcher"
+      }, {
+        "propName": "autoplay",
+        "methodName": "autoplayRunningWatcher"
+      }, {
+        "propName": "autoplayDisabledByMotionMedia",
+        "methodName": "autoplayRunningWatcher"
+      }, {
+        "propName": "autoplayDisabledByMouse",
+        "methodName": "autoplayRunningWatcher"
+      }, {
+        "propName": "autoplayDisabledByFocus",
+        "methodName": "autoplayRunningWatcher"
+      }, {
+        "propName": "autoplayTimeout",
+        "methodName": "autoplayRunningWatcher"
+      }, {
+        "propName": "disabled",
+        "methodName": "autoplayRunningWatcher"
+      }, {
+        "propName": "slideElements",
+        "methodName": "snapAlignWatcher"
+      }, {
+        "propName": "currentSwipeSlides",
+        "methodName": "snapAlignWatcher"
+      }, {
+        "propName": "slide",
+        "methodName": "inertWatcher"
+      }, {
+        "propName": "variant",
+        "methodName": "inertWatcher"
+      }, {
+        "propName": "slideElements",
+        "methodName": "inertWatcher"
+      }, {
+        "propName": "currentSlides",
+        "methodName": "inertWatcher"
+      }, {
+        "propName": "tabThrough",
+        "methodName": "inertWatcher"
+      }, {
+        "propName": "variant",
+        "methodName": "prevNextNavigationWatcher"
+      }, {
+        "propName": "tabThrough",
+        "methodName": "prevNextNavigationWatcher"
+      }, {
+        "propName": "nextElements",
+        "methodName": "prevNextNavigationWatcher"
+      }, {
+        "propName": "previousElements",
+        "methodName": "prevNextNavigationWatcher"
+      }, {
+        "propName": "currentSlides",
+        "methodName": "prevNextHiddenWatcher"
+      }, {
+        "propName": "slideElements",
+        "methodName": "prevNextHiddenWatcher"
+      }, {
+        "propName": "nextElements",
+        "methodName": "prevNextHiddenWatcher"
+      }, {
+        "propName": "previousElements",
+        "methodName": "prevNextHiddenWatcher"
+      }, {
+        "propName": "navigationTextElements",
+        "methodName": "prevNextHiddenWatcher"
+      }, {
+        "propName": "slide",
+        "methodName": "nextPrevDisabledWatcher"
+      }, {
+        "propName": "currentSlides",
+        "methodName": "nextPrevDisabledWatcher"
+      }, {
+        "propName": "slideElements",
+        "methodName": "nextPrevDisabledWatcher"
+      }, {
+        "propName": "nextElements",
+        "methodName": "nextPrevDisabledWatcher"
+      }, {
+        "propName": "previousElements",
+        "methodName": "nextPrevDisabledWatcher"
+      }, {
+        "propName": "nextElements",
+        "methodName": "nextElementsWatcher"
+      }, {
+        "propName": "previousElements",
+        "methodName": "previousElementsWatcher"
+      }];
+  }
+}