@pepperi-addons/ngx-composite-lib 0.4.1-beta.12 → 0.4.1-beta.13

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

@@ -30,670 +30,670 @@ import { MatIconModule } from '@angular/material/icon';
 import { PepFormModule } from '@pepperi-addons/ngx-lib/form';
 import { PepMenuModule } from '@pepperi-addons/ngx-lib/menu';
 
-class PepGenericListService {
-    constructor(_translate, _queryBuilderService) {
-        this._translate = _translate;
-        this._queryBuilderService = _queryBuilderService;
-        //
-    }
-    /**
-   * checks if the object contains property
-   * @param obj object
-   * @param prop property name
-   * @returns true if contains, false otherwise
-   */
-    hasProperty(obj, prop) {
-        return Object.prototype.hasOwnProperty.call(obj, prop);
-    }
-    getListViewType(dataViewType) {
-        switch (dataViewType) {
-            case 'Grid':
-                return 'table';
-            case 'Card':
-                return 'cards';
-            case 'Line':
-                return 'lines';
-            default:
-                return 'table';
-        }
-    }
-    convertToPepRowData(item, dataView, uuidMapping) {
-        const row = new PepRowData();
-        let itemFields;
-        if (this.hasProperty(item, 'fields') && typeof item.fields === 'object') {
-            itemFields = item.fields;
-            if (item.isEditable === false) {
-                row.IsEditable = false;
-            }
-            if (item.isSelectableForActions === false) {
-                row.IsSelectableForActions = false;
-            }
-            if (item.isEditable && item.isSelectableForActions && item.isSelected) {
-                row.IsSelected = true;
-            }
-        }
-        else {
-            itemFields = item;
-        }
-        row.UUID = itemFields[uuidMapping] || undefined;
-        row.Fields = [];
-        if (dataView?.Fields && dataView.Columns) {
-            for (let index = 0; index < dataView.Fields.length; index++) {
-                const field = dataView.Fields[index];
-                row.Fields.push({
-                    ApiName: field.FieldID,
-                    Title: field.Title ? this._translate.instant(field.Title) : '',
-                    XAlignment: 1,
-                    FormattedValue: (itemFields[field.FieldID] || '').toString(),
-                    Value: (itemFields[field.FieldID] || '').toString(),
-                    ColumnWidth: dataView.Columns[index]?.Width || undefined,
-                    AdditionalValue: '',
-                    OptionalValues: field.OptionalValues || [],
-                    FieldType: DataViewFieldTypes[field.Type],
-                    ReadOnly: field.ReadOnly,
-                    Enabled: !field.ReadOnly
-                });
-            }
-        }
-        return row;
-    }
-    convertToUiControlField(field) {
-        return {
-            ApiName: field.ApiName,
-            FieldType: field.FieldType,
-            Title: field.Title,
-            ReadOnly: field.ReadOnlyField,
-            ColumnWidth: field.ColumnWidth,
-            ColumnWidthType: 1,
-            Layout: {
-                X: field.Layout.X,
-                Y: field.Layout.Y,
-                Width: field.Layout.Width,
-                Height: field.Layout.Field_Height,
-                XAlignment: field.Layout.xAlignment,
-                YAlignment: field.Layout.yAlignment,
-            }
-        };
-    }
-    convertToSmartFilter(smartFilter) {
-        let convertedFields = [];
-        let filterData = [];
-        if (smartFilter?.dataView) {
-            convertedFields = this.createSmartFilterFields(smartFilter.dataView);
-            if (smartFilter.data?.length) {
-                filterData = smartFilter.data;
-            }
-        }
-        return {
-            fields: convertedFields,
-            data: filterData
-        };
-    }
-    createSmartFilterFields(dataView) {
-        let smartFields = [];
-        const fields = dataView.Fields.map((field) => {
-            return {
-                FieldID: field.FieldID,
-                FieldType: field.Type,
-                Title: field.Title,
-                OptionalValues: field.OptionalValues
-            };
-        });
-        const smartFilterfields = this._queryBuilderService.convertToSmartFilterFields(fields);
-        if (smartFilterfields?.length) {
-            smartFields = smartFilterfields.map((field => field.smart));
-        }
-        return smartFields;
-    }
-    getSelectedItems(items) {
-        let selectedItems = [];
-        for (let i = 0; i < items.length; i++) {
-            if (items[i].IsSelected) {
-                selectedItems.push(items[i].UID);
-            }
-        }
-        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: [{
-            type: Injectable
+class PepGenericListService {
+    constructor(_translate, _queryBuilderService) {
+        this._translate = _translate;
+        this._queryBuilderService = _queryBuilderService;
+        //
+    }
+    /**
+   * checks if the object contains property
+   * @param obj object
+   * @param prop property name
+   * @returns true if contains, false otherwise
+   */
+    hasProperty(obj, prop) {
+        return Object.prototype.hasOwnProperty.call(obj, prop);
+    }
+    getListViewType(dataViewType) {
+        switch (dataViewType) {
+            case 'Grid':
+                return 'table';
+            case 'Card':
+                return 'cards';
+            case 'Line':
+                return 'lines';
+            default:
+                return 'table';
+        }
+    }
+    convertToPepRowData(item, dataView, uuidMapping) {
+        const row = new PepRowData();
+        let itemFields;
+        if (this.hasProperty(item, 'fields') && typeof item.fields === 'object') {
+            itemFields = item.fields;
+            if (item.isEditable === false) {
+                row.IsEditable = false;
+            }
+            if (item.isSelectableForActions === false) {
+                row.IsSelectableForActions = false;
+            }
+            if (item.isEditable && item.isSelectableForActions && item.isSelected) {
+                row.IsSelected = true;
+            }
+        }
+        else {
+            itemFields = item;
+        }
+        row.UUID = itemFields[uuidMapping] || undefined;
+        row.Fields = [];
+        if (dataView?.Fields && dataView.Columns) {
+            for (let index = 0; index < dataView.Fields.length; index++) {
+                const field = dataView.Fields[index];
+                row.Fields.push({
+                    ApiName: field.FieldID,
+                    Title: field.Title ? this._translate.instant(field.Title) : '',
+                    XAlignment: 1,
+                    FormattedValue: (itemFields[field.FieldID] || '').toString(),
+                    Value: (itemFields[field.FieldID] || '').toString(),
+                    ColumnWidth: dataView.Columns[index]?.Width || undefined,
+                    AdditionalValue: '',
+                    OptionalValues: field.OptionalValues || [],
+                    FieldType: DataViewFieldTypes[field.Type],
+                    ReadOnly: field.ReadOnly,
+                    Enabled: !field.ReadOnly
+                });
+            }
+        }
+        return row;
+    }
+    convertToUiControlField(field) {
+        return {
+            ApiName: field.ApiName,
+            FieldType: field.FieldType,
+            Title: field.Title,
+            ReadOnly: field.ReadOnlyField,
+            ColumnWidth: field.ColumnWidth,
+            ColumnWidthType: 1,
+            Layout: {
+                X: field.Layout.X,
+                Y: field.Layout.Y,
+                Width: field.Layout.Width,
+                Height: field.Layout.Field_Height,
+                XAlignment: field.Layout.xAlignment,
+                YAlignment: field.Layout.yAlignment,
+            }
+        };
+    }
+    convertToSmartFilter(smartFilter) {
+        let convertedFields = [];
+        let filterData = [];
+        if (smartFilter?.dataView) {
+            convertedFields = this.createSmartFilterFields(smartFilter.dataView);
+            if (smartFilter.data?.length) {
+                filterData = smartFilter.data;
+            }
+        }
+        return {
+            fields: convertedFields,
+            data: filterData
+        };
+    }
+    createSmartFilterFields(dataView) {
+        let smartFields = [];
+        const fields = dataView.Fields.map((field) => {
+            return {
+                FieldID: field.FieldID,
+                FieldType: field.Type,
+                Title: field.Title,
+                OptionalValues: field.OptionalValues
+            };
+        });
+        const smartFilterfields = this._queryBuilderService.convertToSmartFilterFields(fields);
+        if (smartFilterfields?.length) {
+            smartFields = smartFilterfields.map((field => field.smart));
+        }
+        return smartFields;
+    }
+    getSelectedItems(items) {
+        let selectedItems = [];
+        for (let i = 0; i < items.length; i++) {
+            if (items[i].IsSelected) {
+                selectedItems.push(items[i].UID);
+            }
+        }
+        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: [{
+            type: Injectable
         }], ctorParameters: function () { return [{ type: i1.TranslateService }, { type: i2.PepQueryBuilderService }]; } });
 
-class GenericListComponent {
-    constructor(_dataConvertorService, _layoutService, _loaderService, _translate, _genericListService) {
-        this._dataConvertorService = _dataConvertorService;
-        this._layoutService = _layoutService;
-        this._loaderService = _loaderService;
-        this._translate = _translate;
-        this._genericListService = _genericListService;
-        this._dataSource = {
-            init: async (params) => {
-                return {
-                    dataView: {
-                        Type: 'Grid'
-                    },
-                    totalCount: -1,
-                    items: []
-                };
-            }
-        };
-        this.actions = {
-            get: async (data) => {
-                return [];
-            }
-        };
-        this.uuidMapping = 'key';
-        this.disabled = false;
-        this.addPadding = false;
-        this.title = '';
-        this.description = '';
-        this.inline = false;
-        this.showSearch = false;
-        this.noDataFoundMsg = '';
-        this.selectionType = 'multi';
-        this.supportSorting = false;
-        this.pager = {
-            type: 'scroll'
-        };
-        this.tableViewType = 'regular';
-        this.zebraStripes = false;
-        this.showTopBar = false;
-        this.breadCrumbsItems = new Array();
-        this.fieldClick = new EventEmitter();
-        this.valueChange = new EventEmitter();
-        this.breadCrumbItemClick = new EventEmitter();
-        this._resize$ = new Subscription();
-        this._loader$ = new Subscription();
-        this._dataView = {
-            Type: 'Grid'
-        };
-        this.onLoad = true;
-        this.totalRowCount = -1;
-        this.searchString = '';
-        this.showSmartFilter = false;
-        this.showEmptyState = false;
-        this.internalSmartFilter = {
-            fields: [],
-            data: []
-        };
-        this._appliedFilters = [];
-        this._sorting = undefined;
-        this.menuHandlers = {};
-        this.menuActions = [];
-        this._resize$ = this._layoutService.onResize$.pipe().subscribe((size) => {
-            //            
-        });
-        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.initList();
-    }
-    set smartFilter(val) {
-        this.internalSmartFilter = this._genericListService.convertToSmartFilter(val);
-        this.showSmartFilter = this.internalSmartFilter.fields.length > 0;
-    }
-    set pepList(val) {
-        this._pepList = val;
-    }
-    get pepList() {
-        return this._pepList;
-    }
-    ngOnInit() {
-        //
-    }
-    async initList() {
-        this.onLoad = true;
-        setTimeout(async () => {
-            if (this._dataSource) {
-                //merge selector inputs with callback inputs
-                this.loadTableInputs();
-                let fromIndex = 0;
-                let toIndex = 0;
-                if (this.listInputs.pager.type === 'pages') {
-                    fromIndex = this.listInputs.pager.size * this.listInputs.pager.index;
-                    toIndex = fromIndex + (this.listInputs.pager.size || DEFAULT_PAGE_SIZE) - 1;
-                }
-                else {
-                    toIndex = 100; //TO DO - get value from - this.customList.getTopItems()
-                }
-                const data = await this.loadData(fromIndex, toIndex);
-                this.totalRowCount = data?.length || 0;
-                if (this.listInputs?.emptyState?.show === true) {
-                    this.setEmptyState();
-                }
-                this.onLoad = false;
-                //show empty state
-                if (this.showEmptyState) {
-                    if (!this.listInputs.emptyState.title) {
-                        this.listInputs.emptyState.title = this._translate.instant('GENERIC_LIST.EMPTY_STATE.TITLE');
-                    }
-                    if (!this.listInputs.emptyState.description) {
-                        this.listInputs.emptyState.description = this._translate.instant('GENERIC_LIST.EMPTY_STATE.DESCRIPTION');
-                    }
-                    return;
-                }
-                setTimeout(async () => {
-                    if (this._pepListContainer) {
-                        if (this._pepListContainer.length > 0) {
-                            this._pepListContainer.remove();
-                        }
-                        const { PepListComponent } = await import('@pepperi-addons/ngx-lib/list');
-                        const componentRef = this._pepListContainer.createComponent(PepListComponent);
-                        this.pepList = componentRef.instance;
-                        componentRef.instance.viewType = this._genericListService.getListViewType(this._dataView.Type);
-                        componentRef.instance.tableViewType = this.listInputs.tableViewType;
-                        componentRef.instance.zebraStripes = this.listInputs.zebraStripes;
-                        if (this.disabled) {
-                            componentRef.instance.disabled = true;
-                            componentRef.instance.lockItemInnerEvents = true;
-                        }
-                        componentRef.instance.supportSorting = this.listInputs.supportSorting;
-                        componentRef.instance.selectionTypeForActions = this.listInputs.selectionType;
-                        componentRef.instance.showCardSelection = this.listInputs.selectionType !== 'none';
-                        componentRef.instance.pagerType = this.listInputs.pager.type;
-                        if (this.listInputs.pager.type === 'pages') {
-                            componentRef.instance.pageSize = this.listInputs.pager?.size || DEFAULT_PAGE_SIZE;
-                            componentRef.instance.pageIndex = this.listInputs.pager?.index || 0;
-                        }
-                        componentRef.instance.noDataFoundMsg = this.listInputs.noDataFoundMsg;
-                        componentRef.instance.fieldClick.subscribe(($event) => {
-                            this.onCustomizeFieldClick($event);
-                        });
-                        componentRef.instance.selectedItemsChange.subscribe(($event) => {
-                            this.onSelectedItemsChanged($event);
-                        });
-                        componentRef.instance.loadItems.subscribe(($event) => {
-                            this.onLoadItems($event);
-                        });
-                        componentRef.instance.loadPage.subscribe(($event) => {
-                            this.onLoadPage($event);
-                        });
-                        componentRef.instance.valueChange.subscribe(($event) => {
-                            this.onValueChanged($event);
-                        });
-                        componentRef.instance.sortingChange.subscribe(($event) => {
-                            this.onSortingChange($event);
-                        });
-                        let convertedList = [];
-                        if (data) {
-                            if (data?.length) {
-                                convertedList = this._dataConvertorService.convertListData(data);
-                            }
-                            const uiControl = this.getUiControl(DataViewConverter.toUIControlData(this._dataView));
-                            const selectedItems = this._genericListService.getSelectedItems(convertedList);
-                            if (selectedItems?.length) {
-                                componentRef.instance.setSelectedIds(selectedItems);
-                            }
-                            componentRef.instance.initListData(uiControl, convertedList.length, convertedList);
-                        }
-                    }
-                }, 0);
-            }
-        }, 0);
-    }
-    /**
-     * loads inputs in case they are provided and merge with selector inputs
-     * @returns merged pep-list inputs
-     */
-    loadTableInputs() {
-        this.listInputs = {
-            supportSorting: this.supportSorting,
-            selectionType: this.selectionType,
-            pager: this.pager,
-            noDataFoundMsg: this.noDataFoundMsg,
-            tableViewType: this.tableViewType,
-            zebraStripes: this.zebraStripes,
-            emptyState: this.emptyState
-        };
-        if (this._dataSource.inputs) {
-            Object.entries(this._dataSource.inputs).forEach((item) => {
-                if (this._genericListService.hasProperty(this.listInputs, item[0])) {
-                    this.listInputs[item[0]] = item[1];
-                }
-            });
-        }
-    }
-    /**
-     * detemines whether empty state is to be displayed
-     */
-    setEmptyState() {
-        this.showEmptyState = this.totalRowCount === 0 &&
-            this.searchString === '' &&
-            this._appliedFilters.length === 0;
-    }
-    getUiControl(data) {
-        const uiControl = new UIControl();
-        uiControl.ControlFields = [];
-        if (data?.ControlFields) {
-            uiControl.ControlFields = data.ControlFields.map((field) => this._genericListService.convertToUiControlField(field));
-        }
-        return uiControl;
-    }
-    loadMenuItems() {
-        if (this.listInputs.selectionType !== 'none') {
-            this.getMenuActions().then(x => this.menuActions = x);
-        }
-    }
-    async getMenuActions() {
-        const res = [];
-        const result = this.getMenuObjects();
-        if (result.success) {
-            const actions = await this.actions.get(result.data);
-            this.menuHandlers = {};
-            actions?.forEach(item => {
-                const uuid = PepGuid.newGuid();
-                this.menuHandlers[uuid] = item.handler;
-                res.push({
-                    key: uuid,
-                    text: item.title
-                });
-            });
-        }
-        return res;
-    }
-    getMenuObjects() {
-        const menuObjects = {
-            success: false,
-            data: new PepSelectionData()
-        };
-        if (this.pepList) {
-            menuObjects.success = true;
-            menuObjects.data = this.pepList.getSelectedItemsData();
-        }
-        return menuObjects;
-    }
-    initSearch() {
-        this.searchString = '';
-        this.search?.initSearch();
-    }
-    async loadData(fromIndex, toIndex) {
-        this._loaderService.show();
-        let converedData = [];
-        const data = await this._dataSource.init({
-            searchString: this.searchString || undefined,
-            filters: this._appliedFilters.length ? this._appliedFilters : undefined,
-            sorting: this._sorting || undefined,
-            fromIndex: fromIndex,
-            toIndex: toIndex
-        });
-        this._loaderService.hide();
-        if (data) {
-            this._dataView = data.dataView;
-            if (data.items?.length > 0 && !data.isPepRowData) {
-                converedData = data.items.map(item => this._genericListService.convertToPepRowData(item, data.dataView, this.uuidMapping));
-            }
-        }
-        return converedData;
-    }
-    async updateDataList(fromIndex, toIndex, pageIndex = undefined) {
-        if (this._dataSource.update) {
-            this._loaderService.show();
-            let converedData = [];
-            const dataList = await this._dataSource.update({
-                searchString: this.searchString || undefined,
-                filters: this._appliedFilters.length ? this._appliedFilters : undefined,
-                sorting: this._sorting || undefined,
-                fromIndex: fromIndex,
-                toIndex: toIndex,
-                pageIndex: pageIndex
-            });
-            this._loaderService.hide();
-            if (dataList?.length > 0) {
-                converedData = dataList.map(item => this._genericListService.convertToPepRowData(item, this._dataView, this.uuidMapping));
-            }
-            return converedData;
-        }
-        else {
-            return [];
-        }
-    }
-    /**
-     * loads virtual scroll items from api
-     */
-    async onLoadItems(event) {
-        const list = await this.updateDataList(event.fromIndex, event.toIndex);
-        const convertedList = this._dataConvertorService.convertListData(list);
-        const selectedItems = this._genericListService.getSelectedItems(convertedList);
-        if (selectedItems?.length) {
-            this.pepList.setSelectedIds(selectedItems);
-        }
-        this.pepList.updateItems(convertedList, event);
-    }
-    /**
-     * loads paging bulk from api
-     */
-    async onLoadPage(event) {
-        const fromIndex = event.pageIndex * event.pageSize;
-        const toIndex = Math.min(fromIndex + event.pageSize - 1, this.totalRowCount - 1);
-        const list = await this.updateDataList(fromIndex, toIndex, event.pageIndex);
-        const convertedList = this._dataConvertorService.convertListData(list);
-        const selectedItems = this._genericListService.getSelectedItems(convertedList);
-        if (selectedItems?.length) {
-            this.pepList.setSelectedIds(selectedItems);
-        }
-        this.pepList.updatePage(convertedList, event);
-    }
-    getItemById(id) {
-        if (this.pepList) {
-            return this._pepList.getItemDataByID(id);
-        }
-        else {
-            return null;
-        }
-    }
-    getSelectedItems() {
-        if (this.pepList) {
-            return this._pepList.getSelectedItemsData();
-        }
-        else {
-            return null;
-        }
-    }
-    getPageIndex() {
-        return this.pepList.pageIndex;
-    }
-    onActionItemClicked(action) {
-        const result = this.getMenuObjects();
-        if (result.success) {
-            this.menuHandlers[action.source.key](result.data);
-        }
-    }
-    onSearchChanged(event) {
-        this.searchString = event.value;
-        this.initList();
-    }
-    onSelectedItemsChanged(selectedRowsCount) {
-        //loading menu items after pep-list selected items are updated
-        setTimeout(() => {
-            this.loadMenuItems();
-        }, 0);
-    }
-    onCustomizeFieldClick(fieldClickEvent) {
-        this.fieldClick.emit(fieldClickEvent);
-    }
-    onBreadCrumbItemClick(event) {
-        this.breadCrumbItemClick.emit(event);
-    }
-    onValueChanged(event) {
-        this.valueChange.emit(event);
-    }
-    onSortingChange(event) {
-        this._sorting = event;
-        this.initList();
-    }
-    onFiltersChange(filters) {
-        this._appliedFilters = filters;
-        this.initList();
-    }
-    ngOnDestroy() {
-        if (this._resize$) {
-            this._resize$.unsubscribe();
-        }
-        if (this._loader$) {
-            this._loader$.unsubscribe();
-        }
-    }
-}
-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 }], 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", pager: "pager", tableViewType: "tableViewType", zebraStripes: "zebraStripes", smartFilter: "smartFilter", showTopBar: "showTopBar", breadCrumbsItems: "breadCrumbsItems" }, outputs: { fieldClick: "fieldClick", valueChange: "valueChange", breadCrumbItemClick: "breadCrumbItemClick" }, providers: [PepGenericListService], viewQueries: [{ propertyName: "search", first: true, predicate: ["search"], 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 }\">\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\">\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 title=\"Test filters\" [fields]=\"internalSmartFilter.fields\"\n            [filters]=\"internalSmartFilter.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{height:100%;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;font-weight:var(--pep-font-weight-bold, 600);font-size:var(--pep-font-size-2xl, 1.5rem)!important;line-height:var(--pep-line-height-2xl, 2.25rem)!important;z-index:50;padding-inline:var(--pep-spacing-lg, 1rem)}.list-empty-state .list-empty-descr{font-size:var(--pep-font-size-md, 1rem)!important;line-height:var(--pep-line-height-md, 1.5rem)!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;grid-template-columns:auto 1fr}.inline-container.add-padding{padding-inline:var(--pep-spacing-lg, 1rem)}.inline-container .header-area{grid-column:2/3;grid-row:1/2}.inline-container .smart-filter-area{grid-column:1/2;grid-row:1/3}.inline-container .list-container{grid-column:2/3;grid-row:2/3}.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"] }, { 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", "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: [{
-            type: Component,
-            args: [{ selector: 'pep-generic-list', providers: [PepGenericListService], template: "<div *ngIf=\"inline\" class=\"inline-container\" [ngClass]=\"{ 'add-padding': addPadding }\">\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\">\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 title=\"Test filters\" [fields]=\"internalSmartFilter.fields\"\n            [filters]=\"internalSmartFilter.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{height:100%;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;font-weight:var(--pep-font-weight-bold, 600);font-size:var(--pep-font-size-2xl, 1.5rem)!important;line-height:var(--pep-line-height-2xl, 2.25rem)!important;z-index:50;padding-inline:var(--pep-spacing-lg, 1rem)}.list-empty-state .list-empty-descr{font-size:var(--pep-font-size-md, 1rem)!important;line-height:var(--pep-line-height-md, 1.5rem)!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;grid-template-columns:auto 1fr}.inline-container.add-padding{padding-inline:var(--pep-spacing-lg, 1rem)}.inline-container .header-area{grid-column:2/3;grid-row:1/2}.inline-container .smart-filter-area{grid-column:1/2;grid-row:1/3}.inline-container .list-container{grid-column:2/3;grid-row:2/3}.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 }]; }, propDecorators: { search: [{
-                type: ViewChild,
-                args: ['search']
-            }], pepListContainer: [{
-                type: ViewChild,
-                args: ['pepListContainer', { read: ViewContainerRef }]
-            }], dataSource: [{
-                type: Input
-            }], actions: [{
-                type: Input
-            }], uuidMapping: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], addPadding: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], description: [{
-                type: Input
-            }], inline: [{
-                type: Input
-            }], showSearch: [{
-                type: Input
-            }], noDataFoundMsg: [{
-                type: Input
-            }], emptyState: [{
-                type: Input
-            }], selectionType: [{
-                type: Input
-            }], supportSorting: [{
-                type: Input
-            }], pager: [{
-                type: Input
-            }], tableViewType: [{
-                type: Input
-            }], zebraStripes: [{
-                type: Input
-            }], smartFilter: [{
-                type: Input
-            }], showTopBar: [{
-                type: Input
-            }], breadCrumbsItems: [{
-                type: Input
-            }], fieldClick: [{
-                type: Output
-            }], valueChange: [{
-                type: Output
-            }], breadCrumbItemClick: [{
-                type: Output
+class GenericListComponent {
+    constructor(_dataConvertorService, _layoutService, _loaderService, _translate, _genericListService) {
+        this._dataConvertorService = _dataConvertorService;
+        this._layoutService = _layoutService;
+        this._loaderService = _loaderService;
+        this._translate = _translate;
+        this._genericListService = _genericListService;
+        this._dataSource = {
+            init: async (params) => {
+                return {
+                    dataView: {
+                        Type: 'Grid'
+                    },
+                    totalCount: -1,
+                    items: []
+                };
+            }
+        };
+        this.actions = {
+            get: async (data) => {
+                return [];
+            }
+        };
+        this.uuidMapping = 'key';
+        this.disabled = false;
+        this.addPadding = false;
+        this.title = '';
+        this.description = '';
+        this.inline = false;
+        this.showSearch = false;
+        this.noDataFoundMsg = '';
+        this.selectionType = 'multi';
+        this.supportSorting = false;
+        this.pager = {
+            type: 'scroll'
+        };
+        this.tableViewType = 'regular';
+        this.zebraStripes = false;
+        this.showTopBar = false;
+        this.breadCrumbsItems = new Array();
+        this.fieldClick = new EventEmitter();
+        this.valueChange = new EventEmitter();
+        this.breadCrumbItemClick = new EventEmitter();
+        this._resize$ = new Subscription();
+        this._loader$ = new Subscription();
+        this._dataView = {
+            Type: 'Grid'
+        };
+        this.onLoad = true;
+        this.totalRowCount = -1;
+        this.searchString = '';
+        this.showSmartFilter = false;
+        this.showEmptyState = false;
+        this.internalSmartFilter = {
+            fields: [],
+            data: []
+        };
+        this._appliedFilters = [];
+        this._sorting = undefined;
+        this.menuHandlers = {};
+        this.menuActions = [];
+        this._resize$ = this._layoutService.onResize$.pipe().subscribe((size) => {
+            //            
+        });
+        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.initList();
+    }
+    set smartFilter(val) {
+        this.internalSmartFilter = this._genericListService.convertToSmartFilter(val);
+        this.showSmartFilter = this.internalSmartFilter.fields.length > 0;
+    }
+    set pepList(val) {
+        this._pepList = val;
+    }
+    get pepList() {
+        return this._pepList;
+    }
+    ngOnInit() {
+        //
+    }
+    async initList() {
+        this.onLoad = true;
+        setTimeout(async () => {
+            if (this._dataSource) {
+                //merge selector inputs with callback inputs
+                this.loadTableInputs();
+                let fromIndex = 0;
+                let toIndex = 0;
+                if (this.listInputs.pager.type === 'pages') {
+                    fromIndex = this.listInputs.pager.size * this.listInputs.pager.index;
+                    toIndex = fromIndex + (this.listInputs.pager.size || DEFAULT_PAGE_SIZE) - 1;
+                }
+                else {
+                    toIndex = 100; //TO DO - get value from - this.customList.getTopItems()
+                }
+                const data = await this.loadData(fromIndex, toIndex);
+                this.totalRowCount = data?.length || 0;
+                if (this.listInputs?.emptyState?.show === true) {
+                    this.setEmptyState();
+                }
+                this.onLoad = false;
+                //show empty state
+                if (this.showEmptyState) {
+                    if (!this.listInputs.emptyState.title) {
+                        this.listInputs.emptyState.title = this._translate.instant('GENERIC_LIST.EMPTY_STATE.TITLE');
+                    }
+                    if (!this.listInputs.emptyState.description) {
+                        this.listInputs.emptyState.description = this._translate.instant('GENERIC_LIST.EMPTY_STATE.DESCRIPTION');
+                    }
+                    return;
+                }
+                setTimeout(async () => {
+                    if (this._pepListContainer) {
+                        if (this._pepListContainer.length > 0) {
+                            this._pepListContainer.remove();
+                        }
+                        const { PepListComponent } = await import('@pepperi-addons/ngx-lib/list');
+                        const componentRef = this._pepListContainer.createComponent(PepListComponent);
+                        this.pepList = componentRef.instance;
+                        componentRef.instance.viewType = this._genericListService.getListViewType(this._dataView.Type);
+                        componentRef.instance.tableViewType = this.listInputs.tableViewType;
+                        componentRef.instance.zebraStripes = this.listInputs.zebraStripes;
+                        if (this.disabled) {
+                            componentRef.instance.disabled = true;
+                            componentRef.instance.lockItemInnerEvents = true;
+                        }
+                        componentRef.instance.supportSorting = this.listInputs.supportSorting;
+                        componentRef.instance.selectionTypeForActions = this.listInputs.selectionType;
+                        componentRef.instance.showCardSelection = this.listInputs.selectionType !== 'none';
+                        componentRef.instance.pagerType = this.listInputs.pager.type;
+                        if (this.listInputs.pager.type === 'pages') {
+                            componentRef.instance.pageSize = this.listInputs.pager?.size || DEFAULT_PAGE_SIZE;
+                            componentRef.instance.pageIndex = this.listInputs.pager?.index || 0;
+                        }
+                        componentRef.instance.noDataFoundMsg = this.listInputs.noDataFoundMsg;
+                        componentRef.instance.fieldClick.subscribe(($event) => {
+                            this.onCustomizeFieldClick($event);
+                        });
+                        componentRef.instance.selectedItemsChange.subscribe(($event) => {
+                            this.onSelectedItemsChanged($event);
+                        });
+                        componentRef.instance.loadItems.subscribe(($event) => {
+                            this.onLoadItems($event);
+                        });
+                        componentRef.instance.loadPage.subscribe(($event) => {
+                            this.onLoadPage($event);
+                        });
+                        componentRef.instance.valueChange.subscribe(($event) => {
+                            this.onValueChanged($event);
+                        });
+                        componentRef.instance.sortingChange.subscribe(($event) => {
+                            this.onSortingChange($event);
+                        });
+                        let convertedList = [];
+                        if (data) {
+                            if (data?.length) {
+                                convertedList = this._dataConvertorService.convertListData(data);
+                            }
+                            const uiControl = this.getUiControl(DataViewConverter.toUIControlData(this._dataView));
+                            const selectedItems = this._genericListService.getSelectedItems(convertedList);
+                            if (selectedItems?.length) {
+                                componentRef.instance.setSelectedIds(selectedItems);
+                            }
+                            componentRef.instance.initListData(uiControl, convertedList.length, convertedList);
+                        }
+                    }
+                }, 0);
+            }
+        }, 0);
+    }
+    /**
+     * loads inputs in case they are provided and merge with selector inputs
+     * @returns merged pep-list inputs
+     */
+    loadTableInputs() {
+        this.listInputs = {
+            supportSorting: this.supportSorting,
+            selectionType: this.selectionType,
+            pager: this.pager,
+            noDataFoundMsg: this.noDataFoundMsg,
+            tableViewType: this.tableViewType,
+            zebraStripes: this.zebraStripes,
+            emptyState: this.emptyState
+        };
+        if (this._dataSource.inputs) {
+            Object.entries(this._dataSource.inputs).forEach((item) => {
+                if (this._genericListService.hasProperty(this.listInputs, item[0])) {
+                    this.listInputs[item[0]] = item[1];
+                }
+            });
+        }
+    }
+    /**
+     * detemines whether empty state is to be displayed
+     */
+    setEmptyState() {
+        this.showEmptyState = this.totalRowCount === 0 &&
+            this.searchString === '' &&
+            this._appliedFilters.length === 0;
+    }
+    getUiControl(data) {
+        const uiControl = new UIControl();
+        uiControl.ControlFields = [];
+        if (data?.ControlFields) {
+            uiControl.ControlFields = data.ControlFields.map((field) => this._genericListService.convertToUiControlField(field));
+        }
+        return uiControl;
+    }
+    loadMenuItems() {
+        if (this.listInputs.selectionType !== 'none') {
+            this.getMenuActions().then(x => this.menuActions = x);
+        }
+    }
+    async getMenuActions() {
+        const res = [];
+        const result = this.getMenuObjects();
+        if (result.success) {
+            const actions = await this.actions.get(result.data);
+            this.menuHandlers = {};
+            actions?.forEach(item => {
+                const uuid = PepGuid.newGuid();
+                this.menuHandlers[uuid] = item.handler;
+                res.push({
+                    key: uuid,
+                    text: item.title
+                });
+            });
+        }
+        return res;
+    }
+    getMenuObjects() {
+        const menuObjects = {
+            success: false,
+            data: new PepSelectionData()
+        };
+        if (this.pepList) {
+            menuObjects.success = true;
+            menuObjects.data = this.pepList.getSelectedItemsData();
+        }
+        return menuObjects;
+    }
+    initSearch() {
+        this.searchString = '';
+        this.search?.initSearch();
+    }
+    async loadData(fromIndex, toIndex) {
+        this._loaderService.show();
+        let converedData = [];
+        const data = await this._dataSource.init({
+            searchString: this.searchString || undefined,
+            filters: this._appliedFilters.length ? this._appliedFilters : undefined,
+            sorting: this._sorting || undefined,
+            fromIndex: fromIndex,
+            toIndex: toIndex
+        });
+        this._loaderService.hide();
+        if (data) {
+            this._dataView = data.dataView;
+            if (data.items?.length > 0 && !data.isPepRowData) {
+                converedData = data.items.map(item => this._genericListService.convertToPepRowData(item, data.dataView, this.uuidMapping));
+            }
+        }
+        return converedData;
+    }
+    async updateDataList(fromIndex, toIndex, pageIndex = undefined) {
+        if (this._dataSource.update) {
+            this._loaderService.show();
+            let converedData = [];
+            const dataList = await this._dataSource.update({
+                searchString: this.searchString || undefined,
+                filters: this._appliedFilters.length ? this._appliedFilters : undefined,
+                sorting: this._sorting || undefined,
+                fromIndex: fromIndex,
+                toIndex: toIndex,
+                pageIndex: pageIndex
+            });
+            this._loaderService.hide();
+            if (dataList?.length > 0) {
+                converedData = dataList.map(item => this._genericListService.convertToPepRowData(item, this._dataView, this.uuidMapping));
+            }
+            return converedData;
+        }
+        else {
+            return [];
+        }
+    }
+    /**
+     * loads virtual scroll items from api
+     */
+    async onLoadItems(event) {
+        const list = await this.updateDataList(event.fromIndex, event.toIndex);
+        const convertedList = this._dataConvertorService.convertListData(list);
+        const selectedItems = this._genericListService.getSelectedItems(convertedList);
+        if (selectedItems?.length) {
+            this.pepList.setSelectedIds(selectedItems);
+        }
+        this.pepList.updateItems(convertedList, event);
+    }
+    /**
+     * loads paging bulk from api
+     */
+    async onLoadPage(event) {
+        const fromIndex = event.pageIndex * event.pageSize;
+        const toIndex = Math.min(fromIndex + event.pageSize - 1, this.totalRowCount - 1);
+        const list = await this.updateDataList(fromIndex, toIndex, event.pageIndex);
+        const convertedList = this._dataConvertorService.convertListData(list);
+        const selectedItems = this._genericListService.getSelectedItems(convertedList);
+        if (selectedItems?.length) {
+            this.pepList.setSelectedIds(selectedItems);
+        }
+        this.pepList.updatePage(convertedList, event);
+    }
+    getItemById(id) {
+        if (this.pepList) {
+            return this._pepList.getItemDataByID(id);
+        }
+        else {
+            return null;
+        }
+    }
+    getSelectedItems() {
+        if (this.pepList) {
+            return this._pepList.getSelectedItemsData();
+        }
+        else {
+            return null;
+        }
+    }
+    getPageIndex() {
+        return this.pepList.pageIndex;
+    }
+    onActionItemClicked(action) {
+        const result = this.getMenuObjects();
+        if (result.success) {
+            this.menuHandlers[action.source.key](result.data);
+        }
+    }
+    onSearchChanged(event) {
+        this.searchString = event.value;
+        this.initList();
+    }
+    onSelectedItemsChanged(selectedRowsCount) {
+        //loading menu items after pep-list selected items are updated
+        setTimeout(() => {
+            this.loadMenuItems();
+        }, 0);
+    }
+    onCustomizeFieldClick(fieldClickEvent) {
+        this.fieldClick.emit(fieldClickEvent);
+    }
+    onBreadCrumbItemClick(event) {
+        this.breadCrumbItemClick.emit(event);
+    }
+    onValueChanged(event) {
+        this.valueChange.emit(event);
+    }
+    onSortingChange(event) {
+        this._sorting = event;
+        this.initList();
+    }
+    onFiltersChange(filters) {
+        this._appliedFilters = filters;
+        this.initList();
+    }
+    ngOnDestroy() {
+        if (this._resize$) {
+            this._resize$.unsubscribe();
+        }
+        if (this._loader$) {
+            this._loader$.unsubscribe();
+        }
+    }
+}
+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 }], 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", pager: "pager", tableViewType: "tableViewType", zebraStripes: "zebraStripes", smartFilter: "smartFilter", showTopBar: "showTopBar", breadCrumbsItems: "breadCrumbsItems" }, outputs: { fieldClick: "fieldClick", valueChange: "valueChange", breadCrumbItemClick: "breadCrumbItemClick" }, providers: [PepGenericListService], viewQueries: [{ propertyName: "search", first: true, predicate: ["search"], 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 }\">\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\">\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 title=\"Test filters\" [fields]=\"internalSmartFilter.fields\"\n            [filters]=\"internalSmartFilter.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{height:100%;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;font-weight:var(--pep-font-weight-bold, 600);font-size:var(--pep-font-size-2xl, 1.5rem)!important;line-height:var(--pep-line-height-2xl, 2.25rem)!important;z-index:50;padding-inline:var(--pep-spacing-lg, 1rem)}.list-empty-state .list-empty-descr{font-size:var(--pep-font-size-md, 1rem)!important;line-height:var(--pep-line-height-md, 1.5rem)!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;grid-template-columns:auto 1fr}.inline-container.add-padding{padding-inline:var(--pep-spacing-lg, 1rem)}.inline-container .header-area{grid-column:2/3;grid-row:1/2}.inline-container .smart-filter-area{grid-column:1/2;grid-row:1/3}.inline-container .list-container{grid-column:2/3;grid-row:2/3}.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"] }, { 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", "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: [{
+            type: Component,
+            args: [{ selector: 'pep-generic-list', providers: [PepGenericListService], template: "<div *ngIf=\"inline\" class=\"inline-container\" [ngClass]=\"{ 'add-padding': addPadding }\">\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\">\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 title=\"Test filters\" [fields]=\"internalSmartFilter.fields\"\n            [filters]=\"internalSmartFilter.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{height:100%;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;font-weight:var(--pep-font-weight-bold, 600);font-size:var(--pep-font-size-2xl, 1.5rem)!important;line-height:var(--pep-line-height-2xl, 2.25rem)!important;z-index:50;padding-inline:var(--pep-spacing-lg, 1rem)}.list-empty-state .list-empty-descr{font-size:var(--pep-font-size-md, 1rem)!important;line-height:var(--pep-line-height-md, 1.5rem)!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;grid-template-columns:auto 1fr}.inline-container.add-padding{padding-inline:var(--pep-spacing-lg, 1rem)}.inline-container .header-area{grid-column:2/3;grid-row:1/2}.inline-container .smart-filter-area{grid-column:1/2;grid-row:1/3}.inline-container .list-container{grid-column:2/3;grid-row:2/3}.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 }]; }, propDecorators: { search: [{
+                type: ViewChild,
+                args: ['search']
+            }], pepListContainer: [{
+                type: ViewChild,
+                args: ['pepListContainer', { read: ViewContainerRef }]
+            }], dataSource: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], uuidMapping: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], addPadding: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], inline: [{
+                type: Input
+            }], showSearch: [{
+                type: Input
+            }], noDataFoundMsg: [{
+                type: Input
+            }], emptyState: [{
+                type: Input
+            }], selectionType: [{
+                type: Input
+            }], supportSorting: [{
+                type: Input
+            }], pager: [{
+                type: Input
+            }], tableViewType: [{
+                type: Input
+            }], zebraStripes: [{
+                type: Input
+            }], smartFilter: [{
+                type: Input
+            }], showTopBar: [{
+                type: Input
+            }], breadCrumbsItems: [{
+                type: Input
+            }], fieldClick: [{
+                type: Output
+            }], valueChange: [{
+                type: Output
+            }], breadCrumbItemClick: [{
+                type: Output
             }] } });
 
