pds-dev-kit-web-test 2.2.48 → 2.2.61

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

@@ -0,0 +1,273 @@
+"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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filterItemsById = exports.getGroupCB = void 0;
+// eslint-disable-next-line import/no-extraneous-dependencies
+var renderHelpers_1 = require("publ-echo/dist/lib/GridLayoutEditor/utils/renderHelpers");
+var react_1 = require("react");
+var deepCopy_1 = __importDefault(require("../../../../../DynamicLayout/utils/deepCopy"));
+var utils_1 = require("./utils");
+function useGroupDrag(_a) {
+    var device = _a.device, setLayouts = _a.setLayouts, sectionActionHandler = _a.sectionActionHandler;
+    var layoutByDevice = device === 'DESKTOP' ? 'lg' : 'sm';
+    function makeAllInOneGroup() {
+        setLayouts(function (prev) {
+            var _a, _b;
+            var _c;
+            // TODO: 임시용 카피
+            var currentLayoutCopy = (0, deepCopy_1.default)(prev[layoutByDevice]);
+            if (currentLayoutCopy.length === 0) {
+                return prev;
+            }
+            var groupIdx = currentLayoutCopy.findIndex(function (item) { return item.i === 'group'; });
+            // NOTE: 그룹이 없는 경우
+            if (groupIdx < 0) {
+                var group_1 = (0, utils_1.getGroupForMultiple)(currentLayoutCopy);
+                sectionActionHandler &&
+                    sectionActionHandler({
+                        type: '@CUSTOMSECTION/GROUP_CREATED',
+                        payload: {
+                            message: 'group generated',
+                            data: group_1
+                        }
+                    });
+                return __assign(__assign({}, prev), (_a = {}, _a[layoutByDevice] = [group_1], _a));
+            }
+            // NOTE: 그룹이 이미 있는경우
+            var groupItem = currentLayoutCopy.splice(groupIdx, 1)[0];
+            if (!groupItem.groupLayouts) {
+                return prev;
+            }
+            var groupItems = (_c = groupItem.groupLayouts.map(function (each) { return (__assign(__assign({}, each), { x: groupItem.x + each.x, y: groupItem.y + each.y })); })) !== null && _c !== void 0 ? _c : [];
+            currentLayoutCopy.push.apply(currentLayoutCopy, groupItems);
+            var group = (0, utils_1.getGroupForMultiple)(currentLayoutCopy);
+            sectionActionHandler &&
+                sectionActionHandler({
+                    type: '@CUSTOMSECTION/GROUP_CREATED',
+                    payload: {
+                        message: 'group generated',
+                        data: group
+                    }
+                });
+            return __assign(__assign({}, prev), (_b = {}, _b[layoutByDevice] = [group], _b));
+        });
+    }
+    function escapeFromGroup(id) {
+        setLayouts(function (prev) {
+            var _a;
+            // TODO: 임시용 카피
+            var currentLayoutCopy = (0, deepCopy_1.default)(prev[layoutByDevice]);
+            var groupIdx = currentLayoutCopy.findIndex(function (item) { return item.i === 'group'; });
+            var group = currentLayoutCopy[groupIdx];
+            if (!group || !group.groupLayouts) {
+                return prev;
+            }
+            var escapeIndex = group.groupLayouts.findIndex(function (each) { return each.i === id; });
+            if (escapeIndex < 0) {
+                return prev;
+            }
+            var escapedItem = group.groupLayouts.splice(escapeIndex, 1)[0];
+            escapedItem.x += group.x;
+            escapedItem.y += group.y;
+            currentLayoutCopy.push(escapedItem);
+            var newGroup = (0, utils_1.recalculatedGroup)(group);
+            currentLayoutCopy.splice(groupIdx, 1, newGroup);
+            sectionActionHandler &&
+                sectionActionHandler({
+                    type: '@CUSTOMSECTION/ESCAPE_ONE_FROM_GROUP',
+                    payload: {
+                        id: id
+                    }
+                });
+            return __assign(__assign({}, prev), (_a = {}, _a[layoutByDevice] = currentLayoutCopy, _a));
+        });
+    }
+    function setGroupCB(selectedId, newId) {
+        setLayouts(function (prev) {
+            var _a;
+            var currentLayoutCopy = (0, deepCopy_1.default)(prev[layoutByDevice]);
+            var firstIdx = currentLayoutCopy.findIndex(function (item) {
+                if (selectedId === 'group') {
+                    return item.i === 'group';
+                }
+                if (Number(item.i) === selectedId) {
+                    return true;
+                }
+                return false;
+            });
+            var firstElem = currentLayoutCopy.splice(firstIdx, 1)[0];
+            var secondIdx = currentLayoutCopy.findIndex(function (item) { return Number(item.i) === newId; });
+            var secondElem = currentLayoutCopy.splice(secondIdx, 1)[0];
+            var group = (0, utils_1.getGroupData)(firstElem, secondElem);
+            currentLayoutCopy.unshift(group);
+            sectionActionHandler &&
+                sectionActionHandler({
+                    type: '@CUSTOMSECTION/GROUP_CREATED',
+                    payload: {
+                        message: 'group generated',
+                        data: group
+                    }
+                });
+            return __assign(__assign({}, prev), (_a = {}, _a[layoutByDevice] = currentLayoutCopy, _a));
+        });
+    }
+    var breakGroupCB = (0, react_1.useCallback)(function () {
+        setLayouts(function (prev) {
+            var _a;
+            var _b;
+            // TODO: 임시용 카피
+            var currentLayoutCopy = (0, deepCopy_1.default)(prev[layoutByDevice]);
+            var groupIdx = currentLayoutCopy.findIndex(function (item) { return item.i === 'group'; });
+            if (groupIdx < 0) {
+                return prev;
+            }
+            var groupItem = currentLayoutCopy.splice(groupIdx, 1)[0];
+            if (!groupItem.groupLayouts) {
+                return prev;
+            }
+            var groupItems = (_b = groupItem.groupLayouts.map(function (each) { return (__assign(__assign({}, each), { x: groupItem.x + each.x, y: groupItem.y + each.y })); })) !== null && _b !== void 0 ? _b : [];
+            currentLayoutCopy.push.apply(currentLayoutCopy, groupItems);
+            return __assign(__assign({}, prev), (_a = {}, _a[layoutByDevice] = currentLayoutCopy, _a));
+        });
+        sectionActionHandler &&
+            sectionActionHandler({
+                type: '@CUSTOMSECTION/GROUP_DISMISSED',
+                payload: {
+                    message: 'group dismissed'
+                }
+            });
+    }, []);
+    function makeCollisionGroup(id, selectedCBId) {
+        setLayouts(function (prev) {
+            var _a, _b;
+            var _c, _d;
+            var currentLayoutCopy = (0, deepCopy_1.default)(prev[layoutByDevice]);
+            var additionalSelectedCBLayout = (function () {
+                if (selectedCBId === undefined) {
+                    return null;
+                }
+                if (id === selectedCBId) {
+                    return null;
+                }
+                return (0, renderHelpers_1.getLayoutItem)(currentLayoutCopy, selectedCBId.toString());
+            })();
+            var layout = (0, renderHelpers_1.getLayoutItem)(currentLayoutCopy, id.toString());
+            if (!layout) {
+                return prev;
+            }
+            var prevGroupIdx = currentLayoutCopy.findIndex(function (item) { return item.i === 'group'; });
+            if (prevGroupIdx < 0) {
+                var collisions = (0, renderHelpers_1.getAllCollisions)(currentLayoutCopy, layout);
+                var groupLayouts = __spreadArray([layout], collisions, true);
+                if (collisions.length === 0 && !additionalSelectedCBLayout) {
+                    sectionActionHandler &&
+                        sectionActionHandler({
+                            type: '@CUSTOMSECTION/COLLISION_NOT_FOUND',
+                            payload: {
+                                message: '겹치는 부분이 없어, 아무련 변화가 없습니다.'
+                            }
+                        });
+                    return prev;
+                }
+                if (additionalSelectedCBLayout) {
+                    var alreadyHas = collisions.some(function (each) { return each.i === additionalSelectedCBLayout.i; });
+                    !alreadyHas && groupLayouts.push(additionalSelectedCBLayout);
+                }
+                var group_2 = (0, utils_1.getGroupForMultiple)(groupLayouts);
+                var filtered = currentLayoutCopy.filter(function (layout) { return !group_2.childrenIds.includes(layout.i); });
+                sectionActionHandler &&
+                    sectionActionHandler({
+                        type: '@CUSTOMSECTION/GROUP_CREATED',
+                        payload: {
+                            message: 'group generated with collision detect',
+                            data: group_2
+                        }
+                    });
+                return __assign(__assign({}, prev), (_a = {}, _a[layoutByDevice] = __spreadArray([group_2], filtered, true), _a));
+            }
+            var groupItem = currentLayoutCopy.splice(prevGroupIdx, 1)[0];
+            if (groupItem) {
+                var collisions = (0, renderHelpers_1.getAllCollisions)(currentLayoutCopy, layout);
+                var groupItems = (_d = (_c = groupItem.groupLayouts) === null || _c === void 0 ? void 0 : _c.map(function (each) { return (__assign(__assign({}, each), { x: groupItem.x + each.x, y: groupItem.y + each.y })); })) !== null && _d !== void 0 ? _d : [];
+                var newGroup_1 = (0, utils_1.getGroupForMultiple)([layout].concat(collisions).concat(groupItems));
+                var filtered = currentLayoutCopy.filter(function (layout) { return !newGroup_1.childrenIds.includes(layout.i); });
+                sectionActionHandler &&
+                    sectionActionHandler({
+                        type: '@CUSTOMSECTION/GROUP_CREATED',
+                        payload: {
+                            message: 'group generated with collision detect',
+                            data: newGroup_1
+                        }
+                    });
+                return __assign(__assign({}, prev), (_b = {}, _b[layoutByDevice] = __spreadArray([newGroup_1], filtered, true), _b));
+            }
+            return prev;
+        });
+    }
+    function makeCollisionOfBulk() {
+        setLayouts(function (prev) {
+            var _a;
+            var _b, _c;
+            var currentLayoutCopy = (0, deepCopy_1.default)(prev[layoutByDevice]);
+            var prevGroupIdx = currentLayoutCopy.findIndex(function (item) { return item.i === 'group'; });
+            var groupItem = currentLayoutCopy.splice(prevGroupIdx, 1)[0];
+            var collisions = (0, renderHelpers_1.getAllCollisions)(currentLayoutCopy, groupItem);
+            var groupItems = (_c = (_b = groupItem.groupLayouts) === null || _b === void 0 ? void 0 : _b.map(function (each) { return (__assign(__assign({}, each), { x: groupItem.x + each.x, y: groupItem.y + each.y })); })) !== null && _c !== void 0 ? _c : [];
+            var newGroup = (0, utils_1.getGroupForMultiple)(groupItems.concat(collisions));
+            var filtered = currentLayoutCopy.filter(function (layout) { return !newGroup.childrenIds.includes(layout.i); });
+            sectionActionHandler &&
+                sectionActionHandler({
+                    type: '@CUSTOMSECTION/GROUP_CREATED',
+                    payload: {
+                        message: 'group generated with collision detect',
+                        data: newGroup
+                    }
+                });
+            return __assign(__assign({}, prev), (_a = {}, _a[layoutByDevice] = __spreadArray([newGroup], filtered, true), _a));
+        });
+    }
+    return {
+        setGroupCB: setGroupCB,
+        breakGroupCB: breakGroupCB,
+        makeAllInOneGroup: makeAllInOneGroup,
+        escapeFromGroup: escapeFromGroup,
+        makeCollisionGroup: makeCollisionGroup,
+        makeCollisionOfBulk: makeCollisionOfBulk
+    };
+}
+function getGroupCB(layout) {
+    var groupIdx = layout.findIndex(function (item) { return item.i === 'group'; });
+    if (groupIdx < 0) {
+        return null;
+    }
+    var groupItem = layout[groupIdx];
+    return groupItem;
+}
+exports.getGroupCB = getGroupCB;
+var filterItemsById = function (layout, idsToRemove) {
+    return layout.filter(function (item) { return !idsToRemove.includes(item.i); });
+};
+exports.filterItemsById = filterItemsById;
+exports.default = useGroupDrag;

