pds-dev-kit-web-test 2.5.470 → 2.5.480

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

@@ -1,134 +1,6 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
-        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];
-            return {
-                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];
-            return {
-                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];
-            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') {
-            var value = props[keyWithDevice];
-            var hoverValue = props[keyWithHover];
-            return {
-                normalStyle: __assign(__assign({}, acc.normalStyle), { useAutoplay: value === 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
-                    } }),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), { autoplay: {
-                        delay: (hoverValue !== null && hoverValue !== void 0 ? hoverValue : value) * 1000,
-                        disableOnInteraction: false,
-                        pauseOnMouseEnter: true
-                    } })
-            };
-        }
-        if (carouselCorePropertyKey === 'loop') {
-            var value = props[keyWithDevice];
-            var hoverValue = props[keyWithHover];
-            return {
-                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 {
-            normalStyle: __assign({}, acc.normalStyle),
-            hoverStyle: __assign({}, acc.hoverStyle)
-        };
-    }, {
-        normalStyle: {},
-        hoverStyle: {}
-    });
-}
-exports.parseCarouselStyleToCarouselCoreProp = parseCarouselStyleToCarouselCoreProp;
-function getCarouselCorePropKey(key) {
-    switch (key) {
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_STYLE":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_STYLE:HOVER":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_STYLE:MOBILE":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_STYLE:MOBILE:HOVER":
-            return 'customStyle';
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_ITEMSPACING":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_ITEMSPACING:HOVER":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_ITEMSPACING:MOBILE":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_ITEMSPACING:MOBILE:HOVER":
-            return 'spaceBetween';
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_ITEMCURSOR":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_ITEMCURSOR:HOVER":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_ITEMCURSOR:MOBILE":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_ITEMCURSOR:MOBILE:HOVER":
-            return 'slidesPerGroup';
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_AUTOPLAYUSE":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_AUTOPLAYUSE:HOVER":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_AUTOPLAYUSE:MOBILE":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_AUTOPLAYUSE:MOBILE:HOVER":
-            return 'useAutoplay';
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_AUTOPLAYTIME":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_AUTOPLAYTIME:HOVER":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_AUTOPLAYTIME:MOBILE":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_AUTOPLAYTIME:MOBILE:HOVER":
-            return 'autoplayDelay';
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_INFINITESCROLL":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_INFINITESCROLL:HOVER":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_INFINITESCROLL:MOBILE":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_INFINITESCROLL:MOBILE:HOVER":
-            return 'loop';
-        default:
-            return '';
-    }
-}
-exports.getCarouselCorePropKey = getCarouselCorePropKey;
+exports.parseCarouselStyleToCustomProgressbarProp = exports.parseCarouselStyleToCustomNavigationProp = exports.parseCarouselStyleToCarouselCoreProp = exports.getCustomProgressbarPropKey = exports.getCustomNavigationPropKey = exports.getCarouselCorePropKey = void 0;
 function getSlidesPerGroupConfig(cursorType, displayCounts) {
     if (cursorType === 'ALL') {
         return { slidesPerGroup: displayCounts };
@@ -145,12 +17,12 @@ function getSlidesPerGroupConfig(cursorType, displayCounts) {
 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      "])));
+            return undefined;
         case 'DESIGN2': {
-            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      "])));
+            return undefined;
         }
         default: {
-            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      "])));
+            return undefined;
         }
     }
 }
@@ -167,581 +39,144 @@ function getItemSpacing(value) {
             return NORMAL;
     }
 }
