pds-dev-kit-web-test 2.5.418 → 2.5.419

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/dist/src/sub/DynamicLayout/components/pdsOriginal/desktop/IconButton/IconButton.d.ts +3 -1
  2. package/dist/src/sub/DynamicLayout/components/pdsOriginal/desktop/IconButton/IconButton.js +5 -3
  3. package/dist/src/sub/DynamicLayout/components/pdsOriginal/hybrid/Icon/Icon.d.ts +2 -1
  4. package/dist/src/sub/DynamicLayout/components/pdsOriginal/hybrid/Icon/Icon.js +9 -2
  5. package/dist/src/sub/DynamicLayout/mock_contentsCarousel.js +24 -0
  6. package/dist/src/sub/DynamicLayout/mock_contentsList.js +9 -1
  7. package/dist/src/sub/DynamicLayout/mock_slideBanner.d.ts +32 -0
  8. package/dist/src/sub/DynamicLayout/mock_slideBanner.js +35 -3
  9. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/ContentsCarousel.js +14 -2
  10. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/CustomNavigation.d.ts +5 -1
  11. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/CustomNavigation.js +2 -2
  12. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/CustomPagination.d.ts +3 -1
  13. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/CustomPagination.js +12 -20
  14. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/CustomProgressbar.d.ts +3 -1
  15. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/CustomProgressbar.js +10 -10
  16. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/progressConfigs.d.ts +24 -8
  17. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/progressConfigs.js +98 -32
  18. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/contentsCarouselUtils.d.ts +2 -2
  19. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/contentsCarouselUtils.js +78 -0
  20. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/types.d.ts +30 -0
  21. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/ContentsList.js +1 -1
  22. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/components/CustomPagination.d.ts +3 -1
  23. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/components/CustomPagination.js +16 -16
  24. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/components/paginationConfigs.d.ts +15 -13
  25. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/components/paginationConfigs.js +34 -27
  26. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/contentsListUtils.d.ts +1 -1
  27. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/contentsListUtils.js +26 -0
  28. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/types.d.ts +10 -0
  29. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBanner.js +19 -3
  30. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomNavigation.d.ts +5 -1
  31. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomNavigation.js +2 -2
  32. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomPagination.d.ts +3 -1
  33. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomPagination.js +12 -20
  34. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomProgressbar.d.ts +3 -1
  35. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomProgressbar.js +10 -10
  36. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/progressConfigs.d.ts +24 -8
  37. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/progressConfigs.js +98 -32
  38. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/slideBannerUtils.d.ts +3 -3
  39. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/slideBannerUtils.js +104 -0
  40. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/types.d.ts +40 -0
  41. package/package.json +1 -1
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/components/paginationConfigs.js CHANGED
@@ -23,73 +23,77 @@ var jsx_runtime_1 = require("react/jsx-runtime");
23
23
  var components_1 = require("../../../../../../../../DynamicLayout/components");
24
24
  var styled_components_1 = __importDefault(require("styled-components"));
25
25
  function Design1(_a) {
26
- var total = _a.total, current = _a.current, pages = _a.pages, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
27
- return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), pages === null || pages === void 0 ? void 0 : pages.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "rectangle", backgroundColor: "transparent", activeBackgroundColor: "#333333", textColor: "#333333", activeTextColor: "#FFFFFF", isActive: pageNumber === current, onClick: function () { return onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber)); }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
26
+ var total = _a.total, current = _a.current, pages = _a.pages, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
27
+ return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), pages === null || pages === void 0 ? void 0 : pages.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "rectangle", backgroundColor: "transparent", activeBackgroundColor: primaryColor, textColor: "#333333", activeTextColor: secondaryColor, isActive: pageNumber === current, onClick: function () { return onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber)); }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
28
28
  }
29
29
  exports.Design1 = Design1;
30
30
  function Design2(_a) {
31
- var total = _a.total, current = _a.current, pages = _a.pages, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
32
- return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), pages === null || pages === void 0 ? void 0 : pages.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "round", radius: 8, backgroundColor: "transparent", activeBackgroundColor: "#333333", textColor: "#333333", activeTextColor: "#FFFFFF", isActive: pageNumber === current, onClick: function () { return onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber)); }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
31
+ var total = _a.total, current = _a.current, pages = _a.pages, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
32
+ return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), pages === null || pages === void 0 ? void 0 : pages.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "round", radius: 8, backgroundColor: "transparent", activeBackgroundColor: primaryColor, textColor: "#333333", activeTextColor: secondaryColor, isActive: pageNumber === current, onClick: function () { return onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber)); }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
33
33
  }
34
34
  exports.Design2 = Design2;
35
35
  function Design3(_a) {
36
- var total = _a.total, current = _a.current, pages = _a.pages, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
37
- return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), pages === null || pages === void 0 ? void 0 : pages.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "circle", backgroundColor: "transparent", activeBackgroundColor: "#333333", textColor: "#333333", activeTextColor: "#FFFFFF", isActive: pageNumber === current, onClick: function () { return onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber)); }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
36
+ var total = _a.total, current = _a.current, pages = _a.pages, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
37
+ return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), pages === null || pages === void 0 ? void 0 : pages.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "circle", backgroundColor: "transparent", activeBackgroundColor: primaryColor, textColor: "#333333", activeTextColor: secondaryColor, isActive: pageNumber === current, onClick: function () { return onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber)); }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
38
38
  }
39
39
  exports.Design3 = Design3;
40
40
  function Design4(_a) {
41
- var total = _a.total, current = _a.current, pages = _a.pages, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
42
- return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), pages === null || pages === void 0 ? void 0 : pages.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "rectangle", backgroundColor: "transparent", activeBackgroundColor: "#e9eaeb", textColor: "#333333", activeTextColor: "#333333", isActive: pageNumber === current, onClick: function () { return onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber)); }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
41
+ var total = _a.total, current = _a.current, pages = _a.pages, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
42
+ return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), pages === null || pages === void 0 ? void 0 : pages.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "rectangle", backgroundColor: "transparent", activeBackgroundColor: secondaryColor, textColor: "#333333", activeTextColor: primaryColor, isActive: pageNumber === current, onClick: function () { return onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber)); }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
43
43
  }
44
44
  exports.Design4 = Design4;
