@scrippsproduct/networks-ui-library 1.1.9 → 1.1.10-alpha.0

package/dist/components/BCVideoPlayer/BCVideoPlayer.test.js

@@ -0,0 +1,295 @@
+import { jsx as t } from "react/jsx-runtime";
+import { v as l, d, b as h, a as I, i as a, r as c, g as r, f as u, w as y } from "../../react.esm-DLSrfVwM.mjs";
+import "../../index-BVxBrkZB.mjs";
+import { BCVideoPlayer as n } from "./BCVideoPlayer.js";
+const w = {
+  play: l.fn().mockResolvedValue(void 0),
+  pause: l.fn(),
+  muted: l.fn(),
+  dispose: l.fn(),
+  on: l.fn()
+};
+d("BCVideoPlayer", () => {
+  h(() => {
+    l.clearAllMocks(), window.bc = l.fn(() => w), document.querySelectorAll("#video-js-script").forEach((e) => e.remove());
+  }), I(() => {
+    document.querySelectorAll("#video-js-script").forEach((e) => e.remove()), delete window.bc;
+  }), d("Basic Rendering", () => {
+    a("should render with valid bcId", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { bcId: "123456" })), o = e.querySelector(".video-player__wrapper");
+      r(o).toBeInTheDocument();
+    }), a("should render wrapper with correct id", () => {
+      c(/* @__PURE__ */ t(n, { bcId: "123456" }));
+      const e = document.getElementById("video-player-wrapper");
+      r(e).toHaveAttribute("id", "video-player-wrapper");
+    }), a("should render wrapper with correct class", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { bcId: "123456" })), o = e.querySelector(".video-player__wrapper");
+      r(o).toHaveClass("video-player__wrapper");
+    }), a("should set key attribute to bcId", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { bcId: "video-123" })), o = e.querySelector(".video-player__wrapper");
+      r(o).toBeInTheDocument();
+    });
+  }), d("Null/Empty bcId Handling", () => {
+    a("should return null when bcId is null", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { bcId: null }));
+      r(e.firstChild).toBeNull();
+    }), a("should return null when bcId is undefined", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { bcId: void 0 }));
+      r(e.firstChild).toBeNull();
+    }), a("should return null when bcId is empty string", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { bcId: "" }));
+      r(e.firstChild).toBeNull();
+    }), a("should render when bcId is valid string", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { bcId: "valid-id" })), o = e.querySelector(".video-player__wrapper");
+      r(o).toBeInTheDocument();
+    });
+  }), d("Default Props", () => {
+    a("should use default playerElId of bc-player", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { bcId: "123456" })), o = e.querySelector(".video-player__wrapper");
+      r(o).toBeInTheDocument();
+    }), a("should use default containerClosing of false", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { bcId: "123456" })), o = e.querySelector(".video-player__wrapper");
+      r(o).toBeInTheDocument();
+    }), a("should use default autoplay of false", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { bcId: "123456" })), o = e.querySelector(".video-player__wrapper");
+      r(o).toBeInTheDocument();
+    }), a("should use default mute of false", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { bcId: "123456" })), o = e.querySelector(".video-player__wrapper");
+      r(o).toBeInTheDocument();
+    }), a("should use default pauseVideo of false", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { bcId: "123456" })), o = e.querySelector(".video-player__wrapper");
+      r(o).toBeInTheDocument();
+    }), a("should use default empty string for BC_AID", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { bcId: "123456" })), o = e.querySelector(".video-player__wrapper");
+      r(o).toBeInTheDocument();
+    }), a("should use default empty string for BC_PLAYERID", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { bcId: "123456" })), o = e.querySelector(".video-player__wrapper");
+      r(o).toBeInTheDocument();
+    }), a("should use default empty string for BC_EMBEDID", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { bcId: "123456" })), o = e.querySelector(".video-player__wrapper");
+      r(o).toBeInTheDocument();
+    });
+  }), d("Custom Props", () => {
+    a("should accept custom playerElId", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { bcId: "123456", playerElId: "custom-player" })), o = e.querySelector(".video-player__wrapper");
+      r(o).toBeInTheDocument();
+    }), a("should accept containerClosing prop", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { containerClosing: !0, bcId: "123456" })), o = e.querySelector(".video-player__wrapper");
+      r(o).toBeInTheDocument();
+    }), a("should accept autoplay prop", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { autoplay: !0, bcId: "123456" })), o = e.querySelector(".video-player__wrapper");
+      r(o).toBeInTheDocument();
+    }), a("should accept mute prop", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { mute: !0, bcId: "123456" })), o = e.querySelector(".video-player__wrapper");
+      r(o).toBeInTheDocument();
+    }), a("should accept pauseVideo prop", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { pauseVideo: !0, bcId: "123456" })), o = e.querySelector(".video-player__wrapper");
+      r(o).toBeInTheDocument();
+    }), a("should accept BC_AID prop", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { BC_AID: "account123", bcId: "123456" })), o = e.querySelector(".video-player__wrapper");
+      r(o).toBeInTheDocument();
+    }), a("should accept BC_PLAYERID prop", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { BC_PLAYERID: "player456", bcId: "123456" })), o = e.querySelector(".video-player__wrapper");
+      r(o).toBeInTheDocument();
+    }), a("should accept BC_EMBEDID prop", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { BC_EMBEDID: "embed789", bcId: "123456" })), o = e.querySelector(".video-player__wrapper");
+      r(o).toBeInTheDocument();
+    });
+  }), d("Keyboard Event Handlers", () => {
+    a("should call handleClosing when Escape key is pressed", () => {
+      const e = l.fn(), { container: o } = c(
+        /* @__PURE__ */ t(n, { bcId: "123456", handleClosing: e })
+      ), p = o.querySelector(".video-player__wrapper");
+      u.keyUp(p, { key: "Escape" }), r(e).toHaveBeenCalledTimes(1);
+    }), a("should not call handleClosing when other keys are pressed", () => {
+      const e = l.fn(), { container: o } = c(
+        /* @__PURE__ */ t(n, { bcId: "123456", handleClosing: e })
+      ), p = o.querySelector(".video-player__wrapper");
+      u.keyUp(p, { key: "Enter" }), r(e).not.toHaveBeenCalled();
+    }), a("should preventDefault on Escape keyUp", () => {
+      const e = l.fn(), { container: o } = c(
+        /* @__PURE__ */ t(n, { bcId: "123456", handleClosing: e })
+      ), p = o.querySelector(".video-player__wrapper"), s = new KeyboardEvent("keyup", { key: "Escape", bubbles: !0, cancelable: !0 }), i = l.spyOn(s, "preventDefault");
+      p.dispatchEvent(s), r(i).toHaveBeenCalled();
+    }), a("should stopPropagation on Escape keyDown", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { bcId: "123456" })), o = e.querySelector(".video-player__wrapper"), p = new KeyboardEvent("keydown", { key: "Escape", bubbles: !0, cancelable: !0 }), s = l.spyOn(p, "stopPropagation"), i = l.spyOn(p, "preventDefault");
+      o.dispatchEvent(p), r(s).toHaveBeenCalled(), r(i).toHaveBeenCalled();
+    }), a("should not stop propagation for non-Escape keys on keyDown", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { bcId: "123456" })), o = e.querySelector(".video-player__wrapper");
+      u.keyDown(o, { key: "Enter" }), r(o).toBeInTheDocument();
+    });
+  }), d("handleClosing Default Behavior", () => {
+    a("should use default handleClosing that returns true", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { bcId: "123456" })), o = e.querySelector(".video-player__wrapper");
+      u.keyUp(o, { key: "Escape" }), r(o).toBeInTheDocument();
+    }), a("should accept custom handleClosing function", () => {
+      const e = l.fn(), { container: o } = c(
+        /* @__PURE__ */ t(n, { bcId: "123456", handleClosing: e })
+      ), p = o.querySelector(".video-player__wrapper");
+      u.keyUp(p, { key: "Escape" }), r(e).toHaveBeenCalled();
+    });
+  }), d("Script Loading", () => {
+    a("should add script element to document body", async () => {
+      c(
+        /* @__PURE__ */ t(
+          n,
+          {
+            BC_AID: "account123",
+            BC_EMBEDID: "default",
+            BC_PLAYERID: "player456",
+            bcId: "123456"
+          }
+        )
+      ), await y(() => {
+        const e = document.querySelector("#video-js-script");
+        r(e).toBeInTheDocument();
+      }, { timeout: 200 });
+    }), a("should set correct script src with account and player IDs", async () => {
+      c(
+        /* @__PURE__ */ t(
+          n,
+          {
+            BC_AID: "acc123",
+            BC_EMBEDID: "default",
+            BC_PLAYERID: "play456",
+            bcId: "video789"
+          }
+        )
+      ), await y(() => {
+        const e = document.querySelector("#video-js-script");
+        r(e == null ? void 0 : e.src).toContain("acc123"), r(e == null ? void 0 : e.src).toContain("play456");
+      }, { timeout: 200 });
+    }), a("should set script id to video-js-script", async () => {
+      c(
+        /* @__PURE__ */ t(
+          n,
+          {
+            BC_AID: "account",
+            BC_EMBEDID: "default",
+            BC_PLAYERID: "player",
+            bcId: "123"
+          }
+        )
+      ), await y(() => {
+        const e = document.querySelector("#video-js-script");
+        r(e).toHaveAttribute("id", "video-js-script");
+      }, { timeout: 200 });
+    });
+  }), d("Edge Cases", () => {
+    a("should handle bcId with special characters", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { bcId: "video-123-abc_def" })), o = e.querySelector(".video-player__wrapper");
+      r(o).toBeInTheDocument();
+    }), a("should handle very long bcId", () => {
+      const e = "a".repeat(100), { container: o } = c(/* @__PURE__ */ t(n, { bcId: e })), p = o.querySelector(".video-player__wrapper");
+      r(p).toBeInTheDocument();
+    }), a("should handle numeric bcId", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { bcId: "123456789" })), o = e.querySelector(".video-player__wrapper");
+      r(o).toBeInTheDocument();
+    }), a("should handle bcId with spaces", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { bcId: "video 123" })), o = e.querySelector(".video-player__wrapper");
+      r(o).toBeInTheDocument();
+    });
+  }), d("Component Updates", () => {
+    a("should handle bcId changes", () => {
+      const { rerender: e, container: o } = c(/* @__PURE__ */ t(n, { bcId: "video1" }));
+      let p = o.querySelector(".video-player__wrapper");
+      r(p).toBeInTheDocument(), e(/* @__PURE__ */ t(n, { bcId: "video2" })), p = o.querySelector(".video-player__wrapper"), r(p).toBeInTheDocument();
+    }), a("should unmount when bcId becomes empty", () => {
+      const { rerender: e, container: o } = c(/* @__PURE__ */ t(n, { bcId: "video1" }));
+      let p = o.querySelector(".video-player__wrapper");
+      r(p).toBeInTheDocument(), e(/* @__PURE__ */ t(n, { bcId: "" })), p = o.querySelector(".video-player__wrapper"), r(p).not.toBeInTheDocument();
+    }), a("should remount when bcId changes from empty to valid", () => {
+      const { rerender: e, container: o } = c(/* @__PURE__ */ t(n, { bcId: "" }));
+      let p = o.querySelector(".video-player__wrapper");
+      r(p).not.toBeInTheDocument(), e(/* @__PURE__ */ t(n, { bcId: "video1" })), p = o.querySelector(".video-player__wrapper"), r(p).toBeInTheDocument();
+    });
+  }), d("Integration Tests", () => {
+    a("should render with all props provided", () => {
+      const e = l.fn(), { container: o } = c(
+        /* @__PURE__ */ t(
+          n,
+          {
+            autoplay: !0,
+            mute: !0,
+            BC_AID: "account123",
+            BC_EMBEDID: "embed789",
+            BC_PLAYERID: "player456",
+            bcId: "video123",
+            containerClosing: !1,
+            handleClosing: e,
+            pauseVideo: !1,
+            playerElId: "custom-player"
+          }
+        )
+      ), p = o.querySelector(".video-player__wrapper");
+      r(p).toBeInTheDocument(), r(p).toHaveAttribute("id", "video-player-wrapper");
+    }), a("should handle keyboard events with all props", () => {
+      const e = l.fn(), { container: o } = c(
+        /* @__PURE__ */ t(
+          n,
+          {
+            autoplay: !0,
+            mute: !0,
+            BC_AID: "account",
+            BC_EMBEDID: "embed",
+            BC_PLAYERID: "player",
+            bcId: "video",
+            handleClosing: e
+          }
+        )
+      ), p = o.querySelector(".video-player__wrapper");
+      u.keyUp(p, { key: "Escape" }), r(e).toHaveBeenCalledTimes(1);
+    });
+  }), d("Ref Handling", () => {
+    a("should create wrapper ref", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { bcId: "123456" })), o = e.querySelector(".video-player__wrapper");
+      r(o).toBeInTheDocument();
+    }), a("should maintain ref across rerenders", () => {
+      const { rerender: e, container: o } = c(/* @__PURE__ */ t(n, { bcId: "video1" })), p = o.querySelector(".video-player__wrapper");
+      r(p).toBeInTheDocument(), e(/* @__PURE__ */ t(n, { autoplay: !0, bcId: "video1" }));
+      const s = o.querySelector(".video-player__wrapper");
+      r(s).toBeInTheDocument();
+    });
+  }), d("Boolean Props", () => {
+    a("should handle autoplay true", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { autoplay: !0, bcId: "123" }));
+      r(e.querySelector(".video-player__wrapper")).toBeInTheDocument();
+    }), a("should handle autoplay false", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { autoplay: !1, bcId: "123" }));
+      r(e.querySelector(".video-player__wrapper")).toBeInTheDocument();
+    }), a("should handle mute true", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { mute: !0, bcId: "123" }));
+      r(e.querySelector(".video-player__wrapper")).toBeInTheDocument();
+    }), a("should handle mute false", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { bcId: "123", mute: !1 }));
+      r(e.querySelector(".video-player__wrapper")).toBeInTheDocument();
+    }), a("should handle pauseVideo true", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { pauseVideo: !0, bcId: "123" }));
+      r(e.querySelector(".video-player__wrapper")).toBeInTheDocument();
+    }), a("should handle pauseVideo false", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { bcId: "123", pauseVideo: !1 }));
+      r(e.querySelector(".video-player__wrapper")).toBeInTheDocument();
+    }), a("should handle containerClosing true", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { containerClosing: !0, bcId: "123" }));
+      r(e.querySelector(".video-player__wrapper")).toBeInTheDocument();
+    }), a("should handle containerClosing false", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { bcId: "123", containerClosing: !1 }));
+      r(e.querySelector(".video-player__wrapper")).toBeInTheDocument();
+    });
+  }), d("Conditional Rendering", () => {
+    a("should render wrapper when bcId is valid", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { bcId: "valid-id" })), o = e.querySelector(".video-player__wrapper");
+      r(o).toBeInTheDocument();
+    }), a("should not render wrapper when bcId is invalid", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { bcId: "" })), o = e.querySelector(".video-player__wrapper");
+      r(o).not.toBeInTheDocument();
+    }), a("should return null element when bcId is empty", () => {
+      const { container: e } = c(/* @__PURE__ */ t(n, { bcId: "" }));
+      r(e.firstChild).toBeNull();
+    }), a("should return div element when bcId is valid", () => {
+      var o;
+      const { container: e } = c(/* @__PURE__ */ t(n, { bcId: "valid" }));
+      r(e.firstChild).not.toBeNull(), r((o = e.firstChild) == null ? void 0 : o.nodeName).toBe("DIV");
+    });
+  });
+});

