pds-dev-kit-web-test 2.5.429 → 2.5.431

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

@@ -15,69 +15,39 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getCustomProgressbarPropKey = exports.parseCarouselStyleToCustomProgressbarProp = exports.getCustomNavigationPropKey = exports.parseCarouselStyleToCustomNavigationProp = exports.getCustomPaginationPropKey = exports.parseCarouselStyleToCustomPaginationProp = exports.getCarouselCorePropKey = exports.parseCarouselStyleToCarouselCoreProp = void 0;
+exports.getCustomProgressbarPropKey = exports.parseCarouselStyleToCustomProgressbarProp = exports.getCustomNavigationPropKey = exports.parseCarouselStyleToCustomNavigationProp = exports.getCarouselCorePropKey = exports.parseCarouselStyleToCarouselCoreProp = void 0;
 var styled_components_1 = require("styled-components");
 function parseCarouselStyleToCarouselCoreProp(_a) {
     var props = _a.props, contentsPropsPartials = _a.contentsPropsPartials, device = _a.device;
     var availableSpecCodes = Object.keys(props).filter(function (key) { return !key.includes(':HOVER') && !key.includes(':MOBILE'); });
     return availableSpecCodes.reduce(function (acc, currentKey) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        var _a, _b, _c, _d, _e, _f;
         var keyWithDevice = device === 'DESKTOP' ? currentKey : "".concat(currentKey, ":MOBILE");
         var keyWithHover = "".concat(keyWithDevice.toString(), ":HOVER");
         var carouselCorePropertyKey = getCarouselCorePropKey(currentKey);
         if (carouselCorePropertyKey === 'customStyle') {
             var value = props[keyWithDevice];
             var hoverValue = props[keyWithHover];
-            if (hoverValue === null || hoverValue === undefined) {
-                return {
-                    normalStyle: __assign(__assign({}, acc.normalStyle), (_a = {}, _a[carouselCorePropertyKey] = getStyle(value), _a)),
-                    hoverStyle: __assign({}, acc.hoverStyle)
-                };
-            }
             return {
-                normalStyle: __assign(__assign({}, acc.normalStyle), (_b = {}, _b[carouselCorePropertyKey] = getStyle(value), _b)),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), (_c = {}, _c[carouselCorePropertyKey] = getStyle(hoverValue), _c))
+                normalStyle: __assign(__assign({}, acc.normalStyle), (_a = {}, _a[carouselCorePropertyKey] = getStyle(value), _a)),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), (_b = {}, _b[carouselCorePropertyKey] = getStyle(hoverValue !== null && hoverValue !== void 0 ? hoverValue : value), _b))
             };
         }
         if (carouselCorePropertyKey === 'spaceBetween') {
             var value = props[keyWithDevice];
             var hoverValue = props[keyWithHover];
-            if (hoverValue === null || hoverValue === undefined) {
-                return {
-                    normalStyle: __assign(__assign({}, acc.normalStyle), (_d = {}, _d[carouselCorePropertyKey] = getItemSpacing(value), _d)),
-                    hoverStyle: __assign({}, acc.hoverStyle)
-                };
-            }
             return {
-                normalStyle: __assign(__assign({}, acc.normalStyle), (_e = {}, _e[carouselCorePropertyKey] = getItemSpacing(value), _e)),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), (_f = {}, _f[carouselCorePropertyKey] = getItemSpacing(hoverValue), _f))
+                normalStyle: __assign(__assign({}, acc.normalStyle), (_c = {}, _c[carouselCorePropertyKey] = getItemSpacing(value), _c)),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), (_d = {}, _d[carouselCorePropertyKey] = getItemSpacing(hoverValue !== null && hoverValue !== void 0 ? hoverValue : value), _d))
             };
         }
         if (carouselCorePropertyKey === 'slidesPerGroup') {
             var value = props[keyWithDevice];
             var hoverValue = props[keyWithHover];
-            if (hoverValue === null || hoverValue === undefined) {
-                return {
-                    normalStyle: __assign(__assign({}, acc.normalStyle), (_g = {}, _g[carouselCorePropertyKey] = 1, _g)),
-                    hoverStyle: __assign({}, acc.hoverStyle)
-                };
-            }
-            if (value === 'ALL') {
-                return {
-                    normalStyle: __assign(__assign({}, acc.normalStyle), (_h = {}, _h[carouselCorePropertyKey] = contentsPropsPartials.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, _h)),
-                    hoverStyle: __assign(__assign({}, acc.hoverStyle), (_j = {}, _j[carouselCorePropertyKey] = contentsPropsPartials.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, _j))
-                };
-            }
-            if (value === 'SCROLL') {
-                return {
-                    normalStyle: __assign(__assign({}, acc.normalStyle), { scrollbar: { draggable: true }, freeMode: { enabled: true, sticky: false } }),
-                    hoverStyle: __assign(__assign({}, acc.hoverStyle), { scrollbar: { draggable: true }, freeMode: { enabled: true, sticky: false } })
-                };
-            }
-            // NOTE value === 'ONCE' 일때, Default 값
-            return {
-                normalStyle: __assign(__assign({}, acc.normalStyle), (_k = {}, _k[carouselCorePropertyKey] = 1, _k)),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), (_l = {}, _l[carouselCorePropertyKey] = 1, _l))
+            var displayCounts = contentsPropsPartials.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS;
+            return {
+                normalStyle: __assign(__assign({}, acc.normalStyle), getSlidesPerGroupConfig(value, displayCounts)),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), getSlidesPerGroupConfig(hoverValue !== null && hoverValue !== void 0 ? hoverValue : value, displayCounts))
             };
         }
         if (carouselCorePropertyKey === 'useAutoplay') {
@@ -85,16 +55,20 @@ function parseCarouselStyleToCarouselCoreProp(_a) {
             var hoverValue = props[keyWithHover];
             return {
                 normalStyle: __assign(__assign({}, acc.normalStyle), { useAutoplay: value === true }),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), { useAutoplay: hoverValue === true })
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { useAutoplay: (hoverValue !== null && hoverValue !== void 0 ? hoverValue : value) === true })
             };
         }
         if (carouselCorePropertyKey === 'autoplayDelay') {
             var value = props[keyWithDevice];
             var hoverValue = props[keyWithHover];
             return {
-                normalStyle: __assign(__assign({}, acc.normalStyle), { autoplay: { delay: value * 1000, disableOnInteraction: false, pauseOnMouseEnter: true } }),
+                normalStyle: __assign(__assign({}, acc.normalStyle), { autoplay: {
+                        delay: value * 1000,
+                        disableOnInteraction: false,
+                        pauseOnMouseEnter: true
+                    } }),
                 hoverStyle: __assign(__assign({}, acc.hoverStyle), { autoplay: {
-                        delay: hoverValue * 1000,
+                        delay: (hoverValue !== null && hoverValue !== void 0 ? hoverValue : value) * 1000,
                         disableOnInteraction: false,
                         pauseOnMouseEnter: true
                     } })
@@ -104,8 +78,8 @@ function parseCarouselStyleToCarouselCoreProp(_a) {
             var value = props[keyWithDevice];
             var hoverValue = props[keyWithHover];
             return {
-                normalStyle: __assign(__assign({}, acc.normalStyle), (_m = {}, _m[carouselCorePropertyKey] = value === false ? false : true, _m)),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), (_o = {}, _o[carouselCorePropertyKey] = hoverValue === false ? false : true, _o))
+                normalStyle: __assign(__assign({}, acc.normalStyle), (_e = {}, _e[carouselCorePropertyKey] = value, _e)),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), (_f = {}, _f[carouselCorePropertyKey] = hoverValue !== null && hoverValue !== void 0 ? hoverValue : value, _f))
             };
         }
         return {
@@ -155,321 +129,129 @@ function getCarouselCorePropKey(key) {
     }
 }
 exports.getCarouselCorePropKey = getCarouselCorePropKey;