45
45
  function Design5(_a) {
46
- var total = _a.total, current = _a.current, pages = _a.pages, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
47
- return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), pages === null || pages === void 0 ? void 0 : pages.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "round", radius: 8, backgroundColor: "transparent", activeBackgroundColor: "#e9eaeb", textColor: "#333333", activeTextColor: "#333333", isActive: pageNumber === current, onClick: function () { return onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber)); }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
46
+ var total = _a.total, current = _a.current, pages = _a.pages, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
47
+ return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), pages === null || pages === void 0 ? void 0 : pages.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "round", radius: 8, backgroundColor: "transparent", activeBackgroundColor: secondaryColor, textColor: "#333333", activeTextColor: primaryColor, isActive: pageNumber === current, onClick: function () { return onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber)); }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
48
48
  }
49
49
  exports.Design5 = Design5;
50
50
  function Design6(_a) {
51
- var total = _a.total, current = _a.current, pages = _a.pages, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
52
- return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), pages === null || pages === void 0 ? void 0 : pages.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "circle", backgroundColor: "transparent", activeBackgroundColor: "#e9eaeb", textColor: "#333333", activeTextColor: "#333333", isActive: pageNumber === current, onClick: function () { return onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber)); }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
51
+ var total = _a.total, current = _a.current, pages = _a.pages, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
52
+ return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), pages === null || pages === void 0 ? void 0 : pages.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "circle", backgroundColor: "transparent", activeBackgroundColor: secondaryColor, textColor: "#333333", activeTextColor: primaryColor, isActive: pageNumber === current, onClick: function () { return onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber)); }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
53
53
  }
54
54
  exports.Design6 = Design6;
55
55
  function Design7(_a) {
56
- var total = _a.total, current = _a.current, pages = _a.pages, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
57
- return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [pages === null || pages === void 0 ? void 0 : pages.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "rectangle", backgroundColor: "transparent", activeBackgroundColor: "#e9eaeb", textColor: "#333333", activeTextColor: "#333333", isActive: pageNumber === current, onClick: function () { return onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber)); }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
56
+ var total = _a.total, current = _a.current, pages = _a.pages, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
57
+ return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [pages === null || pages === void 0 ? void 0 : pages.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "rectangle", backgroundColor: "transparent", activeBackgroundColor: primaryColor, textColor: "#333333", activeTextColor: secondaryColor, isActive: pageNumber === current, onClick: function () { return onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber)); }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
58
58
  }
59
59
  exports.Design7 = Design7;
60
60
  function Design8(_a) {
61
- var total = _a.total, current = _a.current, pages = _a.pages, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
62
- return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), pages === null || pages === void 0 ? void 0 : pages.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "round", radius: 8, backgroundColor: "#e9eaeb", activeBackgroundColor: "#333333", textColor: "#333333", activeTextColor: "#FFFFFF", isActive: pageNumber === current, onClick: function () { return onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber)); }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
61
+ var total = _a.total, current = _a.current, pages = _a.pages, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
62
+ return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), pages === null || pages === void 0 ? void 0 : pages.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "round", radius: 8, backgroundColor: primaryColor, activeBackgroundColor: secondaryColor, textColor: secondaryColor, activeTextColor: primaryColor, isActive: pageNumber === current, onClick: function () { return onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber)); }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
63
63
  }
64
64
  exports.Design8 = Design8;
65
65
  function Design9(_a) {
66
- var total = _a.total, current = _a.current, pages = _a.pages, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
67
- return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), pages === null || pages === void 0 ? void 0 : pages.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "round", radius: 8, backgroundColor: "transparent", activeBackgroundColor: "transparent", textColor: "#e9eaeb", activeTextColor: "#333333", isActive: pageNumber === current, onClick: function () { return onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber)); }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
66
+ var total = _a.total, current = _a.current, pages = _a.pages, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
67
+ return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), pages === null || pages === void 0 ? void 0 : pages.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "round", radius: 8, backgroundColor: "transparent", activeBackgroundColor: "transparent", textColor: secondaryColor, activeTextColor: primaryColor, isActive: pageNumber === current, onClick: function () { return onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber)); }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
68
68
  }
69
69
  exports.Design9 = Design9;
70
70
  function Design10(_a) {
71
- var total = _a.total, current = _a.current, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
71
+ var total = _a.total, current = _a.current, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
72
72
  var paginationPages = generatePaginationPages(total, current);
73
73
  return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), paginationPages === null || paginationPages === void 0 ? void 0 : paginationPages.map(function (pageNumber) {
74
74
  if (typeof pageNumber === 'string') {
75
- return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "rectangle", backgroundColor: "transparent", activeBackgroundColor: "#333333", textColor: "#333333", activeTextColor: "#FFFFFF", isActive: false, disabled: true }, { children: pageNumber }), pageNumber));
75
+ return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "rectangle", backgroundColor: "transparent", activeBackgroundColor: primaryColor, textColor: primaryColor, activeTextColor: secondaryColor, isActive: false, disabled: true }, { children: pageNumber }), pageNumber));
76
76
  }
77
- return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "rectangle", backgroundColor: "transparent", activeBackgroundColor: "#333333", textColor: "#333333", activeTextColor: "#FFFFFF", isActive: pageNumber === current, onClick: function () { return onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber));
77
+ return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "rectangle", backgroundColor: "transparent", activeBackgroundColor: primaryColor, textColor: primaryColor, activeTextColor: secondaryColor, isActive: pageNumber === current, onClick: function () { return onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber));
78
78
  }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
79
79
  }
80
80
  exports.Design10 = Design10;
81
81
  function Design11(_a) {
82
- var total = _a.total, current = _a.current, onNext = _a.onNext, onPrevious = _a.onPrevious;
83
- return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), (0, jsx_runtime_1.jsxs)(S_Text, { children: [current, " / ", total] }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
82
+ var total = _a.total, current = _a.current, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, onNext = _a.onNext, onPrevious = _a.onPrevious;
83
+ return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), (0, jsx_runtime_1.jsx)(S_Text, __assign({ "$color": secondaryColor }, { children: current })), (0, jsx_runtime_1.jsx)(S_Text, __assign({ "$color": primaryColor }, { children: "/" })), (0, jsx_runtime_1.jsx)(S_Text, __assign({ "$color": primaryColor }, { children: total })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
84
84
  }
