pds-dev-kit-web-test 2.5.407 → 2.5.408

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

@@ -4,14 +4,14 @@ export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_STYLE_TYPE = 'DESIGN1' | 'DESIGN
 export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_ITEMSPACING_TYPE = 'WIDE' | 'NORMAL' | 'NARROW';
 export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_ITEMCURSOR_TYPE = 'ONCE' | 'ALL' | 'SCROLL';
 export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_INFINITESCROLL_TYPE = boolean;
-export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PAGINATIONSTYLE_TYPE = 'NONE' | 'DESIGN1' | 'DESIGN2' | 'DESIGN3' | 'DESIGN4' | 'DESIGN5' | 'DESIGN6' | 'DESIGN7' | 'DESIGN8' | 'DESIGN9' | 'DESIGN10' | 'DESIGN11' | 'DESIGN12' | 'DESIGN13' | 'DESIGN14' | 'DESIGN15' | 'DESIGN16';
-export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PAGINATIONLOCATION_TYPE = 'OUTSET1' | 'OUTSET2' | 'OUTSET3' | 'OUTSET4' | 'OUTSET5' | 'OUTSET6' | 'OUTSET7' | 'OUTSET8' | 'OUTSET9' | 'OUTSET10' | 'OUTSET11' | 'OUTSET12' | 'INSET1' | 'INSET2' | 'INSET3' | 'INSET4' | 'INSET5' | 'INSET6' | 'INSET7' | 'INSET8';
+export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PAGINATIONSTYLE_TYPE = 'NONE' | 'DESIGN1' | 'DESIGN2' | 'DESIGN3' | 'DESIGN4' | 'DESIGN5' | 'DESIGN6' | 'DESIGN7' | 'DESIGN8' | 'DESIGN9' | 'DESIGN10' | 'DESIGN11' | 'DESIGN12' | 'DESIGN13' | 'DESIGN14' | 'DESIGN15' | 'DESIGN16' | 'DESIGN17';
+export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PAGINATIONLOCATION_TYPE = 'OUTSET1' | 'OUTSET2' | 'OUTSET3' | 'OUTSET4' | 'OUTSET5' | 'OUTSET6' | 'OUTSET7' | 'OUTSET8' | 'OUTSET9' | 'OUTSET10' | 'OUTSET11' | 'OUTSET12' | 'INSET13' | 'INSET14' | 'INSET15' | 'INSET16' | 'INSET17' | 'INSET18' | 'INSET19' | 'INSET20';
 export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PAGINATIONSIZE_TYPE = 'SMALL' | 'MEDIUM' | 'LARGE';
-export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSTYLE_TYPE = 'NONE' | 'DESIGN1' | 'DESIGN2' | 'DESIGN3' | 'DESIGN4' | 'DESIGN5' | 'DESIGN6' | 'DESIGN7' | 'DESIGN8' | 'DESIGN9' | 'DESIGN10' | 'DESIGN11' | 'DESIGN12' | 'DESIGN13' | 'DESIGN14' | 'DESIGN15' | 'DESIGN16' | 'DESIGN17' | 'DESIGN18' | 'DESIGN19' | 'DESIGN20' | 'DESIGN21' | 'DESIGN22' | 'DESIGN23' | 'DESIGN24' | 'DESIGN25' | 'DESIGN26' | 'DESIGN27' | 'DESIGN28' | 'DESIGN29' | 'DESIGN30' | 'DESIGN31' | 'DESIGN32' | 'DESIGN33' | 'DESIGN34' | 'DESIGN35' | 'DESIGN36' | 'DESIGN37' | 'DESIGN38' | 'DESIGN39' | 'DESIGN40' | 'DESIGN41' | 'DESIGN42' | 'DESIGN43' | 'DESIGN44' | 'DESIGN45' | 'DESIGN46' | 'DESIGN47' | 'DESIGN48' | 'DESIGN49' | 'DESIGN50' | 'DESIGN51' | 'DESIGN52' | 'DESIGN53' | 'DESIGN54' | 'DESIGN55' | 'DESIGN56' | 'DESIGN57' | 'DESIGN58' | 'DESIGN59' | 'DESIGN60' | 'DESIGN61' | 'DESIGN62' | 'DESIGN63' | 'DESIGN64' | 'DESIGN65' | 'DESIGN66' | 'DESIGN67' | 'DESIGN68' | 'DESIGN69' | 'DESIGN70' | 'DESIGN71' | 'DESIGN72' | 'DESIGN73' | 'DESIGN74' | 'DESIGN75' | 'DESIGN76' | 'DESIGN77' | 'DESIGN78' | 'DESIGN79' | 'DESIGN80' | 'DESIGN81' | 'DESIGN82' | 'DESIGN83' | 'DESIGN84' | 'DESIGN85' | 'DESIGN86' | 'DESIGN87' | 'DESIGN88' | 'DESIGN89' | 'DESIGN90' | 'DESIGN91' | 'DESIGN92' | 'DESIGN93' | 'DESIGN94' | 'DESIGN95' | 'DESIGN96' | 'DESIGN97' | 'DESIGN98' | 'DESIGN99' | 'DESIGN100';
-export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNLOCATION_TYPE = 'OUTSET1' | 'OUTSET2' | 'OUTSET3' | 'OUTSET4' | 'OUTSET5' | 'OUTSET6' | 'OUTSET7' | 'OUTSET8' | 'OUTSET9' | 'OUTSET10' | 'OUTSET11' | 'OUTSET12' | 'INSET1' | 'INSET2' | 'INSET3' | 'INSET4' | 'INSET5' | 'INSET6' | 'INSET7' | 'INSET8';
+export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSTYLE_TYPE = 'NONE' | 'DESIGN1' | 'DESIGN2' | 'DESIGN3' | 'DESIGN4' | 'DESIGN5' | 'DESIGN6' | 'DESIGN7' | 'DESIGN8' | 'DESIGN9' | 'DESIGN10' | 'DESIGN11' | 'DESIGN12' | 'DESIGN13' | 'DESIGN14' | 'DESIGN15' | 'DESIGN16' | 'DESIGN17' | 'DESIGN18' | 'DESIGN19' | 'DESIGN20';
+export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNLOCATION_TYPE = 'OUTSET1' | 'OUTSET2' | 'OUTSET3' | 'OUTSET4' | 'OUTSET5' | 'OUTSET6' | 'OUTSET7' | 'OUTSET8' | 'OUTSET9' | 'OUTSET10' | 'OUTSET11' | 'OUTSET12' | 'INSET13' | 'INSET14' | 'INSET15' | 'INSET16' | 'INSET17' | 'INSET18' | 'INSET19' | 'INSET20';
 export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSIZE_TYPE = 'SMALL' | 'MEDIUM' | 'LARGE';
