@clyrex-digital/clyrex-controls-dev 0.8.1-dev.20260905093435 → 0.8.1-dev.20260909082512
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/{DataBindingControls-WC3HBVVQ.mjs → DataBindingControls-4HUO25DS.mjs} +1 -1
- package/dist/{DataBindingControls-UUDERFAD.mjs → DataBindingControls-RT6LHELH.mjs} +1 -1
- package/dist/{Slider-BSUOIWP6.mjs → Slider-IVPJBPE5.mjs} +29 -11
- package/dist/{Slider-F4OIS46A.mjs → Slider-QIGKP6AE.mjs} +29 -11
- package/dist/index.js +32 -13
- package/dist/index.mjs +4 -3
- package/dist/server.js +32 -13
- package/dist/server.mjs +4 -3
- package/package.json +1 -1
|
@@ -195,7 +195,7 @@ var DataBindingControls = ({
|
|
|
195
195
|
);
|
|
196
196
|
})
|
|
197
197
|
] });
|
|
198
|
-
return /* @__PURE__ */ jsxs("div", { className: mode === "toolbar" ? "
|
|
198
|
+
return /* @__PURE__ */ jsxs("div", { className: mode === "toolbar" ? "my-6" : "flex flex-col gap-2", children: [
|
|
199
199
|
shouldShowToolbar && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 md:flex-row md:items-center md:justify-between", children: [
|
|
200
200
|
showSearchBar && /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
|
|
201
201
|
InputControl_default,
|
|
@@ -191,7 +191,7 @@ var DataBindingControls = ({
|
|
|
191
191
|
);
|
|
192
192
|
})
|
|
193
193
|
] });
|
|
194
|
-
return /* @__PURE__ */ jsxs("div", { className: mode === "toolbar" ? "
|
|
194
|
+
return /* @__PURE__ */ jsxs("div", { className: mode === "toolbar" ? "my-6" : "flex flex-col gap-2", children: [
|
|
195
195
|
shouldShowToolbar && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 md:flex-row md:items-center md:justify-between", children: [
|
|
196
196
|
showSearchBar && /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
|
|
197
197
|
InputControl_default,
|
|
@@ -7,7 +7,9 @@ import React, { useState, useEffect, Children, cloneElement } from "react";
|
|
|
7
7
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
8
8
|
var Slider = ({
|
|
9
9
|
children,
|
|
10
|
+
columns,
|
|
10
11
|
slidesToShow = 4,
|
|
12
|
+
lastColPercentage,
|
|
11
13
|
infinite_scroll = false,
|
|
12
14
|
autoplay = false,
|
|
13
15
|
autoplay_speed = 3e3,
|
|
@@ -25,25 +27,29 @@ var Slider = ({
|
|
|
25
27
|
}) => {
|
|
26
28
|
const [currentSlide, setCurrentSlide] = useState(0);
|
|
27
29
|
const [transition, setTransition] = useState(true);
|
|
30
|
+
const initialSlidesToShow = slidesToShow ?? columns ?? 4;
|
|
28
31
|
const [slidesToShowState, setSlidesToShowState] = useState(
|
|
29
|
-
typeof
|
|
32
|
+
typeof initialSlidesToShow === "number" ? initialSlidesToShow : initialSlidesToShow.large
|
|
30
33
|
);
|
|
31
34
|
const [isPlaying, setIsPlaying] = useState(autoplay);
|
|
32
35
|
useEffect(() => {
|
|
33
|
-
if (typeof
|
|
36
|
+
if (typeof initialSlidesToShow === "number") {
|
|
37
|
+
setSlidesToShowState(initialSlidesToShow);
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
34
40
|
const handleResize = () => {
|
|
35
41
|
if (window.innerWidth >= 1024) {
|
|
36
|
-
setSlidesToShowState(
|
|
42
|
+
setSlidesToShowState(initialSlidesToShow.large);
|
|
37
43
|
} else if (window.innerWidth >= 768) {
|
|
38
|
-
setSlidesToShowState(
|
|
44
|
+
setSlidesToShowState(initialSlidesToShow.medium);
|
|
39
45
|
} else {
|
|
40
|
-
setSlidesToShowState(
|
|
46
|
+
setSlidesToShowState(initialSlidesToShow.small);
|
|
41
47
|
}
|
|
42
48
|
};
|
|
43
49
|
handleResize();
|
|
44
50
|
window.addEventListener("resize", handleResize);
|
|
45
51
|
return () => window.removeEventListener("resize", handleResize);
|
|
46
|
-
}, [
|
|
52
|
+
}, [initialSlidesToShow]);
|
|
47
53
|
useEffect(() => {
|
|
48
54
|
if (!autoplay) return;
|
|
49
55
|
const timer = setInterval(() => {
|
|
@@ -54,8 +60,20 @@ var Slider = ({
|
|
|
54
60
|
return () => clearInterval(timer);
|
|
55
61
|
}, [autoplay, autoplay_speed, currentSlide, isPlaying]);
|
|
56
62
|
const totalSlides = Children.count(children);
|
|
57
|
-
const
|
|
58
|
-
const
|
|
63
|
+
const numColumns = columns ?? slidesToShowState;
|
|
64
|
+
const slideWidthPercentage = (() => {
|
|
65
|
+
if (typeof lastColPercentage !== "number") {
|
|
66
|
+
return numColumns > 0 ? 100 / numColumns : 100;
|
|
67
|
+
}
|
|
68
|
+
const pct = Math.max(0, Math.min(100, lastColPercentage));
|
|
69
|
+
if (pct === 0 || numColumns <= 1) {
|
|
70
|
+
return numColumns > 0 ? 100 / numColumns : 100;
|
|
71
|
+
}
|
|
72
|
+
return 100 / (numColumns - 1 + pct / 100);
|
|
73
|
+
})();
|
|
74
|
+
const effectiveSlidesToShow = 100 / slideWidthPercentage;
|
|
75
|
+
const maxSlide = Math.max(0, Math.ceil(totalSlides - effectiveSlidesToShow));
|
|
76
|
+
const step = scrollByColumns ? Math.max(1, Math.floor(effectiveSlidesToShow)) : 1;
|
|
59
77
|
const nextSlide = () => {
|
|
60
78
|
if (currentSlide >= maxSlide) {
|
|
61
79
|
if (infinite_scroll) {
|
|
@@ -82,7 +100,7 @@ var Slider = ({
|
|
|
82
100
|
};
|
|
83
101
|
const goToSlide = (index) => {
|
|
84
102
|
setTransition(true);
|
|
85
|
-
setCurrentSlide(index);
|
|
103
|
+
setCurrentSlide(Math.min(Math.max(0, index), maxSlide));
|
|
86
104
|
};
|
|
87
105
|
const handlePillClick = (index) => {
|
|
88
106
|
goToSlide(index);
|
|
@@ -100,7 +118,7 @@ var Slider = ({
|
|
|
100
118
|
setIsPlaying(true);
|
|
101
119
|
}
|
|
102
120
|
};
|
|
103
|
-
const translateX = -currentSlide *
|
|
121
|
+
const translateX = -currentSlide * slideWidthPercentage;
|
|
104
122
|
const slides = Children.map(children, (child, index) => {
|
|
105
123
|
if (!React.isValidElement(child)) return null;
|
|
106
124
|
const childProps = child.props;
|
|
@@ -109,7 +127,7 @@ var Slider = ({
|
|
|
109
127
|
"div",
|
|
110
128
|
{
|
|
111
129
|
className: `flex-none ${scaleOnHover ? "group hover:z-50" : ""} relative`,
|
|
112
|
-
style: { width: `calc(${
|
|
130
|
+
style: { width: `calc(${slideWidthPercentage}%)`, paddingRight: gap },
|
|
113
131
|
children: cloneElement(child, {
|
|
114
132
|
className: mergedClassName
|
|
115
133
|
})
|
|
@@ -5,7 +5,9 @@ import React, { useState, useEffect, Children, cloneElement } from "react";
|
|
|
5
5
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
6
6
|
var Slider = ({
|
|
7
7
|
children,
|
|
8
|
+
columns,
|
|
8
9
|
slidesToShow = 4,
|
|
10
|
+
lastColPercentage,
|
|
9
11
|
infinite_scroll = false,
|
|
10
12
|
autoplay = false,
|
|
11
13
|
autoplay_speed = 3e3,
|
|
@@ -23,25 +25,29 @@ var Slider = ({
|
|
|
23
25
|
}) => {
|
|
24
26
|
const [currentSlide, setCurrentSlide] = useState(0);
|
|
25
27
|
const [transition, setTransition] = useState(true);
|
|
28
|
+
const initialSlidesToShow = slidesToShow ?? columns ?? 4;
|
|
26
29
|
const [slidesToShowState, setSlidesToShowState] = useState(
|
|
27
|
-
typeof
|
|
30
|
+
typeof initialSlidesToShow === "number" ? initialSlidesToShow : initialSlidesToShow.large
|
|
28
31
|
);
|
|
29
32
|
const [isPlaying, setIsPlaying] = useState(autoplay);
|
|
30
33
|
useEffect(() => {
|
|
31
|
-
if (typeof
|
|
34
|
+
if (typeof initialSlidesToShow === "number") {
|
|
35
|
+
setSlidesToShowState(initialSlidesToShow);
|
|
36
|
+
return;
|
|
37
|
+
}
|
|
32
38
|
const handleResize = () => {
|
|
33
39
|
if (window.innerWidth >= 1024) {
|
|
34
|
-
setSlidesToShowState(
|
|
40
|
+
setSlidesToShowState(initialSlidesToShow.large);
|
|
35
41
|
} else if (window.innerWidth >= 768) {
|
|
36
|
-
setSlidesToShowState(
|
|
42
|
+
setSlidesToShowState(initialSlidesToShow.medium);
|
|
37
43
|
} else {
|
|
38
|
-
setSlidesToShowState(
|
|
44
|
+
setSlidesToShowState(initialSlidesToShow.small);
|
|
39
45
|
}
|
|
40
46
|
};
|
|
41
47
|
handleResize();
|
|
42
48
|
window.addEventListener("resize", handleResize);
|
|
43
49
|
return () => window.removeEventListener("resize", handleResize);
|
|
44
|
-
}, [
|
|
50
|
+
}, [initialSlidesToShow]);
|
|
45
51
|
useEffect(() => {
|
|
46
52
|
if (!autoplay) return;
|
|
47
53
|
const timer = setInterval(() => {
|
|
@@ -52,8 +58,20 @@ var Slider = ({
|
|
|
52
58
|
return () => clearInterval(timer);
|
|
53
59
|
}, [autoplay, autoplay_speed, currentSlide, isPlaying]);
|
|
54
60
|
const totalSlides = Children.count(children);
|
|
55
|
-
const
|
|
56
|
-
const
|
|
61
|
+
const numColumns = columns ?? slidesToShowState;
|
|
62
|
+
const slideWidthPercentage = (() => {
|
|
63
|
+
if (typeof lastColPercentage !== "number") {
|
|
64
|
+
return numColumns > 0 ? 100 / numColumns : 100;
|
|
65
|
+
}
|
|
66
|
+
const pct = Math.max(0, Math.min(100, lastColPercentage));
|
|
67
|
+
if (pct === 0 || numColumns <= 1) {
|
|
68
|
+
return numColumns > 0 ? 100 / numColumns : 100;
|
|
69
|
+
}
|
|
70
|
+
return 100 / (numColumns - 1 + pct / 100);
|
|
71
|
+
})();
|
|
72
|
+
const effectiveSlidesToShow = 100 / slideWidthPercentage;
|
|
73
|
+
const maxSlide = Math.max(0, Math.ceil(totalSlides - effectiveSlidesToShow));
|
|
74
|
+
const step = scrollByColumns ? Math.max(1, Math.floor(effectiveSlidesToShow)) : 1;
|
|
57
75
|
const nextSlide = () => {
|
|
58
76
|
if (currentSlide >= maxSlide) {
|
|
59
77
|
if (infinite_scroll) {
|
|
@@ -80,7 +98,7 @@ var Slider = ({
|
|
|
80
98
|
};
|
|
81
99
|
const goToSlide = (index) => {
|
|
82
100
|
setTransition(true);
|
|
83
|
-
setCurrentSlide(index);
|
|
101
|
+
setCurrentSlide(Math.min(Math.max(0, index), maxSlide));
|
|
84
102
|
};
|
|
85
103
|
const handlePillClick = (index) => {
|
|
86
104
|
goToSlide(index);
|
|
@@ -98,7 +116,7 @@ var Slider = ({
|
|
|
98
116
|
setIsPlaying(true);
|
|
99
117
|
}
|
|
100
118
|
};
|
|
101
|
-
const translateX = -currentSlide *
|
|
119
|
+
const translateX = -currentSlide * slideWidthPercentage;
|
|
102
120
|
const slides = Children.map(children, (child, index) => {
|
|
103
121
|
if (!React.isValidElement(child)) return null;
|
|
104
122
|
const childProps = child.props;
|
|
@@ -107,7 +125,7 @@ var Slider = ({
|
|
|
107
125
|
"div",
|
|
108
126
|
{
|
|
109
127
|
className: `flex-none ${scaleOnHover ? "group hover:z-50" : ""} relative`,
|
|
110
|
-
style: { width: `calc(${
|
|
128
|
+
style: { width: `calc(${slideWidthPercentage}%)`, paddingRight: gap },
|
|
111
129
|
children: cloneElement(child, {
|
|
112
130
|
className: mergedClassName
|
|
113
131
|
})
|
package/dist/index.js
CHANGED
|
@@ -5782,7 +5782,7 @@ var init_DataBindingControls = __esm({
|
|
|
5782
5782
|
);
|
|
5783
5783
|
})
|
|
5784
5784
|
] });
|
|
5785
|
-
return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: mode === "toolbar" ? "
|
|
5785
|
+
return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: mode === "toolbar" ? "my-6" : "flex flex-col gap-2", children: [
|
|
5786
5786
|
shouldShowToolbar && /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "flex flex-col gap-3 md:flex-row md:items-center md:justify-between", children: [
|
|
5787
5787
|
showSearchBar && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
|
|
5788
5788
|
InputControl_default,
|
|
@@ -5843,7 +5843,9 @@ var init_Slider = __esm({
|
|
|
5843
5843
|
import_jsx_runtime86 = require("react/jsx-runtime");
|
|
5844
5844
|
Slider = ({
|
|
5845
5845
|
children,
|
|
5846
|
+
columns,
|
|
5846
5847
|
slidesToShow = 4,
|
|
5848
|
+
lastColPercentage,
|
|
5847
5849
|
infinite_scroll = false,
|
|
5848
5850
|
autoplay = false,
|
|
5849
5851
|
autoplay_speed = 3e3,
|
|
@@ -5861,25 +5863,29 @@ var init_Slider = __esm({
|
|
|
5861
5863
|
}) => {
|
|
5862
5864
|
const [currentSlide, setCurrentSlide] = (0, import_react60.useState)(0);
|
|
5863
5865
|
const [transition, setTransition] = (0, import_react60.useState)(true);
|
|
5866
|
+
const initialSlidesToShow = slidesToShow ?? columns ?? 4;
|
|
5864
5867
|
const [slidesToShowState, setSlidesToShowState] = (0, import_react60.useState)(
|
|
5865
|
-
typeof
|
|
5868
|
+
typeof initialSlidesToShow === "number" ? initialSlidesToShow : initialSlidesToShow.large
|
|
5866
5869
|
);
|
|
5867
5870
|
const [isPlaying, setIsPlaying] = (0, import_react60.useState)(autoplay);
|
|
5868
5871
|
(0, import_react60.useEffect)(() => {
|
|
5869
|
-
if (typeof
|
|
5872
|
+
if (typeof initialSlidesToShow === "number") {
|
|
5873
|
+
setSlidesToShowState(initialSlidesToShow);
|
|
5874
|
+
return;
|
|
5875
|
+
}
|
|
5870
5876
|
const handleResize = () => {
|
|
5871
5877
|
if (window.innerWidth >= 1024) {
|
|
5872
|
-
setSlidesToShowState(
|
|
5878
|
+
setSlidesToShowState(initialSlidesToShow.large);
|
|
5873
5879
|
} else if (window.innerWidth >= 768) {
|
|
5874
|
-
setSlidesToShowState(
|
|
5880
|
+
setSlidesToShowState(initialSlidesToShow.medium);
|
|
5875
5881
|
} else {
|
|
5876
|
-
setSlidesToShowState(
|
|
5882
|
+
setSlidesToShowState(initialSlidesToShow.small);
|
|
5877
5883
|
}
|
|
5878
5884
|
};
|
|
5879
5885
|
handleResize();
|
|
5880
5886
|
window.addEventListener("resize", handleResize);
|
|
5881
5887
|
return () => window.removeEventListener("resize", handleResize);
|
|
5882
|
-
}, [
|
|
5888
|
+
}, [initialSlidesToShow]);
|
|
5883
5889
|
(0, import_react60.useEffect)(() => {
|
|
5884
5890
|
if (!autoplay) return;
|
|
5885
5891
|
const timer = setInterval(() => {
|
|
@@ -5890,8 +5896,20 @@ var init_Slider = __esm({
|
|
|
5890
5896
|
return () => clearInterval(timer);
|
|
5891
5897
|
}, [autoplay, autoplay_speed, currentSlide, isPlaying]);
|
|
5892
5898
|
const totalSlides = import_react60.Children.count(children);
|
|
5893
|
-
const
|
|
5894
|
-
const
|
|
5899
|
+
const numColumns = columns ?? slidesToShowState;
|
|
5900
|
+
const slideWidthPercentage = (() => {
|
|
5901
|
+
if (typeof lastColPercentage !== "number") {
|
|
5902
|
+
return numColumns > 0 ? 100 / numColumns : 100;
|
|
5903
|
+
}
|
|
5904
|
+
const pct = Math.max(0, Math.min(100, lastColPercentage));
|
|
5905
|
+
if (pct === 0 || numColumns <= 1) {
|
|
5906
|
+
return numColumns > 0 ? 100 / numColumns : 100;
|
|
5907
|
+
}
|
|
5908
|
+
return 100 / (numColumns - 1 + pct / 100);
|
|
5909
|
+
})();
|
|
5910
|
+
const effectiveSlidesToShow = 100 / slideWidthPercentage;
|
|
5911
|
+
const maxSlide = Math.max(0, Math.ceil(totalSlides - effectiveSlidesToShow));
|
|
5912
|
+
const step = scrollByColumns ? Math.max(1, Math.floor(effectiveSlidesToShow)) : 1;
|
|
5895
5913
|
const nextSlide = () => {
|
|
5896
5914
|
if (currentSlide >= maxSlide) {
|
|
5897
5915
|
if (infinite_scroll) {
|
|
@@ -5918,7 +5936,7 @@ var init_Slider = __esm({
|
|
|
5918
5936
|
};
|
|
5919
5937
|
const goToSlide = (index) => {
|
|
5920
5938
|
setTransition(true);
|
|
5921
|
-
setCurrentSlide(index);
|
|
5939
|
+
setCurrentSlide(Math.min(Math.max(0, index), maxSlide));
|
|
5922
5940
|
};
|
|
5923
5941
|
const handlePillClick = (index) => {
|
|
5924
5942
|
goToSlide(index);
|
|
@@ -5936,7 +5954,7 @@ var init_Slider = __esm({
|
|
|
5936
5954
|
setIsPlaying(true);
|
|
5937
5955
|
}
|
|
5938
5956
|
};
|
|
5939
|
-
const translateX = -currentSlide *
|
|
5957
|
+
const translateX = -currentSlide * slideWidthPercentage;
|
|
5940
5958
|
const slides = import_react60.Children.map(children, (child, index) => {
|
|
5941
5959
|
if (!import_react60.default.isValidElement(child)) return null;
|
|
5942
5960
|
const childProps = child.props;
|
|
@@ -5945,7 +5963,7 @@ var init_Slider = __esm({
|
|
|
5945
5963
|
"div",
|
|
5946
5964
|
{
|
|
5947
5965
|
className: `flex-none ${scaleOnHover ? "group hover:z-50" : ""} relative`,
|
|
5948
|
-
style: { width: `calc(${
|
|
5966
|
+
style: { width: `calc(${slideWidthPercentage}%)`, paddingRight: gap },
|
|
5949
5967
|
children: (0, import_react60.cloneElement)(child, {
|
|
5950
5968
|
className: mergedClassName
|
|
5951
5969
|
})
|
|
@@ -9000,7 +9018,8 @@ var DivContainer = async (props) => {
|
|
|
9000
9018
|
noLinkColor && "no-link-color",
|
|
9001
9019
|
!!props.node.enterAnimation && "enter-animation"
|
|
9002
9020
|
].filter(Boolean).join(" ");
|
|
9003
|
-
const
|
|
9021
|
+
const isRepeatedContainer = props.node.repeatForEachItem === true || props.node.replicate === true;
|
|
9022
|
+
const showDataBindingControls = !isRepeatedContainer && Boolean(
|
|
9004
9023
|
dataBindingProperties?.showFacets || dataBindingProperties?.showSortOptions || dataBindingProperties?.showSearchBar
|
|
9005
9024
|
);
|
|
9006
9025
|
const WrapperComponent = Wrapper;
|
package/dist/index.mjs
CHANGED
|
@@ -2346,10 +2346,10 @@ var GoogleMapNode_default = GoogleMapNode;
|
|
|
2346
2346
|
// src/components/pageRenderingEngine/nodes/DivContainer.tsx
|
|
2347
2347
|
import { jsx as jsx36, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
2348
2348
|
var Pagination = dynamic13(() => import("./Pagination-CQKMBXXJ.mjs"), { ssr: true });
|
|
2349
|
-
var DataBindingControls = dynamic13(() => import("./DataBindingControls-
|
|
2349
|
+
var DataBindingControls = dynamic13(() => import("./DataBindingControls-RT6LHELH.mjs"), {
|
|
2350
2350
|
ssr: true
|
|
2351
2351
|
});
|
|
2352
|
-
var Slider = dynamic13(() => import("./Slider-
|
|
2352
|
+
var Slider = dynamic13(() => import("./Slider-IVPJBPE5.mjs"), {
|
|
2353
2353
|
ssr: false
|
|
2354
2354
|
});
|
|
2355
2355
|
function toCamelCase(str) {
|
|
@@ -2830,7 +2830,8 @@ var DivContainer = async (props) => {
|
|
|
2830
2830
|
noLinkColor && "no-link-color",
|
|
2831
2831
|
!!props.node.enterAnimation && "enter-animation"
|
|
2832
2832
|
].filter(Boolean).join(" ");
|
|
2833
|
-
const
|
|
2833
|
+
const isRepeatedContainer = props.node.repeatForEachItem === true || props.node.replicate === true;
|
|
2834
|
+
const showDataBindingControls = !isRepeatedContainer && Boolean(
|
|
2834
2835
|
dataBindingProperties?.showFacets || dataBindingProperties?.showSortOptions || dataBindingProperties?.showSearchBar
|
|
2835
2836
|
);
|
|
2836
2837
|
const WrapperComponent = Wrapper;
|
package/dist/server.js
CHANGED
|
@@ -5780,7 +5780,7 @@ var init_DataBindingControls = __esm({
|
|
|
5780
5780
|
);
|
|
5781
5781
|
})
|
|
5782
5782
|
] });
|
|
5783
|
-
return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: mode === "toolbar" ? "
|
|
5783
|
+
return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: mode === "toolbar" ? "my-6" : "flex flex-col gap-2", children: [
|
|
5784
5784
|
shouldShowToolbar && /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "flex flex-col gap-3 md:flex-row md:items-center md:justify-between", children: [
|
|
5785
5785
|
showSearchBar && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
|
|
5786
5786
|
InputControl_default,
|
|
@@ -5841,7 +5841,9 @@ var init_Slider = __esm({
|
|
|
5841
5841
|
import_jsx_runtime86 = require("react/jsx-runtime");
|
|
5842
5842
|
Slider = ({
|
|
5843
5843
|
children,
|
|
5844
|
+
columns,
|
|
5844
5845
|
slidesToShow = 4,
|
|
5846
|
+
lastColPercentage,
|
|
5845
5847
|
infinite_scroll = false,
|
|
5846
5848
|
autoplay = false,
|
|
5847
5849
|
autoplay_speed = 3e3,
|
|
@@ -5859,25 +5861,29 @@ var init_Slider = __esm({
|
|
|
5859
5861
|
}) => {
|
|
5860
5862
|
const [currentSlide, setCurrentSlide] = (0, import_react60.useState)(0);
|
|
5861
5863
|
const [transition, setTransition] = (0, import_react60.useState)(true);
|
|
5864
|
+
const initialSlidesToShow = slidesToShow ?? columns ?? 4;
|
|
5862
5865
|
const [slidesToShowState, setSlidesToShowState] = (0, import_react60.useState)(
|
|
5863
|
-
typeof
|
|
5866
|
+
typeof initialSlidesToShow === "number" ? initialSlidesToShow : initialSlidesToShow.large
|
|
5864
5867
|
);
|
|
5865
5868
|
const [isPlaying, setIsPlaying] = (0, import_react60.useState)(autoplay);
|
|
5866
5869
|
(0, import_react60.useEffect)(() => {
|
|
5867
|
-
if (typeof
|
|
5870
|
+
if (typeof initialSlidesToShow === "number") {
|
|
5871
|
+
setSlidesToShowState(initialSlidesToShow);
|
|
5872
|
+
return;
|
|
5873
|
+
}
|
|
5868
5874
|
const handleResize = () => {
|
|
5869
5875
|
if (window.innerWidth >= 1024) {
|
|
5870
|
-
setSlidesToShowState(
|
|
5876
|
+
setSlidesToShowState(initialSlidesToShow.large);
|
|
5871
5877
|
} else if (window.innerWidth >= 768) {
|
|
5872
|
-
setSlidesToShowState(
|
|
5878
|
+
setSlidesToShowState(initialSlidesToShow.medium);
|
|
5873
5879
|
} else {
|
|
5874
|
-
setSlidesToShowState(
|
|
5880
|
+
setSlidesToShowState(initialSlidesToShow.small);
|
|
5875
5881
|
}
|
|
5876
5882
|
};
|
|
5877
5883
|
handleResize();
|
|
5878
5884
|
window.addEventListener("resize", handleResize);
|
|
5879
5885
|
return () => window.removeEventListener("resize", handleResize);
|
|
5880
|
-
}, [
|
|
5886
|
+
}, [initialSlidesToShow]);
|
|
5881
5887
|
(0, import_react60.useEffect)(() => {
|
|
5882
5888
|
if (!autoplay) return;
|
|
5883
5889
|
const timer = setInterval(() => {
|
|
@@ -5888,8 +5894,20 @@ var init_Slider = __esm({
|
|
|
5888
5894
|
return () => clearInterval(timer);
|
|
5889
5895
|
}, [autoplay, autoplay_speed, currentSlide, isPlaying]);
|
|
5890
5896
|
const totalSlides = import_react60.Children.count(children);
|
|
5891
|
-
const
|
|
5892
|
-
const
|
|
5897
|
+
const numColumns = columns ?? slidesToShowState;
|
|
5898
|
+
const slideWidthPercentage = (() => {
|
|
5899
|
+
if (typeof lastColPercentage !== "number") {
|
|
5900
|
+
return numColumns > 0 ? 100 / numColumns : 100;
|
|
5901
|
+
}
|
|
5902
|
+
const pct = Math.max(0, Math.min(100, lastColPercentage));
|
|
5903
|
+
if (pct === 0 || numColumns <= 1) {
|
|
5904
|
+
return numColumns > 0 ? 100 / numColumns : 100;
|
|
5905
|
+
}
|
|
5906
|
+
return 100 / (numColumns - 1 + pct / 100);
|
|
5907
|
+
})();
|
|
5908
|
+
const effectiveSlidesToShow = 100 / slideWidthPercentage;
|
|
5909
|
+
const maxSlide = Math.max(0, Math.ceil(totalSlides - effectiveSlidesToShow));
|
|
5910
|
+
const step = scrollByColumns ? Math.max(1, Math.floor(effectiveSlidesToShow)) : 1;
|
|
5893
5911
|
const nextSlide = () => {
|
|
5894
5912
|
if (currentSlide >= maxSlide) {
|
|
5895
5913
|
if (infinite_scroll) {
|
|
@@ -5916,7 +5934,7 @@ var init_Slider = __esm({
|
|
|
5916
5934
|
};
|
|
5917
5935
|
const goToSlide = (index) => {
|
|
5918
5936
|
setTransition(true);
|
|
5919
|
-
setCurrentSlide(index);
|
|
5937
|
+
setCurrentSlide(Math.min(Math.max(0, index), maxSlide));
|
|
5920
5938
|
};
|
|
5921
5939
|
const handlePillClick = (index) => {
|
|
5922
5940
|
goToSlide(index);
|
|
@@ -5934,7 +5952,7 @@ var init_Slider = __esm({
|
|
|
5934
5952
|
setIsPlaying(true);
|
|
5935
5953
|
}
|
|
5936
5954
|
};
|
|
5937
|
-
const translateX = -currentSlide *
|
|
5955
|
+
const translateX = -currentSlide * slideWidthPercentage;
|
|
5938
5956
|
const slides = import_react60.Children.map(children, (child, index) => {
|
|
5939
5957
|
if (!import_react60.default.isValidElement(child)) return null;
|
|
5940
5958
|
const childProps = child.props;
|
|
@@ -5943,7 +5961,7 @@ var init_Slider = __esm({
|
|
|
5943
5961
|
"div",
|
|
5944
5962
|
{
|
|
5945
5963
|
className: `flex-none ${scaleOnHover ? "group hover:z-50" : ""} relative`,
|
|
5946
|
-
style: { width: `calc(${
|
|
5964
|
+
style: { width: `calc(${slideWidthPercentage}%)`, paddingRight: gap },
|
|
5947
5965
|
children: (0, import_react60.cloneElement)(child, {
|
|
5948
5966
|
className: mergedClassName
|
|
5949
5967
|
})
|
|
@@ -8969,7 +8987,8 @@ var DivContainer = async (props) => {
|
|
|
8969
8987
|
noLinkColor && "no-link-color",
|
|
8970
8988
|
!!props.node.enterAnimation && "enter-animation"
|
|
8971
8989
|
].filter(Boolean).join(" ");
|
|
8972
|
-
const
|
|
8990
|
+
const isRepeatedContainer = props.node.repeatForEachItem === true || props.node.replicate === true;
|
|
8991
|
+
const showDataBindingControls = !isRepeatedContainer && Boolean(
|
|
8973
8992
|
dataBindingProperties?.showFacets || dataBindingProperties?.showSortOptions || dataBindingProperties?.showSearchBar
|
|
8974
8993
|
);
|
|
8975
8994
|
const WrapperComponent = Wrapper;
|
package/dist/server.mjs
CHANGED
|
@@ -2314,10 +2314,10 @@ var GoogleMapNode_default = GoogleMapNode;
|
|
|
2314
2314
|
// src/components/pageRenderingEngine/nodes/DivContainer.tsx
|
|
2315
2315
|
import { jsx as jsx36, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
2316
2316
|
var Pagination = dynamic13(() => import("./Pagination-M3VZKKXY.mjs"), { ssr: true });
|
|
2317
|
-
var DataBindingControls = dynamic13(() => import("./DataBindingControls-
|
|
2317
|
+
var DataBindingControls = dynamic13(() => import("./DataBindingControls-4HUO25DS.mjs"), {
|
|
2318
2318
|
ssr: true
|
|
2319
2319
|
});
|
|
2320
|
-
var Slider = dynamic13(() => import("./Slider-
|
|
2320
|
+
var Slider = dynamic13(() => import("./Slider-QIGKP6AE.mjs"), {
|
|
2321
2321
|
ssr: false
|
|
2322
2322
|
});
|
|
2323
2323
|
function toCamelCase(str) {
|
|
@@ -2798,7 +2798,8 @@ var DivContainer = async (props) => {
|
|
|
2798
2798
|
noLinkColor && "no-link-color",
|
|
2799
2799
|
!!props.node.enterAnimation && "enter-animation"
|
|
2800
2800
|
].filter(Boolean).join(" ");
|
|
2801
|
-
const
|
|
2801
|
+
const isRepeatedContainer = props.node.repeatForEachItem === true || props.node.replicate === true;
|
|
2802
|
+
const showDataBindingControls = !isRepeatedContainer && Boolean(
|
|
2802
2803
|
dataBindingProperties?.showFacets || dataBindingProperties?.showSortOptions || dataBindingProperties?.showSearchBar
|
|
2803
2804
|
);
|
|
2804
2805
|
const WrapperComponent = Wrapper;
|