pds-dev-kit-web-test 2.7.499 → 2.7.501

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

@@ -69,7 +69,7 @@ var createComponent = function (type, getDesignType, getLocation, designType) {
 function ContentsCarousel(props) {
     var _a, _b;
     var _c = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _c.device, mode = _c.mode, queryData = _c.queryData;
-    var compositions = props.compositions, index = props.index, _d = props.CB_CONTENT_PROP_CONTENTSCAROUSEL, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MDISPLAYCOUNTS = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MDISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATASORTING = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATASORTING, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATAOFFSET = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATAOFFSET, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS, CB_STYLE_PROP_CONTENTSCAROUSELDESIGN = props.CB_STYLE_PROP_CONTENTSCAROUSELDESIGN, CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD = props.CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD, CB_STYLE_PROP_CONTENTSCAROUSELBUTTON = props.CB_STYLE_PROP_CONTENTSCAROUSELBUTTON, CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR = props.CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, CB_STYLE_PROP_BGMEDIA = props.CB_STYLE_PROP_BGMEDIA, CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE = props.CB_EFFECT_PROP_CONTENTSCAROUSEL.CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE;
+    var compositions = props.compositions, index = props.index, _d = props.CB_CONTENT_PROP_CONTENTSCAROUSEL, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MDISPLAYCOUNTS = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MDISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS, CB_STYLE_PROP_CONTENTSCAROUSELDESIGN = props.CB_STYLE_PROP_CONTENTSCAROUSELDESIGN, CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD = props.CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD, CB_STYLE_PROP_CONTENTSCAROUSELBUTTON = props.CB_STYLE_PROP_CONTENTSCAROUSELBUTTON, CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR = props.CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, CB_STYLE_PROP_BGMEDIA = props.CB_STYLE_PROP_BGMEDIA, CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE = props.CB_EFFECT_PROP_CONTENTSCAROUSEL.CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE;
     var CB_STYLE_PROP_CONTENTSCAROUSEL = __assign(__assign(__assign(__assign({}, CB_STYLE_PROP_CONTENTSCAROUSELDESIGN), CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD), CB_STYLE_PROP_CONTENTSCAROUSELBUTTON), CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR);
     var autoPlayEnabled = device === 'DESKTOP'
         ? CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD.CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD_SPEC_AUTOPLAYUSE
@@ -93,14 +93,11 @@ function ContentsCarousel(props) {
     }), customProgressbarNormalStyle = _h.normalStyle, customProgressbarHoverStyle = _h.hoverStyle;
     var _j = (0, useSwiper_1.useSwiper)(), swiperRef = _j.swiperRef, progressRef = _j.progressRef, leftTimeMsRef = _j.leftTimeMsRef, isBeginning = _j.isBeginning, isEnd = _j.isEnd, onSwiper = _j.onSwiper, onSlideChangeTransitionEnd = _j.onSlideChangeTransitionEnd, onAutoplayTimeLeft = _j.onAutoplayTimeLeft, onClickPrevBtn = _j.onClickPrevBtn, onClickNextBtn = _j.onClickNextBtn;
     var _k = (0, react_1.useState)(false), isHovered = _k[0], setIsHovered = _k[1];
-    var queryPath = "".concat(CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA, "/").concat(CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATASORTING, "/").concat(CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATAOFFSET);
-    var orderedCompositions = CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE === 'VALUE'
-        ? __spreadArray([], CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS, true).filter(function (item) { return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; }); })
-            .sort(function (a, b) { return a.order - b.order; })
-            .map(function (item) {
-            return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; });
-        })
-        : compositions.filter(function (comp) { return !comp.ccbManualItemUuid; });
+    var orderedCompositions = __spreadArray([], CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS, true).filter(function (item) { return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; }); })
+        .sort(function (a, b) { return a.order - b.order; })
+        .map(function (item) {
+        return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; });
+    });
     var loop = contentsCarouselNormalStyle.loop && orderedCompositions.length >= displayCounts;
     // NOTE: edit모드에서는 그리드의 이벤트만 작동하도록 CB의 포인터 이벤트는 막습니다.
     var editModeStyle = mode === 'EDIT' ? { pointerEvents: 'none' } : {};
@@ -138,6 +135,18 @@ function ContentsCarousel(props) {
         bottom: '0px',
         left: '0px'
     };
+    var renderElements = function (component, style) {
+        switch (component.type) {
+            case 'PREV':
+                return ((0, jsx_runtime_1.jsx)(CustomNavigationPrevBtn_1.CustomNavigationPrevBtn, { isDisabled: loop ? false : isBeginning, hoverStyles: customNavigationHoverStyle, onClick: onClickPrevBtn, styles: customNavigationNormalStyle, style: __assign({}, style) }));
+            case 'NEXT':
+                return ((0, jsx_runtime_1.jsx)(CustomNavigationNextBtn_1.CustomNavigationNextBtn, { isDisabled: loop ? false : isEnd, styles: customNavigationNormalStyle, hoverStyles: customNavigationHoverStyle, onClick: onClickNextBtn, style: __assign({}, style) }));
+            case 'PROGRESSBAR':
+                return ((0, jsx_runtime_1.jsx)(CustomProgressbar_1.CustomProgressbar, { slidesLength: orderedCompositions.length, progressRef: progressRef, leftTimeMsRef: leftTimeMsRef, styles: isHovered ? customProgressbarHoverStyle : customProgressbarNormalStyle }));
+            default:
+                return null;
+        }
+    };
     // NOTE: edit환경에서 hover가 작동하지 않아서 제외함 필요시 추가..
     var columnGapEnum = device === 'DESKTOP'
         ? CB_STYLE_PROP_CONTENTSCAROUSELDESIGN.CB_STYLE_PROP_CONTENTSCAROUSELDESIGN_SPEC_ITEMSPACING
