@cntrl-site/sdk 1.21.0-alpha.2 → 1.21.0-alpha.20
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/ControlSlider/ControlSlider.d.ts +25 -25
- package/dist/Components/ControlSlider/ControlSliderComponent.d.ts +12 -8
- package/dist/index.js +131 -126
- package/dist/index.mjs +131 -126
- package/dist/schemas/article/Article.schema.d.ts +7 -0
- package/dist/schemas/article/Section.schema.d.ts +5 -0
- package/dist/schemas/article/Section.schema.js +1 -0
- package/dist/sdk.css +1 -1
- package/dist/types/article/Section.d.ts +1 -0
- package/package.json +1 -5
- /package/dist/Components/helpers/{SvgImage.d.ts → SvgImage/SvgImage.d.ts} +0 -0
|
@@ -1,54 +1,61 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
-
interface
|
|
2
|
+
interface SliderProps {
|
|
3
|
+
settings: SliderSettings;
|
|
4
|
+
content: SliderItem[];
|
|
5
|
+
styles: SliderStyles;
|
|
6
|
+
isEditor?: boolean;
|
|
7
|
+
}
|
|
8
|
+
export declare function ControlSlider({ settings, content, styles: sliderStyles, isEditor }: SliderProps): React.JSX.Element;
|
|
9
|
+
type SliderItem = {
|
|
3
10
|
image: {
|
|
4
11
|
url: string;
|
|
5
12
|
name?: string;
|
|
6
13
|
};
|
|
7
14
|
imageCaption: any[];
|
|
8
|
-
}
|
|
15
|
+
};
|
|
9
16
|
type Offset = {
|
|
10
17
|
x: number;
|
|
11
18
|
y: number;
|
|
12
19
|
};
|
|
13
|
-
|
|
20
|
+
type SliderControls = {
|
|
14
21
|
arrowsImgUrl: string | null;
|
|
15
22
|
isActive: boolean;
|
|
16
23
|
color: string;
|
|
17
24
|
hover: string;
|
|
18
25
|
offset: Offset;
|
|
19
26
|
scale: number;
|
|
20
|
-
}
|
|
21
|
-
|
|
27
|
+
};
|
|
28
|
+
type SliderPagination = {
|
|
22
29
|
position: 'outside-1' | 'outside-2' | 'inside-1' | 'inside-2';
|
|
23
30
|
isActive: boolean;
|
|
24
31
|
scale: number;
|
|
25
32
|
offset: Offset;
|
|
26
33
|
colors: string[];
|
|
27
34
|
hover: string;
|
|
28
|
-
}
|
|
35
|
+
};
|
|
29
36
|
type Alignment = 'top-left' | 'top-center' | 'top-right' | 'middle-left' | 'middle-center' | 'middle-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
|
|
30
|
-
|
|
37
|
+
type SliderCaption = {
|
|
31
38
|
alignment: Alignment;
|
|
32
39
|
isActive: boolean;
|
|
33
40
|
color: string;
|
|
34
41
|
offset: Offset;
|
|
35
42
|
hover: string;
|
|
36
|
-
}
|
|
37
|
-
type
|
|
38
|
-
|
|
43
|
+
};
|
|
44
|
+
type Triggers = {
|
|
45
|
+
triggersList: {
|
|
39
46
|
click: boolean;
|
|
40
47
|
drag: boolean;
|
|
41
|
-
auto: boolean;
|
|
42
48
|
};
|
|
49
|
+
autoPlay: string | null;
|
|
43
50
|
};
|
|
44
|
-
|
|
51
|
+
type SliderSettings = {
|
|
45
52
|
controls: SliderControls;
|
|
46
53
|
pagination: SliderPagination;
|
|
47
54
|
direction: 'horizontal' | 'vertical';
|
|
48
55
|
caption: SliderCaption;
|
|
49
|
-
|
|
50
|
-
}
|
|
51
|
-
|
|
56
|
+
triggers: Triggers;
|
|
57
|
+
};
|
|
58
|
+
type CaptionStyles = {
|
|
52
59
|
fontSettings: {
|
|
53
60
|
fontFamily: string;
|
|
54
61
|
fontWeight: number;
|
|
@@ -71,15 +78,8 @@ interface CaptionStyles {
|
|
|
71
78
|
fontVariant: 'normal' | 'small-caps';
|
|
72
79
|
};
|
|
73
80
|
color: string;
|
|
74
|
-
}
|
|
75
|
-
|
|
81
|
+
};
|
|
82
|
+
type SliderStyles = {
|
|
76
83
|
caption: CaptionStyles;
|
|
77
|
-
}
|
|
78
|
-
interface SliderProps {
|
|
79
|
-
settings: SliderSettings;
|
|
80
|
-
content: SliderItem[];
|
|
81
|
-
styles: SliderStyles;
|
|
82
|
-
isEditor?: boolean;
|
|
83
|
-
}
|
|
84
|
-
export declare function ControlSlider({ settings, content, styles: sliderStyles, isEditor }: SliderProps): React.JSX.Element;
|
|
84
|
+
};
|
|
85
85
|
export {};
|
|
@@ -14,12 +14,12 @@ export declare const ControlSliderComponent: {
|
|
|
14
14
|
layoutBased: boolean;
|
|
15
15
|
type: string;
|
|
16
16
|
properties: {
|
|
17
|
-
|
|
17
|
+
triggers: {
|
|
18
18
|
name: string;
|
|
19
19
|
icon: string;
|
|
20
20
|
type: string;
|
|
21
21
|
properties: {
|
|
22
|
-
|
|
22
|
+
triggersList: {
|
|
23
23
|
type: string;
|
|
24
24
|
display: {
|
|
25
25
|
type: string;
|
|
@@ -31,11 +31,15 @@ export declare const ControlSliderComponent: {
|
|
|
31
31
|
drag: {
|
|
32
32
|
type: string;
|
|
33
33
|
};
|
|
34
|
-
auto: {
|
|
35
|
-
type: string;
|
|
36
|
-
};
|
|
37
34
|
};
|
|
38
35
|
};
|
|
36
|
+
autoPlay: {
|
|
37
|
+
type: string[];
|
|
38
|
+
display: {
|
|
39
|
+
type: string;
|
|
40
|
+
};
|
|
41
|
+
enum: (string | null)[];
|
|
42
|
+
};
|
|
39
43
|
};
|
|
40
44
|
};
|
|
41
45
|
direction: {
|
|
@@ -214,12 +218,12 @@ export declare const ControlSliderComponent: {
|
|
|
214
218
|
};
|
|
215
219
|
};
|
|
216
220
|
default: {
|
|
217
|
-
|
|
218
|
-
|
|
221
|
+
triggers: {
|
|
222
|
+
triggersList: {
|
|
219
223
|
click: boolean;
|
|
220
224
|
drag: boolean;
|
|
221
|
-
auto: boolean;
|
|
222
225
|
};
|
|
226
|
+
autoPlay: null;
|
|
223
227
|
};
|
|
224
228
|
controls: {
|
|
225
229
|
isActive: boolean;
|
package/dist/index.js
CHANGED
|
@@ -532,7 +532,8 @@ const SectionSchema = zod.z.object({
|
|
|
532
532
|
media: zod.z.record(zod.z.object({
|
|
533
533
|
url: zod.z.string(),
|
|
534
534
|
size: zod.z.string(),
|
|
535
|
-
position: zod.z.string()
|
|
535
|
+
position: zod.z.string(),
|
|
536
|
+
offsetX: zod.z.number().nullable()
|
|
536
537
|
})).optional()
|
|
537
538
|
});
|
|
538
539
|
const TriggerSchema = zod.z.object({
|
|
@@ -1218,10 +1219,11 @@ const wrapper = "ControlSlider-module__wrapper___sHEkd";
|
|
|
1218
1219
|
const sliderItem = "ControlSlider-module__sliderItem___QQSkR";
|
|
1219
1220
|
const sliderImage = "ControlSlider-module__sliderImage___9hRl-";
|
|
1220
1221
|
const arrow = "ControlSlider-module__arrow___05ghY";
|
|
1221
|
-
const nextArrow = "ControlSlider-module__nextArrow___-30Yc";
|
|
1222
1222
|
const arrowVertical = "ControlSlider-module__arrowVertical___tBfVN";
|
|
1223
|
+
const nextArrow = "ControlSlider-module__nextArrow___-30Yc";
|
|
1223
1224
|
const arrowInner = "ControlSlider-module__arrowInner___aEra3";
|
|
1224
1225
|
const arrowIcon = "ControlSlider-module__arrowIcon___S4ztF";
|
|
1226
|
+
const arrowImg = "ControlSlider-module__arrowImg___2dwJW";
|
|
1225
1227
|
const pagination = "ControlSlider-module__pagination___bicLF";
|
|
1226
1228
|
const paginationInner = "ControlSlider-module__paginationInner___bT-P-";
|
|
1227
1229
|
const paginationVertical = "ControlSlider-module__paginationVertical___zYqKw";
|
|
@@ -1251,15 +1253,16 @@ const bottomLeftAlignment = "ControlSlider-module__bottomLeftAlignment___cTP2-";
|
|
|
1251
1253
|
const bottomCenterAlignment = "ControlSlider-module__bottomCenterAlignment___c54fB";
|
|
1252
1254
|
const bottomRightAlignment = "ControlSlider-module__bottomRightAlignment___kEwrz";
|
|
1253
1255
|
const clickOverlay = "ControlSlider-module__clickOverlay___DZA28";
|
|
1254
|
-
const styles$
|
|
1256
|
+
const styles$2 = {
|
|
1255
1257
|
wrapper,
|
|
1256
1258
|
sliderItem,
|
|
1257
1259
|
sliderImage,
|
|
1258
1260
|
arrow,
|
|
1259
|
-
nextArrow,
|
|
1260
1261
|
arrowVertical,
|
|
1262
|
+
nextArrow,
|
|
1261
1263
|
arrowInner,
|
|
1262
1264
|
arrowIcon,
|
|
1265
|
+
arrowImg,
|
|
1263
1266
|
pagination,
|
|
1264
1267
|
paginationInner,
|
|
1265
1268
|
paginationVertical,
|
|
@@ -1291,14 +1294,14 @@ const styles$1 = {
|
|
|
1291
1294
|
clickOverlay
|
|
1292
1295
|
};
|
|
1293
1296
|
const link = "RichTextRenderer-module__link___BWeZ2";
|
|
1294
|
-
const styles = {
|
|
1297
|
+
const styles$1 = {
|
|
1295
1298
|
link
|
|
1296
1299
|
};
|
|
1297
1300
|
const RichTextRenderer = ({ content }) => {
|
|
1298
1301
|
const getChildren = (children) => {
|
|
1299
1302
|
return children.map((child, i) => {
|
|
1300
1303
|
if (child.type === "link") {
|
|
1301
|
-
return /* @__PURE__ */ jsxRuntime.jsx("a", { className: styles.link, href: child.value, target: child.target, children: getChildren(child.children) }, i);
|
|
1304
|
+
return /* @__PURE__ */ jsxRuntime.jsx("a", { className: styles$1.link, href: child.value, target: child.target, children: getChildren(child.children) }, i);
|
|
1302
1305
|
}
|
|
1303
1306
|
return /* @__PURE__ */ jsxRuntime.jsx("span", { style: getLeafCss(child), children: child.text }, i);
|
|
1304
1307
|
});
|
|
@@ -1309,74 +1312,61 @@ const RichTextRenderer = ({ content }) => {
|
|
|
1309
1312
|
}) });
|
|
1310
1313
|
};
|
|
1311
1314
|
function getLeafCss(leaf) {
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
|
|
1319
|
-
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
|
|
1315
|
+
return {
|
|
1316
|
+
...leaf.fontWeight && { fontWeight: leaf.fontWeight },
|
|
1317
|
+
...leaf.fontStyle && { fontStyle: leaf.fontStyle },
|
|
1318
|
+
...leaf.textDecoration && { textDecoration: leaf.textDecoration },
|
|
1319
|
+
...leaf.textTransform && { textTransform: leaf.textTransform },
|
|
1320
|
+
...leaf.fontVariant && { fontVariant: leaf.fontVariant },
|
|
1321
|
+
...leaf.verticalAlign && {
|
|
1322
|
+
verticalAlign: leaf.verticalAlign,
|
|
1323
|
+
lineHeight: "0px"
|
|
1324
|
+
}
|
|
1325
|
+
};
|
|
1323
1326
|
}
|
|
1324
1327
|
function scalingValue(value, isEditor = false) {
|
|
1325
1328
|
return isEditor ? `calc(var(--cntrl-article-width) * ${value})` : `${value * 100}vw`;
|
|
1326
1329
|
}
|
|
1327
|
-
const
|
|
1328
|
-
|
|
1330
|
+
const svg = "SvgImage-module__svg___q3xE-";
|
|
1331
|
+
const img = "SvgImage-module__img___VsTm-";
|
|
1332
|
+
const styles = {
|
|
1333
|
+
svg,
|
|
1334
|
+
img
|
|
1335
|
+
};
|
|
1336
|
+
const SvgImage = ({ url: url2, fill = "#000000", hoverFill = "#CCCCCC", className = "" }) => {
|
|
1337
|
+
const [supportsMask, setSupportsMask] = react.useState(true);
|
|
1329
1338
|
react.useEffect(() => {
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
|
|
1336
|
-
|
|
1337
|
-
.dynamic-fill {
|
|
1338
|
-
fill: ${fill};
|
|
1339
|
-
transition: fill 0.3s ease;
|
|
1340
|
-
}
|
|
1341
|
-
.dynamic-fill:hover {
|
|
1342
|
-
fill: ${hoverFill};
|
|
1343
|
-
}
|
|
1344
|
-
</style>
|
|
1345
|
-
`;
|
|
1346
|
-
text = text.replace(
|
|
1347
|
-
/<svg([^>]*)>/,
|
|
1348
|
-
`<svg$1 class="dynamic-fill">${styleTag}`
|
|
1349
|
-
);
|
|
1350
|
-
text = text.replace(/fill=".*?"/g, "");
|
|
1351
|
-
setSvgContent(text);
|
|
1352
|
-
}
|
|
1353
|
-
} catch (error) {
|
|
1354
|
-
console.error("Error fetching SVG:", error);
|
|
1355
|
-
}
|
|
1356
|
-
};
|
|
1357
|
-
fetchSvg();
|
|
1358
|
-
}, [url2, fill, hoverFill]);
|
|
1359
|
-
if (!url2.endsWith(".svg") || !svgContent) {
|
|
1360
|
-
return /* @__PURE__ */ jsxRuntime.jsx("img", { src: url2, alt: "", className });
|
|
1339
|
+
if (typeof window !== "undefined" && window.CSS) {
|
|
1340
|
+
const supported = CSS.supports("mask-image", 'url("")') || CSS.supports("-webkit-mask-image", 'url("")');
|
|
1341
|
+
setSupportsMask(supported);
|
|
1342
|
+
}
|
|
1343
|
+
}, []);
|
|
1344
|
+
if (!url2.endsWith(".svg") || !supportsMask) {
|
|
1345
|
+
return /* @__PURE__ */ jsxRuntime.jsx("img", { src: url2, alt: "", className: cn(styles.img, className) });
|
|
1361
1346
|
}
|
|
1362
1347
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1363
1348
|
"span",
|
|
1364
1349
|
{
|
|
1365
|
-
|
|
1366
|
-
|
|
1350
|
+
"data-supports-mask": supportsMask,
|
|
1351
|
+
className: cn(styles.svg, className),
|
|
1352
|
+
style: {
|
|
1353
|
+
"--svg": `url(${url2})`,
|
|
1354
|
+
"--fill": fill,
|
|
1355
|
+
"--hover-fill": hoverFill
|
|
1356
|
+
}
|
|
1367
1357
|
}
|
|
1368
1358
|
);
|
|
1369
1359
|
};
|
|
1370
1360
|
const alignmentClassName = {
|
|
1371
|
-
"top-left": styles$
|
|
1372
|
-
"top-center": styles$
|
|
1373
|
-
"top-right": styles$
|
|
1374
|
-
"middle-left": styles$
|
|
1375
|
-
"middle-center": styles$
|
|
1376
|
-
"middle-right": styles$
|
|
1377
|
-
"bottom-left": styles$
|
|
1378
|
-
"bottom-center": styles$
|
|
1379
|
-
"bottom-right": styles$
|
|
1361
|
+
"top-left": styles$2.topLeftAlignment,
|
|
1362
|
+
"top-center": styles$2.topCenterAlignment,
|
|
1363
|
+
"top-right": styles$2.topRightAlignment,
|
|
1364
|
+
"middle-left": styles$2.middleLeftAlignment,
|
|
1365
|
+
"middle-center": styles$2.middleCenterAlignment,
|
|
1366
|
+
"middle-right": styles$2.middleRightAlignment,
|
|
1367
|
+
"bottom-left": styles$2.bottomLeftAlignment,
|
|
1368
|
+
"bottom-center": styles$2.bottomCenterAlignment,
|
|
1369
|
+
"bottom-right": styles$2.bottomRightAlignment
|
|
1380
1370
|
};
|
|
1381
1371
|
function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
|
|
1382
1372
|
const [sliderRef, setSliderRef] = react.useState(null);
|
|
@@ -1404,24 +1394,26 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
|
|
|
1404
1394
|
observer.observe(wrapperRef);
|
|
1405
1395
|
return () => observer.unobserve(wrapperRef);
|
|
1406
1396
|
}, [wrapperRef]);
|
|
1407
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(styles$
|
|
1397
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(styles$2.wrapper, { [styles$2.editor]: isEditor }), ref: setWrapperRef, children: [
|
|
1408
1398
|
settings.caption.isActive && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1409
1399
|
"div",
|
|
1410
1400
|
{
|
|
1411
|
-
className: cn(styles$
|
|
1401
|
+
className: cn(styles$2.captionBlock),
|
|
1412
1402
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1413
1403
|
"div",
|
|
1414
1404
|
{
|
|
1415
|
-
className: styles$
|
|
1405
|
+
className: styles$2.captionTextWrapper,
|
|
1416
1406
|
children: content.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
1417
1407
|
"div",
|
|
1418
1408
|
{
|
|
1419
|
-
className: cn(styles$
|
|
1409
|
+
className: cn(styles$2.captionText, alignmentClassName[settings.caption.alignment], {
|
|
1410
|
+
[styles$2.withPointerEvents]: index === currentSlideIndex && isEditor
|
|
1411
|
+
}),
|
|
1420
1412
|
style: {
|
|
1421
1413
|
fontFamily: fontSettings.fontFamily,
|
|
1422
1414
|
fontWeight: fontSettings.fontWeight,
|
|
1423
1415
|
fontStyle: fontSettings.fontStyle,
|
|
1424
|
-
width: widthSettings.sizing === "auto" ? "max-content" : widthSettings.width,
|
|
1416
|
+
width: widthSettings.sizing === "auto" ? "max-content" : scalingValue(widthSettings.width, isEditor),
|
|
1425
1417
|
letterSpacing: scalingValue(letterSpacing, isEditor),
|
|
1426
1418
|
wordSpacing: scalingValue(wordSpacing, isEditor),
|
|
1427
1419
|
textAlign,
|
|
@@ -1437,7 +1429,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
|
|
|
1437
1429
|
"div",
|
|
1438
1430
|
{
|
|
1439
1431
|
"data-styles": "caption",
|
|
1440
|
-
className: styles$
|
|
1432
|
+
className: styles$2.captionTextInner,
|
|
1441
1433
|
style: {
|
|
1442
1434
|
"--link-hover-color": settings.caption.hover,
|
|
1443
1435
|
position: "relative",
|
|
@@ -1463,7 +1455,10 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
|
|
|
1463
1455
|
ref: setSliderRef,
|
|
1464
1456
|
options: {
|
|
1465
1457
|
arrows: false,
|
|
1466
|
-
autoplay: isEditor ? false : settings.
|
|
1458
|
+
autoplay: isEditor ? false : settings.triggers.autoPlay !== null,
|
|
1459
|
+
...settings.triggers.autoPlay !== null && {
|
|
1460
|
+
interval: parseInt(settings.triggers.autoPlay) * 1e3
|
|
1461
|
+
},
|
|
1467
1462
|
direction: direction === "horizontal" ? "ltr" : "ttb",
|
|
1468
1463
|
pagination: false,
|
|
1469
1464
|
perPage: 1,
|
|
@@ -1474,15 +1469,15 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
|
|
|
1474
1469
|
children: content.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(reactSplide.SplideSlide, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1475
1470
|
"div",
|
|
1476
1471
|
{
|
|
1477
|
-
className: styles$
|
|
1472
|
+
className: styles$2.sliderItem,
|
|
1478
1473
|
style: {
|
|
1479
1474
|
...sliderDimensions
|
|
1480
1475
|
},
|
|
1481
1476
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1482
1477
|
"div",
|
|
1483
1478
|
{
|
|
1484
|
-
className: styles$
|
|
1485
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("img", { className: styles$
|
|
1479
|
+
className: styles$2.imgWrapper,
|
|
1480
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("img", { className: styles$2.sliderImage, src: item.image.url, alt: item.image.name ?? "" })
|
|
1486
1481
|
}
|
|
1487
1482
|
)
|
|
1488
1483
|
}
|
|
@@ -1493,8 +1488,8 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
|
|
|
1493
1488
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1494
1489
|
"div",
|
|
1495
1490
|
{
|
|
1496
|
-
className: cn(styles$
|
|
1497
|
-
[styles$
|
|
1491
|
+
className: cn(styles$2.arrow, {
|
|
1492
|
+
[styles$2.arrowVertical]: settings.direction === "vertical"
|
|
1498
1493
|
}),
|
|
1499
1494
|
style: {
|
|
1500
1495
|
color: settings.controls.color,
|
|
@@ -1506,13 +1501,21 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
|
|
|
1506
1501
|
onClick: () => {
|
|
1507
1502
|
handleArrowClick("-1");
|
|
1508
1503
|
},
|
|
1509
|
-
className: styles$
|
|
1504
|
+
className: styles$2.arrowInner,
|
|
1510
1505
|
style: {
|
|
1511
1506
|
transform: `translate(${scalingValue(controlsOffsetX, isEditor)}, ${scalingValue(controlsOffsetY * (direction === "horizontal" ? 1 : -1), isEditor)}) scale(${settings.controls.scale / 100}) rotate(${direction === "horizontal" ? "180deg" : "-90deg"})`
|
|
1512
1507
|
},
|
|
1513
1508
|
children: [
|
|
1514
|
-
settings.controls.arrowsImgUrl && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1515
|
-
|
|
1509
|
+
settings.controls.arrowsImgUrl && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1510
|
+
SvgImage,
|
|
1511
|
+
{
|
|
1512
|
+
url: settings.controls.arrowsImgUrl,
|
|
1513
|
+
fill: settings.controls.color,
|
|
1514
|
+
hoverFill: settings.controls.hover,
|
|
1515
|
+
className: styles$2.arrowImg
|
|
1516
|
+
}
|
|
1517
|
+
),
|
|
1518
|
+
!settings.controls.arrowsImgUrl && /* @__PURE__ */ jsxRuntime.jsx(ArrowIcon, { color: settings.controls.color, className: cn(styles$2.arrowIcon, styles$2.arrowImg) })
|
|
1516
1519
|
]
|
|
1517
1520
|
}
|
|
1518
1521
|
)
|
|
@@ -1521,8 +1524,8 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
|
|
|
1521
1524
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1522
1525
|
"div",
|
|
1523
1526
|
{
|
|
1524
|
-
className: cn(styles$
|
|
1525
|
-
[styles$
|
|
1527
|
+
className: cn(styles$2.arrow, styles$2.nextArrow, {
|
|
1528
|
+
[styles$2.arrowVertical]: settings.direction === "vertical"
|
|
1526
1529
|
}),
|
|
1527
1530
|
style: {
|
|
1528
1531
|
color: settings.controls.color,
|
|
@@ -1531,24 +1534,32 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
|
|
|
1531
1534
|
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1532
1535
|
"button",
|
|
1533
1536
|
{
|
|
1534
|
-
className: styles$
|
|
1537
|
+
className: styles$2.arrowInner,
|
|
1535
1538
|
onClick: () => handleArrowClick("+1"),
|
|
1536
1539
|
style: {
|
|
1537
1540
|
transform: `translate(${scalingValue(controlsOffsetX * (direction === "horizontal" ? -1 : 1), isEditor)}, ${scalingValue(controlsOffsetY, isEditor)}) scale(${settings.controls.scale / 100}) rotate(${direction === "horizontal" ? "0deg" : "90deg"})`
|
|
1538
1541
|
},
|
|
1539
1542
|
children: [
|
|
1540
|
-
settings.controls.arrowsImgUrl && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1541
|
-
|
|
1543
|
+
settings.controls.arrowsImgUrl && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1544
|
+
SvgImage,
|
|
1545
|
+
{
|
|
1546
|
+
url: settings.controls.arrowsImgUrl,
|
|
1547
|
+
fill: settings.controls.color,
|
|
1548
|
+
hoverFill: settings.controls.hover,
|
|
1549
|
+
className: styles$2.arrowImg
|
|
1550
|
+
}
|
|
1551
|
+
),
|
|
1552
|
+
!settings.controls.arrowsImgUrl && /* @__PURE__ */ jsxRuntime.jsx(ArrowIcon, { color: settings.controls.color, className: cn(styles$2.arrowIcon, styles$2.arrowImg) })
|
|
1542
1553
|
]
|
|
1543
1554
|
}
|
|
1544
1555
|
)
|
|
1545
1556
|
}
|
|
1546
1557
|
)
|
|
1547
1558
|
] }),
|
|
1548
|
-
settings.
|
|
1559
|
+
settings.triggers.triggersList.click && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1549
1560
|
"div",
|
|
1550
1561
|
{
|
|
1551
|
-
className: styles$
|
|
1562
|
+
className: styles$2.clickOverlay,
|
|
1552
1563
|
onClick: () => {
|
|
1553
1564
|
if (sliderRef) {
|
|
1554
1565
|
sliderRef.go("+1");
|
|
@@ -1559,21 +1570,21 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
|
|
|
1559
1570
|
settings.pagination.isActive && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1560
1571
|
"div",
|
|
1561
1572
|
{
|
|
1562
|
-
className: cn(styles$
|
|
1563
|
-
[styles$
|
|
1564
|
-
[styles$
|
|
1565
|
-
[styles$
|
|
1566
|
-
[styles$
|
|
1567
|
-
[styles$
|
|
1568
|
-
[styles$
|
|
1569
|
-
[styles$
|
|
1570
|
-
[styles$
|
|
1571
|
-
[styles$
|
|
1573
|
+
className: cn(styles$2.pagination, {
|
|
1574
|
+
[styles$2.paginationInsideBottom]: settings.pagination.position === "inside-1" && settings.direction === "horizontal",
|
|
1575
|
+
[styles$2.paginationInsideTop]: settings.pagination.position === "inside-2" && settings.direction === "horizontal",
|
|
1576
|
+
[styles$2.paginationOutsideBottom]: settings.pagination.position === "outside-1" && settings.direction === "horizontal",
|
|
1577
|
+
[styles$2.paginationOutsideTop]: settings.pagination.position === "outside-2" && settings.direction === "horizontal",
|
|
1578
|
+
[styles$2.paginationInsideLeft]: settings.pagination.position === "inside-1" && settings.direction === "vertical",
|
|
1579
|
+
[styles$2.paginationInsideRight]: settings.pagination.position === "inside-2" && settings.direction === "vertical",
|
|
1580
|
+
[styles$2.paginationOutsideLeft]: settings.pagination.position === "outside-1" && settings.direction === "vertical",
|
|
1581
|
+
[styles$2.paginationOutsideRight]: settings.pagination.position === "outside-2" && settings.direction === "vertical",
|
|
1582
|
+
[styles$2.paginationVertical]: settings.direction === "vertical"
|
|
1572
1583
|
}),
|
|
1573
1584
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1574
1585
|
"div",
|
|
1575
1586
|
{
|
|
1576
|
-
className: styles$
|
|
1587
|
+
className: styles$2.paginationInner,
|
|
1577
1588
|
style: {
|
|
1578
1589
|
backgroundColor: settings.pagination.colors[0],
|
|
1579
1590
|
transform: `scale(${settings.pagination.scale / 100}) translate(${scalingValue(settings.pagination.offset.x, isEditor)}, ${scalingValue(settings.pagination.offset.y, isEditor)}) rotate(${settings.direction === "horizontal" ? "0deg" : "90deg"})`
|
|
@@ -1586,12 +1597,12 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
|
|
|
1586
1597
|
sliderRef.go(index);
|
|
1587
1598
|
}
|
|
1588
1599
|
},
|
|
1589
|
-
className: cn(styles$
|
|
1600
|
+
className: cn(styles$2.paginationItem),
|
|
1590
1601
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1591
1602
|
"div",
|
|
1592
1603
|
{
|
|
1593
|
-
className: cn(styles$
|
|
1594
|
-
[styles$
|
|
1604
|
+
className: cn(styles$2.dot, {
|
|
1605
|
+
[styles$2.activeDot]: index === currentSlideIndex
|
|
1595
1606
|
}),
|
|
1596
1607
|
style: {
|
|
1597
1608
|
backgroundColor: settings.pagination.colors[1],
|
|
@@ -1626,15 +1637,15 @@ const ControlSliderComponent = {
|
|
|
1626
1637
|
layoutBased: true,
|
|
1627
1638
|
type: "object",
|
|
1628
1639
|
properties: {
|
|
1629
|
-
|
|
1630
|
-
name: "
|
|
1640
|
+
triggers: {
|
|
1641
|
+
name: "triggers",
|
|
1631
1642
|
icon: "target",
|
|
1632
1643
|
type: "object",
|
|
1633
1644
|
properties: {
|
|
1634
|
-
|
|
1645
|
+
triggersList: {
|
|
1635
1646
|
type: "object",
|
|
1636
1647
|
display: {
|
|
1637
|
-
type: "
|
|
1648
|
+
type: "toggle-ratio-group"
|
|
1638
1649
|
},
|
|
1639
1650
|
properties: {
|
|
1640
1651
|
click: {
|
|
@@ -1642,11 +1653,15 @@ const ControlSliderComponent = {
|
|
|
1642
1653
|
},
|
|
1643
1654
|
drag: {
|
|
1644
1655
|
type: "boolean"
|
|
1645
|
-
},
|
|
1646
|
-
auto: {
|
|
1647
|
-
type: "boolean"
|
|
1648
1656
|
}
|
|
1649
1657
|
}
|
|
1658
|
+
},
|
|
1659
|
+
autoPlay: {
|
|
1660
|
+
type: ["string", "null"],
|
|
1661
|
+
display: {
|
|
1662
|
+
type: "setep-selector"
|
|
1663
|
+
},
|
|
1664
|
+
enum: [null, "1s", "2s", "3s", "4s", "5s"]
|
|
1650
1665
|
}
|
|
1651
1666
|
}
|
|
1652
1667
|
},
|
|
@@ -1693,8 +1708,8 @@ const ControlSliderComponent = {
|
|
|
1693
1708
|
scale: {
|
|
1694
1709
|
type: "number",
|
|
1695
1710
|
name: "scale",
|
|
1696
|
-
min:
|
|
1697
|
-
max:
|
|
1711
|
+
min: 50,
|
|
1712
|
+
max: 600,
|
|
1698
1713
|
display: {
|
|
1699
1714
|
type: "range-control"
|
|
1700
1715
|
}
|
|
@@ -1731,7 +1746,7 @@ const ControlSliderComponent = {
|
|
|
1731
1746
|
position: {
|
|
1732
1747
|
name: "nav position",
|
|
1733
1748
|
display: {
|
|
1734
|
-
type: "
|
|
1749
|
+
type: "socket",
|
|
1735
1750
|
direction: "horizontal"
|
|
1736
1751
|
},
|
|
1737
1752
|
type: "string",
|
|
@@ -1754,8 +1769,8 @@ const ControlSliderComponent = {
|
|
|
1754
1769
|
scale: {
|
|
1755
1770
|
type: "number",
|
|
1756
1771
|
name: "scale",
|
|
1757
|
-
min:
|
|
1758
|
-
max:
|
|
1772
|
+
min: 10,
|
|
1773
|
+
max: 400,
|
|
1759
1774
|
display: {
|
|
1760
1775
|
type: "range-control"
|
|
1761
1776
|
}
|
|
@@ -1826,12 +1841,12 @@ const ControlSliderComponent = {
|
|
|
1826
1841
|
}
|
|
1827
1842
|
},
|
|
1828
1843
|
default: {
|
|
1829
|
-
|
|
1830
|
-
|
|
1844
|
+
triggers: {
|
|
1845
|
+
triggersList: {
|
|
1831
1846
|
click: true,
|
|
1832
|
-
drag: true
|
|
1833
|
-
|
|
1834
|
-
|
|
1847
|
+
drag: true
|
|
1848
|
+
},
|
|
1849
|
+
autoPlay: null
|
|
1835
1850
|
},
|
|
1836
1851
|
controls: {
|
|
1837
1852
|
isActive: true,
|
|
@@ -1846,7 +1861,7 @@ const ControlSliderComponent = {
|
|
|
1846
1861
|
},
|
|
1847
1862
|
pagination: {
|
|
1848
1863
|
isActive: true,
|
|
1849
|
-
scale:
|
|
1864
|
+
scale: 50,
|
|
1850
1865
|
position: "outside-1",
|
|
1851
1866
|
offset: {
|
|
1852
1867
|
x: 0,
|
|
@@ -1867,16 +1882,6 @@ const ControlSliderComponent = {
|
|
|
1867
1882
|
}
|
|
1868
1883
|
},
|
|
1869
1884
|
displayRules: [
|
|
1870
|
-
{
|
|
1871
|
-
if: {
|
|
1872
|
-
name: "direction",
|
|
1873
|
-
value: "vertical"
|
|
1874
|
-
},
|
|
1875
|
-
then: {
|
|
1876
|
-
name: "properties.controls.properties.position.display.direction",
|
|
1877
|
-
value: "vertical"
|
|
1878
|
-
}
|
|
1879
|
-
},
|
|
1880
1885
|
{
|
|
1881
1886
|
if: {
|
|
1882
1887
|
name: "direction",
|
|
@@ -2074,7 +2079,7 @@ const ControlSliderComponent = {
|
|
|
2074
2079
|
default: {
|
|
2075
2080
|
caption: {
|
|
2076
2081
|
widthSettings: {
|
|
2077
|
-
width:
|
|
2082
|
+
width: 0.13,
|
|
2078
2083
|
sizing: "auto"
|
|
2079
2084
|
},
|
|
2080
2085
|
fontSettings: {
|
package/dist/index.mjs
CHANGED
|
@@ -513,7 +513,8 @@ const SectionSchema = z.object({
|
|
|
513
513
|
media: z.record(z.object({
|
|
514
514
|
url: z.string(),
|
|
515
515
|
size: z.string(),
|
|
516
|
-
position: z.string()
|
|
516
|
+
position: z.string(),
|
|
517
|
+
offsetX: z.number().nullable()
|
|
517
518
|
})).optional()
|
|
518
519
|
});
|
|
519
520
|
const TriggerSchema = z.object({
|
|
@@ -1199,10 +1200,11 @@ const wrapper = "ControlSlider-module__wrapper___sHEkd";
|
|
|
1199
1200
|
const sliderItem = "ControlSlider-module__sliderItem___QQSkR";
|
|
1200
1201
|
const sliderImage = "ControlSlider-module__sliderImage___9hRl-";
|
|
1201
1202
|
const arrow = "ControlSlider-module__arrow___05ghY";
|
|
1202
|
-
const nextArrow = "ControlSlider-module__nextArrow___-30Yc";
|
|
1203
1203
|
const arrowVertical = "ControlSlider-module__arrowVertical___tBfVN";
|
|
1204
|
+
const nextArrow = "ControlSlider-module__nextArrow___-30Yc";
|
|
1204
1205
|
const arrowInner = "ControlSlider-module__arrowInner___aEra3";
|
|
1205
1206
|
const arrowIcon = "ControlSlider-module__arrowIcon___S4ztF";
|
|
1207
|
+
const arrowImg = "ControlSlider-module__arrowImg___2dwJW";
|
|
1206
1208
|
const pagination = "ControlSlider-module__pagination___bicLF";
|
|
1207
1209
|
const paginationInner = "ControlSlider-module__paginationInner___bT-P-";
|
|
1208
1210
|
const paginationVertical = "ControlSlider-module__paginationVertical___zYqKw";
|
|
@@ -1232,15 +1234,16 @@ const bottomLeftAlignment = "ControlSlider-module__bottomLeftAlignment___cTP2-";
|
|
|
1232
1234
|
const bottomCenterAlignment = "ControlSlider-module__bottomCenterAlignment___c54fB";
|
|
1233
1235
|
const bottomRightAlignment = "ControlSlider-module__bottomRightAlignment___kEwrz";
|
|
1234
1236
|
const clickOverlay = "ControlSlider-module__clickOverlay___DZA28";
|
|
1235
|
-
const styles$
|
|
1237
|
+
const styles$2 = {
|
|
1236
1238
|
wrapper,
|
|
1237
1239
|
sliderItem,
|
|
1238
1240
|
sliderImage,
|
|
1239
1241
|
arrow,
|
|
1240
|
-
nextArrow,
|
|
1241
1242
|
arrowVertical,
|
|
1243
|
+
nextArrow,
|
|
1242
1244
|
arrowInner,
|
|
1243
1245
|
arrowIcon,
|
|
1246
|
+
arrowImg,
|
|
1244
1247
|
pagination,
|
|
1245
1248
|
paginationInner,
|
|
1246
1249
|
paginationVertical,
|
|
@@ -1272,14 +1275,14 @@ const styles$1 = {
|
|
|
1272
1275
|
clickOverlay
|
|
1273
1276
|
};
|
|
1274
1277
|
const link = "RichTextRenderer-module__link___BWeZ2";
|
|
1275
|
-
const styles = {
|
|
1278
|
+
const styles$1 = {
|
|
1276
1279
|
link
|
|
1277
1280
|
};
|
|
1278
1281
|
const RichTextRenderer = ({ content }) => {
|
|
1279
1282
|
const getChildren = (children) => {
|
|
1280
1283
|
return children.map((child, i) => {
|
|
1281
1284
|
if (child.type === "link") {
|
|
1282
|
-
return /* @__PURE__ */ jsx("a", { className: styles.link, href: child.value, target: child.target, children: getChildren(child.children) }, i);
|
|
1285
|
+
return /* @__PURE__ */ jsx("a", { className: styles$1.link, href: child.value, target: child.target, children: getChildren(child.children) }, i);
|
|
1283
1286
|
}
|
|
1284
1287
|
return /* @__PURE__ */ jsx("span", { style: getLeafCss(child), children: child.text }, i);
|
|
1285
1288
|
});
|
|
@@ -1290,74 +1293,61 @@ const RichTextRenderer = ({ content }) => {
|
|
|
1290
1293
|
}) });
|
|
1291
1294
|
};
|
|
1292
1295
|
function getLeafCss(leaf) {
|
|
1293
|
-
|
|
1294
|
-
|
|
1295
|
-
|
|
1296
|
-
|
|
1297
|
-
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
|
-
|
|
1301
|
-
|
|
1302
|
-
|
|
1303
|
-
|
|
1296
|
+
return {
|
|
1297
|
+
...leaf.fontWeight && { fontWeight: leaf.fontWeight },
|
|
1298
|
+
...leaf.fontStyle && { fontStyle: leaf.fontStyle },
|
|
1299
|
+
...leaf.textDecoration && { textDecoration: leaf.textDecoration },
|
|
1300
|
+
...leaf.textTransform && { textTransform: leaf.textTransform },
|
|
1301
|
+
...leaf.fontVariant && { fontVariant: leaf.fontVariant },
|
|
1302
|
+
...leaf.verticalAlign && {
|
|
1303
|
+
verticalAlign: leaf.verticalAlign,
|
|
1304
|
+
lineHeight: "0px"
|
|
1305
|
+
}
|
|
1306
|
+
};
|
|
1304
1307
|
}
|
|
1305
1308
|
function scalingValue(value, isEditor = false) {
|
|
1306
1309
|
return isEditor ? `calc(var(--cntrl-article-width) * ${value})` : `${value * 100}vw`;
|
|
1307
1310
|
}
|
|
1308
|
-
const
|
|
1309
|
-
|
|
1311
|
+
const svg = "SvgImage-module__svg___q3xE-";
|
|
1312
|
+
const img = "SvgImage-module__img___VsTm-";
|
|
1313
|
+
const styles = {
|
|
1314
|
+
svg,
|
|
1315
|
+
img
|
|
1316
|
+
};
|
|
1317
|
+
const SvgImage = ({ url, fill = "#000000", hoverFill = "#CCCCCC", className = "" }) => {
|
|
1318
|
+
const [supportsMask, setSupportsMask] = useState(true);
|
|
1310
1319
|
useEffect(() => {
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
.dynamic-fill {
|
|
1319
|
-
fill: ${fill};
|
|
1320
|
-
transition: fill 0.3s ease;
|
|
1321
|
-
}
|
|
1322
|
-
.dynamic-fill:hover {
|
|
1323
|
-
fill: ${hoverFill};
|
|
1324
|
-
}
|
|
1325
|
-
</style>
|
|
1326
|
-
`;
|
|
1327
|
-
text = text.replace(
|
|
1328
|
-
/<svg([^>]*)>/,
|
|
1329
|
-
`<svg$1 class="dynamic-fill">${styleTag}`
|
|
1330
|
-
);
|
|
1331
|
-
text = text.replace(/fill=".*?"/g, "");
|
|
1332
|
-
setSvgContent(text);
|
|
1333
|
-
}
|
|
1334
|
-
} catch (error) {
|
|
1335
|
-
console.error("Error fetching SVG:", error);
|
|
1336
|
-
}
|
|
1337
|
-
};
|
|
1338
|
-
fetchSvg();
|
|
1339
|
-
}, [url, fill, hoverFill]);
|
|
1340
|
-
if (!url.endsWith(".svg") || !svgContent) {
|
|
1341
|
-
return /* @__PURE__ */ jsx("img", { src: url, alt: "", className });
|
|
1320
|
+
if (typeof window !== "undefined" && window.CSS) {
|
|
1321
|
+
const supported = CSS.supports("mask-image", 'url("")') || CSS.supports("-webkit-mask-image", 'url("")');
|
|
1322
|
+
setSupportsMask(supported);
|
|
1323
|
+
}
|
|
1324
|
+
}, []);
|
|
1325
|
+
if (!url.endsWith(".svg") || !supportsMask) {
|
|
1326
|
+
return /* @__PURE__ */ jsx("img", { src: url, alt: "", className: cn(styles.img, className) });
|
|
1342
1327
|
}
|
|
1343
1328
|
return /* @__PURE__ */ jsx(
|
|
1344
1329
|
"span",
|
|
1345
1330
|
{
|
|
1346
|
-
|
|
1347
|
-
|
|
1331
|
+
"data-supports-mask": supportsMask,
|
|
1332
|
+
className: cn(styles.svg, className),
|
|
1333
|
+
style: {
|
|
1334
|
+
"--svg": `url(${url})`,
|
|
1335
|
+
"--fill": fill,
|
|
1336
|
+
"--hover-fill": hoverFill
|
|
1337
|
+
}
|
|
1348
1338
|
}
|
|
1349
1339
|
);
|
|
1350
1340
|
};
|
|
1351
1341
|
const alignmentClassName = {
|
|
1352
|
-
"top-left": styles$
|
|
1353
|
-
"top-center": styles$
|
|
1354
|
-
"top-right": styles$
|
|
1355
|
-
"middle-left": styles$
|
|
1356
|
-
"middle-center": styles$
|
|
1357
|
-
"middle-right": styles$
|
|
1358
|
-
"bottom-left": styles$
|
|
1359
|
-
"bottom-center": styles$
|
|
1360
|
-
"bottom-right": styles$
|
|
1342
|
+
"top-left": styles$2.topLeftAlignment,
|
|
1343
|
+
"top-center": styles$2.topCenterAlignment,
|
|
1344
|
+
"top-right": styles$2.topRightAlignment,
|
|
1345
|
+
"middle-left": styles$2.middleLeftAlignment,
|
|
1346
|
+
"middle-center": styles$2.middleCenterAlignment,
|
|
1347
|
+
"middle-right": styles$2.middleRightAlignment,
|
|
1348
|
+
"bottom-left": styles$2.bottomLeftAlignment,
|
|
1349
|
+
"bottom-center": styles$2.bottomCenterAlignment,
|
|
1350
|
+
"bottom-right": styles$2.bottomRightAlignment
|
|
1361
1351
|
};
|
|
1362
1352
|
function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
|
|
1363
1353
|
const [sliderRef, setSliderRef] = useState(null);
|
|
@@ -1385,24 +1375,26 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
|
|
|
1385
1375
|
observer.observe(wrapperRef);
|
|
1386
1376
|
return () => observer.unobserve(wrapperRef);
|
|
1387
1377
|
}, [wrapperRef]);
|
|
1388
|
-
return /* @__PURE__ */ jsxs("div", { className: cn(styles$
|
|
1378
|
+
return /* @__PURE__ */ jsxs("div", { className: cn(styles$2.wrapper, { [styles$2.editor]: isEditor }), ref: setWrapperRef, children: [
|
|
1389
1379
|
settings.caption.isActive && /* @__PURE__ */ jsx(
|
|
1390
1380
|
"div",
|
|
1391
1381
|
{
|
|
1392
|
-
className: cn(styles$
|
|
1382
|
+
className: cn(styles$2.captionBlock),
|
|
1393
1383
|
children: /* @__PURE__ */ jsx(
|
|
1394
1384
|
"div",
|
|
1395
1385
|
{
|
|
1396
|
-
className: styles$
|
|
1386
|
+
className: styles$2.captionTextWrapper,
|
|
1397
1387
|
children: content.map((item, index) => /* @__PURE__ */ jsx(
|
|
1398
1388
|
"div",
|
|
1399
1389
|
{
|
|
1400
|
-
className: cn(styles$
|
|
1390
|
+
className: cn(styles$2.captionText, alignmentClassName[settings.caption.alignment], {
|
|
1391
|
+
[styles$2.withPointerEvents]: index === currentSlideIndex && isEditor
|
|
1392
|
+
}),
|
|
1401
1393
|
style: {
|
|
1402
1394
|
fontFamily: fontSettings.fontFamily,
|
|
1403
1395
|
fontWeight: fontSettings.fontWeight,
|
|
1404
1396
|
fontStyle: fontSettings.fontStyle,
|
|
1405
|
-
width: widthSettings.sizing === "auto" ? "max-content" : widthSettings.width,
|
|
1397
|
+
width: widthSettings.sizing === "auto" ? "max-content" : scalingValue(widthSettings.width, isEditor),
|
|
1406
1398
|
letterSpacing: scalingValue(letterSpacing, isEditor),
|
|
1407
1399
|
wordSpacing: scalingValue(wordSpacing, isEditor),
|
|
1408
1400
|
textAlign,
|
|
@@ -1418,7 +1410,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
|
|
|
1418
1410
|
"div",
|
|
1419
1411
|
{
|
|
1420
1412
|
"data-styles": "caption",
|
|
1421
|
-
className: styles$
|
|
1413
|
+
className: styles$2.captionTextInner,
|
|
1422
1414
|
style: {
|
|
1423
1415
|
"--link-hover-color": settings.caption.hover,
|
|
1424
1416
|
position: "relative",
|
|
@@ -1444,7 +1436,10 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
|
|
|
1444
1436
|
ref: setSliderRef,
|
|
1445
1437
|
options: {
|
|
1446
1438
|
arrows: false,
|
|
1447
|
-
autoplay: isEditor ? false : settings.
|
|
1439
|
+
autoplay: isEditor ? false : settings.triggers.autoPlay !== null,
|
|
1440
|
+
...settings.triggers.autoPlay !== null && {
|
|
1441
|
+
interval: parseInt(settings.triggers.autoPlay) * 1e3
|
|
1442
|
+
},
|
|
1448
1443
|
direction: direction === "horizontal" ? "ltr" : "ttb",
|
|
1449
1444
|
pagination: false,
|
|
1450
1445
|
perPage: 1,
|
|
@@ -1455,15 +1450,15 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
|
|
|
1455
1450
|
children: content.map((item, index) => /* @__PURE__ */ jsx(SplideSlide, { children: /* @__PURE__ */ jsx(
|
|
1456
1451
|
"div",
|
|
1457
1452
|
{
|
|
1458
|
-
className: styles$
|
|
1453
|
+
className: styles$2.sliderItem,
|
|
1459
1454
|
style: {
|
|
1460
1455
|
...sliderDimensions
|
|
1461
1456
|
},
|
|
1462
1457
|
children: /* @__PURE__ */ jsx(
|
|
1463
1458
|
"div",
|
|
1464
1459
|
{
|
|
1465
|
-
className: styles$
|
|
1466
|
-
children: /* @__PURE__ */ jsx("img", { className: styles$
|
|
1460
|
+
className: styles$2.imgWrapper,
|
|
1461
|
+
children: /* @__PURE__ */ jsx("img", { className: styles$2.sliderImage, src: item.image.url, alt: item.image.name ?? "" })
|
|
1467
1462
|
}
|
|
1468
1463
|
)
|
|
1469
1464
|
}
|
|
@@ -1474,8 +1469,8 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
|
|
|
1474
1469
|
/* @__PURE__ */ jsx(
|
|
1475
1470
|
"div",
|
|
1476
1471
|
{
|
|
1477
|
-
className: cn(styles$
|
|
1478
|
-
[styles$
|
|
1472
|
+
className: cn(styles$2.arrow, {
|
|
1473
|
+
[styles$2.arrowVertical]: settings.direction === "vertical"
|
|
1479
1474
|
}),
|
|
1480
1475
|
style: {
|
|
1481
1476
|
color: settings.controls.color,
|
|
@@ -1487,13 +1482,21 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
|
|
|
1487
1482
|
onClick: () => {
|
|
1488
1483
|
handleArrowClick("-1");
|
|
1489
1484
|
},
|
|
1490
|
-
className: styles$
|
|
1485
|
+
className: styles$2.arrowInner,
|
|
1491
1486
|
style: {
|
|
1492
1487
|
transform: `translate(${scalingValue(controlsOffsetX, isEditor)}, ${scalingValue(controlsOffsetY * (direction === "horizontal" ? 1 : -1), isEditor)}) scale(${settings.controls.scale / 100}) rotate(${direction === "horizontal" ? "180deg" : "-90deg"})`
|
|
1493
1488
|
},
|
|
1494
1489
|
children: [
|
|
1495
|
-
settings.controls.arrowsImgUrl && /* @__PURE__ */ jsx(
|
|
1496
|
-
|
|
1490
|
+
settings.controls.arrowsImgUrl && /* @__PURE__ */ jsx(
|
|
1491
|
+
SvgImage,
|
|
1492
|
+
{
|
|
1493
|
+
url: settings.controls.arrowsImgUrl,
|
|
1494
|
+
fill: settings.controls.color,
|
|
1495
|
+
hoverFill: settings.controls.hover,
|
|
1496
|
+
className: styles$2.arrowImg
|
|
1497
|
+
}
|
|
1498
|
+
),
|
|
1499
|
+
!settings.controls.arrowsImgUrl && /* @__PURE__ */ jsx(ArrowIcon, { color: settings.controls.color, className: cn(styles$2.arrowIcon, styles$2.arrowImg) })
|
|
1497
1500
|
]
|
|
1498
1501
|
}
|
|
1499
1502
|
)
|
|
@@ -1502,8 +1505,8 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
|
|
|
1502
1505
|
/* @__PURE__ */ jsx(
|
|
1503
1506
|
"div",
|
|
1504
1507
|
{
|
|
1505
|
-
className: cn(styles$
|
|
1506
|
-
[styles$
|
|
1508
|
+
className: cn(styles$2.arrow, styles$2.nextArrow, {
|
|
1509
|
+
[styles$2.arrowVertical]: settings.direction === "vertical"
|
|
1507
1510
|
}),
|
|
1508
1511
|
style: {
|
|
1509
1512
|
color: settings.controls.color,
|
|
@@ -1512,24 +1515,32 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
|
|
|
1512
1515
|
children: /* @__PURE__ */ jsxs(
|
|
1513
1516
|
"button",
|
|
1514
1517
|
{
|
|
1515
|
-
className: styles$
|
|
1518
|
+
className: styles$2.arrowInner,
|
|
1516
1519
|
onClick: () => handleArrowClick("+1"),
|
|
1517
1520
|
style: {
|
|
1518
1521
|
transform: `translate(${scalingValue(controlsOffsetX * (direction === "horizontal" ? -1 : 1), isEditor)}, ${scalingValue(controlsOffsetY, isEditor)}) scale(${settings.controls.scale / 100}) rotate(${direction === "horizontal" ? "0deg" : "90deg"})`
|
|
1519
1522
|
},
|
|
1520
1523
|
children: [
|
|
1521
|
-
settings.controls.arrowsImgUrl && /* @__PURE__ */ jsx(
|
|
1522
|
-
|
|
1524
|
+
settings.controls.arrowsImgUrl && /* @__PURE__ */ jsx(
|
|
1525
|
+
SvgImage,
|
|
1526
|
+
{
|
|
1527
|
+
url: settings.controls.arrowsImgUrl,
|
|
1528
|
+
fill: settings.controls.color,
|
|
1529
|
+
hoverFill: settings.controls.hover,
|
|
1530
|
+
className: styles$2.arrowImg
|
|
1531
|
+
}
|
|
1532
|
+
),
|
|
1533
|
+
!settings.controls.arrowsImgUrl && /* @__PURE__ */ jsx(ArrowIcon, { color: settings.controls.color, className: cn(styles$2.arrowIcon, styles$2.arrowImg) })
|
|
1523
1534
|
]
|
|
1524
1535
|
}
|
|
1525
1536
|
)
|
|
1526
1537
|
}
|
|
1527
1538
|
)
|
|
1528
1539
|
] }),
|
|
1529
|
-
settings.
|
|
1540
|
+
settings.triggers.triggersList.click && /* @__PURE__ */ jsx(
|
|
1530
1541
|
"div",
|
|
1531
1542
|
{
|
|
1532
|
-
className: styles$
|
|
1543
|
+
className: styles$2.clickOverlay,
|
|
1533
1544
|
onClick: () => {
|
|
1534
1545
|
if (sliderRef) {
|
|
1535
1546
|
sliderRef.go("+1");
|
|
@@ -1540,21 +1551,21 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
|
|
|
1540
1551
|
settings.pagination.isActive && /* @__PURE__ */ jsx(
|
|
1541
1552
|
"div",
|
|
1542
1553
|
{
|
|
1543
|
-
className: cn(styles$
|
|
1544
|
-
[styles$
|
|
1545
|
-
[styles$
|
|
1546
|
-
[styles$
|
|
1547
|
-
[styles$
|
|
1548
|
-
[styles$
|
|
1549
|
-
[styles$
|
|
1550
|
-
[styles$
|
|
1551
|
-
[styles$
|
|
1552
|
-
[styles$
|
|
1554
|
+
className: cn(styles$2.pagination, {
|
|
1555
|
+
[styles$2.paginationInsideBottom]: settings.pagination.position === "inside-1" && settings.direction === "horizontal",
|
|
1556
|
+
[styles$2.paginationInsideTop]: settings.pagination.position === "inside-2" && settings.direction === "horizontal",
|
|
1557
|
+
[styles$2.paginationOutsideBottom]: settings.pagination.position === "outside-1" && settings.direction === "horizontal",
|
|
1558
|
+
[styles$2.paginationOutsideTop]: settings.pagination.position === "outside-2" && settings.direction === "horizontal",
|
|
1559
|
+
[styles$2.paginationInsideLeft]: settings.pagination.position === "inside-1" && settings.direction === "vertical",
|
|
1560
|
+
[styles$2.paginationInsideRight]: settings.pagination.position === "inside-2" && settings.direction === "vertical",
|
|
1561
|
+
[styles$2.paginationOutsideLeft]: settings.pagination.position === "outside-1" && settings.direction === "vertical",
|
|
1562
|
+
[styles$2.paginationOutsideRight]: settings.pagination.position === "outside-2" && settings.direction === "vertical",
|
|
1563
|
+
[styles$2.paginationVertical]: settings.direction === "vertical"
|
|
1553
1564
|
}),
|
|
1554
1565
|
children: /* @__PURE__ */ jsx(
|
|
1555
1566
|
"div",
|
|
1556
1567
|
{
|
|
1557
|
-
className: styles$
|
|
1568
|
+
className: styles$2.paginationInner,
|
|
1558
1569
|
style: {
|
|
1559
1570
|
backgroundColor: settings.pagination.colors[0],
|
|
1560
1571
|
transform: `scale(${settings.pagination.scale / 100}) translate(${scalingValue(settings.pagination.offset.x, isEditor)}, ${scalingValue(settings.pagination.offset.y, isEditor)}) rotate(${settings.direction === "horizontal" ? "0deg" : "90deg"})`
|
|
@@ -1567,12 +1578,12 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
|
|
|
1567
1578
|
sliderRef.go(index);
|
|
1568
1579
|
}
|
|
1569
1580
|
},
|
|
1570
|
-
className: cn(styles$
|
|
1581
|
+
className: cn(styles$2.paginationItem),
|
|
1571
1582
|
children: /* @__PURE__ */ jsx(
|
|
1572
1583
|
"div",
|
|
1573
1584
|
{
|
|
1574
|
-
className: cn(styles$
|
|
1575
|
-
[styles$
|
|
1585
|
+
className: cn(styles$2.dot, {
|
|
1586
|
+
[styles$2.activeDot]: index === currentSlideIndex
|
|
1576
1587
|
}),
|
|
1577
1588
|
style: {
|
|
1578
1589
|
backgroundColor: settings.pagination.colors[1],
|
|
@@ -1607,15 +1618,15 @@ const ControlSliderComponent = {
|
|
|
1607
1618
|
layoutBased: true,
|
|
1608
1619
|
type: "object",
|
|
1609
1620
|
properties: {
|
|
1610
|
-
|
|
1611
|
-
name: "
|
|
1621
|
+
triggers: {
|
|
1622
|
+
name: "triggers",
|
|
1612
1623
|
icon: "target",
|
|
1613
1624
|
type: "object",
|
|
1614
1625
|
properties: {
|
|
1615
|
-
|
|
1626
|
+
triggersList: {
|
|
1616
1627
|
type: "object",
|
|
1617
1628
|
display: {
|
|
1618
|
-
type: "
|
|
1629
|
+
type: "toggle-ratio-group"
|
|
1619
1630
|
},
|
|
1620
1631
|
properties: {
|
|
1621
1632
|
click: {
|
|
@@ -1623,11 +1634,15 @@ const ControlSliderComponent = {
|
|
|
1623
1634
|
},
|
|
1624
1635
|
drag: {
|
|
1625
1636
|
type: "boolean"
|
|
1626
|
-
},
|
|
1627
|
-
auto: {
|
|
1628
|
-
type: "boolean"
|
|
1629
1637
|
}
|
|
1630
1638
|
}
|
|
1639
|
+
},
|
|
1640
|
+
autoPlay: {
|
|
1641
|
+
type: ["string", "null"],
|
|
1642
|
+
display: {
|
|
1643
|
+
type: "setep-selector"
|
|
1644
|
+
},
|
|
1645
|
+
enum: [null, "1s", "2s", "3s", "4s", "5s"]
|
|
1631
1646
|
}
|
|
1632
1647
|
}
|
|
1633
1648
|
},
|
|
@@ -1674,8 +1689,8 @@ const ControlSliderComponent = {
|
|
|
1674
1689
|
scale: {
|
|
1675
1690
|
type: "number",
|
|
1676
1691
|
name: "scale",
|
|
1677
|
-
min:
|
|
1678
|
-
max:
|
|
1692
|
+
min: 50,
|
|
1693
|
+
max: 600,
|
|
1679
1694
|
display: {
|
|
1680
1695
|
type: "range-control"
|
|
1681
1696
|
}
|
|
@@ -1712,7 +1727,7 @@ const ControlSliderComponent = {
|
|
|
1712
1727
|
position: {
|
|
1713
1728
|
name: "nav position",
|
|
1714
1729
|
display: {
|
|
1715
|
-
type: "
|
|
1730
|
+
type: "socket",
|
|
1716
1731
|
direction: "horizontal"
|
|
1717
1732
|
},
|
|
1718
1733
|
type: "string",
|
|
@@ -1735,8 +1750,8 @@ const ControlSliderComponent = {
|
|
|
1735
1750
|
scale: {
|
|
1736
1751
|
type: "number",
|
|
1737
1752
|
name: "scale",
|
|
1738
|
-
min:
|
|
1739
|
-
max:
|
|
1753
|
+
min: 10,
|
|
1754
|
+
max: 400,
|
|
1740
1755
|
display: {
|
|
1741
1756
|
type: "range-control"
|
|
1742
1757
|
}
|
|
@@ -1807,12 +1822,12 @@ const ControlSliderComponent = {
|
|
|
1807
1822
|
}
|
|
1808
1823
|
},
|
|
1809
1824
|
default: {
|
|
1810
|
-
|
|
1811
|
-
|
|
1825
|
+
triggers: {
|
|
1826
|
+
triggersList: {
|
|
1812
1827
|
click: true,
|
|
1813
|
-
drag: true
|
|
1814
|
-
|
|
1815
|
-
|
|
1828
|
+
drag: true
|
|
1829
|
+
},
|
|
1830
|
+
autoPlay: null
|
|
1816
1831
|
},
|
|
1817
1832
|
controls: {
|
|
1818
1833
|
isActive: true,
|
|
@@ -1827,7 +1842,7 @@ const ControlSliderComponent = {
|
|
|
1827
1842
|
},
|
|
1828
1843
|
pagination: {
|
|
1829
1844
|
isActive: true,
|
|
1830
|
-
scale:
|
|
1845
|
+
scale: 50,
|
|
1831
1846
|
position: "outside-1",
|
|
1832
1847
|
offset: {
|
|
1833
1848
|
x: 0,
|
|
@@ -1848,16 +1863,6 @@ const ControlSliderComponent = {
|
|
|
1848
1863
|
}
|
|
1849
1864
|
},
|
|
1850
1865
|
displayRules: [
|
|
1851
|
-
{
|
|
1852
|
-
if: {
|
|
1853
|
-
name: "direction",
|
|
1854
|
-
value: "vertical"
|
|
1855
|
-
},
|
|
1856
|
-
then: {
|
|
1857
|
-
name: "properties.controls.properties.position.display.direction",
|
|
1858
|
-
value: "vertical"
|
|
1859
|
-
}
|
|
1860
|
-
},
|
|
1861
1866
|
{
|
|
1862
1867
|
if: {
|
|
1863
1868
|
name: "direction",
|
|
@@ -2055,7 +2060,7 @@ const ControlSliderComponent = {
|
|
|
2055
2060
|
default: {
|
|
2056
2061
|
caption: {
|
|
2057
2062
|
widthSettings: {
|
|
2058
|
-
width:
|
|
2063
|
+
width: 0.13,
|
|
2059
2064
|
sizing: "auto"
|
|
2060
2065
|
},
|
|
2061
2066
|
fontSettings: {
|
|
@@ -25,14 +25,17 @@ export declare const ArticleSchema: z.ZodObject<{
|
|
|
25
25
|
url: z.ZodString;
|
|
26
26
|
size: z.ZodString;
|
|
27
27
|
position: z.ZodString;
|
|
28
|
+
offsetX: z.ZodNullable<z.ZodNumber>;
|
|
28
29
|
}, "strip", z.ZodTypeAny, {
|
|
29
30
|
url: string;
|
|
30
31
|
position: string;
|
|
31
32
|
size: string;
|
|
33
|
+
offsetX: number | null;
|
|
32
34
|
}, {
|
|
33
35
|
url: string;
|
|
34
36
|
position: string;
|
|
35
37
|
size: string;
|
|
38
|
+
offsetX: number | null;
|
|
36
39
|
}>>>;
|
|
37
40
|
}, "strip", z.ZodTypeAny, {
|
|
38
41
|
color: Record<string, string | null>;
|
|
@@ -50,6 +53,7 @@ export declare const ArticleSchema: z.ZodObject<{
|
|
|
50
53
|
url: string;
|
|
51
54
|
position: string;
|
|
52
55
|
size: string;
|
|
56
|
+
offsetX: number | null;
|
|
53
57
|
}> | undefined;
|
|
54
58
|
}, {
|
|
55
59
|
color: Record<string, string | null>;
|
|
@@ -67,6 +71,7 @@ export declare const ArticleSchema: z.ZodObject<{
|
|
|
67
71
|
url: string;
|
|
68
72
|
position: string;
|
|
69
73
|
size: string;
|
|
74
|
+
offsetX: number | null;
|
|
70
75
|
}> | undefined;
|
|
71
76
|
}>, "many">;
|
|
72
77
|
interactions: z.ZodArray<z.ZodObject<{
|
|
@@ -164,6 +169,7 @@ export declare const ArticleSchema: z.ZodObject<{
|
|
|
164
169
|
url: string;
|
|
165
170
|
position: string;
|
|
166
171
|
size: string;
|
|
172
|
+
offsetX: number | null;
|
|
167
173
|
}> | undefined;
|
|
168
174
|
}[];
|
|
169
175
|
interactions: {
|
|
@@ -201,6 +207,7 @@ export declare const ArticleSchema: z.ZodObject<{
|
|
|
201
207
|
url: string;
|
|
202
208
|
position: string;
|
|
203
209
|
size: string;
|
|
210
|
+
offsetX: number | null;
|
|
204
211
|
}> | undefined;
|
|
205
212
|
}[];
|
|
206
213
|
interactions: {
|
|
@@ -37,14 +37,17 @@ export declare const SectionSchema: z.ZodObject<{
|
|
|
37
37
|
url: z.ZodString;
|
|
38
38
|
size: z.ZodString;
|
|
39
39
|
position: z.ZodString;
|
|
40
|
+
offsetX: z.ZodNullable<z.ZodNumber>;
|
|
40
41
|
}, "strip", z.ZodTypeAny, {
|
|
41
42
|
url: string;
|
|
42
43
|
position: string;
|
|
43
44
|
size: string;
|
|
45
|
+
offsetX: number | null;
|
|
44
46
|
}, {
|
|
45
47
|
url: string;
|
|
46
48
|
position: string;
|
|
47
49
|
size: string;
|
|
50
|
+
offsetX: number | null;
|
|
48
51
|
}>>>;
|
|
49
52
|
}, "strip", z.ZodTypeAny, {
|
|
50
53
|
color: Record<string, string | null>;
|
|
@@ -62,6 +65,7 @@ export declare const SectionSchema: z.ZodObject<{
|
|
|
62
65
|
url: string;
|
|
63
66
|
position: string;
|
|
64
67
|
size: string;
|
|
68
|
+
offsetX: number | null;
|
|
65
69
|
}> | undefined;
|
|
66
70
|
}, {
|
|
67
71
|
color: Record<string, string | null>;
|
|
@@ -79,5 +83,6 @@ export declare const SectionSchema: z.ZodObject<{
|
|
|
79
83
|
url: string;
|
|
80
84
|
position: string;
|
|
81
85
|
size: string;
|
|
86
|
+
offsetX: number | null;
|
|
82
87
|
}> | undefined;
|
|
83
88
|
}>;
|
package/dist/sdk.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ControlSlider-module__wrapper___sHEkd{position:relative;width:100%;height:100%}.ControlSlider-module__slider___R3i9-{width:100%;height:100%}.ControlSlider-module__sliderItems___1MgPL{display:flex;overflow:hidden;width:100%;height:100%;transition:transform .3s ease-in-out}.ControlSlider-module__sliderItem___QQSkR{width:100%;height:100%;display:flex;position:relative}.ControlSlider-module__sliderImage___9hRl-{width:100%;height:100%;object-fit:cover}.ControlSlider-module__arrow___05ghY{position:absolute;border:none;background-color:transparent;top:50%;left:0;z-index:1;transform:translate(-50%,-50%);padding:0;width:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw);height:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw)}.ControlSlider-module__nextArrow___-30Yc{left:unset;right:0;transform:translate(50%,-50%)}.ControlSlider-module__nextArrow___-30Yc.ControlSlider-module__arrowVertical___tBfVN{left:50%;right:unset;top:unset;bottom:0;transform:translate(-50%,50%)}.ControlSlider-module__arrowInner___aEra3{all:unset;cursor:pointer;width:100%;height:100
|
|
1
|
+
.ControlSlider-module__wrapper___sHEkd{position:relative;width:100%;height:100%}.ControlSlider-module__slider___R3i9-{width:100%;height:100%}.ControlSlider-module__sliderItems___1MgPL{display:flex;overflow:hidden;width:100%;height:100%;transition:transform .3s ease-in-out}.ControlSlider-module__sliderItem___QQSkR{width:100%;height:100%;display:flex;position:relative}.ControlSlider-module__sliderImage___9hRl-{width:100%;height:100%;object-fit:cover}.ControlSlider-module__arrow___05ghY{position:absolute;display:flex;align-items:center;justify-content:center;border:none;background-color:transparent;top:50%;left:0;z-index:1;transform:translate(-50%,-50%);padding:0;width:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw);height:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw)}.ControlSlider-module__arrow___05ghY.ControlSlider-module__arrowVertical___tBfVN{left:50%;top:0;transform:translate(-50%,-50%)}.ControlSlider-module__nextArrow___-30Yc{left:unset;right:0;transform:translate(50%,-50%)}.ControlSlider-module__nextArrow___-30Yc.ControlSlider-module__arrowVertical___tBfVN{left:50%;right:unset;top:unset;bottom:0;transform:translate(-50%,50%)}.ControlSlider-module__arrowInner___aEra3{all:unset;cursor:pointer;width:100%;height:100%}.ControlSlider-module__arrowInner___aEra3:hover .ControlSlider-module__arrowIcon___S4ztF path{stroke:var(--arrow-hover-color)!important}.ControlSlider-module__arrowImg___2dwJW{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ControlSlider-module__arrowIcon___S4ztF{width:100%;height:100%}.ControlSlider-module__arrowIcon___S4ztF path{transition:stroke .15s ease-in-out}.ControlSlider-module__prevIcon___v8NAK{transform:rotate(180deg)}.ControlSlider-module__pagination___bicLF{position:absolute;z-index:1;border-radius:50%}.ControlSlider-module__paginationInner___bT-P-{display:flex;gap:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);padding-top:calc(var(--is-editor, 0) * .6944444444vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * .6944444444vw);padding-bottom:calc(var(--is-editor, 0) * .6944444444vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * .6944444444vw);padding-left:calc(var(--is-editor, 0) * 1.25vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.25vw);padding-right:calc(var(--is-editor, 0) * 1.25vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.25vw);border-radius:calc(var(--is-editor, 0) * 2.3611111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.3611111111vw)}.ControlSlider-module__paginationVertical___zYqKw{flex-direction:column}.ControlSlider-module__paginationItem___nTRbk{all:unset;flex-shrink:0;position:relative;width:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);height:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);cursor:pointer}.ControlSlider-module__paginationItem___nTRbk:hover .ControlSlider-module__dot___p1Qun{background-color:var(--pagination-hover-color)!important}.ControlSlider-module__dot___p1Qun{border-radius:50%;scale:.5;transition:background-color .3s ease-in-out,transform .3s ease-in-out;width:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);height:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw)}.ControlSlider-module__activeDot___LHFaj{transform:scale(2)}.ControlSlider-module__paginationInsideBottom___R3FWn{bottom:0;left:50%;transform:translate(-50%)}.ControlSlider-module__paginationInsideTop___V-qb-{left:50%;transform:translate(-50%);top:0}.ControlSlider-module__paginationOutsideBottom___14w8D{left:50%;transform:translate(-50%);bottom:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationOutsideTop___SCLqB{left:50%;transform:translate(-50%);top:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationInsideLeft___yOBRZ{top:50%;transform:translateY(-50%);left:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationInsideRight___Rtt3o{top:50%;transform:translateY(-50%);right:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationOutsideLeft___lahaw{top:50%;transform:translateY(-50%);left:calc(var(--is-editor, 0) * -5.4861111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -5.4861111111vw)}.ControlSlider-module__paginationOutsideRight___EtuQa{top:50%;transform:translateY(-50%);right:calc(var(--is-editor, 0) * -5.4861111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -5.4861111111vw)}.ControlSlider-module__imgWrapper___UjEgB,.ControlSlider-module__wrapperInner___DLAWV{width:100%;height:100%}.ControlSlider-module__captionBlock___dJ6-j{pointer-events:none;position:absolute;top:0;z-index:1;left:0;right:0;bottom:0}.ControlSlider-module__captionTextWrapper___HFlpf{position:relative;width:100%;height:100%}.ControlSlider-module__captionText___uGBVc{pointer-events:none;max-width:100%;transition:opacity .3s ease-in-out;position:absolute;display:inline-block;white-space:pre-wrap;overflow-wrap:break-word}.ControlSlider-module__withPointerEvents___t-18M{pointer-events:auto}.ControlSlider-module__absolute___KxmYB{position:absolute}.ControlSlider-module__topLeftAlignment___zjnGM{top:0;left:0}.ControlSlider-module__topCenterAlignment___gD1xW{top:0;left:50%;transform:translate(-50%)}.ControlSlider-module__topRightAlignment___NMapS{top:0;right:0}.ControlSlider-module__middleLeftAlignment___OnUrY{top:50%;transform:translateY(-50%);left:0}.ControlSlider-module__middleCenterAlignment___Tdkl0{top:50%;transform:translate(-50%,-50%);left:50%}.ControlSlider-module__middleRightAlignment___wEbfX{top:50%;transform:translateY(-50%);right:0}.ControlSlider-module__bottomLeftAlignment___cTP2-{bottom:0;left:0}.ControlSlider-module__bottomCenterAlignment___c54fB{bottom:0;left:50%;transform:translate(-50%)}.ControlSlider-module__bottomRightAlignment___kEwrz{bottom:0;right:0}.ControlSlider-module__clickOverlay___DZA28{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}.RichTextRenderer-module__link___BWeZ2{color:inherit;cursor:pointer;pointer-events:auto;transition:color .2s ease}.RichTextRenderer-module__link___BWeZ2:hover{color:var(--link-hover-color)}.SvgImage-module__svg___q3xE-{width:100%;height:100%;color:transparent;display:inline-block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--fill);transition:background-color .2s;-webkit-mask:var(--svg) no-repeat center/contain;mask:var(--svg) no-repeat center/contain}.SvgImage-module__svg___q3xE-:hover{background-color:var(--hover-fill)}.SvgImage-module__img___VsTm-{width:100%;height:100%;object-fit:contain}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cntrl-site/sdk",
|
|
3
|
-
"version": "1.21.0-alpha.
|
|
3
|
+
"version": "1.21.0-alpha.20",
|
|
4
4
|
"description": "Generic SDK for use in public websites.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -74,9 +74,5 @@
|
|
|
74
74
|
"typescript": "^5.2.2",
|
|
75
75
|
"vite": "^6.2.5",
|
|
76
76
|
"vite-plugin-dts": "^4.5.3"
|
|
77
|
-
},
|
|
78
|
-
"peerDependencies": {
|
|
79
|
-
"react": "^18",
|
|
80
|
-
"react-dom": "^18"
|
|
81
77
|
}
|
|
82
78
|
}
|
|
File without changes
|