85
85
  exports.Design11 = Design11;
86
86
  function Design12(_a) {
87
- var total = _a.total, current = _a.current, onNext = _a.onNext, onPrevious = _a.onPrevious;
88
- return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsxs)(S_Text, { children: [current, " / ", total] }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
87
+ var total = _a.total, current = _a.current, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, onNext = _a.onNext, onPrevious = _a.onPrevious;
88
+ return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Text, __assign({ "$color": secondaryColor }, { children: current })), (0, jsx_runtime_1.jsx)(S_Text, __assign({ "$color": primaryColor }, { children: "/" })), (0, jsx_runtime_1.jsx)(S_Text, __assign({ "$color": primaryColor }, { children: total })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
89
89
  }
90
90
  exports.Design12 = Design12;
91
91
  function Design13(_a) {
92
- var total = _a.total, current = _a.current, onNext = _a.onNext, onPrevious = _a.onPrevious;
92
+ var total = _a.total, current = _a.current,
93
+ // eslint-disable-next-line
94
+ primaryColor = _a.primaryColor,
95
+ // eslint-disable-next-line
96
+ secondaryColor = _a.secondaryColor, onNext = _a.onNext, onPrevious = _a.onPrevious;
93
97
  return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
94
98
  }
95
99
  exports.Design13 = Design13;
@@ -131,7 +135,10 @@ var S_Page = styled_components_1.default.button(templateObject_3 || (templateObj
131
135
  var theme = _a.theme, isActive = _a.isActive;
132
136
  return isActive ? theme.fontWeight.bold : theme.fontWeight.normal;
133
137
  });
134
- var S_Text = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: #e9eaeb;\n font-size: ", ";\n"], ["\n color: #e9eaeb;\n font-size: ", ";\n"])), function (_a) {
138
+ var S_Text = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n"], ["\n color: ", ";\n font-size: ", ";\n"])), function (_a) {
139
+ var $color = _a.$color;
140
+ return $color;
141
+ }, function (_a) {
135
142
  var theme = _a.theme;
136
143
  return theme.desktopFontSize.caption1;
137
144
  });
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/contentsListUtils.d.ts CHANGED
@@ -26,5 +26,5 @@ export declare function parsePaginationStyleProp({ props, device }: PaginationPr
26
26
  normalStyle: CustomPaginationProps;
27
27
  hoverStyle: CustomPaginationProps;
28
28
  };
29
- export declare function getCustomPaginationPropKey(key: ContentsListPropsKeys): "" | "size" | "type" | "offset";
29
+ export declare function getCustomPaginationPropKey(key: ContentsListPropsKeys): "" | "size" | "type" | "primaryColor" | "secondaryColor" | "offset";
30
30
  export {};
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/contentsListUtils.js CHANGED
@@ -146,6 +146,22 @@ function parsePaginationStyleProp(_a) {
146
146
  hoverStyle: __assign(__assign({}, acc.hoverStyle), { size: getCustomPaginationSize(hoverValue !== null && hoverValue !== void 0 ? hoverValue : value) })
147
147
  };
148
148
  }
