pds-dev-kit-web-test 2.7.207 → 2.7.208
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/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBanner.js +0 -1
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomPagination.js +28 -15
- package/package.json +1 -1
|
@@ -111,7 +111,6 @@ function SlideBanner(props) {
|
|
|
111
111
|
var _k = (0, useFlexGridLayout_1.useFlexGridLayout)({ components: components }), layoutRef = _k.layoutRef, positionRefs = _k.positionRefs,
|
|
112
112
|
// ccbInset,
|
|
113
113
|
componentGroups = _k.componentGroups, getPositionStyle = _k.getPositionStyle, getComponentGroupLayout = _k.getComponentGroupLayout;
|
|
114
|
-
console.log(components);
|
|
115
114
|
var ccbInset = {
|
|
116
115
|
top: '0px',
|
|
117
116
|
right: '0px',
|
|
@@ -45,46 +45,56 @@ var styled_components_1 = __importStar(require("styled-components"));
|
|
|
45
45
|
var CustomPagination = function (_a) {
|
|
46
46
|
var _b = _a.current, current = _b === void 0 ? 1 : _b, _c = _a.total, total = _c === void 0 ? 1 : _c, isNextBtnDisabled = _a.isNextBtnDisabled, isPrevBtnDisabled = _a.isPrevBtnDisabled, styles = _a.styles, onBulletClick = _a.onBulletClick, onNextBtnClick = _a.onNextBtnClick, onPrevBtnClick = _a.onPrevBtnClick;
|
|
47
47
|
var bullets = Array.from({ length: total }, function (_, i) { return i; });
|
|
48
|
+
var size = 24; // Medium
|
|
49
|
+
var iconSize = 24;
|
|
50
|
+
if (styles.size === 'SMALL') {
|
|
51
|
+
size = 16;
|
|
52
|
+
iconSize = 16;
|
|
53
|
+
}
|
|
54
|
+
if (styles.size === 'LARGE') {
|
|
55
|
+
size = 32;
|
|
56
|
+
iconSize = 32;
|
|
57
|
+
}
|
|
48
58
|
return ((0, jsx_runtime_1.jsx)(S_Pagination, __assign({ className: "custom-pagination_".concat(current) }, { children: (function () {
|
|
49
59
|
switch (styles.type) {
|
|
50
60
|
case 'NONE':
|
|
51
61
|
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
|
52
62
|
case 'DESIGN1':
|
|
53
|
-
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px", style: { color: styles.secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ styleTheme: "body2Bold", style: { color: styles.primaryColor || 'inherit' } }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { opacity: 0.6 }, styleTheme: "body2Regular" }, { children: "/ ".concat(total) }))] })));
|
|
63
|
+
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px", style: { color: styles.secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ styleTheme: "body2Bold", size: size, style: { color: styles.primaryColor || 'inherit' } }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, style: { opacity: 0.6 }, styleTheme: "body2Regular" }, { children: "/ ".concat(total) }))] })));
|
|
54
64
|
case 'DESIGN2':
|
|
55
|
-
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px", style: { color: styles.secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ styleTheme: "body2Bold", style: { color: styles.primaryColor || 'inherit' } }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { opacity: 0.6 }, styleTheme: "body2Regular" }, { children: "/ ".concat(total) }))] })));
|
|
65
|
+
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px", style: { color: styles.secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, styleTheme: "body2Bold", style: { color: styles.primaryColor || 'inherit' } }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, style: { opacity: 0.6 }, styleTheme: "body2Regular" }, { children: "/ ".concat(total) }))] })));
|
|
56
66
|
case 'DESIGN3':
|
|
57
|
-
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "8px", style: { color: styles.secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ styleTheme: "body2Bold", style: { color: styles.primaryColor || 'inherit' } }, { children: current })), (0, jsx_runtime_1.jsx)(S_Divider, { type: "VERTICAL", color: styles.secondaryColor }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { opacity: 0.6 }, styleTheme: "body2Regular" }, { children: total }))] })));
|
|
67
|
+
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "8px", style: { color: styles.secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, styleTheme: "body2Bold", style: { color: styles.primaryColor || 'inherit' } }, { children: current })), (0, jsx_runtime_1.jsx)(S_Divider, { type: "VERTICAL", color: styles.secondaryColor }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, style: { opacity: 0.6 }, styleTheme: "body2Regular" }, { children: total }))] })));
|
|
58
68
|
case 'DESIGN4':
|
|
59
|
-
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "8px", style: { color: styles.secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ styleTheme: "body2Bold", style: { color: styles.primaryColor || 'inherit' } }, { children: current })), (0, jsx_runtime_1.jsx)(S_Divider, { type: "VERTICAL", color: styles.secondaryColor }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { opacity: 0.6 }, styleTheme: "body2Regular" }, { children: total }))] })));
|
|
69
|
+
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "8px", style: { color: styles.secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, styleTheme: "body2Bold", style: { color: styles.primaryColor || 'inherit' } }, { children: current })), (0, jsx_runtime_1.jsx)(S_Divider, { type: "VERTICAL", color: styles.secondaryColor }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, style: { opacity: 0.6 }, styleTheme: "body2Regular" }, { children: total }))] })));
|
|
60
70
|
case 'DESIGN5':
|
|
61
|
-
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ style: { color: styles.secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevBtnClick, disabled: isPrevBtnDisabled }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: styles.primaryColor, iconName: "ic_arrow_left", size:
|
|
71
|
+
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ style: { color: styles.secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevBtnClick, disabled: isPrevBtnDisabled }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: styles.primaryColor, iconName: "ic_arrow_left", size: iconSize, colorKey: "ui_cpnt_icon_sys_dark" }) })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, style: {
|
|
62
72
|
marginLeft: '8px',
|
|
63
73
|
marginRight: '4px',
|
|
64
74
|
color: styles.primaryColor || 'inherit'
|
|
65
|
-
}, styleTheme: "body2Bold" }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { marginRight: '8px', marginLeft: '4px', opacity: 0.6 }, styleTheme: "body2Regular" }, { children: "/ ".concat(total) })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNextBtnClick, disabled: isNextBtnDisabled }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: styles.primaryColor, iconName: "ic_arrow_right", size:
|
|
75
|
+
}, styleTheme: "body2Bold" }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, style: { marginRight: '8px', marginLeft: '4px', opacity: 0.6 }, styleTheme: "body2Regular" }, { children: "/ ".concat(total) })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNextBtnClick, disabled: isNextBtnDisabled }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: styles.primaryColor, iconName: "ic_arrow_right", size: iconSize, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
|
|
66
76
|
case 'DESIGN6':
|
|
67
|
-
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ style: { color: styles.secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevBtnClick, disabled: isPrevBtnDisabled }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: styles.primaryColor, iconName: "ic_arrow_left", size:
|
|
77
|
+
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ style: { color: styles.secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevBtnClick, disabled: isPrevBtnDisabled }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: styles.primaryColor, iconName: "ic_arrow_left", size: iconSize }) })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, style: {
|
|
68
78
|
marginLeft: '8px',
|
|
69
79
|
marginRight: '4px',
|
|
70
80
|
color: styles.primaryColor || 'inherit'
|
|
71
|
-
}, styleTheme: "body2Bold" }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { marginRight: '8px', marginLeft: '4px', opacity: 0.6 }, styleTheme: "body2Regular" }, { children: "/ ".concat(total) })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNextBtnClick, disabled: isNextBtnDisabled }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: styles.primaryColor, iconName: "ic_arrow_right", size:
|
|
81
|
+
}, styleTheme: "body2Bold" }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, style: { marginRight: '8px', marginLeft: '4px', opacity: 0.6 }, styleTheme: "body2Regular" }, { children: "/ ".concat(total) })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNextBtnClick, disabled: isNextBtnDisabled }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: styles.primaryColor, iconName: "ic_arrow_right", size: iconSize }) }))] })));
|
|
72
82
|
case 'DESIGN7':
|
|
73
|
-
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "8px", style: { color: styles.secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevBtnClick, disabled: isPrevBtnDisabled }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: styles.primaryColor, iconName: "ic_arrow_left", size:
|
|
83
|
+
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "8px", style: { color: styles.secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevBtnClick, disabled: isPrevBtnDisabled }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: styles.primaryColor, iconName: "ic_arrow_left", size: iconSize, colorKey: "ui_cpnt_icon_sys_dark" }) })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, styleTheme: "body2Bold", style: { color: styles.primaryColor || 'inherit' } }, { children: current })), (0, jsx_runtime_1.jsx)(S_Divider, { type: "VERTICAL" }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, style: { opacity: 0.6 }, styleTheme: "body2Regular" }, { children: total })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNextBtnClick, disabled: isNextBtnDisabled }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: styles.primaryColor, iconName: "ic_arrow_right", size: iconSize, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
|
|
74
84
|
case 'DESIGN8':
|
|
75
|
-
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "8px", style: { color: styles.secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevBtnClick, disabled: isPrevBtnDisabled }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: styles.primaryColor, iconName: "ic_arrow_left", size: 16 }) })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ styleTheme: "body2Bold", style: { color: styles.primaryColor || 'inherit' } }, { children: current })), (0, jsx_runtime_1.jsx)(S_Divider, { type: "VERTICAL", color: styles.secondaryColor }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { opacity: 0.6 }, styleTheme: "body2Regular" }, { children: total })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNextBtnClick, disabled: isNextBtnDisabled }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: styles.primaryColor, iconName: "ic_arrow_right", size:
|
|
85
|
+
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "8px", style: { color: styles.secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevBtnClick, disabled: isPrevBtnDisabled }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: styles.primaryColor, iconName: "ic_arrow_left", size: size === 16 ? 16 : 32 }) })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, styleTheme: "body2Bold", style: { color: styles.primaryColor || 'inherit' } }, { children: current })), (0, jsx_runtime_1.jsx)(S_Divider, { type: "VERTICAL", color: styles.secondaryColor }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, style: { opacity: 0.6 }, styleTheme: "body2Regular" }, { children: total })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNextBtnClick, disabled: isNextBtnDisabled }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: styles.primaryColor, iconName: "ic_arrow_right", size: iconSize }) }))] })));
|
|
76
86
|
case 'DESIGN9':
|
|
77
|
-
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ direction: "column", gap: "8px", style: { color: styles.secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: {
|
|
87
|
+
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ direction: "column", gap: "8px", style: { color: styles.secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, style: {
|
|
78
88
|
paddingLeft: '8px',
|
|
79
89
|
paddingRight: '8px',
|
|
80
90
|
color: styles.primaryColor || 'inherit'
|
|
81
|
-
}, styleTheme: "body2Bold" }, { children: current })), (0, jsx_runtime_1.jsx)(S_Divider, { type: "HORIZONTAL" }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { opacity: 0.6 }, styleTheme: "body2Regular" }, { children: total }))] })));
|
|
91
|
+
}, styleTheme: "body2Bold" }, { children: current })), (0, jsx_runtime_1.jsx)(S_Divider, { type: "HORIZONTAL" }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, style: { opacity: 0.6 }, styleTheme: "body2Regular" }, { children: total }))] })));
|
|
82
92
|
case 'DESIGN10':
|
|
83
|
-
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ direction: "column", gap: "8px", style: { color: styles.secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: {
|
|
93
|
+
return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ direction: "column", gap: "8px", style: { color: styles.secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, style: {
|
|
84
94
|
paddingLeft: '8px',
|
|
85
95
|
paddingRight: '8px',
|
|
86
96
|
color: styles.primaryColor || 'inherit'
|
|
87
|
-
}, styleTheme: "body2Bold" }, { children: current })), (0, jsx_runtime_1.jsx)(S_Divider, { type: "HORIZONTAL", color: styles.secondaryColor }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { opacity: 0.6 }, styleTheme: "body2Regular" }, { children: total }))] })));
|
|
97
|
+
}, styleTheme: "body2Bold" }, { children: current })), (0, jsx_runtime_1.jsx)(S_Divider, { type: "HORIZONTAL", color: styles.secondaryColor }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, style: { opacity: 0.6 }, styleTheme: "body2Regular" }, { children: total }))] })));
|
|
88
98
|
case 'DESIGN11':
|
|
89
99
|
return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ gap: "8px", style: { color: styles.secondaryColor || 'inherit' } }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Dot, { color: index + 1 === current ? styles.primaryColor : styles.secondaryColor, isActive: index + 1 === current, onClick: function () { return onBulletClick(index); } }, index)); }) })));
|
|
90
100
|
case 'DESIGN12':
|
|
@@ -143,13 +153,16 @@ var body2Regular = (0, styled_components_1.css)(templateObject_4 || (templateObj
|
|
|
143
153
|
// const sysTextBlack = css`
|
|
144
154
|
// color: ${({ theme }) => theme.ui_cpnt_textlabel_sys_black};
|
|
145
155
|
// `;
|
|
146
|
-
var S_TextLabel = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (_a) {
|
|
156
|
+
var S_TextLabel = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", ";\n font-size: ", "px;\n"], ["\n ", ";\n font-size: ", "px;\n"])), function (_a) {
|
|
147
157
|
var styleTheme = _a.styleTheme;
|
|
148
158
|
return styleTheme &&
|
|
149
159
|
{
|
|
150
160
|
body2Bold: body2Bold,
|
|
151
161
|
body2Regular: body2Regular
|
|
152
162
|
}[styleTheme];
|
|
163
|
+
}, function (_a) {
|
|
164
|
+
var size = _a.size;
|
|
165
|
+
return size;
|
|
153
166
|
});
|
|
154
167
|
var verticalDivider = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n height: 16px;\n width: 1px;\n"], ["\n height: 16px;\n width: 1px;\n"])));
|
|
155
168
|
var horizontalDivider = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n height: 1px;\n width: 100%;\n"], ["\n height: 1px;\n width: 100%;\n"])));
|