@cruglobal/cornerstone-components 0.1.0

package/dist/bundled/chunks/chunk.NJQPV52Q.js

@@ -0,0 +1,725 @@
+/*! Cornerstone Components 0.1.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsSlideChangeEvent
+} from "./chunk.RSGTXZ3J.js";
+import {
+  clamp
+} from "./chunk.2HAZJKLI.js";
+import {
+  AutoplayController
+} from "./chunk.YR4AIV36.js";
+import {
+  carousel_styles_default
+} from "./chunk.VYJPSVWO.js";
+import {
+  o as o2
+} from "./chunk.OPY26TZJ.js";
+import {
+  waitForEvent
+} from "./chunk.QSXSR2S5.js";
+import {
+  prefersReducedMotion
+} from "./chunk.IQJMSIWD.js";
+import {
+  e as e2
+} from "./chunk.JWFTJDOQ.js";
+import {
+  watch
+} from "./chunk.3QOMHIHS.js";
+import {
+  CornerstoneElement,
+  customElement,
+  e,
+  n,
+  r,
+  t
+} from "./chunk.RSRMXC3L.js";
+import {
+  LocalizeController
+} from "./chunk.MGBGUTRM.js";
+import {
+  o
+} from "./chunk.MZHGFMA5.js";
+import {
+  b
+} from "./chunk.XOXMMJPV.js";
+import {
+  __decorateClass
+} from "./chunk.UEAH232U.js";
+
+// src/internal/scrollend-polyfill.ts
+(() => {
+  if (o) {
+    return;
+  }
+  const debounce = (fn, delay) => {
+    let timerId = 0;
+    return function(...args) {
+      window.clearTimeout(timerId);
+      timerId = window.setTimeout(() => {
+        fn.call(this, ...args);
+      }, delay);
+    };
+  };
+  const decorate = (proto, method, decorateFn) => {
+    const superFn = proto[method];
+    proto[method] = function(...args) {
+      superFn.call(this, ...args);
+      decorateFn.call(this, superFn, ...args);
+    };
+  };
+  const isSupported = "onscrollend" in window;
+  if (!isSupported) {
+    const pointers = /* @__PURE__ */ new Set();
+    const scrollHandlers = /* @__PURE__ */ new WeakMap();
+    const handlePointerDown = (event) => {
+      pointers.add(event.pointerId);
+    };
+    const handlePointerUp = (event) => {
+      pointers.delete(event.pointerId);
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    document.addEventListener("pointerup", handlePointerUp);
+    decorate(EventTarget.prototype, "addEventListener", function(addEventListener, type) {
+      if (type !== "scroll") {
+        return;
+      }
+      const handleScrollEnd = debounce(() => {
+        if (!pointers.size) {
+          this.dispatchEvent(new Event("scrollend"));
+        } else {
+          handleScrollEnd();
+        }
+      }, 100);
+      addEventListener.call(this, "scroll", handleScrollEnd, { passive: true });
+      scrollHandlers.set(this, handleScrollEnd);
+    });
+    decorate(EventTarget.prototype, "removeEventListener", function(removeEventListener, type) {
+      if (type !== "scroll") {
+        return;
+      }
+      const scrollHandler = scrollHandlers.get(this);
+      if (scrollHandler) {
+        removeEventListener.call(this, "scroll", scrollHandler, { passive: true });
+      }
+    });
+  }
+})();
+
+// ../../node_modules/lit-html/directives/map.js
+function* o3(o5, f) {
+  if (void 0 !== o5) {
+    let i = 0;
+    for (const t2 of o5) yield f(t2, i++);
+  }
+}
+
+// ../../node_modules/lit-html/directives/range.js
+function* o4(o5, t2, e3 = 1) {
+  const i = void 0 === t2 ? 0 : o5;
+  t2 ?? (t2 = o5);
+  for (let o6 = i; e3 > 0 ? o6 < t2 : t2 < o6; o6 += e3) yield o6;
+}
+
+// src/components/carousel/carousel.ts
+var CsCarousel = class extends CornerstoneElement {
+  constructor() {
+    super(...arguments);
+    this.loop = false;
+    this.slides = 0;
+    this.currentSlide = 0;
+    this.navigation = false;
+    this.pagination = false;
+    this.autoplay = false;
+    this.autoplayInterval = 3e3;
+    this.slidesPerPage = 1;
+    this.slidesPerMove = 1;
+    this.orientation = "horizontal";
+    this.mouseDragging = false;
+    this.activeSlide = 0;
+    this.scrolling = false;
+    this.dragging = false;
+    this.awaitingInitialPosition = false;
+    this.autoplayController = new AutoplayController(this, () => this.next());
+    this.dragStartPosition = [-1, -1];
+    this.localize = new LocalizeController(this);
+    this.pendingSlideChange = false;
+    this.handleMouseDrag = (event) => {
+      if (!this.dragging) {
+        this.scrollContainer.style.setProperty("scroll-snap-type", "none");
+        this.dragging = true;
+        this.dragStartPosition = [event.clientX, event.clientY];
+      }
+      this.scrollContainer.scrollBy({
+        left: -event.movementX,
+        top: -event.movementY,
+        behavior: "instant"
+      });
+    };
+    this.handleMouseDragEnd = () => {
+      const scrollContainer = this.scrollContainer;
+      document.removeEventListener("pointermove", this.handleMouseDrag, { capture: true });
+      const startLeft = scrollContainer.scrollLeft;
+      const startTop = scrollContainer.scrollTop;
+      scrollContainer.style.removeProperty("scroll-snap-type");
+      scrollContainer.style.setProperty("overflow", "hidden");
+      const finalLeft = scrollContainer.scrollLeft;
+      const finalTop = scrollContainer.scrollTop;
+      scrollContainer.style.removeProperty("overflow");
+      scrollContainer.style.setProperty("scroll-snap-type", "none");
+      scrollContainer.scrollTo({ left: startLeft, top: startTop, behavior: "instant" });
+      requestAnimationFrame(async () => {
+        if (startLeft !== finalLeft || startTop !== finalTop) {
+          scrollContainer.scrollTo({
+            left: finalLeft,
+            top: finalTop,
+            behavior: prefersReducedMotion() ? "auto" : "smooth"
+          });
+          await waitForEvent(scrollContainer, "scrollend");
+        }
+        scrollContainer.style.removeProperty("scroll-snap-type");
+        this.dragging = false;
+        this.dragStartPosition = [-1, -1];
+        this.handleScrollEnd();
+      });
+    };
+    this.handleSlotChange = (mutations) => {
+      const needsInitialization = mutations.some(
+        (mutation) => [...mutation.addedNodes, ...mutation.removedNodes].some(
+          (el) => this.isCarouselItem(el) && !el.hasAttribute("data-clone")
+        )
+      );
+      if (needsInitialization) {
+        this.initializeSlides();
+      }
+      this.requestUpdate();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!o) {
+      this.setAttribute("role", "region");
+      this.setAttribute("aria-label", this.localize.term("carousel"));
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.mutationObserver?.disconnect();
+    this.resizeObserver?.disconnect();
+  }
+  firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+    this.initializeSlides();
+    this.mutationObserver = new MutationObserver(this.handleSlotChange);
+    this.mutationObserver.observe(this, {
+      childList: true,
+      subtree: true
+    });
+    const startedHidden = this.loop && !this.scrollContainer?.clientWidth && !this.scrollContainer?.clientHeight;
+    if (startedHidden) {
+      this.awaitingInitialPosition = true;
+    }
+    this.resizeObserver = new ResizeObserver(() => {
+      if (this.scrollContainer?.clientWidth || this.scrollContainer?.clientHeight) {
+        this.goToSlide(this.activeSlide, "auto");
+        this.synchronizeSlides();
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = void 0;
+        if (this.awaitingInitialPosition) {
+          requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+              this.awaitingInitialPosition = false;
+            });
+          });
+        }
+      }
+    });
+    this.resizeObserver.observe(this);
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("slidesPerMove") || changedProperties.has("slidesPerPage")) {
+      this.slidesPerMove = Math.min(this.slidesPerMove, this.slidesPerPage);
+    }
+  }
+  getPageCount() {
+    const slidesCount = this.getSlides().length;
+    const { slidesPerPage, slidesPerMove, loop } = this;
+    const pages = loop ? slidesCount / slidesPerMove : (slidesCount - slidesPerPage) / slidesPerMove + 1;
+    return Math.ceil(pages);
+  }
+  getCurrentPage() {
+    return Math.ceil(this.activeSlide / this.slidesPerMove);
+  }
+  canScrollNext() {
+    return this.loop || this.getCurrentPage() < this.getPageCount() - 1;
+  }
+  canScrollPrev() {
+    return this.loop || this.getCurrentPage() > 0;
+  }
+  /** @internal Gets all carousel items. */
+  getSlides({ excludeClones = true } = {}) {
+    return [...this.children].filter(
+      (el) => this.isCarouselItem(el) && (!excludeClones || !el.hasAttribute("data-clone"))
+    );
+  }
+  handleClick(event) {
+    if (this.dragging && this.dragStartPosition[0] > 0 && this.dragStartPosition[1] > 0) {
+      const deltaX = Math.abs(this.dragStartPosition[0] - event.clientX);
+      const deltaY = Math.abs(this.dragStartPosition[1] - event.clientY);
+      const delta = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+      if (delta >= 10) {
+        event.preventDefault();
+      }
+    }
+  }
+  handleKeyDown(event) {
+    if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
+      const target = event.target;
+      const isRtl = this.localize.dir() === "rtl";
+      const isFocusInPagination = target.closest('[part~="pagination-item"]') !== null;
+      const isNext = event.key === "ArrowDown" || !isRtl && event.key === "ArrowRight" || isRtl && event.key === "ArrowLeft";
+      const isPrevious = event.key === "ArrowUp" || !isRtl && event.key === "ArrowLeft" || isRtl && event.key === "ArrowRight";
+      event.preventDefault();
+      if (isPrevious) {
+        this.previous();
+      }
+      if (isNext) {
+        this.next();
+      }
+      if (event.key === "Home") {
+        this.goToSlide(0);
+      }
+      if (event.key === "End") {
+        this.goToSlide(this.getSlides().length - 1);
+      }
+      if (isFocusInPagination) {
+        this.updateComplete.then(() => {
+          const activePaginationItem = this.shadowRoot?.querySelector(
+            '[part~="pagination-item-active"]'
+          );
+          if (activePaginationItem) {
+            activePaginationItem.focus();
+          }
+        });
+      }
+    }
+  }
+  handleMouseDragStart(event) {
+    const canDrag = this.mouseDragging && event.button === 0;
+    if (canDrag) {
+      event.preventDefault();
+      document.addEventListener("pointermove", this.handleMouseDrag, { capture: true, passive: true });
+      document.addEventListener("pointerup", this.handleMouseDragEnd, { capture: true, once: true });
+    }
+  }
+  handleScroll() {
+    this.scrolling = true;
+    if (!this.pendingSlideChange) {
+      this.synchronizeSlides();
+    }
+  }
+  /** @internal Synchronizes the slides with the IntersectionObserver API. */
+  synchronizeSlides() {
+    const io = new IntersectionObserver(
+      (entries) => {
+        io.disconnect();
+        for (const entry of entries) {
+          const slide = entry.target;
+          slide.toggleAttribute("inert", !entry.isIntersecting);
+          slide.classList.toggle("--in-view", entry.isIntersecting);
+          slide.setAttribute("aria-hidden", entry.isIntersecting ? "false" : "true");
+        }
+        const firstIntersecting = entries.find((entry) => entry.isIntersecting);
+        if (!firstIntersecting) {
+          return;
+        }
+        const slidesWithClones = this.getSlides({ excludeClones: false });
+        const slidesCount = this.getSlides().length;
+        const slideIndex = slidesWithClones.indexOf(firstIntersecting.target);
+        const normalizedIndex = this.loop ? slideIndex - this.slidesPerPage : slideIndex;
+        this.activeSlide = (Math.ceil(normalizedIndex / this.slidesPerMove) * this.slidesPerMove + slidesCount) % slidesCount;
+        if (!this.scrolling && !this.pendingSlideChange) {
+          if (this.loop && firstIntersecting.target.hasAttribute("data-clone")) {
+            const clonePosition = Number(firstIntersecting.target.getAttribute("data-clone"));
+            this.goToSlide(clonePosition, "instant");
+          }
+        }
+      },
+      {
+        root: this.scrollContainer,
+        threshold: 0.6
+      }
+    );
+    this.getSlides({ excludeClones: false }).forEach((slide) => {
+      io.observe(slide);
+    });
+  }
+  handleScrollEnd() {
+    if (!this.scrolling || this.dragging) {
+      return;
+    }
+    this.synchronizeSlides();
+    this.scrolling = false;
+    this.pendingSlideChange = false;
+    this.synchronizeSlides();
+  }
+  isCarouselItem(node) {
+    return node instanceof Element && node.tagName.toLowerCase() === "cs-carousel-item";
+  }
+  initializeSlides() {
+    this.getSlides({ excludeClones: false }).forEach((slide, index) => {
+      slide.classList.remove("--in-view");
+      slide.classList.remove("--is-active");
+      slide.setAttribute("aria-label", this.localize.term("slideNum", index + 1));
+      if (slide.hasAttribute("data-clone")) {
+        slide.remove();
+      }
+    });
+    this.updateSlidesSnap();
+    if (this.loop) {
+      this.createClones();
+    }
+    this.goToSlide(this.activeSlide, "auto");
+    this.synchronizeSlides();
+  }
+  createClones() {
+    const slides = this.getSlides();
+    const slidesPerPage = this.slidesPerPage;
+    const lastSlides = slides.slice(-slidesPerPage);
+    const firstSlides = slides.slice(0, slidesPerPage);
+    lastSlides.reverse().forEach((slide, i) => {
+      const clone = slide.cloneNode(true);
+      clone.setAttribute("data-clone", String(slides.length - i - 1));
+      this.prepend(clone);
+    });
+    firstSlides.forEach((slide, i) => {
+      const clone = slide.cloneNode(true);
+      clone.setAttribute("data-clone", String(i));
+      this.append(clone);
+    });
+  }
+  handleSlideChange() {
+    const slides = this.getSlides();
+    slides.forEach((slide, i) => {
+      slide.classList.toggle("--is-active", i === this.activeSlide);
+    });
+    if (this.hasUpdated) {
+      this.dispatchEvent(
+        new CsSlideChangeEvent({
+          index: this.activeSlide,
+          slide: slides[this.activeSlide]
+        })
+      );
+    }
+  }
+  updateSlidesSnap() {
+    const slides = this.getSlides();
+    const slidesPerMove = this.slidesPerMove;
+    slides.forEach((slide, i) => {
+      const shouldSnap = (i + slidesPerMove) % slidesPerMove === 0;
+      if (shouldSnap) {
+        slide.style.removeProperty("scroll-snap-align");
+      } else {
+        slide.style.setProperty("scroll-snap-align", "none");
+      }
+    });
+  }
+  handleAutoplayChange() {
+    this.autoplayController.stop();
+    if (this.autoplay) {
+      this.autoplayController.start(this.autoplayInterval);
+    }
+  }
+  /**
+   * Move the carousel backward by `slides-per-move` slides.
+   *
+   * @param behavior - The behavior used for scrolling.
+   */
+  previous(behavior = "smooth") {
+    this.goToSlide(this.activeSlide - this.slidesPerMove, behavior);
+  }
+  /**
+   * Move the carousel forward by `slides-per-move` slides.
+   *
+   * @param behavior - The behavior used for scrolling.
+   */
+  next(behavior = "smooth") {
+    this.goToSlide(this.activeSlide + this.slidesPerMove, behavior);
+  }
+  /** Adds a carousel item as the last real slide. */
+  addSlide(slide) {
+    if (!this.isCarouselItem(slide)) {
+      throw new TypeError("addSlide() expects a <cs-carousel-item>.");
+    }
+    if (slide.hasAttribute("data-clone")) {
+      throw new TypeError("addSlide() cannot add a cloned carousel item.");
+    }
+    const slides = this.getSlides();
+    const lastSlide = slides[slides.length - 1];
+    this.insertBefore(slide, lastSlide?.nextElementSibling ?? null);
+  }
+  /** Removes the real slide at the specified index. */
+  removeSlide(index) {
+    if (!Number.isInteger(index)) {
+      return;
+    }
+    const slides = this.getSlides();
+    const slide = slides[index];
+    if (!slide) {
+      return;
+    }
+    const lastIndexAfterRemoval = Math.max(0, slides.length - 2);
+    if (index < this.activeSlide) {
+      this.activeSlide = Math.max(0, this.activeSlide - 1);
+    } else if (index === this.activeSlide) {
+      this.activeSlide = clamp(this.activeSlide, 0, lastIndexAfterRemoval);
+    }
+    slide.remove();
+  }
+  /**
+   * Scrolls the carousel to the slide specified by `index`.
+   *
+   * @param index - The slide index.
+   * @param behavior - The behavior used for scrolling.
+   */
+  goToSlide(index, behavior = "smooth") {
+    const { slidesPerPage, loop } = this;
+    const slides = this.getSlides();
+    const slidesWithClones = this.getSlides({ excludeClones: false });
+    if (!slides.length) {
+      return;
+    }
+    const newActiveSlide = loop ? (index + slides.length) % slides.length : clamp(index, 0, slides.length - slidesPerPage);
+    this.activeSlide = newActiveSlide;
+    const isRtl = this.localize.dir() === "rtl";
+    const nextSlideIndex = clamp(
+      index + (loop ? slidesPerPage : 0) + (isRtl ? slidesPerPage - 1 : 0),
+      0,
+      slidesWithClones.length - 1
+    );
+    const nextSlide = slidesWithClones[nextSlideIndex];
+    this.scrollToSlide(nextSlide, prefersReducedMotion() ? "auto" : behavior);
+  }
+  scrollToSlide(slide, behavior = "smooth") {
+    this.pendingSlideChange = true;
+    window.requestAnimationFrame(() => {
+      if (!this.scrollContainer) {
+        return;
+      }
+      const scrollContainer = this.scrollContainer;
+      const scrollContainerRect = scrollContainer.getBoundingClientRect();
+      const nextSlideRect = slide.getBoundingClientRect();
+      const nextLeft = nextSlideRect.left - scrollContainerRect.left;
+      const nextTop = nextSlideRect.top - scrollContainerRect.top;
+      if (nextLeft || nextTop) {
+        this.pendingSlideChange = true;
+        scrollContainer.scrollTo({
+          left: nextLeft + scrollContainer.scrollLeft,
+          top: nextTop + scrollContainer.scrollTop,
+          behavior
+        });
+      } else {
+        this.pendingSlideChange = false;
+      }
+    });
+  }
+  render() {
+    const { slidesPerMove, scrolling } = this;
+    let pagesCount = 0;
+    let currentPage = 0;
+    let prevEnabled = false;
+    let nextEnabled = false;
+    if (this.hasUpdated) {
+      pagesCount = this.getPageCount();
+      currentPage = this.getCurrentPage();
+      prevEnabled = this.canScrollPrev();
+      nextEnabled = this.canScrollNext();
+    }
+    const isRTL = o ? this.dir === "rtl" : this.localize.dir() === "rtl";
+    return b`
+      <div part="carousel" class="carousel">
+        <div
+          id="scroll-container"
+          part="scroll-container"
+          class="${e2({
+      slides: true,
+      "slides-horizontal": this.orientation === "horizontal",
+      "slides-vertical": this.orientation === "vertical",
+      "slides-dragging": this.dragging,
+      "slides-awaiting-position": this.awaitingInitialPosition
+    })}"
+          style=${o2({ "--slides-per-page": this.slidesPerPage })}
+          aria-busy="${scrolling ? "true" : "false"}"
+          aria-atomic="true"
+          tabindex="0"
+          @keydown=${this.handleKeyDown}
+          @mousedown="${this.handleMouseDragStart}"
+          @scroll="${this.handleScroll}"
+          @scrollend=${this.handleScrollEnd}
+          @click=${this.handleClick}
+        >
+          <slot @slotchange=${() => this.requestUpdate()}></slot>
+        </div>
+
+        ${this.navigation ? b`
+                <div part="navigation" class="navigation">
+                  <button
+                    part="navigation-button navigation-button-previous"
+                    class="${e2({
+      "navigation-button": true,
+      "navigation-button-previous": true,
+      "navigation-button-disabled": !prevEnabled
+    })}"
+                    aria-label="${this.localize.term("previousSlide")}"
+                    aria-controls="scroll-container"
+                    aria-disabled="${prevEnabled ? "false" : "true"}"
+                    @click=${prevEnabled ? () => this.previous() : null}
+                  >
+                    <slot name="previous-icon">
+                      <cs-icon
+                        library="system"
+                        name="${isRTL ? "keyboard_arrow_right" : "keyboard_arrow_left"}"
+                      ></cs-icon>
+                    </slot>
+                  </button>
+
+                  <button
+                    part="navigation-button navigation-button-next"
+                    class=${e2({
+      "navigation-button": true,
+      "navigation-button-next": true,
+      "navigation-button-disabled": !nextEnabled
+    })}
+                    aria-label="${this.localize.term("nextSlide")}"
+                    aria-controls="scroll-container"
+                    aria-disabled="${nextEnabled ? "false" : "true"}"
+                    @click=${nextEnabled ? () => this.next() : null}
+                  >
+                    <slot name="next-icon">
+                      <cs-icon
+                        library="system"
+                        name="${isRTL ? "keyboard_arrow_left" : "keyboard_arrow_right"}"
+                      ></cs-icon>
+                    </slot>
+                  </button>
+                </div>
+              ` : ""}
+        ${this.pagination ? b`
+                <div
+                  part="pagination"
+                  role="tablist"
+                  class="${e2({
+      pagination: true,
+      "pagination-awaiting-position": this.awaitingInitialPosition
+    })}"
+                  aria-controls="scroll-container"
+                >
+                  ${o3(o4(pagesCount), (index) => {
+      const isActive = index === currentPage;
+      return b`
+                      <button
+                        part="pagination-item ${isActive ? "pagination-item-active" : ""}"
+                        class="${e2({
+        "pagination-item": true,
+        "pagination-item-active": isActive
+      })}"
+                        role="tab"
+                        aria-selected="${isActive ? "true" : "false"}"
+                        aria-label="${this.localize.term("goToSlide", index + 1, pagesCount)}"
+                        tabindex=${isActive ? "0" : "-1"}
+                        @click=${() => this.goToSlide(index * slidesPerMove)}
+                        @keydown=${this.handleKeyDown}
+                      ></button>
+                    `;
+    })}
+                </div>
+              ` : b``}
+      </div>
+    `;
+  }
+};
+CsCarousel.css = carousel_styles_default;
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CsCarousel.prototype, "loop", 2);
+__decorateClass([
+  n({ type: Number, reflect: true })
+], CsCarousel.prototype, "slides", 2);
+__decorateClass([
+  n({ type: Number, reflect: true })
+], CsCarousel.prototype, "currentSlide", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CsCarousel.prototype, "navigation", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CsCarousel.prototype, "pagination", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CsCarousel.prototype, "autoplay", 2);
+__decorateClass([
+  n({ type: Number, attribute: "autoplay-interval" })
+], CsCarousel.prototype, "autoplayInterval", 2);
+__decorateClass([
+  n({ type: Number, attribute: "slides-per-page" })
+], CsCarousel.prototype, "slidesPerPage", 2);
+__decorateClass([
+  n({ type: Number, attribute: "slides-per-move" })
+], CsCarousel.prototype, "slidesPerMove", 2);
+__decorateClass([
+  n()
+], CsCarousel.prototype, "orientation", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true, attribute: "mouse-dragging" })
+], CsCarousel.prototype, "mouseDragging", 2);
+__decorateClass([
+  e(".slides")
+], CsCarousel.prototype, "scrollContainer", 2);
+__decorateClass([
+  e(".pagination")
+], CsCarousel.prototype, "paginationContainer", 2);
+__decorateClass([
+  r()
+], CsCarousel.prototype, "activeSlide", 2);
+__decorateClass([
+  r()
+], CsCarousel.prototype, "scrolling", 2);
+__decorateClass([
+  r()
+], CsCarousel.prototype, "dragging", 2);
+__decorateClass([
+  r()
+], CsCarousel.prototype, "awaitingInitialPosition", 2);
+__decorateClass([
+  t({ passive: true })
+], CsCarousel.prototype, "handleScroll", 1);
+__decorateClass([
+  watch("loop", { waitUntilFirstUpdate: true }),
+  watch("slidesPerPage", { waitUntilFirstUpdate: true })
+], CsCarousel.prototype, "initializeSlides", 1);
+__decorateClass([
+  watch("activeSlide")
+], CsCarousel.prototype, "handleSlideChange", 1);
+__decorateClass([
+  watch("slidesPerMove")
+], CsCarousel.prototype, "updateSlidesSnap", 1);
+__decorateClass([
+  watch("autoplay")
+], CsCarousel.prototype, "handleAutoplayChange", 1);
+CsCarousel = __decorateClass([
+  customElement("cs-carousel")
+], CsCarousel);
+
+export {
+  CsCarousel
+};
+/*! Bundled license information:
+
+lit-html/directives/map.js:
+lit-html/directives/range.js:
+  (**
+   * @license
+   * Copyright 2021 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+*/