pds-dev-kit-web-test 2.5.442 → 2.5.444

package/dist/src/desktop/components/Calendar/calendarUtils.js

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toUTC = exports.getHeaderText = exports.calculateDateRange = exports.calculateIsAllDay = void 0;
+var dateHelper_1 = require("../../../common/utils/dateHelper");
+/**
+ * 일정이 종일 일정인지 확인하는 함수
+ * @param startDate 시작 날짜
+ * @param endDate 종료 날짜
+ * @returns 종일 일정 여부
+ */
+var calculateIsAllDay = function (startDate, endDate) {
+    // 시작 시간이 00:00:00이고 종료 시간이 23:59:59인 경우를 체크
+    var isStartAtMidnight = startDate.getHours() === 0 && startDate.getMinutes() === 0 && startDate.getSeconds() === 0;
+    var isEndAtEndOfDay = endDate.getHours() === 23 && endDate.getMinutes() === 59 && endDate.getSeconds() === 59;
+    // 시작 시간이 00:00:00이고 종료 시간이 23:59:59인 경우를 전체일로 간주
+    return isStartAtMidnight && isEndAtEndOfDay;
+};
+exports.calculateIsAllDay = calculateIsAllDay;
+var calculateDateRange = function (viewType, baseDate) {
+    switch (viewType) {
+        case 'DAILY':
+            return { startDate: baseDate, endDate: baseDate };
+        case 'WEEKLY': {
+            var start = new Date(baseDate);
+            start.setDate(baseDate.getDate() - baseDate.getDay());
+            var end = new Date(start);
+            end.setDate(start.getDate() + 6);
+            return { startDate: start, endDate: end };
+        }
+        case 'MONTHLY': {
+            var startDate = new Date(baseDate.getFullYear(), baseDate.getMonth(), 1);
+            // 실제 MonthlyView에서 보여지는 날짜 배열을 구함
+            var days = dateHelper_1.DateHelper.getCalendarDatesForCalendar(startDate, 'sunday');
+            return {
+                startDate: days[0],
+                endDate: days[days.length - 1]
+            };
+        }
+        case 'YEARLY':
+            return {
+                startDate: new Date(baseDate.getFullYear(), 0, 1),
+                endDate: new Date(baseDate.getFullYear(), 11, 31)
+            };
+        default:
+            return { startDate: baseDate, endDate: baseDate };
+    }
+};
+exports.calculateDateRange = calculateDateRange;
+var getWeekRange = function (date) {
+    var start = new Date(date);
+    start.setDate(date.getDate() - date.getDay());
+    var end = new Date(start);
+    end.setDate(start.getDate() + 6);
+    return [start, end];
+};
+/**
+ * 뷰 타입에 따른 헤더 텍스트를 반환하는 함수
+ * @param viewType 캘린더 뷰 타입 (DAILY, WEEKLY, MONTHLY, YEARLY)
+ * @param selectedDate 선택된 날짜
+ * @param t 다국어 변환 함수 (i18next)
+ * @param monthNames 월 이름 배열 (예: ['1월', '2월', ...])
+ * @param getDayTextByDate 날짜에 따른 요일 텍스트 반환 함수
+ * @returns 헤더에 표시할 텍스트
+ */
+var getHeaderText = function (viewType, selectedDate, t, monthNames, getDayTextByDate) {
+    var year = selectedDate.getFullYear();
+    var month = monthNames[selectedDate.getMonth()];
+    var day = selectedDate.getDate();
+    var dayText = getDayTextByDate(selectedDate);
+    if (viewType === 'DAILY') {
+        return t('calendar_header_daily', { year: year, month: month, day: day, dayText: dayText });
+    }
+    if (viewType === 'WEEKLY') {
+        var _a = getWeekRange(selectedDate), weekStart = _a[0], weekEnd = _a[1];
+        var startDay = weekStart.getDate();
+        var endDay = weekEnd.getDate();
+        var startMonth = monthNames[weekStart.getMonth()];
+        var endMonth = monthNames[weekEnd.getMonth()];
+        if (weekStart.getMonth() === weekEnd.getMonth()) {
+            return t('calendar_header_weekly_same_month', {
+                month: startMonth,
+                startDay: startDay,
+                endDay: endDay
+            });
+        }
+        return t('calendar_header_weekly_diff_month', {
+            startMonth: startMonth,
+            startDay: startDay,
+            endMonth: endMonth,
+            endDay: endDay
+        });
+    }
+    if (viewType === 'MONTHLY') {
+        return t('calendar_header_monthly', { year: year, month: month });
+    }
+    if (viewType === 'YEARLY') {
+        return year.toString();
+    }
+    return '';
+};
+exports.getHeaderText = getHeaderText;
+// Date를 UTC 시간으로 변환
+var toUTC = function (date) {
+    if (!(date instanceof Date))
+        return null;
+    return date.toISOString();
+};
+exports.toUTC = toUTC;