package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useGroupDrag/utils.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentBlock } from '../../types';
+import type { LayoutItem } from 'publ-echo/dist/lib';
+export interface LayoutItemWithGroupType extends LayoutItem {
+    childrenIds: string[];
+    keepInLastIndex?: boolean;
+}
+export declare function getGroupData(elem1: LayoutItemWithGroupType, elem2: LayoutItemWithGroupType): LayoutItemWithGroupType;
+export declare function recalculatedGroup(group: LayoutItemWithGroupType): LayoutItemWithGroupType;
+export declare function getGroupForMultiple(elems: LayoutItem[]): LayoutItemWithGroupType;
+export declare function splitComponentBlocksByGroup(componentBlocks: ComponentBlock[], groupIds: string[]): {
+    inGroup: ComponentBlock[];
+    notInGroup: ComponentBlock[];
+};

package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useGroupDrag/utils.js

@@ -0,0 +1,127 @@
+"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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.splitComponentBlocksByGroup = exports.getGroupForMultiple = exports.recalculatedGroup = exports.getGroupData = void 0;
+function getGroupData(elem1, elem2) {
+    var _a, _b;
+    var minX = Math.min(elem1.x, elem2.x);
+    var minY = Math.min(elem1.y, elem2.y);
+    var elem1W = elem1.x - minX + elem1.w;
+    var elem2W = elem2.x - minX + elem2.w;
+    var elem1H = elem1.y - minY + elem1.h;
+    var elem2H = elem2.y - minY + elem2.h;
+    // NOTE: maxW, maxH 이름 변경 필요.
+    var maxW = Math.max(elem1W, elem2W);
+    var maxH = Math.max(elem1H, elem2H);
+    var maxZ = Math.max((_a = elem1 === null || elem1 === void 0 ? void 0 : elem1.z) !== null && _a !== void 0 ? _a : 0, (_b = elem2 === null || elem2 === void 0 ? void 0 : elem2.z) !== null && _b !== void 0 ? _b : 0);
+    var elem1InnerData = __assign(__assign({}, elem1), { x: elem1.x - minX, y: elem1.y - minY });
+    var elem2InnerData = __assign(__assign({}, elem2), { x: elem2.x - minX, y: elem2.y - minY });
+    var groupLayouts = elem1.groupLayouts
+        ? getAdaptedGroupLayouts(elem1.groupLayouts, elem2InnerData, elem1, minX, minY)
+        : [elem1InnerData, elem2InnerData];
+    var childrenIds = elem1.groupLayouts ? __spreadArray(__spreadArray([], elem1.childrenIds, true), [elem2.i], false) : [elem1.i, elem2.i];
+    return {
+        i: 'group',
+        x: minX,
+        y: minY,
+        w: maxW,
+        h: maxH,
+        z: maxZ,
+        groupLayouts: groupLayouts,
+        childrenIds: childrenIds
+    };
+}
+exports.getGroupData = getGroupData;
+function recalculatedGroup(group) {
+    var _a;
+    if (!group.groupLayouts) {
+        return group;
+    }
+    var groupItemsWithOrgPlacement = (_a = group.groupLayouts.map(function (each) { return (__assign(__assign({}, each), { x: group.x + each.x, y: group.y + each.y })); })) !== null && _a !== void 0 ? _a : [];
+    return getGroupForMultiple(groupItemsWithOrgPlacement);
+}
+exports.recalculatedGroup = recalculatedGroup;
+function getGroupForMultiple(elems) {
+    if (elems.length === 0) {
+        throw new Error('Array must contain at least one element.');
+    }
+    var _a = elems.reduce(function (acc, elem, idx, arr) {
+        var _a, _b;
+        if (idx === arr.length - 1) {
+            return acc;
+        }
+        var elem1 = idx === 0 ? elem : acc;
+        var elem2 = arr[idx + 1];
+        var minX = Math.min(elem1.x, elem2.x);
+        var minY = Math.min(elem1.y, elem2.y);
+        var elem1W = elem1.x - minX + elem1.w;
+        var elem2W = elem2.x - minX + elem2.w;
+        var elem1H = elem1.y - minY + elem1.h;
+        var elem2H = elem2.y - minY + elem2.h;
+        var maxZ = Math.max((_a = elem1 === null || elem1 === void 0 ? void 0 : elem1.z) !== null && _a !== void 0 ? _a : 0, (_b = elem2 === null || elem2 === void 0 ? void 0 : elem2.z) !== null && _b !== void 0 ? _b : 0);
+        return {
+            x: Math.min(elem1.x, elem2.x),
+            y: Math.min(elem1.y, elem2.y),
+            w: Math.max(elem1W, elem2W),
+            h: Math.max(elem1H, elem2H),
+            z: maxZ
+        };
+    }, { x: 0, y: 0, w: 0, h: 0, z: 0 }), minX = _a.x, minY = _a.y, maxW = _a.w, maxH = _a.h, maxZ = _a.z;
+    var groupLayouts = elems.map(function (elem) { return (__assign(__assign({}, elem), { x: elem.x - minX, y: elem.y - minY })); });
+    var childrenIds = elems.map(function (elem) { return elem.i; });
+    return {
+        i: 'group',
+        x: minX,
+        y: minY,
+        w: maxW,
+        h: maxH,
+        z: maxZ,
+        groupLayouts: groupLayouts,
+        childrenIds: childrenIds
+    };
+}
+exports.getGroupForMultiple = getGroupForMultiple;
+function getAdaptedGroupLayouts(originals, comming, ogWrapper, minX, minY) {
+    var ogs = originals.map(function (og) {
+        var xNagativeGap = Math.max(0, ogWrapper.x - minX);
+        var yNagativeGap = Math.max(0, ogWrapper.y - minY);
+        return __assign(__assign({}, og), { x: og.x + xNagativeGap, y: og.y + yNagativeGap });
+    });
+    return __spreadArray(__spreadArray([], ogs, true), [comming], false);
+}
+function splitComponentBlocksByGroup(componentBlocks, groupIds) {
+    var inGroup = [];
+    var notInGroup = [];
+    componentBlocks.forEach(function (cb) {
+        if (groupIds.includes(cb.id.toString())) {
+            inGroup.push(cb);
+        }
+        else {
+            notInGroup.push(cb);
+        }
+    });
+    return {
+        inGroup: inGroup,
+        notInGroup: notInGroup
+    };
+}
+exports.splitComponentBlocksByGroup = splitComponentBlocksByGroup;

