@scrippsproduct/networks-ui-library 2.0.4 → 2.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/dist/Carousel.module-Nwf_zL9b.mjs +14 -0
  2. package/dist/assets/Carousel.css +1 -1
  3. package/dist/assets/FindUs.css +1 -1
  4. package/dist/assets/LogoListItem.css +1 -1
  5. package/dist/components/AnchorTag/AnchorTag.js +12 -12
  6. package/dist/components/AnchorTag/AnchorTag.test.js +9 -19
  7. package/dist/components/BCVideoPlayer/BCVideoPlayer.js +58 -46
  8. package/dist/components/BCVideoPlayer/BCVideoPlayer.test.js +3 -3
  9. package/dist/components/Carousel/Carousel.js +37 -36
  10. package/dist/components/Carousel/Carousel.test.js +71 -68
  11. package/dist/components/Carousel/CarouselUtils.class.js +104 -97
  12. package/dist/components/Carousel/navigations/Pagination.js +2 -2
  13. package/dist/components/Carousel/navigations/Pagination.test.js +23 -23
  14. package/dist/components/CarouselSlide/CarouselSlide.test.js +58 -57
  15. package/dist/components/FindUs/FindUs.js +119 -90
  16. package/dist/components/GridList/GridList.js +6 -6
  17. package/dist/components/ImageCard/ImageCardCore.js +65 -69
  18. package/dist/components/ImageCard/ImageCardCore.test.js +2 -2
  19. package/dist/components/LogoListItem/LogoListItem.js +13 -13
  20. package/dist/components/PromotionsRowModule/PromotionsRowModule.js +42 -38
  21. package/dist/components/PromotionsRowModule/PromotionsRowModule.test.js +163 -149
  22. package/dist/hooks/useSourcepointPrivacyTrigger.js +4 -4
  23. package/dist/src/components/Carousel/CarouselUtils.class.d.ts +8 -3
  24. package/dist/src/components/Carousel/navigations/Pagination.d.ts +1 -1
  25. package/dist/src/components/PromotionsRowModule/PromotionsRowModule.d.ts +2 -1
  26. package/dist/src/hooks/useSourcepointPrivacyTrigger.d.ts +13 -2
  27. package/package.json +3 -2
  28. package/dist/Carousel.module-BsPaZX5L.mjs +0 -14
