@pepperi-addons/ngx-composite-lib 0.4.2-beta.70 → 0.4.2-beta.72

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 (30) hide show
  1. package/esm2020/layout-builder/layout/layout.component.mjs +19 -18
  2. package/esm2020/layout-builder/layout/layout.module.mjs +1 -5
  3. package/esm2020/layout-builder/layout-builder-internal.service.mjs +6 -4
  4. package/esm2020/layout-builder/layout-builder.component.mjs +25 -25
  5. package/esm2020/layout-builder/layout-builder.model.mjs +1 -1
  6. package/esm2020/layout-builder/layout-builder.module.mjs +1 -5
  7. package/esm2020/layout-builder/layout-editor/layout-editor.component.mjs +21 -21
  8. package/esm2020/layout-builder/layout-editor/layout-editor.module.mjs +18 -32
  9. package/esm2020/layout-builder/public-api.mjs +2 -1
  10. package/esm2020/layout-builder/section/section.component.mjs +22 -23
  11. package/esm2020/layout-builder/section/section.module.mjs +10 -11
  12. package/esm2020/layout-builder/section-block/section-block.component.mjs +11 -11
  13. package/esm2020/layout-builder/section-block/section-block.module.mjs +1 -15
  14. package/fesm2015/pepperi-addons-ngx-composite-lib-layout-builder.mjs +313 -343
  15. package/fesm2015/pepperi-addons-ngx-composite-lib-layout-builder.mjs.map +1 -1
  16. package/fesm2020/pepperi-addons-ngx-composite-lib-layout-builder.mjs +313 -343
  17. package/fesm2020/pepperi-addons-ngx-composite-lib-layout-builder.mjs.map +1 -1
  18. package/layout-builder/layout/layout.component.d.ts +3 -4
  19. package/layout-builder/layout/layout.module.d.ts +6 -7
  20. package/layout-builder/layout-builder.component.d.ts +2 -2
  21. package/layout-builder/layout-builder.component.theme.scss +1 -0
  22. package/layout-builder/layout-builder.model.d.ts +0 -1
  23. package/layout-builder/layout-builder.module.d.ts +7 -8
  24. package/layout-builder/layout-editor/layout-editor.component.d.ts +3 -4
  25. package/layout-builder/layout-editor/layout-editor.module.d.ts +9 -11
  26. package/layout-builder/section/section.component.d.ts +2 -2
  27. package/layout-builder/section/section.module.d.ts +5 -5
  28. package/layout-builder/section-block/section-block.component.d.ts +2 -2
  29. package/layout-builder/section-block/section-block.module.d.ts +2 -4
  30. package/package.json +1 -1
package/fesm2015/pepperi-addons-ngx-composite-lib-layout-builder.mjs CHANGED
@@ -5,33 +5,31 @@ import { CommonModule } from '@angular/common';
5
5
  import * as i4$1 from '@angular/cdk/drag-drop';
6
6
  import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
7
7
  import { MatCommonModule } from '@angular/material/core';
8
- import * as i5$4 from '@angular/material/tabs';
8
+ import * as i3$2 from '@angular/material/tabs';
9
9
  import { MatTabsModule } from '@angular/material/tabs';
10
- import * as i1$2 from '@pepperi-addons/ngx-lib';
10
+ import * as i2$1 from '@pepperi-addons/ngx-lib';
11
11
  import { PepScreenSizeType, PepGuid, BaseDestroyerDirective, PepNgxLibModule } from '@pepperi-addons/ngx-lib';
12
12
  import * as i5$2 from '@pepperi-addons/ngx-lib/size-detector';
13
13
  import { PepSizeDetectorModule } from '@pepperi-addons/ngx-lib/size-detector';
14
- import * as i4$2 from '@pepperi-addons/ngx-lib/skeleton-loader';
15
- import { PepSkeletonLoaderModule } from '@pepperi-addons/ngx-lib/skeleton-loader';
16
- import * as i6 from '@pepperi-addons/ngx-lib/button';
14
+ import * as i5$1 from '@pepperi-addons/ngx-lib/button';
17
15
  import { PepButtonModule } from '@pepperi-addons/ngx-lib/button';
18
16
  import * as i2 from '@pepperi-addons/ngx-lib/dialog';
19
17
  import { PepDialogData, PepDialogModule, PepDialogActionButton } from '@pepperi-addons/ngx-lib/dialog';
20
18
  import * as i8$1 from '@pepperi-addons/ngx-lib/group-buttons';
21
19
  import { PepGroupButtonsModule } from '@pepperi-addons/ngx-lib/group-buttons';
22
- import * as i5$5 from '@pepperi-addons/ngx-lib/page-layout';
20
+ import * as i5$3 from '@pepperi-addons/ngx-lib/page-layout';
23
21
  import { PepPageLayoutModule } from '@pepperi-addons/ngx-lib/page-layout';
24
22
  import * as i6$1 from '@pepperi-addons/ngx-lib/side-bar';
25
23
  import { PepSideBarComponent, PepSideBarModule } from '@pepperi-addons/ngx-lib/side-bar';
26
- import * as i5$1 from '@pepperi-addons/ngx-lib/draggable-items';
24
+ import * as i8 from '@pepperi-addons/ngx-lib/draggable-items';
27
25
  import { PepDraggableItemsModule } from '@pepperi-addons/ngx-lib/draggable-items';
28
- import * as i5$3 from '@pepperi-addons/ngx-lib/checkbox';
26
+ import * as i6 from '@pepperi-addons/ngx-lib/checkbox';
29
27
  import { PepCheckboxModule } from '@pepperi-addons/ngx-lib/checkbox';
30
- import * as i4$3 from '@pepperi-addons/ngx-lib/select';
28
+ import * as i4$4 from '@pepperi-addons/ngx-lib/select';
31
29
  import { PepSelectModule } from '@pepperi-addons/ngx-lib/select';
32
- import * as i3$2 from '@pepperi-addons/ngx-lib/textbox';
30
+ import * as i4$3 from '@pepperi-addons/ngx-lib/textbox';
33
31
  import { PepTextboxModule } from '@pepperi-addons/ngx-lib/textbox';
34
- import * as i8 from '@pepperi-addons/ngx-composite-lib/group-buttons-settings';
32
+ import * as i7 from '@pepperi-addons/ngx-composite-lib/group-buttons-settings';
35
33
  import { PepGroupButtonsSettingsModule } from '@pepperi-addons/ngx-composite-lib/group-buttons-settings';
36
34
  import { __awaiter } from 'tslib';
37
35
  import * as i1 from '@ngx-translate/core';
@@ -47,12 +45,12 @@ import { MatIconModule } from '@angular/material/icon';
47
45
  import * as i1$1 from '@pepperi-addons/ngx-lib/icon';
48
46
  import { pepIconSystemView, PepIconModule, pepIconDeviceDesktop, pepIconDeviceTablet, pepIconDeviceMobile } from '@pepperi-addons/ngx-lib/icon';
49
47
  import { HttpClientModule } from '@angular/common/http';
50
- import { PepRemoteLoaderModule } from '@pepperi-addons/ngx-lib/remote-loader';
48
+ import * as i4$2 from '@pepperi-addons/ngx-lib/skeleton-loader';
49
+ import { PepSkeletonLoaderModule } from '@pepperi-addons/ngx-lib/skeleton-loader';
51
50
  import { coerceNumberProperty } from '@angular/cdk/coercion';
52
51
  import { BehaviorSubject } from 'rxjs';
53
52
  import { distinctUntilChanged, filter } from 'rxjs/operators';
54
53
  import { OverlayModule } from '@angular/cdk/overlay';
55
- import { PepTextareaModule } from '@pepperi-addons/ngx-lib/textarea';
56
54
  import { PepColorModule } from '@pepperi-addons/ngx-lib/color';
57
55
  import { PepImageModule } from '@pepperi-addons/ngx-lib/image';
58
56
  import { MatSliderModule } from '@angular/material/slider';
@@ -92,7 +90,7 @@ class PepHideInComponent {
92
90
  }
93
91
  }
94
92
  PepHideInComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepHideInComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