package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useIntersectionObserver.d.ts

@@ -2,5 +2,5 @@ import { RefObject } from 'react';
 interface Args extends IntersectionObserverInit {
     freezeOnceVisible?: boolean;
 }
-export declare function useIntersectionObserver(elementRef: RefObject<Element>, { threshold, root, rootMargin, freezeOnceVisible }: Args): IntersectionObserverEntry | undefined;
+export declare function useIntersectionObserver(elementRef: RefObject<Element>, { threshold, root, rootMargin, freezeOnceVisible }: Args, deps: any[]): IntersectionObserverEntry | undefined;
 export {};

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

@@ -1,26 +1,38 @@
 "use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useIntersectionObserver = void 0;
 var react_1 = require("react");
-function useIntersectionObserver(elementRef, _a) {
+function useIntersectionObserver(elementRef, _a, deps) {
     var _b = _a.threshold, threshold = _b === void 0 ? 0 : _b, _c = _a.root, root = _c === void 0 ? null : _c, _d = _a.rootMargin, rootMargin = _d === void 0 ? '0%' : _d, _e = _a.freezeOnceVisible, freezeOnceVisible = _e === void 0 ? false : _e;
     var _f = (0, react_1.useState)(), entry = _f[0], setEntry = _f[1];
     var frozen = (entry === null || entry === void 0 ? void 0 : entry.isIntersecting) && freezeOnceVisible;
-    var updateEntry = function (_a) {
-        var entry = _a[0];
-        setEntry(entry);
-    };
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useLayoutEffect)(function () {
+        var updateEntry = function (_a) {
+            var entry = _a[0];
+            setEntry(entry);
+        };
         var node = elementRef === null || elementRef === void 0 ? void 0 : elementRef.current; // DOM Ref
         var hasIOSupport = !!window.IntersectionObserver;
-        if (!hasIOSupport || frozen || !node)
+        if (!hasIOSupport || frozen || !node) {
             return;
+        }
         var observerParams = { threshold: threshold, root: root, rootMargin: rootMargin };
         var observer = new IntersectionObserver(updateEntry, observerParams);
         observer.observe(node);
-        return function () { return observer.disconnect(); };
+        return function () {
+            observer.disconnect();
+        };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [elementRef === null || elementRef === void 0 ? void 0 : elementRef.current, JSON.stringify(threshold), root, rootMargin, frozen]);
+    }, __spreadArray([elementRef === null || elementRef === void 0 ? void 0 : elementRef.current, JSON.stringify(threshold), root, rootMargin, frozen], deps, true));
     return entry;
 }
 exports.useIntersectionObserver = useIntersectionObserver;

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_IMG_PROPERTIES_TYPE, CB_RICHTEXT_PROPERTIES_TYPE, CB_TEXT_PROPERTIES_TYPE, CB_TWITTER_PROPERTIES_TYPE, CB_YOUTUBE_PROPERTIES_TYPE } from './util/types';
+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;
+export type ComponentBlock = CB_TEXT_TYPE | CB_BTN_TYPE | CB_RICHTEXT | CB_DIVIDER | CB_IMG | CB_YOUTUBE | CB_TWITTER | CB_IFRAME;
 type GeneralCustomSectionType = {
     id: number;
     type: 'GENERAL';
@@ -9,34 +9,62 @@ type GeneralCustomSectionType = {
     queryableDefinitionPreset: string;
     dynamicLayoutSectionId: number;
 };
-export type AllCBProperties = CB_TEXT_PROPERTIES_TYPE | CB_BTN_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE | CB_DIVIDER_PROPERTIES_TYPE | CB_YOUTUBE_PROPERTIES_TYPE | CB_IMG_PROPERTIES_TYPE | CB_TWITTER_PROPERTIES_TYPE;
+export type GroupCustomSectionType = {
+    id: 'group';
+    type: 'GROUP';
+    availablePlugins: Array<string>;
+    queryableTapSrc: string;
+    queryableDefinitionPreset: string;
+    dynamicLayoutSectionId: number;
+};
+export type AllCBProperties = CB_TEXT_PROPERTIES_TYPE | CB_BTN_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE | CB_DIVIDER_PROPERTIES_TYPE | CB_YOUTUBE_PROPERTIES_TYPE | CB_IMG_PROPERTIES_TYPE | CB_TWITTER_PROPERTIES_TYPE | CB_EMBED_PROPERTIES_TYPE;
 export type CB_TEXT_TYPE = GeneralCustomSectionType & {
     componentBlockCode: CB_ALL_CODES.CB_TEXT;
-    properties: CB_TEXT_PROPERTIES_TYPE;
+    jsonProperties: {
+        data: CB_TEXT_PROPERTIES_TYPE;
+    };
 };
 export type CB_BTN_TYPE = GeneralCustomSectionType & {
     componentBlockCode: CB_ALL_CODES.CB_BTN;
-    properties: CB_BTN_PROPERTIES_TYPE;
+    jsonProperties: {
+        data: CB_BTN_PROPERTIES_TYPE;
+    };
 };
 export type CB_RICHTEXT = GeneralCustomSectionType & {
     componentBlockCode: CB_ALL_CODES.CB_RICHTEXT;
-    properties: CB_RICHTEXT_PROPERTIES_TYPE;
+    jsonProperties: {
+        data: CB_RICHTEXT_PROPERTIES_TYPE;
+    };
 };
 export type CB_DIVIDER = GeneralCustomSectionType & {
     componentBlockCode: CB_ALL_CODES.CB_DIVIDER;
-    properties: CB_DIVIDER_PROPERTIES_TYPE;
+    jsonProperties: {
+        data: CB_DIVIDER_PROPERTIES_TYPE;
+    };
 };
 export type CB_IMG = GeneralCustomSectionType & {
     componentBlockCode: CB_ALL_CODES.CB_IMG;
-    properties: CB_IMG_PROPERTIES_TYPE;
+    jsonProperties: {
+        data: CB_IMG_PROPERTIES_TYPE;
+    };
 };
 export type CB_YOUTUBE = GeneralCustomSectionType & {
     componentBlockCode: CB_ALL_CODES.CB_YOUTUBE;
-    properties: CB_YOUTUBE_PROPERTIES_TYPE;
+    jsonProperties: {
+        data: CB_YOUTUBE_PROPERTIES_TYPE;
+    };
 };
 export type CB_TWITTER = GeneralCustomSectionType & {
     componentBlockCode: CB_ALL_CODES.CB_TWITTER;
-    properties: CB_TWITTER_PROPERTIES_TYPE;
+    jsonProperties: {
+        data: CB_TWITTER_PROPERTIES_TYPE;
+    };
+};
+export type CB_IFRAME = GeneralCustomSectionType & {
+    componentBlockCode: CB_ALL_CODES.CB_EMBED;
+    jsonProperties: {
+        data: CB_TWITTER_PROPERTIES_TYPE;
+    };
 };
 export declare enum CB_ALL_CODES {
     CB_TEXT = "CB_TEXT",
@@ -45,6 +73,7 @@ export declare enum CB_ALL_CODES {
     CB_DIVIDER = "CB_DIVIDER",
     CB_IMG = "CB_IMG",
     CB_YOUTUBE = "CB_YOUTUBE",
-    CB_TWITTER = "CB_TWITTER"
+    CB_TWITTER = "CB_TWITTER",
+    CB_EMBED = "CB_EMBED"
 }
 export {};

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

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

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/parseJsonProperties.d.ts

@@ -1,3 +1,3 @@
 import type { Device, JsonPropertiesParserResult } from './types';
 import type { ISectionJsonProperties } from '../../../../DynamicLayout/types';
-export default function parseJsonProperties(properties: ISectionJsonProperties | undefined, device: Device): JsonPropertiesParserResult;
+export default function parseJsonProperties(properties: ISectionJsonProperties['data'] | undefined, device: Device): JsonPropertiesParserResult;

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

@@ -12,8 +12,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.parsePlacement = void 0;
 function parsePlacement(components) {
     return components.reduce(function (acc, cur) {
-        var id = cur.id, properties = cur.properties;
-        var _a = parsePropPlacement(properties.CB_PLACEMENT_PROP_PLACEMENT, id), mobileLayout = _a.mobileLayout, desktopLayout = _a.desktopLayout;
+        var id = cur.id, jsonProperties = cur.jsonProperties;
+        var _a = parsePropPlacement(jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, id), mobileLayout = _a.mobileLayout, desktopLayout = _a.desktopLayout;
         return {
             sm: __spreadArray(__spreadArray([], acc.sm, true), [mobileLayout], false),
             lg: __spreadArray(__spreadArray([], acc.lg, true), [desktopLayout], false)

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/parseProperties.d.ts

@@ -1,5 +1,5 @@
 import { CB_LAYOUT_PROP_KEYS } from './layoutPropParsers/types';
 import { CB_STYLE_PROP_KEYS } from './stylePropParsers/types';
-import type { Device, ParserResult, CB_TEXT_PROPERTIES_TYPE, CB_BTN_PROPERTIES_TYPE, CB_IMG_PROPERTIES_TYPE, CB_TWITTER_PROPERTIES_TYPE, CB_DIVIDER_PROPERTIES_TYPE, CB_YOUTUBE_PROPERTIES_TYPE, CB_RICHTEXT_PROPERTIES_TYPE } from './types';
+import type { Device, ParserResult, CB_TEXT_PROPERTIES_TYPE, CB_BTN_PROPERTIES_TYPE, CB_IMG_PROPERTIES_TYPE, CB_TWITTER_PROPERTIES_TYPE, CB_DIVIDER_PROPERTIES_TYPE, CB_YOUTUBE_PROPERTIES_TYPE, CB_RICHTEXT_PROPERTIES_TYPE, CB_EMBED_PROPERTIES_TYPE } from './types';
 export type specTypes = CB_LAYOUT_PROP_KEYS | CB_STYLE_PROP_KEYS;
-export default function parseProperties(properties: CB_TEXT_PROPERTIES_TYPE | CB_BTN_PROPERTIES_TYPE | CB_IMG_PROPERTIES_TYPE | CB_TWITTER_PROPERTIES_TYPE | CB_DIVIDER_PROPERTIES_TYPE | CB_YOUTUBE_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE, device: Device): ParserResult;
+export default function parseProperties(properties: CB_TEXT_PROPERTIES_TYPE | CB_BTN_PROPERTIES_TYPE | CB_IMG_PROPERTIES_TYPE | CB_TWITTER_PROPERTIES_TYPE | CB_DIVIDER_PROPERTIES_TYPE | CB_YOUTUBE_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE | CB_EMBED_PROPERTIES_TYPE, device: Device): ParserResult;

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

@@ -1,7 +1,7 @@
 import type { CB_BTNTEXT_STYLE_PROPS, CB_STYLE_PROP_BTNCOLOR_SPECS } from '../components/ComponentBlock/componentBlocks/Button/btnTypes';
 import type { CB_STYLE_PROP_TEXT_SPECS } from '../components/ComponentBlock/componentBlocks/Text/types';
 import type { CB_TWITTER_STYLE_PROPS } from '../components/ComponentBlock/componentBlocks/Twitter/types';
-import type { CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_IMAGE, CB_CONTENT_PROP_TEXT, CB_CONTENT_PROP_TWITTER } from '../components/ComponentBlock/componentBlocks/types';
+import type { CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CODEBLOCK, CB_CONTENT_PROP_IMAGE, CB_CONTENT_PROP_TEXT, CB_CONTENT_PROP_TWITTER } from '../components/ComponentBlock/componentBlocks/types';
 import type { CB_CONTENT_PROP_YOUTUBE_TYPE, CB_STYLE_PROP_BGCOLOR_SPECS } from '../components/ComponentBlock/componentBlocks/Youtube/types';
 import type { CB_CONTENT_PROP_VISIBILITY_SPECS } from './contentPropParsers/parseContentVisibility';
 import type { CB_EFFECT_PROP_ENTANIM_SPECS } from './effectPropParsers/parseEffectPropEntAnim';
@@ -82,6 +82,16 @@ export type CB_TWITTER_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
     CB_LAYOUT_PROP_PADDING: CB_LAYOUT_PROP_PADDING_SPECS;
     CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
 };
+export type CB_EMBED_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
+    CB_CONTENT_PROP_CODEBLOCK: CB_CONTENT_PROP_CODEBLOCK;
+    CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
+    CB_STYLE_PROP_SHADOW: CB_STYLE_PROP_SHADOW_SPECS;
+    CB_STYLE_PROP_BGCOLOR: CB_STYLE_PROP_BGCOLOR_SPECS;
+    CB_STYLE_PROP_OPACITY: CB_STYLE_PROP_TEXT_OPACITY_SPECS;
+    CB_LAYOUT_PROP_PADDING: CB_LAYOUT_PROP_PADDING_SPECS;
+    CB_LAYOUT_PROP_ARRANGE: CB_LAYOUT_PROP_ARRANGE_SPECS;
+    CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
+};
 export type CB_RICHTEXT_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
     CB_CONTENT_PROP_TEXTEDIT: {
         CB_CONTENT_PROP_TEXTEDIT_SPEC_EDITOR: string;
@@ -132,3 +142,6 @@ export type ParserResult = {
 };
 export type JsonPropertiesParserResult = Omit<ParserResult, 'hoverStyle'> & OverlayStyle;
 export type NamedPropAllTypes = NamedStylePropType | NamedLayoutPropType;
+export type IndexForIntersection = {
+    index: number;
+};