@pepperi-addons/ngx-composite-lib 0.4.2-beta.96 → 0.5.0-ng15.1

package/fesm2020/pepperi-addons-ngx-composite-lib-generic-list.mjs

@@ -3,28 +3,32 @@ import { Injectable, EventEmitter, ViewContainerRef, Component, ViewChild, Input
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@pepperi-addons/ngx-lib';
-import { PepRowData, UIControl, PepGuid, PepNgxLibModule } from '@pepperi-addons/ngx-lib';
+import { PepRowData, PepScreenSizeType, UIControl, PepGuid, PepNgxLibModule } from '@pepperi-addons/ngx-lib';
 import { Subscription } from 'rxjs';
-import * as i5 from '@pepperi-addons/ngx-lib/list';
+import * as i6 from '@pepperi-addons/ngx-lib/list';
 import { DEFAULT_PAGE_SIZE, PepSelectionData, PepListModule } from '@pepperi-addons/ngx-lib/list';
 import { DataViewFieldTypes } from '@pepperi-addons/papi-sdk/dist/entities/data-view';
 import * as i1 from '@ngx-translate/core';
 import * as i2 from '@pepperi-addons/ngx-lib/query-builder';
 import { DataViewConverter } from '@pepperi-addons/data-views';
-import * as i6 from '@pepperi-addons/ngx-lib/page-layout';
+import * as i5 from '@pepperi-addons/ngx-lib/button';
+import { PepButtonModule } from '@pepperi-addons/ngx-lib/button';
+import * as i7 from '@pepperi-addons/ngx-lib/page-layout';
 import { PepPageLayoutModule } from '@pepperi-addons/ngx-lib/page-layout';
-import * as i7 from '@pepperi-addons/ngx-lib/top-bar';
+import * as i8 from '@pepperi-addons/ngx-lib/top-bar';
 import { PepTopBarModule } from '@pepperi-addons/ngx-lib/top-bar';
-import * as i8 from '@pepperi-addons/ngx-lib/side-bar';
+import * as i9 from '@pepperi-addons/ngx-lib/side-bar';
 import { PepSideBarModule } from '@pepperi-addons/ngx-lib/side-bar';
-import * as i9 from '@pepperi-addons/ngx-lib/search';
+import * as i10 from '@pepperi-addons/ngx-lib/search';
 import { PepSearchModule } from '@pepperi-addons/ngx-lib/search';
-import * as i10 from '@pepperi-addons/ngx-lib/bread-crumbs';
+import * as i11 from '@pepperi-addons/ngx-lib/bread-crumbs';
 import { PepBreadCrumbsModule } from '@pepperi-addons/ngx-lib/bread-crumbs';
 import * as i1$2 from '@pepperi-addons/ngx-lib/icon';
-import { pepIconLeafRound, pepIconLeafSkiny, pepIconSystemView, PepIconModule } from '@pepperi-addons/ngx-lib/icon';
-import * as i12 from '@pepperi-addons/ngx-lib/smart-filters';
+import { pepIconLeafRound, pepIconLeafSkiny, pepIconSystemView, pepIconSystemFilter, pepIconSystemInfo, PepIconModule } from '@pepperi-addons/ngx-lib/icon';
+import * as i13 from '@pepperi-addons/ngx-lib/smart-filters';
 import { PepSmartFiltersModule } from '@pepperi-addons/ngx-lib/smart-filters';
+import * as i14 from '@pepperi-addons/ngx-lib/size-detector';
+import { PepSizeDetectorModule } from '@pepperi-addons/ngx-lib/size-detector';
 import { MatIconModule } from '@angular/material/icon';
 import { PepFormModule } from '@pepperi-addons/ngx-lib/form';
 import { PepMenuModule } from '@pepperi-addons/ngx-lib/menu';
@@ -73,6 +77,7 @@ class PepGenericListService {
         }
         else {
             itemFields = item;
+            row.IsSelectableForActions = item?.isSelectableForActions;
         }
         row.UUID = itemFields[uuidMapping] || undefined;
         row.Fields = [];
@@ -84,7 +89,7 @@ class PepGenericListService {
                     Title: field.Title ? this._translate.instant(field.Title) : '',
                     XAlignment: 1,
                     FormattedValue: (itemFields[field.FieldID] || '').toString(),
-                    Value: (itemFields[field.FieldID] || '').toString(),
+                    Value: this.getFieldValue(itemFields, field),
                     ColumnWidth: dataView.Columns[index]?.Width || undefined,
                     AdditionalValue: '',
                     OptionalValues: field.OptionalValues || [],
@@ -96,6 +101,30 @@ class PepGenericListService {
         }
         return row;
     }
+    ////Value: (itemFields[field.FieldID] || '').toString(),
+    getFieldValue(itemFields, field) {
+        let value = '';
+        if (field?.FieldID.indexOf('.') > -1 && !itemFields.hasOwnProperty(field.FieldID)) {
+            value = this.getValueByPath(itemFields, field.FieldID);
+        }
+        else {
+            value = (itemFields[field.FieldID] || '').toString();
+        }
+        return value;
+    }
+    getValueByPath(obj, path) {
+        const keys = path.split('.');
+        let current = obj;
+        for (const key of keys) {
+            if (current && current.hasOwnProperty(key)) {
+                current = current[key];
+            }
+            else {
+                return ''; // Or handle the missing path as needed
+            }
+        }
+        return current;
+    }
     convertToUiControlField(field) {
         return {
             ApiName: field.ApiName,
@@ -163,20 +192,48 @@ class PepGenericListService {
         return selectedItems;
     }
 }
-PepGenericListService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGenericListService, deps: [{ token: i1.TranslateService }, { token: i2.PepQueryBuilderService }], target: i0.ɵɵFactoryTarget.Injectable });
-PepGenericListService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGenericListService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGenericListService, decorators: [{
+PepGenericListService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepGenericListService, deps: [{ token: i1.TranslateService }, { token: i2.PepQueryBuilderService }], target: i0.ɵɵFactoryTarget.Injectable });
+PepGenericListService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepGenericListService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepGenericListService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.TranslateService }, { type: i2.PepQueryBuilderService }]; } });
 
 class GenericListComponent {
-    constructor(_dataConvertorService, _layoutService, _loaderService, _translate, _genericListService, _sessionService) {
+    set pepListContainer(val) {
+        this._pepListContainer = val;
+    }
+    set dataSource(val) {
+        this._dataSource = val;
+        this._sorting = undefined;
+        this.initSearch();
+        this.initSmartSearch();
+        this.initList();
+    }
+    set actions(val) {
+        this._actions = val;
+        this.loadMenuItems();
+    }
+    set smartFilter(val) {
+        this.smartFilters = this._genericListService.convertToSmartFilter(val);
+        this._appliedFilters = this.smartFilters.data || [];
+        this.showSmartFilter = this.smartFilters.fields.length > 0;
+        this.showSideBar = this.showSmartFilter;
+        this.setOpenSidebarButtonText();
+    }
+    set pepList(val) {
+        this._pepList = val;
+    }
+    get pepList() {
+        return this._pepList;
+    }
+    constructor(_dataConvertorService, _layoutService, _loaderService, _translate, _genericListService, _sessionService, customizationService) {
         this._dataConvertorService = _dataConvertorService;
         this._layoutService = _layoutService;
         this._loaderService = _loaderService;
         this._translate = _translate;
         this._genericListService = _genericListService;
         this._sessionService = _sessionService;
+        this.customizationService = customizationService;
         this._dataSource = {
             init: async (params) => {
                 return {
@@ -188,7 +245,7 @@ class GenericListComponent {
                 };
             }
         };
-        this.actions = {
+        this._actions = {
             get: async (data) => {
                 return [];
             }
@@ -197,6 +254,7 @@ class GenericListComponent {
         this.disabled = false;
         this.addPadding = false;
         this.title = '';
+        this.sideBarTitle = '';
         this.description = '';
         this.inline = false;
         this.showSearch = false;
@@ -217,6 +275,7 @@ class GenericListComponent {
         this.selectAll = false;
         this.scrollPosition = 0;
         this.unknownCount = false;
+        this.itemClick = new EventEmitter();
         this.fieldClick = new EventEmitter();
         this.valueChange = new EventEmitter();
         this.breadCrumbItemClick = new EventEmitter();
@@ -241,36 +300,44 @@ class GenericListComponent {
         this._sorting = undefined;
         this.menuHandlers = {};
         this.menuActions = [];
+        this.screenSize = PepScreenSizeType.SM;
+        this.PepScreenSizeType = PepScreenSizeType;
+        this.searchStateIsOpen = false;
+        this.searchOpenOnSmallDevice = false;
+        this.openSideBarButtonValue = '';
+        this.showSideBar = false;
         this._resize$ = this._layoutService.onResize$.pipe().subscribe((size) => {
+            this.screenSize = size;
+            this.setIfSearchIsOpenOnSmallDevice();
+            this.setOpenSidebarButtonText();
             //            
         });
         this._loader$ = this._loaderService.onChanged$.subscribe((status) => {
             //
         });
     }
-    set pepListContainer(val) {
-        this._pepListContainer = val;
-    }
-    set dataSource(val) {
-        this._dataSource = val;
-        this._sorting = undefined;
-        this.initSearch();
-        this.initSmartSearch();
-        this.initList();
-    }
-    set smartFilter(val) {
-        this.smartFilters = this._genericListService.convertToSmartFilter(val);
-        this._appliedFilters = this.smartFilters.data || [];
-        this.showSmartFilter = this.smartFilters.fields.length > 0;
+    ngOnInit() {
+        //
     }
-    set pepList(val) {
-        this._pepList = val;
+    ngOnDestroy() {
+        if (this._resize$) {
+            this._resize$.unsubscribe();
+        }
+        if (this._loader$) {
+            this._loader$.unsubscribe();
+        }
     }
-    get pepList() {
-        return this._pepList;
+    setOpenSidebarButtonText() {
+        this.openSideBarButtonValue = '';
+        if (this.screenSize === PepScreenSizeType.MD) {
+            const textToTranslate = this.showSmartFilter ? 'GENERIC_LIST.OPEN_FILTERS' : 'GENERIC_LIST.OPEN_SIDEBAR';
+            this._translate.get(textToTranslate).subscribe((res) => {
+                this.openSideBarButtonValue = res;
+            });
+        }
     }
-    ngOnInit() {
-        //
+    setIfSearchIsOpenOnSmallDevice() {
+        this.searchOpenOnSmallDevice = this.screenSize >= PepScreenSizeType.SM && this.searchStateIsOpen;
     }
     async initList() {
         this.onLoad = true;
@@ -294,6 +361,9 @@ class GenericListComponent {
                 this.onLoad = false;
                 //show empty state
                 if (this.showEmptyState) {
+                    if (!this.listInputs.emptyState) {
+                        this.listInputs.emptyState = {};
+                    }
                     if (!this.listInputs.emptyState.title) {
                         this._translate.get('GENERIC_LIST.EMPTY_STATE.TITLE').subscribe(text => {
                             this.listInputs.emptyState.title = text;
@@ -341,6 +411,9 @@ class GenericListComponent {
                         componentRef.instance.startIndexChange.subscribe($event => {
                             this.startIndexChange.emit($event);
                         });
+                        componentRef.instance.itemClick.subscribe(($event) => {
+                            this.itemClick.emit($event);
+                        });
                         componentRef.instance.fieldClick.subscribe(($event) => {
                             this.onCustomizeFieldClick($event);
                         });
@@ -426,7 +499,7 @@ class GenericListComponent {
         return uiControl;
     }
     loadMenuItems() {
-        if (this.listInputs.selectionType !== 'none') {
+        if (this.listInputs?.selectionType !== 'none') {
             this.getMenuActions().then(x => this.menuActions = x);
         }
     }
@@ -434,7 +507,7 @@ class GenericListComponent {
         const res = [];
         const result = this.getMenuObjects();
         if (result.success) {
-            const actions = await this.actions.get(result.data);
+            const actions = await this._actions.get(result.data);
             this.menuHandlers = {};
             actions?.forEach(item => {
                 const uuid = PepGuid.newGuid();
@@ -565,11 +638,16 @@ class GenericListComponent {
         this.searchString = event.value;
         this.initList();
     }
+    onSearchStateChange(event) {
+        // check if search is open and the device size is small or extra small
+        this.searchStateIsOpen = event.state === 'open';
+        this.setIfSearchIsOpenOnSmallDevice();
+    }
     onSelectedItemsChanged(selectedRowsCount) {
         //loading menu items after pep-list selected items are updated
-        setTimeout(() => {
-            this.loadMenuItems();
-        }, 0);
+        // setTimeout(() => {
+        this.loadMenuItems();
+        // }, 0);
     }
     onCustomizeFieldClick(fieldClickEvent) {
         this.fieldClick.emit(fieldClickEvent);
@@ -591,26 +669,24 @@ class GenericListComponent {
     onListLoad() {
         this.listLoad.emit();
     }
-    ngOnDestroy() {
-        if (this._resize$) {
-            this._resize$.unsubscribe();
-        }
-        if (this._loader$) {
-            this._loader$.unsubscribe();
-        }
+    openSideBar() {
+        this.sideBarComponent?.open();
     }
 }
-GenericListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: GenericListComponent, deps: [{ token: i1$1.PepDataConvertorService }, { token: i1$1.PepLayoutService }, { token: i1$1.PepLoaderService }, { token: i1.TranslateService }, { token: PepGenericListService }, { token: i1$1.PepSessionService }], target: i0.ɵɵFactoryTarget.Component });
-GenericListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: GenericListComponent, selector: "pep-generic-list", inputs: { dataSource: "dataSource", actions: "actions", uuidMapping: "uuidMapping", disabled: "disabled", addPadding: "addPadding", title: "title", description: "description", inline: "inline", showSearch: "showSearch", noDataFoundMsg: "noDataFoundMsg", emptyState: "emptyState", selectionType: "selectionType", supportSorting: "supportSorting", supportSortingFields: "supportSortingFields", separator: "separator", sorting: "sorting", cacheSize: "cacheSize", hideSelectAll: "hideSelectAll", pager: "pager", tableViewType: "tableViewType", zebraStripes: "zebraStripes", smartFilter: "smartFilter", showTopBar: "showTopBar", breadCrumbsItems: "breadCrumbsItems", selectAll: "selectAll", scrollPosition: "scrollPosition", unknownCount: "unknownCount" }, outputs: { fieldClick: "fieldClick", valueChange: "valueChange", breadCrumbItemClick: "breadCrumbItemClick", startIndexChange: "startIndexChange", listLoad: "listLoad" }, providers: [PepGenericListService], viewQueries: [{ propertyName: "search", first: true, predicate: ["search"], descendants: true }, { propertyName: "smartFiltersComponent", first: true, predicate: ["smartFiltersComponent"], descendants: true }, { propertyName: "pepListContainer", first: true, predicate: ["pepListContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div *ngIf=\"inline\" class=\"inline-container\" [ngClass]=\"{ 'add-padding': addPadding, 'with-smart-filters': showSmartFilter }\">\n    <div class=\"header-area\" >\n        <div *ngIf=\"showTopBar\" class=\"inline-top-bar-container\">\n            <ng-container *ngTemplateOutlet=\"topBarTemplate\"></ng-container>\n        </div>\n        <ng-container *ngIf=\"description\">\n            <div class=\"list-description\">{{description}}</div>\n        </ng-container>\n        <ng-container *ngIf=\"breadCrumbsItems.length\">\n            <ng-container *ngTemplateOutlet=\"breadCrumbsTemplate\"></ng-container>\n        </ng-container>\n    </div>\n    <ng-container *ngIf=\"showSmartFilter\">\n        <ng-container *ngTemplateOutlet=\"smartFilterTemplate\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!onLoad\">\n        <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n    </ng-container>\n</div>\n<pep-page-layout *ngIf=\"!inline\" class=\"none-inline\" [addPadding]=\"addPadding\" [showShadow]=\"showSmartFilter\">\n    <ng-container *ngIf=\"showSmartFilter\" pep-side-area>\n        <ng-container *ngTemplateOutlet=\"smartFilterTemplate\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"showTopBar\" pep-top-area>\n        <ng-container *ngTemplateOutlet=\"topBarTemplate\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"description\" pep-top-area>\n        <div class=\"list-description\">{{description}}</div>\n    </ng-container>\n    <ng-container *ngIf=\"breadCrumbsItems.length\" pep-top-area>\n        <ng-container *ngTemplateOutlet=\"breadCrumbsTemplate\"></ng-container>\n    </ng-container>\n    <div *ngIf=\"!onLoad\" pep-main-area class=\"main-area-container\">\n        <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n    </div>\n</pep-page-layout>\n\n<ng-template #topBarTemplate>\n    <pep-top-bar [title]=\"title\" [inline]=\"inline\">\n        <div header-start-content>\n            <ng-content select=\"[left-buttons]\"></ng-content>\n        </div>\n        <div header-end-content>\n            <ng-content select=\"[right-buttons]\"></ng-content>\n        </div>\n        <!-- <div footer-start-content>\n            <ng-content select=\"[left-bottom-area]\"></ng-content>               \n        </div>\n        <div footer-end-content>\n            <ng-content select=\"[right-bottom-area]\"></ng-content>     \n        </div> -->\n        <pep-list-actions *ngIf=\"menuActions.length > 0\" [sizeType]=\"inline ? 'sm' : 'md'\" [actions]=\"menuActions\"\n            (actionClick)=\"onActionItemClicked($event)\"></pep-list-actions>\n        <pep-list-total [sizeType]=\"inline ? 'sm' : 'md'\" [totalRows]=\"totalRowCount\" [unknownCount]=\"unknownCount\">\n        </pep-list-total>\n        <pep-search #search *ngIf=\"showSearch\" [value]=\"searchString\" [sizeType]=\"inline ? 'sm' : 'md'\"\n            (search)=\"onSearchChanged($event)\">\n        </pep-search>\n    </pep-top-bar>\n</ng-template>\n\n<ng-template #smartFilterTemplate>    \n    <pep-side-bar #sideNav [ngClass]=\"{'smart-filter-area': inline}\"> \n        <pep-smart-filters #smartFiltersComponent [title]=\"smartFilters.title\" [fields]=\"smartFilters.fields\"\n            [filters]=\"smartFilters.data\" (filtersChange)=\"onFiltersChange($event)\">\n        </pep-smart-filters>\n    </pep-side-bar>\n</ng-template>\n\n<ng-template #breadCrumbsTemplate>\n    <pep-bread-crumbs class=\"bread-crumbs\" [items]=\"breadCrumbsItems\" [addSpacing]=\"true\" [displayType]=\"'items'\"\n        (itemClick)=\"onBreadCrumbItemClick($event)\"></pep-bread-crumbs>\n</ng-template>\n\n<ng-template #listTemplate>\n    <div *ngIf=\"showEmptyState\" class=\"list-empty-state\">\n        <div class=\"list-empty-title\">{{ listInputs.emptyState.title }}</div>\n        <div class=\"list-empty-descr\">{{ listInputs.emptyState.description }}</div>\n        <pep-icon name=\"leaf_skiny\" class=\"leaf-skiny\"></pep-icon>\n        <pep-icon name=\"leaf_round\" class=\"leaf-round\"></pep-icon>\n        <!-- <mat-icon class=\"leaf-skiny\">\n            <pep-icon name=\"leaf_skiny\"></pep-icon>\n        </mat-icon> -->\n        <!-- <mat-icon class=\"leaf-round\">\n            <pep-icon name=\"leaf_round\"></pep-icon>\n        </mat-icon> -->\n    </div>\n    <div *ngIf=\"!showEmptyState\" class=\"list-container\">\n        <ng-container #pepListContainer></ng-container>\n    </div>\n</ng-template>", styles: [":host{height:inherit;display:block}.main-area-container{display:grid;height:inherit}.list-container{height:100%}.list-empty-state{padding-top:var(--pep-spacing-lg, 1rem);height:calc(100% - var(--pep-spacing-lg, 1rem));background:rgb(247,247,247);border-radius:var(--pep-border-radius-md, .25rem);position:relative;overflow:hidden;display:inline-flex!important;align-items:center;justify-content:center;flex-direction:column}.list-empty-state .leaf-skiny{z-index:1;height:52rem;position:absolute;left:-10rem;top:-2rem;pointer-events:none;transform:scale(1.4)}.list-empty-state .leaf-round{z-index:1;height:45rem;position:absolute;right:-13rem;top:-7rem;pointer-events:none;transform:rotate(45deg) scale(1)}.list-empty-state .list-empty-title{font-family:var(--pep-font-family-title, Nexa),-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-2xl, 1.5rem)!important;line-height:var(--pep-line-height-2xl, 1.875rem)!important;z-index:50;padding-inline:var(--pep-spacing-lg, 1rem)}.list-empty-state .list-empty-descr{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;z-index:50;padding-inline:var(--pep-spacing-lg, 1rem)}@media (max-width: 1279px){.list-empty-state .leaf-skiny{top:-5rem;left:-11rem;transform:scale(1.1)}.list-empty-state .leaf-round{right:-12rem;top:-7rem;transform:rotate(45deg) scale(.9)}}@media (max-width: 959px){.list-empty-state .leaf-round{display:none}.list-empty-state .list-empty-title,.list-empty-state .list-empty-descr{padding-inline:var(--pep-spacing-md, .75rem)}}.inline-container{height:inherit;display:grid;grid-template-rows:auto 1fr}.inline-container:not(.with-smart-filters) .header-area{grid-row:1/2}.inline-container:not(.with-smart-filters) .list-container{grid-row:2/3}.inline-container.with-smart-filters{grid-template-columns:auto 1fr}.inline-container.with-smart-filters .header-area{grid-column:2/3;grid-row:1/2}.inline-container.with-smart-filters .smart-filter-area{grid-column:1/2;grid-row:1/3}.inline-container.with-smart-filters .list-container{grid-column:2/3;grid-row:2/3}.inline-container.add-padding{padding-inline:var(--pep-spacing-lg, 1rem)}.inline-container .list-description{font-size:var(--pep-font-size-xs, .75rem);max-width:640px;padding:var(--pep-spacing-sm, .5rem) 0}.inline-container .bread-crumbs{padding:var(--pep-spacing-md, .75rem) 0 var(--pep-spacing-sm, .5rem) 0}.none-inline .list-description{font-size:var(--pep-font-size-sm, .875rem);max-width:720px;padding:var(--pep-spacing-sm, .5rem) var(--pep-spacing-xs, .25rem)}.none-inline .bread-crumbs{padding:var(--pep-spacing-md, .75rem) var(--pep-spacing-xs, .25rem) var(--pep-spacing-sm, .5rem) var(--pep-spacing-xs, .25rem)}.noDataFoundMsg{margin:1rem 0;height:calc(100% - 2rem);width:100%;background:hsla(0deg,0%,10%,.12);display:flex;justify-content:center;align-items:center}\n", ".list-empty-state ::ng-deep .svg-icon{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.04)}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.PepListActionsComponent, selector: "pep-list-actions", inputs: ["actions", "sizeType", "xPosition", "hidden"], outputs: ["actionClick", "stateChange", "menuClick"] }, { kind: "component", type: i5.PepListTotalComponent, selector: "pep-list-total", inputs: ["totalRows", "totalAmount", "isMapView", "sizeType", "unknownCount"] }, { kind: "component", type: i6.PepPageLayoutComponent, selector: "pep-page-layout", inputs: ["addPadding", "showShadow"] }, { kind: "component", type: i7.PepTopBarComponent, selector: "pep-top-bar", inputs: ["inline", "title"], outputs: ["footerStateChange"] }, { kind: "component", type: i8.PepSideBarComponent, selector: "pep-side-bar", inputs: ["position", "ignoreResize", "showHeader", "showFooter", "showToggle", "stateType", "useAsWebComponent"], outputs: ["stateChange"] }, { kind: "component", type: i9.PepSearchComponent, selector: "pep-search", inputs: ["triggerOn", "autoCompleteTop", "autoCompleteValues", "shrink", "value", "searchControl", "useAsWebComponent", "sizeType"], outputs: ["search", "autocompleteChange", "stateChange"] }, { kind: "component", type: i10.PepBreadCrumbsComponent, selector: "pep-bread-crumbs", inputs: ["items", "displayType", "addSpacing"], outputs: ["itemClick"] }, { kind: "component", type: i1$2.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i12.PepSmartFiltersComponent, selector: "pep-smart-filters", inputs: ["title", "filters", "fields", "useAsWebComponent"], outputs: ["filtersChange", "fieldToggleChange"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: GenericListComponent, decorators: [{
+GenericListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GenericListComponent, deps: [{ token: i1$1.PepDataConvertorService }, { token: i1$1.PepLayoutService }, { token: i1$1.PepLoaderService }, { token: i1.TranslateService }, { token: PepGenericListService }, { token: i1$1.PepSessionService }, { token: i1$1.PepCustomizationService }], target: i0.ɵɵFactoryTarget.Component });
+GenericListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GenericListComponent, selector: "pep-generic-list", inputs: { dataSource: "dataSource", actions: "actions", uuidMapping: "uuidMapping", disabled: "disabled", addPadding: "addPadding", title: "title", sideBarTitle: "sideBarTitle", description: "description", inline: "inline", showSearch: "showSearch", noDataFoundMsg: "noDataFoundMsg", emptyState: "emptyState", selectionType: "selectionType", supportSorting: "supportSorting", supportSortingFields: "supportSortingFields", separator: "separator", sorting: "sorting", cacheSize: "cacheSize", hideSelectAll: "hideSelectAll", pager: "pager", tableViewType: "tableViewType", zebraStripes: "zebraStripes", smartFilter: "smartFilter", showTopBar: "showTopBar", breadCrumbsItems: "breadCrumbsItems", selectAll: "selectAll", scrollPosition: "scrollPosition", unknownCount: "unknownCount" }, outputs: { itemClick: "itemClick", fieldClick: "fieldClick", valueChange: "valueChange", breadCrumbItemClick: "breadCrumbItemClick", startIndexChange: "startIndexChange", listLoad: "listLoad" }, providers: [PepGenericListService], viewQueries: [{ propertyName: "search", first: true, predicate: ["search"], descendants: true }, { propertyName: "smartFiltersComponent", first: true, predicate: ["smartFiltersComponent"], descendants: true }, { propertyName: "sideBarComponent", first: true, predicate: ["sideBar"], descendants: true }, { propertyName: "pepListContainer", first: true, predicate: ["pepListContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div *ngIf=\"inline\" class=\"inline-container\" [ngClass]=\"{ 'add-padding': addPadding, 'with-smart-filters': showSmartFilter }\">\n    <div class=\"header-area\" >\n        <div *ngIf=\"showTopBar\" class=\"inline-top-bar-container\">\n            <ng-container *ngTemplateOutlet=\"topBarTemplate\"></ng-container>\n        </div>\n        <ng-container *ngIf=\"description\">\n            <div class=\"list-description\">{{description}}</div>\n        </ng-container>\n        <ng-container *ngIf=\"breadCrumbsItems.length\">\n            <ng-container *ngTemplateOutlet=\"breadCrumbsTemplate\"></ng-container>\n        </ng-container>\n    </div>\n    <ng-container>\n        <ng-container *ngTemplateOutlet=\"sideBarTemplate\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!onLoad\">\n        <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n    </ng-container>\n</div>\n<pep-page-layout *ngIf=\"!inline\" class=\"none-inline\" [addPadding]=\"addPadding\" [showShadow]=\"showSmartFilter\">\n    <ng-container pep-side-area>\n        <ng-container *ngTemplateOutlet=\"sideBarTemplate\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"showTopBar\" pep-top-area>\n        <ng-container *ngTemplateOutlet=\"topBarTemplate\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"description\" pep-top-area>\n        <div class=\"list-description\">{{description}}</div>\n    </ng-container>\n    <ng-container *ngIf=\"breadCrumbsItems.length\" pep-top-area>\n        <ng-container *ngTemplateOutlet=\"breadCrumbsTemplate\"></ng-container>\n    </ng-container>\n    <div *ngIf=\"!onLoad\" pep-main-area class=\"main-area-container\">\n        <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n    </div>\n</pep-page-layout>\n\n<ng-template #topBarTemplate>\n    <pep-top-bar [title]=\"searchOpenOnSmallDevice ? '' : title\" [inline]=\"inline\">\n        <div *ngIf=\"!searchOpenOnSmallDevice\" header-start-content>\n            <ng-content select=\"[left-buttons]\"></ng-content>\n        </div>\n        <div *ngIf=\"!searchOpenOnSmallDevice\" header-end-content>\n            <ng-content select=\"[right-buttons]\"></ng-content>\n        </div>\n        <pep-list-actions *ngIf=\"!searchOpenOnSmallDevice && menuActions.length > 0 && !showEmptyState\" [sizeType]=\"inline ? 'sm' : 'md'\" [actions]=\"menuActions\"\n            (actionClick)=\"onActionItemClicked($event)\"></pep-list-actions>\n        <pep-list-total *ngIf=\"!searchOpenOnSmallDevice && screenSize <= PepScreenSizeType.SM\" [sizeType]=\"inline ? 'sm' : 'md'\" [totalRows]=\"totalRowCount\" [unknownCount]=\"unknownCount\">\n        </pep-list-total>\n        <pep-search #search *ngIf=\"showSearch\" [value]=\"searchString\" [sizeType]=\"inline ? 'sm' : 'md'\"\n            (search)=\"onSearchChanged($event)\" (stateChange)=\"onSearchStateChange($event)\">\n        </pep-search>\n        <div *ngIf=\"!inline\" class=\"pep-spacing-element-negative\" footer-start-content>\n            <ng-container *ngIf=\"sideBarComponent && screenSize >= PepScreenSizeType.MD \">\n                <pep-button class=\"back-button pep-spacing-element\" sizeType=\"md\" [iconName]=\"showSmartFilter ? 'system_filter' : 'system_info'\" \n                    [value]=\"openSideBarButtonValue\" iconPosition=\"start\" (buttonClick)=\"openSideBar();\"></pep-button>\n            </ng-container>\n            <ng-content select=\"[left-bottom-area]\">\n            </ng-content>   \n            <pep-list-total *ngIf=\"screenSize > PepScreenSizeType.SM\" class=\"pep-spacing-element\" [sizeType]=\"inline ? 'sm' : 'md'\" [totalRows]=\"totalRowCount\" [unknownCount]=\"unknownCount\">\n            </pep-list-total>            \n        </div>\n        <div *ngIf=\"!inline\" footer-end-content>\n            <ng-content select=\"[right-bottom-area]\"></ng-content>     \n        </div>\n    </pep-top-bar>\n</ng-template>\n\n<ng-template #sideBarTemplate>    \n    <pep-side-bar *ngIf=\"showSideBar\" #sideBar [ngClass]=\"{'smart-filter-area': inline}\" >\n        <div *ngIf=\"!inline && screenSize >= PepScreenSizeType.MD\" class=\"pep-spacing-element floating-side-bar-title ellipsis title-lg\" header-content>\n            <span class=\"title\" [title]=\"sideBarTitle || title\">{{ sideBarTitle || title }}</span>\n        </div> \n        <pep-smart-filters *ngIf=\"showSmartFilter\" #smartFiltersComponent [title]=\"smartFilters.title\" [fields]=\"smartFilters.fields\"\n            [filters]=\"smartFilters.data\" (filtersChange)=\"onFiltersChange($event)\">\n        </pep-smart-filters>\n    </pep-side-bar>\n</ng-template>\n\n<ng-template #breadCrumbsTemplate>\n    <pep-bread-crumbs class=\"bread-crumbs\" [items]=\"breadCrumbsItems\" [addSpacing]=\"true\" [displayType]=\"'items'\"\n        (itemClick)=\"onBreadCrumbItemClick($event)\"></pep-bread-crumbs>\n</ng-template>\n\n<ng-template #listTemplate>\n    <div *ngIf=\"showEmptyState\" class=\"list-empty-state\">\n        <div class=\"list-empty-title\">{{ listInputs.emptyState?.title }}</div>\n        <div class=\"list-empty-descr\">{{ listInputs.emptyState?.description }}</div>\n        <pep-icon name=\"leaf_skiny\" class=\"leaf-skiny\"></pep-icon>\n        <pep-icon name=\"leaf_round\" class=\"leaf-round\"></pep-icon>\n        <!-- <mat-icon class=\"leaf-skiny\">\n            <pep-icon name=\"leaf_skiny\"></pep-icon>\n        </mat-icon> -->\n        <!-- <mat-icon class=\"leaf-round\">\n            <pep-icon name=\"leaf_round\"></pep-icon>\n        </mat-icon> -->\n    </div>\n    <div *ngIf=\"!showEmptyState\" class=\"list-container\">\n        <ng-container #pepListContainer></ng-container>\n    </div>\n</ng-template>\n<pep-size-detector *ngIf=\"!onLoad\"></pep-size-detector>", styles: [":host{height:inherit;display:block}:host ::ng-deep pep-side-bar .pep-side-bar-container .mat-sidenav-container{top:0}.main-area-container{display:grid;height:inherit}.list-container{height:100%}.list-empty-state{padding-top:var(--pep-spacing-lg, 1rem);height:calc(100% - var(--pep-spacing-lg, 1rem));min-height:7rem;background:rgb(247,247,247);border-radius:var(--pep-border-radius-md, .25rem);position:relative;overflow:hidden;display:inline-flex!important;align-items:center;justify-content:center;flex-direction:column}.list-empty-state .leaf-skiny{z-index:1;height:52rem;position:absolute;left:-10rem;top:-2rem;pointer-events:none;transform:scale(1.4)}.list-empty-state .leaf-round{z-index:1;height:45rem;position:absolute;right:-13rem;top:-7rem;pointer-events:none;transform:rotate(45deg) scale(1)}.list-empty-state .list-empty-title{font-family:var(--pep-font-family-title, Nexa),-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-2xl, 1.5rem)!important;line-height:var(--pep-line-height-2xl, 1.875rem)!important;z-index:50;padding-inline:var(--pep-spacing-lg, 1rem)}.list-empty-state .list-empty-descr{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;z-index:50;padding-inline:var(--pep-spacing-lg, 1rem)}@media (max-width: 1279px){.list-empty-state .leaf-skiny{top:-5rem;left:-11rem;transform:scale(1.1)}.list-empty-state .leaf-round{right:-12rem;top:-7rem;transform:rotate(45deg) scale(.9)}}@media (max-width: 959px){.list-empty-state .leaf-round{display:none}.list-empty-state .list-empty-title,.list-empty-state .list-empty-descr{padding-inline:var(--pep-spacing-md, .75rem)}}.inline-container{height:inherit;display:grid;grid-template-rows:auto 1fr}.inline-container:not(.with-smart-filters) .header-area{grid-row:1/2}.inline-container:not(.with-smart-filters) .list-container{grid-row:2/3}.inline-container.with-smart-filters{grid-template-columns:auto 1fr}.inline-container.with-smart-filters .header-area{grid-column:2/3;grid-row:1/2}.inline-container.with-smart-filters .smart-filter-area{grid-column:1/2;grid-row:1/3}.inline-container.with-smart-filters .list-container{grid-column:2/3;grid-row:2/3}.inline-container.add-padding{padding-inline:var(--pep-spacing-lg, 1rem)}.inline-container .list-description{font-size:var(--pep-font-size-xs, .75rem);max-width:640px;padding:var(--pep-spacing-sm, .5rem) 0}.inline-container .bread-crumbs{padding:var(--pep-spacing-md, .75rem) 0 var(--pep-spacing-sm, .5rem) 0}.none-inline .list-description{font-size:var(--pep-font-size-sm, .875rem);max-width:720px;padding:var(--pep-spacing-sm, .5rem) var(--pep-spacing-xs, .25rem)}.none-inline .bread-crumbs{padding:var(--pep-spacing-md, .75rem) var(--pep-spacing-xs, .25rem) var(--pep-spacing-sm, .5rem) var(--pep-spacing-xs, .25rem)}.none-inline .floating-side-bar-title{display:inline-flex;align-items:center}.none-inline .floating-side-bar-title .title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.noDataFoundMsg{margin:1rem 0;height:calc(100% - 2rem);width:100%;background:hsla(0,0%,10%,.12);display:flex;justify-content:center;align-items:center}\n", ".list-empty-state ::ng-deep .svg-icon{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.04)}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i6.PepListActionsComponent, selector: "pep-list-actions", inputs: ["actions", "sizeType", "xPosition", "hidden"], outputs: ["actionClick", "stateChange", "menuClick"] }, { kind: "component", type: i6.PepListTotalComponent, selector: "pep-list-total", inputs: ["totalRows", "totalAmount", "isMapView", "sizeType", "unknownCount"] }, { kind: "component", type: i7.PepPageLayoutComponent, selector: "pep-page-layout", inputs: ["addPadding", "showShadow"] }, { kind: "component", type: i8.PepTopBarComponent, selector: "pep-top-bar", inputs: ["inline", "title"], outputs: ["footerStateChange"] }, { kind: "component", type: i9.PepSideBarComponent, selector: "pep-side-bar", inputs: ["position", "ignoreResize", "showHeader", "showFooter", "showToggle", "stateType", "useAsWebComponent"], outputs: ["stateChange"] }, { kind: "component", type: i10.PepSearchComponent, selector: "pep-search", inputs: ["triggerOn", "autoCompleteTop", "autoCompleteValues", "shrink", "value", "searchControl", "useAsWebComponent", "sizeType"], outputs: ["search", "autocompleteChange", "stateChange"] }, { kind: "component", type: i11.PepBreadCrumbsComponent, selector: "pep-bread-crumbs", inputs: ["items", "displayType", "addSpacing"], outputs: ["itemClick"] }, { kind: "component", type: i1$2.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i13.PepSmartFiltersComponent, selector: "pep-smart-filters", inputs: ["title", "filters", "fields", "useAsWebComponent"], outputs: ["filtersChange", "fieldToggleChange"] }, { kind: "component", type: i14.PepSizeDetectorComponent, selector: "pep-size-detector", inputs: ["showScreenSize", "useAsWebComponent"], outputs: ["sizeChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GenericListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pep-generic-list', providers: [PepGenericListService], template: "<div *ngIf=\"inline\" class=\"inline-container\" [ngClass]=\"{ 'add-padding': addPadding, 'with-smart-filters': showSmartFilter }\">\n    <div class=\"header-area\" >\n        <div *ngIf=\"showTopBar\" class=\"inline-top-bar-container\">\n            <ng-container *ngTemplateOutlet=\"topBarTemplate\"></ng-container>\n        </div>\n        <ng-container *ngIf=\"description\">\n            <div class=\"list-description\">{{description}}</div>\n        </ng-container>\n        <ng-container *ngIf=\"breadCrumbsItems.length\">\n            <ng-container *ngTemplateOutlet=\"breadCrumbsTemplate\"></ng-container>\n        </ng-container>\n    </div>\n    <ng-container *ngIf=\"showSmartFilter\">\n        <ng-container *ngTemplateOutlet=\"smartFilterTemplate\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!onLoad\">\n        <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n    </ng-container>\n</div>\n<pep-page-layout *ngIf=\"!inline\" class=\"none-inline\" [addPadding]=\"addPadding\" [showShadow]=\"showSmartFilter\">\n    <ng-container *ngIf=\"showSmartFilter\" pep-side-area>\n        <ng-container *ngTemplateOutlet=\"smartFilterTemplate\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"showTopBar\" pep-top-area>\n        <ng-container *ngTemplateOutlet=\"topBarTemplate\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"description\" pep-top-area>\n        <div class=\"list-description\">{{description}}</div>\n    </ng-container>\n    <ng-container *ngIf=\"breadCrumbsItems.length\" pep-top-area>\n        <ng-container *ngTemplateOutlet=\"breadCrumbsTemplate\"></ng-container>\n    </ng-container>\n    <div *ngIf=\"!onLoad\" pep-main-area class=\"main-area-container\">\n        <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n    </div>\n</pep-page-layout>\n\n<ng-template #topBarTemplate>\n    <pep-top-bar [title]=\"title\" [inline]=\"inline\">\n        <div header-start-content>\n            <ng-content select=\"[left-buttons]\"></ng-content>\n        </div>\n        <div header-end-content>\n            <ng-content select=\"[right-buttons]\"></ng-content>\n        </div>\n        <!-- <div footer-start-content>\n            <ng-content select=\"[left-bottom-area]\"></ng-content>               \n        </div>\n        <div footer-end-content>\n            <ng-content select=\"[right-bottom-area]\"></ng-content>     \n        </div> -->\n        <pep-list-actions *ngIf=\"menuActions.length > 0\" [sizeType]=\"inline ? 'sm' : 'md'\" [actions]=\"menuActions\"\n            (actionClick)=\"onActionItemClicked($event)\"></pep-list-actions>\n        <pep-list-total [sizeType]=\"inline ? 'sm' : 'md'\" [totalRows]=\"totalRowCount\" [unknownCount]=\"unknownCount\">\n        </pep-list-total>\n        <pep-search #search *ngIf=\"showSearch\" [value]=\"searchString\" [sizeType]=\"inline ? 'sm' : 'md'\"\n            (search)=\"onSearchChanged($event)\">\n        </pep-search>\n    </pep-top-bar>\n</ng-template>\n\n<ng-template #smartFilterTemplate>    \n    <pep-side-bar #sideNav [ngClass]=\"{'smart-filter-area': inline}\"> \n        <pep-smart-filters #smartFiltersComponent [title]=\"smartFilters.title\" [fields]=\"smartFilters.fields\"\n            [filters]=\"smartFilters.data\" (filtersChange)=\"onFiltersChange($event)\">\n        </pep-smart-filters>\n    </pep-side-bar>\n</ng-template>\n\n<ng-template #breadCrumbsTemplate>\n    <pep-bread-crumbs class=\"bread-crumbs\" [items]=\"breadCrumbsItems\" [addSpacing]=\"true\" [displayType]=\"'items'\"\n        (itemClick)=\"onBreadCrumbItemClick($event)\"></pep-bread-crumbs>\n</ng-template>\n\n<ng-template #listTemplate>\n    <div *ngIf=\"showEmptyState\" class=\"list-empty-state\">\n        <div class=\"list-empty-title\">{{ listInputs.emptyState.title }}</div>\n        <div class=\"list-empty-descr\">{{ listInputs.emptyState.description }}</div>\n        <pep-icon name=\"leaf_skiny\" class=\"leaf-skiny\"></pep-icon>\n        <pep-icon name=\"leaf_round\" class=\"leaf-round\"></pep-icon>\n        <!-- <mat-icon class=\"leaf-skiny\">\n            <pep-icon name=\"leaf_skiny\"></pep-icon>\n        </mat-icon> -->\n        <!-- <mat-icon class=\"leaf-round\">\n            <pep-icon name=\"leaf_round\"></pep-icon>\n        </mat-icon> -->\n    </div>\n    <div *ngIf=\"!showEmptyState\" class=\"list-container\">\n        <ng-container #pepListContainer></ng-container>\n    </div>\n</ng-template>", styles: [":host{height:inherit;display:block}.main-area-container{display:grid;height:inherit}.list-container{height:100%}.list-empty-state{padding-top:var(--pep-spacing-lg, 1rem);height:calc(100% - var(--pep-spacing-lg, 1rem));background:rgb(247,247,247);border-radius:var(--pep-border-radius-md, .25rem);position:relative;overflow:hidden;display:inline-flex!important;align-items:center;justify-content:center;flex-direction:column}.list-empty-state .leaf-skiny{z-index:1;height:52rem;position:absolute;left:-10rem;top:-2rem;pointer-events:none;transform:scale(1.4)}.list-empty-state .leaf-round{z-index:1;height:45rem;position:absolute;right:-13rem;top:-7rem;pointer-events:none;transform:rotate(45deg) scale(1)}.list-empty-state .list-empty-title{font-family:var(--pep-font-family-title, Nexa),-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-2xl, 1.5rem)!important;line-height:var(--pep-line-height-2xl, 1.875rem)!important;z-index:50;padding-inline:var(--pep-spacing-lg, 1rem)}.list-empty-state .list-empty-descr{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;z-index:50;padding-inline:var(--pep-spacing-lg, 1rem)}@media (max-width: 1279px){.list-empty-state .leaf-skiny{top:-5rem;left:-11rem;transform:scale(1.1)}.list-empty-state .leaf-round{right:-12rem;top:-7rem;transform:rotate(45deg) scale(.9)}}@media (max-width: 959px){.list-empty-state .leaf-round{display:none}.list-empty-state .list-empty-title,.list-empty-state .list-empty-descr{padding-inline:var(--pep-spacing-md, .75rem)}}.inline-container{height:inherit;display:grid;grid-template-rows:auto 1fr}.inline-container:not(.with-smart-filters) .header-area{grid-row:1/2}.inline-container:not(.with-smart-filters) .list-container{grid-row:2/3}.inline-container.with-smart-filters{grid-template-columns:auto 1fr}.inline-container.with-smart-filters .header-area{grid-column:2/3;grid-row:1/2}.inline-container.with-smart-filters .smart-filter-area{grid-column:1/2;grid-row:1/3}.inline-container.with-smart-filters .list-container{grid-column:2/3;grid-row:2/3}.inline-container.add-padding{padding-inline:var(--pep-spacing-lg, 1rem)}.inline-container .list-description{font-size:var(--pep-font-size-xs, .75rem);max-width:640px;padding:var(--pep-spacing-sm, .5rem) 0}.inline-container .bread-crumbs{padding:var(--pep-spacing-md, .75rem) 0 var(--pep-spacing-sm, .5rem) 0}.none-inline .list-description{font-size:var(--pep-font-size-sm, .875rem);max-width:720px;padding:var(--pep-spacing-sm, .5rem) var(--pep-spacing-xs, .25rem)}.none-inline .bread-crumbs{padding:var(--pep-spacing-md, .75rem) var(--pep-spacing-xs, .25rem) var(--pep-spacing-sm, .5rem) var(--pep-spacing-xs, .25rem)}.noDataFoundMsg{margin:1rem 0;height:calc(100% - 2rem);width:100%;background:hsla(0deg,0%,10%,.12);display:flex;justify-content:center;align-items:center}\n", ".list-empty-state ::ng-deep .svg-icon{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.04)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.PepDataConvertorService }, { type: i1$1.PepLayoutService }, { type: i1$1.PepLoaderService }, { type: i1.TranslateService }, { type: PepGenericListService }, { type: i1$1.PepSessionService }]; }, propDecorators: { search: [{
+            args: [{ selector: 'pep-generic-list', providers: [PepGenericListService], template: "<div *ngIf=\"inline\" class=\"inline-container\" [ngClass]=\"{ 'add-padding': addPadding, 'with-smart-filters': showSmartFilter }\">\n    <div class=\"header-area\" >\n        <div *ngIf=\"showTopBar\" class=\"inline-top-bar-container\">\n            <ng-container *ngTemplateOutlet=\"topBarTemplate\"></ng-container>\n        </div>\n        <ng-container *ngIf=\"description\">\n            <div class=\"list-description\">{{description}}</div>\n        </ng-container>\n        <ng-container *ngIf=\"breadCrumbsItems.length\">\n            <ng-container *ngTemplateOutlet=\"breadCrumbsTemplate\"></ng-container>\n        </ng-container>\n    </div>\n    <ng-container>\n        <ng-container *ngTemplateOutlet=\"sideBarTemplate\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!onLoad\">\n        <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n    </ng-container>\n</div>\n<pep-page-layout *ngIf=\"!inline\" class=\"none-inline\" [addPadding]=\"addPadding\" [showShadow]=\"showSmartFilter\">\n    <ng-container pep-side-area>\n        <ng-container *ngTemplateOutlet=\"sideBarTemplate\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"showTopBar\" pep-top-area>\n        <ng-container *ngTemplateOutlet=\"topBarTemplate\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"description\" pep-top-area>\n        <div class=\"list-description\">{{description}}</div>\n    </ng-container>\n    <ng-container *ngIf=\"breadCrumbsItems.length\" pep-top-area>\n        <ng-container *ngTemplateOutlet=\"breadCrumbsTemplate\"></ng-container>\n    </ng-container>\n    <div *ngIf=\"!onLoad\" pep-main-area class=\"main-area-container\">\n        <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n    </div>\n</pep-page-layout>\n\n<ng-template #topBarTemplate>\n    <pep-top-bar [title]=\"searchOpenOnSmallDevice ? '' : title\" [inline]=\"inline\">\n        <div *ngIf=\"!searchOpenOnSmallDevice\" header-start-content>\n            <ng-content select=\"[left-buttons]\"></ng-content>\n        </div>\n        <div *ngIf=\"!searchOpenOnSmallDevice\" header-end-content>\n            <ng-content select=\"[right-buttons]\"></ng-content>\n        </div>\n        <pep-list-actions *ngIf=\"!searchOpenOnSmallDevice && menuActions.length > 0 && !showEmptyState\" [sizeType]=\"inline ? 'sm' : 'md'\" [actions]=\"menuActions\"\n            (actionClick)=\"onActionItemClicked($event)\"></pep-list-actions>\n        <pep-list-total *ngIf=\"!searchOpenOnSmallDevice && screenSize <= PepScreenSizeType.SM\" [sizeType]=\"inline ? 'sm' : 'md'\" [totalRows]=\"totalRowCount\" [unknownCount]=\"unknownCount\">\n        </pep-list-total>\n        <pep-search #search *ngIf=\"showSearch\" [value]=\"searchString\" [sizeType]=\"inline ? 'sm' : 'md'\"\n            (search)=\"onSearchChanged($event)\" (stateChange)=\"onSearchStateChange($event)\">\n        </pep-search>\n        <div *ngIf=\"!inline\" class=\"pep-spacing-element-negative\" footer-start-content>\n            <ng-container *ngIf=\"sideBarComponent && screenSize >= PepScreenSizeType.MD \">\n                <pep-button class=\"back-button pep-spacing-element\" sizeType=\"md\" [iconName]=\"showSmartFilter ? 'system_filter' : 'system_info'\" \n                    [value]=\"openSideBarButtonValue\" iconPosition=\"start\" (buttonClick)=\"openSideBar();\"></pep-button>\n            </ng-container>\n            <ng-content select=\"[left-bottom-area]\">\n            </ng-content>   \n            <pep-list-total *ngIf=\"screenSize > PepScreenSizeType.SM\" class=\"pep-spacing-element\" [sizeType]=\"inline ? 'sm' : 'md'\" [totalRows]=\"totalRowCount\" [unknownCount]=\"unknownCount\">\n            </pep-list-total>            \n        </div>\n        <div *ngIf=\"!inline\" footer-end-content>\n            <ng-content select=\"[right-bottom-area]\"></ng-content>     \n        </div>\n    </pep-top-bar>\n</ng-template>\n\n<ng-template #sideBarTemplate>    \n    <pep-side-bar *ngIf=\"showSideBar\" #sideBar [ngClass]=\"{'smart-filter-area': inline}\" >\n        <div *ngIf=\"!inline && screenSize >= PepScreenSizeType.MD\" class=\"pep-spacing-element floating-side-bar-title ellipsis title-lg\" header-content>\n            <span class=\"title\" [title]=\"sideBarTitle || title\">{{ sideBarTitle || title }}</span>\n        </div> \n        <pep-smart-filters *ngIf=\"showSmartFilter\" #smartFiltersComponent [title]=\"smartFilters.title\" [fields]=\"smartFilters.fields\"\n            [filters]=\"smartFilters.data\" (filtersChange)=\"onFiltersChange($event)\">\n        </pep-smart-filters>\n    </pep-side-bar>\n</ng-template>\n\n<ng-template #breadCrumbsTemplate>\n    <pep-bread-crumbs class=\"bread-crumbs\" [items]=\"breadCrumbsItems\" [addSpacing]=\"true\" [displayType]=\"'items'\"\n        (itemClick)=\"onBreadCrumbItemClick($event)\"></pep-bread-crumbs>\n</ng-template>\n\n<ng-template #listTemplate>\n    <div *ngIf=\"showEmptyState\" class=\"list-empty-state\">\n        <div class=\"list-empty-title\">{{ listInputs.emptyState?.title }}</div>\n        <div class=\"list-empty-descr\">{{ listInputs.emptyState?.description }}</div>\n        <pep-icon name=\"leaf_skiny\" class=\"leaf-skiny\"></pep-icon>\n        <pep-icon name=\"leaf_round\" class=\"leaf-round\"></pep-icon>\n        <!-- <mat-icon class=\"leaf-skiny\">\n            <pep-icon name=\"leaf_skiny\"></pep-icon>\n        </mat-icon> -->\n        <!-- <mat-icon class=\"leaf-round\">\n            <pep-icon name=\"leaf_round\"></pep-icon>\n        </mat-icon> -->\n    </div>\n    <div *ngIf=\"!showEmptyState\" class=\"list-container\">\n        <ng-container #pepListContainer></ng-container>\n    </div>\n</ng-template>\n<pep-size-detector *ngIf=\"!onLoad\"></pep-size-detector>", styles: [":host{height:inherit;display:block}:host ::ng-deep pep-side-bar .pep-side-bar-container .mat-sidenav-container{top:0}.main-area-container{display:grid;height:inherit}.list-container{height:100%}.list-empty-state{padding-top:var(--pep-spacing-lg, 1rem);height:calc(100% - var(--pep-spacing-lg, 1rem));min-height:7rem;background:rgb(247,247,247);border-radius:var(--pep-border-radius-md, .25rem);position:relative;overflow:hidden;display:inline-flex!important;align-items:center;justify-content:center;flex-direction:column}.list-empty-state .leaf-skiny{z-index:1;height:52rem;position:absolute;left:-10rem;top:-2rem;pointer-events:none;transform:scale(1.4)}.list-empty-state .leaf-round{z-index:1;height:45rem;position:absolute;right:-13rem;top:-7rem;pointer-events:none;transform:rotate(45deg) scale(1)}.list-empty-state .list-empty-title{font-family:var(--pep-font-family-title, Nexa),-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-2xl, 1.5rem)!important;line-height:var(--pep-line-height-2xl, 1.875rem)!important;z-index:50;padding-inline:var(--pep-spacing-lg, 1rem)}.list-empty-state .list-empty-descr{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;z-index:50;padding-inline:var(--pep-spacing-lg, 1rem)}@media (max-width: 1279px){.list-empty-state .leaf-skiny{top:-5rem;left:-11rem;transform:scale(1.1)}.list-empty-state .leaf-round{right:-12rem;top:-7rem;transform:rotate(45deg) scale(.9)}}@media (max-width: 959px){.list-empty-state .leaf-round{display:none}.list-empty-state .list-empty-title,.list-empty-state .list-empty-descr{padding-inline:var(--pep-spacing-md, .75rem)}}.inline-container{height:inherit;display:grid;grid-template-rows:auto 1fr}.inline-container:not(.with-smart-filters) .header-area{grid-row:1/2}.inline-container:not(.with-smart-filters) .list-container{grid-row:2/3}.inline-container.with-smart-filters{grid-template-columns:auto 1fr}.inline-container.with-smart-filters .header-area{grid-column:2/3;grid-row:1/2}.inline-container.with-smart-filters .smart-filter-area{grid-column:1/2;grid-row:1/3}.inline-container.with-smart-filters .list-container{grid-column:2/3;grid-row:2/3}.inline-container.add-padding{padding-inline:var(--pep-spacing-lg, 1rem)}.inline-container .list-description{font-size:var(--pep-font-size-xs, .75rem);max-width:640px;padding:var(--pep-spacing-sm, .5rem) 0}.inline-container .bread-crumbs{padding:var(--pep-spacing-md, .75rem) 0 var(--pep-spacing-sm, .5rem) 0}.none-inline .list-description{font-size:var(--pep-font-size-sm, .875rem);max-width:720px;padding:var(--pep-spacing-sm, .5rem) var(--pep-spacing-xs, .25rem)}.none-inline .bread-crumbs{padding:var(--pep-spacing-md, .75rem) var(--pep-spacing-xs, .25rem) var(--pep-spacing-sm, .5rem) var(--pep-spacing-xs, .25rem)}.none-inline .floating-side-bar-title{display:inline-flex;align-items:center}.none-inline .floating-side-bar-title .title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.noDataFoundMsg{margin:1rem 0;height:calc(100% - 2rem);width:100%;background:hsla(0,0%,10%,.12);display:flex;justify-content:center;align-items:center}\n", ".list-empty-state ::ng-deep .svg-icon{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.04)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.PepDataConvertorService }, { type: i1$1.PepLayoutService }, { type: i1$1.PepLoaderService }, { type: i1.TranslateService }, { type: PepGenericListService }, { type: i1$1.PepSessionService }, { type: i1$1.PepCustomizationService }]; }, propDecorators: { search: [{
                 type: ViewChild,
                 args: ['search']
             }], smartFiltersComponent: [{
                 type: ViewChild,
                 args: ['smartFiltersComponent']
+            }], sideBarComponent: [{
+                type: ViewChild,
+                args: ['sideBar']
             }], pepListContainer: [{
                 type: ViewChild,
                 args: ['pepListContainer', { read: ViewContainerRef }]
@@ -626,6 +702,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Input
             }], title: [{
                 type: Input
+            }], sideBarTitle: [{
+                type: Input
             }], description: [{
                 type: Input
             }], inline: [{
@@ -668,6 +746,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Input
             }], unknownCount: [{
                 type: Input
+            }], itemClick: [{
+                type: Output
             }], fieldClick: [{
                 type: Output
             }], valueChange: [{
@@ -682,7 +762,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
 
 const pepIcons = [
     pepIconLeafRound,
-    pepIconLeafSkiny, pepIconSystemView
+    pepIconLeafSkiny, pepIconSystemView, pepIconSystemFilter, pepIconSystemInfo
 ];
 /*
 export function appInitializerFactory(translate: TranslateService) {
@@ -697,10 +777,11 @@ class PepGenericListModule {
         this.pepIconRegistry.registerIcons(pepIcons);
     }
 }
-PepGenericListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGenericListModule, deps: [{ token: i1$2.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
-PepGenericListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepGenericListModule, declarations: [GenericListComponent], imports: [CommonModule,
+PepGenericListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepGenericListModule, deps: [{ token: i1$2.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
+PepGenericListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: PepGenericListModule, declarations: [GenericListComponent], imports: [CommonModule,
         PepNgxLibModule,
         MatIconModule,
+        PepButtonModule,
         PepListModule,
         PepFormModule,
         PepMenuModule,
@@ -710,8 +791,9 @@ PepGenericListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ve
         PepSearchModule,
         PepBreadCrumbsModule,
         PepIconModule,
-        PepSmartFiltersModule], exports: [GenericListComponent] });
-PepGenericListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGenericListModule, providers: [
+        PepSmartFiltersModule,
+        PepSizeDetectorModule], exports: [GenericListComponent] });
+PepGenericListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepGenericListModule, providers: [
         PepGenericListService,
         /*{
             provide: APP_INITIALIZER,
@@ -722,6 +804,7 @@ PepGenericListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ve
     ], imports: [CommonModule,
         PepNgxLibModule,
         MatIconModule,
+        PepButtonModule,
         PepListModule,
         PepFormModule,
         PepMenuModule,
@@ -731,8 +814,9 @@ PepGenericListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ve
         PepSearchModule,
         PepBreadCrumbsModule,
         PepIconModule,
-        PepSmartFiltersModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGenericListModule, decorators: [{
+        PepSmartFiltersModule,
+        PepSizeDetectorModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepGenericListModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -742,6 +826,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                         CommonModule,
                         PepNgxLibModule,
                         MatIconModule,
+                        PepButtonModule,
                         PepListModule,
                         PepFormModule,
                         PepMenuModule,
@@ -751,7 +836,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                         PepSearchModule,
                         PepBreadCrumbsModule,
                         PepIconModule,
-                        PepSmartFiltersModule
+                        PepSmartFiltersModule,
+                        PepSizeDetectorModule
                     ],
                     exports: [
                         GenericListComponent