@smwb/ui-solid 0.2.1 → 0.3.0

package/dist/headless/components/dataDisplay/carousel/carousel.js

@@ -1,14 +1,14 @@
-import { addEventListener as k, use as O, insert as m, createComponent as f, effect as P, setAttribute as ee, style as te, className as z, setStyleProperty as re, template as F, delegateEvents as Ee } from "solid-js/web";
-import { mergeProps as ke, splitProps as Te, children as Xe, createSignal as S, createUniqueId as Le, createEffect as A, createMemo as se, onCleanup as ne, Show as I, For as oe } from "solid-js";
-import b from "clsx";
-import { toCssLength as Y, toCssNumber as Me, dragPrevent as le, getSlideStyle as Pe, getStartSlide as ze, getSlidesToShow as Ae, clamp as Fe, getSlideIndexForMultipleParts as ae, coordX as V, coordY as ie, getSlideWidth as Ne, isMouseEvent as ce, isTouchEvent as De } from "./utils.js";
-import { mergeRefs as He } from "../../../primitives/mergeRefs.js";
+import { addEventListener as k, use as Y, insert as g, createComponent as v, effect as I, setAttribute as V, style as oe, className as D, setStyleProperty as L, template as P, delegateEvents as Fe } from "solid-js/web";
+import { mergeProps as Me, splitProps as ze, children as De, createSignal as b, createUniqueId as Le, createEffect as A, createMemo as le, onCleanup as ae, Show as y, For as W } from "solid-js";
+import p from "clsx";
+import { toCssLength as K, toCssNumber as Ae, dragPrevent as ie, getSlideStyle as Ne, getStartSlide as He, getSlidesToShow as Re, clamp as Oe, getSlideIndexForMultipleParts as ce, coordX as q, coordY as ue, getSlideWidth as Ye, isMouseEvent as de, isTouchEvent as Ve } from "./utils.js";
+import { mergeRefs as We } from "../../../primitives/mergeRefs.js";
 import { Icon as T } from "../../base/icon/icon.js";
