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

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomNavigationPrevBtn.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 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'];
-    var buttonSize = 'large';
+    var buttonSize = 48;
     var iconSize = 24;
     if (styles.prevBtnSize === 'SMALL') {
-        buttonSize = 'small';
-        iconSize = 16;
+        buttonSize = 40;
+        iconSize = 20;
     }
     if (styles.prevBtnSize === 'LARGE') {
-        buttonSize = 'xxlarge';
+        buttonSize = 80;
         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,16 +43,16 @@ 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':
                     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
                 case 'DESIGN1': {
                     var _j = SLIDE_BANNER_PAGINATION_SIZES.DESIGN1[(_a = styles.size) !== null && _a !== void 0 ? _a : 'MEDIUM'], SELECTED_TEXT_STYLE_THEME = _j.SELECTED_TEXT_STYLE_THEME, UNSELECTED_TEXT_STYLE_THEME = _j.UNSELECTED_TEXT_STYLE_THEME;
-                    return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px", style: { color: styles.secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ styleTheme: SELECTED_TEXT_STYLE_THEME, style: { color: styles.primaryColor || 'inherit' } }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { opacity: 0.6 }, styleTheme: UNSELECTED_TEXT_STYLE_THEME }, { children: "/ ".concat(total) }))] })));
+                    return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px", style: { color: styles.secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ styleTheme: SELECTED_TEXT_STYLE_THEME, style: { color: styles.primaryColor || 'inherit' } }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { opacity: 0.6 }, styleTheme: UNSELECTED_TEXT_STYLE_THEME }, { children: "/" })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { opacity: 0.6 }, styleTheme: UNSELECTED_TEXT_STYLE_THEME }, { children: total }))] })));
                 }
                 // case 'DESIGN2': {
                 //   return (
@@ -96,7 +96,7 @@ var CustomPagination = function (_a) {
                                     marginLeft: '8px',
                                     marginRight: '4px',
                                     color: styles.primaryColor || 'inherit'
-                                }, styleTheme: SELECTED_TEXT_STYLE_THEME }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { marginRight: '8px', marginLeft: '4px', opacity: 0.6 }, styleTheme: UNSELECTED_TEXT_STYLE_THEME }, { children: "/ ".concat(total) })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNextBtnClick, disabled: isNextBtnDisabled }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: styles.primaryColor, iconName: "ic_arrow_right", size: ICON_SIZE, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
+                                }, styleTheme: SELECTED_TEXT_STYLE_THEME }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { marginLeft: '4px', opacity: 0.6 }, styleTheme: UNSELECTED_TEXT_STYLE_THEME }, { children: "/" })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { marginRight: '8px', marginLeft: '4px', opacity: 0.6 }, styleTheme: UNSELECTED_TEXT_STYLE_THEME }, { children: total })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNextBtnClick, disabled: isNextBtnDisabled }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: styles.primaryColor, iconName: "ic_arrow_right", size: ICON_SIZE, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
                 }
                 // case 'DESIGN6':
                 //   return (
@@ -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/components/CustomProgressbar.d.ts

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

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

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

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

@@ -0,0 +1,5 @@
+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 const POS_INSET: Record<string, CSSProperties>;
+export declare const POS_OUTSET_NAVIGATION: Record<string, CSSProperties>;

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

