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

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/contentsListUtils.js

@@ -68,13 +68,13 @@ function parseStylePropertyStyles(key, value) {
     }
     return undefined;
 }
-function getColumnsPropStyleValues(value, rows) {
-    return (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    grid-template-columns: repeat(", ", 1fr);\n    grid-template-rows: repeat(", ", 1fr);\n  "], ["\n    grid-template-columns: repeat(", ", 1fr);\n    grid-template-rows: repeat(", ", 1fr);\n  "])), value, rows);
+function getColumnsPropStyleValues(value) {
+    return (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    grid-template-columns: repeat(", ", 1fr);\n  "], ["\n    grid-template-columns: repeat(", ", 1fr);\n  "])), value);
 }
-function parseContentPropertyStyles(key, value, rows) {
+function parseContentPropertyStyles(key, value) {
     switch (key) {
         case 'CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS':
-            return getColumnsPropStyleValues(value, rows);
+            return getColumnsPropStyleValues(value);
     }
     return undefined;
 }
@@ -87,31 +87,34 @@ function parseGridStyleProp(_a) {
         var value = props[keyWithDevice];
         var hoverValue = props[keyWithHover];
         var styles = parseStylePropertyStyles(currentKey, value);
-        var hoverStyles = parseStylePropertyStyles(currentKey, hoverValue !== null && hoverValue !== void 0 ? hoverValue : value);
+        var hoverStyles = parseStylePropertyStyles(currentKey, hoverValue);
+        if (hoverValue === null || hoverValue === undefined) {
+            return {
+                stylePropCss: (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n            ", "\n            ", "\n          "], ["\n            ", "\n            ", "\n          "])), acc.stylePropCss, styles),
+                hoverStylePropCss: (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n            ", "\n          "], ["\n            ", "\n          "])), acc.hoverStylePropCss)
+            };
+        }
         return {
-            stylePropCss: (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n          ", "\n          ", "\n        "], ["\n          ", "\n          ", "\n        "])), acc.stylePropCss, styles),
-            hoverStylePropCss: (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n          ", "\n          ", "\n        "], ["\n          ", "\n          ", "\n        "])), acc.hoverStylePropCss, hoverStyles)
+            stylePropCss: (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n          ", "\n          ", "\n        "], ["\n          ", "\n          ", "\n        "])), acc.stylePropCss, styles),
+            hoverStylePropCss: (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n          ", "\n          ", "\n        "], ["\n          ", "\n          ", "\n        "])), acc.hoverStylePropCss, hoverStyles)
         };
     }, {
-        stylePropCss: (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject([""], [""]))),
-        hoverStylePropCss: (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject([""], [""])))
+        stylePropCss: (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject([""], [""]))),
+        hoverStylePropCss: (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject([""], [""])))
     });
 }
 exports.parseGridStyleProp = parseGridStyleProp;
 function parseGridContentProp(_a) {
     var props = _a.props;
     var availableSpecCodes = Object.keys(props).filter(function (key) { return !key.includes(':HOVER') && !key.includes(':MOBILE'); });
-    var columns = props.CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS || 1;
-    var displayCounts = props.CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS || 1;
-    var rows = Math.ceil(displayCounts / columns);
     return availableSpecCodes.reduce(function (acc, currentKey) {
         var value = props[currentKey];
-        var styles = parseContentPropertyStyles(currentKey, value, rows);
+        var styles = parseContentPropertyStyles(currentKey, value);
         return {
-            contentPropCss: (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n          ", "\n          ", "\n        "], ["\n          ", "\n          ", "\n        "])), acc.contentPropCss, styles)
+            contentPropCss: (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n          ", "\n          ", "\n        "], ["\n          ", "\n          ", "\n        "])), acc.contentPropCss, styles)
         };
     }, {
-        contentPropCss: (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject([""], [""])))
+        contentPropCss: (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject([""], [""])))
     });
 }
 exports.parseGridContentProp = parseGridContentProp;
@@ -127,7 +130,7 @@ function parsePaginationStyleProp(_a) {
             var hoverValue = props[keyWithHover];
             return {
                 normalStyle: __assign(__assign({}, acc.normalStyle), { type: value }),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), { type: hoverValue !== null && hoverValue !== void 0 ? hoverValue : value })
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { type: hoverValue })
             };
         }
         if (customPaginationPropertyKey === 'offset') {
@@ -135,7 +138,7 @@ function parsePaginationStyleProp(_a) {
             var hoverValue = props[keyWithHover];
             return {
                 normalStyle: __assign(__assign({}, acc.normalStyle), { offset: getCustomPaginationOffset(value) }),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), { offset: getCustomPaginationOffset(hoverValue !== null && hoverValue !== void 0 ? hoverValue : value) })
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { offset: getCustomPaginationOffset(hoverValue) })
             };
         }
         if (customPaginationPropertyKey === 'size') {
@@ -143,23 +146,7 @@ function parsePaginationStyleProp(_a) {
             var hoverValue = props[keyWithHover];
             return {
                 normalStyle: __assign(__assign({}, acc.normalStyle), { size: getCustomPaginationSize(value) }),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), { size: getCustomPaginationSize(hoverValue !== null && hoverValue !== void 0 ? hoverValue : value) })
-            };
-        }
-        if (customPaginationPropertyKey === 'primaryColor') {
-            var value = props[keyWithDevice];
-            var hoverValue = props[keyWithHover];
-            return {
-                normalStyle: __assign(__assign({}, acc.normalStyle), { primaryColor: value }),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), { primaryColor: hoverValue !== null && hoverValue !== void 0 ? hoverValue : value })
-            };
-        }
-        if (customPaginationPropertyKey === 'secondaryColor') {
-            var value = props[keyWithDevice];
-            var hoverValue = props[keyWithHover];
-            return {
-                normalStyle: __assign(__assign({}, acc.normalStyle), { secondaryColor: value }),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), { secondaryColor: hoverValue !== null && hoverValue !== void 0 ? hoverValue : value })
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { size: getCustomPaginationSize(hoverValue) })
             };
         }
         return {
@@ -189,16 +176,6 @@ function getCustomPaginationPropKey(key) {
         case "CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE:MOBILE":
         case "CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE:MOBILE:HOVER":
             return 'size';
-        case "CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR":
-        case "CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR:HOVER":
-        case "CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR:MOBILE":
-        case "CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR:MOBILE:HOVER":
-            return 'primaryColor';
-        case "CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR":
-        case "CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR:HOVER":
-        case "CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR:MOBILE":
-        case "CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR:MOBILE:HOVER":
-            return 'secondaryColor';
         default:
             return '';
     }
@@ -226,10 +203,10 @@ function getCustomPaginationOffset(value) {
         case 'OUTSET3':
             return {
                 top: '0px',
-                left: '100%',
-                translateX: -100,
+                right: '0px',
+                translateX: 0,
                 translateY: -100,
-                transformOrigin: 'top left'
+                transformOrigin: 'top right'
             };
         case 'OUTSET4':
             return {
@@ -303,9 +280,9 @@ function getCustomPaginationOffset(value) {
                 translateY: 0,
                 transformOrigin: 'right top'
             };
-        case 'INSET1':
+        case 'INSET13':
             return { top: '0px', left: '0px', translateX: 0, translateY: 0, transformOrigin: 'left top' };
-        case 'INSET2':
+        case 'INSET14':
             return {
                 top: '0px',
                 left: '50%',
@@ -313,7 +290,7 @@ function getCustomPaginationOffset(value) {
                 translateY: 0,
                 transformOrigin: 'left top'
             };
-        case 'INSET3':
+        case 'INSET15':
             return {
                 top: '0px',
                 left: '100%',
@@ -321,7 +298,7 @@ function getCustomPaginationOffset(value) {
                 translateY: 0,
                 transformOrigin: 'left top'
             };
-        case 'INSET4':
+        case 'INSET16':
             return {
                 top: '50%',
                 left: '100%',
@@ -329,7 +306,7 @@ function getCustomPaginationOffset(value) {
                 translateY: -50,
                 transformOrigin: 'left top'
             };
-        case 'INSET5':
+        case 'INSET17':
             return {
                 top: '100%',
                 left: '100%',
@@ -337,7 +314,7 @@ function getCustomPaginationOffset(value) {
                 translateY: -100,
                 transformOrigin: 'left top'
             };
-        case 'INSET6':
+        case 'INSET18':
             return {
                 top: '100%',
                 left: '50%',
@@ -345,7 +322,7 @@ function getCustomPaginationOffset(value) {
                 translateY: -100,
                 transformOrigin: 'left top'
             };
-        case 'INSET7':
+        case 'INSET19':
             return {
                 top: '100%',
                 left: '0px',
@@ -353,7 +330,7 @@ function getCustomPaginationOffset(value) {
                 translateY: -100,
                 transformOrigin: 'top left'
             };
-        case 'INSET8':
+        case 'INSET20':
             return {
                 top: '50%',
                 left: '0px',
@@ -370,11 +347,11 @@ function getCustomPaginationSize(value) {
         case 'SMALL':
             return 1;
         case 'MEDIUM':
-            return 1.5;
-        case 'LARGE':
             return 2;
+        case 'LARGE':
+            return 3;
         default:
             return 1;
     }
 }
-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, templateObject_17;
+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, templateObject_17, templateObject_18, templateObject_19;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/types.d.ts

@@ -6,10 +6,8 @@ export type CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMLINEHEIGHT_TYPE = NUMBER_INTEGER
 export type CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMHEIGHTFITCONTENT_TYPE = boolean | null;
 export type CB_STYLE_PROP_CONTENTSLIST_SPEC_INFINITESCROLL_TYPE = boolean | null;
 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;
-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;
+export type CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONLOCATION_TYPE = 'OUTSET1' | 'OUTSET2' | 'OUTSET3' | 'OUTSET4' | 'OUTSET5' | 'OUTSET6' | 'OUTSET7' | 'OUTSET8' | 'OUTSET9' | 'OUTSET10' | 'OUTSET11' | 'OUTSET12' | 'INSET13' | 'INSET14' | 'INSET15' | 'INSET16' | 'INSET17' | 'INSET18' | 'INSET19' | 'INSET20' | null;
 export type CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE_TYPE = 'SMALL' | 'MEDIUM' | 'LARGE' | null;
-export type CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR = string;
-export type CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR = string;
 export type CB_STYLE_PROP_CONTENTSLIST_SPECS_BASE = {
     CB_STYLE_PROP_CONTENTSLIST_SPEC_STYLE: CB_STYLE_PROP_CONTENTSLIST_SPEC_STYLE_TYPE;
     CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMSPACING: CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMSPACING_TYPE;
@@ -19,8 +17,6 @@ export type CB_STYLE_PROP_CONTENTSLIST_SPECS_BASE = {
     CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE: CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE_TYPE;
     CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONLOCATION: CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONLOCATION_TYPE;
     CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE: CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE_TYPE;
-    CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR: CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR;
-    CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR: CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR;
 };
 export type CB_STYLE_PROP_CONTENTSLIST_SPECS = CB_STYLE_PROP_CONTENTSLIST_SPECS_BASE & {
     'CB_STYLE_PROP_CONTENTSLIST_SPEC_STYLE:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_STYLE_TYPE;
@@ -47,10 +43,4 @@ export type CB_STYLE_PROP_CONTENTSLIST_SPECS = CB_STYLE_PROP_CONTENTSLIST_SPECS_
     'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE_TYPE;
     'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE:MOBILE': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE_TYPE;
     'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE:MOBILE:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE_TYPE;
-    'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR;
-    'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR:MOBILE': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR;
-    'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR:MOBILE:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR;
-    'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR;
-    'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR:MOBILE': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR;
-    'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR:MOBILE:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR;
 };

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Image/Image.js

@@ -57,8 +57,7 @@ function Image(props) {
     var queryContext = (0, compositionQueryContext_1.useCCBQueryPath)();
     var index = props.index, CB_CONTENT_PROP_IMAGE = props.CB_CONTENT_PROP_IMAGE, _b = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _b.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _b.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _b.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE, CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA = _b.CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
     var cLinkValue = function () {
-        if (CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE === 'DATA' ||
-            CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE === 'DELEGATEDDATA') {
+        if (CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE === 'DATA') {
             if (!(queryContext === null || queryContext === void 0 ? void 0 : queryContext.queryData)) {
                 return "ERROR: QueryData NOT FOUND";
             }
@@ -91,26 +90,19 @@ function Image(props) {
     var hasEffect = !isNoneEffectType;
     var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
     var imgSrc = function () {
-        var isDataConnected = CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_VALUETYPE === 'DATA' ||
-            CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_VALUETYPE === 'DELEGATEDDATA';
+        var isDataConnected = CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_VALUETYPE === 'DATA';
         if (!isDataConnected) {
             return CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR;
         }
         if (!(queryContext === null || queryContext === void 0 ? void 0 : queryContext.queryData)) {
-            // eslint-disable-next-line
-            console.warn('ERROR: No query data found');
-            return 'ERROR';
+            return 'ERROR: No query data found';
         }
         if (!queryContext.queryData[CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_CONNECTDATA]) {
-            // eslint-disable-next-line
-            console.warn("ERROR: ".concat(CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_CONNECTDATA, " NOT found in query data"));
-            return 'ERROR';
+            return "ERROR: ".concat(CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_CONNECTDATA, " NOT found in query data");
         }
         return queryContext.queryData[CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_CONNECTDATA];
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_ImageWrapper, __assign({ style: __assign({}, effectCssProperties) }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, layout), { overflow: 'hidden' }), boxStyle.normal), { cursor: CLINKCursor }), hoverStyle: __assign({}, boxStyle.hover), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: (0, jsx_runtime_1.jsx)(S_Image, { src: imgSrc() === 'ERROR'
-                                ? 'https://static.publ.site/pages-sample/img_cb_style_prop_bgmedia_spec_imageselector_01.png'
-                                : imgSrc(), normalStyle: __assign({}, imgStyle.normal), hoverStyle: __assign({}, imgStyle.hover) }) })) })) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_ImageWrapper, __assign({ style: __assign({}, effectCssProperties) }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, layout), { overflow: 'hidden' }), boxStyle.normal), { cursor: CLINKCursor }), hoverStyle: __assign({}, boxStyle.hover), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: (0, jsx_runtime_1.jsx)(S_Image, { src: imgSrc(), normalStyle: __assign({}, imgStyle.normal), hoverStyle: __assign({}, imgStyle.hover) }) })) })) }))] }));
 }
 function parseImageCBStyle(style, hoverStyle, mode) {
     var boxStyle = {

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBanner.js

@@ -14,29 +14,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -47,7 +24,7 @@ var createCompositions_1 = require("../../../../../../../DynamicLayout/Compositi
 var dynamicLayoutContext_1 = require("../../../../../../../DynamicLayout/dynamicLayoutContext");
 var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
 var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
-var styled_components_1 = __importStar(require("styled-components"));
+var styled_components_1 = __importDefault(require("styled-components"));
 var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
 var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
 var CustomNavigation_1 = require("./components/CustomNavigation");
@@ -56,11 +33,10 @@ var CustomProgressbar_1 = require("./components/CustomProgressbar");
 var SlideBannerCore_1 = __importDefault(require("./SlideBannerCore"));
 var slideBannerUtils_1 = require("./slideBannerUtils");
 function SlideBanner(props) {
-    var _a;
-    var _b = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _b.device, mode = _b.mode, queryData = _b.queryData;
+    var _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _a.device, mode = _a.mode, queryData = _a.queryData;
     var index = props.index, 
     // CONTENT : 슬라이드배너
-    _c = props.CB_CONTENT_PROP_SLIDEBANNER, CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS, CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE, CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA, 
+    _b = props.CB_CONTENT_PROP_SLIDEBANNER, CB_CONTENT_PROP_SLIDEBANNER_SPEC_DISPLAYCOUNTS = _b.CB_CONTENT_PROP_SLIDEBANNER_SPEC_DISPLAYCOUNTS, 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, 
     // STYLE: 슬라이드배너
     CB_STYLE_PROP_SLIDEBANNER = props.CB_STYLE_PROP_SLIDEBANNER, 
     // STYLE: 그림자
@@ -68,8 +44,9 @@ function SlideBanner(props) {
     // EFFECT: 진입
     CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
     var compositions = props.compositions;
-    var _d = (0, react_1.useState)(false), isHovered = _d[0], setIsHovered = _d[1];
-    var _e = (0, react_1.useState)(1), currentSlide = _e[0], setCurrentSlide = _e[1];
+    var _c = (0, react_1.useState)(false), isHovered = _c[0], setIsHovered = _c[1];
+    var _d = (0, react_1.useState)(1), currentSlide = _d[0], setCurrentSlide = _d[1];
+    var _e = (0, react_1.useState)(0), totalPages = _e[0], setTotalPages = _e[1];
     var _f = (0, react_1.useState)(true), isBeginning = _f[0], setIsBeginning = _f[1];
     var _g = (0, react_1.useState)(false), isEnd = _g[0], setIsEnd = _g[1];
     var progressRef = (0, react_1.useRef)(0);
@@ -92,7 +69,6 @@ function SlideBanner(props) {
         device: device
     }), customProgressbarNormalStyle = _l.normalStyle, customProgressbarHoverStyle = _l.hoverStyle;
     var _m = (0, util_1.parseProperties)(props, device), style = _m.style, hoverStyle = _m.hoverStyle, layout = _m.layout, effect = _m.effect;
-    var loop = isHovered ? slideBannerNormalStyle.loop : slideBannerHoverStyle.loop;
     // NOTE: edit모드에서는 그리드의 이벤트만 작동하도록 CB의 포인터 이벤트는 막습니다.
     var editModeStyle = mode === 'EDIT' ? { pointerEvents: 'none' } : {};
     // NOTE: EFFECT와 관련된 함수들입니다.
@@ -113,29 +89,28 @@ function SlideBanner(props) {
         (_c = swiperRef.current) === null || _c === void 0 ? void 0 : _c.swiper.update();
     }, [isHovered]);
     var handleSwiper = function (swiper) {
+        var totalSlides = swiper.slides.length;
+        var slidesPerView = typeof swiper.params.slidesPerView === 'number' ? swiper.params.slidesPerView : 1;
+        var slidesPerGroup = typeof swiper.params.slidesPerGroup === 'number' ? swiper.params.slidesPerGroup : 1;
+        var totalPages = Math.ceil((totalSlides - slidesPerView) / slidesPerGroup) + 1;
+        setTotalPages(totalPages);
         setIsBeginning(swiper.isBeginning);
         setIsEnd(swiper.isEnd);
+        setCurrentSlide(swiper.activeIndex + 1);
     };
-    var handleSlideChangeTransitionEnd = function (swiper) {
-        var isLoop = swiper.params.loop || false;
+    var handleSlideChange = function (swiper) {
         setIsBeginning(swiper.isBeginning);
         setIsEnd(swiper.isEnd);
-        if (isLoop) {
-            // loop 모드에서는 realIndex가 실제 슬라이드 인덱스
-            setCurrentSlide(swiper.realIndex + 1);
-        }
-        else {
-            // loop가 꺼져있을 때는 activeIndex 사용
-            setCurrentSlide(swiper.activeIndex + 1);
-        }
+        setCurrentSlide(swiper.activeIndex + 1);
     };
-    var handleAutoplayTimeLeft = (0, react_1.useCallback)(function (_, time, progress) {
+    var handleAutoplayTimeLeft = (0, react_1.useCallback)(function (swiper, time, progress) {
         leftTimeMsRef.current = time;
         progressRef.current = progress;
     }, []);
     var handleBulletClick = function (index) {
         if (swiperRef.current) {
-            swiperRef.current.swiper.slideTo(index);
+            var targetIndex = (swiperRef.current.swiper.params.slidesPerGroup || 1) * index;
+            swiperRef.current.swiper.slideTo(targetIndex);
         }
     };
     var handlePrevBtnClick = function () {
@@ -148,68 +123,28 @@ function SlideBanner(props) {
             swiperRef.current.swiper.slideNext();
         }
     };
-    return ((0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), { borderBottomLeftRadius: style.borderBottomLeftRadius, borderBottomRightRadius: style.borderBottomRightRadius, borderTopLeftRadius: style.borderTopLeftRadius, borderTopRightRadius: style.borderTopRightRadius, borderWidth: undefined, borderColor: undefined, borderStyle: undefined }), hoverStyle: __assign(__assign({}, hoverStyle), { borderBottomLeftRadius: hoverStyle.borderBottomLeftRadius, borderBottomRightRadius: hoverStyle.borderBottomRightRadius, borderTopLeftRadius: hoverStyle.borderTopLeftRadius, borderTopRightRadius: hoverStyle.borderTopRightRadius, borderWidth: undefined, borderColor: undefined, borderStyle: undefined }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: (0, jsx_runtime_1.jsxs)(S_SwiperWrapper, __assign({ customStyle: isHovered ? slideBannerHoverStyle === null || slideBannerHoverStyle === void 0 ? void 0 : slideBannerHoverStyle.customStyle : slideBannerNormalStyle === null || slideBannerNormalStyle === void 0 ? void 0 : slideBannerNormalStyle.customStyle }, { children: [(0, jsx_runtime_1.jsx)(S_SwiperLayout, __assign({ borderStyle: {
-                            borderBottomLeftRadius: style.borderBottomLeftRadius,
-                            borderBottomRightRadius: style.borderBottomRightRadius,
-                            borderTopLeftRadius: style.borderTopLeftRadius,
-                            borderTopRightRadius: style.borderTopRightRadius,
-                            borderWidth: style.borderWidth,
-                            borderColor: style.borderColor,
-                            borderStyle: style.borderStyle
-                        }, hoverBorderStyle: {
-                            borderBottomLeftRadius: hoverStyle.borderBottomLeftRadius,
-                            borderBottomRightRadius: hoverStyle.borderBottomRightRadius,
-                            borderTopLeftRadius: hoverStyle.borderTopLeftRadius,
-                            borderTopRightRadius: hoverStyle.borderTopRightRadius,
-                            borderWidth: hoverStyle.borderWidth,
-                            borderColor: hoverStyle.borderColor,
-                            borderStyle: hoverStyle.borderStyle
-                        } }, { children: (0, jsx_runtime_1.jsx)(SlideBannerCore_1.default, __assign({ ref: swiperRef, onSwiper: handleSwiper, onSlideChangeTransitionEnd: handleSlideChangeTransitionEnd, onAutoplayTimeLeft: handleAutoplayTimeLeft, slidesPerView: 1, scrollbar: isHovered ? slideBannerHoverStyle.scrollbar : slideBannerNormalStyle.scrollbar, freeMode: isHovered ? slideBannerHoverStyle.freeMode : slideBannerNormalStyle.freeMode, autoplay: isHovered ? slideBannerHoverStyle.autoplay : slideBannerNormalStyle.autoplay, useAutoplay: isHovered ? slideBannerHoverStyle.useAutoplay : slideBannerNormalStyle.useAutoplay, loop: isHovered ? slideBannerHoverStyle.loop : slideBannerNormalStyle.loop }, { children: (0, createCompositions_1.createCompositions)({
-                                valueType: CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE,
-                                queryPath: CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA,
-                                limit: CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS,
-                                queryData: queryData,
-                                compositions: compositions
-                            }) })) })), (0, jsx_runtime_1.jsx)(CustomPagination_1.CustomPagination, { type: isHovered ? customPaginationHoverStyle.type : customPaginationNormalStyle.type, offset: isHovered ? customPaginationHoverStyle.offset : customPaginationNormalStyle.offset, primaryColor: isHovered
-                            ? customPaginationHoverStyle.primaryColor
-                            : customPaginationNormalStyle.primaryColor, secondaryColor: isHovered
-                            ? customPaginationHoverStyle.secondaryColor
-                            : 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
+    return ((0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), { position: 'relative', overflow: 'hidden' }), hoverStyle: __assign(__assign({}, hoverStyle), { position: 'relative', overflow: 'hidden' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: (0, jsx_runtime_1.jsxs)(S_SwiperWrapper, __assign({ customStyle: isHovered ? slideBannerHoverStyle === null || slideBannerHoverStyle === void 0 ? void 0 : slideBannerHoverStyle.customStyle : slideBannerNormalStyle === null || slideBannerNormalStyle === void 0 ? void 0 : slideBannerNormalStyle.customStyle }, { children: [(0, jsx_runtime_1.jsx)(SlideBannerCore_1.default, __assign({ ref: swiperRef, onSwiper: handleSwiper, onSlideChange: handleSlideChange, onAutoplayTimeLeft: handleAutoplayTimeLeft, slidesPerView: CB_CONTENT_PROP_SLIDEBANNER_SPEC_DISPLAYCOUNTS, scrollbar: isHovered ? slideBannerHoverStyle.scrollbar : slideBannerNormalStyle.scrollbar, freeMode: isHovered ? slideBannerHoverStyle.freeMode : slideBannerNormalStyle.freeMode, autoplay: isHovered ? slideBannerHoverStyle.autoplay : slideBannerNormalStyle.autoplay, useAutoplay: isHovered ? slideBannerHoverStyle.useAutoplay : slideBannerNormalStyle.useAutoplay, loop: isHovered ? slideBannerHoverStyle.loop : slideBannerNormalStyle.loop }, { children: (0, createCompositions_1.createCompositions)({
+                            valueType: CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE,
+                            queryPath: CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA,
+                            queryData: queryData,
+                            compositions: compositions
+                        }) })), (0, jsx_runtime_1.jsx)(CustomPagination_1.CustomPagination, { type: isHovered ? customPaginationHoverStyle.type : customPaginationNormalStyle.type, offset: isHovered ? customPaginationHoverStyle.offset : customPaginationNormalStyle.offset, current: currentSlide, total: totalPages, size: isHovered ? customPaginationHoverStyle.size : customPaginationNormalStyle.size, onBulletClick: handleBulletClick }), (0, jsx_runtime_1.jsx)(CustomNavigation_1.CustomNavigation, { prevBtnDisabled: isBeginning, prevBtnType: isHovered
                             ? customNavigationHoverStyle.prevBtnType
                             : customNavigationNormalStyle.prevBtnType, prevBtnOffset: isHovered
                             ? customNavigationHoverStyle.prevBtnOffset
                             : customNavigationNormalStyle.prevBtnOffset, prevBtnSize: isHovered
                             ? customNavigationHoverStyle.prevBtnSize
-                            : customNavigationNormalStyle.prevBtnSize, prevBtnPrimaryColor: isHovered
-                            ? customNavigationHoverStyle.prevBtnPrimaryColor
-                            : customNavigationNormalStyle.prevBtnPrimaryColor, prevBtnSecondaryColor: isHovered
-                            ? customNavigationHoverStyle.prevBtnSecondaryColor
-                            : customNavigationNormalStyle.prevBtnSecondaryColor, onPrevBtnClick: handlePrevBtnClick, nextBtnDisabled: isEnd, nextBtnType: isHovered
+                            : customNavigationNormalStyle.prevBtnSize, onPrevBtnClick: handlePrevBtnClick, nextBtnDisabled: isEnd, nextBtnType: isHovered
                             ? customNavigationHoverStyle.nextBtnType
                             : customNavigationNormalStyle.nextBtnType, nextBtnOffset: isHovered
                             ? customNavigationHoverStyle.nextBtnOffset
                             : customNavigationNormalStyle.nextBtnOffset, nextBtnSize: isHovered
                             ? customNavigationHoverStyle.nextBtnSize
-                            : customNavigationNormalStyle.nextBtnSize, nextBtnPrimaryColor: isHovered
-                            ? customNavigationHoverStyle.nextBtnPrimaryColor
-                            : customNavigationNormalStyle.nextBtnPrimaryColor, nextBtnSecondaryColor: isHovered
-                            ? customNavigationHoverStyle.nextBtnSecondaryColor
-                            : 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
-                            ? customProgressbarHoverStyle.primaryColor
-                            : customProgressbarNormalStyle.primaryColor, secondaryColor: isHovered
-                            ? customProgressbarHoverStyle.secondaryColor
-                            : customProgressbarNormalStyle.secondaryColor })] })) })) })));
+                            : 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 })] })) })) })));
 }
 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) {
     var customStyle = _a.customStyle;
     return customStyle;
 });