-export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSTYLE_TYPE = 'NONE' | 'DESIGN1' | 'DESIGN2' | 'DESIGN3' | 'DESIGN4' | 'DESIGN5' | 'DESIGN6' | 'DESIGN7' | 'DESIGN8' | 'DESIGN9' | 'DESIGN10' | 'DESIGN11' | 'DESIGN12' | 'DESIGN13' | 'DESIGN14' | 'DESIGN15' | 'DESIGN16' | 'DESIGN17' | 'DESIGN18' | 'DESIGN19' | 'DESIGN20' | 'DESIGN21' | 'DESIGN22' | 'DESIGN23' | 'DESIGN24' | 'DESIGN25' | 'DESIGN26' | 'DESIGN27' | 'DESIGN28' | 'DESIGN29' | 'DESIGN30' | 'DESIGN31' | 'DESIGN32' | 'DESIGN33' | 'DESIGN34' | 'DESIGN35' | 'DESIGN36' | 'DESIGN37' | 'DESIGN38' | 'DESIGN39' | 'DESIGN40' | 'DESIGN41' | 'DESIGN42' | 'DESIGN43' | 'DESIGN44' | 'DESIGN45' | 'DESIGN46' | 'DESIGN47' | 'DESIGN48' | 'DESIGN49' | 'DESIGN50' | 'DESIGN51' | 'DESIGN52' | 'DESIGN53' | 'DESIGN54' | 'DESIGN55' | 'DESIGN56' | 'DESIGN57' | 'DESIGN58' | 'DESIGN59' | 'DESIGN60' | 'DESIGN61' | 'DESIGN62' | 'DESIGN63' | 'DESIGN64' | 'DESIGN65' | 'DESIGN66' | 'DESIGN67' | 'DESIGN68' | 'DESIGN69' | 'DESIGN70' | 'DESIGN71' | 'DESIGN72' | 'DESIGN73' | 'DESIGN74' | 'DESIGN75' | 'DESIGN76' | 'DESIGN77' | 'DESIGN78' | 'DESIGN79' | 'DESIGN80' | 'DESIGN81' | 'DESIGN82' | 'DESIGN83' | 'DESIGN84' | 'DESIGN85' | 'DESIGN86' | 'DESIGN87' | 'DESIGN88' | 'DESIGN89' | 'DESIGN90' | 'DESIGN91' | 'DESIGN92' | 'DESIGN93' | 'DESIGN94' | 'DESIGN95' | 'DESIGN96' | 'DESIGN97' | 'DESIGN98' | 'DESIGN99' | 'DESIGN100';
-export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC__NEXTBTNLOCATION_TYPE = 'OUTSET1' | 'OUTSET2' | 'OUTSET3' | 'OUTSET4' | 'OUTSET5' | 'OUTSET6' | 'OUTSET7' | 'OUTSET8' | 'OUTSET9' | 'OUTSET10' | 'OUTSET11' | 'OUTSET12' | 'INSET1' | 'INSET2' | 'INSET3' | 'INSET4' | 'INSET5' | 'INSET6' | 'INSET7' | 'INSET8';
+export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSTYLE_TYPE = 'NONE' | 'DESIGN1' | 'DESIGN2' | 'DESIGN3' | 'DESIGN4' | 'DESIGN2' | 'DESIGN3' | 'DESIGN4' | 'DESIGN5' | 'DESIGN6' | 'DESIGN7' | 'DESIGN8' | 'DESIGN9' | 'DESIGN10' | 'DESIGN11' | 'DESIGN12' | 'DESIGN13' | 'DESIGN14' | 'DESIGN15' | 'DESIGN16' | 'DESIGN17' | 'DESIGN18' | 'DESIGN19' | 'DESIGN20';
+export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC__NEXTBTNLOCATION_TYPE = 'OUTSET1' | 'OUTSET2' | 'OUTSET3' | 'OUTSET4' | 'OUTSET5' | 'OUTSET6' | 'OUTSET7' | 'OUTSET8' | 'OUTSET9' | 'OUTSET10' | 'OUTSET11' | 'OUTSET12' | 'INSET13' | 'INSET14' | 'INSET15' | 'INSET16' | 'INSET17' | 'INSET18' | 'INSET19' | 'INSET20';
 export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSIZE_TYPE = 'SMALL' | 'MEDIUM' | 'LARGE';
 export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBAR_TYPE = 'NONE' | 'DESIGN1' | 'DESIGN2' | 'DESIGN3' | 'DESIGN4' | 'DESIGN5' | 'DESIGN6' | 'DESIGN7' | 'DESIGN8';
 export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSIZE_TYPE = 'SMALL' | 'MEDIUM' | 'LARGE';

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

