pds-dev-kit-web-test 2.7.214 → 2.7.216
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 +1 -1
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/CustomProgressbar.js +10 -18
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/progressConfigs.d.ts +9 -10
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/progressConfigs.js +49 -24
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomProgressbar.js +10 -19
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/progressConfigs.d.ts +8 -8
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/progressConfigs.js +73 -18
- package/package.json +1 -1
|
@@ -307,7 +307,7 @@ 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: 'DESIGN1',
|
|
311
311
|
'CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR_SPEC_PROGRESSBAR:MOBILE': null,
|
|
312
312
|
CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR_SPEC_PROGRESSBARPRIMARYCOLOR: 'rgba(239, 69, 69, 1)',
|
|
313
313
|
'CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR_SPEC_PROGRESSBARPRIMARYCOLOR:MOBILE': null,
|
|
@@ -56,36 +56,28 @@ var CustomProgressbar = function (_a) {
|
|
|
56
56
|
return function () { return cancelAnimationFrame(animationId); };
|
|
57
57
|
}, []);
|
|
58
58
|
var renderProgressByType = function () {
|
|
59
|
-
var
|
|
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
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
68
60
|
switch (styles.type) {
|
|
69
61
|
case 'NONE':
|
|
70
62
|
return null;
|
|
71
63
|
case 'DESIGN1':
|
|
72
|
-
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { size:
|
|
64
|
+
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { size: (_a = styles.size) !== null && _a !== void 0 ? _a : 'MEDIUM', progress: progress, leftTimeSec: leftTimeSec, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
|
|
73
65
|
case 'DESIGN2':
|
|
74
|
-
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign2, { size:
|
|
66
|
+
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign2, { size: (_b = styles.size) !== null && _b !== void 0 ? _b : 'MEDIUM', progress: progress, leftTimeSec: leftTimeSec, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
|
|
75
67
|
case 'DESIGN3':
|
|
76
|
-
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign3, { size:
|
|
68
|
+
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign3, { size: (_c = styles.size) !== null && _c !== void 0 ? _c : 'MEDIUM', progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
|
|
77
69
|
case 'DESIGN4':
|
|
78
|
-
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign4, { size:
|
|
70
|
+
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign4, { size: (_d = styles.size) !== null && _d !== void 0 ? _d : 'MEDIUM', progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
|
|
79
71
|
case 'DESIGN5':
|
|
80
|
-
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign5, { size:
|
|
72
|
+
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign5, { size: (_e = styles.size) !== null && _e !== void 0 ? _e : 'MEDIUM', progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
|
|
81
73
|
case 'DESIGN6':
|
|
82
|
-
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign6, { size:
|
|
74
|
+
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign6, { size: (_f = styles.size) !== null && _f !== void 0 ? _f : 'MEDIUM', progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
|
|
83
75
|
case 'DESIGN7':
|
|
84
|
-
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign7, { size:
|
|
76
|
+
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign7, { size: (_g = styles.size) !== null && _g !== void 0 ? _g : 'MEDIUM', progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
|
|
85
77
|
case 'DESIGN8':
|
|
86
|
-
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign8, { size:
|
|
78
|
+
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign8, { size: (_h = styles.size) !== null && _h !== void 0 ? _h : 'MEDIUM', progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
|
|
87
79
|
default:
|
|
88
|
-
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { size:
|
|
80
|
+
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { size: (_j = styles.size) !== null && _j !== void 0 ? _j : 'MEDIUM', progress: progress, leftTimeSec: leftTimeSec, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
|
|
89
81
|
}
|
|
90
82
|
};
|
|
91
83
|
return ((0, jsx_runtime_1.jsx)(S_ProgressWrapper, __assign({ className: "cb-contentscarousel-progressbar-wrapper", "$size": styles.size }, { children: renderProgressByType() })));
|
|
@@ -4,49 +4,48 @@ export declare const ProgressDesign1: ({ progress, leftTimeSec, progressColor, b
|
|
|
4
4
|
leftTimeSec: number;
|
|
5
5
|
progressColor?: string | undefined;
|
|
6
6
|
bufferColor?: string | undefined;
|
|
7
|
-
size:
|
|
7
|
+
size: 'SMALL' | 'MEDIUM' | 'LARGE';
|
|
8
8
|
}) => JSX.Element;
|
|
9
9
|
export declare const ProgressDesign2: ({ progress, leftTimeSec, progressColor, bufferColor, size }: {
|
|
10
10
|
progress: number;
|
|
11
11
|
leftTimeSec: number;
|
|
12
12
|
progressColor?: string | undefined;
|
|
13
13
|
bufferColor?: string | undefined;
|
|
14
|
-
size:
|
|
14
|
+
size: 'SMALL' | 'MEDIUM' | 'LARGE';
|
|
15
15
|
}) => JSX.Element;
|
|
16
16
|
export declare const ProgressDesign3: ({ progress, progressColor, bufferColor, size }: {
|
|
17
17
|
progress: number;
|
|
18
18
|
progressColor?: string | undefined;
|
|
19
19
|
bufferColor?: string | undefined;
|
|
20
|
-
size:
|
|
20
|
+
size: 'SMALL' | 'MEDIUM' | 'LARGE';
|
|
21
21
|
}) => JSX.Element;
|
|
22
22
|
export declare const ProgressDesign4: ({ progress, progressColor, bufferColor, size }: {
|
|
23
23
|
progress: number;
|
|
24
24
|
progressColor?: string | undefined;
|
|
25
25
|
bufferColor?: string | undefined;
|
|
26
|
-
size:
|
|
26
|
+
size: 'SMALL' | 'MEDIUM' | 'LARGE';
|
|
27
27
|
}) => JSX.Element;
|
|
28
28
|
export declare const ProgressDesign5: ({ progress, progressColor, bufferColor, size }: {
|
|
29
29
|
progress: number;
|
|
30
30
|
progressColor?: string | undefined;
|
|
31
31
|
bufferColor?: string | undefined;
|
|
32
|
-
size:
|
|
32
|
+
size: 'SMALL' | 'MEDIUM' | 'LARGE';
|
|
33
33
|
}) => JSX.Element;
|
|
34
34
|
export declare const ProgressDesign6: ({ progress, progressColor, bufferColor, size }: {
|
|
35
35
|
progress: number;
|
|
36
36
|
progressColor?: string | undefined;
|
|
37
37
|
bufferColor?: string | undefined;
|
|
38
|
-
size:
|
|
38
|
+
size: 'SMALL' | 'MEDIUM' | 'LARGE';
|
|
39
39
|
}) => JSX.Element;
|
|
40
|
-
export declare const ProgressDesign7: ({ progress, progressColor, bufferColor, size
|
|
40
|
+
export declare const ProgressDesign7: ({ progress, progressColor, bufferColor, size }: {
|
|
41
41
|
progress: number;
|
|
42
42
|
progressColor?: string | undefined;
|
|
43
43
|
bufferColor?: string | undefined;
|
|
44
|
-
size:
|
|
45
|
-
sizeEnum?: "SMALL" | "MEDIUM" | "LARGE" | undefined;
|
|
44
|
+
size: 'SMALL' | 'MEDIUM' | 'LARGE';
|
|
46
45
|
}) => JSX.Element;
|
|
47
46
|
export declare const ProgressDesign8: ({ progress, progressColor, bufferColor, size }: {
|
|
48
47
|
progress: number;
|
|
49
48
|
progressColor?: string | undefined;
|
|
50
49
|
bufferColor?: string | undefined;
|
|
51
|
-
size:
|
|
50
|
+
size: 'SMALL' | 'MEDIUM' | 'LARGE';
|
|
52
51
|
}) => JSX.Element;
|
|
@@ -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,
|
|
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
|
} }) })) })));
|
|
@@ -85,83 +85,108 @@ var ProgressDesign8 = function (_a) {
|
|
|
85
85
|
} }) })) })));
|
|
86
86
|
};
|
|
87
87
|
exports.ProgressDesign8 = ProgressDesign8;
|
|
88
|
-
var
|
|
88
|
+
var SIZE_ENUM_TO_NUM_CIRCLE = {
|
|
89
|
+
SMALL: {
|
|
90
|
+
width: 24,
|
|
91
|
+
height: 25,
|
|
92
|
+
fontSize: 8
|
|
93
|
+
},
|
|
94
|
+
MEDIUM: {
|
|
95
|
+
width: 36,
|
|
96
|
+
height: 36,
|
|
97
|
+
fontSize: 12
|
|
98
|
+
},
|
|
99
|
+
LARGE: {
|
|
100
|
+
width: 48,
|
|
101
|
+
height: 48,
|
|
102
|
+
fontSize: 16
|
|
103
|
+
}
|
|
104
|
+
};
|
|
105
|
+
var SIZE_ENUM_TO_NUM_BAR = {
|
|
106
|
+
SMALL: { width: 60, height: 5 },
|
|
107
|
+
MEDIUM: {
|
|
108
|
+
width: 80,
|
|
109
|
+
height: 6
|
|
110
|
+
},
|
|
111
|
+
LARGE: { width: 120, height: 8 }
|
|
112
|
+
};
|
|
113
|
+
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: 100%;\n position: absolute;\n stroke: ", ";\n stroke-dasharray: 125.6;\n stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n stroke-width: 4px;\n transform: rotate(-90deg);\n width: 100%;\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 position: absolute;\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: 100%;\n position: absolute;\n stroke: ", ";\n stroke-dasharray: 125.6;\n stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n stroke-width: 4px;\n transform: rotate(-90deg);\n width: 100%;\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 position: absolute;\n }\n"])), function (_a) {
|
|
89
114
|
var barColor = _a.barColor;
|
|
90
115
|
return barColor;
|
|
91
|
-
}, function (_a) {
|
|
116
|
+
}, function (props) { return SIZE_ENUM_TO_NUM_CIRCLE[props.size].height; }, function (props) { return SIZE_ENUM_TO_NUM_CIRCLE[props.size].width; }, function (_a) {
|
|
92
117
|
var barColor = _a.barColor;
|
|
93
118
|
return barColor;
|
|
94
|
-
}, function (
|
|
119
|
+
}, function (_a) {
|
|
95
120
|
var bgColor = _a.bgColor;
|
|
96
121
|
return bgColor;
|
|
97
|
-
}, function (props) { return Math.floor(props.size
|
|
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:
|
|
122
|
+
}, function (props) { return Math.floor(SIZE_ENUM_TO_NUM_CIRCLE[props.size].fontSize); });
|
|
123
|
+
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: ", "px;\n justify-content: center;\n position: relative;\n width: ", "px;\n\n svg {\n --progress: 0;\n fill: none;\n height: 100%;\n position: absolute;\n stroke: ", ";\n stroke-dasharray: 125.6;\n stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n stroke-width: 4px;\n transform: rotate(-90deg);\n width: 100%;\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: ", "px;\n justify-content: center;\n position: relative;\n width: ", "px;\n\n svg {\n --progress: 0;\n fill: none;\n height: 100%;\n position: absolute;\n stroke: ", ";\n stroke-dasharray: 125.6;\n stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n stroke-width: 4px;\n transform: rotate(-90deg);\n width: 100%;\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
124
|
var barColor = _a.barColor;
|
|
100
125
|
return barColor;
|
|
101
|
-
}, function (_a) {
|
|
126
|
+
}, function (props) { return SIZE_ENUM_TO_NUM_CIRCLE[props.size].height; }, function (props) { return SIZE_ENUM_TO_NUM_CIRCLE[props.size].width; }, function (_a) {
|
|
102
127
|
var barColor = _a.barColor;
|
|
103
128
|
return barColor;
|
|
104
129
|
}, function (_a) {
|
|
105
130
|
var bgColor = _a.bgColor;
|
|
106
131
|
return bgColor;
|
|
107
132
|
});
|
|
108
|
-
var S_ProgressDesign3 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n color: ", ";\n display: flex;\n font-weight: bold;\n height:
|
|
133
|
+
var S_ProgressDesign3 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __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: 100%;\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: 100%;\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: ", "px;\n justify-content: center;\n position: relative;\n width: ", "px;\n\n svg {\n --progress: 0;\n fill: none;\n height: 100%;\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: 100%;\n z-index: 10;\n\n .bg-circle {\n stroke: ", ";\n stroke-dasharray: none;\n stroke-width: 4px;\n }\n }\n"])), function (_a) {
|
|
109
134
|
var barColor = _a.barColor;
|
|
110
135
|
return barColor;
|
|
111
|
-
}, function (_a) {
|
|
136
|
+
}, function (props) { return SIZE_ENUM_TO_NUM_CIRCLE[props.size].width; }, function (props) { return SIZE_ENUM_TO_NUM_CIRCLE[props.size].width; }, function (_a) {
|
|
112
137
|
var barColor = _a.barColor;
|
|
113
138
|
return barColor;
|
|
114
139
|
}, function (_a) {
|
|
115
140
|
var bgColor = _a.bgColor;
|
|
116
141
|
return bgColor;
|
|
117
142
|
});
|
|
118
|
-
var S_ProgressDesign4 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n color: ", ";\n display: flex;\n font-weight: bold;\n height:
|
|
143
|
+
var S_ProgressDesign4 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __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: 100%;\n position: absolute;\n stroke: ", ";\n stroke-dasharray: 125.6;\n stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n stroke-width: 4px;\n transform: rotate(-90deg);\n width: 100%;\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: ", "px;\n justify-content: center;\n position: relative;\n width: ", "px;\n\n svg {\n --progress: 0;\n fill: none;\n height: 100%;\n position: absolute;\n stroke: ", ";\n stroke-dasharray: 125.6;\n stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n stroke-width: 4px;\n transform: rotate(-90deg);\n width: 100%;\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) {
|
|
119
144
|
var barColor = _a.barColor;
|
|
120
145
|
return barColor;
|
|
121
|
-
}, function (_a) {
|
|
146
|
+
}, function (props) { return SIZE_ENUM_TO_NUM_CIRCLE[props.size].width; }, function (props) { return SIZE_ENUM_TO_NUM_CIRCLE[props.size].width; }, function (_a) {
|
|
122
147
|
var barColor = _a.barColor;
|
|
123
148
|
return barColor;
|
|
124
149
|
}, function (_a) {
|
|
125
150
|
var bgColor = _a.bgColor;
|
|
126
151
|
return bgColor;
|
|
127
152
|
});
|
|
128
|
-
var S_ProgressDesign5 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n color: ", ";\n display: flex;\n flex-direction: column;\n font-weight: bold;\n width:
|
|
153
|
+
var S_ProgressDesign5 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n color: ", ";\n display: flex;\n flex-direction: column;\n font-weight: bold;\n width: ", "px;\n\n .progress-bar-container {\n background-color: rgba(255, 255, 255, 0.2);\n border-radius: 3px;\n height: ", "px;\n overflow: hidden;\n position: relative;\n width: 100%;\n }\n\n .progress-bar-fill {\n background-color: ", ";\n border-radius: 3px;\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: ", "px;\n\n .progress-bar-container {\n background-color: rgba(255, 255, 255, 0.2);\n border-radius: 3px;\n height: ", "px;\n overflow: hidden;\n position: relative;\n width: 100%;\n }\n\n .progress-bar-fill {\n background-color: ", ";\n border-radius: 3px;\n height: 100%;\n transition: width 0.1s ease-out;\n width: calc(var(--progress) * 100%);\n }\n"])), function (_a) {
|
|
129
154
|
var barColor = _a.barColor;
|
|
130
155
|
return barColor;
|
|
131
|
-
}, function (_a) {
|
|
156
|
+
}, function (props) { return SIZE_ENUM_TO_NUM_BAR[props.size].width; }, function (props) { return SIZE_ENUM_TO_NUM_BAR[props.size].height; }, function (_a) {
|
|
132
157
|
var barColor = _a.barColor;
|
|
133
158
|
return barColor;
|
|
134
159
|
});
|
|
135
|
-
var S_ProgressDesign6 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: center;\n color: ", ";\n display: flex;\n flex-direction: column;\n font-weight: bold;\n width:
|
|
160
|
+
var S_ProgressDesign6 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: center;\n color: ", ";\n display: flex;\n flex-direction: column;\n font-weight: bold;\n width: ", "px;\n\n .progress-bar-container {\n background-color: rgba(0, 0, 0, 0.2);\n border-radius: 3px;\n height: ", "px;\n overflow: hidden;\n position: relative;\n width: 100%;\n }\n\n .progress-bar-fill {\n background-color: ", ";\n border-radius: 3px;\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: ", "px;\n\n .progress-bar-container {\n background-color: rgba(0, 0, 0, 0.2);\n border-radius: 3px;\n height: ", "px;\n overflow: hidden;\n position: relative;\n width: 100%;\n }\n\n .progress-bar-fill {\n background-color: ", ";\n border-radius: 3px;\n height: 100%;\n transition: width 0.1s ease-out;\n width: calc(var(--progress) * 100%);\n }\n"])), function (_a) {
|
|
136
161
|
var bgColor = _a.bgColor;
|
|
137
162
|
return bgColor;
|
|
138
|
-
}, function (_a) {
|
|
163
|
+
}, function (props) { return SIZE_ENUM_TO_NUM_BAR[props.size].width; }, function (props) { return SIZE_ENUM_TO_NUM_BAR[props.size].height; }, function (_a) {
|
|
139
164
|
var bgColor = _a.bgColor;
|
|
140
165
|
return bgColor;
|
|
141
166
|
});
|
|
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) {
|
|
167
|
+
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: ", "px;\n\n .progress-bar-container {\n background-color: ", ";\n height: ", "px;\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: ", "px;\n\n .progress-bar-container {\n background-color: ", ";\n height: ", "px;\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
168
|
var barColor = _a.barColor;
|
|
144
169
|
return barColor;
|
|
145
170
|
}, function (_a) {
|
|
146
|
-
var
|
|
147
|
-
return
|
|
171
|
+
var size = _a.size;
|
|
172
|
+
return SIZE_ENUM_TO_NUM_BAR[size].width;
|
|
148
173
|
}, function (_a) {
|
|
149
174
|
var bgColor = _a.bgColor;
|
|
150
175
|
return bgColor;
|
|
151
176
|
}, function (_a) {
|
|
152
|
-
var
|
|
153
|
-
return
|
|
177
|
+
var size = _a.size;
|
|
178
|
+
return SIZE_ENUM_TO_NUM_BAR[size].height;
|
|
154
179
|
}, function (_a) {
|
|
155
180
|
var barColor = _a.barColor;
|
|
156
181
|
return barColor;
|
|
157
182
|
});
|
|
158
|
-
var S_ProgressDesign8 = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n align-items: center;\n color: ", ";\n display: flex;\n flex-direction: column;\n font-weight: bold;\n width:
|
|
183
|
+
var S_ProgressDesign8 = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n align-items: center;\n color: ", ";\n display: flex;\n flex-direction: column;\n font-weight: bold;\n width: ", "px;\n\n .progress-bar-container {\n background-color: ", ";\n height: ", "px;\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: ", "px;\n\n .progress-bar-container {\n background-color: ", ";\n height: ", "px;\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) {
|
|
159
184
|
var barColor = _a.barColor;
|
|
160
185
|
return barColor;
|
|
161
|
-
}, function (_a) {
|
|
186
|
+
}, function (props) { return SIZE_ENUM_TO_NUM_BAR[props.size].width; }, function (_a) {
|
|
162
187
|
var bgColor = _a.bgColor;
|
|
163
188
|
return bgColor;
|
|
164
|
-
}, function (_a) {
|
|
189
|
+
}, function (props) { return SIZE_ENUM_TO_NUM_BAR[props.size].height; }, function (_a) {
|
|
165
190
|
var barColor = _a.barColor;
|
|
166
191
|
return barColor;
|
|
167
192
|
});
|
|
@@ -56,37 +56,28 @@ var CustomProgressbar = function (_a) {
|
|
|
56
56
|
return function () { return cancelAnimationFrame(animationId); };
|
|
57
57
|
}, []);
|
|
58
58
|
var renderProgressByType = function () {
|
|
59
|
-
|
|
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
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
69
60
|
switch (styles.type) {
|
|
70
61
|
case 'NONE':
|
|
71
62
|
return null;
|
|
72
63
|
case 'DESIGN1':
|
|
73
|
-
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { size:
|
|
64
|
+
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { size: (_a = styles.size) !== null && _a !== void 0 ? _a : 'MEDIUM', progress: progress, leftTimeSec: leftTimeSec, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
|
|
74
65
|
case 'DESIGN2':
|
|
75
|
-
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign2, { size:
|
|
66
|
+
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign2, { size: (_b = styles.size) !== null && _b !== void 0 ? _b : 'MEDIUM', progress: progress, leftTimeSec: leftTimeSec, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
|
|
76
67
|
case 'DESIGN3':
|
|
77
|
-
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign3, { size:
|
|
68
|
+
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign3, { size: (_c = styles.size) !== null && _c !== void 0 ? _c : 'MEDIUM', progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
|
|
78
69
|
case 'DESIGN4':
|
|
79
|
-
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign4, { size:
|
|
70
|
+
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign4, { size: (_d = styles.size) !== null && _d !== void 0 ? _d : 'MEDIUM', progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
|
|
80
71
|
case 'DESIGN5':
|
|
81
|
-
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign5, { size:
|
|
72
|
+
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign5, { size: (_e = styles.size) !== null && _e !== void 0 ? _e : 'MEDIUM', progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
|
|
82
73
|
case 'DESIGN6':
|
|
83
|
-
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign6, { size:
|
|
74
|
+
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign6, { size: (_f = styles.size) !== null && _f !== void 0 ? _f : 'MEDIUM', progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
|
|
84
75
|
case 'DESIGN7':
|
|
85
|
-
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign7, { size:
|
|
76
|
+
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign7, { size: (_g = styles.size) !== null && _g !== void 0 ? _g : 'MEDIUM', progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
|
|
86
77
|
case 'DESIGN8':
|
|
87
|
-
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign8, { size:
|
|
78
|
+
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign8, { size: (_h = styles.size) !== null && _h !== void 0 ? _h : 'MEDIUM', progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
|
|
88
79
|
default:
|
|
89
|
-
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { progress: progress, leftTimeSec: leftTimeSec, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor, size:
|
|
80
|
+
return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { progress: progress, leftTimeSec: leftTimeSec, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor, size: (_j = styles.size) !== null && _j !== void 0 ? _j : 'MEDIUM' }));
|
|
90
81
|
}
|
|
91
82
|
};
|
|
92
83
|
return ((0, jsx_runtime_1.jsx)(S_ProgressWrapper, __assign({ className: "cb-contentscarousel-progressbar-wrapper", "$size": styles.size }, { children: renderProgressByType() })));
|
|
@@ -4,48 +4,48 @@ export declare const ProgressDesign1: ({ progress, leftTimeSec, progressColor, b
|
|
|
4
4
|
leftTimeSec: number;
|
|
5
5
|
progressColor?: string | undefined;
|
|
6
6
|
bufferColor?: string | undefined;
|
|
7
|
-
size:
|
|
7
|
+
size: 'SMALL' | 'MEDIUM' | 'LARGE';
|
|
8
8
|
}) => JSX.Element;
|
|
9
9
|
export declare const ProgressDesign2: ({ progress, leftTimeSec, progressColor, bufferColor, size }: {
|
|
10
10
|
progress: number;
|
|
11
11
|
leftTimeSec: number;
|
|
12
12
|
progressColor?: string | undefined;
|
|
13
13
|
bufferColor?: string | undefined;
|
|
14
|
-
size:
|
|
14
|
+
size: 'SMALL' | 'MEDIUM' | 'LARGE';
|
|
15
15
|
}) => JSX.Element;
|
|
16
16
|
export declare const ProgressDesign3: ({ progress, progressColor, bufferColor, size }: {
|
|
17
17
|
progress: number;
|
|
18
18
|
progressColor?: string | undefined;
|
|
19
19
|
bufferColor?: string | undefined;
|
|
20
|
-
size:
|
|
20
|
+
size: 'SMALL' | 'MEDIUM' | 'LARGE';
|
|
21
21
|
}) => JSX.Element;
|
|
22
22
|
export declare const ProgressDesign4: ({ progress, progressColor, bufferColor, size }: {
|
|
23
23
|
progress: number;
|
|
24
24
|
progressColor?: string | undefined;
|
|
25
25
|
bufferColor?: string | undefined;
|
|
26
|
-
size:
|
|
26
|
+
size: 'SMALL' | 'MEDIUM' | 'LARGE';
|
|
27
27
|
}) => JSX.Element;
|
|
28
28
|
export declare const ProgressDesign5: ({ progress, progressColor, bufferColor, size }: {
|
|
29
29
|
progress: number;
|
|
30
30
|
progressColor?: string | undefined;
|
|
31
31
|
bufferColor?: string | undefined;
|
|
32
|
-
size:
|
|
32
|
+
size: 'SMALL' | 'MEDIUM' | 'LARGE';
|
|
33
33
|
}) => JSX.Element;
|
|
34
34
|
export declare const ProgressDesign6: ({ progress, progressColor, bufferColor, size }: {
|
|
35
35
|
progress: number;
|
|
36
36
|
progressColor?: string | undefined;
|
|
37
37
|
bufferColor?: string | undefined;
|
|
38
|
-
size:
|
|
38
|
+
size: 'SMALL' | 'MEDIUM' | 'LARGE';
|
|
39
39
|
}) => JSX.Element;
|
|
40
40
|
export declare const ProgressDesign7: ({ progress, progressColor, bufferColor, size }: {
|
|
41
41
|
progress: number;
|
|
42
42
|
progressColor?: string | undefined;
|
|
43
43
|
bufferColor?: string | undefined;
|
|
44
|
-
size:
|
|
44
|
+
size: 'SMALL' | 'MEDIUM' | 'LARGE';
|
|
45
45
|
}) => JSX.Element;
|
|
46
46
|
export declare const ProgressDesign8: ({ progress, progressColor, bufferColor, size }: {
|
|
47
47
|
progress: number;
|
|
48
48
|
progressColor?: string | undefined;
|
|
49
49
|
bufferColor?: string | undefined;
|
|
50
|
-
size:
|
|
50
|
+
size: 'SMALL' | 'MEDIUM' | 'LARGE';
|
|
51
51
|
}) => JSX.Element;
|
|
@@ -85,38 +85,63 @@ var ProgressDesign8 = function (_a) {
|
|
|
85
85
|
} }) })) })));
|
|
86
86
|
};
|
|
87
87
|
exports.ProgressDesign8 = ProgressDesign8;
|
|
88
|
-
var
|
|
88
|
+
var SIZE_ENUM_TO_NUM_CIRCLE = {
|
|
89
|
+
SMALL: {
|
|
90
|
+
width: 24,
|
|
91
|
+
height: 25,
|
|
92
|
+
fontSize: 8
|
|
93
|
+
},
|
|
94
|
+
MEDIUM: {
|
|
95
|
+
width: 36,
|
|
96
|
+
height: 36,
|
|
97
|
+
fontSize: 12
|
|
98
|
+
},
|
|
99
|
+
LARGE: {
|
|
100
|
+
width: 48,
|
|
101
|
+
height: 48,
|
|
102
|
+
fontSize: 16
|
|
103
|
+
}
|
|
104
|
+
};
|
|
105
|
+
var SIZE_ENUM_TO_NUM_BAR = {
|
|
106
|
+
SMALL: { width: 60, height: 5 },
|
|
107
|
+
MEDIUM: {
|
|
108
|
+
width: 80,
|
|
109
|
+
height: 6
|
|
110
|
+
},
|
|
111
|
+
LARGE: { width: 120, height: 8 }
|
|
112
|
+
};
|
|
113
|
+
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: 100%;\n position: absolute;\n stroke: ", ";\n stroke-dasharray: 125.6;\n stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n stroke-width: 4px;\n transform: rotate(-90deg);\n width: 100%;\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 position: absolute;\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: 100%;\n position: absolute;\n stroke: ", ";\n stroke-dasharray: 125.6;\n stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n stroke-width: 4px;\n transform: rotate(-90deg);\n width: 100%;\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 position: absolute;\n }\n"])), function (_a) {
|
|
89
114
|
var barColor = _a.barColor;
|
|
90
115
|
return barColor;
|
|
91
|
-
}, function (_a) {
|
|
116
|
+
}, function (props) { return SIZE_ENUM_TO_NUM_CIRCLE[props.size].height; }, function (props) { return SIZE_ENUM_TO_NUM_CIRCLE[props.size].width; }, function (_a) {
|
|
92
117
|
var barColor = _a.barColor;
|
|
93
118
|
return barColor;
|
|
94
|
-
}, function (_a) {
|
|
95
|
-
var size = _a.size;
|
|
96
|
-
return size;
|
|
97
|
-
}, function (_a) {
|
|
98
|
-
var size = _a.size;
|
|
99
|
-
return size;
|
|
100
119
|
}, function (_a) {
|
|
101
120
|
var bgColor = _a.bgColor;
|
|
102
121
|
return bgColor;
|
|
103
122
|
}, function (_a) {
|
|
104
123
|
var size = _a.size;
|
|
105
|
-
return Math.floor(size
|
|
124
|
+
return Math.floor(SIZE_ENUM_TO_NUM_CIRCLE[size].fontSize);
|
|
106
125
|
});
|
|
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:
|
|
126
|
+
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: ", "px;\n justify-content: center;\n position: relative;\n width: ", "px;\n\n svg {\n --progress: 0;\n fill: none;\n height: 100%;\n position: absolute;\n stroke: ", ";\n stroke-dasharray: 125.6;\n stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n stroke-width: 4px;\n transform: rotate(-90deg);\n width: 100%;\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: ", "px;\n justify-content: center;\n position: relative;\n width: ", "px;\n\n svg {\n --progress: 0;\n fill: none;\n height: 100%;\n position: absolute;\n stroke: ", ";\n stroke-dasharray: 125.6;\n stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n stroke-width: 4px;\n transform: rotate(-90deg);\n width: 100%;\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
127
|
var barColor = _a.barColor;
|
|
109
128
|
return barColor;
|
|
110
|
-
}, function (_a) {
|
|
129
|
+
}, function (props) { return SIZE_ENUM_TO_NUM_CIRCLE[props.size].height; }, function (props) { return SIZE_ENUM_TO_NUM_CIRCLE[props.size].width; }, function (_a) {
|
|
111
130
|
var barColor = _a.barColor;
|
|
112
131
|
return barColor;
|
|
113
132
|
}, function (_a) {
|
|
114
133
|
var bgColor = _a.bgColor;
|
|
115
134
|
return bgColor;
|
|
116
135
|
});
|
|
117
|
-
var S_ProgressDesign3 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n color: ", ";\n display: flex;\n font-weight: bold;\n height:
|
|
136
|
+
var S_ProgressDesign3 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __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: 100%;\n position: absolute;\n stroke: ", ";\n stroke-dasharray: 125.6;\n stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n stroke-width: 4px;\n transform: rotate(-90deg);\n width: 100%;\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: ", "px;\n justify-content: center;\n position: relative;\n width: ", "px;\n\n svg {\n --progress: 0;\n fill: none;\n height: 100%;\n position: absolute;\n stroke: ", ";\n stroke-dasharray: 125.6;\n stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n stroke-width: 4px;\n transform: rotate(-90deg);\n width: 100%;\n z-index: 10;\n\n .bg-circle {\n stroke: ", ";\n stroke-dasharray: none;\n stroke-width: 4px;\n }\n }\n"])), function (_a) {
|
|
118
137
|
var barColor = _a.barColor;
|
|
119
138
|
return barColor;
|
|
139
|
+
}, function (_a) {
|
|
140
|
+
var size = _a.size;
|
|
141
|
+
return SIZE_ENUM_TO_NUM_CIRCLE[size].height;
|
|
142
|
+
}, function (_a) {
|
|
143
|
+
var size = _a.size;
|
|
144
|
+
return SIZE_ENUM_TO_NUM_CIRCLE[size].width;
|
|
120
145
|
}, function (_a) {
|
|
121
146
|
var barColor = _a.barColor;
|
|
122
147
|
return barColor;
|
|
@@ -124,46 +149,76 @@ var S_ProgressDesign3 = styled_components_1.default.div(templateObject_3 || (tem
|
|
|
124
149
|
var bgColor = _a.bgColor;
|
|
125
150
|
return bgColor;
|
|
126
151
|
});
|
|
127
|
-
var S_ProgressDesign4 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n color: ", ";\n display: flex;\n font-weight: bold;\n height:
|
|
152
|
+
var S_ProgressDesign4 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __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: 100%;\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: 100%;\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 z-index: 11;\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: 100%;\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: 100%;\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 z-index: 11;\n }\n"])), function (_a) {
|
|
128
153
|
var barColor = _a.barColor;
|
|
129
154
|
return barColor;
|
|
155
|
+
}, function (_a) {
|
|
156
|
+
var size = _a.size;
|
|
157
|
+
return SIZE_ENUM_TO_NUM_CIRCLE[size].height;
|
|
158
|
+
}, function (_a) {
|
|
159
|
+
var size = _a.size;
|
|
160
|
+
return SIZE_ENUM_TO_NUM_CIRCLE[size].width;
|
|
130
161
|
}, function (_a) {
|
|
131
162
|
var barColor = _a.barColor;
|
|
132
163
|
return barColor;
|
|
133
164
|
}, function (_a) {
|
|
134
165
|
var bgColor = _a.bgColor;
|
|
135
166
|
return bgColor;
|
|
167
|
+
}, function (_a) {
|
|
168
|
+
var size = _a.size;
|
|
169
|
+
return SIZE_ENUM_TO_NUM_CIRCLE[size].fontSize;
|
|
136
170
|
});
|
|
137
|
-
var S_ProgressDesign5 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n color: ", ";\n display: flex;\n flex-direction: column;\n font-weight: bold;\n width:
|
|
171
|
+
var S_ProgressDesign5 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n color: ", ";\n display: flex;\n flex-direction: column;\n font-weight: bold;\n width: ", "px;\n\n .progress-bar-container {\n background-color: rgba(255, 255, 255, 0.2);\n border-radius: 3px;\n height: ", "px;\n overflow: hidden;\n position: relative;\n width: 100%;\n }\n\n .progress-bar-fill {\n background-color: ", ";\n border-radius: 3px;\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: ", "px;\n\n .progress-bar-container {\n background-color: rgba(255, 255, 255, 0.2);\n border-radius: 3px;\n height: ", "px;\n overflow: hidden;\n position: relative;\n width: 100%;\n }\n\n .progress-bar-fill {\n background-color: ", ";\n border-radius: 3px;\n height: 100%;\n transition: width 0.1s ease-out;\n width: calc(var(--progress) * 100%);\n }\n"])), function (_a) {
|
|
138
172
|
var barColor = _a.barColor;
|
|
139
173
|
return barColor;
|
|
174
|
+
}, function (_a) {
|
|
175
|
+
var size = _a.size;
|
|
176
|
+
return SIZE_ENUM_TO_NUM_BAR[size].width;
|
|
177
|
+
}, function (_a) {
|
|
178
|
+
var size = _a.size;
|
|
179
|
+
return SIZE_ENUM_TO_NUM_BAR[size].height;
|
|
140
180
|
}, function (_a) {
|
|
141
181
|
var barColor = _a.barColor;
|
|
142
182
|
return barColor;
|
|
143
183
|
});
|
|
144
|
-
var S_ProgressDesign6 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: center;\n color: ", ";\n display: flex;\n flex-direction: column;\n font-weight: bold;\n width:
|
|
184
|
+
var S_ProgressDesign6 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: center;\n color: ", ";\n display: flex;\n flex-direction: column;\n font-weight: bold;\n width: ", "px;\n\n .progress-bar-container {\n background-color: rgba(0, 0, 0, 0.2);\n border-radius: 3px;\n height: ", "px;\n overflow: hidden;\n position: relative;\n width: 100%;\n }\n\n .progress-bar-fill {\n background-color: ", ";\n border-radius: 3px;\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: ", "px;\n\n .progress-bar-container {\n background-color: rgba(0, 0, 0, 0.2);\n border-radius: 3px;\n height: ", "px;\n overflow: hidden;\n position: relative;\n width: 100%;\n }\n\n .progress-bar-fill {\n background-color: ", ";\n border-radius: 3px;\n height: 100%;\n transition: width 0.1s ease-out;\n width: calc(var(--progress) * 100%);\n }\n"])), function (_a) {
|
|
145
185
|
var bgColor = _a.bgColor;
|
|
146
186
|
return bgColor;
|
|
187
|
+
}, function (_a) {
|
|
188
|
+
var size = _a.size;
|
|
189
|
+
return SIZE_ENUM_TO_NUM_BAR[size].width;
|
|
190
|
+
}, function (_a) {
|
|
191
|
+
var size = _a.size;
|
|
192
|
+
return SIZE_ENUM_TO_NUM_BAR[size].height;
|
|
147
193
|
}, function (_a) {
|
|
148
194
|
var bgColor = _a.bgColor;
|
|
149
195
|
return bgColor;
|
|
150
196
|
});
|
|
151
|
-
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:
|
|
197
|
+
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: ", "px;\n\n .progress-bar-container {\n background-color: ", ";\n height: ", "px;\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: ", "px;\n\n .progress-bar-container {\n background-color: ", ";\n height: ", "px;\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) {
|
|
152
198
|
var barColor = _a.barColor;
|
|
153
199
|
return barColor;
|
|
154
|
-
}, function (_a) {
|
|
200
|
+
}, function (props) { return SIZE_ENUM_TO_NUM_BAR[props.size].width; }, function (_a) {
|
|
155
201
|
var bgColor = _a.bgColor;
|
|
156
202
|
return bgColor;
|
|
203
|
+
}, function (_a) {
|
|
204
|
+
var size = _a.size;
|
|
205
|
+
return SIZE_ENUM_TO_NUM_BAR[size].height;
|
|
157
206
|
}, function (_a) {
|
|
158
207
|
var barColor = _a.barColor;
|
|
159
208
|
return barColor;
|
|
160
209
|
});
|
|
161
|
-
var S_ProgressDesign8 = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n align-items: center;\n color: ", ";\n display: flex;\n flex-direction: column;\n font-weight: bold;\n width:
|
|
210
|
+
var S_ProgressDesign8 = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n align-items: center;\n color: ", ";\n display: flex;\n flex-direction: column;\n font-weight: bold;\n width: ", "px;\n\n .progress-bar-container {\n background-color: ", ";\n height: ", "px;\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: ", "px;\n\n .progress-bar-container {\n background-color: ", ";\n height: ", "px;\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) {
|
|
162
211
|
var barColor = _a.barColor;
|
|
163
212
|
return barColor;
|
|
213
|
+
}, function (_a) {
|
|
214
|
+
var size = _a.size;
|
|
215
|
+
return SIZE_ENUM_TO_NUM_BAR[size].width;
|
|
164
216
|
}, function (_a) {
|
|
165
217
|
var bgColor = _a.bgColor;
|
|
166
218
|
return bgColor;
|
|
219
|
+
}, function (_a) {
|
|
220
|
+
var size = _a.size;
|
|
221
|
+
return SIZE_ENUM_TO_NUM_BAR[size].height;
|
|
167
222
|
}, function (_a) {
|
|
168
223
|
var barColor = _a.barColor;
|
|
169
224
|
return barColor;
|