pds-dev-kit-web-test 2.7.212 → 2.7.214
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/src/sub/DynamicLayout/mock_contentsCarousel.js +4 -4
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/CustomProgressbar.js +1 -1
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/progressConfigs.d.ts +2 -1
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/progressConfigs.js +13 -7
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBanner.js +0 -1
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/progressConfigs.js +5 -5
- package/package.json +1 -1
|
@@ -307,13 +307,13 @@ exports.SAMPLE_CONTENTSCAROUSEL_CB = {
|
|
|
307
307
|
'CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD_SPEC_INFINITESCROLL:MOBILE': null
|
|
308
308
|
},
|
|
309
309
|
CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR: {
|
|
310
|
-
CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR_SPEC_PROGRESSBAR: '
|
|
310
|
+
CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR_SPEC_PROGRESSBAR: 'DESIGN7',
|
|
311
311
|
'CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR_SPEC_PROGRESSBAR:MOBILE': null,
|
|
312
|
-
CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR_SPEC_PROGRESSBARPRIMARYCOLOR: '
|
|
312
|
+
CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR_SPEC_PROGRESSBARPRIMARYCOLOR: 'rgba(239, 69, 69, 1)',
|
|
313
313
|
'CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR_SPEC_PROGRESSBARPRIMARYCOLOR:MOBILE': null,
|
|
314
|
-
CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR_SPEC_PROGRESSBARSECONDARYCOLOR: '
|
|
314
|
+
CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR_SPEC_PROGRESSBARSECONDARYCOLOR: 'rgba(234, 194, 34, 1)',
|
|
315
315
|
'CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR_SPEC_PROGRESSBARSECONDARYCOLOR:MOBILE': null,
|
|
316
|
-
CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR_SPEC_PROGRESSBARSIZE: '
|
|
316
|
+
CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR_SPEC_PROGRESSBARSIZE: 'LARGE',
|
|
317
317
|
'CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR_SPEC_PROGRESSBARSIZE:MOBILE': null
|
|
318
318
|
},
|
|
319
319
|
CB_STYLE_PROP_OPACITY: {
|
|
@@ -81,7 +81,7 @@ var CustomProgressbar = function (_a) {
|
|
|
81
81
|
case 'DESIGN6':
|
|
82
82
|
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign6, { size: iconSize, progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
|
|
83
83
|
case 'DESIGN7':
|
|
84
|
-
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign7, { size: iconSize, 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, sizeEnum: styles.size }));
|
|
85
85
|
case 'DESIGN8':
|
|
86
86
|
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign8, { size: iconSize, progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
|
|
87
87
|
default:
|
|
@@ -37,11 +37,12 @@ export declare const ProgressDesign6: ({ progress, progressColor, bufferColor, s
|
|
|
37
37
|
bufferColor?: string | undefined;
|
|
38
38
|
size: number;
|
|
39
39
|
}) => JSX.Element;
|
|
40
|
-
export declare const ProgressDesign7: ({ progress, progressColor, bufferColor, size }: {
|
|
40
|
+
export declare const ProgressDesign7: ({ progress, progressColor, bufferColor, size, sizeEnum }: {
|
|
41
41
|
progress: number;
|
|
42
42
|
progressColor?: string | undefined;
|
|
43
43
|
bufferColor?: string | undefined;
|
|
44
44
|
size: number;
|
|
45
|
+
sizeEnum?: "SMALL" | "MEDIUM" | "LARGE" | undefined;
|
|
45
46
|
}) => JSX.Element;
|
|
46
47
|
export declare const ProgressDesign8: ({ progress, progressColor, bufferColor, size }: {
|
|
47
48
|
progress: number;
|
|
@@ -70,8 +70,8 @@ var ProgressDesign6 = function (_a) {
|
|
|
70
70
|
};
|
|
71
71
|
exports.ProgressDesign6 = ProgressDesign6;
|
|
72
72
|
var ProgressDesign7 = function (_a) {
|
|
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: {
|
|
73
|
+
var progress = _a.progress, progressColor = _a.progressColor, bufferColor = _a.bufferColor, size = _a.size, sizeEnum = _a.sizeEnum;
|
|
74
|
+
return ((0, jsx_runtime_1.jsx)(S_ProgressDesign7, __assign({ size: size, sizeEnum: sizeEnum, 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
|
} }) })) })));
|
|
@@ -85,16 +85,16 @@ var ProgressDesign8 = function (_a) {
|
|
|
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
|
|
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 justify-content: center;\n position: relative;\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 height: ", "px;\n width: ", "px;\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 justify-content: center;\n position: relative;\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 height: ", "px;\n width: ", "px;\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 (
|
|
91
|
+
}, function (_a) {
|
|
92
92
|
var barColor = _a.barColor;
|
|
93
93
|
return barColor;
|
|
94
|
-
}, function (_a) {
|
|
94
|
+
}, function (props) { return props.size; }, function (props) { return props.size; }, function (_a) {
|
|
95
95
|
var bgColor = _a.bgColor;
|
|
96
96
|
return bgColor;
|
|
97
|
-
}, function (props) { return Math.floor(props.size /
|
|
97
|
+
}, function (props) { return Math.floor(props.size / 2); });
|
|
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;
|
|
@@ -139,12 +139,18 @@ var S_ProgressDesign6 = styled_components_1.default.div(templateObject_6 || (tem
|
|
|
139
139
|
var bgColor = _a.bgColor;
|
|
140
140
|
return bgColor;
|
|
141
141
|
});
|
|
142
|
-
var S_ProgressDesign7 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n align-items: center;\n color: ", ";\n display: flex;\n flex-direction: column;\n font-weight: bold;\n width:
|
|
142
|
+
var S_ProgressDesign7 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n align-items: center;\n color: ", ";\n display: flex;\n flex-direction: column;\n font-weight: bold;\n width: ", ";\n\n .progress-bar-container {\n background-color: ", ";\n height: ", ";\n overflow: hidden;\n position: relative;\n width: 100%;\n }\n\n .progress-bar-fill {\n background-color: ", ";\n height: 100%;\n transition: width 0.1s ease-out;\n width: calc(var(--progress) * 100%);\n }\n"], ["\n align-items: center;\n color: ", ";\n display: flex;\n flex-direction: column;\n font-weight: bold;\n width: ", ";\n\n .progress-bar-container {\n background-color: ", ";\n height: ", ";\n overflow: hidden;\n position: relative;\n width: 100%;\n }\n\n .progress-bar-fill {\n background-color: ", ";\n height: 100%;\n transition: width 0.1s ease-out;\n width: calc(var(--progress) * 100%);\n }\n"])), function (_a) {
|
|
143
143
|
var barColor = _a.barColor;
|
|
144
144
|
return barColor;
|
|
145
|
+
}, function (_a) {
|
|
146
|
+
var sizeEnum = _a.sizeEnum;
|
|
147
|
+
return sizeEnum === 'LARGE' ? '120px' : sizeEnum === 'SMALL' ? '60px' : '80px';
|
|
145
148
|
}, function (_a) {
|
|
146
149
|
var bgColor = _a.bgColor;
|
|
147
150
|
return bgColor;
|
|
151
|
+
}, function (_a) {
|
|
152
|
+
var sizeEnum = _a.sizeEnum;
|
|
153
|
+
return sizeEnum === 'LARGE' ? '8px' : sizeEnum === 'SMALL' ? '5px' : '6px';
|
|
148
154
|
}, function (_a) {
|
|
149
155
|
var barColor = _a.barColor;
|
|
150
156
|
return barColor;
|
|
@@ -65,7 +65,6 @@ 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);
|
|
69
68
|
var _c = (0, util_1.parseProperties)(props, device), style = _c.style, hoverStyle = _c.hoverStyle, layout = _c.layout, overlayStyle = _c.overlayStyle, effect = _c.effect;
|
|
70
69
|
var _d = (0, slideBannerUtils_1.parseSlideBannerStyleToSlideBannerCoreProp)({
|
|
71
70
|
props: CB_STYLE_PROP_SLIDEBANNER,
|
|
@@ -85,7 +85,10 @@ var ProgressDesign8 = function (_a) {
|
|
|
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
|
|
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\n justify-content: center;\n position: relative;\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 height: ", "px;\n width: ", "px;\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\n justify-content: center;\n position: relative;\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 height: ", "px;\n width: ", "px;\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
|
+
var barColor = _a.barColor;
|
|
90
|
+
return barColor;
|
|
91
|
+
}, function (_a) {
|
|
89
92
|
var barColor = _a.barColor;
|
|
90
93
|
return barColor;
|
|
91
94
|
}, function (_a) {
|
|
@@ -94,15 +97,12 @@ var S_ProgressDesign1 = styled_components_1.default.div(templateObject_1 || (tem
|
|
|
94
97
|
}, function (_a) {
|
|
95
98
|
var size = _a.size;
|
|
96
99
|
return size;
|
|
97
|
-
}, function (_a) {
|
|
98
|
-
var barColor = _a.barColor;
|
|
99
|
-
return barColor;
|
|
100
100
|
}, function (_a) {
|
|
101
101
|
var bgColor = _a.bgColor;
|
|
102
102
|
return bgColor;
|
|
103
103
|
}, function (_a) {
|
|
104
104
|
var size = _a.size;
|
|
105
|
-
return Math.floor(size /
|
|
105
|
+
return Math.floor(size / 2);
|
|
106
106
|
});
|
|
107
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) {
|
|
108
108
|
var barColor = _a.barColor;
|