pds-dev-kit-web 2.2.295 → 2.2.297

package/dist/src/common/assets/icons/fill/Plugin.js

@@ -25,6 +25,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var Plugin = function (_a) {
     var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
-    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsxs)("g", __assign({ fill: "none" }, { children: [(0, jsx_runtime_1.jsx)("path", { fill: color, fillRule: "evenodd", d: "M6.7686,9.5034 C7.0246,9.5034 7.2806,9.6014 7.4756,9.7964 L14.2036,16.5244 C14.5946,16.9144 14.5946,17.5484 14.2036,17.9384 L11.8896,20.2524 C11.1086,21.0334 10.0846,21.4244 9.0616,21.4244 C8.0376,21.4244 7.0136,21.0334 6.2326,20.2524 L3.7476,17.7674 C2.1856,16.2054 2.1856,13.6724 3.7476,12.1104 L6.0616,9.7964 C6.2566,9.6014 6.5126,9.5034 6.7686,9.5034 Z M6.7686,11.9174 L5.1616,13.5244 C4.3816,14.3044 4.3816,15.5734 5.1616,16.3524 L7.6466,18.8384 C8.0246,19.2164 8.5266,19.4244 9.0616,19.4244 C9.5956,19.4244 10.0976,19.2164 10.4756,18.8384 L12.0826,17.2314 L6.7686,11.9174 Z M14.9387,2.576 C15.9627,2.576 16.9857,2.967 17.7667,3.748 L20.2527,6.233 C21.8147,7.795 21.8147,10.328 20.2527,11.89 L17.9387,14.204 C17.7437,14.399 17.4877,14.497 17.2317,14.497 C16.9757,14.497 16.7197,14.399 16.5247,14.204 L9.7967,7.476 C9.4057,7.085 9.4057,6.452 9.7967,6.062 L12.1107,3.748 C12.8917,2.967 13.9147,2.576 14.9387,2.576 Z M14.9387,4.576 C14.4047,4.576 13.9027,4.784 13.5247,5.162 L11.9177,6.769 L17.2317,12.082 L18.8377,10.476 C19.6177,9.696 19.6177,8.427 18.8377,7.647 L16.3527,5.162 C15.9747,4.784 15.4727,4.576 14.9387,4.576 Z" }), (0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeWidth: "2", d: "M5.2577,18.7423 L2.9147,21.0853 M18.7423,5.2577 L21.0853,2.9147 M10.1817,10.62 L8.7747,12.027 M13.38,13.8183 L11.973,15.2253" })] })) })));
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsxs)("g", __assign({ xmlns: "http://www.w3.org/2000/svg", fill: "none" }, { children: [(0, jsx_runtime_1.jsx)("path", { fill: color, fillRule: "evenodd", d: "M8.7675,6.2426 C9.3195,6.2426 9.7675,6.6906 9.7675,7.2426 L9.7675,16.7576 C9.7675,17.3096 9.3195,17.7576 8.7675,17.7576 L5.9955,17.7576 C4.0625,17.7576 2.4955,16.1906 2.4955,14.2576 L2.4955,9.7426 C2.4955,7.8096 4.0625,6.2426 5.9955,6.2426 Z M17.8637,6.2426 L14.8347,6.2426 C14.2827,6.2426 13.8347,6.6906 13.8347,7.2426 L13.8347,16.7576 C13.8347,17.3096 14.2827,17.7576 14.8347,17.7576 L17.8637,17.7576 C19.7967,17.7576 21.3637,16.1906 21.3637,14.2576 L21.3637,9.7426 C21.3637,7.8096 19.7967,6.2426 17.8637,6.2426 L17.8637,6.2426 Z M17.8637,8.2426 C18.6907,8.2426 19.3637,8.9156 19.3637,9.7426 L19.3637,14.2576 C19.3637,15.0846 18.6907,15.7576 17.8637,15.7576 L15.8347,15.7576 L15.8347,8.2426 L17.8637,8.2426 Z" }), (0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeWidth: "2", d: "M2.7086,12 L1.3956,12 M21.2914,12 L22.6044,12 M11.9337,9.7384 L8.9337,9.7384 M11.9337,14.2616 L8.9337,14.2616" })] })) })));
 };
 exports.default = Plugin;