+function getSlidesPerGroupConfig(cursorType, displayCounts) {
+    if (cursorType === 'ALL') {
+        return { slidesPerGroup: displayCounts };
+    }
+    if (cursorType === 'SCROLL') {
+        return {
+            scrollbar: { draggable: true },
+            freeMode: { enabled: true, sticky: false }
+        };
+    }
+    // 'ONCE'
+    return { slidesPerGroup: 1 };
+}
 function getStyle(value) {
     switch (value) {
         case 'DESIGN1':
             return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        height: 100%;\n        width: 100%;\n      "], ["\n        height: 100%;\n        width: 100%;\n      "])));
         case 'DESIGN2': {
-            var overlayEffect = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        background: rgba(255, 255, 255, 0.7);\n        content: '';\n        height: 100%;\n        position: absolute;\n        top: 0; /* \uD22C\uBA85\uB3C4 \uC870\uC808 (0 = \uC644\uC804 \uD22C\uBA85, 1 = \uBD88\uD22C\uBA85) */\n        width: 20%;\n        z-index: 2;\n      "], ["\n        background: rgba(255, 255, 255, 0.7);\n        content: '';\n        height: 100%;\n        position: absolute;\n        top: 0; /* \uD22C\uBA85\uB3C4 \uC870\uC808 (0 = \uC644\uC804 \uD22C\uBA85, 1 = \uBD88\uD22C\uBA85) */\n        width: 20%;\n        z-index: 2;\n      "])));
-            return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        overflow: hidden;\n        position: relative;\n\n        &::before {\n          ", "\n          left: 0;\n        }\n\n        &::after {\n          ", "\n          right: 0;\n        }\n      "], ["\n        overflow: hidden;\n        position: relative;\n\n        &::before {\n          ", "\n          left: 0;\n        }\n\n        &::after {\n          ", "\n          right: 0;\n        }\n      "])), overlayEffect, overlayEffect);
+            return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        height: 100%;\n        width: 100%;\n      "], ["\n        height: 100%;\n        width: 100%;\n      "])));
         }
         default: {
-            return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        height: 100%;\n        width: 100%;\n      "], ["\n        height: 100%;\n        width: 100%;\n      "])));
+            return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        height: 100%;\n        width: 100%;\n      "], ["\n        height: 100%;\n        width: 100%;\n      "])));
         }
     }
 }
 function getItemSpacing(value) {
-    var NORMAL = 40;
+    var NORMAL = 30;
     switch (value) {
         case 'WIDE':
             return 50;
         case 'NORMAL':
             return NORMAL;
         case 'NARROW':
-            return 30;
+            return 10;
         default:
             return NORMAL;
     }
 }