package/dist/src/desktop/components/Calendar/constants.d.ts

@@ -0,0 +1 @@
+export declare const getLocaleFromLang: (lang: string) => string;

package/dist/src/desktop/components/Calendar/constants.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLocaleFromLang = void 0;
+// Map language codes to locales for toLocaleString
+var getLocaleFromLang = function (lang) {
+    switch (lang.toLowerCase()) {
+        case 'ko':
+        case 'ko-kr':
+            return 'ko-KR';
+        case 'ja':
+        case 'ja-jp':
+            return 'ja-JP';
+        case 'zh':
+        case 'zh-cn':
+            return 'zh-CN';
+        case 'zh-tw':
+            return 'zh-TW';
+        case 'zh-hk':
+            return 'zh-HK';
+        case 'fil':
+            return 'fil-PH';
+        case 'es':
+        case 'es-es':
+            return 'es-ES';
+        case 'en':
+        case 'en-us':
+        default:
+            return 'en-US';
+    }
+};
+exports.getLocaleFromLang = getLocaleFromLang;

package/dist/src/desktop/components/Calendar/index.d.ts

@@ -0,0 +1,10 @@
+export { default as Calendar } from './Calendar';
+export { AllDaySchedulesSection } from './AllDaySchedulesSection';
+export { CurrentTimeIndicator } from './CurrentTimeIndicator';
+export { MonthlyView } from './MonthlyView';
+export { WeeklyView } from './WeeklyView';
+export { DailyView } from './DailyView';
+export { YearlyView } from './YearlyView';
+export * from './timeFormatUtils';
+export type { Schedule, CalendarViewType, CalendarProps, displayAllDayScheduleMode, StartOfWeek, TodayBtnMode } from './types';
+export { getLocaleFromLang } from './constants';

package/dist/src/desktop/components/Calendar/index.js

@@ -0,0 +1,37 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLocaleFromLang = exports.YearlyView = exports.DailyView = exports.WeeklyView = exports.MonthlyView = exports.CurrentTimeIndicator = exports.AllDaySchedulesSection = exports.Calendar = void 0;
+var Calendar_1 = require("./Calendar");
+Object.defineProperty(exports, "Calendar", { enumerable: true, get: function () { return __importDefault(Calendar_1).default; } });
+var AllDaySchedulesSection_1 = require("./AllDaySchedulesSection");
+Object.defineProperty(exports, "AllDaySchedulesSection", { enumerable: true, get: function () { return AllDaySchedulesSection_1.AllDaySchedulesSection; } });
+var CurrentTimeIndicator_1 = require("./CurrentTimeIndicator");
+Object.defineProperty(exports, "CurrentTimeIndicator", { enumerable: true, get: function () { return CurrentTimeIndicator_1.CurrentTimeIndicator; } });
+var MonthlyView_1 = require("./MonthlyView");
+Object.defineProperty(exports, "MonthlyView", { enumerable: true, get: function () { return MonthlyView_1.MonthlyView; } });
+var WeeklyView_1 = require("./WeeklyView");
+Object.defineProperty(exports, "WeeklyView", { enumerable: true, get: function () { return WeeklyView_1.WeeklyView; } });
+var DailyView_1 = require("./DailyView");
+Object.defineProperty(exports, "DailyView", { enumerable: true, get: function () { return DailyView_1.DailyView; } });
+var YearlyView_1 = require("./YearlyView");
+Object.defineProperty(exports, "YearlyView", { enumerable: true, get: function () { return YearlyView_1.YearlyView; } });
+__exportStar(require("./timeFormatUtils"), exports);
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "getLocaleFromLang", { enumerable: true, get: function () { return constants_1.getLocaleFromLang; } });