@@ -152,54 +161,6 @@ function ContentsCarousel(props) {
     if (mode === 'EDIT') {
         style.visibility = 'visible';
     }
-    var renderElements = function (component, style, slidesLength) {
-        switch (component.type) {
-            case 'PREV':
-                return ((0, jsx_runtime_1.jsx)(CustomNavigationPrevBtn_1.CustomNavigationPrevBtn, { isDisabled: loop ? false : isBeginning, hoverStyles: customNavigationHoverStyle, onClick: onClickPrevBtn, styles: customNavigationNormalStyle, style: __assign({}, style) }));
-            case 'NEXT':
-                return ((0, jsx_runtime_1.jsx)(CustomNavigationNextBtn_1.CustomNavigationNextBtn, { isDisabled: loop ? false : isEnd, styles: customNavigationNormalStyle, hoverStyles: customNavigationHoverStyle, onClick: onClickNextBtn, style: __assign({}, style) }));
-            case 'PROGRESSBAR':
-                return ((0, jsx_runtime_1.jsx)(CustomProgressbar_1.CustomProgressbar, { slidesLength: slidesLength, progressRef: progressRef, leftTimeMsRef: leftTimeMsRef, styles: isHovered ? customProgressbarHoverStyle : customProgressbarNormalStyle }));
-            default:
-                return null;
-        }
-    };
-    var renderSwiper = function (compositions) {
-        return ((0, jsx_runtime_1.jsx)(S_SwiperLayout, __assign({ className: "cb-contentscarousel-layout-box", ref: layoutRef, style: __assign({}, pointerEventsObj) }, { children: (0, jsx_runtime_1.jsx)(S_SwiperWrapper, __assign({ className: "cb-contentscarousel-wrapper", ccbInset: ccbInset, customStyle: isHovered
-                    ? contentsCarouselHoverStyle === null || contentsCarouselHoverStyle === void 0 ? void 0 : contentsCarouselHoverStyle.customStyle
-                    : contentsCarouselNormalStyle === null || contentsCarouselNormalStyle === void 0 ? void 0 : contentsCarouselNormalStyle.customStyle, style: {
-                    display: layout.display,
-                    flexDirection: layout.flexDirection,
-                    justifyContent: layout.justifyContent
-                } }, { children: (0, jsx_runtime_1.jsx)(ContentsCarouselCore_1.default, __assign({ ref: swiperRef, className: "cb-contentscarousel", allowTouchMove: mode !== 'EDIT' ? true : false, onSwiper: onSwiper, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onAutoplayTimeLeft: onAutoplayTimeLeft, slidesPerView: displayCounts, styles: isHovered ? contentsCarouselHoverStyle : contentsCarouselNormalStyle, effect: CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === null || CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === void 0 ? void 0 : CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE.toLowerCase(), loop: loop, displayCounts: displayCounts }, { children: (0, createCompositions_1.createCompositions)({
-                        valueType: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE,
-                        queryPath: queryPath,
-                        limit: displayCounts,
-                        queryData: queryData,
-                        compositions: compositions,
-                        componentBlockCode: types_1.CB_ALL_CODES.CB_CONTENTSCAROUSEL
-                    }) }), CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE +
-                    autoPlayEnabled +
-                    compositions.length) })) })));
-    };
-    var renderCompositions = function (compositions) {
-        // 직접 연결
-        if (CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE === 'VALUE') {
-            if (!compositions.length)
-                return (0, jsx_runtime_1.jsx)(EmptyString, { stringKey: "str_9806" });
-            return renderSwiper(compositions);
-        }
-        // 데이터 연결
-        if (queryPath === 'NONE' || !queryPath || !queryData) {
-            return (0, jsx_runtime_1.jsx)(EmptyString, { stringKey: "str_10477" }, "no-query");
-        }
-        var queryDataValue = queryData[queryPath];
-        // 쿼리 데이터와 키가 있으나, 쿼리 데이터에 결과가 빈 경우
-        if (!(queryDataValue === null || queryDataValue === void 0 ? void 0 : queryDataValue.length)) {
-            return (0, jsx_runtime_1.jsx)(EmptyString, { stringKey: "str_10478" }, "empty-item");
-        }
-        return renderSwiper(compositions);
-    };
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), Object.entries(componentGroups).map(function (_a) {
                 var position = _a[0], groupComponents = _a[1];
                 return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-contentscarousel-button-group ccb-elements ".concat(position), ref: function (el) {
@@ -210,29 +171,43 @@ function ContentsCarousel(props) {
                             delete positionRefs.current[position];
                         }
                     }, style: __assign(__assign({}, getPositionStyle(position, ccbInset, 'GROUP', 'GROUP', 'GROUP')), { zIndex: 3, position: 'absolute' }) }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-contentscarousel-button-layout-box", style: getComponentGroupLayout(groupComponents, position) }, { children: groupComponents.map(function (component) {
-                            return renderElements(component, getPositionStyle(position, ccbInset, component.designType, component.size, component.type), orderedCompositions.length);
+                            return renderElements(component, getPositionStyle(position, ccbInset, component.designType, component.size, component.type));
                         }) })) }), position));
             }), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsxs)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box ccb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), { overflow: 'hidden' }), hoverStyle: __assign(__assign({}, hoverStyle), { overflow: 'hidden' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onMouseEnter: function () {
                         setIsHovered(true);
-                    }, onMouseLeave: function () { return setIsHovered(false); }, "data-number-of-columns": displayCounts, "data-number-of-items": displayCounts, "data-column-gap": columnGap, "data-cols": displayCounts, "data-inset-top": parseFloat(ccbInset.top), "data-inset-bottom": parseFloat(ccbInset.bottom) }, { children: [(0, jsx_runtime_1.jsx)(S_CustomBackgroundWrapper, __assign({ ref: backgroundRef, style: __assign(__assign({}, effect), { background: style.background }) }, { children: isBgMedia && CB_STYLE_PROP_BGMEDIA && ((0, jsx_runtime_1.jsx)(CustomSectionBackgroundMedia_1.CustomSectionBackgroundMedia, { specs: CB_STYLE_PROP_BGMEDIA, componentStyle: style, playerId: index, mediaType: mediaType || 'NONE', device: isMobile ? 'MOBILE' : 'DESKTOP', backgroundRef: backgroundRef })) })), (0, jsx_runtime_1.jsx)(S_Overlay, { style: overlayStyle }), renderCompositions(orderedCompositions)] })) }))] }));
+                    }, onMouseLeave: function () { return setIsHovered(false); }, "data-number-of-columns": displayCounts, "data-number-of-items": displayCounts, "data-column-gap": columnGap, "data-cols": displayCounts, "data-inset-top": parseFloat(ccbInset.top), "data-inset-bottom": parseFloat(ccbInset.bottom) }, { children: [(0, jsx_runtime_1.jsx)(S_CustomBackgroundWrapper, __assign({ ref: backgroundRef, style: __assign(__assign({}, effect), { background: style.background }) }, { children: isBgMedia && CB_STYLE_PROP_BGMEDIA && ((0, jsx_runtime_1.jsx)(CustomSectionBackgroundMedia_1.CustomSectionBackgroundMedia, { specs: CB_STYLE_PROP_BGMEDIA, componentStyle: style, playerId: index, mediaType: mediaType || 'NONE', device: isMobile ? 'MOBILE' : 'DESKTOP', backgroundRef: backgroundRef })) })), (0, jsx_runtime_1.jsx)(S_Overlay, { style: overlayStyle }), orderedCompositions.length > 0 ? ((0, jsx_runtime_1.jsx)(S_SwiperLayout, __assign({ className: "cb-contentscarousel-layout-box", ref: layoutRef, style: __assign({}, pointerEventsObj) }, { children: (0, jsx_runtime_1.jsx)(S_SwiperWrapper, __assign({ className: "cb-contentscarousel-wrapper", ccbInset: ccbInset, customStyle: isHovered
+                                    ? contentsCarouselHoverStyle === null || contentsCarouselHoverStyle === void 0 ? void 0 : contentsCarouselHoverStyle.customStyle
+                                    : contentsCarouselNormalStyle === null || contentsCarouselNormalStyle === void 0 ? void 0 : contentsCarouselNormalStyle.customStyle, style: {
+                                    display: layout.display,
+                                    flexDirection: layout.flexDirection,
+                                    justifyContent: layout.justifyContent
+                                } }, { children: (0, jsx_runtime_1.jsx)(ContentsCarouselCore_1.default, __assign({ ref: swiperRef, className: "cb-contentscarousel", allowTouchMove: mode !== 'EDIT' ? true : false, onSwiper: onSwiper, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onAutoplayTimeLeft: onAutoplayTimeLeft, slidesPerView: displayCounts, styles: isHovered ? contentsCarouselHoverStyle : contentsCarouselNormalStyle, effect: CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === null || CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === void 0 ? void 0 : CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE.toLowerCase(), loop: loop, displayCounts: displayCounts }, { children: (0, createCompositions_1.createCompositions)({
+                                        valueType: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE,
+                                        queryPath: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA,
+                                        limit: displayCounts,
+                                        queryData: queryData,
+                                        compositions: orderedCompositions,
+                                        componentBlockCode: types_1.CB_ALL_CODES.CB_CONTENTSCAROUSEL
+                                    }) }), CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE +
+                                    autoPlayEnabled +
+                                    orderedCompositions.length) })) }))) : ((0, jsx_runtime_1.jsx)(EmptyString, {}))] })) }))] }));
 }
