@pepperi-addons/ngx-composite-lib 0.4.2-beta.67 → 0.4.2-beta.68
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.component.mjs +23 -9
- package/esm2020/layout-builder/layout-builder.service.mjs +49 -51
- package/fesm2015/pepperi-addons-ngx-composite-lib-layout-builder.mjs +72 -60
- package/fesm2015/pepperi-addons-ngx-composite-lib-layout-builder.mjs.map +1 -1
- package/fesm2020/pepperi-addons-ngx-composite-lib-layout-builder.mjs +70 -58
- package/fesm2020/pepperi-addons-ngx-composite-lib-layout-builder.mjs.map +1 -1
- package/layout-builder/layout-builder.component.d.ts +6 -2
- package/layout-builder/layout-builder.service.d.ts +11 -10
- package/package.json +1 -1
|
@@ -296,14 +296,19 @@ class PepLayoutBuilderService {
|
|
|
296
296
|
notifyAvailableBlocksForDragMapChange() {
|
|
297
297
|
this._availableBlocksForDragMapSubject.next(this.availableBlocksForDragMap);
|
|
298
298
|
}
|
|
299
|
+
notifyPreviewModeChange(value) {
|
|
300
|
+
this._previewModeSubject.next(value);
|
|
301
|
+
this.setEditableState();
|
|
302
|
+
}
|
|
303
|
+
notifyLockScreen(value) {
|
|
304
|
+
this._lockScreenSubject.next(value);
|
|
305
|
+
}
|
|
306
|
+
notifySectionsColumnsDropListChange(sectionsColumnsDropList) {
|
|
307
|
+
this._sectionsColumnsDropListSubject.next(sectionsColumnsDropList);
|
|
308
|
+
}
|
|
299
309
|
updateLayoutEditorProperties(layoutView) {
|
|
300
310
|
if (this._editorsBreadCrumb[0]) {
|
|
301
311
|
const layoutEditor = {
|
|
302
|
-
// pageName: page?.Name,
|
|
303
|
-
// pageDescription: page?.Description,
|
|
304
|
-
// parameters: page.Parameters,
|
|
305
|
-
// onLoadFlow: page.OnLoadFlow,
|
|
306
|
-
// onChangeFlow: page.OnChangeFlow,
|
|
307
312
|
maxWidth: layoutView?.Layout.MaxWidth || 0,
|
|
308
313
|
verticalSpacing: layoutView?.Layout.VerticalSpacing,
|
|
309
314
|
horizontalSpacing: layoutView?.Layout.HorizontalSpacing,
|
|
@@ -335,21 +340,36 @@ class PepLayoutBuilderService {
|
|
|
335
340
|
this.notifyEditorChange(this._editorsBreadCrumb[this._editorsBreadCrumb.length - 1]);
|
|
336
341
|
}
|
|
337
342
|
}
|
|
338
|
-
|
|
343
|
+
getEditorByType(editorType, id) {
|
|
339
344
|
// Build editor object.
|
|
340
345
|
let editor = null;
|
|
341
346
|
if (editorType === 'section') {
|
|
342
|
-
editor = this.
|
|
347
|
+
editor = this.getInternalSectionEditor(id);
|
|
343
348
|
}
|
|
344
349
|
else if (editorType === 'block') {
|
|
345
|
-
editor = this.
|
|
350
|
+
editor = this.getInternalBlockEditor(id);
|
|
346
351
|
}
|
|
347
352
|
return editor;
|
|
348
353
|
}
|
|
354
|
+
getInternalBlockEditor(blockKey) {
|
|
355
|
+
const blockContainer = this.getBlockContainerByBlockKey(blockKey);
|
|
356
|
+
const defaultTitle = this.translate.instant('LAYOUT_BUILDER.NO_TITLE');
|
|
357
|
+
let blockTitle = defaultTitle;
|
|
358
|
+
if (blockContainer) {
|
|
359
|
+
blockTitle = this.availableBlocksForDragMap?.get(blockContainer?.DraggableItemKey)?.title || defaultTitle;
|
|
360
|
+
}
|
|
361
|
+
return {
|
|
362
|
+
id: blockKey,
|
|
363
|
+
type: 'block',
|
|
364
|
+
title: blockTitle,
|
|
365
|
+
// remoteModuleOptions: remoteLoaderOptions,
|
|
366
|
+
hostObject: {} // JSON.parse(JSON.stringify(hostObject))
|
|
367
|
+
};
|
|
368
|
+
}
|
|
349
369
|
getSectionEditorTitle(section, sectionIndex) {
|
|
350
370
|
return section.Name || `${this._defaultSectionTitle} ${sectionIndex + 1}`;
|
|
351
371
|
}
|
|
352
|
-
|
|
372
|
+
getInternalSectionEditor(sectionId) {
|
|
353
373
|
const layoutView = this._layoutViewSubject.getValue();
|
|
354
374
|
const sections = layoutView?.Layout.Sections || [];
|
|
355
375
|
const sectionIndex = sections.findIndex(section => section.Key === sectionId);
|
|
@@ -393,14 +413,14 @@ class PepLayoutBuilderService {
|
|
|
393
413
|
}
|
|
394
414
|
return currentColumn;
|
|
395
415
|
}
|
|
396
|
-
setSectionsColumnsGap(layoutView) {
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
}
|
|
416
|
+
// private setSectionsColumnsGap(layoutView: IPepLayoutView) {
|
|
417
|
+
// if (layoutView?.Layout?.Sections) {
|
|
418
|
+
// for (let index = 0; index < layoutView.Layout.Sections.length; index++) {
|
|
419
|
+
// const section = layoutView.Layout.Sections[index];
|
|
420
|
+
// section.ColumnsGap = layoutView.Layout.ColumnsGap;
|
|
421
|
+
// }
|
|
422
|
+
// }
|
|
423
|
+
// }
|
|
404
424
|
getCssScreenWidh(screenType) {
|
|
405
425
|
let widthToSet = '100%';
|
|
406
426
|
if (screenType === 'Tablet') {
|
|
@@ -437,22 +457,14 @@ class PepLayoutBuilderService {
|
|
|
437
457
|
/***********************************************************************************************/
|
|
438
458
|
/* Public functions
|
|
439
459
|
/***********************************************************************************************/
|
|
440
|
-
|
|
441
|
-
this.
|
|
460
|
+
setSectionsColumnsDropListChange(sectionsColumnsDropList) {
|
|
461
|
+
this.notifySectionsColumnsDropListChange(sectionsColumnsDropList);
|
|
442
462
|
}
|
|
443
|
-
|
|
444
|
-
this.
|
|
445
|
-
this.setEditableState();
|
|
463
|
+
setLockScreen(value) {
|
|
464
|
+
this.notifyLockScreen(value);
|
|
446
465
|
}
|
|
447
|
-
|
|
448
|
-
this.
|
|
449
|
-
}
|
|
450
|
-
updateCurrentEditorTitle(title) {
|
|
451
|
-
const currentEditor = this._editorSubject.getValue();
|
|
452
|
-
if (currentEditor) {
|
|
453
|
-
currentEditor.title = title;
|
|
454
|
-
this.notifyEditorChange(currentEditor);
|
|
455
|
-
}
|
|
466
|
+
changePreviewMode(value) {
|
|
467
|
+
this.notifyPreviewModeChange(value);
|
|
456
468
|
}
|
|
457
469
|
setAvailableBlocksToDrag(availableBlocksForDrag) {
|
|
458
470
|
this._availableBlocksForDragMap.clear();
|
|
@@ -461,21 +473,6 @@ class PepLayoutBuilderService {
|
|
|
461
473
|
});
|
|
462
474
|
this.notifyAvailableBlocksForDragMapChange();
|
|
463
475
|
}
|
|
464
|
-
getBlockEditor(blockKey) {
|
|
465
|
-
const blockContainer = this.getBlockContainerByBlockKey(blockKey);
|
|
466
|
-
const defaultTitle = this.translate.instant('LAYOUT_BUILDER.NO_TITLE');
|
|
467
|
-
let blockTitle = defaultTitle;
|
|
468
|
-
if (blockContainer) {
|
|
469
|
-
blockTitle = this.availableBlocksForDragMap?.get(blockContainer?.DraggableItemKey)?.title || defaultTitle;
|
|
470
|
-
}
|
|
471
|
-
return {
|
|
472
|
-
id: blockKey,
|
|
473
|
-
type: 'block',
|
|
474
|
-
title: blockTitle,
|
|
475
|
-
// remoteModuleOptions: remoteLoaderOptions,
|
|
476
|
-
hostObject: {} // JSON.parse(JSON.stringify(hostObject))
|
|
477
|
-
};
|
|
478
|
-
}
|
|
479
476
|
getScreenType(size) {
|
|
480
477
|
const screenType = size < PepScreenSizeType.MD ? 'Landscape' :
|
|
481
478
|
(size === PepScreenSizeType.MD || size === PepScreenSizeType.SM ? 'Tablet' : 'Phablet');
|
|
@@ -499,7 +496,7 @@ class PepLayoutBuilderService {
|
|
|
499
496
|
// Always pop the last and insert the current.
|
|
500
497
|
this._editorsBreadCrumb.pop();
|
|
501
498
|
}
|
|
502
|
-
let editor = this.
|
|
499
|
+
let editor = this.getEditorByType(editorType, id);
|
|
503
500
|
if (editor) {
|
|
504
501
|
this._editorsBreadCrumb.push(editor);
|
|
505
502
|
this.changeCurrentEditor();
|
|
@@ -529,7 +526,7 @@ class PepLayoutBuilderService {
|
|
|
529
526
|
layoutView.Layout.SectionsGap = editorData.sectionsGap;
|
|
530
527
|
layoutView.Layout.ColumnsGap = editorData.columnsGap;
|
|
531
528
|
// layoutView.layout.RoundedCorners = editorData.roundedCorners;
|
|
532
|
-
this.setSectionsColumnsGap(layoutView);
|
|
529
|
+
// this.setSectionsColumnsGap(layoutView);
|
|
533
530
|
this.notifyLayoutViewChange(layoutView);
|
|
534
531
|
}
|
|
535
532
|
}
|
|
@@ -566,7 +563,8 @@ class PepLayoutBuilderService {
|
|
|
566
563
|
const currentEditor = this._editorSubject.getValue();
|
|
567
564
|
if (currentEditor && currentEditor.type === 'section' && currentEditor.id === currentSection.Key) {
|
|
568
565
|
const title = this.getSectionEditorTitle(currentSection, sectionIndex);
|
|
569
|
-
|
|
566
|
+
currentEditor.title = title;
|
|
567
|
+
this.notifyEditorChange(currentEditor);
|
|
570
568
|
}
|
|
571
569
|
// Update sections change.
|
|
572
570
|
this.notifyLayoutViewChange(layoutView);
|
|
@@ -767,7 +765,7 @@ class PepLayoutBuilderService {
|
|
|
767
765
|
// Load the layout editor.
|
|
768
766
|
this.loadDefaultEditor(layoutView);
|
|
769
767
|
// Set the columns gap of the sections.
|
|
770
|
-
this.setSectionsColumnsGap(layoutView);
|
|
768
|
+
// this.setSectionsColumnsGap(layoutView);
|
|
771
769
|
}
|
|
772
770
|
// Load only the layout view.
|
|
773
771
|
this.notifyLayoutViewChange(layoutView);
|
|
@@ -1938,8 +1936,9 @@ class PepLayoutBuilderComponent extends BaseDestroyerDirective {
|
|
|
1938
1936
|
this.layoutBuilderService = layoutBuilderService;
|
|
1939
1937
|
this.pepAddonService = pepAddonService;
|
|
1940
1938
|
this._availableBlocksForDrag = [];
|
|
1939
|
+
this._layoutEditorTitle = '';
|
|
1941
1940
|
this.backClick = new EventEmitter();
|
|
1942
|
-
this.
|
|
1941
|
+
this.editorChange = new EventEmitter(); // blockKey
|
|
1943
1942
|
this.blockAdded = new EventEmitter();
|
|
1944
1943
|
this.blocksRemoved = new EventEmitter();
|
|
1945
1944
|
this.lockScreen = false;
|
|
@@ -1957,6 +1956,13 @@ class PepLayoutBuilderComponent extends BaseDestroyerDirective {
|
|
|
1957
1956
|
get availableBlocksForDrag() {
|
|
1958
1957
|
return this._availableBlocksForDrag;
|
|
1959
1958
|
}
|
|
1959
|
+
set layoutEditorTitle(value) {
|
|
1960
|
+
this._layoutEditorTitle = value;
|
|
1961
|
+
this.setLayoutEditorTitle();
|
|
1962
|
+
}
|
|
1963
|
+
get layoutEditorTitle() {
|
|
1964
|
+
return this._layoutEditorTitle;
|
|
1965
|
+
}
|
|
1960
1966
|
setScreenWidth(screenType) {
|
|
1961
1967
|
this.layoutBuilderService.setScreenWidth(screenType);
|
|
1962
1968
|
}
|
|
@@ -1967,6 +1973,11 @@ class PepLayoutBuilderComponent extends BaseDestroyerDirective {
|
|
|
1967
1973
|
});
|
|
1968
1974
|
}
|
|
1969
1975
|
}
|
|
1976
|
+
setLayoutEditorTitle() {
|
|
1977
|
+
if (this.currentEditor?.type === 'layout-builder' && this.layoutEditorTitle !== '') {
|
|
1978
|
+
this.currentEditor.title = this.layoutEditorTitle;
|
|
1979
|
+
}
|
|
1980
|
+
}
|
|
1970
1981
|
subscribeEvents() {
|
|
1971
1982
|
/***********************************************************************************************/
|
|
1972
1983
|
/* Internal Events - for code usage
|
|
@@ -2004,7 +2015,7 @@ class PepLayoutBuilderComponent extends BaseDestroyerDirective {
|
|
|
2004
2015
|
const sectionsColumnsDropList = [].concat(...sections.map((section) => {
|
|
2005
2016
|
return section.Columns.map((column, index) => this.layoutBuilderService.getSectionColumnKey(section.Key, index.toString()));
|
|
2006
2017
|
}));
|
|
2007
|
-
this.layoutBuilderService.
|
|
2018
|
+
this.layoutBuilderService.setSectionsColumnsDropListChange(sectionsColumnsDropList);
|
|
2008
2019
|
});
|
|
2009
2020
|
/***********************************************************************************************/
|
|
2010
2021
|
/* External Events - for raise to the client
|
|
@@ -2018,10 +2029,9 @@ class PepLayoutBuilderComponent extends BaseDestroyerDirective {
|
|
|
2018
2029
|
sideLayout?.scrollTo(0, 0);
|
|
2019
2030
|
}
|
|
2020
2031
|
this.currentEditor = editor;
|
|
2032
|
+
this.setLayoutEditorTitle();
|
|
2021
2033
|
// Raise event to let the user set the block editor in the UI.
|
|
2022
|
-
|
|
2023
|
-
this.blockEditorChange.emit(editor.id);
|
|
2024
|
-
}
|
|
2034
|
+
this.editorChange.emit(editor);
|
|
2025
2035
|
}
|
|
2026
2036
|
});
|
|
2027
2037
|
this.layoutBuilderService.blockAddedEventSubject$.pipe(this.getDestroyer()).subscribe((event) => {
|
|
@@ -2051,7 +2061,7 @@ class PepLayoutBuilderComponent extends BaseDestroyerDirective {
|
|
|
2051
2061
|
this.updateViewportWidth();
|
|
2052
2062
|
}
|
|
2053
2063
|
togglePreviewMode() {
|
|
2054
|
-
this.layoutBuilderService.
|
|
2064
|
+
this.layoutBuilderService.changePreviewMode(!this.previewMode);
|
|
2055
2065
|
this.updateViewportWidth();
|
|
2056
2066
|
}
|
|
2057
2067
|
onSidebarStateChange(event) {
|
|
@@ -2073,7 +2083,7 @@ class PepLayoutBuilderComponent extends BaseDestroyerDirective {
|
|
|
2073
2083
|
}
|
|
2074
2084
|
}
|
|
2075
2085
|
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: PepLayoutBuilderService }, { token: i1$2.PepAddonService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2076
|
-
PepLayoutBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepLayoutBuilderComponent, selector: "pep-layout-builder", inputs: { availableBlocksForDrag: "availableBlocksForDrag" }, outputs: { backClick: "backClick", blockEditorChange: "blockEditorChange", blockAdded: "blockAdded", blocksRemoved: "blocksRemoved" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "layoutBuilderWrapper", first: true, predicate: ["layoutBuilderWrapper"], descendants: true, static: true }, { propertyName: "sideBarComponent", first: true, predicate: PepSideBarComponent, descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"lockScreen\" class=\"cdk-overlay-backdrop cdk-overlay-dark-backdrop cdk-overlay-backdrop-showing\"></div>\n\n<pep-page-layout [showShadow]=\"!previewMode && currentEditor !== null\" >\n <div pep-side-area *ngIf=\"!previewMode && currentEditor\" style=\"height: inherit;\">\n <pep-side-bar #sideBar [ignoreResize]=\"true\" (stateChange)=\"onSidebarStateChange($event)\">\n <div header-content class=\"side-bar-title\">\n <pep-button class=\"back-button\" sizeType=\"sm\" iconName=\"arrow_left_alt\" (buttonClick)=\"onNavigateBackFromEditor();\"></pep-button>\n <div class=\"title title-lg ellipsis\" [title]=\"currentEditor.title\">\n <span>{{ currentEditor.title }}</span>\n </div>\n </div>\n <div class=\"layout-builder-editor-wrapper\">\n <pep-layout-editor *ngIf=\"currentEditor.type === 'layout-builder'\" [availableBlocksForDrag]=\"availableBlocksForDrag\"\n [hostObject]=\"currentEditor.hostObject\" (hostObjectChange)=\"onLayoutEditorObjectChange($event)\"\n >\n <ng-container layout-editor-top-content>\n <ng-content select=\"[layout-editor-top-content]\"></ng-content>\n </ng-container>\n <ng-container layout-editor-bottom-content>\n <ng-content select=\"[layout-editor-bottom-content]\"></ng-content>\n </ng-container>\n </pep-layout-editor>\n \n <section-editor *ngIf=\"currentEditor.type === 'section'\" \n [hostObject]=\"currentEditor.hostObject\" (hostObjectChange)=\"onSectionEditorObjectChange($event)\"></section-editor>\n \n <div *ngIf=\"currentEditor.type === 'block'\" class=\"layout-builder-editor-container\">\n <ng-content select=\"[block-editor-content]\"></ng-content>\n </div>\n </div>\n </pep-side-bar>\n </div>\n <ng-container pep-main-area>\n <div class=\"main-area-container\" [ngClass]=\"{'preview-mode': previewMode }\">\n <div class=\"header-container\" >\n <ng-container *ngIf=\"!previewMode; then editorTitleTemplate; else previewTitleTemplate\"></ng-container>\n <ng-template #editorTitleTemplate>\n <div>\n <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.VIEWPORT_WIDTH' | translate)}}: </span>\n <span class=\"body-xs\"><b>{{viewportWidth}}</b></span>\n </div>\n </ng-template>\n <ng-template #previewTitleTemplate>\n <div class=\"preview-title body-sm\">\n <span>{{('LAYOUT_BUILDER.PREVIEW_TITLE' | translate)}}</span>\n </div>\n </ng-template>\n\n <div class=\"header-group-btn\">\n <pep-group-buttons [buttons]=\"screenTypes\" [selectedButtonKey]=\"selectedScreenType\" sizeType=\"sm\" viewType=\"toggle\" >\n </pep-group-buttons>\n </div>\n\n <ng-container *ngIf=\"!previewMode; then editorButtonsTemplate; else previewButtonsTemplate\"></ng-container>\n <ng-template #editorButtonsTemplate>\n <div class=\"header-end\">\n <pep-button key='Preview' [value]=\"'ACTIONS.PREVIEW' | translate\" sizeType=\"sm\" classNames=\"pep-spacing-element\" (buttonClick)=\"togglePreviewMode()\"></pep-button>\n <ng-content select=\"[header-end-content]\"></ng-content>\n </div>\n </ng-template>\n <ng-template #previewButtonsTemplate>\n <a class=\"color-link body-sm\" (click)=\"togglePreviewMode()\" href=\"javascript:void(0)\">{{('LAYOUT_BUILDER.PREVIEW_CLICK_HERE' | translate)}}</a> \n </ng-template>\n </div>\n <div #layoutBuilderWrapper class=\"layout-builder-wrapper\" [ngClass]=\"{'limit-min-width': selectedScreenType === 'Landscape' }\">\n <ng-content></ng-content>\n <div *ngIf=\"!previewMode\" class=\"backdrop\" [ngClass]=\"{'show-backdrop': currentEditor?.type === 'section' || currentEditor?.type === 'block'}\"></div>\n </div>\n </div>\n </ng-container>\n</pep-page-layout>", styles: [".side-bar-title{display:flex;padding-top:var(--pep-spacing-sm, .5rem)}.side-bar-title .back-button{margin-inline-end:var(--pep-spacing-sm, .5rem)}.side-bar-title .title{display:flex;align-items:center}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs{height:100%}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-header{position:sticky;top:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));z-index:2}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-header-pagination{display:none}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-labels{display:grid;grid-template-columns:1fr 1fr}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-labels .mat-tab-label{padding:0 var(--pep-spacing-md, .75rem)!important}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-body-wrapper{overflow:unset;margin:0;display:block}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active{overflow:unset}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active .mat-tab-body-content{overflow:unset;display:flex;flex-direction:column;padding-inline:0!important}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab{overflow:inherit;display:inherit;flex-direction:inherit;gap:var(--pep-spacing-lg, 1rem)}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab .group-buttons-container .toggle-buttons{width:100%}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-textbox{margin-bottom:0!important}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container{padding-top:var(--pep-spacing-lg, 1rem);padding-bottom:var(--pep-spacing-lg, 1rem)}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group{overflow:inherit;display:inherit;flex-direction:inherit;gap:var(--pep-spacing-lg, 1rem);display:flex;flex-direction:column}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container .group-buttons-container .toggle-buttons,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group .group-buttons-container .toggle-buttons{width:100%}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-textbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-textbox{margin-bottom:0!important}.layout-builder-editor-wrapper ::ng-deep .editor-title{display:block;font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-bold, 600)!important;font-size:var(--pep-font-size-xl, 1.25rem)!important;line-height:var(--pep-line-height-xl, 1.5625rem)!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layout-builder-editor-wrapper ::ng-deep .editor-sub-title{display:block;font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-normal, 400)!important;font-size:var(--pep-font-size-md, 1rem)!important;line-height:var(--pep-line-height-md, 1.25rem)!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layout-builder-editor-wrapper ::ng-deep .editor-separator{margin-top:var(--pep-spacing-lg, 1rem);border-bottom:1px solid hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title{margin-bottom:.5rem!important;min-height:unset!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container{background:unset!important;padding-left:unset!important;padding-right:unset!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-inner-container,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container .mat-checkbox-inner-container{margin-left:0!important;margin-right:0!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-layout,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container .mat-checkbox-layout{font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-normal, 400);font-size:var(--pep-font-size-lg, 1.125rem)!important;line-height:var(--pep-line-height-lg, 1.40625rem)!important;font-weight:var(--pep-font-weight-bold, 600)!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-layout .mat-checkbox-label span,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container .mat-checkbox-layout .mat-checkbox-label span{margin:0 .5rem}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-layout{font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-normal, 400);font-size:var(--pep-font-size-md, 1rem)!important;line-height:var(--pep-line-height-md, 1.25rem)!important;font-weight:var(--pep-font-weight-normal, 400)!important}.main-area-container{min-height:100%;display:grid;grid-template-rows:auto 1fr}.main-area-container .header-container{display:flex;position:sticky;top:0;z-index:100;height:3rem;align-items:center;justify-content:space-between;padding:0 var(--pep-spacing-sm, .5rem)}.main-area-container .header-container .header-group-btn{display:flex;justify-content:space-around;align-items:center}.main-area-container .header-container .header-end{display:flex;justify-content:flex-end;gap:var(--pep-spacing-sm, .5rem)}.main-area-container .header-container ::ng-deep .group-buttons-container .toggle-buttons{width:16rem}.main-area-container .layout-builder-wrapper{width:100%;margin:0 auto;position:relative}.main-area-container .layout-builder-wrapper.limit-min-width{min-width:800px}.main-area-container .layout-builder-wrapper .backdrop{position:absolute;width:100%;height:100%;top:0;z-index:10;display:none}.main-area-container .layout-builder-wrapper .backdrop.show-backdrop{display:block}\n", ".layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-header{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.main-area-container{background:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.04)}.main-area-container .header-container{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.main-area-container .header-container .header-title{color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.7)}.main-area-container .header-container .size-limit-container{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}.main-area-container.preview-mode .header-container{background:unset;background-color:hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.main-area-container.preview-mode .header-container .preview-title,.main-area-container.preview-mode .header-container .color-link{color:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.main-area-container.preview-mode .layout-builder-wrapper{overflow:auto}.main-area-container .layout-builder-wrapper{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:var(--pep-shadow-md-offset, 0 .5rem 1rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.main-area-container .layout-builder-wrapper .backdrop{background:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.5)}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$5.PepPageLayoutComponent, selector: "pep-page-layout", inputs: ["addPadding", "showShadow"] }, { kind: "component", type: i6$1.PepSideBarComponent, selector: "pep-side-bar", inputs: ["position", "ignoreResize", "showHeader", "showFooter", "showToggle", "useAsWebComponent"], outputs: ["stateChange"] }, { kind: "component", type: i6.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i8$1.PepGroupButtonsComponent, selector: "pep-group-buttons", inputs: ["viewType", "styleType", "sizeType", "buttons", "buttonsDisabled", "supportUnselect", "selectedButtonKey", "stretch"], outputs: ["buttonClick"] }, { kind: "component", type: PepLayoutEditorComponent, selector: "pep-layout-editor", inputs: ["availableBlocksForDrag", "hostObject"], outputs: ["hostObjectChange"] }, { kind: "component", type: SectionEditorComponent, selector: "section-editor", inputs: ["hostObject"], outputs: ["hostObjectChange"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
|
|
2086
|
+
PepLayoutBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepLayoutBuilderComponent, selector: "pep-layout-builder", inputs: { availableBlocksForDrag: "availableBlocksForDrag", layoutEditorTitle: "layoutEditorTitle" }, outputs: { backClick: "backClick", editorChange: "editorChange", blockAdded: "blockAdded", blocksRemoved: "blocksRemoved" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "layoutBuilderWrapper", first: true, predicate: ["layoutBuilderWrapper"], descendants: true, static: true }, { propertyName: "sideBarComponent", first: true, predicate: PepSideBarComponent, descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"lockScreen\" class=\"cdk-overlay-backdrop cdk-overlay-dark-backdrop cdk-overlay-backdrop-showing\"></div>\n\n<pep-page-layout [showShadow]=\"!previewMode && currentEditor !== null\" >\n <div pep-side-area *ngIf=\"!previewMode && currentEditor\" style=\"height: inherit;\">\n <pep-side-bar #sideBar [ignoreResize]=\"true\" (stateChange)=\"onSidebarStateChange($event)\">\n <div header-content class=\"side-bar-title\">\n <pep-button class=\"back-button\" sizeType=\"sm\" iconName=\"arrow_left_alt\" (buttonClick)=\"onNavigateBackFromEditor();\"></pep-button>\n <div class=\"title title-lg ellipsis\" [title]=\"currentEditor.title\">\n <span>{{ currentEditor.title }}</span>\n </div>\n </div>\n <div class=\"layout-builder-editor-wrapper\">\n <pep-layout-editor *ngIf=\"currentEditor.type === 'layout-builder'\" [availableBlocksForDrag]=\"availableBlocksForDrag\"\n [hostObject]=\"currentEditor.hostObject\" (hostObjectChange)=\"onLayoutEditorObjectChange($event)\"\n >\n <ng-container layout-editor-top-content>\n <ng-content select=\"[layout-editor-top-content]\"></ng-content>\n </ng-container>\n <ng-container layout-editor-bottom-content>\n <ng-content select=\"[layout-editor-bottom-content]\"></ng-content>\n </ng-container>\n </pep-layout-editor>\n \n <section-editor *ngIf=\"currentEditor.type === 'section'\" \n [hostObject]=\"currentEditor.hostObject\" (hostObjectChange)=\"onSectionEditorObjectChange($event)\"></section-editor>\n \n <div *ngIf=\"currentEditor.type === 'block'\" class=\"layout-builder-editor-container\">\n <ng-content select=\"[block-editor-content]\"></ng-content>\n </div>\n </div>\n </pep-side-bar>\n </div>\n <ng-container pep-main-area>\n <div class=\"main-area-container\" [ngClass]=\"{'preview-mode': previewMode }\">\n <div class=\"header-container\" >\n <ng-container *ngIf=\"!previewMode; then editorTitleTemplate; else previewTitleTemplate\"></ng-container>\n <ng-template #editorTitleTemplate>\n <div>\n <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.VIEWPORT_WIDTH' | translate)}}: </span>\n <span class=\"body-xs\"><b>{{viewportWidth}}</b></span>\n </div>\n </ng-template>\n <ng-template #previewTitleTemplate>\n <div class=\"preview-title body-sm\">\n <span>{{('LAYOUT_BUILDER.PREVIEW_TITLE' | translate)}}</span>\n </div>\n </ng-template>\n\n <div class=\"header-group-btn\">\n <pep-group-buttons [buttons]=\"screenTypes\" [selectedButtonKey]=\"selectedScreenType\" sizeType=\"sm\" viewType=\"toggle\" >\n </pep-group-buttons>\n </div>\n\n <ng-container *ngIf=\"!previewMode; then editorButtonsTemplate; else previewButtonsTemplate\"></ng-container>\n <ng-template #editorButtonsTemplate>\n <div class=\"header-end\">\n <pep-button key='Preview' [value]=\"'ACTIONS.PREVIEW' | translate\" sizeType=\"sm\" classNames=\"pep-spacing-element\" (buttonClick)=\"togglePreviewMode()\"></pep-button>\n <ng-content select=\"[header-end-content]\"></ng-content>\n </div>\n </ng-template>\n <ng-template #previewButtonsTemplate>\n <a class=\"color-link body-sm\" (click)=\"togglePreviewMode()\" href=\"javascript:void(0)\">{{('LAYOUT_BUILDER.PREVIEW_CLICK_HERE' | translate)}}</a> \n </ng-template>\n </div>\n <div #layoutBuilderWrapper class=\"layout-builder-wrapper\" [ngClass]=\"{'limit-min-width': selectedScreenType === 'Landscape' }\">\n <ng-content></ng-content>\n <div *ngIf=\"!previewMode\" class=\"backdrop\" [ngClass]=\"{'show-backdrop': currentEditor?.type === 'section' || currentEditor?.type === 'block'}\"></div>\n </div>\n </div>\n </ng-container>\n</pep-page-layout>", styles: [".side-bar-title{display:flex;padding-top:var(--pep-spacing-sm, .5rem)}.side-bar-title .back-button{margin-inline-end:var(--pep-spacing-sm, .5rem)}.side-bar-title .title{display:flex;align-items:center}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs{height:100%}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-header{position:sticky;top:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));z-index:2}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-header-pagination{display:none}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-labels{display:grid;grid-template-columns:1fr 1fr}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-labels .mat-tab-label{padding:0 var(--pep-spacing-md, .75rem)!important}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-body-wrapper{overflow:unset;margin:0;display:block}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active{overflow:unset}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active .mat-tab-body-content{overflow:unset;display:flex;flex-direction:column;padding-inline:0!important}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab{overflow:inherit;display:inherit;flex-direction:inherit;gap:var(--pep-spacing-lg, 1rem)}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab .group-buttons-container .toggle-buttons{width:100%}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-textbox{margin-bottom:0!important}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container{padding-top:var(--pep-spacing-lg, 1rem);padding-bottom:var(--pep-spacing-lg, 1rem)}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group{overflow:inherit;display:inherit;flex-direction:inherit;gap:var(--pep-spacing-lg, 1rem);display:flex;flex-direction:column}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container .group-buttons-container .toggle-buttons,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group .group-buttons-container .toggle-buttons{width:100%}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-textbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-textbox{margin-bottom:0!important}.layout-builder-editor-wrapper ::ng-deep .editor-title{display:block;font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-bold, 600)!important;font-size:var(--pep-font-size-xl, 1.25rem)!important;line-height:var(--pep-line-height-xl, 1.5625rem)!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layout-builder-editor-wrapper ::ng-deep .editor-sub-title{display:block;font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-normal, 400)!important;font-size:var(--pep-font-size-md, 1rem)!important;line-height:var(--pep-line-height-md, 1.25rem)!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layout-builder-editor-wrapper ::ng-deep .editor-separator{margin-top:var(--pep-spacing-lg, 1rem);border-bottom:1px solid hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title{margin-bottom:.5rem!important;min-height:unset!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container{background:unset!important;padding-left:unset!important;padding-right:unset!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-inner-container,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container .mat-checkbox-inner-container{margin-left:0!important;margin-right:0!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-layout,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container .mat-checkbox-layout{font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-normal, 400);font-size:var(--pep-font-size-lg, 1.125rem)!important;line-height:var(--pep-line-height-lg, 1.40625rem)!important;font-weight:var(--pep-font-weight-bold, 600)!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-layout .mat-checkbox-label span,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container .mat-checkbox-layout .mat-checkbox-label span{margin:0 .5rem}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-layout{font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-normal, 400);font-size:var(--pep-font-size-md, 1rem)!important;line-height:var(--pep-line-height-md, 1.25rem)!important;font-weight:var(--pep-font-weight-normal, 400)!important}.main-area-container{min-height:100%;display:grid;grid-template-rows:auto 1fr}.main-area-container .header-container{display:flex;position:sticky;top:0;z-index:100;height:3rem;align-items:center;justify-content:space-between;padding:0 var(--pep-spacing-sm, .5rem)}.main-area-container .header-container .header-group-btn{display:flex;justify-content:space-around;align-items:center}.main-area-container .header-container .header-end{display:flex;justify-content:flex-end;gap:var(--pep-spacing-sm, .5rem)}.main-area-container .header-container ::ng-deep .group-buttons-container .toggle-buttons{width:16rem}.main-area-container .layout-builder-wrapper{width:100%;margin:0 auto;position:relative}.main-area-container .layout-builder-wrapper.limit-min-width{min-width:800px}.main-area-container .layout-builder-wrapper .backdrop{position:absolute;width:100%;height:100%;top:0;z-index:10;display:none}.main-area-container .layout-builder-wrapper .backdrop.show-backdrop{display:block}\n", ".layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-header{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.main-area-container{background:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.04)}.main-area-container .header-container{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.main-area-container .header-container .header-title{color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.7)}.main-area-container .header-container .size-limit-container{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}.main-area-container.preview-mode .header-container{background:unset;background-color:hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.main-area-container.preview-mode .header-container .preview-title,.main-area-container.preview-mode .header-container .color-link{color:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.main-area-container.preview-mode .layout-builder-wrapper{overflow:auto}.main-area-container .layout-builder-wrapper{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:var(--pep-shadow-md-offset, 0 .5rem 1rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.main-area-container .layout-builder-wrapper .backdrop{background:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.5)}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$5.PepPageLayoutComponent, selector: "pep-page-layout", inputs: ["addPadding", "showShadow"] }, { kind: "component", type: i6$1.PepSideBarComponent, selector: "pep-side-bar", inputs: ["position", "ignoreResize", "showHeader", "showFooter", "showToggle", "useAsWebComponent"], outputs: ["stateChange"] }, { kind: "component", type: i6.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i8$1.PepGroupButtonsComponent, selector: "pep-group-buttons", inputs: ["viewType", "styleType", "sizeType", "buttons", "buttonsDisabled", "supportUnselect", "selectedButtonKey", "stretch"], outputs: ["buttonClick"] }, { kind: "component", type: PepLayoutEditorComponent, selector: "pep-layout-editor", inputs: ["availableBlocksForDrag", "hostObject"], outputs: ["hostObjectChange"] }, { kind: "component", type: SectionEditorComponent, selector: "section-editor", inputs: ["hostObject"], outputs: ["hostObjectChange"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
|
|
2077
2087
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepLayoutBuilderComponent, decorators: [{
|
|
2078
2088
|
type: Component,
|
|
2079
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'\" class=\"layout-builder-editor-container\">\n <ng-content select=\"[block-editor-content]\"></ng-content>\n </div>\n </div>\n </pep-side-bar>\n </div>\n <ng-container pep-main-area>\n <div class=\"main-area-container\" [ngClass]=\"{'preview-mode': previewMode }\">\n <div class=\"header-container\" >\n <ng-container *ngIf=\"!previewMode; then editorTitleTemplate; else previewTitleTemplate\"></ng-container>\n <ng-template #editorTitleTemplate>\n <div>\n <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.VIEWPORT_WIDTH' | translate)}}: </span>\n <span class=\"body-xs\"><b>{{viewportWidth}}</b></span>\n </div>\n </ng-template>\n <ng-template #previewTitleTemplate>\n <div class=\"preview-title body-sm\">\n <span>{{('LAYOUT_BUILDER.PREVIEW_TITLE' | translate)}}</span>\n </div>\n </ng-template>\n\n <div class=\"header-group-btn\">\n <pep-group-buttons [buttons]=\"screenTypes\" [selectedButtonKey]=\"selectedScreenType\" sizeType=\"sm\" viewType=\"toggle\" >\n </pep-group-buttons>\n </div>\n\n <ng-container *ngIf=\"!previewMode; then editorButtonsTemplate; else previewButtonsTemplate\"></ng-container>\n <ng-template #editorButtonsTemplate>\n <div class=\"header-end\">\n <pep-button key='Preview' [value]=\"'ACTIONS.PREVIEW' | translate\" sizeType=\"sm\" classNames=\"pep-spacing-element\" (buttonClick)=\"togglePreviewMode()\"></pep-button>\n <ng-content select=\"[header-end-content]\"></ng-content>\n </div>\n </ng-template>\n <ng-template #previewButtonsTemplate>\n <a class=\"color-link body-sm\" (click)=\"togglePreviewMode()\" href=\"javascript:void(0)\">{{('LAYOUT_BUILDER.PREVIEW_CLICK_HERE' | translate)}}</a> \n </ng-template>\n </div>\n <div #layoutBuilderWrapper class=\"layout-builder-wrapper\" [ngClass]=\"{'limit-min-width': selectedScreenType === 'Landscape' }\">\n <ng-content></ng-content>\n <div *ngIf=\"!previewMode\" class=\"backdrop\" [ngClass]=\"{'show-backdrop': currentEditor?.type === 'section' || currentEditor?.type === 'block'}\"></div>\n </div>\n </div>\n </ng-container>\n</pep-page-layout>", styles: [".side-bar-title{display:flex;padding-top:var(--pep-spacing-sm, .5rem)}.side-bar-title .back-button{margin-inline-end:var(--pep-spacing-sm, .5rem)}.side-bar-title .title{display:flex;align-items:center}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs{height:100%}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-header{position:sticky;top:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));z-index:2}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-header-pagination{display:none}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-labels{display:grid;grid-template-columns:1fr 1fr}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-labels .mat-tab-label{padding:0 var(--pep-spacing-md, .75rem)!important}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-body-wrapper{overflow:unset;margin:0;display:block}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active{overflow:unset}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active .mat-tab-body-content{overflow:unset;display:flex;flex-direction:column;padding-inline:0!important}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab{overflow:inherit;display:inherit;flex-direction:inherit;gap:var(--pep-spacing-lg, 1rem)}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab .group-buttons-container .toggle-buttons{width:100%}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .layout-builder-editor-tab pep-textbox{margin-bottom:0!important}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container{padding-top:var(--pep-spacing-lg, 1rem);padding-bottom:var(--pep-spacing-lg, 1rem)}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group{overflow:inherit;display:inherit;flex-direction:inherit;gap:var(--pep-spacing-lg, 1rem);display:flex;flex-direction:column}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container .group-buttons-container .toggle-buttons,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group .group-buttons-container .toggle-buttons{width:100%}.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-container pep-textbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-checkbox,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-color,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-select,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-textarea,.layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-group pep-textbox{margin-bottom:0!important}.layout-builder-editor-wrapper ::ng-deep .editor-title{display:block;font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-bold, 600)!important;font-size:var(--pep-font-size-xl, 1.25rem)!important;line-height:var(--pep-line-height-xl, 1.5625rem)!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layout-builder-editor-wrapper ::ng-deep .editor-sub-title{display:block;font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-normal, 400)!important;font-size:var(--pep-font-size-md, 1rem)!important;line-height:var(--pep-line-height-md, 1.25rem)!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layout-builder-editor-wrapper ::ng-deep .editor-separator{margin-top:var(--pep-spacing-lg, 1rem);border-bottom:1px solid hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title{margin-bottom:.5rem!important;min-height:unset!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container{background:unset!important;padding-left:unset!important;padding-right:unset!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-inner-container,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container .mat-checkbox-inner-container{margin-left:0!important;margin-right:0!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-layout,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container .mat-checkbox-layout{font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-normal, 400);font-size:var(--pep-font-size-lg, 1.125rem)!important;line-height:var(--pep-line-height-lg, 1.40625rem)!important;font-weight:var(--pep-font-weight-bold, 600)!important}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-layout .mat-checkbox-label span,.layout-builder-editor-wrapper ::ng-deep .checkbox-as-title .pep-checkbox-container .mat-checkbox-layout .mat-checkbox-label span{margin:0 .5rem}.layout-builder-editor-wrapper ::ng-deep .checkbox-as-sub-title .pep-checkbox-container .mat-checkbox-layout{font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif!important;font-weight:var(--pep-font-weight-normal, 400);font-size:var(--pep-font-size-md, 1rem)!important;line-height:var(--pep-line-height-md, 1.25rem)!important;font-weight:var(--pep-font-weight-normal, 400)!important}.main-area-container{min-height:100%;display:grid;grid-template-rows:auto 1fr}.main-area-container .header-container{display:flex;position:sticky;top:0;z-index:100;height:3rem;align-items:center;justify-content:space-between;padding:0 var(--pep-spacing-sm, .5rem)}.main-area-container .header-container .header-group-btn{display:flex;justify-content:space-around;align-items:center}.main-area-container .header-container .header-end{display:flex;justify-content:flex-end;gap:var(--pep-spacing-sm, .5rem)}.main-area-container .header-container ::ng-deep .group-buttons-container .toggle-buttons{width:16rem}.main-area-container .layout-builder-wrapper{width:100%;margin:0 auto;position:relative}.main-area-container .layout-builder-wrapper.limit-min-width{min-width:800px}.main-area-container .layout-builder-wrapper .backdrop{position:absolute;width:100%;height:100%;top:0;z-index:10;display:none}.main-area-container .layout-builder-wrapper .backdrop.show-backdrop{display:block}\n", ".layout-builder-editor-wrapper ::ng-deep .layout-builder-editor-tabs .mat-tab-header{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.main-area-container{background:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.04)}.main-area-container .header-container{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.main-area-container .header-container .header-title{color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.7)}.main-area-container .header-container .size-limit-container{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}.main-area-container.preview-mode .header-container{background:unset;background-color:hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.main-area-container.preview-mode .header-container .preview-title,.main-area-container.preview-mode .header-container .color-link{color:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.main-area-container.preview-mode .layout-builder-wrapper{overflow:auto}.main-area-container .layout-builder-wrapper{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:var(--pep-shadow-md-offset, 0 .5rem 1rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.main-area-container .layout-builder-wrapper .backdrop{background:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.5)}\n"] }]
|
|
@@ -2085,9 +2095,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
2085
2095
|
args: [PepSideBarComponent, { read: ElementRef }]
|
|
2086
2096
|
}], availableBlocksForDrag: [{
|
|
2087
2097
|
type: Input
|
|
2098
|
+
}], layoutEditorTitle: [{
|
|
2099
|
+
type: Input
|
|
2088
2100
|
}], backClick: [{
|
|
2089
2101
|
type: Output
|
|
2090
|
-
}],
|
|
2102
|
+
}], editorChange: [{
|
|
2091
2103
|
type: Output
|
|
2092
2104
|
}], blockAdded: [{
|
|
2093
2105
|
type: Output
|