pds-dev-kit-web-test 2.5.45 → 2.5.47

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

@@ -61,6 +61,7 @@ var deepCopy_1 = __importDefault(require("../../../DynamicLayout/utils/deepCopy"
 var styled_components_1 = __importDefault(require("styled-components"));
 var components_1 = require("../../components");
 var ComponentBlockMatcher_1 = __importDefault(require("./components/ComponentBlock/ComponentBlockMatcher"));
+var S_Backdrop_1 = require("./components/ComponentBlock/componentBlocks/components/S_Backdrop");
 var S_HiddenCover_1 = require("./components/ComponentBlock/componentBlocks/components/S_HiddenCover");
 var useGroupDrag_1 = require("./hooks/useGroupDrag");
 var useGroupDrag_2 = require("./hooks/useGroupDrag/useGroupDrag");
@@ -75,8 +76,8 @@ 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 CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
-    var _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _a.device, editingSectionId = _a.editingSectionId, mode = _a.mode, shortcutKeyMode = _a.shortcutKeyMode, sectionActionHandler = _a.sectionActionHandler, zoomScale = _a.zoomScale;
-    var componentBlocks = props.componentBlocks, jsonProperties = props.jsonProperties;
+    var _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _a.device, editingSectionId = _a.editingSectionId, mode = _a.mode, shortcutKeyMode = _a.shortcutKeyMode, sectionActionHandler = _a.sectionActionHandler;
+    var componentBlocks = props.componentBlocks, jsonProperties = props.jsonProperties, pedigree = props.pedigree;
     var _b = jsonProperties.data, CB_PLACEMENT_PROP_SECTION = _b.CB_PLACEMENT_PROP_SECTION, CB_LAYOUT_PROP_PADDING = _b.CB_LAYOUT_PROP_PADDING, CB_CONTENT_PROP_SECTION = _b.CB_CONTENT_PROP_SECTION;
     var _c = (0, react_1.useState)(null), selectedCB = _c[0], setSelectedCB = _c[1];
     var gleRef = (0, react_1.useRef)(null);
@@ -346,26 +347,26 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
             });
         }
     };
-    // const onAutoFitContent: OnFitContentCallBack = (props) => {
-    //   const { prev, item } = props;
-    //   if (!isEditMode || !item) {
-    //     return;
-    //   }
-    //   const numberId = Number(item.i);
-    //   const isIdNumber = !Number.isNaN(numberId);
-    //   if (isLayoutPlacementSame(item, prev)) {
-    //     return;
-    //   }
-    //   if (isIdNumber) {
-    //     setSelectedCB(numberId);
-    //   }
-    //   if (sectionActionHandler && isIdNumber) {
-    //     sectionActionHandler({
-    //       type: '@CUSTOMSECTION/CB_AUTO_FIT_CONTENT',
-    //       payload: { ...props, details: { hadPaddingChanged: props.hasPaddingChanged } }
-    //     });
-    //   }
-    // };
+    var onAutoFitContent = function (props) {
+        var prev = props.prev, item = props.item;
+        if (!isEditMode || !item) {
+            return;
+        }
+        var numberId = Number(item.i);
+        var isIdNumber = !Number.isNaN(numberId);
+        if (isLayoutPlacementSame(item, prev)) {
+            return;
+        }
+        if (isIdNumber) {
+            setSelectedCB(numberId);
+        }
+        if (sectionActionHandler && isIdNumber) {
+            sectionActionHandler({
+                type: '@CUSTOMSECTION/CB_AUTO_FIT_CONTENT',
+                payload: __assign(__assign({}, props), { details: { hadPaddingChanged: props.hasPaddingChanged } })
+            });
+        }
+    };
     var onClickSection = function () {
         if (!isEditMode) {
             return;
@@ -382,6 +383,22 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
                 }
             });
     };
+    var onContextSection = function () {
+        if (!isEditMode) {
+            return;
+        }
+        if ((0, useGroupDrag_2.getGroupCB)(layouts[layoutByDevice])) {
+            breakGroupCB();
+        }
+        setSelectedCB(null);
+        sectionActionHandler &&
+            sectionActionHandler({
+                type: '@CUSTOMSECTION/SECTION_RIGHT_CLICKED',
+                payload: {
+                    sectionId: props.id
+                }
+            });
+    };
     var onWidthChange = function (width) {
         var responsiveFontMode = 
         // NOTE: local환경에서 CB_CONTENT_PROP_SECTION이 없는 경우가 있음.
@@ -445,7 +462,11 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
         }
         return false;
     })();