-function EmptyString(_a) {
-    var stringKey = _a.stringKey;
+function EmptyString() {
     var t = (0, react_i18next_1.useTranslation)('translation').t;
-    return (0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: t(stringKey) });
+    return (0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: t('str_9806') });
 }
-var S_EmptyLayer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: rgba(0, 0, 0, 0.5);\n  color: white;\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  justify-content: center;\n  line-height: ", ";\n  margin: auto;\n  padding: ", ";\n  text-align: center;\n  width: 100%;\n  word-break: keep-all;\n"], ["\n  background-color: rgba(0, 0, 0, 0.5);\n  color: white;\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  justify-content: center;\n  line-height: ", ";\n  margin: auto;\n  padding: ", ";\n  text-align: center;\n  width: 100%;\n  word-break: keep-all;\n"])), function (_a) {
+var S_EmptyLayer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: rgba(0, 0, 0, 0.6);\n  color: white;\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  justify-content: center;\n  line-height: ", ";\n  margin: auto;\n  padding: ", ";\n  text-align: center;\n  width: 100%;\n  word-break: keep-all;\n"], ["\n  background-color: rgba(0, 0, 0, 0.6);\n  color: white;\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  justify-content: center;\n  line-height: ", ";\n  margin: auto;\n  padding: ", ";\n  text-align: center;\n  width: 100%;\n  word-break: keep-all;\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.desktopFontSize.caption1;
+    return theme.desktopFontSize.body2;
 }, function (_a) {
     var theme = _a.theme;
     return theme.fontWeight.bold;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.caption1;
+    return theme.desktopLineHeight.body2;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingD;
+    return theme.spacing.spacingE;
 });
 var S_Overlay = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: inherit;\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n"], ["\n  border-radius: inherit;\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n"])));
 function getIsBgMedia(isMobile, specs) {

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

@@ -65,16 +65,16 @@ var createComponent = function (type, getDesignType, getLocation, designType, si
     };
 };
 function ContentsList(props) {
-    var _a, _b, _c, _d;
-    var _e = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _e.device, mode = _e.mode, queryData = _e.queryData;
+    var _a, _b, _c, _d, _e, _f;
+    var _g = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _g.device, mode = _g.mode, queryData = _g.queryData;
     var index = props.index, compositions = props.compositions, CB_CONTENT_PROP_CONTENTSLIST = props.CB_CONTENT_PROP_CONTENTSLIST, CB_STYLE_PROP_CONTENTSLISTDESIGN = props.CB_STYLE_PROP_CONTENTSLISTDESIGN, CB_STYLE_PROP_CONTENTSLISTPAGINATION = props.CB_STYLE_PROP_CONTENTSLISTPAGINATION, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, CB_LAYOUT_PROP_PADDING = props.CB_LAYOUT_PROP_PADDING, CB_STYLE_PROP_BGMEDIA = props.CB_STYLE_PROP_BGMEDIA, CB_LAYOUT_PROP_HEIGHTADJUSTMENT = props.CB_LAYOUT_PROP_HEIGHTADJUSTMENT;
     var 
     // CB_CONTENT_PROP_CONTENTSLIST_SPEC_ITEMCOUNTS,
-    CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MDISPLAYCOUNTS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_MDISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE, CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA, CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATASORTING = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATASORTING, CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATAOFFSET = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATAOFFSET, CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MCOLUMNS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_MCOLUMNS;
-    var _f = (0, react_1.useState)(false), isHovered = _f[0], setIsHovered = _f[1];
-    var _g = (0, react_1.useState)(1), currentPage = _g[0], setCurrentPage = _g[1];
-    var queryPath = "".concat(CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA, "/").concat(CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATASORTING, "/").concat(CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATAOFFSET);
-    var queryDataValue = queryData === null || queryData === void 0 ? void 0 : queryData[queryPath];
+    CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MDISPLAYCOUNTS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_MDISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE, CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA, CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MCOLUMNS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_MCOLUMNS;
+    var _h = (0, react_1.useState)(false), isHovered = _h[0], setIsHovered = _h[1];
+    var _j = (0, react_1.useState)(1), currentPage = _j[0], setCurrentPage = _j[1];
+    var parsedQueryPath = removeFirstSegment(CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA);
+    var queryDataValue = queryData === null || queryData === void 0 ? void 0 : queryData[parsedQueryPath];
     // list의 minheight / minwidth를 계산
     var numberOfColumns = device === 'DESKTOP'
         ? CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS
@@ -86,19 +86,19 @@ function ContentsList(props) {
         ? queryDataValue === null || queryDataValue === void 0 ? void 0 : queryDataValue.length
         : CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length) / displayCounts);
     var CB_STYLE_PROP_CONTENTSLIST = __assign(__assign({}, CB_STYLE_PROP_CONTENTSLISTDESIGN), CB_STYLE_PROP_CONTENTSLISTPAGINATION);
-    var _h = (0, util_1.parseProperties)(props, device), style = _h.style, hoverStyle = _h.hoverStyle, layout = _h.layout, effect = _h.effect, overlayStyle = _h.overlayStyle;
+    var _k = (0, util_1.parseProperties)(props, device), style = _k.style, hoverStyle = _k.hoverStyle, layout = _k.layout, effect = _k.effect, overlayStyle = _k.overlayStyle;
     var contentPropCss = (0, contentsListUtils_1.parseGridContentProp)({
         props: CB_CONTENT_PROP_CONTENTSLIST,
         device: device
     }).contentPropCss;
