pds-dev-kit-web-test 2.5.407 → 2.5.408

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

@@ -42,76 +42,53 @@ exports.CustomProgressbar = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var styled_components_1 = __importStar(require("styled-components"));
-var progressConfigs_1 = require("./progressConfigs");
 var CustomProgressbar = function (_a) {
     var progressRef = _a.progressRef, leftTimeMsRef = _a.leftTimeMsRef, _b = _a.type, type = _b === void 0 ? 'NONE' : _b, _c = _a.offset, offset = _c === void 0 ? { top: '0' } : _c, _d = _a.size, size = _d === void 0 ? 1 : _d;
     var _e = (0, react_1.useState)(0), leftTimeSec = _e[0], setLeftTimeSec = _e[1];
     var _f = (0, react_1.useState)(0), progress = _f[0], setProgress = _f[1];
+    // 초 단위 렌더
     (0, react_1.useEffect)(function () {
-        var updateTimer = function () {
+        var id = setInterval(function () {
             var _a;
-            var sec = Math.abs(((_a = leftTimeMsRef.current) !== null && _a !== void 0 ? _a : 10000) / 1000);
+            var sec = Math.ceil(((_a = leftTimeMsRef.current) !== null && _a !== void 0 ? _a : 0) / 1000);
             setLeftTimeSec(sec);
-        };
-        updateTimer();
-        var id = setInterval(updateTimer, 1000);
+        }, 1000);
         return function () { return clearInterval(id); };
-    }, []);
+    }, [leftTimeMsRef]);
+    // 실시간 progress 반영
     (0, react_1.useEffect)(function () {
         var animationId;
-        var lastProgress = -1;
         var updateProgress = function () {
             var _a;
-            var currentProgress = (_a = progressRef.current) !== null && _a !== void 0 ? _a : 0;
-            // 소수점 3자리로 제한 (0.001 단위)
-            var fixedProgress = Math.round(currentProgress * 1000) / 1000;
-            // 0.5% 이상 변경시에만 업데이트
-            if (Math.abs(fixedProgress - lastProgress) > 0.005) {
-                setProgress(fixedProgress);
-                lastProgress = fixedProgress;
-            }
+            setProgress((_a = progressRef.current) !== null && _a !== void 0 ? _a : 0);
             animationId = requestAnimationFrame(updateProgress);
         };
         animationId = requestAnimationFrame(updateProgress);
         return function () { return cancelAnimationFrame(animationId); };
-    }, []);
-    var renderProgressByType = function () {
-        switch (type) {
-            case 'NONE':
-                return null;
-            case 'DESIGN1':
-                return (0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { progress: progress, leftTimeSec: leftTimeSec });
-            case 'DESIGN2':
-                return (0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign2, { progress: progress, leftTimeSec: leftTimeSec });
-            case 'DESIGN3':
-                return (0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign3, { progress: progress });
-            case 'DESIGN4':
-                return (0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign4, { progress: progress });
-            case 'DESIGN5':
-                return (0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign5, { progress: progress });
-            case 'DESIGN6':
-                return (0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign6, { progress: progress });
-            case 'DESIGN7':
-                return (0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign7, { progress: progress });
-            case 'DESIGN8':
-                return (0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign8, { progress: progress });
-            default:
-                return (0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { progress: progress, leftTimeSec: leftTimeSec });
-        }
-    };
-    return ((0, jsx_runtime_1.jsx)(S_ProgressWrapper, __assign({ "$offset": offset, "$size": size }, { children: renderProgressByType() })));
+    }, [progressRef]);
+    return ((0, jsx_runtime_1.jsx)(S_Progress, __assign({ className: "autoplay-progress", "$offset": offset, "$size": size }, { children: (function () {
+            switch (type) {
+                case 'NONE':
+                    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+                case 'DESIGN1':
+                case 'DESIGN2':
+                    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("svg", __assign({ viewBox: "0 0 48 48", style: { '--progress': 1 - progress } }, { children: (0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "20" }) })), (0, jsx_runtime_1.jsx)("span", { children: "".concat(Math.ceil(leftTimeSec), "s") })] }));
+                default:
+                    return (0, jsx_runtime_1.jsx)("div", { children: "Default Design" });
+            }
+        })() })));
 };
 exports.CustomProgressbar = CustomProgressbar;
