pds-dev-kit-web-test 2.7.246 → 2.7.247

package/dist/src/sub/DynamicLayout/mocks.js

@@ -1,21 +1,28 @@
 "use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MOCK_SECTIONS = void 0;
-require("./mock_contentsCarousel");
+var mock_componentBlocks_1 = require("./mock_componentBlocks");
+var mock_contentsCarousel_1 = require("./mock_contentsCarousel");
 require("./mock_contentsList");
-var mock_slideBanner_1 = require("./mock_slideBanner");
+require("./mock_slideBanner");
 exports.MOCK_SECTIONS = [
     {
         administrativeTitle: 'Daily Pages',
         appearanceTemplate: 'GENERAL_A',
-        componentBlocks: [
+        componentBlocks: __spreadArray([
             // MOCK_VIDEO_CB,
             // MOCK_VIDEO_CB_2,
-            // SAMPLE_CONTENTSCAROUSEL_CB,
-            mock_slideBanner_1.SAMPLE_SLIDEBANNER_CB
-            // SAMPLE_LIST_CB
-            // ...MOCK_COMPONENT_BLOCKS
-        ],
+            mock_contentsCarousel_1.SAMPLE_CONTENTSCAROUSEL_CB
+        ], mock_componentBlocks_1.MOCK_COMPONENT_BLOCKS, true),
         display: true,
         dlSelectorId: 'DLSELKUP4U5JE3TVEI47R-RSWV6',
         dynamicLayoutPageId: 6106,

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

@@ -39,10 +39,11 @@ var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverB
 var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
 var S_HiddenCover_1 = require("../components/S_HiddenCover");
 var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
+var textSpecFormatOptions_1 = require("../Text/textSpecFormatOptions");
 function Button(props) {
     var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
     var queryContext = (0, compositionQueryContext_1.useCCBQueryPath)();
-    var index = props.index, CB_STYLE_PROP_COLOR = props.CB_STYLE_PROP_COLOR, _b = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _b.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _b.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _b.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE, CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA = _b.CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
+    var index = props.index, CB_STYLE_PROP_COLOR = props.CB_STYLE_PROP_COLOR, _b = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _b.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _b.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _b.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE, CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA = _b.CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA, _c = props.CB_CONTENT_PROP_TEXT, CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE = _c.CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE, CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA = _c.CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA, _d = props.CB_CONTENT_PROP_TEXTOPTION, CB_CONTENT_PROP_TEXTOPTION_SPEC_SUFFIX = _d.CB_CONTENT_PROP_TEXTOPTION_SPEC_SUFFIX, CB_CONTENT_PROP_TEXTOPTION_SPEC_PREFIX = _d.CB_CONTENT_PROP_TEXTOPTION_SPEC_PREFIX, CB_CONTENT_PROP_TEXTOPTION_SPEC_FORMAT = _d.CB_CONTENT_PROP_TEXTOPTION_SPEC_FORMAT, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
     var cLinkValue = function () {
         if (CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE === 'DATA' ||
             CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE === 'DELEGATEDDATA') {
@@ -57,15 +58,15 @@ function Button(props) {
         }
         return CB_CONTENT_PROP_CLINK_SPEC_SRC;
     };
-    var _c = (0, useCLINK_1.default)({
+    var _e = (0, useCLINK_1.default)({
         src: cLinkValue(),
         type: CB_CONTENT_PROP_CLINK_SPEC_TYPE,
         openNewTab: CB_CONTENT_PROP_CLINK_SPEC_NEWTAB,
         internalSrc: String(CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC)
-    }), onClickCLINK = _c.onClickCLINK, CLINKCursor = _c.CLINKCursor;
-    var _d = getBTNStyles(props.CB_STYLE_PROP_TEXT, device), btnTextStyle = _d.style, btnTextHoverStyle = _d.hoverStyle;
-    var _e = getBTNColorStyles(CB_STYLE_PROP_COLOR, device), btnColorStyle = _e.style, btnColorHoverStyle = _e.hoverStyle;
-    var _f = (0, util_1.parseProperties)(props, device), propsStyle = _f.style, propsHoverStyle = _f.hoverStyle, _g = _f.layout, paddingLeft = _g.paddingLeft, paddingRight = _g.paddingRight, paddingTop = _g.paddingTop, paddingBottom = _g.paddingBottom, layoutStyle = __rest(_g, ["paddingLeft", "paddingRight", "paddingTop", "paddingBottom"]), effect = _f.effect;
+    }), onClickCLINK = _e.onClickCLINK, CLINKCursor = _e.CLINKCursor;
+    var _f = getBTNStyles(props.CB_STYLE_PROP_TEXT, device), btnTextStyle = _f.style, btnTextHoverStyle = _f.hoverStyle;
+    var _g = getBTNColorStyles(CB_STYLE_PROP_COLOR, device), btnColorStyle = _g.style, btnColorHoverStyle = _g.hoverStyle;
+    var _h = (0, util_1.parseProperties)(props, device), propsStyle = _h.style, propsHoverStyle = _h.hoverStyle, _j = _h.layout, paddingLeft = _j.paddingLeft, paddingRight = _j.paddingRight, paddingTop = _j.paddingTop, paddingBottom = _j.paddingBottom, layoutStyle = __rest(_j, ["paddingLeft", "paddingRight", "paddingTop", "paddingBottom"]), effect = _h.effect;
     var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
     var googleFonts = (0, useGoogleFonts_1.getGoogleFontsFromTextSpecCode)(props.CB_STYLE_PROP_TEXT, device === 'MOBILE');
     (0, useGoogleFonts_1.useGoogleFonts)({ fonts: googleFonts });
@@ -84,6 +85,20 @@ function Button(props) {
     var hasEffect = !isNoneEffectType;
     var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
     var textValue = function () {
+        var FORMATOPTION = CB_CONTENT_PROP_TEXTOPTION_SPEC_FORMAT;
+        var formatOption = textSpecFormatOptions_1.TEXT_SPEC_FORMAT_OPRIONS[FORMATOPTION];
+        var isDataConnected = CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE === 'DATA' ||
+            CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE === 'DELEGATEDDATA';
+        if (isDataConnected) {
+            if (queryContext === null || queryContext === void 0 ? void 0 : queryContext.queryData) {
+                var value = queryContext.queryData[CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA];
+                if (formatOption) {
+                    return formatOption.formatter(value);
+                }
+                return value;
+            }
+            return 'ERROR: data connected but no data';
+        }
         if (device === 'MOBILE' &&
             mode !== 'EDIT' &&
             props.CB_CONTENT_PROP_VISIBILITY.CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB === false) {
@@ -97,10 +112,19 @@ function Button(props) {
         if (device === 'MOBILE') {
             var value = props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXTMOBILEALTERNATIVE;
             if (value === null || value === undefined) {
+                if (formatOption) {
+                    return formatOption.formatter(props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT);
+                }
                 return props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT;
             }
+            if (formatOption) {
+                return formatOption.formatter(value);
+            }
             return value;
         }
+        if (formatOption) {
+            return formatOption.formatter(props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT);
+        }
         return props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT;
     };
     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.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle, style: {
@@ -108,9 +132,9 @@ function Button(props) {
                     paddingRight: paddingRight,
                     paddingBottom: paddingBottom,
                     paddingTop: paddingTop
-                } }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ onMouseLeave: function (e) {
+                } }, { children: (0, jsx_runtime_1.jsxs)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ onMouseLeave: function (e) {
                         e.currentTarget.classList.remove('hovered');
-                    }, className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign(__assign({}, btnTextStyle), propsStyle), layoutStyle), effectCssProperties), btnColorStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor }), hoverStyle: __assign(__assign(__assign(__assign({}, btnTextHoverStyle), propsHoverStyle), btnColorHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: textValue() })) }))] }));
+                    }, className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign(__assign({}, btnTextStyle), propsStyle), layoutStyle), effectCssProperties), btnColorStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor }), hoverStyle: __assign(__assign(__assign(__assign({}, btnTextHoverStyle), propsHoverStyle), btnColorHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: [CB_CONTENT_PROP_TEXTOPTION_SPEC_PREFIX, textValue(), CB_CONTENT_PROP_TEXTOPTION_SPEC_SUFFIX] })) }))] }));
 }
 function getBTNStyles(props, device) {
     var availableSpecCodes = [

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

@@ -10,6 +10,7 @@ export type ContentsCarouselElementsProps = {
     type: ComponentType;
     position: OUTSET_POSTIION | INSET_POSTIION;
     designType: CB_STYLE_PROP_CONTENTSCAROUSELBUTTON_SPEC_PREVBTNSTYLE_TYPE;
+    size: 'LARGE' | 'MEDIUM' | 'SMALL';
 };
 declare function ContentsCarousel(props: Props): JSX.Element;
 export default ContentsCarousel;

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

@@ -29,6 +29,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
+var react_i18next_1 = require("react-i18next");
 var CustomSectionBackgroundMedia_1 = require("../../../../../../../DynamicLayout/components/Section/components/CustomSectionBackgroundMedia");
 var createCompositions_1 = require("../../../../../../../DynamicLayout/CompositionRenderer/createCompositions");
 var dynamicLayoutContext_1 = require("../../../../../../../DynamicLayout/dynamicLayoutContext");
@@ -47,7 +48,8 @@ var useFlexGridLayout_1 = require("./hooks/useFlexGridLayout");
 var useSwiper_1 = require("./hooks/useSwiper");
 var createComponent = function (type, getDesignType, getLocation, designType) {
     if (designType === void 0) { designType = 'NONE'; }
-    return function (normalStyle, hoverStyle, isHovered) {
+    return function (normalStyle, hoverStyle, isHovered, size) {
+        if (size === void 0) { size = 'MEDIUM'; }
         var normalDesign = getDesignType(normalStyle);
         var hoverDesign = getDesignType(hoverStyle);
         if (isHovered && hoverDesign === 'NONE')
@@ -57,32 +59,38 @@ var createComponent = function (type, getDesignType, getLocation, designType) {
         return {
             type: type,
             position: isHovered ? getLocation(hoverStyle) : getLocation(normalStyle),
-            designType: designType
+            designType: designType,
+            size: size
         };
     };
 };
 function ContentsCarousel(props) {
-    var _a;
-    var _b = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _b.device, mode = _b.mode, queryData = _b.queryData;
-    var compositions = props.compositions, index = props.index, _c = props.CB_CONTENT_PROP_CONTENTSCAROUSEL, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_ITEMCOUNTS = _c.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_ITEMCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS = _c.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE = _c.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA = _c.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS = _c.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 _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_ITEMCOUNTS = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_ITEMCOUNTS, 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 displayCounts = CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS !== null && CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS !== void 0 ? CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS : CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS.length;
-    var _d = (0, util_1.parseProperties)(props, device), style = _d.style, hoverStyle = _d.hoverStyle, layout = _d.layout, overlayStyle = _d.overlayStyle, effect = _d.effect;
-    var _e = (0, contentsCarouselUtils_1.parseCarouselStyleToCarouselCoreProp)({
+    var autoPlayEnabled = device === 'DESKTOP'
+        ? CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD.CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD_SPEC_AUTOPLAYUSE
+        : (_a = CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD['CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD_SPEC_AUTOPLAYUSE:MOBILE']) !== null && _a !== void 0 ? _a : CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD.CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD_SPEC_AUTOPLAYUSE;
+    var displayCounts = device === 'DESKTOP'
+        ? CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS
+        : CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MDISPLAYCOUNTS !== null && CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MDISPLAYCOUNTS !== void 0 ? CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MDISPLAYCOUNTS : CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS.length;
+    var _e = (0, util_1.parseProperties)(props, device), style = _e.style, hoverStyle = _e.hoverStyle, layout = _e.layout, overlayStyle = _e.overlayStyle, effect = _e.effect;
+    var _f = (0, contentsCarouselUtils_1.parseCarouselStyleToCarouselCoreProp)({
         props: CB_STYLE_PROP_CONTENTSCAROUSEL,
-        contentsPropsPartials: { CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS },
+        contentsPropsPartials: { CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS: displayCounts },
         device: device
-    }), contentsCarouselNormalStyle = _e.normalStyle, contentsCarouselHoverStyle = _e.hoverStyle;
-    var _f = (0, contentsCarouselUtils_1.parseCarouselStyleToCustomNavigationProp)({
+    }), contentsCarouselNormalStyle = _f.normalStyle, contentsCarouselHoverStyle = _f.hoverStyle;
+    var _g = (0, contentsCarouselUtils_1.parseCarouselStyleToCustomNavigationProp)({
         props: CB_STYLE_PROP_CONTENTSCAROUSEL,
         device: device
-    }), customNavigationNormalStyle = _f.normalStyle, customNavigationHoverStyle = _f.hoverStyle;
-    var _g = (0, contentsCarouselUtils_1.parseCarouselStyleToCustomProgressbarProp)({
+    }), customNavigationNormalStyle = _g.normalStyle, customNavigationHoverStyle = _g.hoverStyle;
+    var _h = (0, contentsCarouselUtils_1.parseCarouselStyleToCustomProgressbarProp)({
         props: CB_STYLE_PROP_CONTENTSCAROUSEL,
         device: device
-    }), customProgressbarNormalStyle = _g.normalStyle, customProgressbarHoverStyle = _g.hoverStyle;
-    var _h = (0, useSwiper_1.useSwiper)(), swiperRef = _h.swiperRef, progressRef = _h.progressRef, leftTimeMsRef = _h.leftTimeMsRef, isBeginning = _h.isBeginning, isEnd = _h.isEnd, onSwiper = _h.onSwiper, onSlideChangeTransitionEnd = _h.onSlideChangeTransitionEnd, onAutoplayTimeLeft = _h.onAutoplayTimeLeft, onClickPrevBtn = _h.onClickPrevBtn, onClickNextBtn = _h.onClickNextBtn;
-    var _j = (0, react_1.useState)(false), isHovered = _j[0], setIsHovered = _j[1];
+    }), 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 loop = isHovered ? contentsCarouselHoverStyle.loop : contentsCarouselNormalStyle.loop;
     // NOTE: edit모드에서는 그리드의 이벤트만 작동하도록 CB의 포인터 이벤트는 막습니다.
     var editModeStyle = mode === 'EDIT' ? { pointerEvents: 'none' } : {};
@@ -109,23 +117,23 @@ function ContentsCarousel(props) {
             designType: customProgressbarNormalStyle.type || 'NONE'
         }
     ].filter(function (component) { return component !== undefined; });
-    var _k = (0, useFlexGridLayout_1.useFlexGridLayout)({ components: components }), layoutRef = _k.layoutRef, positionRefs = _k.positionRefs, 
+    var _l = (0, useFlexGridLayout_1.useFlexGridLayout)({ components: components }), layoutRef = _l.layoutRef, positionRefs = _l.positionRefs, 
     // ccbInset,
-    componentGroups = _k.componentGroups, getPositionStyle = _k.getPositionStyle, getComponentGroupLayout = _k.getComponentGroupLayout;
+    componentGroups = _l.componentGroups, getPositionStyle = _l.getPositionStyle, getComponentGroupLayout = _l.getComponentGroupLayout;
     var ccbInset = {
         top: '0px',
         right: '0px',
         bottom: '0px',
         left: '0px'
     };
-    var renderElements = function (component) {
+    var renderElements = function (component, style) {
         switch (component.type) {
             case 'PREV':
-                return ((0, jsx_runtime_1.jsx)(CustomNavigationPrevBtn_1.CustomNavigationPrevBtn, { isDisabled: loop ? false : isBeginning, styles: customNavigationNormalStyle, hoverStyles: customNavigationHoverStyle, onClick: onClickPrevBtn }));
+                return ((0, jsx_runtime_1.jsx)(CustomNavigationPrevBtn_1.CustomNavigationPrevBtn, { isDisabled: loop ? false : isBeginning, hoverStyles: customNavigationHoverStyle, onClick: onClickPrevBtn, styles: customNavigationNormalStyle, style: style }));
             case 'NEXT':
-                return ((0, jsx_runtime_1.jsx)(CustomNavigationNextBtn_1.CustomNavigationNextBtn, { isDisabled: loop ? false : isEnd, styles: customNavigationNormalStyle, hoverStyles: customNavigationHoverStyle, onClick: onClickNextBtn }));
+                return ((0, jsx_runtime_1.jsx)(CustomNavigationNextBtn_1.CustomNavigationNextBtn, { isDisabled: loop ? false : isEnd, styles: customNavigationNormalStyle, hoverStyles: customNavigationHoverStyle, onClick: onClickNextBtn, style: style }));
             case 'PROGRESSBAR':
-                return ((0, jsx_runtime_1.jsx)(CustomProgressbar_1.CustomProgressbar, { 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;
         }
@@ -133,7 +141,7 @@ function ContentsCarousel(props) {
     // NOTE: edit환경에서 hover가 작동하지 않아서 제외함 필요시 추가..
     var columnGapEnum = device === 'DESKTOP'
         ? CB_STYLE_PROP_CONTENTSCAROUSELDESIGN.CB_STYLE_PROP_CONTENTSCAROUSELDESIGN_SPEC_ITEMSPACING
-        : (_a = CB_STYLE_PROP_CONTENTSCAROUSELDESIGN['CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_ITEMSPACING:MOBILE']) !== null && _a !== void 0 ? _a : CB_STYLE_PROP_CONTENTSCAROUSELDESIGN.CB_STYLE_PROP_CONTENTSCAROUSELDESIGN_SPEC_ITEMSPACING;
+        : (_b = CB_STYLE_PROP_CONTENTSCAROUSELDESIGN['CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_ITEMSPACING:MOBILE']) !== null && _b !== void 0 ? _b : CB_STYLE_PROP_CONTENTSCAROUSELDESIGN.CB_STYLE_PROP_CONTENTSCAROUSELDESIGN_SPEC_ITEMSPACING;
     var columnGap = columnGapEnum === 'NARROW' ? 8 : columnGapEnum === 'NORMAL' ? 24 : 36;
     var pointerEventsObj = mode === 'EDIT' ? { pointerEvents: 'none' } : {};
     var backgroundRef = (0, react_1.useRef)(null);
@@ -154,26 +162,45 @@ function ContentsCarousel(props) {
                         else {
                             delete positionRefs.current[position];
                         }
-                    }, style: __assign(__assign({}, getPositionStyle(position, ccbInset)), { 
-                        // pointerEvents: 'none',
-                        zIndex: 3 }) }, { 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); }) })) }), 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));
+                        }) })) }), 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": CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, "data-number-of-items": CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, "data-column-gap": columnGap, "data-cols": CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_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 }), (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
+                    }, 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: Math.min(CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS.length), 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() }, { children: (0, createCompositions_1.createCompositions)({
+                                } }, { 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() }, { 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
-                                    }) }), CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE) })) }))] })) }))] }));
+                                    }) }), CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE +
+                                    autoPlayEnabled +
+                                    orderedCompositions.length) })) }))) : ((0, jsx_runtime_1.jsx)(EmptyString, {}))] })) }))] }));
 }