package/dist/src/desktop/components/Calendar/timeFormatUtils.d.ts

@@ -0,0 +1,16 @@
+import type { TFunction } from 'react-i18next';
+/**
+ * 로케일에 따라 시간을 문자열로 포맷팅
+ * @param hour - 시간 (0-23)
+ * @param currentLang - 현재 언어 코드
+ * @returns 포맷팅된 시간 문자열
+ */
+export declare const formatHour: (hour: number, currentLang: string) => string;
+/**
+ * 로케일별 텍스트로 시간 포맷팅 (한국어용)
+ * @param hour - 시간 (0-23)
+ * @param currentLang - 현재 언어 코드
+ * @param t - react-i18next의 번역 함수
+ * @returns 로케일별 텍스트가 포함된 포맷팅된 시간 문자열
+ */
+export declare const formatTimeWithLocale: (hour: number, currentLang: string, t: TFunction) => string;

package/dist/src/desktop/components/Calendar/timeFormatUtils.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatTimeWithLocale = exports.formatHour = void 0;
+/**
+ * 로케일에 따라 시간을 문자열로 포맷팅
+ * @param hour - 시간 (0-23)
+ * @param currentLang - 현재 언어 코드
+ * @returns 포맷팅된 시간 문자열
+ */
+var formatHour = function (hour, currentLang) {
+    var is24HourFormat = ['ko', 'ja', 'zh', 'zh-cn', 'zh-tw', 'es'].includes(currentLang);
+    if (is24HourFormat) {
+        return "".concat(hour, ":00");
+    }
+    if (hour === 0)
+        return '12:00 AM';
+    if (hour === 12)
+        return '12:00 PM';
+    if (hour < 12)
+        return "".concat(hour, ":00 AM");
+    return "".concat(hour - 12, ":00 PM");
+};
+exports.formatHour = formatHour;
+/**
+ * 로케일별 텍스트로 시간 포맷팅 (한국어용)
+ * @param hour - 시간 (0-23)
+ * @param currentLang - 현재 언어 코드
+ * @param t - react-i18next의 번역 함수
+ * @returns 로케일별 텍스트가 포함된 포맷팅된 시간 문자열
+ */
+var formatTimeWithLocale = function (hour, currentLang, t) {
+    if (currentLang === 'ko') {
+        if (hour === 12)
+            return t('calendar_time_noon');
+        if (hour < 12) {
+            return hour === 0
+                ? "".concat(t('calendar_time_am'), " 12").concat(t('calendar_time_hour'))
+                : "".concat(t('calendar_time_am'), " ").concat(hour).concat(t('calendar_time_hour'));
+        }
+        return "".concat(t('calendar_time_pm'), " ").concat(hour - 12).concat(t('calendar_time_hour'));
+    }
+    // 다른 언어의 경우 기본 formatHour 함수 사용
+    return (0, exports.formatHour)(hour, currentLang);
+};
+exports.formatTimeWithLocale = formatTimeWithLocale;

package/dist/src/desktop/components/Calendar/types.d.ts