package/dist/src/common/assets/icons/line/Plugin.js

@@ -25,6 +25,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var Plugin = function (_a) {
     var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
-    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsxs)("g", __assign({ fill: "none" }, { children: [(0, jsx_runtime_1.jsx)("path", { fill: color, fillRule: "evenodd", d: "M6.7686,9.5034 C7.0246,9.5034 7.2806,9.6014 7.4756,9.7964 L14.2036,16.5244 C14.5946,16.9144 14.5946,17.5484 14.2036,17.9384 L11.8896,20.2524 C11.1086,21.0334 10.0846,21.4244 9.0616,21.4244 C8.0376,21.4244 7.0136,21.0334 6.2326,20.2524 L3.7476,17.7674 C2.1856,16.2054 2.1856,13.6724 3.7476,12.1104 L6.0616,9.7964 C6.2566,9.6014 6.5126,9.5034 6.7686,9.5034 Z M6.7686,11.2104 L4.8086,13.1704 C4.3366,13.6434 4.0756,14.2704 4.0756,14.9384 C4.0756,15.6064 4.3366,16.2344 4.8086,16.7064 L7.2936,19.1914 C7.7656,19.6644 8.3936,19.9244 9.0616,19.9244 C9.7296,19.9244 10.3566,19.6644 10.8296,19.1914 L12.7896,17.2314 L6.7686,11.2104 Z M14.9386,2.576 C15.9626,2.576 16.9856,2.967 17.7666,3.748 L20.2526,6.233 C21.8146,7.795 21.8146,10.328 20.2526,11.89 L17.9386,14.204 C17.7436,14.399 17.4876,14.497 17.2316,14.497 C16.9756,14.497 16.7196,14.399 16.5246,14.204 L9.7966,7.476 C9.4056,7.085 9.4056,6.452 9.7966,6.062 L12.1106,3.748 C12.8916,2.967 13.9146,2.576 14.9386,2.576 Z M14.9386,4.076 C14.2706,4.076 13.6426,4.336 13.1706,4.808 L11.2106,6.769 L17.2316,12.79 L19.1916,10.829 C19.6636,10.357 19.9236,9.729 19.9236,9.061 C19.9236,8.394 19.6636,7.766 19.1916,7.294 L16.7066,4.808 C16.2346,4.336 15.6066,4.076 14.9386,4.076 Z" }), (0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeWidth: "1.5", d: "M5.2577,18.7423 L2.9147,21.0853 M18.7423,5.2577 L21.0853,2.9147 M10.1817,10.62 L8.7747,12.027 M13.38,13.8183 L11.973,15.2253" })] })) })));
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsxs)("g", __assign({ xmlns: "http://www.w3.org/2000/svg", fill: "none" }, { children: [(0, jsx_runtime_1.jsx)("path", { fill: color, fillRule: "evenodd", d: "M8.7675,6.2426 C9.3195,6.2426 9.7675,6.6906 9.7675,7.2426 L9.7675,16.7576 C9.7675,17.3096 9.3195,17.7576 8.7675,17.7576 L5.9955,17.7576 C4.0625,17.7576 2.4955,16.1906 2.4955,14.2576 L2.4955,9.7426 C2.4955,7.8096 4.0625,6.2426 5.9955,6.2426 Z M17.8637,6.2426 L14.8347,6.2426 C14.2827,6.2426 13.8347,6.6906 13.8347,7.2426 L13.8347,16.7576 C13.8347,17.3096 14.2827,17.7576 14.8347,17.7576 L17.8637,17.7576 C19.7967,17.7576 21.3637,16.1906 21.3637,14.2576 L21.3637,9.7426 C21.3637,7.8096 19.7967,6.2426 17.8637,6.2426 L17.8637,6.2426 Z M17.8637,7.7426 C18.9667,7.7426 19.8637,8.6396 19.8637,9.7426 L19.8637,14.2576 C19.8637,15.3606 18.9667,16.2576 17.8637,16.2576 L15.3347,16.2576 L15.3347,7.7426 L17.8637,7.7426 Z" }), (0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeWidth: "1.5", d: "M2.7086,12 L1.3956,12 M21.2914,12 L22.6044,12 M11.9337,9.7384 L8.9337,9.7384 M11.9337,14.2616 L8.9337,14.2616" })] })) })));
 };
 exports.default = Plugin;