-function parseCarouselStyleToCustomPaginationProp(_a) {
+function parseCarouselStyleToCustomNavigationProp(_a) {
     var props = _a.props, device = _a.device;
     var availableSpecCodes = Object.keys(props).filter(function (key) { return !key.includes(':HOVER') && !key.includes(':MOBILE'); });
     return availableSpecCodes.reduce(function (acc, currentKey) {
         var keyWithDevice = device === 'DESKTOP' ? currentKey : "".concat(currentKey, ":MOBILE");
         var keyWithHover = "".concat(keyWithDevice.toString(), ":HOVER");
-        var customPaginationPropertyKey = getCustomPaginationPropKey(currentKey);
-        if (customPaginationPropertyKey === 'type') {
+        var customNavigationPropertyKey = getCustomNavigationPropKey(currentKey);
+        if (customNavigationPropertyKey === 'prevBtnType') {
             var value = props[keyWithDevice];
             var hoverValue = props[keyWithHover];
             return {
-                normalStyle: __assign(__assign({}, acc.normalStyle), { type: value }),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), { type: hoverValue })
+                normalStyle: __assign(__assign({}, acc.normalStyle), { prevBtnType: value }),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { prevBtnType: hoverValue !== null && hoverValue !== void 0 ? hoverValue : value })
             };
         }
-        if (customPaginationPropertyKey === 'offset') {
+        if (customNavigationPropertyKey === 'prevBtnOffset') {
             var value = props[keyWithDevice];
             var hoverValue = props[keyWithHover];
             return {
-                normalStyle: __assign(__assign({}, acc.normalStyle), { offset: getCustomPaginationOffset(value) }),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), { offset: getCustomPaginationOffset(hoverValue) })
+                normalStyle: __assign(__assign({}, acc.normalStyle), { prevBtnOffset: getCustomNavigationOffset(value) }),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { prevBtnOffset: getCustomNavigationOffset(hoverValue !== null && hoverValue !== void 0 ? hoverValue : value) })
             };
         }