@@ -0,0 +1,60 @@
+/// <reference types="react" />
+export type CalendarViewType = 'MONTHLY' | 'WEEKLY' | 'DAILY' | 'YEARLY';
+export type displayAllDayScheduleMode = 'none' | 'use';
+export type StartOfWeek = 'sunday' | 'monday';
+export type TodayBtnMode = 'none' | 'use';
+export type ActionType = 'CLICK' | 'CLICK_WITH_SHIFT_KEY_DOWN' | 'DELETE_KEY_DOWN' | 'DRAG' | 'DOUBLE_CLICK';
+export type TargetType = 'SCHEDULE' | 'DATE';
+export type Action = {
+    action: ActionType;
+    target: TargetType;
+    date?: Date;
+    dates?: Date[];
+    schedule?: Schedule;
+    schedules?: Schedule[];
+    selectedDates?: Date[];
+    startDate?: string | undefined | null;
+    endDate?: string | undefined | null;
+};
+export type Config = {
+    action: ActionType;
+    target: TargetType;
+    trigger?: (action: Action) => void;
+};
+export type Schedule = {
+    id: number;
+    title: string;
+    startDate: Date;
+    endDate: Date;
+    isAllDay?: boolean;
+    [key: string]: any;
+};
+export type CalendarActionType = 'CALENDAR_TYPE_CHANGE' | 'PREV_BUTTON_CLICK' | 'NEXT_BUTTON_CLICK' | 'TODAY_BUTTON_CLICK';
+export type CalendarAction = {
+    type: CalendarActionType;
+    payload: {
+        type?: CalendarViewType;
+        startDate: string | undefined | null;
+        endDate: string | undefined | null;
+    };
+};
+export type CalendarProps = {
+    defaultViewType?: CalendarViewType;
+    viewTypes?: CalendarViewType[];
+    displayAllDayScheduleMode?: displayAllDayScheduleMode;
+    startOfWeek?: StartOfWeek;
+    todayBtnMode?: TodayBtnMode;
+    schedules?: Schedule[];
+    config?: Config;
+    onActionDispatch?: (action: CalendarAction) => void;
+};
+export type EventItemProps = {
+    event: Schedule;
+    date?: Date;
+    extraProps?: Record<string, any>;
+    onDragStart: (event: Schedule, e: React.DragEvent) => void;
+    onDragEnd: (e: React.DragEvent) => void;
+    onClick: (schedule: Schedule, e: React.MouseEvent) => void;
+    onDoubleClick: (schedule: Schedule) => void;
+    isSelected?: boolean;
+};

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