package/dist/src/common/services/i18n/resources/en.json

@@ -106,6 +106,11 @@
         "str_reaction": "Reaction",
         "str_9806": "There are no items added yet. Please add and edit items!",
         "str_10106": "The height is adjusted\naccording to the content.",
-        "str_grid_height_variable": "Variable"
+        "str_grid_height_variable": "Variable",
+        "str_10476": "Loading data information.",
+        "str_10477": "Data value not linked",
+        "str_10478": "No data values to link.",
+        "str_paid": "Paid",
+        "str_10597": "Associated Data Value"
     }
 }

package/dist/src/common/services/i18n/resources/es.json

@@ -106,6 +106,11 @@
         "str_reaction": "Reaction",
         "str_9806": "There are no items added yet. Please add and edit items!",
         "str_10106": "The height is adjusted\naccording to the content.",
-        "str_grid_height_variable": "Variable"
+        "str_grid_height_variable": "Variable",
+        "str_10476": "Loading data information.",
+        "str_10477": "Data value not linked",
+        "str_10478": "No data values to link.",
+        "str_paid": "Paid",
+        "str_10597": "Associated Data Value"
     }
 }

package/dist/src/common/services/i18n/resources/fil.json

@@ -99,6 +99,11 @@
         "str_reaction": "Reaction",
         "str_9806": "There are no items added yet. Please add and edit items!",
         "str_10106": "The height is adjusted\naccording to the content.",
-        "str_grid_height_variable": "Variable"
+        "str_grid_height_variable": "Variable",
+        "str_10476": "Loading data information.",
+        "str_10477": "Data value not linked",
+        "str_10478": "No data values to link.",
+        "str_paid": "Paid",
+        "str_10597": "Associated Data Value"
     }
 }

package/dist/src/common/services/i18n/resources/index.d.ts

@@ -109,6 +109,11 @@ declare const locale: {
             str_9806: string;
             str_10106: string;
             str_grid_height_variable: string;
+            str_10476: string;
+            str_10477: string;
+            str_10478: string;
+            str_paid: string;
+            str_10597: string;
         };
     };
     readonly en: {
@@ -220,6 +225,11 @@ declare const locale: {
             str_9806: string;
             str_10106: string;
             str_grid_height_variable: string;
+            str_10476: string;
+            str_10477: string;
+            str_10478: string;
+            str_paid: string;
+            str_10597: string;
         };
     };
     readonly ja: {
@@ -331,6 +341,11 @@ declare const locale: {
             str_9806: string;
             str_10106: string;
             str_grid_height_variable: string;
+            str_10476: string;
+            str_10477: string;
+            str_10478: string;
+            str_paid: string;
+            str_10597: string;
         };
     };
     readonly es: {
@@ -442,6 +457,11 @@ declare const locale: {
             str_9806: string;
             str_10106: string;
             str_grid_height_variable: string;
+            str_10476: string;
+            str_10477: string;
+            str_10478: string;
+            str_paid: string;
+            str_10597: string;
         };
     };
     readonly 'zh-cn': {
@@ -553,6 +573,11 @@ declare const locale: {
             str_9806: string;
             str_10106: string;
             str_grid_height_variable: string;
+            str_10476: string;
+            str_10477: string;
+            str_10478: string;
+            str_paid: string;
+            str_10597: string;
         };
     };
     readonly 'zh-tw': {
@@ -664,6 +689,11 @@ declare const locale: {
             str_9806: string;
             str_10106: string;
             str_grid_height_variable: string;
+            str_10476: string;
+            str_10477: string;
+            str_10478: string;
+            str_paid: string;
+            str_10597: string;
         };
     };
     readonly fil: {
@@ -768,6 +798,11 @@ declare const locale: {
             str_9806: string;
             str_10106: string;
             str_grid_height_variable: string;
+            str_10476: string;
+            str_10477: string;
+            str_10478: string;
+            str_paid: string;
+            str_10597: string;
         };
     };
 };

