pds-dev-kit-web-test 2.5.321 → 2.5.323

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

@@ -1,855 +0,0 @@
-"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, _e;
-        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];
-            if (hoverValue === null || hoverValue === undefined) {
-                return {
-                    normalStyle: __assign(__assign({}, acc.normalStyle), (_a = {}, _a[slideBannerCorePropertyKey] = getStyle(value), _a)),
-                    hoverStyle: __assign({}, acc.hoverStyle)
-                };
-            }
-            return {
-                normalStyle: __assign(__assign({}, acc.normalStyle), (_b = {}, _b[slideBannerCorePropertyKey] = getStyle(value), _b)),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), (_c = {}, _c[slideBannerCorePropertyKey] = getStyle(hoverValue), _c))
-            };
-        }
-        if (slideBannerCorePropertyKey === 'useAutoplay') {
-            var value = props[keyWithDevice];
-            var hoverValue = props[keyWithHover];
-            return {
-                normalStyle: __assign(__assign({}, acc.normalStyle), { useAutoplay: value === 'USE' }),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), { useAutoplay: hoverValue === 'USE' })
-            };
-        }
-        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 * 1000,
-                        disableOnInteraction: false,
-                        pauseOnMouseEnter: true
-                    } })
-            };
-        }
-        if (slideBannerCorePropertyKey === 'loop') {
-            var value = props[keyWithDevice];
-            var hoverValue = props[keyWithHover];
-            return {
-                normalStyle: __assign(__assign({}, acc.normalStyle), (_d = {}, _d[slideBannerCorePropertyKey] = value === 'NONE' ? false : true, _d)),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), (_e = {}, _e[slideBannerCorePropertyKey] = hoverValue === 'NONE' ? false : true, _e))
-            };
-        }
-        return {
-            normalStyle: __assign({}, acc.normalStyle),
-            hoverStyle: __assign({}, acc.hoverStyle)
-        };
-    }, {
-        normalStyle: {},
-        hoverStyle: {}
-    });
-}
-exports.parseSlideBannerStyleToSlideBannerCoreProp = parseSlideBannerStyleToSlideBannerCoreProp;
-function getSlideBannerCorePropKey(key) {
-    switch (key) {
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_STYLE":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_STYLE:HOVER":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_STYLE:MOBILE":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_STYLE:MOBILE:HOVER":
-            return 'customStyle';
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_AUTOPLAYUSE":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_AUTOPLAYUSE:HOVER":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_AUTOPLAYUSE:MOBILE":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_AUTOPLAYUSE:MOBILE:HOVER":
-            return 'useAutoplay';
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_AUTOPLAYTIME":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_AUTOPLAYTIME:HOVER":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_AUTOPLAYTIME:MOBILE":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_AUTOPLAYTIME:MOBILE:HOVER":
-            return 'autoplayDelay';
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_INFINITESCROLL":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_INFINITESCROLL:HOVER":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_INFINITESCROLL:MOBILE":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_INFINITESCROLL:MOBILE:HOVER":
-            return 'loop';
-        default:
-            return '';
-    }
-}
-exports.getSlideBannerCorePropKey = getSlideBannerCorePropKey;
-function getStyle(value) {
-    switch (value) {
-        case 'OPTION_1':
-            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 'OPTION_2': {
-            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);
-        }
-        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      "])));
-        }
-    }
-}
-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 })
-            };
-        }
-        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) })
-            };
-        }
-        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) })
-            };
-        }
-        return {
-            normalStyle: __assign({}, acc.normalStyle),
-            hoverStyle: __assign({}, acc.hoverStyle)
-        };
-    }, {
-        normalStyle: {},
-        hoverStyle: {}
-    });
-}
-exports.parseSlideBannerStyleToCustomPaginationProp = parseSlideBannerStyleToCustomPaginationProp;
-function getCustomPaginationPropKey(key) {
-    switch (key) {
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_PAGINATIONSTYLE":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_PAGINATIONSTYLE:HOVER":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_PAGINATIONSTYLE:MOBILE":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_PAGINATIONSTYLE:MOBILE:HOVER":
-            return 'type';
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_PAGINATIONLOCATION":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_PAGINATIONLOCATION:HOVER":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_PAGINATIONLOCATION:MOBILE":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_PAGINATIONLOCATION:MOBILE:HOVER":
-            return 'offset';
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_PAGINATIONSIZE":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_PAGINATIONSIZE:HOVER":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_PAGINATIONSIZE:MOBILE":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_PAGINATIONSIZE:MOBILE:HOVER":
-            return 'size';
-        default:
-            return '';
-    }
-}
-exports.getCustomPaginationPropKey = getCustomPaginationPropKey;
-function getCustomPaginationOffset(value) {
-    var OPTION_1 = {
-        top: '0px',
-        left: '0px',
-        translateX: 0,
-        translateY: -100,
-        transformOrigin: 'top left'
-    };
-    switch (value) {
-        case 'OPTION_1':
-            return OPTION_1;
-        case 'OPTION_2':
-            return {
-                top: '0px',
-                left: '50%',
-                translateX: -50,
-                translateY: -100,
-                transformOrigin: 'top left'
-            };
-        case 'OPTION_3':
-            return {
-                top: '0px',
-                left: '100%',
-                translateX: -100,
-                translateY: -100,
-                transformOrigin: 'top left'
-            };
-        case 'OPTION_4':
-            return {
-                top: '0px',
-                left: '100%',
-                translateX: 0,
-                translateY: 0,
-                transformOrigin: 'left top'
-            };
-        case 'OPTION_5':
-            return {
-                top: '50%',
-                left: '100%',
-                translateX: 0,
-                translateY: -50,
-                transformOrigin: 'left top'
-            };
-        case 'OPTION_6':
-            return {
-                top: '100%',
-                left: '100%',
-                translateX: 0,
-                translateY: -100,
-                transformOrigin: 'left top'
-            };
-        case 'OPTION_7':
-            return {
-                top: '100%',
-                left: '100%',
-                translateX: -100,
-                translateY: 0,
-                transformOrigin: 'top left'
-            };
-        case 'OPTION_8':
-            return {
-                top: '100%',
-                left: '50%',
-                translateX: -50,
-                translateY: 0,
-                transformOrigin: 'top left'
-            };
-        case 'OPTION_9':
-            return {
-                top: '100%',
-                left: '0px',
-                translateX: 0,
-                translateY: 0,
-                transformOrigin: 'top left'
-            };
-        case 'OPTION_10':
-            return {
-                top: '100%',
-                left: '0px',
-                translateX: -50,
-                translateY: -100,
-                transformOrigin: 'right top'
-            };
-        case 'OPTION_11':
-            return {
-                top: '50%',
-                left: '0px',
-                translateX: -50,
-                translateY: -50,
-                transformOrigin: 'right top'
-            };
-        case 'OPTION_12':
-            return {
-                top: '0px',
-                left: '0px',
-                translateX: -50,
-                translateY: 0,
-                transformOrigin: 'right top'
-            };
-        case 'OPTION_13':
-            return { top: '0px', left: '0px', translateX: 0, translateY: 0, transformOrigin: 'left top' };
-        case 'OPTION_14':
-            return {
-                top: '0px',
-                left: '50%',
-                translateX: -50,
-                translateY: 0,
-                transformOrigin: 'left top'
-            };
-        case 'OPTION_15':
-            return {
-                top: '0px',
-                left: '100%',
-                translateX: -100,
-                translateY: 0,
-                transformOrigin: 'left top'
-            };
-        case 'OPTION_16':
-            return {
-                top: '50%',
-                left: '100%',
-                translateX: -100,
-                translateY: -50,
-                transformOrigin: 'left top'
-            };
-        case 'OPTION_17':
-            return {
-                top: '100%',
-                left: '100%',
-                translateX: -100,
-                translateY: -100,
-                transformOrigin: 'left top'
-            };
-        case 'OPTION_18':
-            return {
-                top: '100%',
-                left: '50%',
-                translateX: -50,
-                translateY: -100,
-                transformOrigin: 'left top'
-            };
-        case 'OPTION_19':
-            return {
-                top: '100%',
-                left: '0px',
-                translateX: 0,
-                translateY: -100,
-                transformOrigin: 'top left'
-            };
-        case 'OPTION_20':
-            return {
-                top: '50%',
-                left: '0px',
-                translateX: 0,
-                translateY: -50,
-                transformOrigin: 'top left'
-            };
-        default:
-            return OPTION_1;
-    }
-}
-function getCustomPaginationSize(value) {
-    switch (value) {
-        case 'SMALL':
-            return 1;
-        case 'MEDIUM':
-            return 2;
-        case 'LARGE':
-            return 3;
-        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 })
-            };
-        }
-        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) })
-            };
-        }
-        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) })
-            };
-        }
-        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 })
-            };
-        }
-        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) })
-            };
-        }
-        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) })
-            };
-        }
-        return {
-            normalStyle: __assign({}, acc.normalStyle),
-            hoverStyle: __assign({}, acc.hoverStyle)
-        };
-    }, {
-        normalStyle: {},
-        hoverStyle: {}
-    });
-}
-exports.parseSlideBannerStyleToCustomNavigationProp = parseSlideBannerStyleToCustomNavigationProp;
-function getCustomNavigationPropKey(key) {
-    switch (key) {
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_PREVBTNSTYLE":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_PREVBTNSTYLE:HOVER":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_PREVBTNSTYLE:MOBILE":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_PREVBTNSTYLE:MOBILE:HOVER":
-            return 'prevBtnType';
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_PREVBTNLOCATION":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_PREVBTNLOCATION:HOVER":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_PREVBTNLOCATION:MOBILE":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_PREVBTNLOCATION:MOBILE:HOVER":
-            return 'prevBtnOffset';
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_PREVBTNSIZE":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_PREVBTNSIZE:HOVER":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_PREVBTNSIZE:MOBILE":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_PREVBTNSIZE:MOBILE:HOVER":
-            return 'prevBtnSize';
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_NEXTBTNSTYLE":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_NEXTBTNSTYLE:HOVER":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_NEXTBTNSTYLE:MOBILE":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_NEXTBTNSTYLE:MOBILE:HOVER":
-            return 'nextBtnType';
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_NEXTBTNLOCATION":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_NEXTBTNLOCATION:HOVER":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_NEXTBTNLOCATION:MOBILE":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_NEXTBTNLOCATION:MOBILE:HOVER":
-            return 'nextBtnOffset';
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_NEXTBTNSIZE":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_NEXTBTNSIZE:HOVER":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_NEXTBTNSIZE:MOBILE":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_NEXTBTNSIZE:MOBILE:HOVER":
-            return 'nextBtnSize';
-        default:
-            return '';
-    }
-}
-exports.getCustomNavigationPropKey = getCustomNavigationPropKey;
-function getCustomNavigationOffset(value) {
-    var OPTION_1 = {
-        top: '0px',
-        left: '0px',
-        translateX: 0,
-        translateY: -100,
-        transformOrigin: 'top left'
-    };
-    switch (value) {
-        case 'OPTION_1':
-            return OPTION_1;
-        case 'OPTION_2':
-            return {
-                top: '0px',
-                left: '50%',
-                translateX: -50,
-                translateY: -100,
-                transformOrigin: 'top left'
-            };
-        case 'OPTION_3':
-            return {
-                top: '0px',
-                left: '100%',
-                translateX: -100,
-                translateY: -100,
-                transformOrigin: 'top left'
-            };
-        case 'OPTION_4':
-            return {
-                top: '0px',
-                left: '100%',
-                translateX: 0,
-                translateY: 0,
-                transformOrigin: 'left top'
-            };
-        case 'OPTION_5':
-            return {
-                top: '50%',
-                left: '100%',
-                translateX: 0,
-                translateY: -50,
-                transformOrigin: 'left top'
-            };
-        case 'OPTION_6':
-            return {
-                top: '100%',
-                left: '100%',
-                translateX: 0,
-                translateY: -100,
-                transformOrigin: 'left top'
-            };
-        case 'OPTION_7':
-            return {
-                top: '100%',
-                left: '100%',
-                translateX: -100,
-                translateY: 0,
-                transformOrigin: 'top left'
-            };
-        case 'OPTION_8':
-            return {
-                top: '100%',
-                left: '50%',
-                translateX: -50,
-                translateY: 0,
-                transformOrigin: 'top left'
-            };
-        case 'OPTION_9':
-            return {
-                top: '100%',
-                left: '0px',
-                translateX: 0,
-                translateY: 0,
-                transformOrigin: 'top left'
-            };
-        case 'OPTION_10':
-            return {
-                top: '100%',
-                left: '0px',
-                translateX: -50,
-                translateY: -100,
-                transformOrigin: 'right top'
-            };
-        case 'OPTION_11':
-            return {
-                top: '50%',
-                left: '0px',
-                translateX: -50,
-                translateY: -50,
-                transformOrigin: 'right top'
-            };
-        case 'OPTION_12':
-            return {
-                top: '0px',
-                left: '0px',
-                translateX: -50,
-                translateY: 0,
-                transformOrigin: 'right top'
-            };
-        case 'OPTION_13':
-            return { top: '0px', left: '0px', translateX: 0, translateY: 0, transformOrigin: 'left top' };
-        case 'OPTION_14':
-            return {
-                top: '0px',
-                left: '50%',
-                translateX: -50,
-                translateY: 0,
-                transformOrigin: 'left top'
-            };
-        case 'OPTION_15':
-            return {
-                top: '0px',
-                left: '100%',
-                translateX: -100,
-                translateY: 0,
-                transformOrigin: 'left top'
-            };
-        case 'OPTION_16':
-            return {
-                top: '50%',
-                left: '100%',
-                translateX: -100,
-                translateY: -50,
-                transformOrigin: 'left top'
-            };
-        case 'OPTION_17':
-            return {
-                top: '100%',
-                left: '100%',
-                translateX: -100,
-                translateY: -100,
-                transformOrigin: 'left top'
-            };
-        case 'OPTION_18':
-            return {
-                top: '100%',
-                left: '50%',
-                translateX: -50,
-                translateY: -100,
-                transformOrigin: 'left top'
-            };
-        case 'OPTION_19':
-            return {
-                top: '100%',
-                left: '0px',
-                translateX: 0,
-                translateY: -100,
-                transformOrigin: 'top left'
-            };
-        case 'OPTION_20':
-            return {
-                top: '50%',
-                left: '0px',
-                translateX: 0,
-                translateY: -50,
-                transformOrigin: 'top left'
-            };
-        default:
-            return OPTION_1;
-    }
-}
-function getCustomNavigationSize(value) {
-    switch (value) {
-        case 'SMALL':
-            return 1;
-        case 'MEDIUM':
-            return 2;
-        case 'LARGE':
-            return 3;
-        default:
-            return 1;
-    }
-}
-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 })
-            };
-        }
-        if (customProgressbarPropertyKey === 'size') {
-            var value = props[keyWithDevice];
-            var hoverValue = props[keyWithHover];
-            var offset = getCustomProgressbarOffset('OPTION_17');
-            return {
-                normalStyle: __assign(__assign({}, acc.normalStyle), { size: getCustomProgressbarSize(value), offset: offset }),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), { size: getCustomProgressbarSize(hoverValue), offset: offset })
-            };
-        }
-        return {
-            normalStyle: __assign({}, acc.normalStyle),
-            hoverStyle: __assign({}, acc.hoverStyle)
-        };
-    }, {
-        normalStyle: {},
-        hoverStyle: {}
-    });
-}
-exports.parseSlideBannerStyleToCustomProgressbarProp = parseSlideBannerStyleToCustomProgressbarProp;
-function getCustomProgressbarPropKey(key) {
-    switch (key) {
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_PROGRESSBAR":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_PROGRESSBAR:HOVER":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_PROGRESSBAR:MOBILE":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_PROGRESSBAR:MOBILE:HOVER":
-            return 'type';
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_PROGRESSBARSIZE":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_PROGRESSBARSIZE:HOVER":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_PROGRESSBARSIZE:MOBILE":
-        case "CB_STYLE_PROP_SLIDE_BANNER_SPEC_PROGRESSBARSIZE:MOBILE:HOVER":
-            return 'size';
-        default:
-            return '';
-    }
-}
-exports.getCustomProgressbarPropKey = getCustomProgressbarPropKey;
-function getCustomProgressbarOffset(value) {
-    var OPTION_1 = {
-        top: '0px',
-        left: '0px',
-        translateX: 0,
-        translateY: -100,
-        transformOrigin: 'top left'
-    };
-    switch (value) {
-        case 'OPTION_1':
-            return OPTION_1;
-        case 'OPTION_2':
-            return {
-                top: '0px',
-                left: '50%',
-                translateX: -50,
-                translateY: -100,
-                transformOrigin: 'top left'
-            };
-        case 'OPTION_3':
-            return {
-                top: '0px',
-                right: '0px',
-                translateX: 0,
-                translateY: -100,
-                transformOrigin: 'top right'
-            };
-        case 'OPTION_4':
-            return {
-                top: '0px',
-                left: '100%',
-                translateX: 0,
-                translateY: 0,
-                transformOrigin: 'left top'
-            };
-        case 'OPTION_5':
-            return {
-                top: '50%',
-                left: '100%',
-                translateX: 0,
-                translateY: -50,
-                transformOrigin: 'left top'
-            };
-        case 'OPTION_6':
-            return {
-                top: '100%',
-                left: '100%',
-                translateX: 0,
-                translateY: -100,
-                transformOrigin: 'left top'
-            };
-        case 'OPTION_7':
-            return {
-                top: '100%',
-                left: '100%',
-                translateX: -100,
-                translateY: 0,
-                transformOrigin: 'top left'
-            };
-        case 'OPTION_8':
-            return {
-                top: '100%',
-                left: '50%',
-                translateX: -50,
-                translateY: 0,
-                transformOrigin: 'top left'
-            };
-        case 'OPTION_9':
-            return {
-                top: '100%',
-                left: '0px',
-                translateX: 0,
-                translateY: 0,
-                transformOrigin: 'top left'
-            };
-        case 'OPTION_10':
-            return {
-                top: '100%',
-                left: '0px',
-                translateX: -100,
-                translateY: -100,
-                transformOrigin: 'right top'
-            };
-        case 'OPTION_11':
-            return {
-                top: '50%',
-                left: '0px',
-                translateX: -100,
-                translateY: -50,
-                transformOrigin: 'right top'
-            };
-        case 'OPTION_12':
-            return {
-                top: '0px',
-                left: '0px',
-                translateX: -100,
-                translateY: 0,
-                transformOrigin: 'right top'
-            };
-        case 'OPTION_13':
-            return { top: '0px', left: '0px', translateX: 0, translateY: 0, transformOrigin: 'left top' };
-        case 'OPTION_14':
-            return {
-                top: '0px',
-                left: '50%',
-                translateX: -50,
-                translateY: 0,
-                transformOrigin: 'left top'
-            };
-        case 'OPTION_15':
-            return {
-                top: '0px',
-                left: '100%',
-                translateX: -100,
-                translateY: 0,
-                transformOrigin: 'left top'
-            };
-        case 'OPTION_16':
-            return {
-                top: '50%',
-                left: '100%',
-                translateX: -100,
-                translateY: -50,
-                transformOrigin: 'left top'
-            };
-        case 'OPTION_17':
-            return {
-                top: '100%',
-                left: '100%',
-                translateX: -100,
-                translateY: -100,
-                transformOrigin: 'left top'
-            };
-        case 'OPTION_18':
-            return {
-                top: '100%',
-                left: '50%',
-                translateX: -50,
-                translateY: -100,
-                transformOrigin: 'left top'
-            };
-        case 'OPTION_19':
-            return {
-                top: '100%',
-                left: '0px',
-                translateX: 0,
-                translateY: -100,
-                transformOrigin: 'top left'
-            };
-        case 'OPTION_20':
-            return {
-                top: '50%',
-                left: '0px',
-                translateX: 0,
-                translateY: -50,
-                transformOrigin: 'top left'
-            };
-        default:
-            return OPTION_1;
-    }
-}
-function getCustomProgressbarSize(value) {
-    switch (value) {
-        case 'SMALL':
-            return 1;
-        case 'MEDIUM':
-            return 2;
-        case 'LARGE':
-            return 3;
-        default:
-            return 1;
-    }
-}
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;