-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') {
-            var value = props[keyWithDevice];
-            var hoverValue = props[keyWithHover];
-            return {
-                normalStyle: __assign(__assign({}, acc.normalStyle), { prevBtnType: value }),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), { prevBtnType: hoverValue !== null && hoverValue !== void 0 ? hoverValue : value })
-            };
-        }
-        if (customNavigationPropertyKey === 'prevBtnOffset') {
-            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 !== null && hoverValue !== void 0 ? hoverValue : value) })
-            };
-        }
-        if (customNavigationPropertyKey === 'prevBtnSize') {
-            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 !== null && hoverValue !== void 0 ? hoverValue : value) })
-            };
-        }
-        if (customNavigationPropertyKey === 'prevBtnPrimaryColor') {
-            var value = props[keyWithDevice];
-            var hoverValue = props[keyWithHover];
-            return {
-                normalStyle: __assign(__assign({}, acc.normalStyle), { prevBtnPrimaryColor: value }),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), { prevBtnPrimaryColor: hoverValue !== null && hoverValue !== void 0 ? hoverValue : value })
-            };
-        }
-        if (customNavigationPropertyKey === 'prevBtnSecondaryColor') {
-            var value = props[keyWithDevice];
-            var hoverValue = props[keyWithHover];
-            return {
-                normalStyle: __assign(__assign({}, acc.normalStyle), { prevBtnSecondaryColor: value }),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), { prevBtnSecondaryColor: hoverValue !== null && hoverValue !== void 0 ? hoverValue : value })
-            };
-        }
-        if (customNavigationPropertyKey === 'nextBtnType') {
-            var value = props[keyWithDevice];
-            var hoverValue = props[keyWithHover];
-            return {
-                normalStyle: __assign(__assign({}, acc.normalStyle), { nextBtnType: value }),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), { nextBtnType: hoverValue !== null && hoverValue !== void 0 ? hoverValue : value })
-            };
-        }
-        if (customNavigationPropertyKey === 'nextBtnOffset') {
-            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 !== null && hoverValue !== void 0 ? hoverValue : value) })
-            };
-        }
-        if (customNavigationPropertyKey === 'nextBtnSize') {
-            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 !== null && hoverValue !== void 0 ? hoverValue : value) })
-            };
-        }
-        if (customNavigationPropertyKey === 'nextBtnPrimaryColor') {
-            var value = props[keyWithDevice];
-            var hoverValue = props[keyWithHover];
-            return {
-                normalStyle: __assign(__assign({}, acc.normalStyle), { nextBtnPrimaryColor: value }),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), { nextBtnPrimaryColor: hoverValue !== null && hoverValue !== void 0 ? hoverValue : value })
-            };
-        }
-        if (customNavigationPropertyKey === 'nextBtnSecondaryColor') {
-            var value = props[keyWithDevice];
-            var hoverValue = props[keyWithHover];
-            return {
-                normalStyle: __assign(__assign({}, acc.normalStyle), { nextBtnSecondaryColor: value }),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), { nextBtnSecondaryColor: hoverValue !== null && hoverValue !== void 0 ? hoverValue : value })
-            };
-        }
-        return {
-            normalStyle: __assign({}, acc.normalStyle),
-            hoverStyle: __assign({}, acc.hoverStyle)
-        };
-    }, {
-        normalStyle: {},
-        hoverStyle: {}
-    });
-}
-exports.parseCarouselStyleToCustomNavigationProp = parseCarouselStyleToCustomNavigationProp;
-function getCustomNavigationPropKey(key) {
+var transformValue = function (key, value, context) {
+    var _a, _b, _c, _d, _e;
     switch (key) {
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSTYLE":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSTYLE:HOVER":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSTYLE:MOBILE":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSTYLE:MOBILE:HOVER":
-            return 'prevBtnType';
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNLOCATION":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNLOCATION:HOVER":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNLOCATION:MOBILE":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNLOCATION:MOBILE:HOVER":
-            return 'prevBtnOffset';
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSIZE":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSIZE:HOVER":
-        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":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSTYLE:MOBILE:HOVER":
-            return 'nextBtnType';
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNLOCATION":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNLOCATION:HOVER":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNLOCATION:MOBILE":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNLOCATION:MOBILE:HOVER":
-            return 'nextBtnOffset';
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSIZE":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSIZE:HOVER":
-        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';
+        case 'customStyle':
+            return _a = {}, _a[key] = getStyle(value), _a;
+        case 'spaceBetween':
+            return _b = {}, _b[key] = getItemSpacing(value), _b;
+        case 'slidesPerGroup':
+            return getSlidesPerGroupConfig(value, context);
+        case 'useAutoplay':
+            return _c = {}, _c[key] = value === true, _c;
+        case 'autoplay':
+            return {
+                autoplay: {
+                    delay: value * 1000,
+                    disableOnInteraction: false,
+                    pauseOnMouseEnter: true
+                }
+            };
+        case 'loop':
+            return _d = {}, _d[key] = value, _d;
         default:
-            return '';
+            return _e = {}, _e[key] = value, _e;
     }
+};
+function getCarouselCorePropKey(key) {
+    var baseKey = key.split(':')[0];
+    var keyMapping = {
+        CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_STYLE: 'customStyle',
+        CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_ITEMSPACING: 'spaceBetween',
+        CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_ITEMCURSOR: 'slidesPerGroup',
+        CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_AUTOPLAYUSE: 'useAutoplay',
+        CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_AUTOPLAYTIME: 'autoplay',
+        CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_INFINITESCROLL: 'loop'
+    };
+    return keyMapping[baseKey] || null;
+}
+exports.getCarouselCorePropKey = getCarouselCorePropKey;
+function getCustomNavigationPropKey(key) {
+    var baseKey = key.split(':')[0];
+    var keyMapping = {
+        CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSTYLE: 'prevBtnType',
+        CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNLOCATION: 'prevBtnLocation',
+        CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSIZE: 'prevBtnSize',
+        CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNPRIMARYCOLOR: 'prevBtnPrimaryColor',
+        CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSECONDARYCOLOR: 'prevBtnSecondaryColor',
+        CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSTYLE: 'nextBtnType',
+        CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNLOCATION: 'nextBtnLocation',
+        CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSIZE: 'nextBtnSize',
+        CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNPRIMARYCOLOR: 'nextBtnPrimaryColor',
+        CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSECONDARYCOLOR: 'nextBtnSecondaryColor'
+    };
+    return keyMapping[baseKey] || null;
 }
 exports.getCustomNavigationPropKey = getCustomNavigationPropKey;
-function getCustomNavigationOffset(value) {
-    var OUTSET1 = {
-        top: '0px',
-        left: '0px',
-        translateX: 0,
-        translateY: -100,
-        transformOrigin: 'top left'
+function getCustomProgressbarPropKey(key) {
+    var baseKey = key.split(':')[0];
+    var keyMapping = {
+        CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBAR: 'type',
+        CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSIZE: 'size',
+        CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARPRIMARYCOLOR: 'primaryColor',
+        CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSECONDARYCOLOR: 'secondaryColor'
     };
-    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: -100,
-                translateY: -100,
-                transformOrigin: 'right top'
-            };
-        case 'OUTSET11':
-            return {
-                top: '50%',
-                left: '0px',
-                translateX: -100,
-                translateY: -50,
-                transformOrigin: 'right top'
-            };
-        case 'OUTSET12':
-            return {
-                top: '0px',
-                left: '0px',
-                translateX: -100,
-                translateY: 0,
-                transformOrigin: 'right top'
-            };
-        case 'INSET1':
-            return { top: '0px', left: '0px', translateX: 0, translateY: 0, transformOrigin: 'left top' };
-        case 'INSET2':
-            return {
-                top: '0px',
-                left: '50%',
-                translateX: -50,
-                translateY: 0,
-                transformOrigin: 'left top'
-            };
-        case 'INSET3':
-            return {
-                top: '0px',
-                left: '100%',
-                translateX: -100,
-                translateY: 0,
-                transformOrigin: 'left top'
-            };
-        case 'INSET4':
-            return {
-                top: '50%',
-                left: '100%',
-                translateX: -100,
-                translateY: -50,
-                transformOrigin: 'left top'
-            };
-        case 'INSET5':
-            return {
-                top: '100%',
-                left: '100%',
-                translateX: -100,
-                translateY: -100,
-                transformOrigin: 'left top'
-            };
-        case 'INSET6':
-            return {
-                top: '100%',
-                left: '50%',
-                translateX: -50,
-                translateY: -100,
-                transformOrigin: 'left top'
-            };
-        case 'INSET7':
-            return {
-                top: '100%',
-                left: '0px',
-                translateX: 0,
-                translateY: -100,
-                transformOrigin: 'top left'
-            };
-        case 'INSET8':
-            return {
-                top: '50%',
-                left: '0px',
-                translateX: 0,
-                translateY: -50,
-                transformOrigin: 'top left'
-            };
-        default:
-            return OUTSET1;
-    }
+    return keyMapping[baseKey] || null;
 }
-function getCustomNavigationSize(value) {
-    switch (value) {
-        case 'SMALL':
-            return 1;
-        case 'MEDIUM':
-            return 1.5;
-        case 'LARGE':
-            return 2;
-        default:
-            return 1;
-    }
+exports.getCustomProgressbarPropKey = getCustomProgressbarPropKey;
+function parseCarouselStyleToCarouselCoreProp(_a) {
+    var props = _a.props, device = _a.device, contentsPropsPartials = _a.contentsPropsPartials;
+    var normalStyle = {};
+    var hoverStyle = {};
+    var baseKeys = Object.keys(props).filter(function (key) { return !key.includes(':HOVER') && !key.includes(':MOBILE'); });
+    baseKeys.forEach(function (baseKey) {
+        var customNavKey = getCarouselCorePropKey(baseKey);
+        if (customNavKey) {
+            var deviceKey = device === 'DESKTOP' ? baseKey : "".concat(baseKey, ":MOBILE");
+            var hoverKey = "".concat(deviceKey, ":HOVER");
+            var normalValue = props[deviceKey];
+            var hoverValue = props[hoverKey];
+            var context = contentsPropsPartials === null || contentsPropsPartials === void 0 ? void 0 : contentsPropsPartials.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS;
+            if (normalValue !== undefined) {
+                Object.assign(normalStyle, transformValue(customNavKey, normalValue, context));
+            }
+            Object.assign(hoverStyle, transformValue(customNavKey, hoverValue !== null && hoverValue !== void 0 ? hoverValue : normalValue, context));
+        }
+    });
+    return {
+        normalStyle: normalStyle,
+        hoverStyle: hoverStyle
+    };
 }
-function parseCarouselStyleToCustomProgressbarProp(_a) {
+exports.parseCarouselStyleToCarouselCoreProp = parseCarouselStyleToCarouselCoreProp;
+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 customProgressbarPropertyKey = getCustomProgressbarPropKey(currentKey);
-        if (customProgressbarPropertyKey === 'type') {
-            var value = props[keyWithDevice];
-            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 })
-            };
-        }
-        if (customProgressbarPropertyKey === 'size') {
-            var value = props[keyWithDevice];
-            var hoverValue = props[keyWithHover];
-            var offset = getCustomProgressbarOffset('INSET5');
-            return {
-                normalStyle: __assign(__assign({}, acc.normalStyle), { size: getCustomProgressbarSize(value), 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 })
-            };
+    var normalStyle = {};
+    var hoverStyle = {};
+    var baseKeys = Object.keys(props).filter(function (key) { return !key.includes(':HOVER') && !key.includes(':MOBILE'); });
+    baseKeys.forEach(function (baseKey) {
+        var _a, _b;
+        var customNavKey = getCustomNavigationPropKey(baseKey);
+        if (customNavKey) {
+            var deviceKey = device === 'DESKTOP' ? baseKey : "".concat(baseKey, ":MOBILE");
+            var hoverKey = "".concat(deviceKey, ":HOVER");
+            var normalValue = props[deviceKey];
+            var hoverValue = props[hoverKey];
+            if (normalValue !== undefined) {
+                Object.assign(normalStyle, (_a = {}, _a[customNavKey] = normalValue, _a));
+            }
+            Object.assign(hoverStyle, (_b = {}, _b[customNavKey] = hoverValue !== null && hoverValue !== void 0 ? hoverValue : normalValue, _b));
         }
-        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 {
-            normalStyle: __assign({}, acc.normalStyle),
-            hoverStyle: __assign({}, acc.hoverStyle)
-        };
-    }, {
-        normalStyle: {},
-        hoverStyle: {}
     });
-}
-exports.parseCarouselStyleToCustomProgressbarProp = parseCarouselStyleToCustomProgressbarProp;
-function getCustomProgressbarPropKey(key) {
-    switch (key) {
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBAR":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBAR:HOVER":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBAR:MOBILE":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBAR:MOBILE:HOVER":
-            return 'type';
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSIZE":
-        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSIZE:HOVER":
-        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 '';
-    }
-}
-exports.getCustomProgressbarPropKey = getCustomProgressbarPropKey;
-function getCustomProgressbarOffset(value) {
-    var OUTSET1 = {
-        top: '0px',
-        left: '0px',
-        translateX: 0,
-        translateY: -100,
-        transformOrigin: 'top left'
+    return {
+        normalStyle: normalStyle,
+        hoverStyle: hoverStyle
     };
-    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',
-                right: '0px',
-                translateX: 0,
-                translateY: -100,
-                transformOrigin: 'top right'
-            };
-        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: -100,
-                translateY: -100,
-                transformOrigin: 'right top'
-            };
-        case 'OUTSET11':
-            return {
-                top: '50%',
-                left: '0px',
-                translateX: -100,
-                translateY: -50,
-                transformOrigin: 'right top'
-            };
-        case 'OUTSET12':
-            return {
-                top: '0px',
-                left: '0px',
-                translateX: -100,
-                translateY: 0,
-                transformOrigin: 'right top'
-            };
-        case 'INSET1':
-            return { top: '0px', left: '0px', translateX: 0, translateY: 0, transformOrigin: 'left top' };
-        case 'INSET2':
-            return {
-                top: '0px',
-                left: '50%',
-                translateX: -50,
-                translateY: 0,
-                transformOrigin: 'left top'
-            };
-        case 'INSET3':
-            return {
-                top: '0px',
-                left: '100%',
-                translateX: -100,
-                translateY: 0,
-                transformOrigin: 'left top'
-            };
-        case 'INSET4':
-            return {
-                top: '50%',
-                left: '100%',
-                translateX: -100,
-                translateY: -50,
-                transformOrigin: 'left top'
-            };
-        case 'INSET5':
-            return {
-                top: '100%',
-                left: '100%',
-                translateX: -100,
-                translateY: -100,
-                transformOrigin: 'left top'
-            };
-        case 'INSET6':
-            return {
-                top: '100%',
-                left: '50%',
-                translateX: -50,
-                translateY: -100,
-                transformOrigin: 'left top'
-            };
-        case 'INSET7':
-            return {
-                top: '100%',
-                left: '0px',
-                translateX: 0,
-                translateY: -100,
-                transformOrigin: 'top left'
-            };
-        case 'INSET8':
-            return {
-                top: '50%',
-                left: '0px',
-                translateX: 0,
-                translateY: -50,
-                transformOrigin: 'top left'
-            };
-        default:
-            return OUTSET1;
-    }
 }