@@ -46,12 +46,9 @@ function ComponentBlockMatcher(_a) {
             return (0, jsx_runtime_1.jsx)(Youtube_1.Youtube, __assign({}, propsWithValue, { index: index }));
         case types_1.CB_ALL_CODES.CB_EMBED:
             return (0, jsx_runtime_1.jsx)(Embed_1.default, __assign({}, propsWithValue, { index: index }));
-        case types_1.CB_ALL_CODES.CB_CONTENTSCAROUSEL: {
+        case types_1.CB_ALL_CODES.CB_CONTENTS_CAROUSEL: {
             return (0, jsx_runtime_1.jsx)("div", { children: "NOT SUPPORTED NESTED CAROUSEL" });
         }
-        case types_1.CB_ALL_CODES.CB_LIST: {
-            return (0, jsx_runtime_1.jsx)("div", { children: "NOT SUPPORTED NESTED CONTENTSLIST" });
-        }
         default:
             return (0, jsx_runtime_1.jsx)("div", { children: "Error: not supported CB" });
     }

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

@@ -1,11 +1,9 @@
 import React from 'react';
-import type { IComposition } from '../types';
-import type { Layout } from 'publ-echo-test/dist/lib/GridLayoutEditor/types';
+import type { ISection } from '../types';
+import type { Layout } from 'publ-echo/dist/lib/GridLayoutEditor/types';
 export type LayoutsType = {
     sm: Layout;
     lg: Layout;
 };
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<IComposition & {
-    device?: "DESKTOP" | "MOBILE" | undefined;
-} & React.RefAttributes<unknown>>>;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ISection & React.RefAttributes<unknown>>>;
 export default _default;

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

@@ -47,31 +47,36 @@ var react_1 = __importStar(require("react"));
 var ErrorBoundary_1 = require("../../DynamicLayout/components/Section/ErrorBoundary");
 var dynamicLayoutContext_1 = require("../../DynamicLayout/dynamicLayoutContext");
 var styled_components_1 = __importDefault(require("styled-components"));
-require("../components");
+var components_1 = require("../components");
 var gleStyles_1 = require("../gleStyles");
 var useResizableObserver_1 = require("../sections/CustomSection/hooks/useResizableObserver");
-require("../sections/CustomSection/util");
+var util_1 = require("../sections/CustomSection/util");
 var parseSectionPadding_1 = __importDefault(require("../sections/CustomSection/util/layoutPropParsers/parseSectionPadding"));
-var parseCompositionPlacement_1 = __importDefault(require("../sections/CustomSection/util/parseCompositionPlacement"));
-var CompositionBackground_1 = __importDefault(require("./CompositionBackground"));
 var FlexGridItem_1 = __importDefault(require("./FlexGridItem"));
+var GRID_CELL_MIN = 24;
+var DESKTOP_GRID_COLS = 24;
+var MOBILE_GRID_COLS = 8;
+var GLE_MIN_WIDTH_DESKTOP_PX = "".concat(GRID_CELL_MIN * DESKTOP_GRID_COLS, "px");
+var GLE_MIN_WIDTH_MOBILE_PX = "".concat(GRID_CELL_MIN * MOBILE_GRID_COLS, "px");
 var Composition = (0, react_1.forwardRef)(function CustomSection(props, ref) {
-    var _a, _b, _c, _d, _e;
-    var _f = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _f.device, editingSectionId = _f.editingSectionId, mode = _f.mode, shortcutKeyMode = _f.shortcutKeyMode, sectionActionHandler = _f.sectionActionHandler, queryData = _f.queryData;
+    var _a;
+    var _b = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _b.device, editingSectionId = _b.editingSectionId, mode = _b.mode, shortcutKeyMode = _b.shortcutKeyMode, sectionActionHandler = _b.sectionActionHandler;
     var componentBlocks = props.componentBlocks, jsonProperties = props.jsonProperties;
-    var isMobile = device === 'MOBILE';
-    var isEditMode = mode === 'EDIT';
-    var _g = jsonProperties, _h = _g.data, CB_PLACEMENT_PROP_COMPOSITION = _h.CB_PLACEMENT_PROP_COMPOSITION, CB_LAYOUT_PROP_PADDING = _h.CB_LAYOUT_PROP_PADDING, zOrders = _g.zOrders;
-    var colsDesktop = (_a = CB_PLACEMENT_PROP_COMPOSITION.CB_PLACEMENT_PROP_COMPOSITION_SPEC_COLUMNS) !== null && _a !== void 0 ? _a : 24;
-    var colsMobile = (_b = CB_PLACEMENT_PROP_COMPOSITION['CB_PLACEMENT_PROP_COMPOSITION_SPEC_COLUMNS:MOBILE']) !== null && _b !== void 0 ? _b : 8;
-    var rowsDesktop = (_c = CB_PLACEMENT_PROP_COMPOSITION.CB_PLACEMENT_PROP_COMPOSITION_SPEC_ROWS) !== null && _c !== void 0 ? _c : 26;
-    var rowsMobile = (_d = CB_PLACEMENT_PROP_COMPOSITION['CB_PLACEMENT_PROP_COMPOSITION_SPEC_ROWS:MOBILE']) !== null && _d !== void 0 ? _d : 26;
-    var rows = isMobile ? rowsMobile : rowsDesktop;
-    var cols = isMobile ? colsMobile : colsDesktop;
+    var _c = jsonProperties, _d = _c.data, CB_PLACEMENT_PROP_SECTION = _d.CB_PLACEMENT_PROP_SECTION, CB_LAYOUT_PROP_PADDING = _d.CB_LAYOUT_PROP_PADDING, zOrders = _c.zOrders;
     var containerRef = (0, react_1.useRef)(null);
     var size = (0, useResizableObserver_1.useResizeObserver)({ ref: containerRef, box: 'border-box' });
-    var _j = (0, react_1.useState)(null), selectedCB = _j[0], setSelectedCB = _j[1];
+    var _e = (0, react_1.useState)(null), selectedCB = _e[0], setSelectedCB = _e[1];
     var gleRef = (0, react_1.useRef)(null);
+    var isMobile = device === 'MOBILE';
+    var isEditMode = mode === 'EDIT';
+    // const layoutByDevice = device === 'DESKTOP' ? 'lg' : 'sm';
+    // const [layouts] = useState<LayoutsType>(() => {
+    //   const { lg, sm } = parsePlacement(componentBlocks ?? []);
+    //   return {
+    //     lg,
+    //     sm
+    //   };
+    // });
     (0, react_1.useEffect)(function () {
         if (editingSectionId !== props.id) {
             setSelectedCB(null);
@@ -119,17 +124,14 @@ var Composition = (0, react_1.forwardRef)(function CustomSection(props, ref) {
             setSelectedCB('BULK');
         }
     }, [selectedCB, shortcutKeyMode, sectionActionHandler, setSelectedCB]);
-    var _k = (0, parseCompositionPlacement_1.default)({
+    var _f = (0, util_1.parseCustomSectionPlacement)({
         isMobile: isMobile,
-        compositionProps: CB_PLACEMENT_PROP_COMPOSITION
-    }), minHeight = _k.minHeight, maxHeight = _k.maxHeight, maxWidth = _k.maxWidth, minWidth = _k.minWidth;
-    var canvasWidth = 50 * cols;
+        customSectionProps: CB_PLACEMENT_PROP_SECTION
+    }), width = _f.width, minHeight = _f.minHeight, isFullWidth = _f.isFullWidth;
     var customSectionStyles = {
-        minHeight: "".concat(minHeight, "px"),
-        maxHeight: "".concat(maxHeight, "px"),
-        width: "100%",
-        maxWidth: maxWidth ? "".concat(maxWidth, "px") : '100%',
-        minWidth: "".concat(Math.max(canvasWidth, minWidth !== null && minWidth !== void 0 ? minWidth : 0), "px")
+        minHeight: "".concat(minHeight, "vh"),
+        width: '100%',
+        maxWidth: isFullWidth ? '' : "".concat(width, "px")
     };
     var onClickSection = function () {
         if (!isEditMode) {
@@ -145,26 +147,26 @@ var Composition = (0, react_1.forwardRef)(function CustomSection(props, ref) {
             });
     };
     var padding = (0, parseSectionPadding_1.default)(CB_LAYOUT_PROP_PADDING, device);
+    var sectionRow = CB_PLACEMENT_PROP_SECTION[device === 'DESKTOP'
+        ? 'CB_PLACEMENT_PROP_SECTION_SPEC_ROWS'
+        : 'CB_PLACEMENT_PROP_SECTION_SPEC_ROWS:MOBILE'];
     var rowHeight = (function () {
         if (!size.width) {
             return 50;
         }
         if (device === 'MOBILE') {
-            var cellWidth_1 = size.width / cols;
+            var cellWidth_1 = size.width / MOBILE_GRID_COLS;
             return cellWidth_1 * 0.56;
         }
-        var cellWidth = size.width / cols;
+        var cellWidth = size.width / DESKTOP_GRID_COLS;
         return cellWidth * 0.56;
     })();
-    // TODO: 폰트사이즈 작업 필요.
     var baseFontSize = (function () {
+        var _a, _b;
         if (!size.width) {
             return 16;
         }
-        // const responsiveFontMode =
-        //   !!props.jsonProperties?.CB_CONTENT_PROP_COMPOSITION
-        //     ?.CB_CONTENT_PROP_COMPOSITION_SPEC_VARIABLEROOTFONTSIZE;
-        var responsiveFontMode = true;
+        var responsiveFontMode = !!((_b = (_a = props.jsonProperties) === null || _a === void 0 ? void 0 : _a.data.CB_CONTENT_PROP_SECTION) === null || _b === void 0 ? void 0 : _b.CB_CONTENT_PROP_SECTION_SPEC_VARIABLEROOTFONTSIZE);
         if (device === 'MOBILE') {
             if (responsiveFontMode) {
                 return size.width * 0.0421;
@@ -182,31 +184,29 @@ var Composition = (0, react_1.forwardRef)(function CustomSection(props, ref) {
         }
         return 16;
     })();
-    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(dynamicLayoutContext_1.dynamicLayoutContext.Provider, __assign({ value: {
-                device: device
-            } }, { children: (0, jsx_runtime_1.jsx)(gleStyles_1.S_gleStyles, __assign({ style: { width: '100%', height: '100%' } }, { children: (0, jsx_runtime_1.jsx)(S_COMPOSITIONWrapper, __assign({ ref: gleRef, "x-dlayout-section-type": "NO_NAME", onClick: onClickSection, style: {
+    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(gleStyles_1.S_gleStyles, __assign({ style: { width: '100%', height: '100%' } }, { children: (0, jsx_runtime_1.jsx)(S_SectionWrapper, __assign({ ref: gleRef, "x-dlayout-section-type": "NO_NAME", onClick: onClickSection, style: {
+                    width: '100%',
+                    height: '100%'
+                } }, { children: (0, jsx_runtime_1.jsx)(components_1.CustomSection, __assign({}, props, { isMobile: isMobile, overrideStyles: {
+                        // minHeight: customSectionStyles.minHeight,
+                        paddingTop: padding.top,
+                        paddingBottom: padding.bottom,
+                        paddingRight: padding.right,
+                        paddingLeft: padding.left,
                         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: '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, style: {
-                                width: customSectionStyles.width,
-                                maxWidth: customSectionStyles.maxWidth,
-                                // minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX,
-                                fontSize: "".concat(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)(FlexGridItem_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));
-                            }) })) })) })) })) })) }));
+                    } }, { children: (0, jsx_runtime_1.jsx)(GridContainer, __assign({ ref: containerRef, cols: isMobile ? 8 : 24, rowHeight: rowHeight, sectionRow: sectionRow !== null && sectionRow !== void 0 ? sectionRow : 0, style: {
+                            width: customSectionStyles.width,
+                            maxWidth: customSectionStyles.maxWidth,
+                            minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX,
+                            fontSize: "".concat(baseFontSize, "px")
+                        } }, { children: (_a = props.componentBlocks) === null || _a === void 0 ? void 0 : _a.map(function (cb, index) {
+                            var _a;
+                            return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(FlexGridItem_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));
+                        }) })) })) })) })) }));
 });
 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(", ", minmax(", ", 1fr));\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(", ", minmax(", ", 1fr));\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(0, "px"); });
