@smwb/ui-solid 0.1.1 → 0.2.1

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

@@ -3,50 +3,64 @@ function c(t, n) {
   return t % n === 0 ? r - 1 : r;
 }
 function o(t, n, r, f) {
-  const e = c(r, n);
-  return t === r + n ? 0 : f || t < n && t !== 0 ? e : t === 0 ? r % n === 0 ? e : e - 1 : n > 0 ? Math.floor(t / n) - 1 : 0;
+  const u = c(r, n);
+  return t === r + n ? 0 : f || t < n && t !== 0 ? u : t === 0 ? r % n === 0 ? u : u - 1 : n > 0 ? Math.floor(t / n) - 1 : 0;
 }
 function g(t) {
   return t instanceof MouseEvent;
 }
-function u(t) {
+function e(t) {
   return typeof TouchEvent < "u" && t instanceof TouchEvent;
 }
 function a(t) {
-  return u(t) ? t.changedTouches[0]?.clientX ?? 0 : t.clientX;
+  return e(t) ? t.changedTouches[0]?.clientX ?? 0 : t.clientX;
 }
 function h(t) {
-  return u(t) ? t.changedTouches[0]?.clientY ?? 0 : t.clientY;
+  return e(t) ? t.changedTouches[0]?.clientY ?? 0 : t.clientY;
 }
-function M(t) {
+function m(t) {
   const n = t.target;
   (n.tagName === "A" || n.tagName === "IMG") && t.preventDefault();
 }
 function i(t) {
   return 100 / t;
 }
-function E(t) {
+function M(t) {
   return { width: `${i(t)}%` };
 }
 function p(t, n) {
   return t <= 0 || n === 0 ? 1 : t > n ? n : t;
 }
-function m(t, n) {
+function E(t, n) {
   if (t <= 0 || n === 0) return 0;
   const r = n - 1;
   return t > r ? r : t;
 }
+function d(t, n, r) {
+  return Math.min(Math.max(t, n), r);
+}
+function y(t) {
+  if (t != null)
+    return typeof t == "number" ? `${t}px` : t;
+}
+function L(t) {
+  if (t != null)
+    return String(t);
+}
 export {
+  d as clamp,
   a as coordX,
   h as coordY,
-  M as dragPrevent,
+  m as dragPrevent,
   c as getActiveSlideDotsLength,
   o as getSlideIndexForMultipleParts,
-  E as getSlideStyle,
+  M as getSlideStyle,
   i as getSlideWidth,
   p as getSlidesToShow,
-  m as getStartSlide,
+  E as getStartSlide,
   g as isMouseEvent,
-  u as isTouchEvent
+  e as isTouchEvent,
+  y as toCssLength,
+  L as toCssNumber
 };
 //# sourceMappingURL=utils.js.map

package/dist/components/dataDisplay/carousel/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../src/components/dataDisplay/carousel/utils.ts"],"sourcesContent":["import type { JSX } from \"solid-js\";\n\nexport function getActiveSlideDotsLength(slidesCount: number, slidesToShow: number): number {\n  const dots = Math.floor(slidesCount / slidesToShow);\n  return slidesCount % slidesToShow === 0 ? dots - 1 : dots;\n}\n\nexport function getSlideIndexForMultipleParts(\n  activeIndex: number,\n  slidesToShow: number,\n  slidesCount: number,\n  isNextSlideDisabled: boolean\n): number {\n  const dotsLength = getActiveSlideDotsLength(slidesCount, slidesToShow);\n  if (activeIndex === slidesCount + slidesToShow) return 0;\n  if (isNextSlideDisabled || (activeIndex < slidesToShow && activeIndex !== 0)) return dotsLength;\n  if (activeIndex === 0) return slidesCount % slidesToShow === 0 ? dotsLength : dotsLength - 1;\n  return slidesToShow > 0 ? Math.floor(activeIndex / slidesToShow) - 1 : 0;\n}\n\nexport function isMouseEvent(event: Event): event is MouseEvent {\n  return event instanceof MouseEvent;\n}\n\nexport function isTouchEvent(event: Event): event is TouchEvent {\n  return typeof TouchEvent !== \"undefined\" && event instanceof TouchEvent;\n}\n\nexport function coordX(event: MouseEvent | TouchEvent): number {\n  if (isTouchEvent(event)) return event.changedTouches[0]?.clientX ?? 0;\n  return event.clientX;\n}\n\nexport function coordY(event: MouseEvent | TouchEvent): number {\n  if (isTouchEvent(event)) return event.changedTouches[0]?.clientY ?? 0;\n  return event.clientY;\n}\n\nexport function dragPrevent(event: Event): void {\n  const target = event.target as HTMLElement;\n  if (target.tagName === \"A\" || target.tagName === \"IMG\") {\n    event.preventDefault();\n  }\n}\n\nexport function getSlideWidth(slidesToShow: number): number {\n  return 100 / slidesToShow;\n}\n\nexport function getSlideStyle(slidesToShow: number): JSX.CSSProperties {\n  return { width: `${getSlideWidth(slidesToShow)}%` };\n}\n\nexport function getSlidesToShow(slidesToShow: number, slidesCount: number): number {\n  if (slidesToShow <= 0 || slidesCount === 0) return 1;\n  if (slidesToShow > slidesCount) return slidesCount;\n  return slidesToShow;\n}\n\nexport function getStartSlide(startSlide: number, slidesCount: number): number {\n  if (startSlide <= 0 || slidesCount === 0) return 0;\n  const maxIndex = slidesCount - 1;\n  if (startSlide > maxIndex) return maxIndex;\n  return startSlide;\n}\n"],"names":["getActiveSlideDotsLength","slidesCount","slidesToShow","dots","getSlideIndexForMultipleParts","activeIndex","isNextSlideDisabled","dotsLength","isMouseEvent","event","isTouchEvent","coordX","coordY","dragPrevent","target","getSlideWidth","getSlideStyle","getSlidesToShow","getStartSlide","startSlide","maxIndex"],"mappings":"AAEO,SAASA,EAAyBC,GAAqBC,GAA8B;AAC1F,QAAMC,IAAO,KAAK,MAAMF,IAAcC,CAAY;AAClD,SAAOD,IAAcC,MAAiB,IAAIC,IAAO,IAAIA;AACvD;AAEO,SAASC,EACdC,GACAH,GACAD,GACAK,GACQ;AACR,QAAMC,IAAaP,EAAyBC,GAAaC,CAAY;AACrE,SAAIG,MAAgBJ,IAAcC,IAAqB,IACnDI,KAAwBD,IAAcH,KAAgBG,MAAgB,IAAWE,IACjFF,MAAgB,IAAUJ,IAAcC,MAAiB,IAAIK,IAAaA,IAAa,IACpFL,IAAe,IAAI,KAAK,MAAMG,IAAcH,CAAY,IAAI,IAAI;AACzE;AAEO,SAASM,EAAaC,GAAmC;AAC9D,SAAOA,aAAiB;AAC1B;AAEO,SAASC,EAAaD,GAAmC;AAC9D,SAAO,OAAO,aAAe,OAAeA,aAAiB;AAC/D;AAEO,SAASE,EAAOF,GAAwC;AAC7D,SAAIC,EAAaD,CAAK,IAAUA,EAAM,eAAe,CAAC,GAAG,WAAW,IAC7DA,EAAM;AACf;AAEO,SAASG,EAAOH,GAAwC;AAC7D,SAAIC,EAAaD,CAAK,IAAUA,EAAM,eAAe,CAAC,GAAG,WAAW,IAC7DA,EAAM;AACf;AAEO,SAASI,EAAYJ,GAAoB;AAC9C,QAAMK,IAASL,EAAM;AACrB,GAAIK,EAAO,YAAY,OAAOA,EAAO,YAAY,UAC/CL,EAAM,eAAA;AAEV;AAEO,SAASM,EAAcb,GAA8B;AAC1D,SAAO,MAAMA;AACf;AAEO,SAASc,EAAcd,GAAyC;AACrE,SAAO,EAAE,OAAO,GAAGa,EAAcb,CAAY,CAAC,IAAA;AAChD;AAEO,SAASe,EAAgBf,GAAsBD,GAA6B;AACjF,SAAIC,KAAgB,KAAKD,MAAgB,IAAU,IAC/CC,IAAeD,IAAoBA,IAChCC;AACT;AAEO,SAASgB,EAAcC,GAAoBlB,GAA6B;AAC7E,MAAIkB,KAAc,KAAKlB,MAAgB,EAAG,QAAO;AACjD,QAAMmB,IAAWnB,IAAc;AAC/B,SAAIkB,IAAaC,IAAiBA,IAC3BD;AACT;"}
+{"version":3,"file":"utils.js","sources":["../../../../src/components/dataDisplay/carousel/utils.ts"],"sourcesContent":["import type { JSX } from \"solid-js\";\n\nexport function getActiveSlideDotsLength(slidesCount: number, slidesToShow: number): number {\n  const dots = Math.floor(slidesCount / slidesToShow);\n  return slidesCount % slidesToShow === 0 ? dots - 1 : dots;\n}\n\nexport function getSlideIndexForMultipleParts(\n  activeIndex: number,\n  slidesToShow: number,\n  slidesCount: number,\n  isNextSlideDisabled: boolean\n): number {\n  const dotsLength = getActiveSlideDotsLength(slidesCount, slidesToShow);\n  if (activeIndex === slidesCount + slidesToShow) return 0;\n  if (isNextSlideDisabled || (activeIndex < slidesToShow && activeIndex !== 0)) return dotsLength;\n  if (activeIndex === 0) return slidesCount % slidesToShow === 0 ? dotsLength : dotsLength - 1;\n  return slidesToShow > 0 ? Math.floor(activeIndex / slidesToShow) - 1 : 0;\n}\n\nexport function isMouseEvent(event: Event): event is MouseEvent {\n  return event instanceof MouseEvent;\n}\n\nexport function isTouchEvent(event: Event): event is TouchEvent {\n  return typeof TouchEvent !== \"undefined\" && event instanceof TouchEvent;\n}\n\nexport function coordX(event: MouseEvent | TouchEvent): number {\n  if (isTouchEvent(event)) return event.changedTouches[0]?.clientX ?? 0;\n  return event.clientX;\n}\n\nexport function coordY(event: MouseEvent | TouchEvent): number {\n  if (isTouchEvent(event)) return event.changedTouches[0]?.clientY ?? 0;\n  return event.clientY;\n}\n\nexport function dragPrevent(event: Event): void {\n  const target = event.target as HTMLElement;\n  if (target.tagName === \"A\" || target.tagName === \"IMG\") {\n    event.preventDefault();\n  }\n}\n\nexport function getSlideWidth(slidesToShow: number): number {\n  return 100 / slidesToShow;\n}\n\nexport function getSlideStyle(slidesToShow: number): JSX.CSSProperties {\n  return { width: `${getSlideWidth(slidesToShow)}%` };\n}\n\nexport function getSlidesToShow(slidesToShow: number, slidesCount: number): number {\n  if (slidesToShow <= 0 || slidesCount === 0) return 1;\n  if (slidesToShow > slidesCount) return slidesCount;\n  return slidesToShow;\n}\n\nexport function getStartSlide(startSlide: number, slidesCount: number): number {\n  if (startSlide <= 0 || slidesCount === 0) return 0;\n  const maxIndex = slidesCount - 1;\n  if (startSlide > maxIndex) return maxIndex;\n  return startSlide;\n}\n\nexport function clamp(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max);\n}\n\n/** Number -> \"<n>px\", string -> as-is, nullish -> undefined. */\nexport function toCssLength(value?: number | string): string | undefined {\n  if (value === undefined || value === null) return undefined;\n  return typeof value === \"number\" ? `${value}px` : value;\n}\n\n/** Number/string -> string, nullish -> undefined (for unit-less CSS values like aspect-ratio). */\nexport function toCssNumber(value?: number | string): string | undefined {\n  if (value === undefined || value === null) return undefined;\n  return String(value);\n}\n"],"names":["getActiveSlideDotsLength","slidesCount","slidesToShow","dots","getSlideIndexForMultipleParts","activeIndex","isNextSlideDisabled","dotsLength","isMouseEvent","event","isTouchEvent","coordX","coordY","dragPrevent","target","getSlideWidth","getSlideStyle","getSlidesToShow","getStartSlide","startSlide","maxIndex","clamp","value","min","max","toCssLength","toCssNumber"],"mappings":"AAEO,SAASA,EAAyBC,GAAqBC,GAA8B;AAC1F,QAAMC,IAAO,KAAK,MAAMF,IAAcC,CAAY;AAClD,SAAOD,IAAcC,MAAiB,IAAIC,IAAO,IAAIA;AACvD;AAEO,SAASC,EACdC,GACAH,GACAD,GACAK,GACQ;AACR,QAAMC,IAAaP,EAAyBC,GAAaC,CAAY;AACrE,SAAIG,MAAgBJ,IAAcC,IAAqB,IACnDI,KAAwBD,IAAcH,KAAgBG,MAAgB,IAAWE,IACjFF,MAAgB,IAAUJ,IAAcC,MAAiB,IAAIK,IAAaA,IAAa,IACpFL,IAAe,IAAI,KAAK,MAAMG,IAAcH,CAAY,IAAI,IAAI;AACzE;AAEO,SAASM,EAAaC,GAAmC;AAC9D,SAAOA,aAAiB;AAC1B;AAEO,SAASC,EAAaD,GAAmC;AAC9D,SAAO,OAAO,aAAe,OAAeA,aAAiB;AAC/D;AAEO,SAASE,EAAOF,GAAwC;AAC7D,SAAIC,EAAaD,CAAK,IAAUA,EAAM,eAAe,CAAC,GAAG,WAAW,IAC7DA,EAAM;AACf;AAEO,SAASG,EAAOH,GAAwC;AAC7D,SAAIC,EAAaD,CAAK,IAAUA,EAAM,eAAe,CAAC,GAAG,WAAW,IAC7DA,EAAM;AACf;AAEO,SAASI,EAAYJ,GAAoB;AAC9C,QAAMK,IAASL,EAAM;AACrB,GAAIK,EAAO,YAAY,OAAOA,EAAO,YAAY,UAC/CL,EAAM,eAAA;AAEV;AAEO,SAASM,EAAcb,GAA8B;AAC1D,SAAO,MAAMA;AACf;AAEO,SAASc,EAAcd,GAAyC;AACrE,SAAO,EAAE,OAAO,GAAGa,EAAcb,CAAY,CAAC,IAAA;AAChD;AAEO,SAASe,EAAgBf,GAAsBD,GAA6B;AACjF,SAAIC,KAAgB,KAAKD,MAAgB,IAAU,IAC/CC,IAAeD,IAAoBA,IAChCC;AACT;AAEO,SAASgB,EAAcC,GAAoBlB,GAA6B;AAC7E,MAAIkB,KAAc,KAAKlB,MAAgB,EAAG,QAAO;AACjD,QAAMmB,IAAWnB,IAAc;AAC/B,SAAIkB,IAAaC,IAAiBA,IAC3BD;AACT;AAEO,SAASE,EAAMC,GAAeC,GAAaC,GAAqB;AACrE,SAAO,KAAK,IAAI,KAAK,IAAIF,GAAOC,CAAG,GAAGC,CAAG;AAC3C;AAGO,SAASC,EAAYH,GAA6C;AACvE,MAA2BA,KAAU;AACrC,WAAO,OAAOA,KAAU,WAAW,GAAGA,CAAK,OAAOA;AACpD;AAGO,SAASI,EAAYJ,GAA6C;AACvE,MAA2BA,KAAU;AACrC,WAAO,OAAOA,CAAK;AACrB;"}

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

@@ -1,12 +1,14 @@
-import { addEventListener as I, use as P, insert as S, createComponent as w, effect as $, setAttribute as F, style as ne, className as A, setStyleProperty as q, template as H, delegateEvents as ie } from "solid-js/web";
-import { mergeProps as ae, splitProps as le, children as ce, createSignal as z, createUniqueId as de, createEffect as M, onCleanup as ue, Show as N, For as G } from "solid-js";
-import x from "clsx";
-import { dragPrevent as U, getSlideStyle as ve, getStartSlide as he, getSlidesToShow as me, getSlideIndexForMultipleParts as j, coordX as L, coordY as X, getSlideWidth as fe, isMouseEvent as B, isTouchEvent as ge } from "./utils.js";
-import { mergeRefs as we } from "../../../primitives/mergeRefs.js";
-import { Icon as J } from "../../base/icon/icon.js";
-var K = /* @__PURE__ */ H("<div>"), Se = /* @__PURE__ */ H("<div data-testid=carousel role=region aria-roledescription=carousel><div class=smwb-carousel__inner><div class=smwb-carousel__track><div class=smwb-carousel__layer>"), pe = /* @__PURE__ */ H("<div class=smwb-carousel__slide><div class=smwb-carousel__slide-inner>");
-function ye(Q) {
-  const V = ae({
+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 { 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({
     slidesToShow: 3,
     startSlide: 0,
     showNavigation: !0,
@@ -14,162 +16,277 @@ function ye(Q) {
     "aria-label": "Carousel",
     autoplay: !1,
     autoplayInterval: 4e3,
-    pauseOnHover: !0
-  }, Q), [t] = le(V, ["slidesToShow", "startSlide", "children", "class", "showNavigation", "showArrows", "arrowsSize", "navigationClassName", "onSlideChange", "navigationDotRenderer", "aria-label", "autoplay", "autoplayInterval", "pauseOnHover", "ref"]), Z = ce(() => t.children), T = () => Z.toArray(), a = () => T().length, o = () => me(t.slidesToShow, a()), Y = () => he(t.startSlide, a()), k = () => !!t.showArrows && a() > 1, [m, C] = z(Y()), [D, b] = z(void 0), [ee, O] = z(!1);
-  let y, h;
-  const u = {
+    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 = {
     isPressed: !1,
     startX: 0,
-    startY: 0
-  }, te = de();
-  M(() => {
-    o(), b(!1);
-  }), M(() => {
-    const e = Y();
-    C(e), t.onSlideChange?.(e), D() !== void 0 && b(!0);
+    startY: 0,
+    lastX: 0,
+    lastT: 0,
+    axis: null,
+    dragged: !1
+  };
+  let C = null;
+  const _e = Le();
+  A(() => {
+    d(), H(!1);
+  }), A(() => {
+    const e = K();
+    B(e), s.onSlideChange?.(e), D() !== void 0 && H(!0);
   });
-  const R = (e) => {
-    if (!y || !u.isPressed) return;
-    if (e.preventDefault(), e.stopPropagation(), ge(e) && e.touches.length > 1) {
-      p(e);
+  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);
       return;
     }
-    const r = L(e) - u.startX, l = X(e) - u.startY, d = Math.abs(r), c = Math.abs(l);
-    if (d < c) return;
-    const n = y.offsetWidth / o(), i = o() === 1 ? 1.95 : 1.4;
-    if (d % n > n / i) {
-      const f = r < 0 ? 1 : -1, v = a() - o(), g = m() + f;
-      if (g < 0 || g > v) return;
-      C(g), b(!0), u.startX = L(e), u.startY = X(e), t.onSlideChange?.(g);
+    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);
+        return;
+      }
+      o() > 1 && j(!0);
     }
-  }, p = (e) => {
-    if (!h || !u.isPressed) return;
-    u.isPressed = !1;
-    const r = B(e);
-    h.removeEventListener(r ? "mousemove" : "touchmove", R), h.removeEventListener(r ? "mouseup" : "touchend", p), r && h.removeEventListener("mouseleave", p);
-  }, W = (e) => {
-    if (a() <= 1 || !h) return;
-    const r = B(e);
-    r && e.button !== 0 || (e.stopPropagation(), u.isPressed = !0, u.startX = L(e), u.startY = X(e), h.addEventListener(r ? "mousemove" : "touchmove", R), h.addEventListener(r ? "mouseup" : "touchend", p), r && h.addEventListener("mouseleave", p));
-  }, _ = (e) => {
-    C(e), b(!0), t.onSlideChange?.(e);
-  }, E = (e) => {
-    const r = o() === 1, l = r ? a() : Math.ceil(a() / o()), d = m() + o(), c = a() - o() <= m(), n = (j(d, o(), a(), c) + e + l) % l;
-    return r ? n : n * o();
-  }, re = () => {
-    const e = a() - o() <= m(), r = o() === 1, l = r ? a() : Math.ceil(a() / o()), d = [];
-    for (let c = 0; c < l; c++) {
-      let s = c, n = m();
-      if (!r) {
-        const i = c === l - 1, f = m() + o();
-        s = i ? a() - o() : c * o(), n = j(f, o(), a(), e);
+    if (l.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);
       }
-      d.push({
+      l.lastX = t, l.lastT = W();
+    }
+  }, x = (e) => {
+    if (!l.isPressed) return;
+    const t = ce(e);
+    be(t);
+    const {
+      axis: a,
+      dragged: i,
+      startX: c,
+      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);
+    }
+    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, {
+      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;
+    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();
+      if (!t) {
+        const u = c === a - 1, w = g() + d();
+        r = u ? o() - d() : c * d(), n = ae(w, d(), o(), e);
+      }
+      i.push({
         index: c,
-        nextIndex: s,
+        nextIndex: r,
         isActive: n === c
       });
     }
-    return d;
-  }, se = () => {
-    const e = a() - o(), r = m() > e ? e : m();
-    return fe(o()) * r;
+    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);
+  });
+  A(() => {
+    if (!s.autoplay || o() <= 1 || s.pauseOnHover && ge() || y() !== null)
+      return;
+    const e = window.setInterval(() => p(R(1)), s.autoplayInterval);
+    ne(() => window.clearInterval(e));
+  }), A(() => {
+    if (y() === null || o() <= 1) return;
+    const e = (t) => {
+      t.key === "ArrowLeft" ? $(-1) : t.key === "ArrowRight" && $(1);
+    };
+    document.addEventListener("keydown", e), ne(() => 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);
   };
-  return M(() => {
-    if (!t.autoplay || a() <= 1 || t.pauseOnHover && ee()) return;
-    const e = window.setInterval(() => _(E(1)), t.autoplayInterval);
-    ue(() => window.clearInterval(e));
-  }), (() => {
-    var e = Se(), r = e.firstChild, l = r.firstChild, d = l.firstChild;
-    I(e, "mouseleave", t.pauseOnHover ? () => O(!1) : void 0), I(e, "mouseenter", t.pauseOnHover ? () => O(!0) : void 0);
-    var c = we(t.ref);
-    return typeof c == "function" && P(c, e), P((s) => y = s, r), S(r, w(N, {
+  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, {
       get when() {
-        return k();
+        return q();
       },
       get children() {
-        return w(J, {
+        return f(T, {
           name: "chevron_left",
           get size() {
-            return t.arrowsSize;
+            return s.arrowsSize;
           },
           get class() {
-            return x("smwb-carousel__arrow", "smwb-carousel__arrow_prev");
+            return b("smwb-carousel__arrow", "smwb-carousel__arrow_prev");
           },
           get style() {
             return {
-              top: `calc(50% - ${t.arrowsSize / 2}px)`,
-              left: `${-t.arrowsSize / 2}px`
+              top: `calc(50% - ${s.arrowsSize / 2}px)`,
+              left: `${-s.arrowsSize / 2}px`
             };
           },
-          onClick: () => _(E(-1))
+          onClick: () => p(R(-1))
         });
       }
-    }), l), I(l, "dragend", U), I(l, "dragstart", U), l.$$touchstart = W, l.$$mousedown = W, P((s) => h = s, l), S(d, w(G, {
+    }), a), k(a, "dragend", le), k(a, "dragstart", le), a.$$touchstart = Q, a.$$mousedown = Q, O((r) => v = r, a), m(i, f(oe, {
       get each() {
-        return T();
+        return N();
       },
-      children: (s, n) => (() => {
-        var i = pe(), f = i.firstChild;
-        return S(f, s), $((v) => {
-          var g = `${te}${n()}`, oe = ve(o());
-          return g !== v.e && F(i, "id", v.e = g), v.t = ne(i, oe, v.t), v;
+      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;
         }, {
           e: void 0,
-          t: void 0
-        }), i;
+          t: void 0,
+          a: void 0
+        }), u;
       })()
-    })), S(r, w(N, {
+    })), m(t, f(I, {
       get when() {
-        return k();
+        return q();
       },
       get children() {
-        return w(J, {
+        return f(T, {
           name: "chevron_right",
           get size() {
-            return t.arrowsSize;
+            return s.arrowsSize;
           },
           get class() {
-            return x("smwb-carousel__arrow", "smwb-carousel__arrow_next");
+            return b("smwb-carousel__arrow", "smwb-carousel__arrow_next");
           },
           get style() {
             return {
-              top: `calc(50% - ${t.arrowsSize / 2}px)`,
-              right: `${-t.arrowsSize / 2}px`
+              top: `calc(50% - ${s.arrowsSize / 2}px)`,
+              right: `${-s.arrowsSize / 2}px`
             };
           },
-          onClick: () => _(E(1))
+          onClick: () => p(R(1))
         });
       }
-    }), null), S(e, w(N, {
+    }), null), m(e, f(I, {
       get when() {
-        return t.showNavigation;
+        return s.showNavigation;
       },
       get children() {
-        var s = K();
-        return S(s, w(G, {
+        var r = ue();
+        return m(r, f(oe, {
           get each() {
-            return re();
+            return xe();
           },
-          children: (n) => t.navigationDotRenderer ? t.navigationDotRenderer(n.index, n.isActive, (i) => _(i)) : (() => {
-            var i = K();
-            return i.$$click = () => _(n.nextIndex), $(() => A(i, x("smwb-carousel__navigation__dot", n.isActive && "current"))), i;
+          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;
           })()
-        })), $(() => A(s, x("smwb-carousel__navigation", t.navigationClassName))), s;
+        })), P(() => z(r, b("smwb-carousel__navigation", s.navigationClassName))), r;
+      }
+    }), null), m(e, f(I, {
+      get when() {
+        return s.enableFullscreen;
+      },
+      get children() {
+        return f(Re, {
+          get open() {
+            return y() !== null;
+          },
+          size: "fullscreen",
+          backdrop: "darkBlured",
+          class: "smwb-carousel__fullscreen",
+          onClose: () => L(null),
+          "aria-label": "Image viewer",
+          get children() {
+            var r = Oe(), n = r.firstChild;
+            return m(r, f(I, {
+              get when() {
+                return o() > 1;
+              },
+              get children() {
+                return f(T, {
+                  name: "chevron_left",
+                  size: 40,
+                  get class() {
+                    return b("smwb-carousel__fullscreen-arrow", "smwb-carousel__fullscreen-arrow_prev");
+                  },
+                  onClick: () => $(-1)
+                });
+              }
+            }), n), n.$$touchend = $e, n.$$touchstart = Ce, m(n, () => ye()), m(r, f(I, {
+              get when() {
+                return o() > 1;
+              },
+              get children() {
+                return f(T, {
+                  name: "chevron_right",
+                  size: 40,
+                  get class() {
+                    return b("smwb-carousel__fullscreen-arrow", "smwb-carousel__fullscreen-arrow_next");
+                  },
+                  onClick: () => $(1)
+                });
+              }
+            }), null), m(r, f(T, {
+              name: "close",
+              size: 32,
+              class: "smwb-carousel__fullscreen-close",
+              onClick: () => L(null)
+            }), null), r;
+          }
+        });
       }
-    }), null), $((s) => {
-      var n = x("smwb-carousel", t.class), i = t["aria-label"], f = `translateX(-${se()}%)`, v = D() ? "transform 500ms cubic-bezier(.1, 0, .25, 1)" : "none";
-      return n !== s.e && A(e, s.e = n), i !== s.t && F(e, "aria-label", s.t = i), f !== s.a && q(d, "transform", s.a = f), v !== s.o && q(d, "transition", s.o = v), s;
+    }), 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;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
-      o: void 0
+      o: void 0,
+      i: void 0
     }), e;
   })();
 }
-ie(["mousedown", "touchstart", "click"]);
+Ee(["mousedown", "touchstart", "touchend", "click"]);
 export {
-  ye as Carousel
+  Qe as Carousel
 };
 //# sourceMappingURL=carousel.js.map