pds-dev-kit-web-test 2.7.210 → 2.7.212

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/src/sub/DynamicLayout/mock_slideBanner.js +1 -1
  2. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/CustomProgressbar.js +18 -9
  3. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/progressConfigs.d.ts +16 -8
  4. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/progressConfigs.js +19 -19
  5. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBanner.js +1 -0
  6. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBannerCore.js +19 -15
  7. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomProgressbar.js +19 -9
  8. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/progressConfigs.d.ts +16 -8
  9. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/progressConfigs.js +26 -17
  10. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/slideBannerUtils.js +4 -4
  11. package/package.json +1 -1
package/dist/src/sub/DynamicLayout/mock_slideBanner.js CHANGED
@@ -4589,7 +4589,7 @@ exports.SAMPLE_SLIDEBANNER_CB = {
4589
4589
  'CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD_SPEC_INFINITESCROLL:MOBILE': null
4590
4590
  },
4591
4591
  CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR: {
4592
- CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR_SPEC_PROGRESSBAR: 'DESIGN3',
4592
+ CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR_SPEC_PROGRESSBAR: 'DESIGN1',
4593
4593
  'CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR_SPEC_PROGRESSBAR:MOBILE': null,
4594
4594
  CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR_SPEC_PROGRESSBARPRIMARYCOLOR: '#C6FF08FA',
4595
4595
  'CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR_SPEC_PROGRESSBARPRIMARYCOLOR:MOBILE': null,
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/CustomProgressbar.js CHANGED
@@ -56,27 +56,36 @@ var CustomProgressbar = function (_a) {
56
56
  return function () { return cancelAnimationFrame(animationId); };
57
57
  }, []);
