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.
@@ -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: 'DESIGN1',
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: '#455EEF00',
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: '#E7E7E700',
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: 'MEDIUM',
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 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) {
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 (props) { return props.size; }, function (props) { return props.size; }, function (_a) {
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 / 4); });
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: 80px;\n\n .progress-bar-container {\n background-color: ", ";\n height: 6px;\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: 80px;\n\n .progress-bar-container {\n background-color: ", ";\n height: 6px;\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) {
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 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) {
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 / 4);
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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web-test",
3
- "version": "2.7.212",
3
+ "version": "2.7.214",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",