@@ -0,0 +1,243 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.POS_OUTSET_NAVIGATION = exports.POS_INSET = exports.getPosition = void 0;
+var GAP = 8;
+function getPosition(position, designType, size, elementType) {
+    if (position.startsWith('OUTSET')) {
+        if (elementType === 'GROUP') {
+            return POS_OUTSET_GROUP[position];
+        }
+        if (elementType === 'PROGRESSBAR') {
+            return exports.POS_INSET[position];
+        }
+        if (elementType === 'NEXT' || elementType === 'PREV') {
+            return exports.POS_OUTSET_NAVIGATION[position];
+        }
+        var val = POS_OUTSET_PAGINATION[position][designType];
+        return val;
+        // return POS_OUTSET_PAGINATION[position][designType][size];
+    }
+    if (elementType === 'GROUP') {
+        return exports.POS_INSET[position];
+    }
+    return {};
+}
+exports.getPosition = getPosition;
+var POS_OUTSET_PAGINATION = {
+    OUTSET1: {
+        DESIGN1: { bottom: 15 },
+        DESIGN3: { bottom: 15 },
+        DESIGN5: { bottom: 15 },
+        DESIGN7: { bottom: 15 },
+        DESIGN9: { bottom: 15 },
+        DESIGN11: { bottom: 15 },
+        DESIGN13: { bottom: 15 },
+        DESIGN15: { bottom: 20 }
+    },
+    OUTSET2: {
+        DESIGN1: { bottom: 15 },
+        DESIGN3: { bottom: 15 },
+        DESIGN5: { bottom: 15 },
+        DESIGN7: { bottom: 15 },
+        DESIGN9: { bottom: 15 },
+        DESIGN11: { bottom: 15 },
+        DESIGN13: { bottom: 15 },
+        DESIGN15: { bottom: 20 }
+    },
+    OUTSET3: {
+        DESIGN1: { bottom: 15 },
+        DESIGN3: { bottom: 15 },
+        DESIGN5: { bottom: 15 },
+        DESIGN7: { bottom: 15 },
+        DESIGN9: { bottom: 15 },
+        DESIGN11: { bottom: 15 },
+        DESIGN13: { bottom: 15 },
+        DESIGN15: { bottom: 20 }
+    },
+    OUTSET4: {
+        DESIGN1: { left: 15 },
+        DESIGN3: { left: 15 },
+        DESIGN5: { left: 15 },
+        DESIGN7: { left: 15 },
+        DESIGN9: { left: 15 },
+        DESIGN11: { left: 15 },
+        DESIGN13: { left: 15 },
+        DESIGN15: { left: 15 }
+    },
+    OUTSET5: {
+        DESIGN1: { left: 15 },
+        DESIGN3: { left: 15 },
+        DESIGN5: { left: 15 },
+        DESIGN7: { left: 15 },
+        DESIGN9: { left: 15 },
+        DESIGN11: { left: 15 },
+        DESIGN13: { left: 15 },
+        DESIGN15: { left: 15 }
+    },
+    OUTSET6: {
+        DESIGN1: { left: 15 },
+        DESIGN3: { left: 15 },
+        DESIGN5: { left: 15 },
+        DESIGN7: { left: 15 },
+        DESIGN9: { left: 15 },
+        DESIGN11: { left: 15 },
+        DESIGN13: { left: 15 },
+        DESIGN15: { left: 15 }
+    },
+    OUTSET7: {
+        DESIGN1: { top: 15 },
+        DESIGN3: { top: 15 },
+        DESIGN5: { top: 15 },
+        DESIGN7: { top: 15 },
+        DESIGN9: { top: 15 },
+        DESIGN11: { top: 15 },
+        DESIGN13: { top: 15 },
+        DESIGN15: { top: 20 }
+    },
+    OUTSET8: {
+        DESIGN1: { top: 15 },
+        DESIGN3: { top: 15 },
+        DESIGN5: { top: 15 },
+        DESIGN7: { top: 15 },
+        DESIGN9: { top: 15 },
+        DESIGN11: { top: 15 },
+        DESIGN13: { top: 15 },
+        DESIGN15: { top: 20 }
+    },
+    OUTSET9: {
+        DESIGN1: { top: 15 },
+        DESIGN3: { top: 15 },
+        DESIGN5: { top: 15 },
+        DESIGN7: { top: 15 },
+        DESIGN9: { top: 15 },
+        DESIGN11: { top: 15 },
+        DESIGN13: { top: 15 },
+        DESIGN15: { top: 20 }
+    },
+    OUTSET10: {
+        DESIGN1: { right: 15 },
+        DESIGN3: { right: 15 },
+        DESIGN5: { right: 15 },
+        DESIGN7: { right: 15 },
+        DESIGN9: { right: 15 },
+        DESIGN11: { right: 15 },
+        DESIGN13: { right: 15 },
+        DESIGN15: { right: 15 }
+    },
+    OUTSET11: {
+        DESIGN1: { right: 15 },
+        DESIGN3: { right: 15 },
+        DESIGN5: { right: 15 },
+        DESIGN7: { right: 15 },
+        DESIGN9: { right: 15 },
+        DESIGN11: { right: 15 },
+        DESIGN13: { right: 15 },
+        DESIGN15: { right: 15 }
+    },
+    OUTSET12: {
+        DESIGN1: { right: 15 },
+        DESIGN3: { right: 15 },
+        DESIGN5: { right: 15 },
+        DESIGN7: { right: 15 },
+        DESIGN9: { right: 15 },
+        DESIGN11: { right: 15 },
+        DESIGN13: { right: 15 },
+        DESIGN15: { right: 15 }
+    }
+};
+exports.POS_INSET = {
+    INSET1: { top: GAP, left: GAP },
+    INSET2: { top: GAP, left: '50%', transform: 'translateX(-50%)' },
+    INSET3: { top: GAP, right: GAP },
+    INSET4: { top: '50%', right: GAP, transform: 'translateY(-50%)' },
+    INSET5: { bottom: GAP, right: GAP },
+    INSET6: { bottom: GAP, left: '50%', transform: 'translateX(-50%)' },
+    INSET7: { left: GAP, bottom: GAP },
+    INSET8: { top: '50%', left: GAP, transform: 'translateY(-50%)' }
+};
+exports.POS_OUTSET_NAVIGATION = {
+    OUTSET1: { bottom: 20 },
+    OUTSET2: { bottom: 20 },
+    OUTSET3: { bottom: 20 },
+    OUTSET4: { left: 20 },
+    OUTSET5: { left: 20 },
+    OUTSET6: { left: 20 },
+    OUTSET7: { top: 20 },
+    OUTSET8: { top: 20 },
+    OUTSET9: { top: 20 },
+    OUTSET10: { right: 20 },
+    OUTSET11: { right: 20 },
+    OUTSET12: { right: 20 }
+};
+var POS_OUTSET_GROUP = {
+    OUTSET1: {
+        top: 0,
+        height: 0
+    },
+    OUTSET2: {
+        bottom: '100%',
+        height: 0,
+        left: '50%',
+        transform: 'translateX(-50%)'
+    },
+    OUTSET3: {
+        bottom: '100%',
+        height: 0,
+        right: 0,
+        justifyContent: 'flex-start'
+    },
+    OUTSET4: {
+        top: 0,
+        width: 0,
+        right: 0
+    },
+    OUTSET5: {
+        top: '50%',
+        width: 0,
+        right: 0,
+        transform: 'translateY(-50%)'
+    },
+    OUTSET6: {
+        bottom: 0,
+        width: 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,
+        width: 0,
+        left: 0
+    },
+    OUTSET11: {
+        top: '50%',
+        width: 0,
+        left: 0,
+        transform: 'translateY(-50%)'
+    },
+    OUTSET12: {
+        top: 0,
+        width: 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>) => 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

@@ -13,6 +13,7 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFlexGridLayout = void 0;
 var react_1 = require("react");
+var elementPositions_1 = require("./elementPositions");
 var useFlexGridLayout = function (_a) {
     var components = _a.components;
     var _b = (0, react_1.useState)({ top: 0, right: 0, bottom: 0, left: 0 }), groupSizes = _b[0], setGroupSizes = _b[1];
@@ -60,50 +61,33 @@ var useFlexGridLayout = function (_a) {
         return directions[position];
     };
     // 위치에 따른 스타일 결정 (CCB 크기를 고려)
-    var getPositionStyle = function (position, ccbInset) {
+    var getPositionStyle = function (position, ccbInset, designType, size, elementType) {
+        var EAST = ['OUTSET4', 'OUTSET5', 'OUTSET6'];
+        var WEST = ['OUTSET10', 'OUTSET11', 'OUTSET12'];
+        var SOUTH = ['OUTSET7', 'OUTSET8', 'OUTSET9'];
+        var NORTH = ['OUTSET1', 'OUTSET2', 'OUTSET3'];
+        var isEAST = EAST.includes(position);
+        var isWEST = WEST.includes(position);
+        var isSOUTH = SOUTH.includes(position);
+        var isNORTH = NORTH.includes(position);
         var base = {
-            position: 'absolute',
+            position: 'relative',
             display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center'
+            alignItems: isSOUTH ? 'flex-start' : isNORTH ? 'flex-end' : 'center',
+            justifyContent: isEAST ? 'flex-start' : isWEST ? 'flex-end' : 'center'
         };
-        // CCB의 중앙 위치 계산
-        var ccbTop = parseFloat(ccbInset.top) || 0;
-        var ccbRight = parseFloat(ccbInset.right) || 0;
-        var ccbBottom = parseFloat(ccbInset.bottom) || 0;
-        var ccbLeft = parseFloat(ccbInset.left) || 0;
-        // CCB의 실제 크기와 중앙 위치 계산
-        var ccbWidth = layoutSize.width - ccbLeft - ccbRight;
-        var ccbHeight = layoutSize.height - ccbTop - ccbBottom;
-        var ccbCenterX = ccbLeft + ccbWidth / 2;
-        var ccbCenterY = ccbTop + ccbHeight / 2;
-        var positions = {
-            OUTSET1: { top: -50, left: ccbLeft },
-            OUTSET2: { top: -50, left: "".concat(ccbCenterX, "px"), transform: 'translateX(-50%)' },
-            OUTSET3: { top: -50, right: ccbRight },
-            OUTSET4: { top: ccbTop, right: 50 },
-            OUTSET5: { top: "".concat(ccbCenterY, "px"), right: 50, transform: 'translateY(-50%)' },
-            OUTSET6: { bottom: ccbBottom, right: 50 },
-            OUTSET7: { bottom: -50, right: ccbRight },
-            OUTSET8: { bottom: -50, left: "".concat(ccbCenterX, "px"), transform: 'translateX(-50%)' },
-            OUTSET9: { bottom: -50, left: ccbLeft },
-            OUTSET10: { bottom: ccbBottom, left: -50 },
-            OUTSET11: { top: "".concat(ccbCenterY, "px"), left: -50, transform: 'translateY(-50%)' },
-            OUTSET12: { top: ccbTop, left: -50 },
-            INSET1: { top: ccbTop + GAP, left: ccbLeft + GAP },
-            INSET2: { top: ccbTop + GAP, left: "".concat(ccbCenterX, "px"), transform: 'translateX(-50%)' },
-            INSET3: { top: ccbTop + GAP, right: ccbRight + GAP },
-            INSET4: { top: "".concat(ccbCenterY, "px"), right: ccbRight + GAP, transform: 'translateY(-50%)' },
-            INSET5: { bottom: ccbBottom + GAP, right: ccbRight + GAP },
-            INSET6: {
-                bottom: ccbBottom + GAP,
-                left: "".concat(ccbCenterX, "px"),
-                transform: 'translateX(-50%)'
-            },
-            INSET7: { bottom: ccbBottom + GAP, left: ccbLeft + GAP },
-            INSET8: { top: "".concat(ccbCenterY, "px"), left: ccbLeft + GAP, transform: 'translateY(-50%)' }
-        };
-        return __assign(__assign({}, base), positions[position]);
+        // // CCB의 중앙 위치 계산
+        // const ccbTop = parseFloat(ccbInset.top) || 0;
+        // const ccbRight = parseFloat(ccbInset.right) || 0;
+        // const ccbBottom = parseFloat(ccbInset.bottom) || 0;
+        // const ccbLeft = parseFloat(ccbInset.left) || 0;
+        // // CCB의 실제 크기와 중앙 위치 계산
+        // const ccbWidth = layoutSize.width - ccbLeft - ccbRight;
+        // const ccbHeight = layoutSize.height - ccbTop - ccbBottom;
+        // const ccbCenterX = ccbLeft + ccbWidth / 2;
+        // const ccbCenterY = ccbTop + ccbHeight / 2;
+        var pos = (0, elementPositions_1.getPosition)(position, designType, size, elementType);
+        return __assign(__assign({}, base), pos);
     };
     // 컴포넌트 그룹 레이아웃
     var getComponentGroupLayout = function (components, position) {
@@ -129,8 +113,7 @@ var useFlexGridLayout = function (_a) {
         return {
             display: 'flex',
             flexDirection: isHorizontal ? 'row' : 'column',
-            gap: '8px',
-            alignItems: 'center'
+            gap: '8px'
         };
     };
     // ccbInset 계산

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

@@ -9,7 +9,7 @@ export declare function useSwiper(): {
     isEnd: boolean;
     onSwiper: (swiper: SwiperClass) => void;
     onSlideChangeTransitionEnd: (swiper: SwiperClass) => void;
-    onAutoplayTimeLeft: (_: SwiperClass, time: number, progress: number) => void;
+    onAutoplayTimeLeft: (swiper: SwiperClass, time: number, progress: number) => void;
     onClickBullet: (index: number) => void;
     onClickPrevBtn: () => void;
     onClickNextBtn: () => void;

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

@@ -26,7 +26,7 @@ function useSwiper() {
             setCurrentSlide(swiper.activeIndex + 1);
         }
     };
-    var onAutoplayTimeLeft = (0, react_1.useCallback)(function (_, time, progress) {
+    var onAutoplayTimeLeft = (0, react_1.useCallback)(function (swiper, time, progress) {
         leftTimeMsRef.current = time;
         progressRef.current = progress;
     }, []);

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

@@ -30,9 +30,22 @@ var S_HiddenCover_1 = require("../components/S_HiddenCover");
 var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
 var textSpecFormatOptions_1 = require("./textSpecFormatOptions");
 function Text(props) {
-    var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
+    var _a, _b, _c;
+    var _d = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _d.device, mode = _d.mode;
     var queryContext = (0, compositionQueryContext_1.useCCBQueryPath)();
-    var index = props.index, _b = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _b.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _b.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _b.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE, CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA = _b.CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, _c = props.CB_CONTENT_PROP_TEXT, CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE = _c.CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE, CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA = _c.CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA, CB_CONTENT_PROP_TEXT_SPEC_SUFFIX = _c.CB_CONTENT_PROP_TEXT_SPEC_SUFFIX, CB_CONTENT_PROP_TEXT_SPEC_PREFIX = _c.CB_CONTENT_PROP_TEXT_SPEC_PREFIX;
+    var index = props.index, _e = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _e.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _e.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _e.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _e.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE = _e.CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE, CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA = _e.CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, _f = props.CB_CONTENT_PROP_TEXT, CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE = _f.CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE, CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA = _f.CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA, CB_CONTENT_PROP_TEXTOPTION = props.CB_CONTENT_PROP_TEXTOPTION;
+    // const {
+    //   CB_CONTENT_PROP_TEXTOPTION_SPEC_SUFFIX,
+    //   CB_CONTENT_PROP_TEXTOPTION_SPEC_PREFIX,
+    //   CB_CONTENT_PROP_TEXTOPTION_SPEC_FORMAT
+    // } = CB_CONTENT_PROP_TEXTOPTION ?? {
+    //   CB_CONTENT_PROP_TEXTOPTION_SPEC_SUFFIX: '',
+    //   CB_CONTENT_PROP_TEXTOPTION_SPEC_PREFIX: '',
+    //   CB_CONTENT_PROP_TEXTOPTION_SPEC_FORMAT: 'NONE'
+    // };
+    var textSuffix = (_a = CB_CONTENT_PROP_TEXTOPTION === null || CB_CONTENT_PROP_TEXTOPTION === void 0 ? void 0 : CB_CONTENT_PROP_TEXTOPTION.CB_CONTENT_PROP_TEXTOPTION_SPEC_SUFFIX) !== null && _a !== void 0 ? _a : '';
+    var textPrefix = (_b = CB_CONTENT_PROP_TEXTOPTION === null || CB_CONTENT_PROP_TEXTOPTION === void 0 ? void 0 : CB_CONTENT_PROP_TEXTOPTION.CB_CONTENT_PROP_TEXTOPTION_SPEC_PREFIX) !== null && _b !== void 0 ? _b : '';
+    var textFormat = (_c = CB_CONTENT_PROP_TEXTOPTION === null || CB_CONTENT_PROP_TEXTOPTION === void 0 ? void 0 : CB_CONTENT_PROP_TEXTOPTION.CB_CONTENT_PROP_TEXTOPTION_SPEC_FORMAT) !== null && _c !== void 0 ? _c : 'NONE';
     var cLinkValue = function () {
         if (CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE === 'DATA' ||
             CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE === 'DELEGATEDDATA') {
@@ -47,14 +60,14 @@ function Text(props) {
         }
         return CB_CONTENT_PROP_CLINK_SPEC_SRC;
     };
-    var _d = (0, useCLINK_1.default)({
+    var _g = (0, useCLINK_1.default)({
         src: cLinkValue(),
         type: CB_CONTENT_PROP_CLINK_SPEC_TYPE,
         openNewTab: CB_CONTENT_PROP_CLINK_SPEC_NEWTAB,
         internalSrc: String(CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC)
-    }), CLINKCursor = _d.CLINKCursor, onClickCLINK = _d.onClickCLINK;
-    var _e = getTextStyles(props.CB_STYLE_PROP_TEXT, device), textStyle = _e.style, textHoverStyle = _e.hoverStyle;
-    var _f = (0, util_1.parseProperties)(props, device), propsStyle = _f.style, propsHoverStyle = _f.hoverStyle, layoutStyle = _f.layout, effect = _f.effect;
+    }), CLINKCursor = _g.CLINKCursor, onClickCLINK = _g.onClickCLINK;
+    var _h = getTextStyles(props.CB_STYLE_PROP_TEXT, device), textStyle = _h.style, textHoverStyle = _h.hoverStyle;
+    var _j = (0, util_1.parseProperties)(props, device), propsStyle = _j.style, propsHoverStyle = _j.hoverStyle, layoutStyle = _j.layout, effect = _j.effect;
     var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
     var googleFonts = (0, getGoogleFonts_1.getGoogleFontsFromTextSpecCode)(props.CB_STYLE_PROP_TEXT, device === 'MOBILE');
     (0, useGoogleFonts_1.default)({ fonts: googleFonts });
@@ -73,7 +86,7 @@ function Text(props) {
     var hasEffect = !isNoneEffectType;
     var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
     var textValue = function () {
-        var FORMATOPTION = props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_FORMAT;
+        var FORMATOPTION = textFormat;
         var formatOption = textSpecFormatOptions_1.TEXT_SPEC_FORMAT_OPRIONS[FORMATOPTION];
         var isDataConnected = CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE === 'DATA' ||
             CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE === 'DELEGATEDDATA';
@@ -133,7 +146,7 @@ function Text(props) {
                         e.currentTarget.classList.add('hovered');
                     }, onMouseLeave: function (e) {
                         e.currentTarget.classList.remove('hovered');
-                    }, className: "cb-layout-box cb-text", normalStyle: __assign(__assign(__assign(__assign(__assign({}, textStyle), propsStyle), layoutStyle), effectCssProperties), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor, height: 'fit-content', minWidth: "calc(2ch + ".concat(layoutStyle.paddingLeft, " + ").concat(layoutStyle.paddingRight, ")") }), hoverStyle: __assign(__assign(__assign({}, textHoverStyle), propsHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), onClick: onClickCLINK }, { children: [CB_CONTENT_PROP_TEXT_SPEC_PREFIX, textValue() === 'ERROR' ? 'EDITOR:FALLBACK_TEXT' : getTruncatedText(textValue()), CB_CONTENT_PROP_TEXT_SPEC_SUFFIX] })) }))] }));
+                    }, className: "cb-layout-box cb-text", normalStyle: __assign(__assign(__assign(__assign(__assign({}, textStyle), propsStyle), layoutStyle), effectCssProperties), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor, height: 'fit-content', minWidth: "calc(2ch + ".concat(layoutStyle.paddingLeft, " + ").concat(layoutStyle.paddingRight, ")") }), hoverStyle: __assign(__assign(__assign({}, textHoverStyle), propsHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), onClick: onClickCLINK }, { children: [textPrefix, textValue() === 'ERROR' ? 'EDITOR:FALLBACK_TEXT' : getTruncatedText(textValue()), textSuffix] })) }))] }));
 }
 exports.default = Text;
 function getTextStyles(props, device) {