58
58
  var renderProgressByType = function () {
59
+ var iconSize = 36;
60
+ if (styles.size === 'SMALL') {
61
+ // buttonSize = 'small';
62
+ iconSize = 24;
63
+ }
64
+ if (styles.size === 'LARGE') {
65
+ // buttonSize = 'xxlarge';
66
+ iconSize = 48;
67
+ }
59
68
  switch (styles.type) {
60
69
  case 'NONE':
61
70
  return null;
62
71
  case 'DESIGN1':
63
- return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { progress: progress, leftTimeSec: leftTimeSec, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
72
+ return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { size: iconSize, progress: progress, leftTimeSec: leftTimeSec, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
64
73
  case 'DESIGN2':
65
- return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign2, { progress: progress, leftTimeSec: leftTimeSec, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
74
+ return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign2, { size: iconSize, progress: progress, leftTimeSec: leftTimeSec, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
66
75
  case 'DESIGN3':
67
- return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign3, { progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
76
+ return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign3, { size: iconSize, progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
68
77
  case 'DESIGN4':
69
- return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign4, { progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
78
+ return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign4, { size: iconSize, progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
70
79
  case 'DESIGN5':
71
- return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign5, { progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
80
+ return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign5, { size: iconSize, progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
72
81
  case 'DESIGN6':
73
- return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign6, { progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
82
+ return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign6, { size: iconSize, progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
74
83
  case 'DESIGN7':
75
- return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign7, { progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
84
+ return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign7, { size: iconSize, progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
76
85
  case 'DESIGN8':
77
- return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign8, { progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
86
+ return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign8, { size: iconSize, progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
78
87
  default:
79
- return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { progress: progress, leftTimeSec: leftTimeSec, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
88
+ return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { size: iconSize, progress: progress, leftTimeSec: leftTimeSec, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
80
89
  }
81
90
  };
82
91
  return ((0, jsx_runtime_1.jsx)(S_ProgressWrapper, __assign({ className: "cb-contentscarousel-progressbar-wrapper", "$size": styles.size }, { children: renderProgressByType() })));
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/progressConfigs.d.ts CHANGED
@@ -1,43 +1,51 @@
1
1
  /// <reference types="react" />
2
- export declare const ProgressDesign1: ({ progress, leftTimeSec, progressColor, bufferColor }: {
2
+ export declare const ProgressDesign1: ({ progress, leftTimeSec, progressColor, bufferColor, size }: {
3
3
  progress: number;
4
4
  leftTimeSec: number;
5
5
  progressColor?: string | undefined;
6
6
  bufferColor?: string | undefined;
7
+ size: number;
7
8
  }) => JSX.Element;
8
- export declare const ProgressDesign2: ({ progress, leftTimeSec, progressColor, bufferColor }: {
9
+ export declare const ProgressDesign2: ({ progress, leftTimeSec, progressColor, bufferColor, size }: {
9
10
  progress: number;
10
11
  leftTimeSec: number;
11
12
  progressColor?: string | undefined;
12
13
  bufferColor?: string | undefined;
14
+ size: number;
13
15
  }) => JSX.Element;
14
- export declare const ProgressDesign3: ({ progress, progressColor, bufferColor }: {
16
+ export declare const ProgressDesign3: ({ progress, progressColor, bufferColor, size }: {
15
17
  progress: number;
16
18
  progressColor?: string | undefined;
17
19
  bufferColor?: string | undefined;
20
+ size: number;
18
21
  }) => JSX.Element;
19
- export declare const ProgressDesign4: ({ progress, progressColor, bufferColor }: {
22
+ export declare const ProgressDesign4: ({ progress, progressColor, bufferColor, size }: {
20
23
  progress: number;
21
24
  progressColor?: string | undefined;
22
25
  bufferColor?: string | undefined;
26
+ size: number;
23
27
  }) => JSX.Element;
24
- export declare const ProgressDesign5: ({ progress, progressColor, bufferColor }: {
28
+ export declare const ProgressDesign5: ({ progress, progressColor, bufferColor, size }: {
25
29
  progress: number;
26
30
  progressColor?: string | undefined;
27
31
  bufferColor?: string | undefined;
32
+ size: number;
28
33
  }) => JSX.Element;
29
- export declare const ProgressDesign6: ({ progress, progressColor, bufferColor }: {
34
+ export declare const ProgressDesign6: ({ progress, progressColor, bufferColor, size }: {
30
35
  progress: number;
31
36
  progressColor?: string | undefined;
32
37
  bufferColor?: string | undefined;
38
+ size: number;
33
39
  }) => JSX.Element;
34
- export declare const ProgressDesign7: ({ progress, progressColor, bufferColor }: {
40
+ export declare const ProgressDesign7: ({ progress, progressColor, bufferColor, size }: {
35
41
  progress: number;
36
42
  progressColor?: string | undefined;
37
43
  bufferColor?: string | undefined;
44
+ size: number;
38
45
  }) => JSX.Element;
39
- export declare const ProgressDesign8: ({ progress, progressColor, bufferColor }: {
46
+ export declare const ProgressDesign8: ({ progress, progressColor, bufferColor, size }: {
40
47
  progress: number;
41
48
  progressColor?: string | undefined;
42
49
  bufferColor?: string | undefined;
50
+ size: number;
43
51
  }) => JSX.Element;
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/progressConfigs.js CHANGED
@@ -22,79 +22,79 @@ exports.ProgressDesign8 = exports.ProgressDesign7 = exports.ProgressDesign6 = ex
22
22
  var jsx_runtime_1 = require("react/jsx-runtime");
23
23
  var styled_components_1 = __importDefault(require("styled-components"));
24
24
  var ProgressDesign1 = function (_a) {
25
- var progress = _a.progress, leftTimeSec = _a.leftTimeSec, progressColor = _a.progressColor, bufferColor = _a.bufferColor;
26
- return ((0, jsx_runtime_1.jsxs)(S_ProgressDesign1, __assign({ className: "cb-contentscarousel-progressbar-design1", barColor: progressColor, bgColor: bufferColor }, { children: [(0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 48 48", style: {
25
+ var progress = _a.progress, leftTimeSec = _a.leftTimeSec, progressColor = _a.progressColor, bufferColor = _a.bufferColor, size = _a.size;
26
+ return ((0, jsx_runtime_1.jsxs)(S_ProgressDesign1, __assign({ size: size, className: "cb-contentscarousel-progressbar-design1", barColor: progressColor, bgColor: bufferColor }, { children: [(0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 48 48", style: {
27
27
  '--progress': 1 - progress,
28
28
  transition: 'all 0.03s ease-out'
29
29
  } }, { children: [(0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "20", className: "bg-circle" }), (0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "20", className: "progress-circle" })] })), (0, jsx_runtime_1.jsx)("span", { children: Math.ceil(leftTimeSec) })] })));
30
30
  };
31
31
  exports.ProgressDesign1 = ProgressDesign1;
32
32
  var ProgressDesign2 = function (_a) {
33
- var progress = _a.progress, leftTimeSec = _a.leftTimeSec, progressColor = _a.progressColor, bufferColor = _a.bufferColor;
34
- return ((0, jsx_runtime_1.jsxs)(S_ProgressDesign2, __assign({ className: "cb-contentscarousel-progressbar-design2", barColor: progressColor, bgColor: bufferColor }, { children: [(0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 48 48", style: {
33
+ var progress = _a.progress, leftTimeSec = _a.leftTimeSec, progressColor = _a.progressColor, bufferColor = _a.bufferColor, size = _a.size;
34
+ return ((0, jsx_runtime_1.jsxs)(S_ProgressDesign2, __assign({ size: size, className: "cb-contentscarousel-progressbar-design2", barColor: progressColor, bgColor: bufferColor }, { children: [(0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 48 48", style: {
35
35
  '--progress': 1 - progress,
36
36
  transition: 'all 0.03s linear'
37
37
  } }, { children: [(0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "20", className: "bg-circle" }), (0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "20", className: "progress-circle" })] })), (0, jsx_runtime_1.jsx)("span", { children: Math.ceil(leftTimeSec) })] })));
38
38
  };
39
39
  exports.ProgressDesign2 = ProgressDesign2;
40
40
  var ProgressDesign3 = function (_a) {
41
- var progress = _a.progress, progressColor = _a.progressColor, bufferColor = _a.bufferColor;
42
- return ((0, jsx_runtime_1.jsx)(S_ProgressDesign3, __assign({ className: "cb-contentscarousel-progressbar-design3", barColor: progressColor, bgColor: bufferColor }, { children: (0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 48 48", style: {
41
+ var progress = _a.progress, progressColor = _a.progressColor, bufferColor = _a.bufferColor, size = _a.size;
42
+ return ((0, jsx_runtime_1.jsx)(S_ProgressDesign3, __assign({ size: size, className: "cb-contentscarousel-progressbar-design3", barColor: progressColor, bgColor: bufferColor }, { children: (0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 48 48", style: {
43
43
  '--progress': 1 - progress,
44
44
  transition: 'all 0.03s ease-out'
45
45
  } }, { children: [(0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "20", className: "bg-circle" }), (0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "20", className: "progress-circle" })] })) })));
46
46
  };
47
47
  exports.ProgressDesign3 = ProgressDesign3;
48
48
  var ProgressDesign4 = function (_a) {
49
- var progress = _a.progress, progressColor = _a.progressColor, bufferColor = _a.bufferColor;
50
- return ((0, jsx_runtime_1.jsx)(S_ProgressDesign4, __assign({ className: "cb-contentscarousel-progressbar-design4", barColor: progressColor, bgColor: bufferColor }, { children: (0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 48 48", style: {
49
+ var progress = _a.progress, progressColor = _a.progressColor, bufferColor = _a.bufferColor, size = _a.size;
50
+ return ((0, jsx_runtime_1.jsx)(S_ProgressDesign4, __assign({ size: size, className: "cb-contentscarousel-progressbar-design4", barColor: progressColor, bgColor: bufferColor }, { children: (0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 48 48", style: {
51
51
  '--progress': 1 - progress,
52
52
  transition: 'all 0.03s linear'
53
53
  } }, { children: [(0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "20", className: "bg-circle" }), (0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "20", className: "progress-circle" })] })) })));
54
54
  };
55
55
  exports.ProgressDesign4 = ProgressDesign4;
56
56
  var ProgressDesign5 = function (_a) {
57
- var progress = _a.progress, progressColor = _a.progressColor, bufferColor = _a.bufferColor;
58
- return ((0, jsx_runtime_1.jsx)(S_ProgressDesign5, __assign({ className: "cb-contentscarousel-progressbar-design5", barColor: progressColor, bgColor: bufferColor }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "progress-bar-container" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "progress-bar-fill", style: {
57
+ var progress = _a.progress, progressColor = _a.progressColor, bufferColor = _a.bufferColor, size = _a.size;
58
+ return ((0, jsx_runtime_1.jsx)(S_ProgressDesign5, __assign({ size: size, className: "cb-contentscarousel-progressbar-design5", barColor: progressColor, bgColor: bufferColor }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "progress-bar-container" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "progress-bar-fill", style: {
59
59
  '--progress': 1 - progress,
60
60
  transition: 'all 0.03s ease-out'
61
61
  } }) })) })));
62
62
  };
63
63
  exports.ProgressDesign5 = ProgressDesign5;
64
64
  var ProgressDesign6 = function (_a) {
65
- var progress = _a.progress, progressColor = _a.progressColor, bufferColor = _a.bufferColor;
66
- return ((0, jsx_runtime_1.jsx)(S_ProgressDesign6, __assign({ className: "cb-contentscarousel-progressbar-design6", barColor: progressColor, bgColor: bufferColor }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "progress-bar-container" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "progress-bar-fill", style: {
65
+ var progress = _a.progress, progressColor = _a.progressColor, bufferColor = _a.bufferColor, size = _a.size;
66
+ return ((0, jsx_runtime_1.jsx)(S_ProgressDesign6, __assign({ size: size, className: "cb-contentscarousel-progressbar-design6", barColor: progressColor, bgColor: bufferColor }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "progress-bar-container" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "progress-bar-fill", style: {
67
67
  '--progress': 1 - progress,
68
68
  transition: 'all 0.03s ease-out'
69
69
  } }) })) })));
70
70
  };
71
71
  exports.ProgressDesign6 = ProgressDesign6;
72
72
  var ProgressDesign7 = function (_a) {
73
- var progress = _a.progress, progressColor = _a.progressColor, bufferColor = _a.bufferColor;
74
- return ((0, jsx_runtime_1.jsx)(S_ProgressDesign7, __assign({ className: "cb-contentscarousel-progressbar-design7", barColor: progressColor, bgColor: bufferColor }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "progress-bar-container" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "progress-bar-fill", style: {
73
+ var progress = _a.progress, progressColor = _a.progressColor, bufferColor = _a.bufferColor, size = _a.size;
74
+ return ((0, jsx_runtime_1.jsx)(S_ProgressDesign7, __assign({ size: size, className: "cb-contentscarousel-progressbar-design7", barColor: progressColor, bgColor: bufferColor }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "progress-bar-container" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "progress-bar-fill", style: {
75
75
  '--progress': 1 - progress,
76
76
  transition: 'all 0.03s ease-out'
77
77
  } }) })) })));
78
78
  };
79
79
  exports.ProgressDesign7 = ProgressDesign7;
80
80
  var ProgressDesign8 = function (_a) {
81
- var progress = _a.progress, progressColor = _a.progressColor, bufferColor = _a.bufferColor;
82
- return ((0, jsx_runtime_1.jsx)(S_ProgressDesign8, __assign({ className: "cb-contentscarousel-progressbar-design8", barColor: progressColor, bgColor: bufferColor }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "progress-bar-container" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "progress-bar-fill", style: {
81
+ var progress = _a.progress, progressColor = _a.progressColor, bufferColor = _a.bufferColor, size = _a.size;
82
+ return ((0, jsx_runtime_1.jsx)(S_ProgressDesign8, __assign({ size: size, className: "cb-contentscarousel-progressbar-design8", barColor: progressColor, bgColor: bufferColor }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "progress-bar-container" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "progress-bar-fill", style: {
83
83
  '--progress': 1 - progress,
84
84
  transition: 'all 0.03s ease-out'
85
85
  } }) })) })));
86
86
  };
87
87
  exports.ProgressDesign8 = ProgressDesign8;
88
- var S_ProgressDesign1 = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n color: ", ";\n display: flex;\n font-weight: bold;\n height: 48px;\n justify-content: center;\n position: relative;\n width: 48px;\n\n svg {\n --progress: 0;\n fill: none;\n height: calc(100% - 10px);\n left: 5px;\n position: absolute;\n stroke: ", ";\n stroke-dasharray: 125.6;\n stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n stroke-width: 4px;\n top: 5px;\n transform: rotate(-90deg);\n width: calc(100% - 10px);\n z-index: 10;\n\n .bg-circle {\n stroke: ", ";\n stroke-dasharray: none;\n stroke-width: 4px;\n }\n }\n"], ["\n align-items: center;\n color: ", ";\n display: flex;\n font-weight: bold;\n height: 48px;\n justify-content: center;\n position: relative;\n width: 48px;\n\n svg {\n --progress: 0;\n fill: none;\n height: calc(100% - 10px);\n left: 5px;\n position: absolute;\n stroke: ", ";\n stroke-dasharray: 125.6;\n stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n stroke-width: 4px;\n top: 5px;\n transform: rotate(-90deg);\n width: calc(100% - 10px);\n z-index: 10;\n\n .bg-circle {\n stroke: ", ";\n stroke-dasharray: none;\n stroke-width: 4px;\n }\n }\n"])), function (_a) {
88
+ var S_ProgressDesign1 = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n color: ", ";\n display: flex;\n font-weight: bold;\n height: ", "px;\n justify-content: center;\n position: relative;\n width: ", "px;\n\n svg {\n --progress: 0;\n fill: none;\n height: calc(100% - 10px);\n left: 5px;\n position: absolute;\n stroke: ", ";\n stroke-dasharray: 125.6;\n stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n stroke-width: 4px;\n top: 5px;\n transform: rotate(-90deg);\n width: calc(100% - 10px);\n z-index: 10;\n\n .bg-circle {\n stroke: ", ";\n stroke-dasharray: none;\n stroke-width: 4px;\n }\n }\n\n span {\n font-size: ", "px;\n }\n"], ["\n align-items: center;\n color: ", ";\n display: flex;\n font-weight: bold;\n height: ", "px;\n justify-content: center;\n position: relative;\n width: ", "px;\n\n svg {\n --progress: 0;\n fill: none;\n height: calc(100% - 10px);\n left: 5px;\n position: absolute;\n stroke: ", ";\n stroke-dasharray: 125.6;\n stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n stroke-width: 4px;\n top: 5px;\n transform: rotate(-90deg);\n width: calc(100% - 10px);\n z-index: 10;\n\n .bg-circle {\n stroke: ", ";\n stroke-dasharray: none;\n stroke-width: 4px;\n }\n }\n\n span {\n font-size: ", "px;\n }\n"])), function (_a) {
89
89
  var barColor = _a.barColor;
90
90
  return barColor;
91
- }, function (_a) {
91
+ }, function (props) { return props.size; }, function (props) { return props.size; }, function (_a) {
92
92
  var barColor = _a.barColor;
93
93
  return barColor;
94
94
  }, function (_a) {
95
95
  var bgColor = _a.bgColor;
96
96
  return bgColor;
97
- });
97
+ }, function (props) { return Math.floor(props.size / 4); });
98
98
  var S_ProgressDesign2 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n color: ", ";\n display: flex;\n font-weight: bold;\n height: 48px;\n justify-content: center;\n position: relative;\n width: 48px;\n svg {\n --progress: 0;\n fill: none;\n height: calc(100% - 10px);\n left: 5px;\n position: absolute;\n stroke: ", ";\n stroke-dasharray: 125.6;\n stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n stroke-width: 4px;\n top: 5px;\n transform: rotate(-90deg);\n width: calc(100% - 10px);\n z-index: 10;\n\n .bg-circle {\n stroke: ", ";\n stroke-dasharray: none;\n stroke-width: 4px;\n }\n }\n\n span {\n font-size: 11px;\n z-index: 11;\n }\n"], ["\n align-items: center;\n color: ", ";\n display: flex;\n font-weight: bold;\n height: 48px;\n justify-content: center;\n position: relative;\n width: 48px;\n svg {\n --progress: 0;\n fill: none;\n height: calc(100% - 10px);\n left: 5px;\n position: absolute;\n stroke: ", ";\n stroke-dasharray: 125.6;\n stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n stroke-width: 4px;\n top: 5px;\n transform: rotate(-90deg);\n width: calc(100% - 10px);\n z-index: 10;\n\n .bg-circle {\n stroke: ", ";\n stroke-dasharray: none;\n stroke-width: 4px;\n }\n }\n\n span {\n font-size: 11px;\n z-index: 11;\n }\n"])), function (_a) {
99
99
  var barColor = _a.barColor;
100
100
  return barColor;
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBanner.js CHANGED
@@ -65,6 +65,7 @@ function SlideBanner(props) {
65
65
  var index = props.index, _b = props.CB_CONTENT_PROP_SLIDEBANNER, CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS = _b.CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS, CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE = _b.CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE, CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA = _b.CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA, CB_CONTENT_PROP_SLIDEBANNER_SPEC_MANUALITEMS = _b.CB_CONTENT_PROP_SLIDEBANNER_SPEC_MANUALITEMS, CB_STYLE_PROP_SLIDEBANNERDESIGN = props.CB_STYLE_PROP_SLIDEBANNERDESIGN, CB_STYLE_PROP_SLIDEBANNERPAGINATION = props.CB_STYLE_PROP_SLIDEBANNERPAGINATION, CB_STYLE_PROP_SLIDEBANNERBUTTON = props.CB_STYLE_PROP_SLIDEBANNERBUTTON, CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD = props.CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD, CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR = props.CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, CB_STYLE_PROP_BGMEDIA = props.CB_STYLE_PROP_BGMEDIA, CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE = props.CB_EFFECT_PROP_SLIDEBANNER.CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE;
66
66
  var compositions = props.compositions;
67
67
  var CB_STYLE_PROP_SLIDEBANNER = __assign(__assign(__assign(__assign(__assign({}, CB_STYLE_PROP_SLIDEBANNERDESIGN), CB_STYLE_PROP_SLIDEBANNERPAGINATION), CB_STYLE_PROP_SLIDEBANNERBUTTON), CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD), CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR);
68
+ console.log(CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR);
68
69
  var _c = (0, util_1.parseProperties)(props, device), style = _c.style, hoverStyle = _c.hoverStyle, layout = _c.layout, overlayStyle = _c.overlayStyle, effect = _c.effect;
69
70
  var _d = (0, slideBannerUtils_1.parseSlideBannerStyleToSlideBannerCoreProp)({
70
71
  props: CB_STYLE_PROP_SLIDEBANNER,
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBannerCore.js CHANGED
@@ -21,29 +21,33 @@ var __rest = (this && this.__rest) || function (s, e) {
21
21
  }
22
22
  return t;
23
23
  };
24
+ var __importDefault = (this && this.__importDefault) || function (mod) {
25
+ return (mod && mod.__esModule) ? mod : { "default": mod };
26
+ };
24
27
  Object.defineProperty(exports, "__esModule", { value: true });
25
28
  var jsx_runtime_1 = require("react/jsx-runtime");
26
29
  var react_1 = require("react");
27
30
  var swiper_1 = require("swiper");
28
31
  require("swiper/modules/navigation/navigation.min.css");
29
32
  var react_2 = require("swiper/react");
33
+ var StyledSwiper_1 = __importDefault(require("../../../StyledSwiper/StyledSwiper"));
30
34
  var SlideBannerCore = (0, react_1.forwardRef)(function (_a, ref) {
31
35
  var styles = _a.styles, slidesPerView = _a.slidesPerView, children = _a.children, props = __rest(_a, ["styles", "slidesPerView", "children"]);
32
- return ((0, jsx_runtime_1.jsx)(react_2.Swiper, __assign({ ref: ref, style: {
33
- width: '100%',
34
- height: '100%'
35
- }, slidesPerView: slidesPerView, scrollbar: styles.scrollbar, freeMode: styles.freeMode, autoplay: styles.useAutoplay ? styles.autoplay : false, loop: styles.loop, modules: [
36
- swiper_1.Pagination,
37
- swiper_1.Navigation,
38
- swiper_1.Scrollbar,
39
- swiper_1.FreeMode,
40
- swiper_1.Autoplay,
41
- swiper_1.EffectCube,
42
- swiper_1.EffectFade,
43
- swiper_1.EffectCards,
44
- swiper_1.EffectCoverflow,
45
- swiper_1.EffectFlip
46
- ] }, props, { children: Array.isArray(children) ? (children.map(function (slide, index) { return (0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { children: slide }, index); })) : ((0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { children: children })) })));
36
+ return ((0, jsx_runtime_1.jsx)(StyledSwiper_1.default, __assign({ id: "styled-swiper-wrapper" }, { children: (0, jsx_runtime_1.jsx)(react_2.Swiper, __assign({ ref: ref, style: {
37
+ width: '100%',
38
+ height: '100%'
39
+ }, slidesPerView: slidesPerView, scrollbar: styles.scrollbar, freeMode: styles.freeMode, autoplay: styles.useAutoplay ? styles.autoplay : false, loop: styles.loop, modules: [
40
+ swiper_1.Pagination,
41
+ swiper_1.Navigation,
42
+ swiper_1.Scrollbar,
43
+ swiper_1.FreeMode,
44
+ swiper_1.Autoplay,
45
+ swiper_1.EffectCube,
46
+ swiper_1.EffectFade,
47
+ swiper_1.EffectCards,
48
+ swiper_1.EffectCoverflow,
49
+ swiper_1.EffectFlip
50
+ ] }, props, { children: Array.isArray(children) ? (children.map(function (slide, index) { return (0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { children: slide }, index); })) : ((0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { children: children })) })) })));
47
51
  });
48
52
  SlideBannerCore.displayName = 'SlideBannerCore';
49
53
  exports.default = SlideBannerCore;
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomProgressbar.js CHANGED
@@ -56,27 +56,37 @@ var CustomProgressbar = function (_a) {
56
56
  return function () { return cancelAnimationFrame(animationId); };
57
57
  }, []);
58
58
  var renderProgressByType = function () {
59
+ // const buttonSize: IconButtonProps['baseSize'] = 'large';
60
+ var iconSize = 36;
61
+ if (styles.size === 'SMALL') {
62
+ // buttonSize = 'small';
63
+ iconSize = 24;
64
+ }
65
+ if (styles.size === 'LARGE') {
66
+ // buttonSize = 'xxlarge';
67
+ iconSize = 48;
68
+ }
59
69
  switch (styles.type) {
60
70
  case 'NONE':
61
71
  return null;
62
72
  case 'DESIGN1':
63
- return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { progress: progress, leftTimeSec: leftTimeSec, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
73
+ return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { size: iconSize, progress: progress, leftTimeSec: leftTimeSec, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
64
74
  case 'DESIGN2':
65
- return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign2, { progress: progress, leftTimeSec: leftTimeSec, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
75
+ return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign2, { size: iconSize, progress: progress, leftTimeSec: leftTimeSec, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
66
76
  case 'DESIGN3':
67
- return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign3, { progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
77
+ return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign3, { size: iconSize, progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
68
78
  case 'DESIGN4':
69
- return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign4, { progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
79
+ return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign4, { size: iconSize, progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
70
80
  case 'DESIGN5':
71
- return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign5, { progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
81
+ return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign5, { size: iconSize, progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
72
82
  case 'DESIGN6':
73
- return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign6, { progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
83
+ return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign6, { size: iconSize, progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
74
84
  case 'DESIGN7':
75
- return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign7, { progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
85
+ return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign7, { size: iconSize, progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
76
86
  case 'DESIGN8':
77
- return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign8, { progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
87
+ return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign8, { size: iconSize, progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
78
88
  default:
79
- return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { progress: progress, leftTimeSec: leftTimeSec, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
89
+ return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { progress: progress, leftTimeSec: leftTimeSec, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor, size: iconSize }));
80
90
  }
81
91
  };
82
92
  return ((0, jsx_runtime_1.jsx)(S_ProgressWrapper, __assign({ className: "cb-contentscarousel-progressbar-wrapper", "$size": styles.size }, { children: renderProgressByType() })));
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/progressConfigs.d.ts CHANGED
@@ -1,43 +1,51 @@
1
1
  /// <reference types="react" />
2
- export declare const ProgressDesign1: ({ progress, leftTimeSec, progressColor, bufferColor }: {
2
+ export declare const ProgressDesign1: ({ progress, leftTimeSec, progressColor, bufferColor, size }: {
3
3
  progress: number;
4
4
  leftTimeSec: number;
5
5
  progressColor?: string | undefined;
6
6
  bufferColor?: string | undefined;
7
+ size: number;
7
8
  }) => JSX.Element;
8
- export declare const ProgressDesign2: ({ progress, leftTimeSec, progressColor, bufferColor }: {
9
+ export declare const ProgressDesign2: ({ progress, leftTimeSec, progressColor, bufferColor, size }: {
9
10
  progress: number;
10
11
  leftTimeSec: number;
11
12
  progressColor?: string | undefined;
12
13
  bufferColor?: string | undefined;
14
+ size: number;
13
15
  }) => JSX.Element;
14
- export declare const ProgressDesign3: ({ progress, progressColor, bufferColor }: {
16
+ export declare const ProgressDesign3: ({ progress, progressColor, bufferColor, size }: {
15
17
  progress: number;
16
18
  progressColor?: string | undefined;
17
19
  bufferColor?: string | undefined;
20
+ size: number;
18
21
  }) => JSX.Element;
19
- export declare const ProgressDesign4: ({ progress, progressColor, bufferColor }: {
22
+ export declare const ProgressDesign4: ({ progress, progressColor, bufferColor, size }: {
20
23
  progress: number;
21
24
  progressColor?: string | undefined;
22
25
  bufferColor?: string | undefined;
26
+ size: number;
23
27
  }) => JSX.Element;
24
- export declare const ProgressDesign5: ({ progress, progressColor, bufferColor }: {
28
+ export declare const ProgressDesign5: ({ progress, progressColor, bufferColor, size }: {
25
29
  progress: number;
26
30
  progressColor?: string | undefined;
27
31
  bufferColor?: string | undefined;
32
+ size: number;
28
33
  }) => JSX.Element;
29
- export declare const ProgressDesign6: ({ progress, progressColor, bufferColor }: {
34
+ export declare const ProgressDesign6: ({ progress, progressColor, bufferColor, size }: {
30
35
  progress: number;
31
36
  progressColor?: string | undefined;
32
37
  bufferColor?: string | undefined;
38
+ size: number;
33
39
  }) => JSX.Element;
34
- export declare const ProgressDesign7: ({ progress, progressColor, bufferColor }: {
40
+ export declare const ProgressDesign7: ({ progress, progressColor, bufferColor, size }: {
35
41
  progress: number;
36
42
  progressColor?: string | undefined;
37
43
  bufferColor?: string | undefined;
44
+ size: number;
38
45
  }) => JSX.Element;
39
- export declare const ProgressDesign8: ({ progress, progressColor, bufferColor }: {
46
+ export declare const ProgressDesign8: ({ progress, progressColor, bufferColor, size }: {
40
47
  progress: number;
41
48
  progressColor?: string | undefined;
42
49
  bufferColor?: string | undefined;
50
+ size: number;
43
51
  }) => JSX.Element;
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/progressConfigs.js CHANGED
@@ -22,78 +22,87 @@ exports.ProgressDesign8 = exports.ProgressDesign7 = exports.ProgressDesign6 = ex
22
22
  var jsx_runtime_1 = require("react/jsx-runtime");
23
23
  var styled_components_1 = __importDefault(require("styled-components"));
24
24
  var ProgressDesign1 = function (_a) {
25
- var progress = _a.progress, leftTimeSec = _a.leftTimeSec, progressColor = _a.progressColor, bufferColor = _a.bufferColor;
26
- return ((0, jsx_runtime_1.jsxs)(S_ProgressDesign1, __assign({ barColor: progressColor, bgColor: bufferColor }, { children: [(0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 48 48", style: {
25
+ var progress = _a.progress, leftTimeSec = _a.leftTimeSec, progressColor = _a.progressColor, bufferColor = _a.bufferColor, size = _a.size;
26
+ return ((0, jsx_runtime_1.jsxs)(S_ProgressDesign1, __assign({ size: size, barColor: progressColor, bgColor: bufferColor }, { children: [(0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 48 48", style: {
27
27
  '--progress': 1 - progress,
28
28
  transition: 'all 0.03s ease-out'
29
29
  } }, { children: [(0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "20", className: "bg-circle" }), (0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "20", className: "progress-circle" })] })), (0, jsx_runtime_1.jsx)("span", { children: Math.ceil(leftTimeSec) })] })));
30
30
  };
31
31
  exports.ProgressDesign1 = ProgressDesign1;
32
32
  var ProgressDesign2 = function (_a) {
33
- var progress = _a.progress, leftTimeSec = _a.leftTimeSec, progressColor = _a.progressColor, bufferColor = _a.bufferColor;
34
- return ((0, jsx_runtime_1.jsxs)(S_ProgressDesign2, __assign({ barColor: progressColor, bgColor: bufferColor }, { children: [(0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 48 48", style: {
33
+ var progress = _a.progress, leftTimeSec = _a.leftTimeSec, progressColor = _a.progressColor, bufferColor = _a.bufferColor, size = _a.size;
34
+ return ((0, jsx_runtime_1.jsxs)(S_ProgressDesign2, __assign({ size: size, barColor: progressColor, bgColor: bufferColor }, { children: [(0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 48 48", style: {
35
35
  '--progress': 1 - progress,
36
36
  transition: 'all 0.03s linear'
37
37
  } }, { children: [(0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "20", className: "bg-circle" }), (0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "20", className: "progress-circle" })] })), (0, jsx_runtime_1.jsx)("span", { children: Math.ceil(leftTimeSec) })] })));
38
38
  };
39
39
  exports.ProgressDesign2 = ProgressDesign2;
40
40
  var ProgressDesign3 = function (_a) {
41
- var progress = _a.progress, progressColor = _a.progressColor, bufferColor = _a.bufferColor;
42
- return ((0, jsx_runtime_1.jsx)(S_ProgressDesign3, __assign({ barColor: progressColor, bgColor: bufferColor }, { children: (0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 48 48", style: {
41
+ var progress = _a.progress, progressColor = _a.progressColor, bufferColor = _a.bufferColor, size = _a.size;
42
+ return ((0, jsx_runtime_1.jsx)(S_ProgressDesign3, __assign({ size: size, barColor: progressColor, bgColor: bufferColor }, { children: (0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 48 48", style: {
43
43
  '--progress': 1 - progress,
44
44
  transition: 'all 0.03s ease-out'
45
45
  } }, { children: [(0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "20", className: "bg-circle" }), (0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "20", className: "progress-circle" })] })) })));
46
46
  };
47
47
  exports.ProgressDesign3 = ProgressDesign3;
48
48
  var ProgressDesign4 = function (_a) {
49
- var progress = _a.progress, progressColor = _a.progressColor, bufferColor = _a.bufferColor;
50
- return ((0, jsx_runtime_1.jsx)(S_ProgressDesign4, __assign({ barColor: progressColor, bgColor: bufferColor }, { children: (0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 48 48", style: {
49
+ var progress = _a.progress, progressColor = _a.progressColor, bufferColor = _a.bufferColor, size = _a.size;
50
+ return ((0, jsx_runtime_1.jsx)(S_ProgressDesign4, __assign({ size: size, barColor: progressColor, bgColor: bufferColor }, { children: (0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 48 48", style: {
51
51
  '--progress': 1 - progress,
52
52
  transition: 'all 0.03s linear'
53
53
  } }, { children: [(0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "20", className: "bg-circle" }), (0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "20", className: "progress-circle" })] })) })));
54
54
  };
55
55
  exports.ProgressDesign4 = ProgressDesign4;
56
56
  var ProgressDesign5 = function (_a) {
57
- var progress = _a.progress, progressColor = _a.progressColor, bufferColor = _a.bufferColor;
58
- return ((0, jsx_runtime_1.jsx)(S_ProgressDesign5, __assign({ barColor: progressColor, bgColor: bufferColor }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "progress-bar-container" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "progress-bar-fill", style: {
57
+ var progress = _a.progress, progressColor = _a.progressColor, bufferColor = _a.bufferColor, size = _a.size;
58
+ return ((0, jsx_runtime_1.jsx)(S_ProgressDesign5, __assign({ size: size, barColor: progressColor, bgColor: bufferColor }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "progress-bar-container" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "progress-bar-fill", style: {
59
59
  '--progress': 1 - progress,
60
60
  transition: 'all 0.03s ease-out'
61
61
  } }) })) })));
62
62
  };
63
63
  exports.ProgressDesign5 = ProgressDesign5;
64
64
  var ProgressDesign6 = function (_a) {
65
- var progress = _a.progress, progressColor = _a.progressColor, bufferColor = _a.bufferColor;
66
- return ((0, jsx_runtime_1.jsx)(S_ProgressDesign6, __assign({ barColor: progressColor, bgColor: bufferColor }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "progress-bar-container" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "progress-bar-fill", style: {
65
+ var progress = _a.progress, progressColor = _a.progressColor, bufferColor = _a.bufferColor, size = _a.size;
66
+ return ((0, jsx_runtime_1.jsx)(S_ProgressDesign6, __assign({ size: size, barColor: progressColor, bgColor: bufferColor }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "progress-bar-container" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "progress-bar-fill", style: {
67
67
  '--progress': 1 - progress,
68
68
  transition: 'all 0.03s ease-out'
69
69
  } }) })) })));
70
70
  };
71
71
  exports.ProgressDesign6 = ProgressDesign6;
72
72
  var ProgressDesign7 = function (_a) {
73
- var progress = _a.progress, progressColor = _a.progressColor, bufferColor = _a.bufferColor;
74
- return ((0, jsx_runtime_1.jsx)(S_ProgressDesign7, __assign({ barColor: progressColor, bgColor: bufferColor }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "progress-bar-container" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "progress-bar-fill", style: {
73
+ var progress = _a.progress, progressColor = _a.progressColor, bufferColor = _a.bufferColor, size = _a.size;
74
+ return ((0, jsx_runtime_1.jsx)(S_ProgressDesign7, __assign({ size: size, barColor: progressColor, bgColor: bufferColor }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "progress-bar-container" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "progress-bar-fill", style: {
75
75
  '--progress': 1 - progress,
76
76
  transition: 'all 0.03s ease-out'
77
77
  } }) })) })));
78
78
  };
79
79
  exports.ProgressDesign7 = ProgressDesign7;
80
80
  var ProgressDesign8 = function (_a) {
81
- var progress = _a.progress, progressColor = _a.progressColor, bufferColor = _a.bufferColor;
82
- return ((0, jsx_runtime_1.jsx)(S_ProgressDesign8, __assign({ barColor: progressColor, bgColor: bufferColor }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "progress-bar-container" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "progress-bar-fill", style: {
81
+ var progress = _a.progress, progressColor = _a.progressColor, bufferColor = _a.bufferColor, size = _a.size;
82
+ return ((0, jsx_runtime_1.jsx)(S_ProgressDesign8, __assign({ size: size, barColor: progressColor, bgColor: bufferColor }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "progress-bar-container" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "progress-bar-fill", style: {
83
83
  '--progress': 1 - progress,
84
84
  transition: 'all 0.03s ease-out'
85
85
  } }) })) })));
86
86
  };
87
87
  exports.ProgressDesign8 = ProgressDesign8;
88
- var S_ProgressDesign1 = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n color: ", ";\n display: flex;\n font-weight: bold;\n height: 48px;\n justify-content: center;\n position: relative;\n width: 48px;\n\n svg {\n --progress: 0;\n fill: none;\n height: calc(100% - 10px);\n left: 5px;\n position: absolute;\n stroke: ", ";\n stroke-dasharray: 125.6;\n stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n stroke-width: 4px;\n top: 5px;\n transform: rotate(-90deg);\n width: calc(100% - 10px);\n z-index: 10;\n\n .bg-circle {\n stroke: ", ";\n stroke-dasharray: none;\n stroke-width: 4px;\n }\n }\n"], ["\n align-items: center;\n color: ", ";\n display: flex;\n font-weight: bold;\n height: 48px;\n justify-content: center;\n position: relative;\n width: 48px;\n\n svg {\n --progress: 0;\n fill: none;\n height: calc(100% - 10px);\n left: 5px;\n position: absolute;\n stroke: ", ";\n stroke-dasharray: 125.6;\n stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n stroke-width: 4px;\n top: 5px;\n transform: rotate(-90deg);\n width: calc(100% - 10px);\n z-index: 10;\n\n .bg-circle {\n stroke: ", ";\n stroke-dasharray: none;\n stroke-width: 4px;\n }\n }\n"])), function (_a) {
88
+ var S_ProgressDesign1 = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n color: ", ";\n display: flex;\n font-weight: bold;\n height: ", "px;\n justify-content: center;\n position: relative;\n width: ", "px;\n\n svg {\n --progress: 0;\n fill: none;\n height: calc(100% - 10px);\n left: 5px;\n position: absolute;\n stroke: ", ";\n stroke-dasharray: 125.6;\n stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n stroke-width: 4px;\n top: 5px;\n transform: rotate(-90deg);\n width: calc(100% - 10px);\n z-index: 10;\n\n .bg-circle {\n stroke: ", ";\n stroke-dasharray: none;\n stroke-width: 4px;\n }\n }\n\n span {\n font-size: ", "px;\n }\n"], ["\n align-items: center;\n color: ", ";\n display: flex;\n font-weight: bold;\n height: ", "px;\n justify-content: center;\n position: relative;\n width: ", "px;\n\n svg {\n --progress: 0;\n fill: none;\n height: calc(100% - 10px);\n left: 5px;\n position: absolute;\n stroke: ", ";\n stroke-dasharray: 125.6;\n stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n stroke-width: 4px;\n top: 5px;\n transform: rotate(-90deg);\n width: calc(100% - 10px);\n z-index: 10;\n\n .bg-circle {\n stroke: ", ";\n stroke-dasharray: none;\n stroke-width: 4px;\n }\n }\n\n span {\n font-size: ", "px;\n }\n"])), function (_a) {
89
89
  var barColor = _a.barColor;
90
90
  return barColor;
91
+ }, function (_a) {
92
+ var size = _a.size;
93
+ return size;
94
+ }, function (_a) {
95
+ var size = _a.size;
96
+ return size;
91
97
  }, function (_a) {
92
98
  var barColor = _a.barColor;
93
99
  return barColor;
94
100
  }, function (_a) {
95
101
  var bgColor = _a.bgColor;
96
102
  return bgColor;
103
+ }, function (_a) {
104
+ var size = _a.size;
105
+ return Math.floor(size / 4);
97
106
  });
98
107
  var S_ProgressDesign2 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n color: ", ";\n display: flex;\n font-weight: bold;\n height: 48px;\n justify-content: center;\n position: relative;\n width: 48px;\n\n svg {\n --progress: 0;\n fill: none;\n height: calc(100% - 10px);\n left: 5px;\n position: absolute;\n stroke: ", ";\n stroke-dasharray: 125.6;\n stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n stroke-width: 4px;\n top: 5px;\n transform: rotate(-90deg);\n width: calc(100% - 10px);\n z-index: 10;\n\n .bg-circle {\n stroke: ", ";\n stroke-dasharray: none;\n stroke-width: 4px;\n }\n }\n\n span {\n font-size: 11px;\n z-index: 11;\n }\n"], ["\n align-items: center;\n color: ", ";\n display: flex;\n font-weight: bold;\n height: 48px;\n justify-content: center;\n position: relative;\n width: 48px;\n\n svg {\n --progress: 0;\n fill: none;\n height: calc(100% - 10px);\n left: 5px;\n position: absolute;\n stroke: ", ";\n stroke-dasharray: 125.6;\n stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n stroke-width: 4px;\n top: 5px;\n transform: rotate(-90deg);\n width: calc(100% - 10px);\n z-index: 10;\n\n .bg-circle {\n stroke: ", ";\n stroke-dasharray: none;\n stroke-width: 4px;\n }\n }\n\n span {\n font-size: 11px;\n z-index: 11;\n }\n"])), function (_a) {
99
108
  var barColor = _a.barColor;
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/slideBannerUtils.js CHANGED
@@ -44,10 +44,10 @@ exports.getCustomNavigationPropKey = getCustomNavigationPropKey;
44
44
  function getCustomProgressbarPropKey(key) {
45
45
  var baseKey = key.split(':')[0];
46
46
  var keyMapping = {
47
- CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_PROGRESSBAR: 'type',
48
- CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_PROGRESSBARSIZE: 'size',
49
- CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_PROGRESSBARPRIMARYCOLOR: 'primaryColor',
50
- CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_PROGRESSBARSECONDARYCOLOR: 'secondaryColor'
47
+ CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR_SPEC_PROGRESSBAR: 'type',
48
+ CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR_SPEC_PROGRESSBARSIZE: 'size',
49
+ CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR_SPEC_PROGRESSBARPRIMARYCOLOR: 'primaryColor',
50
+ CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR_SPEC_PROGRESSBARSECONDARYCOLOR: 'secondaryColor'
51
51
  };
52
52
  return keyMapping[baseKey] || null;
53
53
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web-test",
3
- "version": "2.7.210",
3
+ "version": "2.7.212",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",