@codeandfunction/callaloo 3.21.0 → 3.22.0

package/dist/components/Containers/CLCarousel/CLCarousel.js

@@ -1,12 +1,12 @@
 import '../../../assets/core.css';
 import './CLCarousel.css';
-import { defineComponent as re, computed as u, createElementBlock as c, openBlock as s, Fragment as F, createCommentVNode as C, unref as e, normalizeClass as l, renderList as me, createBlock as he, createElementVNode as y, createVNode as x, withCtx as X, createTextVNode as Y, toDisplayString as q, useCssVars as be, ref as r, onMounted as we, onUnmounted as pe, watch as Ce, renderSlot as Z, nextTick as se } from "vue";
-import { _ as E } from "../../../chunks/CLButton.vue_vue_type_style_index_0_lang-B3AdartN.js";
-import { _ as ce } from "../../../chunks/CLText.vue_vue_type_style_index_0_lang-DVwTAVXM.js";
-import { CLPaginationType as $, CLColorVariants as B, CLSizes as W, CLIconSizes as D, CLIconNames as O, CLTextTypes as xe, CLAlign as A, CLOrder as R, CLColors as ye } from "../../../index.js";
-import { i as H, d as Pe, e as $e } from "../../../chunks/helper-BYpahJAh.js";
-import { useHasSlotContent as Te } from "../../../composables/useHasSlotContent.js";
-const Q = /* @__PURE__ */ re({
+import { defineComponent as xe, computed as b, createElementBlock as m, openBlock as g, Fragment as te, createCommentVNode as L, unref as e, normalizeClass as r, renderList as ke, createBlock as ze, createElementVNode as z, createVNode as k, withCtx as de, createTextVNode as ue, toDisplayString as ee, useCssVars as Ie, ref as v, onMounted as Ee, nextTick as Q, onUnmounted as We, watch as Be, renderSlot as ve } from "vue";
+import { _ as D } from "../../../chunks/CLButton.vue_vue_type_style_index_0_lang-kYdsi6-T.js";
+import { _ as Se } from "../../../chunks/CLText.vue_vue_type_style_index_0_lang-DVwTAVXM.js";
+import { CLPaginationType as I, CLColorVariants as H, CLSizes as U, CLIconSizes as X, CLIconNames as Y, CLTextTypes as Ne, CLAlign as G, CLOrder as Z, CLColors as Me } from "../../../index.js";
+import { i as _, d as Ae, e as Ve } from "../../../chunks/helper-BYpahJAh.js";
+import { useHasSlotContent as Oe } from "../../../composables/useHasSlotContent.js";
+const ce = /* @__PURE__ */ xe({
   name: "CLCarouselNavigation",
   __name: "CLCarouselNavigation",
   props: {
@@ -26,412 +26,486 @@ const Q = /* @__PURE__ */ re({
     totalPages: {},
     variant: {}
   },
-  setup(a) {
-    const o = a, i = u(() => [
-      `${o.prefix}__dots-container`
-    ]), I = u(() => [
-      `${o.prefix}__numbered-container`
-    ]), T = u(() => [
-      `${o.prefix}__inline-container`
-    ]), f = u(() => [
-      `${o.prefix}__prev-page`
-    ]), g = u(() => [
-      `${o.prefix}__next-page`
-    ]), N = u(() => [
-      `${o.prefix}__page-indicator`
-    ]), k = u(() => [
-      `${o.prefix}__show-more`
-    ]), L = (m) => o.currentPage === m, v = u(() => !o.enabled || !o.prevPageEnabled), w = u(() => !o.enabled || !o.nextPageEnabled);
-    return (m, h) => (s(), c(F, null, [
-      a.paginationType === e($).Dots ? (s(), c("div", {
+  setup(t) {
+    const l = t, n = b(() => [
+      `${l.prefix}__dots-container`
+    ]), A = b(() => [
+      `${l.prefix}__numbered-container`
+    ]), E = b(() => [
+      `${l.prefix}__inline-container`
+    ]), h = b(() => [
+      `${l.prefix}__prev-page`
+    ]), c = b(() => [
+      `${l.prefix}__next-page`
+    ]), W = b(() => [
+      `${l.prefix}__page-indicator`
+    ]), R = b(() => [
+      `${l.prefix}__show-more`
+    ]), S = (P) => l.currentPage === P, p = b(() => !l.enabled || !l.prevPageEnabled), w = b(() => !l.enabled || !l.nextPageEnabled);
+    return (P, B) => (g(), m(te, null, [
+      t.paginationType === e(I).Dots ? (g(), m("div", {
         key: 0,
-        class: l(e(i))
+        class: r(e(n))
       }, [
-        (s(!0), c(F, null, me(a.totalPages, (b) => (s(), he(e(E), {
-          key: `dot-${b}`,
-          "aria-label": `Show page ${b}`,
-          color: a.color,
-          disabled: L(b),
+        (g(!0), m(te, null, ke(t.totalPages, (C) => (g(), ze(e(D), {
+          key: `dot-${C}`,
+          "aria-label": `Show page ${C}`,
+          color: t.color,
+          disabled: S(C),
           height: "0.75rem",
-          "on-click": () => a.gotoPage(b),
+          "on-click": () => t.gotoPage(C),
           width: "0.75rem",
-          variant: L(b) ? e(B).Outline : a.variant,
+          variant: S(C) ? e(H).Outline : t.variant,
           wrap: ""
         }, null, 8, ["aria-label", "color", "disabled", "on-click", "variant"]))), 128))
-      ], 2)) : C("", !0),
-      a.paginationType === e($).Numbered ? (s(), c("div", {
+      ], 2)) : L("", !0),
+      t.paginationType === e(I).Numbered ? (g(), m("div", {
         key: 1,
-        class: l(e(I))
+        class: r(e(A))
       }, [
-        y("div", {
-          class: l(e(f))
+        z("div", {
+          class: r(e(h))
         }, [
-          x(e(E), {
+          k(e(D), {
             "aria-label": "Show previous page of slides",
-            color: a.color,
-            disabled: e(v),
-            "icon-before": e(O).ChevronLeft,
-            "icon-size": e(D).Tiny,
-            size: e(W).Tiny,
-            "on-click": a.showPrevItems,
-            variant: e(v) ? e(B).Text : a.variant
+            color: t.color,
+            disabled: e(p),
+            "icon-before": e(Y).ChevronLeft,
+            "icon-size": e(X).Tiny,
+            size: e(U).Tiny,
+            "on-click": t.showPrevItems,
+            variant: e(p) ? e(H).Text : t.variant
           }, null, 8, ["color", "disabled", "icon-before", "icon-size", "size", "on-click", "variant"])
         ], 2),
-        y("div", {
-          class: l(e(N))
+        z("div", {
+          class: r(e(W))
         }, [
-          x(e(ce), {
-            type: e(xe).Small
+          k(e(Se), {
+            type: e(Ne).Small
           }, {
-            default: X(() => [
-              Y(q(a.currentPage) + " / " + q(a.totalPages), 1)
+            default: de(() => [
+              ue(ee(t.currentPage) + " / " + ee(t.totalPages), 1)
             ]),
             _: 1
           }, 8, ["type"])
         ], 2),
-        y("div", {
-          class: l(e(g))
+        z("div", {
+          class: r(e(c))
         }, [
-          x(e(E), {
+          k(e(D), {
             "aria-label": "Show next page of slides",
-            color: a.color,
+            color: t.color,
             disabled: e(w),
-            "icon-before": e(O).ChevronRight,
-            "icon-size": e(D).Tiny,
-            size: e(W).Tiny,
-            "on-click": a.showNextItems,
-            variant: e(w) ? e(B).Text : a.variant
+            "icon-before": e(Y).ChevronRight,
+            "icon-size": e(X).Tiny,
+            size: e(U).Tiny,
+            "on-click": t.showNextItems,
+            variant: e(w) ? e(H).Text : t.variant
           }, null, 8, ["color", "disabled", "icon-before", "icon-size", "size", "on-click", "variant"])
         ], 2),
-        a.showMore ? (s(), c("div", {
+        t.showMore ? (g(), m("div", {
           key: 0,
-          class: l(e(k))
+          class: r(e(R))
         }, [
-          x(e(E), {
-            "aria-label": a.moreAriaLabel,
-            color: a.color,
-            size: e(W).Small,
-            "on-click": a.showMore,
-            variant: a.variant
+          k(e(D), {
+            "aria-label": t.moreAriaLabel,
+            color: t.color,
+            size: e(U).Small,
+            "on-click": t.showMore,
+            variant: t.variant
           }, {
-            default: X(() => [
-              Y(q(a.moreLabel), 1)
+            default: de(() => [
+              ue(ee(t.moreLabel), 1)
             ]),
             _: 1
           }, 8, ["aria-label", "color", "size", "on-click", "variant"])
-        ], 2)) : C("", !0)
-      ], 2)) : C("", !0),
-      a.paginationType === e($).Inline ? (s(), c("div", {
+        ], 2)) : L("", !0)
+      ], 2)) : L("", !0),
+      t.paginationType === e(I).Inline ? (g(), m("div", {
         key: 2,
-        class: l(e(T))
+        class: r(e(E))
       }, [
-        y("div", {
-          class: l(e(f))
+        z("div", {
+          class: r(e(h))
         }, [
-          x(e(E), {
+          k(e(D), {
             "aria-label": "Show previous page of slides",
-            "align-content": e(A).Center,
-            color: a.color,
-            disabled: e(v),
-            "icon-before": e(O).ChevronLeft,
-            "icon-size": e(D).Small,
-            size: e(W).Tiny,
-            "on-click": a.showPrevItems,
-            variant: e(v) ? e(B).Text : a.variant,
+            "align-content": e(G).Center,
+            color: t.color,
+            disabled: e(p),
+            "icon-before": e(Y).ChevronLeft,
+            "icon-size": e(X).Small,
+            size: e(U).Tiny,
+            "on-click": t.showPrevItems,
+            variant: e(p) ? e(H).Text : t.variant,
             width: "30px",
             height: "30px",
             wrap: ""
           }, null, 8, ["align-content", "color", "disabled", "icon-before", "icon-size", "size", "on-click", "variant"])
         ], 2),
-        y("div", {
-          class: l(e(g))
+        z("div", {
+          class: r(e(c))
         }, [
-          x(e(E), {
+          k(e(D), {
             "aria-label": "Show next page of slides",
-            "align-content": e(A).Center,
-            color: a.color,
+            "align-content": e(G).Center,
+            color: t.color,
             disabled: e(w),
-            "icon-before": e(O).ChevronRight,
-            "icon-size": e(D).Small,
-            size: e(W).Tiny,
-            "on-click": a.showNextItems,
-            variant: e(w) ? e(B).Text : a.variant,
+            "icon-before": e(Y).ChevronRight,
+            "icon-size": e(X).Small,
+            size: e(U).Tiny,
+            "on-click": t.showNextItems,
+            variant: e(w) ? e(H).Text : t.variant,
             width: "30px",
             height: "30px",
             wrap: ""
           }, null, 8, ["align-content", "color", "disabled", "icon-before", "icon-size", "size", "on-click", "variant"])
         ], 2)
-      ], 2)) : C("", !0)
+      ], 2)) : L("", !0)
     ], 64));
   }
-}), ke = ["data-testid"], Le = ["hidden"], Se = /* @__PURE__ */ re({
+}), De = ["data-testid"], He = ["hidden"], Re = /* @__PURE__ */ xe({
   name: "CLCarousel",
   __name: "CLCarousel",
   props: {
-    color: { default: ye.Neutral },
-    controlAlign: { default: A.Right },
-    controlPosition: { default: R.Before },
+    color: { default: Me.Neutral },
+    controlAlign: { default: G.Right },
+    controlPosition: { default: Z.Before },
     enabled: { type: Boolean, default: !0 },
+    infinite: { type: Boolean, default: !1 },
     moreLabel: { default: "More" },
     onShowMore: {},
-    paginationType: { default: $.Numbered },
+    paginationType: { default: I.Numbered },
     perPage: { default: 3 },
     perPageByBreakpoints: {},
     testId: { default: "clll-carousel" },
     title: {},
-    variant: { default: B.Soft },
+    variant: { default: H.Soft },
     width: { default: "100%" }
   },
-  setup(a) {
-    be((t) => ({
-      v512ef87c: t.width,
-      v34e944c2: e(U)
+  setup(t) {
+    Ie((o) => ({
+      v59ef4984: o.width,
+      v294b641d: e(oe)
     }));
-    const o = "clll-carousel", i = a, I = r(), T = r(!1), f = r(1), g = r(i.perPage), N = Te("title"), k = r(!1), L = r(!1), v = r(!1), w = r(), m = r(!1), h = r(), b = r(), U = r("100%"), P = r(0), S = r(0), _ = () => {
-      if (i.perPageByBreakpoints?.length) {
-        g.value = i.perPage;
-        for (const [t, n] of i.perPageByBreakpoints)
-          window.matchMedia(`(min-width: ${t}px)`).matches && (g.value = n);
+    const l = "clll-carousel", n = t, A = v(), E = v(!1), h = v(1), c = v(n.perPage), W = v(0), R = Oe("title"), S = v(!1), p = v(!1), w = v(!1), P = v(0), B = v(!1), C = v(), N = v(!1), T = v(), j = v(), oe = v("100%"), y = v(0), M = v(0), fe = () => {
+      if (n.perPageByBreakpoints?.length) {
+        c.value = n.perPage;
+        for (const [o, a] of n.perPageByBreakpoints)
+          window.matchMedia(`(min-width: ${o}px)`).matches && (c.value = a);
       }
-    }, ee = () => {
-      if (h?.value && S.value) {
-        const n = Math.ceil(S.value / g.value);
-        P.value = n, n > 1 && (k.value = !0);
+    }, ge = () => {
+      if (T?.value && M.value) {
+        const a = Math.ceil(M.value / c.value);
+        y.value = a, n.infinite ? (p.value = !0, w.value = !0) : a > 1 && (p.value = !0);
       }
-    }, de = () => {
-      se(() => {
-        let t, n;
-        const d = h?.value;
-        if (d) {
-          const p = d?.querySelectorAll(
-            `div[class="${o}__slides"] > *`
-          ) ?? [], z = S.value - 1;
-          for (let M = 0; M < P.value; M++) {
-            const V = g.value * (M + 1) - 1, ge = V < z ? p[V] : p[z], ie = V < z ? V : z;
-            $e({ parent: d, child: ge, leftOffset: 40, rightOffset: 40, threshold: 0.5 }) && (ie === z ? (n = z, t = M + 1) : (n = ie, t = M + 1));
+    }, Pe = () => {
+      S.value || Q(() => {
+        let o, a;
+        const i = T?.value;
+        if (i) {
+          const s = i?.querySelectorAll(
+            `div[class="${l}__slides"] > *`
+          ) ?? [];
+          if (n.infinite && n.enabled && P.value > 0) {
+            const u = i.offsetWidth, f = u / c.value, d = i.scrollLeft, x = W.value / 2, $ = f * x, V = f * P.value;
+            let q = d - $;
+            q < 0 && (q = V + q);
+            const F = Math.floor(q / u) + 1;
+            if (F < 1 ? h.value = y.value : F > y.value ? h.value = 1 : h.value = F, !S.value) {
+              if (d < $) {
+                S.value = !0;
+                const J = d + V;
+                i.scrollTo({ left: J, behavior: "auto" }), setTimeout(() => {
+                  S.value = !1;
+                }, 50);
+              } else if (d >= $ + V) {
+                S.value = !0;
+                const J = d - V;
+                i.scrollTo({ left: J, behavior: "auto" }), setTimeout(() => {
+                  S.value = !1;
+                }, 50);
+              }
+            }
+          } else {
+            const u = M.value - 1;
+            for (let f = 0; f < y.value; f++) {
+              const d = c.value * (f + 1) - 1, x = d < u ? s[d] : s[u], $ = d < u ? d : u;
+              Ve({ parent: i, child: x, leftOffset: 40, rightOffset: 40, threshold: 0.5 }) && ($ === u ? (a = u, o = f + 1) : (a = $, o = f + 1));
+            }
+            a !== void 0 && a > -1 && o && (h.value = o, o > 1 && (w.value = !0), o === 1 && (w.value = !1), o < y.value && (p.value = !0), o === y.value && (p.value = !1));
           }
-          n !== void 0 && n > -1 && t && (f.value = t, t > 1 && (L.value = !0), t === 1 && (L.value = !1), t < P.value && (k.value = !0), t === P.value && (k.value = !1));
         }
       });
-    }, ae = (t) => {
-      I.value && se(() => {
-        const n = Pe(I.value) && !N.value;
-        !n && (t.title || t.controlPosition === R.Before) ? T.value = !1 : T.value = n;
+    }, he = (o) => {
+      A.value && Q(() => {
+        const a = Ae(A.value) && !R.value;
+        !a && (o.title || o.controlPosition === Z.Before) ? E.value = !1 : E.value = a;
       });
-    }, j = (t) => {
-      const n = h?.value, d = n.offsetWidth;
-      if (n && d) {
-        const p = t - 1, z = d * p;
-        n.scrollTo({ left: z, behavior: "smooth" });
-      }
-    }, te = () => {
-      v.value = !0, f.value = 1, _(), ne(), ee();
-      const t = h?.value, n = t.offsetWidth;
-      if (t) {
-        const d = f.value - 1, p = n * d;
-        t.scrollLeft = p;
-      }
-      H && v.value && (window.clearTimeout(w.value), w.value = window.setTimeout(() => {
-        v.value && (v.value = !1), window.clearTimeout(w.value);
+    }, le = (o) => {
+      const a = T?.value, i = a.offsetWidth;
+      if (a && i)
+        if (n.infinite && n.enabled && P.value > 0) {
+          const s = i / c.value, u = W.value / 2, f = s * u, d = o - 1, x = f + i * d;
+          a.scrollTo({ left: x, behavior: "smooth" });
+        } else {
+          const s = o - 1, u = i * s;
+          a.scrollTo({ left: u, behavior: "smooth" });
+        }
+    }, me = () => {
+      B.value = !0;
+      const o = c.value;
+      fe(), pe(), ge();
+      const a = T?.value, i = a.offsetWidth;
+      if (a)
+        if (n.infinite && n.enabled && P.value > 0) {
+          const s = i / c.value, u = i / o, f = W.value / 2, d = u * f, $ = a.scrollLeft - d;
+          if (o !== c.value) {
+            const J = a.querySelectorAll(
+              `div[class="${l}__slides"] > *`
+            ), Ce = Array.from(J), O = Ce.slice(f, Ce.length - f);
+            a.innerHTML = "", O.forEach((ye) => a.appendChild(ye));
+            const K = Math.min(c.value, O.length);
+            K > 0 && O.length > 0 && (O.slice(-K).forEach((se) => {
+              const re = se.cloneNode(!0);
+              a.insertBefore(re, O[0]);
+            }), O.slice(0, K).forEach((se) => {
+              const re = se.cloneNode(!0);
+              a.appendChild(re);
+            }), W.value = K * 2);
+          }
+          const V = W.value / 2, F = s * V + $;
+          Q(() => {
+            a.scrollLeft = F;
+          });
+        } else {
+          h.value = 1;
+          const s = h.value - 1, u = i * s;
+          a.scrollLeft = u;
+        }
+      _ && B.value && (window.clearTimeout(C.value), C.value = window.setTimeout(() => {
+        B.value && (B.value = !1), window.clearTimeout(C.value);
       }, 300));
-    }, oe = () => {
-      v.value || (m.value = !0, H && m.value && (window.clearTimeout(b.value), b.value = window.setTimeout(() => {
-        m.value && G(), window.clearTimeout(b.value);
+    }, be = () => {
+      B.value || (N.value = !0, _ && N.value && (window.clearTimeout(j.value), j.value = window.setTimeout(() => {
+        N.value && ae(), window.clearTimeout(j.value);
       }, 200)));
-    }, G = () => {
-      v.value || (m.value = !1, de());
-    }, ne = () => {
-      const t = h?.value;
-      if (t) {
-        const n = t.offsetWidth;
-        S.value >= g.value ? U.value = `${n / g.value}px` : U.value = `${n / S.value}px`;
-      }
-    }, J = () => {
-      const t = h?.value, n = t.offsetWidth;
-      if (t && n) {
-        const d = f.value, p = n * d;
-        t.scrollTo({ left: p, behavior: "smooth" });
-      }
-    }, K = () => {
-      const t = h?.value, n = t.offsetWidth;
-      if (t && n) {
-        const d = f.value - 1, p = n * (d - 1);
-        t.scrollTo({ left: p, behavior: "smooth" });
+    }, ae = () => {
+      B.value || (N.value = !1, Pe());
+    }, pe = () => {
+      const o = T?.value;
+      if (o) {
+        const a = o.offsetWidth;
+        M.value >= c.value ? oe.value = `${a / c.value}px` : oe.value = `${a / M.value}px`;
       }
+    }, ne = () => {
+      const o = T?.value, a = o.offsetWidth;
+      if (o && a)
+        if (n.infinite && n.enabled && P.value > 0) {
+          const s = o.scrollLeft + a;
+          o.scrollTo({ left: s, behavior: "smooth" });
+        } else {
+          const i = h.value, s = a * i;
+          o.scrollTo({ left: s, behavior: "smooth" });
+        }
+    }, ie = () => {
+      const o = T?.value, a = o.offsetWidth;
+      if (o && a)
+        if (n.infinite && n.enabled && P.value > 0) {
+          const s = o.scrollLeft - a;
+          o.scrollTo({ left: s, behavior: "smooth" });
+        } else {
+          const i = h.value - 1, s = a * (i - 1);
+          o.scrollTo({ left: s, behavior: "smooth" });
+        }
     };
-    we(() => {
-      if (H) {
-        window.addEventListener("resize", te);
-        const t = h?.value;
-        if (t) {
-          const n = t?.querySelectorAll(
-            `div[class="${o}__slides"] > *`
+    Ee(() => {
+      if (_) {
+        window.addEventListener("resize", me);
+        const o = T?.value;
+        if (o) {
+          const a = o?.querySelectorAll(
+            `div[class="${l}__slides"] > *`
           ) ?? [];
-          S.value = n.length, t.addEventListener("scroll", oe), t.addEventListener("scrollend", G);
+          if (P.value = a.length, M.value = a.length, n.infinite && n.enabled && a.length > 0) {
+            const i = Array.from(a), s = Math.min(c.value, i.length);
+            i.slice(-s).forEach((d) => {
+              const x = d.cloneNode(!0);
+              o.insertBefore(x, i[0]);
+            }), i.slice(0, s).forEach((d) => {
+              const x = d.cloneNode(!0);
+              o.appendChild(x);
+            }), W.value = s * 2, Q(() => {
+              const $ = o.offsetWidth / c.value * s;
+              o.scrollLeft = $;
+            });
+          }
+          o.addEventListener("scroll", be), o.addEventListener("scrollend", ae);
         }
-        ae(i), _(), ne(), ee();
+        he(n), fe(), pe(), ge();
       }
-    }), pe(() => {
-      if (H) {
-        window.removeEventListener("resize", te), w.value && window.clearTimeout(w.value), b.value && window.clearTimeout(b.value);
-        const t = h?.value;
-        t && (t.removeEventListener("scroll", oe), t.removeEventListener("scrollend", G));
+    }), We(() => {
+      if (_) {
+        window.removeEventListener("resize", me), C.value && window.clearTimeout(C.value), j.value && window.clearTimeout(j.value);
+        const o = T?.value;
+        o && (o.removeEventListener("scroll", be), o.removeEventListener("scrollend", ae));
       }
     });
-    const ue = u(() => [
-      o,
-      `${o}--${i.controlAlign}`,
-      `${o}--${i.controlPosition}`,
-      `${o}--${i.paginationType}`,
-      i.enabled ? `${o}--enabled` : `${o}--disabled`,
-      T.value ? "" : `${o}--hastitle`,
-      i.onShowMore ? `${o}--has-more` : ""
-    ]), ve = u(() => [
-      `${o}__slide-controls`,
-      N.value ? `${o}__slide-controls--hascustomtitle` : ""
-    ]), fe = u(() => [
-      `${o}__slides`,
-      v.value ? `${o}__slides--resizing` : "",
-      m.value ? `${o}__slides--scrolling` : ""
-    ]), le = u(() => [
-      `${o}__navigation`,
-      `${o}__navigation--${i.controlAlign}`,
-      `${o}__navigation--${i.controlPosition}`
+    const Te = b(() => [
+      l,
+      `${l}--${n.controlAlign}`,
+      `${l}--${n.controlPosition}`,
+      `${l}--${n.paginationType}`,
+      n.enabled ? `${l}--enabled` : `${l}--disabled`,
+      E.value ? "" : `${l}--hastitle`,
+      n.onShowMore ? `${l}--has-more` : ""
+    ]), $e = b(() => [
+      `${l}__slide-controls`,
+      R.value ? `${l}__slide-controls--hascustomtitle` : ""
+    ]), Le = b(() => [
+      `${l}__slides`,
+      B.value ? `${l}__slides--resizing` : "",
+      N.value ? `${l}__slides--scrolling` : "",
+      S.value ? `${l}__slides--jumping` : ""
+    ]), we = b(() => [
+      `${l}__navigation`,
+      `${l}__navigation--${n.controlAlign}`,
+      `${l}__navigation--${n.controlPosition}`
     ]);
-    return Ce(i, (t) => {
-      ae(t);
-    }), (t, n) => (s(), c("div", {
-      class: l(e(ue)),
-      "data-testid": a.testId
+    return Be(n, (o) => {
+      he(o);
+    }), (o, a) => (g(), m("div", {
+      class: r(e(Te)),
+      "data-testid": t.testId
     }, [
-      y("div", {
+      z("div", {
         ref_key: "beforeControls",
-        ref: I,
-        class: l(e(ve)),
-        hidden: e(T)
+        ref: A,
+        class: r(e($e)),
+        hidden: e(E)
       }, [
-        y("div", {
-          class: l(`${o}__custom-title`)
+        z("div", {
+          class: r(`${l}__custom-title`)
         }, [
-          Z(t.$slots, "title")
+          ve(o.$slots, "title")
         ], 2),
-        a.title ? (s(), c("div", {
+        t.title ? (g(), m("div", {
           key: 0,
-          class: l(`${o}__title`)
+          class: r(`${l}__title`)
         }, [
-          x(e(ce), {
-            align: e(N) ? e(A).Center : e(A).Left,
+          k(e(Se), {
+            align: e(R) ? e(G).Center : e(G).Left,
             label: "",
             truncate: ""
           }, {
-            default: X(() => [
-              Y(q(a.title), 1)
+            default: de(() => [
+              ue(ee(t.title), 1)
             ]),
             _: 1
           }, 8, ["align"])
-        ], 2)) : C("", !0),
-        a.controlPosition === e(R).Before && ![e($).Inline, e($).Hidden].includes(a.paginationType) ? (s(), c(F, { key: 1 }, [
-          e(P) && e(S) > e(g) ? (s(), c("div", {
+        ], 2)) : L("", !0),
+        t.controlPosition === e(Z).Before && ![e(I).Inline, e(I).Hidden].includes(t.paginationType) ? (g(), m(te, { key: 1 }, [
+          e(y) && e(M) > e(c) ? (g(), m("div", {
             key: 0,
-            class: l(e(le))
+            class: r(e(we))
           }, [
-            x(Q, {
-              color: a.color,
-              "current-page": e(f),
-              enabled: !e(m),
-              "goto-page": j,
-              "more-label": a.moreLabel,
-              "next-page-enabled": e(k),
-              "pagination-type": a.paginationType,
-              "prev-page-enabled": e(L),
-              prefix: o,
-              "show-more": a.onShowMore,
-              "show-next-items": J,
-              "show-prev-items": K,
-              "total-pages": e(P),
-              variant: a.variant
+            k(ce, {
+              color: t.color,
+              "current-page": e(h),
+              enabled: !e(N),
+              "goto-page": le,
+              "more-label": t.moreLabel,
+              "next-page-enabled": e(p),
+              "pagination-type": t.paginationType,
+              "prev-page-enabled": e(w),
+              prefix: l,
+              "show-more": t.onShowMore,
+              "show-next-items": ne,
+              "show-prev-items": ie,
+              "total-pages": e(y),
+              variant: t.variant
             }, null, 8, ["color", "current-page", "enabled", "more-label", "next-page-enabled", "pagination-type", "prev-page-enabled", "show-more", "total-pages", "variant"])
-          ], 2)) : C("", !0)
-        ], 64)) : C("", !0)
-      ], 10, Le),
-      y("div", {
+          ], 2)) : L("", !0)
+        ], 64)) : L("", !0)
+      ], 10, He),
+      z("div", {
         ref_key: "scrollContainer",
-        ref: h,
-        class: l(e(fe)),
+        ref: T,
+        class: r(e(Le)),
         tabindex: "0"
       }, [
-        Z(t.$slots, "default")
+        ve(o.$slots, "default")
       ], 2),
-      a.controlPosition === e(R).After && ![e($).Inline, e($).Hidden].includes(a.paginationType) ? (s(), c(F, { key: 0 }, [
-        e(P) && e(S) > e(g) ? (s(), c("div", {
+      t.controlPosition === e(Z).After && ![e(I).Inline, e(I).Hidden].includes(t.paginationType) ? (g(), m(te, { key: 0 }, [
+        e(y) && e(M) > e(c) ? (g(), m("div", {
           key: 0,
-          class: l(`${o}__slide-controls`)
+          class: r(`${l}__slide-controls`)
         }, [
-          y("div", {
-            class: l(e(le))
+          z("div", {
+            class: r(e(we))
           }, [
-            x(Q, {
-              color: a.color,
-              "current-page": e(f),
-              enabled: !e(m),
-              "goto-page": j,
-              "more-label": a.moreLabel,
-              "next-page-enabled": e(k),
-              "pagination-type": a.paginationType,
-              prefix: o,
-              "prev-page-enabled": e(L),
-              "show-more": a.onShowMore,
-              "show-next-items": J,
-              "show-prev-items": K,
-              "total-pages": e(P),
-              variant: a.variant
+            k(ce, {
+              color: t.color,
+              "current-page": e(h),
+              enabled: !e(N),
+              "goto-page": le,
+              "more-label": t.moreLabel,
+              "next-page-enabled": e(p),
+              "pagination-type": t.paginationType,
+              prefix: l,
+              "prev-page-enabled": e(w),
+              "show-more": t.onShowMore,
+              "show-next-items": ne,
+              "show-prev-items": ie,
+              "total-pages": e(y),
+              variant: t.variant
             }, null, 8, ["color", "current-page", "enabled", "more-label", "next-page-enabled", "pagination-type", "prev-page-enabled", "show-more", "total-pages", "variant"])
           ], 2)
-        ], 2)) : C("", !0)
-      ], 64)) : C("", !0),
-      a.paginationType === e($).Inline ? (s(), c("div", {
+        ], 2)) : L("", !0)
+      ], 64)) : L("", !0),
+      t.paginationType === e(I).Inline ? (g(), m("div", {
         key: 1,
-        class: l(`${o}__slide-controls ${o}__slide-controls--inline`)
+        class: r(`${l}__slide-controls ${l}__slide-controls--inline`)
       }, [
-        y("div", {
-          class: l(`${o}__navigation`)
+        z("div", {
+          class: r(`${l}__navigation`)
         }, [
-          x(Q, {
-            color: a.color,
-            "current-page": e(f),
-            enabled: !e(m),
-            "goto-page": j,
-            "more-label": a.moreLabel,
-            "next-page-enabled": e(k),
-            "pagination-type": a.paginationType,
-            prefix: o,
-            "prev-page-enabled": e(L),
-            "show-more": a.onShowMore,
-            "show-next-items": J,
-            "show-prev-items": K,
-            "total-pages": e(P),
-            variant: a.variant
+          k(ce, {
+            color: t.color,
+            "current-page": e(h),
+            enabled: !e(N),
+            "goto-page": le,
+            "more-label": t.moreLabel,
+            "next-page-enabled": e(p),
+            "pagination-type": t.paginationType,
+            prefix: l,
+            "prev-page-enabled": e(w),
+            "show-more": t.onShowMore,
+            "show-next-items": ne,
+            "show-prev-items": ie,
+            "total-pages": e(y),
+            variant: t.variant
           }, null, 8, ["color", "current-page", "enabled", "more-label", "next-page-enabled", "pagination-type", "prev-page-enabled", "show-more", "total-pages", "variant"])
         ], 2)
-      ], 2)) : C("", !0)
-    ], 10, ke));
+      ], 2)) : L("", !0)
+    ], 10, De));
   }
-}), ze = (a, o) => {
-  const i = a.__vccOpts || a;
-  for (const [I, T] of o)
-    i[I] = T;
-  return i;
-}, Ie = {}, Ee = {
-  class: /* @__PURE__ */ l(["clll-carousel__slide"])
+}), je = (t, l) => {
+  const n = t.__vccOpts || t;
+  for (const [A, E] of l)
+    n[A] = E;
+  return n;
+}, qe = {}, Fe = {
+  class: /* @__PURE__ */ r(["clll-carousel__slide"])
 };
-function Be(a, o) {
-  return s(), c("div", Ee, [
-    Z(a.$slots, "default")
+function Je(t, l) {
+  return g(), m("div", Fe, [
+    ve(t.$slots, "default")
   ]);
 }
-const Ne = /* @__PURE__ */ ze(Ie, [["render", Be]]), Me = Se;
-Me.Slide = Ne;
+const Ue = /* @__PURE__ */ je(qe, [["render", Je]]), Ge = Re;
+Ge.Slide = Ue;
 export {
-  Me as CLCarousel,
-  Me as default
+  Ge as CLCarousel,
+  Ge as default
 };