@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.
- package/dist/Carousel.module-Nwf_zL9b.mjs +14 -0
- package/dist/assets/Carousel.css +1 -1
- package/dist/assets/FindUs.css +1 -1
- package/dist/assets/LogoListItem.css +1 -1
- package/dist/components/AnchorTag/AnchorTag.js +12 -12
- package/dist/components/AnchorTag/AnchorTag.test.js +9 -19
- package/dist/components/BCVideoPlayer/BCVideoPlayer.js +58 -46
- package/dist/components/BCVideoPlayer/BCVideoPlayer.test.js +3 -3
- package/dist/components/Carousel/Carousel.js +37 -36
- package/dist/components/Carousel/Carousel.test.js +71 -68
- package/dist/components/Carousel/CarouselUtils.class.js +104 -97
- package/dist/components/Carousel/navigations/Pagination.js +2 -2
- package/dist/components/Carousel/navigations/Pagination.test.js +23 -23
- package/dist/components/CarouselSlide/CarouselSlide.test.js +58 -57
- package/dist/components/FindUs/FindUs.js +119 -90
- package/dist/components/GridList/GridList.js +6 -6
- package/dist/components/ImageCard/ImageCardCore.js +65 -69
- package/dist/components/ImageCard/ImageCardCore.test.js +2 -2
- package/dist/components/LogoListItem/LogoListItem.js +13 -13
- package/dist/components/PromotionsRowModule/PromotionsRowModule.js +42 -38
- package/dist/components/PromotionsRowModule/PromotionsRowModule.test.js +163 -149
- package/dist/hooks/useSourcepointPrivacyTrigger.js +4 -4
- package/dist/src/components/Carousel/CarouselUtils.class.d.ts +8 -3
- package/dist/src/components/Carousel/navigations/Pagination.d.ts +1 -1
- package/dist/src/components/PromotionsRowModule/PromotionsRowModule.d.ts +2 -1
- package/dist/src/hooks/useSourcepointPrivacyTrigger.d.ts +13 -2
- package/package.json +3 -2
- 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
|
+
};
|
package/dist/assets/Carousel.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
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}
|
package/dist/assets/FindUs.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._grid-
|
|
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-
|
|
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
|
|
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
|
|
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:
|
|
10
|
-
label:
|
|
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
|
-
|
|
20
|
-
|
|
19
|
+
o,
|
|
20
|
+
i["anchor-tag"],
|
|
21
21
|
"anchor-tag",
|
|
22
|
-
|
|
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__ */
|
|
34
|
-
/* @__PURE__ */
|
|
33
|
+
/* @__PURE__ */ t("img", { alt: "", src: a.url }),
|
|
34
|
+
/* @__PURE__ */ t("span", { className: "sr-only", children: e })
|
|
35
35
|
]
|
|
36
36
|
}
|
|
37
|
-
) : /* @__PURE__ */
|
|
37
|
+
) : /* @__PURE__ */ t(
|
|
38
38
|
"a",
|
|
39
39
|
{
|
|
40
|
-
className: s([
|
|
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:
|
|
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("
|
|
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("
|
|
125
|
-
t(e).toHaveAttribute("alt", "
|
|
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("
|
|
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("
|
|
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("
|
|
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("
|
|
460
|
-
t(r).toHaveAttribute("src", "https://example.com/logo.png"), t(r).toHaveAttribute("alt", "
|
|
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
|
|
2
|
-
import { useRef as
|
|
3
|
-
import '../../assets/BCVideoPlayer.css';function
|
|
4
|
-
bcId:
|
|
5
|
-
playerElId:
|
|
6
|
-
containerClosing:
|
|
7
|
-
autoplay:
|
|
8
|
-
mute:
|
|
9
|
-
handleClosing:
|
|
10
|
-
|
|
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:
|
|
13
|
+
BC_PLAYERID: a = "",
|
|
13
14
|
BC_EMBEDID: y = ""
|
|
14
15
|
}) {
|
|
15
|
-
const
|
|
16
|
-
|
|
17
|
-
|
|
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
|
-
}
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
}, [
|
|
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
|
-
|
|
44
|
-
}, [
|
|
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:
|
|
49
|
-
ref:
|
|
50
|
-
onKeyDown:
|
|
51
|
-
onKeyUp:
|
|
60
|
+
id: `video-player-wrapper-${c}`,
|
|
61
|
+
ref: p,
|
|
62
|
+
onKeyDown: K,
|
|
63
|
+
onKeyUp: g
|
|
52
64
|
},
|
|
53
|
-
|
|
65
|
+
n
|
|
54
66
|
) : null;
|
|
55
67
|
}
|
|
56
68
|
export {
|
|
57
|
-
|
|
58
|
-
|
|
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-
|
|
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]),
|
|
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
|
|
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
|
-
|
|
73
|
-
const
|
|
74
|
-
U((s) => s + 1),
|
|
72
|
+
t();
|
|
73
|
+
const n = () => {
|
|
74
|
+
U((s) => s + 1), t();
|
|
75
75
|
};
|
|
76
|
-
return A.addEventListener("change",
|
|
77
|
-
A.removeEventListener("change",
|
|
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((
|
|
81
|
-
const s = ee(
|
|
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 &&
|
|
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((
|
|
96
|
+
}, []), W = u((t) => {
|
|
97
97
|
d();
|
|
98
|
-
const
|
|
99
|
-
|
|
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
|
-
|
|
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
|
|
114
|
-
r.current !== null && k > 0 && ((
|
|
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:
|
|
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
|
|
139
|
-
G(
|
|
140
|
-
const
|
|
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 >=
|
|
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 >=
|
|
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
|
|
155
|
-
e.current.showPagination && (
|
|
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":
|
|
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:
|
|
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:
|
|
219
|
-
slide: { ...
|
|
219
|
+
index: n,
|
|
220
|
+
slide: { ...t, ariaLabel: t.ariaLabel || "" },
|
|
220
221
|
variableHeight: e.current.variableHeight
|
|
221
222
|
},
|
|
222
|
-
`carousel${E}-slide${
|
|
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:
|
|
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((
|
|
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":
|
|
281
|
-
title: `Navigate to slide ${
|
|
281
|
+
"data-current": n === 0 ? "" : void 0,
|
|
282
|
+
title: `Navigate to slide ${n + 1}`,
|
|
282
283
|
onClick: () => {
|
|
283
|
-
r.current && r.current.navigateToIndex(
|
|
284
|
+
r.current && r.current.navigateToIndex(n);
|
|
284
285
|
}
|
|
285
286
|
},
|
|
286
|
-
`carousel${f}-nav-${
|
|
287
|
+
`carousel${f}-nav-${n}`
|
|
287
288
|
)) }) })
|
|
288
289
|
]
|
|
289
290
|
}
|