149
+ if (customPaginationPropertyKey === 'primaryColor') {
150
+ var value = props[keyWithDevice];
151
+ var hoverValue = props[keyWithHover];
152
+ return {
153
+ normalStyle: __assign(__assign({}, acc.normalStyle), { primaryColor: value }),
154
+ hoverStyle: __assign(__assign({}, acc.hoverStyle), { primaryColor: hoverValue !== null && hoverValue !== void 0 ? hoverValue : value })
155
+ };
156
+ }
157
+ if (customPaginationPropertyKey === 'secondaryColor') {
158
+ var value = props[keyWithDevice];
159
+ var hoverValue = props[keyWithHover];
160
+ return {
161
+ normalStyle: __assign(__assign({}, acc.normalStyle), { secondaryColor: value }),
162
+ hoverStyle: __assign(__assign({}, acc.hoverStyle), { secondaryColor: hoverValue !== null && hoverValue !== void 0 ? hoverValue : value })
163
+ };
164
+ }
149
165
  return {
150
166
  normalStyle: __assign({}, acc.normalStyle),
151
167
  hoverStyle: __assign({}, acc.hoverStyle)
@@ -173,6 +189,16 @@ function getCustomPaginationPropKey(key) {
173
189
  case "CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE:MOBILE":
174
190
  case "CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE:MOBILE:HOVER":
175
191
  return 'size';
192
+ case "CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR":
193
+ case "CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR:HOVER":
194
+ case "CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR:MOBILE":
195
+ case "CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR:MOBILE:HOVER":
196
+ return 'primaryColor';
197
+ case "CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR":
198
+ case "CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR:HOVER":
199
+ case "CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR:MOBILE":
200
+ case "CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR:MOBILE:HOVER":
201
+ return 'secondaryColor';
176
202
  default:
177
203
  return '';
178
204
  }
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/types.d.ts CHANGED
@@ -8,6 +8,8 @@ export type CB_STYLE_PROP_CONTENTSLIST_SPEC_INFINITESCROLL_TYPE = boolean | null
8
8
  export type CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE_TYPE = 'NONE' | 'DESIGN1' | 'DESIGN2' | 'DESIGN3' | 'DESIGN4' | 'DESIGN5' | 'DESIGN6' | 'DESIGN7' | 'DESIGN8' | 'DESIGN9' | 'DESIGN10' | 'DESIGN11' | 'DESIGN12' | 'DESIGN13' | 'DESIGN14' | 'DESIGN15' | 'DESIGN16' | 'DESIGN17' | null;
9
9
  export type CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONLOCATION_TYPE = 'OUTSET1' | 'OUTSET2' | 'OUTSET3' | 'OUTSET4' | 'OUTSET5' | 'OUTSET6' | 'OUTSET7' | 'OUTSET8' | 'OUTSET9' | 'OUTSET10' | 'OUTSET11' | 'OUTSET12' | 'INSET1' | 'INSET2' | 'INSET3' | 'INSET4' | 'INSET5' | 'INSET6' | 'INSET7' | 'INSET8' | null;
10
10
  export type CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE_TYPE = 'SMALL' | 'MEDIUM' | 'LARGE' | null;
11
+ export type CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR = string;
12
+ export type CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR = string;
11
13
  export type CB_STYLE_PROP_CONTENTSLIST_SPECS_BASE = {
12
14
  CB_STYLE_PROP_CONTENTSLIST_SPEC_STYLE: CB_STYLE_PROP_CONTENTSLIST_SPEC_STYLE_TYPE;
13
15
  CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMSPACING: CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMSPACING_TYPE;
@@ -17,6 +19,8 @@ export type CB_STYLE_PROP_CONTENTSLIST_SPECS_BASE = {
17
19
  CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE: CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE_TYPE;
18
20
  CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONLOCATION: CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONLOCATION_TYPE;
19
21
  CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE: CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE_TYPE;
22
+ CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR: CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR;
23
+ CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR: CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR;
20
24
  };
21
25
  export type CB_STYLE_PROP_CONTENTSLIST_SPECS = CB_STYLE_PROP_CONTENTSLIST_SPECS_BASE & {
22
26
  'CB_STYLE_PROP_CONTENTSLIST_SPEC_STYLE:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_STYLE_TYPE;
@@ -43,4 +47,10 @@ export type CB_STYLE_PROP_CONTENTSLIST_SPECS = CB_STYLE_PROP_CONTENTSLIST_SPECS_
43
47
  'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE_TYPE;
44
48
  'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE:MOBILE': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE_TYPE;
45
49
  'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE:MOBILE:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE_TYPE;
50
+ 'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR;
51
+ 'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR:MOBILE': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR;
52
+ 'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR:MOBILE:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR;
53
+ 'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR;
54
+ 'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR:MOBILE': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR;
55
+ 'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR:MOBILE:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR;
46
56
  };
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBanner.js CHANGED
@@ -170,19 +170,35 @@ function SlideBanner(props) {
170
170
  limit: CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS,
171
171
  queryData: queryData,
172
172
  compositions: compositions
173
- }) })) })), (0, jsx_runtime_1.jsx)(CustomPagination_1.CustomPagination, { type: isHovered ? customPaginationHoverStyle.type : customPaginationNormalStyle.type, offset: isHovered ? customPaginationHoverStyle.offset : customPaginationNormalStyle.offset, current: currentSlide, prevBtnDisabled: loop ? false : isBeginning, nextBtnDisabled: loop ? false : isEnd, total: (_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slides.length, size: isHovered ? customPaginationHoverStyle.size : customPaginationNormalStyle.size, onBulletClick: handleBulletClick, onPrevBtnClick: handlePrevBtnClick, onNextBtnClick: handleNextBtnClick }), (0, jsx_runtime_1.jsx)(CustomNavigation_1.CustomNavigation, { prevBtnDisabled: isBeginning, prevBtnType: isHovered
173
+ }) })) })), (0, jsx_runtime_1.jsx)(CustomPagination_1.CustomPagination, { type: isHovered ? customPaginationHoverStyle.type : customPaginationNormalStyle.type, offset: isHovered ? customPaginationHoverStyle.offset : customPaginationNormalStyle.offset, primaryColor: isHovered
174
+ ? customPaginationHoverStyle.primaryColor
175
+ : customPaginationNormalStyle.primaryColor, secondaryColor: isHovered
176
+ ? customPaginationHoverStyle.secondaryColor
177
+ : customPaginationNormalStyle.secondaryColor, current: currentSlide, prevBtnDisabled: loop ? false : isBeginning, nextBtnDisabled: loop ? false : isEnd, total: (_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slides.length, size: isHovered ? customPaginationHoverStyle.size : customPaginationNormalStyle.size, onBulletClick: handleBulletClick, onPrevBtnClick: handlePrevBtnClick, onNextBtnClick: handleNextBtnClick }), (0, jsx_runtime_1.jsx)(CustomNavigation_1.CustomNavigation, { prevBtnDisabled: isBeginning, prevBtnType: isHovered
174
178
  ? customNavigationHoverStyle.prevBtnType
175
179
  : customNavigationNormalStyle.prevBtnType, prevBtnOffset: isHovered
176
180
  ? customNavigationHoverStyle.prevBtnOffset
177
181
  : customNavigationNormalStyle.prevBtnOffset, prevBtnSize: isHovered
178
182
  ? customNavigationHoverStyle.prevBtnSize
179
- : customNavigationNormalStyle.prevBtnSize, onPrevBtnClick: handlePrevBtnClick, nextBtnDisabled: isEnd, nextBtnType: isHovered
183
+ : customNavigationNormalStyle.prevBtnSize, prevBtnPrimaryColor: isHovered
184
+ ? customNavigationHoverStyle.prevBtnPrimaryColor
185
+ : customNavigationNormalStyle.prevBtnPrimaryColor, prevBtnSecondaryColor: isHovered
186
+ ? customNavigationHoverStyle.prevBtnSecondaryColor
187
+ : customNavigationNormalStyle.prevBtnSecondaryColor, onPrevBtnClick: handlePrevBtnClick, nextBtnDisabled: isEnd, nextBtnType: isHovered
180
188
  ? customNavigationHoverStyle.nextBtnType
181
189
  : customNavigationNormalStyle.nextBtnType, nextBtnOffset: isHovered
182
190
  ? customNavigationHoverStyle.nextBtnOffset
183
191
  : customNavigationNormalStyle.nextBtnOffset, nextBtnSize: isHovered
184
192
  ? customNavigationHoverStyle.nextBtnSize
185
- : customNavigationNormalStyle.nextBtnSize, onNextBtnClick: handleNextBtnClick }), (0, jsx_runtime_1.jsx)(CustomProgressbar_1.CustomProgressbar, { progressRef: progressRef, leftTimeMsRef: leftTimeMsRef, type: isHovered ? customProgressbarHoverStyle.type : customProgressbarNormalStyle.type, size: isHovered ? customProgressbarHoverStyle.size : customProgressbarNormalStyle.size, offset: isHovered ? customProgressbarHoverStyle.offset : customProgressbarNormalStyle.offset })] })) })) })));
193
+ : customNavigationNormalStyle.nextBtnSize, nextBtnPrimaryColor: isHovered
194
+ ? customNavigationHoverStyle.nextBtnPrimaryColor
195
+ : customNavigationNormalStyle.nextBtnPrimaryColor, nextBtnSecondaryColor: isHovered
196
+ ? customNavigationHoverStyle.nextBtnSecondaryColor
197
+ : customNavigationNormalStyle.nextBtnSecondaryColor, onNextBtnClick: handleNextBtnClick }), (0, jsx_runtime_1.jsx)(CustomProgressbar_1.CustomProgressbar, { progressRef: progressRef, leftTimeMsRef: leftTimeMsRef, type: isHovered ? customProgressbarHoverStyle.type : customProgressbarNormalStyle.type, size: isHovered ? customProgressbarHoverStyle.size : customProgressbarNormalStyle.size, offset: isHovered ? customProgressbarHoverStyle.offset : customProgressbarNormalStyle.offset, primaryColor: isHovered
198
+ ? customProgressbarHoverStyle.primaryColor
199
+ : customProgressbarNormalStyle.primaryColor, secondaryColor: isHovered
200
+ ? customProgressbarHoverStyle.secondaryColor
201
+ : customProgressbarNormalStyle.secondaryColor })] })) })) })));
186
202
  }