@@ -0,0 +1,14 @@
1
+ import './assets/Carousel.css';const _ = "_carousel_1wd2f_2", o = "_carousel__scroller_1wd2f_12", s = {
2
+ carousel: _,
3
+ carousel__scroller: o,
4
+ "carousel-controls": "_carousel-controls_1wd2f_39",
5
+ "carousel-controls__previous": "_carousel-controls__previous_1wd2f_43",
6
+ "carousel-controls__next": "_carousel-controls__next_1wd2f_50",
7
+ "carousel-controls__btn": "_carousel-controls__btn_1wd2f_57",
8
+ "carousel-nav": "_carousel-nav_1wd2f_84",
9
+ "carousel-nav__list": "_carousel-nav__list_1wd2f_88",
10
+ "carousel-nav__item": "_carousel-nav__item_1wd2f_97"
11
+ };
12
+ export {
13
+ s as c
14
+ };
@@ -1 +1 @@
1
- ._carousel_2eeiv_2{--_carousel-scrollbar-gutter: 1.75rem;--_carousel-pagination-size: 1rem;--_slide-gap: 1.5rem;position:relative;display:grid;grid-template-columns:1fr;grid-template-rows:[carousel-scroller] 1fr [carousel-pagination]}._carousel__scroller_2eeiv_12{scroll-behavior:smooth;scrollbar-width:none;scroll-padding-inline:var(--_carousel-gutters);scroll-snap-type:x mandatory;overflow-x:auto;overscroll-behavior-x:contain;display:flex;box-sizing:border-box;margin:0;padding-inline:var(--_carousel-gutters);list-style:none;transition:opacity .3s ease}._carousel__scroller_2eeiv_12::-webkit-scrollbar{display:auto}._carousel__scroller_2eeiv_12[data-scrollbar=true]{scrollbar-width:auto;overflow-x:scroll}._carousel__scroller_2eeiv_12:not([data-scrollbar=true])::-webkit-scrollbar{display:none}._carousel-controls_2eeiv_39{display:contents}._carousel-controls__previous_2eeiv_43{inset-inline-start:var(--_control-btns-offset-x)}._carousel-controls__previous_2eeiv_43 svg{transform:translate(-2px)}._carousel-controls__next_2eeiv_50{inset-inline-end:var(--_control-btns-offset-x)}._carousel-controls__next_2eeiv_50 svg{transform:translate(2px)}._carousel-controls__btn_2eeiv_57{cursor:pointer;position:absolute;z-index:1;top:50%;transform:translateY(var(--_controls-transform));overflow:hidden;aspect-ratio:1;padding:0;border:1px solid transparent;border-radius:50%;color:#000;background-color:#fff6;transition:opacity .325s ease-out}._carousel-controls__btn_2eeiv_57>i>svg{display:block;max-inline-size:100%;block-size:auto;stroke:currentcolor}._carousel-controls__btn_2eeiv_57[disabled]{cursor:not-allowed;opacity:0;transition-delay:0s}._carousel-nav_2eeiv_84{margin-top:0}._carousel-nav__list_2eeiv_88{display:flex;gap:1rem;align-items:flex-start;justify-content:center;padding:0;list-style:none}._carousel-nav__item_2eeiv_97{flex-basis:1rem;min-width:1rem;max-width:1rem;height:1rem;border:1px solid rgba(65,65,65,.1);border-radius:50%;background-color:transparent}._carousel-nav__item_2eeiv_97[data-current=true]{background-color:#8080801a}
1
+ ._carousel_1wd2f_2{--_carousel-scrollbar-gutter: 1.75rem;--_carousel-pagination-size: 1rem;--_slide-gap: 1.5rem;position:relative;display:grid;grid-template-columns:1fr;grid-template-rows:[carousel-scroller] 1fr [carousel-pagination]}._carousel__scroller_1wd2f_12{scroll-behavior:smooth;scrollbar-width:none;scroll-padding-inline:var(--_carousel-gutters);scroll-snap-type:x mandatory;overflow-x:auto;overscroll-behavior-x:contain;display:flex;box-sizing:border-box;margin:0;padding-inline:var(--_carousel-gutters);list-style:none;transition:opacity .3s ease}._carousel__scroller_1wd2f_12::-webkit-scrollbar{display:auto}._carousel__scroller_1wd2f_12[data-scrollbar=true]{scrollbar-width:auto;overflow-x:scroll}._carousel__scroller_1wd2f_12:not([data-scrollbar=true])::-webkit-scrollbar{display:none}._carousel-controls_1wd2f_39{display:contents}._carousel-controls__previous_1wd2f_43{inset-inline-start:var(--_control-btns-offset-x)}._carousel-controls__previous_1wd2f_43 svg{transform:translate(-2px)}._carousel-controls__next_1wd2f_50{inset-inline-end:var(--_control-btns-offset-x)}._carousel-controls__next_1wd2f_50 svg{transform:translate(2px)}._carousel-controls__btn_1wd2f_57{cursor:pointer;position:absolute;z-index:1;top:50%;transform:translateY(var(--_controls-transform));overflow:hidden;aspect-ratio:1;padding:0;border:1px solid transparent;border-radius:50%;color:#000;background-color:#fff6;transition:opacity .325s ease-out}._carousel-controls__btn_1wd2f_57>i>svg{display:block;max-inline-size:100%;block-size:auto;stroke:currentcolor}._carousel-controls__btn_1wd2f_57[disabled]{cursor:not-allowed;opacity:0;transition-delay:0s}._carousel-nav_1wd2f_84{margin-top:0}._carousel-nav__list_1wd2f_88{display:flex;gap:1rem;align-items:flex-start;justify-content:center;padding:0;list-style:none}._carousel-nav__item_1wd2f_97{flex-basis:1rem;min-width:1rem;max-width:1rem;height:1rem;border:1px solid rgba(65,65,65,.1);border-radius:50%;background-color:transparent}._carousel-nav__item_1wd2f_97[data-current]{background-color:#8080801a}
@@ -1 +1 @@
1
- ._grid-wrapper_136bp_1{display:grid;grid-template-columns:1fr 1fr;padding-top:1.5em;border-top:1px solid}._findus__column_136bp_8{border-right:1px solid}@media screen and (max-width:850px){._grid-wrapper_136bp_1{grid-template-columns:1fr}}@media screen and (max-width:600px){._grid-wrapper_136bp_1{display:block}._findus__column_136bp_8{border-right:none}}.rescan-instructions{padding-right:2em}.find-us--compact channel-search__wrapper{padding-top:0}.find-us--compact promotion-block{display:none}.find-us--compact .channel-search{display:block;margin-bottom:.5em;padding-bottom:.5em}.find-us--compact .channel-search__label,.find-us--compact .channel-search__submit-btn{display:block;margin-bottom:1em}.find-us--compact .channel-search__inputs{margin-bottom:1em}.findus__grid-wrapper--full-width{grid-template-columns:1fr}@media screen and (max-width:850px){.findus__grid-wrapper--full-width .devices-platforms{padding-top:0}}@media screen and (max-width:600px){.findus__grid-wrapper--full-width .devices-platforms{padding-top:2em}}@media screen and (max-width:600px){.findus__grid-wrapper--full-width{padding-top:.5em;border-top:none}}@media screen and (max-width:850px){.findus__column{padding-bottom:1.5em;border-right:none;border-bottom:1px solid #777}}@media screen and (max-width:600px){.rescan-instructions{margin-top:1em;padding-right:1em}.findus__column{border-bottom:none}}
1
+ ._grid-wrapper_jx1qh_1{display:grid;grid-template-columns:1fr 1fr;padding-top:1.5em;border-top:1px solid}._findus__column_jx1qh_8{border-right:1px solid}@media screen and (max-width:850px){._grid-wrapper_jx1qh_1{grid-template-columns:1fr}}@media screen and (max-width:600px){._findus__column_jx1qh_8{border-right:none}}.rescan-instructions{padding-right:2em}.find-us--compact channel-search__wrapper{padding-top:0}.find-us--compact promotion-block{display:none}.find-us--compact .channel-search{display:block;margin-bottom:.5em;padding-bottom:.5em}.find-us--compact .channel-search__label,.find-us--compact .channel-search__submit-btn{display:block;margin-bottom:1em}.find-us--compact .channel-search__inputs{margin-bottom:1em}.findus__grid-wrapper--full-width{grid-template-columns:1fr}@media screen and (max-width:850px){.findus__grid-wrapper--full-width .devices-platforms{padding-top:0}}@media screen and (max-width:600px){.findus__grid-wrapper--full-width .devices-platforms{padding-top:2em}}@media screen and (max-width:600px){.findus__grid-wrapper--full-width{padding-top:.5em;border-top:none}}@media screen and (max-width:850px){.findus__column{padding-bottom:1.5em;border-right:none;border-bottom:1px solid #777}}@media screen and (max-width:600px){.rescan-instructions{margin-top:1em;padding-right:1em}.findus__column{border-bottom:none}}
@@ -1 +1 @@
1
- ._icon-list-item_19qvn_1{position:relative;width:100%;border:1px solid;list-style:none;transition:transform .225s ease-in-out}._icon-list-item_19qvn_1:after{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;opacity:0;box-shadow:2px 2px 4px #0006;transition:opacity .225s ease-in-out}._icon-list-item__link_19qvn_18,._icon-list-item__img-wrapper_19qvn_19{display:flex;justify-content:center;padding:min(10%,1.25em)}._icon-list-item__link_19qvn_18>img,._icon-list-item__img-wrapper_19qvn_19>img{aspect-ratio:2.5/1;width:100%;object-fit:contain}._icon-list-item_19qvn_1:hover:has(._icon-list-item__link_19qvn_18),._icon-list-item_19qvn_1:has(._icon-list-item__link_19qvn_18:focus){transform:scale(1.02)}._icon-list-item_19qvn_1:hover:has(._icon-list-item__link_19qvn_18):after,._icon-list-item_19qvn_1:has(._icon-list-item__link_19qvn_18:focus):after{opacity:1}@supports (-moz-appearance: none) and (not selector(A:has(B))){._icon-list-item_19qvn_1:hover{transform:scale(1.02)}._icon-list-item_19qvn_1:hover:after{opacity:1}}@media screen and (max-width:600px){._icon-list-item_19qvn_1{width:66%;margin:0 auto 1.5em}}@media screen and (max-width:400px){._icon-list-item_19qvn_1{width:75%;margin:0 auto 1.5em}}
1
+ ._icon-list-item_1j8qa_1{position:relative;width:100%;border:1px solid;list-style:none;transition:transform .225s ease-in-out}._icon-list-item_1j8qa_1:after{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;opacity:0;box-shadow:2px 2px 4px #0006;transition:opacity .225s ease-in-out}._icon-list-item__link_1j8qa_18,._icon-list-item__img-wrapper_1j8qa_19{display:flex;justify-content:center;padding:min(10%,1.25em)}._icon-list-item__link_1j8qa_18>img,._icon-list-item__img-wrapper_1j8qa_19>img{aspect-ratio:2.5/1;width:100%;object-fit:contain}._icon-list-item_1j8qa_1:hover:has(._icon-list-item__link_1j8qa_18),._icon-list-item_1j8qa_1:has(._icon-list-item__link_1j8qa_18:focus){transform:scale(1.02)}._icon-list-item_1j8qa_1:hover:has(._icon-list-item__link_1j8qa_18):after,._icon-list-item_1j8qa_1:has(._icon-list-item__link_1j8qa_18:focus):after{opacity:1}@supports (-moz-appearance: none) and (not selector(A:has(B))){._icon-list-item_1j8qa_1:hover{transform:scale(1.02)}._icon-list-item_1j8qa_1:hover:after{opacity:1}}@media screen and (max-width:600px){._icon-list-item_1j8qa_1{width:75%;margin:0 auto 1.5em}}
@@ -1,13 +1,13 @@
1
- import { jsxs as c, jsx as i } from "react/jsx-runtime";
1
+ import { jsxs as c, jsx as t } from "react/jsx-runtime";
2
2
  import { classes as s } from "../../utils/helpers.js";
3
- import '../../assets/AnchorTag.css';const o = {
3
+ import '../../assets/AnchorTag.css';const i = {
4
4
  "anchor-tag": "_anchor-tag_zd0xb_1",
5
5
  "anchor-tag--image": "_anchor-tag--image_zd0xb_10"
6
6
  };
7
7
  function d({
8
8
  href: r = "",
9
- classname: e = "",
10
- label: t = "",
9
+ classname: o = "",
10
+ label: e = "",
11
11
  type: n = "internal-link",
12
12
  image: a = null,
13
13
  clickHandler: l = null
@@ -16,10 +16,10 @@ function d({
16
16
  "a",
17
17
  {
18
18
  className: s([
19
- e,
20
- o["anchor-tag"],
19
+ o,
20
+ i["anchor-tag"],
21
21
  "anchor-tag",
22
- o["anchor-tag--image"],
22
+ i["anchor-tag--image"],
23
23
  "anchor-tag--image"
24
24
  ]),
25
25
  href: r,
@@ -30,19 +30,19 @@ function d({
30
30
  target: n === "internal-link" ? "_self" : "_blank",
31
31
  onClick: l && n === "internal-link" && r.includes("#") ? l : void 0,
32
32
  children: [
33
- /* @__PURE__ */ i("img", { alt: t, src: a.url }),
34
- /* @__PURE__ */ i("span", { className: "sr-only", children: t })
33
+ /* @__PURE__ */ t("img", { alt: "", src: a.url }),
34
+ /* @__PURE__ */ t("span", { className: "sr-only", children: e })
35
35
  ]
36
36
  }
37
- ) : /* @__PURE__ */ i(
37
+ ) : /* @__PURE__ */ t(
38
38
  "a",
39
39
  {
40
- className: s([e, o["anchor-tag"], "anchor-tag"]),
40
+ className: s([o, i["anchor-tag"], "anchor-tag"]),
41
41
  href: r,
42
42
  rel: n === "external-link" ? "noreferrer" : void 0,
43
43
  target: n === "internal-link" ? "_self" : "_blank",
44
44
  onClick: l && n === "internal-link" && r.includes("#") ? l : void 0,
45
- children: t
45
+ children: e
46
46
  }
47
47
  );
48
48
  }
@@ -117,12 +117,12 @@ c("AnchorTag", () => {
117
117
  };
118
118
  n("should render image when image prop is provided", () => {
119
119
  i(/* @__PURE__ */ a(o, { href: "/", image: l, label: "Image Link" }));
120
- const e = s.getByRole("img");
120
+ const e = s.getByRole("presentation");
121
121
  t(e).toBeInTheDocument(), t(e).toHaveAttribute("src", "https://example.com/image.jpg");
122
- }), n("should use label as alt text for image", () => {
122
+ }), n("should not use label as alt text for image", () => {
123
123
  i(/* @__PURE__ */ a(o, { href: "/", image: l, label: "Test Label" }));
124
- const e = s.getByRole("img");
125
- t(e).toHaveAttribute("alt", "Test Label");
124
+ const e = s.getByRole("presentation");
125
+ t(e).toHaveAttribute("alt", "");
126
126
  }), n("should render label in sr-only span when image is present", () => {
127
127
  const { container: e } = i(/* @__PURE__ */ a(o, { href: "/", image: l, label: "Screen Reader Text" })), r = e.querySelector(".sr-only");
128
128
  t(r).toBeInTheDocument(), t(r == null ? void 0 : r.textContent).toBe("Screen Reader Text");
@@ -349,16 +349,6 @@ c("AnchorTag", () => {
349
349
  height: 200
350
350
  }, { container: e } = i(/* @__PURE__ */ a(o, { image: l, label: "Accessible Text" })), r = e.querySelector(".sr-only");
351
351
  t(r).toHaveTextContent("Accessible Text");
352
- }), n("should have proper alt text on image", () => {
353
- i(/* @__PURE__ */ a(o, { image: {
354
- url: "https://example.com/image.jpg",
355
- altText: "Test",
356
- aspectRatio: 1.5,
357
- width: 300,
358
- height: 200
359
- }, label: "Alt Text Here" }));
360
- const e = s.getByRole("img");
361
- t(e).toHaveAttribute("alt", "Alt Text Here");
362
352
  }), n("should properly indicate external links with rel noreferrer", () => {
363
353
  i(/* @__PURE__ */ a(o, { href: "https://example.com", label: "External", type: "external-link" }));
364
354
  const l = s.getByRole("link");
@@ -379,7 +369,7 @@ c("AnchorTag", () => {
379
369
  }
380
370
  ]
381
371
  }, label: "Image with Sources" }));
382
- const e = s.getByRole("img");
372
+ const e = s.getByRole("presentation");
383
373
  t(e).toHaveAttribute("src", "https://example.com/image.jpg");
384
374
  }), n("should handle image with caption", () => {
385
375
  i(/* @__PURE__ */ a(o, { image: {
@@ -390,7 +380,7 @@ c("AnchorTag", () => {
390
380
  height: 200,
391
381
  caption: "This is a caption"
392
382
  }, label: "Captioned Image" }));
393
- const e = s.getByRole("img");
383
+ const e = s.getByRole("presentation");
394
384
  t(e).toBeInTheDocument();
395
385
  }), n("should handle image with text property", () => {
396
386
  i(/* @__PURE__ */ a(o, { image: {
@@ -401,7 +391,7 @@ c("AnchorTag", () => {
401
391
  height: 200,
402
392
  text: "Additional text"
403
393
  }, label: "Image with Text" }));
404
- const e = s.getByRole("img");
394
+ const e = s.getByRole("presentation");
405
395
  t(e).toBeInTheDocument();
406
396
  });
407
397
  }), c("Integration Tests", () => {
@@ -456,8 +446,8 @@ c("AnchorTag", () => {
456
446
  );
457
447
  const e = s.getByRole("link");
458
448
  t(e).toHaveClass("logo-link"), t(e).toHaveClass("anchor-tag--image"), t(e).toHaveAttribute("href", "/"), t(e).toHaveAttribute("target", "_self"), t(e).toHaveStyle({ "--anchor-tag-image-ratio": "2" });
459
- const r = s.getByRole("img");
460
- t(r).toHaveAttribute("src", "https://example.com/logo.png"), t(r).toHaveAttribute("alt", "Home");
449
+ const r = s.getByRole("presentation");
450
+ t(r).toHaveAttribute("src", "https://example.com/logo.png"), t(r).toHaveAttribute("alt", "");
461
451
  });
462
452
  });
463
453
  });
@@ -1,59 +1,71 @@
1
- import { jsx as H } from "react/jsx-runtime";
2
- import { useRef as s, useCallback as S, useEffect as l } from "react";
3
- import '../../assets/BCVideoPlayer.css';function E({
4
- bcId: r,
5
- playerElId: n = "bc-player",
6
- containerClosing: c = !1,
7
- autoplay: i = !1,
8
- mute: u = !1,
9
- handleClosing: P = () => !0,
10
- pauseVideo: d = !1,
1
+ import { jsx as x } from "react/jsx-runtime";
2
+ import { useRef as d, useEffect as o } from "react";
3
+ import '../../assets/BCVideoPlayer.css';function q({
4
+ bcId: n,
5
+ playerElId: c = "bc-player",
6
+ containerClosing: m = !1,
7
+ autoplay: u = !1,
8
+ mute: i = !1,
9
+ handleClosing: $ = () => {
10
+ },
11
+ pauseVideo: v = !1,
11
12
  BC_AID: f = "",
12
- BC_PLAYERID: p = "",
13
+ BC_PLAYERID: a = "",
13
14
  BC_EMBEDID: y = ""
14
15
  }) {
15
- const t = s(null), o = s(null), m = s(r), K = (e) => {
16
- e.key === "Escape" && (e.preventDefault(), P(e));
17
- }, k = (e) => {
16
+ const r = d(null), p = d(null), w = d(u), h = d(i);
17
+ o(() => {
18
+ w.current = u;
19
+ }, [u]), o(() => {
20
+ h.current = i;
21
+ }, [i]);
22
+ const g = (e) => {
23
+ e.key === "Escape" && (e.preventDefault(), $(e));
24
+ }, K = (e) => {
18
25
  e.key === "Escape" && (e.stopPropagation(), e.preventDefault());
19
- }, v = S(() => {
20
- i && t.current && t.current.play(), u && t.current && t.current.muted(!0);
21
- }, [i, u]);
22
- return l(() => {
23
- const e = () => {
24
- const w = f, $ = p, g = `<video-js id="${n}" data-video-id="${r}" data-account="${w}" data-player="${$}" data-embed="${y}" controls></video-js>`;
25
- o.current !== null && (o.current.innerHTML = g), t.current !== null && t.current.dispose();
26
- const j = document.getElementById("video-js-script");
27
- j && j.remove();
28
- const a = document.createElement("script");
29
- a.src = `https://players.brightcove.net/${w}/${$}_default/index.min.js`, a.id = "video-js-script", document.body.appendChild(a), a.onload = () => {
30
- t.current = typeof window.bc == "function" ? window.bc(n) : null, t.current.on("loadedmetadata", v);
31
- const h = document.querySelector(`#${n}`);
32
- h && h.focus();
33
- };
34
- }, x = setInterval(() => {
35
- o.current !== null && (clearInterval(x), e());
36
- }, 100);
37
- }, [r, n, v, f, p, y]), l(() => {
38
- c && t.current !== null && t.current.pause();
39
- }, [c]), l(() => {
40
- m.current !== r && (m.current = r);
41
- }, [r]), l(() => {
26
+ };
27
+ return o(() => {
28
+ var b;
29
+ if (p.current === null) return;
30
+ r.current !== null && (r.current.dispose(), r.current = null);
31
+ const e = document.createElement("video-js");
32
+ e.id = c, e.setAttribute("data-video-id", n), e.setAttribute("data-account", f), e.setAttribute("data-player", a), e.setAttribute("data-embed", y), e.setAttribute("controls", ""), p.current.replaceChildren(e), (b = document.getElementById("video-js-script")) == null || b.remove();
33
+ const t = document.createElement("script");
34
+ return t.src = `https://players.brightcove.net/${f}/${a}_default/index.min.js`, t.id = "video-js-script", t.onload = () => {
35
+ if (typeof window.bc != "function") return;
36
+ r.current = window.bc(c), r.current.on("loadedmetadata", () => {
37
+ var l, j;
38
+ w.current && ((l = r.current) == null || l.play()), h.current && ((j = r.current) == null || j.muted(!0));
39
+ });
40
+ const s = document.querySelector(`#${c}`);
41
+ s && s.focus();
42
+ }, t.onerror = () => {
43
+ console.error(`BCVideoPlayer: failed to load Brightcove script for player ${a}`);
44
+ }, document.body.appendChild(t), () => {
45
+ var s, l;
46
+ (s = r.current) == null || s.dispose(), r.current = null, (l = document.getElementById("video-js-script")) == null || l.remove();
47
+ };
48
+ }, [n, c, f, a, y]), o(() => {
49
+ var e, t;
50
+ u && ((e = r.current) == null || e.play()), i && ((t = r.current) == null || t.muted(!0));
51
+ }, [u, i]), o(() => {
52
+ m && r.current !== null && r.current.pause();
53
+ }, [m]), o(() => {
42
54
  var e;
43
- d && ((e = t.current) == null || e.pause());
44
- }, [d]), r != null && r !== "" ? /* @__PURE__ */ H(
55
+ v && ((e = r.current) == null || e.pause());
56
+ }, [v]), n != null && n !== "" ? /* @__PURE__ */ x(
45
57
  "div",
46
58
  {
47
59
  className: "video-player__wrapper",
48
- id: "video-player-wrapper",
49
- ref: o,
50
- onKeyDown: k,
51
- onKeyUp: K
60
+ id: `video-player-wrapper-${c}`,
61
+ ref: p,
62
+ onKeyDown: K,
63
+ onKeyUp: g
52
64
  },
53
- r
65
+ n
54
66
  ) : null;
55
67
  }
56
68
  export {
57
- E as BCVideoPlayer,
58
- E as default
69
+ q as BCVideoPlayer,
70
+ q as default
59
71
  };
@@ -20,8 +20,8 @@ d("BCVideoPlayer", () => {
20
20
  r(o).toBeInTheDocument();
21
21
  }), a("should render wrapper with correct id", () => {
22
22
  c(/* @__PURE__ */ t(n, { bcId: "123456" }));
23
- const e = document.getElementById("video-player-wrapper");
24
- r(e).toHaveAttribute("id", "video-player-wrapper");
23
+ const e = document.getElementById("video-player-wrapper-bc-player");
24
+ r(e).toHaveAttribute("id", "video-player-wrapper-bc-player");
25
25
  }), a("should render wrapper with correct class", () => {
26
26
  const { container: e } = c(/* @__PURE__ */ t(n, { bcId: "123456" })), o = e.querySelector(".video-player__wrapper");
27
27
  r(o).toHaveClass("video-player__wrapper");
@@ -222,7 +222,7 @@ d("BCVideoPlayer", () => {
222
222
  }
223
223
  )
224
224
  ), p = o.querySelector(".video-player__wrapper");
225
- r(p).toBeInTheDocument(), r(p).toHaveAttribute("id", "video-player-wrapper");
225
+ r(p).toBeInTheDocument(), r(p).toHaveAttribute("id", "video-player-wrapper-custom-player");
226
226
  }), a("should handle keyboard events with all props", () => {
227
227
  const e = l.fn(), { container: o } = c(
228
228
  /* @__PURE__ */ t(
@@ -4,7 +4,7 @@ import { chunkArray as ee, classes as g } from "../../utils/helpers.js";
4
4
  import re from "./CarouselUtils.class.js";
5
5
  import { CarouselSlide as te } from "../CarouselSlide/CarouselSlide.js";
6
6
  import { Loading as ne } from "../Loading/Loading.js";
7
- import { c as i } from "../../Carousel.module-BsPaZX5L.mjs";
7
+ import { c as i } from "../../Carousel.module-Nwf_zL9b.mjs";
8
8
  import { C as le } from "../../chevron-left-D0UjbrKw.mjs";
9
9
  import { C as ce } from "../../chevron-right-0ZF3LruR.mjs";
10
10
  const A = window.matchMedia("(width <= 600px)"), P = window.matchMedia("(width <= 800px"), b = window.matchMedia("(width <= 1024px"), z = window.matchMedia("(width <= 1280px");
@@ -32,9 +32,9 @@ function me({
32
32
  wrapAround: !0
33
33
  }
34
34
  }) {
35
- const f = a(`carousel-${E}`), x = a(null), c = a(null), R = a(null), p = a([...L]), T = a(null), w = a(null), r = a(null), e = a(I), o = a(I), $ = a("-50%"), [N, G] = m([]), [M, H] = m([]), [k, U] = m(0), [F, D] = m(!1);
35
+ const f = a(`carousel-${E}`), x = a(null), c = a(null), R = a(null), p = a([...L]), $ = a(null), w = a(null), r = a(null), e = a(I), o = a(I), N = a("-50%"), [T, G] = m([]), [M, H] = m([]), [k, U] = m(0), [F, D] = m(!1);
36
36
  B(() => {
37
- const n = () => {
37
+ const t = () => {
38
38
  A.matches ? e.current = {
39
39
  ...o.current,
40
40
  showControls: !1,
@@ -69,16 +69,16 @@ function me({
69
69
  ...o.current
70
70
  };
71
71
  };
72
- n();
73
- const t = () => {
74
- U((s) => s + 1), n();
72
+ t();
73
+ const n = () => {
74
+ U((s) => s + 1), t();
75
75
  };
76
- return A.addEventListener("change", t), P.addEventListener("change", t), b.addEventListener("change", t), z.addEventListener("change", t), () => {
77
- A.removeEventListener("change", t), P.removeEventListener("change", t), b.removeEventListener("change", t), z.removeEventListener("change", t);
76
+ return A.addEventListener("change", n), P.addEventListener("change", n), b.addEventListener("change", n), z.addEventListener("change", n), () => {
77
+ A.removeEventListener("change", n), P.removeEventListener("change", n), b.removeEventListener("change", n), z.removeEventListener("change", n);
78
78
  };
79
79
  }, []);
80
- const O = u((n, t) => {
81
- const s = ee(t, n);
80
+ const O = u((t, n) => {
81
+ const s = ee(n, t);
82
82
  H([...s]);
83
83
  let y = [];
84
84
  for (let h = 0; h <= s.length - 1; h++)
@@ -90,13 +90,13 @@ function me({
90
90
  ]
91
91
  };
92
92
  const _ = [...y], C = [...y], Q = _.slice(-1), X = _.slice(0);
93
- return C.push(X[0]), C.unshift(Q[0]), e.current.wrapAround && n.length > t ? C : _;
93
+ return C.push(X[0]), C.unshift(Q[0]), e.current.wrapAround && t.length > n ? C : _;
94
94
  }, []), d = u(() => {
95
95
  e.current.autoplay && r.current && r.current.clearTimer();
96
- }, []), W = u((n) => {
96
+ }, []), W = u((t) => {
97
97
  d();
98
- const t = n.key;
99
- t === "ArrowLeft" ? (n.preventDefault(), r.current && r.current.determineScrollAction(-1)) : t === "ArrowRight" && (n.preventDefault(), r.current && r.current.determineScrollAction(1));
98
+ const n = t.key;
99
+ n === "ArrowLeft" ? (t.preventDefault(), r.current && r.current.determineScrollAction(-1)) : n === "ArrowRight" && (t.preventDefault(), r.current && r.current.determineScrollAction(1));
100
100
  }, [d]), q = u(() => {
101
101
  d(), c.current !== null && c.current.addEventListener("scrollend", () => {
102
102
  r.current && r.current.handleScrollEnd();
@@ -106,18 +106,19 @@ function me({
106
106
  r.current && r.current.handleScrollEnd(), c.current && c.current.addEventListener("scroll", S, { once: !0 });
107
107
  }, { once: !0 });
108
108
  }, [d]), J = () => {
109
- r.current && e.current.autoplay && r.current.clearTimer();
109
+ var t;
110
+ (t = r.current) == null || t.destroy();
110
111
  }, v = u(() => {
111
112
  //! make sure class is only instantiated once because of reacts
112
113
  //! "strict" mode double do hocus pocus
113
- var n, t;
114
- r.current !== null && k > 0 && ((t = (n = r.current).clearTimer) == null || t.call(n), r.current = null), D(!1), r.current = new re({
114
+ var t, n;
115
+ r.current !== null && k > 0 && ((n = (t = r.current).destroy) == null || n.call(t), r.current = null), D(!1), r.current = new re({
115
116
  carouselEl: x.current,
116
117
  scrollerEl: c.current,
117
118
  paginationEl: R.current,
118
119
  cells: p.current,
119
120
  navBtnEls: {
120
- next: T.current,
121
+ next: $.current,
121
122
  previous: w.current
122
123
  },
123
124
  id: f.current,
@@ -135,24 +136,24 @@ function me({
135
136
  }, [k]), V = u(() => {
136
137
  c.current && c.current.addEventListener("scroll", S, { once: !0 });
137
138
  }, [S]), K = u(() => {
138
- const n = O(p.current, e.current.cellsPerSlide ?? 1);
139
- G(n);
140
- const t = n.length;
139
+ const t = O(p.current, e.current.cellsPerSlide ?? 1);
140
+ G(t);
141
+ const n = t.length;
141
142
  if (p.current.length > (e.current.cellsPerSlide ?? 1)) {
142
143
  let s = setInterval(() => {
143
- c.current !== null && c.current.children.length >= t && (w.current !== null && e.current.showControls || !e.current.showControls) && (clearInterval(s), V(), v());
144
+ c.current !== null && c.current.children.length >= n && (w.current !== null && e.current.showControls || !e.current.showControls) && (clearInterval(s), V(), v());
144
145
  }, 100);
145
146
  } else {
146
147
  let s = setInterval(() => {
147
- c.current !== null && c.current.children.length >= t && (clearInterval(s), v());
148
+ c.current !== null && c.current.children.length >= n && (clearInterval(s), v());
148
149
  }, 100);
149
150
  }
150
151
  }, [O, V, v]);
151
152
  return B(() => {
152
153
  if (e.current !== null) {
153
154
  if (e.current.showControls) {
154
- let n = 0;
155
- e.current.showPagination && (n = n + 25), e.current.showScrollbar && (n = n + 6), $.current = `calc(-50% - ${n}px)`;
155
+ let t = 0;
156
+ e.current.showPagination && (t = t + 25), e.current.showScrollbar && (t = t + 6), N.current = `calc(-50% - ${t}px)`;
156
157
  }
157
158
  K();
158
159
  }
@@ -176,7 +177,7 @@ function me({
176
177
  "--_cells-position": e.current.cellsPosition,
177
178
  "--_control-btns-offset-x": `${e.current.controlButtonsOffset ?? 0}rem`,
178
179
  "--_slide-gap": `${e.current.slideGap ?? 0}rem`,
179
- "--_controls-transform": $.current
180
+ "--_controls-transform": N.current
180
181
  },
181
182
  tabIndex: -1,
182
183
  onKeyDown: W,
@@ -211,15 +212,15 @@ function me({
211
212
  children: /* @__PURE__ */ l(ne, {})
212
213
  }
213
214
  ),
214
- children: N.length > 0 && N.map((n, t) => /* @__PURE__ */ l(
215
+ children: T.length > 0 && T.map((t, n) => /* @__PURE__ */ l(
215
216
  te,
216
217
  {
217
218
  currentIndex: e.current.wrapAround ? 1 : 0,
218
- index: t,
219
- slide: { ...n, ariaLabel: n.ariaLabel || "" },
219
+ index: n,
220
+ slide: { ...t, ariaLabel: t.ariaLabel || "" },
220
221
  variableHeight: e.current.variableHeight
221
222
  },
222
- `carousel${E}-slide${t}`
223
+ `carousel${E}-slide${n}`
223
224
  ))
224
225
  }
225
226
  )
@@ -257,7 +258,7 @@ function me({
257
258
  "aria-controls": f.current,
258
259
  "aria-label": "Next Item",
259
260
  className: g([i["carousel-controls__btn"], i["carousel-controls__next"], "carousel-controls__next"]),
260
- ref: T,
261
+ ref: $,
261
262
  title: "Next Item",
262
263
  type: "button",
263
264
  onClick: () => {
@@ -273,17 +274,17 @@ function me({
273
274
  }
274
275
  )
275
276
  ] }),
276
- e.current.showPagination && M.length > 1 && /* @__PURE__ */ l("div", { className: [i["carousel-nav"], "carousel-nav"].join(" "), children: /* @__PURE__ */ l("ol", { className: i["carousel-nav__list"], ref: R, children: M.map((n, t) => /* @__PURE__ */ l(
277
+ e.current.showPagination && M.length > 1 && /* @__PURE__ */ l("div", { className: [i["carousel-nav"], "carousel-nav"].join(" "), children: /* @__PURE__ */ l("ol", { className: i["carousel-nav__list"], ref: R, children: M.map((t, n) => /* @__PURE__ */ l(
277
278
  "li",
278
279
  {
279
280
  className: g([i["carousel-nav__item"], "carousel-nav__item"]),
280
- "data-current": t === 0 ? "true" : "false",
281
- title: `Navigate to slide ${t + 1}`,
281
+ "data-current": n === 0 ? "" : void 0,
282
+ title: `Navigate to slide ${n + 1}`,
282
283
  onClick: () => {
283
- r.current && r.current.navigateToIndex(t);
284
+ r.current && r.current.navigateToIndex(n);
284
285
  }
285
286
  },
286
- `carousel${f}-nav-${t}`
287
+ `carousel${f}-nav-${n}`
287
288
  )) }) })
288
289
  ]
289
290
  }