-        if (customPaginationPropertyKey === 'size') {
+        if (customNavigationPropertyKey === 'prevBtnSize') {
             var value = props[keyWithDevice];
             var hoverValue = props[keyWithHover];
             return {
-                normalStyle: __assign(__assign({}, acc.normalStyle), { size: getCustomPaginationSize(value) }),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), { size: getCustomPaginationSize(hoverValue) })
+                normalStyle: __assign(__assign({}, acc.normalStyle), { prevBtnSize: getCustomNavigationSize(value) }),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { prevBtnSize: getCustomNavigationSize(hoverValue !== null && hoverValue !== void 0 ? hoverValue : value) })
             };
         }
-        return {
-            normalStyle: __assign({}, acc.normalStyle),
-            hoverStyle: __assign({}, acc.hoverStyle)
-        };
-    }, {
-        normalStyle: {},
-        hoverStyle: {}
-    });
-}
-exports.parseCarouselStyleToCustomPaginationProp = parseCarouselStyleToCustomPaginationProp;
-function getCustomPaginationPropKey(key) {
-    switch (key) {
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PAGINATIONSTYLE":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PAGINATIONSTYLE:HOVER":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PAGINATIONSTYLE:MOBILE":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PAGINATIONSTYLE:MOBILE:HOVER":
-            return 'type';
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PAGINATIONLOCATION":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PAGINATIONLOCATION:HOVER":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PAGINATIONLOCATION:MOBILE":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PAGINATIONLOCATION:MOBILE:HOVER":
-            return 'offset';
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PAGINATIONSIZE":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PAGINATIONSIZE:HOVER":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PAGINATIONSIZE:MOBILE":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PAGINATIONSIZE:MOBILE:HOVER":
-            return 'size';
-        default:
-            return '';
-    }
-}
-exports.getCustomPaginationPropKey = getCustomPaginationPropKey;
-function getCustomPaginationOffset(value) {
-    var OUTSET1 = {
-        top: '0px',
-        left: '0px',
-        translateX: 0,
-        translateY: -100,
-        transformOrigin: 'top left'
-    };
-    switch (value) {
-        case 'OUTSET1':
-            return OUTSET1;
-        case 'OUTSET2':
-            return {
-                top: '0px',
-                left: '50%',
-                translateX: -50,
-                translateY: -100,
-                transformOrigin: 'top left'
-            };
-        case 'OUTSET3':
-            return {
-                top: '0px',
-                left: '100%',
-                translateX: -100,
-                translateY: -100,
-                transformOrigin: 'top left'
-            };
-        case 'OUTSET4':
-            return {
-                top: '0px',
-                left: '100%',
-                translateX: 0,
-                translateY: 0,
-                transformOrigin: 'left top'
-            };
-        case 'OUTSET5':
-            return {
-                top: '50%',
-                left: '100%',
-                translateX: 0,
-                translateY: -50,
-                transformOrigin: 'left top'
-            };
-        case 'OUTSET6':
-            return {
-                top: '100%',
-                left: '100%',
-                translateX: 0,
-                translateY: -100,
-                transformOrigin: 'left top'
-            };
-        case 'OUTSET7':
-            return {
-                top: '100%',
-                left: '100%',
-                translateX: -100,
-                translateY: 0,
-                transformOrigin: 'top left'
-            };
-        case 'OUTSET8':
-            return {
-                top: '100%',
-                left: '50%',
-                translateX: -50,
-                translateY: 0,
-                transformOrigin: 'top left'
-            };
-        case 'OUTSET9':
-            return {
-                top: '100%',
-                left: '0px',
-                translateX: 0,
-                translateY: 0,
-                transformOrigin: 'top left'
-            };
-        case 'OUTSET10':
-            return {
-                top: '100%',
-                left: '0px',
-                translateX: -50,
-                translateY: -100,
-                transformOrigin: 'right top'
-            };
-        case 'OUTSET11':
-            return {
-                top: '50%',
-                left: '0px',
-                translateX: -50,
-                translateY: -50,
-                transformOrigin: 'right top'
-            };
-        case 'OUTSET12':
-            return {
-                top: '0px',
-                left: '0px',
-                translateX: -50,
-                translateY: 0,
-                transformOrigin: 'right top'
-            };
-        case 'INSET13':
-            return { top: '0px', left: '0px', translateX: 0, translateY: 0, transformOrigin: 'left top' };
-        case 'INSET14':
-            return {
-                top: '0px',
-                left: '50%',
-                translateX: -50,
-                translateY: 0,
-                transformOrigin: 'left top'
-            };
-        case 'INSET15':
-            return {
-                top: '0px',
-                left: '100%',
-                translateX: -100,
-                translateY: 0,
-                transformOrigin: 'left top'
-            };
-        case 'INSET16':
-            return {
-                top: '50%',
-                left: '100%',
-                translateX: -100,
-                translateY: -50,
-                transformOrigin: 'left top'
-            };
-        case 'INSET17':
-            return {
-                top: '100%',
-                left: '100%',
-                translateX: -100,
-                translateY: -100,
-                transformOrigin: 'left top'
-            };
-        case 'INSET18':
-            return {
-                top: '100%',
-                left: '50%',
-                translateX: -50,
-                translateY: -100,
-                transformOrigin: 'left top'
-            };
-        case 'INSET19':
-            return {
-                top: '100%',
-                left: '0px',
-                translateX: 0,
-                translateY: -100,
-                transformOrigin: 'top left'
-            };
-        case 'INSET20':
+        if (customNavigationPropertyKey === 'prevBtnPrimaryColor') {
+            var value = props[keyWithDevice];
+            var hoverValue = props[keyWithHover];
             return {
-                top: '50%',
-                left: '0px',
-                translateX: 0,
-                translateY: -50,
-                transformOrigin: 'top left'
+                normalStyle: __assign(__assign({}, acc.normalStyle), { prevBtnPrimaryColor: value }),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { prevBtnPrimaryColor: hoverValue !== null && hoverValue !== void 0 ? hoverValue : value })
             };
-        default:
-            return OUTSET1;
-    }
-}
-function getCustomPaginationSize(value) {
-    switch (value) {
-        case 'SMALL':
-            return 1;
-        case 'MEDIUM':
-            return 2;
-        case 'LARGE':
-            return 3;
-        default:
-            return 1;
-    }
-}
-function parseCarouselStyleToCustomNavigationProp(_a) {
-    var props = _a.props, device = _a.device;
-    var availableSpecCodes = Object.keys(props).filter(function (key) { return !key.includes(':HOVER') && !key.includes(':MOBILE'); });
-    return availableSpecCodes.reduce(function (acc, currentKey) {
-        var keyWithDevice = device === 'DESKTOP' ? currentKey : "".concat(currentKey, ":MOBILE");
-        var keyWithHover = "".concat(keyWithDevice.toString(), ":HOVER");
-        var customNavigationPropertyKey = getCustomNavigationPropKey(currentKey);
-        if (customNavigationPropertyKey === 'prevBtnType') {
+        }
+        if (customNavigationPropertyKey === 'prevBtnSecondaryColor') {
             var value = props[keyWithDevice];
             var hoverValue = props[keyWithHover];
             return {
-                normalStyle: __assign(__assign({}, acc.normalStyle), { prevBtnType: value }),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), { prevBtnType: hoverValue })
+                normalStyle: __assign(__assign({}, acc.normalStyle), { prevBtnSecondaryColor: value }),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { prevBtnSecondaryColor: hoverValue !== null && hoverValue !== void 0 ? hoverValue : value })
             };
         }