-var S_SwiperLayout = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n  width: 100%;\n\n  ", ";\n  ", ";\n"], ["\n  height: 100%;\n  overflow: hidden;\n  width: 100%;\n\n  ", ";\n  ", ";\n"])), function (_a) {
-    var hoverBorderStyle = _a.hoverBorderStyle;
-    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), __assign(__assign({}, hoverBorderStyle), { boxShadow: '' }));
-}, function (_a) {
-    var borderStyle = _a.borderStyle;
-    return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), __assign(__assign({}, borderStyle), { boxShadow: '' }));
-});
 exports.default = SlideBanner;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomNavigation.d.ts

@@ -14,18 +14,14 @@ export interface CustomNavigationProps {
     prevBtnType?: CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSTYLE_TYPE;
     prevBtnOffset?: NavigationOffset;
     prevBtnSize?: number;
-    prevBtnPrimaryColor?: string;
-    prevBtnSecondaryColor?: string;
     nextBtnDisabled?: boolean;
     nextBtnType?: CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSTYLE_TYPE;
     nextBtnOffset?: NavigationOffset;
     nextBtnSize?: number;
-    nextBtnPrimaryColor?: string;
-    nextBtnSecondaryColor?: string;
     onPrevBtnClick?: () => void;
     onNextBtnClick?: () => void;
 }
