@pepperi-addons/ngx-composite-lib 0.4.2-beta.73 → 0.4.2-beta.75

package/fesm2015/pepperi-addons-ngx-composite-lib-layout-builder.mjs

@@ -174,7 +174,9 @@ class LayoutBuilderInternalService {
         this.translate = translate;
         this.dialogService = dialogService;
         this._defaultSectionTitle = '';
+        // This configuration is for blocks behavior.
         this._blocksLimitNumber = 0;
+        this._navigateToEditorAfterBlockAdded = false;
         this._editorsBreadCrumb = Array();
         this._editMode = false;
         this._editableState = false;
@@ -204,14 +206,16 @@ class LayoutBuilderInternalService {
         this._blocksRemovedEventSubject = new BehaviorSubject([]);
         // This subject is for skeleton.
         this._showSkeletonSubject = new BehaviorSubject(true);
-        // This subjects is for load the available blocks to drag into map for better performance.
-        this._availableBlocksForDragMap = new Map();
-        this._availableBlocksForDragMapSubject = new BehaviorSubject(this.availableBlocksForDragMap);
         //
-        this._defaultSectionTitle = this.translate.instant('LAYOUT_BUILDER.SECTION');
+        this.translate.get('LAYOUT_BUILDER.SECTION').subscribe((res) => {
+            // Set the default section name.
+            this._defaultSectionTitle = res;
+        });
     }
-    setBlocksLimitNumber(value) {
-        this._blocksLimitNumber = value;
+    setBlocksConfig(value) {
+        var _a;
+        this._blocksLimitNumber = value.blocksLimitNumber || 0;
+        this._navigateToEditorAfterBlockAdded = (_a = value.navigateToEditorAfterBlockAdded) !== null && _a !== void 0 ? _a : false;
     }
     get editMode() {
         return this._editMode;
@@ -263,12 +267,6 @@ class LayoutBuilderInternalService {
     get showSkeletonChange$() {
         return this._showSkeletonSubject.asObservable().pipe(distinctUntilChanged());
     }
-    get availableBlocksForDragMap() {
-        return this._availableBlocksForDragMap;
-    }
-    get availableBlocksForDragMapChange$() {
-        return this._availableBlocksForDragMapSubject.asObservable();
-    }
     setEditableState() {
         this._editableState = this.editMode && !this._previewModeSubject.getValue();
     }
@@ -296,9 +294,6 @@ class LayoutBuilderInternalService {
     notifyEditorChange(editor) {
         this._editorSubject.next(editor);
     }
-    notifyAvailableBlocksForDragMapChange() {
-        this._availableBlocksForDragMapSubject.next(this.availableBlocksForDragMap);
-    }
     notifyPreviewModeChange(value) {
         this._previewModeSubject.next(value);
         this.setEditableState();
@@ -325,14 +320,16 @@ class LayoutBuilderInternalService {
     loadDefaultEditor(layoutView) {
         this._editorsBreadCrumb = new Array();
         if (layoutView) {
-            this._editorsBreadCrumb.push({
-                id: LayoutBuilderInternalService.MAIN_EDITOR_ID,
-                type: 'layout-builder',
-                title: this.translate.instant('LAYOUT_BUILDER.DEFAULT_TITLE'),
-                // hostObject: {} // Updates in updateLayoutEditorProperties function above.
+            this.translate.get('LAYOUT_BUILDER.DEFAULT_TITLE').subscribe((title) => {
+                this._editorsBreadCrumb.push({
+                    id: LayoutBuilderInternalService.MAIN_EDITOR_ID,
+                    type: 'layout-builder',
+                    title: title,
+                    // hostObject: {} // Updates in updateLayoutEditorProperties function above.
+                });
+                this.updateLayoutEditorProperties(layoutView);
+                this.notifyEditorChange(this._editorsBreadCrumb[0]);
             });
-            this.updateLayoutEditorProperties(layoutView);
-            this.notifyEditorChange(this._editorsBreadCrumb[0]);
         }
         else {
             this.notifyEditorChange(null);
@@ -343,25 +340,20 @@ class LayoutBuilderInternalService {
             this.notifyEditorChange(this._editorsBreadCrumb[this._editorsBreadCrumb.length - 1]);
         }
     }
-    getEditorByType(editorType, id) {
+    getEditorByType(editorType, id, title = '') {
         // Build editor object.
         let editor = null;
         if (editorType === 'section') {
-            editor = this.getSectionEditor(id);
+            editor = this.getSectionEditor(id, title);
         }
         else if (editorType === 'block') {
-            editor = this.getBlockEditor(id);
+            editor = this.getBlockEditor(id, title);
         }
         return editor;
     }
-    getBlockEditor(blockKey) {
-        var _a, _b;
-        const blockContainer = this.getBlockContainerByBlockKey(blockKey);
-        const defaultTitle = this.translate.instant('LAYOUT_BUILDER.NO_TITLE');
-        let blockTitle = defaultTitle;
-        if (blockContainer) {
-            blockTitle = ((_b = (_a = this.availableBlocksForDragMap) === null || _a === void 0 ? void 0 : _a.get(blockContainer === null || blockContainer === void 0 ? void 0 : blockContainer.DraggableItemKey)) === null || _b === void 0 ? void 0 : _b.title) || defaultTitle;
-        }
+    getBlockEditor(blockKey, title) {
+        // TODO: Get block editor title.
+        const blockTitle = title || this.translate.instant('LAYOUT_BUILDER.NO_TITLE');
         return {
             id: blockKey,
             type: 'block',
@@ -373,7 +365,7 @@ class LayoutBuilderInternalService {
     getSectionEditorTitle(section, sectionIndex) {
         return section.Name || `${this._defaultSectionTitle} ${sectionIndex + 1}`;
     }
-    getSectionEditor(sectionId) {
+    getSectionEditor(sectionId, title) {
         var _a, _b;
         const layoutView = this._layoutViewSubject.getValue();
         const sections = (layoutView === null || layoutView === void 0 ? void 0 : layoutView.Layout.Sections) || [];
@@ -391,7 +383,7 @@ class LayoutBuilderInternalService {
             return {
                 id: sectionId,
                 type: 'section',
-                title: this.getSectionEditorTitle(section, sectionIndex),
+                title: title || this.getSectionEditorTitle(section, sectionIndex),
                 hostObject: sectionEditor
             };
         }
@@ -436,21 +428,21 @@ class LayoutBuilderInternalService {
         }
         return widthToSet;
     }
-    getBlockContainerByBlockKey(blockKey) {
-        let blockContainerToFind = undefined;
-        const layoutView = this._layoutViewSubject.getValue();
-        const sections = (layoutView === null || layoutView === void 0 ? void 0 : layoutView.Layout.Sections) || [];
-        for (let sectionIndex = 0; sectionIndex < sections.length; sectionIndex++) {
-            const section = sections[sectionIndex];
-            // Get the block container.
-            const columnIndex = section.Columns.findIndex(column => { var _a; return ((_a = column.BlockContainer) === null || _a === void 0 ? void 0 : _a.BlockKey) === blockKey; });
-            if (columnIndex > -1) {
-                blockContainerToFind = section.Columns[columnIndex].BlockContainer;
-                break;
-            }
-        }
-        return blockContainerToFind;
-    }
+    // private getBlockContainerByBlockKey(blockKey: string): IPepLayoutBlockContainer | undefined {
+    //     let blockContainerToFind: IPepLayoutBlockContainer | undefined = undefined;
+    //     const layoutView = this._layoutViewSubject.getValue();
+    //     const sections = layoutView?.Layout.Sections || [];
+    //     for (let sectionIndex = 0; sectionIndex < sections.length; sectionIndex++) {
+    //         const section = sections[sectionIndex];
+    //         // Get the block container.
+    //         const columnIndex = section.Columns.findIndex(column => column.BlockContainer?.BlockKey === blockKey);
+    //         if (columnIndex > -1) {
+    //             blockContainerToFind = section.Columns[columnIndex].BlockContainer
+    //             break;
+    //         }
+    //     }
+    //     return blockContainerToFind;
+    // }
     getBlocksNumber() {
         var _a, _b;
         let blocksNumber = 0;
@@ -486,13 +478,6 @@ class LayoutBuilderInternalService {
     changePreviewMode(value) {
         this.notifyPreviewModeChange(value);
     }
-    setAvailableBlocksToDrag(availableBlocksForDrag) {
-        this._availableBlocksForDragMap.clear();
-        availableBlocksForDrag.forEach(block => {
-            this._availableBlocksForDragMap.set(block.data.key, block);
-        });
-        this.notifyAvailableBlocksForDragMapChange();
-    }
     getCurrentScreenType() {
         return this.getScreenType(this._screenSizeSubject.getValue());
     }
@@ -507,7 +492,7 @@ class LayoutBuilderInternalService {
     getIsHidden(hideIn, currentScreenType) {
         return (hideIn && (hideIn === null || hideIn === void 0 ? void 0 : hideIn.length) > 0) ? hideIn.some(hi => hi === currentScreenType) : false;
     }
-    navigateToEditor(editorType, id) {
+    navigateToEditor(editorType, id, title) {
         let success = false;
         // Cannot navigate into 'layout-builder' because this is first and const in the editorsBreadCrumbs.
         if (editorType !== 'layout-builder' && (id === null || id === void 0 ? void 0 : id.length) > 0) {
@@ -519,7 +504,7 @@ class LayoutBuilderInternalService {
                     // Always pop the last and insert the current.
                     this._editorsBreadCrumb.pop();
                 }
-                let editor = this.getEditorByType(editorType, id);
+                let editor = this.getEditorByType(editorType, id, title);
                 if (editor) {
                     this._editorsBreadCrumb.push(editor);
                     this.changeCurrentEditor();
@@ -713,7 +698,6 @@ class LayoutBuilderInternalService {
                         const blockKey = PepGuid.newGuid();
                         currentColumn.BlockContainer = {
                             BlockKey: blockKey,
-                            DraggableItemKey: draggableItem.data.key,
                         };
                         // Here we update the layout view cause the layout is updated.
                         this.notifyLayoutViewChange(layoutView);
@@ -723,8 +707,10 @@ class LayoutBuilderInternalService {
                             DraggableItem: draggableItem,
                         };
                         this.notifyBlockAdded(blockAddedEventData);
-                        // Navigate to the block editor.
-                        this.navigateToEditor('block', blockKey);
+                        if (this._navigateToEditorAfterBlockAdded) {
+                            // Navigate to the block editor.
+                            this.navigateToEditor('block', blockKey, draggableItem.data.title);
+                        }
                     }
                 }
                 else {
@@ -833,13 +819,15 @@ class SectionBlockComponent extends BaseDestroyerDirective {
         this.dragExited = new EventEmitter();
         this.dragEntered = new EventEmitter();
         this.hideForCurrentScreenType = false;
+        // protected remoteLoaderOptions: PepRemoteLoaderOptions;
+        // protected availableBlock: IPepDraggableItem | undefined;
+        this.blockTitle = '';
     }
     set blockContainer(value) {
-        var _a, _b;
         this._blockContainer = value;
-        if (this._blockContainer) {
-            this.availableBlock = (_a = this.layoutBuilderInternalService.availableBlocksForDragMap) === null || _a === void 0 ? void 0 : _a.get((_b = this._blockContainer) === null || _b === void 0 ? void 0 : _b.DraggableItemKey);
-        }
+        // if (this._blockContainer) {
+        //     this.availableBlock = this.layoutBuilderInternalService.availableBlocksForDragMap?.get(this._blockContainer?.DraggableItemKey);
+        // }
         this.setIfHideForCurrentScreenType();
     }
     get blockContainer() {
@@ -857,17 +845,19 @@ class SectionBlockComponent extends BaseDestroyerDirective {
             this.layoutBuilderInternalService.getIsHidden(this.blockContainer.Hide, this.screenType) : false;
     }
     ngOnInit() {
+        var _a;
+        this.blockTitle = ((_a = this.blockContainer) === null || _a === void 0 ? void 0 : _a.BlockKey) || '';
         // 
-        this.layoutBuilderInternalService.availableBlocksForDragMapChange$.pipe(this.getDestroyer()).subscribe((availableBlocksForDragMap) => {
-            if (availableBlocksForDragMap && this.blockContainer) {
-                this.availableBlock = availableBlocksForDragMap.get(this.blockContainer.DraggableItemKey);
-            }
-        });
+        // this.layoutBuilderInternalService.availableBlocksForDragMapChange$.pipe(this.getDestroyer()).subscribe((availableBlocksForDragMap) => {
+        //     if (availableBlocksForDragMap && this.blockContainer) {
+        //         this.availableBlock = (availableBlocksForDragMap as ReadonlyMap<string, IPepDraggableItem>).get(this.blockContainer.DraggableItemKey);
+        //     }
+        // });
     }
     onEditBlockClick() {
         var _a;
         if ((_a = this.blockContainer) === null || _a === void 0 ? void 0 : _a.BlockKey) {
-            this.layoutBuilderInternalService.navigateToEditor('block', this.blockContainer.BlockKey);
+            this.layoutBuilderInternalService.navigateToEditor('block', this.blockContainer.BlockKey, this.blockTitle);
         }
     }
     onRemoveBlockClick() {
@@ -900,10 +890,10 @@ class SectionBlockComponent extends BaseDestroyerDirective {
     }
 }
 SectionBlockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionBlockComponent, deps: [{ token: LayoutBuilderInternalService }], target: i0.ɵɵFactoryTarget.Component });
-SectionBlockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: SectionBlockComponent, selector: "section-block", inputs: { blockTemplate: "blockTemplate", sectionKey: "sectionKey", sectionHeight: "sectionHeight", isMainEditorState: "isMainEditorState", editable: "editable", active: "active", blockContainer: "blockContainer", screenType: "screenType" }, outputs: { dragExited: "dragExited", dragEntered: "dragEntered" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"blockContainer?.BlockKey && (editable || !hideForCurrentScreenType)\" \n    class=\"section-block-container\"\n    [ngClass]=\"{ 'editable-state': editable, 'block-hidden-state': hideForCurrentScreenType, 'active-block': active }\"\n    cdkDrag [cdkDragData]=\"blockContainer\" [cdkDragDisabled]=\"!editable || !isMainEditorState\" \n    (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\"\n    (cdkDragExited)=\"onDragExited($event)\" (cdkDragEntered)=\"onDragEntered($event)\">\n   \n    <pep-draggable-item *ngIf=\"editable && isMainEditorState\" cdkDragHandle style=\"cursor: grab;\"\n        class=\"block-toolbar\" [title]=\"availableBlock?.title || blockContainer?.BlockKey || ''\" >\n        <ng-container pep-actions>\n            <pep-button classNames=\"caution\" sizeType=\"xs\" iconName=\"system_bin\" (buttonClick)=\"onRemoveBlockClick();\"></pep-button>\n            <!-- <hide-in [hideIn]=\"blockContainer.Hide\" (hideInChange)=\"onHideBlockChange($event)\"></hide-in> -->\n            <pep-button sizeType=\"xs\" iconName=\"system_edit\" (buttonClick)=\"onEditBlockClick();\"></pep-button>\n        </ng-container>f\n    </pep-draggable-item>\n    <div class=\"block-template-wrapper\" [ngStyle]=\"{ 'overflow': (sectionHeight === 'unset' ? 'unset' : 'auto') }\">\n        <div *ngIf=\"blockTemplate\" class=\"block-template\">\n            <ng-container *ngTemplateOutlet=\"blockTemplate; context: { blockKey: blockContainer?.BlockKey, draggableItemKey: blockContainer?.DraggableItemKey }\">\n            </ng-container>\n        </div>\n        <!-- <pep-remote-loader-element *ngIf=\"remoteLoaderOptions\" class=\"remote-loader\"\n            [options]=\"remoteLoaderOptions\"\n            [props]=\"{ hostObject: hostObject }\"\n            [events]=\"{ hostEvents: onBlockHostEventsCallback }\"\n            (load)=\"onBlockLoad($event)\">\n        </pep-remote-loader-element> -->\n    </div>\n</div>\n", styles: [".section-block-container{height:100%;width:100%}.section-block-container.editable-state:not(.active-block) .block-template-wrapper .block-template{pointer-events:none;opacity:.5}.section-block-container.editable-state.cdk-drag-preview .block-template-wrapper,.section-block-container.editable-state.cdk-drag-placeholder .block-toolbar{opacity:0}.section-block-container.editable-state .block-toolbar{position:absolute;top:50%;left:50%;width:95%;max-width:240px;transform:translate(-50%,-50%);z-index:3}.section-block-container.editable-state .block-toolbar:hover{z-index:12!important}.section-block-container .block-template-wrapper{height:100%;position:relative}.section-block-container .block-template-wrapper .block-template{display:block;height:100%;width:100%}\n", ".section-block-container.editable-state.block-hidden-state:not(.active-block){background:repeating-linear-gradient(45deg,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0),hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .8rem),repeating-linear-gradient(-45deg,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0),hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .8rem)}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i5$1.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i8.DraggableItemComponent, selector: "pep-draggable-item", inputs: ["title", "titlePrefix", "titleClassNames", "data", "disabled", "shadow", "styleType", "toggleContent", "isToggleContentOpen", "actionsMenu", "menuStyleType"], outputs: ["contentToggle", "actionsMenuItemClick"] }] });
+SectionBlockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: SectionBlockComponent, selector: "section-block", inputs: { blockTemplate: "blockTemplate", sectionKey: "sectionKey", sectionHeight: "sectionHeight", isMainEditorState: "isMainEditorState", editable: "editable", active: "active", blockContainer: "blockContainer", screenType: "screenType" }, outputs: { dragExited: "dragExited", dragEntered: "dragEntered" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"blockContainer?.BlockKey && (editable || !hideForCurrentScreenType)\" \n    class=\"section-block-container\"\n    [ngClass]=\"{ 'editable-state': editable, 'block-hidden-state': hideForCurrentScreenType, 'active-block': active }\"\n    cdkDrag [cdkDragData]=\"blockContainer\" [cdkDragDisabled]=\"!editable || !isMainEditorState\" \n    (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\"\n    (cdkDragExited)=\"onDragExited($event)\" (cdkDragEntered)=\"onDragEntered($event)\">\n   \n    <pep-draggable-item *ngIf=\"editable && isMainEditorState\" cdkDragHandle style=\"cursor: grab;\"\n        class=\"block-toolbar\" [title]=\"blockTitle\" >\n        <ng-container pep-actions>\n            <pep-button classNames=\"caution\" sizeType=\"xs\" iconName=\"system_bin\" (buttonClick)=\"onRemoveBlockClick();\"></pep-button>\n            <!-- <hide-in [hideIn]=\"blockContainer.Hide\" (hideInChange)=\"onHideBlockChange($event)\"></hide-in> -->\n            <pep-button sizeType=\"xs\" iconName=\"system_edit\" (buttonClick)=\"onEditBlockClick();\"></pep-button>\n        </ng-container>\n    </pep-draggable-item>\n    <div class=\"block-template-wrapper\" [ngStyle]=\"{ 'overflow': (sectionHeight === 'unset' ? 'unset' : 'auto') }\">\n        <div *ngIf=\"blockTemplate\" class=\"block-template\">\n            <ng-container *ngTemplateOutlet=\"blockTemplate; context: { blockKey: blockContainer?.BlockKey }\">\n            </ng-container>\n        </div>\n        <!-- <pep-remote-loader-element *ngIf=\"remoteLoaderOptions\" class=\"remote-loader\"\n            [options]=\"remoteLoaderOptions\"\n            [props]=\"{ hostObject: hostObject }\"\n            [events]=\"{ hostEvents: onBlockHostEventsCallback }\"\n            (load)=\"onBlockLoad($event)\">\n        </pep-remote-loader-element> -->\n    </div>\n</div>\n", styles: [".section-block-container{height:100%;width:100%}.section-block-container.editable-state:not(.active-block) .block-template-wrapper .block-template{pointer-events:none;opacity:.5}.section-block-container.editable-state.cdk-drag-preview .block-template-wrapper,.section-block-container.editable-state.cdk-drag-placeholder .block-toolbar{opacity:0}.section-block-container.editable-state .block-toolbar{position:absolute;top:50%;left:50%;width:95%;max-width:240px;transform:translate(-50%,-50%);z-index:3}.section-block-container.editable-state .block-toolbar:hover{z-index:12!important}.section-block-container .block-template-wrapper{height:100%;position:relative}.section-block-container .block-template-wrapper .block-template{display:block;height:100%;width:100%}\n", ".section-block-container.editable-state.block-hidden-state:not(.active-block){background:repeating-linear-gradient(45deg,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0),hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .8rem),repeating-linear-gradient(-45deg,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0),hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .8rem)}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i5$1.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i8.DraggableItemComponent, selector: "pep-draggable-item", inputs: ["title", "titlePrefix", "titleClassNames", "data", "disabled", "shadow", "styleType", "toggleContent", "isToggleContentOpen", "actionsMenu", "menuStyleType"], outputs: ["contentToggle", "actionsMenuItemClick"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionBlockComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'section-block', template: "<div *ngIf=\"blockContainer?.BlockKey && (editable || !hideForCurrentScreenType)\" \n    class=\"section-block-container\"\n    [ngClass]=\"{ 'editable-state': editable, 'block-hidden-state': hideForCurrentScreenType, 'active-block': active }\"\n    cdkDrag [cdkDragData]=\"blockContainer\" [cdkDragDisabled]=\"!editable || !isMainEditorState\" \n    (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\"\n    (cdkDragExited)=\"onDragExited($event)\" (cdkDragEntered)=\"onDragEntered($event)\">\n   \n    <pep-draggable-item *ngIf=\"editable && isMainEditorState\" cdkDragHandle style=\"cursor: grab;\"\n        class=\"block-toolbar\" [title]=\"availableBlock?.title || blockContainer?.BlockKey || ''\" >\n        <ng-container pep-actions>\n            <pep-button classNames=\"caution\" sizeType=\"xs\" iconName=\"system_bin\" (buttonClick)=\"onRemoveBlockClick();\"></pep-button>\n            <!-- <hide-in [hideIn]=\"blockContainer.Hide\" (hideInChange)=\"onHideBlockChange($event)\"></hide-in> -->\n            <pep-button sizeType=\"xs\" iconName=\"system_edit\" (buttonClick)=\"onEditBlockClick();\"></pep-button>\n        </ng-container>f\n    </pep-draggable-item>\n    <div class=\"block-template-wrapper\" [ngStyle]=\"{ 'overflow': (sectionHeight === 'unset' ? 'unset' : 'auto') }\">\n        <div *ngIf=\"blockTemplate\" class=\"block-template\">\n            <ng-container *ngTemplateOutlet=\"blockTemplate; context: { blockKey: blockContainer?.BlockKey, draggableItemKey: blockContainer?.DraggableItemKey }\">\n            </ng-container>\n        </div>\n        <!-- <pep-remote-loader-element *ngIf=\"remoteLoaderOptions\" class=\"remote-loader\"\n            [options]=\"remoteLoaderOptions\"\n            [props]=\"{ hostObject: hostObject }\"\n            [events]=\"{ hostEvents: onBlockHostEventsCallback }\"\n            (load)=\"onBlockLoad($event)\">\n        </pep-remote-loader-element> -->\n    </div>\n</div>\n", styles: [".section-block-container{height:100%;width:100%}.section-block-container.editable-state:not(.active-block) .block-template-wrapper .block-template{pointer-events:none;opacity:.5}.section-block-container.editable-state.cdk-drag-preview .block-template-wrapper,.section-block-container.editable-state.cdk-drag-placeholder .block-toolbar{opacity:0}.section-block-container.editable-state .block-toolbar{position:absolute;top:50%;left:50%;width:95%;max-width:240px;transform:translate(-50%,-50%);z-index:3}.section-block-container.editable-state .block-toolbar:hover{z-index:12!important}.section-block-container .block-template-wrapper{height:100%;position:relative}.section-block-container .block-template-wrapper .block-template{display:block;height:100%;width:100%}\n", ".section-block-container.editable-state.block-hidden-state:not(.active-block){background:repeating-linear-gradient(45deg,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0),hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .8rem),repeating-linear-gradient(-45deg,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0),hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .8rem)}\n"] }]
+            args: [{ selector: 'section-block', template: "<div *ngIf=\"blockContainer?.BlockKey && (editable || !hideForCurrentScreenType)\" \n    class=\"section-block-container\"\n    [ngClass]=\"{ 'editable-state': editable, 'block-hidden-state': hideForCurrentScreenType, 'active-block': active }\"\n    cdkDrag [cdkDragData]=\"blockContainer\" [cdkDragDisabled]=\"!editable || !isMainEditorState\" \n    (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\"\n    (cdkDragExited)=\"onDragExited($event)\" (cdkDragEntered)=\"onDragEntered($event)\">\n   \n    <pep-draggable-item *ngIf=\"editable && isMainEditorState\" cdkDragHandle style=\"cursor: grab;\"\n        class=\"block-toolbar\" [title]=\"blockTitle\" >\n        <ng-container pep-actions>\n            <pep-button classNames=\"caution\" sizeType=\"xs\" iconName=\"system_bin\" (buttonClick)=\"onRemoveBlockClick();\"></pep-button>\n            <!-- <hide-in [hideIn]=\"blockContainer.Hide\" (hideInChange)=\"onHideBlockChange($event)\"></hide-in> -->\n            <pep-button sizeType=\"xs\" iconName=\"system_edit\" (buttonClick)=\"onEditBlockClick();\"></pep-button>\n        </ng-container>\n    </pep-draggable-item>\n    <div class=\"block-template-wrapper\" [ngStyle]=\"{ 'overflow': (sectionHeight === 'unset' ? 'unset' : 'auto') }\">\n        <div *ngIf=\"blockTemplate\" class=\"block-template\">\n            <ng-container *ngTemplateOutlet=\"blockTemplate; context: { blockKey: blockContainer?.BlockKey }\">\n            </ng-container>\n        </div>\n        <!-- <pep-remote-loader-element *ngIf=\"remoteLoaderOptions\" class=\"remote-loader\"\n            [options]=\"remoteLoaderOptions\"\n            [props]=\"{ hostObject: hostObject }\"\n            [events]=\"{ hostEvents: onBlockHostEventsCallback }\"\n            (load)=\"onBlockLoad($event)\">\n        </pep-remote-loader-element> -->\n    </div>\n</div>\n", styles: [".section-block-container{height:100%;width:100%}.section-block-container.editable-state:not(.active-block) .block-template-wrapper .block-template{pointer-events:none;opacity:.5}.section-block-container.editable-state.cdk-drag-preview .block-template-wrapper,.section-block-container.editable-state.cdk-drag-placeholder .block-toolbar{opacity:0}.section-block-container.editable-state .block-toolbar{position:absolute;top:50%;left:50%;width:95%;max-width:240px;transform:translate(-50%,-50%);z-index:3}.section-block-container.editable-state .block-toolbar:hover{z-index:12!important}.section-block-container .block-template-wrapper{height:100%;position:relative}.section-block-container .block-template-wrapper .block-template{display:block;height:100%;width:100%}\n", ".section-block-container.editable-state.block-hidden-state:not(.active-block){background:repeating-linear-gradient(45deg,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0),hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .8rem),repeating-linear-gradient(-45deg,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0),hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .8rem)}\n"] }]
         }], ctorParameters: function () { return [{ type: LayoutBuilderInternalService }]; }, propDecorators: { blockTemplate: [{
                 type: Input
             }], sectionKey: [{
@@ -997,7 +987,8 @@ class SectionComponent extends BaseDestroyerDirective {
     //     this.refreshSplit();
     // }
     get editable() {
-        return true; //this.layoutBuilderInternalService.editableState;;
+        return this.layoutBuilderInternalService.editableState;
+        ;
     }
     set screenSize(value) {
         this._screenSize = value;
@@ -1139,7 +1130,7 @@ class SectionComponent extends BaseDestroyerDirective {
         this.sectionColumnKeyPrefix = this.layoutBuilderInternalService.getSectionColumnKey(this.key);
     }
     onEditSectionClick() {
-        this.layoutBuilderInternalService.navigateToEditor('section', this.key);
+        this.layoutBuilderInternalService.navigateToEditor('section', this.key, '');
     }
     onRemoveSectionClick() {
         this.layoutBuilderInternalService.removeSection(this.key);
@@ -1579,7 +1570,7 @@ class PepLayoutEditorComponent extends BaseDestroyerDirective {
             this.sectionsColumnsDropList = sectionsColumnsDropList;
         });
     }
-    ngAfterViewInit() {
+    ngAfterContentInit() {
         if (this._topContentRef.nativeElement.children.length > 0) {
             this.showTopContent = true;
         }
@@ -1941,10 +1932,11 @@ class PepLayoutBuilderComponent extends BaseDestroyerDirective {
         this.layoutBuilderInternalService = layoutBuilderInternalService;
         this.pepAddonService = pepAddonService;
         this._availableBlocksForDrag = [];
-        this._blocksLimitNumber = 0;
+        this._blocksLayoutConfig = {};
+        this._blockEditorTitle = '';
         this._layoutEditorTitle = '';
         this.backClick = new EventEmitter();
-        this.editorChange = new EventEmitter(); // blockKey
+        this.editorChange = new EventEmitter();
         this.blockAdded = new EventEmitter();
         this.blocksRemoved = new EventEmitter();
         this.lockScreen = false;
@@ -1957,18 +1949,24 @@ class PepLayoutBuilderComponent extends BaseDestroyerDirective {
     }
     set availableBlocksForDrag(value) {
         this._availableBlocksForDrag = value;
-        this.layoutBuilderInternalService.setAvailableBlocksToDrag(value);
     }
     get availableBlocksForDrag() {
         return this._availableBlocksForDrag;
     }
-    set blocksLimitNumber(value) {
-        this._blocksLimitNumber = coerceNumberProperty(value, 0);
-        this.layoutBuilderInternalService.setBlocksLimitNumber(this._blocksLimitNumber);
+    set blocksLayoutConfig(value) {
+        this._blocksLayoutConfig = value;
+        this.layoutBuilderInternalService.setBlocksConfig(this._blocksLayoutConfig);
+    }
+    set blockEditorTitle(value) {
+        this._blockEditorTitle = value;
+        this.setEditorTitle();
+    }
+    get blockEditorTitle() {
+        return this._blockEditorTitle;
     }
     set layoutEditorTitle(value) {
         this._layoutEditorTitle = value;
-        this.setLayoutEditorTitle();
+        this.setEditorTitle();
     }
     get layoutEditorTitle() {
         return this._layoutEditorTitle;
@@ -1984,11 +1982,14 @@ class PepLayoutBuilderComponent extends BaseDestroyerDirective {
             });
         }
     }
-    setLayoutEditorTitle() {
-        var _a;
+    setEditorTitle() {
+        var _a, _b;
         if (((_a = this.currentEditor) === null || _a === void 0 ? void 0 : _a.type) === 'layout-builder' && this.layoutEditorTitle !== '') {
             this.currentEditor.title = this.layoutEditorTitle;
         }
+        else if (((_b = this.currentEditor) === null || _b === void 0 ? void 0 : _b.type) === 'block' && this.blockEditorTitle !== '') {
+            this.currentEditor.title = this.blockEditorTitle;
+        }
     }
     subscribeEvents() {
         /***********************************************************************************************/
@@ -2043,7 +2044,7 @@ class PepLayoutBuilderComponent extends BaseDestroyerDirective {
                     sideLayout === null || sideLayout === void 0 ? void 0 : sideLayout.scrollTo(0, 0);
                 }
                 this.currentEditor = editor;
-                this.setLayoutEditorTitle();
+                this.setEditorTitle();
                 // Raise event to let the user set the block editor in the UI.
                 this.editorChange.emit(editor);
             }
@@ -2097,7 +2098,7 @@ class PepLayoutBuilderComponent extends BaseDestroyerDirective {
     }
 }
 PepLayoutBuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutBuilderComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.TranslateService }, { token: LayoutBuilderInternalService }, { token: i2$1.PepAddonService }], target: i0.ɵɵFactoryTarget.Component });
-PepLayoutBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepLayoutBuilderComponent, selector: "pep-layout-builder", inputs: { availableBlocksForDrag: "availableBlocksForDrag", blocksLimitNumber: "blocksLimitNumber", layoutEditorTitle: "layoutEditorTitle" }, outputs: { backClick: "backClick", editorChange: "editorChange", blockAdded: "blockAdded", blocksRemoved: "blocksRemoved" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "layoutBuilderWrapper", first: true, predicate: ["layoutBuilderWrapper"], descendants: true, static: true }, { propertyName: "sideBarComponent", first: true, predicate: PepSideBarComponent, descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"lockScreen\" class=\"cdk-overlay-backdrop cdk-overlay-dark-backdrop cdk-overlay-backdrop-showing\"></div>\n\n<pep-page-layout [showShadow]=\"!previewMode && currentEditor !== null\" >\n    <div pep-side-area *ngIf=\"!previewMode && currentEditor\" style=\"height: inherit;\">\n        <pep-side-bar #sideBar [ignoreResize]=\"true\" (stateChange)=\"onSidebarStateChange($event)\">\n            <div header-content class=\"side-bar-title\">\n                <pep-button class=\"back-button\" sizeType=\"sm\" iconName=\"arrow_left_alt\" (buttonClick)=\"onNavigateBackFromEditor();\"></pep-button>\n                <div class=\"title title-lg ellipsis\" [title]=\"currentEditor.title\">\n                    <span>{{ currentEditor.title }}</span>\n                </div>\n            </div>\n            <div class=\"layout-builder-editor-wrapper\">\n                <pep-layout-editor *ngIf=\"currentEditor.type === 'layout-builder'\" [availableBlocksForDrag]=\"availableBlocksForDrag\"\n                    [hostObject]=\"currentEditor.hostObject\" (hostObjectChange)=\"onLayoutEditorObjectChange($event)\"\n                    >\n                    <ng-container layout-editor-top-content>\n                        <ng-content select=\"[layout-editor-top-content]\"></ng-content>\n                    </ng-container>\n                    <ng-container layout-editor-bottom-content>\n                        <ng-content select=\"[layout-editor-bottom-content]\"></ng-content>\n                    </ng-container>\n                </pep-layout-editor>\n            \n                <section-editor *ngIf=\"currentEditor.type === 'section'\" \n                    [hostObject]=\"currentEditor.hostObject\" (hostObjectChange)=\"onSectionEditorObjectChange($event)\"></section-editor>\n            \n                <div *ngIf=\"currentEditor.type === 'block'\" >\n                    <ng-content select=\"[block-editor-content]\"></ng-content>\n                </div>\n            </div>\n        </pep-side-bar>\n    </div>\n    <ng-container pep-main-area>\n        <div class=\"main-area-container\" [ngClass]=\"{'preview-mode': previewMode }\">\n            <div class=\"header-container\" >\n                <ng-container *ngIf=\"!previewMode; then editorTitleTemplate; else previewTitleTemplate\"></ng-container>\n                <ng-template #editorTitleTemplate>\n                    <div>\n                        <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.VIEWPORT_WIDTH' | translate)}}:&nbsp;</span>\n                        <span class=\"body-xs\"><b>{{viewportWidth}}</b></span>\n                    </div>\n                </ng-template>\n                <ng-template #previewTitleTemplate>\n                    <div class=\"preview-title body-sm\">\n                        <span>{{('LAYOUT_BUILDER.PREVIEW_TITLE' | translate)}}</span>\n                    </div>\n                </ng-template>\n\n                <div class=\"header-group-btn\">\n                    <pep-group-buttons [buttons]=\"screenTypes\" [selectedButtonKey]=\"selectedScreenType\" sizeType=\"sm\" viewType=\"toggle\" >\n                    </pep-group-buttons>\n                </div>\n\n                <ng-container *ngIf=\"!previewMode; then editorButtonsTemplate; else previewButtonsTemplate\"></ng-container>\n                <ng-template #editorButtonsTemplate>\n                    <div class=\"header-end\">\n                        <pep-button key='Preview' [value]=\"'ACTIONS.PREVIEW' | translate\" sizeType=\"sm\" (buttonClick)=\"togglePreviewMode()\"></pep-button>\n                        <ng-content select=\"[header-end-content]\"></ng-content>\n                    </div>\n                </ng-template>\n                <ng-template #previewButtonsTemplate>\n                    <a class=\"color-link body-sm\" (click)=\"togglePreviewMode()\" href=\"javascript:void(0)\">{{('LAYOUT_BUILDER.PREVIEW_CLICK_HERE' | translate)}}</a>    \n                </ng-template>\n            </div>\n            <div #layoutBuilderWrapper class=\"layout-builder-wrapper\" [ngClass]=\"{'limit-min-width': selectedScreenType === 'Landscape' }\">\n                <ng-content select=\"[layout-content]\"></ng-content>\n                <div *ngIf=\"!previewMode\" class=\"backdrop\" [ngClass]=\"{'show-backdrop': currentEditor?.type === 'section' || currentEditor?.type === 'block'}\"></div>\n            </div>\n        </div>\n    </ng-container>\n</pep-page-layout>", styles: [".side-bar-title{display:flex;padding-top:var(--pep-spacing-sm, .5rem)}.side-bar-title .back-button{margin-inline-end:var(--pep-spacing-sm, .5rem)}.side-bar-title .title{display:flex;align-items:center}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs{height:100%}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-header,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-header{position:sticky;top:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));z-index:2}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-header-pagination,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-header-pagination{display:none}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-labels,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-labels{display:grid;grid-template-columns:1fr 1fr}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-labels .mat-tab-label,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-labels .mat-tab-label{padding:0 var(--pep-spacing-md, .75rem)!important}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-body-wrapper,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-body-wrapper{overflow:unset;margin:0;display:block}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active{overflow:unset}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active .mat-tab-body-content,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active .mat-tab-body-content{overflow:unset;display:flex;flex-direction:column;padding-inline:0!important}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab{overflow:inherit;display:inherit;flex-direction:inherit;gap:var(--pep-spacing-lg, 1rem)}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab .group-buttons-container .toggle-buttons,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab .group-buttons-container .toggle-buttons,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab .group-buttons-container .toggle-buttons,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab .group-buttons-container .toggle-buttons{width:100%}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-color,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-select,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-textarea,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-textbox,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-color,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-select,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-textarea,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-textbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-textbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-textbox{margin-bottom:0!important}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container{padding-top:var(--pep-spacing-lg, 1rem);padding-bottom:var(--pep-spacing-lg, 1rem)}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group{overflow:inherit;display:inherit;flex-direction:inherit;gap:var(--pep-spacing-lg, 1rem);display:flex;flex-direction:column}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container .group-buttons-container .toggle-buttons,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group .group-buttons-container .toggle-buttons{width:100%}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-textbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-textbox{margin-bottom:0!important}.layout-builder-editor-wrapper ::ng-deep .editor-title{display:block;font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-bold, 600)!important;font-size:var(--pep-font-size-xl, 1.25rem)!important;line-height:var(--pep-line-height-xl, 1.5625rem)!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layout-builder-editor-wrapper ::ng-deep .editor-sub-title{display:block;font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-normal, 400)!important;font-size:var(--pep-font-size-md, 1rem)!important;line-height:var(--pep-line-height-md, 1.25rem)!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layout-builder-editor-wrapper ::ng-deep .editor-separator{margin-top:var(--pep-spacing-lg, 1rem);border-bottom:1px solid hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title{margin-bottom:.5rem!important;min-height:unset!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container{background:unset!important;padding-left:unset!important;padding-right:unset!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-inner-container,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container .mat-checkbox-inner-container{margin-left:0!important;margin-right:0!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-layout,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container .mat-checkbox-layout{font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-normal, 400);font-size:var(--pep-font-size-lg, 1.125rem)!important;line-height:var(--pep-line-height-lg, 1.40625rem)!important;font-weight:var(--pep-font-weight-bold, 600)!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-layout .mat-checkbox-label span,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container .mat-checkbox-layout .mat-checkbox-label span{margin:0 .5rem}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-layout{font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-normal, 400);font-size:var(--pep-font-size-md, 1rem)!important;line-height:var(--pep-line-height-md, 1.25rem)!important;font-weight:var(--pep-font-weight-normal, 400)!important}.main-area-container{min-height:100%;display:grid;grid-template-rows:auto 1fr}.main-area-container .header-container{display:flex;position:sticky;top:0;z-index:100;height:3rem;align-items:center;justify-content:space-between;padding:0 var(--pep-spacing-sm, .5rem)}.main-area-container .header-container .header-group-btn{display:flex;justify-content:space-around;align-items:center}.main-area-container .header-container .header-end{display:flex;justify-content:flex-end;gap:var(--pep-spacing-sm, .5rem)}.main-area-container .header-container ::ng-deep .group-buttons-container .toggle-buttons{width:16rem}.main-area-container .layout-builder-wrapper{width:100%;margin:0 auto;position:relative}.main-area-container .layout-builder-wrapper.limit-min-width{min-width:800px}.main-area-container .layout-builder-wrapper .backdrop{position:absolute;width:100%;height:100%;top:0;z-index:10;display:none}.main-area-container .layout-builder-wrapper .backdrop.show-backdrop{display:block}\n", ".layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-header,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-header{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.main-area-container{background:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.04)}.main-area-container .header-container{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.main-area-container .header-container .header-title{color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.7)}.main-area-container .header-container .size-limit-container{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}.main-area-container.preview-mode .header-container{background:unset;background-color:hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.main-area-container.preview-mode .header-container .preview-title,.main-area-container.preview-mode .header-container .color-link{color:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.main-area-container.preview-mode .layout-builder-wrapper{overflow:auto}.main-area-container .layout-builder-wrapper{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:var(--pep-shadow-md-offset, 0 .5rem 1rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.main-area-container .layout-builder-wrapper .backdrop{background:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.5)}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$3.PepPageLayoutComponent, selector: "pep-page-layout", inputs: ["addPadding", "showShadow"] }, { kind: "component", type: i6$1.PepSideBarComponent, selector: "pep-side-bar", inputs: ["position", "ignoreResize", "showHeader", "showFooter", "showToggle", "useAsWebComponent"], outputs: ["stateChange"] }, { kind: "component", type: i5$1.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i8$1.PepGroupButtonsComponent, selector: "pep-group-buttons", inputs: ["viewType", "styleType", "sizeType", "buttons", "buttonsDisabled", "supportUnselect", "selectedButtonKey", "stretch"], outputs: ["buttonClick"] }, { kind: "component", type: PepLayoutEditorComponent, selector: "pep-layout-editor", inputs: ["availableBlocksForDrag", "hostObject"], outputs: ["hostObjectChange"] }, { kind: "component", type: SectionEditorComponent, selector: "section-editor", inputs: ["hostObject"], outputs: ["hostObjectChange"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+PepLayoutBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepLayoutBuilderComponent, selector: "pep-layout-builder", inputs: { availableBlocksForDrag: "availableBlocksForDrag", blocksLayoutConfig: "blocksLayoutConfig", blockEditorTitle: "blockEditorTitle", layoutEditorTitle: "layoutEditorTitle" }, outputs: { backClick: "backClick", editorChange: "editorChange", blockAdded: "blockAdded", blocksRemoved: "blocksRemoved" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "layoutBuilderWrapper", first: true, predicate: ["layoutBuilderWrapper"], descendants: true, static: true }, { propertyName: "sideBarComponent", first: true, predicate: PepSideBarComponent, descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"lockScreen\" class=\"cdk-overlay-backdrop cdk-overlay-dark-backdrop cdk-overlay-backdrop-showing\"></div>\n\n<pep-page-layout [showShadow]=\"!previewMode && currentEditor !== null\" >\n    <div pep-side-area *ngIf=\"!previewMode && currentEditor\" style=\"height: inherit;\">\n        <pep-side-bar #sideBar [ignoreResize]=\"true\" (stateChange)=\"onSidebarStateChange($event)\">\n            <div header-content class=\"side-bar-title\">\n                <pep-button class=\"back-button\" sizeType=\"sm\" iconName=\"arrow_left_alt\" (buttonClick)=\"onNavigateBackFromEditor();\"></pep-button>\n                <div class=\"title title-lg ellipsis\" [title]=\"currentEditor.title\">\n                    <span>{{ currentEditor.title }}</span>\n                </div>\n            </div>\n            <div class=\"layout-builder-editor-wrapper\">\n                <pep-layout-editor *ngIf=\"currentEditor.type === 'layout-builder'\" [availableBlocksForDrag]=\"availableBlocksForDrag\"\n                    [hostObject]=\"currentEditor.hostObject\" (hostObjectChange)=\"onLayoutEditorObjectChange($event)\"\n                    >\n                    <ng-container layout-editor-top-content>\n                        <ng-content select=\"[layout-editor-top-content]\"></ng-content>\n                    </ng-container>\n                    <ng-container layout-editor-bottom-content>\n                        <ng-content select=\"[layout-editor-bottom-content]\"></ng-content>\n                    </ng-container>\n                </pep-layout-editor>\n            \n                <section-editor *ngIf=\"currentEditor.type === 'section'\" \n                    [hostObject]=\"currentEditor.hostObject\" (hostObjectChange)=\"onSectionEditorObjectChange($event)\"></section-editor>\n            \n                <div *ngIf=\"currentEditor.type === 'block'\" >\n                    <ng-content select=\"[block-editor-content]\"></ng-content>\n                </div>\n            </div>\n        </pep-side-bar>\n    </div>\n    <ng-container pep-main-area>\n        <div class=\"main-area-container\" [ngClass]=\"{'preview-mode': previewMode }\">\n            <div class=\"header-container\" >\n                <ng-container *ngIf=\"!previewMode; then editorTitleTemplate; else previewTitleTemplate\"></ng-container>\n                <ng-template #editorTitleTemplate>\n                    <div>\n                        <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.VIEWPORT_WIDTH' | translate)}}:&nbsp;</span>\n                        <span class=\"body-xs\"><b>{{viewportWidth}}</b></span>\n                    </div>\n                </ng-template>\n                <ng-template #previewTitleTemplate>\n                    <div class=\"preview-title body-sm\">\n                        <span>{{('LAYOUT_BUILDER.PREVIEW_TITLE' | translate)}}</span>\n                    </div>\n                </ng-template>\n\n                <div class=\"header-group-btn\">\n                    <pep-group-buttons [buttons]=\"screenTypes\" [selectedButtonKey]=\"selectedScreenType\" sizeType=\"sm\" viewType=\"toggle\" >\n                    </pep-group-buttons>\n                </div>\n\n                <ng-container *ngIf=\"!previewMode; then editorButtonsTemplate; else previewButtonsTemplate\"></ng-container>\n                <ng-template #editorButtonsTemplate>\n                    <div class=\"header-end\">\n                        <pep-button key='Preview' [value]=\"'ACTIONS.PREVIEW' | translate\" sizeType=\"sm\" (buttonClick)=\"togglePreviewMode()\"></pep-button>\n                        <ng-content select=\"[header-end-content]\"></ng-content>\n                    </div>\n                </ng-template>\n                <ng-template #previewButtonsTemplate>\n                    <a class=\"color-link body-sm\" (click)=\"togglePreviewMode()\" href=\"javascript:void(0)\">{{('LAYOUT_BUILDER.PREVIEW_CLICK_HERE' | translate)}}</a>    \n                </ng-template>\n            </div>\n            <div #layoutBuilderWrapper class=\"layout-builder-wrapper\" [ngClass]=\"{'limit-min-width': selectedScreenType === 'Landscape' }\">\n                <ng-content select=\"[layout-content]\"></ng-content>\n                <div *ngIf=\"!previewMode\" class=\"backdrop\" [ngClass]=\"{'show-backdrop': currentEditor?.type === 'section' || currentEditor?.type === 'block'}\"></div>\n            </div>\n        </div>\n    </ng-container>\n</pep-page-layout>", styles: [".side-bar-title{display:flex;padding-top:var(--pep-spacing-sm, .5rem)}.side-bar-title .back-button{margin-inline-end:var(--pep-spacing-sm, .5rem)}.side-bar-title .title{display:flex;align-items:center}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs{height:100%}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-header,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-header{position:sticky;top:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));z-index:2}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-header-pagination,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-header-pagination{display:none}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-labels,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-labels{display:grid;grid-template-columns:1fr 1fr}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-labels .mat-tab-label,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-labels .mat-tab-label{padding:0 var(--pep-spacing-md, .75rem)!important}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-body-wrapper,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-body-wrapper{overflow:unset;margin:0;display:block}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active{overflow:unset}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active .mat-tab-body-content,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active .mat-tab-body-content{overflow:unset;display:flex;flex-direction:column;padding-inline:0!important}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab{overflow:inherit;display:inherit;flex-direction:inherit;gap:var(--pep-spacing-lg, 1rem)}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab .group-buttons-container .toggle-buttons,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab .group-buttons-container .toggle-buttons,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab .group-buttons-container .toggle-buttons,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab .group-buttons-container .toggle-buttons{width:100%}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-color,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-select,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-textarea,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-textbox,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-color,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-select,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-textarea,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-textbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-textbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-textbox{margin-bottom:0!important}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container{padding-top:var(--pep-spacing-lg, 1rem);padding-bottom:var(--pep-spacing-lg, 1rem)}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group{overflow:inherit;display:inherit;flex-direction:inherit;gap:var(--pep-spacing-lg, 1rem);display:flex;flex-direction:column}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container .group-buttons-container .toggle-buttons,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group .group-buttons-container .toggle-buttons{width:100%}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-textbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-textbox{margin-bottom:0!important}.layout-builder-editor-wrapper ::ng-deep .editor-title{display:block;font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-bold, 600)!important;font-size:var(--pep-font-size-xl, 1.25rem)!important;line-height:var(--pep-line-height-xl, 1.5625rem)!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layout-builder-editor-wrapper ::ng-deep .editor-sub-title{display:block;font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-normal, 400)!important;font-size:var(--pep-font-size-md, 1rem)!important;line-height:var(--pep-line-height-md, 1.25rem)!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layout-builder-editor-wrapper ::ng-deep .editor-separator{margin-top:var(--pep-spacing-lg, 1rem);border-bottom:1px solid hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title{margin-bottom:.5rem!important;min-height:unset!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container{background:unset!important;padding-left:unset!important;padding-right:unset!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-inner-container,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container .mat-checkbox-inner-container{margin-left:0!important;margin-right:0!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-layout,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container .mat-checkbox-layout{font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-normal, 400);font-size:var(--pep-font-size-lg, 1.125rem)!important;line-height:var(--pep-line-height-lg, 1.40625rem)!important;font-weight:var(--pep-font-weight-bold, 600)!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-layout .mat-checkbox-label span,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container .mat-checkbox-layout .mat-checkbox-label span{margin:0 .5rem}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-layout{font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-normal, 400);font-size:var(--pep-font-size-md, 1rem)!important;line-height:var(--pep-line-height-md, 1.25rem)!important;font-weight:var(--pep-font-weight-normal, 400)!important}.main-area-container{min-height:100%;display:grid;grid-template-rows:auto 1fr}.main-area-container .header-container{display:flex;position:sticky;top:0;z-index:100;height:3rem;align-items:center;justify-content:space-between;padding:0 var(--pep-spacing-sm, .5rem)}.main-area-container .header-container .header-group-btn{display:flex;justify-content:space-around;align-items:center}.main-area-container .header-container .header-end{display:flex;justify-content:flex-end;gap:var(--pep-spacing-sm, .5rem)}.main-area-container .header-container ::ng-deep .group-buttons-container .toggle-buttons{width:16rem}.main-area-container .layout-builder-wrapper{width:100%;margin:0 auto;position:relative}.main-area-container .layout-builder-wrapper.limit-min-width{min-width:800px}.main-area-container .layout-builder-wrapper .backdrop{position:absolute;width:100%;height:100%;top:0;z-index:10;display:none}.main-area-container .layout-builder-wrapper .backdrop.show-backdrop{display:block}\n", ".layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-header,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-header{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.main-area-container{background:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.04)}.main-area-container .header-container{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.main-area-container .header-container .header-title{color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.7)}.main-area-container .header-container .size-limit-container{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}.main-area-container.preview-mode .header-container{background:unset;background-color:hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.main-area-container.preview-mode .header-container .preview-title,.main-area-container.preview-mode .header-container .color-link{color:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.main-area-container.preview-mode .layout-builder-wrapper{overflow:auto}.main-area-container .layout-builder-wrapper{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:var(--pep-shadow-md-offset, 0 .5rem 1rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.main-area-container .layout-builder-wrapper .backdrop{background:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.5)}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$3.PepPageLayoutComponent, selector: "pep-page-layout", inputs: ["addPadding", "showShadow"] }, { kind: "component", type: i6$1.PepSideBarComponent, selector: "pep-side-bar", inputs: ["position", "ignoreResize", "showHeader", "showFooter", "showToggle", "useAsWebComponent"], outputs: ["stateChange"] }, { kind: "component", type: i5$1.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i8$1.PepGroupButtonsComponent, selector: "pep-group-buttons", inputs: ["viewType", "styleType", "sizeType", "buttons", "buttonsDisabled", "supportUnselect", "selectedButtonKey", "stretch"], outputs: ["buttonClick"] }, { kind: "component", type: PepLayoutEditorComponent, selector: "pep-layout-editor", inputs: ["availableBlocksForDrag", "hostObject"], outputs: ["hostObjectChange"] }, { kind: "component", type: SectionEditorComponent, selector: "section-editor", inputs: ["hostObject"], outputs: ["hostObjectChange"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutBuilderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-layout-builder', template: "<div *ngIf=\"lockScreen\" class=\"cdk-overlay-backdrop cdk-overlay-dark-backdrop cdk-overlay-backdrop-showing\"></div>\n\n<pep-page-layout [showShadow]=\"!previewMode && currentEditor !== null\" >\n    <div pep-side-area *ngIf=\"!previewMode && currentEditor\" style=\"height: inherit;\">\n        <pep-side-bar #sideBar [ignoreResize]=\"true\" (stateChange)=\"onSidebarStateChange($event)\">\n            <div header-content class=\"side-bar-title\">\n                <pep-button class=\"back-button\" sizeType=\"sm\" iconName=\"arrow_left_alt\" (buttonClick)=\"onNavigateBackFromEditor();\"></pep-button>\n                <div class=\"title title-lg ellipsis\" [title]=\"currentEditor.title\">\n                    <span>{{ currentEditor.title }}</span>\n                </div>\n            </div>\n            <div class=\"layout-builder-editor-wrapper\">\n                <pep-layout-editor *ngIf=\"currentEditor.type === 'layout-builder'\" [availableBlocksForDrag]=\"availableBlocksForDrag\"\n                    [hostObject]=\"currentEditor.hostObject\" (hostObjectChange)=\"onLayoutEditorObjectChange($event)\"\n                    >\n                    <ng-container layout-editor-top-content>\n                        <ng-content select=\"[layout-editor-top-content]\"></ng-content>\n                    </ng-container>\n                    <ng-container layout-editor-bottom-content>\n                        <ng-content select=\"[layout-editor-bottom-content]\"></ng-content>\n                    </ng-container>\n                </pep-layout-editor>\n            \n                <section-editor *ngIf=\"currentEditor.type === 'section'\" \n                    [hostObject]=\"currentEditor.hostObject\" (hostObjectChange)=\"onSectionEditorObjectChange($event)\"></section-editor>\n            \n                <div *ngIf=\"currentEditor.type === 'block'\" >\n                    <ng-content select=\"[block-editor-content]\"></ng-content>\n                </div>\n            </div>\n        </pep-side-bar>\n    </div>\n    <ng-container pep-main-area>\n        <div class=\"main-area-container\" [ngClass]=\"{'preview-mode': previewMode }\">\n            <div class=\"header-container\" >\n                <ng-container *ngIf=\"!previewMode; then editorTitleTemplate; else previewTitleTemplate\"></ng-container>\n                <ng-template #editorTitleTemplate>\n                    <div>\n                        <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.VIEWPORT_WIDTH' | translate)}}:&nbsp;</span>\n                        <span class=\"body-xs\"><b>{{viewportWidth}}</b></span>\n                    </div>\n                </ng-template>\n                <ng-template #previewTitleTemplate>\n                    <div class=\"preview-title body-sm\">\n                        <span>{{('LAYOUT_BUILDER.PREVIEW_TITLE' | translate)}}</span>\n                    </div>\n                </ng-template>\n\n                <div class=\"header-group-btn\">\n                    <pep-group-buttons [buttons]=\"screenTypes\" [selectedButtonKey]=\"selectedScreenType\" sizeType=\"sm\" viewType=\"toggle\" >\n                    </pep-group-buttons>\n                </div>\n\n                <ng-container *ngIf=\"!previewMode; then editorButtonsTemplate; else previewButtonsTemplate\"></ng-container>\n                <ng-template #editorButtonsTemplate>\n                    <div class=\"header-end\">\n                        <pep-button key='Preview' [value]=\"'ACTIONS.PREVIEW' | translate\" sizeType=\"sm\" (buttonClick)=\"togglePreviewMode()\"></pep-button>\n                        <ng-content select=\"[header-end-content]\"></ng-content>\n                    </div>\n                </ng-template>\n                <ng-template #previewButtonsTemplate>\n                    <a class=\"color-link body-sm\" (click)=\"togglePreviewMode()\" href=\"javascript:void(0)\">{{('LAYOUT_BUILDER.PREVIEW_CLICK_HERE' | translate)}}</a>    \n                </ng-template>\n            </div>\n            <div #layoutBuilderWrapper class=\"layout-builder-wrapper\" [ngClass]=\"{'limit-min-width': selectedScreenType === 'Landscape' }\">\n                <ng-content select=\"[layout-content]\"></ng-content>\n                <div *ngIf=\"!previewMode\" class=\"backdrop\" [ngClass]=\"{'show-backdrop': currentEditor?.type === 'section' || currentEditor?.type === 'block'}\"></div>\n            </div>\n        </div>\n    </ng-container>\n</pep-page-layout>", styles: [".side-bar-title{display:flex;padding-top:var(--pep-spacing-sm, .5rem)}.side-bar-title .back-button{margin-inline-end:var(--pep-spacing-sm, .5rem)}.side-bar-title .title{display:flex;align-items:center}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs{height:100%}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-header,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-header{position:sticky;top:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));z-index:2}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-header-pagination,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-header-pagination{display:none}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-labels,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-labels{display:grid;grid-template-columns:1fr 1fr}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-labels .mat-tab-label,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-labels .mat-tab-label{padding:0 var(--pep-spacing-md, .75rem)!important}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-body-wrapper,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-body-wrapper{overflow:unset;margin:0;display:block}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active{overflow:unset}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active .mat-tab-body-content,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active .mat-tab-body-content{overflow:unset;display:flex;flex-direction:column;padding-inline:0!important}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab{overflow:inherit;display:inherit;flex-direction:inherit;gap:var(--pep-spacing-lg, 1rem)}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab .group-buttons-container .toggle-buttons,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab .group-buttons-container .toggle-buttons,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab .group-buttons-container .toggle-buttons,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab .group-buttons-container .toggle-buttons{width:100%}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-color,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-select,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-textarea,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-textbox,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-color,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-select,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-textarea,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-textbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-textbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-textbox{margin-bottom:0!important}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container{padding-top:var(--pep-spacing-lg, 1rem);padding-bottom:var(--pep-spacing-lg, 1rem)}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group{overflow:inherit;display:inherit;flex-direction:inherit;gap:var(--pep-spacing-lg, 1rem);display:flex;flex-direction:column}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container .group-buttons-container .toggle-buttons,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group .group-buttons-container .toggle-buttons{width:100%}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-textbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-textbox{margin-bottom:0!important}.layout-builder-editor-wrapper ::ng-deep .editor-title{display:block;font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-bold, 600)!important;font-size:var(--pep-font-size-xl, 1.25rem)!important;line-height:var(--pep-line-height-xl, 1.5625rem)!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layout-builder-editor-wrapper ::ng-deep .editor-sub-title{display:block;font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-normal, 400)!important;font-size:var(--pep-font-size-md, 1rem)!important;line-height:var(--pep-line-height-md, 1.25rem)!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layout-builder-editor-wrapper ::ng-deep .editor-separator{margin-top:var(--pep-spacing-lg, 1rem);border-bottom:1px solid hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title{margin-bottom:.5rem!important;min-height:unset!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container{background:unset!important;padding-left:unset!important;padding-right:unset!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-inner-container,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container .mat-checkbox-inner-container{margin-left:0!important;margin-right:0!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-layout,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container .mat-checkbox-layout{font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-normal, 400);font-size:var(--pep-font-size-lg, 1.125rem)!important;line-height:var(--pep-line-height-lg, 1.40625rem)!important;font-weight:var(--pep-font-weight-bold, 600)!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-layout .mat-checkbox-label span,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container .mat-checkbox-layout .mat-checkbox-label span{margin:0 .5rem}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-layout{font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-normal, 400);font-size:var(--pep-font-size-md, 1rem)!important;line-height:var(--pep-line-height-md, 1.25rem)!important;font-weight:var(--pep-font-weight-normal, 400)!important}.main-area-container{min-height:100%;display:grid;grid-template-rows:auto 1fr}.main-area-container .header-container{display:flex;position:sticky;top:0;z-index:100;height:3rem;align-items:center;justify-content:space-between;padding:0 var(--pep-spacing-sm, .5rem)}.main-area-container .header-container .header-group-btn{display:flex;justify-content:space-around;align-items:center}.main-area-container .header-container .header-end{display:flex;justify-content:flex-end;gap:var(--pep-spacing-sm, .5rem)}.main-area-container .header-container ::ng-deep .group-buttons-container .toggle-buttons{width:16rem}.main-area-container .layout-builder-wrapper{width:100%;margin:0 auto;position:relative}.main-area-container .layout-builder-wrapper.limit-min-width{min-width:800px}.main-area-container .layout-builder-wrapper .backdrop{position:absolute;width:100%;height:100%;top:0;z-index:10;display:none}.main-area-container .layout-builder-wrapper .backdrop.show-backdrop{display:block}\n", ".layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-header,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-header{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.main-area-container{background:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.04)}.main-area-container .header-container{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.main-area-container .header-container .header-title{color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.7)}.main-area-container .header-container .size-limit-container{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}.main-area-container.preview-mode .header-container{background:unset;background-color:hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.main-area-container.preview-mode .header-container .preview-title,.main-area-container.preview-mode .header-container .color-link{color:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.main-area-container.preview-mode .layout-builder-wrapper{overflow:auto}.main-area-container .layout-builder-wrapper{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:var(--pep-shadow-md-offset, 0 .5rem 1rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.main-area-container .layout-builder-wrapper .backdrop{background:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.5)}\n"] }]
@@ -2109,7 +2110,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 args: [PepSideBarComponent, { read: ElementRef }]
             }], availableBlocksForDrag: [{
                 type: Input
-            }], blocksLimitNumber: [{
+            }], blocksLayoutConfig: [{
+                type: Input
+            }], blockEditorTitle: [{
                 type: Input
             }], layoutEditorTitle: [{
                 type: Input