package/dist/src/common/services/i18n/resources/ja.json

@@ -106,6 +106,11 @@
         "str_reaction": "Reaction",
         "str_9806": "There are no items added yet. Please add and edit items!",
         "str_10106": "The height is adjusted\naccording to the content.",
-        "str_grid_height_variable": "Variable"
+        "str_grid_height_variable": "Variable",
+        "str_10476": "Loading data information.",
+        "str_10477": "Data value not linked",
+        "str_10478": "No data values to link.",
+        "str_paid": "Paid",
+        "str_10597": "Associated Data Value"
     }
 }

package/dist/src/common/services/i18n/resources/ko.json

@@ -107,6 +107,11 @@
         "str_reaction": "반응",
         "str_9806": "아직 추가된 항목이 없어요. 항목을 추가하고 편집해주세요!",
         "str_10106": "내용에 따라 높이가 조절됩니다.",
-        "str_grid_height_variable": "가변"
+        "str_grid_height_variable": "가변",
+        "str_10476": "데이터 정보를 불러오는 중입니다.",
+        "str_10477": "데이터 값 연결되지 않음",
+        "str_10478": "연결할 데이터 값이 없습니다.",
+        "str_paid": "유료",
+        "str_10597": "관련 데이터 값 표시함"
     }
 }

package/dist/src/common/services/i18n/resources/zh-cn.json

@@ -106,6 +106,11 @@
         "str_reaction": "Reaction",
         "str_9806": "There are no items added yet. Please add and edit items!",
         "str_10106": "The height is adjusted\naccording to the content.",
-        "str_grid_height_variable": "Variable"
+        "str_grid_height_variable": "Variable",
+        "str_10476": "Loading data information.",
+        "str_10477": "Data value not linked",
+        "str_10478": "No data values to link.",
+        "str_paid": "Paid",
+        "str_10597": "Associated Data Value"
     }
 }

package/dist/src/common/services/i18n/resources/zh-tw.json

@@ -106,6 +106,11 @@
         "str_reaction": "Reaction",
         "str_9806": "There are no items added yet. Please add and edit items!",
         "str_10106": "The height is adjusted\naccording to the content.",
-        "str_grid_height_variable": "Variable"
+        "str_grid_height_variable": "Variable",
+        "str_10476": "Loading data information.",
+        "str_10477": "Data value not linked",
+        "str_10478": "No data values to link.",
+        "str_paid": "Paid",
+        "str_10597": "Associated Data Value"
     }
 }

package/dist/src/desktop/components/Select/Select.d.ts

@@ -4,6 +4,7 @@ import type { SelectHTMLAttributes } from 'react';
 type SelectOption = {
     text: string;
     value: SelectHTMLAttributes<HTMLSelectElement>['value'];
+    state?: 'normal' | 'disabled';
 };
 type SelectProps = {
     name?: Path<IFormValues>;

package/dist/src/desktop/components/Select/Select.js

@@ -87,7 +87,7 @@ function Select(_a) {
         }
         return 'ui_cpnt_select_icon_01';
     };