package/dist/components/BasicGridModule/BasicGridModule.js

@@ -1,13 +1,13 @@
 import { jsxs as p, Fragment as j, jsx as u } from "react/jsx-runtime";
-import { useState as n, useRef as g, useCallback as F, useEffect as y, createElement as G } from "react";
-import { classes as O } from "../../utils/helpers.js";
-import { blockLayoutsMap as _ } from "../../settings.js";
-import { EqualSizeGrid as q } from "../EqualSizeGrid/EqualSizeGrid.js";
-import { InfoPanel as z } from "../InfoPanel/InfoPanel.js";
-import '../../assets/BasicGridModule.css';function K({
-  gap: b = "1.5rem",
+import { useState as a, useRef as y, useCallback as F, useEffect as b, createElement as O } from "react";
+import { classes as _ } from "../../utils/helpers.js";
+import { blockLayoutsMap as q } from "../../settings.js";
+import { EqualSizeGrid as z } from "../EqualSizeGrid/EqualSizeGrid.js";
+import { InfoPanel as A } from "../InfoPanel/InfoPanel.js";
+import '../../assets/BasicGridModule.css';function Q({
+  gap: L = "1.5rem",
   itemsPerRow: k = 4,
-  classname: L = "",
+  classname: E = "",
   title: d = "",
   itemComponent: s = {
     layout: "ImageCard",
@@ -15,45 +15,49 @@ import '../../assets/BasicGridModule.css';function K({
       fullCardClickable: !1
     }
   },
-  infoPanelComponent: r = {
+  infoPanelComponent: n = {
     layout: "",
     backButtonLabel: "Return to List",
     resourceList: [],
     classname: ""
   },
-  items: E = [],
+  items: v = [],
   customClicksHandler: I = null,
-  noAnimation: v = !1
+  noAnimation: x = !1
 }) {
-  const [a, f] = n(!1), [x, C] = n({}), [m, B] = n(void 0), [R, c] = n("entering"), [M, N] = n(v ? null : !0), o = g("entering"), e = g(null), i = F(() => {
+  const [i, f] = a(!1), [C, R] = a({}), [m, B] = a(void 0), [M, c] = a("entering"), [N, G] = a(x ? null : !0), o = y("entering"), e = y(null), r = F(() => {
     e.current !== null && e.current.children[0].addEventListener("animationstart", () => {
-      e.current !== null && e.current.children[0].addEventListener("animationend", i, { once: !0 });
+      e.current !== null && e.current.children[0].addEventListener("animationend", r, { once: !0 });
     }), o.current === "exiting" ? (c("entering"), o.current = "entering", f(!0)) : c("idle");
   }, []), S = (t) => {
-    t.type === "info-panel" && (C(r.resourceList.find((l) => Number.parseInt(l.id, 10) === Number.parseInt(t.resourceId, 10)) ?? {}), N(!1), o.current = "exiting", c("exiting"));
+    t.type === "info-panel" && (R(n.resourceList.find((l) => Number.parseInt(l.id, 10) === Number.parseInt(t.resourceId, 10)) ?? {}), G(!1), o.current = "exiting", c("exiting"));
   };
-  return y(() => {
-    B(_.get(s.layout));
-  }, [s.layout]), y(() => {
-    var t, l, h;
-    !a && e.current !== null && ((t = e.current) != null && t.children, e.current.children.length && ((l = e.current.children[0]) == null || l.removeEventListener("animationend", i), (h = e.current.children[0]) == null || h.addEventListener("animationend", i, { once: !0 })));
-  }, [a, i]), /* @__PURE__ */ p(j, { children: [
-    !a && /* @__PURE__ */ p(
+  return b(() => {
+    B(q.get(s.layout));
+  }, [s.layout]), b(() => {
+    var l, h;
+    const t = e.current;
+    return !i && e.current !== null && e.current.children.length && ((l = e.current.children[0]) == null || l.removeEventListener("animationend", r), (h = e.current.children[0]) == null || h.addEventListener("animationend", r, { once: !0 })), () => {
+      var g;
+      t !== null && t.children.length && ((g = t.children[0]) == null || g.removeEventListener("animationend", r));
+    };
+  }, [i, r]), /* @__PURE__ */ p(j, { children: [
+    !i && /* @__PURE__ */ p(
       "basic-grid-module",
       {
-        "data-state": R,
-        "first-entry": M,
+        "data-state": M,
+        "first-entry": N,
         ref: e,
         children: [
-          d !== "" && /* @__PURE__ */ u("h2", { className: O(["basic-grid-module__header", "h4"]), children: d }),
+          d !== "" && /* @__PURE__ */ u("h2", { className: _(["basic-grid-module__header", "h4"]), children: d }),
           m !== void 0 && /* @__PURE__ */ u(
-            q,
+            z,
             {
-              classname: L,
-              gap: b,
+              classname: E,
+              gap: L,
               itemsPerRow: k,
-              children: E.map(
-                (t) => /* @__PURE__ */ G(
+              children: v.map(
+                (t) => /* @__PURE__ */ O(
                   m,
                   {
                     ...t,
@@ -69,16 +73,16 @@ import '../../assets/BasicGridModule.css';function K({
         ]
       }
     ),
-    a && r.layout && /* @__PURE__ */ u(
-      z,
+    i && n.layout && /* @__PURE__ */ u(
+      A,
       {
-        backButtonLabel: r.backButtonLabel,
+        backButtonLabel: n.backButtonLabel,
         className: "grid-info-panel",
-        classname: r.classname,
+        classname: n.classname,
         layoutComponent: {
-          layout: r.layout,
+          layout: n.layout,
           props: {
-            ...x
+            ...C
           }
         },
         onBackClicked: () => {
@@ -89,6 +93,6 @@ import '../../assets/BasicGridModule.css';function K({
   ] });
 }
 export {
-  K as BasicGridModule,
-  K as default
+  Q as BasicGridModule,
+  Q as default
 };

package/dist/components/BasicGridModule/BasicGridModule.test.js

@@ -0,0 +1,227 @@
+import { jsx as n, jsxs as m } from "react/jsx-runtime";
+import { v as a, d as c, b as h, i as r, r as i, g as o, s as l } from "../../react.esm-DLSrfVwM.mjs";
+import "../../index-BVxBrkZB.mjs";
+import { BasicGridModule as s } from "./BasicGridModule.js";
+a.mock("../EqualSizeGrid/index.ts", () => ({
+  default: ({ children: e, classname: t, gap: d, itemsPerRow: u }) => /* @__PURE__ */ n(
+    "div",
+    {
+      "data-testid": "equal-size-grid",
+      "data-classname": t,
+      "data-gap": d,
+      "data-items-per-row": u,
+      children: e
+    }
+  )
+}));
+a.mock("../InfoPanel/index.ts", () => ({
+  default: ({ backButtonLabel: e, className: t, classname: d, onBackClicked: u }) => /* @__PURE__ */ m("div", { "data-testid": "info-panel", "data-classname": d, className: t, children: [
+    /* @__PURE__ */ n("button", { "data-testid": "back-button", type: "button", onClick: u, children: e }),
+    /* @__PURE__ */ n("div", { children: "Info Panel Content" })
+  ] })
+}));
+a.mock("../../settings", () => ({
+  blockLayoutsMap: /* @__PURE__ */ new Map()
+}));
+c("BasicGridModule", () => {
+  h(() => {
+    a.clearAllMocks();
+  }), c("Basic Rendering", () => {
+    r("should render with default props", () => {
+      const { container: e } = i(/* @__PURE__ */ n(s, {})), t = e.querySelector("basic-grid-module");
+      o(t).toBeInTheDocument();
+    }), r("should render grid module custom element", () => {
+      const { container: e } = i(/* @__PURE__ */ n(s, {})), t = e.querySelector("basic-grid-module");
+      o(t).toBeInTheDocument();
+    }), r("should render title when provided", () => {
+      i(/* @__PURE__ */ n(s, { title: "Test Grid Title" })), o(l.getByText("Test Grid Title")).toBeInTheDocument();
+    }), r("should not render title when empty", () => {
+      const { container: e } = i(/* @__PURE__ */ n(s, { title: "" })), t = e.querySelector(".basic-grid-module__header");
+      o(t).not.toBeInTheDocument();
+    }), r("should render with custom element tag", () => {
+      const { container: e } = i(/* @__PURE__ */ n(s, {})), t = e.querySelector("basic-grid-module");
+      o(t).toBeInTheDocument();
+    });
+  }), c("Animation States", () => {
+    r("should have entering state on initial render", () => {
+      const { container: e } = i(/* @__PURE__ */ n(s, {})), t = e.querySelector("basic-grid-module");
+      o(t).toHaveAttribute("data-state", "entering");
+    }), r("should have first-entry attribute on initial render", () => {
+      const { container: e } = i(/* @__PURE__ */ n(s, {})), t = e.querySelector("basic-grid-module");
+      o(t).toHaveAttribute("first-entry");
+    }), r("should not have first-entry when noAnimation is true", () => {
+      const { container: e } = i(/* @__PURE__ */ n(s, { noAnimation: !0 })), t = e.querySelector("basic-grid-module");
+      o(t).not.toHaveAttribute("first-entry");
+    }), r("should set first-entry to null when noAnimation is true", () => {
+      const { container: e } = i(/* @__PURE__ */ n(s, { noAnimation: !0 })), t = e.querySelector("basic-grid-module");
+      o(t == null ? void 0 : t.getAttribute("first-entry")).toBeNull();
+    });
+  }), c("Info Panel", () => {
+    r("should not render info panel by default", () => {
+      i(/* @__PURE__ */ n(s, {})), o(l.queryByTestId("info-panel")).not.toBeInTheDocument();
+    }), r("should render grid when info panel is closed", () => {
+      const { container: e } = i(/* @__PURE__ */ n(s, {})), t = e.querySelector("basic-grid-module");
+      o(t).toBeInTheDocument(), o(l.queryByTestId("info-panel")).not.toBeInTheDocument();
+    }), r("should not show info panel initially", () => {
+      i(/* @__PURE__ */ n(s, {})), o(l.queryByTestId("info-panel")).not.toBeInTheDocument();
+    });
+  }), c("Title Rendering", () => {
+    r("should render title with h2 tag", () => {
+      const { container: e } = i(/* @__PURE__ */ n(s, { title: "Grid Title" })), t = e.querySelector("h2");
+      o(t).toBeInTheDocument(), o(t).toHaveTextContent("Grid Title");
+    }), r("should apply correct CSS classes to title", () => {
+      const { container: e } = i(/* @__PURE__ */ n(s, { title: "Grid Title" })), t = e.querySelector("h2");
+      o(t).toHaveClass("basic-grid-module__header"), o(t).toHaveClass("h4");
+    }), r("should handle long titles", () => {
+      const e = "A".repeat(100);
+      i(/* @__PURE__ */ n(s, { title: e })), o(l.getByText(e)).toBeInTheDocument();
+    }), r("should handle titles with special characters", () => {
+      const e = "Grid's Title & More <>";
+      i(/* @__PURE__ */ n(s, { title: e })), o(l.getByText(e)).toBeInTheDocument();
+    }), r("should not render header element when title is empty string", () => {
+      const { container: e } = i(/* @__PURE__ */ n(s, { title: "" })), t = e.querySelector(".basic-grid-module__header");
+      o(t).not.toBeInTheDocument();
+    }), r("should not render header element when title is not provided", () => {
+      const { container: e } = i(/* @__PURE__ */ n(s, {})), t = e.querySelector(".basic-grid-module__header");
+      o(t).not.toBeInTheDocument();
+    });
+  }), c("Props Types", () => {
+    r("should accept gap prop", () => {
+      const { container: e } = i(/* @__PURE__ */ n(s, { gap: "2rem" })), t = e.querySelector("basic-grid-module");
+      o(t).toBeInTheDocument();
+    }), r("should accept itemsPerRow prop", () => {
+      const { container: e } = i(/* @__PURE__ */ n(s, { itemsPerRow: 3 })), t = e.querySelector("basic-grid-module");
+      o(t).toBeInTheDocument();
+    }), r("should accept classname prop", () => {
+      const { container: e } = i(/* @__PURE__ */ n(s, { classname: "custom-grid" })), t = e.querySelector("basic-grid-module");
+      o(t).toBeInTheDocument();
+    }), r("should accept itemComponent prop", () => {
+      const e = {
+        layout: "Figure",
+        props: {}
+      }, { container: t } = i(/* @__PURE__ */ n(s, { itemComponent: e })), d = t.querySelector("basic-grid-module");
+      o(d).toBeInTheDocument();
+    }), r("should accept items prop", () => {
+      const e = [{ id: "1" }], { container: t } = i(/* @__PURE__ */ n(s, { items: e })), d = t.querySelector("basic-grid-module");
+      o(d).toBeInTheDocument();
+    }), r("should accept customClicksHandler prop", () => {
+      const e = a.fn(), { container: t } = i(/* @__PURE__ */ n(s, { customClicksHandler: e })), d = t.querySelector("basic-grid-module");
+      o(d).toBeInTheDocument();
+    }), r("should accept infoPanelComponent prop", () => {
+      const e = {
+        layout: "CastInfoLayout",
+        backButtonLabel: "Back",
+        resourceList: [],
+        classname: ""
+      }, { container: t } = i(/* @__PURE__ */ n(s, { infoPanelComponent: e })), d = t.querySelector("basic-grid-module");
+      o(d).toBeInTheDocument();
+    });
+  }), c("Default Values", () => {
+    r("should use default gap when not provided", () => {
+      const { container: e } = i(/* @__PURE__ */ n(s, {})), t = e.querySelector("basic-grid-module");
+      o(t).toBeInTheDocument();
+    }), r("should use default itemsPerRow when not provided", () => {
+      const { container: e } = i(/* @__PURE__ */ n(s, {})), t = e.querySelector("basic-grid-module");
+      o(t).toBeInTheDocument();
+    }), r("should use default classname when not provided", () => {
+      const { container: e } = i(/* @__PURE__ */ n(s, {})), t = e.querySelector("basic-grid-module");
+      o(t).toBeInTheDocument();
+    }), r("should use default title when not provided", () => {
+      const { container: e } = i(/* @__PURE__ */ n(s, {})), t = e.querySelector("h2");
+      o(t).not.toBeInTheDocument();
+    }), r("should use default itemComponent when not provided", () => {
+      const { container: e } = i(/* @__PURE__ */ n(s, {})), t = e.querySelector("basic-grid-module");
+      o(t).toBeInTheDocument();
+    }), r("should use default items array when not provided", () => {
+      const { container: e } = i(/* @__PURE__ */ n(s, {})), t = e.querySelector("basic-grid-module");
+      o(t).toBeInTheDocument();
+    }), r("should use null customClicksHandler by default", () => {
+      const { container: e } = i(/* @__PURE__ */ n(s, {})), t = e.querySelector("basic-grid-module");
+      o(t).toBeInTheDocument();
+    }), r("should use false for noAnimation by default", () => {
+      const { container: e } = i(/* @__PURE__ */ n(s, {})), t = e.querySelector("basic-grid-module");
+      o(t).toHaveAttribute("first-entry");
+    });
+  }), c("Edge Cases", () => {
+    r("should handle undefined title", () => {
+      const { container: e } = i(/* @__PURE__ */ n(s, { title: void 0 })), t = e.querySelector("h2");
+      o(t).not.toBeInTheDocument();
+    }), r("should handle empty string title", () => {
+      const { container: e } = i(/* @__PURE__ */ n(s, { title: "" })), t = e.querySelector("h2");
+      o(t).not.toBeInTheDocument();
+    }), r("should handle null customClicksHandler", () => {
+      const { container: e } = i(/* @__PURE__ */ n(s, { customClicksHandler: null })), t = e.querySelector("basic-grid-module");
+      o(t).toBeInTheDocument();
+    }), r("should handle empty items array", () => {
+      const { container: e } = i(/* @__PURE__ */ n(s, { items: [] })), t = e.querySelector("basic-grid-module");
+      o(t).toBeInTheDocument();
+    }), r("should handle gap with different units", () => {
+      const { container: e } = i(/* @__PURE__ */ n(s, { gap: "20px" })), t = e.querySelector("basic-grid-module");
+      o(t).toBeInTheDocument();
+    }), r("should handle itemsPerRow of 1", () => {
+      const { container: e } = i(/* @__PURE__ */ n(s, { itemsPerRow: 1 })), t = e.querySelector("basic-grid-module");
+      o(t).toBeInTheDocument();
+    }), r("should handle itemsPerRow of large number", () => {
+      const { container: e } = i(/* @__PURE__ */ n(s, { itemsPerRow: 12 })), t = e.querySelector("basic-grid-module");
+      o(t).toBeInTheDocument();
+    });
+  }), c("Integration Tests", () => {
+    r("should render with multiple props combined", () => {
+      const { container: e } = i(
+        /* @__PURE__ */ n(
+          s,
+          {
+            classname: "custom-grid",
+            gap: "2rem",
+            itemsPerRow: 3,
+            noAnimation: !0,
+            title: "My Grid"
+          }
+        )
+      );
+      o(l.getByText("My Grid")).toBeInTheDocument();
+      const t = e.querySelector("basic-grid-module");
+      o(t).toHaveAttribute("data-state", "entering"), o(t).not.toHaveAttribute("first-entry");
+    }), r("should render without title and with animation", () => {
+      const { container: e } = i(
+        /* @__PURE__ */ n(
+          s,
+          {
+            classname: "no-title-grid",
+            noAnimation: !1
+          }
+        )
+      ), t = e.querySelector("h2");
+      o(t).not.toBeInTheDocument();
+      const d = e.querySelector("basic-grid-module");
+      o(d).toHaveAttribute("first-entry");
+    }), r("should render with noAnimation true", () => {
+      const { container: e } = i(
+        /* @__PURE__ */ n(s, { noAnimation: !0 })
+      ), t = e.querySelector("basic-grid-module");
+      o(t).not.toHaveAttribute("first-entry");
+    });
+  }), c("Conditional Rendering", () => {
+    r("should render grid when info panel is not open", () => {
+      const { container: e } = i(/* @__PURE__ */ n(s, {})), t = e.querySelector("basic-grid-module");
+      o(t).toBeInTheDocument(), o(l.queryByTestId("info-panel")).not.toBeInTheDocument();
+    }), r("should render basic-grid-module element", () => {
+      const { container: e } = i(/* @__PURE__ */ n(s, {})), t = e.querySelector("basic-grid-module");
+      o(t).toBeInTheDocument();
+    });
+  }), c("State Attributes", () => {
+    r("should set data-state attribute", () => {
+      const { container: e } = i(/* @__PURE__ */ n(s, {})), t = e.querySelector("basic-grid-module");
+      o(t).toHaveAttribute("data-state");
+    }), r("should set data-state to entering initially", () => {
+      const { container: e } = i(/* @__PURE__ */ n(s, {})), t = e.querySelector("basic-grid-module");
+      o(t).toHaveAttribute("data-state", "entering");
+    }), r("should handle first-entry attribute correctly with noAnimation false", () => {
+      const { container: e } = i(/* @__PURE__ */ n(s, { noAnimation: !1 })), t = e.querySelector("basic-grid-module");
+      o(t).toHaveAttribute("first-entry");
+    }), r("should not set first-entry attribute when noAnimation is true", () => {
+      const { container: e } = i(/* @__PURE__ */ n(s, { noAnimation: !0 })), t = e.querySelector("basic-grid-module");
+      o(t).not.toHaveAttribute("first-entry");
+    });
+  });
+});