@graupl/graupl 1.0.0-beta.45 → 1.0.0-beta.47

package/dist/js/component/carousel.es.js

@@ -1,10 +1,10 @@
-function h(t, e) {
+function m(t, e) {
 	t === "" || t.length === 0 || (typeof t == "string" ? e.classList.add(t) : e.classList.add(...t));
 }
-function l(t, e) {
+function d(t, e) {
 	t === "" || t.length === 0 || (typeof t == "string" ? e.classList.remove(t) : e.classList.remove(...t));
 }
-function d(t) {
+function u(t) {
 	try {
 		const e = t.key || t.keyCode, r = {
 			Enter: e === "Enter" || e === 13,
@@ -25,10 +25,10 @@ function d(t) {
 		return "";
 	}
 }
-function _(t) {
+function h(t) {
 	t.preventDefault(), t.stopPropagation();
 }
-function u(t, e, { shouldThrow: r = !0 } = {}) {
+function l(t, e, { shouldThrow: r = !0 } = {}) {
 	const s = {
 		status: !0,
 		errors: []
@@ -68,7 +68,7 @@ function a(t, e, { shouldThrow: r = !0 } = {}) {
 	if (r && !s.status) throw s.errors[0];
 	return s;
 }
-function g(t, { shouldThrow: e = !0 } = {}) {
+function v(t, { shouldThrow: e = !0 } = {}) {
 	const r = {
 		status: !0,
 		errors: []
@@ -91,7 +91,7 @@ function g(t, { shouldThrow: e = !0 } = {}) {
 	if (e && !r.status) throw r.errors[0];
 	return r;
 }
-function c(t, { shouldThrow: e = !0 } = {}) {
+function _(t, { shouldThrow: e = !0 } = {}) {
 	const r = {
 		status: !0,
 		errors: []
@@ -106,7 +106,7 @@ function c(t, { shouldThrow: e = !0 } = {}) {
 			else throw new TypeError(`${s} must be a string or an array of strings. "${i}" given.`);
 			else {
 				const o = {};
-				o[s] = t[s], g(o);
+				o[s] = t[s], v(o);
 			}
 		} catch (i) {
 			r.status = !1, r.errors.push(i);
@@ -164,13 +164,13 @@ function V(t, { shouldThrow: e = !0 } = {}) {
 	if (e && !r.status) throw r.errors[0];
 	return r;
 }
-function E(t, e, { shouldThrow: r = !0 } = {}) {
+function K(t, e, { shouldThrow: r = !0 } = {}) {
 	const s = {
 		status: !0,
 		errors: []
 	};
 	try {
-		if (a("string", { tagName: t }, { shouldThrow: !0 }).status && u(HTMLElement, e, { shouldThrow: !0 }).status) {
+		if (a("string", { tagName: t }, { shouldThrow: !0 }).status && l(HTMLElement, e, { shouldThrow: !0 }).status) {
 			const i = t.toLowerCase();
 			for (const o in e) try {
 				if (e[o].tagName.toLowerCase() !== i) throw new TypeError(`${o} must be a <${i}> element. <${e[o].tagName.toLowerCase()}> given.`);
@@ -184,7 +184,7 @@ function E(t, e, { shouldThrow: r = !0 } = {}) {
 	if (r && !s.status) throw s.errors[0];
 	return s;
 }
-function P(t, e, { shouldThrow: r = !0 } = {}) {
+function F(t, e, { shouldThrow: r = !0 } = {}) {
 	const s = {
 		status: !0,
 		errors: []
@@ -197,7 +197,7 @@ function P(t, e, { shouldThrow: r = !0 } = {}) {
 	if (r && !s.status) throw s.errors[0];
 	return s;
 }
-function K(t, { shouldThrow: e = !0 } = {}) {
+function N(t, { shouldThrow: e = !0 } = {}) {
 	const r = {
 		status: !0,
 		errors: []
@@ -210,7 +210,7 @@ function K(t, { shouldThrow: e = !0 } = {}) {
 	if (e && !r.status) throw r.errors[0];
 	return r;
 }
-var p = class v {
+var f = class b {
 	_scope;
 	_type = "_default";
 	_storage = {};
@@ -220,7 +220,7 @@ var p = class v {
 	}
 	initialize() {
 		try {
-			!this._crush && typeof window[this.scope] < "u" && (u(v, { storage: window[this.scope] }, { shouldThrow: !1 }).status || typeof window[this.scope].storage < "u" && typeof window[this.scope].scope < "u" && typeof window[this.scope].type < "u") && (this._storage = window[this.scope].storage);
+			!this._crush && typeof window[this.scope] < "u" && (l(b, { storage: window[this.scope] }, { shouldThrow: !1 }).status || typeof window[this.scope].storage < "u" && typeof window[this.scope].scope < "u" && typeof window[this.scope].type < "u") && (this._storage = window[this.scope].storage);
 		} catch {} finally {
 			window[this.scope] = this;
 		}
@@ -270,7 +270,7 @@ var p = class v {
 	dispose() {
 		delete this._storage, delete this;
 	}
-}, F = class {
+}, I = class {
 	_dom = {};
 	_rootDOMElement = "";
 	_protectedDOMElements = [];
@@ -315,7 +315,7 @@ var p = class v {
 			if (!this._validate()) throw new Error(`Graupl ${this.name}: Cannot initialize component. The following errors have been found:
  - ${this.errors.map((t) => t.message).join(`
  - `)}`);
-			h(this.initializeClass, this.rootDOMElement), this._dispatchEvent("preinitialize", this.rootDOMElement), this._generateKey(), this._setDOMElements(), this._setIds(), this._setAriaAttributes(), this._setCustomProps(), this._createChildElements(), this._handleMediaMatch(), this._handleFocus(), this._handleHover(), this._handleClick(), this._handleKeydown(), this._handleKeyup(), this._dispatchEvent("initialize", this.rootDOMElement), this._store(), l(this.initializeClass, this.rootDOMElement), this._initialized = !0, this._dispatchEvent("postinitialize", this.rootDOMElement);
+			m(this.initializeClass, this.rootDOMElement), this._dispatchEvent("preinitialize", this.rootDOMElement), this._generateKey(), this._setDOMElements(), this._setIds(), this._setAriaAttributes(), this._setCustomProps(), this._createChildElements(), this._handleMediaMatch(), this._handleFocus(), this._handleHover(), this._handleClick(), this._handleKeydown(), this._handleKeyup(), this._dispatchEvent("initialize", this.rootDOMElement), this._store(), d(this.initializeClass, this.rootDOMElement), this._initialized = !0, this._dispatchEvent("postinitialize", this.rootDOMElement);
 		} catch (t) {
 			console.error(t);
 		}
@@ -360,7 +360,7 @@ var p = class v {
 		return this._classes.initialize;
 	}
 	set initializeClass(t) {
-		c({ initializeClass: t }), this._classes.initialize !== t && (this._classes.initialize = t);
+		_({ initializeClass: t }), this._classes.initialize !== t && (this._classes.initialize = t);
 	}
 	get focusState() {
 		return this._focusState;
@@ -413,25 +413,25 @@ var p = class v {
 	}
 	_validate() {
 		this._dispatchEvent("prevalidate", this.rootDOMElement);
-		const t = K(this, { shouldThrow: !1 });
+		const t = N(this, { shouldThrow: !1 });
 		if (t.status || (this._errors = [...this._errors, ...t.errors], this._valid = !1), Object.keys(this._dom).length > 0) {
 			const s = {};
-			for (const o of Object.keys(this._dom)) Array.isArray(this._dom[o]) ? this._dom[o].forEach((n, f) => {
-				s[`${o}Element[${f}]`] = n;
+			for (const o of Object.keys(this._dom)) Array.isArray(this._dom[o]) ? this._dom[o].forEach((n, c) => {
+				s[`${o}Element[${c}]`] = n;
 			}) : this._dom[o] !== null && (s[`${o}Element`] = this._dom[o]);
-			const i = u(HTMLElement, s, { shouldThrow: !1 });
+			const i = l(HTMLElement, s, { shouldThrow: !1 });
 			i.status || (this._errors = [...this._errors, ...i.errors], this._valid = !1);
 		}
 		if (Object.keys(this._selectors).length > 0) {
 			const s = {};
 			for (const o of Object.keys(this._selectors)) s[`${o}Selector`] = this._selectors[o];
-			const i = g(s, { shouldThrow: !1 });
+			const i = v(s, { shouldThrow: !1 });
 			i.status || (this._errors = [...this._errors, ...i.errors], this._valid = !1);
 		}
 		if (Object.keys(this._classes).length > 0) {
 			const s = {};
 			for (const o of Object.keys(this._classes)) this._classes[o] !== "" && (s[`${o}Class`] = this._classes[o]);
-			const i = c(s, { shouldThrow: !1 });
+			const i = _(s, { shouldThrow: !1 });
 			i.status || (this._errors = [...this._errors, ...i.errors], this._valid = !1);
 		}
 		if (Object.keys(this._durations).length > 0) {
@@ -468,7 +468,7 @@ var p = class v {
 	_setDOMElementType(t, { context: e, overwrite: r = !0, strict: s = !1 } = {}) {
 		if (typeof this.selectors[t] != "string") throw new Error(`Graupl ${this.name}: "${t}" is not a valid element type.`);
 		if (this._rootDOMElement === t || this._protectedDOMElements.includes(t)) throw new Error(`Graupl ${this.name}: "${t}" element cannot be set through _setDOMElementType because it is a protected element.`);
-		u(HTMLElement, { context: e });
+		l(HTMLElement, { context: e });
 		const i = Array.from(e.querySelectorAll(this.selectors[t])).filter((o) => s ? o.parentElement === e : !0);
 		Array.isArray(this._dom[t]) ? r ? this._dom[t] = i : this._dom[t] = [...this._dom[t], ...i] : this._dom[t] = i[0] || null;
 	}
@@ -488,14 +488,14 @@ var p = class v {
 	_handleKeydown() {}
 	_handleKeyup() {}
 	_store() {
-		this._shouldStore && (u(p, { storage: window.GrauplStorage }, { shouldThrow: !1 }).status || new p({ scope: "GrauplStorage" }), window.GrauplStorage.set({
+		this._shouldStore && (l(f, { storage: window.GrauplStorage }, { shouldThrow: !1 }).status || new f({ scope: "GrauplStorage" }), window.GrauplStorage.set({
 			key: this.id !== "" ? this.id : this.key,
 			type: this._storageKey,
 			data: this
 		}));
 	}
 	_unstore() {
-		this._shouldStore && u(p, { storage: window.GrauplStorage }, { shouldThrow: !1 }).status && window.GrauplStorage.clear({
+		this._shouldStore && l(f, { storage: window.GrauplStorage }, { shouldThrow: !1 }).status && window.GrauplStorage.clear({
 			key: this.id !== "" ? this.id : this.key,
 			type: this._storageKey
 		});
@@ -530,7 +530,7 @@ var p = class v {
 		});
 	}
 	_dispatchEvent(t, e) {
-		P(t, this), u(HTMLElement, { element: e }), e.dispatchEvent(this.events[t]);
+		F(t, this), l(HTMLElement, { element: e }), e.dispatchEvent(this.events[t]);
 	}
 	_addEventListener(t, e, r, s = {}) {
 		e.addEventListener(t, r, s), this._listeners.push({
@@ -561,77 +561,96 @@ var p = class v {
 	dispose() {
 		this._clearIntervals(), this._clearTimeouts(), this._removeEventListeners(), this._unstore(), delete this;
 	}
-}, G = class extends F {
+}, p = class extends I {
+	_rootDOMElement = "carouselItem";
+	_shouldStore = !1;
+	_storageKey = "carouselItems";
+	_name = "CarouselItem";
+	_busy = !1;
+	constructor({ carouselItemElement: t, tabElement: e = null, clone: r = null, parent: s, prefix: i = "graupl-", key: o = null, initializeClass: n = "initializing", initialize: c = !1 }) {
+		super({
+			prefix: i,
+			key: o,
+			initializeClass: n
+		}), this._dom.carouselItem = t, this._dom.tab = e, this._elements.clone = r ?? null, this._elements.parent = s, c && this.initialize();
+	}
+	activate({ scroll: t = !0, scrollOptions: e = {} } = {}) {
+		requestAnimationFrame(() => {
+			m(this.elements.parent.activeClass, this.dom.carouselItem), this.dom.carouselItem.removeAttribute("inert"), t && this.elements.parent.dom.carouselItemContainer.scrollTo({
+				left: this.dom.carouselItem.offsetLeft,
+				top: this.dom.carouselItem.offsetTop,
+				behavior: "smooth",
+				...e
+			}), this.dom.tab && requestAnimationFrame(() => {
+				m(this.elements.parent.activeClass, this.dom.tab), this.dom.tab.setAttribute("aria-selected", !0);
+			});
+		});
+	}
+	deactivate() {
+		requestAnimationFrame(() => {
+			d(this.elements.parent.activeClass, this.dom.carouselItem), this.dom.carouselItem.setAttribute("inert", !0), requestAnimationFrame(() => {
+				this.dom.tab && (d(this.elements.parent.activeClass, this.dom.tab), this.dom.tab.setAttribute("aria-selected", !1));
+			});
+		});
+	}
+}, q = class extends I {
 	_rootDOMElement = "carousel";
 	_currentItem = 0;
 	_autoplay = !0;
 	_playText = "Play";
 	_pauseText = "Pause";
-	_currentAction = "next";
 	_storageKey = "carousels";
 	_name = "Carousel";
-	constructor({ carouselElement: t, carouselItemsSelector: e = ".carousel-item", carouselItemContainerSelector: r = ".carousel-item-container", carouselControlsSelector: s = ".carousel-control", carouselControlContainerSelector: i = ".carousel-control-container", carouselTabsSelector: o = ".carousel-tab", carouselTabContainerSelector: n = ".carousel-tab-container", autoplaySelector: f = ".autoplay", nextSelector: w = ".next", previousSelector: C = ".previous", activeClass: b = "active", previousClass: I = "previous", nextClass: T = "next", playClass: k = "play", pauseClass: $ = "pause", autoplay: A = !0, transitionDelay: O = 1e4, transitionDuration: x = 500, playText: D = "Play", pauseText: M = "Pause", prefix: S = "graupl-", key: L = null, initializeClass: j = "initializing", initialize: z = !1 }) {
+	_itemsPerPage = 1;
+	_loop = !0;
+	constructor({ carouselElement: t, carouselItemsSelector: e = ".carousel-item", carouselItemContainerSelector: r = ".carousel-item-container", carouselControlsSelector: s = ".carousel-control", carouselControlContainerSelector: i = ".carousel-control-container", carouselTabsSelector: o = ".carousel-tab", carouselTabContainerSelector: n = ".carousel-tab-container", autoplaySelector: c = ".autoplay", nextSelector: w = ".next", previousSelector: C = ".previous", activeClass: k = "active", playClass: T = "play", pauseClass: $ = "pause", autoplay: x = !0, transitionDelay: M = 1e4, playText: A = "Play", pauseText: O = "Pause", itemsPerPage: D = 1, loop: S = !0, prefix: L = "graupl-", key: z = null, initializeClass: P = "initializing", initialize: j = !1 }) {
 		super({
-			prefix: S,
-			key: L,
-			initializeClass: j
-		}), this._dom.carousel = t, this._dom.carouselItems = [], this._dom.carouselItemContainer = null, this._dom.carouselControls = [], this._dom.carouselControlContainer = null, this._dom.carouselTabs = [], this._dom.carouselTabContainer = null, this._dom.autoplay = null, this._dom.next = null, this._dom.previous = null, this._selectors.carouselItems = e, this._selectors.carouselItemContainer = r, this._selectors.carouselControls = s, this._selectors.carouselControlContainer = i, this._selectors.carouselTabs = o, this._selectors.carouselTabContainer = n, this._selectors.autoplay = f, this._selectors.next = w, this._selectors.previous = C, this._classes.active = b || "", this._classes.previous = I || "", this._classes.next = T || "", this._classes.play = k || "", this._classes.pause = $ || "", this._autoplay = A, this._delays.transition = O, this._durations.transition = x, this._playText = D || "", this._pauseText = M || "", this._addEventListener("grauplComponentInitialize", this.rootDOMElement, () => {
-			this._handleAutoplay(), this.dom.carouselItems.forEach((m) => {
-				m.setAttribute("inert", "true");
-			}), this.activateFirstItem();
+			prefix: L,
+			key: z,
+			initializeClass: P
+		}), this._dom.carousel = t, this._dom.carouselItems = [], this._dom.carouselItemContainer = null, this._dom.carouselControls = [], this._dom.carouselControlContainer = null, this._dom.carouselTabs = [], this._dom.carouselTabContainer = null, this._dom.autoplay = null, this._dom.next = null, this._dom.previous = null, this._selectors.carouselItems = e, this._selectors.carouselItemContainer = r, this._selectors.carouselControls = s, this._selectors.carouselControlContainer = i, this._selectors.carouselTabs = o, this._selectors.carouselTabContainer = n, this._selectors.autoplay = c, this._selectors.next = w, this._selectors.previous = C, this._elements.carouselItems = [], this._classes.active = k || "", this._classes.play = T || "", this._classes.pause = $ || "", this._autoplay = x, this._itemsPerPage = D, this._loop = S, this._delays.transition = M, this._playText = A || "", this._pauseText = O || "", this._addEventListener("grauplComponentInitialize", this.rootDOMElement, () => {
+			this._handleAutoplay(), this.loop && this._handleLoop(), this._handleIntersection(), this.activateFirstItem({ scrollOptions: { behavior: "instant" } });
 		}), this._addEventListener("grauplComponentValidate", this.rootDOMElement, () => {
-			const m = a("boolean", { autoplay: this._autoplay }, { shouldThrow: !1 });
-			m.status || (this._errors = [...this._errors, ...m.errors], this._valid = !1);
-			const y = a("string", {
+			const y = a("boolean", {
+				autoplay: this._autoplay,
+				loop: this._loop
+			}, { shouldThrow: !1 });
+			y.status || (this._errors = [...this._errors, ...y.errors], this._valid = !1);
+			const g = a("string", {
 				playText: this._playText,
 				pauseText: this._pauseText
 			}, { shouldThrow: !1 });
-			y.status || (this._errors = [...this._errors, ...y.errors], this._valid = !1);
-		}), z && this.initialize();
+			g.status || (this._errors = [...this._errors, ...g.errors], this._valid = !1);
+			const E = a("number", { itemsPerPage: this._itemsPerPage }, { shouldThrow: !1 });
+			E.status || (this._errors = [...this._errors, ...E.errors], this._valid = !1);
+		}), j && this.initialize();
 	}
 	get activeClass() {
 		return this._classes.active;
 	}
 	set activeClass(t) {
-		c({ activeClass: t }), this._classes.active !== t && (this._classes.active = t);
-	}
-	get previousClass() {
-		return this._classes.previous;
-	}
-	set previousClass(t) {
-		c({ previousClass: t }), this._classes.previous !== t && (this._classes.previous = t);
-	}
-	get nextClass() {
-		return this._classes.next;
-	}
-	set nextClass(t) {
-		c({ nextClass: t }), this._classes.next !== t && (this._classes.next = t);
+		_({ activeClass: t }), this._classes.active !== t && (this._classes.active = t);
 	}
 	get playClass() {
 		return this._classes.play;
 	}
 	set playClass(t) {
-		c({ playClass: t }), this._classes.play !== t && (this._classes.play = t);
+		_({ playClass: t }), this._classes.play !== t && (this._classes.play = t);
 	}
 	get pauseClass() {
 		return this._classes.pause;
 	}
 	set pauseClass(t) {
-		c({ pauseClass: t }), this._classes.pause !== t && (this._classes.pause = t);
+		_({ pauseClass: t }), this._classes.pause !== t && (this._classes.pause = t);
 	}
 	get currentItem() {
 		return this._currentItem;
 	}
 	set currentItem(t) {
-		a("number", { currentItem: t }), t !== this.currentItem && (t < 0 ? this._currentItem = 0 : t >= this.dom.carouselItems.length ? this._currentItem = this.dom.carouselItems.length - 1 : this._currentItem = t, this._dom.carousel.querySelectorAll(this.selectors.carouselTab) && this.dom.carouselItems.forEach((e, r) => {
-			e.setAttribute("aria-selected", r === this._currentItem);
-		}));
+		a("number", { currentItem: t }), t !== this.currentItem && (t < 0 ? this._currentItem = 0 : t >= this.dom.carouselItems.length ? this._currentItem = this.dom.carouselItems.length - 1 : this._currentItem = t);
 	}
 	get currentCarouselItem() {
-		return this.dom.carouselItems[this.currentItem];
-	}
-	get currentCarouselTab() {
-		return this.dom.carouselTabs[this.currentItem];
+		return this.elements.carouselItems[this.currentItem];
 	}
 	get autoplay() {
 		return this._autoplay;
@@ -639,18 +658,18 @@ var p = class v {
 	set autoplay(t) {
 		a("boolean", { autoplay: t }), this._autoplay !== t && (this._autoplay = t);
 	}
+	get itemsPerPage() {
+		return this._itemsPerPage;
+	}
+	get loop() {
+		return this._loop;
+	}
 	get transitionDelay() {
 		return this._delays.transition;
 	}
 	set transitionDelay(t) {
 		a("number", { transitionDelay: t }), t !== this.transitionDelay && t >= 0 && (this._delays.transition = t);
 	}
-	get transitionDuration() {
-		return this._durations.transition;
-	}
-	set transitionDuration(t) {
-		a("number", { transitionDuration: t }), this._durations.transition !== t && t >= 0 && (this._durations.transition = t, this._setTransitionDuration());
-	}
 	get playText() {
 		return this._playText;
 	}
@@ -663,12 +682,22 @@ var p = class v {
 	set pauseText(t) {
 		a("string", { pauseText: t }), this._pauseText !== t && (this._pauseText = t);
 	}
-	get currentAction() {
-		return this._currentAction;
-	}
 	_setDOMElements() {
 		this._setDOMElementType("carouselItemContainer", { context: this.dom.carousel }), this._setDOMElementType("carouselControlContainer", { context: this.dom.carousel }), this._setDOMElementType("carouselTabContainer", { context: this.dom.carousel }), this.dom.carouselItemContainer && this._setDOMElementType("carouselItems", { context: this.dom.carouselItemContainer }), this.dom.carouselControlContainer && (this._setDOMElementType("carouselControls", { context: this.dom.carouselControlContainer }), this._setDOMElementType("autoplay", { context: this.dom.carouselControlContainer }), this._setDOMElementType("next", { context: this.dom.carouselControlContainer }), this._setDOMElementType("previous", { context: this.dom.carouselControlContainer })), this._dom.carouselTabContainer && this._setDOMElementType("carouselTabs", { context: this.dom.carouselTabContainer });
 	}
+	_createChildElements() {
+		this.dom.carouselItems.forEach((t, e) => {
+			const r = new p({
+				carouselItemElement: t,
+				tabElement: this.dom.carouselTabs ? this.dom.carouselTabs[e] : null,
+				parent: this,
+				prefix: this.prefix,
+				initializeClass: this.classes.initialize,
+				initialize: !0
+			});
+			this._elements.carouselItems.push(r);
+		});
+	}
 	_setIds() {
 		this.dom.carousel.id = this.dom.carousel.id || `carousel-${this.key}`, this.dom.carouselItems.forEach((t, e) => {
 			t.id = t.id || `carousel-item-${this.key}-${e}`;
@@ -677,15 +706,36 @@ var p = class v {
 		}), this._id = this.dom.carousel.id;
 	}
 	_setAriaAttributes() {
-		!E("section", { carousel: this.dom.carousel }, { shouldThrow: !1 }).status && !this.dom.carousel.getAttribute("role") !== "region" && this.dom.carousel.setAttribute("role", "group"), this._dom.carousel.setAttribute("aria-roledescription", "carousel"), this.dom.carouselTabContainer && this.dom.carouselTabContainer.setAttribute("role", "tablist"), this.dom.carouselTabs.forEach((t, e) => {
-			E("button", { tab: t }, { shouldThrow: !1 }).status || t.setAttribute("role", "button"), t.setAttribute("aria-selected", e === 0), t.setAttribute("aria-controls", this.dom.carouselItems[e].id);
+		!K("section", { carousel: this.dom.carousel }, { shouldThrow: !1 }).status && !this.dom.carousel.getAttribute("role") !== "region" && this.dom.carousel.setAttribute("role", "group"), this.dom.carouselItems.forEach((t) => {
+			t.setAttribute("inert", "true");
+		}), this.dom.carouselItemContainer && this.dom.carouselItemContainer.setAttribute("tabindex", "-1"), this._dom.carousel.setAttribute("aria-roledescription", "carousel"), this.dom.carouselTabContainer && this.dom.carouselTabContainer.setAttribute("role", "tablist"), this.dom.carouselTabs.forEach((t, e) => {
+			t.setAttribute("role", "tab"), t.setAttribute("aria-selected", e === 0), t.setAttribute("aria-controls", this.dom.carouselItems[e].id);
 		});
 	}
-	_setCustomProps() {
-		this.dom.carousel.style.setProperty(`--${this.prefix}carousel-transition-duration`, `${this.transitionDuration}ms`);
-	}
 	_handleAutoplay() {
-		this.autoplay ? (h(this.pauseClass, this.dom.autoplay), l(this.playClass, this.dom.autoplay), this.dom.autoplay.setAttribute("aria-label", this.pauseText), this.dom.carousel.setAttribute("aria-live", "off"), this._setInterval(() => this.activateNextItem(), this.transitionDelay)) : (h(this.playClass, this.dom.autoplay), l(this.pauseClass, this.dom.autoplay), this.dom.autoplay.setAttribute("aria-label", this.playText), this.dom.carousel.setAttribute("aria-live", "polite"), this._clearInterval());
+		this.autoplay ? (m(this.pauseClass, this.dom.autoplay), d(this.playClass, this.dom.autoplay), this.dom.autoplay.setAttribute("aria-label", this.pauseText), this.dom.carousel.setAttribute("aria-live", "off"), this._setInterval(() => this.activateNextItem(), this.transitionDelay)) : (m(this.playClass, this.dom.autoplay), d(this.pauseClass, this.dom.autoplay), this.dom.autoplay.setAttribute("aria-label", this.playText), this.dom.carousel.setAttribute("aria-live", "polite"), this._clearInterval());
+	}
+	_handleIntersection() {
+		const t = {
+			root: this.dom.carouselItemContainer,
+			rootMargin: "1px",
+			scrollMargin: "1px",
+			threshold: 1
+		}, e = new IntersectionObserver((r) => {
+			this.isInitialized && r.forEach((s) => {
+				if (!s.isIntersecting) return;
+				const i = this.dom.carouselItems.indexOf(s.target);
+				let o = i;
+				this.elements.carouselItems[i].elements.clone !== null && (o = this.dom.carouselItems.indexOf(this.elements.carouselItems[i].elements.clone.dom.carouselItem), (i === 0 || i === this.dom.carouselItems.length - 1) && this.dom.carouselItemContainer.scrollTo({
+					left: this.elements.carouselItems[i].elements.clone.dom.carouselItem.offsetLeft,
+					top: this.elements.carouselItems[i].elements.clone.dom.carouselItem.offsetTop,
+					behavior: "instant"
+				})), this.currentItem !== o && this.activateItem(o, { scroll: !1 });
+			});
+		}, t);
+		this.dom.carouselItems.forEach((r) => {
+			e.observe(r);
+		});
 	}
 	_handleFocus() {
 		this._addEventListener("focusin", this.dom.carousel, () => {
@@ -695,15 +745,15 @@ var p = class v {
 		});
 	}
 	_handleClick() {
-		this._addEventListener("click", this.dom.next, () => {
-			this.activateNextItem();
-		}), this._addEventListener("click", this.dom.previous, () => {
-			this.activatePreviousItem();
-		}), this._addEventListener("click", this.dom.autoplay, () => {
-			this.toggleAutoplay();
-		}), this.dom.carouselTabs.forEach((t, e) => {
-			this._addEventListener("click", t, () => {
-				this.currentItem > e ? this._currentAction = "previous" : this._currentAction = "next", this.activateItem(e);
+		this._addEventListener("click", this.dom.next, (t) => {
+			t.button === 0 && (h(t), this.currentEvent = "mouse", this.activateNextItem());
+		}), this._addEventListener("click", this.dom.previous, (t) => {
+			t.button === 0 && (h(t), this.currentEvent = "mouse", this.activatePreviousItem());
+		}), this._addEventListener("click", this.dom.autoplay, (t) => {
+			t.button === 0 && (h(t), this.currentEvent = "mouse", this.toggleAutoplay());
+		}), this.elements.carouselItems.forEach((t) => {
+			t.dom.tab && this._addEventListener("click", t.dom.tab, (e) => {
+				e.button === 0 && (h(e), this.currentEvent = "mouse", this.activateItem(this.dom.carouselItems.indexOf(t.dom.carouselItem)));
 			});
 		});
 	}
@@ -717,19 +767,19 @@ var p = class v {
 	_handleKeydown() {
 		this.dom.carouselControls.forEach((t) => {
 			this._addEventListener("keydown", t, (e) => {
-				switch (d(e)) {
+				switch (u(e)) {
 					case "Space":
 					case "Enter":
-						_(e);
+						h(e);
 						break;
 				}
 			});
-		}), this.dom.carouselTabs.forEach((t) => {
-			this._addEventListener("keydown", t, (e) => {
-				switch (d(e)) {
+		}), this.elements.carouselItems.forEach((t) => {
+			t.dom.tab && this._addEventListener("keydown", t.dom.tab, (e) => {
+				switch (u(e)) {
 					case "Space":
 					case "Enter":
-						_(e);
+						h(e);
 						break;
 				}
 			});
@@ -737,69 +787,140 @@ var p = class v {
 	}
 	_handleKeyup() {
 		this._addEventListener("keyup", this.dom.next, (t) => {
-			switch (d(t)) {
+			switch (u(t)) {
 				case "Space":
 				case "Enter":
-					this.activateNextItem(), _(t);
+					this.activateNextItem(), h(t);
 					break;
 			}
 		}), this._addEventListener("keyup", this.dom.previous, (t) => {
-			switch (d(t)) {
+			switch (u(t)) {
 				case "Space":
 				case "Enter":
-					this.activatePreviousItem(), _(t);
+					this.activatePreviousItem(), h(t);
 					break;
 			}
 		}), this._addEventListener("keyup", this.dom.autoplay, (t) => {
-			switch (d(t)) {
+			switch (u(t)) {
 				case "Space":
 				case "Enter":
-					this.toggleAutoplay(), _(t);
+					this.toggleAutoplay(), h(t);
 					break;
 			}
-		}), this.dom.carouselTabs.forEach((t, e) => {
-			this._addEventListener("keyup", t, (r) => {
-				switch (d(r)) {
+		}), this.elements.carouselItems.forEach((t) => {
+			t.dom.tab && this._addEventListener("keyup", t.dom.tab, (e) => {
+				switch (u(e)) {
 					case "Space":
 					case "Enter":
-						this.activateItem(e), _(r);
+						this.activateItem(this.dom.carouselItems.indexOf(t.dom.carouselItem)), h(e);
 						break;
 				}
 			});
 		});
 	}
-	activateCurrentItem() {
-		h(this.activeClass, this.currentCarouselItem), this.currentCarouselItem.removeAttribute("inert"), this.currentCarouselTab && (this.currentCarouselTab.setAttribute("aria-selected", !0), h(this.activeClass, this.currentCarouselTab));
+	_handleLoop() {
+		const t = /* @__PURE__ */ new Map(), e = /* @__PURE__ */ new Map(), r = this.dom.carouselItemContainer;
+		for (let s = 0; s < this.itemsPerPage; s++) t.set(this.dom.carouselItems[s], this.dom.carouselItems.indexOf(this.dom.carouselItems[s]));
+		for (let s = this.dom.carouselItems.length - this.itemsPerPage; s < this.dom.carouselItems.length; s++) e.set(this.dom.carouselItems[s], this.dom.carouselItems.indexOf(this.dom.carouselItems[s]));
+		t.forEach((s, i) => {
+			const o = i.cloneNode(!0);
+			o.setAttribute("aria-hidden", "true"), o.setAttribute("inert", "true"), o.setAttribute("id", `${i.id}-clone`), r.appendChild(o);
+			const n = new p({
+				carouselItemElement: o,
+				clone: this._elements.carouselItems[s],
+				parent: this,
+				prefix: this.prefix,
+				initializeClass: this.classes.initialize,
+				initialize: !0
+			});
+			this.dom.carouselItems.push(o), this._elements.carouselItems.push(n);
+		}), e.forEach((s, i) => {
+			const o = i.cloneNode(!0);
+			o.setAttribute("aria-hidden", "true"), o.setAttribute("inert", "true"), o.setAttribute("id", `${i.id}-clone`), r.insertBefore(o, r.firstChild);
+			const n = new p({
+				carouselItemElement: o,
+				clone: this._elements.carouselItems[s],
+				parent: this,
+				prefix: this.prefix,
+				initializeClass: this.classes.initialize,
+				initialize: !0
+			});
+			this.dom.carouselItems.unshift(o), this._elements.carouselItems.unshift(n);
+		});
+	}
+	activateCurrentItem({ scroll: t = !0, scrollOptions: e = {} } = {}) {
+		this.currentCarouselItem.activate({
+			scroll: t,
+			scrollOptions: e
+		});
 	}
-	deactivateCurrentItem() {
-		l(this.activeClass, this.currentCarouselItem), this.currentCarouselItem.setAttribute("inert", !0), this.currentCarouselTab && (this.currentCarouselTab.setAttribute("aria-selected", !1), l(this.activeClass, this.currentCarouselTab));
+	deactivateCurrentItem({ scroll: t = !0, scrollOptions: e = {} } = {}) {
+		this.currentCarouselItem.deactivate({
+			scroll: t,
+			scrollOptions: e
+		});
 	}
-	activateItem(t) {
-		const e = this.currentItem;
-		this.dom.carousel.dataset.grauplAction = this._currentAction, this.autoplay && this._clearInterval(), h(this.previousClass, this.currentCarouselItem), h(this.nextClass, this.dom.carouselItems[t]), requestAnimationFrame(() => {
-			this.deactivateCurrentItem(), this.currentItem = t, this.activateCurrentItem(), requestAnimationFrame(() => {
-				setTimeout(() => {
-					l(this.previousClass, this.dom.carouselItems[e]), l(this.nextClass, this.currentCarouselItem);
-				}, this.transitionDuration);
-			});
+	activateItem(t, { scroll: e = !0, scrollOptions: r = {} } = {}) {
+		this.autoplay && this._clearInterval(), this.deactivateCurrentItem({
+			scroll: e,
+			scrollOptions: r
+		}), this.currentItem = t, this.activateCurrentItem({
+			scroll: e,
+			scrollOptions: r
 		}), this.autoplay && this._setInterval(() => this.activateNextItem(), this.transitionDelay);
 	}
-	activateFirstItem() {
-		this.activateItem(0);
+	activateFirstItem({ scroll: t = !0, scrollOptions: e = {} } = {}) {
+		this.loop ? this.currentItem === this.dom.carouselItems.length - this.itemsPerPage - 1 ? this.activateNextItem({
+			scroll: t,
+			scrollOptions: e
+		}) : this.activateItem(this.itemsPerPage, {
+			scroll: t,
+			scrollOptions: e
+		}) : this.activateItem(0, {
+			scroll: t,
+			scrollOptions: e
+		});
 	}
-	activateLastItem() {
-		this.activateItem(this.dom.carouselItems.length - 1);
+	activateLastItem({ scroll: t = !0, scrollOptions: e = {} } = {}) {
+		this.loop ? this.currentItem === this.itemsPerPage ? this.activatePreviousItem({
+			scroll: t,
+			scrollOptions: e
+		}) : this.activateItem(this.dom.carouselItems.length - this.itemsPerPage - 1, {
+			scroll: t,
+			scrollOptions: e
+		}) : this.activateItem(this.dom.carouselItems.length - 1, {
+			scroll: t,
+			scrollOptions: e
+		});
 	}
-	activateNextItem() {
-		this._currentAction = "next", this.currentItem + 1 >= this.dom.carouselItems.length ? this.activateFirstItem() : this.activateItem(this.currentItem + 1);
+	activateNextItem({ scroll: t = !0, scrollOptions: e = {} } = {}) {
+		this.loop ? this.activateItem(this.currentItem + 1, {
+			scroll: t,
+			scrollOptions: e
+		}) : this.currentItem + 1 >= this.dom.carouselItems.length ? this.activateFirstItem({
+			scroll: t,
+			scrollOptions: e
+		}) : this.activateItem(this.currentItem + 1, {
+			scroll: t,
+			scrollOptions: e
+		});
 	}
-	activatePreviousItem() {
-		this._currentAction = "previous", this.currentItem - 1 < 0 ? this.activateLastItem() : this.activateItem(this.currentItem - 1);
+	activatePreviousItem({ scroll: t = !0, scrollOptions: e = {} } = {}) {
+		this.loop ? this.activateItem(this.currentItem - 1, {
+			scroll: t,
+			scrollOptions: e
+		}) : this.currentItem - 1 < 0 || this.loop && this.currentItem - 1 < this.itemsPerPage ? this.activateLastItem({
+			scroll: t,
+			scrollOptions: e
+		}) : this.activateItem(this.currentItem - 1, {
+			scroll: t,
+			scrollOptions: e
+		});
 	}
 	toggleAutoplay() {
 		this.autoplay = !this.autoplay, this._handleAutoplay();
 	}
 };
-export { G as default };
+export { q as default };
 
 //# sourceMappingURL=carousel.es.js.map