-var S_Overlay = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __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 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  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.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 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) {
     if (!specs) {
         return false;
@@ -194,8 +221,8 @@ function getMediaType(isMobile, specs) {
     }
     return specs.CB_STYLE_PROP_BGMEDIA_SPEC_TYPE;
 }
-var S_SwiperLayout = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n  margin: 0 auto;\n  position: relative;\n  width: 100%;\n"], ["\n  height: 100%;\n  margin: 0 auto;\n  position: relative;\n  width: 100%;\n"])));
-var S_SwiperWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  bottom: ", ";\n  left: ", ";\n  position: absolute;\n  right: ", ";\n  top: ", ";\n  ", ";\n"], ["\n  bottom: ", ";\n  left: ", ";\n  position: absolute;\n  right: ", ";\n  top: ", ";\n  ", ";\n"])), function (_a) {
+var S_SwiperLayout = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n  margin: 0 auto;\n  position: relative;\n  width: 100%;\n"], ["\n  height: 100%;\n  margin: 0 auto;\n  position: relative;\n  width: 100%;\n"])));
+var S_SwiperWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  bottom: ", ";\n  left: ", ";\n  position: absolute;\n  right: ", ";\n  top: ", ";\n  ", ";\n"], ["\n  bottom: ", ";\n  left: ", ";\n  position: absolute;\n  right: ", ";\n  top: ", ";\n  ", ";\n"])), function (_a) {
     var ccbInset = _a.ccbInset;
     return ccbInset.bottom;
 }, function (_a) {
@@ -211,6 +238,6 @@ var S_SwiperWrapper = styled_components_1.default.div(templateObject_3 || (templ
     var customStyle = _a.customStyle;
     return customStyle;
 });
-var S_CustomBackgroundWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __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"])));
+var S_CustomBackgroundWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __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"])));
 exports.default = ContentsCarousel;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -56,6 +56,7 @@ var ContentsCarouselCore = (0, react_1.forwardRef)(function (_a, ref) {
         return childrenArray;
     }, [children, slidesPerView, styles.slidesPerGroup]);
     var finalSlidesPerView = props.effect === 'cards' ? 1 : slidesPerView;
+    var useAutoplay = !!styles.useAutoplay && Array.isArray(children) && children.length > 1;
     return ((0, jsx_runtime_1.jsx)(StyledSwiper_1.default, __assign({ id: "styled-swiper-wrapper" }, { children: (0, jsx_runtime_1.jsx)(react_2.Swiper, __assign({ ref: ref, style: {
                 width: '100%',
                 height: '100%'
@@ -70,7 +71,7 @@ var ContentsCarouselCore = (0, react_1.forwardRef)(function (_a, ref) {
                 swiper_1.EffectCards,
                 swiper_1.EffectCoverflow,
                 swiper_1.EffectFlip
-            ], slidesPerView: finalSlidesPerView, scrollbar: styles.scrollbar, slidesPerGroup: styles.slidesPerGroup, spaceBetween: styles.spaceBetween, freeMode: styles.freeMode, autoplay: styles.useAutoplay ? styles.autoplay : false, loop: styles.loop }, props, { children: slidesWithEmpty.map(function (slide, index) { return ((0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { children: slide || (0, jsx_runtime_1.jsx)("div", { className: "swiper-slide-empty" }) }, index)); }) })) })));
+            ], slidesPerView: finalSlidesPerView, scrollbar: styles.scrollbar, slidesPerGroup: styles.slidesPerGroup, spaceBetween: styles.spaceBetween, freeMode: styles.freeMode, autoplay: useAutoplay ? styles.autoplay : false, loop: styles.loop }, props, { children: slidesWithEmpty.map(function (slide, index) { return ((0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { children: slide || (0, jsx_runtime_1.jsx)("div", { className: "swiper-slide-empty" }) }, index)); }) })) })));
 });
 ContentsCarouselCore.displayName = 'ContentsCarouselCore';
 exports.default = ContentsCarouselCore;

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

