@pepperi-addons/ngx-lib 0.3.15-beta.19 → 0.3.15-beta.21

package/fesm2015/pepperi-addons-ngx-lib-page-layout.js

@@ -3,67 +3,67 @@ import { CommonModule } from '@angular/common';
 import { MatCommonModule } from '@angular/material/core';
 import { PepCustomizationService, PepLayoutService, PepNgxLibModule } from '@pepperi-addons/ngx-lib';
 
-class PepPageLayoutComponent {
-    constructor(customizationService, layoutService, cdRef, hostElement, renderer) {
-        this.customizationService = customizationService;
-        this.layoutService = layoutService;
-        this.cdRef = cdRef;
-        this.hostElement = hostElement;
-        this.renderer = renderer;
-        this.addPadding = false;
-        this.showShadow = false;
-        this.renderer.addClass(this.hostElement.nativeElement, 'pep-page-layout');
-    }
-    ngAfterViewInit() {
-        this.layoutService.onResize$.subscribe((size) => {
-            this.screenSize = size;
-        });
-    }
-    ngAfterContentInit() {
-        //
-    }
-}
-PepPageLayoutComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'pep-page-layout',
-                template: "<div class=\"pep-page-header-layout\">\n    <ng-content select=\"[pep-header-area]\"></ng-content>\n</div>\n<div class=\"pep-page-side-layout\" [ngClass]=\"{ 'show-shadow': showShadow }\">\n    <ng-content select=\"pep-side-bar\"></ng-content>\n    <ng-content select=\"[pep-side-area]\"></ng-content>\n</div>\n<div class=\"pep-page-main-layout\" [ngClass]=\"{ 'add-padding': addPadding }\">\n    <div class=\"pep-top-area\">\n        <ng-content select=\"[pep-top-area]\"></ng-content>\n    </div>\n    <div class=\"pep-main-area\">\n        <ng-content select=\"[pep-main-area]\"></ng-content>\n    </div>\n</div>",
-                styles: [":host.pep-page-layout{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;grid-template-areas:\"header-layout  header-layout\" \"side-layout    main-layout\";height:100%;width:100%;overflow:hidden}:host.pep-page-layout .pep-page-header-layout{grid-area:header-layout;z-index:10}:host.pep-page-layout .pep-page-side-layout{grid-area:side-layout;overflow:hidden;height:100%;z-index:5}:host.pep-page-layout .pep-page-side-layout.show-shadow{-webkit-padding-end:1rem;padding-inline-end:1rem;-webkit-padding-end:var(--pep-spacing-lg,1rem);padding-inline-end:var(--pep-spacing-lg,1rem)}:host.pep-page-layout .pep-page-main-layout{grid-area:main-layout;overflow:hidden;height:100%;z-index:1;padding-bottom:4.5rem;padding-bottom:var(--pep-footer-bar-height,4.5rem);display:grid;grid-template-rows:auto 1fr;grid-template-areas:\"top-area\" \"main-area\"}:host.pep-page-layout .pep-page-main-layout.add-padding{padding-inline:1rem;padding-inline:var(--pep-spacing-lg,1rem)}:host.pep-page-layout .pep-page-main-layout .pep-top-area{grid-area:top-area}:host.pep-page-layout .pep-page-main-layout .pep-main-area{grid-area:main-area;overflow:auto;height:100%;display:block}:host.pep-page-layout .pep-page-main-layout .pep-main-area>*{height:inherit}", ".pep-page-side-layout.show-shadow{box-shadow:0 .5rem 1rem 0 rgba(26,26,26,.32);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%),.32)}"]
-            },] }
-];
-PepPageLayoutComponent.ctorParameters = () => [
-    { type: PepCustomizationService },
-    { type: PepLayoutService },
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: Renderer2 }
-];
-PepPageLayoutComponent.propDecorators = {
-    addPadding: [{ type: Input }],
-    showShadow: [{ type: Input }]
+class PepPageLayoutComponent {
+    constructor(customizationService, layoutService, cdRef, hostElement, renderer) {
+        this.customizationService = customizationService;
+        this.layoutService = layoutService;
+        this.cdRef = cdRef;
+        this.hostElement = hostElement;
+        this.renderer = renderer;
+        this.addPadding = false;
+        this.showShadow = false;
+        this.renderer.addClass(this.hostElement.nativeElement, 'pep-page-layout');
+    }
+    ngAfterViewInit() {
+        this.layoutService.onResize$.subscribe((size) => {
+            this.screenSize = size;
+        });
+    }
+    ngAfterContentInit() {
+        //
+    }
+}
+PepPageLayoutComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pep-page-layout',
+                template: "<div class=\"pep-page-header-layout\">\n    <ng-content select=\"[pep-header-area]\"></ng-content>\n</div>\n<div class=\"pep-page-side-layout\" [ngClass]=\"{ 'show-shadow': showShadow }\">\n    <ng-content select=\"pep-side-bar\"></ng-content>\n    <ng-content select=\"[pep-side-area]\"></ng-content>\n</div>\n<div class=\"pep-page-main-layout\" [ngClass]=\"{ 'add-padding': addPadding }\">\n    <div class=\"pep-top-area\">\n        <ng-content select=\"[pep-top-area]\"></ng-content>\n    </div>\n    <div class=\"pep-main-area\">\n        <ng-content select=\"[pep-main-area]\"></ng-content>\n    </div>\n</div>",
+                styles: [":host.pep-page-layout{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;grid-template-areas:\"header-layout  header-layout\" \"side-layout    main-layout\";height:100%;width:100%;overflow:hidden}:host.pep-page-layout .pep-page-header-layout{grid-area:header-layout;z-index:10}:host.pep-page-layout .pep-page-side-layout{grid-area:side-layout;overflow:hidden;height:100%;z-index:5}:host.pep-page-layout .pep-page-side-layout.show-shadow{-webkit-padding-end:1rem;padding-inline-end:1rem;-webkit-padding-end:var(--pep-spacing-lg,1rem);padding-inline-end:var(--pep-spacing-lg,1rem)}:host.pep-page-layout .pep-page-main-layout{grid-area:main-layout;overflow:hidden;height:100%;z-index:1;padding-bottom:4.5rem;padding-bottom:var(--pep-footer-bar-height,4.5rem);display:grid;grid-template-rows:auto 1fr;grid-template-areas:\"top-area\" \"main-area\"}:host.pep-page-layout .pep-page-main-layout.add-padding{padding-inline:1rem;padding-inline:var(--pep-spacing-lg,1rem)}:host.pep-page-layout .pep-page-main-layout .pep-top-area{grid-area:top-area}:host.pep-page-layout .pep-page-main-layout .pep-main-area{grid-area:main-area;overflow:auto;height:100%;display:block}:host.pep-page-layout .pep-page-main-layout .pep-main-area>*{height:inherit}", ".pep-page-side-layout.show-shadow{box-shadow:0 .5rem 1rem 0 rgba(26,26,26,.32);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%),.32)}"]
+            },] }
+];
+PepPageLayoutComponent.ctorParameters = () => [
+    { type: PepCustomizationService },
+    { type: PepLayoutService },
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: Renderer2 }
+];
+PepPageLayoutComponent.propDecorators = {
+    addPadding: [{ type: Input }],
+    showShadow: [{ type: Input }]
 };
 