-    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsxs)(exports.S_gleStyles, { children: [showSectionHiddenCover && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_SectionWrapper, __assign({ ref: gleRef, "x-dlayout-section-type": "NO_NAME", onClick: onClickSection }, { children: (0, jsx_runtime_1.jsx)(components_1.CustomSection, __assign({}, props, { isMobile: isMobile, overrideStyles: {
+    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsxs)(exports.S_gleStyles, { children: [showSectionHiddenCover && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_SectionWrapper, __assign({ ref: gleRef, "x-dlayout-section-type": "NO_NAME", onClick: onClickSection, onContextMenu: function (e) {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        onContextSection();
+                    } }, { children: (0, jsx_runtime_1.jsx)(components_1.CustomSection, __assign({}, props, { isMobile: isMobile, overrideStyles: {
                             minHeight: customSectionStyles.minHeight,
                             paddingTop: padding.top,
                             paddingBottom: padding.bottom,
@@ -456,13 +477,14 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
                                 maxWidth: customSectionStyles.maxWidth,
                                 minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX,
                                 fontSize: "".concat(baseFontSize, "px")
-                            }, onLayoutChange: onLayoutChange, onDragStart: onDragStart, onDragStop: onDragStop, onResizeStop: onResizeStop, 
-                            // onFitToContent={onAutoFitContent}
-                            onWidthChange: onWidthChange, minNbRow: rows, isDraggable: isEditMode, isResizable: isEditMode, transformScale: zoomScale }, { children: keepSimilarOrderToPreventRerender(layouts[layoutByDevice]).map(function (each, index) {
+                            }, onLayoutChange: onLayoutChange, onDragStart: onDragStart, onDragStop: onDragStop, onResizeStop: onResizeStop, onFitToContent: onAutoFitContent, onWidthChange: onWidthChange, minNbRow: rows, isDraggable: false, isResizable: isEditMode }, { children: keepSimilarOrderToPreventRerender(layouts[layoutByDevice]).map(function (each, index) {
                                 var _a;
                                 if (each === null) {
                                     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
                                 }
+                                if (each.i === 'backdrop') {
+                                    return (0, jsx_runtime_1.jsx)(S_Backdrop_1.S_Backdrop, {}, "backdrop");
+                                }
                                 var matchedCB = componentBlocks === null || componentBlocks === void 0 ? void 0 : componentBlocks.find(function (cb) { return cb.id.toString() === each.i; });
                                 if (each.i === 'group' && each.groupLayouts) {
                                     return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "iamgroup", onClick: function (e) {
@@ -472,7 +494,7 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
                                             e.stopPropagation();
                                             e.preventDefault();
                                             onContextMenuCB('group', e);
-                                        } }, { children: (0, jsx_runtime_1.jsx)(WidthProvidedRGL, __assign({ cols: each.w, allowOverlap: true, layout: each.groupLayouts, rowHeight: rowHeight, containerPadding: [0, 0], margin: [10, 10], isDraggable: false, isResizable: false, transformScale: zoomScale, style: {
+                                        } }, { children: (0, jsx_runtime_1.jsx)(WidthProvidedRGL, __assign({ cols: each.w, allowOverlap: true, layout: each.groupLayouts, rowHeight: rowHeight, containerPadding: [0, 0], margin: [10, 10], isDraggable: false, isResizable: false, style: {
                                                 width: '100%'
                                             } }, { children: (_a = each.groupLayouts) === null || _a === void 0 ? void 0 : _a.map(function (layoutItem, index, array) {
                                                 var matchedCB = componentBlocks === null || componentBlocks === void 0 ? void 0 : componentBlocks.find(function (cb) { return cb.id.toString() === layoutItem.i; });
@@ -486,7 +508,7 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
                                                 return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-box-in-group", onClick: function (e) {
                                                         e.stopPropagation();
                                                         clickOneCBInBulk(matchedCB.id, array);
-                                                    } }, { children: (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(ComponentBlockMatcher_1.default, { cbProps: cbCopy, device: device, index: index }) }) }), matchedCB.id));
+                                                    } }, { children: (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(ComponentBlockMatcher_1.default, { rowHeight: rowHeight, cbProps: cbCopy, device: device, index: index }) }) }), matchedCB.id));
                                             }) })) }), each.i));
                                 }
                                 if (!matchedCB) {
@@ -502,7 +524,7 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
                                             e.stopPropagation();
                                             e.preventDefault();
                                             onContextMenuCB(matchedCB.id, e);
-                                        } }, { children: (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(ComponentBlockMatcher_1.default, { cbProps: matchedCB, device: device, index: index }) }) })) }), each.i));
+                                        } }, { children: (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(ComponentBlockMatcher_1.default, { cbProps: matchedCB, device: device, rowHeight: rowHeight, index: index }) }) })) }), each.i));
                             }) })) })) }))] }) }));
 });
 function keepSimilarOrderToPreventRerender(arr) {
@@ -512,9 +534,9 @@ function keepSimilarOrderToPreventRerender(arr) {
     if (groupIdx >= 0) {
         var group = arrCopy.splice(groupIdx, 1)[0];
         (_a = group.groupLayouts) === null || _a === void 0 ? void 0 : _a.sort(function (a, b) { return Number(a.i) - Number(b.i); });
-        return __spreadArray([group], arrCopy, true);
+        return __spreadArray(__spreadArray([group], arrCopy, true), [{ i: 'backdrop' }], false);
     }
-    return __spreadArray([null], arrCopy, true);
+    return __spreadArray(__spreadArray([null], arrCopy, true), [{ i: 'backdrop' }], false);
 }
 function isLayoutPlacementSame(current, prev) {
     if (!prev) {

package/dist/src/sub/DynamicLayout/sections/CustomSection/FlexGridItem.js

@@ -34,7 +34,7 @@ function FlexGridItem(_a) {
             zIndex: zIndex,
             gridArea: gridArea
             // maxHeight: cb.componentBlockCode !== CB_ALL_CODES.CB_TEXT ? defaultHeight : undefined
-        } }, { children: (0, jsx_runtime_1.jsx)(ComponentBlockMatcher_1.default, { cbProps: cb, device: device, index: index }) })));
+        } }, { children: (0, jsx_runtime_1.jsx)(ComponentBlockMatcher_1.default, { rowHeight: rowHeight, cbProps: cb, device: device, index: index }) })));
 }
 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) {

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/ComponentBlockMatcher.d.ts

@@ -5,6 +5,7 @@ type Props = {
     cbProps: ComponentBlock;
     device: Device;
     index: number;
+    rowHeight: number;
 };
-export default function ComponentBlockMatcher({ cbProps, device, index }: Props): JSX.Element;
+export default function ComponentBlockMatcher({ cbProps, device, index, rowHeight }: Props): JSX.Element;
 export {};

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

@@ -21,13 +21,14 @@ var types_1 = require("../../types");
 var Button_1 = __importDefault(require("./componentBlocks/Button/Button"));
 var Divider_1 = __importDefault(require("./componentBlocks/Divider/Divider"));
 var Embed_1 = __importDefault(require("./componentBlocks/Embed/Embed"));
+var GroupedCB_1 = __importDefault(require("./componentBlocks/Group/GroupedCB"));
 var Image_1 = __importDefault(require("./componentBlocks/Image/Image"));
 var RichText_1 = require("./componentBlocks/RichText");
 var Text_1 = __importDefault(require("./componentBlocks/Text/Text"));
 var Twitter_1 = __importDefault(require("./componentBlocks/Twitter/Twitter"));
 var Youtube_1 = require("./componentBlocks/Youtube");
 function ComponentBlockMatcher(_a) {
-    var cbProps = _a.cbProps, device = _a.device, index = _a.index;
+    var cbProps = _a.cbProps, device = _a.device, index = _a.index, rowHeight = _a.rowHeight;
     var componentBlockCode = cbProps.componentBlockCode, data = cbProps.jsonProperties.data;
     var propsWithValue = device === 'MOBILE' ? (0, newUtils_1.replaceUndefinedValues)(data) : data;
     switch (componentBlockCode) {
@@ -47,6 +48,8 @@ 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_GROUP:
+            return ((0, jsx_runtime_1.jsx)(GroupedCB_1.default, __assign({}, propsWithValue, { index: index, rowHeight: rowHeight })));
         default:
             return (0, jsx_runtime_1.jsx)("div", { children: "Error: not supported CB" });
     }

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Group/GroupedCB.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { CB_BTN_PROPERTIES_TYPE, IndexForIntersection } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+type Props = CB_BTN_PROPERTIES_TYPE & IndexForIntersection & {
+    rowHeight: number;
+};
+declare function GroupedCB(props: Props): JSX.Element;
+export default GroupedCB;

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

@@ -0,0 +1,63 @@
+"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");
+var lib_1 = require("publ-echo/dist/lib");
+var ReactGridLayout_1 = __importDefault(require("publ-echo/dist/lib/GridLayoutEditor/ReactGridLayout"));
+var react_1 = require("react");
+var dynamicLayoutContext_1 = require("../../../../../../../DynamicLayout/dynamicLayoutContext");
+require("../components/S_Backdrop");
+var WidthProvidedRGL = (0, lib_1.WidthProvider)(ReactGridLayout_1.default);
+var samplelayout = [
+    {
+        w: 2,
+        h: 2,
+        x: 1,
+        y: 1,
+        z: 1,
+        i: '1'
+        // minW?: number,
+        // minH?: number,
+        // maxW?: number,
+        // maxH?: number,
+        // moved?: boolean,
+        // static?: boolean,
+        // isDraggable?: boolean,
+        // isResizable?: boolean,
+        // resizeHandles?: ResizeHandleAxis[],
+        // isBounded?: boolean,
+        // groupLayouts?: LayoutItem[],
+        // autoResize?: boolean,
+    },
+    {
+        w: 2,
+        h: 2,
+        x: 3,
+        y: 3,
+        z: 1,
+        i: '2'
+    }
+];
+function GroupedCB(props) {
+    var _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
+    var index = props.index, rowHeight = props.rowHeight, CB_STYLE_PROP_BTNCOLOR = props.CB_STYLE_PROP_BTNCOLOR, _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_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, CB_PLACEMENT_PROP_PLACEMENT = props.CB_PLACEMENT_PROP_PLACEMENT;
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(WidthProvidedRGL, __assign({ cols: CB_PLACEMENT_PROP_PLACEMENT.CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS - 1, allowOverlap: true, layout: samplelayout, rowHeight: rowHeight, containerPadding: [0, 0], margin: [10, 10], isDraggable: true, isResizable: true, style: {
+                width: '100%',
+                height: '100%',
+                zIndex: 100002
+            } }, { children: [(0, jsx_runtime_1.jsx)("div", { className: "react-grid-item-selected" }, "1"), (0, jsx_runtime_1.jsx)("div", { className: "react-grid-item-selected" }, "2")] })) }));
+}
+exports.default = GroupedCB;

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