-    var _j = (0, contentsListUtils_1.parseGridStyleProp)({
+    var _l = (0, contentsListUtils_1.parseGridStyleProp)({
         props: CB_STYLE_PROP_CONTENTSLIST,
         device: device
-    }), stylePropCss = _j.stylePropCss, hoverStylePropCss = _j.hoverStylePropCss;
-    var _k = (0, contentsListUtils_1.parsePaginationStyleProp)({
+    }), stylePropCss = _l.stylePropCss, hoverStylePropCss = _l.hoverStylePropCss;
+    var _m = (0, contentsListUtils_1.parsePaginationStyleProp)({
         props: CB_STYLE_PROP_CONTENTSLIST,
         device: device
-    }), paginationNormalStyle = _k.normalStyle, paginationHoverStyle = _k.hoverStyle;
+    }), paginationNormalStyle = _m.normalStyle, paginationHoverStyle = _m.hoverStyle;
     // NOTE: edit모드에서는 그리드의 이벤트만 작동하도록 CB의 포인터 이벤트는 막습니다.
     var editModeStyle = mode === 'EDIT' ? { pointerEvents: 'none' } : {};
     var cbRef = (0, react_1.useRef)(null);
@@ -135,6 +135,9 @@ function ContentsList(props) {
         CB_LAYOUT_PROP_PADDING.CB_LAYOUT_PROP_PADDING_SPEC_PADDING.right;
     var paddingTB = CB_LAYOUT_PROP_PADDING.CB_LAYOUT_PROP_PADDING_SPEC_PADDING.top +
         CB_LAYOUT_PROP_PADDING.CB_LAYOUT_PROP_PADDING_SPEC_PADDING.bottom;
+    var queryPath = removeFirstSegment(CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA);
+    var queryLength = (_f = (_e = queryData === null || queryData === void 0 ? void 0 : queryData[queryPath]) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 0;
+    // const displayedItemLength = Math.max(0, Math.min(endIndex, queryLength) - startIndex);
     var numberOfRows = Math.ceil(displayCounts / numberOfColumns);
     var listMinWidth = oneCompositionMinWidth * numberOfColumns + (numberOfColumns - 1) * columnGap + paddingLR;
     var listMinHeight = oneCompositionMinHeight * numberOfRows +
@@ -144,9 +147,9 @@ function ContentsList(props) {
     var components = [
         createPagination(paginationNormalStyle, paginationHoverStyle, isHovered)
     ].filter(function (component) { return component !== undefined; });
-    var _l = (0, useFlexGridLayout_1.useFlexGridLayout)({ components: components }), layoutRef = _l.layoutRef, positionRefs = _l.positionRefs, 
+    var _o = (0, useFlexGridLayout_1.useFlexGridLayout)({ components: components }), layoutRef = _o.layoutRef, positionRefs = _o.positionRefs, 
     // ccbInset,
-    componentGroups = _l.componentGroups, getPositionStyle = _l.getPositionStyle, getComponentGroupLayout = _l.getComponentGroupLayout;
+    componentGroups = _o.componentGroups, getPositionStyle = _o.getPositionStyle, getComponentGroupLayout = _o.getComponentGroupLayout;
     var ccbInset = {
         top: '0px',
         right: '0px',
@@ -154,17 +157,23 @@ function ContentsList(props) {
         left: '0px'
     };
     var t = (0, react_i18next_1.useTranslation)('translation').t;
+    var renderElements = function (component, positionStyle) {
+        switch (component.type) {
+            case 'PAGINATION':
+                return ((0, jsx_runtime_1.jsx)("div", __assign({ style: positionStyle }, { children: (0, jsx_runtime_1.jsx)(CustomPagination_1.CustomPagination, { styles: isHovered ? paginationHoverStyle : paginationNormalStyle, current: currentPage, total: totalPage, onPageClick: handlePageClick, style: positionStyle }) })));
+            default:
+                return null;
+        }
+    };
     var backgroundRef = (0, react_1.useRef)(null);
     var isMobile = device === 'MOBILE';
     var isBgMedia = getIsBgMedia(isMobile, CB_STYLE_PROP_BGMEDIA);
     var mediaType = getMediaType(isMobile, CB_STYLE_PROP_BGMEDIA);
-    var orderedCompositions = CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE === 'VALUE'
-        ? __spreadArray([], CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS, true).filter(function (item) { return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; }); })
-            .sort(function (a, b) { return a.order - b.order; })
-            .map(function (item) {
-            return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; });
-        })
-        : compositions.filter(function (comp) { return !comp.ccbManualItemUuid; });
+    var orderedCompositions = __spreadArray([], CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS, true).filter(function (item) { return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; }); })
+        .sort(function (a, b) { return a.order - b.order; })
+        .map(function (item) {
+        return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; });
+    });
     var heightFitContentByDevice = device === 'DESKTOP'
         ? CB_LAYOUT_PROP_HEIGHTADJUSTMENT === null || CB_LAYOUT_PROP_HEIGHTADJUSTMENT === void 0 ? void 0 : CB_LAYOUT_PROP_HEIGHTADJUSTMENT.CB_LAYOUT_PROP_HEIGHTADJUSTMENT_SPEC_HEIGHTFITCONTENT
         : CB_LAYOUT_PROP_HEIGHTADJUSTMENT === null || CB_LAYOUT_PROP_HEIGHTADJUSTMENT === void 0 ? void 0 : CB_LAYOUT_PROP_HEIGHTADJUSTMENT['CB_LAYOUT_PROP_HEIGHTADJUSTMENT_SPEC_HEIGHTFITCONTENT:MOBILE'];