@@ -36,11 +36,7 @@ function ContentsList(props) {
     var _b = (0, react_1.useState)(false), isHovered = _b[0], setIsHovered = _b[1];
     var _c = (0, react_1.useState)(1), currentPage = _c[0], setCurrentPage = _c[1];
     var itemCounts = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_ITEMCOUNTS;
-    var parsedQueryPath = removeFirstSegment(CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA);
-    var queryDataValue = queryData === null || queryData === void 0 ? void 0 : queryData[parsedQueryPath];
-    var totalPage = Math.ceil((CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE === 'DATA' && queryDataValue
-        ? queryDataValue === null || queryDataValue === void 0 ? void 0 : queryDataValue.length
-        : compositions.length) / itemCounts);
+    var totalPage = Math.ceil(compositions.length / itemCounts);
     var _d = (0, util_1.parseProperties)(props, device), style = _d.style, hoverStyle = _d.hoverStyle, layout = _d.layout, effect = _d.effect;
     var contentPropCss = (0, contentsListUtils_1.parseGridContentProp)({
         props: CB_CONTENT_PROP_CONTENTSLIST
@@ -68,45 +64,37 @@ function ContentsList(props) {
     var effectVisibleStyle = hasEffect
         ? { opacity: isVisible ? 1 : 0, position: 'relative' }
         : { position: 'relative' };
-    var handlePageClick = function (page) {
-        setCurrentPage(page);
+    // eslint-disable-next-line
+    var handlePrevBtnClick = function () {
+        if (currentPage === 1)
+            return;
+        setCurrentPage(function (prev) { return prev - 1; });
+    };
+    // eslint-disable-next-line
+    var handleNextBtnClick = function () {
+        if (currentPage === totalPage)
+            return;
+        setCurrentPage(function (prev) { return prev + 1; });
+    };
+    var handleBulletClick = function (index) {
+        setCurrentPage(index + 1);
     };
     var startIndex = (currentPage - 1) * itemCounts;
     var endIndex = startIndex + itemCounts;
-    return ((0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ id: "contentslist-box", className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), hoverStyle: __assign({}, hoverStyle), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: (0, jsx_runtime_1.jsxs)(S_ContentsListWrapper, { children: [(0, jsx_runtime_1.jsx)(S_ContentsListLayout, __assign({ contentPropCss: contentPropCss, stylePropCss: isHovered ? hoverStylePropCss : stylePropCss, borderStyle: {
-                            borderBottomLeftRadius: style.borderBottomLeftRadius,
-                            borderBottomRightRadius: style.borderBottomRightRadius,
-                            borderTopLeftRadius: style.borderTopLeftRadius,
-                            borderTopRightRadius: style.borderTopRightRadius,
-                            borderWidth: style.borderWidth,
-                            borderColor: style.borderColor,
-                            borderStyle: style.borderStyle
-                        }, hoverBorderStyle: {
-                            borderBottomLeftRadius: hoverStyle.borderBottomLeftRadius,
-                            borderBottomRightRadius: hoverStyle.borderBottomRightRadius,
-                            borderTopLeftRadius: hoverStyle.borderTopLeftRadius,
-                            borderTopRightRadius: hoverStyle.borderTopRightRadius,
-                            borderWidth: hoverStyle.borderWidth,
-                            borderColor: hoverStyle.borderColor,
-                            borderStyle: hoverStyle.borderStyle
-                        } }, { children: (0, createCompositions_1.createCompositions)({
+    return ((0, jsx_runtime_1.jsxs)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: [(0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ id: "contentslist-box", className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), { position: 'relative', overflow: 'hidden' }), hoverStyle: __assign(__assign({}, hoverStyle), { position: 'relative', 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_ContentsListWrapper, __assign({ id: "contentslist-wrapper" }, { children: (0, jsx_runtime_1.jsx)(S_ContentsListGrid, __assign({ id: "contentslist-grid", contentPropCss: contentPropCss, stylePropCss: isHovered ? hoverStylePropCss : stylePropCss }, { children: (0, createCompositions_1.createCompositions)({
                             valueType: CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE,
                             queryPath: CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA,
                             queryData: queryData,
                             compositions: compositions
-                        }).slice(startIndex, endIndex) })), (0, jsx_runtime_1.jsx)(CustomPagination_1.CustomPagination, { type: isHovered ? paginationHoverStyle.type : paginationNormalStyle.type, offset: isHovered ? paginationHoverStyle.offset : paginationNormalStyle.offset, current: currentPage, total: totalPage, size: isHovered ? paginationHoverStyle.size : paginationNormalStyle.size, onPageClick: handlePageClick })] }) })) })));
+                        }).slice(startIndex, endIndex) })) })) })), (0, jsx_runtime_1.jsx)(CustomPagination_1.CustomPagination, { effectVisibleStyle: effectVisibleStyle, type: isHovered ? paginationHoverStyle.type : paginationNormalStyle.type, offset: isHovered ? paginationHoverStyle.offset : paginationNormalStyle.offset, current: currentPage, total: totalPage, size: isHovered ? paginationHoverStyle.size : paginationNormalStyle.size, onBulletClick: handleBulletClick })] })));
 }