-    return ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ "x-pds-name": "Select", "x-pds-element-type": "component", "x-pds-device-type": "desktop", "$size": size, responsiveMode: responsiveMode, tabIndex: 0, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsxs)(S_SelectWrapper, { children: [(0, jsx_runtime_1.jsx)(S_Icon_Wrapper, __assign({ state: state }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() }) })), (0, jsx_runtime_1.jsxs)(S_Select, __assign({}, register, { disabled: state === 'disabled' || state === 'read_only', state: state, isError: isError, "$size": size, colorTheme: colorTheme, onChange: handleChange, onBlur: handleBlur, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b : '', value: value || undefined }, { children: [hintText && ((0, jsx_runtime_1.jsx)("option", __assign({ disabled: true, value: "" }, { children: hintText }))), valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)("option", __assign({ value: el.value }, { children: el.text }), el.value)); })] }))] }), name &&
+    return ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ "x-pds-name": "Select", "x-pds-element-type": "component", "x-pds-device-type": "desktop", "$size": size, responsiveMode: responsiveMode, tabIndex: 0, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsxs)(S_SelectWrapper, { children: [(0, jsx_runtime_1.jsx)(S_Icon_Wrapper, __assign({ state: state }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() }) })), (0, jsx_runtime_1.jsxs)(S_Select, __assign({}, register, { disabled: state === 'disabled' || state === 'read_only', state: state, isError: isError, "$size": size, colorTheme: colorTheme, onChange: handleChange, onBlur: handleBlur, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b : '', value: value || undefined }, { children: [hintText && ((0, jsx_runtime_1.jsx)("option", __assign({ disabled: true, value: "" }, { children: hintText }))), valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)("option", __assign({ value: el.value, disabled: el.state === 'disabled' }, { children: el.text }), el.value)); })] }))] }), name &&
                 ((_c = (0, types_1.getErrorByName)(formContext.formState.errors, name)) === null || _c === void 0 ? void 0 : _c.message) &&
                 state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, __assign({ colorTheme: colorTheme }, { children: (0, types_1.getErrorByName)(formContext.formState.errors, name).message })))] })));
 }

package/dist/src/mobile/components/Select/Select.d.ts

@@ -4,6 +4,7 @@ import type { SelectHTMLAttributes } from 'react';
 type SelectOption = {
     text: string;
     value: SelectHTMLAttributes<HTMLSelectElement>['value'];
+    state?: 'normal' | 'disabled';
 };
 type SelectProps = {
     name?: Path<IFormValues>;

package/dist/src/mobile/components/Select/Select.js

@@ -87,7 +87,7 @@ function Select(_a) {
         }
         return 'ui_cpnt_select_icon_01';
     };
-    return ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ "x-pds-name": "Select", "x-pds-element-type": "component", "x-pds-device-type": "mobile", "$size": size, responsiveMode: responsiveMode, tabIndex: 0, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsxs)(S_SelectWrapper, { children: [(0, jsx_runtime_1.jsx)(S_Icon_Wrapper, __assign({ state: state }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() }) })), (0, jsx_runtime_1.jsxs)(S_Select, __assign({}, register, { disabled: state === 'disabled' || state === 'read_only', state: state, isError: isError, "$size": size, colorTheme: colorTheme, onChange: handleChange, onBlur: handleBlur, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b : '', value: value || undefined }, { children: [hintText && ((0, jsx_runtime_1.jsx)("option", __assign({ disabled: true, value: "" }, { children: hintText }))), valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)("option", __assign({ value: el.value }, { children: el.text }), el.value)); })] }))] }), name &&
+    return ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ "x-pds-name": "Select", "x-pds-element-type": "component", "x-pds-device-type": "mobile", "$size": size, responsiveMode: responsiveMode, tabIndex: 0, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsxs)(S_SelectWrapper, { children: [(0, jsx_runtime_1.jsx)(S_Icon_Wrapper, __assign({ state: state }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() }) })), (0, jsx_runtime_1.jsxs)(S_Select, __assign({}, register, { disabled: state === 'disabled' || state === 'read_only', state: state, isError: isError, "$size": size, colorTheme: colorTheme, onChange: handleChange, onBlur: handleBlur, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b : '', value: value || undefined }, { children: [hintText && ((0, jsx_runtime_1.jsx)("option", __assign({ disabled: true, value: "" }, { children: hintText }))), valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)("option", __assign({ value: el.value, disabled: el.state === 'disabled' }, { children: el.text }), el.value)); })] }))] }), name &&
                 ((_c = (0, types_1.getErrorByName)(formContext.formState.errors, name)) === null || _c === void 0 ? void 0 : _c.message) &&
                 state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, __assign({ colorTheme: colorTheme }, { children: (0, types_1.getErrorByName)(formContext.formState.errors, name).message })))] })));
 }

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