@@ -0,0 +1 @@
+export declare const S_Backdrop: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -0,0 +1,13 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.S_Backdrop = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.S_Backdrop = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  /* background: #bababaa3; */\n  background-color: red;\n  height: 100vh;\n  pointer-events: none;\n  position: absolute;\n  width: 100vw;\n  z-index: 100002;\n"], ["\n  /* background: #bababaa3; */\n  background-color: red;\n  height: 100vh;\n  pointer-events: none;\n  position: absolute;\n  width: 100vw;\n  z-index: 100002;\n"])));
+var templateObject_1;

package/dist/src/sub/DynamicLayout/sections/CustomSection/types.d.ts

@@ -1,6 +1,6 @@
 import type { CB_BTN_PROPERTIES_TYPE, CB_DIVIDER_PROPERTIES_TYPE, CB_EMBED_PROPERTIES_TYPE, CB_IMG_PROPERTIES_TYPE, CB_RICHTEXT_PROPERTIES_TYPE, CB_TEXT_PROPERTIES_TYPE, CB_TWITTER_PROPERTIES_TYPE, CB_YOUTUBE_PROPERTIES_TYPE } from './util/types';
 export type CB_TYPES = 'GENERAL';
-export type ComponentBlock = CB_TEXT_TYPE | CB_BTN_TYPE | CB_RICHTEXT | CB_DIVIDER | CB_IMG | CB_YOUTUBE | CB_TWITTER | CB_IFRAME;
+export type ComponentBlock = CB_TEXT_TYPE | CB_BTN_TYPE | CB_RICHTEXT | CB_DIVIDER | CB_IMG | CB_YOUTUBE | CB_TWITTER | CB_IFRAME | CB_GROUP;
 type GeneralCustomSectionType = {
     id: number;
     type: 'GENERAL';
@@ -66,6 +66,12 @@ export type CB_IFRAME = GeneralCustomSectionType & {
         data: CB_TWITTER_PROPERTIES_TYPE;
     };
 };
