pds-dev-kit-web-test 2.7.252 → 2.7.254

package/dist/src/sub/DynamicLayout/CompositionRenderer/Composition.js

@@ -225,7 +225,7 @@ var Composition = (0, react_1.forwardRef)(function CustomSection(props, ref) {
                                 // fontSize: `${baseFontSize}px`
                             } }, { children: (_e = props.componentBlocks) === null || _e === void 0 ? void 0 : _e.map(function (cb, index) {
                                 var _a;
-                                return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(FlexGridItemForCCB_1.default, { cb: cb, index: index, device: device, rowHeight: rowHeight, zIndex: (_a = zOrders === null || zOrders === void 0 ? void 0 : zOrders[device === 'DESKTOP' ? 'desktop' : 'mobile'][cb.id]) !== null && _a !== void 0 ? _a : 0 }) }, cb.id));
+                                return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(FlexGridItemForCCB_1.default, { cb: cb, index: index, device: device, rowHeight: rowHeight, zIndex: (_a = zOrders === null || zOrders === void 0 ? void 0 : zOrders[device === 'DESKTOP' ? 'desktop' : 'mobile'][cb.id]) !== null && _a !== void 0 ? _a : 0, maxCols: cols }) }, cb.id));
                             }) })) })) })) })) })) }));
 });
 var MOCK_BORDER = {
@@ -285,7 +285,7 @@ var MOCK_SHADOW = {
     'CB_STYLE_PROP_SHADOW_SPEC_Y:MOBILE': null,
     'CB_STYLE_PROP_SHADOW_SPEC_Y:MOBILE:HOVER': null
 };
-var GridContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  /* grid-auto-rows: minmax(", ", auto); */\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: repeat(\n    ", ",\n    minmax(", ", auto)\n  );\n  height: 100%;\n  padding: 10px 10px;\n  width: 100%;\n\n  * {\n    box-sizing: border-box;\n  }\n"], ["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  /* grid-auto-rows: minmax(", ", auto); */\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: repeat(\n    ", ",\n    minmax(", ", auto)\n  );\n  height: 100%;\n  padding: 10px 10px;\n  width: 100%;\n\n  * {\n    box-sizing: border-box;\n  }\n"])), function (props) { return "".concat(props.rowHeight, "px"); }, function (props) { return props.cols; }, function (props) { return props.sectionRow; }, function (props) { return "".concat(props.rowHeight, "px"); });
+var GridContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: repeat(\n    ", ",\n    minmax(", ", auto)\n  );\n  height: 100%;\n  padding: 10px 10px;\n  width: 100%;\n\n  * {\n    box-sizing: border-box;\n  }\n"], ["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: repeat(\n    ", ",\n    minmax(", ", auto)\n  );\n  height: 100%;\n  padding: 10px 10px;\n  width: 100%;\n\n  * {\n    box-sizing: border-box;\n  }\n"])), function (props) { return props.cols; }, function (props) { return props.sectionRow; }, function (props) { return "".concat(props.rowHeight, "px"); });
 var S_COMPOSITIONWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
 exports.default = react_1.default.memo(Composition);
 function getDefensiveFontSize(device, width) {

package/dist/src/sub/DynamicLayout/CompositionRenderer/FlexGridItemForCCB.d.ts

@@ -7,8 +7,8 @@ type Props = {
     device: Device;
     rowHeight: number;
     zIndex: number;
-    showPinned?: boolean;
+    maxCols: number;
     style?: React.CSSProperties;
 };
-declare function FlexGridItem({ cb, index, device, rowHeight, zIndex, showPinned, style }: Props): JSX.Element;
+declare function FlexGridItem({ cb, index, device, rowHeight, zIndex, style, maxCols }: Props): JSX.Element;
 export default FlexGridItem;

package/dist/src/sub/DynamicLayout/CompositionRenderer/FlexGridItemForCCB.js

@@ -19,20 +19,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
+require("react");
 var styled_components_1 = __importDefault(require("styled-components"));
 var ComponentBlockMatcher_1 = __importDefault(require("./ComponentBlockMatcher"));
 var gap = 10;
 function FlexGridItem(_a) {
-    var cb = _a.cb, index = _a.index, device = _a.device, rowHeight = _a.rowHeight, zIndex = _a.zIndex, showPinned = _a.showPinned, style = _a.style;
+    var cb = _a.cb, index = _a.index, device = _a.device, rowHeight = _a.rowHeight, zIndex = _a.zIndex, style = _a.style, maxCols = _a.maxCols;
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     var defaultHeight = getMaxHeight(cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, device, rowHeight);
-    var gridArea = getGridAreaFromCB(cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, device);
-    var _b = (0, react_1.useState)(false), isPinned = _b[0], setIsPinned = _b[1];
-    return ((0, jsx_runtime_1.jsxs)(GridItem, __assign({ style: __assign({ zIndex: zIndex, gridArea: gridArea, position: 'relative', maxHeight: isPinned ? defaultHeight : 'none' }, style) }, { children: [showPinned && ((0, jsx_runtime_1.jsx)(S_Pinned, { children: isPinned ? ((0, jsx_runtime_1.jsx)("button", __assign({ type: "button", onClick: function () { return setIsPinned(false); } }, { children: "H\uACE0\uC815\uB428 \uD83D\uDCCC" }))) : ((0, jsx_runtime_1.jsx)("button", __assign({ type: "button", onClick: function () { return setIsPinned(true); } }, { children: "H\uB298\uC5B4\uB0A8 \uD83E\uDEB1" }))) })), (0, jsx_runtime_1.jsx)(ComponentBlockMatcher_1.default, { rowHeight: rowHeight, cbProps: cb, device: device, index: index })] })));
+    var gridArea = getGridAreaFromCB(cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, device, maxCols);
+    return ((0, jsx_runtime_1.jsx)(GridItem, __assign({ style: __assign({ zIndex: zIndex, gridArea: gridArea, position: 'relative', maxHeight: 'none' }, style) }, { children: (0, jsx_runtime_1.jsx)(ComponentBlockMatcher_1.default, { rowHeight: rowHeight, cbProps: cb, device: device, index: index }) })));
 }
-var S_Pinned = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  pointer-events: auto;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 9999999;\n"], ["\n  pointer-events: auto;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 9999999;\n"])));
-var GridItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: auto;\n  word-break: break-word;\n"], ["\n  height: auto;\n  word-break: break-word;\n"])));
+var GridItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: auto;\n  word-break: break-word;\n"], ["\n  height: auto;\n  word-break: break-word;\n"])));
 function getMaxHeight(props, device, rowHeight) {
     if (device === 'DESKTOP') {
         var CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS = props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS;
@@ -44,7 +42,7 @@ function getMaxHeight(props, device, rowHeight) {
     var height = rowsMobile * rowHeight + (rowsMobile - 1) * gap;
     return height;
 }
-function getGridAreaFromCB(props, device) {
+function getGridAreaFromCB(props, device, maxCols) {
     var CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX = props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX, CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY = props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY, cols = props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS, rows = props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS;
     if (device === 'DESKTOP') {
         var colStart_1 = CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX + 1;
@@ -52,7 +50,7 @@ function getGridAreaFromCB(props, device) {
         var rowEnd_1 = rows + rowStart_1;
         var colEnd_1 = cols + colStart_1;
         // <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>;
-        return "".concat(rowStart_1, " / ").concat(colStart_1, " / ").concat(rowEnd_1, " / ").concat(colEnd_1);
+        return "".concat(rowStart_1, " / ").concat(colStart_1, " / ").concat(rowEnd_1, " / ").concat(Math.min(colEnd_1, maxCols));
     }
     var startXMobile = props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX:MOBILE'];
     var startYMobile = props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY:MOBILE'];
@@ -62,7 +60,7 @@ function getGridAreaFromCB(props, device) {
     var rowStart = startYMobile + 1;
     var rowEnd = rowsMobile + rowStart;
     var colEnd = colsMobile + colStart;
-    return "".concat(rowStart, " / ").concat(colStart, " / ").concat(rowEnd, " / ").concat(colEnd);
+    return "".concat(rowStart, " / ").concat(colStart, " / ").concat(rowEnd, " / ").concat(Math.min(colEnd, maxCols));
 }
 exports.default = FlexGridItem;
-var templateObject_1, templateObject_2;
+var templateObject_1;

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

@@ -3261,7 +3261,7 @@ exports.SAMPLE_LIST_CB = {
                             },
                             CB_PLACEMENT_PROP_PLACEMENT: {
                                 CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS: 2,
-                                'CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE': 8,
+                                'CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE': 12,
                                 CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS: 2,
                                 'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE': 5,
                                 CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX: 0,
@@ -5325,12 +5325,14 @@ exports.SAMPLE_LIST_CB = {
         currentVersion: '2025-01-10',
         data: {
             CB_CONTENT_PROP_CONTENTSLIST: {
-                CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS: 1,
+                CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS: 2,
+                CB_CONTENT_PROP_CONTENTSLIST_SPEC_MCOLUMNS: 1,
                 CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA: 'NONE',
                 CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATAFILTER: 'NONE',
                 CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATAOFFSET: 0,
                 CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATASORTING: 'PAPPQUERY_SORTING_ITEM_TITLE_ASC',
                 CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS: 1,
+                CB_CONTENT_PROP_CONTENTSLIST_SPEC_MDISPLAYCOUNTS: 1,
                 CB_CONTENT_PROP_CONTENTSLIST_SPEC_EDITCOMMONITEM: null,
                 CB_CONTENT_PROP_CONTENTSLIST_SPEC_ITEMCOUNTS: 1,
                 CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS: [

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

@@ -69,6 +69,10 @@ function ContentsList(props) {
     var _j = (0, react_1.useState)(1), currentPage = _j[0], setCurrentPage = _j[1];
     var parsedQueryPath = removeFirstSegment(CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA);
     var queryDataValue = queryData === null || queryData === void 0 ? void 0 : queryData[parsedQueryPath];
+    // list의 minheight / minwidth를 계산
+    var numberOfColumns = device === 'DESKTOP'
+        ? CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS
+        : CB_CONTENT_PROP_CONTENTSLIST_SPEC_MCOLUMNS;
     var displayCounts = device === 'DESKTOP'
         ? CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS
         : CB_CONTENT_PROP_CONTENTSLIST_SPEC_MDISPLAYCOUNTS !== null && CB_CONTENT_PROP_CONTENTSLIST_SPEC_MDISPLAYCOUNTS !== void 0 ? CB_CONTENT_PROP_CONTENTSLIST_SPEC_MDISPLAYCOUNTS : CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length;
@@ -78,7 +82,8 @@ function ContentsList(props) {
     var CB_STYLE_PROP_CONTENTSLIST = __assign(__assign({}, CB_STYLE_PROP_CONTENTSLISTDESIGN), CB_STYLE_PROP_CONTENTSLISTPAGINATION);
     var _k = (0, util_1.parseProperties)(props, device), style = _k.style, hoverStyle = _k.hoverStyle, layout = _k.layout, effect = _k.effect, overlayStyle = _k.overlayStyle;
     var contentPropCss = (0, contentsListUtils_1.parseGridContentProp)({
-        props: CB_CONTENT_PROP_CONTENTSLIST
+        props: CB_CONTENT_PROP_CONTENTSLIST,
+        device: device
     }).contentPropCss;
     var _l = (0, contentsListUtils_1.parseGridStyleProp)({
         props: CB_STYLE_PROP_CONTENTSLIST,
@@ -106,13 +111,8 @@ function ContentsList(props) {
     var handlePageClick = function (page) {
         setCurrentPage(page);
     };
-    // CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS ?? CB_CONTENT_PROP_CONTENTSLIST_SPEC_ITEMCOUNTS;
     var startIndex = (currentPage - 1) * displayCounts;
     var endIndex = startIndex + (displayCounts - 1);
-    // list의 minheight / minwidth를 계산
-    var numberOfColumns = device === 'DESKTOP'
-        ? CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS
-        : CB_CONTENT_PROP_CONTENTSLIST_SPEC_MCOLUMNS;
     // NOTE: edit환경에서 hover가 작동하지 않아서 제외함 필요시 추가..
     var columnGapEnum = device === 'DESKTOP'
         ? CB_STYLE_PROP_CONTENTSLIST.CB_STYLE_PROP_CONTENTSLISTDESIGN_SPEC_ITEMSPACING

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

@@ -8,6 +8,7 @@ type ParseContentsListStyleToCarouselCoreProps = {
 };
 type ParseContentsListContentToCarouselCoreProps = {
     props: CB_CONTENT_PROP_CONTENTSLIST;
+    device: Device;
 };
 type ParseContentsListStyleToCustomPaginationProps = {
     props: CB_STYLE_PROP_CONTENTSLIST_SPECS;
@@ -18,7 +19,7 @@ export declare function parseGridStyleProp({ props, device }: ParseContentsListS
     stylePropCss: CssFragment;
     hoverStylePropCss: CssFragment;
 };
-export declare function parseGridContentProp({ props }: ParseContentsListContentToCarouselCoreProps): {
+export declare function parseGridContentProp({ props, device }: ParseContentsListContentToCarouselCoreProps): {
     contentPropCss: CssFragment;
 };
 export declare function parsePaginationStyleProp({ props, device }: ParseContentsListStyleToCustomPaginationProps): {

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

@@ -42,10 +42,18 @@ function parseStylePropertyStyles(key, value) {
 function getColumnsPropStyleValues(value, rows) {
     return (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    grid-template-columns: repeat(", ", 1fr);\n    grid-template-rows: repeat(", ", 1fr);\n  "], ["\n    grid-template-columns: repeat(", ", 1fr);\n    grid-template-rows: repeat(", ", 1fr);\n  "])), value, rows);
 }
-function parseContentPropertyStyles(key, value, rows) {
-    switch (key) {
-        case 'CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS':
-            return getColumnsPropStyleValues(value, rows);
+function parseContentPropertyStyles(key, value, rows, device) {
+    if (device === 'DESKTOP') {
+        switch (key) {
+            case 'CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS':
+                return getColumnsPropStyleValues(value, rows);
+        }
+    }
+    if (device === 'MOBILE') {
+        switch (key) {
+            case 'CB_CONTENT_PROP_CONTENTSLIST_SPEC_MCOLUMNS':
+                return getColumnsPropStyleValues(value, rows);
+        }
     }
     return undefined;
 }
@@ -70,16 +78,19 @@ function parseGridStyleProp(_a) {
 }
 exports.parseGridStyleProp = parseGridStyleProp;
 function parseGridContentProp(_a) {
-    var props = _a.props;
+    var props = _a.props, device = _a.device;
     var availableSpecCodes = Object.keys(props).filter(function (key) { return !key.includes(':HOVER') && !key.includes(':MOBILE'); });
     var displayCounts = props.CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS ||
         props.CB_CONTENT_PROP_CONTENTSLIST_SPEC_ITEMCOUNTS ||
         1;
-    var columns = Math.min(props.CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS, displayCounts);
+    var columnsByDevice = device === 'DESKTOP'
+        ? props.CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS
+        : props.CB_CONTENT_PROP_CONTENTSLIST_SPEC_MCOLUMNS;
+    var columns = Math.min(columnsByDevice, displayCounts);
     var rows = Math.ceil(displayCounts / columns);
     return availableSpecCodes.reduce(function (acc, currentKey) {
         var value = props[currentKey];
-        var styles = parseContentPropertyStyles(currentKey, value, rows);
+        var styles = parseContentPropertyStyles(currentKey, value, rows, device);
         return {
             contentPropCss: (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n          ", "\n          ", "\n        "], ["\n          ", "\n          ", "\n        "])), acc.contentPropCss, styles)
         };

package/package.json

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