@@ -75,8 +75,6 @@ var Responsive = (0, publ_echo_1.WidthProvider)(publ_echo_1.ResponsiveGridEditor
 var CompositionEditor = (0, react_1.forwardRef)(function CompositionEditorCanvas(props, ref) {
     var _a, _b, _c, _d;
     var _e = props.editorProps, device = _e.device, shortcutKeyMode = _e.shortcutKeyMode, placementRestriction = _e.placementRestriction, compositionActionHandler = _e.compositionActionHandler;
-    // const GLE_MIN_WIDTH_DESKTOP_PX = `${GRID_CELL_MIN * cols}px`;
-    // const GLE_MIN_WIDTH_MOBILE_PX = `${GRID_CELL_MIN * rows}px`;
     var editingSectionId = props.compositionData.id;
     var mode = 'EDIT';
     var _f = props.compositionData, componentBlocks = _f.componentBlocks, jsonProperties = _f.jsonProperties;

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

@@ -119,9 +119,9 @@ var Composition = (0, react_1.forwardRef)(function CustomSection(props) {
     var customSectionStyles = {
         minHeight: "".concat(minHeight, "px"),
         maxHeight: "".concat(maxHeight, "px"),
-        width: "100%",
+        width: mode === 'EDIT' ? "".concat(Math.max(canvasWidth, minWidth !== null && minWidth !== void 0 ? minWidth : 0), "px") : '100%',
         maxWidth: maxWidth ? "".concat(maxWidth, "px") : '100%',
-        minWidth: "".concat(Math.max(canvasWidth, minWidth !== null && minWidth !== void 0 ? minWidth : 0), "px")
+        minWidth: minWidth ? "".concat(minWidth, "px") : '0px'
     };
     var onClickSection = function () {
         if (!isEditMode) {
@@ -152,20 +152,19 @@ var Composition = (0, react_1.forwardRef)(function CustomSection(props) {
                         width: '100%',
                         height: '100%'
                     } }, { children: (0, jsx_runtime_1.jsx)(CompositionBackground_1.default, __assign({}, props, { isMobile: isMobile, overrideStyles: {
-                            // minHeight: customSectionStyles.minHeight,
                             paddingTop: padding.top,
                             paddingBottom: padding.bottom,
                             paddingRight: padding.right,
                             paddingLeft: padding.left,
-                            width: '100%',
-                            height: HEIGHT_AUTO_CODES.includes(ccbCode) ? 'auto' : '100%'
-                        } }, { children: (0, jsx_runtime_1.jsx)(GridContainer, __assign({ className: "composition-container", "data-cols": cols, "data-rows": rows, "data-row-height": rowHeight, "data-col-width": "10px", ref: containerRef, cols: cols, rowHeight: rowHeight, sectionRow: rows, "data-wrapper-paddingT": padding.top, "data-wrapper-paddingB": padding.bottom, "data-wrapper-paddingL": padding.left, "data-wrapper-paddingR": padding.right, style: {
-                                width: customSectionStyles.width,
-                                maxWidth: customSectionStyles.maxWidth
-                            } }, { children: pedigree.children.map(function (child) { return ((0, jsx_runtime_1.jsx)(groupUtils_1.default, { block: child, rowHeight: rowHeight, layoutItems: layouts[device === 'DESKTOP' ? 'lg' : 'sm'], cbs: props.componentBlocks, device: device, selectedRows: [], isEditMode: false }, child.blockId)); }) })) })) })) })) })) }));
+                            width: customSectionStyles.width,
+                            height: ccbCode === types_1.CB_ALL_CODES.CB_CONTENTSCAROUSEL ? 'auto' : '100%',
+                            maxHeight: customSectionStyles.maxHeight,
+                            minHeight: customSectionStyles.minHeight,
+                            maxWidth: customSectionStyles.maxWidth,
+                            minWidth: customSectionStyles.minWidth
+                        } }, { children: (0, jsx_runtime_1.jsx)(GridContainer, __assign({ className: "composition-container", "data-cols": cols, "data-rows": rows, "data-row-height": rowHeight, "data-col-width": "10px", ref: containerRef, cols: cols, rowHeight: rowHeight, sectionRow: rows, "data-wrapper-paddingT": padding.top, "data-wrapper-paddingB": padding.bottom, "data-wrapper-paddingL": padding.left, "data-wrapper-paddingR": padding.right }, { children: pedigree.children.map(function (child) { return ((0, jsx_runtime_1.jsx)(groupUtils_1.default, { block: child, rowHeight: rowHeight, layoutItems: layouts[device === 'DESKTOP' ? 'lg' : 'sm'], cbs: props.componentBlocks, device: device, selectedRows: [], isEditMode: false }, child.blockId)); }) })) })) })) })) })) }));
 });
 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 S_COMPOSITIONWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-var HEIGHT_AUTO_CODES = [types_1.CB_ALL_CODES.CB_CONTENTSCAROUSEL, types_1.CB_ALL_CODES.CB_LIST];
 exports.default = react_1.default.memo(Composition);
 var templateObject_1, templateObject_2;

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