@@ -173,48 +182,6 @@ function ContentsList(props) {
     if (mode === 'EDIT') {
         style.visibility = 'visible';
     }
-    var renderElements = function (component, positionStyle) {
-        switch (component.type) {
-            case 'PAGINATION':
-                return ((0, jsx_runtime_1.jsx)("div", __assign({ style: positionStyle }, { children: (0, jsx_runtime_1.jsx)(CustomPagination_1.CustomPagination, { styles: isHovered ? paginationHoverStyle : paginationNormalStyle, current: currentPage, total: totalPage, onPageClick: handlePageClick, style: positionStyle }) })));
-            default:
-                return null;
-        }
-    };
-    var renderList = function (compositions) {
-        return ((0, jsx_runtime_1.jsx)(S_ContentsListLayout, __assign({ className: "cb-contentslist-layout-box", ref: layoutRef, style: {
-                display: layout.display,
-                flexDirection: layout.flexDirection,
-                justifyContent: layout.justifyContent
-            } }, { children: (0, jsx_runtime_1.jsx)(S_ContentsListWrapper, __assign({ className: "cb-contentslist-wrapper", ccbInset: ccbInset, contentPropCss: contentPropCss, stylePropCss: isHovered ? hoverStylePropCss : stylePropCss, 
-                // NOTE: 위 CSS 프롭과 정리
-                style: { gridTemplateRows: "repeat(".concat(numberOfRows, ", 1fr)") } }, { children: (0, createCompositions_1.createCompositions)({
-                    valueType: CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE,
-                    queryPath: queryPath,
-                    limit: displayCounts,
-                    queryData: queryData,
-                    compositions: compositions,
-                    componentBlockCode: types_1.CB_ALL_CODES.CB_LIST
-                }).slice(startIndex, endIndex + 1) })) })));
-    };
-    var renderCompositions = function (compositions) {
-        // 직접 연결
-        if (CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE === 'VALUE') {
-            if (!compositions.length)
-                return (0, jsx_runtime_1.jsx)(EmptyString, { stringKey: "str_9806" });
-            return renderList(compositions);
-        }
-        // 데이터 연결
-        if (queryPath === 'NONE' || !queryPath || !queryData) {
-            return (0, jsx_runtime_1.jsx)(EmptyString, { stringKey: "str_10477" }, "no-query");
-        }
-        var queryDataValue = queryData[queryPath];
-        // 쿼리 데이터와 키가 있으나, 쿼리 데이터에 결과가 빈 경우
-        if (!(queryDataValue === null || queryDataValue === void 0 ? void 0 : queryDataValue.length)) {
-            return (0, jsx_runtime_1.jsx)(EmptyString, { stringKey: "str_10478" }, "empty-item");
-        }
-        return renderList(compositions);
-    };
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), isEditModeAndHeightFitContent && ((0, jsx_runtime_1.jsx)(S_HeightFitContentCover_1.S_HeightFitContentCover, { className: "height-fit-content-cover", bottomText: t('str_10106') })), Object.entries(componentGroups).map(function (_a) {
                 var position = _a[0], groupComponents = _a[1];
                 return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-contentslist-button-group ccb-elements", ref: function (el) {
@@ -227,7 +194,20 @@ function ContentsList(props) {
                     }, style: __assign(__assign({}, getPositionStyle(position, ccbInset, 'GROUP', 'GROUP', 'GROUP')), { zIndex: 3, position: 'absolute' }) }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-contentslist-button-layout-box", style: getComponentGroupLayout(groupComponents, position) }, { children: groupComponents.map(function (component) {
                             return renderElements(component, getPositionStyle(position, ccbInset, component.designType, component.size, component.type));
                         }) })) }), position));
-            }), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsxs)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ id: "contentslist-box", className: "cb-layout-box ccb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), { overflow: 'hidden' }), hoverStyle: __assign(__assign({}, hoverStyle), { overflow: 'hidden' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, "data-number-of-items": CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length, "data-number-of-columns": Math.min(numberOfColumns, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length), "data-row-gap": rowGap, "data-column-gap": columnGap, "data-cols": Math.min(numberOfColumns, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length), "data-min-width": listMinWidth, "data-min-height": listMinHeight, "data-inset-top": parseFloat(ccbInset.top), "data-inset-bottom": parseFloat(ccbInset.bottom) }, { children: [(0, jsx_runtime_1.jsx)(S_CustomBackgroundWrapper, __assign({ ref: backgroundRef, style: __assign(__assign({}, effect), { background: style.background }) }, { children: isBgMedia && CB_STYLE_PROP_BGMEDIA && ((0, jsx_runtime_1.jsx)(CustomSectionBackgroundMedia_1.CustomSectionBackgroundMedia, { specs: CB_STYLE_PROP_BGMEDIA, componentStyle: style, playerId: index, mediaType: mediaType || 'NONE', device: isMobile ? 'MOBILE' : 'DESKTOP', backgroundRef: backgroundRef })) })), (0, jsx_runtime_1.jsx)(S_Overlay, { style: overlayStyle }), renderList(orderedCompositions)] })) }))] }));
+            }), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsxs)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ id: "contentslist-box", className: "cb-layout-box ccb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), { overflow: 'hidden' }), hoverStyle: __assign(__assign({}, hoverStyle), { overflow: 'hidden' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, "data-number-of-items": CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length, "data-number-of-columns": Math.min(numberOfColumns, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length), "data-row-gap": rowGap, "data-column-gap": columnGap, "data-cols": Math.min(numberOfColumns, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length), "data-min-width": listMinWidth, "data-min-height": listMinHeight, "data-inset-top": parseFloat(ccbInset.top), "data-inset-bottom": parseFloat(ccbInset.bottom) }, { children: [(0, jsx_runtime_1.jsx)(S_CustomBackgroundWrapper, __assign({ ref: backgroundRef, style: __assign(__assign({}, effect), { background: style.background }) }, { children: isBgMedia && CB_STYLE_PROP_BGMEDIA && ((0, jsx_runtime_1.jsx)(CustomSectionBackgroundMedia_1.CustomSectionBackgroundMedia, { specs: CB_STYLE_PROP_BGMEDIA, componentStyle: style, playerId: index, mediaType: mediaType || 'NONE', device: isMobile ? 'MOBILE' : 'DESKTOP', backgroundRef: backgroundRef })) })), (0, jsx_runtime_1.jsx)(S_Overlay, { style: overlayStyle }), orderedCompositions.length > 0 ? ((0, jsx_runtime_1.jsx)(S_ContentsListLayout, __assign({ className: "cb-contentslist-layout-box", ref: layoutRef, style: {
+                                display: layout.display,
+                                flexDirection: layout.flexDirection,
+                                justifyContent: layout.justifyContent
+                            } }, { children: (0, jsx_runtime_1.jsx)(S_ContentsListWrapper, __assign({ className: "cb-contentslist-wrapper", ccbInset: ccbInset, contentPropCss: contentPropCss, stylePropCss: isHovered ? hoverStylePropCss : stylePropCss, 
+                                // NOTE: 위 CSS 프롭과 정리
+                                style: { gridTemplateRows: "repeat(".concat(numberOfRows, ", 1fr)") } }, { children: (0, createCompositions_1.createCompositions)({
+                                    valueType: CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE,
+                                    queryPath: CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA,
+                                    limit: displayCounts,
+                                    queryData: queryData,
+                                    compositions: orderedCompositions,
+                                    componentBlockCode: types_1.CB_ALL_CODES.CB_LIST
+                                }).slice(startIndex, endIndex + 1) })) }))) : ((0, jsx_runtime_1.jsx)(EmptyString, {}))] })) }))] }));
 }
 function getIsBgMedia(isMobile, specs) {
     if (!specs) {
@@ -271,12 +251,16 @@ var S_ContentsListWrapper = styled_components_1.default.div(templateObject_4 ||
     var ccbInset = _a.ccbInset;
     return ccbInset.top;
 });
+function removeFirstSegment(path) {
+    var segments = path.split('/');
+    return segments.slice(1).join('/');
+}
 function getStandardComposition(compositions, valueType) {
     if (valueType === 'DATA') {
-        return compositions.find(function (composition) { return !composition.ccbManualItemUuid; });
+        return compositions.find(function (composition) { return composition.isDefault; });
     }
     // NOTE: 일단 디폴트가 아닌 첫번째를 반환하지만 경우에따라 가장 cols/width가 큰 것을 반환하도록 변경할 수 있음
-    return compositions.find(function (composition) { return !!composition.ccbManualItemUuid; });
+    return compositions.find(function (composition) { return !composition.isDefault; });
 }
 function getCompositionMinValue(composition, device) {
     var minCellWidth = 10;
@@ -313,23 +297,22 @@ function getCompositionMinValue(composition, device) {
         };
     }
 }