+export type CB_GROUP = GeneralCustomSectionType & {
+    componentBlockCode: CB_ALL_CODES.CB_GROUP;
+    jsonProperties: {
+        data: CB_BTN_PROPERTIES_TYPE;
+    };
+};
 export declare enum CB_ALL_CODES {
     CB_TEXT = "CB_TEXT",
     CB_BTN = "CB_BTN",
@@ -74,6 +80,7 @@ export declare enum CB_ALL_CODES {
     CB_IMG = "CB_IMG",
     CB_YOUTUBE = "CB_YOUTUBE",
     CB_TWITTER = "CB_TWITTER",
-    CB_EMBED = "CB_EMBED"
+    CB_EMBED = "CB_EMBED",
+    CB_GROUP = "CB_GROUP"
 }
 export {};

package/dist/src/sub/DynamicLayout/sections/CustomSection/types.js

@@ -11,4 +11,5 @@ var CB_ALL_CODES;
     CB_ALL_CODES["CB_YOUTUBE"] = "CB_YOUTUBE";
     CB_ALL_CODES["CB_TWITTER"] = "CB_TWITTER";
     CB_ALL_CODES["CB_EMBED"] = "CB_EMBED";
+    CB_ALL_CODES["CB_GROUP"] = "CB_GROUP";
 })(CB_ALL_CODES = exports.CB_ALL_CODES || (exports.CB_ALL_CODES = {}));

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