@@ -5,8 +5,9 @@ export interface CustomNavigationNextBtnProps {
     styles: CustomNavigationProps;
     hoverStyles: CustomNavigationProps;
     onClick?: () => void;
+    style?: React.CSSProperties;
 }
-export declare const CustomNavigationNextBtn: ({ isDisabled, styles, hoverStyles, onClick }: CustomNavigationNextBtnProps) => JSX.Element;
+export declare const CustomNavigationNextBtn: ({ isDisabled, styles, hoverStyles, onClick, style }: CustomNavigationNextBtnProps) => JSX.Element;
 export interface FlexBoxProps {
     direction?: 'row' | 'column';
     justifyContent?: string;

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

@@ -44,21 +44,21 @@ var IconButton_1 = require("../../../../../../../../DynamicLayout/components/pds
 var styled_components_1 = __importStar(require("styled-components"));
 var navigationConfigs_1 = require("./navigationConfigs");
 var CustomNavigationNextBtn = function (_a) {
-    var isDisabled = _a.isDisabled, styles = _a.styles, hoverStyles = _a.hoverStyles, onClick = _a.onClick;
+    var isDisabled = _a.isDisabled, styles = _a.styles, hoverStyles = _a.hoverStyles, onClick = _a.onClick, style = _a.style;
     var nextButton = styles.nextBtnType === 'NONE'
         ? undefined
         : navigationConfigs_1.nextButtonMappedIcons[styles.nextBtnType || 'DESIGN1'];
     var buttonSize = 'large';
     var iconSize = 24;
-    if (styles.prevBtnSize === 'SMALL') {
+    if (styles.nextBtnSize === 'SMALL') {
         buttonSize = 40;
         iconSize = 20;
     }
-    if (styles.prevBtnSize === 'LARGE') {
+    if (styles.nextBtnSize === 'LARGE') {
         buttonSize = 72;
         iconSize = 40;
     }
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: nextButton && ((0, jsx_runtime_1.jsx)(S_NextButton, __assign({ className: "cb-contentscarousel-next-button", disabled: isDisabled, "$size": styles.nextBtnSize }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: buttonSize, iconSize: iconSize, shapeType: nextButton.shapeType, borderColorKey: nextButton.borderColorKey, overrideBaseColorHex: styles.nextBtnPrimaryColor, overrideBaseColorHexHover: hoverStyles.nextBtnPrimaryColor, iconName: nextButton.iconName, iconFillType: "line", iconColorKey: nextButton.iconColorKey || 'ui_cpnt_icon_sys_black', overrideIconColorHex: styles.nextBtnSecondaryColor, overrideIconColorHexHover: hoverStyles.nextBtnSecondaryColor, shadow: nextButton.shadow, useDefaultActiveStyle: false, useDefaultHoverStyle: false, onClick: onClick }) }))) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: nextButton && ((0, jsx_runtime_1.jsx)(S_NextButton, __assign({ className: "cb-contentscarousel-next-button", disabled: isDisabled, "$size": styles.nextBtnSize, style: style }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: buttonSize, iconSize: iconSize, shapeType: nextButton.shapeType, borderColorKey: nextButton.borderColorKey, overrideBaseColorHex: styles.nextBtnPrimaryColor, overrideBaseColorHexHover: hoverStyles.nextBtnPrimaryColor, iconName: nextButton.iconName, iconFillType: "line", iconColorKey: nextButton.iconColorKey || 'ui_cpnt_icon_sys_black', overrideIconColorHex: styles.nextBtnSecondaryColor, overrideIconColorHexHover: hoverStyles.nextBtnSecondaryColor, shadow: nextButton.shadow, useDefaultActiveStyle: false, useDefaultHoverStyle: false, onClick: onClick }) }))) }));
 };
 exports.CustomNavigationNextBtn = CustomNavigationNextBtn;
 var S_NextButton = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  cursor: pointer;\n\n  ", ";\n"], ["\n  cursor: pointer;\n\n  ", ";\n"])), function (_a) {

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