187
203
  var S_SwiperWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n ", "\n"], ["\n height: 100%;\n width: 100%;\n ", "\n"])), function (_a) {
188
204
  var customStyle = _a.customStyle;
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomNavigation.d.ts CHANGED
@@ -14,14 +14,18 @@ export interface CustomNavigationProps {
14
14
  prevBtnType?: CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSTYLE_TYPE;
15
15
  prevBtnOffset?: NavigationOffset;
16
16
  prevBtnSize?: number;
17
+ prevBtnPrimaryColor?: string;
18
+ prevBtnSecondaryColor?: string;
17
19
  nextBtnDisabled?: boolean;
18
20
  nextBtnType?: CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSTYLE_TYPE;
19
21
  nextBtnOffset?: NavigationOffset;
20
22
  nextBtnSize?: number;
23
+ nextBtnPrimaryColor?: string;
24
+ nextBtnSecondaryColor?: string;
21
25
  onPrevBtnClick?: () => void;
22
26
  onNextBtnClick?: () => void;
23
27
  }
24
- export declare const CustomNavigation: ({ prevBtnDisabled, prevBtnType, prevBtnOffset, prevBtnSize, nextBtnDisabled, nextBtnType, nextBtnOffset, nextBtnSize, onPrevBtnClick, onNextBtnClick }: CustomNavigationProps) => JSX.Element;
28
+ export declare const CustomNavigation: ({ prevBtnDisabled, prevBtnType, prevBtnOffset, prevBtnSize, prevBtnPrimaryColor, prevBtnSecondaryColor, nextBtnDisabled, nextBtnType, nextBtnOffset, nextBtnSize, nextBtnPrimaryColor, nextBtnSecondaryColor, onPrevBtnClick, onNextBtnClick }: CustomNavigationProps) => JSX.Element;
25
29
  export interface FlexBoxProps {
26
30
  direction?: 'row' | 'column';
27
31
  justifyContent?: string;
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomNavigation.js CHANGED
@@ -44,7 +44,7 @@ var IconButton_1 = require("../../../../../../../../DynamicLayout/components/pds
44
44
  var styled_components_1 = __importStar(require("styled-components"));
45
45
  var navigationConfigs_1 = require("./navigationConfigs");
46
46
  var CustomNavigation = function (_a) {
47
- var _b = _a.prevBtnDisabled, prevBtnDisabled = _b === void 0 ? false : _b, _c = _a.prevBtnType, prevBtnType = _c === void 0 ? 'NONE' : _c, _d = _a.prevBtnOffset, prevBtnOffset = _d === void 0 ? { top: '0' } : _d, _e = _a.prevBtnSize, prevBtnSize = _e === void 0 ? 1 : _e, _f = _a.nextBtnDisabled, nextBtnDisabled = _f === void 0 ? false : _f, _g = _a.nextBtnType, nextBtnType = _g === void 0 ? 'NONE' : _g, _h = _a.nextBtnOffset, nextBtnOffset = _h === void 0 ? { top: '0' } : _h, _j = _a.nextBtnSize, nextBtnSize = _j === void 0 ? 1 : _j, onPrevBtnClick = _a.onPrevBtnClick, onNextBtnClick = _a.onNextBtnClick;
47
+ var _b = _a.prevBtnDisabled, prevBtnDisabled = _b === void 0 ? false : _b, _c = _a.prevBtnType, prevBtnType = _c === void 0 ? 'NONE' : _c, _d = _a.prevBtnOffset, prevBtnOffset = _d === void 0 ? { top: '0' } : _d, _e = _a.prevBtnSize, prevBtnSize = _e === void 0 ? 1 : _e, prevBtnPrimaryColor = _a.prevBtnPrimaryColor, prevBtnSecondaryColor = _a.prevBtnSecondaryColor, _f = _a.nextBtnDisabled, nextBtnDisabled = _f === void 0 ? false : _f, _g = _a.nextBtnType, nextBtnType = _g === void 0 ? 'NONE' : _g, _h = _a.nextBtnOffset, nextBtnOffset = _h === void 0 ? { top: '0' } : _h, _j = _a.nextBtnSize, nextBtnSize = _j === void 0 ? 1 : _j, nextBtnPrimaryColor = _a.nextBtnPrimaryColor, nextBtnSecondaryColor = _a.nextBtnSecondaryColor, onPrevBtnClick = _a.onPrevBtnClick, onNextBtnClick = _a.onNextBtnClick;
48
48
  var getIsSameOffset = function (prevBtnOffset, nextBtnOffset) {
49
49
  return (prevBtnOffset.top === nextBtnOffset.top &&
50
50
  prevBtnOffset.bottom === nextBtnOffset.bottom &&
@@ -57,7 +57,7 @@ var CustomNavigation = function (_a) {
57
57
  var isSameOffset = getIsSameOffset(prevBtnOffset, nextBtnOffset);
58
58
  var prevButton = prevBtnType === 'NONE' ? undefined : navigationConfigs_1.prevButtonMappedIcons[prevBtnType];
59
59
  var nextButton = nextBtnType === 'NONE' ? undefined : navigationConfigs_1.nextButtonMappedIcons[nextBtnType];
60
- return ((0, jsx_runtime_1.jsxs)(S_Navigation, __assign({ "$offset": isSameOffset ? prevBtnOffset : undefined, "$size": isSameOffset ? prevBtnSize : 1 }, { children: [prevButton && ((0, jsx_runtime_1.jsx)(S_PrevButton, __assign({ className: "".concat(prevBtnDisabled ? 'disabled' : ''), "$offset": isSameOffset ? undefined : prevBtnOffset, "$size": isSameOffset ? undefined : prevBtnSize }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", shapeType: prevButton.shapeType, baseColorKey: prevButton.baseColorKey || 'ui_cpnt_button_fill_base_transparent', borderColorKey: prevButton.borderColorKey, iconName: prevButton.iconName, iconFillType: "line", iconColorKey: prevButton.iconColorKey || 'ui_cpnt_icon_sys_black', shadow: prevButton.shadow, onClick: onPrevBtnClick }) }))), nextButton && ((0, jsx_runtime_1.jsx)(S_NextButton, __assign({ className: "".concat(nextBtnDisabled ? 'disabled' : ''), "$offset": isSameOffset ? undefined : nextBtnOffset, "$size": isSameOffset ? undefined : nextBtnSize }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", shapeType: nextButton.shapeType, baseColorKey: nextButton.baseColorKey || 'ui_cpnt_button_fill_base_transparent', borderColorKey: nextButton.baseColorKey, iconName: nextButton.iconName, iconFillType: "line", iconColorKey: nextButton.iconColorKey || 'ui_cpnt_icon_sys_black', shadow: nextButton.shadow, onClick: onNextBtnClick }) })))] })));
60
+ return ((0, jsx_runtime_1.jsxs)(S_Navigation, __assign({ "$offset": isSameOffset ? prevBtnOffset : undefined, "$size": isSameOffset ? prevBtnSize : 1 }, { children: [prevButton && ((0, jsx_runtime_1.jsx)(S_PrevButton, __assign({ className: "".concat(prevBtnDisabled ? 'disabled' : ''), "$offset": isSameOffset ? undefined : prevBtnOffset, "$size": isSameOffset ? undefined : prevBtnSize }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", shapeType: prevButton.shapeType, borderColorKey: prevButton.borderColorKey, overrideBaseColorHex: prevBtnPrimaryColor, iconName: prevButton.iconName, iconFillType: "line", iconColorKey: prevButton.iconColorKey || 'ui_cpnt_icon_sys_black', overrideIconColorHex: prevBtnSecondaryColor, shadow: prevButton.shadow, onClick: onPrevBtnClick }) }))), nextButton && ((0, jsx_runtime_1.jsx)(S_NextButton, __assign({ className: "".concat(nextBtnDisabled ? 'disabled' : ''), "$offset": isSameOffset ? undefined : nextBtnOffset, "$size": isSameOffset ? undefined : nextBtnSize }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", shapeType: nextButton.shapeType, borderColorKey: nextButton.baseColorKey, overrideBaseColorHex: nextBtnPrimaryColor, iconName: nextButton.iconName, iconFillType: "line", iconColorKey: nextButton.iconColorKey || 'ui_cpnt_icon_sys_black', overrideIconColorHex: nextBtnSecondaryColor, shadow: nextButton.shadow, onClick: onNextBtnClick }) })))] })));
61
61
  };