-function EmptyString(_a) {
-    var stringKey = _a.stringKey;
+function EmptyString() {
     var t = (0, react_i18next_1.useTranslation)('translation').t;
-    return (0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: t(stringKey) });
+    return (0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: t('str_9806') });
 }
-var S_EmptyLayer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: rgba(0, 0, 0, 0.5);\n  color: white;\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  justify-content: center;\n  line-height: ", ";\n  margin: auto;\n  padding: ", ";\n  text-align: center;\n  width: 100%;\n  word-break: keep-all;\n"], ["\n  background-color: rgba(0, 0, 0, 0.5);\n  color: white;\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  justify-content: center;\n  line-height: ", ";\n  margin: auto;\n  padding: ", ";\n  text-align: center;\n  width: 100%;\n  word-break: keep-all;\n"])), function (_a) {
+var S_EmptyLayer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: rgba(0, 0, 0, 0.6);\n  color: white;\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  justify-content: center;\n  line-height: ", ";\n  margin: auto;\n  padding: ", ";\n  text-align: center;\n  width: 100%;\n  word-break: keep-all;\n"], ["\n  background-color: rgba(0, 0, 0, 0.6);\n  color: white;\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  justify-content: center;\n  line-height: ", ";\n  margin: auto;\n  padding: ", ";\n  text-align: center;\n  width: 100%;\n  word-break: keep-all;\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.desktopFontSize.caption1;
+    return theme.desktopFontSize.body2;
 }, function (_a) {
     var theme = _a.theme;
     return theme.fontWeight.bold;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.caption1;
+    return theme.desktopLineHeight.body2;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingD;
+    return theme.spacing.spacingE;
 });
 exports.default = ContentsList;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -72,7 +72,7 @@ size) {
 function SlideBanner(props) {
     var _a;
     var _b = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _b.device, mode = _b.mode, queryData = _b.queryData;
-    var index = props.index, _c = props.CB_CONTENT_PROP_SLIDEBANNER, CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS, CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE, CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA, CB_CONTENT_PROP_SLIDEBANNER_SPEC_DATASORTING = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_DATASORTING, CB_CONTENT_PROP_SLIDEBANNER_SPEC_DATAOFFSET = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_DATAOFFSET, CB_CONTENT_PROP_SLIDEBANNER_SPEC_MANUALITEMS = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_MANUALITEMS, CB_STYLE_PROP_SLIDEBANNERDESIGN = props.CB_STYLE_PROP_SLIDEBANNERDESIGN, CB_STYLE_PROP_SLIDEBANNERPAGINATION = props.CB_STYLE_PROP_SLIDEBANNERPAGINATION, CB_STYLE_PROP_SLIDEBANNERBUTTON = props.CB_STYLE_PROP_SLIDEBANNERBUTTON, CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD = props.CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD, CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR = props.CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, CB_STYLE_PROP_BGMEDIA = props.CB_STYLE_PROP_BGMEDIA, CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE = props.CB_EFFECT_PROP_SLIDEBANNER.CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE;
+    var index = props.index, _c = props.CB_CONTENT_PROP_SLIDEBANNER, CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS, CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE, CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA, CB_CONTENT_PROP_SLIDEBANNER_SPEC_MANUALITEMS = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_MANUALITEMS, CB_STYLE_PROP_SLIDEBANNERDESIGN = props.CB_STYLE_PROP_SLIDEBANNERDESIGN, CB_STYLE_PROP_SLIDEBANNERPAGINATION = props.CB_STYLE_PROP_SLIDEBANNERPAGINATION, CB_STYLE_PROP_SLIDEBANNERBUTTON = props.CB_STYLE_PROP_SLIDEBANNERBUTTON, CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD = props.CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD, CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR = props.CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, CB_STYLE_PROP_BGMEDIA = props.CB_STYLE_PROP_BGMEDIA, CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE = props.CB_EFFECT_PROP_SLIDEBANNER.CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE;
     var compositions = props.compositions;
     var CB_STYLE_PROP_SLIDEBANNER = __assign(__assign(__assign(__assign(__assign({}, CB_STYLE_PROP_SLIDEBANNERDESIGN), CB_STYLE_PROP_SLIDEBANNERPAGINATION), CB_STYLE_PROP_SLIDEBANNERBUTTON), CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD), CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR);
     var autoPlayEnabled = device === 'DESKTOP'
@@ -127,23 +127,7 @@ function SlideBanner(props) {
         }
     ].filter(function (component) { return component !== undefined; });
     var _l = (0, useFlexGridLayout_1.useFlexGridLayout)({ components: components }), layoutRef = _l.layoutRef, positionRefs = _l.positionRefs, ccbInset = _l.ccbInset, componentGroups = _l.componentGroups, getPositionStyle = _l.getPositionStyle, getComponentGroupLayout = _l.getComponentGroupLayout;
-    var backgroundRef = (0, react_1.useRef)(null);
-    var isMobile = device === 'MOBILE';
-    var isBgMedia = getIsBgMedia(isMobile, CB_STYLE_PROP_BGMEDIA);
-    var mediaType = getMediaType(isMobile, CB_STYLE_PROP_BGMEDIA);
-    var queryPath = "".concat(CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA, "/").concat(CB_CONTENT_PROP_SLIDEBANNER_SPEC_DATASORTING, "/").concat(CB_CONTENT_PROP_SLIDEBANNER_SPEC_DATAOFFSET);
-    var orderedCompositions = CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE === 'VALUE'
-        ? __spreadArray([], CB_CONTENT_PROP_SLIDEBANNER_SPEC_MANUALITEMS, true).filter(function (item) { return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; }); })
-            .sort(function (a, b) { return a.order - b.order; })
-            .map(function (item) {
-            return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; });
-        })
-        : compositions.filter(function (comp) { return !comp.ccbManualItemUuid; });
-    var isEditModeAndHidden = style.visibility === 'hidden' && mode === 'EDIT';
-    if (mode === 'EDIT') {
-        style.visibility = 'visible';
-    }
-    var renderElements = function (component, positionStyle, slidesLength) {
+    var renderElements = function (component, positionStyle) {
         var _a;
         switch (component.type) {
             case 'PREV':
@@ -153,39 +137,24 @@ function SlideBanner(props) {
             case 'PAGINATION':
                 return ((0, jsx_runtime_1.jsx)(CustomPagination_1.CustomPagination, { styles: isHovered ? customPaginationHoverStyle : customPaginationNormalStyle, current: currentSlide, isPrevBtnDisabled: loop ? false : isBeginning, isNextBtnDisabled: loop ? false : isEnd, total: ((_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slides.length) || 0, onBulletClick: onClickBullet, onPrevBtnClick: onClickPrevBtn, onNextBtnClick: onClickNextBtn, style: positionStyle }));
             case 'PROGRESSBAR':
-                return ((0, jsx_runtime_1.jsx)(CustomProgressbar_1.CustomProgressbar, { slidesLength: slidesLength, progressRef: progressRef, leftTimeMsRef: leftTimeMsRef, styles: isHovered ? customProgressbarHoverStyle : customProgressbarNormalStyle }));
+                return ((0, jsx_runtime_1.jsx)(CustomProgressbar_1.CustomProgressbar, { slidesLength: orderedCompositions.length, progressRef: progressRef, leftTimeMsRef: leftTimeMsRef, styles: isHovered ? customProgressbarHoverStyle : customProgressbarNormalStyle }));
             default:
                 return null;
         }
     };
-    var renderSwiper = function (compositions) {
-        return ((0, jsx_runtime_1.jsx)(S_SwiperLayout, __assign({ className: "cb-slidebanner-layout-box", ref: layoutRef }, { children: (0, jsx_runtime_1.jsx)(S_SwiperWrapper, __assign({ className: "cb-slidebanner-wrapper", ccbInset: ccbInset, customStyle: isHovered ? slideBannerHoverStyle === null || slideBannerHoverStyle === void 0 ? void 0 : slideBannerHoverStyle.customStyle : slideBannerNormalStyle === null || slideBannerNormalStyle === void 0 ? void 0 : slideBannerNormalStyle.customStyle }, { children: (0, jsx_runtime_1.jsx)(SlideBannerCore_1.default, __assign({ ref: swiperRef, className: "cb-slidebanner", onSwiper: onSwiper, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onAutoplayTimeLeft: onAutoplayTimeLeft, slidesPerView: 1, styles: isHovered ? slideBannerHoverStyle : slideBannerNormalStyle, effect: CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE.toLowerCase() }, { children: (0, createCompositions_1.createCompositions)({
-                        valueType: CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE,
-                        queryPath: queryPath,
-                        limit: CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS,
-                        queryData: queryData,
-                        compositions: compositions,
-                        componentBlockCode: types_1.CB_ALL_CODES.CB_SLIDEBANNER
-                    }) }), CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE + autoPlayEnabled + compositions.length) })) })));
-    };
-    var renderCompositions = function (compositions) {
-        // 직접 연결
-        if (CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE === 'VALUE') {
-            if (!compositions.length)
-                return (0, jsx_runtime_1.jsx)(EmptyString, { stringKey: "str_9806" });
-            return renderSwiper(compositions);
-        }
-        // 데이터 연결
-        if (queryPath === 'NONE' || !queryPath || !queryData) {
-            return (0, jsx_runtime_1.jsx)(EmptyString, { stringKey: "str_10477" }, "no-query");
-        }
-        var queryDataValue = queryData[queryPath];
-        // 쿼리 데이터와 키가 있으나, 쿼리 데이터에 결과가 빈 경우
-        if (!(queryDataValue === null || queryDataValue === void 0 ? void 0 : queryDataValue.length)) {
-            return (0, jsx_runtime_1.jsx)(EmptyString, { stringKey: "str_10478" }, "empty-item");
-        }
-        return renderSwiper(compositions);
-    };
+    var backgroundRef = (0, react_1.useRef)(null);
+    var isMobile = device === 'MOBILE';
+    var isBgMedia = getIsBgMedia(isMobile, CB_STYLE_PROP_BGMEDIA);
+    var mediaType = getMediaType(isMobile, CB_STYLE_PROP_BGMEDIA);
+    var orderedCompositions = __spreadArray([], CB_CONTENT_PROP_SLIDEBANNER_SPEC_MANUALITEMS, true).filter(function (item) { return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; }); })
+        .sort(function (a, b) { return a.order - b.order; })
+        .map(function (item) {
+        return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; });
+    });
+    var isEditModeAndHidden = style.visibility === 'hidden' && mode === 'EDIT';
+    if (mode === 'EDIT') {
+        style.visibility = 'visible';
+    }
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsxs)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: [Object.entries(componentGroups).map(function (_a) {
                         var position = _a[0], groupComponents = _a[1];
                         return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-slidebanner-button-group ccb-elements ".concat(position), ref: function (el) {
@@ -196,27 +165,37 @@ function SlideBanner(props) {
                                     delete positionRefs.current[position];
                                 }
                             }, style: __assign(__assign({}, getPositionStyle(position, ccbInset, 'GROUP', 'GROUP', 'GROUP')), { zIndex: 3, position: 'absolute' }) }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-slidebanner-button-layout-box", style: getComponentGroupLayout(groupComponents, position) }, { children: groupComponents.map(function (component) {
-                                    return renderElements(component, getPositionStyle(position, ccbInset, component.designType, component.size, component.type), orderedCompositions.length);
+                                    return renderElements(component, getPositionStyle(position, ccbInset, component.designType, component.size, component.type));
                                 }) })) }), position));