@@ -58,8 +58,10 @@ export interface ISection {
         };
     };
     componentBlocks?: ComponentBlock[];
+    pedigree?: SectionPedigree;
     jsonProperties?: ISectionJsonProperties;
 }
+export type SectionPedigree = any;
 export interface SubscriptionProductInList {
     id: number;
     type: SubscriptionProductType;
@@ -228,7 +230,6 @@ export type DynamicLayoutProps = {
     width?: number;
     shortcutKeyMode?: CustomSectionShortcutKeysType;
     dynamicLayoutRef?: Ref<CustomSectionImperativeHandleRef>;
-    zoomScale?: number;
 };
 export type NavHandlerAction = {
     openNewTab: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "2.5.45",
+  "version": "2.5.47",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",
@@ -22,7 +22,7 @@
     "i18next-intervalplural-postprocessor": "^3.0.0",
     "lottie-react": "^2.3.1",
     "nuka-carousel": "^4.8.4",
-    "publ-echo": "^0.0.100",
+    "publ-echo": "^0.0.99",
     "react-hook-form": "^7.28.1",
     "react-i18next": "^11.12.0",
     "react-router-dom": "^5.2.0",

package/release-note.md

@@ -1,6 +1,6 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.104]
+## [v2.2.99]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
-* [PDS-1253] 일부 아이콘이 톤에 따라 내부 요소의 컬러가 바뀌지 않는 이슈
+* Echo를 0045 버전으로 롤백

package/dist/src/common/assets/icons/fill/MenuHome.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type IconType from '../IconType';
-declare const MenuHome: ({ color, size, ...rest }: IconType) => JSX.Element;
-export default MenuHome;

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

@@ -1,30 +0,0 @@
-"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 __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var MenuHome = function (_a) {
-    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
-    return ((0, jsx_runtime_1.jsx)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: color, fillRule: "evenodd", d: "M19.2298,8.4646 L19.2298,8.4646 L13.3638,3.5996 C12.5728,2.9446 11.4278,2.9446 10.6368,3.5996 L4.7708,8.4626 C4.2298,8.9116 3.9158,9.5786 3.9158,10.2826 L3.9158,18.3446 C3.9158,19.2296 4.6328,19.9466 5.5178,19.9466 L9.2618,19.9466 C9.5988,19.9466 9.8718,19.6726 9.8718,19.3356 L9.8718,16.0496 C9.8718,15.5876 10.2468,15.2136 10.7078,15.2136 L13.2928,15.2136 C13.7538,15.2136 14.1278,15.5876 14.1278,16.0496 L14.1278,19.3356 C14.1278,19.6726 14.4018,19.9466 14.7388,19.9466 L18.4818,19.9466 C19.3668,19.9466 20.0838,19.2296 20.0838,18.3446 L20.0838,10.2826 C20.0838,9.5776 19.7728,8.9146 19.2298,8.4646" }) })));
-};
-exports.default = MenuHome;

