@pepperi-addons/ngx-composite-lib 0.4.2-beta.99 → 0.5.0-ng15.1

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, NgModule, Injectable, ViewChild, ViewChildren, HostBinding, ElementRef, HostListener } from '@angular/core';
+import { EventEmitter, Component, Input, Output, NgModule, Injectable, ViewChild, ViewChildren, HostBinding, ElementRef, HostListener, Optional } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3$2 from '@angular/cdk/drag-drop';
@@ -9,27 +9,27 @@ import * as i2$2 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import * as i3$1 from '@pepperi-addons/ngx-lib';
 import { PepScreenSizeType, PepGuid, BaseDestroyerDirective, PepNgxLibModule } from '@pepperi-addons/ngx-lib';
-import * as i4$2 from '@pepperi-addons/ngx-lib/size-detector';
+import * as i5$4 from '@pepperi-addons/ngx-lib/size-detector';
 import { PepSizeDetectorModule } from '@pepperi-addons/ngx-lib/size-detector';
 import * as i4$1 from '@pepperi-addons/ngx-lib/button';
 import { PepButtonModule } from '@pepperi-addons/ngx-lib/button';
 import * as i2$1 from '@pepperi-addons/ngx-lib/dialog';
-import { PepDialogData, PepDialogModule, PepDialogActionButton } from '@pepperi-addons/ngx-lib/dialog';
-import * as i8 from '@pepperi-addons/ngx-lib/group-buttons';
+import { PepDialogData, PepDialogActionButton, PepDialogModule } from '@pepperi-addons/ngx-lib/dialog';
+import * as i7$1 from '@pepperi-addons/ngx-lib/group-buttons';
 import { PepGroupButtonsModule } from '@pepperi-addons/ngx-lib/group-buttons';
-import * as i5$2 from '@pepperi-addons/ngx-lib/page-layout';
+import * as i4$4 from '@pepperi-addons/ngx-lib/page-layout';
 import { PepPageLayoutModule } from '@pepperi-addons/ngx-lib/page-layout';
-import * as i6$1 from '@pepperi-addons/ngx-lib/side-bar';
+import * as i5$3 from '@pepperi-addons/ngx-lib/side-bar';
 import { PepSideBarComponent, PepSideBarModule } from '@pepperi-addons/ngx-lib/side-bar';
-import * as i7 from '@pepperi-addons/ngx-lib/draggable-items';
+import * as i5$1 from '@pepperi-addons/ngx-lib/draggable-items';
 import { PepDraggableItemsModule } from '@pepperi-addons/ngx-lib/draggable-items';
-import * as i5$1 from '@pepperi-addons/ngx-lib/checkbox';
+import * as i4$2 from '@pepperi-addons/ngx-lib/checkbox';
 import { PepCheckboxModule } from '@pepperi-addons/ngx-lib/checkbox';
 import * as i4$3 from '@pepperi-addons/ngx-lib/select';
 import { PepSelectModule } from '@pepperi-addons/ngx-lib/select';
-import * as i3$4 from '@pepperi-addons/ngx-lib/textbox';
+import * as i2$3 from '@pepperi-addons/ngx-lib/textbox';
 import { PepTextboxModule } from '@pepperi-addons/ngx-lib/textbox';
-import * as i6 from '@pepperi-addons/ngx-composite-lib/group-buttons-settings';
+import * as i5$2 from '@pepperi-addons/ngx-composite-lib/group-buttons-settings';
 import { PepGroupButtonsSettingsModule } from '@pepperi-addons/ngx-composite-lib/group-buttons-settings';
 import { __awaiter } from 'tslib';
 import * as i1 from '@ngx-translate/core';
@@ -45,8 +45,10 @@ import { MatIconModule } from '@angular/material/icon';
 import * as i1$1 from '@pepperi-addons/ngx-lib/icon';
 import { pepIconSystemView, PepIconModule, pepIconDeviceDesktop, pepIconDeviceTablet, pepIconDeviceMobile } from '@pepperi-addons/ngx-lib/icon';
 import { HttpClientModule } from '@angular/common/http';
-import * as i3$3 from '@pepperi-addons/ngx-lib/skeleton-loader';
+import * as i4$5 from '@pepperi-addons/ngx-lib/skeleton-loader';
 import { PepSkeletonLoaderModule } from '@pepperi-addons/ngx-lib/skeleton-loader';
+import * as i7 from '@pepperi-addons/ngx-composite-lib/padding-settings';
+import { PepPaddingSettings, PepPaddingSettingsModule } from '@pepperi-addons/ngx-composite-lib/padding-settings';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
 import { BehaviorSubject } from 'rxjs';
 import { distinctUntilChanged, filter } from 'rxjs/operators';
@@ -89,11 +91,11 @@ class HideInComponent {
         this.menuClosed.emit();
     }
 }
-HideInComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: HideInComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-HideInComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: HideInComponent, selector: "hide-in", inputs: { hideIn: "hideIn" }, outputs: { hideInChange: "hideInChange", menuOpened: "menuOpened", menuClosed: "menuClosed" }, ngImport: i0, template: "\n<pep-button sizeType=\"xs\" iconName=\"system_view\" [matMenuTriggerFor]=\"menu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\"\n    class=\"badge-button\" [ngClass]=\"{ 'none': !hideIn || hideIn.length === 0}\"\n    matBadge=\"{{ hideIn?.length }}\" matBadgePosition=\"after\" matBadgeSize=\"small\" \n></pep-button>\n\n<mat-menu #menu=\"matMenu\" class=\"hide-in-menu\">\n    <div mat-menu-item class=\"title\" disabled>\n        <span>{{('LAYOUT_BUILDER.HIDE_IN.HIDE_IN_TITLE' | translate)}}</span>\n    </div>\n    <div mat-menu-item class=\"splitter\"></div>\n    <ng-container *ngFor=\"let menuItem of menuItems\">\n        <button mat-menu-item (click)=\"onItemClick($event, menuItem)\" title=\"{{ menuItem.text }}\">\n            <mat-checkbox type=\"checkbox\" title=\"{{ menuItem.text }}\" class=\"md\"\n                (change)=\"onItemClick($event, menuItem)\" [checked]=\"menuItem.selected\">\n                <span class=\"pull-left flip title ellipsis\">{{ menuItem.text }}</span>\n            </mat-checkbox>\n        </button>\n    </ng-container>\n</mat-menu>\n", styles: [".hide-in-menu .mat-menu-item.splitter{margin-inline:var(--pep-spacing-sm, .5rem)}.mat-menu-item ::ng-deep .mat-checkbox-layout .mat-checkbox-inner-container{margin-inline-end:var(--pep-spacing-xs, .25rem)!important}.badge-button .mat-badge-content{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));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%),.08);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%));background-color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))!important;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%),.32)}.badge-button .mat-badge-content .svg-icon{fill: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%))}.badge-button .mat-badge-content .svg-icon.stroke{fill:unset;stroke: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%))}.badge-button.none ::ng-deep .mat-badge-content{display:none}.badge-button ::ng-deep .mat-badge-content{z-index:1;right:-4px!important}\n", ".hide-in-menu .mat-menu-item.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)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i4.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4$1.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: HideInComponent, decorators: [{
+HideInComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HideInComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+HideInComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: HideInComponent, selector: "hide-in", inputs: { hideIn: "hideIn" }, outputs: { hideInChange: "hideInChange", menuOpened: "menuOpened", menuClosed: "menuClosed" }, ngImport: i0, template: "\n<pep-button sizeType=\"xs\" iconName=\"system_view\" [matMenuTriggerFor]=\"menu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\"\n    class=\"badge-button\" [ngClass]=\"{ 'none': !hideIn || hideIn.length === 0}\"\n    matBadge=\"{{ hideIn?.length }}\" matBadgePosition=\"after\" matBadgeSize=\"small\" \n></pep-button>\n\n<mat-menu #menu=\"matMenu\" class=\"hide-in-menu\">\n    <div mat-menu-item class=\"title\" disabled>\n        <span>{{('LAYOUT_BUILDER.HIDE_IN.HIDE_IN_TITLE' | translate)}}</span>\n    </div>\n    <div mat-menu-item class=\"splitter\"></div>\n    <ng-container *ngFor=\"let menuItem of menuItems\">\n        <button mat-menu-item (click)=\"onItemClick($event, menuItem)\" title=\"{{ menuItem.text }}\">\n            <mat-checkbox type=\"checkbox\" title=\"{{ menuItem.text }}\" class=\"md\"\n                (change)=\"onItemClick($event, menuItem)\" [checked]=\"menuItem.selected\">\n                <span class=\"pull-left flip title ellipsis\">{{ menuItem.text }}</span>\n            </mat-checkbox>\n        </button>\n    </ng-container>\n</mat-menu>\n", styles: [".hide-in-menu .mat-menu-item.splitter,.hide-in-menu .mat-mdc-menu-item.splitter{margin-inline:var(--pep-spacing-sm, .5rem)}.mat-mdc-menu-item ::ng-deep .mat-checkbox-layout .mat-checkbox-inner-container,.mat-mdc-menu-item ::ng-deep .mat-checkbox-layout .mat-mdc-checkbox-inner-container,.mat-mdc-menu-item ::ng-deep .mat-mdc-checkbox-layout .mat-checkbox-inner-container,.mat-mdc-menu-item ::ng-deep .mat-mdc-checkbox-layout .mat-mdc-checkbox-inner-container{margin-inline-end:var(--pep-spacing-xs, .25rem)!important}.badge-button .mat-badge-content,.badge-button .mat-mdc-badge-content{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));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%),.08);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%));background-color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))!important;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%),.32)}.badge-button .mat-badge-content .svg-icon,.badge-button .mat-mdc-badge-content .svg-icon{fill: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%))}.badge-button .mat-badge-content .svg-icon.stroke,.badge-button .mat-mdc-badge-content .svg-icon.stroke{fill:unset;stroke: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%))}.badge-button.none ::ng-deep .mat-badge-content,.badge-button.none ::ng-deep .mat-mdc-badge-content{display:none}.badge-button ::ng-deep .mat-badge-content{z-index:1;right:-4px!important}\n", ".hide-in-menu .mat-mdc-menu-item.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)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i4.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4$1.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HideInComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hide-in', template: "\n<pep-button sizeType=\"xs\" iconName=\"system_view\" [matMenuTriggerFor]=\"menu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\"\n    class=\"badge-button\" [ngClass]=\"{ 'none': !hideIn || hideIn.length === 0}\"\n    matBadge=\"{{ hideIn?.length }}\" matBadgePosition=\"after\" matBadgeSize=\"small\" \n></pep-button>\n\n<mat-menu #menu=\"matMenu\" class=\"hide-in-menu\">\n    <div mat-menu-item class=\"title\" disabled>\n        <span>{{('LAYOUT_BUILDER.HIDE_IN.HIDE_IN_TITLE' | translate)}}</span>\n    </div>\n    <div mat-menu-item class=\"splitter\"></div>\n    <ng-container *ngFor=\"let menuItem of menuItems\">\n        <button mat-menu-item (click)=\"onItemClick($event, menuItem)\" title=\"{{ menuItem.text }}\">\n            <mat-checkbox type=\"checkbox\" title=\"{{ menuItem.text }}\" class=\"md\"\n                (change)=\"onItemClick($event, menuItem)\" [checked]=\"menuItem.selected\">\n                <span class=\"pull-left flip title ellipsis\">{{ menuItem.text }}</span>\n            </mat-checkbox>\n        </button>\n    </ng-container>\n</mat-menu>\n", styles: [".hide-in-menu .mat-menu-item.splitter{margin-inline:var(--pep-spacing-sm, .5rem)}.mat-menu-item ::ng-deep .mat-checkbox-layout .mat-checkbox-inner-container{margin-inline-end:var(--pep-spacing-xs, .25rem)!important}.badge-button .mat-badge-content{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));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%),.08);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%));background-color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))!important;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%),.32)}.badge-button .mat-badge-content .svg-icon{fill: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%))}.badge-button .mat-badge-content .svg-icon.stroke{fill:unset;stroke: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%))}.badge-button.none ::ng-deep .mat-badge-content{display:none}.badge-button ::ng-deep .mat-badge-content{z-index:1;right:-4px!important}\n", ".hide-in-menu .mat-menu-item.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)}\n"] }]
+            args: [{ selector: 'hide-in', template: "\n<pep-button sizeType=\"xs\" iconName=\"system_view\" [matMenuTriggerFor]=\"menu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\"\n    class=\"badge-button\" [ngClass]=\"{ 'none': !hideIn || hideIn.length === 0}\"\n    matBadge=\"{{ hideIn?.length }}\" matBadgePosition=\"after\" matBadgeSize=\"small\" \n></pep-button>\n\n<mat-menu #menu=\"matMenu\" class=\"hide-in-menu\">\n    <div mat-menu-item class=\"title\" disabled>\n        <span>{{('LAYOUT_BUILDER.HIDE_IN.HIDE_IN_TITLE' | translate)}}</span>\n    </div>\n    <div mat-menu-item class=\"splitter\"></div>\n    <ng-container *ngFor=\"let menuItem of menuItems\">\n        <button mat-menu-item (click)=\"onItemClick($event, menuItem)\" title=\"{{ menuItem.text }}\">\n            <mat-checkbox type=\"checkbox\" title=\"{{ menuItem.text }}\" class=\"md\"\n                (change)=\"onItemClick($event, menuItem)\" [checked]=\"menuItem.selected\">\n                <span class=\"pull-left flip title ellipsis\">{{ menuItem.text }}</span>\n            </mat-checkbox>\n        </button>\n    </ng-container>\n</mat-menu>\n", styles: [".hide-in-menu .mat-menu-item.splitter,.hide-in-menu .mat-mdc-menu-item.splitter{margin-inline:var(--pep-spacing-sm, .5rem)}.mat-mdc-menu-item ::ng-deep .mat-checkbox-layout .mat-checkbox-inner-container,.mat-mdc-menu-item ::ng-deep .mat-checkbox-layout .mat-mdc-checkbox-inner-container,.mat-mdc-menu-item ::ng-deep .mat-mdc-checkbox-layout .mat-checkbox-inner-container,.mat-mdc-menu-item ::ng-deep .mat-mdc-checkbox-layout .mat-mdc-checkbox-inner-container{margin-inline-end:var(--pep-spacing-xs, .25rem)!important}.badge-button .mat-badge-content,.badge-button .mat-mdc-badge-content{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));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%),.08);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%));background-color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))!important;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%),.32)}.badge-button .mat-badge-content .svg-icon,.badge-button .mat-mdc-badge-content .svg-icon{fill: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%))}.badge-button .mat-badge-content .svg-icon.stroke,.badge-button .mat-mdc-badge-content .svg-icon.stroke{fill:unset;stroke: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%))}.badge-button.none ::ng-deep .mat-badge-content,.badge-button.none ::ng-deep .mat-mdc-badge-content{display:none}.badge-button ::ng-deep .mat-badge-content{z-index:1;right:-4px!important}\n", ".hide-in-menu .mat-mdc-menu-item.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)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.TranslateService }]; }, propDecorators: { hideIn: [{
                 type: Input
             }], hideInChange: [{
@@ -112,8 +114,8 @@ class HideInModule {
         ]);
     }
 }
-HideInModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: HideInModule, deps: [{ token: i1$1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
-HideInModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: HideInModule, declarations: [HideInComponent], imports: [CommonModule,
+HideInModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HideInModule, deps: [{ token: i1$1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
+HideInModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: HideInModule, declarations: [HideInComponent], imports: [CommonModule,
         MatButtonModule,
         MatMenuModule,
         MatIconModule,
@@ -122,7 +124,7 @@ HideInModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
         PepButtonModule,
         PepCheckboxModule,
         PepIconModule, i1.TranslateModule], exports: [HideInComponent] });
-HideInModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: HideInModule, imports: [CommonModule,
+HideInModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HideInModule, imports: [CommonModule,
         MatButtonModule,
         MatMenuModule,
         MatIconModule,
@@ -141,7 +143,7 @@ HideInModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
         //     }, isolate: false
         // }),
     ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: HideInModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HideInModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [HideInComponent],
@@ -170,64 +172,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
         }], ctorParameters: function () { return [{ type: i1$1.PepIconRegistry }]; } });
 
 class LayoutBuilderInternalService {
-    constructor(translate, dialogService, layoutService) {
-        this.translate = translate;
-        this.dialogService = dialogService;
-        this.layoutService = layoutService;
-        this._defaultSectionTitle = '';
-        // This configuration is for blocks behavior.
-        this._blocksLimitNumber = 0;
-        this._navigateToEditorAfterBlockAdded = false;
-        this._getBlockTitle = (blockKey) => { return blockKey; };
-        this._editorsBreadCrumb = Array();
-        this._editMode = false;
-        this._editableState = false;
-        // This subject is for the screen size change events.
-        this._screenSizeSubject = new BehaviorSubject(undefined);
-        // This subject is for demostrate the container size (Usage only in edit mode).
-        this._screenWidthSubject = new BehaviorSubject('100%');
-        // This subject is for load the current editor (Usage only in edit mode).
-        this._editorSubject = new BehaviorSubject(null);
-        // This is the sections columns drop list subject.
-        this._sectionsColumnsDropListSubject = new BehaviorSubject([]);
-        // This is the sections subject (a pare from the layout view object)
-        this._sectionsViewSubject = new BehaviorSubject([]);
-        // This subject is for layout view change.
-        this._layoutViewSubject = new BehaviorSubject(null);
-        // This subject is for edit mode when block is dragging now or not.
-        this._draggingBlockKey = new BehaviorSubject('');
-        // This subject is for edit mode when section is dragging now or not.
-        this._draggingSectionKey = new BehaviorSubject('');
-        // This subject is for lock or unlock the screen (Usage only in edit mode).
-        this._lockScreenSubject = new BehaviorSubject(false);
-        // This is for control the preview mode (for load the blocks with the CPI events) 
-        this._previewModeSubject = new BehaviorSubject(false);
-        // This is for editor mode for block added.
-        this._blockAddedEventSubject = new BehaviorSubject(null);
-        // This is for editor mode for blocks removed.
-        this._blocksRemovedEventSubject = new BehaviorSubject([]);
-        // This subject is for skeleton.
-        this._showSkeletonSubject = new BehaviorSubject(true);
-        //
-        this.translate.get('LAYOUT_BUILDER.SECTION').subscribe((res) => {
-            // Set the default section name.
-            this._defaultSectionTitle = res;
-        });
-        this.layoutService.onResize$.subscribe((size) => {
-            this.notifyScreenSizeChange(size);
-        });
-    }
     setBlocksConfig(value) {
         var _a;
         this._blocksLimitNumber = value.blocksLimitNumber || 0;
         this._navigateToEditorAfterBlockAdded = (_a = value.navigateToEditorAfterBlockAdded) !== null && _a !== void 0 ? _a : false;
         this._getBlockTitle = value.getBlockTitle ? value.getBlockTitle : (blockKey) => { return blockKey; };
     }
-    get editMode() {
-        return this._editMode;
+    get editorMode() {
+        return this._editorMode;
     }
-    setEditMode(value) {
-        this._editMode = value;
+    setEditorMode(value) {
+        this._editorMode = value;
         this.setEditableState();
     }
     get editableState() {
@@ -258,9 +213,6 @@ class LayoutBuilderInternalService {
     get draggingSectionKey() {
         return this._draggingSectionKey.asObservable().pipe(distinctUntilChanged());
     }
-    get lockScreenChange$() {
-        return this._lockScreenSubject.asObservable().pipe(distinctUntilChanged());
-    }
     get previewModeChange$() {
         return this._previewModeSubject.asObservable().pipe(distinctUntilChanged());
     }
@@ -270,15 +222,65 @@ class LayoutBuilderInternalService {
     get blocksRemovedEventSubject$() {
         return this._blocksRemovedEventSubject.asObservable();
     }
-    get showSkeletonChange$() {
-        return this._showSkeletonSubject.asObservable().pipe(distinctUntilChanged());
+    // // This subject is for skeleton.
+    // private _showSkeletonSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
+    // get showSkeletonChange$(): Observable<boolean> {
+    //     return this._showSkeletonSubject.asObservable().pipe(distinctUntilChanged());
+    // }
+    constructor(translate, dialogService, layoutService) {
+        this.translate = translate;
+        this.dialogService = dialogService;
+        this.layoutService = layoutService;
+        this._defaultSectionTitle = '';
+        // This configuration is for blocks behavior.
+        this._blocksLimitNumber = 0;
+        this._navigateToEditorAfterBlockAdded = false;
+        this._getBlockTitle = (blockKey) => { return blockKey; };
+        this._editorsBreadCrumb = Array();
+        this._editorMode = false;
+        this._editableState = false;
+        // This subject is for the screen size change events.
+        this._screenSizeSubject = new BehaviorSubject(undefined);
+        // This subject is for demostrate the container size (Usage only in edit mode).
+        this._screenWidthSubject = new BehaviorSubject('100%');
+        // This subject is for load the current editor (Usage only in edit mode).
+        this._editorSubject = new BehaviorSubject(null);
+        // This is the sections columns drop list subject.
+        this._sectionsColumnsDropListSubject = new BehaviorSubject([]);
+        // This is the sections subject (a pare from the layout view object)
+        this._sectionsViewSubject = new BehaviorSubject([]);
+        // This subject is for layout view change.
+        this._layoutViewSubject = new BehaviorSubject(null);
+        // This subject is for edit mode when block is dragging now or not.
+        this._draggingBlockKey = new BehaviorSubject('');
+        // This subject is for edit mode when section is dragging now or not.
+        this._draggingSectionKey = new BehaviorSubject('');
+        // // This subject is for lock or unlock the screen (Usage only in edit mode).
+        // private _lockScreenSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+        // get lockScreenChange$(): Observable<boolean> {
+        //     return this._lockScreenSubject.asObservable().pipe(distinctUntilChanged());
+        // }
+        // This is for control the preview mode (for load the blocks with the CPI events) 
+        this._previewModeSubject = new BehaviorSubject(false);
+        // This is for editor mode for block added.
+        this._blockAddedEventSubject = new BehaviorSubject(null);
+        // This is for editor mode for blocks removed.
+        this._blocksRemovedEventSubject = new BehaviorSubject([]);
+        //
+        this.translate.get('LAYOUT_BUILDER.SECTION').subscribe((res) => {
+            // Set the default section name.
+            this._defaultSectionTitle = res;
+        });
+        this.layoutService.onResize$.subscribe((size) => {
+            this.notifyScreenSizeChange(size);
+        });
     }
     setEditableState() {
-        this._editableState = this.editMode && !this._previewModeSubject.getValue();
+        this._editableState = this.editorMode && !this._previewModeSubject.getValue();
     }
     notifyLayoutViewChange(layoutViewToUpdate) {
         if (layoutViewToUpdate) {
-            if (this.editMode) {
+            if (this.editorMode) {
                 this.updateLayoutEditorProperties(layoutViewToUpdate);
             }
             // Update the layout for the view.
@@ -304,9 +306,9 @@ class LayoutBuilderInternalService {
         this._previewModeSubject.next(value);
         this.setEditableState();
     }
-    notifyLockScreen(value) {
-        this._lockScreenSubject.next(value);
-    }
+    // private notifyLockScreen(value: boolean) {
+    //     this._lockScreenSubject.next(value);
+    // }
     notifySectionsColumnsDropListChange(sectionsColumnsDropList) {
         this._sectionsColumnsDropListSubject.next(sectionsColumnsDropList);
     }
@@ -385,7 +387,8 @@ class LayoutBuilderInternalService {
                 split: section.Split || undefined,
                 height: section.Height || 0,
                 collapseOnTablet: (_a = section.CollapseOnTablet) !== null && _a !== void 0 ? _a : false,
-                fillHeight: (_b = section.FillHeight) !== null && _b !== void 0 ? _b : false
+                fillHeight: (_b = section.FillHeight) !== null && _b !== void 0 ? _b : false,
+                padding: section.Padding || new PepPaddingSettings(true, '0')
             };
             return {
                 id: sectionId,
@@ -536,6 +539,7 @@ class LayoutBuilderInternalService {
             currentSection.Height = sectionData.height;
             currentSection.CollapseOnTablet = sectionData.collapseOnTablet;
             currentSection.FillHeight = sectionData.fillHeight;
+            currentSection.Padding = sectionData.padding;
             // Get the new columns number from currentSection.Split, if its undefined put a default 1.
             const newColumnsLength = ((_a = currentSection.Split) === null || _a === void 0 ? void 0 : _a.split(' ').length) || 1;
             if (newColumnsLength > currentSection.Columns.length) {
@@ -764,14 +768,14 @@ class LayoutBuilderInternalService {
             }
         }
     }
-    showSkeleton(show) {
-        this._showSkeletonSubject.next(show);
-    }
-    lockScreen(value) {
-        this.notifyLockScreen(value);
-    }
+    // showSkeleton(show: boolean): void {
+    //     this._showSkeletonSubject.next(show);
+    // }
+    // lockScreen(value: boolean): void {
+    //     this.notifyLockScreen(value);
+    // }
     loadLayoutBuilder(layoutView) {
-        if (this.editMode) {
+        if (this.editorMode) {
             if (this._editorsBreadCrumb.length === 0) {
                 // Load the layout editor.
                 this.loadDefaultEditor(layoutView);
@@ -783,31 +787,13 @@ class LayoutBuilderInternalService {
 }
 LayoutBuilderInternalService.AVAILABLE_BLOCKS_CONTAINER_ID = 'availableBlocks';
 LayoutBuilderInternalService.MAIN_EDITOR_ID = 'main';
-LayoutBuilderInternalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LayoutBuilderInternalService, deps: [{ token: i1.TranslateService }, { token: i2$1.PepDialogService }, { token: i3$1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Injectable });
-LayoutBuilderInternalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LayoutBuilderInternalService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LayoutBuilderInternalService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
+LayoutBuilderInternalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LayoutBuilderInternalService, deps: [{ token: i1.TranslateService }, { token: i2$1.PepDialogService }, { token: i3$1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Injectable });
+LayoutBuilderInternalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LayoutBuilderInternalService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LayoutBuilderInternalService, decorators: [{
+            type: Injectable
         }], ctorParameters: function () { return [{ type: i1.TranslateService }, { type: i2$1.PepDialogService }, { type: i3$1.PepLayoutService }]; } });
 
 class SectionBlockComponent extends BaseDestroyerDirective {
-    constructor(layoutBuilderInternalService) {
-        super();
-        this.layoutBuilderInternalService = layoutBuilderInternalService;
-        this.sectionKey = '';
-        this.sectionHeight = '';
-        this.isMainEditorState = false;
-        this.editable = false;
-        this.active = false;
-        this.dragExited = new EventEmitter();
-        this.dragEntered = new EventEmitter();
-        this.hideForCurrentScreenType = false;
-        // protected remoteLoaderOptions: PepRemoteLoaderOptions;
-        // protected availableBlock: IPepDraggableItem | undefined;
-        this.blockTitle = '';
-    }
     set blockContainer(value) {
         this._blockContainer = value;
         // if (this._blockContainer) {
@@ -825,6 +811,21 @@ class SectionBlockComponent extends BaseDestroyerDirective {
     get screenType() {
         return this._screenType;
     }
+    constructor(layoutBuilderInternalService) {
+        super();
+        this.layoutBuilderInternalService = layoutBuilderInternalService;
+        this.sectionKey = '';
+        this.sectionHeight = '';
+        this.isMainEditorState = false;
+        this.editable = false;
+        this.active = false;
+        this.dragExited = new EventEmitter();
+        this.dragEntered = new EventEmitter();
+        this.hideForCurrentScreenType = false;
+        // protected remoteLoaderOptions: PepRemoteLoaderOptions;
+        // protected availableBlock: IPepDraggableItem | undefined;
+        this.blockTitle = '';
+    }
     setIfHideForCurrentScreenType() {
         this.hideForCurrentScreenType = this.blockContainer ?
             this.layoutBuilderInternalService.getIsHidden(this.blockContainer.Hide, this.screenType) : false;
@@ -874,9 +875,9 @@ class SectionBlockComponent extends BaseDestroyerDirective {
         this.dragEntered.emit(event);
     }
 }
-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]=\"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    </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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$2.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: i3$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i4$1.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i7.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: [{
+SectionBlockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SectionBlockComponent, deps: [{ token: LayoutBuilderInternalService }], target: i0.ɵɵFactoryTarget.Component });
+SectionBlockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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    </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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$2.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: i3$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i4$1.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i5$1.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: "15.2.10", 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]=\"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    </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: [{
@@ -902,35 +903,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 
 class SectionComponent extends BaseDestroyerDirective {
-    constructor(renderer, layoutBuilderInternalService) {
-        super();
-        this.renderer = renderer;
-        this.layoutBuilderInternalService = layoutBuilderInternalService;
-        this.key = '';
-        this.name = '';
-        this._split = undefined;
-        this._height = undefined;
-        this._collapseOnTablet = false;
-        this._columns = [];
-        this._hideIn = [];
-        this.styleMaxHeight = 'unset';
-        this.styleHeight = 'unset';
-        this.sectionsColumnsDropList = [];
-        // PepScreenSizeType = PepScreenSizeType;
-        this.sectionColumnKeyPrefix = '';
-        this.isMainEditorState = false;
-        this.isEditing = false;
-        this.selectedSectionKey = '';
-        this.selectedBlockKey = '';
-        this.containsBlocks = false;
-        this.shouldSetDefaultHeight = false;
-        this.pepScreenSizeToFlipToVertical = PepScreenSizeType.SM;
-        this.hideForCurrentScreenType = false;
-        this.draggingBlockKey = '';
-        this.draggingSectionKey = '';
-        this.hoverState = false;
-        this.isHorizontalView = false;
-    }
     set split(value) {
         this._split = value;
         this.refreshSplit();
@@ -953,6 +925,12 @@ class SectionComponent extends BaseDestroyerDirective {
     get collapseOnTablet() {
         return this._collapseOnTablet;
     }
+    set padding(value) {
+        this._padding = value || new PepPaddingSettings(true, '0');
+    }
+    get padding() {
+        return this._padding;
+    }
     set columns(value) {
         this._columns = value || [];
     }
@@ -982,6 +960,36 @@ class SectionComponent extends BaseDestroyerDirective {
     get screenSize() {
         return this._screenSize;
     }
+    constructor(renderer, layoutBuilderInternalService) {
+        super();
+        this.renderer = renderer;
+        this.layoutBuilderInternalService = layoutBuilderInternalService;
+        this.key = '';
+        this.name = '';
+        this._split = undefined;
+        this._height = undefined;
+        this._collapseOnTablet = false;
+        this._padding = new PepPaddingSettings(true, '0');
+        this._columns = [];
+        this._hideIn = [];
+        this.styleMaxHeight = 'unset';
+        this.styleHeight = 'unset';
+        this.sectionsColumnsDropList = [];
+        // PepScreenSizeType = PepScreenSizeType;
+        this.sectionColumnKeyPrefix = '';
+        this.isMainEditorState = false;
+        this.isEditing = false;
+        this.selectedSectionKey = '';
+        this.selectedBlockKey = '';
+        this.containsBlocks = false;
+        this.shouldSetDefaultHeight = false;
+        this.pepScreenSizeToFlipToVertical = PepScreenSizeType.SM;
+        this.hideForCurrentScreenType = false;
+        this.draggingBlockKey = '';
+        this.draggingSectionKey = '';
+        this.hoverState = false;
+        this.isHorizontalView = false;
+    }
     calculateIfSectionContainsBlocks() {
         this.containsBlocks = this.columns.some(column => column.BlockContainer);
         if (this.editable) {
@@ -1204,12 +1212,27 @@ class SectionComponent extends BaseDestroyerDirective {
     onSectionBlockDragEntered(event) {
         //
     }
+    getPadding() {
+        // calc buttons bar padding
+        let padding = '0rem';
+        const paddingObj = this._padding || new PepPaddingSettings();
+        if (paddingObj === null || paddingObj === void 0 ? void 0 : paddingObj.IsUniform) {
+            padding = paddingObj.PaddingValue + 'rem';
+        }
+        else {
+            const num = paddingObj.PaddingValue.split(',');
+            padding = num[0] + 'rem ' + num[1] + 'rem ' + num[2] + 'rem ' + num[3] + 'rem';
+        }
+        return {
+            'padding': padding
+        };
+    }
 }
-SectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionComponent, deps: [{ token: i0.Renderer2 }, { token: LayoutBuilderInternalService }], target: i0.ɵɵFactoryTarget.Component });
-SectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: SectionComponent, selector: "section", inputs: { blockTemplate: "blockTemplate", key: "key", name: "name", split: "split", height: "height", collapseOnTablet: "collapseOnTablet", columns: "columns", hideIn: "hideIn", columnsGap: "columnsGap" }, host: { properties: { "style.max-height": "this.styleMaxHeight", "style.height": "this.styleHeight" } }, viewQueries: [{ propertyName: "sectionContainerRef", first: true, predicate: ["sectionContainer"], descendants: true }, { propertyName: "columnsElementRef", predicate: ["columnsWrapper"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #sectionContainer *ngIf=\"editable || (containsBlocks && !hideForCurrentScreenType)\" class=\"section-container \"\n    [ngClass]=\"{ \n        'mobile': screenType === 'Phablet',\n        'editable-state': editable, 'main-editor-state': isMainEditorState, 'default-height': shouldSetDefaultHeight, 'active-section': isEditing,\n        'section-hidden-state': hideForCurrentScreenType, 'section-is-dragging': draggingSectionKey !== '', 'show-hover-state': hoverState }\" \n        cdkDragBoundary=\".layout-builder-wrapper\" cdkDrag [cdkDragData]=\"key\" [cdkDragDisabled]=\"!editable || selectedSectionKey.length > 0 || selectedBlockKey.length > 0\" (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\" \n    >\n    <pep-draggable-item *ngIf=\"editable && isMainEditorState && draggingSectionKey === ''\" cdkDragHandle style=\"cursor: grab;\"\n        class=\"section-toolbar\" [ngClass]=\"{ 'hide-toolbar': !hoverState }\" [title]=\"name\">\n        <ng-container pep-actions>\n            <pep-button classNames=\"caution\" sizeType=\"xs\" iconName=\"system_bin\" (buttonClick)=\"onRemoveSectionClick();\"></pep-button>\n            <hide-in [hideIn]=\"hideIn\" (hideInChange)=\"onHideSectionChange($event)\" (menuClosed)=\"onHideInMenuClosed()\" (menuOpened)=\"onHideInMenuOpened()\"></hide-in>\n            <pep-button sizeType=\"xs\" iconName=\"system_edit\" (buttonClick)=\"onEditSectionClick();\"></pep-button>\n        </ng-container>\n    </pep-draggable-item>\n\n    <div *ngIf=\"editable\" class=\"section-background\">\n        <div class=\"back-template\" *ngFor=\"let number of [0,1,2,3,4,5,6,7,8,9,10,11]\"></div>\n    </div>\n    <div #columnsWrapper class=\"columns-wrapper gap-{{ columnsGap }}\" \n        [ngClass]=\"{ 'mobile': screenType === 'Phablet', 'is-dragging': editable && getIsDragging }\">\n        <ng-container *ngFor=\"let column of columns; let i=index;\">\n            \n            <!-- This is moved to the section-block component cause when we change to work with 'grid-column' style we have to draw the columns.\n                *ngIf=\"editable || (column.BlockContainer && column.BlockContainer.BlockKey && column.BlockContainer.BlockKey.length > 0 && !getIsHidden(column?.BlockContainer?.Hide, screenType))\"  \n            -->\n            <div *ngIf=\"editable || isHorizontalView || (column.BlockContainer && column.BlockContainer.BlockKey && column.BlockContainer.BlockKey.length > 0)\"\n                [id]=\"sectionColumnKeyPrefix + i\" \n                class=\"section-column {{isHorizontalView ? 'horizontal' : 'vertical'}}\"\n                [ngClass]=\"{ 'active-column': selectedBlockKey === column.BlockContainer?.BlockKey, \n                    'is-hidden': getIsHidden(column?.BlockContainer?.Hide, screenType),\n                    'already-contains-block': editable && column.BlockContainer && column.BlockContainer.BlockKey && column.BlockContainer.BlockKey.length > 0 && \n                        draggingBlockKey && draggingBlockKey.length > 0 && column.BlockContainer.BlockKey !== draggingBlockKey }\"\n                cdkDropList\n                [cdkDropListData]=\"column\"\n                [cdkDropListOrientation]=\"isHorizontalView ? 'horizontal' : 'vertical'\" \n                [cdkDropListConnectedTo]=\"sectionsColumnsDropList\"\n                (cdkDropListDropped)=\"onBlockDropped($event)\"\n                [cdkDropListEnterPredicate]=\"canDropPredicate(i)\"\n            >\n                <section-block *ngIf=\"column.BlockContainer?.BlockKey\" \n                    class=\"section-block\" [sectionKey]=\"key\" [blockTemplate]=\"blockTemplate\"\n                    [blockContainer]=\"column.BlockContainer\" [editable]=\"editable\" [isMainEditorState]=\"isMainEditorState\" [sectionHeight]=\"styleHeight\"\n                    [active]=\"selectedBlockKey === column.BlockContainer?.BlockKey\" [screenType]=\"screenType\"\n                    (dragExited)=\"onSectionBlockDragExited($event)\" (dragEntered)=\"onSectionBlockDragEntered($event)\"></section-block>\n            </div>\n        </ng-container>\n    </div>\n</div>\n", styles: [".section-container{position:relative;display:grid;height:100%;max-height:inherit}.section-container.editable-state{min-height:2.5rem}.section-container.editable-state.default-height{min-height:16rem}.section-container.editable-state.active-section{z-index:11}.section-container.editable-state.active-section .columns-wrapper{z-index:1}.section-container.editable-state.active-section ::ng-deep .block-template-wrapper .block-template{pointer-events:unset!important;opacity:unset!important}.section-container.editable-state.cdk-drag-placeholder{opacity:.5}.section-container.editable-state:not(.cdk-drag-placeholder):hover .section-toolbar,.section-container.editable-state:not(.cdk-drag-placeholder).show-hover-state .section-toolbar{display:block!important}.section-container.editable-state:not(.cdk-drag-preview) .hide-toolbar{display:none}.section-container.editable-state.main-editor-state .mobile .is-hidden{display:none}.section-container.editable-state .mobile .is-hidden{display:block}.section-container.editable-state .section-toolbar{position:absolute;top:0;height:2.625rem;z-index:11}.section-container.editable-state .section-toolbar ::ng-deep .pep-draggable-item-container{border-radius:0 0 var(--pep-border-radius-md, .25rem) 0}.section-container.editable-state .section-background{position:absolute;width:100%;height:100%;z-index:0;display:grid;grid-template-columns:repeat(12,1fr)}.section-container.editable-state .section-background .back-template{opacity:.1}.section-container.editable-state .section-background .back-template:last-of-type{border-right:0 none}.section-container .columns-wrapper{display:grid;grid-auto-flow:column;height:inherit;max-height:inherit;overflow:inherit}.section-container .columns-wrapper.is-dragging{overflow:unset}.section-container .columns-wrapper.gap-none{gap:0}.section-container .columns-wrapper.gap-sm{gap:var(--pep-spacing-sm, .5rem)}.section-container .columns-wrapper.gap-md{gap:var(--pep-spacing-lg, 1rem)}.section-container .columns-wrapper.gap-lg{gap:var(--pep-spacing-2xl, 2rem)}.section-container .columns-wrapper .section-column{position:relative;height:inherit;max-height:inherit;overflow:inherit}.section-container .columns-wrapper .section-column .section-block{height:inherit;max-height:inherit}\n", ".section-container{background:transparent}.section-container.editable-state.active-section{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:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.section-container.editable-state.active-section .columns-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%))}.section-container.editable-state.section-hidden-state:not(.active-section){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)}.section-container.editable-state.main-editor-state.cdk-drag-preview{box-shadow:0 0 0 .125rem hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.section-container.editable-state.main-editor-state.cdk-drag-placeholder{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.section-container.editable-state.main-editor-state.cdk-drag-placeholder:hover,.section-container.editable-state.main-editor-state.cdk-drag-placeholder.show-hover-state{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)!important}.section-container.editable-state.main-editor-state:hover:not(.section-is-dragging),.section-container.editable-state.main-editor-state.show-hover-state:not(.section-is-dragging){box-shadow:0 0 0 .125rem hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.section-container.editable-state.main-editor-state .section-toolbar ::ng-deep .pep-draggable-item-container{box-shadow:0 0 0 .125rem hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.section-container.editable-state .section-background .back-template{background-color:#bec3e5;border-right:.125rem dashed hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}.section-container.editable-state .columns-wrapper .section-column{border:.125rem dashed hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}.section-container.editable-state .columns-wrapper .section-column.active-column{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%))}.section-container.editable-state .columns-wrapper .section-column.cdk-drop-list-dragging{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.section-container.editable-state .columns-wrapper .section-column.already-contains-block:hover{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.section-container.editable-state .columns-wrapper.gap-none .section-column:not(.section-container.editable-state .columns-wrapper.gap-none .section-column:first-of-type).horizontal{border-left:unset}.section-container.editable-state .columns-wrapper.gap-none .section-column:not(.section-container.editable-state .columns-wrapper.gap-none .section-column:first-of-type).horizontal.cdk-drop-list-dragging{border-left:.125rem dashed hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}.section-container.editable-state .columns-wrapper.gap-none .section-column:not(.section-container.editable-state .columns-wrapper.gap-none .section-column:first-of-type).vertical{border-top:unset}.section-container.editable-state .columns-wrapper.gap-none .section-column:not(.section-container.editable-state .columns-wrapper.gap-none .section-column:first-of-type).vertical.cdk-drop-list-dragging{border-top:.125rem dashed hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$2.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: i3$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i4$1.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: SectionBlockComponent, selector: "section-block", inputs: ["blockTemplate", "sectionKey", "sectionHeight", "isMainEditorState", "editable", "active", "blockContainer", "screenType"], outputs: ["dragExited", "dragEntered"] }, { kind: "component", type: HideInComponent, selector: "hide-in", inputs: ["hideIn"], outputs: ["hideInChange", "menuOpened", "menuClosed"] }, { kind: "component", type: i7.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: SectionComponent, decorators: [{
+SectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SectionComponent, deps: [{ token: i0.Renderer2 }, { token: LayoutBuilderInternalService }], target: i0.ɵɵFactoryTarget.Component });
+SectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SectionComponent, selector: "section", inputs: { blockTemplate: "blockTemplate", key: "key", name: "name", split: "split", height: "height", collapseOnTablet: "collapseOnTablet", padding: "padding", columns: "columns", hideIn: "hideIn", columnsGap: "columnsGap" }, host: { properties: { "style.max-height": "this.styleMaxHeight", "style.height": "this.styleHeight" } }, viewQueries: [{ propertyName: "sectionContainerRef", first: true, predicate: ["sectionContainer"], descendants: true }, { propertyName: "columnsElementRef", predicate: ["columnsWrapper"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #sectionContainer *ngIf=\"editable || (containsBlocks && !hideForCurrentScreenType)\" class=\"section-container \"\n    [ngStyle]=\"getPadding()\"\n    [ngClass]=\"{ \n        'mobile': screenType === 'Phablet',\n        'editable-state': editable, 'main-editor-state': isMainEditorState, 'default-height': shouldSetDefaultHeight, 'active-section': isEditing,\n        'section-hidden-state': hideForCurrentScreenType, 'section-is-dragging': draggingSectionKey !== '', 'show-hover-state': hoverState }\" \n        cdkDragBoundary=\".layout-builder-wrapper\" cdkDrag [cdkDragData]=\"key\" [cdkDragDisabled]=\"!editable || selectedSectionKey.length > 0 || selectedBlockKey.length > 0\" (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\" \n    >\n    <pep-draggable-item *ngIf=\"editable && isMainEditorState && draggingSectionKey === ''\" cdkDragHandle style=\"cursor: grab;\"\n        class=\"section-toolbar\" [ngClass]=\"{ 'hide-toolbar': !hoverState }\" [title]=\"name\">\n        <ng-container pep-actions>\n            <pep-button classNames=\"caution\" sizeType=\"xs\" iconName=\"system_bin\" (buttonClick)=\"onRemoveSectionClick();\"></pep-button>\n            <hide-in [hideIn]=\"hideIn\" (hideInChange)=\"onHideSectionChange($event)\" (menuClosed)=\"onHideInMenuClosed()\" (menuOpened)=\"onHideInMenuOpened()\"></hide-in>\n            <pep-button sizeType=\"xs\" iconName=\"system_edit\" (buttonClick)=\"onEditSectionClick();\"></pep-button>\n        </ng-container>\n    </pep-draggable-item>\n\n    <div *ngIf=\"editable\" class=\"section-background\">\n        <div class=\"back-template\" *ngFor=\"let number of [0,1,2,3,4,5,6,7,8,9,10,11]\"></div>\n    </div>\n    <div #columnsWrapper class=\"columns-wrapper gap-{{ columnsGap }}\" \n        [ngClass]=\"{ 'mobile': screenType === 'Phablet', 'is-dragging': editable && getIsDragging }\">\n        <ng-container *ngFor=\"let column of columns; let i=index;\">\n            \n            <!-- This is moved to the section-block component cause when we change to work with 'grid-column' style we have to draw the columns.\n                *ngIf=\"editable || (column.BlockContainer && column.BlockContainer.BlockKey && column.BlockContainer.BlockKey.length > 0 && !getIsHidden(column?.BlockContainer?.Hide, screenType))\"  \n            -->\n            <div *ngIf=\"editable || isHorizontalView || (column.BlockContainer && column.BlockContainer.BlockKey && column.BlockContainer.BlockKey.length > 0)\"\n                [id]=\"sectionColumnKeyPrefix + i\" \n                class=\"section-column {{isHorizontalView ? 'horizontal' : 'vertical'}}\"\n                [ngClass]=\"{ 'active-column': selectedBlockKey === column.BlockContainer?.BlockKey, \n                    'is-hidden': getIsHidden(column?.BlockContainer?.Hide, screenType),\n                    'already-contains-block': editable && column.BlockContainer && column.BlockContainer.BlockKey && column.BlockContainer.BlockKey.length > 0 && \n                        draggingBlockKey && draggingBlockKey.length > 0 && column.BlockContainer.BlockKey !== draggingBlockKey }\"\n                cdkDropList\n                [cdkDropListData]=\"column\"\n                [cdkDropListOrientation]=\"isHorizontalView ? 'horizontal' : 'vertical'\" \n                [cdkDropListConnectedTo]=\"sectionsColumnsDropList\"\n                (cdkDropListDropped)=\"onBlockDropped($event)\"\n                [cdkDropListEnterPredicate]=\"canDropPredicate(i)\"\n            >\n                <section-block *ngIf=\"column.BlockContainer?.BlockKey\" \n                    class=\"section-block\" [sectionKey]=\"key\" [blockTemplate]=\"blockTemplate\"\n                    [blockContainer]=\"column.BlockContainer\" [editable]=\"editable\" [isMainEditorState]=\"isMainEditorState\" [sectionHeight]=\"styleHeight\"\n                    [active]=\"selectedBlockKey === column.BlockContainer?.BlockKey\" [screenType]=\"screenType\"\n                    (dragExited)=\"onSectionBlockDragExited($event)\" (dragEntered)=\"onSectionBlockDragEntered($event)\"></section-block>\n            </div>\n        </ng-container>\n    </div>\n</div>\n", styles: [".section-container{position:relative;display:grid;height:100%;max-height:inherit}.section-container.editable-state{min-height:2.5rem}.section-container.editable-state.default-height{min-height:16rem}.section-container.editable-state.active-section{z-index:11}.section-container.editable-state.active-section .columns-wrapper{z-index:1}.section-container.editable-state.active-section ::ng-deep .block-template-wrapper .block-template{pointer-events:unset!important;opacity:unset!important}.section-container.editable-state.cdk-drag-placeholder{opacity:.5}.section-container.editable-state:not(.cdk-drag-placeholder):hover .section-toolbar,.section-container.editable-state:not(.cdk-drag-placeholder).show-hover-state .section-toolbar{display:block!important}.section-container.editable-state:not(.cdk-drag-preview) .hide-toolbar{display:none}.section-container.editable-state.main-editor-state .mobile .is-hidden{display:none}.section-container.editable-state .mobile .is-hidden{display:block}.section-container.editable-state .section-toolbar{position:absolute;top:0;height:2.625rem;z-index:11}.section-container.editable-state .section-toolbar ::ng-deep .pep-draggable-item-container{border-radius:0 0 var(--pep-border-radius-md, .25rem) 0}.section-container.editable-state .section-background{position:absolute;width:100%;height:100%;z-index:0;display:grid;grid-template-columns:repeat(12,1fr)}.section-container.editable-state .section-background .back-template{opacity:.1}.section-container.editable-state .section-background .back-template:last-of-type{border-right:0 none}.section-container .columns-wrapper{display:grid;grid-auto-flow:column;height:inherit;max-height:inherit;overflow:inherit}.section-container .columns-wrapper.is-dragging{overflow:unset}.section-container .columns-wrapper.gap-none{gap:0}.section-container .columns-wrapper.gap-sm{gap:var(--pep-spacing-sm, .5rem)}.section-container .columns-wrapper.gap-md{gap:var(--pep-spacing-lg, 1rem)}.section-container .columns-wrapper.gap-lg{gap:var(--pep-spacing-2xl, 2rem)}.section-container .columns-wrapper .section-column{position:relative;height:inherit;max-height:inherit;overflow:inherit}.section-container .columns-wrapper .section-column .section-block{height:inherit;max-height:inherit}\n", ".section-container{background:transparent}.section-container.editable-state.active-section{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:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.section-container.editable-state.active-section .columns-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%))}.section-container.editable-state.section-hidden-state:not(.active-section){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)}.section-container.editable-state.main-editor-state.cdk-drag-preview{box-shadow:0 0 0 .125rem hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.section-container.editable-state.main-editor-state.cdk-drag-placeholder{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.section-container.editable-state.main-editor-state.cdk-drag-placeholder:hover,.section-container.editable-state.main-editor-state.cdk-drag-placeholder.show-hover-state{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)!important}.section-container.editable-state.main-editor-state:hover:not(.section-is-dragging),.section-container.editable-state.main-editor-state.show-hover-state:not(.section-is-dragging){box-shadow:0 0 0 .125rem hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.section-container.editable-state.main-editor-state .section-toolbar ::ng-deep .pep-draggable-item-container{box-shadow:0 0 0 .125rem hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.section-container.editable-state .section-background .back-template{background-color:#bec3e5;border-right:.125rem dashed hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}.section-container.editable-state .columns-wrapper .section-column{border:.125rem dashed hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}.section-container.editable-state .columns-wrapper .section-column.active-column{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%))}.section-container.editable-state .columns-wrapper .section-column.cdk-drop-list-dragging{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.section-container.editable-state .columns-wrapper .section-column.already-contains-block:hover{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.section-container.editable-state .columns-wrapper.gap-none .section-column:not(.section-container.editable-state .columns-wrapper.gap-none .section-column:first-of-type).horizontal{border-left:unset}.section-container.editable-state .columns-wrapper.gap-none .section-column:not(.section-container.editable-state .columns-wrapper.gap-none .section-column:first-of-type).horizontal.cdk-drop-list-dragging{border-left:.125rem dashed hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}.section-container.editable-state .columns-wrapper.gap-none .section-column:not(.section-container.editable-state .columns-wrapper.gap-none .section-column:first-of-type).vertical{border-top:unset}.section-container.editable-state .columns-wrapper.gap-none .section-column:not(.section-container.editable-state .columns-wrapper.gap-none .section-column:first-of-type).vertical.cdk-drop-list-dragging{border-top:.125rem dashed hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$2.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: i3$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i4$1.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: SectionBlockComponent, selector: "section-block", inputs: ["blockTemplate", "sectionKey", "sectionHeight", "isMainEditorState", "editable", "active", "blockContainer", "screenType"], outputs: ["dragExited", "dragEntered"] }, { kind: "component", type: HideInComponent, selector: "hide-in", inputs: ["hideIn"], outputs: ["hideInChange", "menuOpened", "menuClosed"] }, { kind: "component", type: i5$1.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: "15.2.10", ngImport: i0, type: SectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'section', template: "<div #sectionContainer *ngIf=\"editable || (containsBlocks && !hideForCurrentScreenType)\" class=\"section-container \"\n    [ngClass]=\"{ \n        'mobile': screenType === 'Phablet',\n        'editable-state': editable, 'main-editor-state': isMainEditorState, 'default-height': shouldSetDefaultHeight, 'active-section': isEditing,\n        'section-hidden-state': hideForCurrentScreenType, 'section-is-dragging': draggingSectionKey !== '', 'show-hover-state': hoverState }\" \n        cdkDragBoundary=\".layout-builder-wrapper\" cdkDrag [cdkDragData]=\"key\" [cdkDragDisabled]=\"!editable || selectedSectionKey.length > 0 || selectedBlockKey.length > 0\" (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\" \n    >\n    <pep-draggable-item *ngIf=\"editable && isMainEditorState && draggingSectionKey === ''\" cdkDragHandle style=\"cursor: grab;\"\n        class=\"section-toolbar\" [ngClass]=\"{ 'hide-toolbar': !hoverState }\" [title]=\"name\">\n        <ng-container pep-actions>\n            <pep-button classNames=\"caution\" sizeType=\"xs\" iconName=\"system_bin\" (buttonClick)=\"onRemoveSectionClick();\"></pep-button>\n            <hide-in [hideIn]=\"hideIn\" (hideInChange)=\"onHideSectionChange($event)\" (menuClosed)=\"onHideInMenuClosed()\" (menuOpened)=\"onHideInMenuOpened()\"></hide-in>\n            <pep-button sizeType=\"xs\" iconName=\"system_edit\" (buttonClick)=\"onEditSectionClick();\"></pep-button>\n        </ng-container>\n    </pep-draggable-item>\n\n    <div *ngIf=\"editable\" class=\"section-background\">\n        <div class=\"back-template\" *ngFor=\"let number of [0,1,2,3,4,5,6,7,8,9,10,11]\"></div>\n    </div>\n    <div #columnsWrapper class=\"columns-wrapper gap-{{ columnsGap }}\" \n        [ngClass]=\"{ 'mobile': screenType === 'Phablet', 'is-dragging': editable && getIsDragging }\">\n        <ng-container *ngFor=\"let column of columns; let i=index;\">\n            \n            <!-- This is moved to the section-block component cause when we change to work with 'grid-column' style we have to draw the columns.\n                *ngIf=\"editable || (column.BlockContainer && column.BlockContainer.BlockKey && column.BlockContainer.BlockKey.length > 0 && !getIsHidden(column?.BlockContainer?.Hide, screenType))\"  \n            -->\n            <div *ngIf=\"editable || isHorizontalView || (column.BlockContainer && column.BlockContainer.BlockKey && column.BlockContainer.BlockKey.length > 0)\"\n                [id]=\"sectionColumnKeyPrefix + i\" \n                class=\"section-column {{isHorizontalView ? 'horizontal' : 'vertical'}}\"\n                [ngClass]=\"{ 'active-column': selectedBlockKey === column.BlockContainer?.BlockKey, \n                    'is-hidden': getIsHidden(column?.BlockContainer?.Hide, screenType),\n                    'already-contains-block': editable && column.BlockContainer && column.BlockContainer.BlockKey && column.BlockContainer.BlockKey.length > 0 && \n                        draggingBlockKey && draggingBlockKey.length > 0 && column.BlockContainer.BlockKey !== draggingBlockKey }\"\n                cdkDropList\n                [cdkDropListData]=\"column\"\n                [cdkDropListOrientation]=\"isHorizontalView ? 'horizontal' : 'vertical'\" \n                [cdkDropListConnectedTo]=\"sectionsColumnsDropList\"\n                (cdkDropListDropped)=\"onBlockDropped($event)\"\n                [cdkDropListEnterPredicate]=\"canDropPredicate(i)\"\n            >\n                <section-block *ngIf=\"column.BlockContainer?.BlockKey\" \n                    class=\"section-block\" [sectionKey]=\"key\" [blockTemplate]=\"blockTemplate\"\n                    [blockContainer]=\"column.BlockContainer\" [editable]=\"editable\" [isMainEditorState]=\"isMainEditorState\" [sectionHeight]=\"styleHeight\"\n                    [active]=\"selectedBlockKey === column.BlockContainer?.BlockKey\" [screenType]=\"screenType\"\n                    (dragExited)=\"onSectionBlockDragExited($event)\" (dragEntered)=\"onSectionBlockDragEntered($event)\"></section-block>\n            </div>\n        </ng-container>\n    </div>\n</div>\n", styles: [".section-container{position:relative;display:grid;height:100%;max-height:inherit}.section-container.editable-state{min-height:2.5rem}.section-container.editable-state.default-height{min-height:16rem}.section-container.editable-state.active-section{z-index:11}.section-container.editable-state.active-section .columns-wrapper{z-index:1}.section-container.editable-state.active-section ::ng-deep .block-template-wrapper .block-template{pointer-events:unset!important;opacity:unset!important}.section-container.editable-state.cdk-drag-placeholder{opacity:.5}.section-container.editable-state:not(.cdk-drag-placeholder):hover .section-toolbar,.section-container.editable-state:not(.cdk-drag-placeholder).show-hover-state .section-toolbar{display:block!important}.section-container.editable-state:not(.cdk-drag-preview) .hide-toolbar{display:none}.section-container.editable-state.main-editor-state .mobile .is-hidden{display:none}.section-container.editable-state .mobile .is-hidden{display:block}.section-container.editable-state .section-toolbar{position:absolute;top:0;height:2.625rem;z-index:11}.section-container.editable-state .section-toolbar ::ng-deep .pep-draggable-item-container{border-radius:0 0 var(--pep-border-radius-md, .25rem) 0}.section-container.editable-state .section-background{position:absolute;width:100%;height:100%;z-index:0;display:grid;grid-template-columns:repeat(12,1fr)}.section-container.editable-state .section-background .back-template{opacity:.1}.section-container.editable-state .section-background .back-template:last-of-type{border-right:0 none}.section-container .columns-wrapper{display:grid;grid-auto-flow:column;height:inherit;max-height:inherit;overflow:inherit}.section-container .columns-wrapper.is-dragging{overflow:unset}.section-container .columns-wrapper.gap-none{gap:0}.section-container .columns-wrapper.gap-sm{gap:var(--pep-spacing-sm, .5rem)}.section-container .columns-wrapper.gap-md{gap:var(--pep-spacing-lg, 1rem)}.section-container .columns-wrapper.gap-lg{gap:var(--pep-spacing-2xl, 2rem)}.section-container .columns-wrapper .section-column{position:relative;height:inherit;max-height:inherit;overflow:inherit}.section-container .columns-wrapper .section-column .section-block{height:inherit;max-height:inherit}\n", ".section-container{background:transparent}.section-container.editable-state.active-section{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:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.section-container.editable-state.active-section .columns-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%))}.section-container.editable-state.section-hidden-state:not(.active-section){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)}.section-container.editable-state.main-editor-state.cdk-drag-preview{box-shadow:0 0 0 .125rem hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.section-container.editable-state.main-editor-state.cdk-drag-placeholder{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.section-container.editable-state.main-editor-state.cdk-drag-placeholder:hover,.section-container.editable-state.main-editor-state.cdk-drag-placeholder.show-hover-state{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)!important}.section-container.editable-state.main-editor-state:hover:not(.section-is-dragging),.section-container.editable-state.main-editor-state.show-hover-state:not(.section-is-dragging){box-shadow:0 0 0 .125rem hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.section-container.editable-state.main-editor-state .section-toolbar ::ng-deep .pep-draggable-item-container{box-shadow:0 0 0 .125rem hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.section-container.editable-state .section-background .back-template{background-color:#bec3e5;border-right:.125rem dashed hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}.section-container.editable-state .columns-wrapper .section-column{border:.125rem dashed hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}.section-container.editable-state .columns-wrapper .section-column.active-column{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%))}.section-container.editable-state .columns-wrapper .section-column.cdk-drop-list-dragging{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.section-container.editable-state .columns-wrapper .section-column.already-contains-block:hover{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.section-container.editable-state .columns-wrapper.gap-none .section-column:not(.section-container.editable-state .columns-wrapper.gap-none .section-column:first-of-type).horizontal{border-left:unset}.section-container.editable-state .columns-wrapper.gap-none .section-column:not(.section-container.editable-state .columns-wrapper.gap-none .section-column:first-of-type).horizontal.cdk-drop-list-dragging{border-left:.125rem dashed hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}.section-container.editable-state .columns-wrapper.gap-none .section-column:not(.section-container.editable-state .columns-wrapper.gap-none .section-column:first-of-type).vertical{border-top:unset}.section-container.editable-state .columns-wrapper.gap-none .section-column:not(.section-container.editable-state .columns-wrapper.gap-none .section-column:first-of-type).vertical.cdk-drop-list-dragging{border-top:.125rem dashed hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}\n"] }]
+            args: [{ selector: 'section', template: "<div #sectionContainer *ngIf=\"editable || (containsBlocks && !hideForCurrentScreenType)\" class=\"section-container \"\n    [ngStyle]=\"getPadding()\"\n    [ngClass]=\"{ \n        'mobile': screenType === 'Phablet',\n        'editable-state': editable, 'main-editor-state': isMainEditorState, 'default-height': shouldSetDefaultHeight, 'active-section': isEditing,\n        'section-hidden-state': hideForCurrentScreenType, 'section-is-dragging': draggingSectionKey !== '', 'show-hover-state': hoverState }\" \n        cdkDragBoundary=\".layout-builder-wrapper\" cdkDrag [cdkDragData]=\"key\" [cdkDragDisabled]=\"!editable || selectedSectionKey.length > 0 || selectedBlockKey.length > 0\" (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\" \n    >\n    <pep-draggable-item *ngIf=\"editable && isMainEditorState && draggingSectionKey === ''\" cdkDragHandle style=\"cursor: grab;\"\n        class=\"section-toolbar\" [ngClass]=\"{ 'hide-toolbar': !hoverState }\" [title]=\"name\">\n        <ng-container pep-actions>\n            <pep-button classNames=\"caution\" sizeType=\"xs\" iconName=\"system_bin\" (buttonClick)=\"onRemoveSectionClick();\"></pep-button>\n            <hide-in [hideIn]=\"hideIn\" (hideInChange)=\"onHideSectionChange($event)\" (menuClosed)=\"onHideInMenuClosed()\" (menuOpened)=\"onHideInMenuOpened()\"></hide-in>\n            <pep-button sizeType=\"xs\" iconName=\"system_edit\" (buttonClick)=\"onEditSectionClick();\"></pep-button>\n        </ng-container>\n    </pep-draggable-item>\n\n    <div *ngIf=\"editable\" class=\"section-background\">\n        <div class=\"back-template\" *ngFor=\"let number of [0,1,2,3,4,5,6,7,8,9,10,11]\"></div>\n    </div>\n    <div #columnsWrapper class=\"columns-wrapper gap-{{ columnsGap }}\" \n        [ngClass]=\"{ 'mobile': screenType === 'Phablet', 'is-dragging': editable && getIsDragging }\">\n        <ng-container *ngFor=\"let column of columns; let i=index;\">\n            \n            <!-- This is moved to the section-block component cause when we change to work with 'grid-column' style we have to draw the columns.\n                *ngIf=\"editable || (column.BlockContainer && column.BlockContainer.BlockKey && column.BlockContainer.BlockKey.length > 0 && !getIsHidden(column?.BlockContainer?.Hide, screenType))\"  \n            -->\n            <div *ngIf=\"editable || isHorizontalView || (column.BlockContainer && column.BlockContainer.BlockKey && column.BlockContainer.BlockKey.length > 0)\"\n                [id]=\"sectionColumnKeyPrefix + i\" \n                class=\"section-column {{isHorizontalView ? 'horizontal' : 'vertical'}}\"\n                [ngClass]=\"{ 'active-column': selectedBlockKey === column.BlockContainer?.BlockKey, \n                    'is-hidden': getIsHidden(column?.BlockContainer?.Hide, screenType),\n                    'already-contains-block': editable && column.BlockContainer && column.BlockContainer.BlockKey && column.BlockContainer.BlockKey.length > 0 && \n                        draggingBlockKey && draggingBlockKey.length > 0 && column.BlockContainer.BlockKey !== draggingBlockKey }\"\n                cdkDropList\n                [cdkDropListData]=\"column\"\n                [cdkDropListOrientation]=\"isHorizontalView ? 'horizontal' : 'vertical'\" \n                [cdkDropListConnectedTo]=\"sectionsColumnsDropList\"\n                (cdkDropListDropped)=\"onBlockDropped($event)\"\n                [cdkDropListEnterPredicate]=\"canDropPredicate(i)\"\n            >\n                <section-block *ngIf=\"column.BlockContainer?.BlockKey\" \n                    class=\"section-block\" [sectionKey]=\"key\" [blockTemplate]=\"blockTemplate\"\n                    [blockContainer]=\"column.BlockContainer\" [editable]=\"editable\" [isMainEditorState]=\"isMainEditorState\" [sectionHeight]=\"styleHeight\"\n                    [active]=\"selectedBlockKey === column.BlockContainer?.BlockKey\" [screenType]=\"screenType\"\n                    (dragExited)=\"onSectionBlockDragExited($event)\" (dragEntered)=\"onSectionBlockDragEntered($event)\"></section-block>\n            </div>\n        </ng-container>\n    </div>\n</div>\n", styles: [".section-container{position:relative;display:grid;height:100%;max-height:inherit}.section-container.editable-state{min-height:2.5rem}.section-container.editable-state.default-height{min-height:16rem}.section-container.editable-state.active-section{z-index:11}.section-container.editable-state.active-section .columns-wrapper{z-index:1}.section-container.editable-state.active-section ::ng-deep .block-template-wrapper .block-template{pointer-events:unset!important;opacity:unset!important}.section-container.editable-state.cdk-drag-placeholder{opacity:.5}.section-container.editable-state:not(.cdk-drag-placeholder):hover .section-toolbar,.section-container.editable-state:not(.cdk-drag-placeholder).show-hover-state .section-toolbar{display:block!important}.section-container.editable-state:not(.cdk-drag-preview) .hide-toolbar{display:none}.section-container.editable-state.main-editor-state .mobile .is-hidden{display:none}.section-container.editable-state .mobile .is-hidden{display:block}.section-container.editable-state .section-toolbar{position:absolute;top:0;height:2.625rem;z-index:11}.section-container.editable-state .section-toolbar ::ng-deep .pep-draggable-item-container{border-radius:0 0 var(--pep-border-radius-md, .25rem) 0}.section-container.editable-state .section-background{position:absolute;width:100%;height:100%;z-index:0;display:grid;grid-template-columns:repeat(12,1fr)}.section-container.editable-state .section-background .back-template{opacity:.1}.section-container.editable-state .section-background .back-template:last-of-type{border-right:0 none}.section-container .columns-wrapper{display:grid;grid-auto-flow:column;height:inherit;max-height:inherit;overflow:inherit}.section-container .columns-wrapper.is-dragging{overflow:unset}.section-container .columns-wrapper.gap-none{gap:0}.section-container .columns-wrapper.gap-sm{gap:var(--pep-spacing-sm, .5rem)}.section-container .columns-wrapper.gap-md{gap:var(--pep-spacing-lg, 1rem)}.section-container .columns-wrapper.gap-lg{gap:var(--pep-spacing-2xl, 2rem)}.section-container .columns-wrapper .section-column{position:relative;height:inherit;max-height:inherit;overflow:inherit}.section-container .columns-wrapper .section-column .section-block{height:inherit;max-height:inherit}\n", ".section-container{background:transparent}.section-container.editable-state.active-section{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:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.section-container.editable-state.active-section .columns-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%))}.section-container.editable-state.section-hidden-state:not(.active-section){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)}.section-container.editable-state.main-editor-state.cdk-drag-preview{box-shadow:0 0 0 .125rem hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.section-container.editable-state.main-editor-state.cdk-drag-placeholder{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.section-container.editable-state.main-editor-state.cdk-drag-placeholder:hover,.section-container.editable-state.main-editor-state.cdk-drag-placeholder.show-hover-state{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)!important}.section-container.editable-state.main-editor-state:hover:not(.section-is-dragging),.section-container.editable-state.main-editor-state.show-hover-state:not(.section-is-dragging){box-shadow:0 0 0 .125rem hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.section-container.editable-state.main-editor-state .section-toolbar ::ng-deep .pep-draggable-item-container{box-shadow:0 0 0 .125rem hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.section-container.editable-state .section-background .back-template{background-color:#bec3e5;border-right:.125rem dashed hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}.section-container.editable-state .columns-wrapper .section-column{border:.125rem dashed hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}.section-container.editable-state .columns-wrapper .section-column.active-column{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%))}.section-container.editable-state .columns-wrapper .section-column.cdk-drop-list-dragging{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.section-container.editable-state .columns-wrapper .section-column.already-contains-block:hover{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.section-container.editable-state .columns-wrapper.gap-none .section-column:not(.section-container.editable-state .columns-wrapper.gap-none .section-column:first-of-type).horizontal{border-left:unset}.section-container.editable-state .columns-wrapper.gap-none .section-column:not(.section-container.editable-state .columns-wrapper.gap-none .section-column:first-of-type).horizontal.cdk-drop-list-dragging{border-left:.125rem dashed hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}.section-container.editable-state .columns-wrapper.gap-none .section-column:not(.section-container.editable-state .columns-wrapper.gap-none .section-column:first-of-type).vertical{border-top:unset}.section-container.editable-state .columns-wrapper.gap-none .section-column:not(.section-container.editable-state .columns-wrapper.gap-none .section-column:first-of-type).vertical.cdk-drop-list-dragging{border-top:.125rem dashed hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: LayoutBuilderInternalService }]; }, propDecorators: { sectionContainerRef: [{
                 type: ViewChild,
                 args: ['sectionContainer']
@@ -1228,6 +1251,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Input
             }], collapseOnTablet: [{
                 type: Input
+            }], padding: [{
+                type: Input
             }], columns: [{
                 type: Input
             }], hideIn: [{
@@ -1244,16 +1269,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
 
 class SectionBlockModule {
 }
-SectionBlockModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionBlockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SectionBlockModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: SectionBlockModule, declarations: [SectionBlockComponent], imports: [CommonModule,
+SectionBlockModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SectionBlockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SectionBlockModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SectionBlockModule, declarations: [SectionBlockComponent], imports: [CommonModule,
         DragDropModule,
         PepButtonModule,
         PepDraggableItemsModule], exports: [SectionBlockComponent] });
-SectionBlockModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionBlockModule, imports: [CommonModule,
+SectionBlockModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SectionBlockModule, imports: [CommonModule,
         DragDropModule,
         PepButtonModule,
         PepDraggableItemsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionBlockModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SectionBlockModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -1271,21 +1296,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
 
 class SectionModule {
 }
-SectionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SectionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: SectionModule, declarations: [SectionComponent], imports: [CommonModule,
+SectionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SectionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SectionModule, declarations: [SectionComponent], imports: [CommonModule,
         DragDropModule,
         PepButtonModule,
         SectionBlockModule,
         HideInModule,
         PepDraggableItemsModule, i1.TranslateModule], exports: [SectionComponent] });
-SectionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionModule, imports: [CommonModule,
+SectionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SectionModule, imports: [CommonModule,
         DragDropModule,
         PepButtonModule,
         SectionBlockModule,
         HideInModule,
         PepDraggableItemsModule,
         TranslateModule.forChild()] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SectionModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SectionComponent],
@@ -1302,293 +1327,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 }]
         }] });
 
-class PepLayoutComponent extends BaseDestroyerDirective {
-    constructor(
-    // public customizationService: PepCustomizationService,
-    // public layoutService: PepLayoutService,
-    layoutBuilderInternalService, hostElement, renderer) {
+class PepLayoutBuilderEditorComponent extends BaseDestroyerDirective {
+    constructor(hostElement, renderer) {
         super();
-        this.layoutBuilderInternalService = layoutBuilderInternalService;
         this.hostElement = hostElement;
         this.renderer = renderer;
-        this.blockTemplate = undefined;
-        this._showSkeleton = false;
-        this.layoutViewChange = new EventEmitter();
-        this.screenTypeChange = new EventEmitter();
-        this._horizontalSpacing = 'md';
-        this._verticalSpacing = 'md';
-        this.paddingInline = '1rem';
-        this.previewMode = false;
-        this._sectionsSubject = new BehaviorSubject([]);
-        this.renderer.addClass(this.hostElement.nativeElement, 'pep-layout');
+        this.editorTabs = [];
+        this.renderer.addClass(this.hostElement.nativeElement, 'pep-layout-builder-editor');
     }
-    set layoutView(value) {
-        this._layoutView = value;
-        this.layoutBuilderInternalService.loadLayoutBuilder(value);
+}
+PepLayoutBuilderEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepLayoutBuilderEditorComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+PepLayoutBuilderEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PepLayoutBuilderEditorComponent, selector: "pep-layout-builder-editor", inputs: { editorTabs: "editorTabs" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editorTabs && editorTabs.length > 0 then tabsTemplate else regularTemplate\">\n</ng-container>\n<ng-template #tabsTemplate>\n    <mat-tab-group #tabGroup class=\"layout-builder-editor-tabs\" animationDuration=\"0ms\">\n        <mat-tab *ngFor=\"let tab of editorTabs\" label=\"{{tab.title | translate}}\">\n            <div class=\"layout-builder-editor-tab\">\n                <ng-container *ngIf=\"tab.templateRef\">\n                    <ng-container *ngTemplateOutlet=\"tab.templateRef; context: { tabKey: tab.key }\">\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"!tab.templateRef\">\n                    <ng-content></ng-content>\n                </ng-container>\n            </div>\n        </mat-tab>\n    </mat-tab-group>\n\n</ng-template>\n<ng-template #regularTemplate>\n    <div class=\"layout-builder-editor-container\">\n        <ng-content></ng-content>\n    </div>\n</ng-template>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i2$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepLayoutBuilderEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pep-layout-builder-editor', template: "<ng-container *ngIf=\"editorTabs && editorTabs.length > 0 then tabsTemplate else regularTemplate\">\n</ng-container>\n<ng-template #tabsTemplate>\n    <mat-tab-group #tabGroup class=\"layout-builder-editor-tabs\" animationDuration=\"0ms\">\n        <mat-tab *ngFor=\"let tab of editorTabs\" label=\"{{tab.title | translate}}\">\n            <div class=\"layout-builder-editor-tab\">\n                <ng-container *ngIf=\"tab.templateRef\">\n                    <ng-container *ngTemplateOutlet=\"tab.templateRef; context: { tabKey: tab.key }\">\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"!tab.templateRef\">\n                    <ng-content></ng-content>\n                </ng-container>\n            </div>\n        </mat-tab>\n    </mat-tab-group>\n\n</ng-template>\n<ng-template #regularTemplate>\n    <div class=\"layout-builder-editor-container\">\n        <ng-content></ng-content>\n    </div>\n</ng-template>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { editorTabs: [{
+                type: Input
+            }] } });
+
+class MainEditorComponent extends BaseDestroyerDirective {
+    set hostObject(value) {
+        this._hostObject = value;
+        this.isFullWidth = !value.maxWidth || value.maxWidth === 0;
+        this.maxWidth = value.maxWidth;
+        this.horizontalSpacing = this._hostObject.horizontalSpacing || 'md';
+        this.verticalSpacing = this._hostObject.verticalSpacing || 'md';
+        this.sectionsGap = this._hostObject.sectionsGap || 'md';
+        this.columnsGap = this._hostObject.columnsGap || 'md';
+        this.roundedCorners = this._hostObject.roundedCorners || 'none';
     }
-    get layoutView() {
-        return this._layoutView;
+    get hostObject() {
+        return this._hostObject;
     }
-    set showSkeleton(value) {
-        this._showSkeleton = value;
-        this.layoutBuilderInternalService.showSkeleton(value);
-    }
-    get showSkeleton() {
-        return this._showSkeleton;
-    }
-    set horizontalSpacing(value) {
-        this._horizontalSpacing = value;
-        this.paddingInline = this.convertLayoutSizeType(value || 'md');
-    }
-    get horizontalSpacing() {
-        return this._horizontalSpacing;
-    }
-    set verticalSpacing(value) {
-        this._verticalSpacing = value;
-    }
-    get verticalSpacing() {
-        return this._verticalSpacing;
-    }
-    get sections$() {
-        return this._sectionsSubject.asObservable();
-    }
-    convertLayoutSizeType(size) {
-        let res;
-        if (size === 'lg') {
-            res = '2rem';
-        }
-        else if (size === 'md') {
-            res = '1rem';
-        }
-        else if (size === 'sm') {
-            res = '0.5rem';
-        }
-        else {
-            res = '0';
-        }
-        return res;
-    }
-    animateSkeleton() {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        if (this._showSkeleton) {
-            // this.sectionsContainer?.nativeElement?.classList.add('out');
-            (_b = (_a = this.sectionsContainer) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.classList.remove('in');
-            (_d = (_c = this.skeletonContainer) === null || _c === void 0 ? void 0 : _c.nativeElement) === null || _d === void 0 ? void 0 : _d.classList.add('in');
-            // this.skeletonContainer?.nativeElement?.classList.remove('out');
-        }
-        else {
-            (_f = (_e = this.sectionsContainer) === null || _e === void 0 ? void 0 : _e.nativeElement) === null || _f === void 0 ? void 0 : _f.classList.add('in');
-            // this.sectionsContainer?.nativeElement?.classList.remove('out');
-            // this.skeletonContainer?.nativeElement?.classList.add('out');
-            (_h = (_g = this.skeletonContainer) === null || _g === void 0 ? void 0 : _g.nativeElement) === null || _h === void 0 ? void 0 : _h.classList.remove('in');
-        }
-    }
-    setLayoutDataProperties() {
-        var _a;
-        const layoutView = this._layoutView;
-        if (layoutView) {
-            if ((_a = this.sectionsContainer) === null || _a === void 0 ? void 0 : _a.nativeElement) {
-                const maxWidth = coerceNumberProperty(layoutView.Layout.MaxWidth, 0);
-                const maxWidthToSet = maxWidth === 0 ? 'unset' : `${maxWidth}px`;
-                this.renderer.setStyle(this.sectionsContainer.nativeElement, 'max-width', maxWidthToSet);
-            }
-            this.sectionsGap = layoutView.Layout.SectionsGap || 'md';
-            this.columnsGap = layoutView.Layout.ColumnsGap || 'md';
-            this.horizontalSpacing = layoutView.Layout.HorizontalSpacing;
-            this.verticalSpacing = layoutView.Layout.VerticalSpacing;
-        }
-    }
-    setScreentType(screenSize) {
-        const screenType = this.layoutBuilderInternalService.getScreenType(screenSize);
-        this.selectedScreenType = screenType;
-        this.screenTypeChange.emit(screenType);
-    }
-    ngOnInit() {
-        /***********************************************************************************************/
-        /*                          Internal Events - for code usage
-        /***********************************************************************************************/
-        if (this.layoutBuilderInternalService.editMode) {
-            this.layoutBuilderInternalService.previewModeChange$.pipe(this.getDestroyer()).subscribe((previewMode) => {
-                this.previewMode = previewMode;
-            });
-        }
-        this.layoutBuilderInternalService.sectionsChange$.pipe(this.getDestroyer()).subscribe((sections) => {
-            this._sectionsSubject.next(sections);
-        });
-        this.layoutBuilderInternalService.showSkeletonChange$.pipe(this.getDestroyer()).subscribe((showSkeleton) => {
-            if (showSkeleton !== undefined) {
-                this._showSkeleton = showSkeleton;
-                this.animateSkeleton();
-            }
-        });
-        // this.layoutService.onResize$.pipe(this.getDestroyer()).subscribe((size: any) => {
-        //     this.setScreentType(size);
-        // });
-        this.layoutBuilderInternalService.screenSizeChange$.pipe(this.getDestroyer()).subscribe((size) => {
-            this.setScreentType(size);
-        });
-        /***********************************************************************************************/
-        /*                          External Events - for raise to the client
-        /***********************************************************************************************/
-        this.layoutBuilderInternalService.layoutViewChange$.pipe(this.getDestroyer()).subscribe((layoutView) => {
-            this._layoutView = layoutView;
-            this.setLayoutDataProperties();
-            this.layoutViewChange.emit(this._layoutView);
-        });
-    }
-    getSectionsTemplateRows() {
-        let gridAutoRows = '';
-        // let fillHeightCount = 0;
-        this.sections$.pipe(this.getDestroyer()).subscribe((sections) => {
-            if (sections === null || sections === void 0 ? void 0 : sections.length) {
-                sections.forEach((sec) => {
-                    if (sec.FillHeight === true) {
-                        // fillHeightCount++;
-                        gridAutoRows += ' auto';
-                    }
-                    else {
-                        gridAutoRows += ' min-content';
-                    }
-                });
-                //if all are fill height should return 1fr for all
-                //if not should return auto for fill height and min content for none
-                return gridAutoRows;
-            }
-            else {
-                return '';
-            }
-        });
-        return gridAutoRows;
-    }
-    onSectionDropped(event) {
-        this.layoutBuilderInternalService.onSectionDropped(event);
-    }
-    onDragStart(event) {
-        this.layoutBuilderInternalService.onSectionDragStart(event);
-    }
-    onDragEnd(event) {
-        this.layoutBuilderInternalService.onSectionDragEnd(event);
-    }
-}
-PepLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutComponent, deps: [{ token: LayoutBuilderInternalService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-PepLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepLayoutComponent, selector: "pep-layout", inputs: { layoutView: "layoutView", blockTemplate: "blockTemplate", showSkeleton: "showSkeleton" }, outputs: { layoutViewChange: "layoutViewChange", screenTypeChange: "screenTypeChange" }, host: { properties: { "style.padding-inline": "this.paddingInline" } }, viewQueries: [{ propertyName: "skeletonContainer", first: true, predicate: ["skeletonCont"], descendants: true, static: true }, { propertyName: "sectionsContainer", first: true, predicate: ["sectionsCont"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<!-- For the top spacing -->\n<div class=\"top-spacing spacing-{{verticalSpacing}}\" ></div>\n<div #sectionsCont cdkDropListGroup class=\"sections-container gap-{{ sectionsGap }}\" [ngClass]=\"{'preview-state': previewMode }\"  \n    cdkDropList (cdkDropListDropped)=\"onSectionDropped($event)\" [ngStyle]=\"{'grid-auto-rows': getSectionsTemplateRows()}\"\n    >\n    <section *ngFor=\"let section of sections$ | async; let i=index;\" \n        class=\"draggable-section \" [ngClass]=\"selectedScreenType === 'Phablet' ? 'margin-'+sectionsGap : ''\" [blockTemplate]=\"blockTemplate\"\n        [key]=\"section.Key\" [name]=\"section.Name || ('LAYOUT_BUILDER.SECTION' | translate) + ' ' + (i+1)\" [split]=\"section.Split\" [height]=\"section.Height\"\n        [columns]=\"section.Columns\" [collapseOnTablet]=\"section.CollapseOnTablet || false\" [hideIn]=\"section.Hide || []\" [columnsGap]=\"columnsGap\"\n        >\n    </section>\n</div>\n<div #skeletonCont class=\"skeleton-container \">\n    <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"xl\" ></pep-skeleton-loader>\n    <div class=\"split-skeleton-container\">\n        <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"max\" ></pep-skeleton-loader>\n        <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"max\" ></pep-skeleton-loader>\n    </div>\n    <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"xl\" ></pep-skeleton-loader>\n\n    <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"max\" ></pep-skeleton-loader>\n</div>\n<!-- For the bottom spacing -->\n<div class=\"bottom-spacing spacing-{{verticalSpacing}}\"></div>\n<pep-size-detector></pep-size-detector>", styles: [":host{display:grid;grid-template-areas:\"top-spacing\" \"content\" \"bottom-spacing\";grid-template-rows:auto 1fr auto;height:100%}.top-spacing{grid-area:top-spacing}.top-spacing.spacing-none{height:0}.top-spacing.spacing-sm{height:var(--pep-spacing-sm, .5rem)}.top-spacing.spacing-md{height:var(--pep-spacing-lg, 1rem)}.top-spacing.spacing-lg{height:var(--pep-spacing-2xl, 2rem)}.bottom-spacing{grid-area:bottom-spacing}.bottom-spacing.spacing-none{height:0}.bottom-spacing.spacing-sm{height:var(--pep-spacing-sm, .5rem)}.bottom-spacing.spacing-md{height:var(--pep-spacing-lg, 1rem)}.bottom-spacing.spacing-lg{height:var(--pep-spacing-2xl, 2rem)}.skeleton-container{display:grid;grid-area:content;height:100%;gap:var(--pep-spacing-lg, 1rem);grid-template-rows:auto auto auto 1fr;opacity:0}.skeleton-container .split-skeleton-container{display:grid;height:10rem;gap:var(--pep-spacing-lg, 1rem);grid-auto-flow:column}.sections-container{z-index:11;grid-area:content;width:100%;max-width:inherit;overflow-x:unset;margin:0 auto;position:relative;display:grid;grid-row:1px;height:inherit;opacity:0}.sections-container.gap-none{gap:0}.sections-container.gap-sm{gap:var(--pep-spacing-sm, .5rem)}.sections-container.gap-md{gap:var(--pep-spacing-lg, 1rem)}.sections-container.gap-lg{gap:var(--pep-spacing-2xl, 2rem)}.sections-container .draggable-section{display:block}.sections-container.preview-state section{display:contents}@keyframes in{0%{opacity:0;transform:translateY(-80);filter:blur(20px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}.in{animation-name:in;animation-direction:normal;animation-duration:1.2s;animation-fill-mode:forwards}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$3.PepSkeletonLoaderComponent, selector: "pep-skeleton-loader", inputs: ["rowHeightType", "rowsNumber", "lastRowOffset"] }, { kind: "component", type: i4$2.PepSizeDetectorComponent, selector: "pep-size-detector", inputs: ["showScreenSize", "useAsWebComponent"], outputs: ["sizeChange"] }, { kind: "directive", type: i3$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$2.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "component", type: SectionComponent, selector: "section", inputs: ["blockTemplate", "key", "name", "split", "height", "collapseOnTablet", "columns", "hideIn", "columnsGap"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pep-layout', template: "<!-- For the top spacing -->\n<div class=\"top-spacing spacing-{{verticalSpacing}}\" ></div>\n<div #sectionsCont cdkDropListGroup class=\"sections-container gap-{{ sectionsGap }}\" [ngClass]=\"{'preview-state': previewMode }\"  \n    cdkDropList (cdkDropListDropped)=\"onSectionDropped($event)\" [ngStyle]=\"{'grid-auto-rows': getSectionsTemplateRows()}\"\n    >\n    <section *ngFor=\"let section of sections$ | async; let i=index;\" \n        class=\"draggable-section \" [ngClass]=\"selectedScreenType === 'Phablet' ? 'margin-'+sectionsGap : ''\" [blockTemplate]=\"blockTemplate\"\n        [key]=\"section.Key\" [name]=\"section.Name || ('LAYOUT_BUILDER.SECTION' | translate) + ' ' + (i+1)\" [split]=\"section.Split\" [height]=\"section.Height\"\n        [columns]=\"section.Columns\" [collapseOnTablet]=\"section.CollapseOnTablet || false\" [hideIn]=\"section.Hide || []\" [columnsGap]=\"columnsGap\"\n        >\n    </section>\n</div>\n<div #skeletonCont class=\"skeleton-container \">\n    <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"xl\" ></pep-skeleton-loader>\n    <div class=\"split-skeleton-container\">\n        <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"max\" ></pep-skeleton-loader>\n        <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"max\" ></pep-skeleton-loader>\n    </div>\n    <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"xl\" ></pep-skeleton-loader>\n\n    <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"max\" ></pep-skeleton-loader>\n</div>\n<!-- For the bottom spacing -->\n<div class=\"bottom-spacing spacing-{{verticalSpacing}}\"></div>\n<pep-size-detector></pep-size-detector>", styles: [":host{display:grid;grid-template-areas:\"top-spacing\" \"content\" \"bottom-spacing\";grid-template-rows:auto 1fr auto;height:100%}.top-spacing{grid-area:top-spacing}.top-spacing.spacing-none{height:0}.top-spacing.spacing-sm{height:var(--pep-spacing-sm, .5rem)}.top-spacing.spacing-md{height:var(--pep-spacing-lg, 1rem)}.top-spacing.spacing-lg{height:var(--pep-spacing-2xl, 2rem)}.bottom-spacing{grid-area:bottom-spacing}.bottom-spacing.spacing-none{height:0}.bottom-spacing.spacing-sm{height:var(--pep-spacing-sm, .5rem)}.bottom-spacing.spacing-md{height:var(--pep-spacing-lg, 1rem)}.bottom-spacing.spacing-lg{height:var(--pep-spacing-2xl, 2rem)}.skeleton-container{display:grid;grid-area:content;height:100%;gap:var(--pep-spacing-lg, 1rem);grid-template-rows:auto auto auto 1fr;opacity:0}.skeleton-container .split-skeleton-container{display:grid;height:10rem;gap:var(--pep-spacing-lg, 1rem);grid-auto-flow:column}.sections-container{z-index:11;grid-area:content;width:100%;max-width:inherit;overflow-x:unset;margin:0 auto;position:relative;display:grid;grid-row:1px;height:inherit;opacity:0}.sections-container.gap-none{gap:0}.sections-container.gap-sm{gap:var(--pep-spacing-sm, .5rem)}.sections-container.gap-md{gap:var(--pep-spacing-lg, 1rem)}.sections-container.gap-lg{gap:var(--pep-spacing-2xl, 2rem)}.sections-container .draggable-section{display:block}.sections-container.preview-state section{display:contents}@keyframes in{0%{opacity:0;transform:translateY(-80);filter:blur(20px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}.in{animation-name:in;animation-direction:normal;animation-duration:1.2s;animation-fill-mode:forwards}\n"] }]
-        }], ctorParameters: function () { return [{ type: LayoutBuilderInternalService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { skeletonContainer: [{
-                type: ViewChild,
-                args: ['skeletonCont', { static: true }]
-            }], sectionsContainer: [{
-                type: ViewChild,
-                args: ['sectionsCont', { static: true }]
-            }], layoutView: [{
-                type: Input
-            }], blockTemplate: [{
-                type: Input
-            }], showSkeleton: [{
-                type: Input
-            }], layoutViewChange: [{
-                type: Output
-            }], screenTypeChange: [{
-                type: Output
-            }], paddingInline: [{
-                type: HostBinding,
-                args: ['style.padding-inline']
-            }] } });
-
-class PepLayoutModule {
-}
-PepLayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PepLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutModule, declarations: [PepLayoutComponent], imports: [CommonModule,
-        HttpClientModule,
-        PepNgxLibModule,
-        PepSkeletonLoaderModule,
-        PepSizeDetectorModule,
-        PepDialogModule,
-        DragDropModule,
-        SectionModule, i1.TranslateModule], exports: [PepLayoutComponent] });
-PepLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutModule, imports: [CommonModule,
-        HttpClientModule,
-        PepNgxLibModule,
-        PepSkeletonLoaderModule,
-        PepSizeDetectorModule,
-        PepDialogModule,
-        DragDropModule,
-        SectionModule,
-        TranslateModule.forChild()] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        PepLayoutComponent,
-                    ],
-                    imports: [
-                        CommonModule,
-                        HttpClientModule,
-                        PepNgxLibModule,
-                        PepSkeletonLoaderModule,
-                        PepSizeDetectorModule,
-                        PepDialogModule,
-                        DragDropModule,
-                        SectionModule,
-                        TranslateModule.forChild()
-                    ],
-                    exports: [PepLayoutComponent],
-                }]
-        }] });
-
-class PepLayoutBuilderEditorComponent extends BaseDestroyerDirective {
-    constructor(hostElement, renderer) {
-        super();
-        this.hostElement = hostElement;
-        this.renderer = renderer;
-        this.editorTabs = [];
-        this.renderer.addClass(this.hostElement.nativeElement, 'pep-layout-builder-editor');
-    }
-}
-PepLayoutBuilderEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutBuilderEditorComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-PepLayoutBuilderEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepLayoutBuilderEditorComponent, selector: "pep-layout-builder-editor", inputs: { editorTabs: "editorTabs" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editorTabs && editorTabs.length > 0 then tabsTemplate else regularTemplate\">\n</ng-container>\n<ng-template #tabsTemplate>\n    <mat-tab-group #tabGroup class=\"layout-builder-editor-tabs\" animationDuration=\"0ms\">\n        <mat-tab *ngFor=\"let tab of editorTabs\" label=\"{{tab.title | translate}}\">\n            <div class=\"layout-builder-editor-tab\">\n                <ng-container *ngIf=\"tab.templateRef\">\n                    <ng-container *ngTemplateOutlet=\"tab.templateRef; context: { tabKey: tab.key }\">\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"!tab.templateRef\">\n                    <ng-content></ng-content>\n                </ng-container>\n            </div>\n        </mat-tab>\n    </mat-tab-group>\n\n</ng-template>\n<ng-template #regularTemplate>\n    <div class=\"layout-builder-editor-container\">\n        <ng-content></ng-content>\n    </div>\n</ng-template>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i2$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutBuilderEditorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pep-layout-builder-editor', template: "<ng-container *ngIf=\"editorTabs && editorTabs.length > 0 then tabsTemplate else regularTemplate\">\n</ng-container>\n<ng-template #tabsTemplate>\n    <mat-tab-group #tabGroup class=\"layout-builder-editor-tabs\" animationDuration=\"0ms\">\n        <mat-tab *ngFor=\"let tab of editorTabs\" label=\"{{tab.title | translate}}\">\n            <div class=\"layout-builder-editor-tab\">\n                <ng-container *ngIf=\"tab.templateRef\">\n                    <ng-container *ngTemplateOutlet=\"tab.templateRef; context: { tabKey: tab.key }\">\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"!tab.templateRef\">\n                    <ng-content></ng-content>\n                </ng-container>\n            </div>\n        </mat-tab>\n    </mat-tab-group>\n\n</ng-template>\n<ng-template #regularTemplate>\n    <div class=\"layout-builder-editor-container\">\n        <ng-content></ng-content>\n    </div>\n</ng-template>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { editorTabs: [{
-                type: Input
-            }] } });
-
-class MainEditorComponent extends BaseDestroyerDirective {
-    // protected showBottomContent = false;
-    // onLoadFlowHostObject;
-    // onChangeFlowHostObject;
-    constructor(layoutBuilderInternalService, hostElement, renderer) {
-        super();
-        this.layoutBuilderInternalService = layoutBuilderInternalService;
-        this.hostElement = hostElement;
-        this.renderer = renderer;
-        this.availableBlocksForDrag = [];
-        this.hostObjectChange = new EventEmitter();
-        this.horizontalSpacing = 'md';
-        this.verticalSpacing = 'md';
-        this.sectionsGap = 'md';
-        this.columnsGap = 'md';
-        this.roundedCorners = 'none';
-        // protected sizesGroupButtons = Array<ISpacingOption>();
-        this.availableBlocksContainerId = LayoutBuilderInternalService.AVAILABLE_BLOCKS_CONTAINER_ID;
-        this.sectionsColumnsDropList = [];
-        this.showTopContent = false;
-        this.renderer.addClass(this.hostElement.nativeElement, 'pep-layout-main-editor');
-    }
-    set hostObject(value) {
-        this._hostObject = value;
-        this.isFullWidth = !value.maxWidth || value.maxWidth === 0;
-        this.maxWidth = value.maxWidth;
-        this.horizontalSpacing = this._hostObject.horizontalSpacing || 'md';
-        this.verticalSpacing = this._hostObject.verticalSpacing || 'md';
-        this.sectionsGap = this._hostObject.sectionsGap || 'md';
-        this.columnsGap = this._hostObject.columnsGap || 'md';
-        this.roundedCorners = this._hostObject.roundedCorners || 'none';
-    }
-    get hostObject() {
-        return this._hostObject;
+    // protected showBottomContent = false;
+    // onLoadFlowHostObject;
+    // onChangeFlowHostObject;
+    constructor(hostElement, renderer) {
+        super();
+        this.hostElement = hostElement;
+        this.renderer = renderer;
+        this.availableBlocksForDrag = [];
+        this.sectionsColumnsDropList = [];
+        this.hostObjectChange = new EventEmitter();
+        this.addSectionClick = new EventEmitter();
+        this.onBlockDragStart = new EventEmitter();
+        this.onBlockDragEnd = new EventEmitter();
+        this.horizontalSpacing = 'md';
+        this.verticalSpacing = 'md';
+        this.sectionsGap = 'md';
+        this.columnsGap = 'md';
+        this.roundedCorners = 'none';
+        // protected sizesGroupButtons = Array<ISpacingOption>();
+        this.availableBlocksContainerId = LayoutBuilderInternalService.AVAILABLE_BLOCKS_CONTAINER_ID;
+        this.showTopContent = false;
+        this.renderer.addClass(this.hostElement.nativeElement, 'pep-layout-main-editor');
     }
     updateHostObject() {
         this._hostObject.maxWidth = this.isFullWidth ? 0 : this.maxWidth;
@@ -1600,9 +1392,9 @@ class MainEditorComponent extends BaseDestroyerDirective {
         this.hostObjectChange.emit(this.hostObject);
     }
     ngOnInit() {
-        this.layoutBuilderInternalService.sectionsColumnsDropListChange$.subscribe((sectionsColumnsDropList) => {
-            this.sectionsColumnsDropList = sectionsColumnsDropList;
-        });
+        // this.layoutBuilderInternalService.sectionsColumnsDropListChange$.subscribe((sectionsColumnsDropList: any) => {
+        //     this.sectionsColumnsDropList = sectionsColumnsDropList;
+        // });
     }
     ngAfterContentInit() {
         var _a;
@@ -1614,7 +1406,7 @@ class MainEditorComponent extends BaseDestroyerDirective {
         // }
     }
     onAddSectionClick(event) {
-        this.layoutBuilderInternalService.addSection();
+        this.addSectionClick.emit();
     }
     isFullWidthChange(isChecked) {
         this.isFullWidth = isChecked;
@@ -1646,18 +1438,20 @@ class MainEditorComponent extends BaseDestroyerDirective {
         this.updateHostObject();
     }
     onDragStart(event) {
-        this.layoutBuilderInternalService.onBlockDragStart(event);
+        this.onBlockDragStart.emit(event);
+        // this.layoutBuilderInternalService.onBlockDragStart(event);
     }
     onDragEnd(event) {
-        this.layoutBuilderInternalService.onBlockDragEnd(event);
+        this.onBlockDragEnd.emit(event);
+        // this.layoutBuilderInternalService.onBlockDragEnd(event);
     }
 }
-MainEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: MainEditorComponent, deps: [{ token: LayoutBuilderInternalService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-MainEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: MainEditorComponent, selector: "main-editor", inputs: { availableBlocksForDrag: "availableBlocksForDrag", hostObject: "hostObject" }, outputs: { hostObjectChange: "hostObjectChange" }, viewQueries: [{ propertyName: "_topContentRef", first: true, predicate: ["topContentRef"], descendants: true, static: true }, { propertyName: "availableBlocksContainer", first: true, predicate: ["availableBlocksContainer"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<pep-layout-builder-editor [editorTabs]=\"[\n    {key: '1', title: 'LAYOUT_BUILDER.GENERAL', templateRef: firstTabTemplate}, \n    {key: '2', title: 'LAYOUT_BUILDER.DESIGN', templateRef: secondTabTemplate}]\">\n</pep-layout-builder-editor>\n\n<ng-template #firstTabTemplate let-tabKey=\"tabKey\">\n    <div #topContentRef class=\"layout-builder-editor-group\">\n        <ng-content select=\"[layout-editor-top-content]\"></ng-content>\n        <div *ngIf=\"showTopContent\" class=\"editor-separator\"></div>\n    </div>\n    <div>\n        <label class=\"editor-title\">{{'LAYOUT_BUILDER.SECTIONS_TITLE' | translate}}</label>\n        <pep-button class=\"add-section-button\" value=\"{{'LAYOUT_BUILDER.ADD_SECTION' | translate}}\" styleType=\"regular\" iconName=\"number_plus\" iconPosition=\"end\"\n            (buttonClick)=\"onAddSectionClick($event)\"></pep-button>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <pep-draggable-items class=\"available-blocks\" [containerId]=\"availableBlocksContainerId\" [items]=\"availableBlocksForDrag\" [title]=\"'LAYOUT_BUILDER.BLOCKS_TITLE' | translate\"\n        titleSizeType=\"xl\" titleType=\"with-bottom-border\" [showSearch]=\"true\" [dropAreaIds]=\"sectionsColumnsDropList\" (itemDragStarted)=\"onDragStart($event)\" (itemDragEnded)=\"onDragEnd($event)\">\n    </pep-draggable-items>\n    <!-- <div #bottomContentRef class=\"layout-builder-editor-group\">\n        <div *ngIf=\"showBottomContent\" class=\"editor-separator\"></div>\n        <ng-content select=\"[layout-editor-bottom-content]\"></ng-content>\n    </div> -->\n</ng-template>\n\n<ng-template #secondTabTemplate let-tabKey=\"tabKey\">\n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"isFullWidth\" [label]=\"'LAYOUT_BUILDER.FULL_WIDTH_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"isFullWidthChange($event)\"></pep-checkbox>\n        <pep-textbox [label]=\"'LAYOUT_BUILDER.MAX_WIDTH_TITLE' | translate\" type=\"int\" [disabled]=\"isFullWidth\" [value]=\"maxWidth.toString()\" (valueChange)=\"onMaxWidthChange($event)\"></pep-textbox>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <!-- Spacing -->\n    <pep-group-buttons-settings [groupType]=\"'sizes'\" \n                                [header]=\"'LAYOUT_BUILDER.SPACING_TITLE' | translate\" [subHeader]=\"'LAYOUT_BUILDER.SPACING_HORIZONTAL_TITLE' | translate\"\n                                [btnKey]=\"horizontalSpacing.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n                                (btnkeyChange)=\"setColumnsHorizntalGap($event)\">\n    </pep-group-buttons-settings>\n    <pep-group-buttons-settings [groupType]=\"'sizes'\" \n                                [subHeader]=\"'LAYOUT_BUILDER.SPACING_VERTICAL_TITLE' | translate\"\n                                [btnKey]=\"verticalSpacing.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n                                (btnkeyChange)=\"setColumnsVerticalGap($event)\">\n    </pep-group-buttons-settings>\n    <div class=\"editor-separator\"></div>\n    <!-- Gaps -->\n    <pep-group-buttons-settings [groupType]=\"'sizes'\" \n                                [header]=\"'LAYOUT_BUILDER.GAPS_TITLE' | translate\" [subHeader]=\"'LAYOUT_BUILDER.SECTIONS_GAP_TITLE' | translate\"\n                                [btnKey]=\"sectionsGap.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n                                (btnkeyChange)=\"setSectionGap($event)\">\n    </pep-group-buttons-settings>\n    <pep-group-buttons-settings [groupType]=\"'sizes'\" \n                                [subHeader]=\"'LAYOUT_BUILDER.COLUMNS_GAP_TITLE' | translate\"\n                                [btnKey]=\"columnsGap.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n                                (btnkeyChange)=\"setColumnsGap($event)\">\n    </pep-group-buttons-settings>\n    <!-- Rounded Corners -->\n    <!--\n    <div class=\"editor-separator\"></div>\n    <label class=\"editor-title\">{{'LAYOUT_BUILDER.ROUNDED_CORNERS_TITLE' | translate}}</label><br>\n    <label class=\"body-xs ellipsis\">{{'LAYOUT_BUILDER.BORDER_RADIUS_TITLE' | translate}}</label>\n    <pep-group-buttons [buttons]=\"sizesGroupButtons\" [selectedButtonKey]=\"roundedCorners\" buttonsClass=\"ms regular\" viewType=\"toggle\"\n        (buttonClick)=\"setRoundedCorners($event)\"></pep-group-buttons> -->\n</ng-template>\n", styles: [":host pep-draggable-items ::ng-deep .draggable-items-overflow{padding-bottom:0!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$4.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey", "regex", "regexError", "isInFocus"], outputs: ["valueChange", "keyup"] }, { kind: "component", type: i4$1.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i5$1.PepCheckboxComponent, selector: "pep-checkbox", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "additionalValue", "form", "isActive", "showTitle", "renderTitle", "layoutType", "visible"], outputs: ["valueChange"] }, { kind: "component", type: i6.GroupButtonsSettingsComponent, selector: "pep-group-buttons-settings", inputs: ["header", "subHeader", "groupType", "btnsArray", "excludeKeys", "useNone", "disabled", "dir", "titleSize", "bold", "btnKey"], outputs: ["btnkeyChange"] }, { kind: "component", type: i7.PepDraggableItemsComponent, selector: "pep-draggable-items", inputs: ["containerId", "showSearch", "title", "titleType", "titleSizeType", "itemPlaceholderType", "dropAreaIds", "items"], outputs: ["itemDragStarted", "itemDragEnded"] }, { kind: "component", type: PepLayoutBuilderEditorComponent, selector: "pep-layout-builder-editor", inputs: ["editorTabs"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: MainEditorComponent, decorators: [{
+MainEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MainEditorComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+MainEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MainEditorComponent, selector: "main-editor", inputs: { availableBlocksForDrag: "availableBlocksForDrag", sectionsColumnsDropList: "sectionsColumnsDropList", hostObject: "hostObject" }, outputs: { hostObjectChange: "hostObjectChange", addSectionClick: "addSectionClick", onBlockDragStart: "onBlockDragStart", onBlockDragEnd: "onBlockDragEnd" }, viewQueries: [{ propertyName: "_topContentRef", first: true, predicate: ["topContentRef"], descendants: true, static: true }, { propertyName: "availableBlocksContainer", first: true, predicate: ["availableBlocksContainer"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<pep-layout-builder-editor [editorTabs]=\"[\n    {key: '1', title: 'LAYOUT_BUILDER.GENERAL', templateRef: firstTabTemplate}, \n    {key: '2', title: 'LAYOUT_BUILDER.DESIGN', templateRef: secondTabTemplate}]\">\n</pep-layout-builder-editor>\n\n<ng-template #firstTabTemplate let-tabKey=\"tabKey\">\n    <div #topContentRef class=\"layout-builder-editor-group\">\n        <ng-content select=\"[layout-editor-top-content]\"></ng-content>\n        <div *ngIf=\"showTopContent\" class=\"editor-separator\"></div>\n    </div>\n    <div>\n        <label class=\"editor-title\">{{'LAYOUT_BUILDER.SECTIONS_TITLE' | translate}}</label>\n        <pep-button class=\"add-section-button\" value=\"{{'LAYOUT_BUILDER.ADD_SECTION' | translate}}\" styleType=\"regular\" iconName=\"number_plus\" iconPosition=\"end\"\n            (buttonClick)=\"onAddSectionClick($event)\"></pep-button>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <pep-draggable-items class=\"available-blocks\" [containerId]=\"availableBlocksContainerId\" [items]=\"availableBlocksForDrag\" [title]=\"'LAYOUT_BUILDER.BLOCKS_TITLE' | translate\"\n        titleSizeType=\"xl\" titleType=\"with-bottom-border\" [showSearch]=\"true\" [dropAreaIds]=\"sectionsColumnsDropList\" (itemDragStarted)=\"onDragStart($event)\" (itemDragEnded)=\"onDragEnd($event)\">\n    </pep-draggable-items>\n    <!-- <div #bottomContentRef class=\"layout-builder-editor-group\">\n        <div *ngIf=\"showBottomContent\" class=\"editor-separator\"></div>\n        <ng-content select=\"[layout-editor-bottom-content]\"></ng-content>\n    </div> -->\n</ng-template>\n\n<ng-template #secondTabTemplate let-tabKey=\"tabKey\">\n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"isFullWidth\" [label]=\"'LAYOUT_BUILDER.FULL_WIDTH_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"isFullWidthChange($event)\"></pep-checkbox>\n        <pep-textbox [label]=\"'LAYOUT_BUILDER.MAX_WIDTH_TITLE' | translate\" type=\"int\" [disabled]=\"isFullWidth\" [value]=\"maxWidth.toString()\" (valueChange)=\"onMaxWidthChange($event)\"></pep-textbox>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <!-- Spacing -->\n    <pep-group-buttons-settings [groupType]=\"'sizes'\" \n                                [header]=\"'LAYOUT_BUILDER.SPACING_TITLE' | translate\" [subHeader]=\"'LAYOUT_BUILDER.SPACING_HORIZONTAL_TITLE' | translate\"\n                                [btnKey]=\"horizontalSpacing.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n                                (btnkeyChange)=\"setColumnsHorizntalGap($event)\">\n    </pep-group-buttons-settings>\n    <pep-group-buttons-settings [groupType]=\"'sizes'\" \n                                [subHeader]=\"'LAYOUT_BUILDER.SPACING_VERTICAL_TITLE' | translate\"\n                                [btnKey]=\"verticalSpacing.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n                                (btnkeyChange)=\"setColumnsVerticalGap($event)\">\n    </pep-group-buttons-settings>\n    <div class=\"editor-separator\"></div>\n    <!-- Gaps -->\n    <pep-group-buttons-settings [groupType]=\"'sizes'\" \n                                [header]=\"'LAYOUT_BUILDER.GAPS_TITLE' | translate\" [subHeader]=\"'LAYOUT_BUILDER.SECTIONS_GAP_TITLE' | translate\"\n                                [btnKey]=\"sectionsGap.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n                                (btnkeyChange)=\"setSectionGap($event)\">\n    </pep-group-buttons-settings>\n    <pep-group-buttons-settings [groupType]=\"'sizes'\" \n                                [subHeader]=\"'LAYOUT_BUILDER.COLUMNS_GAP_TITLE' | translate\"\n                                [btnKey]=\"columnsGap.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n                                (btnkeyChange)=\"setColumnsGap($event)\">\n    </pep-group-buttons-settings>\n    <!-- Rounded Corners -->\n    <!--\n    <div class=\"editor-separator\"></div>\n    <label class=\"editor-title\">{{'LAYOUT_BUILDER.ROUNDED_CORNERS_TITLE' | translate}}</label><br>\n    <label class=\"body-xs ellipsis\">{{'LAYOUT_BUILDER.BORDER_RADIUS_TITLE' | translate}}</label>\n    <pep-group-buttons [buttons]=\"sizesGroupButtons\" [selectedButtonKey]=\"roundedCorners\" buttonsClass=\"ms regular\" viewType=\"toggle\"\n        (buttonClick)=\"setRoundedCorners($event)\"></pep-group-buttons> -->\n</ng-template>\n", styles: [":host pep-draggable-items ::ng-deep .draggable-items-overflow{padding-bottom:0!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey", "regex", "regexError", "isInFocus"], outputs: ["valueChange", "keyup", "validationChange"] }, { kind: "component", type: i4$1.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i4$2.PepCheckboxComponent, selector: "pep-checkbox", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "additionalValue", "form", "isActive", "showTitle", "renderTitle", "layoutType", "visible"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i5$2.GroupButtonsSettingsComponent, selector: "pep-group-buttons-settings", inputs: ["header", "subHeader", "groupType", "btnsArray", "excludeKeys", "useNone", "disabled", "dir", "titleSize", "bold", "btnKey"], outputs: ["btnkeyChange"] }, { kind: "component", type: i5$1.PepDraggableItemsComponent, selector: "pep-draggable-items", inputs: ["containerId", "showSearch", "title", "titleType", "titleSizeType", "itemPlaceholderType", "dropAreaIds", "items"], outputs: ["itemDragStarted", "itemDragEnded"] }, { kind: "component", type: PepLayoutBuilderEditorComponent, selector: "pep-layout-builder-editor", inputs: ["editorTabs"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MainEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'main-editor', template: "<pep-layout-builder-editor [editorTabs]=\"[\n    {key: '1', title: 'LAYOUT_BUILDER.GENERAL', templateRef: firstTabTemplate}, \n    {key: '2', title: 'LAYOUT_BUILDER.DESIGN', templateRef: secondTabTemplate}]\">\n</pep-layout-builder-editor>\n\n<ng-template #firstTabTemplate let-tabKey=\"tabKey\">\n    <div #topContentRef class=\"layout-builder-editor-group\">\n        <ng-content select=\"[layout-editor-top-content]\"></ng-content>\n        <div *ngIf=\"showTopContent\" class=\"editor-separator\"></div>\n    </div>\n    <div>\n        <label class=\"editor-title\">{{'LAYOUT_BUILDER.SECTIONS_TITLE' | translate}}</label>\n        <pep-button class=\"add-section-button\" value=\"{{'LAYOUT_BUILDER.ADD_SECTION' | translate}}\" styleType=\"regular\" iconName=\"number_plus\" iconPosition=\"end\"\n            (buttonClick)=\"onAddSectionClick($event)\"></pep-button>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <pep-draggable-items class=\"available-blocks\" [containerId]=\"availableBlocksContainerId\" [items]=\"availableBlocksForDrag\" [title]=\"'LAYOUT_BUILDER.BLOCKS_TITLE' | translate\"\n        titleSizeType=\"xl\" titleType=\"with-bottom-border\" [showSearch]=\"true\" [dropAreaIds]=\"sectionsColumnsDropList\" (itemDragStarted)=\"onDragStart($event)\" (itemDragEnded)=\"onDragEnd($event)\">\n    </pep-draggable-items>\n    <!-- <div #bottomContentRef class=\"layout-builder-editor-group\">\n        <div *ngIf=\"showBottomContent\" class=\"editor-separator\"></div>\n        <ng-content select=\"[layout-editor-bottom-content]\"></ng-content>\n    </div> -->\n</ng-template>\n\n<ng-template #secondTabTemplate let-tabKey=\"tabKey\">\n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"isFullWidth\" [label]=\"'LAYOUT_BUILDER.FULL_WIDTH_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"isFullWidthChange($event)\"></pep-checkbox>\n        <pep-textbox [label]=\"'LAYOUT_BUILDER.MAX_WIDTH_TITLE' | translate\" type=\"int\" [disabled]=\"isFullWidth\" [value]=\"maxWidth.toString()\" (valueChange)=\"onMaxWidthChange($event)\"></pep-textbox>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <!-- Spacing -->\n    <pep-group-buttons-settings [groupType]=\"'sizes'\" \n                                [header]=\"'LAYOUT_BUILDER.SPACING_TITLE' | translate\" [subHeader]=\"'LAYOUT_BUILDER.SPACING_HORIZONTAL_TITLE' | translate\"\n                                [btnKey]=\"horizontalSpacing.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n                                (btnkeyChange)=\"setColumnsHorizntalGap($event)\">\n    </pep-group-buttons-settings>\n    <pep-group-buttons-settings [groupType]=\"'sizes'\" \n                                [subHeader]=\"'LAYOUT_BUILDER.SPACING_VERTICAL_TITLE' | translate\"\n                                [btnKey]=\"verticalSpacing.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n                                (btnkeyChange)=\"setColumnsVerticalGap($event)\">\n    </pep-group-buttons-settings>\n    <div class=\"editor-separator\"></div>\n    <!-- Gaps -->\n    <pep-group-buttons-settings [groupType]=\"'sizes'\" \n                                [header]=\"'LAYOUT_BUILDER.GAPS_TITLE' | translate\" [subHeader]=\"'LAYOUT_BUILDER.SECTIONS_GAP_TITLE' | translate\"\n                                [btnKey]=\"sectionsGap.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n                                (btnkeyChange)=\"setSectionGap($event)\">\n    </pep-group-buttons-settings>\n    <pep-group-buttons-settings [groupType]=\"'sizes'\" \n                                [subHeader]=\"'LAYOUT_BUILDER.COLUMNS_GAP_TITLE' | translate\"\n                                [btnKey]=\"columnsGap.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n                                (btnkeyChange)=\"setColumnsGap($event)\">\n    </pep-group-buttons-settings>\n    <!-- Rounded Corners -->\n    <!--\n    <div class=\"editor-separator\"></div>\n    <label class=\"editor-title\">{{'LAYOUT_BUILDER.ROUNDED_CORNERS_TITLE' | translate}}</label><br>\n    <label class=\"body-xs ellipsis\">{{'LAYOUT_BUILDER.BORDER_RADIUS_TITLE' | translate}}</label>\n    <pep-group-buttons [buttons]=\"sizesGroupButtons\" [selectedButtonKey]=\"roundedCorners\" buttonsClass=\"ms regular\" viewType=\"toggle\"\n        (buttonClick)=\"setRoundedCorners($event)\"></pep-group-buttons> -->\n</ng-template>\n", styles: [":host pep-draggable-items ::ng-deep .draggable-items-overflow{padding-bottom:0!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: LayoutBuilderInternalService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { _topContentRef: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { _topContentRef: [{
                 type: ViewChild,
                 args: ['topContentRef', { static: true }]
             }], availableBlocksContainer: [{
@@ -1665,141 +1459,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 args: ['availableBlocksContainer', { read: ElementRef }]
             }], availableBlocksForDrag: [{
                 type: Input
+            }], sectionsColumnsDropList: [{
+                type: Input
             }], hostObject: [{
                 type: Input
             }], hostObjectChange: [{
                 type: Output
+            }], addSectionClick: [{
+                type: Output
+            }], onBlockDragStart: [{
+                type: Output
+            }], onBlockDragEnd: [{
+                type: Output
             }] } });
 
-class PepLayoutBuilderEditorModule {
-    constructor() {
-        //
-    }
-}
-PepLayoutBuilderEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutBuilderEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PepLayoutBuilderEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutBuilderEditorModule, declarations: [PepLayoutBuilderEditorComponent], imports: [CommonModule,
-        HttpClientModule,
-        OverlayModule,
-        MatTabsModule,
-        PepNgxLibModule, i1.TranslateModule], exports: [PepLayoutBuilderEditorComponent] });
-PepLayoutBuilderEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutBuilderEditorModule, imports: [CommonModule,
-        HttpClientModule,
-        OverlayModule,
-        MatTabsModule,
-        PepNgxLibModule,
-        TranslateModule.forChild()] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutBuilderEditorModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        PepLayoutBuilderEditorComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        HttpClientModule,
-                        OverlayModule,
-                        MatTabsModule,
-                        PepNgxLibModule,
-                        TranslateModule.forChild()
-                    ],
-                    exports: [PepLayoutBuilderEditorComponent]
-                }]
-        }], ctorParameters: function () { return []; } });
-
-class MainEditorModule {
-    constructor() {
-        // this.pepIconRegistry.registerIcons(pepIcons);
-    }
-}
-MainEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: MainEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MainEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: MainEditorModule, declarations: [MainEditorComponent], imports: [CommonModule,
-        HttpClientModule,
-        DragDropModule,
-        OverlayModule,
-        MatTabsModule,
-        MatSliderModule,
-        PepNgxLibModule,
-        PepSelectModule,
-        PepTextboxModule,
-        PepButtonModule,
-        PepCheckboxModule,
-        PepGroupButtonsModule,
-        PepColorModule,
-        PepImageModule,
-        PepGroupButtonsSettingsModule,
-        PepDraggableItemsModule,
-        PepDialogModule,
-        PepLayoutBuilderEditorModule, i1.TranslateModule], exports: [MainEditorComponent] });
-MainEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: MainEditorModule, imports: [CommonModule,
-        HttpClientModule,
-        DragDropModule,
-        OverlayModule,
-        MatTabsModule,
-        MatSliderModule,
-        PepNgxLibModule,
-        PepSelectModule,
-        PepTextboxModule,
-        PepButtonModule,
-        PepCheckboxModule,
-        PepGroupButtonsModule,
-        PepColorModule,
-        PepImageModule,
-        PepGroupButtonsSettingsModule,
-        PepDraggableItemsModule,
-        PepDialogModule,
-        PepLayoutBuilderEditorModule,
-        TranslateModule.forChild()] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: MainEditorModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        MainEditorComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        HttpClientModule,
-                        DragDropModule,
-                        OverlayModule,
-                        MatTabsModule,
-                        MatSliderModule,
-                        PepNgxLibModule,
-                        PepSelectModule,
-                        PepTextboxModule,
-                        PepButtonModule,
-                        PepCheckboxModule,
-                        PepGroupButtonsModule,
-                        PepColorModule,
-                        PepImageModule,
-                        PepGroupButtonsSettingsModule,
-                        PepDraggableItemsModule,
-                        PepDialogModule,
-                        PepLayoutBuilderEditorModule,
-                        TranslateModule.forChild()
-                    ],
-                    exports: [MainEditorComponent]
-                }]
-        }], ctorParameters: function () { return []; } });
-
 class SectionEditorComponent {
-    constructor(translate, dialog) {
-        this.translate = translate;
-        this.dialog = dialog;
-        this.MIN_HEIGHT = 40;
-        this.sectionName = '';
-        this.isAutoHeight = true;
-        this.height = this.MIN_HEIGHT;
-        this.hostObjectChange = new EventEmitter();
-        this.collapseOnTablet = false;
-        this.fillHeight = false;
-        this.subSections = false;
-        this.partsNumber = "2";
-        this.partsNumberOptions = Array();
-        this.splitOptions = Array();
-        this.allSplitOptions = Array();
-        this.initData();
-    }
     set hostObject(value) {
-        var _a, _b;
+        var _a, _b, _c;
         this._hostObject = value;
         this.sectionName = value.sectionName;
         this.split = value.split;
@@ -1807,6 +1483,7 @@ class SectionEditorComponent {
         this.height = this.isAutoHeight ? this.MIN_HEIGHT : value.height;
         this.collapseOnTablet = (_a = value.collapseOnTablet) !== null && _a !== void 0 ? _a : false;
         this.fillHeight = (_b = value.fillHeight) !== null && _b !== void 0 ? _b : false;
+        this.padding = (_c = value.padding) !== null && _c !== void 0 ? _c : new PepPaddingSettings(true, '0');
     }
     get hostObject() {
         return this._hostObject;
@@ -1827,6 +1504,24 @@ class SectionEditorComponent {
     get split() {
         return this._split;
     }
+    constructor(translate, dialog) {
+        this.translate = translate;
+        this.dialog = dialog;
+        this.MIN_HEIGHT = 40;
+        this.sectionName = '';
+        this.isAutoHeight = true;
+        this.height = this.MIN_HEIGHT;
+        this.hostObjectChange = new EventEmitter();
+        this.collapseOnTablet = false;
+        this.fillHeight = false;
+        this.subSections = false;
+        this.partsNumber = "2";
+        this.partsNumberOptions = Array();
+        this.splitOptions = Array();
+        this.allSplitOptions = Array();
+        this.padding = new PepPaddingSettings(true, '0');
+        this.initData();
+    }
     initData() {
         this.partsNumberOptions = [
             { 'key': '2', 'value': '2 Parts' },
@@ -1870,6 +1565,7 @@ class SectionEditorComponent {
         this._hostObject.height = this.isAutoHeight ? 0 : this.height;
         this._hostObject.collapseOnTablet = this.collapseOnTablet;
         this._hostObject.fillHeight = this.fillHeight;
+        this._hostObject.padding = this.padding;
         this.hostObjectChange.emit(this.hostObject);
     }
     ngOnInit() {
@@ -1897,6 +1593,10 @@ class SectionEditorComponent {
         this.fillHeight = value;
         this.updateHostObject();
     }
+    onPaddingChange(value) {
+        this.padding = value;
+        this.updateHostObject();
+    }
     onSubSectionsChange(value) {
         const oldValue = this.subSections;
         // Check if cancel the sub sections ( change from any -> 1 section ), if true need to show confirm message
@@ -1952,90 +1652,63 @@ class SectionEditorComponent {
         this.updateHostObject();
     }
 }
-SectionEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionEditorComponent, deps: [{ token: i1.TranslateService }, { token: i2$1.PepDialogService }], target: i0.ɵɵFactoryTarget.Component });
-SectionEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: SectionEditorComponent, selector: "section-editor", inputs: { hostObject: "hostObject" }, outputs: { hostObjectChange: "hostObjectChange" }, ngImport: i0, template: "<pep-layout-builder-editor class=\"section-editor-container\">\n    <div>\n        <pep-textbox [value]=\"sectionName\" [label]=\"'LAYOUT_BUILDER.SECTION_NAME_TITLE' | translate\" (valueChange)=\"onSectionNameChange($event)\"></pep-textbox>\n    </div>\n    <!-- \n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"isAutoHeight\" [label]=\"'LAYOUT_BUILDER.AUTO_HEIGHT_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"isAutoHeightChange($event)\"></pep-checkbox>\n        <pep-textbox [label]=\"'LAYOUT_BUILDER.HEIGHT_TITLE' | translate\" type=\"int\" [minValue]=\"MIN_HEIGHT\" [disabled]=\"isAutoHeight\" [value]=\"height\" (valueChange)=\"onHeightChange($event)\"></pep-textbox> \n    </div>\n    -->\n    <div class=\"editor-separator\"></div>\n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"subSections\" [label]=\"'LAYOUT_BUILDER.SUB_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onSubSectionsChange($event)\"></pep-checkbox>\n        <div class=\"split-area\">\n            <pep-select [label]=\"'LAYOUT_BUILDER.SECTIONS_TITLE' | translate\" [value]=\"partsNumber\" [options]=\"partsNumberOptions\" \n                (valueChange)=\"onPartsNumberChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n            <pep-select [label]=\"'LAYOUT_BUILDER.SPLIT_TITLE' | translate\" [value]=\"split || ''\" [options]=\"splitOptions\"\n                (valueChange)=\"onSplitChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n        </div>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"collapseOnTablet\" [label]=\"'LAYOUT_BUILDER.COLLAPSE_ON_TABLET_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onCollapseOnTabletChange($event)\"></pep-checkbox>\n        <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.COLLAPSE_ON_TABLET_DESCRIPTION' | translate)}}</span>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"fillHeight\" [label]=\"'LAYOUT_BUILDER.FILL_HEIGHT_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onFillHeightChange($event)\"></pep-checkbox>\n        <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.FILL_HEIGHT_SECTION_DESCRIPTION' | translate)}}</span>\n    </div>\n</pep-layout-builder-editor>\n\n<!-- <div class=\"section-editor-container layout-builder-editor-container\">\n    <div>\n        <pep-textbox [value]=\"sectionName\" [label]=\"'LAYOUT_BUILDER.SECTION_NAME_TITLE' | translate\" (valueChange)=\"onSectionNameChange($event)\"></pep-textbox>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"subSections\" [label]=\"'LAYOUT_BUILDER.SUB_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onSubSectionsChange($event)\"></pep-checkbox>\n        <div class=\"split-area\">\n            <pep-select [label]=\"'LAYOUT_BUILDER.SECTIONS_TITLE' | translate\" [value]=\"partsNumber\" [options]=\"partsNumberOptions\" \n                (valueChange)=\"onPartsNumberChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n            <pep-select [label]=\"'LAYOUT_BUILDER.SPLIT_TITLE' | translate\" [value]=\"split || ''\" [options]=\"splitOptions\"\n                (valueChange)=\"onSplitChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n        </div>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"collapseOnTablet\" [label]=\"'LAYOUT_BUILDER.COLLAPSE_ON_TABLET_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onCollapseOnTabletChange($event)\"></pep-checkbox>\n        <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.COLLAPSE_ON_TABLET_DESCRIPTION' | translate)}}</span>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"fillHeight\" [label]=\"'LAYOUT_BUILDER.FILL_HEIGHT_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onFillHeightChange($event)\"></pep-checkbox>\n        <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.FILL_HEIGHT_SECTION_DESCRIPTION' | translate)}}</span>\n    </div>\n</div> -->\n", styles: [".section-editor-container .split-area{display:grid;grid-template-columns:1fr 1fr;gap:var(--pep-spacing-lg, 1rem)}\n"], dependencies: [{ kind: "component", type: i3$4.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey", "regex", "regexError", "isInFocus"], outputs: ["valueChange", "keyup"] }, { kind: "component", type: i4$3.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "placeholder", "placeholderWhenDisabled", "options", "visible", "emptyOption", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "renderTitle", "typeaheadDebounceInterval", "addValueToOptionsIfNotExist"], outputs: ["valueChange"] }, { kind: "component", type: i5$1.PepCheckboxComponent, selector: "pep-checkbox", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "additionalValue", "form", "isActive", "showTitle", "renderTitle", "layoutType", "visible"], outputs: ["valueChange"] }, { kind: "component", type: PepLayoutBuilderEditorComponent, selector: "pep-layout-builder-editor", inputs: ["editorTabs"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionEditorComponent, decorators: [{
+SectionEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SectionEditorComponent, deps: [{ token: i1.TranslateService }, { token: i2$1.PepDialogService }], target: i0.ɵɵFactoryTarget.Component });
+SectionEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SectionEditorComponent, selector: "section-editor", inputs: { hostObject: "hostObject" }, outputs: { hostObjectChange: "hostObjectChange" }, ngImport: i0, template: "<pep-layout-builder-editor class=\"section-editor-container\">\n    <div>\n        <pep-textbox [value]=\"sectionName\" [label]=\"'LAYOUT_BUILDER.SECTION_NAME_TITLE' | translate\" (valueChange)=\"onSectionNameChange($event)\"></pep-textbox>\n    </div>\n    <!-- \n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"isAutoHeight\" [label]=\"'LAYOUT_BUILDER.AUTO_HEIGHT_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"isAutoHeightChange($event)\"></pep-checkbox>\n        <pep-textbox [label]=\"'LAYOUT_BUILDER.HEIGHT_TITLE' | translate\" type=\"int\" [minValue]=\"MIN_HEIGHT\" [disabled]=\"isAutoHeight\" [value]=\"height\" (valueChange)=\"onHeightChange($event)\"></pep-textbox> \n    </div>\n    -->\n    <div class=\"editor-separator\"></div>\n    <div>\n        <label class=\"editor-title\">{{'LAYOUT_BUILDER.LAYOUT' | translate}}</label>\n        <pep-checkbox class=\"checkbox-as-sub-title\" [value]=\"subSections\" [label]=\"'LAYOUT_BUILDER.SUB_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onSubSectionsChange($event)\"></pep-checkbox>\n        <div class=\"split-area\">\n            <pep-select [label]=\"'LAYOUT_BUILDER.SECTIONS_TITLE' | translate\" [value]=\"partsNumber\" [options]=\"partsNumberOptions\" \n                (valueChange)=\"onPartsNumberChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n            <pep-select [label]=\"'LAYOUT_BUILDER.SPLIT_TITLE' | translate\" [value]=\"split || ''\" [options]=\"splitOptions\"\n                (valueChange)=\"onSplitChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n        </div>\n    </div>\n    <div>\n        <pep-checkbox class=\"checkbox-as-sub-title\" [value]=\"collapseOnTablet\" [label]=\"'LAYOUT_BUILDER.COLLAPSE_ON_TABLET_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onCollapseOnTabletChange($event)\"></pep-checkbox>\n        <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.COLLAPSE_ON_TABLET_DESCRIPTION' | translate)}}</span>\n    </div>\n    <div>\n        <pep-checkbox class=\"checkbox-as-sub-title\" [value]=\"fillHeight\" [label]=\"'LAYOUT_BUILDER.FILL_HEIGHT_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onFillHeightChange($event)\"></pep-checkbox>\n        <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.FILL_HEIGHT_SECTION_DESCRIPTION' | translate)}}</span>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <pep-padding-settings \n    [padding]=\"padding\" (paddingChange)=\"onPaddingChange($event)\">\n</pep-padding-settings>\n</pep-layout-builder-editor>\n\n<!-- <div class=\"section-editor-container layout-builder-editor-container\">\n    <div>\n        <pep-textbox [value]=\"sectionName\" [label]=\"'LAYOUT_BUILDER.SECTION_NAME_TITLE' | translate\" (valueChange)=\"onSectionNameChange($event)\"></pep-textbox>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"subSections\" [label]=\"'LAYOUT_BUILDER.SUB_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onSubSectionsChange($event)\"></pep-checkbox>\n        <div class=\"split-area\">\n            <pep-select [label]=\"'LAYOUT_BUILDER.SECTIONS_TITLE' | translate\" [value]=\"partsNumber\" [options]=\"partsNumberOptions\" \n                (valueChange)=\"onPartsNumberChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n            <pep-select [label]=\"'LAYOUT_BUILDER.SPLIT_TITLE' | translate\" [value]=\"split || ''\" [options]=\"splitOptions\"\n                (valueChange)=\"onSplitChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n        </div>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"collapseOnTablet\" [label]=\"'LAYOUT_BUILDER.COLLAPSE_ON_TABLET_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onCollapseOnTabletChange($event)\"></pep-checkbox>\n        <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.COLLAPSE_ON_TABLET_DESCRIPTION' | translate)}}</span>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"fillHeight\" [label]=\"'LAYOUT_BUILDER.FILL_HEIGHT_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onFillHeightChange($event)\"></pep-checkbox>\n        <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.FILL_HEIGHT_SECTION_DESCRIPTION' | translate)}}</span>\n    </div>\n</div> -->\n", styles: [".section-editor-container .split-area{display:grid;grid-template-columns:1fr 1fr;gap:var(--pep-spacing-lg, 1rem)}\n"], dependencies: [{ kind: "component", type: i2$3.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey", "regex", "regexError", "isInFocus"], outputs: ["valueChange", "keyup", "validationChange"] }, { kind: "component", type: i4$3.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "placeholder", "placeholderWhenDisabled", "autoSortOptions", "options", "visible", "emptyOption", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "renderTitle", "typeaheadDebounceInterval", "addValueToOptionsIfNotExist"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i4$2.PepCheckboxComponent, selector: "pep-checkbox", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "additionalValue", "form", "isActive", "showTitle", "renderTitle", "layoutType", "visible"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: PepLayoutBuilderEditorComponent, selector: "pep-layout-builder-editor", inputs: ["editorTabs"] }, { kind: "component", type: i7.PaddingSettingsComponent, selector: "pep-padding-settings", inputs: ["padding"], outputs: ["paddingChange"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SectionEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'section-editor', template: "<pep-layout-builder-editor class=\"section-editor-container\">\n    <div>\n        <pep-textbox [value]=\"sectionName\" [label]=\"'LAYOUT_BUILDER.SECTION_NAME_TITLE' | translate\" (valueChange)=\"onSectionNameChange($event)\"></pep-textbox>\n    </div>\n    <!-- \n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"isAutoHeight\" [label]=\"'LAYOUT_BUILDER.AUTO_HEIGHT_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"isAutoHeightChange($event)\"></pep-checkbox>\n        <pep-textbox [label]=\"'LAYOUT_BUILDER.HEIGHT_TITLE' | translate\" type=\"int\" [minValue]=\"MIN_HEIGHT\" [disabled]=\"isAutoHeight\" [value]=\"height\" (valueChange)=\"onHeightChange($event)\"></pep-textbox> \n    </div>\n    -->\n    <div class=\"editor-separator\"></div>\n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"subSections\" [label]=\"'LAYOUT_BUILDER.SUB_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onSubSectionsChange($event)\"></pep-checkbox>\n        <div class=\"split-area\">\n            <pep-select [label]=\"'LAYOUT_BUILDER.SECTIONS_TITLE' | translate\" [value]=\"partsNumber\" [options]=\"partsNumberOptions\" \n                (valueChange)=\"onPartsNumberChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n            <pep-select [label]=\"'LAYOUT_BUILDER.SPLIT_TITLE' | translate\" [value]=\"split || ''\" [options]=\"splitOptions\"\n                (valueChange)=\"onSplitChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n        </div>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"collapseOnTablet\" [label]=\"'LAYOUT_BUILDER.COLLAPSE_ON_TABLET_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onCollapseOnTabletChange($event)\"></pep-checkbox>\n        <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.COLLAPSE_ON_TABLET_DESCRIPTION' | translate)}}</span>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"fillHeight\" [label]=\"'LAYOUT_BUILDER.FILL_HEIGHT_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onFillHeightChange($event)\"></pep-checkbox>\n        <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.FILL_HEIGHT_SECTION_DESCRIPTION' | translate)}}</span>\n    </div>\n</pep-layout-builder-editor>\n\n<!-- <div class=\"section-editor-container layout-builder-editor-container\">\n    <div>\n        <pep-textbox [value]=\"sectionName\" [label]=\"'LAYOUT_BUILDER.SECTION_NAME_TITLE' | translate\" (valueChange)=\"onSectionNameChange($event)\"></pep-textbox>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"subSections\" [label]=\"'LAYOUT_BUILDER.SUB_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onSubSectionsChange($event)\"></pep-checkbox>\n        <div class=\"split-area\">\n            <pep-select [label]=\"'LAYOUT_BUILDER.SECTIONS_TITLE' | translate\" [value]=\"partsNumber\" [options]=\"partsNumberOptions\" \n                (valueChange)=\"onPartsNumberChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n            <pep-select [label]=\"'LAYOUT_BUILDER.SPLIT_TITLE' | translate\" [value]=\"split || ''\" [options]=\"splitOptions\"\n                (valueChange)=\"onSplitChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n        </div>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"collapseOnTablet\" [label]=\"'LAYOUT_BUILDER.COLLAPSE_ON_TABLET_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onCollapseOnTabletChange($event)\"></pep-checkbox>\n        <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.COLLAPSE_ON_TABLET_DESCRIPTION' | translate)}}</span>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"fillHeight\" [label]=\"'LAYOUT_BUILDER.FILL_HEIGHT_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onFillHeightChange($event)\"></pep-checkbox>\n        <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.FILL_HEIGHT_SECTION_DESCRIPTION' | translate)}}</span>\n    </div>\n</div> -->\n", styles: [".section-editor-container .split-area{display:grid;grid-template-columns:1fr 1fr;gap:var(--pep-spacing-lg, 1rem)}\n"] }]
+            args: [{ selector: 'section-editor', template: "<pep-layout-builder-editor class=\"section-editor-container\">\n    <div>\n        <pep-textbox [value]=\"sectionName\" [label]=\"'LAYOUT_BUILDER.SECTION_NAME_TITLE' | translate\" (valueChange)=\"onSectionNameChange($event)\"></pep-textbox>\n    </div>\n    <!-- \n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"isAutoHeight\" [label]=\"'LAYOUT_BUILDER.AUTO_HEIGHT_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"isAutoHeightChange($event)\"></pep-checkbox>\n        <pep-textbox [label]=\"'LAYOUT_BUILDER.HEIGHT_TITLE' | translate\" type=\"int\" [minValue]=\"MIN_HEIGHT\" [disabled]=\"isAutoHeight\" [value]=\"height\" (valueChange)=\"onHeightChange($event)\"></pep-textbox> \n    </div>\n    -->\n    <div class=\"editor-separator\"></div>\n    <div>\n        <label class=\"editor-title\">{{'LAYOUT_BUILDER.LAYOUT' | translate}}</label>\n        <pep-checkbox class=\"checkbox-as-sub-title\" [value]=\"subSections\" [label]=\"'LAYOUT_BUILDER.SUB_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onSubSectionsChange($event)\"></pep-checkbox>\n        <div class=\"split-area\">\n            <pep-select [label]=\"'LAYOUT_BUILDER.SECTIONS_TITLE' | translate\" [value]=\"partsNumber\" [options]=\"partsNumberOptions\" \n                (valueChange)=\"onPartsNumberChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n            <pep-select [label]=\"'LAYOUT_BUILDER.SPLIT_TITLE' | translate\" [value]=\"split || ''\" [options]=\"splitOptions\"\n                (valueChange)=\"onSplitChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n        </div>\n    </div>\n    <div>\n        <pep-checkbox class=\"checkbox-as-sub-title\" [value]=\"collapseOnTablet\" [label]=\"'LAYOUT_BUILDER.COLLAPSE_ON_TABLET_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onCollapseOnTabletChange($event)\"></pep-checkbox>\n        <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.COLLAPSE_ON_TABLET_DESCRIPTION' | translate)}}</span>\n    </div>\n    <div>\n        <pep-checkbox class=\"checkbox-as-sub-title\" [value]=\"fillHeight\" [label]=\"'LAYOUT_BUILDER.FILL_HEIGHT_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onFillHeightChange($event)\"></pep-checkbox>\n        <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.FILL_HEIGHT_SECTION_DESCRIPTION' | translate)}}</span>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <pep-padding-settings \n    [padding]=\"padding\" (paddingChange)=\"onPaddingChange($event)\">\n</pep-padding-settings>\n</pep-layout-builder-editor>\n\n<!-- <div class=\"section-editor-container layout-builder-editor-container\">\n    <div>\n        <pep-textbox [value]=\"sectionName\" [label]=\"'LAYOUT_BUILDER.SECTION_NAME_TITLE' | translate\" (valueChange)=\"onSectionNameChange($event)\"></pep-textbox>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"subSections\" [label]=\"'LAYOUT_BUILDER.SUB_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onSubSectionsChange($event)\"></pep-checkbox>\n        <div class=\"split-area\">\n            <pep-select [label]=\"'LAYOUT_BUILDER.SECTIONS_TITLE' | translate\" [value]=\"partsNumber\" [options]=\"partsNumberOptions\" \n                (valueChange)=\"onPartsNumberChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n            <pep-select [label]=\"'LAYOUT_BUILDER.SPLIT_TITLE' | translate\" [value]=\"split || ''\" [options]=\"splitOptions\"\n                (valueChange)=\"onSplitChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n        </div>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"collapseOnTablet\" [label]=\"'LAYOUT_BUILDER.COLLAPSE_ON_TABLET_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onCollapseOnTabletChange($event)\"></pep-checkbox>\n        <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.COLLAPSE_ON_TABLET_DESCRIPTION' | translate)}}</span>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"fillHeight\" [label]=\"'LAYOUT_BUILDER.FILL_HEIGHT_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onFillHeightChange($event)\"></pep-checkbox>\n        <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.FILL_HEIGHT_SECTION_DESCRIPTION' | translate)}}</span>\n    </div>\n</div> -->\n", styles: [".section-editor-container .split-area{display:grid;grid-template-columns:1fr 1fr;gap:var(--pep-spacing-lg, 1rem)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.TranslateService }, { type: i2$1.PepDialogService }]; }, propDecorators: { hostObject: [{
                 type: Input
             }], hostObjectChange: [{
                 type: Output
             }] } });
 
-class SectionEditorModule {
-}
-SectionEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SectionEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: SectionEditorModule, declarations: [SectionEditorComponent], imports: [CommonModule,
-        PepButtonModule,
-        PepTextboxModule,
-        PepSelectModule,
-        PepCheckboxModule,
-        PepLayoutBuilderEditorModule, i1.TranslateModule], exports: [SectionEditorComponent] });
-SectionEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionEditorModule, imports: [CommonModule,
-        PepButtonModule,
-        PepTextboxModule,
-        PepSelectModule,
-        PepCheckboxModule,
-        PepLayoutBuilderEditorModule,
-        TranslateModule.forChild()] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionEditorModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [SectionEditorComponent],
-                    imports: [
-                        CommonModule,
-                        PepButtonModule,
-                        PepTextboxModule,
-                        PepSelectModule,
-                        PepCheckboxModule,
-                        PepLayoutBuilderEditorModule,
-                        TranslateModule.forChild()
-                    ],
-                    exports: [SectionEditorComponent]
-                }]
-        }] });
-
+// import { PepLayoutBuilderService } from './layout-builder.service';
 class PepLayoutBuilderComponent extends BaseDestroyerDirective {
-    constructor(renderer, hostElement, translate, layoutBuilderInternalService, pepAddonService) {
+    set availableBlocksForDrag(value) {
+        this._availableBlocksForDrag = value;
+    }
+    get availableBlocksForDrag() {
+        return this._availableBlocksForDrag;
+    }
+    set blocksLayoutConfig(value) {
+        this._blocksLayoutConfig = value;
+        this.setBlocksConfig();
+    }
+    set layoutEditorTitle(value) {
+        this._layoutEditorTitle = value;
+    }
+    get layoutEditorTitle() {
+        return this._layoutEditorTitle;
+    }
+    constructor(renderer, hostElement, translate, 
+    // private layoutBuilderService: PepLayoutBuilderService,
+    // private layoutBuilderInternalService: LayoutBuilderInternalService,
+    pepAddonService) {
         super();
         this.renderer = renderer;
         this.hostElement = hostElement;
         this.translate = translate;
-        this.layoutBuilderInternalService = layoutBuilderInternalService;
         this.pepAddonService = pepAddonService;
         this._availableBlocksForDrag = [];
         this._blocksLayoutConfig = {};
         this._layoutEditorTitle = '';
+        this.lockScreen = false;
         this.backClick = new EventEmitter();
         this.editorChange = new EventEmitter();
         this.blockAdded = new EventEmitter();
         this.blocksRemoved = new EventEmitter();
-        this.lockScreen = false;
+        this.editableStateChange = new EventEmitter();
         this.previewMode = false;
         this.currentEditor = null;
         this.viewportWidth = 0;
+        this.sectionsColumnsDropList = [];
         this.pepAddonService.setShellRouterData({ showSidebar: false, addPadding: false });
         this.renderer.addClass(this.hostElement.nativeElement, 'pep-layout-builder');
     }
-    set availableBlocksForDrag(value) {
-        this._availableBlocksForDrag = value;
-    }
-    get availableBlocksForDrag() {
-        return this._availableBlocksForDrag;
-    }
-    set blocksLayoutConfig(value) {
-        this._blocksLayoutConfig = value;
-        this.layoutBuilderInternalService.setBlocksConfig(this._blocksLayoutConfig);
-    }
-    set layoutEditorTitle(value) {
-        this._layoutEditorTitle = value;
-    }
-    get layoutEditorTitle() {
-        return this._layoutEditorTitle;
-    }
     setScreenWidth(screenType) {
-        this.layoutBuilderInternalService.setScreenWidth(screenType);
+        var _a;
+        (_a = this.layoutBuilderInternalService) === null || _a === void 0 ? void 0 : _a.setScreenWidth(screenType);
     }
     updateViewportWidth() {
         var _a;
@@ -2045,76 +1718,89 @@ class PepLayoutBuilderComponent extends BaseDestroyerDirective {
             });
         }
     }
