@pepperi-addons/ngx-composite-lib 0.4.2-beta.78 → 0.4.2-beta.79
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.
- package/esm2020/layout-builder/layout/layout.component.mjs +16 -17
- package/esm2020/layout-builder/layout-builder-internal.service.mjs +20 -12
- package/esm2020/layout-builder/layout-builder.component.mjs +3 -3
- package/esm2020/layout-builder/section/section.component.mjs +14 -16
- package/fesm2015/pepperi-addons-ngx-composite-lib-layout-builder.mjs +57 -50
- package/fesm2015/pepperi-addons-ngx-composite-lib-layout-builder.mjs.map +1 -1
- package/fesm2020/pepperi-addons-ngx-composite-lib-layout-builder.mjs +56 -50
- package/fesm2020/pepperi-addons-ngx-composite-lib-layout-builder.mjs.map +1 -1
- package/layout-builder/layout/layout.component.d.ts +2 -3
- package/layout-builder/layout-builder-internal.service.d.ts +5 -3
- package/layout-builder/section/section.component.d.ts +2 -3
- package/package.json +1 -1
|
@@ -1,40 +1,40 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { EventEmitter, Component, Input, Output, NgModule, Injectable, ViewChild, ViewChildren, HostBinding, ElementRef, HostListener } from '@angular/core';
|
|
3
|
-
import * as
|
|
3
|
+
import * as i2 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
|
-
import * as
|
|
5
|
+
import * as i3$2 from '@angular/cdk/drag-drop';
|
|
6
6
|
import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
|
|
7
7
|
import { MatCommonModule } from '@angular/material/core';
|
|
8
8
|
import * as i2$2 from '@angular/material/tabs';
|
|
9
9
|
import { MatTabsModule } from '@angular/material/tabs';
|
|
10
|
-
import * as
|
|
10
|
+
import * as i3$1 from '@pepperi-addons/ngx-lib';
|
|
11
11
|
import { PepScreenSizeType, PepGuid, BaseDestroyerDirective, PepNgxLibModule } from '@pepperi-addons/ngx-lib';
|
|
12
|
-
import * as
|
|
12
|
+
import * as i4$2 from '@pepperi-addons/ngx-lib/size-detector';
|
|
13
13
|
import { PepSizeDetectorModule } from '@pepperi-addons/ngx-lib/size-detector';
|
|
14
14
|
import * as i4$1 from '@pepperi-addons/ngx-lib/button';
|
|
15
15
|
import { PepButtonModule } from '@pepperi-addons/ngx-lib/button';
|
|
16
|
-
import * as i2 from '@pepperi-addons/ngx-lib/dialog';
|
|
16
|
+
import * as i2$1 from '@pepperi-addons/ngx-lib/dialog';
|
|
17
17
|
import { PepDialogData, PepDialogModule, PepDialogActionButton } from '@pepperi-addons/ngx-lib/dialog';
|
|
18
18
|
import * as i8 from '@pepperi-addons/ngx-lib/group-buttons';
|
|
19
19
|
import { PepGroupButtonsModule } from '@pepperi-addons/ngx-lib/group-buttons';
|
|
20
|
-
import * as i5$
|
|
20
|
+
import * as i5$2 from '@pepperi-addons/ngx-lib/page-layout';
|
|
21
21
|
import { PepPageLayoutModule } from '@pepperi-addons/ngx-lib/page-layout';
|
|
22
22
|
import * as i6$1 from '@pepperi-addons/ngx-lib/side-bar';
|
|
23
23
|
import { PepSideBarComponent, PepSideBarModule } from '@pepperi-addons/ngx-lib/side-bar';
|
|
24
|
-
import * as
|
|
24
|
+
import * as i7 from '@pepperi-addons/ngx-lib/draggable-items';
|
|
25
25
|
import { PepDraggableItemsModule } from '@pepperi-addons/ngx-lib/draggable-items';
|
|
26
|
-
import * as i5$
|
|
26
|
+
import * as i5$1 from '@pepperi-addons/ngx-lib/checkbox';
|
|
27
27
|
import { PepCheckboxModule } from '@pepperi-addons/ngx-lib/checkbox';
|
|
28
|
-
import * as i4$
|
|
28
|
+
import * as i4$3 from '@pepperi-addons/ngx-lib/select';
|
|
29
29
|
import { PepSelectModule } from '@pepperi-addons/ngx-lib/select';
|
|
30
|
-
import * as i3$
|
|
30
|
+
import * as i3$4 from '@pepperi-addons/ngx-lib/textbox';
|
|
31
31
|
import { PepTextboxModule } from '@pepperi-addons/ngx-lib/textbox';
|
|
32
32
|
import * as i6 from '@pepperi-addons/ngx-composite-lib/group-buttons-settings';
|
|
33
33
|
import { PepGroupButtonsSettingsModule } from '@pepperi-addons/ngx-composite-lib/group-buttons-settings';
|
|
34
34
|
import { __awaiter } from 'tslib';
|
|
35
35
|
import * as i1 from '@ngx-translate/core';
|
|
36
36
|
import { TranslateModule } from '@ngx-translate/core';
|
|
37
|
-
import * as i3
|
|
37
|
+
import * as i3 from '@angular/material/menu';
|
|
38
38
|
import { MatMenuModule } from '@angular/material/menu';
|
|
39
39
|
import * as i4 from '@angular/material/badge';
|
|
40
40
|
import { MatBadgeModule } from '@angular/material/badge';
|
|
@@ -45,7 +45,7 @@ import { MatIconModule } from '@angular/material/icon';
|
|
|
45
45
|
import * as i1$1 from '@pepperi-addons/ngx-lib/icon';
|
|
46
46
|
import { pepIconSystemView, PepIconModule, pepIconDeviceDesktop, pepIconDeviceTablet, pepIconDeviceMobile } from '@pepperi-addons/ngx-lib/icon';
|
|
47
47
|
import { HttpClientModule } from '@angular/common/http';
|
|
48
|
-
import * as
|
|
48
|
+
import * as i3$3 from '@pepperi-addons/ngx-lib/skeleton-loader';
|
|
49
49
|
import { PepSkeletonLoaderModule } from '@pepperi-addons/ngx-lib/skeleton-loader';
|
|
50
50
|
import { coerceNumberProperty } from '@angular/cdk/coercion';
|
|
51
51
|
import { BehaviorSubject } from 'rxjs';
|
|
@@ -90,7 +90,7 @@ class HideInComponent {
|
|
|
90
90
|
}
|
|
91
91
|
}
|
|
92
92
|
HideInComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: HideInComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
93
|
-
HideInComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: HideInComponent, selector: "hide-in", inputs: { hideIn: "hideIn" }, outputs: { hideInChange: "hideInChange", menuOpened: "menuOpened", menuClosed: "menuClosed" }, ngImport: i0, template: "\n<pep-button sizeType=\"xs\" iconName=\"system_view\" [matMenuTriggerFor]=\"menu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\"\n class=\"badge-button\" [ngClass]=\"{ 'none': !hideIn || hideIn.length === 0}\"\n matBadge=\"{{ hideIn?.length }}\" matBadgePosition=\"after\" matBadgeSize=\"small\" \n></pep-button>\n\n<mat-menu #menu=\"matMenu\" class=\"hide-in-menu\">\n <div mat-menu-item class=\"title\" disabled>\n <span>{{('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:
|
|
93
|
+
HideInComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: HideInComponent, selector: "hide-in", inputs: { hideIn: "hideIn" }, outputs: { hideInChange: "hideInChange", menuOpened: "menuOpened", menuClosed: "menuClosed" }, ngImport: i0, template: "\n<pep-button sizeType=\"xs\" iconName=\"system_view\" [matMenuTriggerFor]=\"menu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\"\n class=\"badge-button\" [ngClass]=\"{ 'none': !hideIn || hideIn.length === 0}\"\n matBadge=\"{{ hideIn?.length }}\" matBadgePosition=\"after\" matBadgeSize=\"small\" \n></pep-button>\n\n<mat-menu #menu=\"matMenu\" class=\"hide-in-menu\">\n <div mat-menu-item class=\"title\" disabled>\n <span>{{('HIDE_IN.HIDE_IN_TITLE' | translate)}}</span>\n </div>\n <div mat-menu-item class=\"splitter\"></div>\n <ng-container *ngFor=\"let menuItem of menuItems\">\n <button mat-menu-item (click)=\"onItemClick($event, menuItem)\" title=\"{{ menuItem.text }}\">\n <mat-checkbox type=\"checkbox\" title=\"{{ menuItem.text }}\" class=\"md\"\n (change)=\"onItemClick($event, menuItem)\" [checked]=\"menuItem.selected\">\n <span class=\"pull-left flip title ellipsis\">{{ menuItem.text }}</span>\n </mat-checkbox>\n </button>\n </ng-container>\n</mat-menu>\n", styles: [".hide-in-menu .mat-menu-item.splitter{margin-inline:var(--pep-spacing-sm, .5rem)}.mat-menu-item ::ng-deep .mat-checkbox-layout .mat-checkbox-inner-container{margin-inline-end:var(--pep-spacing-xs, .25rem)!important}.badge-button .mat-badge-content{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);color:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));background-color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))!important;box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32)}.badge-button .mat-badge-content .svg-icon{fill:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.badge-button .mat-badge-content .svg-icon.stroke{fill:unset;stroke:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.badge-button.none ::ng-deep .mat-badge-content{display:none}.badge-button ::ng-deep .mat-badge-content{z-index:1;right:-4px!important}\n", ".hide-in-menu .mat-menu-item.title{color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.7)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i4.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4$1.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
|
|
94
94
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: HideInComponent, decorators: [{
|
|
95
95
|
type: Component,
|
|
96
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"] }]
|
|
@@ -170,9 +170,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
170
170
|
}], ctorParameters: function () { return [{ type: i1$1.PepIconRegistry }]; } });
|
|
171
171
|
|
|
172
172
|
class LayoutBuilderInternalService {
|
|
173
|
-
constructor(translate, dialogService) {
|
|
173
|
+
constructor(translate, dialogService, layoutService) {
|
|
174
174
|
this.translate = translate;
|
|
175
175
|
this.dialogService = dialogService;
|
|
176
|
+
this.layoutService = layoutService;
|
|
176
177
|
this._defaultSectionTitle = '';
|
|
177
178
|
// This configuration is for blocks behavior.
|
|
178
179
|
this._blocksLimitNumber = 0;
|
|
@@ -182,7 +183,7 @@ class LayoutBuilderInternalService {
|
|
|
182
183
|
this._editMode = false;
|
|
183
184
|
this._editableState = false;
|
|
184
185
|
// This subject is for the screen size change events.
|
|
185
|
-
this._screenSizeSubject = new BehaviorSubject(
|
|
186
|
+
this._screenSizeSubject = new BehaviorSubject(undefined);
|
|
186
187
|
// This subject is for demostrate the container size (Usage only in edit mode).
|
|
187
188
|
this._screenWidthSubject = new BehaviorSubject('100%');
|
|
188
189
|
// This subject is for load the current editor (Usage only in edit mode).
|
|
@@ -212,6 +213,9 @@ class LayoutBuilderInternalService {
|
|
|
212
213
|
// Set the default section name.
|
|
213
214
|
this._defaultSectionTitle = res;
|
|
214
215
|
});
|
|
216
|
+
this.layoutService.onResize$.subscribe((size) => {
|
|
217
|
+
this.notifyScreenSizeChange(size);
|
|
218
|
+
});
|
|
215
219
|
}
|
|
216
220
|
setBlocksConfig(value) {
|
|
217
221
|
var _a;
|
|
@@ -306,6 +310,9 @@ class LayoutBuilderInternalService {
|
|
|
306
310
|
notifySectionsColumnsDropListChange(sectionsColumnsDropList) {
|
|
307
311
|
this._sectionsColumnsDropListSubject.next(sectionsColumnsDropList);
|
|
308
312
|
}
|
|
313
|
+
notifyScreenSizeChange(size) {
|
|
314
|
+
this._screenSizeSubject.next(size);
|
|
315
|
+
}
|
|
309
316
|
updateLayoutEditorProperties(layoutView) {
|
|
310
317
|
if (this._editorsBreadCrumb[0]) {
|
|
311
318
|
const layoutEditor = {
|
|
@@ -456,7 +463,8 @@ class LayoutBuilderInternalService {
|
|
|
456
463
|
this.notifyPreviewModeChange(value);
|
|
457
464
|
}
|
|
458
465
|
getCurrentScreenType() {
|
|
459
|
-
|
|
466
|
+
var _a;
|
|
467
|
+
return this.getScreenType(((_a = this._screenSizeSubject) === null || _a === void 0 ? void 0 : _a.getValue()) || PepScreenSizeType.LG);
|
|
460
468
|
}
|
|
461
469
|
getScreenType(size) {
|
|
462
470
|
const screenType = size < PepScreenSizeType.MD ? 'Landscape' :
|
|
@@ -734,25 +742,25 @@ class LayoutBuilderInternalService {
|
|
|
734
742
|
let width = coerceNumberProperty(value, 0);
|
|
735
743
|
if (width === 0) {
|
|
736
744
|
this._screenWidthSubject.next('100%');
|
|
737
|
-
this.
|
|
745
|
+
this.notifyScreenSizeChange(PepScreenSizeType.XL);
|
|
738
746
|
}
|
|
739
747
|
else {
|
|
740
748
|
this._screenWidthSubject.next(`${width}px`);
|
|
741
749
|
// Change the size according the width.
|
|
742
750
|
if (width >= 1920) {
|
|
743
|
-
this.
|
|
751
|
+
this.notifyScreenSizeChange(PepScreenSizeType.XL);
|
|
744
752
|
}
|
|
745
753
|
else if (width >= 1280 && width < 1920) {
|
|
746
|
-
this.
|
|
754
|
+
this.notifyScreenSizeChange(PepScreenSizeType.LG);
|
|
747
755
|
}
|
|
748
756
|
else if (width >= 960 && width < 1280) {
|
|
749
|
-
this.
|
|
757
|
+
this.notifyScreenSizeChange(PepScreenSizeType.MD);
|
|
750
758
|
}
|
|
751
759
|
else if (width >= 600 && width < 960) {
|
|
752
|
-
this.
|
|
760
|
+
this.notifyScreenSizeChange(PepScreenSizeType.SM);
|
|
753
761
|
}
|
|
754
762
|
else if (width < 600) {
|
|
755
|
-
this.
|
|
763
|
+
this.notifyScreenSizeChange(PepScreenSizeType.XS);
|
|
756
764
|
}
|
|
757
765
|
}
|
|
758
766
|
}
|
|
@@ -775,14 +783,14 @@ class LayoutBuilderInternalService {
|
|
|
775
783
|
}
|
|
776
784
|
LayoutBuilderInternalService.AVAILABLE_BLOCKS_CONTAINER_ID = 'availableBlocks';
|
|
777
785
|
LayoutBuilderInternalService.MAIN_EDITOR_ID = 'main';
|
|
778
|
-
LayoutBuilderInternalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LayoutBuilderInternalService, deps: [{ token: i1.TranslateService }, { token: i2.PepDialogService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
786
|
+
LayoutBuilderInternalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LayoutBuilderInternalService, deps: [{ token: i1.TranslateService }, { token: i2$1.PepDialogService }, { token: i3$1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
779
787
|
LayoutBuilderInternalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LayoutBuilderInternalService, providedIn: 'root' });
|
|
780
788
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LayoutBuilderInternalService, decorators: [{
|
|
781
789
|
type: Injectable,
|
|
782
790
|
args: [{
|
|
783
791
|
providedIn: 'root',
|
|
784
792
|
}]
|
|
785
|
-
}], ctorParameters: function () { return [{ type: i1.TranslateService }, { type: i2.PepDialogService }]; } });
|
|
793
|
+
}], ctorParameters: function () { return [{ type: i1.TranslateService }, { type: i2$1.PepDialogService }, { type: i3$1.PepLayoutService }]; } });
|
|
786
794
|
|
|
787
795
|
class SectionBlockComponent extends BaseDestroyerDirective {
|
|
788
796
|
constructor(layoutBuilderInternalService) {
|
|
@@ -867,7 +875,7 @@ class SectionBlockComponent extends BaseDestroyerDirective {
|
|
|
867
875
|
}
|
|
868
876
|
}
|
|
869
877
|
SectionBlockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionBlockComponent, deps: [{ token: LayoutBuilderInternalService }], target: i0.ɵɵFactoryTarget.Component });
|
|
870
|
-
SectionBlockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: SectionBlockComponent, selector: "section-block", inputs: { blockTemplate: "blockTemplate", sectionKey: "sectionKey", sectionHeight: "sectionHeight", isMainEditorState: "isMainEditorState", editable: "editable", active: "active", blockContainer: "blockContainer", screenType: "screenType" }, outputs: { dragExited: "dragExited", dragEntered: "dragEntered" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"blockContainer?.BlockKey && (editable || !hideForCurrentScreenType)\" \n class=\"section-block-container\"\n [ngClass]=\"{ 'editable-state': editable, 'block-hidden-state': hideForCurrentScreenType, 'active-block': active }\"\n cdkDrag [cdkDragData]=\"blockContainer\" [cdkDragDisabled]=\"!editable || !isMainEditorState\" \n (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\"\n (cdkDragExited)=\"onDragExited($event)\" (cdkDragEntered)=\"onDragEntered($event)\">\n \n <pep-draggable-item *ngIf=\"editable && isMainEditorState\" cdkDragHandle style=\"cursor: grab;\"\n class=\"block-toolbar\" [title]=\"blockTitle\" >\n <ng-container pep-actions>\n <pep-button classNames=\"caution\" sizeType=\"xs\" iconName=\"system_bin\" (buttonClick)=\"onRemoveBlockClick();\"></pep-button>\n <!-- <hide-in [hideIn]=\"blockContainer.Hide\" (hideInChange)=\"onHideBlockChange($event)\"></hide-in> -->\n <pep-button sizeType=\"xs\" iconName=\"system_edit\" (buttonClick)=\"onEditBlockClick();\"></pep-button>\n </ng-container>\n </pep-draggable-item>\n <div class=\"block-template-wrapper\" [ngStyle]=\"{ 'overflow': (sectionHeight === 'unset' ? 'unset' : 'auto') }\">\n <div *ngIf=\"blockTemplate\" class=\"block-template\">\n <ng-container *ngTemplateOutlet=\"blockTemplate; context: { blockKey: blockContainer?.BlockKey }\">\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [".section-block-container{height:100%;width:100%}.section-block-container.editable-state:not(.active-block) .block-template-wrapper .block-template{pointer-events:none;opacity:.5}.section-block-container.editable-state.cdk-drag-preview .block-template-wrapper,.section-block-container.editable-state.cdk-drag-placeholder .block-toolbar{opacity:0}.section-block-container.editable-state .block-toolbar{position:absolute;top:50%;left:50%;width:95%;max-width:240px;transform:translate(-50%,-50%);z-index:3}.section-block-container.editable-state .block-toolbar:hover{z-index:12!important}.section-block-container .block-template-wrapper{height:100%;position:relative}.section-block-container .block-template-wrapper .block-template{display:block;height:100%;width:100%}\n", ".section-block-container.editable-state.block-hidden-state:not(.active-block){background:repeating-linear-gradient(45deg,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0),hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .8rem),repeating-linear-gradient(-45deg,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0),hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .8rem)}\n"], dependencies: [{ kind: "directive", type:
|
|
878
|
+
SectionBlockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: SectionBlockComponent, selector: "section-block", inputs: { blockTemplate: "blockTemplate", sectionKey: "sectionKey", sectionHeight: "sectionHeight", isMainEditorState: "isMainEditorState", editable: "editable", active: "active", blockContainer: "blockContainer", screenType: "screenType" }, outputs: { dragExited: "dragExited", dragEntered: "dragEntered" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"blockContainer?.BlockKey && (editable || !hideForCurrentScreenType)\" \n class=\"section-block-container\"\n [ngClass]=\"{ 'editable-state': editable, 'block-hidden-state': hideForCurrentScreenType, 'active-block': active }\"\n cdkDrag [cdkDragData]=\"blockContainer\" [cdkDragDisabled]=\"!editable || !isMainEditorState\" \n (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\"\n (cdkDragExited)=\"onDragExited($event)\" (cdkDragEntered)=\"onDragEntered($event)\">\n \n <pep-draggable-item *ngIf=\"editable && isMainEditorState\" cdkDragHandle style=\"cursor: grab;\"\n class=\"block-toolbar\" [title]=\"blockTitle\" >\n <ng-container pep-actions>\n <pep-button classNames=\"caution\" sizeType=\"xs\" iconName=\"system_bin\" (buttonClick)=\"onRemoveBlockClick();\"></pep-button>\n <!-- <hide-in [hideIn]=\"blockContainer.Hide\" (hideInChange)=\"onHideBlockChange($event)\"></hide-in> -->\n <pep-button sizeType=\"xs\" iconName=\"system_edit\" (buttonClick)=\"onEditBlockClick();\"></pep-button>\n </ng-container>\n </pep-draggable-item>\n <div class=\"block-template-wrapper\" [ngStyle]=\"{ 'overflow': (sectionHeight === 'unset' ? 'unset' : 'auto') }\">\n <div *ngIf=\"blockTemplate\" class=\"block-template\">\n <ng-container *ngTemplateOutlet=\"blockTemplate; context: { blockKey: blockContainer?.BlockKey }\">\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [".section-block-container{height:100%;width:100%}.section-block-container.editable-state:not(.active-block) .block-template-wrapper .block-template{pointer-events:none;opacity:.5}.section-block-container.editable-state.cdk-drag-preview .block-template-wrapper,.section-block-container.editable-state.cdk-drag-placeholder .block-toolbar{opacity:0}.section-block-container.editable-state .block-toolbar{position:absolute;top:50%;left:50%;width:95%;max-width:240px;transform:translate(-50%,-50%);z-index:3}.section-block-container.editable-state .block-toolbar:hover{z-index:12!important}.section-block-container .block-template-wrapper{height:100%;position:relative}.section-block-container .block-template-wrapper .block-template{display:block;height:100%;width:100%}\n", ".section-block-container.editable-state.block-hidden-state:not(.active-block){background:repeating-linear-gradient(45deg,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0),hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .8rem),repeating-linear-gradient(-45deg,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0),hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .8rem)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i4$1.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i7.DraggableItemComponent, selector: "pep-draggable-item", inputs: ["title", "titlePrefix", "titleClassNames", "data", "disabled", "shadow", "styleType", "toggleContent", "isToggleContentOpen", "actionsMenu", "menuStyleType"], outputs: ["contentToggle", "actionsMenuItemClick"] }] });
|
|
871
879
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionBlockComponent, decorators: [{
|
|
872
880
|
type: Component,
|
|
873
881
|
args: [{ selector: 'section-block', template: "<div *ngIf=\"blockContainer?.BlockKey && (editable || !hideForCurrentScreenType)\" \n class=\"section-block-container\"\n [ngClass]=\"{ 'editable-state': editable, 'block-hidden-state': hideForCurrentScreenType, 'active-block': active }\"\n cdkDrag [cdkDragData]=\"blockContainer\" [cdkDragDisabled]=\"!editable || !isMainEditorState\" \n (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\"\n (cdkDragExited)=\"onDragExited($event)\" (cdkDragEntered)=\"onDragEntered($event)\">\n \n <pep-draggable-item *ngIf=\"editable && isMainEditorState\" cdkDragHandle style=\"cursor: grab;\"\n class=\"block-toolbar\" [title]=\"blockTitle\" >\n <ng-container pep-actions>\n <pep-button classNames=\"caution\" sizeType=\"xs\" iconName=\"system_bin\" (buttonClick)=\"onRemoveBlockClick();\"></pep-button>\n <!-- <hide-in [hideIn]=\"blockContainer.Hide\" (hideInChange)=\"onHideBlockChange($event)\"></hide-in> -->\n <pep-button sizeType=\"xs\" iconName=\"system_edit\" (buttonClick)=\"onEditBlockClick();\"></pep-button>\n </ng-container>\n </pep-draggable-item>\n <div class=\"block-template-wrapper\" [ngStyle]=\"{ 'overflow': (sectionHeight === 'unset' ? 'unset' : 'auto') }\">\n <div *ngIf=\"blockTemplate\" class=\"block-template\">\n <ng-container *ngTemplateOutlet=\"blockTemplate; context: { blockKey: blockContainer?.BlockKey }\">\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [".section-block-container{height:100%;width:100%}.section-block-container.editable-state:not(.active-block) .block-template-wrapper .block-template{pointer-events:none;opacity:.5}.section-block-container.editable-state.cdk-drag-preview .block-template-wrapper,.section-block-container.editable-state.cdk-drag-placeholder .block-toolbar{opacity:0}.section-block-container.editable-state .block-toolbar{position:absolute;top:50%;left:50%;width:95%;max-width:240px;transform:translate(-50%,-50%);z-index:3}.section-block-container.editable-state .block-toolbar:hover{z-index:12!important}.section-block-container .block-template-wrapper{height:100%;position:relative}.section-block-container .block-template-wrapper .block-template{display:block;height:100%;width:100%}\n", ".section-block-container.editable-state.block-hidden-state:not(.active-block){background:repeating-linear-gradient(45deg,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0),hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .8rem),repeating-linear-gradient(-45deg,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0),hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .8rem)}\n"] }]
|
|
@@ -894,11 +902,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
894
902
|
}] } });
|
|
895
903
|
|
|
896
904
|
class SectionComponent extends BaseDestroyerDirective {
|
|
897
|
-
constructor(renderer, layoutBuilderInternalService
|
|
905
|
+
constructor(renderer, layoutBuilderInternalService) {
|
|
898
906
|
super();
|
|
899
907
|
this.renderer = renderer;
|
|
900
908
|
this.layoutBuilderInternalService = layoutBuilderInternalService;
|
|
901
|
-
this.layoutService = layoutService;
|
|
902
909
|
this.key = '';
|
|
903
910
|
this.name = '';
|
|
904
911
|
this._split = undefined;
|
|
@@ -1071,9 +1078,9 @@ class SectionComponent extends BaseDestroyerDirective {
|
|
|
1071
1078
|
this.layoutBuilderInternalService.sectionsChange$.pipe(this.getDestroyer()).subscribe(res => {
|
|
1072
1079
|
this.calculateIfSectionContainsBlocks();
|
|
1073
1080
|
});
|
|
1074
|
-
this.layoutService.onResize$.pipe(this.getDestroyer()).subscribe((size) => {
|
|
1075
|
-
|
|
1076
|
-
});
|
|
1081
|
+
// this.layoutService.onResize$.pipe(this.getDestroyer()).subscribe((size: any) => {
|
|
1082
|
+
// this.screenSize = size;
|
|
1083
|
+
// });
|
|
1077
1084
|
this.layoutBuilderInternalService.screenSizeChange$.pipe(this.getDestroyer()).subscribe((size) => {
|
|
1078
1085
|
this.screenSize = size;
|
|
1079
1086
|
});
|
|
@@ -1143,12 +1150,12 @@ class SectionComponent extends BaseDestroyerDirective {
|
|
|
1143
1150
|
//
|
|
1144
1151
|
}
|
|
1145
1152
|
}
|
|
1146
|
-
SectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionComponent, deps: [{ token: i0.Renderer2 }, { token: LayoutBuilderInternalService }
|
|
1147
|
-
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$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i4$1.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: SectionBlockComponent, selector: "section-block", inputs: ["blockTemplate", "sectionKey", "sectionHeight", "isMainEditorState", "editable", "active", "blockContainer", "screenType"], outputs: ["dragExited", "dragEntered"] }, { kind: "component", type: HideInComponent, selector: "hide-in", inputs: ["hideIn"], outputs: ["hideInChange", "menuOpened", "menuClosed"] }, { kind: "component", type: i5$1.DraggableItemComponent, selector: "pep-draggable-item", inputs: ["title", "titlePrefix", "titleClassNames", "data", "disabled", "shadow", "styleType", "toggleContent", "isToggleContentOpen", "actionsMenu", "menuStyleType"], outputs: ["contentToggle", "actionsMenuItemClick"] }] });
|
|
1153
|
+
SectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionComponent, deps: [{ token: i0.Renderer2 }, { token: LayoutBuilderInternalService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1154
|
+
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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i4$1.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: SectionBlockComponent, selector: "section-block", inputs: ["blockTemplate", "sectionKey", "sectionHeight", "isMainEditorState", "editable", "active", "blockContainer", "screenType"], outputs: ["dragExited", "dragEntered"] }, { kind: "component", type: HideInComponent, selector: "hide-in", inputs: ["hideIn"], outputs: ["hideInChange", "menuOpened", "menuClosed"] }, { kind: "component", type: i7.DraggableItemComponent, selector: "pep-draggable-item", inputs: ["title", "titlePrefix", "titleClassNames", "data", "disabled", "shadow", "styleType", "toggleContent", "isToggleContentOpen", "actionsMenu", "menuStyleType"], outputs: ["contentToggle", "actionsMenuItemClick"] }] });
|
|
1148
1155
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionComponent, decorators: [{
|
|
1149
1156
|
type: Component,
|
|
1150
1157
|
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"] }]
|
|
1151
|
-
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: LayoutBuilderInternalService }
|
|
1158
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: LayoutBuilderInternalService }]; }, propDecorators: { sectionContainerRef: [{
|
|
1152
1159
|
type: ViewChild,
|
|
1153
1160
|
args: ['sectionContainer']
|
|
1154
1161
|
}], columnsElementRef: [{
|
|
@@ -1243,9 +1250,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
1243
1250
|
class PepLayoutComponent extends BaseDestroyerDirective {
|
|
1244
1251
|
constructor(
|
|
1245
1252
|
// public customizationService: PepCustomizationService,
|
|
1246
|
-
layoutService
|
|
1253
|
+
// public layoutService: PepLayoutService,
|
|
1254
|
+
layoutBuilderInternalService, hostElement, renderer) {
|
|
1247
1255
|
super();
|
|
1248
|
-
this.layoutService = layoutService;
|
|
1249
1256
|
this.layoutBuilderInternalService = layoutBuilderInternalService;
|
|
1250
1257
|
this.hostElement = hostElement;
|
|
1251
1258
|
this.renderer = renderer;
|
|
@@ -1359,9 +1366,9 @@ class PepLayoutComponent extends BaseDestroyerDirective {
|
|
|
1359
1366
|
this.animateSkeleton();
|
|
1360
1367
|
}
|
|
1361
1368
|
});
|
|
1362
|
-
this.layoutService.onResize$.pipe(this.getDestroyer()).subscribe((size) => {
|
|
1363
|
-
|
|
1364
|
-
});
|
|
1369
|
+
// this.layoutService.onResize$.pipe(this.getDestroyer()).subscribe((size: any) => {
|
|
1370
|
+
// this.setScreentType(size);
|
|
1371
|
+
// });
|
|
1365
1372
|
this.layoutBuilderInternalService.screenSizeChange$.pipe(this.getDestroyer()).subscribe((size) => {
|
|
1366
1373
|
this.setScreentType(size);
|
|
1367
1374
|
});
|
|
@@ -1408,12 +1415,12 @@ class PepLayoutComponent extends BaseDestroyerDirective {
|
|
|
1408
1415
|
this.layoutBuilderInternalService.onSectionDragEnd(event);
|
|
1409
1416
|
}
|
|
1410
1417
|
}
|
|
1411
|
-
PepLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutComponent, deps: [{ token:
|
|
1412
|
-
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:
|
|
1418
|
+
PepLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutComponent, deps: [{ token: LayoutBuilderInternalService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
1419
|
+
PepLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepLayoutComponent, selector: "pep-layout", inputs: { layoutView: "layoutView", blockTemplate: "blockTemplate", showSkeleton: "showSkeleton" }, outputs: { layoutViewChange: "layoutViewChange", screenTypeChange: "screenTypeChange" }, host: { properties: { "style.padding-inline": "this.paddingInline" } }, viewQueries: [{ propertyName: "skeletonContainer", first: true, predicate: ["skeletonCont"], descendants: true, static: true }, { propertyName: "sectionsContainer", first: true, predicate: ["sectionsCont"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<!-- For the top spacing -->\n<div class=\"top-spacing spacing-{{verticalSpacing}}\" ></div>\n<div #sectionsCont cdkDropListGroup class=\"sections-container gap-{{ sectionsGap }}\" [ngClass]=\"{'preview-state': previewMode }\" \n cdkDropList (cdkDropListDropped)=\"onSectionDropped($event)\" [ngStyle]=\"{'grid-auto-rows': getSectionsTemplateRows()}\"\n >\n <section *ngFor=\"let section of sections$ | async; let i=index;\" \n class=\"draggable-section \" [ngClass]=\"selectedScreenType === 'Phablet' ? 'margin-'+sectionsGap : ''\" [blockTemplate]=\"blockTemplate\"\n [key]=\"section.Key\" [name]=\"section.Name || ('LAYOUT_BUILDER.SECTION' | translate) + ' ' + (i+1)\" [split]=\"section.Split\" [height]=\"section.Height\"\n [columns]=\"section.Columns\" [collapseOnTablet]=\"section.CollapseOnTablet || false\" [hideIn]=\"section.Hide || []\" [columnsGap]=\"columnsGap\"\n >\n </section>\n</div>\n<div #skeletonCont class=\"skeleton-container \">\n <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"xl\" ></pep-skeleton-loader>\n <div class=\"split-skeleton-container\">\n <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"max\" ></pep-skeleton-loader>\n <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"max\" ></pep-skeleton-loader>\n </div>\n <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"xl\" ></pep-skeleton-loader>\n\n <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"max\" ></pep-skeleton-loader>\n</div>\n<!-- For the bottom spacing -->\n<div class=\"bottom-spacing spacing-{{verticalSpacing}}\"></div>\n<pep-size-detector></pep-size-detector>", styles: [":host{display:grid;grid-template-areas:\"top-spacing\" \"content\" \"bottom-spacing\";grid-template-rows:auto 1fr auto;height:100%}.top-spacing{grid-area:top-spacing}.top-spacing.spacing-none{height:0}.top-spacing.spacing-sm{height:var(--pep-spacing-sm, .5rem)}.top-spacing.spacing-md{height:var(--pep-spacing-lg, 1rem)}.top-spacing.spacing-lg{height:var(--pep-spacing-2xl, 2rem)}.bottom-spacing{grid-area:bottom-spacing}.bottom-spacing.spacing-none{height:0}.bottom-spacing.spacing-sm{height:var(--pep-spacing-sm, .5rem)}.bottom-spacing.spacing-md{height:var(--pep-spacing-lg, 1rem)}.bottom-spacing.spacing-lg{height:var(--pep-spacing-2xl, 2rem)}.skeleton-container{display:grid;grid-area:content;height:100%;gap:var(--pep-spacing-lg, 1rem);grid-template-rows:auto auto auto 1fr;opacity:0}.skeleton-container .split-skeleton-container{display:grid;height:10rem;gap:var(--pep-spacing-lg, 1rem);grid-auto-flow:column}.sections-container{z-index:11;grid-area:content;width:100%;max-width:inherit;overflow-x:unset;margin:0 auto;position:relative;display:grid;grid-row:1px;height:inherit;opacity:0}.sections-container.gap-none{gap:0}.sections-container.gap-sm{gap:var(--pep-spacing-sm, .5rem)}.sections-container.gap-md{gap:var(--pep-spacing-lg, 1rem)}.sections-container.gap-lg{gap:var(--pep-spacing-2xl, 2rem)}.sections-container .draggable-section{display:block}.sections-container.preview-state section{display:contents}@keyframes in{0%{opacity:0;transform:translateY(-80);filter:blur(20px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}.in{animation-name:in;animation-direction:normal;animation-duration:1.2s;animation-fill-mode:forwards}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$3.PepSkeletonLoaderComponent, selector: "pep-skeleton-loader", inputs: ["rowHeightType", "rowsNumber", "lastRowOffset"] }, { kind: "component", type: i4$2.PepSizeDetectorComponent, selector: "pep-size-detector", inputs: ["showScreenSize", "useAsWebComponent"], outputs: ["sizeChange"] }, { kind: "directive", type: i3$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$2.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "component", type: SectionComponent, selector: "section", inputs: ["blockTemplate", "key", "name", "split", "height", "collapseOnTablet", "columns", "hideIn", "columnsGap"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
|
|
1413
1420
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutComponent, decorators: [{
|
|
1414
1421
|
type: Component,
|
|
1415
1422
|
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"] }]
|
|
1416
|
-
}], ctorParameters: function () { return [{ type:
|
|
1423
|
+
}], ctorParameters: function () { return [{ type: LayoutBuilderInternalService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { skeletonContainer: [{
|
|
1417
1424
|
type: ViewChild,
|
|
1418
1425
|
args: ['skeletonCont', { static: true }]
|
|
1419
1426
|
}], sectionsContainer: [{
|
|
@@ -1489,7 +1496,7 @@ class PepLayoutBuilderEditorComponent extends BaseDestroyerDirective {
|
|
|
1489
1496
|
}
|
|
1490
1497
|
}
|
|
1491
1498
|
PepLayoutBuilderEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutBuilderEditorComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
1492
|
-
PepLayoutBuilderEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepLayoutBuilderEditorComponent, selector: "pep-layout-builder-editor", inputs: { editorTabs: "editorTabs" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editorTabs && editorTabs.length > 0 then tabsTemplate else regularTemplate\">\n</ng-container>\n<ng-template #tabsTemplate>\n <mat-tab-group #tabGroup class=\"layout-builder-editor-tabs\" animationDuration=\"0ms\">\n <mat-tab *ngFor=\"let tab of editorTabs\" label=\"{{tab.title | translate}}\">\n <div class=\"layout-builder-editor-tab\">\n <ng-container *ngIf=\"tab.templateRef\">\n <ng-container *ngTemplateOutlet=\"tab.templateRef; context: { tabKey: tab.key }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!tab.templateRef\">\n <ng-content></ng-content>\n </ng-container>\n </div>\n </mat-tab>\n </mat-tab-group>\n\n</ng-template>\n<ng-template #regularTemplate>\n <div class=\"layout-builder-editor-container\">\n <ng-content></ng-content>\n </div>\n</ng-template>", styles: [""], dependencies: [{ kind: "directive", type:
|
|
1499
|
+
PepLayoutBuilderEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepLayoutBuilderEditorComponent, selector: "pep-layout-builder-editor", inputs: { editorTabs: "editorTabs" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editorTabs && editorTabs.length > 0 then tabsTemplate else regularTemplate\">\n</ng-container>\n<ng-template #tabsTemplate>\n <mat-tab-group #tabGroup class=\"layout-builder-editor-tabs\" animationDuration=\"0ms\">\n <mat-tab *ngFor=\"let tab of editorTabs\" label=\"{{tab.title | translate}}\">\n <div class=\"layout-builder-editor-tab\">\n <ng-container *ngIf=\"tab.templateRef\">\n <ng-container *ngTemplateOutlet=\"tab.templateRef; context: { tabKey: tab.key }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!tab.templateRef\">\n <ng-content></ng-content>\n </ng-container>\n </div>\n </mat-tab>\n </mat-tab-group>\n\n</ng-template>\n<ng-template #regularTemplate>\n <div class=\"layout-builder-editor-container\">\n <ng-content></ng-content>\n </div>\n</ng-template>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i2$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
|
|
1493
1500
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutBuilderEditorComponent, decorators: [{
|
|
1494
1501
|
type: Component,
|
|
1495
1502
|
args: [{ selector: 'pep-layout-builder-editor', template: "<ng-container *ngIf=\"editorTabs && editorTabs.length > 0 then tabsTemplate else regularTemplate\">\n</ng-container>\n<ng-template #tabsTemplate>\n <mat-tab-group #tabGroup class=\"layout-builder-editor-tabs\" animationDuration=\"0ms\">\n <mat-tab *ngFor=\"let tab of editorTabs\" label=\"{{tab.title | translate}}\">\n <div class=\"layout-builder-editor-tab\">\n <ng-container *ngIf=\"tab.templateRef\">\n <ng-container *ngTemplateOutlet=\"tab.templateRef; context: { tabKey: tab.key }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!tab.templateRef\">\n <ng-content></ng-content>\n </ng-container>\n </div>\n </mat-tab>\n </mat-tab-group>\n\n</ng-template>\n<ng-template #regularTemplate>\n <div class=\"layout-builder-editor-container\">\n <ng-content></ng-content>\n </div>\n</ng-template>" }]
|
|
@@ -1595,7 +1602,7 @@ class MainEditorComponent extends BaseDestroyerDirective {
|
|
|
1595
1602
|
}
|
|
1596
1603
|
}
|
|
1597
1604
|
MainEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: MainEditorComponent, deps: [{ token: LayoutBuilderInternalService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
1598
|
-
MainEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: MainEditorComponent, selector: "main-editor", inputs: { availableBlocksForDrag: "availableBlocksForDrag", hostObject: "hostObject" }, outputs: { hostObjectChange: "hostObjectChange" }, viewQueries: [{ propertyName: "_topContentRef", first: true, predicate: ["topContentRef"], descendants: true, static: true }, { propertyName: "availableBlocksContainer", first: true, predicate: ["availableBlocksContainer"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<pep-layout-builder-editor [editorTabs]=\"[\n {key: '1', title: 'LAYOUT_BUILDER.GENERAL', templateRef: firstTabTemplate}, \n {key: '2', title: 'LAYOUT_BUILDER.DESIGN', templateRef: secondTabTemplate}]\">\n</pep-layout-builder-editor>\n\n<ng-template #firstTabTemplate let-tabKey=\"tabKey\">\n <div #topContentRef class=\"layout-builder-editor-group\">\n <ng-content select=\"[layout-editor-top-content]\"></ng-content>\n <div *ngIf=\"showTopContent\" class=\"editor-separator\"></div>\n </div>\n <div>\n <label class=\"editor-title\">{{'LAYOUT_BUILDER.SECTIONS_TITLE' | translate}}</label>\n <pep-button class=\"add-section-button\" value=\"{{'LAYOUT_BUILDER.ADD_SECTION' | translate}}\" styleType=\"regular\" iconName=\"number_plus\" iconPosition=\"end\"\n (buttonClick)=\"onAddSectionClick($event)\"></pep-button>\n </div>\n <div class=\"editor-separator\"></div>\n <pep-draggable-items class=\"available-blocks\" [containerId]=\"availableBlocksContainerId\" [items]=\"availableBlocksForDrag\" [title]=\"'LAYOUT_BUILDER.BLOCKS_TITLE' | translate\"\n titleSizeType=\"xl\" titleType=\"with-bottom-border\" [showSearch]=\"true\" [dropAreaIds]=\"sectionsColumnsDropList\" (itemDragStarted)=\"onDragStart($event)\" (itemDragEnded)=\"onDragEnd($event)\">\n </pep-draggable-items>\n <!-- <div #bottomContentRef class=\"layout-builder-editor-group\">\n <div *ngIf=\"showBottomContent\" class=\"editor-separator\"></div>\n <ng-content select=\"[layout-editor-bottom-content]\"></ng-content>\n </div> -->\n</ng-template>\n\n<ng-template #secondTabTemplate let-tabKey=\"tabKey\">\n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"isFullWidth\" [label]=\"'LAYOUT_BUILDER.FULL_WIDTH_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"isFullWidthChange($event)\"></pep-checkbox>\n <pep-textbox [label]=\"'LAYOUT_BUILDER.MAX_WIDTH_TITLE' | translate\" type=\"int\" [disabled]=\"isFullWidth\" [value]=\"maxWidth.toString()\" (valueChange)=\"onMaxWidthChange($event)\"></pep-textbox>\n </div>\n <div class=\"editor-separator\"></div>\n <!-- Spacing -->\n <pep-group-buttons-settings [groupType]=\"'sizes'\" \n [header]=\"'LAYOUT_BUILDER.SPACING_TITLE' | translate\" [subHeader]=\"'LAYOUT_BUILDER.SPACING_HORIZONTAL_TITLE' | translate\"\n [btnKey]=\"horizontalSpacing.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n (btnkeyChange)=\"setColumnsHorizntalGap($event)\">\n </pep-group-buttons-settings>\n <pep-group-buttons-settings [groupType]=\"'sizes'\" \n [subHeader]=\"'LAYOUT_BUILDER.SPACING_VERTICAL_TITLE' | translate\"\n [btnKey]=\"verticalSpacing.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n (btnkeyChange)=\"setColumnsVerticalGap($event)\">\n </pep-group-buttons-settings>\n <div class=\"editor-separator\"></div>\n <!-- Gaps -->\n <pep-group-buttons-settings [groupType]=\"'sizes'\" \n [header]=\"'LAYOUT_BUILDER.GAPS_TITLE' | translate\" [subHeader]=\"'LAYOUT_BUILDER.SECTIONS_GAP_TITLE' | translate\"\n [btnKey]=\"sectionsGap.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n (btnkeyChange)=\"setSectionGap($event)\">\n </pep-group-buttons-settings>\n <pep-group-buttons-settings [groupType]=\"'sizes'\" \n [subHeader]=\"'LAYOUT_BUILDER.COLUMNS_GAP_TITLE' | translate\"\n [btnKey]=\"columnsGap.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n (btnkeyChange)=\"setColumnsGap($event)\">\n </pep-group-buttons-settings>\n <!-- Rounded Corners -->\n <!--\n <div class=\"editor-separator\"></div>\n <label class=\"editor-title\">{{'LAYOUT_BUILDER.ROUNDED_CORNERS_TITLE' | translate}}</label><br>\n <label class=\"body-xs ellipsis\">{{'LAYOUT_BUILDER.BORDER_RADIUS_TITLE' | translate}}</label>\n <pep-group-buttons [buttons]=\"sizesGroupButtons\" [selectedButtonKey]=\"roundedCorners\" buttonsClass=\"ms regular\" viewType=\"toggle\"\n (buttonClick)=\"setRoundedCorners($event)\"></pep-group-buttons> -->\n</ng-template>\n", styles: [":host pep-draggable-items ::ng-deep .draggable-items-overflow{padding-bottom:0!important}\n"], dependencies: [{ kind: "directive", type:
|
|
1605
|
+
MainEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: MainEditorComponent, selector: "main-editor", inputs: { availableBlocksForDrag: "availableBlocksForDrag", hostObject: "hostObject" }, outputs: { hostObjectChange: "hostObjectChange" }, viewQueries: [{ propertyName: "_topContentRef", first: true, predicate: ["topContentRef"], descendants: true, static: true }, { propertyName: "availableBlocksContainer", first: true, predicate: ["availableBlocksContainer"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<pep-layout-builder-editor [editorTabs]=\"[\n {key: '1', title: 'LAYOUT_BUILDER.GENERAL', templateRef: firstTabTemplate}, \n {key: '2', title: 'LAYOUT_BUILDER.DESIGN', templateRef: secondTabTemplate}]\">\n</pep-layout-builder-editor>\n\n<ng-template #firstTabTemplate let-tabKey=\"tabKey\">\n <div #topContentRef class=\"layout-builder-editor-group\">\n <ng-content select=\"[layout-editor-top-content]\"></ng-content>\n <div *ngIf=\"showTopContent\" class=\"editor-separator\"></div>\n </div>\n <div>\n <label class=\"editor-title\">{{'LAYOUT_BUILDER.SECTIONS_TITLE' | translate}}</label>\n <pep-button class=\"add-section-button\" value=\"{{'LAYOUT_BUILDER.ADD_SECTION' | translate}}\" styleType=\"regular\" iconName=\"number_plus\" iconPosition=\"end\"\n (buttonClick)=\"onAddSectionClick($event)\"></pep-button>\n </div>\n <div class=\"editor-separator\"></div>\n <pep-draggable-items class=\"available-blocks\" [containerId]=\"availableBlocksContainerId\" [items]=\"availableBlocksForDrag\" [title]=\"'LAYOUT_BUILDER.BLOCKS_TITLE' | translate\"\n titleSizeType=\"xl\" titleType=\"with-bottom-border\" [showSearch]=\"true\" [dropAreaIds]=\"sectionsColumnsDropList\" (itemDragStarted)=\"onDragStart($event)\" (itemDragEnded)=\"onDragEnd($event)\">\n </pep-draggable-items>\n <!-- <div #bottomContentRef class=\"layout-builder-editor-group\">\n <div *ngIf=\"showBottomContent\" class=\"editor-separator\"></div>\n <ng-content select=\"[layout-editor-bottom-content]\"></ng-content>\n </div> -->\n</ng-template>\n\n<ng-template #secondTabTemplate let-tabKey=\"tabKey\">\n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"isFullWidth\" [label]=\"'LAYOUT_BUILDER.FULL_WIDTH_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"isFullWidthChange($event)\"></pep-checkbox>\n <pep-textbox [label]=\"'LAYOUT_BUILDER.MAX_WIDTH_TITLE' | translate\" type=\"int\" [disabled]=\"isFullWidth\" [value]=\"maxWidth.toString()\" (valueChange)=\"onMaxWidthChange($event)\"></pep-textbox>\n </div>\n <div class=\"editor-separator\"></div>\n <!-- Spacing -->\n <pep-group-buttons-settings [groupType]=\"'sizes'\" \n [header]=\"'LAYOUT_BUILDER.SPACING_TITLE' | translate\" [subHeader]=\"'LAYOUT_BUILDER.SPACING_HORIZONTAL_TITLE' | translate\"\n [btnKey]=\"horizontalSpacing.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n (btnkeyChange)=\"setColumnsHorizntalGap($event)\">\n </pep-group-buttons-settings>\n <pep-group-buttons-settings [groupType]=\"'sizes'\" \n [subHeader]=\"'LAYOUT_BUILDER.SPACING_VERTICAL_TITLE' | translate\"\n [btnKey]=\"verticalSpacing.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n (btnkeyChange)=\"setColumnsVerticalGap($event)\">\n </pep-group-buttons-settings>\n <div class=\"editor-separator\"></div>\n <!-- Gaps -->\n <pep-group-buttons-settings [groupType]=\"'sizes'\" \n [header]=\"'LAYOUT_BUILDER.GAPS_TITLE' | translate\" [subHeader]=\"'LAYOUT_BUILDER.SECTIONS_GAP_TITLE' | translate\"\n [btnKey]=\"sectionsGap.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n (btnkeyChange)=\"setSectionGap($event)\">\n </pep-group-buttons-settings>\n <pep-group-buttons-settings [groupType]=\"'sizes'\" \n [subHeader]=\"'LAYOUT_BUILDER.COLUMNS_GAP_TITLE' | translate\"\n [btnKey]=\"columnsGap.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n (btnkeyChange)=\"setColumnsGap($event)\">\n </pep-group-buttons-settings>\n <!-- Rounded Corners -->\n <!--\n <div class=\"editor-separator\"></div>\n <label class=\"editor-title\">{{'LAYOUT_BUILDER.ROUNDED_CORNERS_TITLE' | translate}}</label><br>\n <label class=\"body-xs ellipsis\">{{'LAYOUT_BUILDER.BORDER_RADIUS_TITLE' | translate}}</label>\n <pep-group-buttons [buttons]=\"sizesGroupButtons\" [selectedButtonKey]=\"roundedCorners\" buttonsClass=\"ms regular\" viewType=\"toggle\"\n (buttonClick)=\"setRoundedCorners($event)\"></pep-group-buttons> -->\n</ng-template>\n", styles: [":host pep-draggable-items ::ng-deep .draggable-items-overflow{padding-bottom:0!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$4.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey", "regex", "regexError", "isInFocus"], outputs: ["valueChange", "keyup"] }, { kind: "component", type: i4$1.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i5$1.PepCheckboxComponent, selector: "pep-checkbox", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "additionalValue", "form", "isActive", "showTitle", "renderTitle", "layoutType", "visible"], outputs: ["valueChange"] }, { kind: "component", type: i6.GroupButtonsSettingsComponent, selector: "pep-group-buttons-settings", inputs: ["header", "subHeader", "groupType", "btnsArray", "excludeKeys", "useNone", "disabled", "dir", "titleSize", "bold", "btnKey"], outputs: ["btnkeyChange"] }, { kind: "component", type: i7.PepDraggableItemsComponent, selector: "pep-draggable-items", inputs: ["containerId", "showSearch", "title", "titleType", "titleSizeType", "itemPlaceholderType", "dropAreaIds", "items"], outputs: ["itemDragStarted", "itemDragEnded"] }, { kind: "component", type: PepLayoutBuilderEditorComponent, selector: "pep-layout-builder-editor", inputs: ["editorTabs"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
|
|
1599
1606
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: MainEditorComponent, decorators: [{
|
|
1600
1607
|
type: Component,
|
|
1601
1608
|
args: [{ selector: 'main-editor', template: "<pep-layout-builder-editor [editorTabs]=\"[\n {key: '1', title: 'LAYOUT_BUILDER.GENERAL', templateRef: firstTabTemplate}, \n {key: '2', title: 'LAYOUT_BUILDER.DESIGN', templateRef: secondTabTemplate}]\">\n</pep-layout-builder-editor>\n\n<ng-template #firstTabTemplate let-tabKey=\"tabKey\">\n <div #topContentRef class=\"layout-builder-editor-group\">\n <ng-content select=\"[layout-editor-top-content]\"></ng-content>\n <div *ngIf=\"showTopContent\" class=\"editor-separator\"></div>\n </div>\n <div>\n <label class=\"editor-title\">{{'LAYOUT_BUILDER.SECTIONS_TITLE' | translate}}</label>\n <pep-button class=\"add-section-button\" value=\"{{'LAYOUT_BUILDER.ADD_SECTION' | translate}}\" styleType=\"regular\" iconName=\"number_plus\" iconPosition=\"end\"\n (buttonClick)=\"onAddSectionClick($event)\"></pep-button>\n </div>\n <div class=\"editor-separator\"></div>\n <pep-draggable-items class=\"available-blocks\" [containerId]=\"availableBlocksContainerId\" [items]=\"availableBlocksForDrag\" [title]=\"'LAYOUT_BUILDER.BLOCKS_TITLE' | translate\"\n titleSizeType=\"xl\" titleType=\"with-bottom-border\" [showSearch]=\"true\" [dropAreaIds]=\"sectionsColumnsDropList\" (itemDragStarted)=\"onDragStart($event)\" (itemDragEnded)=\"onDragEnd($event)\">\n </pep-draggable-items>\n <!-- <div #bottomContentRef class=\"layout-builder-editor-group\">\n <div *ngIf=\"showBottomContent\" class=\"editor-separator\"></div>\n <ng-content select=\"[layout-editor-bottom-content]\"></ng-content>\n </div> -->\n</ng-template>\n\n<ng-template #secondTabTemplate let-tabKey=\"tabKey\">\n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"isFullWidth\" [label]=\"'LAYOUT_BUILDER.FULL_WIDTH_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"isFullWidthChange($event)\"></pep-checkbox>\n <pep-textbox [label]=\"'LAYOUT_BUILDER.MAX_WIDTH_TITLE' | translate\" type=\"int\" [disabled]=\"isFullWidth\" [value]=\"maxWidth.toString()\" (valueChange)=\"onMaxWidthChange($event)\"></pep-textbox>\n </div>\n <div class=\"editor-separator\"></div>\n <!-- Spacing -->\n <pep-group-buttons-settings [groupType]=\"'sizes'\" \n [header]=\"'LAYOUT_BUILDER.SPACING_TITLE' | translate\" [subHeader]=\"'LAYOUT_BUILDER.SPACING_HORIZONTAL_TITLE' | translate\"\n [btnKey]=\"horizontalSpacing.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n (btnkeyChange)=\"setColumnsHorizntalGap($event)\">\n </pep-group-buttons-settings>\n <pep-group-buttons-settings [groupType]=\"'sizes'\" \n [subHeader]=\"'LAYOUT_BUILDER.SPACING_VERTICAL_TITLE' | translate\"\n [btnKey]=\"verticalSpacing.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n (btnkeyChange)=\"setColumnsVerticalGap($event)\">\n </pep-group-buttons-settings>\n <div class=\"editor-separator\"></div>\n <!-- Gaps -->\n <pep-group-buttons-settings [groupType]=\"'sizes'\" \n [header]=\"'LAYOUT_BUILDER.GAPS_TITLE' | translate\" [subHeader]=\"'LAYOUT_BUILDER.SECTIONS_GAP_TITLE' | translate\"\n [btnKey]=\"sectionsGap.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n (btnkeyChange)=\"setSectionGap($event)\">\n </pep-group-buttons-settings>\n <pep-group-buttons-settings [groupType]=\"'sizes'\" \n [subHeader]=\"'LAYOUT_BUILDER.COLUMNS_GAP_TITLE' | translate\"\n [btnKey]=\"columnsGap.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n (btnkeyChange)=\"setColumnsGap($event)\">\n </pep-group-buttons-settings>\n <!-- Rounded Corners -->\n <!--\n <div class=\"editor-separator\"></div>\n <label class=\"editor-title\">{{'LAYOUT_BUILDER.ROUNDED_CORNERS_TITLE' | translate}}</label><br>\n <label class=\"body-xs ellipsis\">{{'LAYOUT_BUILDER.BORDER_RADIUS_TITLE' | translate}}</label>\n <pep-group-buttons [buttons]=\"sizesGroupButtons\" [selectedButtonKey]=\"roundedCorners\" buttonsClass=\"ms regular\" viewType=\"toggle\"\n (buttonClick)=\"setRoundedCorners($event)\"></pep-group-buttons> -->\n</ng-template>\n", styles: [":host pep-draggable-items ::ng-deep .draggable-items-overflow{padding-bottom:0!important}\n"] }]
|
|
@@ -1894,12 +1901,12 @@ class SectionEditorComponent {
|
|
|
1894
1901
|
this.updateHostObject();
|
|
1895
1902
|
}
|
|
1896
1903
|
}
|
|
1897
|
-
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 });
|
|
1898
|
-
SectionEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: SectionEditorComponent, selector: "section-editor", inputs: { hostObject: "hostObject" }, outputs: { hostObjectChange: "hostObjectChange" }, ngImport: i0, template: "<pep-layout-builder-editor class=\"section-editor-container\">\n <div>\n <pep-textbox [value]=\"sectionName\" [label]=\"'LAYOUT_BUILDER.SECTION_NAME_TITLE' | translate\" (valueChange)=\"onSectionNameChange($event)\"></pep-textbox>\n </div>\n <!-- \n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"isAutoHeight\" [label]=\"'LAYOUT_BUILDER.AUTO_HEIGHT_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"isAutoHeightChange($event)\"></pep-checkbox>\n <pep-textbox [label]=\"'LAYOUT_BUILDER.HEIGHT_TITLE' | translate\" type=\"int\" [minValue]=\"MIN_HEIGHT\" [disabled]=\"isAutoHeight\" [value]=\"height\" (valueChange)=\"onHeightChange($event)\"></pep-textbox> \n </div>\n -->\n <div class=\"editor-separator\"></div>\n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"subSections\" [label]=\"'LAYOUT_BUILDER.SUB_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onSubSectionsChange($event)\"></pep-checkbox>\n <div class=\"split-area\">\n <pep-select [label]=\"'LAYOUT_BUILDER.SECTIONS_TITLE' | translate\" [value]=\"partsNumber\" [options]=\"partsNumberOptions\" \n (valueChange)=\"onPartsNumberChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n <pep-select [label]=\"'LAYOUT_BUILDER.SPLIT_TITLE' | translate\" [value]=\"split || ''\" [options]=\"splitOptions\"\n (valueChange)=\"onSplitChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n </div>\n </div>\n <div class=\"editor-separator\"></div>\n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"collapseOnTablet\" [label]=\"'LAYOUT_BUILDER.COLLAPSE_ON_TABLET_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onCollapseOnTabletChange($event)\"></pep-checkbox>\n <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.COLLAPSE_ON_TABLET_DESCRIPTION' | translate)}}</span>\n </div>\n <div class=\"editor-separator\"></div>\n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"fillHeight\" [label]=\"'LAYOUT_BUILDER.FILL_HEIGHT_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onFillHeightChange($event)\"></pep-checkbox>\n <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.FILL_HEIGHT_SECTION_DESCRIPTION' | translate)}}</span>\n </div>\n</pep-layout-builder-editor>\n\n<!-- <div class=\"section-editor-container layout-builder-editor-container\">\n <div>\n <pep-textbox [value]=\"sectionName\" [label]=\"'LAYOUT_BUILDER.SECTION_NAME_TITLE' | translate\" (valueChange)=\"onSectionNameChange($event)\"></pep-textbox>\n </div>\n <div class=\"editor-separator\"></div>\n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"subSections\" [label]=\"'LAYOUT_BUILDER.SUB_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onSubSectionsChange($event)\"></pep-checkbox>\n <div class=\"split-area\">\n <pep-select [label]=\"'LAYOUT_BUILDER.SECTIONS_TITLE' | translate\" [value]=\"partsNumber\" [options]=\"partsNumberOptions\" \n (valueChange)=\"onPartsNumberChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n <pep-select [label]=\"'LAYOUT_BUILDER.SPLIT_TITLE' | translate\" [value]=\"split || ''\" [options]=\"splitOptions\"\n (valueChange)=\"onSplitChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n </div>\n </div>\n <div class=\"editor-separator\"></div>\n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"collapseOnTablet\" [label]=\"'LAYOUT_BUILDER.COLLAPSE_ON_TABLET_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onCollapseOnTabletChange($event)\"></pep-checkbox>\n <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.COLLAPSE_ON_TABLET_DESCRIPTION' | translate)}}</span>\n </div>\n <div class=\"editor-separator\"></div>\n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"fillHeight\" [label]=\"'LAYOUT_BUILDER.FILL_HEIGHT_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onFillHeightChange($event)\"></pep-checkbox>\n <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.FILL_HEIGHT_SECTION_DESCRIPTION' | translate)}}</span>\n </div>\n</div> -->\n", styles: [".section-editor-container .split-area{display:grid;grid-template-columns:1fr 1fr;gap:var(--pep-spacing-lg, 1rem)}\n"], dependencies: [{ kind: "component", type: i3$
|
|
1904
|
+
SectionEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionEditorComponent, deps: [{ token: i1.TranslateService }, { token: i2$1.PepDialogService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1905
|
+
SectionEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: SectionEditorComponent, selector: "section-editor", inputs: { hostObject: "hostObject" }, outputs: { hostObjectChange: "hostObjectChange" }, ngImport: i0, template: "<pep-layout-builder-editor class=\"section-editor-container\">\n <div>\n <pep-textbox [value]=\"sectionName\" [label]=\"'LAYOUT_BUILDER.SECTION_NAME_TITLE' | translate\" (valueChange)=\"onSectionNameChange($event)\"></pep-textbox>\n </div>\n <!-- \n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"isAutoHeight\" [label]=\"'LAYOUT_BUILDER.AUTO_HEIGHT_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"isAutoHeightChange($event)\"></pep-checkbox>\n <pep-textbox [label]=\"'LAYOUT_BUILDER.HEIGHT_TITLE' | translate\" type=\"int\" [minValue]=\"MIN_HEIGHT\" [disabled]=\"isAutoHeight\" [value]=\"height\" (valueChange)=\"onHeightChange($event)\"></pep-textbox> \n </div>\n -->\n <div class=\"editor-separator\"></div>\n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"subSections\" [label]=\"'LAYOUT_BUILDER.SUB_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onSubSectionsChange($event)\"></pep-checkbox>\n <div class=\"split-area\">\n <pep-select [label]=\"'LAYOUT_BUILDER.SECTIONS_TITLE' | translate\" [value]=\"partsNumber\" [options]=\"partsNumberOptions\" \n (valueChange)=\"onPartsNumberChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n <pep-select [label]=\"'LAYOUT_BUILDER.SPLIT_TITLE' | translate\" [value]=\"split || ''\" [options]=\"splitOptions\"\n (valueChange)=\"onSplitChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n </div>\n </div>\n <div class=\"editor-separator\"></div>\n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"collapseOnTablet\" [label]=\"'LAYOUT_BUILDER.COLLAPSE_ON_TABLET_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onCollapseOnTabletChange($event)\"></pep-checkbox>\n <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.COLLAPSE_ON_TABLET_DESCRIPTION' | translate)}}</span>\n </div>\n <div class=\"editor-separator\"></div>\n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"fillHeight\" [label]=\"'LAYOUT_BUILDER.FILL_HEIGHT_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onFillHeightChange($event)\"></pep-checkbox>\n <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.FILL_HEIGHT_SECTION_DESCRIPTION' | translate)}}</span>\n </div>\n</pep-layout-builder-editor>\n\n<!-- <div class=\"section-editor-container layout-builder-editor-container\">\n <div>\n <pep-textbox [value]=\"sectionName\" [label]=\"'LAYOUT_BUILDER.SECTION_NAME_TITLE' | translate\" (valueChange)=\"onSectionNameChange($event)\"></pep-textbox>\n </div>\n <div class=\"editor-separator\"></div>\n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"subSections\" [label]=\"'LAYOUT_BUILDER.SUB_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onSubSectionsChange($event)\"></pep-checkbox>\n <div class=\"split-area\">\n <pep-select [label]=\"'LAYOUT_BUILDER.SECTIONS_TITLE' | translate\" [value]=\"partsNumber\" [options]=\"partsNumberOptions\" \n (valueChange)=\"onPartsNumberChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n <pep-select [label]=\"'LAYOUT_BUILDER.SPLIT_TITLE' | translate\" [value]=\"split || ''\" [options]=\"splitOptions\"\n (valueChange)=\"onSplitChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n </div>\n </div>\n <div class=\"editor-separator\"></div>\n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"collapseOnTablet\" [label]=\"'LAYOUT_BUILDER.COLLAPSE_ON_TABLET_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onCollapseOnTabletChange($event)\"></pep-checkbox>\n <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.COLLAPSE_ON_TABLET_DESCRIPTION' | translate)}}</span>\n </div>\n <div class=\"editor-separator\"></div>\n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"fillHeight\" [label]=\"'LAYOUT_BUILDER.FILL_HEIGHT_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onFillHeightChange($event)\"></pep-checkbox>\n <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.FILL_HEIGHT_SECTION_DESCRIPTION' | translate)}}</span>\n </div>\n</div> -->\n", styles: [".section-editor-container .split-area{display:grid;grid-template-columns:1fr 1fr;gap:var(--pep-spacing-lg, 1rem)}\n"], dependencies: [{ kind: "component", type: i3$4.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey", "regex", "regexError", "isInFocus"], outputs: ["valueChange", "keyup"] }, { kind: "component", type: i4$3.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "placeholder", "placeholderWhenDisabled", "options", "visible", "emptyOption", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "renderTitle", "typeaheadDebounceInterval", "addValueToOptionsIfNotExist"], outputs: ["valueChange"] }, { kind: "component", type: i5$1.PepCheckboxComponent, selector: "pep-checkbox", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "additionalValue", "form", "isActive", "showTitle", "renderTitle", "layoutType", "visible"], outputs: ["valueChange"] }, { kind: "component", type: PepLayoutBuilderEditorComponent, selector: "pep-layout-builder-editor", inputs: ["editorTabs"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
|
|
1899
1906
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionEditorComponent, decorators: [{
|
|
1900
1907
|
type: Component,
|
|
1901
1908
|
args: [{ selector: 'section-editor', template: "<pep-layout-builder-editor class=\"section-editor-container\">\n <div>\n <pep-textbox [value]=\"sectionName\" [label]=\"'LAYOUT_BUILDER.SECTION_NAME_TITLE' | translate\" (valueChange)=\"onSectionNameChange($event)\"></pep-textbox>\n </div>\n <!-- \n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"isAutoHeight\" [label]=\"'LAYOUT_BUILDER.AUTO_HEIGHT_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"isAutoHeightChange($event)\"></pep-checkbox>\n <pep-textbox [label]=\"'LAYOUT_BUILDER.HEIGHT_TITLE' | translate\" type=\"int\" [minValue]=\"MIN_HEIGHT\" [disabled]=\"isAutoHeight\" [value]=\"height\" (valueChange)=\"onHeightChange($event)\"></pep-textbox> \n </div>\n -->\n <div class=\"editor-separator\"></div>\n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"subSections\" [label]=\"'LAYOUT_BUILDER.SUB_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onSubSectionsChange($event)\"></pep-checkbox>\n <div class=\"split-area\">\n <pep-select [label]=\"'LAYOUT_BUILDER.SECTIONS_TITLE' | translate\" [value]=\"partsNumber\" [options]=\"partsNumberOptions\" \n (valueChange)=\"onPartsNumberChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n <pep-select [label]=\"'LAYOUT_BUILDER.SPLIT_TITLE' | translate\" [value]=\"split || ''\" [options]=\"splitOptions\"\n (valueChange)=\"onSplitChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n </div>\n </div>\n <div class=\"editor-separator\"></div>\n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"collapseOnTablet\" [label]=\"'LAYOUT_BUILDER.COLLAPSE_ON_TABLET_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onCollapseOnTabletChange($event)\"></pep-checkbox>\n <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.COLLAPSE_ON_TABLET_DESCRIPTION' | translate)}}</span>\n </div>\n <div class=\"editor-separator\"></div>\n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"fillHeight\" [label]=\"'LAYOUT_BUILDER.FILL_HEIGHT_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onFillHeightChange($event)\"></pep-checkbox>\n <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.FILL_HEIGHT_SECTION_DESCRIPTION' | translate)}}</span>\n </div>\n</pep-layout-builder-editor>\n\n<!-- <div class=\"section-editor-container layout-builder-editor-container\">\n <div>\n <pep-textbox [value]=\"sectionName\" [label]=\"'LAYOUT_BUILDER.SECTION_NAME_TITLE' | translate\" (valueChange)=\"onSectionNameChange($event)\"></pep-textbox>\n </div>\n <div class=\"editor-separator\"></div>\n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"subSections\" [label]=\"'LAYOUT_BUILDER.SUB_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onSubSectionsChange($event)\"></pep-checkbox>\n <div class=\"split-area\">\n <pep-select [label]=\"'LAYOUT_BUILDER.SECTIONS_TITLE' | translate\" [value]=\"partsNumber\" [options]=\"partsNumberOptions\" \n (valueChange)=\"onPartsNumberChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n <pep-select [label]=\"'LAYOUT_BUILDER.SPLIT_TITLE' | translate\" [value]=\"split || ''\" [options]=\"splitOptions\"\n (valueChange)=\"onSplitChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n </div>\n </div>\n <div class=\"editor-separator\"></div>\n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"collapseOnTablet\" [label]=\"'LAYOUT_BUILDER.COLLAPSE_ON_TABLET_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onCollapseOnTabletChange($event)\"></pep-checkbox>\n <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.COLLAPSE_ON_TABLET_DESCRIPTION' | translate)}}</span>\n </div>\n <div class=\"editor-separator\"></div>\n <div>\n <pep-checkbox class=\"checkbox-as-title\" [value]=\"fillHeight\" [label]=\"'LAYOUT_BUILDER.FILL_HEIGHT_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onFillHeightChange($event)\"></pep-checkbox>\n <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.FILL_HEIGHT_SECTION_DESCRIPTION' | translate)}}</span>\n </div>\n</div> -->\n", styles: [".section-editor-container .split-area{display:grid;grid-template-columns:1fr 1fr;gap:var(--pep-spacing-lg, 1rem)}\n"] }]
|
|
1902
|
-
}], ctorParameters: function () { return [{ type: i1.TranslateService }, { type: i2.PepDialogService }]; }, propDecorators: { hostObject: [{
|
|
1909
|
+
}], ctorParameters: function () { return [{ type: i1.TranslateService }, { type: i2$1.PepDialogService }]; }, propDecorators: { hostObject: [{
|
|
1903
1910
|
type: Input
|
|
1904
1911
|
}], hostObjectChange: [{
|
|
1905
1912
|
type: Output
|
|
@@ -2093,12 +2100,12 @@ class PepLayoutBuilderComponent extends BaseDestroyerDirective {
|
|
|
2093
2100
|
}
|
|
2094
2101
|
}
|
|
2095
2102
|
}
|
|
2096
|
-
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:
|
|
2097
|
-
PepLayoutBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepLayoutBuilderComponent, selector: "pep-layout-builder", inputs: { availableBlocksForDrag: "availableBlocksForDrag", blocksLayoutConfig: "blocksLayoutConfig", layoutEditorTitle: "layoutEditorTitle" }, outputs: { backClick: "backClick", editorChange: "editorChange", blockAdded: "blockAdded", blocksRemoved: "blocksRemoved" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "layoutBuilderWrapper", first: true, predicate: ["layoutBuilderWrapper"], descendants: true, static: true }, { propertyName: "sideBarComponent", first: true, predicate: PepSideBarComponent, descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"lockScreen\" class=\"cdk-overlay-backdrop cdk-overlay-dark-backdrop cdk-overlay-backdrop-showing\"></div>\n\n<pep-page-layout [showShadow]=\"!previewMode && currentEditor !== null\" >\n <div pep-side-area *ngIf=\"!previewMode && currentEditor\" style=\"height: inherit;\">\n <pep-side-bar #sideBar [ignoreResize]=\"true\" (stateChange)=\"onSidebarStateChange($event)\">\n <div header-content class=\"side-bar-title\">\n <pep-button class=\"back-button\" sizeType=\"sm\" iconName=\"arrow_left_alt\" (buttonClick)=\"onNavigateBackFromEditor();\"></pep-button>\n <div #editorTitle class=\"title title-lg ellipsis\" \n [title]=\"currentEditor.type === 'layout-builder' ? (layoutEditorTitle || currentEditor.title) : currentEditor.title\">\n <span>{{ editorTitle.title }}</span>\n </div>\n </div>\n <div class=\"layout-builder-editor-wrapper\">\n <main-editor *ngIf=\"currentEditor.type === 'layout-builder'\" [availableBlocksForDrag]=\"availableBlocksForDrag\"\n [hostObject]=\"currentEditor.hostObject\" (hostObjectChange)=\"onLayoutEditorObjectChange($event)\"\n >\n <ng-container layout-editor-top-content>\n <ng-content select=\"[layout-editor-top-content]\"></ng-content>\n </ng-container>\n <!-- <ng-container layout-editor-bottom-content>\n <ng-content select=\"[layout-editor-bottom-content]\"></ng-content>\n </ng-container> -->\n </main-editor>\n \n <section-editor *ngIf=\"currentEditor.type === 'section'\" \n [hostObject]=\"currentEditor.hostObject\" (hostObjectChange)=\"onSectionEditorObjectChange($event)\"></section-editor>\n \n <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)}}: </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$4.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: i4$1.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i8.PepGroupButtonsComponent, selector: "pep-group-buttons", inputs: ["viewType", "styleType", "sizeType", "buttons", "buttonsDisabled", "supportUnselect", "selectedButtonKey", "stretch"], outputs: ["buttonClick"] }, { kind: "component", type: MainEditorComponent, selector: "main-editor", inputs: ["availableBlocksForDrag", "hostObject"], outputs: ["hostObjectChange"] }, { kind: "component", type: SectionEditorComponent, selector: "section-editor", inputs: ["hostObject"], outputs: ["hostObjectChange"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
|
|
2103
|
+
PepLayoutBuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutBuilderComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.TranslateService }, { token: LayoutBuilderInternalService }, { token: i3$1.PepAddonService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2104
|
+
PepLayoutBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepLayoutBuilderComponent, selector: "pep-layout-builder", inputs: { availableBlocksForDrag: "availableBlocksForDrag", blocksLayoutConfig: "blocksLayoutConfig", layoutEditorTitle: "layoutEditorTitle" }, outputs: { backClick: "backClick", editorChange: "editorChange", blockAdded: "blockAdded", blocksRemoved: "blocksRemoved" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "layoutBuilderWrapper", first: true, predicate: ["layoutBuilderWrapper"], descendants: true, static: true }, { propertyName: "sideBarComponent", first: true, predicate: PepSideBarComponent, descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"lockScreen\" class=\"cdk-overlay-backdrop cdk-overlay-dark-backdrop cdk-overlay-backdrop-showing\"></div>\n\n<pep-page-layout [showShadow]=\"!previewMode && currentEditor !== null\" >\n <div pep-side-area *ngIf=\"!previewMode && currentEditor\" style=\"height: inherit;\">\n <pep-side-bar #sideBar [ignoreResize]=\"true\" (stateChange)=\"onSidebarStateChange($event)\">\n <div header-content class=\"side-bar-title\">\n <pep-button class=\"back-button\" sizeType=\"sm\" iconName=\"arrow_left_alt\" (buttonClick)=\"onNavigateBackFromEditor();\"></pep-button>\n <div #editorTitle class=\"title title-lg ellipsis\" \n [title]=\"currentEditor.type === 'layout-builder' ? (layoutEditorTitle || currentEditor.title) : currentEditor.title\">\n <span>{{ editorTitle.title }}</span>\n </div>\n </div>\n <div class=\"layout-builder-editor-wrapper\">\n <main-editor *ngIf=\"currentEditor.type === 'layout-builder'\" [availableBlocksForDrag]=\"availableBlocksForDrag\"\n [hostObject]=\"currentEditor.hostObject\" (hostObjectChange)=\"onLayoutEditorObjectChange($event)\"\n >\n <ng-container layout-editor-top-content>\n <ng-content select=\"[layout-editor-top-content]\"></ng-content>\n </ng-container>\n <!-- <ng-container layout-editor-bottom-content>\n <ng-content select=\"[layout-editor-bottom-content]\"></ng-content>\n </ng-container> -->\n </main-editor>\n \n <section-editor *ngIf=\"currentEditor.type === 'section'\" \n [hostObject]=\"currentEditor.hostObject\" (hostObjectChange)=\"onSectionEditorObjectChange($event)\"></section-editor>\n \n <ng-container *ngIf=\"currentEditor.type === 'block'\" >\n <ng-content select=\"[block-editor-content]\"></ng-content>\n </ng-container>\n </div>\n </pep-side-bar>\n </div>\n <ng-container pep-main-area>\n <div class=\"main-area-container\" [ngClass]=\"{'preview-mode': previewMode }\">\n <div class=\"header-container\" >\n <ng-container *ngIf=\"!previewMode; then editorTitleTemplate; else previewTitleTemplate\"></ng-container>\n <ng-template #editorTitleTemplate>\n <div>\n <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.VIEWPORT_WIDTH' | translate)}}: </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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$2.PepPageLayoutComponent, selector: "pep-page-layout", inputs: ["addPadding", "showShadow"] }, { kind: "component", type: i6$1.PepSideBarComponent, selector: "pep-side-bar", inputs: ["position", "ignoreResize", "showHeader", "showFooter", "showToggle", "useAsWebComponent"], outputs: ["stateChange"] }, { kind: "component", type: i4$1.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i8.PepGroupButtonsComponent, selector: "pep-group-buttons", inputs: ["viewType", "styleType", "sizeType", "buttons", "buttonsDisabled", "supportUnselect", "selectedButtonKey", "stretch"], outputs: ["buttonClick"] }, { kind: "component", type: MainEditorComponent, selector: "main-editor", inputs: ["availableBlocksForDrag", "hostObject"], outputs: ["hostObjectChange"] }, { kind: "component", type: SectionEditorComponent, selector: "section-editor", inputs: ["hostObject"], outputs: ["hostObjectChange"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
|
|
2098
2105
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutBuilderComponent, decorators: [{
|
|
2099
2106
|
type: Component,
|
|
2100
|
-
args: [{ selector: 'pep-layout-builder', template: "<div *ngIf=\"lockScreen\" class=\"cdk-overlay-backdrop cdk-overlay-dark-backdrop cdk-overlay-backdrop-showing\"></div>\n\n<pep-page-layout [showShadow]=\"!previewMode && currentEditor !== null\" >\n <div pep-side-area *ngIf=\"!previewMode && currentEditor\" style=\"height: inherit;\">\n <pep-side-bar #sideBar [ignoreResize]=\"true\" (stateChange)=\"onSidebarStateChange($event)\">\n <div header-content class=\"side-bar-title\">\n <pep-button class=\"back-button\" sizeType=\"sm\" iconName=\"arrow_left_alt\" (buttonClick)=\"onNavigateBackFromEditor();\"></pep-button>\n <div #editorTitle class=\"title title-lg ellipsis\" \n [title]=\"currentEditor.type === 'layout-builder' ? (layoutEditorTitle || currentEditor.title) : currentEditor.title\">\n <span>{{ editorTitle.title }}</span>\n </div>\n </div>\n <div class=\"layout-builder-editor-wrapper\">\n <main-editor *ngIf=\"currentEditor.type === 'layout-builder'\" [availableBlocksForDrag]=\"availableBlocksForDrag\"\n [hostObject]=\"currentEditor.hostObject\" (hostObjectChange)=\"onLayoutEditorObjectChange($event)\"\n >\n <ng-container layout-editor-top-content>\n <ng-content select=\"[layout-editor-top-content]\"></ng-content>\n </ng-container>\n <!-- <ng-container layout-editor-bottom-content>\n <ng-content select=\"[layout-editor-bottom-content]\"></ng-content>\n </ng-container> -->\n </main-editor>\n \n <section-editor *ngIf=\"currentEditor.type === 'section'\" \n [hostObject]=\"currentEditor.hostObject\" (hostObjectChange)=\"onSectionEditorObjectChange($event)\"></section-editor>\n \n <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)}}: </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"] }]
|
|
2101
|
-
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.TranslateService }, { type: LayoutBuilderInternalService }, { type:
|
|
2107
|
+
args: [{ selector: 'pep-layout-builder', template: "<div *ngIf=\"lockScreen\" class=\"cdk-overlay-backdrop cdk-overlay-dark-backdrop cdk-overlay-backdrop-showing\"></div>\n\n<pep-page-layout [showShadow]=\"!previewMode && currentEditor !== null\" >\n <div pep-side-area *ngIf=\"!previewMode && currentEditor\" style=\"height: inherit;\">\n <pep-side-bar #sideBar [ignoreResize]=\"true\" (stateChange)=\"onSidebarStateChange($event)\">\n <div header-content class=\"side-bar-title\">\n <pep-button class=\"back-button\" sizeType=\"sm\" iconName=\"arrow_left_alt\" (buttonClick)=\"onNavigateBackFromEditor();\"></pep-button>\n <div #editorTitle class=\"title title-lg ellipsis\" \n [title]=\"currentEditor.type === 'layout-builder' ? (layoutEditorTitle || currentEditor.title) : currentEditor.title\">\n <span>{{ editorTitle.title }}</span>\n </div>\n </div>\n <div class=\"layout-builder-editor-wrapper\">\n <main-editor *ngIf=\"currentEditor.type === 'layout-builder'\" [availableBlocksForDrag]=\"availableBlocksForDrag\"\n [hostObject]=\"currentEditor.hostObject\" (hostObjectChange)=\"onLayoutEditorObjectChange($event)\"\n >\n <ng-container layout-editor-top-content>\n <ng-content select=\"[layout-editor-top-content]\"></ng-content>\n </ng-container>\n <!-- <ng-container layout-editor-bottom-content>\n <ng-content select=\"[layout-editor-bottom-content]\"></ng-content>\n </ng-container> -->\n </main-editor>\n \n <section-editor *ngIf=\"currentEditor.type === 'section'\" \n [hostObject]=\"currentEditor.hostObject\" (hostObjectChange)=\"onSectionEditorObjectChange($event)\"></section-editor>\n \n <ng-container *ngIf=\"currentEditor.type === 'block'\" >\n <ng-content select=\"[block-editor-content]\"></ng-content>\n </ng-container>\n </div>\n </pep-side-bar>\n </div>\n <ng-container pep-main-area>\n <div class=\"main-area-container\" [ngClass]=\"{'preview-mode': previewMode }\">\n <div class=\"header-container\" >\n <ng-container *ngIf=\"!previewMode; then editorTitleTemplate; else previewTitleTemplate\"></ng-container>\n <ng-template #editorTitleTemplate>\n <div>\n <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.VIEWPORT_WIDTH' | translate)}}: </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"] }]
|
|
2108
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.TranslateService }, { type: LayoutBuilderInternalService }, { type: i3$1.PepAddonService }]; }, propDecorators: { layoutBuilderWrapper: [{
|
|
2102
2109
|
type: ViewChild,
|
|
2103
2110
|
args: ['layoutBuilderWrapper', { static: true }]
|
|
2104
2111
|
}], sideBarComponent: [{
|