-var S_ContentsListWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n"], ["\n  height: 100%;\n  width: 100%;\n"])));
-var S_ContentsListLayout = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: grid;\n  height: 100%;\n  overflow: hidden;\n  width: 100%;\n\n  ", ";\n  ", ";\n"], ["\n  display: grid;\n  height: 100%;\n  overflow: hidden;\n  width: 100%;\n\n  ", ";\n  ", ";\n"])), function (_a) {
+var S_ContentsListWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  position: relative;\n  width: 100%;\n"], ["\n  height: 100%;\n  position: relative;\n  width: 100%;\n"])));
+var S_ContentsListGrid = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: grid;\n  height: 100%;\n\n  ", "\n  ", "\n"], ["\n  display: grid;\n  height: 100%;\n\n  ", "\n  ", "\n"])), function (_a) {
     var contentPropCss = _a.contentPropCss;
     return contentPropCss;
 }, function (_a) {
     var stylePropCss = _a.stylePropCss;
     return stylePropCss;
 });
-function removeFirstSegment(path) {
-    var segments = path.split('/');
-    return segments.slice(1).join('/');
-}
 exports.default = ContentsList;
 var templateObject_1, templateObject_2;

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import type { CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE_TYPE } from '../types';
 export interface CustomPaginationProps {
+    effectVisibleStyle?: React.CSSProperties;
     current?: number;
     total?: number;
     type?: CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE_TYPE;
@@ -14,10 +15,9 @@ export interface CustomPaginationProps {
         transformOrigin?: string;
     };
     size?: number;
+    onBulletClick?: (index: number) => void;
 }
