import { r as a, c as n, h as l, H as r, g as d } from "./index.e6beb8d9.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((i, o) => this.activeSlides[o] !== i) && (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 s = this.getSlides().find((i) => i.id === t);
    !Boolean(s) || this.scrollToElement(s);
  }
  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(), s = e[0].previousElementSibling || (this.loopAround ? t[t.length - 1] : e[0]);
    this.scrollToElement(s);
  }
  nextSlide() {
    const t = this.getSlides(), e = this.getActiveSlides(), i = !Boolean(e[e.length - 1].nextElementSibling) && this.loopAround ? t[0] : e[0].nextElementSibling;
    this.scrollToElement(i);
  }
  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(), s = e[0] === t[0], i = e[e.length - 1] === t[t.length - 1];
    s !== this.isAtStart && (this.isAtStart = s), i !== this.isAtEnd && (this.isAtEnd = i);
  }
  checkInView(t) {
    let e = this.slidesContainer.scrollLeft, s = e + this.slidesContainer.clientWidth, i = t.offsetLeft, o = i + t.clientWidth;
    return i >= e && o <= s;
  }
  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: "4608b5385dc0b8ee293213a9d849632f2c32e53b", 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: "translucent" }), this.isScrollable && !this.isAtEnd && l("swirl-button", { key: "e8d73e19115dcd30b0fc2b416183e72ff82bdc22", 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: "translucent" }), l("div", { key: "64c2b7b2a9cfb305591e8bbe44bff581b5651564", "aria-live": "polite", class: "carousel__slides", style: t, onScroll: this.onScroll, ref: (s) => this.slidesContainer = s }, l("slot", { key: "417793d107b7c1f49561138d00fcbaa4a3d87c45", onSlotchange: this.onSlotChange }))));
  }
  get el() {
    return d(this);
  }
};
f.style = u();
export {
  f as swirl_carousel
};