@@ -5,8 +5,9 @@ export interface CustomNavigationPrevBtnProps {
     styles: CustomNavigationProps;
     hoverStyles?: CustomNavigationProps;
     onClick?: () => void;
+    style?: React.CSSProperties;
 }
-export declare const CustomNavigationPrevBtn: ({ isDisabled, styles, hoverStyles, onClick }: CustomNavigationPrevBtnProps) => JSX.Element;
+export declare const CustomNavigationPrevBtn: ({ isDisabled, styles, hoverStyles, onClick, style }: CustomNavigationPrevBtnProps) => JSX.Element;
 export interface FlexBoxProps {
     direction?: 'row' | 'column';
     justifyContent?: string;

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

@@ -44,7 +44,7 @@ var IconButton_1 = require("../../../../../../../../DynamicLayout/components/pds
 var styled_components_1 = __importStar(require("styled-components"));
 var navigationConfigs_1 = require("./navigationConfigs");
 var CustomNavigationPrevBtn = function (_a) {
-    var isDisabled = _a.isDisabled, styles = _a.styles, hoverStyles = _a.hoverStyles, onClick = _a.onClick;
+    var isDisabled = _a.isDisabled, styles = _a.styles, hoverStyles = _a.hoverStyles, onClick = _a.onClick, style = _a.style;
     var prevButton = styles.prevBtnType === 'NONE'
         ? undefined
         : navigationConfigs_1.prevButtonMappedIcons[styles.prevBtnType || 'DESIGN1'];
@@ -58,7 +58,7 @@ var CustomNavigationPrevBtn = function (_a) {
         buttonSize = 72;
         iconSize = 40;
     }
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: prevButton && ((0, jsx_runtime_1.jsx)(S_PrevButton, __assign({ className: "cb-contentscarousel-prev-button", disabled: isDisabled, "$size": styles.prevBtnSize }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: buttonSize, iconSize: iconSize, shapeType: prevButton.shapeType, borderColorKey: prevButton.borderColorKey, iconName: prevButton.iconName, iconFillType: "line", iconColorKey: prevButton.iconColorKey || 'ui_cpnt_icon_sys_black', overrideBaseColorHex: styles.prevBtnPrimaryColor, overrideBaseColorHexHover: hoverStyles === null || hoverStyles === void 0 ? void 0 : hoverStyles.prevBtnPrimaryColor, overrideIconColorHex: styles.prevBtnSecondaryColor, overrideIconColorHexHover: hoverStyles === null || hoverStyles === void 0 ? void 0 : hoverStyles.prevBtnSecondaryColor, shadow: prevButton.shadow, onClick: onClick, useDefaultActiveStyle: false, useDefaultHoverStyle: false }) }))) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: prevButton && ((0, jsx_runtime_1.jsx)(S_PrevButton, __assign({ className: "cb-contentscarousel-prev-button", disabled: isDisabled, "$size": styles.prevBtnSize, style: style }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: buttonSize, iconSize: iconSize, shapeType: prevButton.shapeType, borderColorKey: prevButton.borderColorKey, iconName: prevButton.iconName, iconFillType: "line", iconColorKey: prevButton.iconColorKey || 'ui_cpnt_icon_sys_black', overrideBaseColorHex: styles.prevBtnPrimaryColor, overrideBaseColorHexHover: hoverStyles === null || hoverStyles === void 0 ? void 0 : hoverStyles.prevBtnPrimaryColor, overrideIconColorHex: styles.prevBtnSecondaryColor, overrideIconColorHexHover: hoverStyles === null || hoverStyles === void 0 ? void 0 : hoverStyles.prevBtnSecondaryColor, shadow: prevButton.shadow, onClick: onClick, useDefaultActiveStyle: false, useDefaultHoverStyle: false }) }))) }));
 };
 exports.CustomNavigationPrevBtn = CustomNavigationPrevBtn;
 var S_PrevButton = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  cursor: pointer;\n\n  ", ";\n"], ["\n  cursor: pointer;\n\n  ", ";\n"])), function (_a) {

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

