@scrippsproduct/networks-ui-library 1.1.0-alpha.0 → 1.1.0-alpha.2

package/dist/components/Carousel/Carousel.js

@@ -1,16 +1,16 @@
-import { jsx as o, Fragment as X, jsxs as K } from "react/jsx-runtime";
-import { useRef as s, useState as P, useEffect as B, useCallback as d } from "react";
-import { chunkArray as Y, classes as _ } from "../../utils/helpers.js";
-import Z from "./CarouselUtils.class.js";
-import { CarouselSlide as ee } from "../CarouselSlide/CarouselSlide.js";
-import { c as a } from "../../Carousel.module-DOrBKQEQ.mjs";
-import { C as re } from "../../chevron-left-DRvpaLmK.mjs";
-import { C as te } from "../../chevron-right-C8yCnmfx.mjs";
-const b = window.matchMedia("(width <= 600px)"), z = window.matchMedia("(width <= 800px"), E = window.matchMedia("(width <= 1024px"), L = window.matchMedia("(width <= 1280px");
-function de({
-  id: g,
-  slides: x,
-  options: I = {
+import { jsx as o, Fragment as Q, jsxs as K } from "react/jsx-runtime";
+import { useRef as s, useState as C, useEffect as j, useCallback as i } from "react";
+import { chunkArray as X, classes as A } from "../../utils/helpers.js";
+import Y from "./CarouselUtils.class.js";
+import { CarouselSlide as Z } from "../CarouselSlide/CarouselSlide.js";
+import { c as a } from "../../Carousel.module-CNJzZW2-.mjs";
+import { C as ee } from "../../chevron-left-DRvpaLmK.mjs";
+import { C as re } from "../../chevron-right-C8yCnmfx.mjs";
+const _ = window.matchMedia("(width <= 600px)"), P = window.matchMedia("(width <= 800px"), b = window.matchMedia("(width <= 1024px"), z = window.matchMedia("(width <= 1280px");
+function ue({
+  id: E,
+  cells: L,
+  options: x = {
     paginationType: "dots",
     showControls: !0,
     controlArrowSize: 48,
@@ -31,18 +31,17 @@ function de({
     wrapAround: !0
   }
 }) {
-  console.log(`Carousel component with id: ${g} initialized`);
-  const p = s(`carousel-${g}`), R = s(null), i = s(null), $ = s(null), m = s(x), T = s(null), S = s(null), r = s(null), e = s(I), l = s(I), N = s("-50%"), [M, G] = P([]), [k, H] = P([]), [D, U] = P(0);
-  B(() => {
+  const h = s(`carousel-${E}`), I = s(null), c = s(null), R = s(null), p = s([...L]), T = s(null), m = s(null), r = s(null), e = s(x), l = s(x), $ = s("-50%"), [N, B] = C([]), [M, G] = C([]), [k, H] = C(0);
+  j(() => {
     const t = () => {
-      b.matches ? e.current = {
+      _.matches ? e.current = {
         ...l.current,
         showControls: !1,
         showPagination: !1,
         cellsPerSlide: 1,
         cellsPosition: l.current.wrapAround ? "center" : "flex-start",
         gutterSize: 10
-      } : z.matches ? l.current.cellsPerSlide !== 1 ? e.current = {
+      } : P.matches ? l.current.cellsPerSlide !== 1 ? e.current = {
         ...l.current,
         cellsPerSlide: 2,
         showControls: !1,
@@ -51,7 +50,7 @@ function de({
         ...l.current,
         showControls: !1,
         gutterSize: 10
-      } : E.matches ? l.current.cellsPerSlide !== 1 && l.current.cellsPerSlide !== 2 ? e.current = {
+      } : b.matches ? l.current.cellsPerSlide !== 1 && l.current.cellsPerSlide !== 2 ? e.current = {
         ...l.current,
         cellsPerSlide: 3,
         showControls: !1,
@@ -60,7 +59,7 @@ function de({
         ...l.current,
         showControls: !1,
         gutterSize: 10
-      } : L.matches ? l.current.showPagination ? e.current = {
+      } : z.matches ? l.current.showPagination ? e.current = {
         ...l.current,
         showControls: !1
       } : e.current = {
@@ -71,120 +70,122 @@ function de({
     };
     t();
     const n = () => {
-      U((u) => u + 1), t();
+      H((u) => u + 1), t();
     };
-    return b.addEventListener("change", n), z.addEventListener("change", n), E.addEventListener("change", n), L.addEventListener("change", n), () => {
-      b.removeEventListener("change", n), z.removeEventListener("change", n), E.removeEventListener("change", n), L.removeEventListener("change", n);
+    return _.addEventListener("change", n), P.addEventListener("change", n), b.addEventListener("change", n), z.addEventListener("change", n), () => {
+      _.removeEventListener("change", n), P.removeEventListener("change", n), b.removeEventListener("change", n), z.removeEventListener("change", n);
     };
   }, []);
-  const O = d((t, n) => {
-    const u = Y(n, t);
-    H([...u]);
-    let h = [];
-    for (let c = 0; c <= u.length - 1; c++) {
-      h[c] = {}, h[c].ariaLabel = `${c + 1} of ${u.length}`, h[c].layout = u[c][0].layout, h[c].cells = [];
-      for (let w = 0; w <= u[c].length - 1; w++)
-        h[c].cells[w] = {
-          props: u[c][w].props
-        };
-    }
-    const C = [...h], A = [...h], J = C.slice(-1), Q = C.slice(0);
-    return A.push(Q[0]), A.unshift(J[0]), e.current.wrapAround && t.length > n ? A : C;
-  }, []), f = d(() => {
-    e.current.autoplay && r.current.clearTimer();
-  }, []), F = d((t) => {
-    f();
+  const D = i((t, n) => {
+    const u = X(n, t);
+    G([...u]);
+    let S = [];
+    for (let f = 0; f <= u.length - 1; f++)
+      S[f] = {
+        ariaLabel: `${f + 1} of ${u.length}`,
+        layout: u[f][0].layout || "",
+        cells: [
+          ...u[f]
+        ]
+      };
+    const v = [...S], y = [...S], q = v.slice(-1), J = v.slice(0);
+    return y.push(J[0]), y.unshift(q[0]), e.current.wrapAround && t.length > n ? y : v;
+  }, []), d = i(() => {
+    e.current.autoplay && r.current && r.current.clearTimer();
+  }, []), U = i((t) => {
+    d();
     const n = t.key;
-    n === "ArrowLeft" ? (t.preventDefault(), r.current.determineScrollAction(-1)) : n === "ArrowRight" && (t.preventDefault(), r.current.determineScrollAction(1));
-  }, [f]), W = d(() => {
-    f(), i.current.addEventListener("scrollend", () => {
-      r.current.handleScrollEnd();
+    n === "ArrowLeft" ? (t.preventDefault(), r.current && r.current.determineScrollAction(-1)) : n === "ArrowRight" && (t.preventDefault(), r.current && r.current.determineScrollAction(1));
+  }, [d]), F = i(() => {
+    d(), c.current !== null && c.current.addEventListener("scrollend", () => {
+      r.current && r.current.handleScrollEnd();
     }, { once: !0 });
-  }, [f]), v = d(() => {
-    f(), i.current.addEventListener("scrollend", () => {
-      r.current.handleScrollEnd(), i.current.addEventListener("scroll", v, { once: !0 });
+  }, [d]), w = i(() => {
+    d(), c.current !== null && c.current.addEventListener("scrollend", () => {
+      r.current && r.current.handleScrollEnd(), c.current && c.current.addEventListener("scroll", w, { once: !0 });
     }, { once: !0 });
-  }, [f]), q = () => {
+  }, [d]), W = () => {
     r.current && e.current.autoplay && r.current.clearTimer();
-  }, y = d(() => {
+  }, g = i(() => {
     //! make sure class is only instantiated once because of reacts
     //! "strict" mode double do hocus pocus
     var t, n;
-    r.current !== null && D > 0 && ((n = (t = r.current).clearTimer) == null || n.call(t), r.current = null), r.current = new Z({
-      carouselEl: R.current,
-      scrollerEl: i.current,
-      paginationEl: $.current,
-      slides: m.current,
+    r.current !== null && k > 0 && ((n = (t = r.current).clearTimer) == null || n.call(t), r.current = null), r.current = new Y({
+      carouselEl: I.current,
+      scrollerEl: c.current,
+      paginationEl: R.current,
+      cells: p.current,
       navBtnEls: {
         next: T.current,
-        previous: S.current
+        previous: m.current
       },
-      id: p.current,
+      id: h.current,
       options: {
         autoplay: e.current.autoplay,
-        wrapAround: e.current.wrapAround && m.current.length > e.current.cellsPerSlide,
+        wrapAround: e.current.wrapAround && p.current.length > (e.current.cellsPerSlide || 1),
         showPagination: e.current.showPagination,
         delay: e.current.autoplayDelay,
         slideGutterSize: e.current.gutterSize,
         slideAspectRatio: e.current.slideAspectRatio,
-        showControls: e.current.showControls && m.current.length > e.current.cellsPerSlide,
+        showControls: e.current.showControls && p.current.length > (e.current.cellsPerSlide || 1),
         cellsPerSlide: e.current.cellsPerSlide
       }
     });
-  }, [D]), V = d(() => {
-    i.current.addEventListener("scroll", v, { once: !0 });
-  }, [v]), j = d(() => {
-    if (G(O(m.current, e.current.cellsPerSlide)), m.current.length > e.current.cellsPerSlide) {
+  }, [k]), O = i(() => {
+    c.current && c.current.addEventListener("scroll", w, { once: !0 });
+  }, [w]), V = i(() => {
+    if (B(D(p.current, e.current.cellsPerSlide ?? 1)), p.current.length > (e.current.cellsPerSlide ?? 1)) {
       let t = setInterval(() => {
-        i.current !== null && (S.current !== null && e.current.showControls || !e.current.showControls) && (clearInterval(t), V(), y());
+        c.current !== null && (m.current !== null && e.current.showControls || !e.current.showControls) && (clearInterval(t), O(), g());
       }, 100);
     } else {
       let t = setInterval(() => {
-        i.current !== null && (clearInterval(t), y());
+        c.current !== null && (clearInterval(t), g());
       }, 100);
     }
-  }, [O, V, y]);
-  return B(() => {
+  }, [D, O, g]);
+  return j(() => {
     if (e.current !== null) {
       if (e.current.showControls) {
         let t = 0;
-        e.current.showPagination && (t = t + 25), e.current.showScrollbar && (t = t + 6), N.current = `calc(-50% - ${t}px)`;
+        e.current.showPagination && (t = t + 25), e.current.showScrollbar && (t = t + 6), $.current = `calc(-50% - ${t}px)`;
       }
-      j();
+      V();
     }
     return () => {
-      q();
+      W();
     };
-  }, [j, e]), /* @__PURE__ */ o(X, { children: e.current !== null && /* @__PURE__ */ K(
+  }, [V, e]), /* @__PURE__ */ o(Q, { children: e.current !== null && /* @__PURE__ */ K(
     "div",
     {
+      "aria-label": e.current.title,
+      "aria-roledescription": "carousel",
       className: a.carousel,
-      id: p.current,
-      ref: R,
-      tabIndex: -1,
+      id: h.current,
+      ref: I,
       role: "region",
-      "aria-roledescription": "carousel",
-      "aria-label": e.current.title,
-      onKeyDown: F,
       style: {
-        "--_carousel-gutters": e.current.wrapAround ? `${e.current.gutterSize <= 25 ? e.current.gutterSize : 25}%` : `0 ${e.current.gutterSize <= 25 ? e.current.gutterSize : 25}%`,
+        "--_carousel-gutters": e.current.wrapAround ? `${(e.current.gutterSize ?? 25) <= 25 ? e.current.gutterSize ?? 25 : 25}%` : `0 ${(e.current.gutterSize ?? 25) <= 25 ? e.current.gutterSize ?? 25 : 25}%`,
         "--_slide-aspect-ratio": e.current.slideAspectRatio,
         "--_cell-aspect-ratio": e.current.cellAspectRatio,
-        "--_slide-cell-size": `${100 / e.current.cellsPerSlide}%`,
+        "--_slide-cell-size": `${100 / (e.current.cellsPerSlide ?? 1)}%`,
         "--_cells-position": e.current.cellsPosition,
-        "--_control-btns-offset-x": `${e.current.controlButtonsOffset}rem`,
-        "--_slide-gap": `${e.current.slideGap}rem`,
-        "--_controls-transform": N.current
+        "--_control-btns-offset-x": `${e.current.controlButtonsOffset ?? 0}rem`,
+        "--_slide-gap": `${e.current.slideGap ?? 0}rem`,
+        "--_controls-transform": $.current
       },
+      tabIndex: -1,
+      onKeyDown: U,
       children: [
         /* @__PURE__ */ o(
           "ol",
           {
+            "aria-label": "Items Scroller",
+            "aria-live": "polite",
             className: a.carousel__scroller,
-            ref: i,
+            "data-scrollbar": e.current.showScrollbar,
+            ref: c,
             role: "group",
-            "aria-label": "Items Scroller",
-            "aria-live": "Polite",
             tabIndex: 0,
             onMouseEnter: () => {
               e.current.autoplay && r.current !== null && r.current.clearTimer();
@@ -192,32 +193,31 @@ function de({
             onMouseLeave: () => {
               e.current.autoplay && r.current !== null && r.current.startTimer();
             },
-            onTouchStart: W,
-            "data-scrollbar": e.current.showScrollbar,
-            children: M.length > 0 && M.map((t, n) => /* @__PURE__ */ o(
-              ee,
+            onTouchStart: F,
+            children: N.length > 0 && N.map((t, n) => /* @__PURE__ */ o(
+              Z,
               {
-                slide: t,
-                index: n,
                 currentIndex: e.current.wrapAround ? 1 : 0,
+                index: n,
+                slide: { ...t, ariaLabel: t.ariaLabel || "" },
                 variableHeight: e.current.variableHeight
               },
-              `carousel${g}-slide${n}`
+              `carousel${E}-slide${n}`
             ))
           }
         ),
-        e.current.showControls && x.length > e.current.cellsPerSlide && /* @__PURE__ */ K("div", { className: a["carousel-controls"], children: [
+        e.current.showControls && L.length > (e.current.cellsPerSlide ?? 1) && /* @__PURE__ */ K("div", { className: a["carousel-controls"], children: [
           /* @__PURE__ */ o(
             "button",
             {
-              type: "button",
-              ref: S,
-              title: "Previous Item",
-              className: _([a["carousel-controls__btn"], a["carousel-controls__previous"], "carousel-controls__previous"]),
-              "aria-controls": p.current,
+              "aria-controls": h.current,
               "aria-label": "Previous Item",
+              className: A([a["carousel-controls__btn"], a["carousel-controls__previous"], "carousel-controls__previous"]),
+              ref: m,
+              title: "Previous Item",
+              type: "button",
               onClick: () => {
-                r.current.determineScrollAction(-1);
+                r.current && r.current.determineScrollAction(-1);
               },
               onMouseEnter: () => {
                 e.current.autoplay && r.current !== null && r.current.clearTimer();
@@ -225,20 +225,20 @@ function de({
               onMouseLeave: () => {
                 e.current.autoplay && r.current !== null && r.current.startTimer();
               },
-              children: /* @__PURE__ */ o("i", { "aria-hidden": "true", children: /* @__PURE__ */ o(re, { width: e.current.controlArrowSize, height: e.current.controlArrowSize }) })
+              children: /* @__PURE__ */ o("i", { "aria-hidden": "true", children: /* @__PURE__ */ o(ee, { height: e.current.controlArrowSize, width: e.current.controlArrowSize }) })
             }
           ),
           /* @__PURE__ */ o(
             "button",
             {
-              type: "button",
+              "aria-controls": h.current,
+              "aria-label": "Next Item",
+              className: A([a["carousel-controls__btn"], a["carousel-controls__next"], "carousel-controls__next"]),
               ref: T,
               title: "Next Item",
-              className: _([a["carousel-controls__btn"], a["carousel-controls__next"], "carousel-controls__next"]),
-              "aria-controls": p.current,
-              "aria-label": "Next Item",
+              type: "button",
               onClick: () => {
-                r.current.determineScrollAction(1);
+                r.current && r.current.determineScrollAction(1);
               },
               onMouseEnter: () => {
                 e.current.autoplay && r.current !== null && r.current.clearTimer();
@@ -246,27 +246,27 @@ function de({
               onMouseLeave: () => {
                 e.current.autoplay && r.current !== null && r.current.startTimer();
               },
-              children: /* @__PURE__ */ o("i", { "aria-hidden": "true", children: /* @__PURE__ */ o(te, { width: e.current.controlArrowSize, height: e.current.controlArrowSize }) })
+              children: /* @__PURE__ */ o("i", { "aria-hidden": "true", children: /* @__PURE__ */ o(re, { height: e.current.controlArrowSize, width: e.current.controlArrowSize }) })
             }
           )
         ] }),
-        e.current.showPagination && k.length > 1 && /* @__PURE__ */ o("div", { className: [a["carousel-nav"], "carousel-nav"].join(" "), children: /* @__PURE__ */ o("ol", { className: a["carousel-nav__list"], ref: $, children: k.map((t, n) => /* @__PURE__ */ o(
+        e.current.showPagination && M.length > 1 && /* @__PURE__ */ o("div", { className: [a["carousel-nav"], "carousel-nav"].join(" "), children: /* @__PURE__ */ o("ol", { className: a["carousel-nav__list"], ref: R, children: M.map((t, n) => /* @__PURE__ */ o(
           "li",
           {
-            className: _([a["carousel-nav__item"], "carousel-nav__item"]),
+            className: A([a["carousel-nav__item"], "carousel-nav__item"]),
             "data-current": n === 0 ? "true" : "false",
+            title: `Navigate to slide ${n + 1}`,
             onClick: () => {
-              r.current.navigateToIndex(n);
-            },
-            title: `Navigate to slide ${n + 1}`
+              r.current && r.current.navigateToIndex(n);
+            }
           },
-          `carousel${p}-nav-${n}`
+          `carousel${h}-nav-${n}`
         )) }) })
       ]
     }
   ) });
 }
 export {
-  de as Carousel,
-  de as default
+  ue as Carousel,
+  ue as default
 };

package/dist/components/Carousel/CarouselUtils.class.d.ts

@@ -1,34 +1,24 @@
+import { CarouselCell, CarouselOptions, CarouselNavBtnEls, CarouselUtilsConstructorParams } from '../../types';
 export default class CarouselUtils {
-    constructor({ carouselEl, scrollerEl, paginationEl, slides, navBtnEls, options }: {
-        carouselEl: any;
-        scrollerEl: any;
-        paginationEl: any;
-        slides: any;
-        navBtnEls?: {
-            next: {};
-            previous: {};
-        } | undefined;
-        options: any;
-    });
-    carouselEl: any;
-    scrollerEl: any;
-    paginationEl: any;
-    slides: any;
+    #private;
+    carouselEl: HTMLElement;
+    scrollerEl: HTMLElement;
+    paginationEl: HTMLElement;
+    cells: CarouselCell[];
     currentIndex: number;
-    slideEls: any[];
-    navBtnEls: {
-        next: {};
-        previous: {};
-    };
-    currentIntersecting: {};
-    options: any;
-    timer: NodeJS.Timeout | null;
-    timerInterval: any;
-    slideGutterSize: any;
-    showPagination: any;
+    slideEls: HTMLElement[];
+    navBtnEls: CarouselNavBtnEls;
+    currentIntersecting: IntersectionObserverEntry | Record<string, never>;
+    options: CarouselOptions;
+    timer: NodeJS.Timeout | null | undefined;
+    timerInterval: number | undefined;
+    slideGutterSize: number;
+    showPagination: boolean | undefined;
     isInitialScroll: boolean;
     totalSlideEls: number;
     totalSlides: number;
+    carouselObserver: IntersectionObserver | undefined;
+    constructor({ carouselEl, scrollerEl, paginationEl, cells, navBtnEls, options, }: CarouselUtilsConstructorParams);
     /**
      * starts the autoplay timer
      */
@@ -63,6 +53,4 @@ export default class CarouselUtils {
      * @returns void
      */
     handleScrollEnd(): void;
-    carouselObserver: IntersectionObserver | undefined;
-    #private;
 }