-var S_COMPOSITIONWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+var S_SectionWrapper = 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) {
     if (device === 'MOBILE') {

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { IComposition } from '../../DynamicLayout/types';
+declare function CompositionRenderer({ compositions }: {
+    compositions: IComposition[];
+}): JSX.Element;
+export default CompositionRenderer;

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

@@ -0,0 +1,27 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+require("react");
+var Composition_1 = __importDefault(require("./Composition"));
+function CompositionRenderer(_a) {
+    var compositions = _a.compositions;
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
+            width: '100%',
+            height: '100%'
+        } }, { children: compositions.map(function (composition) { return ((0, jsx_runtime_1.jsx)(Composition_1.default, __assign({}, composition), composition.id)); }) })));
+}
+exports.default = CompositionRenderer;

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type { DynamicLayoutProps } from './types';
-declare function DynamicLayout({ device, mode, isPreview, sections, scrollDownTargetSectionId, editingSectionId, navigationHandler, sectionActionHandler, onClickEditSection, programmedSectionComponents, shortcutKeyMode, dynamicLayoutRef, zoomScale, queryData }: DynamicLayoutProps): JSX.Element;
+declare function DynamicLayout({ device, mode, isPreview, sections, scrollDownTargetSectionId, editingSectionId, navigationHandler, sectionActionHandler, onClickEditSection, programmedSectionComponents, shortcutKeyMode, dynamicLayoutRef, zoomScale }: DynamicLayoutProps): JSX.Element;
 export default DynamicLayout;

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