-const pepIcons = [
-    pepIconLeafRound,
-    pepIconLeafSkiny, pepIconSystemView
-];
-function appInitializerFactory(translate) {
-    return () => {
-        translate.setDefaultLang('en');
-        return firstValueFrom(translate.use('en'));
-    };
-}
-class PepGenericListModule {
-    constructor(pepIconRegistry) {
-        this.pepIconRegistry = pepIconRegistry;
-        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,
-        PepNgxLibModule,
-        MatIconModule,
-        PepListModule,
-        PepFormModule,
-        PepMenuModule,
-        PepPageLayoutModule,
-        PepTopBarModule,
-        PepSideBarModule,
-        PepSearchModule,
-        PepBreadCrumbsModule,
-        PepIconModule,
-        PepSmartFiltersModule], exports: [GenericListComponent] });
-PepGenericListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGenericListModule, providers: [
-        PepGenericListService,
-        {
-            provide: APP_INITIALIZER,
-            useFactory: appInitializerFactory,
-            deps: [TranslateService],
-            multi: true
-        }
-    ], imports: [CommonModule,
-        PepNgxLibModule,
-        MatIconModule,
-        PepListModule,
-        PepFormModule,
-        PepMenuModule,
-        PepPageLayoutModule,
-        PepTopBarModule,
-        PepSideBarModule,
-        PepSearchModule,
-        PepBreadCrumbsModule,
-        PepIconModule,
-        PepSmartFiltersModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGenericListModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        GenericListComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        PepNgxLibModule,
-                        MatIconModule,
-                        PepListModule,
-                        PepFormModule,
-                        PepMenuModule,
-                        PepPageLayoutModule,
-                        PepTopBarModule,
-                        PepSideBarModule,
-                        PepSearchModule,
-                        PepBreadCrumbsModule,
-                        PepIconModule,
-                        PepSmartFiltersModule
-                    ],
-                    exports: [
-                        GenericListComponent
-                    ],
-                    providers: [
-                        PepGenericListService,
-                        {
-                            provide: APP_INITIALIZER,
-                            useFactory: appInitializerFactory,
-                            deps: [TranslateService],
-                            multi: true
-                        }
-                    ]
-                }]
+const pepIcons = [
+    pepIconLeafRound,
+    pepIconLeafSkiny, pepIconSystemView
+];
+function appInitializerFactory(translate) {
+    return () => {
+        translate.setDefaultLang('en');
+        return firstValueFrom(translate.use('en'));
+    };
+}
+class PepGenericListModule {
+    constructor(pepIconRegistry) {
+        this.pepIconRegistry = pepIconRegistry;
+        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,
+        PepNgxLibModule,
+        MatIconModule,
+        PepListModule,
+        PepFormModule,
+        PepMenuModule,
+        PepPageLayoutModule,
+        PepTopBarModule,
+        PepSideBarModule,
+        PepSearchModule,
+        PepBreadCrumbsModule,
+        PepIconModule,
+        PepSmartFiltersModule], exports: [GenericListComponent] });
+PepGenericListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGenericListModule, providers: [
+        PepGenericListService,
+        {
+            provide: APP_INITIALIZER,
+            useFactory: appInitializerFactory,
+            deps: [TranslateService],
+            multi: true
+        }
+    ], imports: [CommonModule,
+        PepNgxLibModule,
+        MatIconModule,
+        PepListModule,
+        PepFormModule,
+        PepMenuModule,
+        PepPageLayoutModule,
+        PepTopBarModule,
+        PepSideBarModule,
+        PepSearchModule,
+        PepBreadCrumbsModule,
+        PepIconModule,
+        PepSmartFiltersModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGenericListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        GenericListComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        PepNgxLibModule,
+                        MatIconModule,
+                        PepListModule,
+                        PepFormModule,
+                        PepMenuModule,
+                        PepPageLayoutModule,
+                        PepTopBarModule,
+                        PepSideBarModule,
+                        PepSearchModule,
+                        PepBreadCrumbsModule,
+                        PepIconModule,
+                        PepSmartFiltersModule
+                    ],
+                    exports: [
+                        GenericListComponent
+                    ],
+                    providers: [
+                        PepGenericListService,
+                        {
+                            provide: APP_INITIALIZER,
+                            useFactory: appInitializerFactory,
+                            deps: [TranslateService],
+                            multi: true
+                        }
+                    ]
+                }]
         }], ctorParameters: function () { return [{ type: i1$2.PepIconRegistry }]; } });
 
-/*
- * Public API Surface of ngx-composite-lib/generic-list
+/*
+ * Public API Surface of ngx-composite-lib/generic-list
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { GenericListComponent, PepGenericListModule, PepGenericListService, appInitializerFactory };