62
62
  exports.CustomNavigation = CustomNavigation;
63
63
  var S_Navigation = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: ", ";\n padding: ", ";\n position: ", ";\n transform: ", ";\n ", ";\n transform-origin: ", ";\n z-index: 3;\n"], ["\n display: ", ";\n padding: ", ";\n position: ", ";\n transform: ", ";\n ", ";\n transform-origin: ", ";\n z-index: 3;\n"])), function (_a) {
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomPagination.d.ts CHANGED
@@ -14,8 +14,10 @@ export interface CustomPaginationProps {
14
14
  transformOrigin?: string;
15
15
  };
16
16
  size?: number;
17
+ primaryColor?: string;
18
+ secondaryColor?: string;
17
19
  }
18
- export declare const CustomPagination: ({ current, total, type, offset, size, prevBtnDisabled, nextBtnDisabled, onBulletClick, onPrevBtnClick, onNextBtnClick }: CustomPaginationProps & {
20
+ export declare const CustomPagination: ({ current, total, type, offset, size, primaryColor, secondaryColor, prevBtnDisabled, nextBtnDisabled, onBulletClick, onPrevBtnClick, onNextBtnClick }: CustomPaginationProps & {
19
21
  prevBtnDisabled: boolean;
20
22
  nextBtnDisabled: boolean;
21
23
  onBulletClick: (index: number) => void;
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomPagination.js CHANGED
@@ -43,7 +43,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
43
43
  var components_1 = require("../../../../../../../../DynamicLayout/components");
44
44
  var styled_components_1 = __importStar(require("styled-components"));
45
45
  var CustomPagination = function (_a) {
46
- var _b = _a.current, current = _b === void 0 ? 1 : _b, _c = _a.total, total = _c === void 0 ? 1 : _c, _d = _a.type, type = _d === void 0 ? 'NONE' : _d, _e = _a.offset, offset = _e === void 0 ? { top: '0' } : _e, _f = _a.size, size = _f === void 0 ? 1 : _f, prevBtnDisabled = _a.prevBtnDisabled, nextBtnDisabled = _a.nextBtnDisabled, onBulletClick = _a.onBulletClick, onPrevBtnClick = _a.onPrevBtnClick, onNextBtnClick = _a.onNextBtnClick;
46
+ var _b = _a.current, current = _b === void 0 ? 1 : _b, _c = _a.total, total = _c === void 0 ? 1 : _c, _d = _a.type, type = _d === void 0 ? 'NONE' : _d, _e = _a.offset, offset = _e === void 0 ? { top: '0' } : _e, _f = _a.size, size = _f === void 0 ? 1 : _f, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, prevBtnDisabled = _a.prevBtnDisabled, nextBtnDisabled = _a.nextBtnDisabled, onBulletClick = _a.onBulletClick, onPrevBtnClick = _a.onPrevBtnClick, onNextBtnClick = _a.onNextBtnClick;
47
47
  var bullets = Array.from({ length: total }, function (_, i) { return i; });
48
48
  return ((0, jsx_runtime_1.jsx)(S_Pagination, __assign({ className: "custom-pagination_".concat(current), "$offset": offset, "$size": size }, { children: (function () {
49
49
  switch (type) {
@@ -72,15 +72,15 @@ var CustomPagination = function (_a) {
72
72
  case 'DESIGN11':
73
73
  return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ gap: "8px" }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Dot, { color: "DARK", isActive: index + 1 === current, onClick: function () { return onBulletClick(index); } }, index)); }) })));
74
74
  case 'DESIGN12':
75
- return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ gap: "8px" }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Dot, { color: "WHITE", isActive: index + 1 === current, onClick: function () { return onBulletClick(index); } }, index)); }) })));
75
+ return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ gap: "8px" }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Dot, { color: index + 1 === current ? primaryColor : secondaryColor, isActive: index + 1 === current, onClick: function () { return onBulletClick(index); } }, index)); }) })));
76
76
  case 'DESIGN13':
