pds-dev-kit-web-test 2.5.409 → 2.5.411

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

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

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/types.d.ts

@@ -4,14 +4,14 @@ export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_STYLE_TYPE = 'DESIGN1' | 'DESIGN
 export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_ITEMSPACING_TYPE = 'WIDE' | 'NORMAL' | 'NARROW';
 export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_ITEMCURSOR_TYPE = 'ONCE' | 'ALL' | 'SCROLL';
 export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_INFINITESCROLL_TYPE = boolean;
-export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PAGINATIONSTYLE_TYPE = 'NONE' | 'DESIGN1' | 'DESIGN2' | 'DESIGN3' | 'DESIGN4' | 'DESIGN5' | 'DESIGN6' | 'DESIGN7' | 'DESIGN8' | 'DESIGN9' | 'DESIGN10' | 'DESIGN11' | 'DESIGN12' | 'DESIGN13' | 'DESIGN14' | 'DESIGN15' | 'DESIGN16' | 'DESIGN17';
-export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PAGINATIONLOCATION_TYPE = 'OUTSET1' | 'OUTSET2' | 'OUTSET3' | 'OUTSET4' | 'OUTSET5' | 'OUTSET6' | 'OUTSET7' | 'OUTSET8' | 'OUTSET9' | 'OUTSET10' | 'OUTSET11' | 'OUTSET12' | 'INSET13' | 'INSET14' | 'INSET15' | 'INSET16' | 'INSET17' | 'INSET18' | 'INSET19' | 'INSET20';
+export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PAGINATIONSTYLE_TYPE = 'NONE' | 'DESIGN1' | 'DESIGN2' | 'DESIGN3' | 'DESIGN4' | 'DESIGN5' | 'DESIGN6' | 'DESIGN7' | 'DESIGN8' | 'DESIGN9' | 'DESIGN10' | 'DESIGN11' | 'DESIGN12' | 'DESIGN13' | 'DESIGN14' | 'DESIGN15' | 'DESIGN16';
+export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PAGINATIONLOCATION_TYPE = 'OUTSET1' | 'OUTSET2' | 'OUTSET3' | 'OUTSET4' | 'OUTSET5' | 'OUTSET6' | 'OUTSET7' | 'OUTSET8' | 'OUTSET9' | 'OUTSET10' | 'OUTSET11' | 'OUTSET12' | 'INSET1' | 'INSET2' | 'INSET3' | 'INSET4' | 'INSET5' | 'INSET6' | 'INSET7' | 'INSET8';
 export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PAGINATIONSIZE_TYPE = 'SMALL' | 'MEDIUM' | 'LARGE';