@@ -25,7 +25,7 @@ var EditModeSectionMatcher_1 = require("./components/EditModeSectionMatcher");
 var SectionMatcher_1 = require("./components/SectionMatcher");
 var dynamicLayoutContext_1 = require("./dynamicLayoutContext");
 function DynamicLayout(_a) {
-    var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, navigationHandler = _a.navigationHandler, sectionActionHandler = _a.sectionActionHandler, onClickEditSection = _a.onClickEditSection, programmedSectionComponents = _a.programmedSectionComponents, shortcutKeyMode = _a.shortcutKeyMode, dynamicLayoutRef = _a.dynamicLayoutRef, zoomScale = _a.zoomScale, queryData = _a.queryData;
+    var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, navigationHandler = _a.navigationHandler, sectionActionHandler = _a.sectionActionHandler, onClickEditSection = _a.onClickEditSection, programmedSectionComponents = _a.programmedSectionComponents, shortcutKeyMode = _a.shortcutKeyMode, dynamicLayoutRef = _a.dynamicLayoutRef, zoomScale = _a.zoomScale;
     var filteredSortedSection = __spreadArray([], sections, true).filter(function (section) {
         var _a;
         if (!section.display) {
@@ -51,8 +51,7 @@ function DynamicLayout(_a) {
             editingSectionId: editingSectionId,
             programmedSectionComponents: programmedSectionComponents,
             shortcutKeyMode: shortcutKeyMode,
-            zoomScale: zoomScale,
-            queryData: queryData
+            zoomScale: zoomScale
         } }, { children: [mode === 'EDIT' && onClickEditSection && ((0, jsx_runtime_1.jsx)(EditModeSectionMatcher_1.EditModeSectionMatcher, { dynamicLayoutRef: dynamicLayoutRef, editingSectionId: editingSectionId, scrollDownTargetSectionId: scrollDownTargetSectionId, filteredSortedSection: filteredSortedSection, onClickEditSection: onClickEditSection })), mode !== 'EDIT' &&
                 (iframeSection ? ((0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, iframeSection), iframeSection.id)) : (filteredSortedSection.map(function (section) { return (0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, section), section.id); })))] })));
 }

