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

package/dist/src/common/services/i18n/resources/en.json

@@ -106,6 +106,9 @@
         "str_reaction": "Reaction",
         "str_9806": "There are no items added yet. Please add and edit items!",
         "str_10106": "The height is adjusted\naccording to the content.",
-        "str_grid_height_variable": "Variable"
+        "str_grid_height_variable": "Variable",
+        "str_10476": "Loading data information.",
+        "str_10477": "Data value not linked",
+        "str_10478": "No data values to link."
     }
 }

package/dist/src/common/services/i18n/resources/es.json

@@ -106,6 +106,9 @@
         "str_reaction": "Reaction",
         "str_9806": "There are no items added yet. Please add and edit items!",
         "str_10106": "The height is adjusted\naccording to the content.",
-        "str_grid_height_variable": "Variable"
+        "str_grid_height_variable": "Variable",
+        "str_10476": "Loading data information.",
+        "str_10477": "Data value not linked",
+        "str_10478": "No data values to link."
     }
 }

package/dist/src/common/services/i18n/resources/fil.json

@@ -99,6 +99,9 @@
         "str_reaction": "Reaction",
         "str_9806": "There are no items added yet. Please add and edit items!",
         "str_10106": "The height is adjusted\naccording to the content.",
-        "str_grid_height_variable": "Variable"
+        "str_grid_height_variable": "Variable",
+        "str_10476": "Loading data information.",
+        "str_10477": "Data value not linked",
+        "str_10478": "No data values to link."
     }
 }

package/dist/src/common/services/i18n/resources/index.d.ts

@@ -109,6 +109,9 @@ declare const locale: {
             str_9806: string;
             str_10106: string;
             str_grid_height_variable: string;
+            str_10476: string;
+            str_10477: string;
+            str_10478: string;
         };
     };
     readonly en: {
@@ -220,6 +223,9 @@ declare const locale: {
             str_9806: string;
             str_10106: string;
             str_grid_height_variable: string;
+            str_10476: string;
+            str_10477: string;
+            str_10478: string;
         };
     };
     readonly ja: {
@@ -331,6 +337,9 @@ declare const locale: {
             str_9806: string;
             str_10106: string;
             str_grid_height_variable: string;
+            str_10476: string;
+            str_10477: string;
+            str_10478: string;
         };
     };
     readonly es: {
@@ -442,6 +451,9 @@ declare const locale: {
             str_9806: string;
             str_10106: string;
             str_grid_height_variable: string;
+            str_10476: string;
+            str_10477: string;
+            str_10478: string;
         };
     };
     readonly 'zh-cn': {
@@ -553,6 +565,9 @@ declare const locale: {
             str_9806: string;
             str_10106: string;
             str_grid_height_variable: string;
+            str_10476: string;
+            str_10477: string;
+            str_10478: string;
         };
     };
     readonly 'zh-tw': {
@@ -664,6 +679,9 @@ declare const locale: {
             str_9806: string;
             str_10106: string;
             str_grid_height_variable: string;
+            str_10476: string;
+            str_10477: string;
+            str_10478: string;
         };
     };
     readonly fil: {
@@ -768,6 +786,9 @@ declare const locale: {
             str_9806: string;
             str_10106: string;
             str_grid_height_variable: string;
+            str_10476: string;
+            str_10477: string;
+            str_10478: string;
         };
     };
 };

package/dist/src/common/services/i18n/resources/ja.json

@@ -106,6 +106,9 @@
         "str_reaction": "Reaction",
         "str_9806": "There are no items added yet. Please add and edit items!",
         "str_10106": "The height is adjusted\naccording to the content.",
-        "str_grid_height_variable": "Variable"
+        "str_grid_height_variable": "Variable",
+        "str_10476": "Loading data information.",
+        "str_10477": "Data value not linked",
+        "str_10478": "No data values to link."
     }
 }

package/dist/src/common/services/i18n/resources/ko.json

@@ -107,6 +107,9 @@
         "str_reaction": "반응",
         "str_9806": "아직 추가된 항목이 없어요. 항목을 추가하고 편집해주세요!",
         "str_10106": "내용에 따라 높이가 조절됩니다.",
-        "str_grid_height_variable": "가변"
+        "str_grid_height_variable": "가변",
+        "str_10476": "데이터 정보를 불러오는 중입니다.",
+        "str_10477": "데이터 값 연결되지 않음",
+        "str_10478": "연결할 데이터 값이 없습니다."
     }
 }

package/dist/src/common/services/i18n/resources/zh-cn.json

@@ -106,6 +106,9 @@
         "str_reaction": "Reaction",
         "str_9806": "There are no items added yet. Please add and edit items!",
         "str_10106": "The height is adjusted\naccording to the content.",
-        "str_grid_height_variable": "Variable"
+        "str_grid_height_variable": "Variable",
+        "str_10476": "Loading data information.",
+        "str_10477": "Data value not linked",
+        "str_10478": "No data values to link."
     }
 }

package/dist/src/common/services/i18n/resources/zh-tw.json