-export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSTYLE_TYPE = 'NONE' | 'DESIGN1' | 'DESIGN2' | 'DESIGN3' | 'DESIGN4' | 'DESIGN5' | 'DESIGN6' | 'DESIGN7' | 'DESIGN8' | 'DESIGN9' | 'DESIGN10' | 'DESIGN11' | 'DESIGN12' | 'DESIGN13' | 'DESIGN14' | 'DESIGN15' | 'DESIGN16' | 'DESIGN17' | 'DESIGN18' | 'DESIGN19' | 'DESIGN20';
-export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNLOCATION_TYPE = 'OUTSET1' | 'OUTSET2' | 'OUTSET3' | 'OUTSET4' | 'OUTSET5' | 'OUTSET6' | 'OUTSET7' | 'OUTSET8' | 'OUTSET9' | 'OUTSET10' | 'OUTSET11' | 'OUTSET12' | 'INSET13' | 'INSET14' | 'INSET15' | 'INSET16' | 'INSET17' | 'INSET18' | 'INSET19' | 'INSET20';
+export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSTYLE_TYPE = 'NONE' | 'DESIGN1' | 'DESIGN2' | 'DESIGN3' | 'DESIGN4' | 'DESIGN5' | 'DESIGN6' | 'DESIGN7' | 'DESIGN8' | 'DESIGN9' | 'DESIGN10' | 'DESIGN11' | 'DESIGN12' | 'DESIGN13' | 'DESIGN14' | 'DESIGN15' | 'DESIGN16' | 'DESIGN17' | 'DESIGN18' | 'DESIGN19' | 'DESIGN20' | 'DESIGN21' | 'DESIGN22' | 'DESIGN23' | 'DESIGN24' | 'DESIGN25' | 'DESIGN26' | 'DESIGN27' | 'DESIGN28' | 'DESIGN29' | 'DESIGN30' | 'DESIGN31' | 'DESIGN32' | 'DESIGN33' | 'DESIGN34' | 'DESIGN35' | 'DESIGN36' | 'DESIGN37' | 'DESIGN38' | 'DESIGN39' | 'DESIGN40' | 'DESIGN41' | 'DESIGN42' | 'DESIGN43' | 'DESIGN44' | 'DESIGN45' | 'DESIGN46' | 'DESIGN47' | 'DESIGN48' | 'DESIGN49' | 'DESIGN50' | 'DESIGN51' | 'DESIGN52' | 'DESIGN53' | 'DESIGN54' | 'DESIGN55' | 'DESIGN56' | 'DESIGN57' | 'DESIGN58' | 'DESIGN59' | 'DESIGN60' | 'DESIGN61' | 'DESIGN62' | 'DESIGN63' | 'DESIGN64' | 'DESIGN65' | 'DESIGN66' | 'DESIGN67' | 'DESIGN68' | 'DESIGN69' | 'DESIGN70' | 'DESIGN71' | 'DESIGN72' | 'DESIGN73' | 'DESIGN74' | 'DESIGN75' | 'DESIGN76' | 'DESIGN77' | 'DESIGN78' | 'DESIGN79' | 'DESIGN80' | 'DESIGN81' | 'DESIGN82' | 'DESIGN83' | 'DESIGN84' | 'DESIGN85' | 'DESIGN86' | 'DESIGN87' | 'DESIGN88' | 'DESIGN89' | 'DESIGN90' | 'DESIGN91' | 'DESIGN92' | 'DESIGN93' | 'DESIGN94' | 'DESIGN95' | 'DESIGN96' | 'DESIGN97' | 'DESIGN98' | 'DESIGN99' | 'DESIGN100';
+export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNLOCATION_TYPE = 'OUTSET1' | 'OUTSET2' | 'OUTSET3' | 'OUTSET4' | 'OUTSET5' | 'OUTSET6' | 'OUTSET7' | 'OUTSET8' | 'OUTSET9' | 'OUTSET10' | 'OUTSET11' | 'OUTSET12' | 'INSET1' | 'INSET2' | 'INSET3' | 'INSET4' | 'INSET5' | 'INSET6' | 'INSET7' | 'INSET8';
 export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSIZE_TYPE = 'SMALL' | 'MEDIUM' | 'LARGE';