-        if (customNavigationPropertyKey === 'prevBtnOffset') {
+        if (customNavigationPropertyKey === 'nextBtnType') {
             var value = props[keyWithDevice];
             var hoverValue = props[keyWithHover];
             return {
-                normalStyle: __assign(__assign({}, acc.normalStyle), { prevBtnOffset: getCustomNavigationOffset(value) }),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), { prevBtnOffset: getCustomNavigationOffset(hoverValue) })
+                normalStyle: __assign(__assign({}, acc.normalStyle), { nextBtnType: value }),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { nextBtnType: hoverValue !== null && hoverValue !== void 0 ? hoverValue : value })
             };
         }
-        if (customNavigationPropertyKey === 'prevBtnSize') {
+        if (customNavigationPropertyKey === 'nextBtnOffset') {
             var value = props[keyWithDevice];
             var hoverValue = props[keyWithHover];
             return {
-                normalStyle: __assign(__assign({}, acc.normalStyle), { prevBtnSize: getCustomNavigationSize(value) }),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), { prevBtnSize: getCustomNavigationSize(hoverValue) })
+                normalStyle: __assign(__assign({}, acc.normalStyle), { nextBtnOffset: getCustomNavigationOffset(value) }),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { nextBtnOffset: getCustomNavigationOffset(hoverValue !== null && hoverValue !== void 0 ? hoverValue : value) })
             };
         }
