import { t as e } from "../../purify.es-Dsqc2y0I.js";
import { n as t, t as n } from "../../utils-C_mWfcFX.js";
//#region src/overlays/carousel/index.ts
var r = 50, i = class {
	containerEl;
	slides;
	shouldLoop;
	showArrows;
	showDots;
	pauseOnHover;
	autoplayInterval;
	onChangeCallback;
	className;
	carouselId;
	rootEl = null;
	trackEl = null;
	liveEl = null;
	prevBtn = null;
	nextBtn = null;
	dotEls = [];
	currentIndex = 0;
	autoplayEnabled;
	autoplayTimer = null;
	resizeObserver = null;
	destroyed = !1;
	touchStartX = 0;
	touchStartY = 0;
	isSwiping = !1;
	handleKeyDown;
	handleTouchStart;
	handleTouchEnd;
	handleMouseEnter;
	handleMouseLeave;
	constructor(e) {
		this.containerEl = n(e.container), this.slides = e.slides, this.shouldLoop = e.loop ?? !1, this.showArrows = e.showArrows !== !1, this.showDots = e.showDots !== !1, this.pauseOnHover = e.pauseOnHover !== !1, this.autoplayEnabled = e.autoplay ?? !1, this.autoplayInterval = e.autoplayInterval ?? 5e3, this.onChangeCallback = e.onChange, this.className = e.className, this.carouselId = t("cmm-carousel"), this.handleKeyDown = (e) => {
			this.onKeyDown(e);
		}, this.handleTouchStart = (e) => {
			this.onTouchStart(e);
		}, this.handleTouchEnd = (e) => {
			this.onTouchEnd(e);
		}, this.handleMouseEnter = () => {
			this.pauseOnHover && this.autoplayEnabled && this.stopAutoplayTimer();
		}, this.handleMouseLeave = () => {
			this.pauseOnHover && this.autoplayEnabled && this.startAutoplayTimer();
		}, this.render(), this.autoplayEnabled && this.startAutoplayTimer();
	}
	goTo(e) {
		if (this.destroyed || this.slides.length === 0) return;
		let t = e;
		this.shouldLoop ? t < 0 ? t = this.slides.length - 1 : t >= this.slides.length && (t = 0) : t = Math.max(0, Math.min(t, this.slides.length - 1)), t !== this.currentIndex && (this.currentIndex = t, this.updateTrackPosition(), this.updateArrowState(), this.updateDotState(), this.updateLiveRegion(), this.onChangeCallback?.(this.currentIndex));
	}
	next() {
		this.goTo(this.currentIndex + 1);
	}
	prev() {
		this.goTo(this.currentIndex - 1);
	}
	play() {
		this.autoplayEnabled = !0, this.startAutoplayTimer();
	}
	pause() {
		this.autoplayEnabled = !1, this.stopAutoplayTimer();
	}
	destroy() {
		this.destroyed || (this.destroyed = !0, this.stopAutoplayTimer(), this.resizeObserver &&= (this.resizeObserver.disconnect(), null), this.rootEl &&= (this.rootEl.removeEventListener("keydown", this.handleKeyDown), this.rootEl.removeEventListener("touchstart", this.handleTouchStart), this.rootEl.removeEventListener("touchend", this.handleTouchEnd), this.rootEl.removeEventListener("mouseenter", this.handleMouseEnter), this.rootEl.removeEventListener("mouseleave", this.handleMouseLeave), this.rootEl.remove(), null), this.trackEl = null, this.liveEl = null, this.prevBtn = null, this.nextBtn = null, this.dotEls = []);
	}
	render() {
		let t = document.createElement("div");
		t.className = "cmm-carousel", t.id = this.carouselId, t.setAttribute("role", "region"), t.setAttribute("aria-roledescription", "carousel"), t.setAttribute("aria-label", "Content carousel"), t.setAttribute("tabindex", "0"), this.className && t.classList.add(this.className);
		let n = document.createElement("div");
		n.className = "cmm-carousel__viewport";
		let r = document.createElement("div");
		r.className = "cmm-carousel__track", r.setAttribute("aria-live", "off"), this.trackEl = r;
		for (let t = 0; t < this.slides.length; t++) {
			let n = this.slides[t];
			if (n === void 0) continue;
			let i = document.createElement("div");
			i.className = "cmm-carousel__slide", i.setAttribute("role", "group"), i.setAttribute("aria-roledescription", "slide"), i.setAttribute("aria-label", n.label ?? `Slide ${String(t + 1)} of ${String(this.slides.length)}`), typeof n.content == "string" ? i.innerHTML = e.sanitize(n.content) : i.appendChild(n.content), r.appendChild(i);
		}
		if (n.appendChild(r), t.appendChild(n), this.showArrows && this.slides.length > 1) {
			let e = document.createElement("button");
			e.className = "cmm-carousel__arrow cmm-carousel__arrow--prev", e.type = "button", e.setAttribute("aria-label", "Previous slide"), e.innerHTML = "&#8249;", e.addEventListener("click", () => {
				this.prev();
			}), t.appendChild(e), this.prevBtn = e;
			let n = document.createElement("button");
			n.className = "cmm-carousel__arrow cmm-carousel__arrow--next", n.type = "button", n.setAttribute("aria-label", "Next slide"), n.innerHTML = "&#8250;", n.addEventListener("click", () => {
				this.next();
			}), t.appendChild(n), this.nextBtn = n;
		}
		if (this.showDots && this.slides.length > 1) {
			let e = document.createElement("div");
			e.className = "cmm-carousel__dots", e.setAttribute("role", "tablist"), e.setAttribute("aria-label", "Slide navigation"), this.dotEls = [];
			for (let t = 0; t < this.slides.length; t++) {
				let n = document.createElement("button");
				n.className = "cmm-carousel__dot", n.type = "button", n.setAttribute("role", "tab"), n.setAttribute("aria-label", `Go to slide ${String(t + 1)}`), n.setAttribute("aria-selected", t === 0 ? "true" : "false");
				let r = t;
				n.addEventListener("click", () => {
					this.goTo(r);
				}), e.appendChild(n), this.dotEls.push(n);
			}
			t.appendChild(e);
		}
		let i = document.createElement("div");
		i.className = "cmm-carousel__live", i.setAttribute("aria-live", "polite"), i.setAttribute("aria-atomic", "true"), t.appendChild(i), this.liveEl = i, this.rootEl = t, t.addEventListener("keydown", this.handleKeyDown), t.addEventListener("touchstart", this.handleTouchStart, { passive: !0 }), t.addEventListener("touchend", this.handleTouchEnd, { passive: !0 }), t.addEventListener("mouseenter", this.handleMouseEnter), t.addEventListener("mouseleave", this.handleMouseLeave), this.containerEl.appendChild(t), this.updateTrackPosition(), this.updateArrowState(), this.updateDotState(), this.resizeObserver = new ResizeObserver(() => {
			this.updateTrackPosition();
		}), this.resizeObserver.observe(t);
	}
	updateTrackPosition() {
		if (!this.trackEl) return;
		let e = -(this.currentIndex * 100);
		this.trackEl.style.transform = `translateX(${String(e)}%)`;
	}
	updateArrowState() {
		this.shouldLoop || (this.prevBtn && (this.prevBtn.disabled = this.currentIndex === 0), this.nextBtn && (this.nextBtn.disabled = this.currentIndex === this.slides.length - 1));
	}
	updateDotState() {
		for (let e = 0; e < this.dotEls.length; e++) {
			let t = this.dotEls[e];
			t !== void 0 && (e === this.currentIndex ? (t.classList.add("cmm-carousel__dot--active"), t.setAttribute("aria-selected", "true")) : (t.classList.remove("cmm-carousel__dot--active"), t.setAttribute("aria-selected", "false")));
		}
	}
	updateLiveRegion() {
		if (!this.liveEl) return;
		let e = this.slides[this.currentIndex]?.label ?? `Slide ${String(this.currentIndex + 1)} of ${String(this.slides.length)}`;
		this.liveEl.textContent = e;
	}
	startAutoplayTimer() {
		this.stopAutoplayTimer(), !(this.slides.length <= 1) && (this.autoplayTimer = setInterval(() => {
			this.shouldLoop || this.currentIndex < this.slides.length - 1 ? this.next() : this.stopAutoplayTimer();
		}, this.autoplayInterval));
	}
	stopAutoplayTimer() {
		this.autoplayTimer !== null && (clearInterval(this.autoplayTimer), this.autoplayTimer = null);
	}
	onKeyDown(e) {
		e.key === "ArrowLeft" ? (e.preventDefault(), this.prev()) : e.key === "ArrowRight" ? (e.preventDefault(), this.next()) : e.key === "Home" ? (e.preventDefault(), this.goTo(0)) : e.key === "End" && (e.preventDefault(), this.goTo(this.slides.length - 1));
	}
	onTouchStart(e) {
		let t = e.touches[0];
		t !== void 0 && (this.touchStartX = t.clientX, this.touchStartY = t.clientY, this.isSwiping = !0);
	}
	onTouchEnd(e) {
		if (!this.isSwiping) return;
		this.isSwiping = !1;
		let t = e.changedTouches[0];
		if (t === void 0) return;
		let n = t.clientX - this.touchStartX, i = t.clientY - this.touchStartY;
		Math.abs(n) < r || Math.abs(i) > Math.abs(n) || (n < 0 ? this.next() : this.prev());
	}
};
//#endregion
export { i as Carousel };

//# sourceMappingURL=index.js.map