77
- return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ direction: "column", gap: "12px" }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Dot, { color: "DARK", isActive: index + 1 === current, onClick: function () { return onBulletClick(index); } }, index)); }) })));
77
+ return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ direction: "column", gap: "12px" }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Dot, { color: index + 1 === current ? primaryColor : secondaryColor, isActive: index + 1 === current, onClick: function () { return onBulletClick(index); } }, index)); }) })));
78
78
  case 'DESIGN14':
79
- return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ direction: "column", gap: "12px" }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Dot, { color: "WHITE", isActive: index + 1 === current, onClick: function () { return onBulletClick(index); } }, index)); }) })));
79
+ return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ direction: "column", gap: "12px" }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Dot, { color: index + 1 === current ? primaryColor : secondaryColor, isActive: index + 1 === current, onClick: function () { return onBulletClick(index); } }, index)); }) })));
80
80
  case 'DESIGN15':
81
- return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ gap: "8px" }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Bar, { color: "DARK", isActive: index + 1 === current, onClick: function () { return onBulletClick(index); } }, index)); }) })));
81
+ return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ gap: "8px" }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Bar, { color: index + 1 === current ? primaryColor : secondaryColor, isActive: index + 1 === current, onClick: function () { return onBulletClick(index); } }, index)); }) })));
82
82
  case 'DESIGN16':
83
- return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ gap: "8px" }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Bar, { color: "WHITE", isActive: index + 1 === current, onClick: function () { return onBulletClick(index); } }, index)); }) })));
83
+ return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ gap: "8px" }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Bar, { color: index + 1 === current ? primaryColor : secondaryColor, isActive: index + 1 === current, onClick: function () { return onBulletClick(index); } }, index)); }) })));
84
84
  default:
85
85
  return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
86
86
  }
@@ -164,23 +164,15 @@ var S_Divider = styled_components_1.default.div(templateObject_11 || (templateOb
164
164
  var type = _a.type;
165
165
  return (type === 'VERTICAL' ? verticalDivider : horizontalDivider);
166
166
  });
167
- var whiteBullet = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n background-color: #ffffff;\n opacity: ", ";\n"], ["\n background-color: #ffffff;\n opacity: ", ";\n"])), function (_a) {
168
- var isActive = _a.isActive;
169
- return (isActive ? 1 : 0.2);
170
- });
171
- var darkBullet = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n background-color: #000000;\n opacity: ", ";\n"], ["\n background-color: #000000;\n opacity: ", ";\n"])), function (_a) {
172
- var isActive = _a.isActive;
173
- return (isActive ? 1 : 0.3);
174
- });
175
- var S_Dot = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n border-radius: 50%;\n cursor: pointer;\n height: 8px;\n width: 8px;\n ", ";\n"], ["\n border-radius: 50%;\n cursor: pointer;\n height: 8px;\n width: 8px;\n ", ";\n"])), function (_a) {
167
+ var S_Dot = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 50%;\n cursor: pointer;\n height: 8px;\n width: 8px;\n"], ["\n background-color: ", ";\n border-radius: 50%;\n cursor: pointer;\n height: 8px;\n width: 8px;\n"])), function (_a) {
176
168
  var color = _a.color;
177
- return (color === 'WHITE' ? whiteBullet : darkBullet);
169
+ return color;
178
170
  });
179
- var S_Bar = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n cursor: pointer;\n height: 2px;\n width: 40px;\n ", ";\n"], ["\n cursor: pointer;\n height: 2px;\n width: 40px;\n ", ";\n"])), function (_a) {
171
+ var S_Bar = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n background-color: ", ";\n cursor: pointer;\n height: 2px;\n width: 40px;\n"], ["\n background-color: ", ";\n cursor: pointer;\n height: 2px;\n width: 40px;\n"])), function (_a) {
180
172
  var color = _a.color;
181
- return (color === 'WHITE' ? whiteBullet : darkBullet);
173
+ return color;
182
174
  });
183
- var S_Pointer = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n cursor: ", ";\n height: 16px;\n opacity: ", ";\n"], ["\n cursor: ", ";\n height: 16px;\n opacity: ", ";\n"])), function (_a) {
175
+ var S_Pointer = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n cursor: ", ";\n height: 16px;\n opacity: ", ";\n"], ["\n cursor: ", ";\n height: 16px;\n opacity: ", ";\n"])), function (_a) {
184
176
  var disabled = _a.disabled;
185
177
  return (disabled ? 'not-allowed' : 'pointer');
186
178
  }, function (_a) {
@@ -188,4 +180,4 @@ var S_Pointer = styled_components_1.default.div(templateObject_16 || (templateOb
188
180
  return (disabled ? 0.4 : 1);
189
181
  });
190
182
  exports.default = exports.CustomPagination;
191
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;
183
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomProgressbar.d.ts CHANGED
@@ -12,10 +12,12 @@ export interface CustomProgressbarProps {
12
12
  transformOrigin?: string;
13
13
  };
14
14
  size?: number;
15
+ primaryColor?: string;
16
+ secondaryColor?: string;
15
17
  }
16
18
  type Props = {
17
19
  progressRef: React.RefObject<number>;
18
20
  leftTimeMsRef: React.RefObject<number>;
19
21
  } & CustomProgressbarProps;
20
- export declare const CustomProgressbar: ({ progressRef, leftTimeMsRef, type, offset, size }: Props) => JSX.Element;
22
+ export declare const CustomProgressbar: ({ progressRef, leftTimeMsRef, type, offset, size, primaryColor, secondaryColor }: Props) => JSX.Element;
21
23
  export default CustomProgressbar;
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomProgressbar.js CHANGED
@@ -44,7 +44,7 @@ var react_1 = require("react");
44
44
  var styled_components_1 = __importStar(require("styled-components"));