-class PepPageLayoutModule {
-}
-PepPageLayoutModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    // Material modules,
-                    MatCommonModule,
-                    // ngx-lib modules
-                    PepNgxLibModule,
-                ],
-                exports: [PepPageLayoutComponent],
-                declarations: [PepPageLayoutComponent],
-            },] }
+class PepPageLayoutModule {
+}
+PepPageLayoutModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    // Material modules,
+                    MatCommonModule,
+                    // ngx-lib modules
+                    PepNgxLibModule,
+                ],
+                exports: [PepPageLayoutComponent],
+                declarations: [PepPageLayoutComponent],
+            },] }
 ];
 
-/*
- * Public API Surface of ngx-lib/page-layout
+/*
+ * Public API Surface of ngx-lib/page-layout
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { PepPageLayoutComponent, PepPageLayoutModule };

package/fesm2015/pepperi-addons-ngx-lib-profile-data-views-list.js

@@ -12,235 +12,235 @@ import { PepMenuModule } from '@pepperi-addons/ngx-lib/menu';
 import { PepTopBarModule } from '@pepperi-addons/ngx-lib/top-bar';
 import { pepIconSystemEdit, pepIconSystemMenu, PepIconModule, PepIconRegistry } from '@pepperi-addons/ngx-lib/icon';
 
-class ProfileDataViewsCardComponent {
-    constructor(translate) {
-        this.translate = translate;
-        this.profileId = '';
-        this.title = '';
-        this.dataViews = [];
-        this.configurationPerScreenSize = false;
-        this.isDefault = false;
-        this.dataViewEditClick = new EventEmitter();
-        this.dataViewDeleteClick = new EventEmitter();
-        this.menuItems = [];
-    }
-    loadMenuItems() {
-        const removeKey = 'ACTIONS.REMOVE';
-        // Load translation before get the options in the children.
-        this.translate.get([removeKey]).subscribe((res) => {
-            this.menuItems = [
-                { key: 'delete', text: this.translate.instant(res[removeKey]) }
-            ];
-        });
-    }
-    ngOnInit() {
-        this.loadMenuItems();
-    }
-    onMenuItemClicked(action) {
-        if (this.dataViews.length === 1) {
-            if (action.source.key === 'delete') {
-                this.onDataViewDeleteClicked({ dataViewId: this.dataViews[0].dataViewId });
-            }
-        }
-    }
-    onDataViewEditClicked(event) {
-        this.dataViewEditClick.emit(event);
-    }
-    onDataViewDeleteClicked(event) {
-        this.dataViewDeleteClick.emit(event);
-    }
-}
-ProfileDataViewsCardComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'pep-profile-data-views-card',
-                template: "<div class=\"profile-data-views-card-container\">\n    <div class=\"card-top-bar pep-border-bottom\">\n        <div *ngIf=\"title?.length > 0\" class=\"title ellipsis\"\n            [title]=\"title + ' ' + (isDefault ? ('PROFILE_DATA_VIEWS_LIST.DEFAULT_PROFILE' | translate) : '')\">\n            <span class=\"title-md\">{{title}}&nbsp;</span>\n            <span *ngIf=\"isDefault\" class=\"color-dimmed\">{{('PROFILE_DATA_VIEWS_LIST.DEFAULT_PROFILE' |\n                translate)}}&nbsp;\n            </span>\n        </div>\n        <pep-menu *ngIf=\"!configurationPerScreenSize && !isDefault\" sizeType=\"sm\" [items]=\"menuItems\" (menuItemClick)=\"onMenuItemClicked($event)\">\n        </pep-menu>\n    </div>\n\n    <pep-profile-data-view *ngFor=\"let dataView of dataViews\" [dataViewId]=\"dataView.dataViewId\"\n        [title]=\"configurationPerScreenSize ? dataView.viewType : ''\" [fields]=\"dataView.fields\" [canDelete]=\"!(isDefault && dataView.viewType === 'Tablet')\"\n        (editClick)=\"onDataViewEditClicked($event)\" (deleteClick)=\"onDataViewDeleteClicked($event)\">\n    </pep-profile-data-view>\n</div>",
-                styles: [".profile-data-views-card-container{padding:1rem;padding:var(--pep-spacing-lg,1rem);border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);width:320px;max-width:320px}.profile-data-views-card-container .card-top-bar{height:2.5rem;height:var(--pep-top-bar-field-height,2.5rem);margin-bottom:.75rem;margin-bottom:var(--pep-spacing-md,.75rem);display:flex;justify-content:space-between}.profile-data-views-card-container .card-top-bar .title{display:block;height:calc(2.5rem - .5rem);height:calc(var(--pep-top-bar-field-height, 2.5rem) - var(--pep-spacing-sm, .5rem));align-self:center}", ".profile-data-views-card-container{background:#fafafa;background:hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),98%);box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);border:1px solid hsl(0,0%,calc(10% + 30%));border:1px solid hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),calc(var(--pep-color-regular-l, 10%) + 30%))}"]
-            },] }
-];
-ProfileDataViewsCardComponent.ctorParameters = () => [
-    { type: TranslateService }
-];
-ProfileDataViewsCardComponent.propDecorators = {
-    profileId: [{ type: Input }],
-    title: [{ type: Input }],
-    dataViews: [{ type: Input }],
-    configurationPerScreenSize: [{ type: Input }],
-    isDefault: [{ type: Input }],
-    dataViewEditClick: [{ type: Output }],
-    dataViewDeleteClick: [{ type: Output }]
+class ProfileDataViewsCardComponent {
+    constructor(translate) {
+        this.translate = translate;
+        this.profileId = '';
+        this.title = '';
+        this.dataViews = [];
+        this.configurationPerScreenSize = false;
+        this.isDefault = false;
+        this.dataViewEditClick = new EventEmitter();
+        this.dataViewDeleteClick = new EventEmitter();
+        this.menuItems = [];
+    }
+    loadMenuItems() {
+        const removeKey = 'ACTIONS.REMOVE';
+        // Load translation before get the options in the children.
+        this.translate.get([removeKey]).subscribe((res) => {
+            this.menuItems = [
+                { key: 'delete', text: this.translate.instant(res[removeKey]) }
+            ];
+        });
+    }
+    ngOnInit() {
+        this.loadMenuItems();
+    }
+    onMenuItemClicked(action) {
+        if (this.dataViews.length === 1) {
+            if (action.source.key === 'delete') {
+                this.onDataViewDeleteClicked({ dataViewId: this.dataViews[0].dataViewId });
+            }
+        }
+    }
+    onDataViewEditClicked(event) {
+        this.dataViewEditClick.emit(event);
+    }
+    onDataViewDeleteClicked(event) {
+        this.dataViewDeleteClick.emit(event);
+    }
+}
+ProfileDataViewsCardComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pep-profile-data-views-card',
+                template: "<div class=\"profile-data-views-card-container\">\n    <div class=\"card-top-bar pep-border-bottom\">\n        <div *ngIf=\"title?.length > 0\" class=\"title ellipsis\"\n            [title]=\"title + ' ' + (isDefault ? ('PROFILE_DATA_VIEWS_LIST.DEFAULT_PROFILE' | translate) : '')\">\n            <span class=\"title-md\">{{title}}&nbsp;</span>\n            <span *ngIf=\"isDefault\" class=\"color-dimmed\">{{('PROFILE_DATA_VIEWS_LIST.DEFAULT_PROFILE' |\n                translate)}}&nbsp;\n            </span>\n        </div>\n        <pep-menu *ngIf=\"!configurationPerScreenSize && !isDefault\" sizeType=\"sm\" [items]=\"menuItems\" (menuItemClick)=\"onMenuItemClicked($event)\">\n        </pep-menu>\n    </div>\n\n    <pep-profile-data-view *ngFor=\"let dataView of dataViews\" [dataViewId]=\"dataView.dataViewId\"\n        [title]=\"configurationPerScreenSize ? dataView.viewType : ''\" [fields]=\"dataView.fields\" [canDelete]=\"!(isDefault && dataView.viewType === 'Tablet')\"\n        (editClick)=\"onDataViewEditClicked($event)\" (deleteClick)=\"onDataViewDeleteClicked($event)\">\n    </pep-profile-data-view>\n</div>",
+                styles: [".profile-data-views-card-container{padding:1rem;padding:var(--pep-spacing-lg,1rem);border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);width:320px;max-width:320px}.profile-data-views-card-container .card-top-bar{height:2.5rem;height:var(--pep-top-bar-field-height,2.5rem);margin-bottom:.75rem;margin-bottom:var(--pep-spacing-md,.75rem);display:flex;justify-content:space-between}.profile-data-views-card-container .card-top-bar .title{display:block;height:calc(2.5rem - .5rem);height:calc(var(--pep-top-bar-field-height, 2.5rem) - var(--pep-spacing-sm, .5rem));align-self:center}", ".profile-data-views-card-container{background:#fafafa;background:hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),98%);box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);border:1px solid hsl(0,0%,calc(10% + 30%));border:1px solid hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),calc(var(--pep-color-regular-l, 10%) + 30%))}"]
+            },] }
+];
+ProfileDataViewsCardComponent.ctorParameters = () => [
+    { type: TranslateService }
+];
+ProfileDataViewsCardComponent.propDecorators = {
+    profileId: [{ type: Input }],
+    title: [{ type: Input }],
+    dataViews: [{ type: Input }],
+    configurationPerScreenSize: [{ type: Input }],
+    isDefault: [{ type: Input }],
+    dataViewEditClick: [{ type: Output }],
+    dataViewDeleteClick: [{ type: Output }]
 };
 
-class ProfileDataViewComponent {
-    constructor() {
-        this.canDelete = true;
-        this.editClick = new EventEmitter();
-        this.deleteClick = new EventEmitter();
-        //
-    }
-    ngOnInit() {
-        //
-    }
-    onEditClicked(event) {
-        this.editClick.emit({
-            dataViewId: this.dataViewId
-        });
-    }
-    onDeleteClicked(event) {
-        this.deleteClick.emit({
-            dataViewId: this.dataViewId
-        });
-    }
-}
-ProfileDataViewComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'pep-profile-data-view',
-                template: "<div *ngIf=\"title?.length > 0\" class=\"data-view-title-container\">\n    <div class=\"title ellipsis\" [title]=\"title\">\n        <span class=\"title-md\">{{title}}</span>\n    </div>\n    <pep-button *ngIf=\"canDelete\" class=\"delete-button\" sizeType=\"xs\" (buttonClick)=\"onDeleteClicked($event)\"\n        [value]=\"'ACTIONS.REMOVE' | translate\">\n    </pep-button>\n</div>\n<div class=\"data-view-container\">\n    <div class=\"fields-container\">\n        <span class=\"color-caution body-xs ellipsis data-view-field\" *ngIf=\"fields === null || fields.length === 0\">\n            {{('PROFILE_DATA_VIEWS_LIST.NO_FIELDS_ASSIGNED' | translate)}}</span>\n        <span class=\"color-dimmed body-xs ellipsis data-view-field\" *ngFor=\"let field of fields\" [title]=\"field\">{{field}}</span>\n    </div>\n    <pep-button class=\"edit-button\" iconName=\"system_edit\" sizeType=\"xs\" (buttonClick)=\"onEditClicked($event)\">\n    </pep-button>\n</div>",
-                styles: [".data-view-title-container{display:flex;justify-content:space-between;margin-bottom:.5rem;margin-bottom:var(--pep-spacing-sm,.5rem)}.data-view-title-container .title{display:block;max-width:240px;align-self:center}.data-view-container{padding:.5rem;padding:var(--pep-spacing-sm,.5rem);border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);position:relative}.data-view-container .fields-container{margin-bottom:.5rem;margin-bottom:var(--pep-spacing-sm,.5rem);-webkit-margin-end:2rem;margin-inline-end:2rem}.data-view-container .fields-container .data-view-field{display:block}.data-view-container .edit-button{position:absolute;right:.5rem;right:var(--pep-spacing-sm,.5rem);bottom:.5rem;bottom:var(--pep-spacing-sm,.5rem)}", ".data-view-container{background:#fafafa;background:hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),98%);box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);border:1px solid hsl(0,0%,calc(10% + 30%));border:1px solid hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),calc(var(--pep-color-regular-l, 10%) + 30%));background:#fff;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%))}"]
-            },] }
-];
-ProfileDataViewComponent.ctorParameters = () => [];
-ProfileDataViewComponent.propDecorators = {
-    dataViewId: [{ type: Input }],
-    title: [{ type: Input }],
-    fields: [{ type: Input }],
-    canDelete: [{ type: Input }],
-    editClick: [{ type: Output }],
-    deleteClick: [{ type: Output }]
+class ProfileDataViewComponent {
+    constructor() {
+        this.canDelete = true;
+        this.editClick = new EventEmitter();
+        this.deleteClick = new EventEmitter();
+        //
+    }
+    ngOnInit() {
+        //
+    }
+    onEditClicked(event) {
+        this.editClick.emit({
+            dataViewId: this.dataViewId
+        });
+    }
+    onDeleteClicked(event) {
+        this.deleteClick.emit({
+            dataViewId: this.dataViewId
+        });
+    }
+}
+ProfileDataViewComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pep-profile-data-view',
+                template: "<div *ngIf=\"title?.length > 0\" class=\"data-view-title-container\">\n    <div class=\"title ellipsis\" [title]=\"title\">\n        <span class=\"title-md\">{{title}}</span>\n    </div>\n    <pep-button *ngIf=\"canDelete\" class=\"delete-button\" sizeType=\"xs\" (buttonClick)=\"onDeleteClicked($event)\"\n        [value]=\"'ACTIONS.REMOVE' | translate\">\n    </pep-button>\n</div>\n<div class=\"data-view-container\">\n    <div class=\"fields-container\">\n        <span class=\"color-caution body-xs ellipsis data-view-field\" *ngIf=\"fields === null || fields.length === 0\">\n            {{('PROFILE_DATA_VIEWS_LIST.NO_FIELDS_ASSIGNED' | translate)}}</span>\n        <span class=\"color-dimmed body-xs ellipsis data-view-field\" *ngFor=\"let field of fields\" [title]=\"field\">{{field}}</span>\n    </div>\n    <pep-button class=\"edit-button\" iconName=\"system_edit\" sizeType=\"xs\" (buttonClick)=\"onEditClicked($event)\">\n    </pep-button>\n</div>",
+                styles: [".data-view-title-container{display:flex;justify-content:space-between;margin-bottom:.5rem;margin-bottom:var(--pep-spacing-sm,.5rem)}.data-view-title-container .title{display:block;max-width:240px;align-self:center}.data-view-container{padding:.5rem;padding:var(--pep-spacing-sm,.5rem);border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);position:relative}.data-view-container .fields-container{margin-bottom:.5rem;margin-bottom:var(--pep-spacing-sm,.5rem);-webkit-margin-end:2rem;margin-inline-end:2rem}.data-view-container .fields-container .data-view-field{display:block}.data-view-container .edit-button{position:absolute;right:.5rem;right:var(--pep-spacing-sm,.5rem);bottom:.5rem;bottom:var(--pep-spacing-sm,.5rem)}", ".data-view-container{background:#fafafa;background:hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),98%);box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);border:1px solid hsl(0,0%,calc(10% + 30%));border:1px solid hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),calc(var(--pep-color-regular-l, 10%) + 30%));background:#fff;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%))}"]
+            },] }
+];
+ProfileDataViewComponent.ctorParameters = () => [];
+ProfileDataViewComponent.propDecorators = {
+    dataViewId: [{ type: Input }],
+    title: [{ type: Input }],
+    fields: [{ type: Input }],
+    canDelete: [{ type: Input }],
+    editClick: [{ type: Output }],
+    deleteClick: [{ type: Output }]
 };
 
-class ProfileDataViewsListComponent {
-    constructor(dialogService) {
-        this.dialogService = dialogService;
-        this.defaultProfileId = '';
-        this._availableProfiles = [];
-        this._profileDataViewsList = [];
-        this.configurationPerScreenSize = false;
-        this.saveNewProfileClick = new EventEmitter();
-        this.dataViewEditClick = new EventEmitter();
-        this.dataViewDeleteClick = new EventEmitter();
-        this.selectedNewProfileId = '';
-        this.nonExistingProfiles = [];
-    }
-    set availableProfiles(value) {
-        this._availableProfiles = value;
-        this.setNonExistingProfiles();
-    }
-    get availableProfiles() {
-        return this._availableProfiles;
-    }
-    set profileDataViewsList(value) {
-        this._profileDataViewsList = value;
-        this.setNonExistingProfiles();
-    }
-    get profileDataViewsList() {
-        return this._profileDataViewsList;
-    }
-    // Set the profiles that not exist already in profileDataViewsList.
-    setNonExistingProfiles() {
-        this.nonExistingProfiles = this.availableProfiles.filter(ap => this.profileDataViewsList.findIndex(pdv => pdv.profileId === ap.id) === -1);
-    }
-    ngOnInit() {
-        //
-    }
-    setSelectedNewProfileId(value) {
-        this.selectedNewProfileId = value;
-    }
-    closeDialog() {
-        var _a;
-        (_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.close();
-    }
-    saveNewProfile() {
-        // Add the new profile
-        this.saveNewProfileClick.emit(this.selectedNewProfileId);
-        this.closeDialog();
-    }
-    onAddProfileClicked(event) {
-        // Raise select profile dialog
-        this.selectedNewProfileId = '';
-        const options = [];
-        options.push(...(this.nonExistingProfiles.map((opt) => {
-            return {
-                key: opt.id, value: opt.name
-            };
-        })));
-        this.dialogRef = this.dialogService.openDialog(this.selectProfileTemplate, { options });
-    }
-    onDataViewEditClicked(event) {
-        this.dataViewEditClick.emit(event);
-    }
-    onDataViewDeleteClicked(event) {
-        this.dataViewDeleteClick.emit(event);
-    }
-}
-ProfileDataViewsListComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'pep-profile-data-views-list',
-                template: "<div class=\"profile-data-views-list-container\">\n    <pep-profile-data-views-card *ngFor=\"let profileDataViews of profileDataViewsList\"\n        [configurationPerScreenSize]=\"configurationPerScreenSize\" [title]=\"profileDataViews.title\"\n        [profileId]=\"profileDataViews.profileId\" [dataViews]=\"profileDataViews.dataViews\"\n        [isDefault]=\"profileDataViews.profileId === defaultProfileId\"\n        (dataViewEditClick)=\"onDataViewEditClicked($event)\" (dataViewDeleteClick)=\"onDataViewDeleteClicked($event)\">\n    </pep-profile-data-views-card>\n\n    <pep-button *ngIf=\"nonExistingProfiles?.length > 0\" [value]=\"'PROFILE_DATA_VIEWS_LIST.ADD_PROFILE' | translate\"\n        iconName=\"number_plus\" sizeType=\"lg\" (buttonClick)=\"onAddProfileClicked($event)\"></pep-button>\n</div>\n\n<ng-template #selectProfileTemplate let-data>\n    <pep-dialog [title]=\"'PROFILE_DATA_VIEWS_LIST.SELECT_PROFILE_DIALOG_TITLE' | translate\" (close)=\"closeDialog()\">\n        <ng-container pep-dialog-content>\n            <pep-select [label]=\"'PROFILE_DATA_VIEWS_LIST.SELECT_PROFILE' | translate\" [options]=\"data.options\"\n                [emptyOption]=\"false\" (valueChange)=\"setSelectedNewProfileId($event)\">\n            </pep-select>\n        </ng-container>\n        <ng-container pep-dialog-actions>\n            <div class=\"pep-spacing-element-negative\">\n                <button mat-button class=\"pep-spacing-element pep-button md weak\" (click)=\"closeDialog()\">\n                    {{ 'Cancel' | translate}}\n                </button>\n                <button mat-button class=\"pep-spacing-element pep-button md strong\" (click)=\"saveNewProfile()\"\n                    [disabled]=\"selectedNewProfileId === ''\">\n                    {{ 'Save' | translate}}\n                </button>\n            </div>\n        </ng-container>\n    </pep-dialog>\n</ng-template>",
-                styles: [".profile-data-views-list-container{display:flex;align-items:flex-start;grid-gap:1rem;gap:1rem}"]
-            },] }
-];
-ProfileDataViewsListComponent.ctorParameters = () => [
-    { type: PepDialogService }
-];
-ProfileDataViewsListComponent.propDecorators = {
-    defaultProfileId: [{ type: Input }],
-    availableProfiles: [{ type: Input }],
-    profileDataViewsList: [{ type: Input }],
-    configurationPerScreenSize: [{ type: Input }],
-    saveNewProfileClick: [{ type: Output }],
-    dataViewEditClick: [{ type: Output }],
-    dataViewDeleteClick: [{ type: Output }],
-    selectProfileTemplate: [{ type: ViewChild, args: ['selectProfileTemplate', { read: TemplateRef },] }]
+class ProfileDataViewsListComponent {
+    constructor(dialogService) {
+        this.dialogService = dialogService;
+        this.defaultProfileId = '';
+        this._availableProfiles = [];
+        this._profileDataViewsList = [];
+        this.configurationPerScreenSize = false;
+        this.saveNewProfileClick = new EventEmitter();
+        this.dataViewEditClick = new EventEmitter();
+        this.dataViewDeleteClick = new EventEmitter();
+        this.selectedNewProfileId = '';
+        this.nonExistingProfiles = [];
+    }
+    set availableProfiles(value) {
+        this._availableProfiles = value;
+        this.setNonExistingProfiles();
+    }
+    get availableProfiles() {
+        return this._availableProfiles;
+    }
+    set profileDataViewsList(value) {
+        this._profileDataViewsList = value;
+        this.setNonExistingProfiles();
+    }
+    get profileDataViewsList() {
+        return this._profileDataViewsList;
+    }
+    // Set the profiles that not exist already in profileDataViewsList.
+    setNonExistingProfiles() {
+        this.nonExistingProfiles = this.availableProfiles.filter(ap => this.profileDataViewsList.findIndex(pdv => pdv.profileId === ap.id) === -1);
+    }
+    ngOnInit() {
+        //
+    }
+    setSelectedNewProfileId(value) {
+        this.selectedNewProfileId = value;
+    }
+    closeDialog() {
+        var _a;
+        (_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.close();
+    }
+    saveNewProfile() {
+        // Add the new profile
+        this.saveNewProfileClick.emit(this.selectedNewProfileId);
+        this.closeDialog();
+    }
+    onAddProfileClicked(event) {
+        // Raise select profile dialog
+        this.selectedNewProfileId = '';
+        const options = [];
+        options.push(...(this.nonExistingProfiles.map((opt) => {
+            return {
+                key: opt.id, value: opt.name
+            };
+        })));
+        this.dialogRef = this.dialogService.openDialog(this.selectProfileTemplate, { options });
+    }
+    onDataViewEditClicked(event) {
+        this.dataViewEditClick.emit(event);
+    }
+    onDataViewDeleteClicked(event) {
+        this.dataViewDeleteClick.emit(event);
+    }
+}
+ProfileDataViewsListComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pep-profile-data-views-list',
+                template: "<div class=\"profile-data-views-list-container\">\n    <pep-profile-data-views-card *ngFor=\"let profileDataViews of profileDataViewsList\"\n        [configurationPerScreenSize]=\"configurationPerScreenSize\" [title]=\"profileDataViews.title\"\n        [profileId]=\"profileDataViews.profileId\" [dataViews]=\"profileDataViews.dataViews\"\n        [isDefault]=\"profileDataViews.profileId === defaultProfileId\"\n        (dataViewEditClick)=\"onDataViewEditClicked($event)\" (dataViewDeleteClick)=\"onDataViewDeleteClicked($event)\">\n    </pep-profile-data-views-card>\n\n    <pep-button *ngIf=\"nonExistingProfiles?.length > 0\" [value]=\"'PROFILE_DATA_VIEWS_LIST.ADD_PROFILE' | translate\"\n        iconName=\"number_plus\" sizeType=\"lg\" (buttonClick)=\"onAddProfileClicked($event)\"></pep-button>\n</div>\n\n<ng-template #selectProfileTemplate let-data>\n    <pep-dialog [title]=\"'PROFILE_DATA_VIEWS_LIST.SELECT_PROFILE_DIALOG_TITLE' | translate\" (close)=\"closeDialog()\">\n        <ng-container pep-dialog-content>\n            <pep-select [label]=\"'PROFILE_DATA_VIEWS_LIST.SELECT_PROFILE' | translate\" [options]=\"data.options\"\n                [emptyOption]=\"false\" (valueChange)=\"setSelectedNewProfileId($event)\">\n            </pep-select>\n        </ng-container>\n        <ng-container pep-dialog-actions>\n            <div class=\"pep-spacing-element-negative\">\n                <button mat-button class=\"pep-spacing-element pep-button md weak\" (click)=\"closeDialog()\">\n                    {{ 'Cancel' | translate}}\n                </button>\n                <button mat-button class=\"pep-spacing-element pep-button md strong\" (click)=\"saveNewProfile()\"\n                    [disabled]=\"selectedNewProfileId === ''\">\n                    {{ 'Save' | translate}}\n                </button>\n            </div>\n        </ng-container>\n    </pep-dialog>\n</ng-template>",
+                styles: [".profile-data-views-list-container{display:flex;align-items:flex-start;grid-gap:1rem;gap:1rem}"]
+            },] }
+];
+ProfileDataViewsListComponent.ctorParameters = () => [
+    { type: PepDialogService }
+];
+ProfileDataViewsListComponent.propDecorators = {
+    defaultProfileId: [{ type: Input }],
+    availableProfiles: [{ type: Input }],
+    profileDataViewsList: [{ type: Input }],
+    configurationPerScreenSize: [{ type: Input }],
+    saveNewProfileClick: [{ type: Output }],
+    dataViewEditClick: [{ type: Output }],
+    dataViewDeleteClick: [{ type: Output }],
+    selectProfileTemplate: [{ type: ViewChild, args: ['selectProfileTemplate', { read: TemplateRef },] }]
 };
 
-class PepProfileDataViewsListModule {
-    constructor(pepIconRegistry) {
-        this.pepIconRegistry = pepIconRegistry;
-        this.pepIconRegistry.registerIcons([
-            pepIconSystemEdit,
-            pepIconSystemMenu,
-        ]);
-    }
-}
-PepProfileDataViewsListModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    ProfileDataViewsListComponent,
-                    ProfileDataViewsCardComponent,
-                    ProfileDataViewComponent
-                ],
-                imports: [
-                    CommonModule,
-                    ReactiveFormsModule,
-                    // Material modules,
-                    MatDialogModule,
-                    MatMenuModule,
-                    // ngx-lib modules
-                    PepNgxLibModule,
-                    PepButtonModule,
-                    PepDialogModule,
-                    PepSelectModule,
-                    PepMenuModule,
-                    PepIconModule,
-                    PepTopBarModule,
-                ],
-                exports: [
-                    ProfileDataViewsListComponent,
-                    ProfileDataViewsCardComponent,
-                    ProfileDataViewComponent
-                ],
-            },] }
-];
-PepProfileDataViewsListModule.ctorParameters = () => [
-    { type: PepIconRegistry }
+class PepProfileDataViewsListModule {
+    constructor(pepIconRegistry) {
+        this.pepIconRegistry = pepIconRegistry;
+        this.pepIconRegistry.registerIcons([
+            pepIconSystemEdit,
+            pepIconSystemMenu,
+        ]);
+    }
+}
+PepProfileDataViewsListModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    ProfileDataViewsListComponent,
+                    ProfileDataViewsCardComponent,
+                    ProfileDataViewComponent
+                ],
+                imports: [
+                    CommonModule,
+                    ReactiveFormsModule,
+                    // Material modules,
+                    MatDialogModule,
+                    MatMenuModule,
+                    // ngx-lib modules
+                    PepNgxLibModule,
+                    PepButtonModule,
+                    PepDialogModule,
+                    PepSelectModule,
+                    PepMenuModule,
+                    PepIconModule,
+                    PepTopBarModule,
+                ],
+                exports: [
+                    ProfileDataViewsListComponent,
+                    ProfileDataViewsCardComponent,
+                    ProfileDataViewComponent
+                ],
+            },] }
+];
+PepProfileDataViewsListModule.ctorParameters = () => [
+    { type: PepIconRegistry }
 ];
 
-/*
- * Public API Surface of ngx-lib/profile-data-views-list
+/*
+ * Public API Surface of ngx-lib/profile-data-views-list
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { PepProfileDataViewsListModule, ProfileDataViewComponent, ProfileDataViewsCardComponent, ProfileDataViewsListComponent };