-import { Modal as Re } from "../../feedBack/modal/modal.js";
-var ue = /* @__PURE__ */ F("<div>"), Oe = /* @__PURE__ */ F("<div class=smwb-carousel__fullscreen-content><div class=smwb-carousel__fullscreen-stage>"), Ye = /* @__PURE__ */ F("<div data-testid=carousel role=region aria-roledescription=carousel><div class=smwb-carousel__inner><div class=smwb-carousel__track><div class=smwb-carousel__layer>"), Ve = /* @__PURE__ */ F("<div class=smwb-carousel__slide><div>");
-const de = 8, We = 0.4, W = () => typeof performance < "u" ? performance.now() : Date.now();
-function Qe(fe) {
-  const he = ke({
+import { Modal as Ke } from "../../feedBack/modal/modal.js";
+var fe = /* @__PURE__ */ P("<div>"), qe = /* @__PURE__ */ P("<div class=smwb-carousel__fullscreen-content><div class=smwb-carousel__fullscreen-stage><div class=smwb-carousel__fullscreen-track>"), Be = /* @__PURE__ */ P("<div data-testid=carousel role=region aria-roledescription=carousel><div class=smwb-carousel__inner><div class=smwb-carousel__track><div class=smwb-carousel__layer>"), Ge = /* @__PURE__ */ P("<div class=smwb-carousel__slide><div>"), Ue = /* @__PURE__ */ P("<div class=smwb-carousel__fullscreen-slide>");
+const me = 8, je = 0.4, B = () => typeof performance < "u" ? performance.now() : Date.now();
+function nt(he) {
+  const ve = Me({
     slidesToShow: 3,
     startSlide: 0,
     showNavigation: !0,
@@ -18,9 +18,9 @@ function Qe(fe) {
     autoplayInterval: 4e3,
     pauseOnHover: !0,
     enableFullscreen: !1
-  }, fe), [s] = Te(he, ["slidesToShow", "startSlide", "children", "class", "showNavigation", "showArrows", "arrowsSize", "navigationClassName", "onSlideChange", "navigationDotRenderer", "aria-label", "autoplay", "autoplayInterval", "pauseOnHover", "cellHeight", "aspectRatio", "gap", "maxWidth", "enableFullscreen", "ref"]), me = Xe(() => s.children), N = () => me.toArray(), o = () => N().length, d = () => Ae(s.slidesToShow, o()), K = () => ze(s.startSlide, o()), q = () => !!s.showArrows && o() > 1, X = () => Math.max(0, o() - d()), [g, B] = S(K()), [D, H] = S(void 0), [ge, G] = S(!1), [ve, U] = S(0), [we, j] = S(!1), [y, L] = S(null);
-  let M, v;
-  const l = {
+  }, he), [s] = ze(ve, ["slidesToShow", "startSlide", "children", "class", "showNavigation", "showArrows", "arrowsSize", "navigationClassName", "onSlideChange", "navigationDotRenderer", "aria-label", "autoplay", "autoplayInterval", "pauseOnHover", "cellHeight", "aspectRatio", "gap", "maxWidth", "enableFullscreen", "ref"]), ge = De(() => s.children), N = () => ge.toArray(), o = () => N().length, d = () => Re(s.slidesToShow, o()), G = () => He(s.startSlide, o()), U = () => !!s.showArrows && o() > 1, F = () => Math.max(0, o() - d()), [w, j] = b(G()), [H, R] = b(void 0), [we, J] = b(!1), [_e, Q] = b(0), [be, Z] = b(!1), [x, M] = b(null), [pe, ee] = b(0), [xe, te] = b(!1);
+  let z, _;
+  const i = {
     isPressed: !1,
     startX: 0,
     startY: 0,
@@ -29,134 +29,134 @@ function Qe(fe) {
     axis: null,
     dragged: !1
   };
-  let C = null;
-  const _e = Le();
+  let S = null;
+  const Se = Le();
   A(() => {
-    d(), H(!1);
+    d(), R(!1);
   }), A(() => {
-    const e = K();
-    B(e), s.onSlideChange?.(e), D() !== void 0 && H(!0);
+    const e = G();
+    j(e), s.onSlideChange?.(e), H() !== void 0 && R(!0);
   });
-  const p = (e) => {
-    const t = Fe(e, 0, X());
-    B(t), H(!0), s.onSlideChange?.(t);
-  }, be = (e) => {
-    v && (v.removeEventListener(e ? "mousemove" : "touchmove", J), v.removeEventListener(e ? "mouseup" : "touchend", x), e && v.removeEventListener("mouseleave", x));
-  }, J = (e) => {
-    if (!M || !l.isPressed) return;
-    if (De(e) && e.touches.length > 1) {
-      x(e);
+  const $ = (e) => {
+    const t = Oe(e, 0, F());
+    j(t), R(!0), s.onSlideChange?.(t);
+  }, $e = (e) => {
+    _ && (_.removeEventListener(e ? "mousemove" : "touchmove", re), _.removeEventListener(e ? "mouseup" : "touchend", C), e && _.removeEventListener("mouseleave", C));
+  }, re = (e) => {
+    if (!z || !i.isPressed) return;
+    if (Ve(e) && e.touches.length > 1) {
+      C(e);
       return;
     }
-    const t = V(e), a = ie(e), i = t - l.startX, c = a - l.startY;
-    if (l.axis === null) {
-      if (Math.abs(i) < de && Math.abs(c) < de) return;
-      if (l.axis = Math.abs(i) >= Math.abs(c) ? "x" : "y", l.dragged = !0, l.axis === "y") {
-        x(e);
+    const t = q(e), a = ue(e), c = t - i.startX, u = a - i.startY;
+    if (i.axis === null) {
+      if (Math.abs(c) < me && Math.abs(u) < me) return;
+      if (i.axis = Math.abs(c) >= Math.abs(u) ? "x" : "y", i.dragged = !0, i.axis === "y") {
+        C(e);
         return;
       }
-      o() > 1 && j(!0);
+      o() > 1 && Z(!0);
     }
-    if (l.axis === "x") {
+    if (i.axis === "x") {
       if (e.preventDefault(), e.stopPropagation(), o() > 1) {
-        const r = g() <= 0, n = g() >= X(), u = r && i > 0 || n && i < 0 ? i * 0.35 : i;
-        U(u);
+        const r = w() <= 0, n = w() >= F(), l = r && c > 0 || n && c < 0 ? c * 0.35 : c;
+        Q(l);
       }
-      l.lastX = t, l.lastT = W();
+      i.lastX = t, i.lastT = B();
     }
-  }, x = (e) => {
-    if (!l.isPressed) return;
-    const t = ce(e);
-    be(t);
+  }, C = (e) => {
+    if (!i.isPressed) return;
+    const t = de(e);
+    $e(t);
     const {
       axis: a,
-      dragged: i,
-      startX: c,
+      dragged: c,
+      startX: u,
       lastX: r,
       lastT: n
-    } = l;
-    if (l.isPressed = !1, j(!1), a === "x" && i && o() > 1 && M) {
-      const u = V(e), w = u - c, h = M.offsetWidth / d(), _ = n ? (u - r) / Math.max(1, W() - n) : 0;
-      let E = h > 0 ? Math.round(-w / h) : 0;
-      E === 0 && Math.abs(_) > We && (E = _ < 0 ? 1 : -1), p(g() + E);
+    } = i;
+    if (i.isPressed = !1, Z(!1), a === "x" && c && o() > 1 && z) {
+      const l = q(e), m = l - u, f = z.offsetWidth / d(), h = n ? (l - r) / Math.max(1, B() - n) : 0;
+      let X = f > 0 ? Math.round(-m / f) : 0;
+      X === 0 && Math.abs(h) > je && (X = h < 0 ? 1 : -1), $(w() + X);
     }
-    U(0);
-  }, Q = (e) => {
-    if (!v) return;
-    const t = ce(e);
-    t && e.button !== 0 || (e.stopPropagation(), l.isPressed = !0, l.startX = V(e), l.startY = ie(e), l.lastX = l.startX, l.lastT = W(), l.axis = null, l.dragged = !1, v.addEventListener(t ? "mousemove" : "touchmove", J, {
+    Q(0);
+  }, se = (e) => {
+    if (!_) return;
+    const t = de(e);
+    t && e.button !== 0 || (e.stopPropagation(), i.isPressed = !0, i.startX = q(e), i.startY = ue(e), i.lastX = i.startX, i.lastT = B(), i.axis = null, i.dragged = !1, _.addEventListener(t ? "mousemove" : "touchmove", re, {
       passive: !1
-    }), v.addEventListener(t ? "mouseup" : "touchend", x), t && v.addEventListener("mouseleave", x));
-  }, pe = (e) => {
-    l.dragged || s.enableFullscreen && L(e);
-  }, R = (e) => {
-    const t = d() === 1, a = t ? o() : Math.ceil(o() / d()), i = g() + d(), c = o() - d() <= g(), n = (ae(i, d(), o(), c) + e + a) % a;
+    }), _.addEventListener(t ? "mouseup" : "touchend", C), t && _.addEventListener("mouseleave", C));
+  }, Ce = (e) => {
+    i.dragged || s.enableFullscreen && M(e);
+  }, O = (e) => {
+    const t = d() === 1, a = t ? o() : Math.ceil(o() / d()), c = w() + d(), u = o() - d() <= w(), n = (ce(c, d(), o(), u) + e + a) % a;
     return t ? n : n * d();
-  }, xe = () => {
-    const e = o() - d() <= g(), t = d() === 1, a = t ? o() : Math.ceil(o() / d()), i = [];
-    for (let c = 0; c < a; c++) {
-      let r = c, n = g();
+  }, Ie = () => {
+    const e = o() - d() <= w(), t = d() === 1, a = t ? o() : Math.ceil(o() / d()), c = [];
+    for (let u = 0; u < a; u++) {
+      let r = u, n = w();
       if (!t) {
-        const u = c === a - 1, w = g() + d();
-        r = u ? o() - d() : c * d(), n = ae(w, d(), o(), e);
+        const l = u === a - 1, m = w() + d();
+        r = l ? o() - d() : u * d(), n = ce(m, d(), o(), e);
       }
-      i.push({
-        index: c,
+      c.push({
+        index: u,
         nextIndex: r,
-        isActive: n === c
+        isActive: n === u
       });
     }
-    return i;
-  }, Se = () => {
-    const e = g() > X() ? X() : g();
-    return Ne(d()) * e;
-  }, Ie = se(() => {
-    const e = {}, t = Y(s.cellHeight), a = Me(s.aspectRatio), i = Y(s.gap), c = Y(s.maxWidth);
-    return t && (e["--smwb-carousel-cell-height"] = t), a && (e["--smwb-carousel-aspect-ratio"] = a), i && (e["--smwb-carousel-gap"] = i), c && (e["--smwb-carousel-max-width"] = c), e;
-  }), $ = (e) => {
-    const t = y();
-    t !== null && L((t + e + o()) % o());
-  }, ye = se(() => {
-    const e = y();
-    if (e === null) return null;
-    const t = N()[e];
-    return t instanceof Node ? t.cloneNode(!0) : t == null ? "" : String(t);
-  });
+    return c;
+  }, ye = () => {
+    const e = w() > F() ? F() : w();
+    return Ye(d()) * e;
+  }, Ee = le(() => {
+    const e = {}, t = K(s.cellHeight), a = Ae(s.aspectRatio), c = K(s.gap), u = K(s.maxWidth);
+    return t && (e["--smwb-carousel-cell-height"] = t), a && (e["--smwb-carousel-aspect-ratio"] = a), c && (e["--smwb-carousel-gap"] = c), u && (e["--smwb-carousel-max-width"] = u), e;
+  }), E = (e) => {
+    const t = x();
+    t !== null && M((t + e + o()) % o());
+  }, Xe = le(() => N().map((e) => typeof Node < "u" && e instanceof Node ? e.cloneNode(!0) : e == null ? "" : String(e)));
   A(() => {
-    if (!s.autoplay || o() <= 1 || s.pauseOnHover && ge() || y() !== null)
+    if (!s.autoplay || o() <= 1 || s.pauseOnHover && we() || x() !== null)
       return;
-    const e = window.setInterval(() => p(R(1)), s.autoplayInterval);
-    ne(() => window.clearInterval(e));
+    const e = window.setInterval(() => $(O(1)), s.autoplayInterval);
+    ae(() => window.clearInterval(e));
   }), A(() => {
-    if (y() === null || o() <= 1) return;
+    if (x() === null || o() <= 1) return;
     const e = (t) => {
-      t.key === "ArrowLeft" ? $(-1) : t.key === "ArrowRight" && $(1);
+      t.key === "ArrowLeft" ? E(-1) : t.key === "ArrowRight" && E(1);
     };
-    document.addEventListener("keydown", e), ne(() => document.removeEventListener("keydown", e));
+    document.addEventListener("keydown", e), ae(() => document.removeEventListener("keydown", e));
   });
-  const Ce = (e) => {
-    C = e.touches[0]?.clientX ?? null;
-  }, $e = (e) => {
-    if (C === null || o() <= 1) return;
-    const t = (e.changedTouches[0]?.clientX ?? C) - C;
-    C = null, Math.abs(t) > 40 && $(t < 0 ? 1 : -1);
+  const ke = (e) => {
+    S = e.touches[0]?.clientX ?? null;
+  }, Te = (e) => {
+    if (S === null || o() <= 1) return;
+    const t = (e.touches[0]?.clientX ?? S) - S;
+    te(!0), ee(t);
+  }, Pe = (e) => {
+    const t = S;
+    if (S = null, te(!1), ee(0), t === null || o() <= 1) return;
+    const a = (e.changedTouches[0]?.clientX ?? t) - t;
+    Math.abs(a) > 40 && E(a < 0 ? 1 : -1);
   };
   return (() => {
-    var e = Ye(), t = e.firstChild, a = t.firstChild, i = a.firstChild;
-    k(e, "mouseleave", s.pauseOnHover ? () => G(!1) : void 0), k(e, "mouseenter", s.pauseOnHover ? () => G(!0) : void 0);
-    var c = He(s.ref);
-    return typeof c == "function" && O(c, e), O((r) => M = r, t), m(t, f(I, {
+    var e = Be(), t = e.firstChild, a = t.firstChild, c = a.firstChild;
+    k(e, "mouseleave", s.pauseOnHover ? () => J(!1) : void 0), k(e, "mouseenter", s.pauseOnHover ? () => J(!0) : void 0);
+    var u = We(s.ref);
+    return typeof u == "function" && Y(u, e), Y((r) => z = r, t), g(t, v(y, {
       get when() {
-        return q();
+        return U();
       },
       get children() {
-        return f(T, {
+        return v(T, {
           name: "chevron_left",
           get size() {
             return s.arrowsSize;
           },
           get class() {
-            return b("smwb-carousel__arrow", "smwb-carousel__arrow_prev");
+            return p("smwb-carousel__arrow", "smwb-carousel__arrow_prev");
           },
           get style() {
             return {
@@ -164,36 +164,36 @@ function Qe(fe) {
               left: `${-s.arrowsSize / 2}px`
             };
           },
-          onClick: () => p(R(-1))
+          onClick: () => $(O(-1))
         });
       }
-    }), a), k(a, "dragend", le), k(a, "dragstart", le), a.$$touchstart = Q, a.$$mousedown = Q, O((r) => v = r, a), m(i, f(oe, {
+    }), a), k(a, "dragend", ie), k(a, "dragstart", ie), a.$$touchstart = se, a.$$mousedown = se, Y((r) => _ = r, a), g(c, v(W, {
       get each() {
         return N();
       },
       children: (r, n) => (() => {
-        var u = Ve(), w = u.firstChild;
-        return k(w, "click", s.enableFullscreen ? () => pe(n()) : void 0, !0), m(w, r), P((h) => {
-          var _ = `${_e}${n()}`, E = Pe(d()), Z = b("smwb-carousel__slide-inner", s.enableFullscreen && "smwb-carousel__slide-inner_clickable");
-          return _ !== h.e && ee(u, "id", h.e = _), h.t = te(u, E, h.t), Z !== h.a && z(w, h.a = Z), h;
+        var l = Ge(), m = l.firstChild;
+        return k(m, "click", s.enableFullscreen ? () => Ce(n()) : void 0, !0), g(m, r), I((f) => {
+          var h = `${Se}${n()}`, X = Ne(d()), ne = p("smwb-carousel__slide-inner", s.enableFullscreen && "smwb-carousel__slide-inner_clickable");
+          return h !== f.e && V(l, "id", f.e = h), f.t = oe(l, X, f.t), ne !== f.a && D(m, f.a = ne), f;
         }, {
           e: void 0,
           t: void 0,
           a: void 0
-        }), u;
+        }), l;
       })()
-    })), m(t, f(I, {
+    })), g(t, v(y, {
       get when() {
-        return q();
+        return U();
       },
       get children() {
-        return f(T, {
+        return v(T, {
           name: "chevron_right",
           get size() {
             return s.arrowsSize;
           },
           get class() {
-            return b("smwb-carousel__arrow", "smwb-carousel__arrow_next");
+            return p("smwb-carousel__arrow", "smwb-carousel__arrow_next");
           },
           get style() {
             return {
@@ -201,81 +201,95 @@ function Qe(fe) {
               right: `${-s.arrowsSize / 2}px`
             };
           },
-          onClick: () => p(R(1))
+          onClick: () => $(O(1))
         });
       }
-    }), null), m(e, f(I, {
+    }), null), g(e, v(y, {
       get when() {
         return s.showNavigation;
       },
       get children() {
-        var r = ue();
-        return m(r, f(oe, {
+        var r = fe();
+        return g(r, v(W, {
           get each() {
-            return xe();
+            return Ie();
           },
-          children: (n) => s.navigationDotRenderer ? s.navigationDotRenderer(n.index, n.isActive, (u) => p(u)) : (() => {
-            var u = ue();
-            return u.$$click = () => p(n.nextIndex), P(() => z(u, b("smwb-carousel__navigation__dot", n.isActive && "current"))), u;
+          children: (n) => s.navigationDotRenderer ? s.navigationDotRenderer(n.index, n.isActive, (l) => $(l)) : (() => {
+            var l = fe();
+            return l.$$click = () => $(n.nextIndex), I(() => D(l, p("smwb-carousel__navigation__dot", n.isActive && "current"))), l;
           })()
-        })), P(() => z(r, b("smwb-carousel__navigation", s.navigationClassName))), r;
+        })), I(() => D(r, p("smwb-carousel__navigation", s.navigationClassName))), r;
       }
-    }), null), m(e, f(I, {
+    }), null), g(e, v(y, {
       get when() {
         return s.enableFullscreen;
       },
       get children() {
-        return f(Re, {
+        return v(Ke, {
           get open() {
-            return y() !== null;
+            return x() !== null;
           },
           size: "fullscreen",
           backdrop: "darkBlured",
           class: "smwb-carousel__fullscreen",
-          onClose: () => L(null),
+          onClose: () => M(null),
           "aria-label": "Image viewer",
           get children() {
-            var r = Oe(), n = r.firstChild;
-            return m(r, f(I, {
+            var r = qe(), n = r.firstChild, l = n.firstChild;
+            return g(r, v(y, {
               get when() {
                 return o() > 1;
               },
               get children() {
-                return f(T, {
+                return v(T, {
                   name: "chevron_left",
                   size: 40,
                   get class() {
-                    return b("smwb-carousel__fullscreen-arrow", "smwb-carousel__fullscreen-arrow_prev");
+                    return p("smwb-carousel__fullscreen-arrow", "smwb-carousel__fullscreen-arrow_prev");
                   },
-                  onClick: () => $(-1)
+                  onClick: () => E(-1)
                 });
               }
-            }), n), n.$$touchend = $e, n.$$touchstart = Ce, m(n, () => ye()), m(r, f(I, {
+            }), n), n.$$touchend = Pe, n.$$touchmove = Te, n.$$touchstart = ke, g(l, v(W, {
+              get each() {
+                return Xe();
+              },
+              children: (m, f) => (() => {
+                var h = Ue();
+                return g(h, m), I(() => V(h, "aria-hidden", f() !== x())), h;
+              })()
+            })), g(r, v(y, {
               get when() {
                 return o() > 1;
               },
               get children() {
-                return f(T, {
+                return v(T, {
                   name: "chevron_right",
                   size: 40,
                   get class() {
-                    return b("smwb-carousel__fullscreen-arrow", "smwb-carousel__fullscreen-arrow_next");
+                    return p("smwb-carousel__fullscreen-arrow", "smwb-carousel__fullscreen-arrow_next");
                   },
-                  onClick: () => $(1)
+                  onClick: () => E(1)
                 });
               }
-            }), null), m(r, f(T, {
+            }), null), g(r, v(T, {
               name: "close",
               size: 32,
               class: "smwb-carousel__fullscreen-close",
-              onClick: () => L(null)
-            }), null), r;
+              onClick: () => M(null)
+            }), null), I((m) => {
+              var f = `translateX(calc(-${(x() ?? 0) * 100}% + ${pe()}px))`, h = xe() ? "none" : "transform 350ms cubic-bezier(.22, .61, .36, 1)";
+              return f !== m.e && L(l, "transform", m.e = f), h !== m.t && L(l, "transition", m.t = h), m;
+            }, {
+              e: void 0,
+              t: void 0
+            }), r;
           }
         });
       }
-    }), null), P((r) => {
-      var n = b("smwb-carousel", s.class), u = s["aria-label"], w = Ie(), h = `translateX(calc(-${Se()}% + ${ve()}px))`, _ = we() || D() === void 0 ? "none" : D() ? "transform 500ms cubic-bezier(.1, 0, .25, 1)" : "none";
-      return n !== r.e && z(e, r.e = n), u !== r.t && ee(e, "aria-label", r.t = u), r.a = te(e, w, r.a), h !== r.o && re(i, "transform", r.o = h), _ !== r.i && re(i, "transition", r.i = _), r;
+    }), null), I((r) => {
+      var n = p("smwb-carousel", s.class), l = s["aria-label"], m = Ee(), f = `translateX(calc(-${ye()}% + ${_e()}px))`, h = be() || H() === void 0 ? "none" : H() ? "transform 500ms cubic-bezier(.1, 0, .25, 1)" : "none";
+      return n !== r.e && D(e, r.e = n), l !== r.t && V(e, "aria-label", r.t = l), r.a = oe(e, m, r.a), f !== r.o && L(c, "transform", r.o = f), h !== r.i && L(c, "transition", r.i = h), r;
     }, {
       e: void 0,
       t: void 0,
@@ -285,8 +299,8 @@ function Qe(fe) {
     }), e;
   })();
 }
-Ee(["mousedown", "touchstart", "touchend", "click"]);
+Fe(["mousedown", "touchstart", "touchmove", "touchend", "click"]);
 export {
-  Qe as Carousel
+  nt as Carousel
 };
 //# sourceMappingURL=carousel.js.map