-var S_ProgressWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  bottom: 16px;\n  height: fit-content;\n  left: 16px;\n  padding: 5px;\n  position: absolute;\n  right: 16px;\n  transform: ", ";\n  transform-origin: ", ";\n  width: max-content;\n  z-index: 10;\n\n  ", ";\n"], ["\n  bottom: 16px;\n  height: fit-content;\n  left: 16px;\n  padding: 5px;\n  position: absolute;\n  right: 16px;\n  transform: ", ";\n  transform-origin: ", ";\n  width: max-content;\n  z-index: 10;\n\n  ", ";\n"])), function (_a) {
+var S_Progress = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 5px;\n  position: absolute;\n  ", ";\n  transform: ", ";\n  transform-origin: ", ";\n  width: max-content;\n  z-index: 2;\n\n  &.autoplay-progress {\n    align-items: center;\n    bottom: 16px;\n    color: blue;\n    display: flex;\n    font-weight: bold;\n    height: 48px;\n    justify-content: center;\n    position: absolute;\n    right: 16px;\n    width: 48px;\n    z-index: 10;\n  }\n\n  &.autoplay-progress svg {\n    --progress: 0;\n    fill: none;\n    height: 100%;\n    left: 0;\n    position: absolute;\n    stroke: var(--swiper-theme-color);\n    stroke-dasharray: 125.6;\n    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n    stroke-width: 4px;\n    top: 0px;\n    transform: rotate(-90deg);\n    width: 100%;\n    z-index: 10;\n  }\n"], ["\n  padding: 5px;\n  position: absolute;\n  ", ";\n  transform: ", ";\n  transform-origin: ", ";\n  width: max-content;\n  z-index: 2;\n\n  &.autoplay-progress {\n    align-items: center;\n    bottom: 16px;\n    color: blue;\n    display: flex;\n    font-weight: bold;\n    height: 48px;\n    justify-content: center;\n    position: absolute;\n    right: 16px;\n    width: 48px;\n    z-index: 10;\n  }\n\n  &.autoplay-progress svg {\n    --progress: 0;\n    fill: none;\n    height: 100%;\n    left: 0;\n    position: absolute;\n    stroke: var(--swiper-theme-color);\n    stroke-dasharray: 125.6;\n    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n    stroke-width: 4px;\n    top: 0px;\n    transform: rotate(-90deg);\n    width: 100%;\n    z-index: 10;\n  }\n"])), function (_a) {
+    var $offset = _a.$offset;
+    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n      ", "\n      ", "\n    "])), $offset.top !== undefined ? "top: ".concat($offset.top, ";") : '', $offset.bottom !== undefined ? "bottom: ".concat($offset.bottom, ";") : '', $offset.left !== undefined ? "left: ".concat($offset.left, ";") : '', $offset.right !== undefined ? "right: ".concat($offset.right, ";") : '');
+}, function (_a) {
     var _b, _c;
     var $size = _a.$size, $offset = _a.$offset;
     return "scale(".concat($size, ") translate(").concat((_b = $offset.translateX) !== null && _b !== void 0 ? _b : 0, "%, ").concat((_c = $offset.translateY) !== null && _c !== void 0 ? _c : 0, "%)");
 }, function (_a) {
     var $offset = _a.$offset;
     return $offset.transformOrigin || 'center center';
-}, function (_a) {
-    var $offset = _a.$offset;
-    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n      ", "\n      ", "\n    "])), $offset.top !== undefined ? "top: ".concat($offset.top, ";") : '', $offset.bottom !== undefined ? "bottom: ".concat($offset.bottom, ";") : '', $offset.left !== undefined ? "left: ".concat($offset.left, ";") : '', $offset.right !== undefined ? "right: ".concat($offset.right, ";") : '');
 });
 exports.default = exports.CustomProgressbar;
 var templateObject_1, templateObject_2;

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