package/dist/src/common/assets/icons/fill/PostPost.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type IconType from '../IconType';
-declare const PostPost: ({ color, size, ...rest }: IconType) => JSX.Element;
-export default PostPost;

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

@@ -1,30 +0,0 @@
-"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 __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var PostPost = function (_a) {
-    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
-    return ((0, jsx_runtime_1.jsx)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsxs)("g", __assign({ fill: "none", fillRule: "evenodd" }, { children: [(0, jsx_runtime_1.jsx)("rect", { width: "17", height: "19", x: "3.5", y: "2.5", stroke: color, strokeWidth: "2", rx: "4" }), (0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeWidth: "2", d: "M7.3102,7.999 L16.6892,7.999 M7.3102,11.9956 L16.6892,11.9956 M7.3102,15.9922 L12.8362,15.9922" })] })) })));
-};
-exports.default = PostPost;

package/dist/src/common/assets/icons/fill/PostSeries.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type IconType from '../IconType';
-declare const PostSeries: ({ color, size, ...rest }: IconType) => JSX.Element;
-export default PostSeries;

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

@@ -1,30 +0,0 @@
-"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 __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var PostSeries = 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", fillRule: "evenodd" }, { children: [(0, jsx_runtime_1.jsx)("path", { fill: color, d: "M15.464,4.5658 L4.795,4.5658 C2.92,4.5658 1.4,6.0858 1.4,7.9608 L1.4,19.5998 C1.4,21.4748 2.92,22.9948 4.795,22.9948 L15.464,22.9948 C17.339,22.9948 18.859,21.4748 18.859,19.5998 L18.859,7.9608 C18.859,6.0858 17.339,4.5658 15.464,4.5658 L15.464,4.5658 Z M15.464,6.5658 C16.233,6.5658 16.859,7.1918 16.859,7.9608 L16.859,19.5998 C16.859,20.3688 16.233,20.9948 15.464,20.9948 L4.795,20.9948 C4.026,20.9948 3.4,20.3688 3.4,19.5998 L3.4,7.9608 C3.4,7.1918 4.026,6.5658 4.795,6.5658 L15.464,6.5658 Z" }), (0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeWidth: "2", d: "M6.0355,10.2915 L14.2235,10.2915 M6.0355,13.7804 L14.2235,13.7804 M6.0355,17.2692 L10.8595,17.2692" }), (0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinejoin: "round", strokeWidth: "2", d: "M5.6243,5.592 L5.6243,4.929 C5.6243,3.201 7.0253,1.8 8.7523,1.8 L18.5843,1.8 C20.3123,1.8 21.7133,3.201 21.7133,4.929 L21.7133,15.654 C21.7133,17.382 20.3123,18.783 18.5843,18.783 L17.7783,18.783" })] })) })));
-};
-exports.default = PostSeries;

package/dist/src/common/assets/icons/fill/VideoEpisode.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type IconType from '../IconType';
-declare const VideoEpisode: ({ color, size, ...rest }: IconType) => JSX.Element;
-export default VideoEpisode;

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