-export declare const CustomPagination: ({ current, total, type, offset, size, onPageClick }: CustomPaginationProps & {
-    onPageClick: (page: number) => void;
-}) => JSX.Element;
+export declare const CustomPagination: ({ effectVisibleStyle, current, total, type, offset, size, onBulletClick }: CustomPaginationProps) => JSX.Element;
 export interface FlexBoxProps {
     direction?: 'row' | 'column';
     justifyContent?: string;

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

@@ -40,69 +40,70 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomPagination = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var components_1 = require("../../../../../../../../DynamicLayout/components");
 var styled_components_1 = __importStar(require("styled-components"));
-var paginationConfigs_1 = require("./paginationConfigs");
 var CustomPagination = function (_a) {
-    var _b = _a.current, current = _b === void 0 ? 1 : _b, _c = _a.total, total = _c === void 0 ? 1 : _c, _d = _a.type, type = _d === void 0 ? 'NONE' : _d, _e = _a.offset, offset = _e === void 0 ? { top: '0' } : _e, _f = _a.size, size = _f === void 0 ? 1 : _f, onPageClick = _a.onPageClick;
-    var getPageGroupStart = function (page) {
-        return Math.floor((page - 1) / 5) * 5 + 1;
-    };
-    var groupStart = getPageGroupStart(current);
-    var groupEnd = Math.min(groupStart + 4, total);
-    var pageNumbers = Array.from({ length: groupEnd - groupStart + 1 }, function (_, index) { return groupStart + index; });
-    var handlePrevious = function () {
-        if (current > 1) {
-            onPageClick(current - 1);
-        }
-    };
-    var handleNext = function () {
-        if (current < total) {
-            onPageClick(current + 1);
-        }
-    };
-    var handlePageClick = function (pageNumber) {
-        onPageClick(pageNumber);
-    };
-    var renderProgressByType = function () {
-        switch (type) {
-            case 'NONE':
-                return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-            case 'DESIGN1':
-                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design1, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
-            case 'DESIGN2':
-                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design2, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
-            case 'DESIGN3':
-                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design3, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
-            case 'DESIGN4':
-                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design4, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
-            case 'DESIGN5':
-                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design5, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
-            case 'DESIGN6':
-                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design6, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
-            case 'DESIGN7':
-                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design7, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
-            case 'DESIGN8':
-                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design8, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
-            case 'DESIGN9':
-                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design9, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
-            case 'DESIGN10':
-                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design10, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
-            case 'DESIGN11':
-                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design11, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
-            case 'DESIGN12':
-                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design12, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
-            case 'DESIGN13':
-                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design13, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
-            default:
-                return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-        }
-    };
-    return ((0, jsx_runtime_1.jsx)(S_Pagination, __assign({ className: "custom-pagination_".concat(current), "$offset": offset, "$size": size }, { children: renderProgressByType() })));
+    var effectVisibleStyle = _a.effectVisibleStyle, _b = _a.current, current = _b === void 0 ? 1 : _b, _c = _a.total, total = _c === void 0 ? 1 : _c, _d = _a.type, type = _d === void 0 ? 'NONE' : _d, _e = _a.offset, offset = _e === void 0 ? { top: '0' } : _e, _f = _a.size, size = _f === void 0 ? 1 : _f, onBulletClick = _a.onBulletClick;
+    var bullets = Array.from({ length: total }, function (_, i) { return i; });
+    return ((0, jsx_runtime_1.jsx)(S_Pagination, __assign({ className: "custom-pagination_".concat(current), "$offset": offset, "$size": size, effectVisibleStyle: effectVisibleStyle }, { children: (function () {
+            switch (type) {
+                case 'NONE':
+                case 'DESIGN1':
+                    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+                case 'DESIGN2':
+                    return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ styleTheme: "body2Bold", colorTheme: "sysTextBlack" }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { opacity: 0.6 }, styleTheme: "body2Regular", colorTheme: "sysTextBlack" }, { children: "/ ".concat(total) }))] })));
+                case 'DESIGN3':
+                    return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ styleTheme: "body2Bold" }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { opacity: 0.6 }, styleTheme: "body2Regular" }, { children: "/ ".concat(total) }))] })));
+                case 'DESIGN4':
+                    return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "8px" }, { children: [(0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ styleTheme: "body2Bold", colorTheme: "sysTextBlack" }, { children: current })), (0, jsx_runtime_1.jsx)(S_Divider, { type: "VERTICAL", color: "WHITE" }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { opacity: 0.6 }, styleTheme: "body2Regular", colorTheme: "sysTextBlack" }, { children: total }))] })));
+                case 'DESIGN5':
+                    return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "8px" }, { children: [(0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ styleTheme: "body2Bold" }, { children: current })), (0, jsx_runtime_1.jsx)(S_Divider, { type: "VERTICAL", color: "WHITE" }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { opacity: 0.6 }, styleTheme: "body2Regular" }, { children: total }))] })));
+                case 'DESIGN6':
+                    return ((0, jsx_runtime_1.jsxs)(FlexBox, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { marginLeft: '8px', marginRight: '4px' }, styleTheme: "body2Bold", colorTheme: "sysTextBlack" }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { marginRight: '8px', marginLeft: '4px', opacity: 0.6 }, styleTheme: "body2Regular", colorTheme: "sysTextBlack" }, { children: "/ ".concat(total) })), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" })] }));
+                case 'DESIGN7':
+                    return ((0, jsx_runtime_1.jsxs)(FlexBox, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16 }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { marginLeft: '8px', marginRight: '4px' }, styleTheme: "body2Bold", colorTheme: "sysTextWhite" }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { marginRight: '8px', marginLeft: '4px', opacity: 0.6 }, styleTheme: "body2Regular", colorTheme: "sysTextWhite" }, { children: "/ ".concat(total) })), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16 })] }));
+                case 'DESIGN8':
+                    return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "8px" }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ styleTheme: "body2Bold", colorTheme: "sysTextBlack" }, { children: current })), (0, jsx_runtime_1.jsx)(S_Divider, { type: "VERTICAL" }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { opacity: 0.6 }, styleTheme: "body2Regular", colorTheme: "sysTextBlack" }, { children: total })), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" })] })));
+                case 'DESIGN9':
+                    return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "8px" }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16 }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ styleTheme: "body2Bold", colorTheme: "sysTextWhite" }, { children: current })), (0, jsx_runtime_1.jsx)(S_Divider, { type: "VERTICAL", color: "WHITE" }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { opacity: 0.6 }, styleTheme: "body2Regular", colorTheme: "sysTextWhite" }, { children: total })), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16 })] })));
+                case 'DESIGN10':
+                    return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ direction: "column", gap: "8px" }, { children: [(0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { paddingLeft: '8px', paddingRight: '8px' }, styleTheme: "body2Bold", colorTheme: "sysTextBlack" }, { children: current })), (0, jsx_runtime_1.jsx)(S_Divider, { type: "HORIZONTAL" }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { opacity: 0.6 }, styleTheme: "body2Regular", colorTheme: "sysTextBlack" }, { children: total }))] })));
+                case 'DESIGN11':
+                    return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ direction: "column", gap: "8px" }, { children: [(0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { paddingLeft: '8px', paddingRight: '8px' }, styleTheme: "body2Bold", colorTheme: "sysTextWhite" }, { children: current })), (0, jsx_runtime_1.jsx)(S_Divider, { type: "HORIZONTAL", color: "DARK" }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { opacity: 0.6 }, styleTheme: "body2Regular", colorTheme: "sysTextWhite" }, { children: total }))] })));
+                case 'DESIGN12':
+                    return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ gap: "8px" }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Dot, { color: "DARK", isActive: index + 1 === current, onClick: onBulletClick ? function () { return onBulletClick(index); } : undefined }, index)); }) })));
+                case 'DESIGN13':
+                    return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ gap: "8px" }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Dot, { color: "WHITE", isActive: index + 1 === current, onClick: onBulletClick ? function () { return onBulletClick(index); } : undefined }, index)); }) })));
+                case 'DESIGN14':
+                    return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ direction: "column", gap: "12px" }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Dot, { color: "DARK", isActive: index + 1 === current, onClick: onBulletClick ? function () { return onBulletClick(index); } : undefined }, index)); }) })));
+                case 'DESIGN15':
+                    return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ direction: "column", gap: "12px" }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Dot, { color: "WHITE", isActive: index + 1 === current, onClick: onBulletClick ? function () { return onBulletClick(index); } : undefined }, index)); }) })));
+                case 'DESIGN16':
+                    return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ gap: "8px" }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Bar, { color: "DARK", isActive: index + 1 === current, onClick: onBulletClick ? function () { return onBulletClick(index); } : undefined }, index)); }) })));
+                case 'DESIGN17':
+                    return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ gap: "8px" }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Bar, { color: "WHITE", isActive: index + 1 === current, onClick: onBulletClick ? function () { return onBulletClick(index); } : undefined }, index)); }) })));
+                default:
+                    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+            }
+        })() })));
 };
 exports.CustomPagination = CustomPagination;
