npm - @pepperi-addons/ngx-composite-lib - Versions diffs - 0.4.2-beta.95 → 0.4.2-beta.96 - Mend

@pepperi-addons/ngx-composite-lib 0.4.2-beta.95 → 0.4.2-beta.96

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

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

@@ -1206,10 +1206,10 @@ class SectionComponent extends BaseDestroyerDirective {
     }
 }
 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;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"] }] });
+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: [{
             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;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    [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']
@@ -2156,10 +2156,10 @@ class PepLayoutBuilderComponent extends BaseDestroyerDirective {
     }
 }
 PepLayoutBuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutBuilderComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.TranslateService }, { token: LayoutBuilderInternalService }, { token: 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:flex;align-items:center}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs{height:100%}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-header,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-header{position:sticky;top:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));z-index:2}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-header-pagination,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-header-pagination{display:none}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-labels,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-labels{display:grid;grid-template-columns:1fr 1fr}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-labels .mat-tab-label,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-labels .mat-tab-label{padding:0 var(--pep-spacing-md, .75rem)!important}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-body-wrapper,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-body-wrapper{overflow:unset;margin:0;display:block}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active{overflow:unset}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active .mat-tab-body-content,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active .mat-tab-body-content{overflow:unset;display:flex;flex-direction:column;padding-inline:0!important}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab{overflow:inherit;display:inherit;flex-direction:inherit;gap:var(--pep-spacing-lg, 1rem)}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab .group-buttons-container .toggle-buttons,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab .group-buttons-container .toggle-buttons,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab .group-buttons-container .toggle-buttons,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab .group-buttons-container .toggle-buttons{width:100%}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-color,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-select,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-textarea,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-textbox,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-color,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-select,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-textarea,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-textbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-textbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-textbox{margin-bottom:0!important}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container{padding-top:var(--pep-spacing-lg, 1rem);padding-bottom:var(--pep-spacing-lg, 1rem)}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group{overflow:inherit;display:inherit;flex-direction:inherit;gap:var(--pep-spacing-lg, 1rem);display:flex;flex-direction:column}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container .group-buttons-container .toggle-buttons,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group .group-buttons-container .toggle-buttons{width:100%}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-textbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-textbox{margin-bottom:0!important}.layout-builder-editor-wrapper ::ng-deep .editor-title{display:block;font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-bold, 600)!important;font-size:var(--pep-font-size-xl, 1.25rem)!important;line-height:var(--pep-line-height-xl, 1.5625rem)!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layout-builder-editor-wrapper ::ng-deep .editor-sub-title{display:block;font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-normal, 400)!important;font-size:var(--pep-font-size-md, 1rem)!important;line-height:var(--pep-line-height-md, 1.25rem)!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layout-builder-editor-wrapper ::ng-deep .editor-separator{margin-top:var(--pep-spacing-lg, 1rem);border-bottom:1px solid hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title{margin-bottom:.5rem!important;min-height:unset!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container{background:unset!important;padding-left:unset!important;padding-right:unset!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-inner-container,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container .mat-checkbox-inner-container{margin-left:0!important;margin-right:0!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-layout,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container .mat-checkbox-layout{font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-normal, 400);font-size:var(--pep-font-size-lg, 1.125rem)!important;line-height:var(--pep-line-height-lg, 1.40625rem)!important;font-weight:var(--pep-font-weight-bold, 600)!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-layout .mat-checkbox-label span,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container .mat-checkbox-layout .mat-checkbox-label span{margin:0 .5rem}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-layout{font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-normal, 400);font-size:var(--pep-font-size-md, 1rem)!important;line-height:var(--pep-line-height-md, 1.25rem)!important;font-weight:var(--pep-font-weight-normal, 400)!important}.main-area-container{min-height:100%;display:grid;grid-template-rows:auto 1fr}.main-area-container .header-container{display:flex;position:sticky;top:0;z-index:100;height:3rem;align-items:center;justify-content:space-between;padding:0 var(--pep-spacing-sm, .5rem)}.main-area-container .header-container .header-group-btn{display:flex;justify-content:space-around;align-items:center}.main-area-container .header-container .header-end{display:flex;justify-content:flex-end;gap:var(--pep-spacing-sm, .5rem)}.main-area-container .header-container ::ng-deep .group-buttons-container .toggle-buttons{width:16rem}.main-area-container .layout-builder-wrapper{width:100%;margin:0 auto;position:relative}.main-area-container .layout-builder-wrapper.limit-min-width{min-width:800px}.main-area-container .layout-builder-wrapper .backdrop{position:absolute;width:100%;height:100%;top:0;z-index:10;display:none}.main-area-container .layout-builder-wrapper .backdrop.show-backdrop{display:block}\n", ".layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-header,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-header{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.main-area-container{background:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.04)}.main-area-container .header-container{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.main-area-container .header-container .header-title{color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.7)}.main-area-container .header-container .size-limit-container{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.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" }] });
+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: [{
             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:flex;align-items:center}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs{height:100%}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-header,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-header{position:sticky;top:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));z-index:2}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-header-pagination,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-header-pagination{display:none}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-labels,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-labels{display:grid;grid-template-columns:1fr 1fr}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-labels .mat-tab-label,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-labels .mat-tab-label{padding:0 var(--pep-spacing-md, .75rem)!important}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-body-wrapper,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-body-wrapper{overflow:unset;margin:0;display:block}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active{overflow:unset}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active .mat-tab-body-content,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active .mat-tab-body-content{overflow:unset;display:flex;flex-direction:column;padding-inline:0!important}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab{overflow:inherit;display:inherit;flex-direction:inherit;gap:var(--pep-spacing-lg, 1rem)}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab .group-buttons-container .toggle-buttons,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab .group-buttons-container .toggle-buttons,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab .group-buttons-container .toggle-buttons,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab .group-buttons-container .toggle-buttons{width:100%}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-color,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-select,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-textarea,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-textbox,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-color,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-select,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-textarea,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-textbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-textbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-textbox{margin-bottom:0!important}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container{padding-top:var(--pep-spacing-lg, 1rem);padding-bottom:var(--pep-spacing-lg, 1rem)}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group{overflow:inherit;display:inherit;flex-direction:inherit;gap:var(--pep-spacing-lg, 1rem);display:flex;flex-direction:column}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container .group-buttons-container .toggle-buttons,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group .group-buttons-container .toggle-buttons{width:100%}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-textbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-textbox{margin-bottom:0!important}.layout-builder-editor-wrapper ::ng-deep .editor-title{display:block;font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-bold, 600)!important;font-size:var(--pep-font-size-xl, 1.25rem)!important;line-height:var(--pep-line-height-xl, 1.5625rem)!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layout-builder-editor-wrapper ::ng-deep .editor-sub-title{display:block;font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-normal, 400)!important;font-size:var(--pep-font-size-md, 1rem)!important;line-height:var(--pep-line-height-md, 1.25rem)!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layout-builder-editor-wrapper ::ng-deep .editor-separator{margin-top:var(--pep-spacing-lg, 1rem);border-bottom:1px solid hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title{margin-bottom:.5rem!important;min-height:unset!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container{background:unset!important;padding-left:unset!important;padding-right:unset!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-inner-container,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container .mat-checkbox-inner-container{margin-left:0!important;margin-right:0!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-layout,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container .mat-checkbox-layout{font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-normal, 400);font-size:var(--pep-font-size-lg, 1.125rem)!important;line-height:var(--pep-line-height-lg, 1.40625rem)!important;font-weight:var(--pep-font-weight-bold, 600)!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-layout .mat-checkbox-label span,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container .mat-checkbox-layout .mat-checkbox-label span{margin:0 .5rem}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-layout{font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-normal, 400);font-size:var(--pep-font-size-md, 1rem)!important;line-height:var(--pep-line-height-md, 1.25rem)!important;font-weight:var(--pep-font-weight-normal, 400)!important}.main-area-container{min-height:100%;display:grid;grid-template-rows:auto 1fr}.main-area-container .header-container{display:flex;position:sticky;top:0;z-index:100;height:3rem;align-items:center;justify-content:space-between;padding:0 var(--pep-spacing-sm, .5rem)}.main-area-container .header-container .header-group-btn{display:flex;justify-content:space-around;align-items:center}.main-area-container .header-container .header-end{display:flex;justify-content:flex-end;gap:var(--pep-spacing-sm, .5rem)}.main-area-container .header-container ::ng-deep .group-buttons-container .toggle-buttons{width:16rem}.main-area-container .layout-builder-wrapper{width:100%;margin:0 auto;position:relative}.main-area-container .layout-builder-wrapper.limit-min-width{min-width:800px}.main-area-container .layout-builder-wrapper .backdrop{position:absolute;width:100%;height:100%;top:0;z-index:10;display:none}.main-area-container .layout-builder-wrapper .backdrop.show-backdrop{display:block}\n", ".layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-header,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-header{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.main-area-container{background:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.04)}.main-area-container .header-container{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.main-area-container .header-container .header-title{color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.7)}.main-area-container .header-container .size-limit-container{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.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"] }]
+            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: [{
                 type: ViewChild,
                 args: ['layoutBuilderWrapper', { static: true }]