-                    }), (0, jsx_runtime_1.jsxs)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box ccb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), { overflow: 'hidden' }), hoverStyle: __assign(__assign({}, hoverStyle), { overflow: 'hidden' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: [(0, jsx_runtime_1.jsx)(S_CustomBackgroundWrapper, __assign({ ref: backgroundRef, style: __assign(__assign({}, effect), { background: style.background }) }, { children: isBgMedia && CB_STYLE_PROP_BGMEDIA && ((0, jsx_runtime_1.jsx)(CustomSectionBackgroundMedia_1.CustomSectionBackgroundMedia, { specs: CB_STYLE_PROP_BGMEDIA, componentStyle: style, playerId: index, mediaType: mediaType || 'NONE', device: isMobile ? 'MOBILE' : 'DESKTOP', backgroundRef: backgroundRef })) })), (0, jsx_runtime_1.jsx)(S_Overlay, { style: overlayStyle }), renderCompositions(orderedCompositions)] }))] }))] }));
+                    }), (0, jsx_runtime_1.jsxs)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box ccb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), { overflow: 'hidden' }), hoverStyle: __assign(__assign({}, hoverStyle), { overflow: 'hidden' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: [(0, jsx_runtime_1.jsx)(S_CustomBackgroundWrapper, __assign({ ref: backgroundRef, style: __assign(__assign({}, effect), { background: style.background }) }, { children: isBgMedia && CB_STYLE_PROP_BGMEDIA && ((0, jsx_runtime_1.jsx)(CustomSectionBackgroundMedia_1.CustomSectionBackgroundMedia, { specs: CB_STYLE_PROP_BGMEDIA, componentStyle: style, playerId: index, mediaType: mediaType || 'NONE', device: isMobile ? 'MOBILE' : 'DESKTOP', backgroundRef: backgroundRef })) })), (0, jsx_runtime_1.jsx)(S_Overlay, { style: overlayStyle }), orderedCompositions.length > 0 ? ((0, jsx_runtime_1.jsx)(S_SwiperLayout, __assign({ className: "cb-slidebanner-layout-box", ref: layoutRef }, { children: (0, jsx_runtime_1.jsx)(S_SwiperWrapper, __assign({ className: "cb-slidebanner-wrapper", ccbInset: ccbInset, customStyle: isHovered
+                                        ? slideBannerHoverStyle === null || slideBannerHoverStyle === void 0 ? void 0 : slideBannerHoverStyle.customStyle
+                                        : slideBannerNormalStyle === null || slideBannerNormalStyle === void 0 ? void 0 : slideBannerNormalStyle.customStyle }, { children: (0, jsx_runtime_1.jsx)(SlideBannerCore_1.default, __assign({ ref: swiperRef, className: "cb-slidebanner", onSwiper: onSwiper, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onAutoplayTimeLeft: onAutoplayTimeLeft, slidesPerView: 1, styles: isHovered ? slideBannerHoverStyle : slideBannerNormalStyle, effect: CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE.toLowerCase() }, { children: (0, createCompositions_1.createCompositions)({
+                                            valueType: CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE,
+                                            queryPath: CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA,
+                                            limit: CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS,
+                                            queryData: queryData,
+                                            compositions: orderedCompositions,
+                                            componentBlockCode: types_1.CB_ALL_CODES.CB_SLIDEBANNER
+                                        }) }), CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE +
+                                        autoPlayEnabled +
+                                        orderedCompositions.length) })) }))) : ((0, jsx_runtime_1.jsx)(EmptyString, {}))] }))] }))] }));
 }