-    subscribeEvents() {
-        /***********************************************************************************************/
-        /*                          Internal Events - for code usage
-        /***********************************************************************************************/
-        this.layoutBuilderInternalService.previewModeChange$.pipe(this.getDestroyer()).subscribe((previewMode) => {
-            this.previewMode = previewMode;
-        });
-        this.layoutBuilderInternalService.lockScreenChange$.pipe(this.getDestroyer()).subscribe((lockScreen) => {
-            this.lockScreen = lockScreen;
-        });
-        this.layoutBuilderInternalService.screenSizeChange$.pipe(this.getDestroyer()).subscribe((size) => {
-            const screenType = this.layoutBuilderInternalService.getScreenType(size);
-            this.selectedScreenType = screenType;
-        });
-        // For update the layout data
-        this.layoutBuilderInternalService.layoutViewChange$.pipe(this.getDestroyer()).subscribe((layoutView) => {
-            var _a;
-            if (layoutView) {
+    subscribeEvents(layoutBuilderInternalService) {
+        if (layoutBuilderInternalService) {
+            /***********************************************************************************************/
+            /*                          Internal Events - for code usage
+            /***********************************************************************************************/
+            layoutBuilderInternalService.sectionsColumnsDropListChange$.subscribe((sectionsColumnsDropList) => {
+                this.sectionsColumnsDropList = sectionsColumnsDropList;
+            });
+            layoutBuilderInternalService.previewModeChange$.pipe(this.getDestroyer()).subscribe((previewMode) => {
+                this.previewMode = previewMode;
+                this.editableStateChange.emit(!this.previewMode);
+            });
+            // layoutBuilderInternalService.lockScreenChange$.pipe(this.getDestroyer()).subscribe((lockScreen: any) => {
+            //     this.lockScreen = lockScreen;
+            // });
+            layoutBuilderInternalService.screenSizeChange$.pipe(this.getDestroyer()).subscribe((size) => {
+                const screenType = layoutBuilderInternalService.getScreenType(size);
+                this.selectedScreenType = screenType;
+            });
+            // For update the layout data
+            layoutBuilderInternalService.layoutViewChange$.pipe(this.getDestroyer()).subscribe((layoutView) => {
+                var _a;
+                if (layoutView) {
+                    if ((_a = this.layoutBuilderWrapper) === null || _a === void 0 ? void 0 : _a.nativeElement) {
+                        const maxWidth = coerceNumberProperty(layoutView.Layout.MaxWidth, 0);
+                        const maxWidthToSet = maxWidth === 0 ? '100%' : `${maxWidth}px`;
+                        this.renderer.setStyle(this.layoutBuilderWrapper.nativeElement, 'max-width', maxWidthToSet);
+                        this.updateViewportWidth();
+                    }
+                }
+            });
+            layoutBuilderInternalService.screenWidthChange$.pipe(this.getDestroyer()).subscribe((width) => {
+                var _a;
                 if ((_a = this.layoutBuilderWrapper) === null || _a === void 0 ? void 0 : _a.nativeElement) {
-                    const maxWidth = coerceNumberProperty(layoutView.Layout.MaxWidth, 0);
-                    const maxWidthToSet = maxWidth === 0 ? '100%' : `${maxWidth}px`;
-                    this.renderer.setStyle(this.layoutBuilderWrapper.nativeElement, 'max-width', maxWidthToSet);
+                    this.renderer.setStyle(this.layoutBuilderWrapper.nativeElement, 'width', width);
                     this.updateViewportWidth();
                 }
-            }
-        });
-        this.layoutBuilderInternalService.screenWidthChange$.pipe(this.getDestroyer()).subscribe((width) => {
-            var _a;
-            if ((_a = this.layoutBuilderWrapper) === null || _a === void 0 ? void 0 : _a.nativeElement) {
-                this.renderer.setStyle(this.layoutBuilderWrapper.nativeElement, 'width', width);
-                this.updateViewportWidth();
-            }
-        });
-        // Get the sections id's into sectionsColumnsDropList for the drag & drop.
-        this.layoutBuilderInternalService.sectionsChange$.pipe(this.getDestroyer()).subscribe((sections) => {
-            // Concat all results into one array.
-            const sectionsColumnsDropList = [].concat(...sections.map((section) => {
-                return section.Columns.map((column, index) => this.layoutBuilderInternalService.getSectionColumnKey(section.Key, index.toString()));
-            }));
-            this.layoutBuilderInternalService.setSectionsColumnsDropListChange(sectionsColumnsDropList);
-        });
-        /***********************************************************************************************/
-        /*                          External Events - for raise to the client
-        /***********************************************************************************************/
-        // For update editor.
-        this.layoutBuilderInternalService.editorChange$.pipe(this.getDestroyer()).subscribe((editor) => {
-            if (editor) {
-                // Init the side bar scroll top to 0.
-                if (this.sideBarComponent) {
-                    const sideLayout = this.sideBarComponent.nativeElement.querySelector('.side-layout');
-                    sideLayout === null || sideLayout === void 0 ? void 0 : sideLayout.scrollTo(0, 0);
+            });
+            // Get the sections id's into sectionsColumnsDropList for the drag & drop.
+            layoutBuilderInternalService.sectionsChange$.pipe(this.getDestroyer()).subscribe((sections) => {
+                // Concat all results into one array.
+                const sectionsColumnsDropList = [].concat(...sections.map((section) => {
+                    return section.Columns.map((column, index) => layoutBuilderInternalService.getSectionColumnKey(section.Key, index.toString()));
+                }));
+                layoutBuilderInternalService.setSectionsColumnsDropListChange(sectionsColumnsDropList);
+            });
+            /***********************************************************************************************/
+            /*                          External Events - for raise to the client
+            /***********************************************************************************************/
+            // For update editor.
+            layoutBuilderInternalService.editorChange$.pipe(this.getDestroyer()).subscribe((editor) => {
+                if (editor) {
+                    // Init the side bar scroll top to 0.
+                    if (this.sideBarComponent) {
+                        const sideLayout = this.sideBarComponent.nativeElement.querySelector('.side-layout');
+                        sideLayout === null || sideLayout === void 0 ? void 0 : sideLayout.scrollTo(0, 0);
+                    }
+                    this.currentEditor = editor;
+                    // Raise event to let the user set the block editor in the UI.
+                    this.editorChange.emit(editor);
                 }
-                this.currentEditor = editor;
-                // Raise event to let the user set the block editor in the UI.
-                this.editorChange.emit(editor);
-            }
-        });
-        this.layoutBuilderInternalService.blockAddedEventSubject$.pipe(this.getDestroyer()).subscribe((event) => {
-            if (event) {
-                this.blockAdded.emit(event);
-            }
-        });
-        this.layoutBuilderInternalService.blocksRemovedEventSubject$.pipe(this.getDestroyer()).subscribe((event) => {
-            if ((event === null || event === void 0 ? void 0 : event.length) > 0) {
-                this.blocksRemoved.emit(event);
-            }
-        });
+            });
+            layoutBuilderInternalService.blockAddedEventSubject$.pipe(this.getDestroyer()).subscribe((event) => {
+                if (event) {
+                    this.blockAdded.emit(event);
+                }
+            });
+            layoutBuilderInternalService.blocksRemovedEventSubject$.pipe(this.getDestroyer()).subscribe((event) => {
+                if ((event === null || event === void 0 ? void 0 : event.length) > 0) {
+                    this.blocksRemoved.emit(event);
+                }
+            });
+        }
+    }
+    setBlocksConfig() {
+        if (this.layoutBuilderInternalService) {
+            this.layoutBuilderInternalService.setBlocksConfig(this._blocksLayoutConfig);
+        }
     }
     ngOnInit() {
-        this.layoutBuilderInternalService.setEditMode(true);
+        var _a;
+        (_a = this.layoutBuilderInternalService) === null || _a === void 0 ? void 0 : _a.setEditorMode(true);
+        this.setBlocksConfig();
         // Get the first translation for load all translations.
         this.translate.get('LAYOUT_BUILDER.DESKTOP').subscribe((res) => {
             this.screenTypes = [
@@ -2123,44 +1809,62 @@ class PepLayoutBuilderComponent extends BaseDestroyerDirective {
                 { key: 'Phablet', value: this.translate.instant('LAYOUT_BUILDER.MOBILE'), callback: () => this.setScreenWidth('Phablet'), iconName: pepIconDeviceMobile.name, iconPosition: 'end' }
             ];
         });
-        this.subscribeEvents();
+        this.subscribeEvents(this.layoutBuilderInternalService);
     }
     ngOnDestroy() {
+        var _a;
         super.ngOnDestroy();
-        this.layoutBuilderInternalService.setEditMode(false);
+        (_a = this.layoutBuilderInternalService) === null || _a === void 0 ? void 0 : _a.setEditorMode(false);
+        this.layoutBuilderInternalService = undefined;
+        // this.layoutBuilderService.removeInternalService(this._layoutKey);
     }
     onResize(event) {
         this.updateViewportWidth();
     }
     togglePreviewMode() {
-        this.layoutBuilderInternalService.changePreviewMode(!this.previewMode);
+        var _a;
+        (_a = this.layoutBuilderInternalService) === null || _a === void 0 ? void 0 : _a.changePreviewMode(!this.previewMode);
         this.updateViewportWidth();
     }
     onSidebarStateChange(event) {
         this.updateViewportWidth();
     }
     onLayoutEditorObjectChange(pageEditor) {
-        this.layoutBuilderInternalService.updateLayoutFromEditor(pageEditor);
+        var _a;
+        (_a = this.layoutBuilderInternalService) === null || _a === void 0 ? void 0 : _a.updateLayoutFromEditor(pageEditor);
     }
     onSectionEditorObjectChange(sectionEditor) {
-        this.layoutBuilderInternalService.updateSectionFromEditor(sectionEditor);
+        var _a;
+        (_a = this.layoutBuilderInternalService) === null || _a === void 0 ? void 0 : _a.updateSectionFromEditor(sectionEditor);
     }
-    onNavigateBackFromEditor() {
+    onAddSectionClick(event) {
+        var _a;
+        (_a = this.layoutBuilderInternalService) === null || _a === void 0 ? void 0 : _a.addSection();
+    }
+    onBlockDragStart(event) {
+        var _a;
+        (_a = this.layoutBuilderInternalService) === null || _a === void 0 ? void 0 : _a.onBlockDragStart(event);
+    }
+    onBlockDragEnd(event) {
         var _a;
+        (_a = this.layoutBuilderInternalService) === null || _a === void 0 ? void 0 : _a.onBlockDragEnd(event);
+    }
+    onNavigateBackFromEditor() {
+        var _a, _b;
         if (!this.currentEditor || ((_a = this.currentEditor) === null || _a === void 0 ? void 0 : _a.type) === 'layout-builder') {
             this.backClick.emit();
         }
         else {
-            this.layoutBuilderInternalService.navigateBackFromEditor();
+            (_b = this.layoutBuilderInternalService) === null || _b === void 0 ? void 0 : _b.navigateBackFromEditor();
         }
     }
 }
-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: i3$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", blocksLayoutConfig: "blocksLayoutConfig", 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 #editorTitle class=\"title title-lg ellipsis\" \n                    [title]=\"currentEditor.type === 'layout-builder' ? (layoutEditorTitle || currentEditor.title) : currentEditor.title\">\n                    <span>{{ editorTitle.title }}</span>\n                </div>\n            </div>\n            <div class=\"layout-builder-editor-wrapper\">\n                <main-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                </main-editor>\n            \n                <section-editor *ngIf=\"currentEditor.type === 'section'\" \n                    [hostObject]=\"currentEditor.hostObject\" (hostObjectChange)=\"onSectionEditorObjectChange($event)\"></section-editor>\n            \n                <ng-container *ngIf=\"currentEditor.type === 'block'\" >\n                    <ng-content select=\"[block-editor-content]\"></ng-content>\n                </ng-container>\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:grid;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%),.08)}.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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$2.PepPageLayoutComponent, selector: "pep-page-layout", inputs: ["addPadding", "showShadow"] }, { kind: "component", type: i6$1.PepSideBarComponent, selector: "pep-side-bar", inputs: ["position", "ignoreResize", "showHeader", "showFooter", "showToggle", "stateType", "useAsWebComponent"], outputs: ["stateChange"] }, { kind: "component", type: i4$1.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i8.PepGroupButtonsComponent, selector: "pep-group-buttons", inputs: ["viewType", "styleType", "sizeType", "buttons", "buttonsDisabled", "supportUnselect", "selectedButtonKey", "stretch"], outputs: ["buttonClick"] }, { kind: "component", type: MainEditorComponent, selector: "main-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: [{
+PepLayoutBuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepLayoutBuilderComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.TranslateService }, { token: i3$1.PepAddonService }], target: i0.ɵɵFactoryTarget.Component });
+PepLayoutBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PepLayoutBuilderComponent, selector: "pep-layout-builder", inputs: { availableBlocksForDrag: "availableBlocksForDrag", blocksLayoutConfig: "blocksLayoutConfig", layoutEditorTitle: "layoutEditorTitle", lockScreen: "lockScreen" }, outputs: { backClick: "backClick", editorChange: "editorChange", blockAdded: "blockAdded", blocksRemoved: "blocksRemoved", editableStateChange: "editableStateChange" }, 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 #editorTitle class=\"title title-lg ellipsis\" \n                    [title]=\"currentEditor.type === 'layout-builder' ? (layoutEditorTitle || currentEditor.title) : currentEditor.title\">\n                    <span class=\"ellipsis\">{{ editorTitle.title }}</span>\n                </div>\n            </div>\n            <div class=\"layout-builder-editor-wrapper\">\n                <main-editor *ngIf=\"currentEditor.type === 'layout-builder'\" [sectionsColumnsDropList]=\"sectionsColumnsDropList\" [availableBlocksForDrag]=\"availableBlocksForDrag\"\n                    [hostObject]=\"currentEditor.hostObject\" (hostObjectChange)=\"onLayoutEditorObjectChange($event)\" \n                    (addSectionClick)=\"onAddSectionClick($event)\" (onBlockDragStart)=\"onBlockDragStart($event)\" (onBlockDragEnd)=\"onBlockDragEnd($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                </main-editor>\n            \n                <section-editor *ngIf=\"currentEditor.type === 'section'\" \n                    [hostObject]=\"currentEditor.hostObject\" (hostObjectChange)=\"onSectionEditorObjectChange($event)\"></section-editor>\n            \n                <ng-container *ngIf=\"currentEditor.type === 'block'\" >\n                    <ng-content select=\"[block-editor-content]\"></ng-content>\n                </ng-container>\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:grid;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-mdc-tab-header,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-mdc-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 .page-builder-editor-tabs .mat-mdc-tab-header-pagination,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-header-pagination,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-mdc-tab-header-pagination{display:none}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-labels,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-mdc-tab-labels,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-labels,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-mdc-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 .page-builder-editor-tabs .mat-tab-labels .mat-mdc-tab-label,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-mdc-tab-labels .mat-tab-label,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-mdc-tab-labels .mat-mdc-tab-label,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-labels .mat-tab-label,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-labels .mat-mdc-tab-label,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-mdc-tab-labels .mat-tab-label,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-mdc-tab-labels .mat-mdc-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 .page-builder-editor-tabs .mat-mdc-tab-body-wrapper,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-body-wrapper,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-mdc-tab-body-wrapper{overflow:unset;margin:0;display:block}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-body-wrapper .mat-mdc-tab-body.mat-tab-body-active,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-mdc-tab-body-wrapper .mat-mdc-tab-body.mat-tab-body-active,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-body-wrapper .mat-mdc-tab-body.mat-tab-body-active,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-mdc-tab-body-wrapper .mat-mdc-tab-body.mat-tab-body-active{overflow:unset}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-body-wrapper .mat-mdc-tab-body.mat-tab-body-active .mat-tab-body-content,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-mdc-tab-body-wrapper .mat-mdc-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-mdc-tab-body.mat-tab-body-active .mat-tab-body-content,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-mdc-tab-body-wrapper .mat-mdc-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-date,.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 .page-builder-editor-tab .no-margin-bottom,.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-date,.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 .page-builder-editor-tabs .layout-builder-editor-tab .no-margin-bottom,.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-date,.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 .page-builder-editor-tab .no-margin-bottom,.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-date,.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,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab .no-margin-bottom{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-date,.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-container .no-margin-bottom,.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-date,.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,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group .no-margin-bottom{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-sub-title .pep-checkbox-container .mat-mdc-checkbox-inner-container,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container .mat-checkbox-inner-container,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container .mat-mdc-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-sub-title .pep-checkbox-container .mat-checkbox-layout .mat-mdc-checkbox-label span,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-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-mdc-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 .page-builder-editor-tabs .mat-mdc-tab-header,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-header,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-mdc-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%),.08)}.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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$4.PepPageLayoutComponent, selector: "pep-page-layout", inputs: ["addPadding", "showShadow"] }, { kind: "component", type: i5$3.PepSideBarComponent, selector: "pep-side-bar", inputs: ["position", "ignoreResize", "showHeader", "showFooter", "showToggle", "stateType", "useAsWebComponent"], outputs: ["stateChange"] }, { kind: "component", type: i4$1.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i7$1.PepGroupButtonsComponent, selector: "pep-group-buttons", inputs: ["viewType", "styleType", "sizeType", "buttons", "buttonsDisabled", "supportUnselect", "selectedButtonKey", "stretch"], outputs: ["buttonClick"] }, { kind: "component", type: MainEditorComponent, selector: "main-editor", inputs: ["availableBlocksForDrag", "sectionsColumnsDropList", "hostObject"], outputs: ["hostObjectChange", "addSectionClick", "onBlockDragStart", "onBlockDragEnd"] }, { 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: "15.2.10", 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 #editorTitle class=\"title title-lg ellipsis\" \n                    [title]=\"currentEditor.type === 'layout-builder' ? (layoutEditorTitle || currentEditor.title) : currentEditor.title\">\n                    <span>{{ editorTitle.title }}</span>\n                </div>\n            </div>\n            <div class=\"layout-builder-editor-wrapper\">\n                <main-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                </main-editor>\n            \n                <section-editor *ngIf=\"currentEditor.type === 'section'\" \n                    [hostObject]=\"currentEditor.hostObject\" (hostObjectChange)=\"onSectionEditorObjectChange($event)\"></section-editor>\n            \n                <ng-container *ngIf=\"currentEditor.type === 'block'\" >\n                    <ng-content select=\"[block-editor-content]\"></ng-content>\n                </ng-container>\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:grid;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%),.08)}.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"] }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.TranslateService }, { type: LayoutBuilderInternalService }, { type: i3$1.PepAddonService }]; }, propDecorators: { layoutBuilderWrapper: [{
+            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 #editorTitle class=\"title title-lg ellipsis\" \n                    [title]=\"currentEditor.type === 'layout-builder' ? (layoutEditorTitle || currentEditor.title) : currentEditor.title\">\n                    <span class=\"ellipsis\">{{ editorTitle.title }}</span>\n                </div>\n            </div>\n            <div class=\"layout-builder-editor-wrapper\">\n                <main-editor *ngIf=\"currentEditor.type === 'layout-builder'\" [sectionsColumnsDropList]=\"sectionsColumnsDropList\" [availableBlocksForDrag]=\"availableBlocksForDrag\"\n                    [hostObject]=\"currentEditor.hostObject\" (hostObjectChange)=\"onLayoutEditorObjectChange($event)\" \n                    (addSectionClick)=\"onAddSectionClick($event)\" (onBlockDragStart)=\"onBlockDragStart($event)\" (onBlockDragEnd)=\"onBlockDragEnd($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                </main-editor>\n            \n                <section-editor *ngIf=\"currentEditor.type === 'section'\" \n                    [hostObject]=\"currentEditor.hostObject\" (hostObjectChange)=\"onSectionEditorObjectChange($event)\"></section-editor>\n            \n                <ng-container *ngIf=\"currentEditor.type === 'block'\" >\n                    <ng-content select=\"[block-editor-content]\"></ng-content>\n                </ng-container>\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:grid;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-mdc-tab-header,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-mdc-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 .page-builder-editor-tabs .mat-mdc-tab-header-pagination,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-header-pagination,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-mdc-tab-header-pagination{display:none}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-labels,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-mdc-tab-labels,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-labels,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-mdc-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 .page-builder-editor-tabs .mat-tab-labels .mat-mdc-tab-label,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-mdc-tab-labels .mat-tab-label,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-mdc-tab-labels .mat-mdc-tab-label,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-labels .mat-tab-label,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-labels .mat-mdc-tab-label,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-mdc-tab-labels .mat-tab-label,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-mdc-tab-labels .mat-mdc-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 .page-builder-editor-tabs .mat-mdc-tab-body-wrapper,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-body-wrapper,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-mdc-tab-body-wrapper{overflow:unset;margin:0;display:block}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-body-wrapper .mat-mdc-tab-body.mat-tab-body-active,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-mdc-tab-body-wrapper .mat-mdc-tab-body.mat-tab-body-active,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-body-wrapper .mat-mdc-tab-body.mat-tab-body-active,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-mdc-tab-body-wrapper .mat-mdc-tab-body.mat-tab-body-active{overflow:unset}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-body-wrapper .mat-mdc-tab-body.mat-tab-body-active .mat-tab-body-content,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-mdc-tab-body-wrapper .mat-mdc-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-mdc-tab-body.mat-tab-body-active .mat-tab-body-content,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-mdc-tab-body-wrapper .mat-mdc-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-date,.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 .page-builder-editor-tab .no-margin-bottom,.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-date,.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 .page-builder-editor-tabs .layout-builder-editor-tab .no-margin-bottom,.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-date,.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 .page-builder-editor-tab .no-margin-bottom,.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-date,.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,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab .no-margin-bottom{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-date,.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-container .no-margin-bottom,.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-date,.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,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group .no-margin-bottom{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-sub-title .pep-checkbox-container .mat-mdc-checkbox-inner-container,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container .mat-checkbox-inner-container,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container .mat-mdc-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-sub-title .pep-checkbox-container .mat-checkbox-layout .mat-mdc-checkbox-label span,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-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-mdc-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 .page-builder-editor-tabs .mat-mdc-tab-header,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-header,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-mdc-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%),.08)}.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"] }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.TranslateService }, { type: i3$1.PepAddonService }]; }, propDecorators: { layoutBuilderWrapper: [{
                 type: ViewChild,
                 args: ['layoutBuilderWrapper', { static: true }]
             }], sideBarComponent: [{
@@ -2172,6 +1876,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Input
             }], layoutEditorTitle: [{
                 type: Input
+            }], lockScreen: [{
+                type: Input
             }], backClick: [{
                 type: Output
             }], editorChange: [{
@@ -2180,43 +1886,465 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Output
             }], blocksRemoved: [{
                 type: Output
+            }], editableStateChange: [{
+                type: Output
             }], onResize: [{
                 type: HostListener,
                 args: ['window:resize', ['$event']]
             }] } });
 