-export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSTYLE_TYPE = 'NONE' | 'DESIGN1' | 'DESIGN2' | 'DESIGN3' | 'DESIGN4' | 'DESIGN2' | 'DESIGN3' | 'DESIGN4' | 'DESIGN5' | 'DESIGN6' | 'DESIGN7' | 'DESIGN8' | 'DESIGN9' | 'DESIGN10' | 'DESIGN11' | 'DESIGN12' | 'DESIGN13' | 'DESIGN14' | 'DESIGN15' | 'DESIGN16' | 'DESIGN17' | 'DESIGN18' | 'DESIGN19' | 'DESIGN20';
-export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC__NEXTBTNLOCATION_TYPE = 'OUTSET1' | 'OUTSET2' | 'OUTSET3' | 'OUTSET4' | 'OUTSET5' | 'OUTSET6' | 'OUTSET7' | 'OUTSET8' | 'OUTSET9' | 'OUTSET10' | 'OUTSET11' | 'OUTSET12' | 'INSET13' | 'INSET14' | 'INSET15' | 'INSET16' | 'INSET17' | 'INSET18' | 'INSET19' | 'INSET20';
+export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSTYLE_TYPE = 'NONE' | 'DESIGN1' | 'DESIGN2' | 'DESIGN3' | 'DESIGN4' | 'DESIGN5' | 'DESIGN6' | 'DESIGN7' | 'DESIGN8' | 'DESIGN9' | 'DESIGN10' | 'DESIGN11' | 'DESIGN12' | 'DESIGN13' | 'DESIGN14' | 'DESIGN15' | 'DESIGN16' | 'DESIGN17' | 'DESIGN18' | 'DESIGN19' | 'DESIGN20' | 'DESIGN21' | 'DESIGN22' | 'DESIGN23' | 'DESIGN24' | 'DESIGN25' | 'DESIGN26' | 'DESIGN27' | 'DESIGN28' | 'DESIGN29' | 'DESIGN30' | 'DESIGN31' | 'DESIGN32' | 'DESIGN33' | 'DESIGN34' | 'DESIGN35' | 'DESIGN36' | 'DESIGN37' | 'DESIGN38' | 'DESIGN39' | 'DESIGN40' | 'DESIGN41' | 'DESIGN42' | 'DESIGN43' | 'DESIGN44' | 'DESIGN45' | 'DESIGN46' | 'DESIGN47' | 'DESIGN48' | 'DESIGN49' | 'DESIGN50' | 'DESIGN51' | 'DESIGN52' | 'DESIGN53' | 'DESIGN54' | 'DESIGN55' | 'DESIGN56' | 'DESIGN57' | 'DESIGN58' | 'DESIGN59' | 'DESIGN60' | 'DESIGN61' | 'DESIGN62' | 'DESIGN63' | 'DESIGN64' | 'DESIGN65' | 'DESIGN66' | 'DESIGN67' | 'DESIGN68' | 'DESIGN69' | 'DESIGN70' | 'DESIGN71' | 'DESIGN72' | 'DESIGN73' | 'DESIGN74' | 'DESIGN75' | 'DESIGN76' | 'DESIGN77' | 'DESIGN78' | 'DESIGN79' | 'DESIGN80' | 'DESIGN81' | 'DESIGN82' | 'DESIGN83' | 'DESIGN84' | 'DESIGN85' | 'DESIGN86' | 'DESIGN87' | 'DESIGN88' | 'DESIGN89' | 'DESIGN90' | 'DESIGN91' | 'DESIGN92' | 'DESIGN93' | 'DESIGN94' | 'DESIGN95' | 'DESIGN96' | 'DESIGN97' | 'DESIGN98' | 'DESIGN99' | 'DESIGN100';
+export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC__NEXTBTNLOCATION_TYPE = 'OUTSET1' | 'OUTSET2' | 'OUTSET3' | 'OUTSET4' | 'OUTSET5' | 'OUTSET6' | 'OUTSET7' | 'OUTSET8' | 'OUTSET9' | 'OUTSET10' | 'OUTSET11' | 'OUTSET12' | 'INSET1' | 'INSET2' | 'INSET3' | 'INSET4' | 'INSET5' | 'INSET6' | 'INSET7' | 'INSET8';
 export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSIZE_TYPE = 'SMALL' | 'MEDIUM' | 'LARGE';
 export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBAR_TYPE = 'NONE' | 'DESIGN1' | 'DESIGN2' | 'DESIGN3' | 'DESIGN4' | 'DESIGN5' | 'DESIGN6' | 'DESIGN7' | 'DESIGN8';
 export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSIZE_TYPE = 'SMALL' | 'MEDIUM' | 'LARGE';

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

