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

package/dist/js/component/carousel.iife.js

@@ -1,11 +1,11 @@
 var Carousel = (function() {
-	function h(t, e) {
+	function c(t, e) {
 		t === "" || t.length === 0 || (typeof t == "string" ? e.classList.add(t) : e.classList.add(...t));
 	}
-	function l(t, e) {
+	function m(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,
@@ -26,10 +26,10 @@ var Carousel = (function() {
 			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: []
@@ -92,7 +92,7 @@ var Carousel = (function() {
 		if (e && !r.status) throw r.errors[0];
 		return r;
 	}
-	function c(t, { shouldThrow: e = !0 } = {}) {
+	function d(t, { shouldThrow: e = !0 } = {}) {
 		const r = {
 			status: !0,
 			errors: []
@@ -165,13 +165,13 @@ var Carousel = (function() {
 		if (e && !r.status) throw r.errors[0];
 		return r;
 	}
-	function g(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.`);
@@ -185,7 +185,7 @@ var Carousel = (function() {
 		if (r && !s.status) throw s.errors[0];
 		return s;
 	}
-	function b(t, e, { shouldThrow: r = !0 } = {}) {
+	function T(t, e, { shouldThrow: r = !0 } = {}) {
 		const s = {
 			status: !0,
 			errors: []
@@ -198,7 +198,7 @@ var Carousel = (function() {
 		if (r && !s.status) throw s.errors[0];
 		return s;
 	}
-	function I(t, { shouldThrow: e = !0 } = {}) {
+	function $(t, { shouldThrow: e = !0 } = {}) {
 		const r = {
 			status: !0,
 			errors: []
@@ -211,7 +211,7 @@ var Carousel = (function() {
 		if (e && !r.status) throw r.errors[0];
 		return r;
 	}
-	var f = class v {
+	var f = class b {
 		_scope;
 		_type = "_default";
 		_storage = {};
@@ -221,7 +221,7 @@ var Carousel = (function() {
 		}
 		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;
 			}
@@ -271,7 +271,7 @@ var Carousel = (function() {
 		dispose() {
 			delete this._storage, delete this;
 		}
-	}, T = class {
+	}, g = class {
 		_dom = {};
 		_rootDOMElement = "";
 		_protectedDOMElements = [];
@@ -316,7 +316,7 @@ var Carousel = (function() {
 				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);
+				c(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(), m(this.initializeClass, this.rootDOMElement), this._initialized = !0, this._dispatchEvent("postinitialize", this.rootDOMElement);
 			} catch (t) {
 				console.error(t);
 			}
@@ -361,7 +361,7 @@ var Carousel = (function() {
 			return this._classes.initialize;
 		}
 		set initializeClass(t) {
-			c({ initializeClass: t }), this._classes.initialize !== t && (this._classes.initialize = t);
+			d({ initializeClass: t }), this._classes.initialize !== t && (this._classes.initialize = t);
 		}
 		get focusState() {
 			return this._focusState;
@@ -414,13 +414,13 @@ var Carousel = (function() {
 		}
 		_validate() {
 			this._dispatchEvent("prevalidate", this.rootDOMElement);
-			const t = I(this, { shouldThrow: !1 });
+			const t = $(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, p) => {
-					s[`${o}Element[${p}]`] = n;
+				for (const o of Object.keys(this._dom)) Array.isArray(this._dom[o]) ? this._dom[o].forEach((n, _) => {
+					s[`${o}Element[${_}]`] = 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) {
@@ -432,7 +432,7 @@ var Carousel = (function() {
 			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 = d(s, { shouldThrow: !1 });
 				i.status || (this._errors = [...this._errors, ...i.errors], this._valid = !1);
 			}
 			if (Object.keys(this._durations).length > 0) {
@@ -469,7 +469,7 @@ var Carousel = (function() {
 		_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;
 		}
@@ -489,14 +489,14 @@ var Carousel = (function() {
 		_handleKeydown() {}
 		_handleKeyup() {}
 		_store() {
-			this._shouldStore && (u(f, { storage: window.GrauplStorage }, { shouldThrow: !1 }).status || new f({ 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(f, { 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
 			});
@@ -531,7 +531,7 @@ var Carousel = (function() {
 			});
 		}
 		_dispatchEvent(t, e) {
-			b(t, this), u(HTMLElement, { element: e }), e.dispatchEvent(this.events[t]);
+			T(t, this), l(HTMLElement, { element: e }), e.dispatchEvent(this.events[t]);
 		}
 		_addEventListener(t, e, r, s = {}) {
 			e.addEventListener(t, r, s), this._listeners.push({
@@ -562,77 +562,96 @@ var Carousel = (function() {
 		dispose() {
 			this._clearIntervals(), this._clearTimeouts(), this._removeEventListeners(), this._unstore(), delete this;
 		}
-	}, k = class extends T {
+	}, p = class extends g {
+		_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: _ = !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, _ && this.initialize();
+		}
+		activate({ scroll: t = !0, scrollOptions: e = {} } = {}) {
+			requestAnimationFrame(() => {
+				c(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(() => {
+					c(this.elements.parent.activeClass, this.dom.tab), this.dom.tab.setAttribute("aria-selected", !0);
+				});
+			});
+		}
+		deactivate() {
+			requestAnimationFrame(() => {
+				m(this.elements.parent.activeClass, this.dom.carouselItem), this.dom.carouselItem.setAttribute("inert", !0), requestAnimationFrame(() => {
+					this.dom.tab && (m(this.elements.parent.activeClass, this.dom.tab), this.dom.tab.setAttribute("aria-selected", !1));
+				});
+			});
+		}
+	}, x = class extends g {
 		_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: p = ".autoplay", nextSelector: $ = ".next", previousSelector: A = ".previous", activeClass: O = "active", previousClass: D = "previous", nextClass: M = "next", playClass: x = "play", pauseClass: S = "pause", autoplay: L = !0, transitionDelay: j = 1e4, transitionDuration: z = 500, playText: Q = "Play", pauseText: V = "Pause", prefix: P = "graupl-", key: K = null, initializeClass: F = "initializing", initialize: G = !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: _ = ".autoplay", nextSelector: M = ".next", previousSelector: A = ".previous", activeClass: O = "active", playClass: D = "play", pauseClass: S = "pause", autoplay: L = !0, transitionDelay: z = 1e4, playText: P = "Play", pauseText: j = "Pause", itemsPerPage: Q = 1, loop: V = !0, prefix: K = "graupl-", key: F = null, initializeClass: N = "initializing", initialize: q = !1 }) {
 			super({
-				prefix: P,
-				key: K,
-				initializeClass: F
-			}), 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 = p, this._selectors.next = $, this._selectors.previous = A, this._classes.active = O || "", this._classes.previous = D || "", this._classes.next = M || "", this._classes.play = x || "", this._classes.pause = S || "", this._autoplay = L, this._delays.transition = j, this._durations.transition = z, this._playText = Q || "", this._pauseText = V || "", this._addEventListener("grauplComponentInitialize", this.rootDOMElement, () => {
-				this._handleAutoplay(), this.dom.carouselItems.forEach((m) => {
-					m.setAttribute("inert", "true");
-				}), this.activateFirstItem();
+				prefix: K,
+				key: F,
+				initializeClass: N
+			}), 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 = _, this._selectors.next = M, this._selectors.previous = A, this._elements.carouselItems = [], this._classes.active = O || "", this._classes.play = D || "", this._classes.pause = S || "", this._autoplay = L, this._itemsPerPage = Q, this._loop = V, this._delays.transition = z, this._playText = P || "", this._pauseText = j || "", 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 E = a("string", {
+				const E = a("boolean", {
+					autoplay: this._autoplay,
+					loop: this._loop
+				}, { shouldThrow: !1 });
+				E.status || (this._errors = [...this._errors, ...E.errors], this._valid = !1);
+				const v = a("string", {
 					playText: this._playText,
 					pauseText: this._pauseText
 				}, { shouldThrow: !1 });
-				E.status || (this._errors = [...this._errors, ...E.errors], this._valid = !1);
-			}), G && this.initialize();
+				v.status || (this._errors = [...this._errors, ...v.errors], this._valid = !1);
+				const I = a("number", { itemsPerPage: this._itemsPerPage }, { shouldThrow: !1 });
+				I.status || (this._errors = [...this._errors, ...I.errors], this._valid = !1);
+			}), q && 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);
+			d({ 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);
+			d({ 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);
+			d({ 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;
@@ -640,18 +659,18 @@ var Carousel = (function() {
 		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;
 		}
@@ -664,12 +683,22 @@ var Carousel = (function() {
 		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}`;
@@ -678,15 +707,36 @@ var Carousel = (function() {
 			}), this._id = this.dom.carousel.id;
 		}
 		_setAriaAttributes() {
-			!g("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) => {
-				g("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 ? (c(this.pauseClass, this.dom.autoplay), m(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)) : (c(this.playClass, this.dom.autoplay), m(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, () => {
@@ -696,15 +746,15 @@ var Carousel = (function() {
 			});
 		}
 		_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)));
 				});
 			});
 		}
@@ -718,19 +768,19 @@ var Carousel = (function() {
 		_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;
 					}
 				});
@@ -738,70 +788,141 @@ var Carousel = (function() {
 		}
 		_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();
 		}
 	};
-	return k;
+	return x;
 })();
 
 //# sourceMappingURL=carousel.iife.js.map