import { r as a, c as n, h as l, H as r, g as d } from "./index.61732cef.js";
import { c } from "./index-orsBiyT_.fc4357c3.js";
import { d as h } from "./utils-CCck-DTo.e4e43b6a.js";
import "react";
import "react-dom";
const u = () => ':host{--swirl-carousel-spacing:var(--s-space-16);--swirl-carousel-fade-color:var(--s-background-default);position:relative;display:block;overflow:hidden;width:100%}:host(:hover) .carousel__previous-slide-button,:host(:hover) .carousel__next-slide-button{pointer-events:auto}:host *{box-sizing:border-box}.carousel{position:relative;overflow:hidden;width:100%}.carousel:before,.carousel:after{position:absolute;z-index:1;top:0;width:var(--s-space-32);height:100%;content:"";transition:opacity 0.2s;pointer-events:none;opacity:0}.carousel:before{left:0;background:linear-gradient(       90deg,       var(--swirl-carousel-fade-color) 0%,       transparent 100%     )}.carousel:after{right:0;background:linear-gradient(       270deg,       var(--swirl-carousel-fade-color) 0%,       transparent 100%     )}.carousel--fade:before,.carousel--fade:after{opacity:1}.carousel--is-at-start:before,.carousel--is-at-end:after{opacity:0}.carousel__slides{position:relative;display:flex;overflow-x:auto;overflow-y:hidden;width:100%;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-behavior:smooth}.carousel__slides::-webkit-scrollbar{display:none}.carousel__slides ::slotted(*:not(:first-of-type)){margin-left:var(--swirl-carousel-spacing)}.carousel__slides ::slotted(*){flex-grow:0;flex-shrink:0;scroll-snap-align:start}.carousel__previous-slide-button,.carousel__next-slide-button{position:absolute;z-index:2;top:50%;transform:translateY(-50%) scale(0.72);pointer-events:none}.carousel__previous-slide-button{left:var(--s-space-4)}.carousel__next-slide-button{right:var(--s-space-4)}', f = class {
  constructor(t) {
    a(this, t), this.activeSlidesChange = n(this, "activeSlidesChange", 7), this.nextSlideButtonLabel = "Next slide", this.previousSlideButtonLabel = "Previous slide", this.fade = !1, this.fadeColor = "default", this.loopAround = !1, this.padding = "16", this.spacing = "16", this.activeSlides = [], this.carouselFadeColorMap = {
      default: "var(--s-background-default)",
      "on-surface-overlay": "var(--s-surface-overlay-default)"
    }, this.updateActiveSlideReferences = h(() => {
      const e = this.getActiveSlides();
      e.some((s, o) => this.activeSlides[o] !== s) && (this.activeSlides = e, this.activeSlidesChange.emit(this.activeSlides));
    }, 100), this.onPreviousSlideButtonClick = () => {
      this.previousSlide();
    }, this.onNextSlideButtonClick = () => {
      this.nextSlide();
    }, this.onSlotChange = () => {
      this.activeSlides.length && this.scrollToElement(this.activeSlides[0]), this.checkScrollStatus(), this.checkScrollPosition();
    }, this.onScroll = () => {
      this.updateActiveSlideReferences(), this.checkScrollPosition();
    };
  }
  onWindowResize() {
    this.checkScrollStatus(), this.checkScrollPosition();
  }
  componentDidLoad() {
    queueMicrotask(() => {
      !this.el.isConnected || (this.checkScrollStatus(), this.checkScrollPosition());
    });
  }
  async scrollToSlide(t) {
    const i = this.getSlides().find((s) => s.id === t);
    !Boolean(i) || this.scrollToElement(i);
  }
  scrollToElement(t) {
    var e;
    this.slidesContainer && t && ((e = this.slidesContainer) == null || e.scroll({
      left: t.offsetLeft,
      behavior: "smooth"
    }));
  }
  previousSlide() {
    const t = this.getSlides(), e = this.getActiveSlides(), i = e[0].previousElementSibling || (this.loopAround ? t[t.length - 1] : e[0]);
    this.scrollToElement(i);
  }
  nextSlide() {
    const t = this.getSlides(), e = this.getActiveSlides(), s = !Boolean(e[e.length - 1].nextElementSibling) && this.loopAround ? t[0] : e[0].nextElementSibling;
    this.scrollToElement(s);
  }
  getSlides() {
    return Array.from(this.el.querySelectorAll("swirl-carousel-slide"));
  }
  getActiveSlides() {
    return this.getSlides().filter((e) => this.checkInView(e));
  }
  checkScrollStatus() {
    this.isScrollable = this.slidesContainer.scrollWidth > this.slidesContainer.offsetWidth;
  }
  checkScrollPosition() {
    const t = this.getSlides(), e = this.getActiveSlides(), i = e[0] === t[0], s = e[e.length - 1] === t[t.length - 1];
    i !== this.isAtStart && (this.isAtStart = i), s !== this.isAtEnd && (this.isAtEnd = s);
  }
  checkInView(t) {
    let e = this.slidesContainer.scrollLeft, i = e + this.slidesContainer.clientWidth, s = t.offsetLeft, o = s + t.clientWidth;
    return s >= e && o <= i;
  }
  render() {
    this.el.style.setProperty("--swirl-carousel-spacing", `${this.spacing}px`), this.el.style.setProperty("--swirl-carousel-fade-color", this.carouselFadeColorMap[this.fadeColor]);
    const t = {
      padding: Boolean(this.padding) ? `var(--s-space-${this.padding})` : void 0,
      paddingBlockEnd: Boolean(this.paddingBlockEnd) ? `var(--s-space-${this.paddingBlockEnd})` : void 0,
      paddingBlockStart: Boolean(this.paddingBlockStart) ? `var(--s-space-${this.paddingBlockStart})` : void 0,
      paddingInlineEnd: Boolean(this.paddingInlineEnd) ? `var(--s-space-${this.paddingInlineEnd})` : void 0,
      paddingInlineStart: Boolean(this.paddingInlineStart) ? `var(--s-space-${this.paddingInlineStart})` : void 0,
      scrollPadding: Boolean(this.paddingInlineStart) ? `var(--s-space-${this.paddingInlineStart})` : Boolean(this.padding) ? `var(--s-space-${this.padding})` : void 0
    }, e = c("carousel", {
      "carousel--fade": this.fade,
      "carousel--is-at-start": this.isAtStart,
      "carousel--is-at-end": this.isAtEnd
    });
    return l(r, { key: "840096feefd373763dd50a841d3774fb3d466b99", "aria-label": this.label, "aria-roledescription": "carousel", role: "group" }, l("div", { key: "535cf444029aa486567192b5cf8d72b52df569f4", class: e }, this.isScrollable && !this.isAtStart && l("swirl-button", { key: "efe184bfe63ee3bfe0e8576aab7a6263417f1728", class: "carousel__previous-slide-button", hideLabel: !0, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.previousSlideButtonLabel, onClick: this.onPreviousSlideButtonClick, pill: !0, variant: "floating" }), this.isScrollable && !this.isAtEnd && l("swirl-button", { key: "e47800ebc41d08e810976ceebd0e9d583d276742", class: "carousel__next-slide-button", hideLabel: !0, icon: "<swirl-icon-arrow-forward></swirl-icon-arrow-forward>", label: this.nextSlideButtonLabel, onClick: this.onNextSlideButtonClick, pill: !0, variant: "floating" }), l("div", { key: "64b1e29f96ffc2e2e7042d03b20a45ef43a55642", "aria-live": "polite", class: "carousel__slides", style: t, onScroll: this.onScroll, ref: (i) => this.slidesContainer = i }, l("slot", { key: "e5c30c1d3e9cc32204e22711bed4f0e50689181d", onSlotchange: this.onSlotChange }))));
  }
  get el() {
    return d(this);
  }
};
f.style = u();
export {
  f as swirl_carousel
};