@@ -106,6 +106,9 @@
         "str_reaction": "Reaction",
         "str_9806": "There are no items added yet. Please add and edit items!",
         "str_10106": "The height is adjusted\naccording to the content.",
-        "str_grid_height_variable": "Variable"
+        "str_grid_height_variable": "Variable",
+        "str_10476": "Loading data information.",
+        "str_10477": "Data value not linked",
+        "str_10478": "No data values to link."
     }
 }

package/dist/src/sub/DynamicLayout/CompositionRenderer/createCompositions.js

@@ -1,8 +1,4 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -20,9 +16,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createCompositions = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-require("react");
-var react_i18next_1 = require("react-i18next");
-var styled_components_1 = __importDefault(require("styled-components"));
 var compositionQueryContext_1 = require("../compositionQueryContext");
 var Composition_1 = __importDefault(require("./Composition"));
 function createCompositions(_a) {
@@ -31,47 +24,12 @@ function createCompositions(_a) {
     // 직접 입력 유형인 경우
     if (!isQueryDataConnected) {
         var valueTypeCompositions = compositions.filter(function (composition) { return !!(composition === null || composition === void 0 ? void 0 : composition.ccbManualItemUuid); });
-        // MANUAL ITEM이 없는 경우
-        if (!valueTypeCompositions.length) {
-            return [(0, jsx_runtime_1.jsx)(EmptyString, {}, "empty-manual-item")];
-        }
         return valueTypeCompositions.map(function (composition) { return ((0, jsx_runtime_1.jsx)(Composition_1.default, __assign({}, composition, { ccbCode: componentBlockCode }), composition.id)); });
     }
-    if (!compositions.length) {
-        return [(0, jsx_runtime_1.jsx)("div", { children: "EMPTY TEXT" }, "empty")];
-    }
-    // 데이터 연결 유형이나, 쿼리 데이터나 키가 없는 경우
-    if (queryPath === 'NONE' || !queryPath || !queryData) {
-        return [(0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: "\uC544\uC9C1 \uC5F0\uACB0\uB41C \uCFFC\uB9AC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }, "no-query")];
-    }
-    var queryDataValue = queryData[queryPath];
+    var queryDataValue = queryData === null || queryData === void 0 ? void 0 : queryData[queryPath];
     var queryComposition = compositions.find(function (composition) { return !composition.ccbManualItemUuid; });
-    // 쿼리 데이터와 키가 있으나, 쿼리 데이터에 해당 키가 없는 경우
-    if (!queryDataValue) {
-        return [(0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: "\uC5F0\uACB0\uB41C \uB370\uC774\uD130\uB97C \uCC3E\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4." }, "not-found")];
-    }
-    // 쿼리 데이터와 키가 있으나, 쿼리 데이터에 결과가 빈 경우
-    if (!queryDataValue.length) {
-        return [(0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: "\uC544\uC9C1 \uBCF4\uC5EC\uC904 \uCF58\uD150\uCE20\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }, "empty-item")];
-    }
+    if (!queryDataValue)
+        return [(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})];
     return queryDataValue.slice(0, limit).map(function (query, index) { return ((0, jsx_runtime_1.jsx)(compositionQueryContext_1.CCBQueryPathContext.Provider, __assign({ value: { queryData: query } }, { children: (0, jsx_runtime_1.jsx)(Composition_1.default, __assign({}, queryComposition, { ccbCode: componentBlockCode })) }), index)); });
 }
 exports.createCompositions = createCompositions;
-function EmptyString() {
-    var t = (0, react_i18next_1.useTranslation)('translation').t;
-    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.6);\n  color: white;\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  padding: ", ";\n  text-align: center;\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  line-height: ", ";\n  padding: ", ";\n  text-align: center;\n  word-break: keep-all;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.desktopFontSize.body2;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.fontWeight.bold;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.desktopLineHeight.body2;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingE;
-});
-var templateObject_1;

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

@@ -138,18 +138,6 @@ 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
@@ -164,6 +152,54 @@ 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) {
@@ -174,43 +210,29 @@ 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));
+                            return renderElements(component, getPositionStyle(position, ccbInset, component.designType, component.size, component.type), orderedCompositions.length);
                         }) })) }), 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 }), 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: queryPath,
-                                        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, {}))] })) }))] }));
+                    }, 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)] })) }))] }));
 }
-function EmptyString() {
+function EmptyString(_a) {
+    var stringKey = _a.stringKey;
     var t = (0, react_i18next_1.useTranslation)('translation').t;
-    return (0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: t('str_9806') });
+    return (0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: t(stringKey) });
 }
-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 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 theme = _a.theme;
-    return theme.desktopFontSize.body2;
+    return theme.desktopFontSize.caption1;
 }, function (_a) {
     var theme = _a.theme;
     return theme.fontWeight.bold;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.body2;
+    return theme.desktopLineHeight.caption1;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingE;
+    return theme.spacing.spacingD;
 });
 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