@@ -2,11 +2,12 @@
 import type { ComponentBlock } from '../sections/CustomSection/types';
 import type { CB_VALUE_TYPE, CCB_VALUE_TYPE } from '../sections/CustomSection/util/types';
 import type { IComposition, QueryData } from '../../DynamicLayout/types';
-export declare function createCompositions({ valueType, queryPath, queryData, compositions, limit, componentBlockCode }: {
+export declare function createCompositions({ valueType, queryPath, queryData, compositions, limit, componentBlockCode, device }: {
     valueType: CCB_VALUE_TYPE | CB_VALUE_TYPE;
     queryPath: string;
     queryData: QueryData | undefined;
     compositions: IComposition[];
     limit: number;
     componentBlockCode: ComponentBlock['componentBlockCode'];
+    device: 'MOBILE' | 'DESKTOP';
 }): JSX.Element[];

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

@@ -1,8 +1,4 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -20,63 +16,27 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createCompositions = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-require("react");
-var react_i18next_1 = require("react-i18next");
-var styled_components_1 = __importDefault(require("styled-components"));
 var compositionQueryContext_1 = require("../compositionQueryContext");
+var dynamicLayoutContext_1 = require("../dynamicLayoutContext");
 var Composition_1 = __importDefault(require("./Composition"));
 function createCompositions(_a) {
-    var valueType = _a.valueType, queryPath = _a.queryPath, queryData = _a.queryData, compositions = _a.compositions, limit = _a.limit, componentBlockCode = _a.componentBlockCode;
+    var valueType = _a.valueType, queryPath = _a.queryPath, queryData = _a.queryData, compositions = _a.compositions, limit = _a.limit, componentBlockCode = _a.componentBlockCode, device = _a.device;
     var isQueryDataConnected = valueType === 'DATA' || valueType === 'DELEGATEDDATA';
     // 직접 입력 유형인 경우
     if (!isQueryDataConnected) {
-        var valueTypeCompositions = compositions.filter(function (composition) { return !(composition === null || composition === void 0 ? void 0 : composition.isDefault); });
-        // MANUAL ITEM이 없는 경우
-        if (!valueTypeCompositions.length) {
-            return [(0, jsx_runtime_1.jsx)(EmptyString, {}, "empty-manual-item")];
-        }
-        return valueTypeCompositions.map(function (composition) { return ((0, jsx_runtime_1.jsx)(Composition_1.default, __assign({}, composition, { ccbCode: componentBlockCode }), composition.id)); });
-    }
-    if (!compositions.length) {
-        return [(0, jsx_runtime_1.jsx)("div", { children: "EMPTY TEXT" }, "empty")];
-    }
-    // 데이터 연결 유형이나, 쿼리 데이터나 키가 없는 경우
-    if (queryPath === 'NONE' || !queryPath || !queryData) {
-        return [(0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: "\uC544\uC9C1 \uC5F0\uACB0\uB41C \uCFFC\uB9AC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }, "no-query")];
+        var valueTypeCompositions = compositions.filter(function (composition) { return !!(composition === null || composition === void 0 ? void 0 : composition.ccbManualItemUuid); });
+        return valueTypeCompositions.map(function (composition) { return ((0, jsx_runtime_1.jsx)(dynamicLayoutContext_1.dynamicLayoutContext.Provider, __assign({ value: {
+                mode: 'PREVIEW',
+                device: device
+            } }, { children: (0, jsx_runtime_1.jsx)(Composition_1.default, __assign({}, composition, { ccbCode: componentBlockCode }), composition.id) }), composition.id)); });
     }
-    var parsedQueryPath = removeFirstSegment(queryPath);
-    var queryDataValue = queryData[parsedQueryPath];
-    var queryComposition = compositions.find(function (composition) { return composition.isDefault; });
-    // 쿼리 데이터와 키가 있으나, 쿼리 데이터에 해당 키가 없는 경우
-    if (!queryDataValue) {
-        return [(0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: "\uC5F0\uACB0\uB41C \uB370\uC774\uD130\uB97C \uCC3E\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4." }, "not-found")];
-    }
-    // 쿼리 데이터와 키가 있으나, 쿼리 데이터에 결과가 빈 경우
-    if (!queryDataValue.length) {
-        return [(0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: "\uC544\uC9C1 \uBCF4\uC5EC\uC904 \uCF58\uD150\uCE20\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }, "empty-item")];
-    }
-    return queryDataValue.slice(0, limit).map(function (query, index) { return ((0, jsx_runtime_1.jsx)(compositionQueryContext_1.CCBQueryPathContext.Provider, __assign({ value: { queryData: query } }, { children: (0, jsx_runtime_1.jsx)(Composition_1.default, __assign({}, queryComposition, { ccbCode: componentBlockCode })) }), index)); });
+    var queryDataValue = queryData === null || queryData === void 0 ? void 0 : queryData[queryPath];
+    var queryComposition = compositions.find(function (composition) { return !composition.ccbManualItemUuid; });
+    if (!queryDataValue)
+        return [(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})];
+    return queryDataValue.slice(0, limit).map(function (query, index) { return ((0, jsx_runtime_1.jsx)(compositionQueryContext_1.CCBQueryPathContext.Provider, __assign({ value: { queryData: query } }, { children: (0, jsx_runtime_1.jsx)(dynamicLayoutContext_1.dynamicLayoutContext.Provider, __assign({ value: {
+                mode: 'PREVIEW',
+                device: device
+            } }, { children: (0, jsx_runtime_1.jsx)(Composition_1.default, __assign({}, queryComposition, { ccbCode: componentBlockCode })) })) }), index)); });
 }
 exports.createCompositions = createCompositions;
-function removeFirstSegment(path) {
-    var segments = path.split('/');
-    return segments.slice(1).join('/');
-}
-function EmptyString() {
-    var t = (0, react_i18next_1.useTranslation)('translation').t;
-    return (0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: t('str_9806') });
-}
-var S_EmptyLayer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: rgba(0, 0, 0, 0.6);\n  color: white;\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  padding: ", ";\n  text-align: center;\n  word-break: keep-all;\n"], ["\n  background-color: rgba(0, 0, 0, 0.6);\n  color: white;\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  padding: ", ";\n  text-align: center;\n  word-break: keep-all;\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;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingE;
-});
-var templateObject_1;