@@ -1,30 +0,0 @@
-"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 __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var VideoEpisode = function (_a) {
-    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
-    return ((0, jsx_runtime_1.jsx)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: color, fillRule: "evenodd", d: "M14.6682,12.6872 L12.8852,13.7172 L11.1012,14.7462 C10.5722,15.0522 9.9112,14.6702 9.9112,14.0592 L9.9112,12.0002 L9.9112,9.9402 C9.9112,9.3302 10.5722,8.9482 11.1012,9.2532 L12.8852,10.2832 L14.6682,11.3132 C15.1972,11.6182 15.1972,12.3822 14.6682,12.6872 M18.1152,4.5712 L5.8842,4.5712 C4.2272,4.5712 2.8842,5.9142 2.8842,7.5712 L2.8842,16.4292 C2.8842,18.0862 4.2272,19.4292 5.8842,19.4292 L18.1152,19.4292 C19.7722,19.4292 21.1152,18.0862 21.1152,16.4292 L21.1152,7.5712 C21.1152,5.9142 19.7722,4.5712 18.1152,4.5712" }) })));
-};
-exports.default = VideoEpisode;

package/dist/src/common/assets/icons/fill/VideoSeries.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type IconType from '../IconType';
-declare const VideoSeries: ({ color, size, ...rest }: IconType) => JSX.Element;
-export default VideoSeries;

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

@@ -1,30 +0,0 @@
-"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 __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var VideoSeries = function (_a) {
-    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
-    return ((0, jsx_runtime_1.jsx)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsxs)("g", __assign({ fill: "none", fillRule: "evenodd" }, { children: [(0, jsx_runtime_1.jsx)("path", { fill: color, d: "M13.9309,13.1571 L12.2319,14.1381 L10.5329,15.1191 C10.0289,15.4101 9.3999,15.0461 9.3999,14.4641 L9.3999,12.5021 L9.3999,10.5411 C9.3999,9.9591 10.0289,9.5951 10.5329,9.8861 L12.2319,10.8671 L13.9309,11.8481 C14.4349,12.1391 14.4349,12.8661 13.9309,13.1571 M16.9779,5.4261 L5.8009,5.4261 C4.0919,5.4261 2.7059,6.8111 2.7059,8.5201 L2.7059,16.4851 C2.7059,18.1941 4.0919,19.5791 5.8009,19.5791 L16.9779,19.5791 C18.6869,19.5791 20.0729,18.1941 20.0729,16.4851 L20.0729,8.5201 C20.0729,6.8111 18.6869,5.4261 16.9779,5.4261" }), (0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.4", d: "M6.3538,6.3685 L6.3538,6.3685 C6.3538,5.1335 7.3548,4.1325 8.5898,4.1325 L19.0578,4.1325 C20.2928,4.1325 21.2938,5.1335 21.2938,6.3685 L21.2938,14.0725 C21.2938,15.3075 20.2928,16.3085 19.0578,16.3085" })] })) })));
-};
-exports.default = VideoSeries;

package/dist/src/common/assets/icons/line/Heart.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type IconType from '../IconType';
-declare const Heart: ({ color, size, ...rest }: IconType) => JSX.Element;
-export default Heart;

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

@@ -1,30 +0,0 @@
-"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 __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var Heart = 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.jsx)("path", { fill: "none", stroke: color, strokeWidth: "1.8", d: "M16.981,3 C15.701,3 14.41,3.519 13.377,4.576 C12.807,5.161 12.454,5.672 12.248,6.022 C12.192,6.118 12.097,6.165 12.002,6.165 C11.905,6.165 11.806,6.115 11.749,6.017 C11.543,5.667 11.19,5.158 10.623,4.576 C9.59,3.519 8.299,3 7.019,3 C5.629,3 4.253,3.612 3.235,4.81 C1.404,6.966 1.672,10.216 3.629,12.259 L11.278,20.246 C11.671,20.657 12.329,20.657 12.722,20.246 L20.371,12.259 C22.326,10.218 22.596,6.972 20.769,4.815 C19.752,3.613 18.373,3 16.981,3" }) })));
-};
-exports.default = Heart;

package/dist/src/common/assets/icons/line/MenuHome.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type IconType from '../IconType';
-declare const MenuHome: ({ color, size, ...rest }: IconType) => JSX.Element;
-export default MenuHome;