@@ -36,7 +36,11 @@ function ContentsList(props) {
     var _b = (0, react_1.useState)(false), isHovered = _b[0], setIsHovered = _b[1];
     var _c = (0, react_1.useState)(1), currentPage = _c[0], setCurrentPage = _c[1];
     var itemCounts = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_ITEMCOUNTS;
-    var totalPage = Math.ceil(compositions.length / itemCounts);
+    var parsedQueryPath = removeFirstSegment(CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA);
+    var queryDataValue = queryData === null || queryData === void 0 ? void 0 : queryData[parsedQueryPath];
+    var totalPage = Math.ceil((CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE === 'DATA' && queryDataValue
+        ? queryDataValue === null || queryDataValue === void 0 ? void 0 : queryDataValue.length
+        : compositions.length) / itemCounts);
     var _d = (0, util_1.parseProperties)(props, device), style = _d.style, hoverStyle = _d.hoverStyle, layout = _d.layout, effect = _d.effect;
     var contentPropCss = (0, contentsListUtils_1.parseGridContentProp)({
         props: CB_CONTENT_PROP_CONTENTSLIST
@@ -64,37 +68,45 @@ function ContentsList(props) {
     var effectVisibleStyle = hasEffect
         ? { opacity: isVisible ? 1 : 0, position: 'relative' }
         : { position: 'relative' };
-    // eslint-disable-next-line
-    var handlePrevBtnClick = function () {
-        if (currentPage === 1)
-            return;
-        setCurrentPage(function (prev) { return prev - 1; });
-    };
-    // eslint-disable-next-line
-    var handleNextBtnClick = function () {
-        if (currentPage === totalPage)
-            return;
-        setCurrentPage(function (prev) { return prev + 1; });
-    };
-    var handleBulletClick = function (index) {
-        setCurrentPage(index + 1);
+    var handlePageClick = function (page) {
+        setCurrentPage(page);
     };
     var startIndex = (currentPage - 1) * itemCounts;
     var endIndex = startIndex + itemCounts;
-    return ((0, jsx_runtime_1.jsxs)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: [(0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ id: "contentslist-box", className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), { position: 'relative', overflow: 'hidden' }), hoverStyle: __assign(__assign({}, hoverStyle), { position: 'relative', overflow: 'hidden' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: (0, jsx_runtime_1.jsx)(S_ContentsListWrapper, __assign({ id: "contentslist-wrapper" }, { children: (0, jsx_runtime_1.jsx)(S_ContentsListGrid, __assign({ id: "contentslist-grid", contentPropCss: contentPropCss, stylePropCss: isHovered ? hoverStylePropCss : stylePropCss }, { children: (0, createCompositions_1.createCompositions)({
+    return ((0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ id: "contentslist-box", className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), hoverStyle: __assign({}, hoverStyle), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: (0, jsx_runtime_1.jsxs)(S_ContentsListWrapper, { children: [(0, jsx_runtime_1.jsx)(S_ContentsListLayout, __assign({ contentPropCss: contentPropCss, stylePropCss: isHovered ? hoverStylePropCss : stylePropCss, borderStyle: {
+                            borderBottomLeftRadius: style.borderBottomLeftRadius,
+                            borderBottomRightRadius: style.borderBottomRightRadius,
+                            borderTopLeftRadius: style.borderTopLeftRadius,
+                            borderTopRightRadius: style.borderTopRightRadius,
+                            borderWidth: style.borderWidth,
+                            borderColor: style.borderColor,
+                            borderStyle: style.borderStyle
+                        }, hoverBorderStyle: {
+                            borderBottomLeftRadius: hoverStyle.borderBottomLeftRadius,
+                            borderBottomRightRadius: hoverStyle.borderBottomRightRadius,
+                            borderTopLeftRadius: hoverStyle.borderTopLeftRadius,
+                            borderTopRightRadius: hoverStyle.borderTopRightRadius,
+                            borderWidth: hoverStyle.borderWidth,
+                            borderColor: hoverStyle.borderColor,
+                            borderStyle: hoverStyle.borderStyle
+                        } }, { children: (0, createCompositions_1.createCompositions)({
                             valueType: CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE,
                             queryPath: CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA,
                             queryData: queryData,
                             compositions: compositions
-                        }).slice(startIndex, endIndex) })) })) })), (0, jsx_runtime_1.jsx)(CustomPagination_1.CustomPagination, { effectVisibleStyle: effectVisibleStyle, type: isHovered ? paginationHoverStyle.type : paginationNormalStyle.type, offset: isHovered ? paginationHoverStyle.offset : paginationNormalStyle.offset, current: currentPage, total: totalPage, size: isHovered ? paginationHoverStyle.size : paginationNormalStyle.size, onBulletClick: handleBulletClick })] })));
+                        }).slice(startIndex, endIndex) })), (0, jsx_runtime_1.jsx)(CustomPagination_1.CustomPagination, { type: isHovered ? paginationHoverStyle.type : paginationNormalStyle.type, offset: isHovered ? paginationHoverStyle.offset : paginationNormalStyle.offset, current: currentPage, total: totalPage, size: isHovered ? paginationHoverStyle.size : paginationNormalStyle.size, onPageClick: handlePageClick })] }) })) })));
 }
-var S_ContentsListWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  position: relative;\n  width: 100%;\n"], ["\n  height: 100%;\n  position: relative;\n  width: 100%;\n"])));
-var S_ContentsListGrid = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: grid;\n  height: 100%;\n\n  ", "\n  ", "\n"], ["\n  display: grid;\n  height: 100%;\n\n  ", "\n  ", "\n"])), function (_a) {
+var S_ContentsListWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n"], ["\n  height: 100%;\n  width: 100%;\n"])));
+var S_ContentsListLayout = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: grid;\n  height: 100%;\n  overflow: hidden;\n  width: 100%;\n\n  ", ";\n  ", ";\n"], ["\n  display: grid;\n  height: 100%;\n  overflow: hidden;\n  width: 100%;\n\n  ", ";\n  ", ";\n"])), function (_a) {
     var contentPropCss = _a.contentPropCss;
     return contentPropCss;
 }, function (_a) {
     var stylePropCss = _a.stylePropCss;
     return stylePropCss;
 });
+function removeFirstSegment(path) {
+    var segments = path.split('/');
+    return segments.slice(1).join('/');
+}
 exports.default = ContentsList;
 var templateObject_1, templateObject_2;