-var S_Pagination = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 5px;\n  position: absolute;\n  ", ";\n  transform: ", ";\n  transform-origin: ", ";\n  width: max-content;\n  z-index: 2;\n"], ["\n  padding: 5px;\n  position: absolute;\n  ", ";\n  transform: ", ";\n  transform-origin: ", ";\n  width: max-content;\n  z-index: 2;\n"])), function (_a) {
+var FlexBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: ", ";\n  display: flex;\n  flex-direction: ", ";\n  gap: ", ";\n  justify-content: ", ";\n"], ["\n  align-items: ", ";\n  display: flex;\n  flex-direction: ", ";\n  gap: ", ";\n  justify-content: ", ";\n"])), function (_a) {
+    var _b = _a.alignItems, alignItems = _b === void 0 ? 'center' : _b;
+    return alignItems;
+}, function (_a) {
+    var _b = _a.direction, direction = _b === void 0 ? 'row' : _b;
+    return direction;
+}, function (_a) {
+    var _b = _a.gap, gap = _b === void 0 ? '0' : _b;
+    return gap;
+}, function (_a) {
+    var _b = _a.justifyContent, justifyContent = _b === void 0 ? 'center' : _b;
+    return justifyContent;
+});
+var S_Pagination = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 5px;\n  position: absolute;\n  ", ";\n  transform: ", ";\n  transform-origin: ", ";\n  width: max-content;\n  z-index: 2;\n  /* ", "; */\n"], ["\n  padding: 5px;\n  position: absolute;\n  ", ";\n  transform: ", ";\n  transform-origin: ", ";\n  width: max-content;\n  z-index: 2;\n  /* ", "; */\n"])), function (_a) {
     var $offset = _a.$offset;
-    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n      ", "\n      ", "\n    "])), $offset.top !== undefined ? "top: ".concat($offset.top, ";") : '', $offset.bottom !== undefined ? "bottom: ".concat($offset.bottom, ";") : '', $offset.left !== undefined ? "left: ".concat($offset.left, ";") : '', $offset.right !== undefined ? "right: ".concat($offset.right, ";") : '');
+    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n      ", "\n      ", "\n    "])), $offset.top !== undefined ? "top: ".concat($offset.top, ";") : '', $offset.bottom !== undefined ? "bottom: ".concat($offset.bottom, ";") : '', $offset.left !== undefined ? "left: ".concat($offset.left, ";") : '', $offset.right !== undefined ? "right: ".concat($offset.right, ";") : '');
 }, function (_a) {
     var _b, _c;
     var $size = _a.$size, $offset = _a.$offset;
@@ -110,6 +111,78 @@ var S_Pagination = styled_components_1.default.div(templateObject_2 || (template
 }, function (_a) {
     var $offset = _a.$offset;
     return $offset.transformOrigin || 'center center';
+}, function (_a) {
+    var effectVisibleStyle = _a.effectVisibleStyle;
+    return effectVisibleStyle && __assign({}, effectVisibleStyle);
+});
+var body2Bold = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.desktopFontSize.body2;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fontWeight.bold;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.desktopLineHeight.body2;
+});
+var body2Regular = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.desktopFontSize.body2;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fontWeight.normal;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.desktopLineHeight.body2;
+});
+var sysTextWhite = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textlabel_sys_white;
+});
+var sysTextBlack = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textlabel_sys_black;
+});
+var S_TextLabel = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", ";\n\n  ", ";\n"], ["\n  ", ";\n\n  ", ";\n"])), function (_a) {
+    var styleTheme = _a.styleTheme;
+    return styleTheme &&
+        {
+            body2Bold: body2Bold,
+            body2Regular: body2Regular
+        }[styleTheme];
+}, function (_a) {
+    var colorTheme = _a.colorTheme;
+    return colorTheme
+        ? {
+            sysTextWhite: sysTextWhite,
+            sysTextBlack: sysTextBlack
+        }[colorTheme]
+        : sysTextWhite;
+});
+var verticalDivider = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  height: 16px;\n  width: 1px;\n"], ["\n  height: 16px;\n  width: 1px;\n"])));
+var horizontalDivider = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  height: 1px;\n  width: 100%;\n"], ["\n  height: 1px;\n  width: 100%;\n"])));
+var S_Divider = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background-color: ", ";\n  opacity: 0.6;\n  ", ";\n"], ["\n  background-color: ", ";\n  opacity: 0.6;\n  ", ";\n"])), function (_a) {
+    var color = _a.color;
+    return (color === 'WHITE' ? '#ffffff' : '#000000');
+}, function (_a) {
+    var type = _a.type;
+    return (type === 'VERTICAL' ? verticalDivider : horizontalDivider);
+});
+var whiteBullet = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: #ffffff;\n  opacity: ", ";\n"], ["\n  background-color: #ffffff;\n  opacity: ", ";\n"])), function (_a) {
+    var isActive = _a.isActive;
+    return (isActive ? 1 : 0.2);
+});
+var darkBullet = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  background-color: #000000;\n  opacity: ", ";\n"], ["\n  background-color: #000000;\n  opacity: ", ";\n"])), function (_a) {
+    var isActive = _a.isActive;
+    return (isActive ? 1 : 0.3);
+});
+var S_Dot = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  border-radius: 50%;\n  cursor: pointer;\n  height: 8px;\n  width: 8px;\n  ", ";\n"], ["\n  border-radius: 50%;\n  cursor: pointer;\n  height: 8px;\n  width: 8px;\n  ", ";\n"])), function (_a) {
+    var color = _a.color;
+    return (color === 'WHITE' ? whiteBullet : darkBullet);
+});
+var S_Bar = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  cursor: pointer;\n  height: 2px;\n  width: 40px;\n  ", ";\n"], ["\n  cursor: pointer;\n  height: 2px;\n  width: 40px;\n  ", ";\n"])), function (_a) {
+    var color = _a.color;
+    return (color === 'WHITE' ? whiteBullet : darkBullet);
 });
 exports.default = exports.CustomPagination;
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;

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