@@ -154,14 +154,6 @@ 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);
@@ -181,6 +173,48 @@ 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) {
@@ -193,20 +227,7 @@ 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 }), 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: queryPath,
-                                    limit: displayCounts,
-                                    queryData: queryData,
-                                    compositions: orderedCompositions,
-                                    componentBlockCode: types_1.CB_ALL_CODES.CB_LIST
-                                }).slice(startIndex, endIndex + 1) })) }))) : ((0, jsx_runtime_1.jsx)(EmptyString, {}))] })) }))] }));
+            }), (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)] })) }))] }));
 }
 function getIsBgMedia(isMobile, specs) {
     if (!specs) {
@@ -292,22 +313,23 @@ function getCompositionMinValue(composition, device) {
         };
     }
 }
-function EmptyString() {
+function EmptyString(_a) {
+    var stringKey = _a.stringKey;
     var t = (0, react_i18next_1.useTranslation)('translation').t;
-    return (0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: t('str_9806') });
+    return (0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: t(stringKey) });
 }
-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 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 theme = _a.theme;
-    return theme.desktopFontSize.body2;
+    return theme.desktopFontSize.caption1;
 }, function (_a) {
     var theme = _a.theme;
     return theme.fontWeight.bold;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.body2;
+    return theme.desktopLineHeight.caption1;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingE;
+    return theme.spacing.spacingD;
 });
 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

@@ -127,21 +127,6 @@ 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 renderElements = function (component, positionStyle) {
-        var _a;
-        switch (component.type) {
-            case 'PREV':
-                return ((0, jsx_runtime_1.jsx)(CustomNavigationPrevBtn_1.CustomNavigationPrevBtn, { isDisabled: loop ? false : isBeginning, styles: customNavigationNormalStyle, hoverStyles: customNavigationHoverStyle, onClick: onClickPrevBtn, style: __assign(__assign({}, positionStyle), { visibility: mode === 'EDIT' ? 'visible' : isHovered ? 'visible' : 'hidden' }) }));
-            case 'NEXT':
-                return ((0, jsx_runtime_1.jsx)(CustomNavigationNextBtn_1.CustomNavigationNextBtn, { isDisabled: loop ? false : isEnd, styles: customNavigationNormalStyle, hoverStyles: customNavigationHoverStyle, onClick: onClickNextBtn, style: __assign(__assign({}, positionStyle), { visibility: mode === 'EDIT' ? 'visible' : isHovered ? 'visible' : 'hidden' }) }));
-            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: orderedCompositions.length, progressRef: progressRef, leftTimeMsRef: leftTimeMsRef, styles: isHovered ? customProgressbarHoverStyle : customProgressbarNormalStyle }));
-            default:
-                return null;
-        }
-    };
     var backgroundRef = (0, react_1.useRef)(null);
     var isMobile = device === 'MOBILE';
     var isBgMedia = getIsBgMedia(isMobile, CB_STYLE_PROP_BGMEDIA);
@@ -158,6 +143,49 @@ function SlideBanner(props) {
     if (mode === 'EDIT') {
         style.visibility = 'visible';
     }
+    var renderElements = function (component, positionStyle, slidesLength) {
+        var _a;
+        switch (component.type) {
+            case 'PREV':
+                return ((0, jsx_runtime_1.jsx)(CustomNavigationPrevBtn_1.CustomNavigationPrevBtn, { isDisabled: loop ? false : isBeginning, styles: customNavigationNormalStyle, hoverStyles: customNavigationHoverStyle, onClick: onClickPrevBtn, style: __assign(__assign({}, positionStyle), { visibility: mode === 'EDIT' ? 'visible' : isHovered ? 'visible' : 'hidden' }) }));
+            case 'NEXT':
+                return ((0, jsx_runtime_1.jsx)(CustomNavigationNextBtn_1.CustomNavigationNextBtn, { isDisabled: loop ? false : isEnd, styles: customNavigationNormalStyle, hoverStyles: customNavigationHoverStyle, onClick: onClickNextBtn, style: __assign(__assign({}, positionStyle), { visibility: mode === 'EDIT' ? 'visible' : isHovered ? 'visible' : 'hidden' }) }));
+            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 }));
+            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);
+    };
     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) {
@@ -168,37 +196,27 @@ 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));
+                                    return renderElements(component, getPositionStyle(position, ccbInset, component.designType, component.size, component.type), orderedCompositions.length);
                                 }) })) }), 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 }), 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: queryPath,
-                                            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, {}))] }))] }))] }));
+                    }), (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)] }))] }))] }));
 }
-function EmptyString() {
+function EmptyString(_a) {
+    var stringKey = _a.stringKey;
     var t = (0, react_i18next_1.useTranslation)('translation').t;
-    return (0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: t('str_9806') });
+    return (0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: t(stringKey) });
 }
-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 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 theme = _a.theme;
-    return theme.desktopFontSize.body2;
+    return theme.desktopFontSize.caption1;
 }, function (_a) {
     var theme = _a.theme;
     return theme.fontWeight.bold;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.body2;
+    return theme.desktopLineHeight.caption1;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingE;
+    return theme.spacing.spacingD;
 });
 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "2.7.497",
+  "version": "2.7.499",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",