@@ -4,6 +4,7 @@ type Props = {
     styles: CustomProgressbarProps;
     progressRef: React.RefObject<number>;
     leftTimeMsRef: React.RefObject<number>;
+    slidesLength: number;
 };
-export declare const CustomProgressbar: ({ styles, progressRef, leftTimeMsRef }: Props) => JSX.Element;
+export declare const CustomProgressbar: ({ styles, progressRef, leftTimeMsRef, slidesLength }: Props) => JSX.Element;
 export default CustomProgressbar;

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

@@ -24,13 +24,14 @@ var react_1 = require("react");
 var styled_components_1 = __importDefault(require("styled-components"));
 var progressConfigs_1 = require("./progressConfigs");
 var CustomProgressbar = function (_a) {
-    var styles = _a.styles, progressRef = _a.progressRef, leftTimeMsRef = _a.leftTimeMsRef;
+    var styles = _a.styles, progressRef = _a.progressRef, leftTimeMsRef = _a.leftTimeMsRef, slidesLength = _a.slidesLength;
     var _b = (0, react_1.useState)(0), leftTimeSec = _b[0], setLeftTimeSec = _b[1];
     var _c = (0, react_1.useState)(0), progress = _c[0], setProgress = _c[1];
     (0, react_1.useEffect)(function () {
         var updateTimer = function () {
             var _a;
-            var sec = Math.abs(((_a = leftTimeMsRef.current) !== null && _a !== void 0 ? _a : 10000) / 1000);
+            var remainingMs = (_a = leftTimeMsRef.current) !== null && _a !== void 0 ? _a : 0;
+            var sec = Math.max(0, Math.ceil(remainingMs / 1000));
             setLeftTimeSec(sec);
         };
         updateTimer();
@@ -55,19 +56,21 @@ var CustomProgressbar = function (_a) {
         animationId = requestAnimationFrame(updateProgress);
         return function () { return cancelAnimationFrame(animationId); };
     }, []);
+    var progressRender = slidesLength > 1 ? progress : 0;
+    var timeLeftRender = slidesLength > 1 ? leftTimeSec : 0;
     var renderProgressByType = function () {
         var _a, _b, _c, _d, _e;
         switch (styles.type) {
             case 'NONE':
                 return null;
             case 'DESIGN1':
-                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { size: (_a = styles.size) !== null && _a !== void 0 ? _a : 'MEDIUM', progress: progress, leftTimeSec: leftTimeSec, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
+                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { size: (_a = styles.size) !== null && _a !== void 0 ? _a : 'MEDIUM', progress: progressRender, leftTimeSec: timeLeftRender, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
             // case 'DESIGN2':
             //   return (
             //     <ProgressDesign2
             //       size={styles.size ?? 'MEDIUM'}
-            //       progress={progress}
-            //       leftTimeSec={leftTimeSec}
+            //       progress={progressRender}
+            //       leftTimeSec={timeLeftRender}
             //       progressColor={styles.primaryColor}
             //       bufferColor={styles.secondaryColor}
             //     />
@@ -76,37 +79,37 @@ var CustomProgressbar = function (_a) {
             //   return (
             //     <ProgressDesign3
             //       size={styles.size ?? 'MEDIUM'}
-            //       progress={progress}
+            //       progress={progressRender}
             //       progressColor={styles.primaryColor}
             //       bufferColor={styles.secondaryColor}
             //     />
             //   );
             case 'DESIGN2':
-                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign4, { size: (_b = styles.size) !== null && _b !== void 0 ? _b : 'MEDIUM', progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
+                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign4, { size: (_b = styles.size) !== null && _b !== void 0 ? _b : 'MEDIUM', progress: progressRender, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
             // case 'DESIGN5':
             //   return (
             //     <ProgressDesign5
             //       size={styles.size ?? 'MEDIUM'}
-            //       progress={progress}
+            //       progress={progressRender}
             //       progressColor={styles.primaryColor}
             //       bufferColor={styles.secondaryColor}
             //     />
             //   );
             case 'DESIGN3':
-                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign6, { size: (_c = styles.size) !== null && _c !== void 0 ? _c : 'MEDIUM', progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
+                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign6, { size: (_c = styles.size) !== null && _c !== void 0 ? _c : 'MEDIUM', progress: progressRender, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
             case 'DESIGN4':
-                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign7, { size: (_d = styles.size) !== null && _d !== void 0 ? _d : 'MEDIUM', progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
+                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign7, { size: (_d = styles.size) !== null && _d !== void 0 ? _d : 'MEDIUM', progress: progressRender, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
             // case 'DESIGN8':
             //   return (
             //     <ProgressDesign8
             //       size={styles.size ?? 'MEDIUM'}
-            //       progress={progress}
+            //       progress={progressRender}
             //       progressColor={styles.primaryColor}
             //       bufferColor={styles.secondaryColor}
             //     />
             //   );
             default:
-                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { size: (_e = styles.size) !== null && _e !== void 0 ? _e : 'MEDIUM', progress: progress, leftTimeSec: leftTimeSec, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
+                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { size: (_e = styles.size) !== null && _e !== void 0 ? _e : 'MEDIUM', progress: progressRender, leftTimeSec: timeLeftRender, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
         }
     };
     return ((0, jsx_runtime_1.jsx)(S_ProgressWrapper, __assign({ className: "cb-contentscarousel-progressbar-wrapper", "$size": styles.size }, { children: renderProgressByType() })));

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

@@ -0,0 +1,5 @@
+import type { ContentsCarouselElementsProps } from '../ContentsCarousel';
+import type { CSSProperties } from 'styled-components';
+export declare function getPosition(position: string, designType: string, size: string, elementType: ContentsCarouselElementsProps['type'] | 'GROUP'): CSSProperties;
+export declare const POS_INSET: Record<string, CSSProperties>;
+export declare const POS_OUTSET_NAVIGATION: Record<string, CSSProperties>;