pds-dev-kit-web-test 2.7.233 → 2.7.235

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

@@ -4535,7 +4535,7 @@ exports.SAMPLE_SLIDEBANNER_CB = {
                 'CB_STYLE_PROP_SHADOW_SPEC_Y:MOBILE:HOVER': null
             },
             CB_STYLE_PROP_SLIDEBANNERBUTTON: {
-                CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_NEXTBTNLOCATION: 'OUTSET3',
+                CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_NEXTBTNLOCATION: 'OUTSET4',
                 'CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_NEXTBTNLOCATION:MOBILE': null,
                 CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_NEXTBTNPRIMARYCOLOR: '#7CEC0DFC',
                 'CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_NEXTBTNPRIMARYCOLOR:HOVER': null,
@@ -4545,11 +4545,11 @@ exports.SAMPLE_SLIDEBANNER_CB = {
                 'CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_NEXTBTNSECONDARYCOLOR:HOVER': null,
                 'CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_NEXTBTNSECONDARYCOLOR:MOBILE': null,
                 'CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_NEXTBTNSECONDARYCOLOR:MOBILE:HOVER': null,
-                CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_NEXTBTNSIZE: 'LARGE',
+                CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_NEXTBTNSIZE: 'SMALL',
                 'CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_NEXTBTNSIZE:MOBILE': null,
                 CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_NEXTBTNSTYLE: 'DESIGN3',
                 'CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_NEXTBTNSTYLE:MOBILE': null,
-                CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_PREVBTNLOCATION: 'OUTSET12',
+                CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_PREVBTNLOCATION: 'OUTSET4',
                 'CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_PREVBTNLOCATION:MOBILE': null,
                 CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_PREVBTNPRIMARYCOLOR: '#630FFFED',
                 'CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_PREVBTNPRIMARYCOLOR:HOVER': null,
@@ -4559,7 +4559,7 @@ exports.SAMPLE_SLIDEBANNER_CB = {
                 'CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_PREVBTNSECONDARYCOLOR:HOVER': null,
                 'CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_PREVBTNSECONDARYCOLOR:MOBILE': null,
                 'CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_PREVBTNSECONDARYCOLOR:MOBILE:HOVER': null,
-                CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_PREVBTNSIZE: 'MEDIUM',
+                CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_PREVBTNSIZE: 'SMALL',
                 'CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_PREVBTNSIZE:MOBILE': null,
                 CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_PREVBTNSTYLE: 'DESIGN3',
                 'CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_PREVBTNSTYLE:MOBILE': null
@@ -4569,7 +4569,7 @@ exports.SAMPLE_SLIDEBANNER_CB = {
                 'CB_STYLE_PROP_SLIDEBANNERDESIGN_SPEC_STYLE:MOBILE': null
             },
             CB_STYLE_PROP_SLIDEBANNERPAGINATION: {
-                CB_STYLE_PROP_SLIDEBANNERPAGINATION_SPEC_PAGINATIONLOCATION: 'OUTSET2',
+                CB_STYLE_PROP_SLIDEBANNERPAGINATION_SPEC_PAGINATIONLOCATION: 'OUTSET4',
                 'CB_STYLE_PROP_SLIDEBANNERPAGINATION_SPEC_PAGINATIONLOCATION:MOBILE': null,
                 CB_STYLE_PROP_SLIDEBANNERPAGINATION_SPEC_PAGINATIONPRIMARYCOLOR: '#A500CFF0',
                 'CB_STYLE_PROP_SLIDEBANNERPAGINATION_SPEC_PAGINATIONPRIMARYCOLOR:MOBILE': null,

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

@@ -42,6 +42,7 @@ 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"));
@@ -113,21 +114,15 @@ function SlideBanner(props) {
         { 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 = _k.ccbInset, componentGroups = _k.componentGroups, getPositionStyle = _k.getPositionStyle, getComponentGroupLayout = _k.getComponentGroupLayout;
-    // const ccbInset = {
-    //   top: '0px',
-    //   right: '0px',
-    //   bottom: '0px',
-    //   left: '0px'
-    // };
-    var renderElements = function (component) {
+    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:
@@ -143,7 +138,7 @@ function SlideBanner(props) {
         .map(function (item) {
         return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; });
     });
-    console.log('entries', Object.entries(componentGroups));
+    console.log(componentGroups);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [Object.entries(componentGroups).map(function (_a) {
                 var position = _a[0], groupComponents = _a[1];
                 return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-slidebanner-button-group ccb-elements", ref: function (el) {
@@ -153,8 +148,10 @@ function SlideBanner(props) {
                         else {
                             delete positionRefs.current[position];
                         }
-                    }, style: __assign(__assign({}, getPositionStyle(position, ccbInset, groupComponents[0].designType, groupComponents[0].size)), { 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, 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 () { 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,7 +44,7 @@ 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'];
@@ -58,10 +58,10 @@ var CustomNavigationNextBtn = function (_a) {
         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

@@ -1,4 +1,6 @@
+import type { SlideBannerElementsProps } from '../SlideBanner';
 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 function getPosition(position: string, designType: string, size: string, elementType: SlideBannerElementsProps['type'] | 'GROUP'): CSSProperties;
+export declare const POS_OUTSET_PAGINATION: Record<string, Record<string, Record<string, CSSProperties>>>;
 export declare const POS_INSET: Record<string, Record<string, CSSProperties>>;
+export declare const POS_OUTSET_NAVIGATION: Record<string, Record<string, CSSProperties>>;

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

@@ -1,16 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.POS_INSET = exports.POS_OUTSET = exports.getPosition = void 0;
+exports.POS_OUTSET_NAVIGATION = exports.POS_INSET = exports.POS_OUTSET_PAGINATION = exports.getPosition = void 0;
 var GAP = 8;
-function getPosition(position, designType, size) {
-    var _a, _b, _c;
+function getPosition(position, designType, size, elementType) {
+    var _a, _b;
     if (position.startsWith('OUTSET')) {
-        return (_b = (_a = exports.POS_OUTSET[position]) === null || _a === void 0 ? void 0 : _a[designType]) === null || _b === void 0 ? void 0 : _b[size];
+        if (elementType === 'GROUP') {
+            return POS_OUTSET_GROUP[position];
+        }
+        if (elementType === 'PROGRESSBAR') {
+            return (_a = exports.POS_INSET[position]) === null || _a === void 0 ? void 0 : _a.LARGE;
+        }
+        if (elementType === 'NEXT' || elementType === 'PREV') {
+            return exports.POS_OUTSET_NAVIGATION[position][size];
+        }
+        return exports.POS_OUTSET_PAGINATION[position][designType][size];
     }
-    return (_c = exports.POS_INSET[position]) === null || _c === void 0 ? void 0 : _c[size];
+    return (_b = exports.POS_INSET[position]) === null || _b === void 0 ? void 0 : _b.LARGE;
 }
 exports.getPosition = getPosition;
-exports.POS_OUTSET = {
+exports.POS_OUTSET_PAGINATION = {
     //--------------------------------------------------
     // OUTSET 1 (left 0px 공통)
     //--------------------------------------------------
@@ -61,44 +70,44 @@ exports.POS_OUTSET = {
     //--------------------------------------------------
     OUTSET2: {
         DESIGN1: {
-            LARGE: { top: -50, left: 'center', transform: 'translateX(-50%)' },
-            MEDIUM: { top: -45, left: 'center', transform: 'translateX(-50%)' },
-            SMALL: { top: -40, left: 'center', transform: 'translateX(-50%)' }
+            LARGE: { top: -50 },
+            MEDIUM: { top: -45 },
+            SMALL: { top: -40 }
         },
         DESIGN2: {
-            LARGE: { top: -50, left: 'center' },
-            MEDIUM: { top: -45, left: 'center' },
-            SMALL: { top: -40, left: 'center' }
+            LARGE: { top: -50 },
+            MEDIUM: { top: -45 },
+            SMALL: { top: -40 }
         },
         DESIGN3: {
-            LARGE: { top: -50, left: 'center' },
-            MEDIUM: { top: -45, left: 'center' },
-            SMALL: { top: -40, left: 'center' }
+            LARGE: { top: -50 },
+            MEDIUM: { top: -45 },
+            SMALL: { top: -40 }
         },
         DESIGN4: {
-            LARGE: { top: -50, left: 'center' },
-            MEDIUM: { top: -45, left: 'center' },
-            SMALL: { top: -40, left: 'center' }
+            LARGE: { top: -50 },
+            MEDIUM: { top: -45 },
+            SMALL: { top: -40 }
         },
         DESIGN5: {
-            LARGE: { top: -85, left: 'center' },
-            MEDIUM: { top: -80, left: 'center' },
-            SMALL: { top: -75, left: 'center' }
+            LARGE: { top: -85 },
+            MEDIUM: { top: -80 },
+            SMALL: { top: -75 }
         },
         DESIGN6: {
-            LARGE: { top: -35, left: 'center' },
-            MEDIUM: { top: -30, left: 'center' },
-            SMALL: { top: -25, left: 'center' }
+            LARGE: { top: -35 },
+            MEDIUM: { top: -30 },
+            SMALL: { top: -25 }
         },
         DESIGN7: {
-            LARGE: { top: -85, left: 'center' },
-            MEDIUM: { top: -80, left: 'center' },
-            SMALL: { top: -75, left: 'center' }
+            LARGE: { top: -85 },
+            MEDIUM: { top: -80 },
+            SMALL: { top: -75 }
         },
         DESIGN8: {
-            LARGE: { top: -25, left: 'center' },
-            MEDIUM: { top: -25, left: 'center' },
-            SMALL: { top: -20, left: 'center' }
+            LARGE: { top: -25 },
+            MEDIUM: { top: -25 },
+            SMALL: { top: -20 }
         }
     },
     //--------------------------------------------------
@@ -106,44 +115,44 @@ exports.POS_OUTSET = {
     //--------------------------------------------------
     OUTSET3: {
         DESIGN1: {
-            LARGE: { top: -50, right: 0 },
-            MEDIUM: { top: -45, right: 0 },
-            SMALL: { top: -40, right: 0 }
+            LARGE: { top: -50 },
+            MEDIUM: { top: -45 },
+            SMALL: { top: -40 }
         },
         DESIGN2: {
-            LARGE: { top: -50, right: 0 },
-            MEDIUM: { top: -45, right: 0 },
-            SMALL: { top: -40, right: 0 }
+            LARGE: { top: -50 },
+            MEDIUM: { top: -45 },
+            SMALL: { top: -40 }
         },
         DESIGN3: {
-            LARGE: { top: -50, right: 0 },
-            MEDIUM: { top: -45, right: 0 },
-            SMALL: { top: -40, right: 0 }
+            LARGE: { top: -50 },
+            MEDIUM: { top: -45 },
+            SMALL: { top: -40 }
         },
         DESIGN4: {
-            LARGE: { top: -50, right: 0 },
-            MEDIUM: { top: -45, right: 0 },
-            SMALL: { top: -40, right: 0 }
+            LARGE: { top: -50 },
+            MEDIUM: { top: -45 },
+            SMALL: { top: -40 }
         },
         DESIGN5: {
-            LARGE: { top: -85, right: 0 },
-            MEDIUM: { top: -80, right: 0 },
-            SMALL: { top: -75, right: 0 }
+            LARGE: { top: -85 },
+            MEDIUM: { top: -80 },
+            SMALL: { top: -75 }
         },
         DESIGN6: {
-            LARGE: { top: -35, right: 0 },
-            MEDIUM: { top: -30, right: 0 },
-            SMALL: { top: -25, right: 0 }
+            LARGE: { top: -35 },
+            MEDIUM: { top: -30 },
+            SMALL: { top: -25 }
         },
         DESIGN7: {
-            LARGE: { top: -85, right: 0 },
-            MEDIUM: { top: -80, right: 0 },
-            SMALL: { top: -75, right: 0 }
+            LARGE: { top: -85 },
+            MEDIUM: { top: -80 },
+            SMALL: { top: -75 }
         },
         DESIGN8: {
-            LARGE: { top: -25, right: 0 },
-            MEDIUM: { top: -25, right: 0 },
-            SMALL: { top: -20, right: 0 }
+            LARGE: { top: -25 },
+            MEDIUM: { top: -25 },
+            SMALL: { top: -20 }
         }
     },
     //--------------------------------------------------
@@ -195,6 +204,13 @@ exports.POS_OUTSET = {
     // OUTSET 5 (top center 공통, transform 추출)
     //--------------------------------------------------
     OUTSET5: {
+        GROUP: {
+            GROUP: {
+                top: 'center',
+                height: 0,
+                right: 0
+            }
+        },
         DESIGN1: {
             LARGE: { top: 'center', right: -65, transform: 'translateY(-50%)' },
             MEDIUM: { top: 'center', right: -60, transform: 'translateY(-50%)' },
@@ -594,3 +610,136 @@ exports.POS_INSET = {
         SMALL: { top: 'center', left: GAP, transform: 'translateY(-50%)' }
     }
 };
+exports.POS_OUTSET_NAVIGATION = {
+    OUTSET1: {
+        LARGE: { top: -95, left: 0 },
+        MEDIUM: { top: -60, left: 0 },
+        SMALL: { top: -50, left: 0 }
+    },
+    OUTSET2: {
+        LARGE: { top: -95, left: 'center', transform: 'translateX(-50%)' },
+        MEDIUM: { top: -60, left: 'center', transform: 'translateX(-50%)' },
+        SMALL: { top: -50, left: 'center', transform: 'translateX(-50%)' }
+    },
+    OUTSET3: {
+        LARGE: { top: -95, right: 0 },
+        MEDIUM: { top: -60, right: 0 },
+        SMALL: { top: -50, right: 0 }
+    },
+    OUTSET4: {
+        LARGE: { top: 0, right: -95 },
+        MEDIUM: { top: 0, right: -60 },
+        SMALL: { top: 0, right: -50 }
+    },
+    OUTSET5: {
+        LARGE: { top: 'center', right: -95, transform: 'translateY(-50%)' },
+        MEDIUM: { top: 'center', right: -60, transform: 'translateY(-50%)' },
+        SMALL: { top: 'center', right: -50, transform: 'translateY(-50%)' }
+    },
+    OUTSET6: {
+        LARGE: { bottom: 0, right: -95 },
+        MEDIUM: { bottom: 0, right: -60 },
+        SMALL: { bottom: 0, right: -50 }
+    },
+    OUTSET7: {
+        LARGE: { bottom: -95, right: 0 },
+        MEDIUM: { bottom: -60, right: 0 },
+        SMALL: { bottom: -50, right: 0 }
+    },
+    OUTSET8: {
+        LARGE: { bottom: -95, left: 'center', transform: 'translateX(-50%)' },
+        MEDIUM: { bottom: -60, left: 'center', transform: 'translateX(-50%)' },
+        SMALL: { bottom: -50, left: 'center', transform: 'translateX(-50%)' }
+    },
+    OUTSET9: {
+        LARGE: { bottom: -95, left: 0 },
+        MEDIUM: { bottom: -60, left: 0 },
+        SMALL: { bottom: -50, left: 0 }
+    },
+    OUTSET10: {
+        LARGE: { bottom: 0, left: -95 },
+        MEDIUM: { bottom: 0, left: -60 },
+        SMALL: { bottom: 0, left: -50 }
+    },
+    OUTSET11: {
+        LARGE: { top: 'center', left: -95, transform: 'translateY(-50%)' },
+        MEDIUM: { top: 'center', left: -60, transform: 'translateY(-50%)' },
+        SMALL: { top: 'center', left: -50, transform: 'translateY(-50%)' }
+    },
+    OUTSET12: {
+        LARGE: { top: 0, left: -95 },
+        MEDIUM: { top: 0, left: -60 },
+        SMALL: { top: 0, left: -50 }
+    }
+};
+var POS_OUTSET_GROUP = {
+    OUTSET1: {
+        bottom: '100%',
+        height: 0
+    },
+    OUTSET2: {
+        bottom: '100%',
+        height: 0,
+        left: '50%',
+        transform: 'translateX(-50%)'
+    },
+    OUTSET3: {
+        bottom: '100%',
+        height: 0,
+        right: 0
+    },
+    OUTSET4: {
+        top: 0,
+        width: 0,
+        right: 0
+    },
+    OUTSET5: {
+        top: '50%',
+        height: 0,
+        right: 0,
+        transform: 'translateY(-50%)'
+    },
+    OUTSET6: {
+        bottom: 0,
+        height: 0,
+        right: 0
+    },
+    OUTSET7: {
+        bottom: 0,
+        height: 0,
+        right: 0
+    },
+    OUTSET8: {
+        bottom: 0,
+        height: 0,
+        left: '50%',
+        transform: 'translateX(-50%)'
+    },
+    OUTSET9: {
+        bottom: 0,
+        height: 0,
+        left: 0
+    },
+    OUTSET10: {
+        bottom: 0,
+        height: 0,
+        left: 0
+    },
+    OUTSET11: {
+        top: '50%',
+        height: 0,
+        left: 0,
+        transform: 'translateY(-50%)'
+    },
+    OUTSET12: {
+        top: 0,
+        height: 0,
+        left: 0
+    }
+};
+// export const POS_OUTSET = {
+//   PAGINATION: POS_OUTSET_PAGINATION,
+//   PREV: POS_OUTSET_NAVIGATION,
+//   NEXT: POS_OUTSET_NAVIGATION,
+//   GROUP: POS_OUTSET_GROUP
+// };

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

@@ -13,6 +13,6 @@ export declare const useFlexGridLayout: ({ components }: {
         left: string;
     };
     componentGroups: Record<string, SlideBannerElementsProps[]>;
-    getPositionStyle: (position: string, ccbInset: Record<string, string>, designType: string, size: 'LARGE' | 'MEDIUM' | 'SMALL') => CSSProperties;
+    getPositionStyle: (position: string, ccbInset: Record<string, string>, designType: string, size: 'LARGE' | 'MEDIUM' | 'SMALL' | 'GROUP') => CSSProperties;
     getComponentGroupLayout: (components: SlideBannerElementsProps[], position: string) => CSSProperties;
 };

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

@@ -104,8 +104,7 @@ var useFlexGridLayout = function (_a) {
             INSET7: { bottom: ccbBottom + GAP, left: ccbLeft + GAP },
             INSET8: { top: "".concat(ccbCenterY, "px"), left: ccbLeft + GAP, transform: 'translateY(-50%)' }
         };
-        var pos = (0, elementPositions_1.getPosition)(position, designType, size);
-        console.log('pos', position, designType, size, pos);
+        var pos = (0, elementPositions_1.getPosition)(position, designType, size, 'GROUP');
         return __assign(__assign({}, base), pos);
     };
     // 컴포넌트 그룹 레이아웃

package/package.json

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