@@ -21,33 +21,63 @@ 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 _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         var keyWithDevice = device === 'DESKTOP' ? currentKey : "".concat(currentKey, ":MOBILE");
         var keyWithHover = "".concat(keyWithDevice.toString(), ":HOVER");
         var carouselCorePropertyKey = getCarouselCorePropKey(currentKey);
         if (carouselCorePropertyKey === 'customStyle') {
             var value = props[keyWithDevice];
             var hoverValue = props[keyWithHover];
+            if (hoverValue === null || hoverValue === undefined) {
+                return {
+                    normalStyle: __assign(__assign({}, acc.normalStyle), (_a = {}, _a[carouselCorePropertyKey] = getStyle(value), _a)),
+                    hoverStyle: __assign({}, acc.hoverStyle)
+                };
+            }
             return {
-                normalStyle: __assign(__assign({}, acc.normalStyle), (_a = {}, _a[carouselCorePropertyKey] = getStyle(value), _a)),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), (_b = {}, _b[carouselCorePropertyKey] = getStyle(hoverValue !== null && hoverValue !== void 0 ? hoverValue : value), _b))
+                normalStyle: __assign(__assign({}, acc.normalStyle), (_b = {}, _b[carouselCorePropertyKey] = getStyle(value), _b)),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), (_c = {}, _c[carouselCorePropertyKey] = getStyle(hoverValue), _c))
             };
         }
         if (carouselCorePropertyKey === 'spaceBetween') {
             var value = props[keyWithDevice];
             var hoverValue = props[keyWithHover];
+            if (hoverValue === null || hoverValue === undefined) {
+                return {
+                    normalStyle: __assign(__assign({}, acc.normalStyle), (_d = {}, _d[carouselCorePropertyKey] = getItemSpacing(value), _d)),
+                    hoverStyle: __assign({}, acc.hoverStyle)
+                };
+            }
             return {
-                normalStyle: __assign(__assign({}, acc.normalStyle), (_c = {}, _c[carouselCorePropertyKey] = getItemSpacing(value), _c)),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), (_d = {}, _d[carouselCorePropertyKey] = getItemSpacing(hoverValue !== null && hoverValue !== void 0 ? hoverValue : value), _d))
+                normalStyle: __assign(__assign({}, acc.normalStyle), (_e = {}, _e[carouselCorePropertyKey] = getItemSpacing(value), _e)),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), (_f = {}, _f[carouselCorePropertyKey] = getItemSpacing(hoverValue), _f))
             };
         }
         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 (hoverValue === null || hoverValue === undefined) {
+                return {
+                    normalStyle: __assign(__assign({}, acc.normalStyle), (_g = {}, _g[carouselCorePropertyKey] = 1, _g)),
+                    hoverStyle: __assign({}, acc.hoverStyle)
+                };
+            }
+            if (value === 'ALL') {
+                return {
+                    normalStyle: __assign(__assign({}, acc.normalStyle), (_h = {}, _h[carouselCorePropertyKey] = contentsPropsPartials.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, _h)),
+                    hoverStyle: __assign(__assign({}, acc.hoverStyle), (_j = {}, _j[carouselCorePropertyKey] = contentsPropsPartials.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, _j))
+                };
+            }
+            if (value === 'SCROLL') {
+                return {
+                    normalStyle: __assign(__assign({}, acc.normalStyle), { scrollbar: { draggable: true }, freeMode: { enabled: true, sticky: false } }),
+                    hoverStyle: __assign(__assign({}, acc.hoverStyle), { scrollbar: { draggable: true }, freeMode: { enabled: true, sticky: false } })
+                };
+            }
+            // NOTE value === 'ONCE' 일때, Default 값
+            return {
+                normalStyle: __assign(__assign({}, acc.normalStyle), (_k = {}, _k[carouselCorePropertyKey] = 1, _k)),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), (_l = {}, _l[carouselCorePropertyKey] = 1, _l))
             };
         }
         if (carouselCorePropertyKey === 'useAutoplay') {
@@ -55,20 +85,16 @@ function parseCarouselStyleToCarouselCoreProp(_a) {
             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 })
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { useAutoplay: hoverValue === true })
             };
         }
         if (carouselCorePropertyKey === 'autoplayDelay') {
             var value = props[keyWithDevice];
             var hoverValue = props[keyWithHover];
             return {
-                normalStyle: __assign(__assign({}, acc.normalStyle), { autoplay: {
-                        delay: value * 1000,
-                        disableOnInteraction: false,
-                        pauseOnMouseEnter: true
-                    } }),
+                normalStyle: __assign(__assign({}, acc.normalStyle), { autoplay: { delay: value * 1000, disableOnInteraction: false, pauseOnMouseEnter: true } }),
                 hoverStyle: __assign(__assign({}, acc.hoverStyle), { autoplay: {
-                        delay: (hoverValue !== null && hoverValue !== void 0 ? hoverValue : value) * 1000,
+                        delay: hoverValue * 1000,
                         disableOnInteraction: false,
                         pauseOnMouseEnter: true
                     } })
@@ -78,8 +104,8 @@ function parseCarouselStyleToCarouselCoreProp(_a) {
             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))
+                normalStyle: __assign(__assign({}, acc.normalStyle), (_m = {}, _m[carouselCorePropertyKey] = value === false ? false : true, _m)),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), (_o = {}, _o[carouselCorePropertyKey] = hoverValue === false ? false : true, _o))
             };
         }
         return {
@@ -129,40 +155,28 @@ function getCarouselCorePropKey(key) {
     }
 }
 exports.getCarouselCorePropKey = getCarouselCorePropKey;