45
45
  var progressConfigs_1 = require("./progressConfigs");
46
46
  var CustomProgressbar = function (_a) {
47
- var progressRef = _a.progressRef, leftTimeMsRef = _a.leftTimeMsRef, _b = _a.type, type = _b === void 0 ? 'NONE' : _b, _c = _a.offset, offset = _c === void 0 ? { top: '0' } : _c, _d = _a.size, size = _d === void 0 ? 1 : _d;
47
+ var progressRef = _a.progressRef, leftTimeMsRef = _a.leftTimeMsRef, _b = _a.type, type = _b === void 0 ? 'NONE' : _b, _c = _a.offset, offset = _c === void 0 ? { top: '0' } : _c, _d = _a.size, size = _d === void 0 ? 1 : _d, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor;
48
48
  var _e = (0, react_1.useState)(0), leftTimeSec = _e[0], setLeftTimeSec = _e[1];
49
49
  var _f = (0, react_1.useState)(0), progress = _f[0], setProgress = _f[1];
50
50
  (0, react_1.useEffect)(function () {
@@ -80,23 +80,23 @@ var CustomProgressbar = function (_a) {
80
80
  case 'NONE':
81
81
  return null;
82
82
  case 'DESIGN1':
83
- return (0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { progress: progress, leftTimeSec: leftTimeSec });
83
+ return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { progress: progress, leftTimeSec: leftTimeSec, progressColor: primaryColor, bufferColor: secondaryColor }));
84
84
  case 'DESIGN2':
85
- return (0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign2, { progress: progress, leftTimeSec: leftTimeSec });
85
+ return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign2, { progress: progress, leftTimeSec: leftTimeSec, progressColor: primaryColor, bufferColor: secondaryColor }));
86
86
  case 'DESIGN3':
87
- return (0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign3, { progress: progress });
87
+ return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign3, { progress: progress, progressColor: primaryColor, bufferColor: secondaryColor }));
88
88
  case 'DESIGN4':
89
- return (0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign4, { progress: progress });
89
+ return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign4, { progress: progress, progressColor: primaryColor, bufferColor: secondaryColor }));
90
90
  case 'DESIGN5':
91
- return (0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign5, { progress: progress });
91
+ return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign5, { progress: progress, progressColor: primaryColor, bufferColor: secondaryColor }));
92
92
  case 'DESIGN6':
93
- return (0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign6, { progress: progress });
93
+ return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign6, { progress: progress, progressColor: primaryColor, bufferColor: secondaryColor }));
94
94
  case 'DESIGN7':
95
- return (0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign7, { progress: progress });
95
+ return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign7, { progress: progress, progressColor: primaryColor, bufferColor: secondaryColor }));
96
96
  case 'DESIGN8':
97
- return (0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign8, { progress: progress });
97
+ return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign8, { progress: progress, progressColor: primaryColor, bufferColor: secondaryColor }));
98
98
  default:
99
- return (0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { progress: progress, leftTimeSec: leftTimeSec });
99
+ return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { progress: progress, leftTimeSec: leftTimeSec, progressColor: primaryColor, bufferColor: secondaryColor }));
100
100
  }
101
101
  };
102
102
  return ((0, jsx_runtime_1.jsx)(S_ProgressWrapper, __assign({ "$offset": offset, "$size": size }, { children: renderProgressByType() })));
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/progressConfigs.d.ts CHANGED
@@ -1,27 +1,43 @@
1
1
  /// <reference types="react" />
2
- export declare const ProgressDesign1: ({ progress, leftTimeSec }: {
2
+ export declare const ProgressDesign1: ({ progress, leftTimeSec, progressColor, bufferColor }: {
3
3
  progress: number;
4
4
  leftTimeSec: number;
5
+ progressColor?: string | undefined;
6
+ bufferColor?: string | undefined;
5
7
  }) => JSX.Element;
6
- export declare const ProgressDesign2: ({ progress, leftTimeSec }: {
8
+ export declare const ProgressDesign2: ({ progress, leftTimeSec, progressColor, bufferColor }: {
7
9
  progress: number;
8
10
  leftTimeSec: number;
11
+ progressColor?: string | undefined;
12
+ bufferColor?: string | undefined;
9
13
  }) => JSX.Element;
10
- export declare const ProgressDesign3: ({ progress }: {
14
+ export declare const ProgressDesign3: ({ progress, progressColor, bufferColor }: {
11
15
  progress: number;
16
+ progressColor?: string | undefined;
17
+ bufferColor?: string | undefined;
12
18
  }) => JSX.Element;
13
- export declare const ProgressDesign4: ({ progress }: {
19
+ export declare const ProgressDesign4: ({ progress, progressColor, bufferColor }: {
14
20
  progress: number;
21
+ progressColor?: string | undefined;
22
+ bufferColor?: string | undefined;
15
23
  }) => JSX.Element;
16
- export declare const ProgressDesign5: ({ progress }: {
24
+ export declare const ProgressDesign5: ({ progress, progressColor, bufferColor }: {
17
25
  progress: number;
26
+ progressColor?: string | undefined;
27
+ bufferColor?: string | undefined;
18
28
  }) => JSX.Element;
19
- export declare const ProgressDesign6: ({ progress }: {
29
+ export declare const ProgressDesign6: ({ progress, progressColor, bufferColor }: {
20
30
  progress: number;
31
+ progressColor?: string | undefined;
32
+ bufferColor?: string | undefined;
21
33
  }) => JSX.Element;
22
- export declare const ProgressDesign7: ({ progress }: {
34
+ export declare const ProgressDesign7: ({ progress, progressColor, bufferColor }: {
23
35
  progress: number;
36
+ progressColor?: string | undefined;
37
+ bufferColor?: string | undefined;
24
38
  }) => JSX.Element;
25
- export declare const ProgressDesign8: ({ progress }: {
39
+ export declare const ProgressDesign8: ({ progress, progressColor, bufferColor }: {
26
40
  progress: number;
41
+ progressColor?: string | undefined;
42
+ bufferColor?: string | undefined;
27
43
  }) => JSX.Element;