pds-dev-kit-web-test 2.7.229 → 2.7.234

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

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MOCK_SECTIONS = void 0;
 require("./mock_contentsCarousel");
-var mock_contentsList_1 = require("./mock_contentsList");
-require("./mock_slideBanner");
+require("./mock_contentsList");
+var mock_slideBanner_1 = require("./mock_slideBanner");
 exports.MOCK_SECTIONS = [
     {
         administrativeTitle: 'Daily Pages',
@@ -12,8 +12,8 @@ exports.MOCK_SECTIONS = [
             // MOCK_VIDEO_CB,
             // MOCK_VIDEO_CB_2,
             // SAMPLE_CONTENTSCAROUSEL_CB,
-            // SAMPLE_SLIDEBANNER_CB
-            mock_contentsList_1.SAMPLE_LIST_CB
+            mock_slideBanner_1.SAMPLE_SLIDEBANNER_CB
+            // SAMPLE_LIST_CB
             // ...MOCK_COMPONENT_BLOCKS
         ],
         display: true,

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { INSET_POSTIION, OUTSET_POSTIION } from './types';
+import type { CB_STYLE_PROP_CONTENTSCAROUSELBUTTON_SPEC_PREVBTNSTYLE_TYPE, INSET_POSTIION, OUTSET_POSTIION } from './types';
 import type { CB_CONTENTSCAROUSEL } from '../../../../../../../DynamicLayout/sections/CustomSection/types';
 import type { CB_CONTENTSCAROUSEL_PROPERTIES_TYPE, IndexForIntersection } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
 type Props = CB_CONTENTSCAROUSEL_PROPERTIES_TYPE & IndexForIntersection & {
@@ -9,6 +9,7 @@ type ComponentType = 'PREV' | 'NEXT' | 'PROGRESSBAR';
 export type ContentsCarouselElementsProps = {
     type: ComponentType;
     position: OUTSET_POSTIION | INSET_POSTIION;
+    designType: CB_STYLE_PROP_CONTENTSCAROUSELBUTTON_SPEC_PREVBTNSTYLE_TYPE;
 };
 declare function ContentsCarousel(props: Props): JSX.Element;
 export default ContentsCarousel;

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

@@ -45,7 +45,8 @@ var ContentsCarouselCore_1 = __importDefault(require("./ContentsCarouselCore"));
 var contentsCarouselUtils_1 = require("./contentsCarouselUtils");
 var useFlexGridLayout_1 = require("./hooks/useFlexGridLayout");
 var useSwiper_1 = require("./hooks/useSwiper");
-var createComponent = function (type, getDesignType, getLocation) {
+var createComponent = function (type, getDesignType, getLocation, designType) {
+    if (designType === void 0) { designType = 'NONE'; }
     return function (normalStyle, hoverStyle, isHovered) {
         var normalDesign = getDesignType(normalStyle);
         var hoverDesign = getDesignType(hoverStyle);
@@ -55,7 +56,8 @@ var createComponent = function (type, getDesignType, getLocation) {
             return undefined;
         return {
             type: type,
-            position: isHovered ? getLocation(hoverStyle) : getLocation(normalStyle)
+            position: isHovered ? getLocation(hoverStyle) : getLocation(normalStyle),
+            designType: designType
         };
     };
 };
@@ -96,12 +98,16 @@ function ContentsCarousel(props) {
         : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
     var hasEffect = !isNoneEffectType;
     var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
-    var createPrevButton = createComponent('PREV', function (style) { return style.prevBtnType || 'NONE'; }, function (style) { return style.prevBtnLocation || 'OUTSET1'; });
-    var createNextButton = createComponent('NEXT', function (style) { return style.nextBtnType || 'NONE'; }, function (style) { return style.nextBtnLocation || 'OUTSET1'; });
+    var createPrevButton = createComponent('PREV', function (style) { return style.prevBtnType || 'NONE'; }, function (style) { return style.prevBtnLocation || 'OUTSET1'; }, customNavigationNormalStyle.prevBtnType || 'NONE');
+    var createNextButton = createComponent('NEXT', function (style) { return style.nextBtnType || 'NONE'; }, function (style) { return style.nextBtnLocation || 'OUTSET1'; }, customNavigationNormalStyle.nextBtnType || 'NONE');
     var components = [
         createPrevButton(customNavigationNormalStyle, customNavigationHoverStyle, isHovered),
         createNextButton(customNavigationNormalStyle, customNavigationHoverStyle, isHovered),
-        { type: 'PROGRESSBAR', position: 'INSET5' }
+        {
+            type: 'PROGRESSBAR',
+            position: 'INSET5',
+            designType: customProgressbarNormalStyle.type || 'NONE'
+        }
     ].filter(function (component) { return component !== undefined; });
     var _k = (0, useFlexGridLayout_1.useFlexGridLayout)({ components: components }), layoutRef = _k.layoutRef, positionRefs = _k.positionRefs, 
     // ccbInset,

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

@@ -50,13 +50,13 @@ var CustomNavigationNextBtn = function (_a) {
         : navigationConfigs_1.nextButtonMappedIcons[styles.nextBtnType || 'DESIGN1'];
     var buttonSize = 'large';
     var iconSize = 24;
-    if (styles.nextBtnSize === 'SMALL') {
-        buttonSize = 'small';
-        iconSize = 16;
+    if (styles.prevBtnSize === 'SMALL') {
+        buttonSize = 40;
+        iconSize = 20;
     }
-    if (styles.nextBtnSize === 'LARGE') {
-        buttonSize = 'xxlarge';
-        iconSize = 48;
+    if (styles.prevBtnSize === '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 }) }))) }));
 };

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

@@ -51,12 +51,12 @@ var CustomNavigationPrevBtn = function (_a) {
     var buttonSize = 'large';
     var iconSize = 24;
     if (styles.prevBtnSize === 'SMALL') {
-        buttonSize = 'small';
-        iconSize = 16;
+        buttonSize = 40;
+        iconSize = 20;
     }
     if (styles.prevBtnSize === 'LARGE') {
-        buttonSize = 'xxlarge';
-        iconSize = 48;
+        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 }) }))) }));
 };

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { OUTSET_POSTIION, INSET_POSTIION } from './types';
+import type { OUTSET_POSTIION, INSET_POSTIION, CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE_TYPE } from './types';
 import type { CB_LIST } from '../../../../../../../DynamicLayout/sections/CustomSection/types';
 import type { CB_LIST_PROPERTIES_TYPE, IndexForIntersection } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
 type Props = CB_LIST_PROPERTIES_TYPE & IndexForIntersection & {
@@ -9,6 +9,7 @@ type ComponentType = 'PAGINATION';
 export type ContentsListElementsProps = {
     type: ComponentType;
     position: OUTSET_POSTIION | INSET_POSTIION;
+    designType: CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE_TYPE;
 };
 declare function ContentsList(props: Props): JSX.Element;
 export default ContentsList;

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

@@ -42,7 +42,7 @@ var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
 var CustomPagination_1 = require("./components/CustomPagination");
 var contentsListUtils_1 = require("./contentsListUtils");
 var useFlexGridLayout_1 = require("./hooks/useFlexGridLayout");
-var createComponent = function (type, getDesignType, getLocation) {
+var createComponent = function (type, getDesignType, getLocation, designType) {
     return function (normalStyle, hoverStyle, isHovered) {
         var normalDesign = getDesignType(normalStyle);
         var hoverDesign = getDesignType(hoverStyle);
@@ -52,7 +52,8 @@ var createComponent = function (type, getDesignType, getLocation) {
             return undefined;
         return {
             type: type,
-            position: isHovered ? getLocation(hoverStyle) : getLocation(normalStyle)
+            position: isHovered ? getLocation(hoverStyle) : getLocation(normalStyle),
+            designType: designType
         };
     };
 };
@@ -130,7 +131,7 @@ function ContentsList(props) {
     var listMinHeight = oneCompositionMinHeight * numberOfRows +
         (numberOfRows - 1) * rowGap +
         paddingTB;
-    var createPagination = createComponent('PAGINATION', function (style) { return style.type || 'NONE'; }, function (style) { return style.location || 'OUTSET1'; });
+    var createPagination = createComponent('PAGINATION', function (style) { return style.type || 'NONE'; }, function (style) { return style.location || 'OUTSET1'; }, paginationNormalStyle.type || 'NONE');
     var components = [
         createPagination(paginationNormalStyle, paginationHoverStyle, isHovered)
     ].filter(function (component) { return component !== undefined; });
@@ -169,7 +170,7 @@ function ContentsList(props) {
                         else {
                             delete positionRefs.current[position];
                         }
-                    }, style: __assign(__assign({}, getPositionStyle(position, ccbInset)), { zIndex: 3 }) }, { 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); }) })) }), position));
+                    }, style: __assign(__assign({}, getPositionStyle(position, ccbInset, groupComponents[0].designType)), { zIndex: 3 }) }, { 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); }) })) }), 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(CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length), "data-row-gap": rowGap, "data-column-gap": columnGap, "data-cols": Math.min(CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS, 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 }), (0, jsx_runtime_1.jsx)(S_ContentsListLayout, __assign({ className: "cb-contentslist-layout-box", ref: layoutRef, style: {
                                 display: layout.display,
                                 flexDirection: layout.flexDirection,

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/hooks/useFlexGridLayout.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import type { ContentsListElementsProps } from '../ContentsList';
+import type { CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE_TYPE } from '../types';
 import type { CSSProperties } from 'styled-components';
 export declare const useFlexGridLayout: ({ components }: {
     components: ContentsListElementsProps[];
@@ -13,6 +14,6 @@ export declare const useFlexGridLayout: ({ components }: {
         left: string;
     };
     componentGroups: Record<string, ContentsListElementsProps[]>;
-    getPositionStyle: (position: string, ccbInset: Record<string, string>) => CSSProperties;
+    getPositionStyle: (position: string, ccbInset: Record<string, string>, designType: CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE_TYPE) => CSSProperties;
     getComponentGroupLayout: (components: ContentsListElementsProps[], position: string) => CSSProperties;
 };

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

@@ -19,6 +19,7 @@ var useFlexGridLayout = function (_a) {
     var _c = (0, react_1.useState)({ width: 0, height: 0 }), layoutSize = _c[0], setLayoutSize = _c[1];
     var layoutRef = (0, react_1.useRef)(null);
     var positionRefs = (0, react_1.useRef)({});
+    console.log('useFlexGridLayout components:', components);
     // 위치별로 컴포넌트 그룹화
     var getComponentsByPosition = function () {
         var groups = {};
@@ -60,7 +61,7 @@ var useFlexGridLayout = function (_a) {
         return directions[position];
     };
     // 위치에 따른 스타일 결정 (CCB 크기를 고려)
-    var getPositionStyle = function (position, ccbInset) {
+    var getPositionStyle = function (position, ccbInset, designType) {
         var base = {
             position: 'absolute',
             display: 'flex',

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { INSET_POSTIION, OUTSET_POSTIION } from './types';
+import type { CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSTYLE_TYPE, INSET_POSTIION, OUTSET_POSTIION } from './types';
 import type { CB_SLIDEBANNER } from '../../../../../../../DynamicLayout/sections/CustomSection/types';
 import type { CB_SLIDEBANNER_PROPERTIES_TYPE, IndexForIntersection } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
 type Props = CB_SLIDEBANNER_PROPERTIES_TYPE & IndexForIntersection & {
@@ -9,6 +9,8 @@ type ComponentType = 'PREV' | 'NEXT' | 'PAGINATION' | 'PROGRESSBAR';
 export type SlideBannerElementsProps = {
     type: ComponentType;
     position: OUTSET_POSTIION | INSET_POSTIION;
+    designType: CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSTYLE_TYPE;
+    size: 'LARGE' | 'MEDIUM' | 'SMALL';
 };
 declare function SlideBanner(props: Props): JSX.Element;
 export default SlideBanner;

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

@@ -42,12 +42,15 @@ var CustomNavigationNextBtn_1 = require("./components/CustomNavigationNextBtn");
 var CustomNavigationPrevBtn_1 = require("./components/CustomNavigationPrevBtn");
 var CustomPagination_1 = require("./components/CustomPagination");
 var CustomProgressbar_1 = require("./components/CustomProgressbar");
+var elementPositions_1 = require("./hooks/elementPositions");
 var useFlexGridLayout_1 = require("./hooks/useFlexGridLayout");
 var useSwiper_1 = require("./hooks/useSwiper");
 var SlideBannerCore_1 = __importDefault(require("./SlideBannerCore"));
 var slideBannerUtils_1 = require("./slideBannerUtils");
-var createComponent = function (type, getDesignType, getLocation) {
-    return function (normalStyle, hoverStyle, isHovered) {
+var createComponent = function (type, getDesignType, getLocation, designType, size) {
+    if (size === void 0) { size = 'MEDIUM'; }
+    return function (normalStyle, hoverStyle, isHovered, size) {
+        if (size === void 0) { size = 'MEDIUM'; }
         var normalDesign = getDesignType(normalStyle);
         var hoverDesign = getDesignType(hoverStyle);
         if (isHovered && hoverDesign === 'NONE')
@@ -56,7 +59,9 @@ var createComponent = function (type, getDesignType, getLocation) {
             return undefined;
         return {
             type: type,
-            position: isHovered ? getLocation(hoverStyle) : getLocation(normalStyle)
+            position: isHovered ? getLocation(hoverStyle) : getLocation(normalStyle),
+            designType: designType,
+            size: size
         };
     };
 };
@@ -99,33 +104,25 @@ function SlideBanner(props) {
         : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
     var hasEffect = !isNoneEffectType;
     var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
-    var createPrevButton = createComponent('PREV', function (style) { return style.prevBtnType || 'NONE'; }, function (style) { return style.prevBtnLocation || 'OUTSET1'; });
-    var createNextButton = createComponent('NEXT', function (style) { return style.nextBtnType || 'NONE'; }, function (style) { return style.nextBtnLocation || 'OUTSET1'; });
-    var createPagination = createComponent('PAGINATION', function (style) { return style.type || 'NONE'; }, function (style) { return style.location || 'OUTSET1'; });
+    var createPrevButton = createComponent('PREV', function (style) { return style.prevBtnType || 'NONE'; }, function (style) { return style.prevBtnLocation || 'OUTSET1'; }, customNavigationNormalStyle.prevBtnType || 'NONE', customNavigationNormalStyle.prevBtnSize || 'MEDIUM');
+    var createNextButton = createComponent('NEXT', function (style) { return style.nextBtnType || 'NONE'; }, function (style) { return style.nextBtnLocation || 'OUTSET1'; }, customNavigationNormalStyle.nextBtnType || 'NONE', customNavigationNormalStyle.nextBtnSize || 'MEDIUM');
+    var createPagination = createComponent('PAGINATION', function (style) { return style.type || 'NONE'; }, function (style) { return style.location || 'OUTSET1'; }, customPaginationNormalStyle.type || 'NONE', customPaginationNormalStyle.size || 'MEDIUM');
     var components = [
         createPrevButton(customNavigationNormalStyle, customNavigationHoverStyle, isHovered),
         createNextButton(customNavigationNormalStyle, customNavigationHoverStyle, isHovered),
         createPagination(customPaginationNormalStyle, customPaginationHoverStyle, isHovered),
         { type: 'PROGRESSBAR', position: 'INSET5' }
     ].filter(function (component) { return component !== undefined; });
-    var _k = (0, useFlexGridLayout_1.useFlexGridLayout)({ components: components }), layoutRef = _k.layoutRef, positionRefs = _k.positionRefs, 
-    // ccbInset,
-    componentGroups = _k.componentGroups, getPositionStyle = _k.getPositionStyle, getComponentGroupLayout = _k.getComponentGroupLayout;
-    var ccbInset = {
-        top: '0px',
-        right: '0px',
-        bottom: '0px',
-        left: '0px'
-    };
-    var renderElements = function (component) {
+    var _k = (0, useFlexGridLayout_1.useFlexGridLayout)({ components: components }), layoutRef = _k.layoutRef, positionRefs = _k.positionRefs, ccbInset = _k.ccbInset, componentGroups = _k.componentGroups, getPositionStyle = _k.getPositionStyle, getComponentGroupLayout = _k.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 }));
+                return ((0, jsx_runtime_1.jsx)(CustomNavigationPrevBtn_1.CustomNavigationPrevBtn, { isDisabled: loop ? false : isBeginning, styles: customNavigationNormalStyle, hoverStyles: customNavigationHoverStyle, onClick: onClickPrevBtn, style: positionStyle }));
             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: positionStyle }));
             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 }));
+                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, { progressRef: progressRef, leftTimeMsRef: leftTimeMsRef, styles: isHovered ? customProgressbarHoverStyle : customProgressbarNormalStyle }));
             default:
@@ -150,8 +147,10 @@ function SlideBanner(props) {
                         else {
                             delete positionRefs.current[position];
                         }
-                    }, style: __assign(__assign({}, getPositionStyle(position, ccbInset)), { zIndex: 3 }) }, { 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); }) })) }), 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 () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { 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-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 === null || CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE === void 0 ? void 0 : CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE.toLowerCase() }, { children: (0, createCompositions_1.createCompositions)({
+                    }, style: __assign(__assign({}, getPositionStyle(position, ccbInset, 'GROUP', 'GROUP')), { zIndex: 3 }) }, { 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, (0, elementPositions_1.getPosition)(position, component.designType, component.size));
+                        }) })) }), 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 () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { 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-slidebanner-layout-box", ref: layoutRef }, { children: (0, jsx_runtime_1.jsx)(S_SwiperWrapper, __assign({ className: "cb-slidebanner-wrapper", ccbInset: ccbInset, customStyle: isHovered ? slideBannerHoverStyle === null || slideBannerHoverStyle === void 0 ? void 0 : slideBannerHoverStyle.customStyle : slideBannerNormalStyle === null || slideBannerNormalStyle === void 0 ? void 0 : slideBannerNormalStyle.customStyle }, { children: (0, jsx_runtime_1.jsx)(SlideBannerCore_1.default, __assign({ ref: swiperRef, className: "cb-slidebanner", onSwiper: onSwiper, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onAutoplayTimeLeft: onAutoplayTimeLeft, slidesPerView: 1, styles: isHovered ? slideBannerHoverStyle : slideBannerNormalStyle, effect: CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE.toLowerCase() }, { children: (0, createCompositions_1.createCompositions)({
                                         valueType: CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE,
                                         queryPath: CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA,
                                         limit: CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS,

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

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

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

@@ -44,24 +44,24 @@ 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, style = _a.style, onClick = _a.onClick;
     var nextButton = styles.nextBtnType === 'NONE'
         ? undefined
         : navigationConfigs_1.nextButtonMappedIcons[styles.nextBtnType || 'DESIGN1'];
-    var buttonSize = 'large';
-    var iconSize = 24;
+    var buttonSize = 48;
+    var iconSize = 20;
     if (styles.nextBtnSize === 'SMALL') {
-        buttonSize = 'small';
-        iconSize = 16;
+        buttonSize = 40;
+        iconSize = 24;
     }
     if (styles.nextBtnSize === 'LARGE') {
-        buttonSize = 'xxlarge';
+        buttonSize = 80;
         iconSize = 48;
     }
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: nextButton && ((0, jsx_runtime_1.jsx)(S_NextButton, __assign({ className: "cb-slidebanner-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 === null || hoverStyles === void 0 ? void 0 : hoverStyles.nextBtnPrimaryColor, iconName: nextButton.iconName, iconFillType: "line", iconColorKey: nextButton.iconColorKey || 'ui_cpnt_icon_sys_black', overrideIconColorHex: styles.nextBtnSecondaryColor, overrideIconColorHexHover: hoverStyles === null || hoverStyles === void 0 ? void 0 : 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-slidebanner-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 === null || hoverStyles === void 0 ? void 0 : hoverStyles.nextBtnPrimaryColor, iconName: nextButton.iconName, iconFillType: "line", iconColorKey: nextButton.iconColorKey || 'ui_cpnt_icon_sys_black', overrideIconColorHex: styles.nextBtnSecondaryColor, overrideIconColorHexHover: hoverStyles === null || hoverStyles === void 0 ? void 0 : 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) {
+var S_NextButton = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  cursor: pointer;\n  position: relative;\n\n  ", ";\n"], ["\n  cursor: pointer;\n  position: relative;\n\n  ", ";\n"])), function (_a) {
     var disabled = _a.disabled;
     return disabled && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      cursor: auto;\n      opacity: 0.35;\n      pointer-events: none;\n    "], ["\n      cursor: auto;\n      opacity: 0.35;\n      pointer-events: none;\n    "])));
 });

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

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

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/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, style = _a.style, onClick = _a.onClick;
     var prevButton = styles.prevBtnType === 'NONE'
         ? undefined
         : navigationConfigs_1.prevButtonMappedIcons[styles.prevBtnType || 'DESIGN1'];
@@ -58,10 +58,10 @@ var CustomNavigationPrevBtn = function (_a) {
         buttonSize = 'xxlarge';
         iconSize = 48;
     }
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: prevButton && ((0, jsx_runtime_1.jsx)(S_PrevButton, __assign({ className: "cb-slidebanner-prev-button", disabled: isDisabled }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: buttonSize, iconSize: iconSize, shapeType: prevButton.shapeType, borderColorKey: prevButton.borderColorKey, overrideBaseColorHex: styles.prevBtnPrimaryColor, overrideBaseColorHexHover: hoverStyles === null || hoverStyles === void 0 ? void 0 : hoverStyles.prevBtnPrimaryColor, iconName: prevButton.iconName, iconFillType: "line", iconColorKey: prevButton.iconColorKey || 'ui_cpnt_icon_sys_black', overrideIconColorHex: styles.prevBtnSecondaryColor, overrideIconColorHexHover: hoverStyles === null || hoverStyles === void 0 ? void 0 : hoverStyles.prevBtnSecondaryColor, shadow: prevButton.shadow, useDefaultActiveStyle: false, useDefaultHoverStyle: false, onClick: onClick }) }))) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: prevButton && ((0, jsx_runtime_1.jsx)(S_PrevButton, __assign({ className: "cb-slidebanner-prev-button", disabled: isDisabled, style: style }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: buttonSize, iconSize: iconSize, shapeType: prevButton.shapeType, borderColorKey: prevButton.borderColorKey, overrideBaseColorHex: styles.prevBtnPrimaryColor, overrideBaseColorHexHover: hoverStyles === null || hoverStyles === void 0 ? void 0 : hoverStyles.prevBtnPrimaryColor, iconName: prevButton.iconName, iconFillType: "line", iconColorKey: prevButton.iconColorKey || 'ui_cpnt_icon_sys_black', overrideIconColorHex: styles.prevBtnSecondaryColor, overrideIconColorHexHover: hoverStyles === null || hoverStyles === void 0 ? void 0 : hoverStyles.prevBtnSecondaryColor, shadow: prevButton.shadow, useDefaultActiveStyle: false, useDefaultHoverStyle: false, onClick: onClick }) }))) }));
 };
 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) {
+var S_PrevButton = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  cursor: pointer;\n  position: relative;\n\n  ", ";\n"], ["\n  cursor: pointer;\n  position: relative;\n\n  ", ";\n"])), function (_a) {
     var disabled = _a.disabled;
     return disabled && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      cursor: auto;\n      opacity: 0.35;\n      pointer-events: none;\n    "], ["\n      cursor: auto;\n      opacity: 0.35;\n      pointer-events: none;\n    "])));
 });

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