-function getCustomProgressbarSize(value) {
-    switch (value) {
-        case 'SMALL':
-            return 1;
-        case 'MEDIUM':
-            return 1.5;
-        case 'LARGE':
-            return 2;
-        default:
-            return 1;
-    }
+exports.parseCarouselStyleToCustomNavigationProp = parseCarouselStyleToCustomNavigationProp;
+function parseCarouselStyleToCustomProgressbarProp(_a) {
+    var props = _a.props, device = _a.device;
+    var normalStyle = {};
+    var hoverStyle = {};
+    var baseKeys = Object.keys(props).filter(function (key) { return !key.includes(':HOVER') && !key.includes(':MOBILE'); });
+    baseKeys.forEach(function (baseKey) {
+        var _a, _b;
+        var customNavKey = getCustomProgressbarPropKey(baseKey);
+        if (customNavKey) {
+            var deviceKey = device === 'DESKTOP' ? baseKey : "".concat(baseKey, ":MOBILE");
+            var hoverKey = "".concat(deviceKey, ":HOVER");
+            var normalValue = props[deviceKey];
+            var hoverValue = props[hoverKey];
+            if (normalValue !== undefined) {
+                Object.assign(normalStyle, (_a = {}, _a[customNavKey] = normalValue, _a));
+            }
+            Object.assign(hoverStyle, (_b = {}, _b[customNavKey] = hoverValue !== null && hoverValue !== void 0 ? hoverValue : normalValue, _b));
+        }
+    });
+    return {
+        normalStyle: normalStyle,
+        hoverStyle: hoverStyle
+    };
 }
-var templateObject_1, templateObject_2, templateObject_3;
+exports.parseCarouselStyleToCustomProgressbarProp = parseCarouselStyleToCustomProgressbarProp;