@@ -87,14 +87,20 @@ function parseGridStyleProp(_a) {
         var value = props[keyWithDevice];
         var hoverValue = props[keyWithHover];
         var styles = parseStylePropertyStyles(currentKey, value);
-        var hoverStyles = parseStylePropertyStyles(currentKey, hoverValue !== null && hoverValue !== void 0 ? hoverValue : value);
+        var hoverStyles = parseStylePropertyStyles(currentKey, hoverValue);
+        if (hoverValue === null || hoverValue === undefined) {
+            return {
+                stylePropCss: (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n            ", "\n            ", "\n          "], ["\n            ", "\n            ", "\n          "])), acc.stylePropCss, styles),
+                hoverStylePropCss: (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n            ", "\n          "], ["\n            ", "\n          "])), acc.hoverStylePropCss)
+            };
+        }
         return {
-            stylePropCss: (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n          ", "\n          ", "\n        "], ["\n          ", "\n          ", "\n        "])), acc.stylePropCss, styles),
-            hoverStylePropCss: (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n          ", "\n          ", "\n        "], ["\n          ", "\n          ", "\n        "])), acc.hoverStylePropCss, hoverStyles)
+            stylePropCss: (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n          ", "\n          ", "\n        "], ["\n          ", "\n          ", "\n        "])), acc.stylePropCss, styles),
+            hoverStylePropCss: (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n          ", "\n          ", "\n        "], ["\n          ", "\n          ", "\n        "])), acc.hoverStylePropCss, hoverStyles)
         };
     }, {
-        stylePropCss: (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject([""], [""]))),
-        hoverStylePropCss: (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject([""], [""])))
+        stylePropCss: (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject([""], [""]))),
+        hoverStylePropCss: (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject([""], [""])))
     });
 }
 exports.parseGridStyleProp = parseGridStyleProp;
@@ -105,10 +111,10 @@ function parseGridContentProp(_a) {
         var value = props[currentKey];
         var styles = parseContentPropertyStyles(currentKey, value);
         return {
-            contentPropCss: (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n          ", "\n          ", "\n        "], ["\n          ", "\n          ", "\n        "])), acc.contentPropCss, styles)
+            contentPropCss: (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n          ", "\n          ", "\n        "], ["\n          ", "\n          ", "\n        "])), acc.contentPropCss, styles)
         };
     }, {
-        contentPropCss: (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject([""], [""])))
+        contentPropCss: (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject([""], [""])))
     });
 }
 exports.parseGridContentProp = parseGridContentProp;