@@ -6,11 +6,12 @@ interface Props {
     isPrevBtnDisabled: boolean;
     isNextBtnDisabled: boolean;
     styles: CustomPaginationProps;
+    style: React.CSSProperties;
     onBulletClick: (index: number) => void;
     onPrevBtnClick: () => void;
     onNextBtnClick: () => void;
 }
-export declare const CustomPagination: ({ current, total, isNextBtnDisabled, isPrevBtnDisabled, styles, onBulletClick, onNextBtnClick, onPrevBtnClick }: Props) => JSX.Element;
+export declare const CustomPagination: ({ current, total, isNextBtnDisabled, isPrevBtnDisabled, styles, style, onBulletClick, onNextBtnClick, onPrevBtnClick }: Props) => JSX.Element;
 export interface FlexBoxProps {
     direction?: 'row' | 'column';
     justifyContent?: string;

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

@@ -43,9 +43,9 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var components_1 = require("../../../../../../../../DynamicLayout/components");
 var styled_components_1 = __importStar(require("styled-components"));
 var CustomPagination = function (_a) {
-    var _b = _a.current, current = _b === void 0 ? 1 : _b, _c = _a.total, total = _c === void 0 ? 1 : _c, isNextBtnDisabled = _a.isNextBtnDisabled, isPrevBtnDisabled = _a.isPrevBtnDisabled, styles = _a.styles, onBulletClick = _a.onBulletClick, onNextBtnClick = _a.onNextBtnClick, onPrevBtnClick = _a.onPrevBtnClick;
+    var _b = _a.current, current = _b === void 0 ? 1 : _b, _c = _a.total, total = _c === void 0 ? 1 : _c, isNextBtnDisabled = _a.isNextBtnDisabled, isPrevBtnDisabled = _a.isPrevBtnDisabled, styles = _a.styles, style = _a.style, onBulletClick = _a.onBulletClick, onNextBtnClick = _a.onNextBtnClick, onPrevBtnClick = _a.onPrevBtnClick;
     var bullets = Array.from({ length: total }, function (_, i) { return i; });
-    return ((0, jsx_runtime_1.jsx)(S_Pagination, __assign({ className: "custom-pagination_".concat(current) }, { children: (function () {
+    return ((0, jsx_runtime_1.jsx)(S_Pagination, __assign({ className: "custom-pagination_".concat(current), style: style }, { children: (function () {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             switch (styles.type) {
                 case 'NONE':
@@ -284,7 +284,7 @@ var FlexBox = styled_components_1.default.div(templateObject_1 || (templateObjec
     var _b = _a.justifyContent, justifyContent = _b === void 0 ? 'center' : _b;
     return justifyContent;
 });
-var S_Pagination = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  /* max-width: 120px; */\n  padding: 5px;\n"], ["\n  /* max-width: 120px; */\n  padding: 5px;\n"])));
+var S_Pagination = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  /* max-width: 120px; */\n  padding: 5px;\n  position: relative;\n"], ["\n  /* max-width: 120px; */\n  padding: 5px;\n  position: relative;\n"])));
 // const sysTextWhite = css`
 //   color: ${({ theme }) => theme.ui_cpnt_textlabel_sys_white};
 // `;

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

@@ -0,0 +1,4 @@
+import type { CSSProperties } from 'styled-components';
+export declare function getPosition(position: string, designType: string, size: string): CSSProperties;
+export declare const POS_OUTSET: Record<string, Record<string, Record<string, CSSProperties>>>;
+export declare const POS_INSET: Record<string, Record<string, CSSProperties>>;