-function EmptyString(_a) {
-    var stringKey = _a.stringKey;
+function EmptyString() {
     var t = (0, react_i18next_1.useTranslation)('translation').t;
-    return (0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: t(stringKey) });
+    return (0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: t('str_9806') });
 }
-var S_EmptyLayer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: rgba(0, 0, 0, 0.5);\n  color: white;\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  justify-content: center;\n  line-height: ", ";\n  margin: auto;\n  padding: ", ";\n  text-align: center;\n  width: 100%;\n  word-break: keep-all;\n"], ["\n  background-color: rgba(0, 0, 0, 0.5);\n  color: white;\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  justify-content: center;\n  line-height: ", ";\n  margin: auto;\n  padding: ", ";\n  text-align: center;\n  width: 100%;\n  word-break: keep-all;\n"])), function (_a) {
+var S_EmptyLayer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: rgba(0, 0, 0, 0.6);\n  color: white;\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  justify-content: center;\n  line-height: ", ";\n  margin: auto;\n  padding: ", ";\n  text-align: center;\n  width: 100%;\n  word-break: keep-all;\n"], ["\n  background-color: rgba(0, 0, 0, 0.6);\n  color: white;\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  justify-content: center;\n  line-height: ", ";\n  margin: auto;\n  padding: ", ";\n  text-align: center;\n  width: 100%;\n  word-break: keep-all;\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.desktopFontSize.caption1;
+    return theme.desktopFontSize.body2;
 }, function (_a) {
     var theme = _a.theme;
     return theme.fontWeight.bold;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.caption1;
+    return theme.desktopLineHeight.body2;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingD;
+    return theme.spacing.spacingE;
 });
 var S_Overlay = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: inherit;\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n"], ["\n  border-radius: inherit;\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n"])));
 var S_CustomBackgroundWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: inherit;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  left: 0;\n  overflow: hidden;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: -2;\n"], ["\n  align-items: center;\n  border-radius: inherit;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  left: 0;\n  overflow: hidden;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: -2;\n"])));

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

@@ -46,7 +46,7 @@ export type CB_CONTENT_PROP_CONTENTSCAROUSEL = {
     CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE: CCB_VALUE_TYPE;
     CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA: STRING_PLAIN;
     CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATASORTING: STRING_PLAIN;
-    CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATAOFFSET: NUMBER_INTEGER;
+    CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_OFFSET: NUMBER_INTEGER;
     CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS: ManualItem[];
     CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_ITEMCOUNTS: NUMBER_INTEGER;
     CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS: NUMBER_INTEGER;
@@ -56,7 +56,7 @@ export type CB_CONTENT_PROP_SLIDEBANNER = {
     CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE: CCB_VALUE_TYPE;
     CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA: STRING_PLAIN;
     CB_CONTENT_PROP_SLIDEBANNER_SPEC_DATASORTING: STRING_PLAIN;
-    CB_CONTENT_PROP_SLIDEBANNER_SPEC_DATAOFFSET: NUMBER_INTEGER;
+    CB_CONTENT_PROP_SLIDEBANNER_SPEC_OFFSET: NUMBER_INTEGER;
     CB_CONTENT_PROP_SLIDEBANNER_SPEC_MANUALITEMS: ManualItem[];
     CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS: NUMBER_INTEGER;
 };
@@ -65,7 +65,7 @@ export type CB_CONTENT_PROP_CONTENTSLIST = {
     CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA: STRING_PLAIN;
     CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATASORTING: STRING_PLAIN;
     CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATAFILTER: STRING_PLAIN;
-    CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATAOFFSET: NUMBER_INTEGER;
+    CB_CONTENT_PROP_CONTENTSLIST_SPEC_OFFSET: NUMBER_INTEGER;
     CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS: ManualItem[];
     CB_CONTENT_PROP_CONTENTSLIST_SPEC_ITEMCOUNTS: NUMBER_INTEGER;
     CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS: NUMBER_INTEGER;

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/parseJsonProperties.js

@@ -37,22 +37,18 @@ function parseJsonProperties(properties, device) {
         };
         if (normalizedProperty.name in types_4.CB_STYLE_PROP_KEYS) {
             var _a = (0, stylePropParsers_1.parseStyleProperties)(normalizedProperty, device), style = _a.style, overlayStyle = _a.overlayStyle;
-            // console.log(normalizedProperty.name, ' >>>', overlayStyle, overlayHoverStyle);
             return __assign(__assign({}, acc), { style: __assign(__assign({}, acc.style), style), overlayStyle: __assign(__assign({}, acc.overlayStyle), overlayStyle) });
         }
         if (normalizedProperty.name in types_3.CB_LAYOUT_PROP_KEYS) {
             var style = (0, layoutPropParsers_1.parseLayoutProperties)(normalizedProperty, device).style;
-            // console.log(normalizedProperty.name, ' >>>', style);
             return __assign(__assign({}, acc), { layout: __assign(__assign({}, acc.layout), style) });
         }
         if (normalizedProperty.name in types_1.CB_CONTENT_PROP_KEYS) {
             var style = (0, contentPropParsers_1.parseContentProperties)(normalizedProperty, device).style;
-            // console.log(normalizedProperty.name, ' >>>', style);
             return __assign(__assign({}, acc), { style: __assign(__assign({}, acc.style), style) });
         }
         if (normalizedProperty.name in types_2.CB_EFFECT_PROP_KEYS) {
             var style = (0, effectPropParsers_1.parseEffectProperties)(normalizedProperty, device).style;
-            // console.log(normalizedProperty.name, ' >>>', style);
             return __assign(__assign({}, acc), { effect: __assign(__assign({}, acc.effect), style) });
         }
         return acc;