-export declare const CustomNavigation: ({ prevBtnDisabled, prevBtnType, prevBtnOffset, prevBtnSize, prevBtnPrimaryColor, prevBtnSecondaryColor, nextBtnDisabled, nextBtnType, nextBtnOffset, nextBtnSize, nextBtnPrimaryColor, nextBtnSecondaryColor, onPrevBtnClick, onNextBtnClick }: CustomNavigationProps) => JSX.Element;
+export declare const CustomNavigation: ({ prevBtnDisabled, prevBtnType, prevBtnOffset, prevBtnSize, nextBtnDisabled, nextBtnType, nextBtnOffset, nextBtnSize, onPrevBtnClick, onNextBtnClick }: CustomNavigationProps) => JSX.Element;
 export interface FlexBoxProps {
     direction?: 'row' | 'column';
     justifyContent?: string;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomNavigation.js

@@ -42,9 +42,8 @@ exports.CustomNavigation = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var IconButton_1 = require("../../../../../../../../DynamicLayout/components/pdsOriginal/desktop/IconButton");
 var styled_components_1 = __importStar(require("styled-components"));
-var navigationConfigs_1 = require("./navigationConfigs");
 var CustomNavigation = function (_a) {
-    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;
+    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;
     var getIsSameOffset = function (prevBtnOffset, nextBtnOffset) {
         return (prevBtnOffset.top === nextBtnOffset.top &&
             prevBtnOffset.bottom === nextBtnOffset.bottom &&
@@ -55,9 +54,61 @@ var CustomNavigation = function (_a) {
             prevBtnOffset.transformOrigin === nextBtnOffset.transformOrigin);
     };
     var isSameOffset = getIsSameOffset(prevBtnOffset, nextBtnOffset);
-    var prevButton = prevBtnType === 'NONE' ? undefined : navigationConfigs_1.prevButtonMappedIcons[prevBtnType];
-    var nextButton = nextBtnType === 'NONE' ? undefined : navigationConfigs_1.nextButtonMappedIcons[nextBtnType];
-    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 }) })))] })));
+    return ((0, jsx_runtime_1.jsxs)(S_Navigation, __assign({ "$offset": isSameOffset ? prevBtnOffset : undefined, "$size": isSameOffset ? prevBtnSize : 1 }, { children: [(0, jsx_runtime_1.jsx)(S_PrevButton, __assign({ className: "".concat(prevBtnDisabled ? 'disabled' : ''), "$offset": isSameOffset ? undefined : prevBtnOffset, "$size": isSameOffset ? undefined : prevBtnSize, onClick: onPrevBtnClick }, { children: (function () {
+                    switch (prevBtnType) {
+                        case 'NONE':
+                        case 'DESIGN1':
+                            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+                        case 'DESIGN2':
+                            return ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconName: "ic_arrow_left_thin", iconFillType: "line", iconColorKey: "ui_cpnt_icon_sys_dark" }));
+                        case 'DESIGN3':
+                            return ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconName: "ic_arrow_left", iconFillType: "line", iconColorKey: "ui_cpnt_icon_sys_dark" }));
+                        case 'DESIGN4':
+                        case 'DESIGN5':
+                        case 'DESIGN6':
+                        case 'DESIGN7':
+                        case 'DESIGN8':
+                        case 'DESIGN9':
+                        case 'DESIGN10':
+                        case 'DESIGN11':
+                            return ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconName: "ic_arrow_left_bold", iconFillType: "line", iconColorKey: "ui_cpnt_icon_sys_dark" }));
+                        case 'DESIGN12':
+                            return ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconName: "ic_arrow_left_thin", iconFillType: "line", iconColorKey: "ui_cpnt_icon_sys_white" }));
+                        case 'DESIGN13':
+                            return ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconName: "ic_arrow_left", iconFillType: "line", iconColorKey: "ui_cpnt_icon_sys_white" }));
+                        case 'DESIGN14':
+                            return ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconName: "ic_arrow_left", iconFillType: "line", iconColorKey: "ui_cpnt_icon_sys_white" }));
+                        default:
+                            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+                    }
+                })() })), (0, jsx_runtime_1.jsx)(S_NextButton, __assign({ className: "".concat(nextBtnDisabled ? 'disabled' : ''), "$offset": isSameOffset ? undefined : nextBtnOffset, "$size": isSameOffset ? undefined : nextBtnSize, onClick: onNextBtnClick }, { children: (function () {
+                    switch (nextBtnType) {
+                        case 'NONE':
+                        case 'DESIGN1':
+                            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+                        case 'DESIGN2':
+                            return ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconName: "ic_arrow_right_thin", iconFillType: "line", iconColorKey: "ui_cpnt_icon_sys_dark" }));
+                        case 'DESIGN3':
+                            return ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconName: "ic_arrow_right", iconFillType: "line", iconColorKey: "ui_cpnt_icon_sys_dark" }));
+                        case 'DESIGN4':
+                        case 'DESIGN5':
+                        case 'DESIGN6':
+                        case 'DESIGN7':
+                        case 'DESIGN8':
+                        case 'DESIGN9':
+                        case 'DESIGN10':
+                        case 'DESIGN11':
+                            return ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconName: "ic_arrow_right_bold", iconFillType: "line", iconColorKey: "ui_cpnt_icon_sys_dark" }));
+                        case 'DESIGN12':
+                            return ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconName: "ic_arrow_right_thin", iconFillType: "line", iconColorKey: "ui_cpnt_icon_sys_white" }));
+                        case 'DESIGN13':
+                            return ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconName: "ic_arrow_right", iconFillType: "line", iconColorKey: "ui_cpnt_icon_sys_white" }));
+                        case 'DESIGN14':
+                            return ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconName: "ic_arrow_right", iconFillType: "line", iconColorKey: "ui_cpnt_icon_sys_white" }));
+                        default:
+                            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+                    }
+                })() }))] })));
 };
 exports.CustomNavigation = CustomNavigation;
 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) {