@pepperi-addons/ngx-composite-lib 0.4.2-beta.76 → 0.4.2-beta.77
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/layout-builder/layout-builder-internal.service.mjs +7 -36
- package/esm2020/layout-builder/layout-builder.component.mjs +3 -23
- package/esm2020/layout-builder/layout-builder.model.mjs +1 -1
- package/esm2020/layout-builder/section/section.component.mjs +2 -2
- package/fesm2015/pepperi-addons-ngx-composite-lib-layout-builder.mjs +9 -59
- package/fesm2015/pepperi-addons-ngx-composite-lib-layout-builder.mjs.map +1 -1
- package/fesm2020/pepperi-addons-ngx-composite-lib-layout-builder.mjs +9 -58
- package/fesm2020/pepperi-addons-ngx-composite-lib-layout-builder.mjs.map +1 -1
- package/layout-builder/layout-builder-internal.service.d.ts +1 -1
- package/layout-builder/layout-builder.component.d.ts +1 -5
- package/package.json +1 -1
|
@@ -309,7 +309,7 @@ class LayoutBuilderInternalService {
|
|
|
309
309
|
horizontalSpacing: layoutView?.Layout.HorizontalSpacing,
|
|
310
310
|
sectionsGap: layoutView?.Layout.SectionsGap,
|
|
311
311
|
columnsGap: layoutView?.Layout.ColumnsGap,
|
|
312
|
-
// roundedCorners: layoutView?.
|
|
312
|
+
// roundedCorners: layoutView?.Layout.RoundedCorners
|
|
313
313
|
};
|
|
314
314
|
this._editorsBreadCrumb[0].hostObject = layoutEditor;
|
|
315
315
|
}
|
|
@@ -350,13 +350,11 @@ class LayoutBuilderInternalService {
|
|
|
350
350
|
}
|
|
351
351
|
getBlockEditor(blockKey, title) {
|
|
352
352
|
// Get block editor title.
|
|
353
|
-
const blockTitle = title || this.getBlockTitle(blockKey);
|
|
353
|
+
const blockTitle = title || this.getBlockTitle(blockKey);
|
|
354
354
|
return {
|
|
355
355
|
id: blockKey,
|
|
356
356
|
type: 'block',
|
|
357
|
-
title: blockTitle
|
|
358
|
-
// remoteModuleOptions: remoteLoaderOptions,
|
|
359
|
-
hostObject: {} // JSON.parse(JSON.stringify(hostObject))
|
|
357
|
+
title: blockTitle
|
|
360
358
|
};
|
|
361
359
|
}
|
|
362
360
|
getSectionEditorTitle(section, sectionIndex) {
|
|
@@ -406,14 +404,6 @@ class LayoutBuilderInternalService {
|
|
|
406
404
|
}
|
|
407
405
|
return currentColumn;
|
|
408
406
|
}
|
|
409
|
-
// private setSectionsColumnsGap(layoutView: IPepLayoutView) {
|
|
410
|
-
// if (layoutView?.Layout?.Sections) {
|
|
411
|
-
// for (let index = 0; index < layoutView.Layout.Sections.length; index++) {
|
|
412
|
-
// const section = layoutView.Layout.Sections[index];
|
|
413
|
-
// section.ColumnsGap = layoutView.Layout.ColumnsGap;
|
|
414
|
-
// }
|
|
415
|
-
// }
|
|
416
|
-
// }
|
|
417
407
|
getCssScreenWidh(screenType) {
|
|
418
408
|
let widthToSet = '100%';
|
|
419
409
|
if (screenType === 'Tablet') {
|
|
@@ -424,21 +414,6 @@ class LayoutBuilderInternalService {
|
|
|
424
414
|
}
|
|
425
415
|
return widthToSet;
|
|
426
416
|
}
|
|
427
|
-
// private getBlockContainerByBlockKey(blockKey: string): IPepLayoutBlockContainer | undefined {
|
|
428
|
-
// let blockContainerToFind: IPepLayoutBlockContainer | undefined = undefined;
|
|
429
|
-
// const layoutView = this._layoutViewSubject.getValue();
|
|
430
|
-
// const sections = layoutView?.Layout.Sections || [];
|
|
431
|
-
// for (let sectionIndex = 0; sectionIndex < sections.length; sectionIndex++) {
|
|
432
|
-
// const section = sections[sectionIndex];
|
|
433
|
-
// // Get the block container.
|
|
434
|
-
// const columnIndex = section.Columns.findIndex(column => column.BlockContainer?.BlockKey === blockKey);
|
|
435
|
-
// if (columnIndex > -1) {
|
|
436
|
-
// blockContainerToFind = section.Columns[columnIndex].BlockContainer
|
|
437
|
-
// break;
|
|
438
|
-
// }
|
|
439
|
-
// }
|
|
440
|
-
// return blockContainerToFind;
|
|
441
|
-
// }
|
|
442
417
|
getBlocksNumber() {
|
|
443
418
|
let blocksNumber = 0;
|
|
444
419
|
const sections = this._layoutViewSubject.getValue()?.Layout.Sections || [];
|
|
@@ -487,7 +462,7 @@ class LayoutBuilderInternalService {
|
|
|
487
462
|
getIsHidden(hideIn, currentScreenType) {
|
|
488
463
|
return (hideIn && hideIn?.length > 0) ? hideIn.some(hi => hi === currentScreenType) : false;
|
|
489
464
|
}
|
|
490
|
-
navigateToEditor(editorType, id, title) {
|
|
465
|
+
navigateToEditor(editorType, id, title = '') {
|
|
491
466
|
let success = false;
|
|
492
467
|
// Cannot navigate into 'layout-builder' because this is first and const in the editorsBreadCrumbs.
|
|
493
468
|
if (editorType !== 'layout-builder' && id?.length > 0) {
|
|
@@ -528,8 +503,7 @@ class LayoutBuilderInternalService {
|
|
|
528
503
|
layoutView.Layout.VerticalSpacing = editorData.verticalSpacing;
|
|
529
504
|
layoutView.Layout.SectionsGap = editorData.sectionsGap;
|
|
530
505
|
layoutView.Layout.ColumnsGap = editorData.columnsGap;
|
|
531
|
-
// layoutView.
|
|
532
|
-
// this.setSectionsColumnsGap(layoutView);
|
|
506
|
+
// layoutView.Layout.RoundedCorners = editorData.roundedCorners;
|
|
533
507
|
this.notifyLayoutViewChange(layoutView);
|
|
534
508
|
}
|
|
535
509
|
}
|
|
@@ -703,8 +677,7 @@ class LayoutBuilderInternalService {
|
|
|
703
677
|
this.notifyBlockAdded(blockAddedEventData);
|
|
704
678
|
if (this._navigateToEditorAfterBlockAdded) {
|
|
705
679
|
// Navigate to the block editor.
|
|
706
|
-
|
|
707
|
-
this.navigateToEditor('block', blockKey, '');
|
|
680
|
+
this.navigateToEditor('block', blockKey);
|
|
708
681
|
}
|
|
709
682
|
}
|
|
710
683
|
}
|
|
@@ -786,8 +759,6 @@ class LayoutBuilderInternalService {
|
|
|
786
759
|
// Load the layout editor.
|
|
787
760
|
this.loadDefaultEditor(layoutView);
|
|
788
761
|
}
|
|
789
|
-
// Set the columns gap of the sections.
|
|
790
|
-
// this.setSectionsColumnsGap(layoutView);
|
|
791
762
|
}
|
|
792
763
|
// Load only the layout view.
|
|
793
764
|
this.notifyLayoutViewChange(layoutView);
|
|
@@ -1123,7 +1094,7 @@ class SectionComponent extends BaseDestroyerDirective {
|
|
|
1123
1094
|
this.sectionColumnKeyPrefix = this.layoutBuilderInternalService.getSectionColumnKey(this.key);
|
|
1124
1095
|
}
|
|
1125
1096
|
onEditSectionClick() {
|
|
1126
|
-
this.layoutBuilderInternalService.navigateToEditor('section', this.key
|
|
1097
|
+
this.layoutBuilderInternalService.navigateToEditor('section', this.key);
|
|
1127
1098
|
}
|
|
1128
1099
|
onRemoveSectionClick() {
|
|
1129
1100
|
this.layoutBuilderInternalService.removeSection(this.key);
|
|
@@ -1923,7 +1894,6 @@ class PepLayoutBuilderComponent extends BaseDestroyerDirective {
|
|
|
1923
1894
|
this.pepAddonService = pepAddonService;
|
|
1924
1895
|
this._availableBlocksForDrag = [];
|
|
1925
1896
|
this._blocksLayoutConfig = {};
|
|
1926
|
-
this._blockEditorTitle = '';
|
|
1927
1897
|
this._layoutEditorTitle = '';
|
|
1928
1898
|
this.backClick = new EventEmitter();
|
|
1929
1899
|
this.editorChange = new EventEmitter();
|
|
@@ -1947,16 +1917,8 @@ class PepLayoutBuilderComponent extends BaseDestroyerDirective {
|
|
|
1947
1917
|
this._blocksLayoutConfig = value;
|
|
1948
1918
|
this.layoutBuilderInternalService.setBlocksConfig(this._blocksLayoutConfig);
|
|
1949
1919
|
}
|
|
1950
|
-
set blockEditorTitle(value) {
|
|
1951
|
-
this._blockEditorTitle = value;
|
|
1952
|
-
this.setEditorTitle();
|
|
1953
|
-
}
|
|
1954
|
-
get blockEditorTitle() {
|
|
1955
|
-
return this._blockEditorTitle;
|
|
1956
|
-
}
|
|
1957
1920
|
set layoutEditorTitle(value) {
|
|
1958
1921
|
this._layoutEditorTitle = value;
|
|
1959
|
-
this.setEditorTitle();
|
|
1960
1922
|
}
|
|
1961
1923
|
get layoutEditorTitle() {
|
|
1962
1924
|
return this._layoutEditorTitle;
|
|
@@ -1971,14 +1933,6 @@ class PepLayoutBuilderComponent extends BaseDestroyerDirective {
|
|
|
1971
1933
|
});
|
|
1972
1934
|
}
|
|
1973
1935
|
}
|
|
1974
|
-
setEditorTitle() {
|
|
1975
|
-
if (this.currentEditor?.type === 'layout-builder' && this.layoutEditorTitle !== '') {
|
|
1976
|
-
this.currentEditor.title = this.layoutEditorTitle;
|
|
1977
|
-
}
|
|
1978
|
-
else if (this.currentEditor?.type === 'block' && this.blockEditorTitle !== '') {
|
|
1979
|
-
this.currentEditor.title = this.blockEditorTitle;
|
|
1980
|
-
}
|
|
1981
|
-
}
|
|
1982
1936
|
subscribeEvents() {
|
|
1983
1937
|
/***********************************************************************************************/
|
|
1984
1938
|
/* Internal Events - for code usage
|
|
@@ -2030,7 +1984,6 @@ class PepLayoutBuilderComponent extends BaseDestroyerDirective {
|
|
|
2030
1984
|
sideLayout?.scrollTo(0, 0);
|
|
2031
1985
|
}
|
|
2032
1986
|
this.currentEditor = editor;
|
|
2033
|
-
this.setEditorTitle();
|
|
2034
1987
|
// Raise event to let the user set the block editor in the UI.
|
|
2035
1988
|
this.editorChange.emit(editor);
|
|
2036
1989
|
}
|
|
@@ -2083,10 +2036,10 @@ class PepLayoutBuilderComponent extends BaseDestroyerDirective {
|
|
|
2083
2036
|
}
|
|
2084
2037
|
}
|
|
2085
2038
|
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 });
|
|
2086
|
-
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" }] });
|
|
2039
|
+
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 <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" }] });
|
|
2087
2040
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutBuilderComponent, decorators: [{
|
|
2088
2041
|
type: Component,
|
|
2089
|
-
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"] }]
|
|
2042
|
+
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 <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"] }]
|
|
2090
2043
|
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.TranslateService }, { type: LayoutBuilderInternalService }, { type: i2$1.PepAddonService }]; }, propDecorators: { layoutBuilderWrapper: [{
|
|
2091
2044
|
type: ViewChild,
|
|
2092
2045
|
args: ['layoutBuilderWrapper', { static: true }]
|
|
@@ -2097,8 +2050,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
2097
2050
|
type: Input
|
|
2098
2051
|
}], blocksLayoutConfig: [{
|
|
2099
2052
|
type: Input
|
|
2100
|
-
}], blockEditorTitle: [{
|
|
2101
|
-
type: Input
|
|
2102
2053
|
}], layoutEditorTitle: [{
|
|
2103
2054
|
type: Input
|
|
2104
2055
|
}], backClick: [{
|