pds-dev-kit-web-test 2.5.467 → 2.5.469

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

@@ -0,0 +1,956 @@
+"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.parseSlideBannerStyleToCustomProgressbarProp = exports.getCustomNavigationPropKey = exports.parseSlideBannerStyleToCustomNavigationProp = exports.getCustomPaginationPropKey = exports.parseSlideBannerStyleToCustomPaginationProp = exports.getSlideBannerCorePropKey = exports.parseSlideBannerStyleToSlideBannerCoreProp = void 0;
+var styled_components_1 = require("styled-components");
+function parseSlideBannerStyleToSlideBannerCoreProp(_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 _a, _b, _c, _d;
+        var keyWithDevice = device === 'DESKTOP' ? currentKey : "".concat(currentKey, ":MOBILE");
+        var keyWithHover = "".concat(keyWithDevice.toString(), ":HOVER");
+        var slideBannerCorePropertyKey = getSlideBannerCorePropKey(currentKey);
+        if (slideBannerCorePropertyKey === 'customStyle') {
+            var value = props[keyWithDevice];
+            var hoverValue = props[keyWithHover];
+            return {
+                normalStyle: __assign(__assign({}, acc.normalStyle), (_a = {}, _a[slideBannerCorePropertyKey] = getStyle(value), _a)),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), (_b = {}, _b[slideBannerCorePropertyKey] = getStyle(hoverValue !== null && hoverValue !== void 0 ? hoverValue : value), _b))
+            };
+        }
+        if (slideBannerCorePropertyKey === 'useAutoplay') {
+            var value = props[keyWithDevice];
+            var hoverValue = props[keyWithHover];
+            return {
+                normalStyle: __assign(__assign({}, acc.normalStyle), { useAutoplay: value }),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { useAutoplay: hoverValue !== null && hoverValue !== void 0 ? hoverValue : value })
+            };
+        }
+        if (slideBannerCorePropertyKey === '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 (slideBannerCorePropertyKey === 'loop') {
+            var value = props[keyWithDevice];
+            var hoverValue = props[keyWithHover];
+            return {
+                normalStyle: __assign(__assign({}, acc.normalStyle), (_c = {}, _c[slideBannerCorePropertyKey] = value, _c)),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), (_d = {}, _d[slideBannerCorePropertyKey] = hoverValue !== null && hoverValue !== void 0 ? hoverValue : value, _d))
+            };
+        }
+        return {
+            normalStyle: __assign({}, acc.normalStyle),
+            hoverStyle: __assign({}, acc.hoverStyle)
+        };
+    }, {
+        normalStyle: {},
+        hoverStyle: {}
+    });
+}
+exports.parseSlideBannerStyleToSlideBannerCoreProp = parseSlideBannerStyleToSlideBannerCoreProp;
+function getSlideBannerCorePropKey(key) {
+    switch (key) {
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_STYLE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_STYLE:HOVER":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_STYLE:MOBILE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_STYLE:MOBILE:HOVER":
+            return 'customStyle';
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_AUTOPLAYUSE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_AUTOPLAYUSE:HOVER":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_AUTOPLAYUSE:MOBILE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_AUTOPLAYUSE:MOBILE:HOVER":
+            return 'useAutoplay';
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_AUTOPLAYTIME":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_AUTOPLAYTIME:HOVER":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_AUTOPLAYTIME:MOBILE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_AUTOPLAYTIME:MOBILE:HOVER":
+            return 'autoplayDelay';
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_INFINITESCROLL":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_INFINITESCROLL:HOVER":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_INFINITESCROLL:MOBILE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_INFINITESCROLL:MOBILE:HOVER":
+            return 'loop';
+        default:
+            return '';
+    }
+}
+exports.getSlideBannerCorePropKey = getSlideBannerCorePropKey;
+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': {
+            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_3 || (templateObject_3 = __makeTemplateObject(["\n        height: 100%;\n        width: 100%;\n      "], ["\n        height: 100%;\n        width: 100%;\n      "])));
+        }
+    }
+}
+function parseSlideBannerStyleToCustomPaginationProp(_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 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 (customPaginationPropertyKey === 'offset') {
+            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 !== null && hoverValue !== void 0 ? hoverValue : value) })
+            };
+        }
+        if (customPaginationPropertyKey === 'size') {
+            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 !== 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 })
+            };
+        }
+        return {
+            normalStyle: __assign({}, acc.normalStyle),
+            hoverStyle: __assign({}, acc.hoverStyle)
+        };
+    }, {
+        normalStyle: {},
+        hoverStyle: {}
+    });
+}
+exports.parseSlideBannerStyleToCustomPaginationProp = parseSlideBannerStyleToCustomPaginationProp;
+function getCustomPaginationPropKey(key) {
+    switch (key) {
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSTYLE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSTYLE:HOVER":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSTYLE:MOBILE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSTYLE:MOBILE:HOVER":
+            return 'type';
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONLOCATION":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONLOCATION:HOVER":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONLOCATION:MOBILE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONLOCATION:MOBILE:HOVER":
+            return 'offset';
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSIZE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSIZE:HOVER":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSIZE:MOBILE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSIZE:MOBILE:HOVER":
+            return 'size';
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONPRIMARYCOLOR":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONPRIMARYCOLOR:HOVER":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONPRIMARYCOLOR:MOBILE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONPRIMARYCOLOR:MOBILE:HOVER":
+            return 'primaryColor';
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSECONDARYCOLOR":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSECONDARYCOLOR:HOVER":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSECONDARYCOLOR:MOBILE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSECONDARYCOLOR:MOBILE:HOVER":
+            return 'secondaryColor';
+        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: -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 getCustomPaginationSize(value) {
+    switch (value) {
+        case 'SMALL':
+            return 1;
+        case 'MEDIUM':
+            return 1.5;
+        case 'LARGE':
+            return 2;
+        default:
+            return 1;
+    }
+}
+function parseSlideBannerStyleToCustomNavigationProp(_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.parseSlideBannerStyleToCustomNavigationProp = parseSlideBannerStyleToCustomNavigationProp;
+function getCustomNavigationPropKey(key) {
+    switch (key) {
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSTYLE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSTYLE:HOVER":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSTYLE:MOBILE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSTYLE:MOBILE:HOVER":
+            return 'prevBtnType';
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNLOCATION":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNLOCATION:HOVER":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNLOCATION:MOBILE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNLOCATION:MOBILE:HOVER":
+            return 'prevBtnOffset';
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSIZE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSIZE:HOVER":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSIZE:MOBILE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSIZE:MOBILE:HOVER":
+            return 'prevBtnSize';
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR:HOVER":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR:MOBILE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR:MOBILE:HOVER":
+            return 'prevBtnPrimaryColor';
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR:HOVER":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR:MOBILE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR:MOBILE:HOVER":
+            return 'prevBtnSecondaryColor';
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSTYLE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSTYLE:HOVER":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSTYLE:MOBILE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSTYLE:MOBILE:HOVER":
+            return 'nextBtnType';
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNLOCATION":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNLOCATION:HOVER":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNLOCATION:MOBILE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNLOCATION:MOBILE:HOVER":
+            return 'nextBtnOffset';
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSIZE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSIZE:HOVER":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSIZE:MOBILE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSIZE:MOBILE:HOVER":
+            return 'nextBtnSize';
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNPRIMARYCOLOR":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNPRIMARYCOLOR:HOVER":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNPRIMARYCOLOR:MOBILE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNPRIMARYCOLOR:MOBILE:HOVER":
+            return 'nextBtnPrimaryColor';
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSECONDARYCOLOR":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSECONDARYCOLOR:HOVER":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSECONDARYCOLOR:MOBILE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSECONDARYCOLOR:MOBILE:HOVER":
+            return 'nextBtnSecondaryColor';
+        default:
+            return '';
+    }
+}
+exports.getCustomNavigationPropKey = getCustomNavigationPropKey;
+function getCustomNavigationOffset(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: -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 getCustomNavigationSize(value) {
+    switch (value) {
+        case 'SMALL':
+            return 1;
+        case 'MEDIUM':
+            return 1.5;
+        case 'LARGE':
+            return 3;
+        default:
+            return 2;
+    }
+}
+function parseSlideBannerStyleToCustomProgressbarProp(_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 })
+            };
+        }
+        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.parseSlideBannerStyleToCustomProgressbarProp = parseSlideBannerStyleToCustomProgressbarProp;
+function getCustomProgressbarPropKey(key) {
+    switch (key) {
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBAR":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBAR:HOVER":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBAR:MOBILE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBAR:MOBILE:HOVER":
+            return 'type';
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSIZE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSIZE:HOVER":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSIZE:MOBILE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSIZE:MOBILE:HOVER":
+            return 'size';
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARPRIMARYCOLOR":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARPRIMARYCOLOR:HOVER":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARPRIMARYCOLOR:MOBILE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARPRIMARYCOLOR:MOBILE:HOVER":
+            return 'primaryColor';
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSECONDARYCOLOR":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSECONDARYCOLOR:HOVER":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSECONDARYCOLOR:MOBILE":
+        case "CB_STYLE_PROP_SLIDEBANNER_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'
+    };
+    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;
+    }
+}
+var templateObject_1, templateObject_2, templateObject_3;