-        if (customNavigationPropertyKey === 'nextBtnType') {
+        if (customNavigationPropertyKey === 'nextBtnSize') {
             var value = props[keyWithDevice];
             var hoverValue = props[keyWithHover];
             return {
-                normalStyle: __assign(__assign({}, acc.normalStyle), { nextBtnType: value }),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), { nextBtnType: hoverValue })
+                normalStyle: __assign(__assign({}, acc.normalStyle), { nextBtnSize: getCustomNavigationSize(value) }),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { nextBtnSize: getCustomNavigationSize(hoverValue !== null && hoverValue !== void 0 ? hoverValue : value) })
             };
         }
-        if (customNavigationPropertyKey === 'nextBtnOffset') {
+        if (customNavigationPropertyKey === 'nextBtnPrimaryColor') {
             var value = props[keyWithDevice];
             var hoverValue = props[keyWithHover];
             return {
-                normalStyle: __assign(__assign({}, acc.normalStyle), { nextBtnOffset: getCustomNavigationOffset(value) }),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), { nextBtnOffset: getCustomNavigationOffset(hoverValue) })
+                normalStyle: __assign(__assign({}, acc.normalStyle), { nextBtnPrimaryColor: value }),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { nextBtnPrimaryColor: hoverValue !== null && hoverValue !== void 0 ? hoverValue : value })
             };
         }