95
- PepHideInComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepHideInComponent, selector: "hide-in", inputs: { hideIn: "hideIn" }, outputs: { hideInChange: "hideInChange", menuOpened: "menuOpened", menuClosed: "menuClosed" }, ngImport: i0, template: "\n<pep-button sizeType=\"xs\" iconName=\"system_view\" [matMenuTriggerFor]=\"menu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\"\n class=\"badge-button\" [ngClass]=\"{ 'none': !hideIn || hideIn.length === 0}\"\n matBadge=\"{{ hideIn?.length }}\" matBadgePosition=\"after\" matBadgeSize=\"small\" \n></pep-button>\n\n<mat-menu #menu=\"matMenu\" class=\"hide-in-menu\">\n <div mat-menu-item class=\"title\" disabled>\n <span>{{('HIDE_IN.HIDE_IN_TITLE' | translate)}}</span>\n </div>\n <div mat-menu-item class=\"splitter\"></div>\n <ng-container *ngFor=\"let menuItem of menuItems\">\n <button mat-menu-item (click)=\"onItemClick($event, menuItem)\" title=\"{{ menuItem.text }}\">\n <mat-checkbox type=\"checkbox\" title=\"{{ menuItem.text }}\" class=\"md\"\n (change)=\"onItemClick($event, menuItem)\" [checked]=\"menuItem.selected\">\n <span class=\"pull-left flip title ellipsis\">{{ menuItem.text }}</span>\n </mat-checkbox>\n </button>\n </ng-container>\n</mat-menu>\n", styles: [".hide-in-menu .mat-menu-item.splitter{margin-inline:var(--pep-spacing-sm, .5rem)}.mat-menu-item ::ng-deep .mat-checkbox-layout .mat-checkbox-inner-container{margin-inline-end:var(--pep-spacing-xs, .25rem)!important}.badge-button .mat-badge-content{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);color:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));background-color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))!important;box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32)}.badge-button .mat-badge-content .svg-icon{fill:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.badge-button .mat-badge-content .svg-icon.stroke{fill:unset;stroke:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.badge-button.none ::ng-deep .mat-badge-content{display:none}.badge-button ::ng-deep .mat-badge-content{z-index:1;right:-4px!important}\n", ".hide-in-menu .mat-menu-item.title{color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.7)}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i4.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
93
+ PepHideInComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepHideInComponent, selector: "hide-in", inputs: { hideIn: "hideIn" }, outputs: { hideInChange: "hideInChange", menuOpened: "menuOpened", menuClosed: "menuClosed" }, ngImport: i0, template: "\n<pep-button sizeType=\"xs\" iconName=\"system_view\" [matMenuTriggerFor]=\"menu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\"\n class=\"badge-button\" [ngClass]=\"{ 'none': !hideIn || hideIn.length === 0}\"\n matBadge=\"{{ hideIn?.length }}\" matBadgePosition=\"after\" matBadgeSize=\"small\" \n></pep-button>\n\n<mat-menu #menu=\"matMenu\" class=\"hide-in-menu\">\n <div mat-menu-item class=\"title\" disabled>\n <span>{{('HIDE_IN.HIDE_IN_TITLE' | translate)}}</span>\n </div>\n <div mat-menu-item class=\"splitter\"></div>\n <ng-container *ngFor=\"let menuItem of menuItems\">\n <button mat-menu-item (click)=\"onItemClick($event, menuItem)\" title=\"{{ menuItem.text }}\">\n <mat-checkbox type=\"checkbox\" title=\"{{ menuItem.text }}\" class=\"md\"\n (change)=\"onItemClick($event, menuItem)\" [checked]=\"menuItem.selected\">\n <span class=\"pull-left flip title ellipsis\">{{ menuItem.text }}</span>\n </mat-checkbox>\n </button>\n </ng-container>\n</mat-menu>\n", styles: [".hide-in-menu .mat-menu-item.splitter{margin-inline:var(--pep-spacing-sm, .5rem)}.mat-menu-item ::ng-deep .mat-checkbox-layout .mat-checkbox-inner-container{margin-inline-end:var(--pep-spacing-xs, .25rem)!important}.badge-button .mat-badge-content{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);color:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));background-color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))!important;box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32)}.badge-button .mat-badge-content .svg-icon{fill:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.badge-button .mat-badge-content .svg-icon.stroke{fill:unset;stroke:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.badge-button.none ::ng-deep .mat-badge-content{display:none}.badge-button ::ng-deep .mat-badge-content{z-index:1;right:-4px!important}\n", ".hide-in-menu .mat-menu-item.title{color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.7)}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i4.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$1.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
96
94
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepHideInComponent, decorators: [{
97
95
  type: Component,
98
96
  args: [{ selector: 'hide-in', template: "\n<pep-button sizeType=\"xs\" iconName=\"system_view\" [matMenuTriggerFor]=\"menu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\"\n class=\"badge-button\" [ngClass]=\"{ 'none': !hideIn || hideIn.length === 0}\"\n matBadge=\"{{ hideIn?.length }}\" matBadgePosition=\"after\" matBadgeSize=\"small\" \n></pep-button>\n\n<mat-menu #menu=\"matMenu\" class=\"hide-in-menu\">\n <div mat-menu-item class=\"title\" disabled>\n <span>{{('HIDE_IN.HIDE_IN_TITLE' | translate)}}</span>\n </div>\n <div mat-menu-item class=\"splitter\"></div>\n <ng-container *ngFor=\"let menuItem of menuItems\">\n <button mat-menu-item (click)=\"onItemClick($event, menuItem)\" title=\"{{ menuItem.text }}\">\n <mat-checkbox type=\"checkbox\" title=\"{{ menuItem.text }}\" class=\"md\"\n (change)=\"onItemClick($event, menuItem)\" [checked]=\"menuItem.selected\">\n <span class=\"pull-left flip title ellipsis\">{{ menuItem.text }}</span>\n </mat-checkbox>\n </button>\n </ng-container>\n</mat-menu>\n", styles: [".hide-in-menu .mat-menu-item.splitter{margin-inline:var(--pep-spacing-sm, .5rem)}.mat-menu-item ::ng-deep .mat-checkbox-layout .mat-checkbox-inner-container{margin-inline-end:var(--pep-spacing-xs, .25rem)!important}.badge-button .mat-badge-content{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);color:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));background-color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))!important;box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32)}.badge-button .mat-badge-content .svg-icon{fill:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.badge-button .mat-badge-content .svg-icon.stroke{fill:unset;stroke:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.badge-button.none ::ng-deep .mat-badge-content{display:none}.badge-button ::ng-deep .mat-badge-content{z-index:1;right:-4px!important}\n", ".hide-in-menu .mat-menu-item.title{color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.7)}\n"] }]
@@ -330,7 +328,7 @@ class LayoutBuilderInternalService {
330
328
  this._editorsBreadCrumb.push({
331
329
  id: LayoutBuilderInternalService.MAIN_EDITOR_ID,
332
330
  type: 'layout-builder',
333
- title: layoutView.Title || this.translate.instant('LAYOUT_BUILDER.DEFAULT_TITLE'),
331
+ title: this.translate.instant('LAYOUT_BUILDER.DEFAULT_TITLE'),
334
332
  // hostObject: {} // Updates in updateLayoutEditorProperties function above.
335
333
  });
336
334
  this.updateLayoutEditorProperties(layoutView);
@@ -801,8 +799,10 @@ class LayoutBuilderInternalService {
801
799
  }
802
800
  loadLayoutBuilder(layoutView) {
803
801
  if (this.editMode) {
804
- // Load the layout editor.
805
- this.loadDefaultEditor(layoutView);
802
+ if (this._editorsBreadCrumb.length === 0) {
803
+ // Load the layout editor.
804
+ this.loadDefaultEditor(layoutView);
805
+ }
806
806
  // Set the columns gap of the sections.
807
807
  // this.setSectionsColumnsGap(layoutView);
808
808
  }
@@ -822,9 +822,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
822
822
  }], ctorParameters: function () { return [{ type: i1.TranslateService }, { type: i2.PepDialogService }]; } });
823
823
 
824
824
  class SectionBlockComponent extends BaseDestroyerDirective {
825
- constructor(layoutBuilderService) {
825
+ constructor(layoutBuilderInternalService) {
826
826
  super();
827
- this.layoutBuilderService = layoutBuilderService;
827
+ this.layoutBuilderInternalService = layoutBuilderInternalService;
828
828
  this.sectionKey = '';
829
829
  this.sectionHeight = '';
830
830
  this.isMainEditorState = false;
@@ -838,7 +838,7 @@ class SectionBlockComponent extends BaseDestroyerDirective {
838
838
  var _a, _b;
839
839
  this._blockContainer = value;
840
840
  if (this._blockContainer) {
841
- this.availableBlock = (_a = this.layoutBuilderService.availableBlocksForDragMap) === null || _a === void 0 ? void 0 : _a.get((_b = this._blockContainer) === null || _b === void 0 ? void 0 : _b.DraggableItemKey);
841
+ this.availableBlock = (_a = this.layoutBuilderInternalService.availableBlocksForDragMap) === null || _a === void 0 ? void 0 : _a.get((_b = this._blockContainer) === null || _b === void 0 ? void 0 : _b.DraggableItemKey);
842
842
  }
843
843
  this.setIfHideForCurrentScreenType();
844
844
  }
@@ -854,11 +854,11 @@ class SectionBlockComponent extends BaseDestroyerDirective {
854
854
  }
855
855
  setIfHideForCurrentScreenType() {
856
856
  this.hideForCurrentScreenType = this.blockContainer ?
857
- this.layoutBuilderService.getIsHidden(this.blockContainer.Hide, this.screenType) : false;
857
+ this.layoutBuilderInternalService.getIsHidden(this.blockContainer.Hide, this.screenType) : false;
858
858
  }
859
859
  ngOnInit() {
860
860
  //
861
- this.layoutBuilderService.availableBlocksForDragMapChange$.pipe(this.getDestroyer()).subscribe((availableBlocksForDragMap) => {
861
+ this.layoutBuilderInternalService.availableBlocksForDragMapChange$.pipe(this.getDestroyer()).subscribe((availableBlocksForDragMap) => {
862
862
  if (availableBlocksForDragMap && this.blockContainer) {
863
863
  this.availableBlock = availableBlocksForDragMap.get(this.blockContainer.DraggableItemKey);
864
864
  }
@@ -867,19 +867,19 @@ class SectionBlockComponent extends BaseDestroyerDirective {
867
867
  onEditBlockClick() {
868
868
  var _a;
869
869
  if ((_a = this.blockContainer) === null || _a === void 0 ? void 0 : _a.BlockKey) {
870
- this.layoutBuilderService.navigateToEditor('block', this.blockContainer.BlockKey);
870
+ this.layoutBuilderInternalService.navigateToEditor('block', this.blockContainer.BlockKey);
871
871
  }
872
872
  }
873
873
  onRemoveBlockClick() {
874
874
  var _a;
875
875
  if ((_a = this.blockContainer) === null || _a === void 0 ? void 0 : _a.BlockKey) {
876
- this.layoutBuilderService.removeBlockFromSection(this.blockContainer.BlockKey);
876
+ this.layoutBuilderInternalService.removeBlockFromSection(this.blockContainer.BlockKey);
877
877
  }
878
878
  }
879
879
  onHideBlockChange(hideIn) {
880
880
  var _a;
881
881
  if ((_a = this.blockContainer) === null || _a === void 0 ? void 0 : _a.BlockKey) {
882
- this.layoutBuilderService.hideBlock(this.sectionKey, this.blockContainer.BlockKey, hideIn);
882
+ this.layoutBuilderInternalService.hideBlock(this.sectionKey, this.blockContainer.BlockKey, hideIn);
883
883
  this.setIfHideForCurrentScreenType();
884
884
  }
885
885
  }
@@ -887,10 +887,10 @@ class SectionBlockComponent extends BaseDestroyerDirective {
887
887
  // this.layoutBuilderService.updateBlockLoaded(this.blockContainer.BlockKey);
888
888
  // }
889
889
  onDragStart(event) {
890
- this.layoutBuilderService.onBlockDragStart(event);
890
+ this.layoutBuilderInternalService.onBlockDragStart(event);
891
891
  }
892
892
  onDragEnd(event) {
893
- this.layoutBuilderService.onBlockDragEnd(event);
893
+ this.layoutBuilderInternalService.onBlockDragEnd(event);
894
894
  }
895
895
  onDragExited(event) {
896
896
  this.dragExited.emit(event);
@@ -900,7 +900,7 @@ class SectionBlockComponent extends BaseDestroyerDirective {
900
900
  }
901
901
  }
902
902
  SectionBlockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionBlockComponent, deps: [{ token: LayoutBuilderInternalService }], target: i0.ɵɵFactoryTarget.Component });
903
- SectionBlockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: SectionBlockComponent, selector: "section-block", inputs: { blockTemplate: "blockTemplate", sectionKey: "sectionKey", sectionHeight: "sectionHeight", isMainEditorState: "isMainEditorState", editable: "editable", active: "active", blockContainer: "blockContainer", screenType: "screenType" }, outputs: { dragExited: "dragExited", dragEntered: "dragEntered" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"blockContainer?.BlockKey && (editable || !hideForCurrentScreenType)\" \n class=\"section-block-container\"\n [ngClass]=\"{ 'editable-state': editable, 'block-hidden-state': hideForCurrentScreenType, 'active-block': active }\"\n cdkDrag [cdkDragData]=\"blockContainer\" [cdkDragDisabled]=\"!editable || !isMainEditorState\" \n (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\"\n (cdkDragExited)=\"onDragExited($event)\" (cdkDragEntered)=\"onDragEntered($event)\">\n \n <pep-draggable-item *ngIf=\"editable && isMainEditorState\" cdkDragHandle style=\"cursor: grab;\"\n class=\"block-toolbar\" [title]=\"availableBlock?.title || blockContainer?.BlockKey || ''\" >\n <ng-container pep-actions>\n <pep-button classNames=\"caution\" sizeType=\"xs\" iconName=\"system_bin\" (buttonClick)=\"onRemoveBlockClick();\"></pep-button>\n <!-- <hide-in [hideIn]=\"blockContainer.Hide\" (hideInChange)=\"onHideBlockChange($event)\"></hide-in> -->\n <pep-button sizeType=\"xs\" iconName=\"system_edit\" (buttonClick)=\"onEditBlockClick();\"></pep-button>\n </ng-container>f\n </pep-draggable-item>\n <div class=\"block-template-wrapper\" [ngStyle]=\"{ 'overflow': (sectionHeight === 'unset' ? 'unset' : 'auto') }\">\n <div *ngIf=\"blockTemplate\" class=\"block-template\">\n <ng-container *ngTemplateOutlet=\"blockTemplate; context: { blockKey: blockContainer?.BlockKey, draggableItemKey: blockContainer?.DraggableItemKey }\">\n </ng-container>\n </div>\n <!-- <pep-remote-loader-element *ngIf=\"remoteLoaderOptions\" class=\"remote-loader\"\n [options]=\"remoteLoaderOptions\"\n [props]=\"{ hostObject: hostObject }\"\n [events]=\"{ hostEvents: onBlockHostEventsCallback }\"\n (load)=\"onBlockLoad($event)\">\n </pep-remote-loader-element> -->\n </div>\n</div>\n", styles: [".section-block-container{height:100%;width:100%}.section-block-container.editable-state:not(.active-block) .block-template-wrapper .block-template{pointer-events:none;opacity:.5}.section-block-container.editable-state.cdk-drag-preview .block-template-wrapper,.section-block-container.editable-state.cdk-drag-placeholder .block-toolbar{opacity:0}.section-block-container.editable-state .block-toolbar{position:absolute;top:50%;left:50%;width:95%;max-width:240px;transform:translate(-50%,-50%);z-index:3}.section-block-container.editable-state .block-toolbar:hover{z-index:12!important}.section-block-container .block-template-wrapper{height:100%;position:relative}.section-block-container .block-template-wrapper .block-template{display:block;height:100%;width:100%}\n", ".section-block-container.editable-state.block-hidden-state:not(.active-block){background:repeating-linear-gradient(45deg,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0),hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .8rem),repeating-linear-gradient(-45deg,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0),hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .8rem)}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i6.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i5$1.DraggableItemComponent, selector: "pep-draggable-item", inputs: ["title", "titlePrefix", "titleClassNames", "data", "disabled", "shadow", "styleType", "toggleContent", "isToggleContentOpen", "actionsMenu", "menuStyleType"], outputs: ["contentToggle", "actionsMenuItemClick"] }] });
903
+ SectionBlockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: SectionBlockComponent, selector: "section-block", inputs: { blockTemplate: "blockTemplate", sectionKey: "sectionKey", sectionHeight: "sectionHeight", isMainEditorState: "isMainEditorState", editable: "editable", active: "active", blockContainer: "blockContainer", screenType: "screenType" }, outputs: { dragExited: "dragExited", dragEntered: "dragEntered" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"blockContainer?.BlockKey && (editable || !hideForCurrentScreenType)\" \n class=\"section-block-container\"\n [ngClass]=\"{ 'editable-state': editable, 'block-hidden-state': hideForCurrentScreenType, 'active-block': active }\"\n cdkDrag [cdkDragData]=\"blockContainer\" [cdkDragDisabled]=\"!editable || !isMainEditorState\" \n (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\"\n (cdkDragExited)=\"onDragExited($event)\" (cdkDragEntered)=\"onDragEntered($event)\">\n \n <pep-draggable-item *ngIf=\"editable && isMainEditorState\" cdkDragHandle style=\"cursor: grab;\"\n class=\"block-toolbar\" [title]=\"availableBlock?.title || blockContainer?.BlockKey || ''\" >\n <ng-container pep-actions>\n <pep-button classNames=\"caution\" sizeType=\"xs\" iconName=\"system_bin\" (buttonClick)=\"onRemoveBlockClick();\"></pep-button>\n <!-- <hide-in [hideIn]=\"blockContainer.Hide\" (hideInChange)=\"onHideBlockChange($event)\"></hide-in> -->\n <pep-button sizeType=\"xs\" iconName=\"system_edit\" (buttonClick)=\"onEditBlockClick();\"></pep-button>\n </ng-container>f\n </pep-draggable-item>\n <div class=\"block-template-wrapper\" [ngStyle]=\"{ 'overflow': (sectionHeight === 'unset' ? 'unset' : 'auto') }\">\n <div *ngIf=\"blockTemplate\" class=\"block-template\">\n <ng-container *ngTemplateOutlet=\"blockTemplate; context: { blockKey: blockContainer?.BlockKey, draggableItemKey: blockContainer?.DraggableItemKey }\">\n </ng-container>\n </div>\n <!-- <pep-remote-loader-element *ngIf=\"remoteLoaderOptions\" class=\"remote-loader\"\n [options]=\"remoteLoaderOptions\"\n [props]=\"{ hostObject: hostObject }\"\n [events]=\"{ hostEvents: onBlockHostEventsCallback }\"\n (load)=\"onBlockLoad($event)\">\n </pep-remote-loader-element> -->\n </div>\n</div>\n", styles: [".section-block-container{height:100%;width:100%}.section-block-container.editable-state:not(.active-block) .block-template-wrapper .block-template{pointer-events:none;opacity:.5}.section-block-container.editable-state.cdk-drag-preview .block-template-wrapper,.section-block-container.editable-state.cdk-drag-placeholder .block-toolbar{opacity:0}.section-block-container.editable-state .block-toolbar{position:absolute;top:50%;left:50%;width:95%;max-width:240px;transform:translate(-50%,-50%);z-index:3}.section-block-container.editable-state .block-toolbar:hover{z-index:12!important}.section-block-container .block-template-wrapper{height:100%;position:relative}.section-block-container .block-template-wrapper .block-template{display:block;height:100%;width:100%}\n", ".section-block-container.editable-state.block-hidden-state:not(.active-block){background:repeating-linear-gradient(45deg,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0),hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .8rem),repeating-linear-gradient(-45deg,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0),hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .8rem)}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i5$1.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i8.DraggableItemComponent, selector: "pep-draggable-item", inputs: ["title", "titlePrefix", "titleClassNames", "data", "disabled", "shadow", "styleType", "toggleContent", "isToggleContentOpen", "actionsMenu", "menuStyleType"], outputs: ["contentToggle", "actionsMenuItemClick"] }] });
904
904
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionBlockComponent, decorators: [{
905
905
  type: Component,
906
906
  args: [{ selector: 'section-block', template: "<div *ngIf=\"blockContainer?.BlockKey && (editable || !hideForCurrentScreenType)\" \n class=\"section-block-container\"\n [ngClass]=\"{ 'editable-state': editable, 'block-hidden-state': hideForCurrentScreenType, 'active-block': active }\"\n cdkDrag [cdkDragData]=\"blockContainer\" [cdkDragDisabled]=\"!editable || !isMainEditorState\" \n (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\"\n (cdkDragExited)=\"onDragExited($event)\" (cdkDragEntered)=\"onDragEntered($event)\">\n \n <pep-draggable-item *ngIf=\"editable && isMainEditorState\" cdkDragHandle style=\"cursor: grab;\"\n class=\"block-toolbar\" [title]=\"availableBlock?.title || blockContainer?.BlockKey || ''\" >\n <ng-container pep-actions>\n <pep-button classNames=\"caution\" sizeType=\"xs\" iconName=\"system_bin\" (buttonClick)=\"onRemoveBlockClick();\"></pep-button>\n <!-- <hide-in [hideIn]=\"blockContainer.Hide\" (hideInChange)=\"onHideBlockChange($event)\"></hide-in> -->\n <pep-button sizeType=\"xs\" iconName=\"system_edit\" (buttonClick)=\"onEditBlockClick();\"></pep-button>\n </ng-container>f\n </pep-draggable-item>\n <div class=\"block-template-wrapper\" [ngStyle]=\"{ 'overflow': (sectionHeight === 'unset' ? 'unset' : 'auto') }\">\n <div *ngIf=\"blockTemplate\" class=\"block-template\">\n <ng-container *ngTemplateOutlet=\"blockTemplate; context: { blockKey: blockContainer?.BlockKey, draggableItemKey: blockContainer?.DraggableItemKey }\">\n </ng-container>\n </div>\n <!-- <pep-remote-loader-element *ngIf=\"remoteLoaderOptions\" class=\"remote-loader\"\n [options]=\"remoteLoaderOptions\"\n [props]=\"{ hostObject: hostObject }\"\n [events]=\"{ hostEvents: onBlockHostEventsCallback }\"\n (load)=\"onBlockLoad($event)\">\n </pep-remote-loader-element> -->\n </div>\n</div>\n", styles: [".section-block-container{height:100%;width:100%}.section-block-container.editable-state:not(.active-block) .block-template-wrapper .block-template{pointer-events:none;opacity:.5}.section-block-container.editable-state.cdk-drag-preview .block-template-wrapper,.section-block-container.editable-state.cdk-drag-placeholder .block-toolbar{opacity:0}.section-block-container.editable-state .block-toolbar{position:absolute;top:50%;left:50%;width:95%;max-width:240px;transform:translate(-50%,-50%);z-index:3}.section-block-container.editable-state .block-toolbar:hover{z-index:12!important}.section-block-container .block-template-wrapper{height:100%;position:relative}.section-block-container .block-template-wrapper .block-template{display:block;height:100%;width:100%}\n", ".section-block-container.editable-state.block-hidden-state:not(.active-block){background:repeating-linear-gradient(45deg,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0),hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .8rem),repeating-linear-gradient(-45deg,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0),hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .8rem)}\n"] }]
@@ -927,10 +927,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
927
927
  }] } });
928
928
 
929
929
  class SectionComponent extends BaseDestroyerDirective {
930
- constructor(renderer, layoutBuilderService, layoutService) {
930
+ constructor(renderer, layoutBuilderInternalService, layoutService) {
931
931
  super();
932
932
  this.renderer = renderer;
933
- this.layoutBuilderService = layoutBuilderService;
933
+ this.layoutBuilderInternalService = layoutBuilderInternalService;
934
934
  this.layoutService = layoutService;
935
935
  this.key = '';
936
936
  this.name = '';
@@ -997,8 +997,7 @@ class SectionComponent extends BaseDestroyerDirective {
997
997
  // this.refreshSplit();
998
998
  // }
999
999
  get editable() {
1000
- return this.layoutBuilderService.editableState;
1001
- ;
1000
+ return true; //this.layoutBuilderInternalService.editableState;;
1002
1001
  }
1003
1002
  set screenSize(value) {
1004
1003
  this._screenSize = value;
@@ -1015,12 +1014,12 @@ class SectionComponent extends BaseDestroyerDirective {
1015
1014
  }
1016
1015
  }
1017
1016
  setScreenType() {
1018
- this.screenType = this.layoutBuilderService.getScreenType(this.screenSize);
1017
+ this.screenType = this.layoutBuilderInternalService.getScreenType(this.screenSize);
1019
1018
  this.setIfHideForCurrentScreenType();
1020
1019
  this.setStyleHeight();
1021
1020
  }
1022
1021
  setIfHideForCurrentScreenType() {
1023
- this.hideForCurrentScreenType = this.layoutBuilderService.getIsHidden(this.hideIn, this.screenType);
1022
+ this.hideForCurrentScreenType = this.layoutBuilderInternalService.getIsHidden(this.hideIn, this.screenType);
1024
1023
  }
1025
1024
  getCssSplitString() {
1026
1025
  switch (this.split) {
@@ -1094,33 +1093,33 @@ class SectionComponent extends BaseDestroyerDirective {
1094
1093
  return this.draggingBlockKey.length > 0 && this.draggingSectionKey.length > 0;
1095
1094
  }
1096
1095
  getIsHidden(hideIn, currentScreenType) {
1097
- return this.layoutBuilderService.getIsHidden(hideIn, currentScreenType);
1096
+ return this.layoutBuilderInternalService.getIsHidden(hideIn, currentScreenType);
1098
1097
  }
1099
1098
  ngOnInit() {
1100
- this.layoutBuilderService.previewModeChange$.pipe(this.getDestroyer()).subscribe(previewMode => {
1099
+ this.layoutBuilderInternalService.previewModeChange$.pipe(this.getDestroyer()).subscribe(previewMode => {
1101
1100
  this.refreshSplit();
1102
1101
  });
1103
1102
  // Just to calculate if sections contains blocks
1104
- this.layoutBuilderService.sectionsChange$.pipe(this.getDestroyer()).subscribe(res => {
1103
+ this.layoutBuilderInternalService.sectionsChange$.pipe(this.getDestroyer()).subscribe(res => {
1105
1104
  this.calculateIfSectionContainsBlocks();
1106
1105
  });
1107
1106
  this.layoutService.onResize$.pipe(this.getDestroyer()).subscribe((size) => {
1108
1107
  this.screenSize = size;
1109
1108
  });
1110
- this.layoutBuilderService.screenSizeChange$.pipe(this.getDestroyer()).subscribe((size) => {
1109
+ this.layoutBuilderInternalService.screenSizeChange$.pipe(this.getDestroyer()).subscribe((size) => {
1111
1110
  this.screenSize = size;
1112
1111
  });
1113
1112
  if (this.editable) {
1114
- this.layoutBuilderService.sectionsColumnsDropListChange$.pipe(this.getDestroyer()).subscribe((sectionsColumnsDropList) => {
1113
+ this.layoutBuilderInternalService.sectionsColumnsDropListChange$.pipe(this.getDestroyer()).subscribe((sectionsColumnsDropList) => {
1115
1114
  this.sectionsColumnsDropList = sectionsColumnsDropList;
1116
1115
  });
1117
- this.layoutBuilderService.editorChange$.pipe(this.getDestroyer()).subscribe((editor) => {
1116
+ this.layoutBuilderInternalService.editorChange$.pipe(this.getDestroyer()).subscribe((editor) => {
1118
1117
  this.isMainEditorState = editor && editor.type === 'layout-builder';
1119
1118
  this.isEditing = editor && editor.type === 'section' && editor.id === this.key;
1120
1119
  this.selectedSectionKey = editor && editor.type === 'section' ? editor.id : '';
1121
1120
  this.selectedBlockKey = editor && editor.type === 'block' ? editor.id : '';
1122
1121
  });
1123
- this.layoutBuilderService.draggingBlockKey.pipe(this.getDestroyer()).subscribe((draggingBlockKey) => {
1122
+ this.layoutBuilderInternalService.draggingBlockKey.pipe(this.getDestroyer()).subscribe((draggingBlockKey) => {
1124
1123
  this.draggingBlockKey = draggingBlockKey;
1125
1124
  if (draggingBlockKey === '') {
1126
1125
  this.calculateIfSectionContainsBlocks();
@@ -1133,20 +1132,20 @@ class SectionComponent extends BaseDestroyerDirective {
1133
1132
  }
1134
1133
  }
1135
1134
  });
1136
- this.layoutBuilderService.draggingSectionKey.pipe(this.getDestroyer()).subscribe((draggingSectionKey) => {
1135
+ this.layoutBuilderInternalService.draggingSectionKey.pipe(this.getDestroyer()).subscribe((draggingSectionKey) => {
1137
1136
  this.draggingSectionKey = draggingSectionKey;
1138
1137
  });
1139
1138
  }
1140
- this.sectionColumnKeyPrefix = this.layoutBuilderService.getSectionColumnKey(this.key);
1139
+ this.sectionColumnKeyPrefix = this.layoutBuilderInternalService.getSectionColumnKey(this.key);
1141
1140
  }
1142
1141
  onEditSectionClick() {
1143
- this.layoutBuilderService.navigateToEditor('section', this.key);
1142
+ this.layoutBuilderInternalService.navigateToEditor('section', this.key);
1144
1143
  }
1145
1144
  onRemoveSectionClick() {
1146
- this.layoutBuilderService.removeSection(this.key);
1145
+ this.layoutBuilderInternalService.removeSection(this.key);
1147
1146
  }
1148
1147
  onHideSectionChange(hideIn) {
1149
- this.layoutBuilderService.hideSection(this.key, hideIn);
1148
+ this.layoutBuilderInternalService.hideSection(this.key, hideIn);
1150
1149
  }
1151
1150
  onHideInMenuOpened() {
1152
1151
  this.hoverState = true;
@@ -1155,19 +1154,19 @@ class SectionComponent extends BaseDestroyerDirective {
1155
1154
  this.hoverState = false;
1156
1155
  }
1157
1156
  onBlockDropped(event) {
1158
- this.layoutBuilderService.onBlockDropped(event, this.key);
1157
+ this.layoutBuilderInternalService.onBlockDropped(event, this.key);
1159
1158
  }
1160
1159
  canDropPredicate(columnIndex) {
1161
1160
  return (drag, drop) => {
1162
- const res = !this.layoutBuilderService.doesColumnContainBlock(this.key, columnIndex);
1161
+ const res = !this.layoutBuilderInternalService.doesColumnContainBlock(this.key, columnIndex);
1163
1162
  return res;
1164
1163
  };
1165
1164
  }
1166
1165
  onDragStart(event) {
1167
- this.layoutBuilderService.onSectionDragStart(event);
1166
+ this.layoutBuilderInternalService.onSectionDragStart(event);
1168
1167
  }
1169
1168
  onDragEnd(event) {
1170
- this.layoutBuilderService.onSectionDragEnd(event);
1169
+ this.layoutBuilderInternalService.onSectionDragEnd(event);
1171
1170
  }
1172
1171
  onSectionBlockDragExited(event) {
1173
1172
  //
@@ -1176,12 +1175,12 @@ class SectionComponent extends BaseDestroyerDirective {
1176
1175
  //
1177
1176
  }
1178
1177
  }
1179
- SectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionComponent, deps: [{ token: i0.Renderer2 }, { token: LayoutBuilderInternalService }, { token: i1$2.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
1180
- 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 <div [id]=\"sectionColumnKeyPrefix + i\" \n *ngFor=\"let column of columns; let i=index;\"\n class=\"section-column {{screenSize <= pepScreenSizeToFlipToVertical ? '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]=\"screenSize <= pepScreenSizeToFlipToVertical ? 'horizontal' : 'vertical'\" \n [cdkDropListConnectedTo]=\"sectionsColumnsDropList\"\n (cdkDropListDropped)=\"onBlockDropped($event)\"\n [cdkDropListEnterPredicate]=\"canDropPredicate(i)\"\n >\n <section-block *ngIf=\"column.BlockContainer?.BlockKey\" 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 </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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.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: i4$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i6.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: PepHideInComponent, selector: "hide-in", inputs: ["hideIn"], outputs: ["hideInChange", "menuOpened", "menuClosed"] }, { kind: "component", type: i5$1.DraggableItemComponent, selector: "pep-draggable-item", inputs: ["title", "titlePrefix", "titleClassNames", "data", "disabled", "shadow", "styleType", "toggleContent", "isToggleContentOpen", "actionsMenu", "menuStyleType"], outputs: ["contentToggle", "actionsMenuItemClick"] }] });
1178
+ SectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionComponent, deps: [{ token: i0.Renderer2 }, { token: LayoutBuilderInternalService }, { token: i2$1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
1179
+ 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 <div [id]=\"sectionColumnKeyPrefix + i\" \n *ngFor=\"let column of columns; let i=index;\"\n class=\"section-column {{screenSize <= pepScreenSizeToFlipToVertical ? '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]=\"screenSize <= pepScreenSizeToFlipToVertical ? 'horizontal' : 'vertical'\" \n [cdkDropListConnectedTo]=\"sectionsColumnsDropList\"\n (cdkDropListDropped)=\"onBlockDropped($event)\"\n [cdkDropListEnterPredicate]=\"canDropPredicate(i)\"\n >\n <section-block *ngIf=\"column.BlockContainer?.BlockKey\" 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 </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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.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: i4$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i5$1.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: SectionBlockComponent, selector: "section-block", inputs: ["blockTemplate", "sectionKey", "sectionHeight", "isMainEditorState", "editable", "active", "blockContainer", "screenType"], outputs: ["dragExited", "dragEntered"] }, { kind: "component", type: PepHideInComponent, selector: "hide-in", inputs: ["hideIn"], outputs: ["hideInChange", "menuOpened", "menuClosed"] }, { kind: "component", type: i8.DraggableItemComponent, selector: "pep-draggable-item", inputs: ["title", "titlePrefix", "titleClassNames", "data", "disabled", "shadow", "styleType", "toggleContent", "isToggleContentOpen", "actionsMenu", "menuStyleType"], outputs: ["contentToggle", "actionsMenuItemClick"] }] });
1181
1180
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionComponent, decorators: [{
1182
1181
  type: Component,
1183
1182
  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 <div [id]=\"sectionColumnKeyPrefix + i\" \n *ngFor=\"let column of columns; let i=index;\"\n class=\"section-column {{screenSize <= pepScreenSizeToFlipToVertical ? '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]=\"screenSize <= pepScreenSizeToFlipToVertical ? 'horizontal' : 'vertical'\" \n [cdkDropListConnectedTo]=\"sectionsColumnsDropList\"\n (cdkDropListDropped)=\"onBlockDropped($event)\"\n [cdkDropListEnterPredicate]=\"canDropPredicate(i)\"\n >\n <section-block *ngIf=\"column.BlockContainer?.BlockKey\" 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 </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"] }]
1184
- }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: LayoutBuilderInternalService }, { type: i1$2.PepLayoutService }]; }, propDecorators: { sectionContainerRef: [{
1183
+ }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: LayoutBuilderInternalService }, { type: i2$1.PepLayoutService }]; }, propDecorators: { sectionContainerRef: [{
1185
1184
  type: ViewChild,
1186
1185
  args: ['sectionContainer']
1187
1186
  }], columnsElementRef: [{
@@ -1219,16 +1218,10 @@ SectionBlockModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versi
1219
1218
  SectionBlockModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: SectionBlockModule, declarations: [SectionBlockComponent], imports: [CommonModule,
1220
1219
  DragDropModule,
1221
1220
  PepButtonModule,
1222
- PepSkeletonLoaderModule,
1223
- PepRemoteLoaderModule,
1224
- // PepHideInModule,
1225
1221
  PepDraggableItemsModule], exports: [SectionBlockComponent] });
1226
1222
  SectionBlockModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionBlockModule, imports: [CommonModule,
1227
1223
  DragDropModule,
1228
1224
  PepButtonModule,
1229
- PepSkeletonLoaderModule,
1230
- PepRemoteLoaderModule,
1231
- // PepHideInModule,
1232
1225
  PepDraggableItemsModule] });
1233
1226
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionBlockModule, decorators: [{
1234
1227
  type: NgModule,
@@ -1240,11 +1233,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
1240
1233
  CommonModule,
1241
1234
  DragDropModule,
1242
1235
  PepButtonModule,
1243
- PepSkeletonLoaderModule,
1244
- PepRemoteLoaderModule,
1245
- // PepHideInModule,
1246
1236
  PepDraggableItemsModule,
1247
- // TranslateModule.forChild()
1248
1237
  ],
1249
1238
  exports: [SectionBlockComponent]
1250
1239
  }]
@@ -1256,17 +1245,16 @@ SectionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
1256
1245
  SectionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: SectionModule, declarations: [SectionComponent], imports: [CommonModule,
1257
1246
  DragDropModule,
1258
1247
  PepButtonModule,
1259
- PepRemoteLoaderModule,
1260
1248
  SectionBlockModule,
1261
1249
  PepHideInModule,
1262
- PepDraggableItemsModule], exports: [SectionComponent] });
1250
+ PepDraggableItemsModule, i1.TranslateModule], exports: [SectionComponent] });
1263
1251
  SectionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionModule, imports: [CommonModule,
1264
1252
  DragDropModule,
1265
1253
  PepButtonModule,
1266
- PepRemoteLoaderModule,
1267
1254
  SectionBlockModule,
1268
1255
  PepHideInModule,
1269
- PepDraggableItemsModule] });
1256
+ PepDraggableItemsModule,
1257
+ TranslateModule.forChild()] });
1270
1258
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionModule, decorators: [{
1271
1259
  type: NgModule,
1272
1260
  args: [{
@@ -1275,22 +1263,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
1275
1263
  CommonModule,
1276
1264
  DragDropModule,
1277
1265
  PepButtonModule,
1278
- PepRemoteLoaderModule,
1279
1266
  SectionBlockModule,
1280
1267
  PepHideInModule,
1281
1268
  PepDraggableItemsModule,
1282
- // TranslateModule.forChild()
1269
+ TranslateModule.forChild()
1283
1270
  ],
1284
1271
  exports: [SectionComponent]
1285
1272
  }]
1286
1273
  }] });
1287
1274
 
1288
1275
  class PepLayoutComponent extends BaseDestroyerDirective {
1289
- constructor(customizationService, layoutService, layoutBuilderService, hostElement, renderer) {
1276
+ constructor(
1277
+ // public customizationService: PepCustomizationService,
1278
+ layoutService, layoutBuilderInternalService, hostElement, renderer) {
1290
1279
  super();
1291
- this.customizationService = customizationService;
1292
1280
  this.layoutService = layoutService;
1293
- this.layoutBuilderService = layoutBuilderService;
1281
+ this.layoutBuilderInternalService = layoutBuilderInternalService;
1294
1282
  this.hostElement = hostElement;
1295
1283
  this.renderer = renderer;
1296
1284
  this.blockTemplate = undefined;
@@ -1306,14 +1294,14 @@ class PepLayoutComponent extends BaseDestroyerDirective {
1306
1294
  }
1307
1295
  set layoutView(value) {
1308
1296
  this._layoutView = value;
1309
- this.layoutBuilderService.loadLayoutBuilder(value);
1297
+ this.layoutBuilderInternalService.loadLayoutBuilder(value);
1310
1298
  }
1311
1299
  get layoutView() {
1312
1300
  return this._layoutView;
1313
1301
  }
1314
1302
  set showSkeleton(value) {
1315
1303
  this._showSkeleton = value;
1316
- this.layoutBuilderService.showSkeleton(value);
1304
+ this.layoutBuilderInternalService.showSkeleton(value);
1317
1305
  }
1318
1306
  get showSkeleton() {
1319
1307
  return this._showSkeleton;
@@ -1381,7 +1369,7 @@ class PepLayoutComponent extends BaseDestroyerDirective {
1381
1369
  }
1382
1370
  }
1383
1371
  setScreentType(screenSize) {
1384
- const screenType = this.layoutBuilderService.getScreenType(screenSize);
1372
+ const screenType = this.layoutBuilderInternalService.getScreenType(screenSize);
1385
1373
  this.selectedScreenType = screenType;
1386
1374
  this.screenTypeChange.emit(screenType);
1387
1375
  }
@@ -1389,15 +1377,15 @@ class PepLayoutComponent extends BaseDestroyerDirective {
1389
1377
  /***********************************************************************************************/
1390
1378
  /* Internal Events - for code usage
1391
1379
  /***********************************************************************************************/
1392
- if (this.layoutBuilderService.editMode) {
1393
- this.layoutBuilderService.previewModeChange$.pipe(this.getDestroyer()).subscribe((previewMode) => {
1380
+ if (this.layoutBuilderInternalService.editMode) {
1381
+ this.layoutBuilderInternalService.previewModeChange$.pipe(this.getDestroyer()).subscribe((previewMode) => {
1394
1382
  this.previewMode = previewMode;
1395
1383
  });
1396
1384
  }
1397
- this.layoutBuilderService.sectionsChange$.pipe(this.getDestroyer()).subscribe((sections) => {
1385
+ this.layoutBuilderInternalService.sectionsChange$.pipe(this.getDestroyer()).subscribe((sections) => {
1398
1386
  this._sectionsSubject.next(sections);
1399
1387
  });
1400
- this.layoutBuilderService.showSkeletonChange$.pipe(this.getDestroyer()).subscribe((showSkeleton) => {
1388
+ this.layoutBuilderInternalService.showSkeletonChange$.pipe(this.getDestroyer()).subscribe((showSkeleton) => {
1401
1389
  if (showSkeleton !== undefined) {
1402
1390
  this._showSkeleton = showSkeleton;
1403
1391
  this.animateSkeleton();
@@ -1406,13 +1394,13 @@ class PepLayoutComponent extends BaseDestroyerDirective {
1406
1394
  this.layoutService.onResize$.pipe(this.getDestroyer()).subscribe((size) => {
1407
1395
  this.setScreentType(size);
1408
1396
  });
1409
- this.layoutBuilderService.screenSizeChange$.pipe(this.getDestroyer()).subscribe((size) => {
1397
+ this.layoutBuilderInternalService.screenSizeChange$.pipe(this.getDestroyer()).subscribe((size) => {
1410
1398
  this.setScreentType(size);
1411
1399
  });
1412
1400
  /***********************************************************************************************/
1413
1401
  /* External Events - for raise to the client
1414
1402
  /***********************************************************************************************/
1415
- this.layoutBuilderService.layoutViewChange$.pipe(this.getDestroyer()).subscribe((layoutView) => {
1403
+ this.layoutBuilderInternalService.layoutViewChange$.pipe(this.getDestroyer()).subscribe((layoutView) => {
1416
1404
  this._layoutView = layoutView;
1417
1405
  this.setLayoutDataProperties();
1418
1406
  this.layoutViewChange.emit(this._layoutView);
@@ -1443,21 +1431,21 @@ class PepLayoutComponent extends BaseDestroyerDirective {
1443
1431
  return gridAutoRows;
1444
1432
  }
1445
1433
  onSectionDropped(event) {
1446
- this.layoutBuilderService.onSectionDropped(event);
1434
+ this.layoutBuilderInternalService.onSectionDropped(event);
1447
1435
  }
1448
1436
  onDragStart(event) {
1449
- this.layoutBuilderService.onSectionDragStart(event);
1437
+ this.layoutBuilderInternalService.onSectionDragStart(event);
1450
1438
  }
1451
1439
  onDragEnd(event) {
1452
- this.layoutBuilderService.onSectionDragEnd(event);
1440
+ this.layoutBuilderInternalService.onSectionDragEnd(event);
1453
1441
  }
1454
1442
  }
1455
- PepLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutComponent, deps: [{ token: i1$2.PepCustomizationService }, { token: i1$2.PepLayoutService }, { token: LayoutBuilderInternalService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
1443
+ PepLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutComponent, deps: [{ token: i2$1.PepLayoutService }, { token: LayoutBuilderInternalService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
1456
1444
  PepLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepLayoutComponent, selector: "pep-layout", inputs: { layoutView: "layoutView", blockTemplate: "blockTemplate", showSkeleton: "showSkeleton" }, outputs: { layoutViewChange: "layoutViewChange", screenTypeChange: "screenTypeChange" }, host: { properties: { "style.padding-inline": "this.paddingInline" } }, viewQueries: [{ propertyName: "skeletonContainer", first: true, predicate: ["skeletonCont"], descendants: true, static: true }, { propertyName: "sectionsContainer", first: true, predicate: ["sectionsCont"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<!-- For the top spacing -->\n<div class=\"top-spacing spacing-{{verticalSpacing}}\" ></div>\n<div #sectionsCont cdkDropListGroup class=\"sections-container gap-{{ sectionsGap }}\" [ngClass]=\"{'preview-state': previewMode }\" \n cdkDropList (cdkDropListDropped)=\"onSectionDropped($event)\" [ngStyle]=\"{'grid-auto-rows': getSectionsTemplateRows()}\"\n >\n <section *ngFor=\"let section of sections$ | async; let i=index;\" \n class=\"draggable-section \" [ngClass]=\"selectedScreenType === 'Phablet' ? 'margin-'+sectionsGap : ''\" [blockTemplate]=\"blockTemplate\"\n [key]=\"section.Key\" [name]=\"section.Name || ('LAYOUT_BUILDER.SECTION' | translate) + ' ' + (i+1)\" [split]=\"section.Split\" [height]=\"section.Height\"\n [columns]=\"section.Columns\" [collapseOnTablet]=\"section.CollapseOnTablet || false\" [hideIn]=\"section.Hide || []\" [columnsGap]=\"columnsGap\"\n >\n </section>\n</div>\n<div #skeletonCont class=\"skeleton-container \">\n <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"xl\" ></pep-skeleton-loader>\n <div class=\"split-skeleton-container\">\n <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"max\" ></pep-skeleton-loader>\n <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"max\" ></pep-skeleton-loader>\n </div>\n <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"xl\" ></pep-skeleton-loader>\n\n <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"max\" ></pep-skeleton-loader>\n</div>\n<!-- For the bottom spacing -->\n<div class=\"bottom-spacing spacing-{{verticalSpacing}}\"></div>\n<pep-size-detector></pep-size-detector>", styles: [":host{display:grid;grid-template-areas:\"top-spacing\" \"content\" \"bottom-spacing\";grid-template-rows:auto 1fr auto;height:100%}.top-spacing{grid-area:top-spacing}.top-spacing.spacing-none{height:0}.top-spacing.spacing-sm{height:var(--pep-spacing-sm, .5rem)}.top-spacing.spacing-md{height:var(--pep-spacing-lg, 1rem)}.top-spacing.spacing-lg{height:var(--pep-spacing-2xl, 2rem)}.bottom-spacing{grid-area:bottom-spacing}.bottom-spacing.spacing-none{height:0}.bottom-spacing.spacing-sm{height:var(--pep-spacing-sm, .5rem)}.bottom-spacing.spacing-md{height:var(--pep-spacing-lg, 1rem)}.bottom-spacing.spacing-lg{height:var(--pep-spacing-2xl, 2rem)}.skeleton-container{display:grid;grid-area:content;height:100%;gap:var(--pep-spacing-lg, 1rem);grid-template-rows:auto auto auto 1fr;opacity:0}.skeleton-container .split-skeleton-container{display:grid;height:10rem;gap:var(--pep-spacing-lg, 1rem);grid-auto-flow:column}.sections-container{z-index:11;grid-area:content;width:100%;max-width:inherit;overflow-x:unset;margin:0 auto;position:relative;display:grid;grid-row:1px;height:inherit;opacity:0}.sections-container.gap-none{gap:0}.sections-container.gap-sm{gap:var(--pep-spacing-sm, .5rem)}.sections-container.gap-md{gap:var(--pep-spacing-lg, 1rem)}.sections-container.gap-lg{gap:var(--pep-spacing-2xl, 2rem)}.sections-container .draggable-section{display:block}.sections-container.preview-state section{display:contents}@keyframes in{0%{opacity:0;transform:translateY(-80);filter:blur(20px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}.in{animation-name:in;animation-direction:normal;animation-duration:1.2s;animation-fill-mode:forwards}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4$2.PepSkeletonLoaderComponent, selector: "pep-skeleton-loader", inputs: ["rowHeightType", "rowsNumber", "lastRowOffset"] }, { kind: "component", type: i5$2.PepSizeDetectorComponent, selector: "pep-size-detector", inputs: ["showScreenSize", "useAsWebComponent"], outputs: ["sizeChange"] }, { kind: "directive", type: i4$1.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: i4$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "component", type: SectionComponent, selector: "section", inputs: ["blockTemplate", "key", "name", "split", "height", "collapseOnTablet", "columns", "hideIn", "columnsGap"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
1457
1445
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutComponent, decorators: [{
1458
1446
  type: Component,
1459
1447
  args: [{ selector: 'pep-layout', template: "<!-- For the top spacing -->\n<div class=\"top-spacing spacing-{{verticalSpacing}}\" ></div>\n<div #sectionsCont cdkDropListGroup class=\"sections-container gap-{{ sectionsGap }}\" [ngClass]=\"{'preview-state': previewMode }\" \n cdkDropList (cdkDropListDropped)=\"onSectionDropped($event)\" [ngStyle]=\"{'grid-auto-rows': getSectionsTemplateRows()}\"\n >\n <section *ngFor=\"let section of sections$ | async; let i=index;\" \n class=\"draggable-section \" [ngClass]=\"selectedScreenType === 'Phablet' ? 'margin-'+sectionsGap : ''\" [blockTemplate]=\"blockTemplate\"\n [key]=\"section.Key\" [name]=\"section.Name || ('LAYOUT_BUILDER.SECTION' | translate) + ' ' + (i+1)\" [split]=\"section.Split\" [height]=\"section.Height\"\n [columns]=\"section.Columns\" [collapseOnTablet]=\"section.CollapseOnTablet || false\" [hideIn]=\"section.Hide || []\" [columnsGap]=\"columnsGap\"\n >\n </section>\n</div>\n<div #skeletonCont class=\"skeleton-container \">\n <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"xl\" ></pep-skeleton-loader>\n <div class=\"split-skeleton-container\">\n <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"max\" ></pep-skeleton-loader>\n <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"max\" ></pep-skeleton-loader>\n </div>\n <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"xl\" ></pep-skeleton-loader>\n\n <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"max\" ></pep-skeleton-loader>\n</div>\n<!-- For the bottom spacing -->\n<div class=\"bottom-spacing spacing-{{verticalSpacing}}\"></div>\n<pep-size-detector></pep-size-detector>", styles: [":host{display:grid;grid-template-areas:\"top-spacing\" \"content\" \"bottom-spacing\";grid-template-rows:auto 1fr auto;height:100%}.top-spacing{grid-area:top-spacing}.top-spacing.spacing-none{height:0}.top-spacing.spacing-sm{height:var(--pep-spacing-sm, .5rem)}.top-spacing.spacing-md{height:var(--pep-spacing-lg, 1rem)}.top-spacing.spacing-lg{height:var(--pep-spacing-2xl, 2rem)}.bottom-spacing{grid-area:bottom-spacing}.bottom-spacing.spacing-none{height:0}.bottom-spacing.spacing-sm{height:var(--pep-spacing-sm, .5rem)}.bottom-spacing.spacing-md{height:var(--pep-spacing-lg, 1rem)}.bottom-spacing.spacing-lg{height:var(--pep-spacing-2xl, 2rem)}.skeleton-container{display:grid;grid-area:content;height:100%;gap:var(--pep-spacing-lg, 1rem);grid-template-rows:auto auto auto 1fr;opacity:0}.skeleton-container .split-skeleton-container{display:grid;height:10rem;gap:var(--pep-spacing-lg, 1rem);grid-auto-flow:column}.sections-container{z-index:11;grid-area:content;width:100%;max-width:inherit;overflow-x:unset;margin:0 auto;position:relative;display:grid;grid-row:1px;height:inherit;opacity:0}.sections-container.gap-none{gap:0}.sections-container.gap-sm{gap:var(--pep-spacing-sm, .5rem)}.sections-container.gap-md{gap:var(--pep-spacing-lg, 1rem)}.sections-container.gap-lg{gap:var(--pep-spacing-2xl, 2rem)}.sections-container .draggable-section{display:block}.sections-container.preview-state section{display:contents}@keyframes in{0%{opacity:0;transform:translateY(-80);filter:blur(20px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}.in{animation-name:in;animation-direction:normal;animation-duration:1.2s;animation-fill-mode:forwards}\n"] }]
1460
- }], ctorParameters: function () { return [{ type: i1$2.PepCustomizationService }, { type: i1$2.PepLayoutService }, { type: LayoutBuilderInternalService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { skeletonContainer: [{
1448
+ }], ctorParameters: function () { return [{ type: i2$1.PepLayoutService }, { type: LayoutBuilderInternalService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { skeletonContainer: [{
1461
1449
  type: ViewChild,
1462
1450
  args: ['skeletonCont', { static: true }]
1463
1451
  }], sectionsContainer: [{
@@ -1485,7 +1473,6 @@ PepLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
1485
1473
  HttpClientModule,
1486
1474
  PepNgxLibModule,
1487
1475
  PepSkeletonLoaderModule,
1488
- PepRemoteLoaderModule,
1489
1476
  PepSizeDetectorModule,
1490
1477
  PepDialogModule,
1491
1478
  DragDropModule,
@@ -1494,7 +1481,6 @@ PepLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
1494
1481
  HttpClientModule,
1495
1482
  PepNgxLibModule,
1496
1483
  PepSkeletonLoaderModule,
1497
- PepRemoteLoaderModule,
1498
1484
  PepSizeDetectorModule,
1499
1485
  PepDialogModule,
1500
1486
  DragDropModule,
@@ -1511,7 +1497,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
1511
1497
  HttpClientModule,
1512
1498
  PepNgxLibModule,
1513
1499
  PepSkeletonLoaderModule,
1514
- PepRemoteLoaderModule,
1515
1500
  PepSizeDetectorModule,
1516
1501
  PepDialogModule,
1517
1502
  DragDropModule,
@@ -1522,6 +1507,218 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
1522
1507
  }]
1523
1508
  }] });
1524
1509
 
1510
+ class PepLayoutEditorComponent extends BaseDestroyerDirective {
1511
+ // onLoadFlowHostObject;
1512
+ // onChangeFlowHostObject;
1513
+ constructor(
1514
+ // public customizationService: PepCustomizationService,
1515
+ layoutBuilderInternalService, hostElement, renderer) {
1516
+ super();
1517
+ this.layoutBuilderInternalService = layoutBuilderInternalService;
1518
+ this.hostElement = hostElement;
1519
+ this.renderer = renderer;
1520
+ // @ViewChild('parametersDialogTemplate', { static: true, read: TemplateRef }) parametersDialogTemplate!: TemplateRef<any>;
1521
+ this.availableBlocksForDrag = [];
1522
+ this.hostObjectChange = new EventEmitter();
1523
+ this.horizontalSpacing = 'md';
1524
+ this.verticalSpacing = 'md';
1525
+ this.sectionsGap = 'md';
1526
+ this.columnsGap = 'md';
1527
+ this.roundedCorners = 'none';
1528
+ // protected sizesGroupButtons = Array<ISpacingOption>();
1529
+ this.availableBlocksContainerId = LayoutBuilderInternalService.AVAILABLE_BLOCKS_CONTAINER_ID;
1530
+ this.sectionsColumnsDropList = [];
1531
+ this.showTopContent = false;
1532
+ this.showBottomContent = false;
1533
+ this.renderer.addClass(this.hostElement.nativeElement, 'pep-layout-editor');
1534
+ }
1535
+ set hostObject(value) {
1536
+ this._hostObject = value;
1537
+ // this.onLoadFlow = value.onLoadFlow;
1538
+ // this.onChangeFlow = value.onChangeFlow;
1539
+ this.isFullWidth = !value.maxWidth || value.maxWidth === 0;
1540
+ this.maxWidth = value.maxWidth;
1541
+ this.horizontalSpacing = this._hostObject.horizontalSpacing || 'md';
1542
+ this.verticalSpacing = this._hostObject.verticalSpacing || 'md';
1543
+ this.sectionsGap = this._hostObject.sectionsGap || 'md';
1544
+ this.columnsGap = this._hostObject.columnsGap || 'md';
1545
+ this.roundedCorners = this._hostObject.roundedCorners || 'none';
1546
+ // this.prepareFlowHostObject('load');
1547
+ // this.prepareFlowHostObject('change');
1548
+ }
1549
+ get hostObject() {
1550
+ return this._hostObject;
1551
+ }
1552
+ // private prepareFlowHostObject(pageFlowType: 'load' | 'change') {
1553
+ // const fields = {};
1554
+ // if (pageFlowType === 'load') {
1555
+ // this.onLoadFlowHostObject = {};
1556
+ // this.onLoadFlowHostObject['runFlowData'] = this.onLoadFlow;
1557
+ // this.onLoadFlowHostObject['fields'] = fields;
1558
+ // } else if (pageFlowType === 'change') {
1559
+ // this.onChangeFlowHostObject = {};
1560
+ // this.onChangeFlowHostObject['runFlowData'] = this.onChangeFlow;
1561
+ // this.onChangeFlowHostObject['fields'] = fields;
1562
+ // }
1563
+ // }
1564
+ updateHostObject() {
1565
+ // this._hostObject.onLoadFlow = this.onLoadFlow;
1566
+ // this._hostObject.onChangeFlow = this.onChangeFlow;
1567
+ this._hostObject.maxWidth = this.isFullWidth ? 0 : this.maxWidth;
1568
+ this._hostObject.horizontalSpacing = this.horizontalSpacing;
1569
+ this._hostObject.verticalSpacing = this.verticalSpacing;
1570
+ this._hostObject.sectionsGap = this.sectionsGap;
1571
+ this._hostObject.columnsGap = this.columnsGap;
1572
+ this._hostObject.roundedCorners = this.roundedCorners === 'none' ? undefined : this.roundedCorners;
1573
+ // this.prepareFlowHostObject('load');
1574
+ // this.prepareFlowHostObject('change');
1575
+ this.hostObjectChange.emit(this.hostObject);
1576
+ }
1577
+ ngOnInit() {
1578
+ this.layoutBuilderInternalService.sectionsColumnsDropListChange$.subscribe((sectionsColumnsDropList) => {
1579
+ this.sectionsColumnsDropList = sectionsColumnsDropList;
1580
+ });
1581
+ }
1582
+ ngAfterViewInit() {
1583
+ if (this._topContentRef.nativeElement.children.length > 0) {
1584
+ this.showTopContent = true;
1585
+ }
1586
+ if (this._bottomContentRef.nativeElement.children.length > 0) {
1587
+ this.showBottomContent = true;
1588
+ }
1589
+ }
1590
+ onAddSectionClick(event) {
1591
+ this.layoutBuilderInternalService.addSection();
1592
+ }
1593
+ isFullWidthChange(isChecked) {
1594
+ this.isFullWidth = isChecked;
1595
+ this.maxWidth = isChecked ? 0 : 960;
1596
+ this.updateHostObject();
1597
+ }
1598
+ onMaxWidthChange(maxWidth) {
1599
+ this.maxWidth = coerceNumberProperty(maxWidth, this.maxWidth);
1600
+ this.updateHostObject();
1601
+ }
1602
+ setColumnsHorizntalGap(key) {
1603
+ this.horizontalSpacing = key;
1604
+ this.updateHostObject();
1605
+ }
1606
+ setColumnsVerticalGap(key) {
1607
+ this.verticalSpacing = key;
1608
+ this.updateHostObject();
1609
+ }
1610
+ setSectionGap(key) {
1611
+ this.sectionsGap = key;
1612
+ this.updateHostObject();
1613
+ }
1614
+ setColumnsGap(key) {
1615
+ this.columnsGap = key;
1616
+ this.updateHostObject();
1617
+ }
1618
+ setRoundedCorners(key) {
1619
+ this.roundedCorners = key;
1620
+ this.updateHostObject();
1621
+ }
1622
+ onDragStart(event) {
1623
+ this.layoutBuilderInternalService.onBlockDragStart(event);
1624
+ }
1625
+ onDragEnd(event) {
1626
+ this.layoutBuilderInternalService.onBlockDragEnd(event);
1627
+ }
1628
+ }
1629
+ PepLayoutEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutEditorComponent, deps: [{ token: LayoutBuilderInternalService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
1630
+ PepLayoutEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepLayoutEditorComponent, selector: "pep-layout-editor", inputs: { availableBlocksForDrag: "availableBlocksForDrag", hostObject: "hostObject" }, outputs: { hostObjectChange: "hostObjectChange" }, viewQueries: [{ propertyName: "_topContentRef", first: true, predicate: ["topContentRef"], descendants: true, static: true }, { propertyName: "_bottomContentRef", first: true, predicate: ["bottomContentRef"], descendants: true, static: true }, { propertyName: "availableBlocksContainer", first: true, predicate: ["availableBlocksContainer"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<mat-tab-group #tabGroup class=\"layout-builder-editor-tabs\" animationDuration=\"0ms\">\n <mat-tab label=\"{{'LAYOUT_BUILDER.GENERAL' | translate}}\">\n <div class=\"layout-builder-editor-tab\">\n <div #topContentRef class=\"layout-builder-editor-group\">\n <ng-content select=\"[layout-editor-top-content]\"></ng-content>\n <div *ngIf=\"showTopContent\" class=\"editor-separator\"></div>\n </div>\n <div>\n <label class=\"editor-title\">{{'LAYOUT_BUILDER.SECTIONS_TITLE' | translate}}</label>\n <pep-button class=\"add-section-button\" value=\"{{'LAYOUT_BUILDER.ADD_SECTION' | translate}}\" styleType=\"regular\" iconName=\"number_plus\" iconPosition=\"end\"\n (buttonClick)=\"onAddSectionClick($event)\"></pep-button>\n </div>\n <div class=\"editor-separator\"></div>\n <pep-draggable-items class=\"available-blocks\" [containerId]=\"availableBlocksContainerId\" [items]=\"availableBlocksForDrag\" [title]=\"'LAYOUT_BUILDER.BLOCKS_TITLE' | translate\"\n titleSizeType=\"xl\" titleType=\"with-bottom-border\" [showSearch]=\"true\" [dropAreaIds]=\"sectionsColumnsDropList\" (itemDragStarted)=\"onDragStart($event)\" (itemDragEnded)=\"onDragEnd($event)\">\n </pep-draggable-items>\n <div #bottomContentRef class=\"layout-builder-editor-group\">\n <div *ngIf=\"showBottomContent\" class=\"editor-separator\"></div>\n <ng-content select=\"[layout-editor-bottom-content]\"></ng-content>\n </div>\n </div>\n </mat-tab>\n <mat-tab label=\"{{'LAYOUT_BUILDER.DESIGN' | translate}}\">\n <div class=\"layout-builder-editor-tab\">\n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"isFullWidth\" [label]=\"'LAYOUT_BUILDER.FULL_WIDTH_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"isFullWidthChange($event)\"></pep-checkbox>\n <pep-textbox [label]=\"'LAYOUT_BUILDER.MAX_WIDTH_TITLE' | translate\" type=\"int\" [disabled]=\"isFullWidth\" [value]=\"maxWidth.toString()\" (valueChange)=\"onMaxWidthChange($event)\"></pep-textbox>\n </div>\n <div class=\"editor-separator\"></div>\n <!-- Spacing -->\n <pep-group-buttons-settings [groupType]=\"'sizes'\" \n [header]=\"'LAYOUT_BUILDER.SPACING_TITLE' | translate\" [subHeader]=\"'LAYOUT_BUILDER.SPACING_HORIZONTAL_TITLE' | translate\"\n [btnKey]=\"horizontalSpacing.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n (btnkeyChange)=\"setColumnsHorizntalGap($event)\">\n </pep-group-buttons-settings>\n <pep-group-buttons-settings [groupType]=\"'sizes'\" \n [subHeader]=\"'LAYOUT_BUILDER.SPACING_VERTICAL_TITLE' | translate\"\n [btnKey]=\"verticalSpacing.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n (btnkeyChange)=\"setColumnsVerticalGap($event)\">\n </pep-group-buttons-settings>\n <div class=\"editor-separator\"></div>\n <!-- Gaps -->\n <pep-group-buttons-settings [groupType]=\"'sizes'\" \n [header]=\"'LAYOUT_BUILDER.GAPS_TITLE' | translate\" [subHeader]=\"'LAYOUT_BUILDER.SECTIONS_GAP_TITLE' | translate\"\n [btnKey]=\"sectionsGap.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n (btnkeyChange)=\"setSectionGap($event)\">\n </pep-group-buttons-settings>\n <pep-group-buttons-settings [groupType]=\"'sizes'\" \n [subHeader]=\"'LAYOUT_BUILDER.COLUMNS_GAP_TITLE' | translate\"\n [btnKey]=\"columnsGap.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n (btnkeyChange)=\"setColumnsGap($event)\">\n </pep-group-buttons-settings>\n <!-- Rounded Corners -->\n <!--\n <div class=\"editor-separator\"></div>\n <label class=\"editor-title\">{{'LAYOUT_BUILDER.ROUNDED_CORNERS_TITLE' | translate}}</label><br>\n <label class=\"body-xs ellipsis\">{{'LAYOUT_BUILDER.BORDER_RADIUS_TITLE' | translate}}</label>\n <pep-group-buttons [buttons]=\"sizesGroupButtons\" [selectedButtonKey]=\"roundedCorners\" buttonsClass=\"ms regular\" viewType=\"toggle\"\n (buttonClick)=\"setRoundedCorners($event)\"></pep-group-buttons> -->\n </div>\n </mat-tab>\n</mat-tab-group>\n\n\n\n", styles: [":host pep-draggable-items ::ng-deep .draggable-items-overflow{padding-bottom:0!important}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i3$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i4$3.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey", "regex", "regexError", "isInFocus"], outputs: ["valueChange", "keyup"] }, { kind: "component", type: i5$1.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i6.PepCheckboxComponent, selector: "pep-checkbox", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "additionalValue", "form", "isActive", "showTitle", "renderTitle", "layoutType", "visible"], outputs: ["valueChange"] }, { kind: "component", type: i7.GroupButtonsSettingsComponent, selector: "pep-group-buttons-settings", inputs: ["header", "subHeader", "groupType", "btnsArray", "excludeKeys", "useNone", "disabled", "dir", "titleSize", "bold", "btnKey"], outputs: ["btnkeyChange"] }, { kind: "component", type: i8.PepDraggableItemsComponent, selector: "pep-draggable-items", inputs: ["containerId", "showSearch", "title", "titleType", "titleSizeType", "itemPlaceholderType", "dropAreaIds", "items"], outputs: ["itemDragStarted", "itemDragEnded"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
1631
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutEditorComponent, decorators: [{
1632
+ type: Component,
1633
+ args: [{ selector: 'pep-layout-editor', template: "<mat-tab-group #tabGroup class=\"layout-builder-editor-tabs\" animationDuration=\"0ms\">\n <mat-tab label=\"{{'LAYOUT_BUILDER.GENERAL' | translate}}\">\n <div class=\"layout-builder-editor-tab\">\n <div #topContentRef class=\"layout-builder-editor-group\">\n <ng-content select=\"[layout-editor-top-content]\"></ng-content>\n <div *ngIf=\"showTopContent\" class=\"editor-separator\"></div>\n </div>\n <div>\n <label class=\"editor-title\">{{'LAYOUT_BUILDER.SECTIONS_TITLE' | translate}}</label>\n <pep-button class=\"add-section-button\" value=\"{{'LAYOUT_BUILDER.ADD_SECTION' | translate}}\" styleType=\"regular\" iconName=\"number_plus\" iconPosition=\"end\"\n (buttonClick)=\"onAddSectionClick($event)\"></pep-button>\n </div>\n <div class=\"editor-separator\"></div>\n <pep-draggable-items class=\"available-blocks\" [containerId]=\"availableBlocksContainerId\" [items]=\"availableBlocksForDrag\" [title]=\"'LAYOUT_BUILDER.BLOCKS_TITLE' | translate\"\n titleSizeType=\"xl\" titleType=\"with-bottom-border\" [showSearch]=\"true\" [dropAreaIds]=\"sectionsColumnsDropList\" (itemDragStarted)=\"onDragStart($event)\" (itemDragEnded)=\"onDragEnd($event)\">\n </pep-draggable-items>\n <div #bottomContentRef class=\"layout-builder-editor-group\">\n <div *ngIf=\"showBottomContent\" class=\"editor-separator\"></div>\n <ng-content select=\"[layout-editor-bottom-content]\"></ng-content>\n </div>\n </div>\n </mat-tab>\n <mat-tab label=\"{{'LAYOUT_BUILDER.DESIGN' | translate}}\">\n <div class=\"layout-builder-editor-tab\">\n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"isFullWidth\" [label]=\"'LAYOUT_BUILDER.FULL_WIDTH_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"isFullWidthChange($event)\"></pep-checkbox>\n <pep-textbox [label]=\"'LAYOUT_BUILDER.MAX_WIDTH_TITLE' | translate\" type=\"int\" [disabled]=\"isFullWidth\" [value]=\"maxWidth.toString()\" (valueChange)=\"onMaxWidthChange($event)\"></pep-textbox>\n </div>\n <div class=\"editor-separator\"></div>\n <!-- Spacing -->\n <pep-group-buttons-settings [groupType]=\"'sizes'\" \n [header]=\"'LAYOUT_BUILDER.SPACING_TITLE' | translate\" [subHeader]=\"'LAYOUT_BUILDER.SPACING_HORIZONTAL_TITLE' | translate\"\n [btnKey]=\"horizontalSpacing.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n (btnkeyChange)=\"setColumnsHorizntalGap($event)\">\n </pep-group-buttons-settings>\n <pep-group-buttons-settings [groupType]=\"'sizes'\" \n [subHeader]=\"'LAYOUT_BUILDER.SPACING_VERTICAL_TITLE' | translate\"\n [btnKey]=\"verticalSpacing.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n (btnkeyChange)=\"setColumnsVerticalGap($event)\">\n </pep-group-buttons-settings>\n <div class=\"editor-separator\"></div>\n <!-- Gaps -->\n <pep-group-buttons-settings [groupType]=\"'sizes'\" \n [header]=\"'LAYOUT_BUILDER.GAPS_TITLE' | translate\" [subHeader]=\"'LAYOUT_BUILDER.SECTIONS_GAP_TITLE' | translate\"\n [btnKey]=\"sectionsGap.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n (btnkeyChange)=\"setSectionGap($event)\">\n </pep-group-buttons-settings>\n <pep-group-buttons-settings [groupType]=\"'sizes'\" \n [subHeader]=\"'LAYOUT_BUILDER.COLUMNS_GAP_TITLE' | translate\"\n [btnKey]=\"columnsGap.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n (btnkeyChange)=\"setColumnsGap($event)\">\n </pep-group-buttons-settings>\n <!-- Rounded Corners -->\n <!--\n <div class=\"editor-separator\"></div>\n <label class=\"editor-title\">{{'LAYOUT_BUILDER.ROUNDED_CORNERS_TITLE' | translate}}</label><br>\n <label class=\"body-xs ellipsis\">{{'LAYOUT_BUILDER.BORDER_RADIUS_TITLE' | translate}}</label>\n <pep-group-buttons [buttons]=\"sizesGroupButtons\" [selectedButtonKey]=\"roundedCorners\" buttonsClass=\"ms regular\" viewType=\"toggle\"\n (buttonClick)=\"setRoundedCorners($event)\"></pep-group-buttons> -->\n </div>\n </mat-tab>\n</mat-tab-group>\n\n\n\n", styles: [":host pep-draggable-items ::ng-deep .draggable-items-overflow{padding-bottom:0!important}\n"] }]
1634
+ }], ctorParameters: function () { return [{ type: LayoutBuilderInternalService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { _topContentRef: [{
1635
+ type: ViewChild,
1636
+ args: ['topContentRef', { static: true }]
1637
+ }], _bottomContentRef: [{
1638
+ type: ViewChild,
1639
+ args: ['bottomContentRef', { static: true }]
1640
+ }], availableBlocksContainer: [{
1641
+ type: ViewChild,
1642
+ args: ['availableBlocksContainer', { read: ElementRef }]
1643
+ }], availableBlocksForDrag: [{
1644
+ type: Input
1645
+ }], hostObject: [{
1646
+ type: Input
1647
+ }], hostObjectChange: [{
1648
+ type: Output
1649
+ }] } });
1650
+
1651
+ class PepLayoutEditorModule {
1652
+ constructor() {
1653
+ // this.pepIconRegistry.registerIcons(pepIcons);
1654
+ }
1655
+ }
1656
+ PepLayoutEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1657
+ PepLayoutEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutEditorModule, declarations: [PepLayoutEditorComponent], imports: [CommonModule,
1658
+ HttpClientModule,
1659
+ DragDropModule,
1660
+ OverlayModule,
1661
+ MatTabsModule,
1662
+ MatSliderModule,
1663
+ PepNgxLibModule,
1664
+ PepSelectModule,
1665
+ PepTextboxModule,
1666
+ PepButtonModule,
1667
+ PepCheckboxModule,
1668
+ PepGroupButtonsModule,
1669
+ PepColorModule,
1670
+ PepImageModule,
1671
+ PepGroupButtonsSettingsModule,
1672
+ PepDraggableItemsModule,
1673
+ PepDialogModule, i1.TranslateModule], exports: [PepLayoutEditorComponent] });
1674
+ PepLayoutEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutEditorModule, imports: [CommonModule,
1675
+ HttpClientModule,
1676
+ DragDropModule,
1677
+ OverlayModule,
1678
+ MatTabsModule,
1679
+ MatSliderModule,
1680
+ PepNgxLibModule,
1681
+ PepSelectModule,
1682
+ PepTextboxModule,
1683
+ PepButtonModule,
1684
+ PepCheckboxModule,
1685
+ PepGroupButtonsModule,
1686
+ PepColorModule,
1687
+ PepImageModule,
1688
+ PepGroupButtonsSettingsModule,
1689
+ PepDraggableItemsModule,
1690
+ PepDialogModule,
1691
+ TranslateModule.forChild()] });
1692
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutEditorModule, decorators: [{
1693
+ type: NgModule,
1694
+ args: [{
1695
+ declarations: [
1696
+ PepLayoutEditorComponent
1697
+ ],
1698
+ imports: [
1699
+ CommonModule,
1700
+ HttpClientModule,
1701
+ DragDropModule,
1702
+ OverlayModule,
1703
+ MatTabsModule,
1704
+ MatSliderModule,
1705
+ PepNgxLibModule,
1706
+ PepSelectModule,
1707
+ PepTextboxModule,
1708
+ PepButtonModule,
1709
+ PepCheckboxModule,
1710
+ PepGroupButtonsModule,
1711
+ PepColorModule,
1712
+ PepImageModule,
1713
+ PepGroupButtonsSettingsModule,
1714
+ PepDraggableItemsModule,
1715
+ PepDialogModule,
1716
+ TranslateModule.forChild()
1717
+ ],
1718
+ exports: [PepLayoutEditorComponent]
1719
+ }]
1720
+ }], ctorParameters: function () { return []; } });
1721
+
1525
1722
  class SectionEditorComponent {
1526
1723
  constructor(translate, dialog) {
1527
1724
  this.translate = translate;
@@ -1695,7 +1892,7 @@ class SectionEditorComponent {
1695
1892
  }
1696
1893
  }
1697
1894
  SectionEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionEditorComponent, deps: [{ token: i1.TranslateService }, { token: i2.PepDialogService }], target: i0.ɵɵFactoryTarget.Component });
1698
- SectionEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: SectionEditorComponent, selector: "section-editor", inputs: { hostObject: "hostObject" }, outputs: { hostObjectChange: "hostObjectChange" }, ngImport: i0, template: "<div class=\"section-editor-container layout-builder-editor-container\">\n <div>\n <pep-textbox [value]=\"sectionName\" [label]=\"'LAYOUT_BUILDER.SECTION_NAME_TITLE' | translate\" (valueChange)=\"onSectionNameChange($event)\"></pep-textbox>\n </div>\n\n <!-- \n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"isAutoHeight\" [label]=\"'LAYOUT_BUILDER.AUTO_HEIGHT_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"isAutoHeightChange($event)\"></pep-checkbox>\n <pep-textbox [label]=\"'LAYOUT_BUILDER.HEIGHT_TITLE' | translate\" type=\"int\" [minValue]=\"MIN_HEIGHT\" [disabled]=\"isAutoHeight\" [value]=\"height\" (valueChange)=\"onHeightChange($event)\"></pep-textbox> \n </div>\n -->\n <div class=\"editor-separator\"></div>\n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"subSections\" [label]=\"'LAYOUT_BUILDER.SUB_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onSubSectionsChange($event)\"></pep-checkbox>\n <div class=\"split-area\">\n <pep-select [label]=\"'LAYOUT_BUILDER.SECTIONS_TITLE' | translate\" [value]=\"partsNumber\" [options]=\"partsNumberOptions\" \n (valueChange)=\"onPartsNumberChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n <pep-select [label]=\"'LAYOUT_BUILDER.SPLIT_TITLE' | translate\" [value]=\"split || ''\" [options]=\"splitOptions\"\n (valueChange)=\"onSplitChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n </div>\n </div>\n <div class=\"editor-separator\"></div>\n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"collapseOnTablet\" [label]=\"'LAYOUT_BUILDER.COLLAPSE_ON_TABLET_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onCollapseOnTabletChange($event)\"></pep-checkbox>\n <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.COLLAPSE_ON_TABLET_DESCRIPTION' | translate)}}</span>\n </div>\n <div class=\"editor-separator\"></div>\n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"fillHeight\" [label]=\"'LAYOUT_BUILDER.FILL_HEIGHT_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onFillHeightChange($event)\"></pep-checkbox>\n <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.FILL_HEIGHT_SECTION_DESCRIPTION' | translate)}}</span>\n </div>\n</div>\n", styles: [".section-editor-container .split-area{display:grid;grid-template-columns:1fr 1fr;gap:var(--pep-spacing-lg, 1rem)}\n"], dependencies: [{ kind: "component", type: i3$2.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey", "regex", "regexError", "isInFocus"], outputs: ["valueChange", "keyup"] }, { kind: "component", type: i4$3.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "placeholder", "placeholderWhenDisabled", "options", "visible", "emptyOption", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "renderTitle", "typeaheadDebounceInterval", "addValueToOptionsIfNotExist"], outputs: ["valueChange"] }, { kind: "component", type: i5$3.PepCheckboxComponent, selector: "pep-checkbox", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "additionalValue", "form", "isActive", "showTitle", "renderTitle", "layoutType", "visible"], outputs: ["valueChange"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
1895
+ SectionEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: SectionEditorComponent, selector: "section-editor", inputs: { hostObject: "hostObject" }, outputs: { hostObjectChange: "hostObjectChange" }, ngImport: i0, template: "<div class=\"section-editor-container layout-builder-editor-container\">\n <div>\n <pep-textbox [value]=\"sectionName\" [label]=\"'LAYOUT_BUILDER.SECTION_NAME_TITLE' | translate\" (valueChange)=\"onSectionNameChange($event)\"></pep-textbox>\n </div>\n\n <!-- \n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"isAutoHeight\" [label]=\"'LAYOUT_BUILDER.AUTO_HEIGHT_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"isAutoHeightChange($event)\"></pep-checkbox>\n <pep-textbox [label]=\"'LAYOUT_BUILDER.HEIGHT_TITLE' | translate\" type=\"int\" [minValue]=\"MIN_HEIGHT\" [disabled]=\"isAutoHeight\" [value]=\"height\" (valueChange)=\"onHeightChange($event)\"></pep-textbox> \n </div>\n -->\n <div class=\"editor-separator\"></div>\n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"subSections\" [label]=\"'LAYOUT_BUILDER.SUB_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onSubSectionsChange($event)\"></pep-checkbox>\n <div class=\"split-area\">\n <pep-select [label]=\"'LAYOUT_BUILDER.SECTIONS_TITLE' | translate\" [value]=\"partsNumber\" [options]=\"partsNumberOptions\" \n (valueChange)=\"onPartsNumberChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n <pep-select [label]=\"'LAYOUT_BUILDER.SPLIT_TITLE' | translate\" [value]=\"split || ''\" [options]=\"splitOptions\"\n (valueChange)=\"onSplitChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n </div>\n </div>\n <div class=\"editor-separator\"></div>\n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"collapseOnTablet\" [label]=\"'LAYOUT_BUILDER.COLLAPSE_ON_TABLET_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onCollapseOnTabletChange($event)\"></pep-checkbox>\n <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.COLLAPSE_ON_TABLET_DESCRIPTION' | translate)}}</span>\n </div>\n <div class=\"editor-separator\"></div>\n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"fillHeight\" [label]=\"'LAYOUT_BUILDER.FILL_HEIGHT_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onFillHeightChange($event)\"></pep-checkbox>\n <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.FILL_HEIGHT_SECTION_DESCRIPTION' | translate)}}</span>\n </div>\n</div>\n", styles: [".section-editor-container .split-area{display:grid;grid-template-columns:1fr 1fr;gap:var(--pep-spacing-lg, 1rem)}\n"], dependencies: [{ kind: "component", type: i4$3.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey", "regex", "regexError", "isInFocus"], outputs: ["valueChange", "keyup"] }, { kind: "component", type: i4$4.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "placeholder", "placeholderWhenDisabled", "options", "visible", "emptyOption", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "renderTitle", "typeaheadDebounceInterval", "addValueToOptionsIfNotExist"], outputs: ["valueChange"] }, { kind: "component", type: i6.PepCheckboxComponent, selector: "pep-checkbox", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "additionalValue", "form", "isActive", "showTitle", "renderTitle", "layoutType", "visible"], outputs: ["valueChange"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
1699
1896
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionEditorComponent, decorators: [{
1700
1897
  type: Component,
1701
1898
  args: [{ selector: 'section-editor', template: "<div class=\"section-editor-container layout-builder-editor-container\">\n <div>\n <pep-textbox [value]=\"sectionName\" [label]=\"'LAYOUT_BUILDER.SECTION_NAME_TITLE' | translate\" (valueChange)=\"onSectionNameChange($event)\"></pep-textbox>\n </div>\n\n <!-- \n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"isAutoHeight\" [label]=\"'LAYOUT_BUILDER.AUTO_HEIGHT_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"isAutoHeightChange($event)\"></pep-checkbox>\n <pep-textbox [label]=\"'LAYOUT_BUILDER.HEIGHT_TITLE' | translate\" type=\"int\" [minValue]=\"MIN_HEIGHT\" [disabled]=\"isAutoHeight\" [value]=\"height\" (valueChange)=\"onHeightChange($event)\"></pep-textbox> \n </div>\n -->\n <div class=\"editor-separator\"></div>\n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"subSections\" [label]=\"'LAYOUT_BUILDER.SUB_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onSubSectionsChange($event)\"></pep-checkbox>\n <div class=\"split-area\">\n <pep-select [label]=\"'LAYOUT_BUILDER.SECTIONS_TITLE' | translate\" [value]=\"partsNumber\" [options]=\"partsNumberOptions\" \n (valueChange)=\"onPartsNumberChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n <pep-select [label]=\"'LAYOUT_BUILDER.SPLIT_TITLE' | translate\" [value]=\"split || ''\" [options]=\"splitOptions\"\n (valueChange)=\"onSplitChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n </div>\n </div>\n <div class=\"editor-separator\"></div>\n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"collapseOnTablet\" [label]=\"'LAYOUT_BUILDER.COLLAPSE_ON_TABLET_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onCollapseOnTabletChange($event)\"></pep-checkbox>\n <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.COLLAPSE_ON_TABLET_DESCRIPTION' | translate)}}</span>\n </div>\n <div class=\"editor-separator\"></div>\n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"fillHeight\" [label]=\"'LAYOUT_BUILDER.FILL_HEIGHT_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onFillHeightChange($event)\"></pep-checkbox>\n <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.FILL_HEIGHT_SECTION_DESCRIPTION' | translate)}}</span>\n </div>\n</div>\n", styles: [".section-editor-container .split-area{display:grid;grid-template-columns:1fr 1fr;gap:var(--pep-spacing-lg, 1rem)}\n"] }]
@@ -1735,237 +1932,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
1735
1932
  }]
1736
1933
  }] });
1737
1934
 
1738
- class PepLayoutEditorComponent extends BaseDestroyerDirective {
1739
- // onLoadFlowHostObject;
1740
- // onChangeFlowHostObject;
1741
- constructor(customizationService, layoutBuilderService, hostElement, renderer) {
1742
- super();
1743
- this.customizationService = customizationService;
1744
- this.layoutBuilderService = layoutBuilderService;
1745
- this.hostElement = hostElement;
1746
- this.renderer = renderer;
1747
- // @ViewChild('parametersDialogTemplate', { static: true, read: TemplateRef }) parametersDialogTemplate!: TemplateRef<any>;
1748
- this.availableBlocksForDrag = [];
1749
- this.hostObjectChange = new EventEmitter();
1750
- this.horizontalSpacing = 'md';
1751
- this.verticalSpacing = 'md';
1752
- this.sectionsGap = 'md';
1753
- this.columnsGap = 'md';
1754
- this.roundedCorners = 'none';
1755
- // protected sizesGroupButtons = Array<ISpacingOption>();
1756
- this.availableBlocksContainerId = LayoutBuilderInternalService.AVAILABLE_BLOCKS_CONTAINER_ID;
1757
- this.sectionsColumnsDropList = [];
1758
- this.showTopContent = false;
1759
- this.showBottomContent = false;
1760
- this.renderer.addClass(this.hostElement.nativeElement, 'pep-layout-editor');
1761
- }
1762
- set hostObject(value) {
1763
- this._hostObject = value;
1764
- // this.onLoadFlow = value.onLoadFlow;
1765
- // this.onChangeFlow = value.onChangeFlow;
1766
- this.isFullWidth = !value.maxWidth || value.maxWidth === 0;
1767
- this.maxWidth = value.maxWidth;
1768
- this.horizontalSpacing = this._hostObject.horizontalSpacing || 'md';
1769
- this.verticalSpacing = this._hostObject.verticalSpacing || 'md';
1770
- this.sectionsGap = this._hostObject.sectionsGap || 'md';
1771
- this.columnsGap = this._hostObject.columnsGap || 'md';
1772
- this.roundedCorners = this._hostObject.roundedCorners || 'none';
1773
- // this.prepareFlowHostObject('load');
1774
- // this.prepareFlowHostObject('change');
1775
- }
1776
- get hostObject() {
1777
- return this._hostObject;
1778
- }
1779
- // private prepareFlowHostObject(pageFlowType: 'load' | 'change') {
1780
- // const fields = {};
1781
- // if (pageFlowType === 'load') {
1782
- // this.onLoadFlowHostObject = {};
1783
- // this.onLoadFlowHostObject['runFlowData'] = this.onLoadFlow;
1784
- // this.onLoadFlowHostObject['fields'] = fields;
1785
- // } else if (pageFlowType === 'change') {
1786
- // this.onChangeFlowHostObject = {};
1787
- // this.onChangeFlowHostObject['runFlowData'] = this.onChangeFlow;
1788
- // this.onChangeFlowHostObject['fields'] = fields;
1789
- // }
1790
- // }
1791
- updateHostObject() {
1792
- // this._hostObject.onLoadFlow = this.onLoadFlow;
1793
- // this._hostObject.onChangeFlow = this.onChangeFlow;
1794
- this._hostObject.maxWidth = this.isFullWidth ? 0 : this.maxWidth;
1795
- this._hostObject.horizontalSpacing = this.horizontalSpacing;
1796
- this._hostObject.verticalSpacing = this.verticalSpacing;
1797
- this._hostObject.sectionsGap = this.sectionsGap;
1798
- this._hostObject.columnsGap = this.columnsGap;
1799
- this._hostObject.roundedCorners = this.roundedCorners === 'none' ? undefined : this.roundedCorners;
1800
- // this.prepareFlowHostObject('load');
1801
- // this.prepareFlowHostObject('change');
1802
- this.hostObjectChange.emit(this.hostObject);
1803
- }
1804
- ngOnInit() {
1805
- this.layoutBuilderService.sectionsColumnsDropListChange$.subscribe((sectionsColumnsDropList) => {
1806
- this.sectionsColumnsDropList = sectionsColumnsDropList;
1807
- });
1808
- }
1809
- ngAfterViewInit() {
1810
- if (this._topContentRef.nativeElement.children.length > 0) {
1811
- this.showTopContent = true;
1812
- }
1813
- if (this._bottomContentRef.nativeElement.children.length > 0) {
1814
- this.showBottomContent = true;
1815
- }
1816
- }
1817
- onAddSectionClick(event) {
1818
- this.layoutBuilderService.addSection();
1819
- }
1820
- isFullWidthChange(isChecked) {
1821
- this.isFullWidth = isChecked;
1822
- this.maxWidth = isChecked ? 0 : 960;
1823
- this.updateHostObject();
1824
- }
1825
- onMaxWidthChange(maxWidth) {
1826
- this.maxWidth = coerceNumberProperty(maxWidth, this.maxWidth);
1827
- this.updateHostObject();
1828
- }
1829
- setColumnsHorizntalGap(key) {
1830
- this.horizontalSpacing = key;
1831
- this.updateHostObject();
1832
- }
1833
- setColumnsVerticalGap(key) {
1834
- this.verticalSpacing = key;
1835
- this.updateHostObject();
1836
- }
1837
- setSectionGap(key) {
1838
- this.sectionsGap = key;
1839
- this.updateHostObject();
1840
- }
1841
- setColumnsGap(key) {
1842
- this.columnsGap = key;
1843
- this.updateHostObject();
1844
- }
1845
- setRoundedCorners(key) {
1846
- this.roundedCorners = key;
1847
- this.updateHostObject();
1848
- }
1849
- onDragStart(event) {
1850
- this.layoutBuilderService.onBlockDragStart(event);
1851
- }
1852
- onDragEnd(event) {
1853
- this.layoutBuilderService.onBlockDragEnd(event);
1854
- }
1855
- }
1856
- PepLayoutEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutEditorComponent, deps: [{ token: i1$2.PepCustomizationService }, { token: LayoutBuilderInternalService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
1857
- PepLayoutEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepLayoutEditorComponent, selector: "pep-layout-editor", inputs: { availableBlocksForDrag: "availableBlocksForDrag", hostObject: "hostObject" }, outputs: { hostObjectChange: "hostObjectChange" }, viewQueries: [{ propertyName: "_topContentRef", first: true, predicate: ["topContentRef"], descendants: true, static: true }, { propertyName: "_bottomContentRef", first: true, predicate: ["bottomContentRef"], descendants: true, static: true }, { propertyName: "availableBlocksContainer", first: true, predicate: ["availableBlocksContainer"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<mat-tab-group #tabGroup class=\"layout-builder-editor-tabs\" animationDuration=\"0ms\">\n <mat-tab label=\"{{'LAYOUT_BUILDER.GENERAL' | translate}}\">\n <div class=\"layout-builder-editor-tab\">\n <div #topContentRef class=\"layout-builder-editor-group\">\n <ng-content select=\"[layout-editor-top-content]\"></ng-content>\n <div *ngIf=\"showTopContent\" class=\"editor-separator\"></div>\n </div>\n <div>\n <label class=\"editor-title\">{{'LAYOUT_BUILDER.SECTIONS_TITLE' | translate}}</label>\n <pep-button class=\"add-section-button\" value=\"{{'LAYOUT_BUILDER.ADD_SECTION' | translate}}\" styleType=\"regular\" iconName=\"number_plus\" iconPosition=\"end\"\n (buttonClick)=\"onAddSectionClick($event)\"></pep-button>\n </div>\n <div class=\"editor-separator\"></div>\n <pep-draggable-items class=\"available-blocks\" [containerId]=\"availableBlocksContainerId\" [items]=\"availableBlocksForDrag\" [title]=\"'LAYOUT_BUILDER.BLOCKS_TITLE' | translate\"\n titleSizeType=\"xl\" titleType=\"with-bottom-border\" [showSearch]=\"true\" [dropAreaIds]=\"sectionsColumnsDropList\" (itemDragStarted)=\"onDragStart($event)\" (itemDragEnded)=\"onDragEnd($event)\">\n </pep-draggable-items>\n <div #bottomContentRef class=\"layout-builder-editor-group\">\n <div *ngIf=\"showBottomContent\" class=\"editor-separator\"></div>\n <ng-content select=\"[layout-editor-bottom-content]\"></ng-content>\n </div>\n </div>\n </mat-tab>\n <mat-tab label=\"{{'LAYOUT_BUILDER.DESIGN' | translate}}\">\n <div class=\"layout-builder-editor-tab\">\n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"isFullWidth\" [label]=\"'LAYOUT_BUILDER.FULL_WIDTH_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"isFullWidthChange($event)\"></pep-checkbox>\n <pep-textbox [label]=\"'LAYOUT_BUILDER.MAX_WIDTH_TITLE' | translate\" type=\"int\" [disabled]=\"isFullWidth\" [value]=\"maxWidth.toString()\" (valueChange)=\"onMaxWidthChange($event)\"></pep-textbox>\n </div>\n <div class=\"editor-separator\"></div>\n <!-- Spacing -->\n <pep-group-buttons-settings [groupType]=\"'sizes'\" \n [header]=\"'LAYOUT_BUILDER.SPACING_TITLE' | translate\" [subHeader]=\"'LAYOUT_BUILDER.SPACING_HORIZONTAL_TITLE' | translate\"\n [btnKey]=\"horizontalSpacing.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n (btnkeyChange)=\"setColumnsHorizntalGap($event)\">\n </pep-group-buttons-settings>\n <pep-group-buttons-settings [groupType]=\"'sizes'\" \n [subHeader]=\"'LAYOUT_BUILDER.SPACING_VERTICAL_TITLE' | translate\"\n [btnKey]=\"verticalSpacing.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n (btnkeyChange)=\"setColumnsVerticalGap($event)\">\n </pep-group-buttons-settings>\n <div class=\"editor-separator\"></div>\n <!-- Gaps -->\n <pep-group-buttons-settings [groupType]=\"'sizes'\" \n [header]=\"'LAYOUT_BUILDER.GAPS_TITLE' | translate\" [subHeader]=\"'LAYOUT_BUILDER.SECTIONS_GAP_TITLE' | translate\"\n [btnKey]=\"sectionsGap?.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n (btnkeyChange)=\"setSectionGap($event)\">\n </pep-group-buttons-settings>\n <pep-group-buttons-settings [groupType]=\"'sizes'\" \n [subHeader]=\"'LAYOUT_BUILDER.COLUMNS_GAP_TITLE' | translate\"\n [btnKey]=\"columnsGap.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n (btnkeyChange)=\"setColumnsGap($event)\">\n </pep-group-buttons-settings>\n <!-- Rounded Corners -->\n <!--\n <div class=\"editor-separator\"></div>\n <label class=\"editor-title\">{{'LAYOUT_BUILDER.ROUNDED_CORNERS_TITLE' | translate}}</label><br>\n <label class=\"body-xs ellipsis\">{{'LAYOUT_BUILDER.BORDER_RADIUS_TITLE' | translate}}</label>\n <pep-group-buttons [buttons]=\"sizesGroupButtons\" [selectedButtonKey]=\"roundedCorners\" buttonsClass=\"ms regular\" viewType=\"toggle\"\n (buttonClick)=\"setRoundedCorners($event)\"></pep-group-buttons> -->\n </div>\n </mat-tab>\n</mat-tab-group>\n\n\n\n", styles: [":host pep-draggable-items ::ng-deep .draggable-items-overflow{padding-bottom:0!important}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey", "regex", "regexError", "isInFocus"], outputs: ["valueChange", "keyup"] }, { kind: "component", type: i5$4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i5$4.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i6.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i5$3.PepCheckboxComponent, selector: "pep-checkbox", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "additionalValue", "form", "isActive", "showTitle", "renderTitle", "layoutType", "visible"], outputs: ["valueChange"] }, { kind: "component", type: i8.GroupButtonsSettingsComponent, selector: "pep-group-buttons-settings", inputs: ["header", "subHeader", "groupType", "btnsArray", "excludeKeys", "useNone", "disabled", "dir", "titleSize", "bold", "btnKey"], outputs: ["btnkeyChange"] }, { kind: "component", type: i5$1.PepDraggableItemsComponent, selector: "pep-draggable-items", inputs: ["containerId", "showSearch", "title", "titleType", "titleSizeType", "itemPlaceholderType", "dropAreaIds", "items"], outputs: ["itemDragStarted", "itemDragEnded"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
1858
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutEditorComponent, decorators: [{
1859
- type: Component,
1860
- args: [{ selector: 'pep-layout-editor', template: "<mat-tab-group #tabGroup class=\"layout-builder-editor-tabs\" animationDuration=\"0ms\">\n <mat-tab label=\"{{'LAYOUT_BUILDER.GENERAL' | translate}}\">\n <div class=\"layout-builder-editor-tab\">\n <div #topContentRef class=\"layout-builder-editor-group\">\n <ng-content select=\"[layout-editor-top-content]\"></ng-content>\n <div *ngIf=\"showTopContent\" class=\"editor-separator\"></div>\n </div>\n <div>\n <label class=\"editor-title\">{{'LAYOUT_BUILDER.SECTIONS_TITLE' | translate}}</label>\n <pep-button class=\"add-section-button\" value=\"{{'LAYOUT_BUILDER.ADD_SECTION' | translate}}\" styleType=\"regular\" iconName=\"number_plus\" iconPosition=\"end\"\n (buttonClick)=\"onAddSectionClick($event)\"></pep-button>\n </div>\n <div class=\"editor-separator\"></div>\n <pep-draggable-items class=\"available-blocks\" [containerId]=\"availableBlocksContainerId\" [items]=\"availableBlocksForDrag\" [title]=\"'LAYOUT_BUILDER.BLOCKS_TITLE' | translate\"\n titleSizeType=\"xl\" titleType=\"with-bottom-border\" [showSearch]=\"true\" [dropAreaIds]=\"sectionsColumnsDropList\" (itemDragStarted)=\"onDragStart($event)\" (itemDragEnded)=\"onDragEnd($event)\">\n </pep-draggable-items>\n <div #bottomContentRef class=\"layout-builder-editor-group\">\n <div *ngIf=\"showBottomContent\" class=\"editor-separator\"></div>\n <ng-content select=\"[layout-editor-bottom-content]\"></ng-content>\n </div>\n </div>\n </mat-tab>\n <mat-tab label=\"{{'LAYOUT_BUILDER.DESIGN' | translate}}\">\n <div class=\"layout-builder-editor-tab\">\n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"isFullWidth\" [label]=\"'LAYOUT_BUILDER.FULL_WIDTH_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"isFullWidthChange($event)\"></pep-checkbox>\n <pep-textbox [label]=\"'LAYOUT_BUILDER.MAX_WIDTH_TITLE' | translate\" type=\"int\" [disabled]=\"isFullWidth\" [value]=\"maxWidth.toString()\" (valueChange)=\"onMaxWidthChange($event)\"></pep-textbox>\n </div>\n <div class=\"editor-separator\"></div>\n <!-- Spacing -->\n <pep-group-buttons-settings [groupType]=\"'sizes'\" \n [header]=\"'LAYOUT_BUILDER.SPACING_TITLE' | translate\" [subHeader]=\"'LAYOUT_BUILDER.SPACING_HORIZONTAL_TITLE' | translate\"\n [btnKey]=\"horizontalSpacing.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n (btnkeyChange)=\"setColumnsHorizntalGap($event)\">\n </pep-group-buttons-settings>\n <pep-group-buttons-settings [groupType]=\"'sizes'\" \n [subHeader]=\"'LAYOUT_BUILDER.SPACING_VERTICAL_TITLE' | translate\"\n [btnKey]=\"verticalSpacing.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n (btnkeyChange)=\"setColumnsVerticalGap($event)\">\n </pep-group-buttons-settings>\n <div class=\"editor-separator\"></div>\n <!-- Gaps -->\n <pep-group-buttons-settings [groupType]=\"'sizes'\" \n [header]=\"'LAYOUT_BUILDER.GAPS_TITLE' | translate\" [subHeader]=\"'LAYOUT_BUILDER.SECTIONS_GAP_TITLE' | translate\"\n [btnKey]=\"sectionsGap?.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n (btnkeyChange)=\"setSectionGap($event)\">\n </pep-group-buttons-settings>\n <pep-group-buttons-settings [groupType]=\"'sizes'\" \n [subHeader]=\"'LAYOUT_BUILDER.COLUMNS_GAP_TITLE' | translate\"\n [btnKey]=\"columnsGap.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n (btnkeyChange)=\"setColumnsGap($event)\">\n </pep-group-buttons-settings>\n <!-- Rounded Corners -->\n <!--\n <div class=\"editor-separator\"></div>\n <label class=\"editor-title\">{{'LAYOUT_BUILDER.ROUNDED_CORNERS_TITLE' | translate}}</label><br>\n <label class=\"body-xs ellipsis\">{{'LAYOUT_BUILDER.BORDER_RADIUS_TITLE' | translate}}</label>\n <pep-group-buttons [buttons]=\"sizesGroupButtons\" [selectedButtonKey]=\"roundedCorners\" buttonsClass=\"ms regular\" viewType=\"toggle\"\n (buttonClick)=\"setRoundedCorners($event)\"></pep-group-buttons> -->\n </div>\n </mat-tab>\n</mat-tab-group>\n\n\n\n", styles: [":host pep-draggable-items ::ng-deep .draggable-items-overflow{padding-bottom:0!important}\n"] }]
1861
- }], ctorParameters: function () { return [{ type: i1$2.PepCustomizationService }, { type: LayoutBuilderInternalService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { _topContentRef: [{
1862
- type: ViewChild,
1863
- args: ['topContentRef', { static: true }]
1864
- }], _bottomContentRef: [{
1865
- type: ViewChild,
1866
- args: ['bottomContentRef', { static: true }]
1867
- }], availableBlocksContainer: [{
1868
- type: ViewChild,
1869
- args: ['availableBlocksContainer', { read: ElementRef }]
1870
- }], availableBlocksForDrag: [{
1871
- type: Input
1872
- }], hostObject: [{
1873
- type: Input
1874
- }], hostObjectChange: [{
1875
- type: Output
1876
- }] } });
1877
-
1878
- class PepLayoutEditorModule {
1879
- constructor() {
1880
- // this.pepIconRegistry.registerIcons(pepIcons);
1881
- }
1882
- }
1883
- PepLayoutEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1884
- PepLayoutEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutEditorModule, declarations: [PepLayoutEditorComponent], imports: [CommonModule,
1885
- HttpClientModule,
1886
- PepNgxLibModule,
1887
- PepRemoteLoaderModule,
1888
- PepSelectModule,
1889
- PepTextboxModule,
1890
- DragDropModule,
1891
- OverlayModule,
1892
- MatTabsModule,
1893
- PepButtonModule,
1894
- PepCheckboxModule,
1895
- PepGroupButtonsModule,
1896
- PepColorModule,
1897
- PepImageModule,
1898
- PepGroupButtonsSettingsModule,
1899
- PepDraggableItemsModule,
1900
- PepDialogModule,
1901
- MatSliderModule,
1902
- PepTextareaModule,
1903
- // PepManageParametersModule,
1904
- // PepFlowPickerButtonModule,
1905
- SectionEditorModule], exports: [PepLayoutEditorComponent] });
1906
- PepLayoutEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutEditorModule, imports: [CommonModule,
1907
- HttpClientModule,
1908
- PepNgxLibModule,
1909
- PepRemoteLoaderModule,
1910
- PepSelectModule,
1911
- PepTextboxModule,
1912
- DragDropModule,
1913
- OverlayModule,
1914
- MatTabsModule,
1915
- PepButtonModule,
1916
- PepCheckboxModule,
1917
- PepGroupButtonsModule,
1918
- PepColorModule,
1919
- PepImageModule,
1920
- PepGroupButtonsSettingsModule,
1921
- PepDraggableItemsModule,
1922
- PepDialogModule,
1923
- MatSliderModule,
1924
- PepTextareaModule,
1925
- // PepManageParametersModule,
1926
- // PepFlowPickerButtonModule,
1927
- SectionEditorModule] });
1928
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutEditorModule, decorators: [{
1929
- type: NgModule,
1930
- args: [{
1931
- declarations: [
1932
- PepLayoutEditorComponent
1933
- ],
1934
- imports: [
1935
- CommonModule,
1936
- HttpClientModule,
1937
- PepNgxLibModule,
1938
- PepRemoteLoaderModule,
1939
- PepSelectModule,
1940
- PepTextboxModule,
1941
- DragDropModule,
1942
- OverlayModule,
1943
- MatTabsModule,
1944
- PepButtonModule,
1945
- PepCheckboxModule,
1946
- PepGroupButtonsModule,
1947
- PepColorModule,
1948
- PepImageModule,
1949
- PepGroupButtonsSettingsModule,
1950
- PepDraggableItemsModule,
1951
- PepDialogModule,
1952
- MatSliderModule,
1953
- PepTextareaModule,
1954
- // PepManageParametersModule,
1955
- // PepFlowPickerButtonModule,
1956
- SectionEditorModule,
1957
- ],
1958
- exports: [PepLayoutEditorComponent]
1959
- }]
1960
- }], ctorParameters: function () { return []; } });
1961
-
1962
1935
  class PepLayoutBuilderComponent extends BaseDestroyerDirective {
1963
- constructor(renderer, hostElement, translate, layoutBuilderService, pepAddonService) {
1936
+ constructor(renderer, hostElement, translate, layoutBuilderInternalService, pepAddonService) {
1964
1937
  super();
1965
1938
  this.renderer = renderer;
1966
1939
  this.hostElement = hostElement;
1967
1940
  this.translate = translate;
1968
- this.layoutBuilderService = layoutBuilderService;
1941
+ this.layoutBuilderInternalService = layoutBuilderInternalService;
1969
1942
  this.pepAddonService = pepAddonService;
1970
1943
  this._availableBlocksForDrag = [];
1971
1944
  this._blocksLimitNumber = 0;
@@ -1980,18 +1953,18 @@ class PepLayoutBuilderComponent extends BaseDestroyerDirective {
1980
1953
  this.viewportWidth = 0;
1981
1954
  this.pepAddonService.setShellRouterData({ showSidebar: false, addPadding: false });
1982
1955
  this.renderer.addClass(this.hostElement.nativeElement, 'pep-layout-builder');
1983
- this.layoutBuilderService.setEditMode(true);
1956
+ this.layoutBuilderInternalService.setEditMode(true);
1984
1957
  }
1985
1958
  set availableBlocksForDrag(value) {
1986
1959
  this._availableBlocksForDrag = value;
1987
- this.layoutBuilderService.setAvailableBlocksToDrag(value);
1960
+ this.layoutBuilderInternalService.setAvailableBlocksToDrag(value);
1988
1961
  }
1989
1962
  get availableBlocksForDrag() {
1990
1963
  return this._availableBlocksForDrag;
1991
1964
  }
1992
1965
  set blocksLimitNumber(value) {
1993
1966
  this._blocksLimitNumber = coerceNumberProperty(value, 0);
1994
- this.layoutBuilderService.setBlocksLimitNumber(this._blocksLimitNumber);
1967
+ this.layoutBuilderInternalService.setBlocksLimitNumber(this._blocksLimitNumber);
1995
1968
  }
1996
1969
  set layoutEditorTitle(value) {
1997
1970
  this._layoutEditorTitle = value;
@@ -2001,7 +1974,7 @@ class PepLayoutBuilderComponent extends BaseDestroyerDirective {
2001
1974
  return this._layoutEditorTitle;
2002
1975
  }
2003
1976
  setScreenWidth(screenType) {
2004
- this.layoutBuilderService.setScreenWidth(screenType);
1977
+ this.layoutBuilderInternalService.setScreenWidth(screenType);
2005
1978
  }
2006
1979
  updateViewportWidth() {
2007
1980
  var _a;
@@ -2021,18 +1994,18 @@ class PepLayoutBuilderComponent extends BaseDestroyerDirective {
2021
1994
  /***********************************************************************************************/
2022
1995
  /* Internal Events - for code usage
2023
1996
  /***********************************************************************************************/
2024
- this.layoutBuilderService.previewModeChange$.pipe(this.getDestroyer()).subscribe((previewMode) => {
1997
+ this.layoutBuilderInternalService.previewModeChange$.pipe(this.getDestroyer()).subscribe((previewMode) => {
2025
1998
  this.previewMode = previewMode;
2026
1999
  });
2027
- this.layoutBuilderService.lockScreenChange$.pipe(this.getDestroyer()).subscribe((lockScreen) => {
2000
+ this.layoutBuilderInternalService.lockScreenChange$.pipe(this.getDestroyer()).subscribe((lockScreen) => {
2028
2001
  this.lockScreen = lockScreen;
2029
2002
  });
2030
- this.layoutBuilderService.screenSizeChange$.pipe(this.getDestroyer()).subscribe((size) => {
2031
- const screenType = this.layoutBuilderService.getScreenType(size);
2003
+ this.layoutBuilderInternalService.screenSizeChange$.pipe(this.getDestroyer()).subscribe((size) => {
2004
+ const screenType = this.layoutBuilderInternalService.getScreenType(size);
2032
2005
  this.selectedScreenType = screenType;
2033
2006
  });
2034
2007
  // For update the layout data
2035
- this.layoutBuilderService.layoutViewChange$.pipe(this.getDestroyer()).subscribe((layoutView) => {
2008
+ this.layoutBuilderInternalService.layoutViewChange$.pipe(this.getDestroyer()).subscribe((layoutView) => {
2036
2009
  var _a;
2037
2010
  if (layoutView) {
2038
2011
  if ((_a = this.layoutBuilderWrapper) === null || _a === void 0 ? void 0 : _a.nativeElement) {
@@ -2043,7 +2016,7 @@ class PepLayoutBuilderComponent extends BaseDestroyerDirective {
2043
2016
  }
2044
2017
  }
2045
2018
  });
2046
- this.layoutBuilderService.screenWidthChange$.pipe(this.getDestroyer()).subscribe((width) => {
2019
+ this.layoutBuilderInternalService.screenWidthChange$.pipe(this.getDestroyer()).subscribe((width) => {
2047
2020
  var _a;
2048
2021
  if ((_a = this.layoutBuilderWrapper) === null || _a === void 0 ? void 0 : _a.nativeElement) {
2049
2022
  this.renderer.setStyle(this.layoutBuilderWrapper.nativeElement, 'width', width);
@@ -2051,18 +2024,18 @@ class PepLayoutBuilderComponent extends BaseDestroyerDirective {
2051
2024
  }
2052
2025
  });
2053
2026
  // Get the sections id's into sectionsColumnsDropList for the drag & drop.
2054
- this.layoutBuilderService.sectionsChange$.pipe(this.getDestroyer()).subscribe((sections) => {
2027
+ this.layoutBuilderInternalService.sectionsChange$.pipe(this.getDestroyer()).subscribe((sections) => {
2055
2028
  // Concat all results into one array.
2056
2029
  const sectionsColumnsDropList = [].concat(...sections.map((section) => {
2057
- return section.Columns.map((column, index) => this.layoutBuilderService.getSectionColumnKey(section.Key, index.toString()));
2030
+ return section.Columns.map((column, index) => this.layoutBuilderInternalService.getSectionColumnKey(section.Key, index.toString()));
2058
2031
  }));
2059
- this.layoutBuilderService.setSectionsColumnsDropListChange(sectionsColumnsDropList);
2032
+ this.layoutBuilderInternalService.setSectionsColumnsDropListChange(sectionsColumnsDropList);
2060
2033
  });
2061
2034
  /***********************************************************************************************/
2062
2035
  /* External Events - for raise to the client
2063
2036
  /***********************************************************************************************/
2064
2037
  // For update editor.
2065
- this.layoutBuilderService.editorChange$.pipe(this.getDestroyer()).subscribe((editor) => {
2038
+ this.layoutBuilderInternalService.editorChange$.pipe(this.getDestroyer()).subscribe((editor) => {
2066
2039
  if (editor) {
2067
2040
  // Init the side bar scroll top to 0.
2068
2041
  if (this.sideBarComponent) {
@@ -2075,12 +2048,12 @@ class PepLayoutBuilderComponent extends BaseDestroyerDirective {
2075
2048
  this.editorChange.emit(editor);
2076
2049
  }
2077
2050
  });
2078
- this.layoutBuilderService.blockAddedEventSubject$.pipe(this.getDestroyer()).subscribe((event) => {
2051
+ this.layoutBuilderInternalService.blockAddedEventSubject$.pipe(this.getDestroyer()).subscribe((event) => {
2079
2052
  if (event) {
2080
2053
  this.blockAdded.emit(event);
2081
2054
  }
2082
2055
  });
2083
- this.layoutBuilderService.blocksRemovedEventSubject$.pipe(this.getDestroyer()).subscribe((event) => {
2056
+ this.layoutBuilderInternalService.blocksRemovedEventSubject$.pipe(this.getDestroyer()).subscribe((event) => {
2084
2057
  if ((event === null || event === void 0 ? void 0 : event.length) > 0) {
2085
2058
  this.blocksRemoved.emit(event);
2086
2059
  }
@@ -2101,17 +2074,17 @@ class PepLayoutBuilderComponent extends BaseDestroyerDirective {
2101
2074
  this.updateViewportWidth();
2102
2075
  }
2103
2076
  togglePreviewMode() {
2104
- this.layoutBuilderService.changePreviewMode(!this.previewMode);
2077
+ this.layoutBuilderInternalService.changePreviewMode(!this.previewMode);
2105
2078
  this.updateViewportWidth();
2106
2079
  }
2107
2080
  onSidebarStateChange(event) {
2108
2081
  this.updateViewportWidth();
2109
2082
  }
2110
2083
  onLayoutEditorObjectChange(pageEditor) {
2111
- this.layoutBuilderService.updateLayoutFromEditor(pageEditor);
2084
+ this.layoutBuilderInternalService.updateLayoutFromEditor(pageEditor);
2112
2085
  }
2113
2086
  onSectionEditorObjectChange(sectionEditor) {
2114
- this.layoutBuilderService.updateSectionFromEditor(sectionEditor);
2087
+ this.layoutBuilderInternalService.updateSectionFromEditor(sectionEditor);
2115
2088
  }
2116
2089
  onNavigateBackFromEditor() {
2117
2090
  var _a;
@@ -2119,16 +2092,16 @@ class PepLayoutBuilderComponent extends BaseDestroyerDirective {
2119
2092
  this.backClick.emit();
2120
2093
  }
2121
2094
  else {
2122
- this.layoutBuilderService.navigateBackFromEditor();
2095
+ this.layoutBuilderInternalService.navigateBackFromEditor();
2123
2096
  }
2124
2097
  }
2125
2098
  }
2126
- 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: i1$2.PepAddonService }], target: i0.ɵɵFactoryTarget.Component });
2127
- PepLayoutBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepLayoutBuilderComponent, selector: "pep-layout-builder", inputs: { availableBlocksForDrag: "availableBlocksForDrag", blocksLimitNumber: "blocksLimitNumber", layoutEditorTitle: "layoutEditorTitle" }, outputs: { backClick: "backClick", editorChange: "editorChange", blockAdded: "blockAdded", blocksRemoved: "blocksRemoved" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "layoutBuilderWrapper", first: true, predicate: ["layoutBuilderWrapper"], descendants: true, static: true }, { propertyName: "sideBarComponent", first: true, predicate: PepSideBarComponent, descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"lockScreen\" class=\"cdk-overlay-backdrop cdk-overlay-dark-backdrop cdk-overlay-backdrop-showing\"></div>\n\n<pep-page-layout [showShadow]=\"!previewMode && currentEditor !== null\" >\n <div pep-side-area *ngIf=\"!previewMode && currentEditor\" style=\"height: inherit;\">\n <pep-side-bar #sideBar [ignoreResize]=\"true\" (stateChange)=\"onSidebarStateChange($event)\">\n <div header-content class=\"side-bar-title\">\n <pep-button class=\"back-button\" sizeType=\"sm\" iconName=\"arrow_left_alt\" (buttonClick)=\"onNavigateBackFromEditor();\"></pep-button>\n <div class=\"title title-lg ellipsis\" [title]=\"currentEditor.title\">\n <span>{{ currentEditor.title }}</span>\n </div>\n </div>\n <div class=\"layout-builder-editor-wrapper\">\n <pep-layout-editor *ngIf=\"currentEditor.type === 'layout-builder'\" [availableBlocksForDrag]=\"availableBlocksForDrag\"\n [hostObject]=\"currentEditor.hostObject\" (hostObjectChange)=\"onLayoutEditorObjectChange($event)\"\n >\n <ng-container layout-editor-top-content>\n <ng-content select=\"[layout-editor-top-content]\"></ng-content>\n </ng-container>\n <ng-container layout-editor-bottom-content>\n <ng-content select=\"[layout-editor-bottom-content]\"></ng-content>\n </ng-container>\n </pep-layout-editor>\n \n <section-editor *ngIf=\"currentEditor.type === 'section'\" \n [hostObject]=\"currentEditor.hostObject\" (hostObjectChange)=\"onSectionEditorObjectChange($event)\"></section-editor>\n \n <div *ngIf=\"currentEditor.type === 'block'\" class=\"layout-builder-editor-container\">\n <ng-content select=\"[block-editor-content]\"></ng-content>\n </div>\n </div>\n </pep-side-bar>\n </div>\n <ng-container pep-main-area>\n <div class=\"main-area-container\" [ngClass]=\"{'preview-mode': previewMode }\">\n <div class=\"header-container\" >\n <ng-container *ngIf=\"!previewMode; then editorTitleTemplate; else previewTitleTemplate\"></ng-container>\n <ng-template #editorTitleTemplate>\n <div>\n <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.VIEWPORT_WIDTH' | translate)}}:&nbsp;</span>\n <span class=\"body-xs\"><b>{{viewportWidth}}</b></span>\n </div>\n </ng-template>\n <ng-template #previewTitleTemplate>\n <div class=\"preview-title body-sm\">\n <span>{{('LAYOUT_BUILDER.PREVIEW_TITLE' | translate)}}</span>\n </div>\n </ng-template>\n\n <div class=\"header-group-btn\">\n <pep-group-buttons [buttons]=\"screenTypes\" [selectedButtonKey]=\"selectedScreenType\" sizeType=\"sm\" viewType=\"toggle\" >\n </pep-group-buttons>\n </div>\n\n <ng-container *ngIf=\"!previewMode; then editorButtonsTemplate; else previewButtonsTemplate\"></ng-container>\n <ng-template #editorButtonsTemplate>\n <div class=\"header-end\">\n <pep-button key='Preview' [value]=\"'ACTIONS.PREVIEW' | translate\" sizeType=\"sm\" classNames=\"pep-spacing-element\" (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 .layout-builder-editor-tabs{height:100%}.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 .layout-builder-editor-tabs .mat-tab-header-pagination{display:none}.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 .layout-builder-editor-tabs .mat-tab-labels .mat-tab-label{padding:0 var(--pep-spacing-md, .75rem)!important}.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 .layout-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active{overflow:unset}.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 .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 .layout-builder-editor-tabs .layout-builder-editor-tab .group-buttons-container .toggle-buttons{width:100%}.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 .layout-builder-editor-tabs .mat-tab-header{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.main-area-container{background:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.04)}.main-area-container .header-container{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.main-area-container .header-container .header-title{color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.7)}.main-area-container .header-container .size-limit-container{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}.main-area-container.preview-mode .header-container{background:unset;background-color:hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.main-area-container.preview-mode .header-container .preview-title,.main-area-container.preview-mode .header-container .color-link{color:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.main-area-container.preview-mode .layout-builder-wrapper{overflow:auto}.main-area-container .layout-builder-wrapper{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:var(--pep-shadow-md-offset, 0 .5rem 1rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.main-area-container .layout-builder-wrapper .backdrop{background:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.5)}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$5.PepPageLayoutComponent, selector: "pep-page-layout", inputs: ["addPadding", "showShadow"] }, { kind: "component", type: i6$1.PepSideBarComponent, selector: "pep-side-bar", inputs: ["position", "ignoreResize", "showHeader", "showFooter", "showToggle", "useAsWebComponent"], outputs: ["stateChange"] }, { kind: "component", type: i6.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i8$1.PepGroupButtonsComponent, selector: "pep-group-buttons", inputs: ["viewType", "styleType", "sizeType", "buttons", "buttonsDisabled", "supportUnselect", "selectedButtonKey", "stretch"], outputs: ["buttonClick"] }, { kind: "component", type: PepLayoutEditorComponent, selector: "pep-layout-editor", inputs: ["availableBlocksForDrag", "hostObject"], outputs: ["hostObjectChange"] }, { kind: "component", type: SectionEditorComponent, selector: "section-editor", inputs: ["hostObject"], outputs: ["hostObjectChange"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
2099
+ PepLayoutBuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutBuilderComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.TranslateService }, { token: LayoutBuilderInternalService }, { token: i2$1.PepAddonService }], target: i0.ɵɵFactoryTarget.Component });
2100
+ PepLayoutBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepLayoutBuilderComponent, selector: "pep-layout-builder", inputs: { availableBlocksForDrag: "availableBlocksForDrag", blocksLimitNumber: "blocksLimitNumber", layoutEditorTitle: "layoutEditorTitle" }, outputs: { backClick: "backClick", editorChange: "editorChange", blockAdded: "blockAdded", blocksRemoved: "blocksRemoved" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "layoutBuilderWrapper", first: true, predicate: ["layoutBuilderWrapper"], descendants: true, static: true }, { propertyName: "sideBarComponent", first: true, predicate: PepSideBarComponent, descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"lockScreen\" class=\"cdk-overlay-backdrop cdk-overlay-dark-backdrop cdk-overlay-backdrop-showing\"></div>\n\n<pep-page-layout [showShadow]=\"!previewMode && currentEditor !== null\" >\n <div pep-side-area *ngIf=\"!previewMode && currentEditor\" style=\"height: inherit;\">\n <pep-side-bar #sideBar [ignoreResize]=\"true\" (stateChange)=\"onSidebarStateChange($event)\">\n <div header-content class=\"side-bar-title\">\n <pep-button class=\"back-button\" sizeType=\"sm\" iconName=\"arrow_left_alt\" (buttonClick)=\"onNavigateBackFromEditor();\"></pep-button>\n <div class=\"title title-lg ellipsis\" [title]=\"currentEditor.title\">\n <span>{{ currentEditor.title }}</span>\n </div>\n </div>\n <div class=\"layout-builder-editor-wrapper\">\n <pep-layout-editor *ngIf=\"currentEditor.type === 'layout-builder'\" [availableBlocksForDrag]=\"availableBlocksForDrag\"\n [hostObject]=\"currentEditor.hostObject\" (hostObjectChange)=\"onLayoutEditorObjectChange($event)\"\n >\n <ng-container layout-editor-top-content>\n <ng-content select=\"[layout-editor-top-content]\"></ng-content>\n </ng-container>\n <ng-container layout-editor-bottom-content>\n <ng-content select=\"[layout-editor-bottom-content]\"></ng-content>\n </ng-container>\n </pep-layout-editor>\n \n <section-editor *ngIf=\"currentEditor.type === 'section'\" \n [hostObject]=\"currentEditor.hostObject\" (hostObjectChange)=\"onSectionEditorObjectChange($event)\"></section-editor>\n \n <div *ngIf=\"currentEditor.type === 'block'\" >\n <ng-content select=\"[block-editor-content]\"></ng-content>\n </div>\n </div>\n </pep-side-bar>\n </div>\n <ng-container pep-main-area>\n <div class=\"main-area-container\" [ngClass]=\"{'preview-mode': previewMode }\">\n <div class=\"header-container\" >\n <ng-container *ngIf=\"!previewMode; then editorTitleTemplate; else previewTitleTemplate\"></ng-container>\n <ng-template #editorTitleTemplate>\n <div>\n <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.VIEWPORT_WIDTH' | translate)}}:&nbsp;</span>\n <span class=\"body-xs\"><b>{{viewportWidth}}</b></span>\n </div>\n </ng-template>\n <ng-template #previewTitleTemplate>\n <div class=\"preview-title body-sm\">\n <span>{{('LAYOUT_BUILDER.PREVIEW_TITLE' | translate)}}</span>\n </div>\n </ng-template>\n\n <div class=\"header-group-btn\">\n <pep-group-buttons [buttons]=\"screenTypes\" [selectedButtonKey]=\"selectedScreenType\" sizeType=\"sm\" viewType=\"toggle\" >\n </pep-group-buttons>\n </div>\n\n <ng-container *ngIf=\"!previewMode; then editorButtonsTemplate; else previewButtonsTemplate\"></ng-container>\n <ng-template #editorButtonsTemplate>\n <div class=\"header-end\">\n <pep-button key='Preview' [value]=\"'ACTIONS.PREVIEW' | translate\" sizeType=\"sm\" (buttonClick)=\"togglePreviewMode()\"></pep-button>\n <ng-content select=\"[header-end-content]\"></ng-content>\n </div>\n </ng-template>\n <ng-template #previewButtonsTemplate>\n <a class=\"color-link body-sm\" (click)=\"togglePreviewMode()\" href=\"javascript:void(0)\">{{('LAYOUT_BUILDER.PREVIEW_CLICK_HERE' | translate)}}</a> \n </ng-template>\n </div>\n <div #layoutBuilderWrapper class=\"layout-builder-wrapper\" [ngClass]=\"{'limit-min-width': selectedScreenType === 'Landscape' }\">\n <ng-content select=\"[layout-content]\"></ng-content>\n <div *ngIf=\"!previewMode\" class=\"backdrop\" [ngClass]=\"{'show-backdrop': currentEditor?.type === 'section' || currentEditor?.type === 'block'}\"></div>\n </div>\n </div>\n </ng-container>\n</pep-page-layout>", styles: [".side-bar-title{display:flex;padding-top:var(--pep-spacing-sm, .5rem)}.side-bar-title .back-button{margin-inline-end:var(--pep-spacing-sm, .5rem)}.side-bar-title .title{display:flex;align-items:center}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs{height:100%}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-header,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-header{position:sticky;top:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));z-index:2}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-header-pagination,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-header-pagination{display:none}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-labels,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-labels{display:grid;grid-template-columns:1fr 1fr}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-labels .mat-tab-label,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-labels .mat-tab-label{padding:0 var(--pep-spacing-md, .75rem)!important}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-body-wrapper,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-body-wrapper{overflow:unset;margin:0;display:block}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active{overflow:unset}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active .mat-tab-body-content,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active .mat-tab-body-content{overflow:unset;display:flex;flex-direction:column;padding-inline:0!important}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab{overflow:inherit;display:inherit;flex-direction:inherit;gap:var(--pep-spacing-lg, 1rem)}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab .group-buttons-container .toggle-buttons,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab .group-buttons-container .toggle-buttons,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab .group-buttons-container .toggle-buttons,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab .group-buttons-container .toggle-buttons{width:100%}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-color,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-select,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-textarea,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-textbox,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-color,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-select,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-textarea,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-textbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-textbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-textbox{margin-bottom:0!important}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container{padding-top:var(--pep-spacing-lg, 1rem);padding-bottom:var(--pep-spacing-lg, 1rem)}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group{overflow:inherit;display:inherit;flex-direction:inherit;gap:var(--pep-spacing-lg, 1rem);display:flex;flex-direction:column}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container .group-buttons-container .toggle-buttons,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group .group-buttons-container .toggle-buttons{width:100%}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-textbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-textbox{margin-bottom:0!important}.layout-builder-editor-wrapper ::ng-deep .editor-title{display:block;font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-bold, 600)!important;font-size:var(--pep-font-size-xl, 1.25rem)!important;line-height:var(--pep-line-height-xl, 1.5625rem)!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layout-builder-editor-wrapper ::ng-deep .editor-sub-title{display:block;font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-normal, 400)!important;font-size:var(--pep-font-size-md, 1rem)!important;line-height:var(--pep-line-height-md, 1.25rem)!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layout-builder-editor-wrapper ::ng-deep .editor-separator{margin-top:var(--pep-spacing-lg, 1rem);border-bottom:1px solid hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title{margin-bottom:.5rem!important;min-height:unset!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container{background:unset!important;padding-left:unset!important;padding-right:unset!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-inner-container,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container .mat-checkbox-inner-container{margin-left:0!important;margin-right:0!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-layout,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container .mat-checkbox-layout{font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-normal, 400);font-size:var(--pep-font-size-lg, 1.125rem)!important;line-height:var(--pep-line-height-lg, 1.40625rem)!important;font-weight:var(--pep-font-weight-bold, 600)!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-layout .mat-checkbox-label span,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container .mat-checkbox-layout .mat-checkbox-label span{margin:0 .5rem}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-layout{font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-normal, 400);font-size:var(--pep-font-size-md, 1rem)!important;line-height:var(--pep-line-height-md, 1.25rem)!important;font-weight:var(--pep-font-weight-normal, 400)!important}.main-area-container{min-height:100%;display:grid;grid-template-rows:auto 1fr}.main-area-container .header-container{display:flex;position:sticky;top:0;z-index:100;height:3rem;align-items:center;justify-content:space-between;padding:0 var(--pep-spacing-sm, .5rem)}.main-area-container .header-container .header-group-btn{display:flex;justify-content:space-around;align-items:center}.main-area-container .header-container .header-end{display:flex;justify-content:flex-end;gap:var(--pep-spacing-sm, .5rem)}.main-area-container .header-container ::ng-deep .group-buttons-container .toggle-buttons{width:16rem}.main-area-container .layout-builder-wrapper{width:100%;margin:0 auto;position:relative}.main-area-container .layout-builder-wrapper.limit-min-width{min-width:800px}.main-area-container .layout-builder-wrapper .backdrop{position:absolute;width:100%;height:100%;top:0;z-index:10;display:none}.main-area-container .layout-builder-wrapper .backdrop.show-backdrop{display:block}\n", ".layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-header,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-header{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.main-area-container{background:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.04)}.main-area-container .header-container{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.main-area-container .header-container .header-title{color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.7)}.main-area-container .header-container .size-limit-container{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}.main-area-container.preview-mode .header-container{background:unset;background-color:hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.main-area-container.preview-mode .header-container .preview-title,.main-area-container.preview-mode .header-container .color-link{color:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.main-area-container.preview-mode .layout-builder-wrapper{overflow:auto}.main-area-container .layout-builder-wrapper{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:var(--pep-shadow-md-offset, 0 .5rem 1rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.main-area-container .layout-builder-wrapper .backdrop{background:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.5)}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$3.PepPageLayoutComponent, selector: "pep-page-layout", inputs: ["addPadding", "showShadow"] }, { kind: "component", type: i6$1.PepSideBarComponent, selector: "pep-side-bar", inputs: ["position", "ignoreResize", "showHeader", "showFooter", "showToggle", "useAsWebComponent"], outputs: ["stateChange"] }, { kind: "component", type: i5$1.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i8$1.PepGroupButtonsComponent, selector: "pep-group-buttons", inputs: ["viewType", "styleType", "sizeType", "buttons", "buttonsDisabled", "supportUnselect", "selectedButtonKey", "stretch"], outputs: ["buttonClick"] }, { kind: "component", type: PepLayoutEditorComponent, selector: "pep-layout-editor", inputs: ["availableBlocksForDrag", "hostObject"], outputs: ["hostObjectChange"] }, { kind: "component", type: SectionEditorComponent, selector: "section-editor", inputs: ["hostObject"], outputs: ["hostObjectChange"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
2128
2101
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutBuilderComponent, decorators: [{
2129
2102
  type: Component,
2130
- args: [{ selector: 'pep-layout-builder', template: "<div *ngIf=\"lockScreen\" class=\"cdk-overlay-backdrop cdk-overlay-dark-backdrop cdk-overlay-backdrop-showing\"></div>\n\n<pep-page-layout [showShadow]=\"!previewMode && currentEditor !== null\" >\n <div pep-side-area *ngIf=\"!previewMode && currentEditor\" style=\"height: inherit;\">\n <pep-side-bar #sideBar [ignoreResize]=\"true\" (stateChange)=\"onSidebarStateChange($event)\">\n <div header-content class=\"side-bar-title\">\n <pep-button class=\"back-button\" sizeType=\"sm\" iconName=\"arrow_left_alt\" (buttonClick)=\"onNavigateBackFromEditor();\"></pep-button>\n <div class=\"title title-lg ellipsis\" [title]=\"currentEditor.title\">\n <span>{{ currentEditor.title }}</span>\n </div>\n </div>\n <div class=\"layout-builder-editor-wrapper\">\n <pep-layout-editor *ngIf=\"currentEditor.type === 'layout-builder'\" [availableBlocksForDrag]=\"availableBlocksForDrag\"\n [hostObject]=\"currentEditor.hostObject\" (hostObjectChange)=\"onLayoutEditorObjectChange($event)\"\n >\n <ng-container layout-editor-top-content>\n <ng-content select=\"[layout-editor-top-content]\"></ng-content>\n </ng-container>\n <ng-container layout-editor-bottom-content>\n <ng-content select=\"[layout-editor-bottom-content]\"></ng-content>\n </ng-container>\n </pep-layout-editor>\n \n <section-editor *ngIf=\"currentEditor.type === 'section'\" \n [hostObject]=\"currentEditor.hostObject\" (hostObjectChange)=\"onSectionEditorObjectChange($event)\"></section-editor>\n \n <div *ngIf=\"currentEditor.type === 'block'\" class=\"layout-builder-editor-container\">\n <ng-content select=\"[block-editor-content]\"></ng-content>\n </div>\n </div>\n </pep-side-bar>\n </div>\n <ng-container pep-main-area>\n <div class=\"main-area-container\" [ngClass]=\"{'preview-mode': previewMode }\">\n <div class=\"header-container\" >\n <ng-container *ngIf=\"!previewMode; then editorTitleTemplate; else previewTitleTemplate\"></ng-container>\n <ng-template #editorTitleTemplate>\n <div>\n <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.VIEWPORT_WIDTH' | translate)}}:&nbsp;</span>\n <span class=\"body-xs\"><b>{{viewportWidth}}</b></span>\n </div>\n </ng-template>\n <ng-template #previewTitleTemplate>\n <div class=\"preview-title body-sm\">\n <span>{{('LAYOUT_BUILDER.PREVIEW_TITLE' | translate)}}</span>\n </div>\n </ng-template>\n\n <div class=\"header-group-btn\">\n <pep-group-buttons [buttons]=\"screenTypes\" [selectedButtonKey]=\"selectedScreenType\" sizeType=\"sm\" viewType=\"toggle\" >\n </pep-group-buttons>\n </div>\n\n <ng-container *ngIf=\"!previewMode; then editorButtonsTemplate; else previewButtonsTemplate\"></ng-container>\n <ng-template #editorButtonsTemplate>\n <div class=\"header-end\">\n <pep-button key='Preview' [value]=\"'ACTIONS.PREVIEW' | translate\" sizeType=\"sm\" classNames=\"pep-spacing-element\" (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 .layout-builder-editor-tabs{height:100%}.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 .layout-builder-editor-tabs .mat-tab-header-pagination{display:none}.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 .layout-builder-editor-tabs .mat-tab-labels .mat-tab-label{padding:0 var(--pep-spacing-md, .75rem)!important}.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 .layout-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active{overflow:unset}.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 .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 .layout-builder-editor-tabs .layout-builder-editor-tab .group-buttons-container .toggle-buttons{width:100%}.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 .layout-builder-editor-tabs .mat-tab-header{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.main-area-container{background:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.04)}.main-area-container .header-container{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.main-area-container .header-container .header-title{color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.7)}.main-area-container .header-container .size-limit-container{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}.main-area-container.preview-mode .header-container{background:unset;background-color:hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.main-area-container.preview-mode .header-container .preview-title,.main-area-container.preview-mode .header-container .color-link{color:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.main-area-container.preview-mode .layout-builder-wrapper{overflow:auto}.main-area-container .layout-builder-wrapper{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:var(--pep-shadow-md-offset, 0 .5rem 1rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.main-area-container .layout-builder-wrapper .backdrop{background:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.5)}\n"] }]
2131
- }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.TranslateService }, { type: LayoutBuilderInternalService }, { type: i1$2.PepAddonService }]; }, propDecorators: { layoutBuilderWrapper: [{
2103
+ args: [{ selector: 'pep-layout-builder', template: "<div *ngIf=\"lockScreen\" class=\"cdk-overlay-backdrop cdk-overlay-dark-backdrop cdk-overlay-backdrop-showing\"></div>\n\n<pep-page-layout [showShadow]=\"!previewMode && currentEditor !== null\" >\n <div pep-side-area *ngIf=\"!previewMode && currentEditor\" style=\"height: inherit;\">\n <pep-side-bar #sideBar [ignoreResize]=\"true\" (stateChange)=\"onSidebarStateChange($event)\">\n <div header-content class=\"side-bar-title\">\n <pep-button class=\"back-button\" sizeType=\"sm\" iconName=\"arrow_left_alt\" (buttonClick)=\"onNavigateBackFromEditor();\"></pep-button>\n <div class=\"title title-lg ellipsis\" [title]=\"currentEditor.title\">\n <span>{{ currentEditor.title }}</span>\n </div>\n </div>\n <div class=\"layout-builder-editor-wrapper\">\n <pep-layout-editor *ngIf=\"currentEditor.type === 'layout-builder'\" [availableBlocksForDrag]=\"availableBlocksForDrag\"\n [hostObject]=\"currentEditor.hostObject\" (hostObjectChange)=\"onLayoutEditorObjectChange($event)\"\n >\n <ng-container layout-editor-top-content>\n <ng-content select=\"[layout-editor-top-content]\"></ng-content>\n </ng-container>\n <ng-container layout-editor-bottom-content>\n <ng-content select=\"[layout-editor-bottom-content]\"></ng-content>\n </ng-container>\n </pep-layout-editor>\n \n <section-editor *ngIf=\"currentEditor.type === 'section'\" \n [hostObject]=\"currentEditor.hostObject\" (hostObjectChange)=\"onSectionEditorObjectChange($event)\"></section-editor>\n \n <div *ngIf=\"currentEditor.type === 'block'\" >\n <ng-content select=\"[block-editor-content]\"></ng-content>\n </div>\n </div>\n </pep-side-bar>\n </div>\n <ng-container pep-main-area>\n <div class=\"main-area-container\" [ngClass]=\"{'preview-mode': previewMode }\">\n <div class=\"header-container\" >\n <ng-container *ngIf=\"!previewMode; then editorTitleTemplate; else previewTitleTemplate\"></ng-container>\n <ng-template #editorTitleTemplate>\n <div>\n <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.VIEWPORT_WIDTH' | translate)}}:&nbsp;</span>\n <span class=\"body-xs\"><b>{{viewportWidth}}</b></span>\n </div>\n </ng-template>\n <ng-template #previewTitleTemplate>\n <div class=\"preview-title body-sm\">\n <span>{{('LAYOUT_BUILDER.PREVIEW_TITLE' | translate)}}</span>\n </div>\n </ng-template>\n\n <div class=\"header-group-btn\">\n <pep-group-buttons [buttons]=\"screenTypes\" [selectedButtonKey]=\"selectedScreenType\" sizeType=\"sm\" viewType=\"toggle\" >\n </pep-group-buttons>\n </div>\n\n <ng-container *ngIf=\"!previewMode; then editorButtonsTemplate; else previewButtonsTemplate\"></ng-container>\n <ng-template #editorButtonsTemplate>\n <div class=\"header-end\">\n <pep-button key='Preview' [value]=\"'ACTIONS.PREVIEW' | translate\" sizeType=\"sm\" (buttonClick)=\"togglePreviewMode()\"></pep-button>\n <ng-content select=\"[header-end-content]\"></ng-content>\n </div>\n </ng-template>\n <ng-template #previewButtonsTemplate>\n <a class=\"color-link body-sm\" (click)=\"togglePreviewMode()\" href=\"javascript:void(0)\">{{('LAYOUT_BUILDER.PREVIEW_CLICK_HERE' | translate)}}</a> \n </ng-template>\n </div>\n <div #layoutBuilderWrapper class=\"layout-builder-wrapper\" [ngClass]=\"{'limit-min-width': selectedScreenType === 'Landscape' }\">\n <ng-content select=\"[layout-content]\"></ng-content>\n <div *ngIf=\"!previewMode\" class=\"backdrop\" [ngClass]=\"{'show-backdrop': currentEditor?.type === 'section' || currentEditor?.type === 'block'}\"></div>\n </div>\n </div>\n </ng-container>\n</pep-page-layout>", styles: [".side-bar-title{display:flex;padding-top:var(--pep-spacing-sm, .5rem)}.side-bar-title .back-button{margin-inline-end:var(--pep-spacing-sm, .5rem)}.side-bar-title .title{display:flex;align-items:center}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs{height:100%}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-header,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-header{position:sticky;top:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));z-index:2}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-header-pagination,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-header-pagination{display:none}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-labels,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-labels{display:grid;grid-template-columns:1fr 1fr}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-labels .mat-tab-label,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-labels .mat-tab-label{padding:0 var(--pep-spacing-md, .75rem)!important}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-body-wrapper,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-body-wrapper{overflow:unset;margin:0;display:block}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active{overflow:unset}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active .mat-tab-body-content,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active .mat-tab-body-content{overflow:unset;display:flex;flex-direction:column;padding-inline:0!important}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab{overflow:inherit;display:inherit;flex-direction:inherit;gap:var(--pep-spacing-lg, 1rem)}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab .group-buttons-container .toggle-buttons,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab .group-buttons-container .toggle-buttons,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab .group-buttons-container .toggle-buttons,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab .group-buttons-container .toggle-buttons{width:100%}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-color,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-select,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-textarea,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-textbox,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-color,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-select,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-textarea,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-textbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-textbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-textbox{margin-bottom:0!important}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container{padding-top:var(--pep-spacing-lg, 1rem);padding-bottom:var(--pep-spacing-lg, 1rem)}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group{overflow:inherit;display:inherit;flex-direction:inherit;gap:var(--pep-spacing-lg, 1rem);display:flex;flex-direction:column}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container .group-buttons-container .toggle-buttons,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group .group-buttons-container .toggle-buttons{width:100%}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-textbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-textbox{margin-bottom:0!important}.layout-builder-editor-wrapper ::ng-deep .editor-title{display:block;font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-bold, 600)!important;font-size:var(--pep-font-size-xl, 1.25rem)!important;line-height:var(--pep-line-height-xl, 1.5625rem)!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layout-builder-editor-wrapper ::ng-deep .editor-sub-title{display:block;font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-normal, 400)!important;font-size:var(--pep-font-size-md, 1rem)!important;line-height:var(--pep-line-height-md, 1.25rem)!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layout-builder-editor-wrapper ::ng-deep .editor-separator{margin-top:var(--pep-spacing-lg, 1rem);border-bottom:1px solid hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title{margin-bottom:.5rem!important;min-height:unset!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container{background:unset!important;padding-left:unset!important;padding-right:unset!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-inner-container,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container .mat-checkbox-inner-container{margin-left:0!important;margin-right:0!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-layout,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container .mat-checkbox-layout{font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-normal, 400);font-size:var(--pep-font-size-lg, 1.125rem)!important;line-height:var(--pep-line-height-lg, 1.40625rem)!important;font-weight:var(--pep-font-weight-bold, 600)!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-layout .mat-checkbox-label span,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container .mat-checkbox-layout .mat-checkbox-label span{margin:0 .5rem}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-layout{font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-normal, 400);font-size:var(--pep-font-size-md, 1rem)!important;line-height:var(--pep-line-height-md, 1.25rem)!important;font-weight:var(--pep-font-weight-normal, 400)!important}.main-area-container{min-height:100%;display:grid;grid-template-rows:auto 1fr}.main-area-container .header-container{display:flex;position:sticky;top:0;z-index:100;height:3rem;align-items:center;justify-content:space-between;padding:0 var(--pep-spacing-sm, .5rem)}.main-area-container .header-container .header-group-btn{display:flex;justify-content:space-around;align-items:center}.main-area-container .header-container .header-end{display:flex;justify-content:flex-end;gap:var(--pep-spacing-sm, .5rem)}.main-area-container .header-container ::ng-deep .group-buttons-container .toggle-buttons{width:16rem}.main-area-container .layout-builder-wrapper{width:100%;margin:0 auto;position:relative}.main-area-container .layout-builder-wrapper.limit-min-width{min-width:800px}.main-area-container .layout-builder-wrapper .backdrop{position:absolute;width:100%;height:100%;top:0;z-index:10;display:none}.main-area-container .layout-builder-wrapper .backdrop.show-backdrop{display:block}\n", ".layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-header,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-header{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.main-area-container{background:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.04)}.main-area-container .header-container{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.main-area-container .header-container .header-title{color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.7)}.main-area-container .header-container .size-limit-container{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}.main-area-container.preview-mode .header-container{background:unset;background-color:hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.main-area-container.preview-mode .header-container .preview-title,.main-area-container.preview-mode .header-container .color-link{color:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.main-area-container.preview-mode .layout-builder-wrapper{overflow:auto}.main-area-container .layout-builder-wrapper{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:var(--pep-shadow-md-offset, 0 .5rem 1rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.main-area-container .layout-builder-wrapper .backdrop{background:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.5)}\n"] }]
2104
+ }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.TranslateService }, { type: LayoutBuilderInternalService }, { type: i2$1.PepAddonService }]; }, propDecorators: { layoutBuilderWrapper: [{
2132
2105
  type: ViewChild,
2133
2106
  args: ['layoutBuilderWrapper', { static: true }]
2134
2107
  }], sideBarComponent: [{
@@ -2211,7 +2184,6 @@ PepLayoutBuilderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
2211
2184
  PepSelectModule,
2212
2185
  PepSizeDetectorModule,
2213
2186
  PepGroupButtonsModule,
2214
- PepSkeletonLoaderModule,
2215
2187
  PepDraggableItemsModule,
2216
2188
  PepGroupButtonsSettingsModule,
2217
2189
  PepHideInModule,
@@ -2239,7 +2211,6 @@ PepLayoutBuilderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
2239
2211
  PepSelectModule,
2240
2212
  PepSizeDetectorModule,
2241
2213
  PepGroupButtonsModule,
2242
- PepSkeletonLoaderModule,
2243
2214
  PepDraggableItemsModule,
2244
2215
  PepGroupButtonsSettingsModule,
2245
2216
  PepHideInModule,
@@ -2270,7 +2241,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
2270
2241
  PepSelectModule,
2271
2242
  PepSizeDetectorModule,
2272
2243
  PepGroupButtonsModule,
2273
- PepSkeletonLoaderModule,
2274
2244
  PepDraggableItemsModule,
2275
2245
  PepGroupButtonsSettingsModule,
2276
2246
  PepHideInModule,