@pepperi-addons/ngx-composite-lib 0.4.2-beta.76 → 0.4.2-beta.78
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/hide-in/hide-in.component.mjs +5 -5
- package/esm2020/layout-builder/hide-in/hide-in.module.mjs +10 -10
- package/esm2020/layout-builder/layout-builder-editor/layout-builder-editor.component.mjs +29 -0
- package/esm2020/layout-builder/layout-builder-editor/layout-builder-editor.module.mjs +45 -0
- package/esm2020/layout-builder/layout-builder-internal.service.mjs +7 -36
- package/esm2020/layout-builder/layout-builder.component.mjs +5 -25
- package/esm2020/layout-builder/layout-builder.model.mjs +1 -5
- package/esm2020/layout-builder/layout-builder.module.mjs +23 -12
- package/esm2020/layout-builder/main-editor/main-editor.component.mjs +130 -0
- package/esm2020/layout-builder/main-editor/main-editor.module.mjs +99 -0
- package/esm2020/layout-builder/public-api.mjs +3 -2
- package/esm2020/layout-builder/section/section.component.mjs +3 -3
- package/esm2020/layout-builder/section/section.module.mjs +5 -5
- package/esm2020/layout-builder/section-block/section-block.component.mjs +3 -3
- package/esm2020/layout-builder/section-editor/section-editor.component.mjs +4 -3
- package/esm2020/layout-builder/section-editor/section-editor.module.mjs +6 -2
- package/fesm2015/pepperi-addons-ngx-composite-lib-layout-builder.mjs +146 -152
- package/fesm2015/pepperi-addons-ngx-composite-lib-layout-builder.mjs.map +1 -1
- package/fesm2020/pepperi-addons-ngx-composite-lib-layout-builder.mjs +144 -151
- package/fesm2020/pepperi-addons-ngx-composite-lib-layout-builder.mjs.map +1 -1
- package/layout-builder/hide-in/hide-in.component.d.ts +3 -3
- package/layout-builder/hide-in/hide-in.module.d.ts +4 -4
- package/layout-builder/layout-builder-editor/layout-builder-editor.component.d.ts +15 -0
- package/layout-builder/layout-builder-editor/layout-builder-editor.module.d.ts +14 -0
- package/layout-builder/layout-builder-internal.service.d.ts +19 -3
- package/layout-builder/layout-builder.component.d.ts +3 -7
- package/layout-builder/layout-builder.model.d.ts +11 -21
- package/layout-builder/layout-builder.module.d.ts +3 -2
- package/layout-builder/{layout-editor/layout-editor.component.d.ts → main-editor/main-editor.component.d.ts} +5 -7
- package/layout-builder/main-editor/main-editor.module.d.ts +27 -0
- package/layout-builder/public-api.d.ts +2 -0
- package/layout-builder/section/section.module.d.ts +1 -1
- package/layout-builder/section-editor/section-editor.component.d.ts +1 -1
- package/layout-builder/section-editor/section-editor.module.d.ts +3 -2
- package/package.json +1 -1
- package/esm2020/layout-builder/layout-editor/layout-editor.component.mjs +0 -156
- package/esm2020/layout-builder/layout-editor/layout-editor.module.mjs +0 -95
- package/layout-builder/layout-editor/layout-editor.module.d.ts +0 -26
|
@@ -2,34 +2,34 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { EventEmitter, Component, Input, Output, NgModule, Injectable, ViewChild, ViewChildren, HostBinding, ElementRef, HostListener } from '@angular/core';
|
|
3
3
|
import * as i3 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
|
-
import * as i4$
|
|
5
|
+
import * as i4$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
|
-
import * as
|
|
8
|
+
import * as i2$2 from '@angular/material/tabs';
|
|
9
9
|
import { MatTabsModule } from '@angular/material/tabs';
|
|
10
10
|
import * as i2$1 from '@pepperi-addons/ngx-lib';
|
|
11
11
|
import { PepScreenSizeType, PepGuid, BaseDestroyerDirective, PepNgxLibModule } from '@pepperi-addons/ngx-lib';
|
|
12
12
|
import * as i5$2 from '@pepperi-addons/ngx-lib/size-detector';
|
|
13
13
|
import { PepSizeDetectorModule } from '@pepperi-addons/ngx-lib/size-detector';
|
|
14
|
-
import * as
|
|
14
|
+
import * as i4$1 from '@pepperi-addons/ngx-lib/button';
|
|
15
15
|
import { PepButtonModule } from '@pepperi-addons/ngx-lib/button';
|
|
16
16
|
import * as i2 from '@pepperi-addons/ngx-lib/dialog';
|
|
17
17
|
import { PepDialogData, PepDialogModule, PepDialogActionButton } from '@pepperi-addons/ngx-lib/dialog';
|
|
18
|
-
import * as i8
|
|
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$4 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 i5$1 from '@pepperi-addons/ngx-lib/draggable-items';
|
|
25
25
|
import { PepDraggableItemsModule } from '@pepperi-addons/ngx-lib/draggable-items';
|
|
26
|
-
import * as
|
|
26
|
+
import * as i5$3 from '@pepperi-addons/ngx-lib/checkbox';
|
|
27
27
|
import { PepCheckboxModule } from '@pepperi-addons/ngx-lib/checkbox';
|
|
28
28
|
import * as i4$4 from '@pepperi-addons/ngx-lib/select';
|
|
29
29
|
import { PepSelectModule } from '@pepperi-addons/ngx-lib/select';
|
|
30
|
-
import * as
|
|
30
|
+
import * as i3$2 from '@pepperi-addons/ngx-lib/textbox';
|
|
31
31
|
import { PepTextboxModule } from '@pepperi-addons/ngx-lib/textbox';
|
|
32
|
-
import * as
|
|
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';
|
|
@@ -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 i4$
|
|
48
|
+
import * as i4$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';
|
|
@@ -55,7 +55,7 @@ import { PepColorModule } from '@pepperi-addons/ngx-lib/color';
|
|
|
55
55
|
import { PepImageModule } from '@pepperi-addons/ngx-lib/image';
|
|
56
56
|
import { MatSliderModule } from '@angular/material/slider';
|
|
57
57
|
|
|
58
|
-
class
|
|
58
|
+
class HideInComponent {
|
|
59
59
|
constructor(translate) {
|
|
60
60
|
this.translate = translate;
|
|
61
61
|
this.hideIn = [];
|
|
@@ -89,9 +89,9 @@ class PepHideInComponent {
|
|
|
89
89
|
this.menuClosed.emit();
|
|
90
90
|
}
|
|
91
91
|
}
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type:
|
|
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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i4.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: 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
|
+
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"] }]
|
|
97
97
|
}], ctorParameters: function () { return [{ type: i1.TranslateService }]; }, propDecorators: { hideIn: [{
|
|
@@ -104,7 +104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
104
104
|
type: Output
|
|
105
105
|
}] } });
|
|
106
106
|
|
|
107
|
-
class
|
|
107
|
+
class HideInModule {
|
|
108
108
|
constructor(pepIconRegistry) {
|
|
109
109
|
this.pepIconRegistry = pepIconRegistry;
|
|
110
110
|
this.pepIconRegistry.registerIcons([
|
|
@@ -112,8 +112,8 @@ class PepHideInModule {
|
|
|
112
112
|
]);
|
|
113
113
|
}
|
|
114
114
|
}
|
|
115
|
-
|
|
116
|
-
|
|
115
|
+
HideInModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: HideInModule, deps: [{ token: i1$1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
|
|
116
|
+
HideInModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: HideInModule, declarations: [HideInComponent], imports: [CommonModule,
|
|
117
117
|
MatButtonModule,
|
|
118
118
|
MatMenuModule,
|
|
119
119
|
MatIconModule,
|
|
@@ -121,8 +121,8 @@ PepHideInModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
|
|
|
121
121
|
MatCheckboxModule,
|
|
122
122
|
PepButtonModule,
|
|
123
123
|
PepCheckboxModule,
|
|
124
|
-
PepIconModule, i1.TranslateModule], exports: [
|
|
125
|
-
|
|
124
|
+
PepIconModule, i1.TranslateModule], exports: [HideInComponent] });
|
|
125
|
+
HideInModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: HideInModule, imports: [CommonModule,
|
|
126
126
|
MatButtonModule,
|
|
127
127
|
MatMenuModule,
|
|
128
128
|
MatIconModule,
|
|
@@ -141,10 +141,10 @@ PepHideInModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
|
|
|
141
141
|
// }, isolate: false
|
|
142
142
|
// }),
|
|
143
143
|
] });
|
|
144
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type:
|
|
144
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: HideInModule, decorators: [{
|
|
145
145
|
type: NgModule,
|
|
146
146
|
args: [{
|
|
147
|
-
declarations: [
|
|
147
|
+
declarations: [HideInComponent],
|
|
148
148
|
imports: [
|
|
149
149
|
CommonModule,
|
|
150
150
|
MatButtonModule,
|
|
@@ -165,7 +165,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
165
165
|
// }, isolate: false
|
|
166
166
|
// }),
|
|
167
167
|
],
|
|
168
|
-
exports: [
|
|
168
|
+
exports: [HideInComponent]
|
|
169
169
|
}]
|
|
170
170
|
}], ctorParameters: function () { return [{ type: i1$1.PepIconRegistry }]; } });
|
|
171
171
|
|
|
@@ -314,7 +314,7 @@ class LayoutBuilderInternalService {
|
|
|
314
314
|
horizontalSpacing: layoutView === null || layoutView === void 0 ? void 0 : layoutView.Layout.HorizontalSpacing,
|
|
315
315
|
sectionsGap: layoutView === null || layoutView === void 0 ? void 0 : layoutView.Layout.SectionsGap,
|
|
316
316
|
columnsGap: layoutView === null || layoutView === void 0 ? void 0 : layoutView.Layout.ColumnsGap,
|
|
317
|
-
// roundedCorners: layoutView?.
|
|
317
|
+
// roundedCorners: layoutView?.Layout.RoundedCorners
|
|
318
318
|
};
|
|
319
319
|
this._editorsBreadCrumb[0].hostObject = layoutEditor;
|
|
320
320
|
}
|
|
@@ -355,13 +355,11 @@ class LayoutBuilderInternalService {
|
|
|
355
355
|
}
|
|
356
356
|
getBlockEditor(blockKey, title) {
|
|
357
357
|
// Get block editor title.
|
|
358
|
-
const blockTitle = title || this.getBlockTitle(blockKey);
|
|
358
|
+
const blockTitle = title || this.getBlockTitle(blockKey);
|
|
359
359
|
return {
|
|
360
360
|
id: blockKey,
|
|
361
361
|
type: 'block',
|
|
362
|
-
title: blockTitle
|
|
363
|
-
// remoteModuleOptions: remoteLoaderOptions,
|
|
364
|
-
hostObject: {} // JSON.parse(JSON.stringify(hostObject))
|
|
362
|
+
title: blockTitle
|
|
365
363
|
};
|
|
366
364
|
}
|
|
367
365
|
getSectionEditorTitle(section, sectionIndex) {
|
|
@@ -412,14 +410,6 @@ class LayoutBuilderInternalService {
|
|
|
412
410
|
}
|
|
413
411
|
return currentColumn;
|
|
414
412
|
}
|
|
415
|
-
// private setSectionsColumnsGap(layoutView: IPepLayoutView) {
|
|
416
|
-
// if (layoutView?.Layout?.Sections) {
|
|
417
|
-
// for (let index = 0; index < layoutView.Layout.Sections.length; index++) {
|
|
418
|
-
// const section = layoutView.Layout.Sections[index];
|
|
419
|
-
// section.ColumnsGap = layoutView.Layout.ColumnsGap;
|
|
420
|
-
// }
|
|
421
|
-
// }
|
|
422
|
-
// }
|
|
423
413
|
getCssScreenWidh(screenType) {
|
|
424
414
|
let widthToSet = '100%';
|
|
425
415
|
if (screenType === 'Tablet') {
|
|
@@ -430,21 +420,6 @@ class LayoutBuilderInternalService {
|
|
|
430
420
|
}
|
|
431
421
|
return widthToSet;
|
|
432
422
|
}
|
|
433
|
-
// private getBlockContainerByBlockKey(blockKey: string): IPepLayoutBlockContainer | undefined {
|
|
434
|
-
// let blockContainerToFind: IPepLayoutBlockContainer | undefined = undefined;
|
|
435
|
-
// const layoutView = this._layoutViewSubject.getValue();
|
|
436
|
-
// const sections = layoutView?.Layout.Sections || [];
|
|
437
|
-
// for (let sectionIndex = 0; sectionIndex < sections.length; sectionIndex++) {
|
|
438
|
-
// const section = sections[sectionIndex];
|
|
439
|
-
// // Get the block container.
|
|
440
|
-
// const columnIndex = section.Columns.findIndex(column => column.BlockContainer?.BlockKey === blockKey);
|
|
441
|
-
// if (columnIndex > -1) {
|
|
442
|
-
// blockContainerToFind = section.Columns[columnIndex].BlockContainer
|
|
443
|
-
// break;
|
|
444
|
-
// }
|
|
445
|
-
// }
|
|
446
|
-
// return blockContainerToFind;
|
|
447
|
-
// }
|
|
448
423
|
getBlocksNumber() {
|
|
449
424
|
var _a, _b;
|
|
450
425
|
let blocksNumber = 0;
|
|
@@ -494,7 +469,7 @@ class LayoutBuilderInternalService {
|
|
|
494
469
|
getIsHidden(hideIn, currentScreenType) {
|
|
495
470
|
return (hideIn && (hideIn === null || hideIn === void 0 ? void 0 : hideIn.length) > 0) ? hideIn.some(hi => hi === currentScreenType) : false;
|
|
496
471
|
}
|
|
497
|
-
navigateToEditor(editorType, id, title) {
|
|
472
|
+
navigateToEditor(editorType, id, title = '') {
|
|
498
473
|
let success = false;
|
|
499
474
|
// Cannot navigate into 'layout-builder' because this is first and const in the editorsBreadCrumbs.
|
|
500
475
|
if (editorType !== 'layout-builder' && (id === null || id === void 0 ? void 0 : id.length) > 0) {
|
|
@@ -535,8 +510,7 @@ class LayoutBuilderInternalService {
|
|
|
535
510
|
layoutView.Layout.VerticalSpacing = editorData.verticalSpacing;
|
|
536
511
|
layoutView.Layout.SectionsGap = editorData.sectionsGap;
|
|
537
512
|
layoutView.Layout.ColumnsGap = editorData.columnsGap;
|
|
538
|
-
// layoutView.
|
|
539
|
-
// this.setSectionsColumnsGap(layoutView);
|
|
513
|
+
// layoutView.Layout.RoundedCorners = editorData.roundedCorners;
|
|
540
514
|
this.notifyLayoutViewChange(layoutView);
|
|
541
515
|
}
|
|
542
516
|
}
|
|
@@ -711,8 +685,7 @@ class LayoutBuilderInternalService {
|
|
|
711
685
|
this.notifyBlockAdded(blockAddedEventData);
|
|
712
686
|
if (this._navigateToEditorAfterBlockAdded) {
|
|
713
687
|
// Navigate to the block editor.
|
|
714
|
-
|
|
715
|
-
this.navigateToEditor('block', blockKey, '');
|
|
688
|
+
this.navigateToEditor('block', blockKey);
|
|
716
689
|
}
|
|
717
690
|
}
|
|
718
691
|
}
|
|
@@ -795,8 +768,6 @@ class LayoutBuilderInternalService {
|
|
|
795
768
|
// Load the layout editor.
|
|
796
769
|
this.loadDefaultEditor(layoutView);
|
|
797
770
|
}
|
|
798
|
-
// Set the columns gap of the sections.
|
|
799
|
-
// this.setSectionsColumnsGap(layoutView);
|
|
800
771
|
}
|
|
801
772
|
// Load only the layout view.
|
|
802
773
|
this.notifyLayoutViewChange(layoutView);
|
|
@@ -896,10 +867,10 @@ class SectionBlockComponent extends BaseDestroyerDirective {
|
|
|
896
867
|
}
|
|
897
868
|
}
|
|
898
869
|
SectionBlockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionBlockComponent, deps: [{ token: LayoutBuilderInternalService }], target: i0.ɵɵFactoryTarget.Component });
|
|
899
|
-
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
|
|
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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4$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: i5$1.DraggableItemComponent, selector: "pep-draggable-item", inputs: ["title", "titlePrefix", "titleClassNames", "data", "disabled", "shadow", "styleType", "toggleContent", "isToggleContentOpen", "actionsMenu", "menuStyleType"], outputs: ["contentToggle", "actionsMenuItemClick"] }] });
|
|
900
871
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionBlockComponent, decorators: [{
|
|
901
872
|
type: Component,
|
|
902
|
-
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
|
|
873
|
+
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"] }]
|
|
903
874
|
}], ctorParameters: function () { return [{ type: LayoutBuilderInternalService }]; }, propDecorators: { blockTemplate: [{
|
|
904
875
|
type: Input
|
|
905
876
|
}], sectionKey: [{
|
|
@@ -1136,7 +1107,7 @@ class SectionComponent extends BaseDestroyerDirective {
|
|
|
1136
1107
|
this.sectionColumnKeyPrefix = this.layoutBuilderInternalService.getSectionColumnKey(this.key);
|
|
1137
1108
|
}
|
|
1138
1109
|
onEditSectionClick() {
|
|
1139
|
-
this.layoutBuilderInternalService.navigateToEditor('section', this.key
|
|
1110
|
+
this.layoutBuilderInternalService.navigateToEditor('section', this.key);
|
|
1140
1111
|
}
|
|
1141
1112
|
onRemoveSectionClick() {
|
|
1142
1113
|
this.layoutBuilderInternalService.removeSection(this.key);
|
|
@@ -1173,7 +1144,7 @@ class SectionComponent extends BaseDestroyerDirective {
|
|
|
1173
1144
|
}
|
|
1174
1145
|
}
|
|
1175
1146
|
SectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionComponent, deps: [{ token: i0.Renderer2 }, { token: LayoutBuilderInternalService }, { token: i2$1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1176
|
-
SectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: SectionComponent, selector: "section", inputs: { blockTemplate: "blockTemplate", key: "key", name: "name", split: "split", height: "height", collapseOnTablet: "collapseOnTablet", columns: "columns", hideIn: "hideIn", columnsGap: "columnsGap" }, host: { properties: { "style.max-height": "this.styleMaxHeight", "style.height": "this.styleHeight" } }, viewQueries: [{ propertyName: "sectionContainerRef", first: true, predicate: ["sectionContainer"], descendants: true }, { propertyName: "columnsElementRef", predicate: ["columnsWrapper"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #sectionContainer *ngIf=\"editable || (containsBlocks && !hideForCurrentScreenType)\" class=\"section-container \"\n [ngClass]=\"{ \n 'mobile': screenType === 'Phablet',\n 'editable-state': editable, 'main-editor-state': isMainEditorState, 'default-height': shouldSetDefaultHeight, 'active-section': isEditing,\n 'section-hidden-state': hideForCurrentScreenType, 'section-is-dragging': draggingSectionKey !== '', 'show-hover-state': hoverState }\" \n cdkDragBoundary=\".layout-builder-wrapper\" cdkDrag [cdkDragData]=\"key\" [cdkDragDisabled]=\"!editable || selectedSectionKey.length > 0 || selectedBlockKey.length > 0\" (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\" \n >\n <pep-draggable-item *ngIf=\"editable && isMainEditorState && draggingSectionKey === ''\" cdkDragHandle style=\"cursor: grab;\"\n class=\"section-toolbar\" [ngClass]=\"{ 'hide-toolbar': !hoverState }\" [title]=\"name\">\n <ng-container pep-actions>\n <pep-button classNames=\"caution\" sizeType=\"xs\" iconName=\"system_bin\" (buttonClick)=\"onRemoveSectionClick();\"></pep-button>\n <hide-in [hideIn]=\"hideIn\" (hideInChange)=\"onHideSectionChange($event)\" (menuClosed)=\"onHideInMenuClosed()\" (menuOpened)=\"onHideInMenuOpened()\"></hide-in>\n <pep-button sizeType=\"xs\" iconName=\"system_edit\" (buttonClick)=\"onEditSectionClick();\"></pep-button>\n </ng-container>\n </pep-draggable-item>\n\n <div *ngIf=\"editable\" class=\"section-background\">\n <div class=\"back-template\" *ngFor=\"let number of [0,1,2,3,4,5,6,7,8,9,10,11]\"></div>\n </div>\n <div #columnsWrapper class=\"columns-wrapper gap-{{ columnsGap }}\" \n [ngClass]=\"{ 'mobile': screenType === 'Phablet', 'is-dragging': editable && getIsDragging }\">\n <div [id]=\"sectionColumnKeyPrefix + i\" \n *ngFor=\"let column of columns; let i=index;\"\n class=\"section-column {{screenSize <= pepScreenSizeToFlipToVertical ? 'horizontal' : 'vertical'}}\"\n [ngClass]=\"{ 'active-column': selectedBlockKey === column.BlockContainer?.BlockKey, \n 'is-hidden': getIsHidden(column?.BlockContainer?.Hide, screenType),\n 'already-contains-block': editable && column.BlockContainer && column.BlockContainer.BlockKey && column.BlockContainer.BlockKey.length > 0 && \n draggingBlockKey && draggingBlockKey.length > 0 && column.BlockContainer.BlockKey !== draggingBlockKey }\"\n cdkDropList\n [cdkDropListData]=\"column\"\n [cdkDropListOrientation]=\"screenSize <= pepScreenSizeToFlipToVertical ? 'horizontal' : 'vertical'\" \n [cdkDropListConnectedTo]=\"sectionsColumnsDropList\"\n (cdkDropListDropped)=\"onBlockDropped($event)\"\n [cdkDropListEnterPredicate]=\"canDropPredicate(i)\"\n >\n <section-block *ngIf=\"column.BlockContainer?.BlockKey\" class=\"section-block\" [sectionKey]=\"key\" [blockTemplate]=\"blockTemplate\"\n [blockContainer]=\"column.BlockContainer\" [editable]=\"editable\" [isMainEditorState]=\"isMainEditorState\" [sectionHeight]=\"styleHeight\"\n [active]=\"selectedBlockKey === column.BlockContainer?.BlockKey\" [screenType]=\"screenType\"\n (dragExited)=\"onSectionBlockDragExited($event)\" (dragEntered)=\"onSectionBlockDragEntered($event)\"></section-block>\n </div>\n </div>\n</div>\n", styles: [".section-container{position:relative;display:grid;height:100%;max-height:inherit;min-height:2.5rem}.section-container.editable-state.default-height{min-height:16rem}.section-container.editable-state.active-section{z-index:11}.section-container.editable-state.active-section .columns-wrapper{z-index:1}.section-container.editable-state.active-section ::ng-deep .block-template-wrapper .block-template{pointer-events:unset!important;opacity:unset!important}.section-container.editable-state.cdk-drag-placeholder{opacity:.5}.section-container.editable-state:not(.cdk-drag-placeholder):hover .section-toolbar,.section-container.editable-state:not(.cdk-drag-placeholder).show-hover-state .section-toolbar{display:block!important}.section-container.editable-state:not(.cdk-drag-preview) .hide-toolbar{display:none}.section-container.editable-state.main-editor-state .mobile .is-hidden{display:none}.section-container.editable-state .mobile .is-hidden{display:block}.section-container.editable-state .section-toolbar{position:absolute;top:0;height:2.625rem;z-index:11}.section-container.editable-state .section-toolbar ::ng-deep .pep-draggable-item-container{border-radius:0 0 var(--pep-border-radius-md, .25rem) 0}.section-container.editable-state .section-background{position:absolute;width:100%;height:100%;z-index:0;display:grid;grid-template-columns:repeat(12,1fr)}.section-container.editable-state .section-background .back-template{opacity:.1}.section-container.editable-state .section-background .back-template:last-of-type{border-right:0 none}.section-container .columns-wrapper{display:grid;grid-auto-flow:column;height:inherit;max-height:inherit;overflow:inherit}.section-container .columns-wrapper.is-dragging{overflow:unset}.section-container .columns-wrapper.gap-none{gap:0}.section-container .columns-wrapper.gap-sm{gap:var(--pep-spacing-sm, .5rem)}.section-container .columns-wrapper.gap-md{gap:var(--pep-spacing-lg, 1rem)}.section-container .columns-wrapper.gap-lg{gap:var(--pep-spacing-2xl, 2rem)}.section-container .columns-wrapper .section-column{position:relative;height:inherit;max-height:inherit;overflow:inherit}.section-container .columns-wrapper .section-column .section-block{height:inherit;max-height:inherit}\n", ".section-container{background:transparent}.section-container.editable-state.active-section{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.section-container.editable-state.active-section .columns-wrapper{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.section-container.editable-state.section-hidden-state:not(.active-section){background:repeating-linear-gradient(45deg,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0),hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .8rem),repeating-linear-gradient(-45deg,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0),hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .8rem)}.section-container.editable-state.main-editor-state.cdk-drag-preview{box-shadow:0 0 0 .125rem hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.section-container.editable-state.main-editor-state.cdk-drag-placeholder{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.section-container.editable-state.main-editor-state.cdk-drag-placeholder:hover,.section-container.editable-state.main-editor-state.cdk-drag-placeholder.show-hover-state{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)!important}.section-container.editable-state.main-editor-state:hover:not(.section-is-dragging),.section-container.editable-state.main-editor-state.show-hover-state:not(.section-is-dragging){box-shadow:0 0 0 .125rem hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.section-container.editable-state.main-editor-state .section-toolbar ::ng-deep .pep-draggable-item-container{box-shadow:0 0 0 .125rem hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.section-container.editable-state .section-background .back-template{background-color:#bec3e5;border-right:.125rem dashed hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}.section-container.editable-state .columns-wrapper .section-column{border:.125rem dashed hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}.section-container.editable-state .columns-wrapper .section-column.active-column{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.section-container.editable-state .columns-wrapper .section-column.cdk-drop-list-dragging{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.section-container.editable-state .columns-wrapper .section-column.already-contains-block:hover{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.section-container.editable-state .columns-wrapper.gap-none .section-column:not(.section-container.editable-state .columns-wrapper.gap-none .section-column:first-of-type).horizontal{border-left:unset}.section-container.editable-state .columns-wrapper.gap-none .section-column:not(.section-container.editable-state .columns-wrapper.gap-none .section-column:first-of-type).horizontal.cdk-drop-list-dragging{border-left:.125rem dashed hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}.section-container.editable-state .columns-wrapper.gap-none .section-column:not(.section-container.editable-state .columns-wrapper.gap-none .section-column:first-of-type).vertical{border-top:unset}.section-container.editable-state .columns-wrapper.gap-none .section-column:not(.section-container.editable-state .columns-wrapper.gap-none .section-column:first-of-type).vertical.cdk-drop-list-dragging{border-top:.125rem dashed hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i5$1.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: SectionBlockComponent, selector: "section-block", inputs: ["blockTemplate", "sectionKey", "sectionHeight", "isMainEditorState", "editable", "active", "blockContainer", "screenType"], outputs: ["dragExited", "dragEntered"] }, { kind: "component", type: PepHideInComponent, selector: "hide-in", inputs: ["hideIn"], outputs: ["hideInChange", "menuOpened", "menuClosed"] }, { kind: "component", type: i8.DraggableItemComponent, selector: "pep-draggable-item", inputs: ["title", "titlePrefix", "titleClassNames", "data", "disabled", "shadow", "styleType", "toggleContent", "isToggleContentOpen", "actionsMenu", "menuStyleType"], outputs: ["contentToggle", "actionsMenuItemClick"] }] });
|
|
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"] }] });
|
|
1177
1148
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionComponent, decorators: [{
|
|
1178
1149
|
type: Component,
|
|
1179
1150
|
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"] }]
|
|
@@ -1243,13 +1214,13 @@ SectionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
|
|
|
1243
1214
|
DragDropModule,
|
|
1244
1215
|
PepButtonModule,
|
|
1245
1216
|
SectionBlockModule,
|
|
1246
|
-
|
|
1217
|
+
HideInModule,
|
|
1247
1218
|
PepDraggableItemsModule, i1.TranslateModule], exports: [SectionComponent] });
|
|
1248
1219
|
SectionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionModule, imports: [CommonModule,
|
|
1249
1220
|
DragDropModule,
|
|
1250
1221
|
PepButtonModule,
|
|
1251
1222
|
SectionBlockModule,
|
|
1252
|
-
|
|
1223
|
+
HideInModule,
|
|
1253
1224
|
PepDraggableItemsModule,
|
|
1254
1225
|
TranslateModule.forChild()] });
|
|
1255
1226
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionModule, decorators: [{
|
|
@@ -1261,7 +1232,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
1261
1232
|
DragDropModule,
|
|
1262
1233
|
PepButtonModule,
|
|
1263
1234
|
SectionBlockModule,
|
|
1264
|
-
|
|
1235
|
+
HideInModule,
|
|
1265
1236
|
PepDraggableItemsModule,
|
|
1266
1237
|
TranslateModule.forChild()
|
|
1267
1238
|
],
|
|
@@ -1438,7 +1409,7 @@ class PepLayoutComponent extends BaseDestroyerDirective {
|
|
|
1438
1409
|
}
|
|
1439
1410
|
}
|
|
1440
1411
|
PepLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutComponent, deps: [{ token: i2$1.PepLayoutService }, { token: LayoutBuilderInternalService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
1441
|
-
PepLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepLayoutComponent, selector: "pep-layout", inputs: { layoutView: "layoutView", blockTemplate: "blockTemplate", showSkeleton: "showSkeleton" }, outputs: { layoutViewChange: "layoutViewChange", screenTypeChange: "screenTypeChange" }, host: { properties: { "style.padding-inline": "this.paddingInline" } }, viewQueries: [{ propertyName: "skeletonContainer", first: true, predicate: ["skeletonCont"], descendants: true, static: true }, { propertyName: "sectionsContainer", first: true, predicate: ["sectionsCont"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<!-- For the top spacing -->\n<div class=\"top-spacing spacing-{{verticalSpacing}}\" ></div>\n<div #sectionsCont cdkDropListGroup class=\"sections-container gap-{{ sectionsGap }}\" [ngClass]=\"{'preview-state': previewMode }\" \n cdkDropList (cdkDropListDropped)=\"onSectionDropped($event)\" [ngStyle]=\"{'grid-auto-rows': getSectionsTemplateRows()}\"\n >\n <section *ngFor=\"let section of sections$ | async; let i=index;\" \n class=\"draggable-section \" [ngClass]=\"selectedScreenType === 'Phablet' ? 'margin-'+sectionsGap : ''\" [blockTemplate]=\"blockTemplate\"\n [key]=\"section.Key\" [name]=\"section.Name || ('LAYOUT_BUILDER.SECTION' | translate) + ' ' + (i+1)\" [split]=\"section.Split\" [height]=\"section.Height\"\n [columns]=\"section.Columns\" [collapseOnTablet]=\"section.CollapseOnTablet || false\" [hideIn]=\"section.Hide || []\" [columnsGap]=\"columnsGap\"\n >\n </section>\n</div>\n<div #skeletonCont class=\"skeleton-container \">\n <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"xl\" ></pep-skeleton-loader>\n <div class=\"split-skeleton-container\">\n <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"max\" ></pep-skeleton-loader>\n <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"max\" ></pep-skeleton-loader>\n </div>\n <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"xl\" ></pep-skeleton-loader>\n\n <pep-skeleton-loader [rowsNumber]=\"1\" [lastRowOffset]=\"false\" rowHeightType=\"max\" ></pep-skeleton-loader>\n</div>\n<!-- For the bottom spacing -->\n<div class=\"bottom-spacing spacing-{{verticalSpacing}}\"></div>\n<pep-size-detector></pep-size-detector>", styles: [":host{display:grid;grid-template-areas:\"top-spacing\" \"content\" \"bottom-spacing\";grid-template-rows:auto 1fr auto;height:100%}.top-spacing{grid-area:top-spacing}.top-spacing.spacing-none{height:0}.top-spacing.spacing-sm{height:var(--pep-spacing-sm, .5rem)}.top-spacing.spacing-md{height:var(--pep-spacing-lg, 1rem)}.top-spacing.spacing-lg{height:var(--pep-spacing-2xl, 2rem)}.bottom-spacing{grid-area:bottom-spacing}.bottom-spacing.spacing-none{height:0}.bottom-spacing.spacing-sm{height:var(--pep-spacing-sm, .5rem)}.bottom-spacing.spacing-md{height:var(--pep-spacing-lg, 1rem)}.bottom-spacing.spacing-lg{height:var(--pep-spacing-2xl, 2rem)}.skeleton-container{display:grid;grid-area:content;height:100%;gap:var(--pep-spacing-lg, 1rem);grid-template-rows:auto auto auto 1fr;opacity:0}.skeleton-container .split-skeleton-container{display:grid;height:10rem;gap:var(--pep-spacing-lg, 1rem);grid-auto-flow:column}.sections-container{z-index:11;grid-area:content;width:100%;max-width:inherit;overflow-x:unset;margin:0 auto;position:relative;display:grid;grid-row:1px;height:inherit;opacity:0}.sections-container.gap-none{gap:0}.sections-container.gap-sm{gap:var(--pep-spacing-sm, .5rem)}.sections-container.gap-md{gap:var(--pep-spacing-lg, 1rem)}.sections-container.gap-lg{gap:var(--pep-spacing-2xl, 2rem)}.sections-container .draggable-section{display:block}.sections-container.preview-state section{display:contents}@keyframes in{0%{opacity:0;transform:translateY(-80);filter:blur(20px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}.in{animation-name:in;animation-direction:normal;animation-duration:1.2s;animation-fill-mode:forwards}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4$
|
|
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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4$3.PepSkeletonLoaderComponent, selector: "pep-skeleton-loader", inputs: ["rowHeightType", "rowsNumber", "lastRowOffset"] }, { kind: "component", type: i5$2.PepSizeDetectorComponent, selector: "pep-size-detector", inputs: ["showScreenSize", "useAsWebComponent"], outputs: ["sizeChange"] }, { kind: "directive", type: i4$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.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "component", type: SectionComponent, selector: "section", inputs: ["blockTemplate", "key", "name", "split", "height", "collapseOnTablet", "columns", "hideIn", "columnsGap"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
|
|
1442
1413
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutComponent, decorators: [{
|
|
1443
1414
|
type: Component,
|
|
1444
1415
|
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"] }]
|
|
@@ -1504,17 +1475,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
1504
1475
|
}]
|
|
1505
1476
|
}] });
|
|
1506
1477
|
|
|
1507
|
-
class
|
|
1478
|
+
class PepLayoutBuilderEditorComponent extends BaseDestroyerDirective {
|
|
1479
|
+
constructor(hostElement, renderer) {
|
|
1480
|
+
super();
|
|
1481
|
+
this.hostElement = hostElement;
|
|
1482
|
+
this.renderer = renderer;
|
|
1483
|
+
this.editorTabs = [];
|
|
1484
|
+
this.renderer.addClass(this.hostElement.nativeElement, 'pep-layout-builder-editor');
|
|
1485
|
+
}
|
|
1486
|
+
ngOnInit() {
|
|
1487
|
+
}
|
|
1488
|
+
ngAfterContentInit() {
|
|
1489
|
+
}
|
|
1490
|
+
}
|
|
1491
|
+
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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutBuilderEditorComponent, decorators: [{
|
|
1494
|
+
type: Component,
|
|
1495
|
+
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>" }]
|
|
1496
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { editorTabs: [{
|
|
1497
|
+
type: Input
|
|
1498
|
+
}] } });
|
|
1499
|
+
|
|
1500
|
+
class MainEditorComponent extends BaseDestroyerDirective {
|
|
1501
|
+
// protected showBottomContent = false;
|
|
1508
1502
|
// onLoadFlowHostObject;
|
|
1509
1503
|
// onChangeFlowHostObject;
|
|
1510
|
-
constructor(
|
|
1511
|
-
// public customizationService: PepCustomizationService,
|
|
1512
|
-
layoutBuilderInternalService, hostElement, renderer) {
|
|
1504
|
+
constructor(layoutBuilderInternalService, hostElement, renderer) {
|
|
1513
1505
|
super();
|
|
1514
1506
|
this.layoutBuilderInternalService = layoutBuilderInternalService;
|
|
1515
1507
|
this.hostElement = hostElement;
|
|
1516
1508
|
this.renderer = renderer;
|
|
1517
|
-
// @ViewChild('parametersDialogTemplate', { static: true, read: TemplateRef }) parametersDialogTemplate!: TemplateRef<any>;
|
|
1518
1509
|
this.availableBlocksForDrag = [];
|
|
1519
1510
|
this.hostObjectChange = new EventEmitter();
|
|
1520
1511
|
this.horizontalSpacing = 'md';
|
|
@@ -1526,13 +1517,10 @@ class PepLayoutEditorComponent extends BaseDestroyerDirective {
|
|
|
1526
1517
|
this.availableBlocksContainerId = LayoutBuilderInternalService.AVAILABLE_BLOCKS_CONTAINER_ID;
|
|
1527
1518
|
this.sectionsColumnsDropList = [];
|
|
1528
1519
|
this.showTopContent = false;
|
|
1529
|
-
this.
|
|
1530
|
-
this.renderer.addClass(this.hostElement.nativeElement, 'pep-layout-editor');
|
|
1520
|
+
this.renderer.addClass(this.hostElement.nativeElement, 'pep-layout-main-editor');
|
|
1531
1521
|
}
|
|
1532
1522
|
set hostObject(value) {
|
|
1533
1523
|
this._hostObject = value;
|
|
1534
|
-
// this.onLoadFlow = value.onLoadFlow;
|
|
1535
|
-
// this.onChangeFlow = value.onChangeFlow;
|
|
1536
1524
|
this.isFullWidth = !value.maxWidth || value.maxWidth === 0;
|
|
1537
1525
|
this.maxWidth = value.maxWidth;
|
|
1538
1526
|
this.horizontalSpacing = this._hostObject.horizontalSpacing || 'md';
|
|
@@ -1540,35 +1528,17 @@ class PepLayoutEditorComponent extends BaseDestroyerDirective {
|
|
|
1540
1528
|
this.sectionsGap = this._hostObject.sectionsGap || 'md';
|
|
1541
1529
|
this.columnsGap = this._hostObject.columnsGap || 'md';
|
|
1542
1530
|
this.roundedCorners = this._hostObject.roundedCorners || 'none';
|
|
1543
|
-
// this.prepareFlowHostObject('load');
|
|
1544
|
-
// this.prepareFlowHostObject('change');
|
|
1545
1531
|
}
|
|
1546
1532
|
get hostObject() {
|
|
1547
1533
|
return this._hostObject;
|
|
1548
1534
|
}
|
|
1549
|
-
// private prepareFlowHostObject(pageFlowType: 'load' | 'change') {
|
|
1550
|
-
// const fields = {};
|
|
1551
|
-
// if (pageFlowType === 'load') {
|
|
1552
|
-
// this.onLoadFlowHostObject = {};
|
|
1553
|
-
// this.onLoadFlowHostObject['runFlowData'] = this.onLoadFlow;
|
|
1554
|
-
// this.onLoadFlowHostObject['fields'] = fields;
|
|
1555
|
-
// } else if (pageFlowType === 'change') {
|
|
1556
|
-
// this.onChangeFlowHostObject = {};
|
|
1557
|
-
// this.onChangeFlowHostObject['runFlowData'] = this.onChangeFlow;
|
|
1558
|
-
// this.onChangeFlowHostObject['fields'] = fields;
|
|
1559
|
-
// }
|
|
1560
|
-
// }
|
|
1561
1535
|
updateHostObject() {
|
|
1562
|
-
// this._hostObject.onLoadFlow = this.onLoadFlow;
|
|
1563
|
-
// this._hostObject.onChangeFlow = this.onChangeFlow;
|
|
1564
1536
|
this._hostObject.maxWidth = this.isFullWidth ? 0 : this.maxWidth;
|
|
1565
1537
|
this._hostObject.horizontalSpacing = this.horizontalSpacing;
|
|
1566
1538
|
this._hostObject.verticalSpacing = this.verticalSpacing;
|
|
1567
1539
|
this._hostObject.sectionsGap = this.sectionsGap;
|
|
1568
1540
|
this._hostObject.columnsGap = this.columnsGap;
|
|
1569
1541
|
this._hostObject.roundedCorners = this.roundedCorners === 'none' ? undefined : this.roundedCorners;
|
|
1570
|
-
// this.prepareFlowHostObject('load');
|
|
1571
|
-
// this.prepareFlowHostObject('change');
|
|
1572
1542
|
this.hostObjectChange.emit(this.hostObject);
|
|
1573
1543
|
}
|
|
1574
1544
|
ngOnInit() {
|
|
@@ -1577,12 +1547,13 @@ class PepLayoutEditorComponent extends BaseDestroyerDirective {
|
|
|
1577
1547
|
});
|
|
1578
1548
|
}
|
|
1579
1549
|
ngAfterContentInit() {
|
|
1580
|
-
|
|
1550
|
+
var _a;
|
|
1551
|
+
if (((_a = this._topContentRef) === null || _a === void 0 ? void 0 : _a.nativeElement.children.length) > 0) {
|
|
1581
1552
|
this.showTopContent = true;
|
|
1582
1553
|
}
|
|
1583
|
-
if (this._bottomContentRef.nativeElement.children.length > 0) {
|
|
1584
|
-
|
|
1585
|
-
}
|
|
1554
|
+
// if (this._bottomContentRef.nativeElement.children.length > 0) {
|
|
1555
|
+
// this.showBottomContent = true;
|
|
1556
|
+
// }
|
|
1586
1557
|
}
|
|
1587
1558
|
onAddSectionClick(event) {
|
|
1588
1559
|
this.layoutBuilderInternalService.addSection();
|
|
@@ -1623,17 +1594,14 @@ class PepLayoutEditorComponent extends BaseDestroyerDirective {
|
|
|
1623
1594
|
this.layoutBuilderInternalService.onBlockDragEnd(event);
|
|
1624
1595
|
}
|
|
1625
1596
|
}
|
|
1626
|
-
|
|
1627
|
-
|
|
1628
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type:
|
|
1597
|
+
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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey", "regex", "regexError", "isInFocus"], outputs: ["valueChange", "keyup"] }, { kind: "component", type: i4$1.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i5$3.PepCheckboxComponent, selector: "pep-checkbox", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "additionalValue", "form", "isActive", "showTitle", "renderTitle", "layoutType", "visible"], outputs: ["valueChange"] }, { kind: "component", type: i6.GroupButtonsSettingsComponent, selector: "pep-group-buttons-settings", inputs: ["header", "subHeader", "groupType", "btnsArray", "excludeKeys", "useNone", "disabled", "dir", "titleSize", "bold", "btnKey"], outputs: ["btnkeyChange"] }, { kind: "component", type: i5$1.PepDraggableItemsComponent, selector: "pep-draggable-items", inputs: ["containerId", "showSearch", "title", "titleType", "titleSizeType", "itemPlaceholderType", "dropAreaIds", "items"], outputs: ["itemDragStarted", "itemDragEnded"] }, { kind: "component", type: PepLayoutBuilderEditorComponent, selector: "pep-layout-builder-editor", inputs: ["editorTabs"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
|
|
1599
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: MainEditorComponent, decorators: [{
|
|
1629
1600
|
type: Component,
|
|
1630
|
-
args: [{ selector: '
|
|
1601
|
+
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"] }]
|
|
1631
1602
|
}], ctorParameters: function () { return [{ type: LayoutBuilderInternalService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { _topContentRef: [{
|
|
1632
1603
|
type: ViewChild,
|
|
1633
1604
|
args: ['topContentRef', { static: true }]
|
|
1634
|
-
}], _bottomContentRef: [{
|
|
1635
|
-
type: ViewChild,
|
|
1636
|
-
args: ['bottomContentRef', { static: true }]
|
|
1637
1605
|
}], availableBlocksContainer: [{
|
|
1638
1606
|
type: ViewChild,
|
|
1639
1607
|
args: ['availableBlocksContainer', { read: ElementRef }]
|
|
@@ -1645,13 +1613,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
1645
1613
|
type: Output
|
|
1646
1614
|
}] } });
|
|
1647
1615
|
|
|
1648
|
-
class
|
|
1616
|
+
class PepLayoutBuilderEditorModule {
|
|
1617
|
+
constructor() {
|
|
1618
|
+
//
|
|
1619
|
+
}
|
|
1620
|
+
}
|
|
1621
|
+
PepLayoutBuilderEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutBuilderEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1622
|
+
PepLayoutBuilderEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutBuilderEditorModule, declarations: [PepLayoutBuilderEditorComponent], imports: [CommonModule,
|
|
1623
|
+
HttpClientModule,
|
|
1624
|
+
OverlayModule,
|
|
1625
|
+
MatTabsModule,
|
|
1626
|
+
PepNgxLibModule, i1.TranslateModule], exports: [PepLayoutBuilderEditorComponent] });
|
|
1627
|
+
PepLayoutBuilderEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutBuilderEditorModule, imports: [CommonModule,
|
|
1628
|
+
HttpClientModule,
|
|
1629
|
+
OverlayModule,
|
|
1630
|
+
MatTabsModule,
|
|
1631
|
+
PepNgxLibModule,
|
|
1632
|
+
TranslateModule.forChild()] });
|
|
1633
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutBuilderEditorModule, decorators: [{
|
|
1634
|
+
type: NgModule,
|
|
1635
|
+
args: [{
|
|
1636
|
+
declarations: [
|
|
1637
|
+
PepLayoutBuilderEditorComponent
|
|
1638
|
+
],
|
|
1639
|
+
imports: [
|
|
1640
|
+
CommonModule,
|
|
1641
|
+
HttpClientModule,
|
|
1642
|
+
OverlayModule,
|
|
1643
|
+
MatTabsModule,
|
|
1644
|
+
PepNgxLibModule,
|
|
1645
|
+
TranslateModule.forChild()
|
|
1646
|
+
],
|
|
1647
|
+
exports: [PepLayoutBuilderEditorComponent]
|
|
1648
|
+
}]
|
|
1649
|
+
}], ctorParameters: function () { return []; } });
|
|
1650
|
+
|
|
1651
|
+
class MainEditorModule {
|
|
1649
1652
|
constructor() {
|
|
1650
1653
|
// this.pepIconRegistry.registerIcons(pepIcons);
|
|
1651
1654
|
}
|
|
1652
1655
|
}
|
|
1653
|
-
|
|
1654
|
-
|
|
1656
|
+
MainEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: MainEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1657
|
+
MainEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: MainEditorModule, declarations: [MainEditorComponent], imports: [CommonModule,
|
|
1655
1658
|
HttpClientModule,
|
|
1656
1659
|
DragDropModule,
|
|
1657
1660
|
OverlayModule,
|
|
@@ -1667,8 +1670,9 @@ PepLayoutEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", v
|
|
|
1667
1670
|
PepImageModule,
|
|
1668
1671
|
PepGroupButtonsSettingsModule,
|
|
1669
1672
|
PepDraggableItemsModule,
|
|
1670
|
-
PepDialogModule,
|
|
1671
|
-
|
|
1673
|
+
PepDialogModule,
|
|
1674
|
+
PepLayoutBuilderEditorModule, i1.TranslateModule], exports: [MainEditorComponent] });
|
|
1675
|
+
MainEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: MainEditorModule, imports: [CommonModule,
|
|
1672
1676
|
HttpClientModule,
|
|
1673
1677
|
DragDropModule,
|
|
1674
1678
|
OverlayModule,
|
|
@@ -1685,12 +1689,13 @@ PepLayoutEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", v
|
|
|
1685
1689
|
PepGroupButtonsSettingsModule,
|
|
1686
1690
|
PepDraggableItemsModule,
|
|
1687
1691
|
PepDialogModule,
|
|
1692
|
+
PepLayoutBuilderEditorModule,
|
|
1688
1693
|
TranslateModule.forChild()] });
|
|
1689
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type:
|
|
1694
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: MainEditorModule, decorators: [{
|
|
1690
1695
|
type: NgModule,
|
|
1691
1696
|
args: [{
|
|
1692
1697
|
declarations: [
|
|
1693
|
-
|
|
1698
|
+
MainEditorComponent
|
|
1694
1699
|
],
|
|
1695
1700
|
imports: [
|
|
1696
1701
|
CommonModule,
|
|
@@ -1710,9 +1715,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
1710
1715
|
PepGroupButtonsSettingsModule,
|
|
1711
1716
|
PepDraggableItemsModule,
|
|
1712
1717
|
PepDialogModule,
|
|
1718
|
+
PepLayoutBuilderEditorModule,
|
|
1713
1719
|
TranslateModule.forChild()
|
|
1714
1720
|
],
|
|
1715
|
-
exports: [
|
|
1721
|
+
exports: [MainEditorComponent]
|
|
1716
1722
|
}]
|
|
1717
1723
|
}], ctorParameters: function () { return []; } });
|
|
1718
1724
|
|
|
@@ -1889,10 +1895,10 @@ class SectionEditorComponent {
|
|
|
1889
1895
|
}
|
|
1890
1896
|
}
|
|
1891
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 });
|
|
1892
|
-
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: "<
|
|
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$2.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey", "regex", "regexError", "isInFocus"], outputs: ["valueChange", "keyup"] }, { kind: "component", type: i4$4.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "placeholder", "placeholderWhenDisabled", "options", "visible", "emptyOption", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "renderTitle", "typeaheadDebounceInterval", "addValueToOptionsIfNotExist"], outputs: ["valueChange"] }, { kind: "component", type: i5$3.PepCheckboxComponent, selector: "pep-checkbox", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "additionalValue", "form", "isActive", "showTitle", "renderTitle", "layoutType", "visible"], outputs: ["valueChange"] }, { kind: "component", type: PepLayoutBuilderEditorComponent, selector: "pep-layout-builder-editor", inputs: ["editorTabs"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
|
|
1893
1899
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionEditorComponent, decorators: [{
|
|
1894
1900
|
type: Component,
|
|
1895
|
-
args: [{ selector: 'section-editor', template: "<
|
|
1901
|
+
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"] }]
|
|
1896
1902
|
}], ctorParameters: function () { return [{ type: i1.TranslateService }, { type: i2.PepDialogService }]; }, propDecorators: { hostObject: [{
|
|
1897
1903
|
type: Input
|
|
1898
1904
|
}], hostObjectChange: [{
|
|
@@ -1906,12 +1912,14 @@ SectionEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
|
|
|
1906
1912
|
PepButtonModule,
|
|
1907
1913
|
PepTextboxModule,
|
|
1908
1914
|
PepSelectModule,
|
|
1909
|
-
PepCheckboxModule,
|
|
1915
|
+
PepCheckboxModule,
|
|
1916
|
+
PepLayoutBuilderEditorModule, i1.TranslateModule], exports: [SectionEditorComponent] });
|
|
1910
1917
|
SectionEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionEditorModule, imports: [CommonModule,
|
|
1911
1918
|
PepButtonModule,
|
|
1912
1919
|
PepTextboxModule,
|
|
1913
1920
|
PepSelectModule,
|
|
1914
1921
|
PepCheckboxModule,
|
|
1922
|
+
PepLayoutBuilderEditorModule,
|
|
1915
1923
|
TranslateModule.forChild()] });
|
|
1916
1924
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionEditorModule, decorators: [{
|
|
1917
1925
|
type: NgModule,
|
|
@@ -1923,6 +1931,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
1923
1931
|
PepTextboxModule,
|
|
1924
1932
|
PepSelectModule,
|
|
1925
1933
|
PepCheckboxModule,
|
|
1934
|
+
PepLayoutBuilderEditorModule,
|
|
1926
1935
|
TranslateModule.forChild()
|
|
1927
1936
|
],
|
|
1928
1937
|
exports: [SectionEditorComponent]
|
|
@@ -1939,7 +1948,6 @@ class PepLayoutBuilderComponent extends BaseDestroyerDirective {
|
|
|
1939
1948
|
this.pepAddonService = pepAddonService;
|
|
1940
1949
|
this._availableBlocksForDrag = [];
|
|
1941
1950
|
this._blocksLayoutConfig = {};
|
|
1942
|
-
this._blockEditorTitle = '';
|
|
1943
1951
|
this._layoutEditorTitle = '';
|
|
1944
1952
|
this.backClick = new EventEmitter();
|
|
1945
1953
|
this.editorChange = new EventEmitter();
|
|
@@ -1963,16 +1971,8 @@ class PepLayoutBuilderComponent extends BaseDestroyerDirective {
|
|
|
1963
1971
|
this._blocksLayoutConfig = value;
|
|
1964
1972
|
this.layoutBuilderInternalService.setBlocksConfig(this._blocksLayoutConfig);
|
|
1965
1973
|
}
|
|
1966
|
-
set blockEditorTitle(value) {
|
|
1967
|
-
this._blockEditorTitle = value;
|
|
1968
|
-
this.setEditorTitle();
|
|
1969
|
-
}
|
|
1970
|
-
get blockEditorTitle() {
|
|
1971
|
-
return this._blockEditorTitle;
|
|
1972
|
-
}
|
|
1973
1974
|
set layoutEditorTitle(value) {
|
|
1974
1975
|
this._layoutEditorTitle = value;
|
|
1975
|
-
this.setEditorTitle();
|
|
1976
1976
|
}
|
|
1977
1977
|
get layoutEditorTitle() {
|
|
1978
1978
|
return this._layoutEditorTitle;
|
|
@@ -1988,15 +1988,6 @@ class PepLayoutBuilderComponent extends BaseDestroyerDirective {
|
|
|
1988
1988
|
});
|
|
1989
1989
|
}
|
|
1990
1990
|
}
|
|
1991
|
-
setEditorTitle() {
|
|
1992
|
-
var _a, _b;
|
|
1993
|
-
if (((_a = this.currentEditor) === null || _a === void 0 ? void 0 : _a.type) === 'layout-builder' && this.layoutEditorTitle !== '') {
|
|
1994
|
-
this.currentEditor.title = this.layoutEditorTitle;
|
|
1995
|
-
}
|
|
1996
|
-
else if (((_b = this.currentEditor) === null || _b === void 0 ? void 0 : _b.type) === 'block' && this.blockEditorTitle !== '') {
|
|
1997
|
-
this.currentEditor.title = this.blockEditorTitle;
|
|
1998
|
-
}
|
|
1999
|
-
}
|
|
2000
1991
|
subscribeEvents() {
|
|
2001
1992
|
/***********************************************************************************************/
|
|
2002
1993
|
/* Internal Events - for code usage
|
|
@@ -2050,7 +2041,6 @@ class PepLayoutBuilderComponent extends BaseDestroyerDirective {
|
|
|
2050
2041
|
sideLayout === null || sideLayout === void 0 ? void 0 : sideLayout.scrollTo(0, 0);
|
|
2051
2042
|
}
|
|
2052
2043
|
this.currentEditor = editor;
|
|
2053
|
-
this.setEditorTitle();
|
|
2054
2044
|
// Raise event to let the user set the block editor in the UI.
|
|
2055
2045
|
this.editorChange.emit(editor);
|
|
2056
2046
|
}
|
|
@@ -2104,10 +2094,10 @@ class PepLayoutBuilderComponent extends BaseDestroyerDirective {
|
|
|
2104
2094
|
}
|
|
2105
2095
|
}
|
|
2106
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: i2$1.PepAddonService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2107
|
-
PepLayoutBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepLayoutBuilderComponent, selector: "pep-layout-builder", inputs: { availableBlocksForDrag: "availableBlocksForDrag", blocksLayoutConfig: "blocksLayoutConfig", blockEditorTitle: "blockEditorTitle", layoutEditorTitle: "layoutEditorTitle" }, outputs: { backClick: "backClick", editorChange: "editorChange", blockAdded: "blockAdded", blocksRemoved: "blocksRemoved" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "layoutBuilderWrapper", first: true, predicate: ["layoutBuilderWrapper"], descendants: true, static: true }, { propertyName: "sideBarComponent", first: true, predicate: PepSideBarComponent, descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"lockScreen\" class=\"cdk-overlay-backdrop cdk-overlay-dark-backdrop cdk-overlay-backdrop-showing\"></div>\n\n<pep-page-layout [showShadow]=\"!previewMode && currentEditor !== null\" >\n <div pep-side-area *ngIf=\"!previewMode && currentEditor\" style=\"height: inherit;\">\n <pep-side-bar #sideBar [ignoreResize]=\"true\" (stateChange)=\"onSidebarStateChange($event)\">\n <div header-content class=\"side-bar-title\">\n <pep-button class=\"back-button\" sizeType=\"sm\" iconName=\"arrow_left_alt\" (buttonClick)=\"onNavigateBackFromEditor();\"></pep-button>\n <div class=\"title title-lg ellipsis\" [title]=\"currentEditor.title\">\n <span>{{ currentEditor.title }}</span>\n </div>\n </div>\n <div class=\"layout-builder-editor-wrapper\">\n <pep-layout-editor *ngIf=\"currentEditor.type === 'layout-builder'\" [availableBlocksForDrag]=\"availableBlocksForDrag\"\n [hostObject]=\"currentEditor.hostObject\" (hostObjectChange)=\"onLayoutEditorObjectChange($event)\"\n >\n <ng-container layout-editor-top-content>\n <ng-content select=\"[layout-editor-top-content]\"></ng-content>\n </ng-container>\n <ng-container layout-editor-bottom-content>\n <ng-content select=\"[layout-editor-bottom-content]\"></ng-content>\n </ng-container>\n </pep-layout-editor>\n \n <section-editor *ngIf=\"currentEditor.type === 'section'\" \n [hostObject]=\"currentEditor.hostObject\" (hostObjectChange)=\"onSectionEditorObjectChange($event)\"></section-editor>\n \n <div *ngIf=\"currentEditor.type === 'block'\" >\n <ng-content select=\"[block-editor-content]\"></ng-content>\n </div>\n </div>\n </pep-side-bar>\n </div>\n <ng-container pep-main-area>\n <div class=\"main-area-container\" [ngClass]=\"{'preview-mode': previewMode }\">\n <div class=\"header-container\" >\n <ng-container *ngIf=\"!previewMode; then editorTitleTemplate; else previewTitleTemplate\"></ng-container>\n <ng-template #editorTitleTemplate>\n <div>\n <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.VIEWPORT_WIDTH' | translate)}}: </span>\n <span class=\"body-xs\"><b>{{viewportWidth}}</b></span>\n </div>\n </ng-template>\n <ng-template #previewTitleTemplate>\n <div class=\"preview-title body-sm\">\n <span>{{('LAYOUT_BUILDER.PREVIEW_TITLE' | translate)}}</span>\n </div>\n </ng-template>\n\n <div class=\"header-group-btn\">\n <pep-group-buttons [buttons]=\"screenTypes\" [selectedButtonKey]=\"selectedScreenType\" sizeType=\"sm\" viewType=\"toggle\" >\n </pep-group-buttons>\n </div>\n\n <ng-container *ngIf=\"!previewMode; then editorButtonsTemplate; else previewButtonsTemplate\"></ng-container>\n <ng-template #editorButtonsTemplate>\n <div class=\"header-end\">\n <pep-button key='Preview' [value]=\"'ACTIONS.PREVIEW' | translate\" sizeType=\"sm\" (buttonClick)=\"togglePreviewMode()\"></pep-button>\n <ng-content select=\"[header-end-content]\"></ng-content>\n </div>\n </ng-template>\n <ng-template #previewButtonsTemplate>\n <a class=\"color-link body-sm\" (click)=\"togglePreviewMode()\" href=\"javascript:void(0)\">{{('LAYOUT_BUILDER.PREVIEW_CLICK_HERE' | translate)}}</a> \n </ng-template>\n </div>\n <div #layoutBuilderWrapper class=\"layout-builder-wrapper\" [ngClass]=\"{'limit-min-width': selectedScreenType === 'Landscape' }\">\n <ng-content select=\"[layout-content]\"></ng-content>\n <div *ngIf=\"!previewMode\" class=\"backdrop\" [ngClass]=\"{'show-backdrop': currentEditor?.type === 'section' || currentEditor?.type === 'block'}\"></div>\n </div>\n </div>\n </ng-container>\n</pep-page-layout>", styles: [".side-bar-title{display:flex;padding-top:var(--pep-spacing-sm, .5rem)}.side-bar-title .back-button{margin-inline-end:var(--pep-spacing-sm, .5rem)}.side-bar-title .title{display:flex;align-items:center}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs{height:100%}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-header,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-header{position:sticky;top:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));z-index:2}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-header-pagination,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-header-pagination{display:none}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-labels,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-labels{display:grid;grid-template-columns:1fr 1fr}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-labels .mat-tab-label,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-labels .mat-tab-label{padding:0 var(--pep-spacing-md, .75rem)!important}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-body-wrapper,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-body-wrapper{overflow:unset;margin:0;display:block}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active{overflow:unset}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active .mat-tab-body-content,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active .mat-tab-body-content{overflow:unset;display:flex;flex-direction:column;padding-inline:0!important}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab{overflow:inherit;display:inherit;flex-direction:inherit;gap:var(--pep-spacing-lg, 1rem)}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab .group-buttons-container .toggle-buttons,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab .group-buttons-container .toggle-buttons,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab .group-buttons-container .toggle-buttons,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab .group-buttons-container .toggle-buttons{width:100%}.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-color,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-select,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-textarea,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .page-builder-editor-tab pep-textbox,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-color,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-select,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-textarea,.layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .layout-builder-editor-tab pep-textbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .page-builder-editor-tab pep-textbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-textbox{margin-bottom:0!important}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container{padding-top:var(--pep-spacing-lg, 1rem);padding-bottom:var(--pep-spacing-lg, 1rem)}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group{overflow:inherit;display:inherit;flex-direction:inherit;gap:var(--pep-spacing-lg, 1rem);display:flex;flex-direction:column}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container .group-buttons-container .toggle-buttons,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group .group-buttons-container .toggle-buttons{width:100%}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-textbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-textbox{margin-bottom:0!important}.layout-builder-editor-wrapper ::ng-deep .editor-title{display:block;font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-bold, 600)!important;font-size:var(--pep-font-size-xl, 1.25rem)!important;line-height:var(--pep-line-height-xl, 1.5625rem)!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layout-builder-editor-wrapper ::ng-deep .editor-sub-title{display:block;font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-normal, 400)!important;font-size:var(--pep-font-size-md, 1rem)!important;line-height:var(--pep-line-height-md, 1.25rem)!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layout-builder-editor-wrapper ::ng-deep .editor-separator{margin-top:var(--pep-spacing-lg, 1rem);border-bottom:1px solid hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title{margin-bottom:.5rem!important;min-height:unset!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container{background:unset!important;padding-left:unset!important;padding-right:unset!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-inner-container,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container .mat-checkbox-inner-container{margin-left:0!important;margin-right:0!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-layout,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container .mat-checkbox-layout{font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-normal, 400);font-size:var(--pep-font-size-lg, 1.125rem)!important;line-height:var(--pep-line-height-lg, 1.40625rem)!important;font-weight:var(--pep-font-weight-bold, 600)!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-layout .mat-checkbox-label span,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container .mat-checkbox-layout .mat-checkbox-label span{margin:0 .5rem}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-layout{font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-normal, 400);font-size:var(--pep-font-size-md, 1rem)!important;line-height:var(--pep-line-height-md, 1.25rem)!important;font-weight:var(--pep-font-weight-normal, 400)!important}.main-area-container{min-height:100%;display:grid;grid-template-rows:auto 1fr}.main-area-container .header-container{display:flex;position:sticky;top:0;z-index:100;height:3rem;align-items:center;justify-content:space-between;padding:0 var(--pep-spacing-sm, .5rem)}.main-area-container .header-container .header-group-btn{display:flex;justify-content:space-around;align-items:center}.main-area-container .header-container .header-end{display:flex;justify-content:flex-end;gap:var(--pep-spacing-sm, .5rem)}.main-area-container .header-container ::ng-deep .group-buttons-container .toggle-buttons{width:16rem}.main-area-container .layout-builder-wrapper{width:100%;margin:0 auto;position:relative}.main-area-container .layout-builder-wrapper.limit-min-width{min-width:800px}.main-area-container .layout-builder-wrapper .backdrop{position:absolute;width:100%;height:100%;top:0;z-index:10;display:none}.main-area-container .layout-builder-wrapper .backdrop.show-backdrop{display:block}\n", ".layout-builder-editor-wrapper ::ng-deep .page-builder-editor-tabs .mat-tab-header,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-header{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.main-area-container{background:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.04)}.main-area-container .header-container{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.main-area-container .header-container .header-title{color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.7)}.main-area-container .header-container .size-limit-container{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}.main-area-container.preview-mode .header-container{background:unset;background-color:hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.main-area-container.preview-mode .header-container .preview-title,.main-area-container.preview-mode .header-container .color-link{color:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.main-area-container.preview-mode .layout-builder-wrapper{overflow:auto}.main-area-container .layout-builder-wrapper{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:var(--pep-shadow-md-offset, 0 .5rem 1rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.main-area-container .layout-builder-wrapper .backdrop{background:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.5)}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$3.PepPageLayoutComponent, selector: "pep-page-layout", inputs: ["addPadding", "showShadow"] }, { kind: "component", type: i6$1.PepSideBarComponent, selector: "pep-side-bar", inputs: ["position", "ignoreResize", "showHeader", "showFooter", "showToggle", "useAsWebComponent"], outputs: ["stateChange"] }, { kind: "component", type: i5$1.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i8$1.PepGroupButtonsComponent, selector: "pep-group-buttons", inputs: ["viewType", "styleType", "sizeType", "buttons", "buttonsDisabled", "supportUnselect", "selectedButtonKey", "stretch"], outputs: ["buttonClick"] }, { kind: "component", type: PepLayoutEditorComponent, selector: "pep-layout-editor", inputs: ["availableBlocksForDrag", "hostObject"], outputs: ["hostObjectChange"] }, { kind: "component", type: SectionEditorComponent, selector: "section-editor", inputs: ["hostObject"], outputs: ["hostObjectChange"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
|
|
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" }] });
|
|
2108
2098
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutBuilderComponent, decorators: [{
|
|
2109
2099
|
type: Component,
|
|
2110
|
-
args: [{ selector: 'pep-layout-builder', template: "<div *ngIf=\"lockScreen\" class=\"cdk-overlay-backdrop cdk-overlay-dark-backdrop cdk-overlay-backdrop-showing\"></div>\n\n<pep-page-layout [showShadow]=\"!previewMode && currentEditor !== null\" >\n <div pep-side-area *ngIf=\"!previewMode && currentEditor\" style=\"height: inherit;\">\n <pep-side-bar #sideBar [ignoreResize]=\"true\" (stateChange)=\"onSidebarStateChange($event)\">\n <div header-content class=\"side-bar-title\">\n <pep-button class=\"back-button\" sizeType=\"sm\" iconName=\"arrow_left_alt\" (buttonClick)=\"onNavigateBackFromEditor();\"></pep-button>\n <div class=\"title title-lg ellipsis\" [title]=\"currentEditor.title\">\n <span>{{ currentEditor.title }}</span>\n </div>\n </div>\n <div class=\"layout-builder-editor-wrapper\">\n <pep-layout-editor *ngIf=\"currentEditor.type === 'layout-builder'\" [availableBlocksForDrag]=\"availableBlocksForDrag\"\n [hostObject]=\"currentEditor.hostObject\" (hostObjectChange)=\"onLayoutEditorObjectChange($event)\"\n >\n <ng-container layout-editor-top-content>\n <ng-content select=\"[layout-editor-top-content]\"></ng-content>\n </ng-container>\n <ng-container layout-editor-bottom-content>\n <ng-content select=\"[layout-editor-bottom-content]\"></ng-content>\n </ng-container>\n </pep-layout-editor>\n \n <section-editor *ngIf=\"currentEditor.type === 'section'\" \n [hostObject]=\"currentEditor.hostObject\" (hostObjectChange)=\"onSectionEditorObjectChange($event)\"></section-editor>\n \n <div *ngIf=\"currentEditor.type === 'block'\" >\n <ng-content select=\"[block-editor-content]\"></ng-content>\n </div>\n </div>\n </pep-side-bar>\n </div>\n <ng-container pep-main-area>\n <div class=\"main-area-container\" [ngClass]=\"{'preview-mode': previewMode }\">\n <div class=\"header-container\" >\n <ng-container *ngIf=\"!previewMode; then editorTitleTemplate; else previewTitleTemplate\"></ng-container>\n <ng-template #editorTitleTemplate>\n <div>\n <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.VIEWPORT_WIDTH' | translate)}}: </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"] }]
|
|
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"] }]
|
|
2111
2101
|
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.TranslateService }, { type: LayoutBuilderInternalService }, { type: i2$1.PepAddonService }]; }, propDecorators: { layoutBuilderWrapper: [{
|
|
2112
2102
|
type: ViewChild,
|
|
2113
2103
|
args: ['layoutBuilderWrapper', { static: true }]
|
|
@@ -2118,8 +2108,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
2118
2108
|
type: Input
|
|
2119
2109
|
}], blocksLayoutConfig: [{
|
|
2120
2110
|
type: Input
|
|
2121
|
-
}], blockEditorTitle: [{
|
|
2122
|
-
type: Input
|
|
2123
2111
|
}], layoutEditorTitle: [{
|
|
2124
2112
|
type: Input
|
|
2125
2113
|
}], backClick: [{
|
|
@@ -2198,11 +2186,15 @@ PepLayoutBuilderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
|
|
|
2198
2186
|
PepGroupButtonsModule,
|
|
2199
2187
|
PepDraggableItemsModule,
|
|
2200
2188
|
PepGroupButtonsSettingsModule,
|
|
2201
|
-
|
|
2189
|
+
HideInModule,
|
|
2202
2190
|
PepLayoutModule,
|
|
2203
|
-
|
|
2204
|
-
SectionEditorModule
|
|
2205
|
-
|
|
2191
|
+
MainEditorModule,
|
|
2192
|
+
SectionEditorModule,
|
|
2193
|
+
PepLayoutBuilderEditorModule
|
|
2194
|
+
// SectionBlockModule
|
|
2195
|
+
], exports: [PepLayoutBuilderComponent,
|
|
2196
|
+
PepLayoutModule,
|
|
2197
|
+
PepLayoutBuilderEditorModule] });
|
|
2206
2198
|
PepLayoutBuilderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutBuilderModule, providers: [
|
|
2207
2199
|
LayoutBuilderInternalService,
|
|
2208
2200
|
PepLayoutBuilderService
|
|
@@ -2225,10 +2217,15 @@ PepLayoutBuilderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
|
|
|
2225
2217
|
PepGroupButtonsModule,
|
|
2226
2218
|
PepDraggableItemsModule,
|
|
2227
2219
|
PepGroupButtonsSettingsModule,
|
|
2228
|
-
|
|
2220
|
+
HideInModule,
|
|
2221
|
+
PepLayoutModule,
|
|
2222
|
+
MainEditorModule,
|
|
2223
|
+
SectionEditorModule,
|
|
2224
|
+
PepLayoutBuilderEditorModule
|
|
2225
|
+
// SectionBlockModule
|
|
2226
|
+
,
|
|
2229
2227
|
PepLayoutModule,
|
|
2230
|
-
|
|
2231
|
-
SectionEditorModule, PepLayoutModule] });
|
|
2228
|
+
PepLayoutBuilderEditorModule] });
|
|
2232
2229
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutBuilderModule, decorators: [{
|
|
2233
2230
|
type: NgModule,
|
|
2234
2231
|
args: [{
|
|
@@ -2255,15 +2252,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
2255
2252
|
PepGroupButtonsModule,
|
|
2256
2253
|
PepDraggableItemsModule,
|
|
2257
2254
|
PepGroupButtonsSettingsModule,
|
|
2258
|
-
|
|
2255
|
+
HideInModule,
|
|
2259
2256
|
PepLayoutModule,
|
|
2260
|
-
|
|
2257
|
+
MainEditorModule,
|
|
2261
2258
|
SectionEditorModule,
|
|
2259
|
+
PepLayoutBuilderEditorModule
|
|
2262
2260
|
// SectionBlockModule
|
|
2263
2261
|
],
|
|
2264
2262
|
exports: [
|
|
2265
2263
|
PepLayoutBuilderComponent,
|
|
2266
2264
|
PepLayoutModule,
|
|
2265
|
+
PepLayoutBuilderEditorModule
|
|
2267
2266
|
],
|
|
2268
2267
|
providers: [
|
|
2269
2268
|
LayoutBuilderInternalService,
|
|
@@ -2272,11 +2271,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
2272
2271
|
}]
|
|
2273
2272
|
}], ctorParameters: function () { return [{ type: i1$1.PepIconRegistry }]; } });
|
|
2274
2273
|
|
|
2275
|
-
// export interface IBlockEditor {
|
|
2276
|
-
// id: string,
|
|
2277
|
-
// [key: string]: any
|
|
2278
|
-
// }
|
|
2279
|
-
|
|
2280
2274
|
/*
|
|
2281
2275
|
* Public API Surface of ngx-composite-lib/layout-builder
|
|
2282
2276
|
*/
|
|
@@ -2285,5 +2279,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
2285
2279
|
* Generated bundle index. Do not edit.
|
|
2286
2280
|
*/
|
|
2287
2281
|
|
|
2288
|
-
export { PepLayoutBuilderComponent, PepLayoutBuilderModule, PepLayoutBuilderService, PepLayoutComponent, PepLayoutModule };
|
|
2282
|
+
export { PepLayoutBuilderComponent, PepLayoutBuilderEditorComponent, PepLayoutBuilderEditorModule, PepLayoutBuilderModule, PepLayoutBuilderService, PepLayoutComponent, PepLayoutModule };
|
|
2289
2283
|
//# sourceMappingURL=pepperi-addons-ngx-composite-lib-layout-builder.mjs.map
|