-        if (customNavigationPropertyKey === 'nextBtnSize') {
+        if (customNavigationPropertyKey === 'nextBtnSecondaryColor') {
             var value = props[keyWithDevice];
             var hoverValue = props[keyWithHover];
             return {
-                normalStyle: __assign(__assign({}, acc.normalStyle), { nextBtnSize: getCustomNavigationSize(value) }),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), { nextBtnSize: getCustomNavigationSize(hoverValue) })
+                normalStyle: __assign(__assign({}, acc.normalStyle), { nextBtnSecondaryColor: value }),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { nextBtnSecondaryColor: hoverValue !== null && hoverValue !== void 0 ? hoverValue : value })
             };
         }
         return {
@@ -499,6 +281,16 @@ function getCustomNavigationPropKey(key) {
         case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSIZE:MOBILE":
         case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSIZE:MOBILE:HOVER":
             return 'prevBtnSize';
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNPRIMARYCOLOR":
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNPRIMARYCOLOR:HOVER":
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNPRIMARYCOLOR:MOBILE":
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNPRIMARYCOLOR:MOBILE:HOVER":
+            return 'prevBtnPrimaryColor';
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSECONDARYCOLOR":
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSECONDARYCOLOR:HOVER":
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSECONDARYCOLOR:MOBILE":
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSECONDARYCOLOR:MOBILE:HOVER":
+            return 'prevBtnSecondaryColor';
         case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSTYLE":
         case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSTYLE:HOVER":
         case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSTYLE:MOBILE":
@@ -514,6 +306,16 @@ function getCustomNavigationPropKey(key) {
         case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSIZE:MOBILE":
         case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSIZE:MOBILE:HOVER":
             return 'nextBtnSize';
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNPRIMARYCOLOR":
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNPRIMARYCOLOR:HOVER":
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNPRIMARYCOLOR:MOBILE":
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNPRIMARYCOLOR:MOBILE:HOVER":
+            return 'nextBtnPrimaryColor';
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSECONDARYCOLOR":
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSECONDARYCOLOR:HOVER":
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSECONDARYCOLOR:MOBILE":
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSECONDARYCOLOR:MOBILE:HOVER":
+            return 'nextBtnSecondaryColor';
         default:
             return '';
     }
@@ -598,7 +400,7 @@ function getCustomNavigationOffset(value) {
             return {
                 top: '100%',
                 left: '0px',
-                translateX: -50,
+                translateX: -100,
                 translateY: -100,
                 transformOrigin: 'right top'
             };
@@ -606,7 +408,7 @@ function getCustomNavigationOffset(value) {
             return {
                 top: '50%',
                 left: '0px',
-                translateX: -50,
+                translateX: -100,
                 translateY: -50,
                 transformOrigin: 'right top'
             };
@@ -614,13 +416,13 @@ function getCustomNavigationOffset(value) {
             return {
                 top: '0px',
                 left: '0px',
-                translateX: -50,
+                translateX: -100,
                 translateY: 0,
                 transformOrigin: 'right top'
             };
-        case 'INSET13':
+        case 'INSET1':
             return { top: '0px', left: '0px', translateX: 0, translateY: 0, transformOrigin: 'left top' };
-        case 'INSET14':
+        case 'INSET2':
             return {
                 top: '0px',
                 left: '50%',
@@ -628,7 +430,7 @@ function getCustomNavigationOffset(value) {
                 translateY: 0,
                 transformOrigin: 'left top'
             };
-        case 'INSET15':
+        case 'INSET3':
             return {
                 top: '0px',
                 left: '100%',
@@ -636,7 +438,7 @@ function getCustomNavigationOffset(value) {
                 translateY: 0,
                 transformOrigin: 'left top'
             };
-        case 'INSET16':
+        case 'INSET4':
             return {
                 top: '50%',
                 left: '100%',
@@ -644,7 +446,7 @@ function getCustomNavigationOffset(value) {
                 translateY: -50,
                 transformOrigin: 'left top'
             };
-        case 'INSET17':
+        case 'INSET5':
             return {
                 top: '100%',
                 left: '100%',
@@ -652,7 +454,7 @@ function getCustomNavigationOffset(value) {
                 translateY: -100,
                 transformOrigin: 'left top'
             };
-        case 'INSET18':
+        case 'INSET6':
             return {
                 top: '100%',
                 left: '50%',
@@ -660,7 +462,7 @@ function getCustomNavigationOffset(value) {
                 translateY: -100,
                 transformOrigin: 'left top'
             };
-        case 'INSET19':
+        case 'INSET7':
             return {
                 top: '100%',
                 left: '0px',
@@ -668,7 +470,7 @@ function getCustomNavigationOffset(value) {
                 translateY: -100,
                 transformOrigin: 'top left'
             };
-        case 'INSET20':
+        case 'INSET8':
             return {
                 top: '50%',
                 left: '0px',
@@ -685,9 +487,9 @@ function getCustomNavigationSize(value) {
         case 'SMALL':
             return 1;
         case 'MEDIUM':
-            return 2;
+            return 1.5;
         case 'LARGE':
-            return 3;
+            return 2;
         default:
             return 1;
     }
@@ -704,16 +506,32 @@ function parseCarouselStyleToCustomProgressbarProp(_a) {
             var hoverValue = props[keyWithHover];
             return {
                 normalStyle: __assign(__assign({}, acc.normalStyle), { type: value }),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), { type: hoverValue })
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { type: hoverValue !== null && hoverValue !== void 0 ? hoverValue : value })
             };
         }
         if (customProgressbarPropertyKey === 'size') {
             var value = props[keyWithDevice];
             var hoverValue = props[keyWithHover];
-            var offset = getCustomProgressbarOffset('INSET17');
+            var offset = getCustomProgressbarOffset('INSET5');
             return {
                 normalStyle: __assign(__assign({}, acc.normalStyle), { size: getCustomProgressbarSize(value), offset: offset }),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), { size: getCustomProgressbarSize(hoverValue), offset: offset })
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { size: getCustomProgressbarSize(hoverValue !== null && hoverValue !== void 0 ? hoverValue : value), offset: offset })
+            };
+        }
+        if (customProgressbarPropertyKey === '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 (customProgressbarPropertyKey === '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 })
             };
         }
         return {
@@ -738,6 +556,16 @@ function getCustomProgressbarPropKey(key) {
         case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSIZE:MOBILE":
         case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSIZE:MOBILE:HOVER":
             return 'size';
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARPRIMARYCOLOR":
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARPRIMARYCOLOR:HOVER":
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARPRIMARYCOLOR:MOBILE":
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARPRIMARYCOLOR:MOBILE:HOVER":
+            return 'primaryColor';
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSECONDARYCOLOR":
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSECONDARYCOLOR:HOVER":
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSECONDARYCOLOR:MOBILE":
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSECONDARYCOLOR:MOBILE:HOVER":
+            return 'secondaryColor';
         default:
             return '';
     }
@@ -842,9 +670,9 @@ function getCustomProgressbarOffset(value) {
                 translateY: 0,
                 transformOrigin: 'right top'
             };
-        case 'INSET13':
+        case 'INSET1':
             return { top: '0px', left: '0px', translateX: 0, translateY: 0, transformOrigin: 'left top' };
-        case 'INSET14':
+        case 'INSET2':
             return {
                 top: '0px',
                 left: '50%',
@@ -852,7 +680,7 @@ function getCustomProgressbarOffset(value) {
                 translateY: 0,
                 transformOrigin: 'left top'
             };
-        case 'INSET15':
+        case 'INSET3':
             return {
                 top: '0px',
                 left: '100%',
@@ -860,7 +688,7 @@ function getCustomProgressbarOffset(value) {
                 translateY: 0,
                 transformOrigin: 'left top'
             };
-        case 'INSET16':
+        case 'INSET4':
             return {
                 top: '50%',
                 left: '100%',
@@ -868,7 +696,7 @@ function getCustomProgressbarOffset(value) {
                 translateY: -50,
                 transformOrigin: 'left top'
             };
-        case 'INSET17':
+        case 'INSET5':
             return {
                 top: '100%',
                 left: '100%',
@@ -876,7 +704,7 @@ function getCustomProgressbarOffset(value) {
                 translateY: -100,
                 transformOrigin: 'left top'
             };
-        case 'INSET18':
+        case 'INSET6':
             return {
                 top: '100%',
                 left: '50%',
@@ -884,7 +712,7 @@ function getCustomProgressbarOffset(value) {
                 translateY: -100,
                 transformOrigin: 'left top'
             };
-        case 'INSET19':
+        case 'INSET7':
             return {
                 top: '100%',
                 left: '0px',
@@ -892,7 +720,7 @@ function getCustomProgressbarOffset(value) {
                 translateY: -100,
                 transformOrigin: 'top left'
             };
-        case 'INSET20':
+        case 'INSET8':
             return {
                 top: '50%',
                 left: '0px',
@@ -909,11 +737,11 @@ function getCustomProgressbarSize(value) {
         case 'SMALL':
             return 1;
         case 'MEDIUM':
-            return 2;
+            return 1.5;
         case 'LARGE':
-            return 3;
+            return 2;
         default:
             return 1;
     }
 }
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3;