@@ -124,7 +130,7 @@ function parsePaginationStyleProp(_a) {
             var hoverValue = props[keyWithHover];
             return {
                 normalStyle: __assign(__assign({}, acc.normalStyle), { type: value }),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), { type: hoverValue !== null && hoverValue !== void 0 ? hoverValue : value })
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { type: hoverValue })
             };
         }
         if (customPaginationPropertyKey === 'offset') {
@@ -132,7 +138,7 @@ function parsePaginationStyleProp(_a) {
             var hoverValue = props[keyWithHover];
             return {
                 normalStyle: __assign(__assign({}, acc.normalStyle), { offset: getCustomPaginationOffset(value) }),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), { offset: getCustomPaginationOffset(hoverValue !== null && hoverValue !== void 0 ? hoverValue : value) })
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { offset: getCustomPaginationOffset(hoverValue) })
             };
         }
         if (customPaginationPropertyKey === 'size') {
@@ -140,7 +146,7 @@ function parsePaginationStyleProp(_a) {
             var hoverValue = props[keyWithHover];
             return {
                 normalStyle: __assign(__assign({}, acc.normalStyle), { size: getCustomPaginationSize(value) }),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), { size: getCustomPaginationSize(hoverValue !== null && hoverValue !== void 0 ? hoverValue : value) })
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { size: getCustomPaginationSize(hoverValue) })
             };
         }
         return {
@@ -197,10 +203,10 @@ function getCustomPaginationOffset(value) {
         case 'OUTSET3':
             return {
                 top: '0px',
-                left: '100%',
-                translateX: -100,
+                right: '0px',
+                translateX: 0,
                 translateY: -100,
-                transformOrigin: 'top left'
+                transformOrigin: 'top right'
             };
         case 'OUTSET4':
             return {
@@ -274,9 +280,9 @@ function getCustomPaginationOffset(value) {
                 translateY: 0,
                 transformOrigin: 'right top'
             };
-        case 'INSET1':
+        case 'INSET13':
             return { top: '0px', left: '0px', translateX: 0, translateY: 0, transformOrigin: 'left top' };
-        case 'INSET2':
+        case 'INSET14':
             return {
                 top: '0px',
                 left: '50%',
@@ -284,7 +290,7 @@ function getCustomPaginationOffset(value) {
                 translateY: 0,
                 transformOrigin: 'left top'
             };
-        case 'INSET3':
+        case 'INSET15':
             return {
                 top: '0px',
                 left: '100%',
@@ -292,7 +298,7 @@ function getCustomPaginationOffset(value) {
                 translateY: 0,
                 transformOrigin: 'left top'
             };
-        case 'INSET4':
+        case 'INSET16':
             return {
                 top: '50%',
                 left: '100%',
@@ -300,7 +306,7 @@ function getCustomPaginationOffset(value) {
                 translateY: -50,
                 transformOrigin: 'left top'
             };
-        case 'INSET5':
+        case 'INSET17':
             return {
                 top: '100%',
                 left: '100%',
@@ -308,7 +314,7 @@ function getCustomPaginationOffset(value) {
                 translateY: -100,
                 transformOrigin: 'left top'
             };
-        case 'INSET6':
+        case 'INSET18':
             return {
                 top: '100%',
                 left: '50%',
@@ -316,7 +322,7 @@ function getCustomPaginationOffset(value) {
                 translateY: -100,
                 transformOrigin: 'left top'
             };
-        case 'INSET7':
+        case 'INSET19':
             return {
                 top: '100%',
                 left: '0px',
@@ -324,7 +330,7 @@ function getCustomPaginationOffset(value) {
                 translateY: -100,
                 transformOrigin: 'top left'
             };
-        case 'INSET8':
+        case 'INSET20':
             return {
                 top: '50%',
                 left: '0px',
@@ -341,11 +347,11 @@ function getCustomPaginationSize(value) {
         case 'SMALL':
             return 1;
         case 'MEDIUM':
-            return 1.5;
-        case 'LARGE':
             return 2;
+        case 'LARGE':
+            return 3;
         default:
             return 1;
     }
 }
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;

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

@@ -6,7 +6,7 @@ export type CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMLINEHEIGHT_TYPE = NUMBER_INTEGER
 export type CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMHEIGHTFITCONTENT_TYPE = boolean | null;
 export type CB_STYLE_PROP_CONTENTSLIST_SPEC_INFINITESCROLL_TYPE = boolean | null;
 export type CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE_TYPE = 'NONE' | 'DESIGN1' | 'DESIGN2' | 'DESIGN3' | 'DESIGN4' | 'DESIGN5' | 'DESIGN6' | 'DESIGN7' | 'DESIGN8' | 'DESIGN9' | 'DESIGN10' | 'DESIGN11' | 'DESIGN12' | 'DESIGN13' | 'DESIGN14' | 'DESIGN15' | 'DESIGN16' | 'DESIGN17' | null;
-export type CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONLOCATION_TYPE = 'OUTSET1' | 'OUTSET2' | 'OUTSET3' | 'OUTSET4' | 'OUTSET5' | 'OUTSET6' | 'OUTSET7' | 'OUTSET8' | 'OUTSET9' | 'OUTSET10' | 'OUTSET11' | 'OUTSET12' | 'INSET1' | 'INSET2' | 'INSET3' | 'INSET4' | 'INSET5' | 'INSET6' | 'INSET7' | 'INSET8' | null;
+export type CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONLOCATION_TYPE = 'OUTSET1' | 'OUTSET2' | 'OUTSET3' | 'OUTSET4' | 'OUTSET5' | 'OUTSET6' | 'OUTSET7' | 'OUTSET8' | 'OUTSET9' | 'OUTSET10' | 'OUTSET11' | 'OUTSET12' | 'INSET13' | 'INSET14' | 'INSET15' | 'INSET16' | 'INSET17' | 'INSET18' | 'INSET19' | 'INSET20' | null;
 export type CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE_TYPE = 'SMALL' | 'MEDIUM' | 'LARGE' | null;
 export type CB_STYLE_PROP_CONTENTSLIST_SPECS_BASE = {
     CB_STYLE_PROP_CONTENTSLIST_SPEC_STYLE: CB_STYLE_PROP_CONTENTSLIST_SPEC_STYLE_TYPE;

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

@@ -57,8 +57,7 @@ function Image(props) {
     var queryContext = (0, compositionQueryContext_1.useCCBQueryPath)();
     var index = props.index, CB_CONTENT_PROP_IMAGE = props.CB_CONTENT_PROP_IMAGE, _b = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _b.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _b.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _b.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE, CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA = _b.CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
     var cLinkValue = function () {
-        if (CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE === 'DATA' ||
-            CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE === 'DELEGATEDDATA') {
+        if (CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE === 'DATA') {
             if (!(queryContext === null || queryContext === void 0 ? void 0 : queryContext.queryData)) {
                 return "ERROR: QueryData NOT FOUND";
             }
@@ -91,26 +90,19 @@ function Image(props) {
     var hasEffect = !isNoneEffectType;
     var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
     var imgSrc = function () {
-        var isDataConnected = CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_VALUETYPE === 'DATA' ||
-            CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_VALUETYPE === 'DELEGATEDDATA';
+        var isDataConnected = CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_VALUETYPE === 'DATA';
         if (!isDataConnected) {
             return CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR;
         }
         if (!(queryContext === null || queryContext === void 0 ? void 0 : queryContext.queryData)) {
-            // eslint-disable-next-line
-            console.warn('ERROR: No query data found');
-            return 'ERROR';
+            return 'ERROR: No query data found';
         }
         if (!queryContext.queryData[CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_CONNECTDATA]) {
-            // eslint-disable-next-line
-            console.warn("ERROR: ".concat(CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_CONNECTDATA, " NOT found in query data"));
-            return 'ERROR';
+            return "ERROR: ".concat(CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_CONNECTDATA, " NOT found in query data");
         }
         return queryContext.queryData[CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_CONNECTDATA];
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_ImageWrapper, __assign({ style: __assign({}, effectCssProperties) }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, layout), { overflow: 'hidden' }), boxStyle.normal), { cursor: CLINKCursor }), hoverStyle: __assign({}, boxStyle.hover), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: (0, jsx_runtime_1.jsx)(S_Image, { src: imgSrc() === 'ERROR'
-                                ? 'https://static.publ.site/pages-sample/img_cb_style_prop_bgmedia_spec_imageselector_01.png'
-                                : imgSrc(), normalStyle: __assign({}, imgStyle.normal), hoverStyle: __assign({}, imgStyle.hover) }) })) })) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_ImageWrapper, __assign({ style: __assign({}, effectCssProperties) }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, layout), { overflow: 'hidden' }), boxStyle.normal), { cursor: CLINKCursor }), hoverStyle: __assign({}, boxStyle.hover), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: (0, jsx_runtime_1.jsx)(S_Image, { src: imgSrc(), normalStyle: __assign({}, imgStyle.normal), hoverStyle: __assign({}, imgStyle.hover) }) })) })) }))] }));
 }
 function parseImageCBStyle(style, hoverStyle, mode) {
     var boxStyle = {