-function getSlidesPerGroupConfig(cursorType, displayCounts) {
-    if (cursorType === 'ALL') {
-        return { slidesPerGroup: displayCounts };
-    }
-    if (cursorType === 'SCROLL') {
-        return {
-            scrollbar: { draggable: true },
-            freeMode: { enabled: true, sticky: false }
-        };
-    }
-    // 'ONCE'
-    return { slidesPerGroup: 1 };
-}
 function getStyle(value) {
     switch (value) {
         case 'DESIGN1':
             return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        height: 100%;\n        width: 100%;\n      "], ["\n        height: 100%;\n        width: 100%;\n      "])));
         case 'DESIGN2': {
-            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      "])));
+            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_3 || (templateObject_3 = __makeTemplateObject(["\n        height: 100%;\n        width: 100%;\n      "], ["\n        height: 100%;\n        width: 100%;\n      "])));
+            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 getItemSpacing(value) {
-    var NORMAL = 30;
+    var NORMAL = 40;
     switch (value) {
         case 'WIDE':
             return 50;
         case 'NORMAL':
             return NORMAL;
         case 'NARROW':
-            return 10;
+            return 30;
         default:
             return NORMAL;
     }
@@ -179,7 +193,7 @@ function parseCarouselStyleToCustomPaginationProp(_a) {
             var hoverValue = props[keyWithHover];
             return {
                 normalStyle: __assign(__assign({}, acc.normalStyle), { type: value }),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), { type: hoverValue !== null && hoverValue !== void 0 ? hoverValue : value })
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { type: hoverValue })
             };
         }
         if (customPaginationPropertyKey === 'offset') {
@@ -187,7 +201,7 @@ function parseCarouselStyleToCustomPaginationProp(_a) {
             var hoverValue = props[keyWithHover];
             return {
                 normalStyle: __assign(__assign({}, acc.normalStyle), { offset: getCustomPaginationOffset(value) }),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), { offset: getCustomPaginationOffset(hoverValue !== null && hoverValue !== void 0 ? hoverValue : value) })
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { offset: getCustomPaginationOffset(hoverValue) })
             };
         }
         if (customPaginationPropertyKey === 'size') {
@@ -195,7 +209,7 @@ function parseCarouselStyleToCustomPaginationProp(_a) {
             var hoverValue = props[keyWithHover];
             return {
                 normalStyle: __assign(__assign({}, acc.normalStyle), { size: getCustomPaginationSize(value) }),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), { size: getCustomPaginationSize(hoverValue !== null && hoverValue !== void 0 ? hoverValue : value) })
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { size: getCustomPaginationSize(hoverValue) })
             };
         }
         return {
@@ -309,7 +323,7 @@ function getCustomPaginationOffset(value) {
             return {
                 top: '100%',
                 left: '0px',
-                translateX: -100,
+                translateX: -50,
                 translateY: -100,
                 transformOrigin: 'right top'
             };
@@ -317,7 +331,7 @@ function getCustomPaginationOffset(value) {
             return {
                 top: '50%',
                 left: '0px',
-                translateX: -100,
+                translateX: -50,
                 translateY: -50,
                 transformOrigin: 'right top'
             };
@@ -325,13 +339,13 @@ function getCustomPaginationOffset(value) {
             return {
                 top: '0px',
                 left: '0px',
-                translateX: -100,
+                translateX: -50,
                 translateY: 0,
                 transformOrigin: 'right top'
             };
-        case 'INSET1':
+        case 'INSET13':
             return { top: '0px', left: '0px', translateX: 0, translateY: 0, transformOrigin: 'left top' };
-        case 'INSET2':
+        case 'INSET14':
             return {
                 top: '0px',
                 left: '50%',
@@ -339,7 +353,7 @@ function getCustomPaginationOffset(value) {
                 translateY: 0,
                 transformOrigin: 'left top'
             };
-        case 'INSET3':
+        case 'INSET15':
             return {
                 top: '0px',
                 left: '100%',
@@ -347,7 +361,7 @@ function getCustomPaginationOffset(value) {
                 translateY: 0,
                 transformOrigin: 'left top'
             };
-        case 'INSET4':
+        case 'INSET16':
             return {
                 top: '50%',
                 left: '100%',
@@ -355,7 +369,7 @@ function getCustomPaginationOffset(value) {
                 translateY: -50,
                 transformOrigin: 'left top'
             };
-        case 'INSET5':
+        case 'INSET17':
             return {
                 top: '100%',
                 left: '100%',
@@ -363,7 +377,7 @@ function getCustomPaginationOffset(value) {
                 translateY: -100,
                 transformOrigin: 'left top'
             };
-        case 'INSET6':
+        case 'INSET18':
             return {
                 top: '100%',
                 left: '50%',
@@ -371,7 +385,7 @@ function getCustomPaginationOffset(value) {
                 translateY: -100,
                 transformOrigin: 'left top'
             };
-        case 'INSET7':
+        case 'INSET19':
             return {
                 top: '100%',
                 left: '0px',
@@ -379,7 +393,7 @@ function getCustomPaginationOffset(value) {
                 translateY: -100,
                 transformOrigin: 'top left'
             };
-        case 'INSET8':
+        case 'INSET20':
             return {
                 top: '50%',
                 left: '0px',
@@ -396,9 +410,9 @@ function getCustomPaginationSize(value) {
         case 'SMALL':
             return 1;
         case 'MEDIUM':
-            return 1.5;
-        case 'LARGE':
             return 2;
+        case 'LARGE':
+            return 3;
         default:
             return 1;
     }
@@ -415,7 +429,7 @@ function parseCarouselStyleToCustomNavigationProp(_a) {
             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 })
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { prevBtnType: hoverValue })
             };
         }
         if (customNavigationPropertyKey === 'prevBtnOffset') {
@@ -423,7 +437,7 @@ function parseCarouselStyleToCustomNavigationProp(_a) {
             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) })
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { prevBtnOffset: getCustomNavigationOffset(hoverValue) })
             };
         }
         if (customNavigationPropertyKey === 'prevBtnSize') {
@@ -431,7 +445,7 @@ function parseCarouselStyleToCustomNavigationProp(_a) {
             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) })
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { prevBtnSize: getCustomNavigationSize(hoverValue) })
             };
         }
         if (customNavigationPropertyKey === 'nextBtnType') {
@@ -439,7 +453,7 @@ function parseCarouselStyleToCustomNavigationProp(_a) {
             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 })
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { nextBtnType: hoverValue })
             };
         }
         if (customNavigationPropertyKey === 'nextBtnOffset') {
@@ -447,7 +461,7 @@ function parseCarouselStyleToCustomNavigationProp(_a) {
             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) })
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { nextBtnOffset: getCustomNavigationOffset(hoverValue) })
             };
         }
         if (customNavigationPropertyKey === 'nextBtnSize') {
@@ -455,7 +469,7 @@ function parseCarouselStyleToCustomNavigationProp(_a) {
             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) })
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { nextBtnSize: getCustomNavigationSize(hoverValue) })
             };
         }
         return {
@@ -584,7 +598,7 @@ function getCustomNavigationOffset(value) {
             return {
                 top: '100%',
                 left: '0px',
-                translateX: -100,
+                translateX: -50,
                 translateY: -100,
                 transformOrigin: 'right top'
             };
@@ -592,7 +606,7 @@ function getCustomNavigationOffset(value) {
             return {
                 top: '50%',
                 left: '0px',
-                translateX: -100,
+                translateX: -50,
                 translateY: -50,
                 transformOrigin: 'right top'
             };
@@ -600,13 +614,13 @@ function getCustomNavigationOffset(value) {
             return {
                 top: '0px',
                 left: '0px',
-                translateX: -100,
+                translateX: -50,
                 translateY: 0,
                 transformOrigin: 'right top'
             };
-        case 'INSET1':
+        case 'INSET13':
             return { top: '0px', left: '0px', translateX: 0, translateY: 0, transformOrigin: 'left top' };
-        case 'INSET2':
+        case 'INSET14':
             return {
                 top: '0px',
                 left: '50%',
@@ -614,7 +628,7 @@ function getCustomNavigationOffset(value) {
                 translateY: 0,
                 transformOrigin: 'left top'
             };
-        case 'INSET3':
+        case 'INSET15':
             return {
                 top: '0px',
                 left: '100%',
@@ -622,7 +636,7 @@ function getCustomNavigationOffset(value) {
                 translateY: 0,
                 transformOrigin: 'left top'
             };
-        case 'INSET4':
+        case 'INSET16':
             return {
                 top: '50%',
                 left: '100%',
@@ -630,7 +644,7 @@ function getCustomNavigationOffset(value) {
                 translateY: -50,
                 transformOrigin: 'left top'
             };
-        case 'INSET5':
+        case 'INSET17':
             return {
                 top: '100%',
                 left: '100%',
@@ -638,7 +652,7 @@ function getCustomNavigationOffset(value) {
                 translateY: -100,
                 transformOrigin: 'left top'
             };
-        case 'INSET6':
+        case 'INSET18':
             return {
                 top: '100%',
                 left: '50%',
@@ -646,7 +660,7 @@ function getCustomNavigationOffset(value) {
                 translateY: -100,
                 transformOrigin: 'left top'
             };
-        case 'INSET7':
+        case 'INSET19':
             return {
                 top: '100%',
                 left: '0px',
@@ -654,7 +668,7 @@ function getCustomNavigationOffset(value) {
                 translateY: -100,
                 transformOrigin: 'top left'
             };
-        case 'INSET8':
+        case 'INSET20':
             return {
                 top: '50%',
                 left: '0px',
@@ -671,9 +685,9 @@ function getCustomNavigationSize(value) {
         case 'SMALL':
             return 1;
         case 'MEDIUM':
-            return 1.5;
-        case 'LARGE':
             return 2;
+        case 'LARGE':
+            return 3;
         default:
             return 1;
     }
@@ -690,16 +704,16 @@ function parseCarouselStyleToCustomProgressbarProp(_a) {
             var hoverValue = props[keyWithHover];
             return {
                 normalStyle: __assign(__assign({}, acc.normalStyle), { type: value }),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), { type: hoverValue !== null && hoverValue !== void 0 ? hoverValue : value })
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { type: hoverValue })
             };
         }
         if (customProgressbarPropertyKey === 'size') {
             var value = props[keyWithDevice];
             var hoverValue = props[keyWithHover];
-            var offset = getCustomProgressbarOffset('INSET5');
+            var offset = getCustomProgressbarOffset('INSET17');
             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 })
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { size: getCustomProgressbarSize(hoverValue), offset: offset })
             };
         }
         return {
@@ -828,9 +842,9 @@ function getCustomProgressbarOffset(value) {
                 translateY: 0,
                 transformOrigin: 'right top'
             };
-        case 'INSET1':
+        case 'INSET13':
             return { top: '0px', left: '0px', translateX: 0, translateY: 0, transformOrigin: 'left top' };
-        case 'INSET2':
+        case 'INSET14':
             return {
                 top: '0px',
                 left: '50%',
@@ -838,7 +852,7 @@ function getCustomProgressbarOffset(value) {
                 translateY: 0,
                 transformOrigin: 'left top'
             };
-        case 'INSET3':
+        case 'INSET15':
             return {
                 top: '0px',
                 left: '100%',
@@ -846,7 +860,7 @@ function getCustomProgressbarOffset(value) {
                 translateY: 0,
                 transformOrigin: 'left top'
             };
-        case 'INSET4':
+        case 'INSET16':
             return {
                 top: '50%',
                 left: '100%',
@@ -854,7 +868,7 @@ function getCustomProgressbarOffset(value) {
                 translateY: -50,
                 transformOrigin: 'left top'
             };
-        case 'INSET5':
+        case 'INSET17':
             return {
                 top: '100%',
                 left: '100%',
@@ -862,7 +876,7 @@ function getCustomProgressbarOffset(value) {
                 translateY: -100,
                 transformOrigin: 'left top'
             };
-        case 'INSET6':
+        case 'INSET18':
             return {
                 top: '100%',
                 left: '50%',
@@ -870,7 +884,7 @@ function getCustomProgressbarOffset(value) {
                 translateY: -100,
                 transformOrigin: 'left top'
             };
-        case 'INSET7':
+        case 'INSET19':
             return {
                 top: '100%',
                 left: '0px',
@@ -878,7 +892,7 @@ function getCustomProgressbarOffset(value) {
                 translateY: -100,
                 transformOrigin: 'top left'
             };
-        case 'INSET8':
+        case 'INSET20':
             return {
                 top: '50%',
                 left: '0px',
@@ -895,11 +909,11 @@ function getCustomProgressbarSize(value) {
         case 'SMALL':
             return 1;
         case 'MEDIUM':
-            return 1.5;
-        case 'LARGE':
             return 2;
+        case 'LARGE':
+            return 3;
         default:
             return 1;
     }
 }
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;