@zenpatient-org/healthspan-marketing-ui 0.2.65 → 0.2.66
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/components/AdvancedGallery/AdvancedGallery.cjs.js +1 -1
- package/dist/components/AdvancedGallery/AdvancedGallery.es.js +37 -38
- package/dist/components/AdvancedGallery/advancedGallery.module.css +15 -0
- package/dist/components/ImageGallery/ImageGallery.cjs.js +1 -1
- package/dist/components/ImageGallery/ImageGallery.es.js +34 -35
- package/dist/components/ImageGallery/imageGallery.module.css +15 -0
- package/package.json +1 -1
- package/dist/styles/utils.module.css +0 -14
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("react"),m=require("swiper/modules"),d=require("swiper/react"),q=require("../../utils/useSwiper/useSwiper.cjs.js"),y=require("../../utils/cn/cn.cjs.js");;/* empty css */;/* empty css */;/* empty css */const j=require("../GalleryPagination/GalleryPagination.cjs.js"),i=require("../../src/components/AdvancedGallery/advancedGallery.module.css"),w=require("../Label/Label.cjs.js"),x=require("./components/VideoSlide/VideoSlide.cjs.js"),v=require("./components/ImageGalleryPagination/ImageGalleryPagination.cjs.js"),P=[m.Navigation],_=({items:r,label:l,className:u})=>{const{activeIndex:s,handleSlideTo:o,handleSlideChange:S,onSwiperInit:p,handleSwiperResize:g,handleUserInteraction:n}=q.useSwiperWithAutoPlay(5e3),c=h.useCallback(a=>{n(),o(a)},[n,o]);return e.jsxs("div",{className:y.cn(i.root,u),children:[l&&e.jsx("div",{className:i.labelWrap,children:e.jsx(w.Label,{color:"black",size:"sm",children:l})}),e.jsx(d.Swiper,{onSwiper:p,onResize:g,onSlideChange:S,onTouchStart:n,onTouchEnd:n,modules:P,spaceBetween:0,slidesPerView:1,className:i.swiper,children:r.map((a,t)=>e.jsxs(d.SwiperSlide,{children:[a.mediaType==="image"&&e.jsx("div",{className:i.imageWrapper,children:e.jsx("img",{src:a.url,alt:"product image",className:i.image,onClick:n})}),a.mediaType==="video"&&e.jsx(x.VideoSlide,{item:a,isActive:s===t,onClick:n})]},t))}),e.jsx(v.ImageGalleryPagination,{items:r,activeIndex:s,className:i.hideOnMobile,onSelect:c}),e.jsx(j.GalleryPagination,{count:r.length,activeIndex:s,className:i.hideOnDesktop,onSelect:c})]})};exports.AdvancedGallery=_;
|
|
@@ -1,74 +1,73 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsxs as
|
|
3
|
-
import { useCallback as
|
|
4
|
-
import { Navigation as
|
|
5
|
-
import { Swiper as
|
|
6
|
-
import { useSwiperWithAutoPlay as
|
|
2
|
+
import { jsxs as s, jsx as e } from "react/jsx-runtime";
|
|
3
|
+
import { useCallback as g } from "react";
|
|
4
|
+
import { Navigation as f } from "swiper/modules";
|
|
5
|
+
import { Swiper as u, SwiperSlide as w } from "swiper/react";
|
|
6
|
+
import { useSwiperWithAutoPlay as v } from "../../utils/useSwiper/useSwiper.es.js";
|
|
7
7
|
import { cn as N } from "../../utils/cn/cn.es.js";
|
|
8
8
|
/* empty css */
|
|
9
9
|
/* empty css */
|
|
10
10
|
/* empty css */
|
|
11
|
-
import { GalleryPagination as
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
|
|
17
|
-
const
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
i(), t(o);
|
|
11
|
+
import { GalleryPagination as y } from "../GalleryPagination/GalleryPagination.es.js";
|
|
12
|
+
import i from "../../components/AdvancedGallery/advancedGallery.module.css";
|
|
13
|
+
import { Label as P } from "../Label/Label.es.js";
|
|
14
|
+
import { VideoSlide as k } from "./components/VideoSlide/VideoSlide.es.js";
|
|
15
|
+
import { ImageGalleryPagination as C } from "./components/ImageGalleryPagination/ImageGalleryPagination.es.js";
|
|
16
|
+
const I = [f], U = ({ items: a, label: n, className: d }) => {
|
|
17
|
+
const { activeIndex: l, handleSlideTo: t, handleSlideChange: p, onSwiperInit: h, handleSwiperResize: S, handleUserInteraction: o } = v(5e3), m = g(
|
|
18
|
+
(r) => {
|
|
19
|
+
o(), t(r);
|
|
21
20
|
},
|
|
22
|
-
[
|
|
21
|
+
[o, t]
|
|
23
22
|
);
|
|
24
|
-
return /* @__PURE__ */
|
|
25
|
-
n && /* @__PURE__ */ e("div", { className:
|
|
23
|
+
return /* @__PURE__ */ s("div", { className: N(i.root, d), children: [
|
|
24
|
+
n && /* @__PURE__ */ e("div", { className: i.labelWrap, children: /* @__PURE__ */ e(P, { color: "black", size: "sm", children: n }) }),
|
|
26
25
|
/* @__PURE__ */ e(
|
|
27
|
-
|
|
26
|
+
u,
|
|
28
27
|
{
|
|
29
|
-
onSwiper:
|
|
30
|
-
onResize:
|
|
31
|
-
onSlideChange:
|
|
32
|
-
onTouchStart:
|
|
33
|
-
onTouchEnd:
|
|
34
|
-
modules:
|
|
28
|
+
onSwiper: h,
|
|
29
|
+
onResize: S,
|
|
30
|
+
onSlideChange: p,
|
|
31
|
+
onTouchStart: o,
|
|
32
|
+
onTouchEnd: o,
|
|
33
|
+
modules: I,
|
|
35
34
|
spaceBetween: 0,
|
|
36
35
|
slidesPerView: 1,
|
|
37
|
-
className:
|
|
38
|
-
children: a.map((
|
|
39
|
-
|
|
36
|
+
className: i.swiper,
|
|
37
|
+
children: a.map((r, c) => /* @__PURE__ */ s(w, { children: [
|
|
38
|
+
r.mediaType === "image" && /* @__PURE__ */ e("div", { className: i.imageWrapper, children: /* @__PURE__ */ e(
|
|
40
39
|
"img",
|
|
41
40
|
{
|
|
42
|
-
src:
|
|
41
|
+
src: r.url,
|
|
43
42
|
alt: "product image",
|
|
44
|
-
className:
|
|
45
|
-
onClick:
|
|
43
|
+
className: i.image,
|
|
44
|
+
onClick: o
|
|
46
45
|
}
|
|
47
46
|
) }),
|
|
48
|
-
|
|
49
|
-
] },
|
|
47
|
+
r.mediaType === "video" && /* @__PURE__ */ e(k, { item: r, isActive: l === c, onClick: o })
|
|
48
|
+
] }, c))
|
|
50
49
|
}
|
|
51
50
|
),
|
|
52
51
|
/* @__PURE__ */ e(
|
|
53
|
-
|
|
52
|
+
C,
|
|
54
53
|
{
|
|
55
54
|
items: a,
|
|
56
55
|
activeIndex: l,
|
|
57
|
-
className:
|
|
56
|
+
className: i.hideOnMobile,
|
|
58
57
|
onSelect: m
|
|
59
58
|
}
|
|
60
59
|
),
|
|
61
60
|
/* @__PURE__ */ e(
|
|
62
|
-
|
|
61
|
+
y,
|
|
63
62
|
{
|
|
64
63
|
count: a.length,
|
|
65
64
|
activeIndex: l,
|
|
66
|
-
className:
|
|
65
|
+
className: i.hideOnDesktop,
|
|
67
66
|
onSelect: m
|
|
68
67
|
}
|
|
69
68
|
)
|
|
70
69
|
] });
|
|
71
70
|
};
|
|
72
71
|
export {
|
|
73
|
-
|
|
72
|
+
U as AdvancedGallery
|
|
74
73
|
};
|
|
@@ -62,3 +62,18 @@
|
|
|
62
62
|
aspect-ratio: 1 / 1;
|
|
63
63
|
}
|
|
64
64
|
}
|
|
65
|
+
|
|
66
|
+
.hideOnDesktop {
|
|
67
|
+
display: none;
|
|
68
|
+
}
|
|
69
|
+
.hideOnMobile {
|
|
70
|
+
display: inherit;
|
|
71
|
+
}
|
|
72
|
+
@media (width <= 768px) {
|
|
73
|
+
.hideOnDesktop {
|
|
74
|
+
display: inherit;
|
|
75
|
+
}
|
|
76
|
+
.hideOnMobile {
|
|
77
|
+
display: none;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("react"),j=require("swiper/modules"),d=require("swiper/react"),x=require("../../utils/useSwiper/useSwiper.cjs.js"),q=require("../../utils/cn/cn.cjs.js");;/* empty css */;/* empty css */;/* empty css */const i=require("../../src/components/ImageGallery/imageGallery.module.css"),w=require("../Label/Label.cjs.js"),P=require("./components/ImageGalleryPagination/ImageGalleryPagination.cjs.js"),u=require("../GalleryPagination/GalleryPagination.cjs.js"),N=[j.Navigation],_=({images:a,label:o,className:m,type:r="primary"})=>{const{activeIndex:s,handleSlideTo:t,handleSlideChange:h,onSwiperInit:g,handleSwiperResize:p,handleUserInteraction:n}=x.useSwiperWithAutoPlay(3e3),l=y.useCallback(c=>{n(),t(c)},[n,t]);return e.jsxs("div",{className:q.cn(i.root,m,{[i.primary]:r==="primary",[i.secondary]:r==="secondary"}),children:[o&&e.jsx("div",{className:i.labelWrap,children:e.jsx(w.Label,{color:"black",size:"sm",children:o})}),e.jsx(d.Swiper,{onSwiper:g,onResize:p,onSlideChange:h,onTouchStart:n,onTouchEnd:n,modules:N,spaceBetween:0,slidesPerView:1,className:i.swiper,children:a.map((c,S)=>e.jsx(d.SwiperSlide,{children:e.jsx("div",{className:i.imageContainer,children:e.jsx("div",{className:i.imageWrapper,children:e.jsx("img",{src:c,alt:"product image",width:r==="primary"?600:492,height:r==="primary"?600:389,className:i.image,onClick:n})})})},S))}),r==="primary"?e.jsxs(e.Fragment,{children:[e.jsx(P.ImageGalleryPagination,{images:a,className:i.hideOnMobile,activeIndex:s,onSelect:l}),e.jsx(u.GalleryPagination,{count:a.length,activeIndex:s,className:i.hideOnDesktop,onSelect:l})]}):e.jsx(u.GalleryPagination,{count:a.length,activeIndex:s,onSelect:l})]})};exports.ImageGallery=_;
|
|
@@ -1,47 +1,46 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsxs as s, jsx as e, Fragment as
|
|
3
|
-
import { useCallback as
|
|
4
|
-
import { Navigation as
|
|
5
|
-
import { Swiper as
|
|
6
|
-
import { useSwiperWithAutoPlay as
|
|
7
|
-
import { cn as
|
|
2
|
+
import { jsxs as s, jsx as e, Fragment as f } from "react/jsx-runtime";
|
|
3
|
+
import { useCallback as w } from "react";
|
|
4
|
+
import { Navigation as y } from "swiper/modules";
|
|
5
|
+
import { Swiper as N, SwiperSlide as v } from "swiper/react";
|
|
6
|
+
import { useSwiperWithAutoPlay as I } from "../../utils/useSwiper/useSwiper.es.js";
|
|
7
|
+
import { cn as P } from "../../utils/cn/cn.es.js";
|
|
8
8
|
/* empty css */
|
|
9
9
|
/* empty css */
|
|
10
10
|
/* empty css */
|
|
11
11
|
import r from "../../components/ImageGallery/imageGallery.module.css";
|
|
12
|
-
import
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
|
|
16
|
-
const
|
|
17
|
-
const { activeIndex: n, handleSlideTo: c, handleSlideChange: S, onSwiperInit: g, handleSwiperResize: u, handleUserInteraction: o } = P(3e3), l = y(
|
|
12
|
+
import { Label as C } from "../Label/Label.es.js";
|
|
13
|
+
import { ImageGalleryPagination as b } from "./components/ImageGalleryPagination/ImageGalleryPagination.es.js";
|
|
14
|
+
import { GalleryPagination as d } from "../GalleryPagination/GalleryPagination.es.js";
|
|
15
|
+
const k = [y], A = ({ images: o, label: m, className: p, type: i = "primary" }) => {
|
|
16
|
+
const { activeIndex: n, handleSlideTo: c, handleSlideChange: h, onSwiperInit: S, handleSwiperResize: g, handleUserInteraction: a } = I(3e3), l = w(
|
|
18
17
|
(t) => {
|
|
19
|
-
|
|
18
|
+
a(), c(t);
|
|
20
19
|
},
|
|
21
|
-
[
|
|
20
|
+
[a, c]
|
|
22
21
|
);
|
|
23
22
|
return /* @__PURE__ */ s(
|
|
24
23
|
"div",
|
|
25
24
|
{
|
|
26
|
-
className:
|
|
25
|
+
className: P(r.root, p, {
|
|
27
26
|
[r.primary]: i === "primary",
|
|
28
27
|
[r.secondary]: i === "secondary"
|
|
29
28
|
}),
|
|
30
29
|
children: [
|
|
31
|
-
m && /* @__PURE__ */ e("div", { className: r.labelWrap, children: /* @__PURE__ */ e(
|
|
30
|
+
m && /* @__PURE__ */ e("div", { className: r.labelWrap, children: /* @__PURE__ */ e(C, { color: "black", size: "sm", children: m }) }),
|
|
32
31
|
/* @__PURE__ */ e(
|
|
33
|
-
|
|
32
|
+
N,
|
|
34
33
|
{
|
|
35
|
-
onSwiper:
|
|
36
|
-
onResize:
|
|
37
|
-
onSlideChange:
|
|
38
|
-
onTouchStart:
|
|
39
|
-
onTouchEnd:
|
|
40
|
-
modules:
|
|
34
|
+
onSwiper: S,
|
|
35
|
+
onResize: g,
|
|
36
|
+
onSlideChange: h,
|
|
37
|
+
onTouchStart: a,
|
|
38
|
+
onTouchEnd: a,
|
|
39
|
+
modules: k,
|
|
41
40
|
spaceBetween: 0,
|
|
42
41
|
slidesPerView: 1,
|
|
43
42
|
className: r.swiper,
|
|
44
|
-
children:
|
|
43
|
+
children: o.map((t, u) => /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e("div", { className: r.imageContainer, children: /* @__PURE__ */ e("div", { className: r.imageWrapper, children: /* @__PURE__ */ e(
|
|
45
44
|
"img",
|
|
46
45
|
{
|
|
47
46
|
src: t,
|
|
@@ -49,35 +48,35 @@ const x = [N], F = ({ images: a, label: m, className: h, type: i = "primary" })
|
|
|
49
48
|
width: i === "primary" ? 600 : 492,
|
|
50
49
|
height: i === "primary" ? 600 : 389,
|
|
51
50
|
className: r.image,
|
|
52
|
-
onClick:
|
|
51
|
+
onClick: a
|
|
53
52
|
}
|
|
54
|
-
) }) }) },
|
|
53
|
+
) }) }) }, u))
|
|
55
54
|
}
|
|
56
55
|
),
|
|
57
|
-
i === "primary" ? /* @__PURE__ */ s(
|
|
56
|
+
i === "primary" ? /* @__PURE__ */ s(f, { children: [
|
|
58
57
|
/* @__PURE__ */ e(
|
|
59
|
-
|
|
58
|
+
b,
|
|
60
59
|
{
|
|
61
|
-
images:
|
|
62
|
-
className:
|
|
60
|
+
images: o,
|
|
61
|
+
className: r.hideOnMobile,
|
|
63
62
|
activeIndex: n,
|
|
64
63
|
onSelect: l
|
|
65
64
|
}
|
|
66
65
|
),
|
|
67
66
|
/* @__PURE__ */ e(
|
|
68
|
-
|
|
67
|
+
d,
|
|
69
68
|
{
|
|
70
|
-
count:
|
|
69
|
+
count: o.length,
|
|
71
70
|
activeIndex: n,
|
|
72
|
-
className:
|
|
71
|
+
className: r.hideOnDesktop,
|
|
73
72
|
onSelect: l
|
|
74
73
|
}
|
|
75
74
|
)
|
|
76
|
-
] }) : /* @__PURE__ */ e(
|
|
75
|
+
] }) : /* @__PURE__ */ e(d, { count: o.length, activeIndex: n, onSelect: l })
|
|
77
76
|
]
|
|
78
77
|
}
|
|
79
78
|
);
|
|
80
79
|
};
|
|
81
80
|
export {
|
|
82
|
-
|
|
81
|
+
A as ImageGallery
|
|
83
82
|
};
|
|
@@ -77,3 +77,18 @@
|
|
|
77
77
|
aspect-ratio: 1 / 1;
|
|
78
78
|
}
|
|
79
79
|
}
|
|
80
|
+
|
|
81
|
+
.hideOnDesktop {
|
|
82
|
+
display: none;
|
|
83
|
+
}
|
|
84
|
+
.hideOnMobile {
|
|
85
|
+
display: inherit;
|
|
86
|
+
}
|
|
87
|
+
@media (width <= 768px) {
|
|
88
|
+
.hideOnDesktop {
|
|
89
|
+
display: inherit;
|
|
90
|
+
}
|
|
91
|
+
.hideOnMobile {
|
|
92
|
+
display: none;
|
|
93
|
+
}
|
|
94
|
+
}
|
package/package.json
CHANGED