-class PepLayoutBuilderService {
-    constructor(layoutBuilderInternalService) {
-        this.layoutBuilderInternalService = layoutBuilderInternalService;
-        //
+// import { TranslateService } from '@ngx-translate/core';
+// import { PepDialogService } from '@pepperi-addons/ngx-lib/dialog';
+class PepLayoutComponent extends BaseDestroyerDirective {
+    set layoutView(value) {
+        this._layoutView = value;
+        if (this.layoutView) {
+            // Load the layout builder
+            this.layoutBuilderInternalService.loadLayoutBuilder(value);
+        }
     }
-    get editMode() {
-        return this.layoutBuilderInternalService.editMode;
+    get layoutView() {
+        return this._layoutView;
     }
-    get editableState() {
-        return this.layoutBuilderInternalService.editableState;
+    set showSkeleton(value) {
+        this._showSkeleton = value;
+        this.animateSkeleton();
     }
-    getCurrentScreenType() {
-        return this.layoutBuilderInternalService.getCurrentScreenType();
+    get showSkeleton() {
+        return this._showSkeleton;
+    }
+    set horizontalSpacing(value) {
+        this._horizontalSpacing = value;
+        this.paddingInline = this.convertLayoutSizeType(value || 'md');
+    }
+    get horizontalSpacing() {
+        return this._horizontalSpacing;
+    }
+    set verticalSpacing(value) {
+        this._verticalSpacing = value;
+    }
+    get verticalSpacing() {
+        return this._verticalSpacing;
+    }
+    get sections$() {
+        return this._sectionsSubject.asObservable();
+    }
+    constructor(parent, 
+    // @Host() private layoutBuilderInternalServiceHost: LayoutBuilderInternalService,
+    // @Self() private layoutBuilderInternalServiceSelf: LayoutBuilderInternalService,
+    // @Optional() @SkipSelf() private layoutBuilderInternalServiceSkipSelf: LayoutBuilderInternalService,
+    // limit to the host component's instance of the HeroCacheService
+    layoutBuilderInternalService, hostElement, renderer) {
+        super();
+        this.parent = parent;
+        this.layoutBuilderInternalService = layoutBuilderInternalService;
+        this.hostElement = hostElement;
+        this.renderer = renderer;
+        this.editorMode = false;
+        this.blockTemplate = undefined;
+        this._showSkeleton = false;
+        // // For show & hide skeleton
+        // private _showSkeleton = false;
+        this.layoutViewChange = new EventEmitter();
+        this.screenTypeChange = new EventEmitter();
+        this._horizontalSpacing = 'md';
+        this._verticalSpacing = 'md';
+        this.paddingInline = '1rem';
+        this.previewMode = false;
+        this._sectionsSubject = new BehaviorSubject([]);
+        // Set the service in the layout builder component if exists. 
+        if (parent) {
+            parent.layoutBuilderInternalService = this.layoutBuilderInternalService;
+        }
+        this.renderer.addClass(this.hostElement.nativeElement, 'pep-layout');
+    }
+    convertLayoutSizeType(size) {
+        let res;
+        if (size === 'lg') {
+            res = '2rem';
+        }
+        else if (size === 'md') {
+            res = '1rem';
+        }
+        else if (size === 'sm') {
+            res = '0.5rem';
+        }
+        else {
+            res = '0';
+        }
+        return res;
+    }
+    animateSkeleton() {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if (this._showSkeleton) {
+            // this.sectionsContainer?.nativeElement?.classList.add('out');
+            (_b = (_a = this.sectionsContainer) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.classList.remove('in');
+            (_d = (_c = this.skeletonContainer) === null || _c === void 0 ? void 0 : _c.nativeElement) === null || _d === void 0 ? void 0 : _d.classList.add('in');
+            // this.skeletonContainer?.nativeElement?.classList.remove('out');
+        }
+        else {
+            (_f = (_e = this.sectionsContainer) === null || _e === void 0 ? void 0 : _e.nativeElement) === null || _f === void 0 ? void 0 : _f.classList.add('in');
+            // this.sectionsContainer?.nativeElement?.classList.remove('out');
+            // this.skeletonContainer?.nativeElement?.classList.add('out');
+            (_h = (_g = this.skeletonContainer) === null || _g === void 0 ? void 0 : _g.nativeElement) === null || _h === void 0 ? void 0 : _h.classList.remove('in');
+        }
+    }
+    setLayoutDataProperties() {
+        var _a;
+        const layoutView = this._layoutView;
+        if (layoutView) {
+            if ((_a = this.sectionsContainer) === null || _a === void 0 ? void 0 : _a.nativeElement) {
+                const maxWidth = coerceNumberProperty(layoutView.Layout.MaxWidth, 0);
+                const maxWidthToSet = maxWidth === 0 ? 'unset' : `${maxWidth}px`;
+                this.renderer.setStyle(this.sectionsContainer.nativeElement, 'max-width', maxWidthToSet);
+            }
+            this.sectionsGap = layoutView.Layout.SectionsGap || 'md';
+            this.columnsGap = layoutView.Layout.ColumnsGap || 'md';
+            this.horizontalSpacing = layoutView.Layout.HorizontalSpacing;
+            this.verticalSpacing = layoutView.Layout.VerticalSpacing;
+        }
+    }
+    setScreentType(screenSize) {
+        const screenType = this.layoutBuilderInternalService.getScreenType(screenSize);
+        this.selectedScreenType = screenType;
+        this.screenTypeChange.emit(screenType);
+    }
+    ngOnInit() {
+        /***********************************************************************************************/
+        /*                          Internal Events - for code usage
+        /***********************************************************************************************/
+        if (this.editorMode) {
+            this.layoutBuilderInternalService.previewModeChange$.pipe(this.getDestroyer()).subscribe((previewMode) => {
+                this.previewMode = previewMode;
+            });
+        }
+        this.layoutBuilderInternalService.sectionsChange$.pipe(this.getDestroyer()).subscribe((sections) => {
+            this._sectionsSubject.next(sections);
+        });
+        // this.layoutBuilderInternalService.showSkeletonChange$.pipe(this.getDestroyer()).subscribe((showSkeleton: any) => {
+        //     if (showSkeleton !== undefined) {
+        //         this._showSkeleton = showSkeleton;
+        //         this.animateSkeleton();
+        //     }
+        // });
+        // this.layoutService.onResize$.pipe(this.getDestroyer()).subscribe((size: any) => {
+        //     this.setScreentType(size);
+        // });
+        this.layoutBuilderInternalService.screenSizeChange$.pipe(this.getDestroyer()).subscribe((size) => {
+            this.setScreentType(size);
+        });
+        /***********************************************************************************************/
+        /*                          External Events - for raise to the client
+        /***********************************************************************************************/
+        this.layoutBuilderInternalService.layoutViewChange$.pipe(this.getDestroyer()).subscribe((layoutView) => {
+            this._layoutView = layoutView;
+            this.setLayoutDataProperties();
+            this.layoutViewChange.emit(this._layoutView);
+        });
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        // this.layoutBuilderService.removeInternalService(this.layoutView?.Key);
+    }
+    getSectionsTemplateRows() {
+        let gridAutoRows = '';
+        // let fillHeightCount = 0;
+        this.sections$.pipe(this.getDestroyer()).subscribe((sections) => {
+            if (sections === null || sections === void 0 ? void 0 : sections.length) {
+                sections.forEach((sec) => {
+                    if (sec.FillHeight === true) {
+                        // fillHeightCount++;
+                        gridAutoRows += ' auto';
+                    }
+                    else {
+                        gridAutoRows += ' min-content';
+                    }
+                });
+                //if all are fill height should return 1fr for all
+                //if not should return auto for fill height and min content for none
+                return gridAutoRows;
+            }
+            else {
+                return '';
+            }
+        });
+        return gridAutoRows;
+    }
+    onSectionDropped(event) {
+        this.layoutBuilderInternalService.onSectionDropped(event);
+    }
+    onDragStart(event) {
+        this.layoutBuilderInternalService.onSectionDragStart(event);
+    }
+    onDragEnd(event) {
+        this.layoutBuilderInternalService.onSectionDragEnd(event);
+    }
+}
+PepLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepLayoutComponent, deps: [{ token: PepLayoutBuilderComponent, optional: true }, { token: LayoutBuilderInternalService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+PepLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PepLayoutComponent, selector: "pep-layout", inputs: { editorMode: "editorMode", layoutView: "layoutView", blockTemplate: "blockTemplate", showSkeleton: "showSkeleton" }, outputs: { layoutViewChange: "layoutViewChange", screenTypeChange: "screenTypeChange" }, host: { properties: { "style.padding-inline": "this.paddingInline" } }, providers: [LayoutBuilderInternalService], viewQueries: [{ propertyName: "skeletonContainer", first: true, predicate: ["skeletonCont"], descendants: true, static: true }, { propertyName: "sectionsContainer", first: true, predicate: ["sectionsCont"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<!-- For the top spacing -->\n<div class=\"top-spacing spacing-{{verticalSpacing}}\" ></div>\n<div #sectionsCont cdkDropListGroup class=\"sections-container gap-{{ sectionsGap }}\" [ngClass]=\"{'preview-state': previewMode }\"  \n    cdkDropList (cdkDropListDropped)=\"onSectionDropped($event)\" [ngStyle]=\"{'grid-auto-rows': getSectionsTemplateRows()}\"\n    >\n    <section *ngFor=\"let section of sections$ | async; let i=index;\" \n        class=\"draggable-section \" [ngClass]=\"selectedScreenType === 'Phablet' ? 'margin-'+sectionsGap : ''\" [blockTemplate]=\"blockTemplate\"\n        [key]=\"section.Key\" [name]=\"section.Name || ('LAYOUT_BUILDER.SECTION' | translate) + ' ' + (i+1)\" [split]=\"section.Split\" [height]=\"section.Height\"\n        [columns]=\"section.Columns\" [padding]=\"section.Padding\" [collapseOnTablet]=\"section.CollapseOnTablet || false\" [hideIn]=\"section.Hide || []\" [columnsGap]=\"columnsGap\"\n        >\n    </section>\n</div>\n<div #skeletonCont class=\"skeleton-container \">\n    <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"xl\" ></pep-skeleton-loader>\n    <div class=\"split-skeleton-container\">\n        <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"max\" ></pep-skeleton-loader>\n        <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"max\" ></pep-skeleton-loader>\n    </div>\n    <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"xl\" ></pep-skeleton-loader>\n\n    <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"max\" ></pep-skeleton-loader>\n</div>\n<!-- For the bottom spacing -->\n<div class=\"bottom-spacing spacing-{{verticalSpacing}}\"></div>\n<pep-size-detector></pep-size-detector>", styles: [":host{display:grid;grid-template-areas:\"top-spacing\" \"content\" \"bottom-spacing\";grid-template-rows:auto 1fr auto;height:100%}.top-spacing{grid-area:top-spacing}.top-spacing.spacing-none{height:0}.top-spacing.spacing-sm{height:var(--pep-spacing-sm, .5rem)}.top-spacing.spacing-md{height:var(--pep-spacing-lg, 1rem)}.top-spacing.spacing-lg{height:var(--pep-spacing-2xl, 2rem)}.bottom-spacing{grid-area:bottom-spacing}.bottom-spacing.spacing-none{height:0}.bottom-spacing.spacing-sm{height:var(--pep-spacing-sm, .5rem)}.bottom-spacing.spacing-md{height:var(--pep-spacing-lg, 1rem)}.bottom-spacing.spacing-lg{height:var(--pep-spacing-2xl, 2rem)}.skeleton-container{display:grid;grid-area:content;height:100%;gap:var(--pep-spacing-lg, 1rem);grid-template-rows:auto auto auto 1fr;opacity:0}.skeleton-container .split-skeleton-container{display:grid;height:10rem;gap:var(--pep-spacing-lg, 1rem);grid-auto-flow:column}.sections-container{z-index:11;grid-area:content;width:100%;max-width:inherit;overflow-x:unset;margin:0 auto;position:relative;display:grid;grid-row:1px;height:inherit;opacity:0}.sections-container.gap-none{gap:0}.sections-container.gap-sm{gap:var(--pep-spacing-sm, .5rem)}.sections-container.gap-md{gap:var(--pep-spacing-lg, 1rem)}.sections-container.gap-lg{gap:var(--pep-spacing-2xl, 2rem)}.sections-container .draggable-section{display:block}.sections-container.preview-state section{display:contents}@keyframes in{0%{opacity:0;transform:translateY(-80);filter:blur(20px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}.in{animation-name:in;animation-direction:normal;animation-duration:1.2s;animation-fill-mode:forwards}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4$5.PepSkeletonLoaderComponent, selector: "pep-skeleton-loader", inputs: ["rowHeightType", "rowsNumber", "lastRowOffset"] }, { kind: "component", type: i5$4.PepSizeDetectorComponent, selector: "pep-size-detector", inputs: ["showScreenSize", "useAsWebComponent"], outputs: ["sizeChange"] }, { kind: "directive", type: i3$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$2.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "component", type: SectionComponent, selector: "section", inputs: ["blockTemplate", "key", "name", "split", "height", "collapseOnTablet", "padding", "columns", "hideIn", "columnsGap"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pep-layout', providers: [LayoutBuilderInternalService], template: "<!-- For the top spacing -->\n<div class=\"top-spacing spacing-{{verticalSpacing}}\" ></div>\n<div #sectionsCont cdkDropListGroup class=\"sections-container gap-{{ sectionsGap }}\" [ngClass]=\"{'preview-state': previewMode }\"  \n    cdkDropList (cdkDropListDropped)=\"onSectionDropped($event)\" [ngStyle]=\"{'grid-auto-rows': getSectionsTemplateRows()}\"\n    >\n    <section *ngFor=\"let section of sections$ | async; let i=index;\" \n        class=\"draggable-section \" [ngClass]=\"selectedScreenType === 'Phablet' ? 'margin-'+sectionsGap : ''\" [blockTemplate]=\"blockTemplate\"\n        [key]=\"section.Key\" [name]=\"section.Name || ('LAYOUT_BUILDER.SECTION' | translate) + ' ' + (i+1)\" [split]=\"section.Split\" [height]=\"section.Height\"\n        [columns]=\"section.Columns\" [padding]=\"section.Padding\" [collapseOnTablet]=\"section.CollapseOnTablet || false\" [hideIn]=\"section.Hide || []\" [columnsGap]=\"columnsGap\"\n        >\n    </section>\n</div>\n<div #skeletonCont class=\"skeleton-container \">\n    <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"xl\" ></pep-skeleton-loader>\n    <div class=\"split-skeleton-container\">\n        <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"max\" ></pep-skeleton-loader>\n        <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"max\" ></pep-skeleton-loader>\n    </div>\n    <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"xl\" ></pep-skeleton-loader>\n\n    <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"max\" ></pep-skeleton-loader>\n</div>\n<!-- For the bottom spacing -->\n<div class=\"bottom-spacing spacing-{{verticalSpacing}}\"></div>\n<pep-size-detector></pep-size-detector>", styles: [":host{display:grid;grid-template-areas:\"top-spacing\" \"content\" \"bottom-spacing\";grid-template-rows:auto 1fr auto;height:100%}.top-spacing{grid-area:top-spacing}.top-spacing.spacing-none{height:0}.top-spacing.spacing-sm{height:var(--pep-spacing-sm, .5rem)}.top-spacing.spacing-md{height:var(--pep-spacing-lg, 1rem)}.top-spacing.spacing-lg{height:var(--pep-spacing-2xl, 2rem)}.bottom-spacing{grid-area:bottom-spacing}.bottom-spacing.spacing-none{height:0}.bottom-spacing.spacing-sm{height:var(--pep-spacing-sm, .5rem)}.bottom-spacing.spacing-md{height:var(--pep-spacing-lg, 1rem)}.bottom-spacing.spacing-lg{height:var(--pep-spacing-2xl, 2rem)}.skeleton-container{display:grid;grid-area:content;height:100%;gap:var(--pep-spacing-lg, 1rem);grid-template-rows:auto auto auto 1fr;opacity:0}.skeleton-container .split-skeleton-container{display:grid;height:10rem;gap:var(--pep-spacing-lg, 1rem);grid-auto-flow:column}.sections-container{z-index:11;grid-area:content;width:100%;max-width:inherit;overflow-x:unset;margin:0 auto;position:relative;display:grid;grid-row:1px;height:inherit;opacity:0}.sections-container.gap-none{gap:0}.sections-container.gap-sm{gap:var(--pep-spacing-sm, .5rem)}.sections-container.gap-md{gap:var(--pep-spacing-lg, 1rem)}.sections-container.gap-lg{gap:var(--pep-spacing-2xl, 2rem)}.sections-container .draggable-section{display:block}.sections-container.preview-state section{display:contents}@keyframes in{0%{opacity:0;transform:translateY(-80);filter:blur(20px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}.in{animation-name:in;animation-direction:normal;animation-duration:1.2s;animation-fill-mode:forwards}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: PepLayoutBuilderComponent, decorators: [{
+                        type: Optional
+                    }] }, { type: LayoutBuilderInternalService }, { type: i0.ElementRef }, { type: i0.Renderer2 }];
+    }, propDecorators: { skeletonContainer: [{
+                type: ViewChild,
+                args: ['skeletonCont', { static: true }]
+            }], sectionsContainer: [{
+                type: ViewChild,
+                args: ['sectionsCont', { static: true }]
+            }], editorMode: [{
+                type: Input
+            }], layoutView: [{
+                type: Input
+            }], blockTemplate: [{
+                type: Input
+            }], showSkeleton: [{
+                type: Input
+            }], layoutViewChange: [{
+                type: Output
+            }], screenTypeChange: [{
+                type: Output
+            }], paddingInline: [{
+                type: HostBinding,
+                args: ['style.padding-inline']
+            }] } });
+
+class PepLayoutModule {
+}
+PepLayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PepLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: PepLayoutModule, declarations: [PepLayoutComponent], imports: [CommonModule,
+        HttpClientModule,
+        PepNgxLibModule,
+        PepSkeletonLoaderModule,
+        PepSizeDetectorModule,
+        PepDialogModule,
+        DragDropModule,
+        SectionModule, i1.TranslateModule], exports: [PepLayoutComponent] });
+PepLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepLayoutModule, providers: [LayoutBuilderInternalService], imports: [CommonModule,
+        HttpClientModule,
+        PepNgxLibModule,
+        PepSkeletonLoaderModule,
+        PepSizeDetectorModule,
+        PepDialogModule,
+        DragDropModule,
+        SectionModule,
+        TranslateModule.forChild()] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepLayoutModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        PepLayoutComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        HttpClientModule,
+                        PepNgxLibModule,
+                        PepSkeletonLoaderModule,
+                        PepSizeDetectorModule,
+                        PepDialogModule,
+                        DragDropModule,
+                        SectionModule,
+                        TranslateModule.forChild()
+                    ],
+                    exports: [PepLayoutComponent],
+                    providers: [LayoutBuilderInternalService]
+                }]
+        }] });
+
+class PepLayoutBuilderEditorModule {
+    constructor() {
+        //
+    }
+}
+PepLayoutBuilderEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepLayoutBuilderEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PepLayoutBuilderEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: PepLayoutBuilderEditorModule, declarations: [PepLayoutBuilderEditorComponent], imports: [CommonModule,
+        HttpClientModule,
+        OverlayModule,
+        MatTabsModule,
+        PepNgxLibModule, i1.TranslateModule], exports: [PepLayoutBuilderEditorComponent] });
+PepLayoutBuilderEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepLayoutBuilderEditorModule, imports: [CommonModule,
+        HttpClientModule,
+        OverlayModule,
+        MatTabsModule,
+        PepNgxLibModule,
+        TranslateModule.forChild()] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepLayoutBuilderEditorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        PepLayoutBuilderEditorComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        HttpClientModule,
+                        OverlayModule,
+                        MatTabsModule,
+                        PepNgxLibModule,
+                        TranslateModule.forChild()
+                    ],
+                    exports: [PepLayoutBuilderEditorComponent]
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class MainEditorModule {
+    constructor() {
+        // this.pepIconRegistry.registerIcons(pepIcons);
+    }
+}
+MainEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MainEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MainEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MainEditorModule, declarations: [MainEditorComponent], imports: [CommonModule,
+        HttpClientModule,
+        DragDropModule,
+        OverlayModule,
+        MatTabsModule,
+        MatSliderModule,
+        PepNgxLibModule,
+        PepSelectModule,
+        PepTextboxModule,
+        PepButtonModule,
+        PepCheckboxModule,
+        PepGroupButtonsModule,
+        PepColorModule,
+        PepImageModule,
+        PepGroupButtonsSettingsModule,
+        PepDraggableItemsModule,
+        PepDialogModule,
+        PepLayoutBuilderEditorModule, i1.TranslateModule], exports: [MainEditorComponent] });
+MainEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MainEditorModule, imports: [CommonModule,
+        HttpClientModule,
+        DragDropModule,
+        OverlayModule,
+        MatTabsModule,
+        MatSliderModule,
+        PepNgxLibModule,
+        PepSelectModule,
+        PepTextboxModule,
+        PepButtonModule,
+        PepCheckboxModule,
+        PepGroupButtonsModule,
+        PepColorModule,
+        PepImageModule,
+        PepGroupButtonsSettingsModule,
+        PepDraggableItemsModule,
+        PepDialogModule,
+        PepLayoutBuilderEditorModule,
+        TranslateModule.forChild()] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MainEditorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        MainEditorComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        HttpClientModule,
+                        DragDropModule,
+                        OverlayModule,
+                        MatTabsModule,
+                        MatSliderModule,
+                        PepNgxLibModule,
+                        PepSelectModule,
+                        PepTextboxModule,
+                        PepButtonModule,
+                        PepCheckboxModule,
+                        PepGroupButtonsModule,
+                        PepColorModule,
+                        PepImageModule,
+                        PepGroupButtonsSettingsModule,
+                        PepDraggableItemsModule,
+                        PepDialogModule,
+                        PepLayoutBuilderEditorModule,
+                        TranslateModule.forChild()
+                    ],
+                    exports: [MainEditorComponent]
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class SectionEditorModule {
+}
+SectionEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SectionEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SectionEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SectionEditorModule, declarations: [SectionEditorComponent], imports: [CommonModule,
+        PepButtonModule,
+        PepTextboxModule,
+        PepSelectModule,
+        PepCheckboxModule,
+        PepLayoutBuilderEditorModule,
+        PepPaddingSettingsModule, i1.TranslateModule], exports: [SectionEditorComponent] });
+SectionEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SectionEditorModule, imports: [CommonModule,
+        PepButtonModule,
+        PepTextboxModule,
+        PepSelectModule,
+        PepCheckboxModule,
+        PepLayoutBuilderEditorModule,
+        PepPaddingSettingsModule,
+        TranslateModule.forChild()] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SectionEditorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SectionEditorComponent],
+                    imports: [
+                        CommonModule,
+                        PepButtonModule,
+                        PepTextboxModule,
+                        PepSelectModule,
+                        PepCheckboxModule,
+                        PepLayoutBuilderEditorModule,
+                        PepPaddingSettingsModule,
+                        TranslateModule.forChild()
+                    ],
+                    exports: [SectionEditorComponent]
+                }]
+        }] });
+
+class PepLayoutBuilderService {
+    constructor() {
+        //
     }
     getIsHidden(hideIn, currentScreenType) {
         return (hideIn && (hideIn === null || hideIn === void 0 ? void 0 : hideIn.length) > 0) ? hideIn.some(hi => hi === currentScreenType) : false;
     }
+    /**
+     * Deprecated
+     */
+    getCurrentScreenType() {
+        return 'Landscape';
+        // const layoutBuilderInternalService = this._layoutInternalServicesMap.get(layoutKey);
+        // return layoutBuilderInternalService?.getCurrentScreenType() || 'Landscape';
+    }
+    /**
+     * Deprecated
+     */
+    getEditableState() {
+        return false;
+        // const layoutBuilderInternalService = this._layoutInternalServicesMap.get(layoutKey);
+        // return layoutBuilderInternalService?.editableState || false;
+    }
+    /**
+     * Deprecated
+     */
     showSkeleton(show) {
-        return this.layoutBuilderInternalService.showSkeleton(show);
+        // const layoutBuilderInternalService = this._layoutInternalServicesMap.get(layoutKey);
+        // layoutBuilderInternalService?.showSkeleton(show);
     }
+    /**
+     * Deprecated
+     */
     lockScreen(lock) {
-        return this.layoutBuilderInternalService.lockScreen(lock);
+        // const layoutBuilderInternalService = this._layoutInternalServicesMap.get(layoutKey);
+        // layoutBuilderInternalService?.lockScreen(lock);
     }
 }
-PepLayoutBuilderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutBuilderService, deps: [{ token: LayoutBuilderInternalService }], target: i0.ɵɵFactoryTarget.Injectable });
-PepLayoutBuilderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutBuilderService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutBuilderService, decorators: [{
+PepLayoutBuilderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepLayoutBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+PepLayoutBuilderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepLayoutBuilderService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepLayoutBuilderService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: LayoutBuilderInternalService }]; } });
+        }], ctorParameters: function () { return []; } });
 
 class PepLayoutBuilderModule {
     constructor(pepIconRegistry) {
@@ -2228,8 +2356,8 @@ class PepLayoutBuilderModule {
         ]);
     }
 }
-PepLayoutBuilderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutBuilderModule, deps: [{ token: i1$1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
-PepLayoutBuilderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutBuilderModule, declarations: [PepLayoutBuilderComponent], imports: [CommonModule,
+PepLayoutBuilderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepLayoutBuilderModule, deps: [{ token: i1$1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
+PepLayoutBuilderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: PepLayoutBuilderModule, declarations: [PepLayoutBuilderComponent], imports: [CommonModule,
         DragDropModule,
         // Material modules,
         MatCommonModule,
@@ -2257,7 +2385,7 @@ PepLayoutBuilderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
     ], exports: [PepLayoutBuilderComponent,
         PepLayoutModule,
         PepLayoutBuilderEditorModule] });
-PepLayoutBuilderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutBuilderModule, providers: [
+PepLayoutBuilderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepLayoutBuilderModule, providers: [
         LayoutBuilderInternalService,
         PepLayoutBuilderService
     ], imports: [CommonModule,
@@ -2288,7 +2416,7 @@ PepLayoutBuilderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
         ,
         PepLayoutModule,
         PepLayoutBuilderEditorModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutBuilderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepLayoutBuilderModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [