pds-dev-kit-web-test 2.7.239 → 2.7.240

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: 'INSET8',
+                CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_NEXTBTNLOCATION: 'OUTSET5',
                 'CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_NEXTBTNLOCATION:MOBILE': null,
                 CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_NEXTBTNPRIMARYCOLOR: '#7CEC0DFC',
                 'CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_NEXTBTNPRIMARYCOLOR:HOVER': null,
@@ -4577,7 +4577,7 @@ exports.SAMPLE_SLIDEBANNER_CB = {
                 'CB_STYLE_PROP_SLIDEBANNERPAGINATION_SPEC_PAGINATIONSECONDARYCOLOR:MOBILE': null,
                 CB_STYLE_PROP_SLIDEBANNERPAGINATION_SPEC_PAGINATIONSIZE: 'LARGE',
                 'CB_STYLE_PROP_SLIDEBANNERPAGINATION_SPEC_PAGINATIONSIZE:MOBILE': null,
-                CB_STYLE_PROP_SLIDEBANNERPAGINATION_SPEC_PAGINATIONSTYLE: 'DESIGN5',
+                CB_STYLE_PROP_SLIDEBANNERPAGINATION_SPEC_PAGINATIONSTYLE: 'DESIGN11',
                 'CB_STYLE_PROP_SLIDEBANNERPAGINATION_SPEC_PAGINATIONSTYLE:MOBILE': null
             },
             CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD: {

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

@@ -42,7 +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");
+require("./hooks/elementPositions");
 var useFlexGridLayout_1 = require("./hooks/useFlexGridLayout");
 var useSwiper_1 = require("./hooks/useSwiper");
 var SlideBannerCore_1 = __importDefault(require("./SlideBannerCore"));
@@ -147,8 +147,10 @@ function SlideBanner(props) {
                         else {
                             delete positionRefs.current[position];
                         }
-                    }, 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));
+                    }, style: __assign(__assign({}, getPositionStyle(position, ccbInset, 'GROUP', '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, 
+                            // getPosition(position, component.designType, component.size, component.type)
+                            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 () { 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,

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

@@ -1,6 +1,8 @@
 import type { SlideBannerElementsProps } from '../SlideBanner';
 import type { CSSProperties } from 'styled-components';
-export declare function getPosition(position: string, designType: string, size: string, elementType: SlideBannerElementsProps['type'] | 'GROUP'): CSSProperties;
+export declare function getPosition(position: string, designType: string, size: string, elementType: SlideBannerElementsProps['type'] | 'GROUP', { ccbWidth }: {
+    ccbWidth?: number;
+}): 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

@@ -10,22 +10,25 @@ var GAP = 8;
 // DESIGN11
 // DESIGN13
 // DESIGN15
-function getPosition(position, designType, size, elementType) {
-    var _a, _b;
+function getPosition(position, designType, size, elementType, _a) {
+    var _b, _c;
+    var ccbWidth = _a.ccbWidth;
     if (position.startsWith('OUTSET')) {
         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;
+            return (_b = exports.POS_INSET[position]) === null || _b === void 0 ? void 0 : _b.LARGE;
         }
         if (elementType === 'NEXT' || elementType === 'PREV') {
             return exports.POS_OUTSET_NAVIGATION[position][size];
         }
-        return exports.POS_OUTSET_PAGINATION[position][designType][size];
+        var val = exports.POS_OUTSET_PAGINATION[position][designType][size];
+        return val;
+        // return POS_OUTSET_PAGINATION[position][designType][size];
     }
     if (elementType === 'GROUP') {
-        return (_b = exports.POS_INSET[position]) === null || _b === void 0 ? void 0 : _b.LARGE;
+        return (_c = exports.POS_INSET[position]) === null || _c === void 0 ? void 0 : _c.LARGE;
     }
     return {};
 }
@@ -196,9 +199,9 @@ exports.POS_OUTSET_PAGINATION = {
             SMALL: { top: 0, right: -45 }
         },
         DESIGN11: {
-            LARGE: { top: 0, left: 'calc(100% + 20px)' },
-            MEDIUM: { top: 0, left: 'calc(100% + 12px)' },
-            SMALL: { top: 0, left: 'calc(100% + 12px)' }
+            LARGE: { top: 0, left: 20 },
+            MEDIUM: { top: 0, left: 12 },
+            SMALL: { top: 0, left: 12 }
         },
         DESIGN13: {
             LARGE: { top: 0, right: -40 },
@@ -206,9 +209,9 @@ exports.POS_OUTSET_PAGINATION = {
             SMALL: { top: 0, right: -25 }
         },
         DESIGN15: {
-            LARGE: { top: 0, left: 'calc(100% + 20px)' },
-            MEDIUM: { top: 0, left: 'calc(100% + 12px)' },
-            SMALL: { top: 0, left: 'calc(100% + 12px)' }
+            LARGE: { top: 0, left: 20 },
+            MEDIUM: { top: 0, left: 12 },
+            SMALL: { top: 0, left: 12 }
         }
     },
     //--------------------------------------------------
@@ -241,9 +244,9 @@ exports.POS_OUTSET_PAGINATION = {
             SMALL: { right: -45 }
         },
         DESIGN11: {
-            LARGE: { left: 'calc(100% + 20px)' },
-            MEDIUM: { left: 'calc(100% + 12px)' },
-            SMALL: { left: 'calc(100% + 12px)' }
+            LARGE: { left: 20 },
+            MEDIUM: { left: 12 },
+            SMALL: { left: 12 }
         },
         DESIGN13: {
             LARGE: { right: -40 },
@@ -251,9 +254,9 @@ exports.POS_OUTSET_PAGINATION = {
             SMALL: { right: -25 }
         },
         DESIGN15: {
-            LARGE: { left: 'calc(100% + 20px)' },
-            MEDIUM: { left: 'calc(100% + 12px)' },
-            SMALL: { left: 'calc(100% + 12px)' }
+            LARGE: { left: 20 },
+            MEDIUM: { left: 12 },
+            SMALL: { left: 12 }
         }
     },
     //--------------------------------------------------
@@ -286,9 +289,9 @@ exports.POS_OUTSET_PAGINATION = {
             SMALL: { bottom: 0, right: -45 }
         },
         DESIGN11: {
-            LARGE: { bottom: 0, left: 'calc(100% + 20px)' },
-            MEDIUM: { bottom: 0, left: 'calc(100% + 12px)' },
-            SMALL: { bottom: 0, left: 'calc(100% + 12px)' }
+            LARGE: { bottom: 0, left: 20 },
+            MEDIUM: { bottom: 0, left: 12 },
+            SMALL: { bottom: 0, left: 12 }
         },
         DESIGN13: {
             LARGE: { bottom: 0, right: -40 },
@@ -296,9 +299,9 @@ exports.POS_OUTSET_PAGINATION = {
             SMALL: { bottom: 0, right: -25 }
         },
         DESIGN15: {
-            LARGE: { bottom: 0, left: 'calc(100% + 20px)' },
-            MEDIUM: { bottom: 0, left: 'calc(100% + 12px)' },
-            SMALL: { bottom: 0, left: 'calc(100% + 12px)' }
+            LARGE: { bottom: 0, left: 20 },
+            MEDIUM: { bottom: 0, left: 12 },
+            SMALL: { bottom: 0, left: 12 }
         }
     },
     //--------------------------------------------------
@@ -466,9 +469,9 @@ exports.POS_OUTSET_PAGINATION = {
             SMALL: { bottom: 0, left: -45 }
         },
         DESIGN11: {
-            LARGE: { bottom: 0, right: 'calc(100% + 20px)' },
-            MEDIUM: { bottom: 0, right: 'calc(100% + 12px)' },
-            SMALL: { bottom: 0, right: 'calc(100% + 12px)' }
+            LARGE: { bottom: 0, right: 20 },
+            MEDIUM: { bottom: 0, right: 12 },
+            SMALL: { bottom: 0, right: 12 }
         },
         DESIGN13: {
             LARGE: { bottom: 0, left: -40 },
@@ -476,9 +479,9 @@ exports.POS_OUTSET_PAGINATION = {
             SMALL: { bottom: 0, left: -25 }
         },
         DESIGN15: {
-            LARGE: { bottom: 0, right: 'calc(100% + 20px)' },
-            MEDIUM: { bottom: 0, right: 'calc(100% + 12px)' },
-            SMALL: { bottom: 0, right: 'calc(100% + 12px)' }
+            LARGE: { bottom: 0, right: 20 },
+            MEDIUM: { bottom: 0, right: 12 },
+            SMALL: { bottom: 0, right: 12 }
         }
     },
     //--------------------------------------------------
@@ -511,9 +514,9 @@ exports.POS_OUTSET_PAGINATION = {
             SMALL: { left: -45 }
         },
         DESIGN11: {
-            LARGE: { right: 'calc(100% + 20px)' },
-            MEDIUM: { right: 'calc(100% + 12px)' },
-            SMALL: { right: 'calc(100% + 12px)' }
+            LARGE: { right: 20 },
+            MEDIUM: { right: 12 },
+            SMALL: { right: 12 }
         },
         DESIGN13: {
             LARGE: { left: -40 },
@@ -521,9 +524,9 @@ exports.POS_OUTSET_PAGINATION = {
             SMALL: { left: -25 }
         },
         DESIGN15: {
-            LARGE: { right: 'calc(100% + 20px)' },
-            MEDIUM: { right: 'calc(100% + 12px)' },
-            SMALL: { right: 'calc(100% + 12px)' }
+            LARGE: { right: 20 },
+            MEDIUM: { right: 12 },
+            SMALL: { right: 12 }
         }
     },
     //--------------------------------------------------
@@ -556,7 +559,7 @@ exports.POS_OUTSET_PAGINATION = {
             SMALL: { top: 0, left: -45 }
         },
         DESIGN11: {
-            LARGE: { top: 0, right: 'calc(100% + 20px)' },
+            LARGE: { top: 0, right: 20 },
             MEDIUM: { top: 0, left: -105 },
             SMALL: { top: 0, left: -85 }
         },
@@ -566,7 +569,7 @@ exports.POS_OUTSET_PAGINATION = {
             SMALL: { top: 0, left: -25 }
         },
         DESIGN15: {
-            LARGE: { top: 0, right: 'calc(100% + 20px)' },
+            LARGE: { top: 0, right: 20 },
             MEDIUM: { top: 0, left: -105 },
             SMALL: { top: 0, left: -85 }
         }
@@ -699,7 +702,7 @@ var POS_OUTSET_GROUP = {
     },
     OUTSET5: {
         top: '50%',
-        height: 0,
+        width: 0,
         right: 0,
         transform: 'translateY(-50%)'
     },

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' | 'GROUP') => CSSProperties;
+    getPositionStyle: (position: string, ccbInset: Record<string, string>, designType: string, size: 'LARGE' | 'MEDIUM' | 'SMALL' | 'GROUP', elementType: string) => CSSProperties;
     getComponentGroupLayout: (components: SlideBannerElementsProps[], position: string) => CSSProperties;
 };

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

@@ -61,7 +61,7 @@ var useFlexGridLayout = function (_a) {
         return directions[position];
     };
     // 위치에 따른 스타일 결정 (CCB 크기를 고려)
-    var getPositionStyle = function (position, ccbInset, designType, size) {
+    var getPositionStyle = function (position, ccbInset, designType, size, elementType) {
         var base = {
             position: 'absolute',
             display: 'flex',
@@ -104,7 +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, 'GROUP');
+        var pos = (0, elementPositions_1.getPosition)(position, designType, size, elementType, { ccbWidth: ccbWidth });
         return __assign(__assign({}, base), pos);
     };
     // 컴포넌트 그룹 레이아웃
@@ -132,7 +132,8 @@ var useFlexGridLayout = function (_a) {
             display: 'flex',
             flexDirection: isHorizontal ? 'row' : 'column',
             gap: '8px',
-            alignItems: 'center'
+            alignItems: 'center',
+            width: 'inherit'
         };
     };
     // ccbInset 계산

package/package.json

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