package/dist/src/sub/DynamicLayout/components/Section/sectionContext.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import type { IComposition, ISection } from '../../types';
-export declare const sectionContext: import("react").Context<ISection | IComposition | null>;
+import type { ISection } from '../../types';
+export declare const sectionContext: import("react").Context<ISection | null>;

package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/index.d.ts

@@ -1,45 +1,5 @@
 /// <reference types="react" />
 declare const lineIcons: {
-    readonly ic_arrow_down_design_01: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_down_design_02: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_down_design_03: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_down_design_04: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_down_design_05: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_down_design_06: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_down_design_07: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_down_design_08: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_down_design_09: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_down_design_10: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_left_design_01: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_left_design_02: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_left_design_03: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_left_design_04: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_left_design_05: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_left_design_06: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_left_design_07: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_left_design_08: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_left_design_09: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_left_design_10: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_right_design_01: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_right_design_02: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_right_design_03: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_right_design_04: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_right_design_05: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_right_design_06: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_right_design_07: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_right_design_08: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_right_design_09: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_right_design_10: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_up_design_01: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_up_design_02: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_up_design_03: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_up_design_04: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_up_design_05: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_up_design_06: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_up_design_07: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_up_design_08: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_up_design_09: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_arrow_up_design_10: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_arrow_down: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_arrow_down_bold: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_arrow_left: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;