@pepperi-addons/ngx-composite-lib 0.0.10-beta.4 → 0.0.10-beta.42

package/fesm2015/pepperi-addons-ngx-composite-lib-generic-list.js

@@ -1,62 +1,265 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ViewChild, Input, Output, NgModule } from '@angular/core';
-import * as i7 from '@angular/common';
+import { Injectable, EventEmitter, ViewContainerRef, Component, ViewChild, Input, Output, NgModule } from '@angular/core';
+import * as i9 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { __awaiter } from 'tslib';
-import * as i1 from '@pepperi-addons/ngx-lib';
-import { PepRowData, PepGuid, PepNgxLibModule } from '@pepperi-addons/ngx-lib';
-import * as i5 from '@pepperi-addons/ngx-lib/list';
-import { PepListComponent, PepListModule } from '@pepperi-addons/ngx-lib/list';
+import * as i2 from '@pepperi-addons/ngx-lib';
+import { UIControl, PepRowData, PepGuid, PepNgxLibModule } from '@pepperi-addons/ngx-lib';
+import * as i6 from '@pepperi-addons/ngx-lib/list';
+import { PepListComponent, DEFAULT_PAGE_SIZE, PepSelectionData, PepListModule } from '@pepperi-addons/ngx-lib/list';
 import { DataViewFieldTypes } from '@pepperi-addons/papi-sdk/dist/entities/data-view';
-import * as i2 from '@ngx-translate/core';
-import * as i3 from '@pepperi-addons/ngx-lib/page-layout';
+import { DataViewConverter } from '@pepperi-addons/data-views';
+import { BehaviorSubject, Subscription } from 'rxjs';
+import * as i3 from '@ngx-translate/core';
+import * as i4 from '@pepperi-addons/ngx-lib/page-layout';
 import { PepPageLayoutModule } from '@pepperi-addons/ngx-lib/page-layout';
-import * as i4 from '@pepperi-addons/ngx-lib/top-bar';
+import * as i5 from '@pepperi-addons/ngx-lib/top-bar';
 import { PepTopBarModule } from '@pepperi-addons/ngx-lib/top-bar';
-import * as i6 from '@pepperi-addons/ngx-lib/search';
+import * as i7 from '@pepperi-addons/ngx-lib/search';
 import { PepSearchModule } from '@pepperi-addons/ngx-lib/search';
+import * as i8 from '@pepperi-addons/ngx-lib/bread-crumbs';
+import { PepBreadCrumbsModule } from '@pepperi-addons/ngx-lib/bread-crumbs';
 import { PepFormModule } from '@pepperi-addons/ngx-lib/form';
 import { PepMenuModule } from '@pepperi-addons/ngx-lib/menu';
 
+//test
+class PepGenericListService {
+    constructor() {
+        this._refresh$ = new BehaviorSubject(false);
+        this.refresh$ = this._refresh$.asObservable();
+        //
+    }
+    set pepList(val) {
+        this._pepList = val;
+    }
+    get pepList() {
+        return this._pepList;
+    }
+    getItemById(id) {
+        if (this._pepList) {
+            return this._pepList.getItemDataByID(id);
+        }
+        else {
+            return null;
+        }
+    }
+    getSelectedItems() {
+        if (this._pepList) {
+            return this._pepList.getSelectedItemsData();
+        }
+        else {
+            return null;
+        }
+    }
+}
+PepGenericListService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepGenericListService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+PepGenericListService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepGenericListService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepGenericListService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
 class GenericListComponent {
-    // PepScreenSizeType = PepScreenSizeType;
-    // screenSize: PepScreenSizeType;
-    constructor(dataConvertorService, layoutService, translate) {
-        this.dataConvertorService = dataConvertorService;
-        this.layoutService = layoutService;
-        this.translate = translate;
-        this.dataObjects = [];
-        this.searchString = '';
+    constructor(_resolver, _genericListService, _dataConvertorService, _layoutService, _translate) {
+        this._resolver = _resolver;
+        this._genericListService = _genericListService;
+        this._dataConvertorService = _dataConvertorService;
+        this._layoutService = _layoutService;
+        this._translate = _translate;
+        this._dataSource = {
+            init: (params) => __awaiter(this, void 0, void 0, function* () {
+                return {
+                    dataView: {
+                        Type: 'Grid'
+                    },
+                    totalCount: -1,
+                    items: []
+                };
+            })
+        };
+        this.actions = {
+            get: (data) => __awaiter(this, void 0, void 0, function* () {
+                return [];
+            })
+        };
+        this.uuidMapping = 'key';
         this.addPadding = false;
         this.title = '';
         this.inline = false;
         this.showSearch = false;
-        this.allowSelection = true;
-        this.noDataMessage = "No data";
-        this.allowMultipleSelection = false;
+        this.showTopBar = false;
+        this.breadCrumbsItems = new Array();
         this.fieldClick = new EventEmitter();
-        // @Output()
-        // onAddClicked = new EventEmitter<void>();
+        this.valueChange = new EventEmitter();
+        this.breadCrumbItemClick = new EventEmitter();
+        this._resize$ = new Subscription();
+        this._dataView = {
+            Type: 'Grid'
+        };
+        this._tableInputs = {
+            supportSorting: false,
+            selectionType: 'single',
+            pager: {
+                type: 'scroll'
+            },
+            noDataFoundMsg: ''
+        };
+        this.totalRowCount = -1;
+        this.searchString = '';
+        this._sorting = undefined;
         this.menuHandlers = {};
         this.menuActions = [];
-        this.layoutService.onResize$.pipe().subscribe((size) => {
-            // this.screenSize = size;
+        this._resize$ = this._layoutService.onResize$.pipe().subscribe((size) => {
+            //            
+        });
+    }
+    set pepListContainer(val) {
+        this._pepListContainer = val;
+    }
+    set dataSource(val) {
+        this._dataSource = val;
+        this.searchString = '';
+        this._sorting = undefined;
+        this.initTable();
+    }
+    set noDataFoundMsg(val) {
+        this._tableInputs.noDataFoundMsg = val;
+    }
+    set selectionType(val) {
+        this._tableInputs.selectionType = val;
+    }
+    set supportSorting(val) {
+        this._tableInputs.supportSorting = val;
+    }
+    set pager(val) {
+        this._tableInputs.pager = val;
+    }
+    set pepList(val) {
+        this._genericListService.pepList = val;
+    }
+    get pepList() {
+        return this._genericListService.pepList;
+    }
+    ngOnInit() {
+        //
+    }
+    initTable() {
+        return __awaiter(this, void 0, void 0, function* () {
+            setTimeout(() => __awaiter(this, void 0, void 0, function* () {
+                var _a, _b, _c, _d, _e;
+                if (this._dataSource &&
+                    this._pepListContainer) {
+                    if (this._pepListContainer.length > 0) {
+                        this._pepListContainer.remove();
+                    }
+                    const factory = this._resolver.resolveComponentFactory(PepListComponent);
+                    const componentRef = this._pepListContainer.createComponent(factory);
+                    this.pepList = componentRef.instance;
+                    //merge selector inputs with callback inputs
+                    const tableInputs = yield this.loadTableInputs();
+                    const fromIndex = 0;
+                    let toIndex = 0;
+                    if (((_a = tableInputs.pager) === null || _a === void 0 ? void 0 : _a.type) === 'pages') {
+                        toIndex = fromIndex + (((_b = tableInputs.pager) === null || _b === void 0 ? void 0 : _b.size) || DEFAULT_PAGE_SIZE) - 1;
+                    }
+                    else {
+                        toIndex = 100; //TO DO - get reesult from - this.customList.getTopItems()
+                    }
+                    const data = yield this.loadData(fromIndex, toIndex);
+                    this.totalRowCount = (data === null || data === void 0 ? void 0 : data.totalCount) || 0;
+                    componentRef.instance.viewType = 'table';
+                    componentRef.instance.supportSorting = tableInputs.supportSorting;
+                    componentRef.instance.selectionTypeForActions = tableInputs.selectionType;
+                    componentRef.instance.pagerType = tableInputs.pager.type;
+                    if (tableInputs.pager.type === 'pages') {
+                        componentRef.instance.pageSize = ((_c = tableInputs.pager) === null || _c === void 0 ? void 0 : _c.size) || DEFAULT_PAGE_SIZE;
+                        componentRef.instance.pageIndex = ((_d = tableInputs.pager) === null || _d === void 0 ? void 0 : _d.index) || 0;
+                    }
+                    componentRef.instance.noDataFoundMsg = tableInputs.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 (((_e = data === null || data === void 0 ? void 0 : data.items) === null || _e === void 0 ? void 0 : _e.length) > 0) {
+                            convertedList = this._dataConvertorService.convertListData(data.items);
+                        }
+                        const uiControl = this.getUiControl(DataViewConverter.toUIControlData(data.dataView));
+                        componentRef.instance.initListData(uiControl, data.totalCount, convertedList);
+                    }
+                }
+            }), 0);
         });
     }
+    /**
+    * 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);
+    }
+    /**
+     * loads callback inputs in case they are provided and merge with selector inputs
+     * @returns merged pep-list inputs
+     */
+    loadTableInputs() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const tableInputs = Object.assign({}, this._tableInputs);
+            if (this._dataSource.inputs) {
+                const inputs = yield this._dataSource.inputs();
+                if (inputs) {
+                    Object.entries(inputs).forEach((item) => {
+                        if (this.hasProperty(tableInputs, item[0])) {
+                            tableInputs[item[0]] = item[1];
+                        }
+                    });
+                }
+            }
+            return tableInputs;
+        });
+    }
+    getUiControl(data) {
+        const uiControl = new UIControl();
+        uiControl.ControlFields = [];
+        if (data === null || data === void 0 ? void 0 : data.ControlFields) {
+            uiControl.ControlFields = data.ControlFields.map((field) => this.convertToUiControlField(field));
+        }
+        return uiControl;
+    }
     loadMenuItems() {
-        if (this.allowSelection) {
+        if (this._tableInputs.selectionType !== 'none') {
             this.getMenuActions().then(x => this.menuActions = x);
         }
     }
     convertToPepRowData(object, dataView) {
         const row = new PepRowData();
+        row.UUID = object[this.uuidMapping] || undefined;
         row.Fields = [];
         if ((dataView === null || dataView === void 0 ? void 0 : dataView.Fields) && dataView.Columns) {
             for (let index = 0; index < dataView.Fields.length; index++) {
-                let field = dataView.Fields[index];
+                const field = dataView.Fields[index];
                 row.Fields.push({
                     ApiName: field.FieldID,
-                    Title: this.translate.instant(field.Title),
+                    Title: this._translate.instant(field.Title),
                     XAlignment: 1,
                     FormattedValue: (object[field.FieldID] || '').toString(),
                     Value: (object[field.FieldID] || '').toString(),
@@ -71,86 +274,169 @@ class GenericListComponent {
         }
         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,
+            }
+        };
+    }
     getMenuActions() {
-        var _a;
         return __awaiter(this, void 0, void 0, function* () {
-            const actions = yield ((_a = this.dataSource) === null || _a === void 0 ? void 0 : _a.getActions(this.getMenuObjects()));
             const res = [];
-            this.menuHandlers = {};
-            actions === null || actions === void 0 ? void 0 : actions.forEach(item => {
-                const uuid = PepGuid.newGuid();
-                this.menuHandlers[uuid] = item.handler;
-                res.push({
-                    key: uuid,
-                    text: item.title
+            const result = this.getMenuObjects();
+            if (result.success) {
+                const actions = yield this.actions.get(result.data);
+                this.menuHandlers = {};
+                actions === null || actions === void 0 ? void 0 : actions.forEach(item => {
+                    const uuid = PepGuid.newGuid();
+                    this.menuHandlers[uuid] = item.handler;
+                    res.push({
+                        key: uuid,
+                        text: item.title
+                    });
                 });
-            });
+            }
             return res;
         });
     }
     getMenuObjects() {
-        var _a, _b, _c;
-        let uuids = (_b = (_a = this.customList) === null || _a === void 0 ? void 0 : _a.getSelectedItemsData().rows) !== null && _b !== void 0 ? _b : [];
-        if ((_c = this.customList) === null || _c === void 0 ? void 0 : _c.getIsAllSelectedForActions()) {
-            uuids = this.dataObjects.map(obj => obj.UID).filter(x => uuids.indexOf(x) != -1);
+        const menuObjects = {
+            success: false,
+            data: new PepSelectionData()
+        };
+        if (this.pepList) {
+            menuObjects.success = true;
+            menuObjects.data = this.pepList.getSelectedItemsData();
         }
-        const objects = uuids.map(uuid => this.getObject(uuid));
-        return objects;
+        return menuObjects;
     }
-    getObject(uuid) {
-        return this.dataObjects.find(obj => obj.UID === uuid);
+    onActionItemClicked(action) {
+        const result = this.getMenuObjects();
+        if (result.success) {
+            this.menuHandlers[action.source.key](result.data);
+        }
     }
-    ngOnInit() {
+    onSearchChanged(event) {
+        this.searchString = event.value;
+        this.initTable();
     }
-    ngAfterViewInit() {
-        this.reload();
+    onSelectedItemsChanged(selectedRowsCount) {
+        //loading menu items after pep-list selected items are updated
+        setTimeout(() => {
+            this.loadMenuItems();
+        }, 0);
     }
-    onMenuItemClicked(action) {
-        this.menuHandlers[action.source.key](this.getMenuObjects());
+    onCustomizeFieldClick(fieldClickEvent) {
+        this.fieldClick.emit(fieldClickEvent);
     }
-    onSearchChanged(event) {
-        this.searchString = event.value;
-        this.reload();
+    onBreadCrumbItemClick(event) {
+        this.breadCrumbItemClick.emit(event);
+    }
+    onValueChanged(event) {
+        this.valueChange.emit(event);
+    }
+    onSortingChange(event) {
+        this._sorting = event;
+        this.initTable();
     }
-    reload() {
+    loadData(fromIndex, toIndex) {
+        var _a;
         return __awaiter(this, void 0, void 0, function* () {
-            if (this.customList && this.dataSource) {
-                this.dataObjects = yield this.dataSource.getList({
-                    searchString: this.searchString
-                });
-                const dataView = yield this.dataSource.getDataView();
-                const tableData = this.dataObjects.map(x => this.convertToPepRowData(x, dataView));
-                const data = this.dataConvertorService.convertListData(tableData);
-                data.forEach((obj, i) => {
-                    this.dataObjects[i].UID = obj.UID;
+            const data = yield this._dataSource.init({
+                searchString: this.searchString || undefined,
+                sorting: this._sorting || undefined,
+                fromIndex: fromIndex,
+                toIndex: toIndex
+            });
+            if (data) {
+                this._dataView = data.dataView;
+                if (((_a = data.items) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                    data.items = data.items.map(item => this.convertToPepRowData(item, data.dataView));
+                }
+            }
+            return data;
+        });
+    }
+    updateDataList(fromIndex, toIndex, pageIndex = undefined) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this._dataSource.update) {
+                const dataList = yield this._dataSource.update({
+                    searchString: this.searchString || undefined,
+                    sorting: this._sorting || undefined,
+                    fromIndex: fromIndex,
+                    toIndex: toIndex,
+                    pageIndex: pageIndex
                 });
-                const uiControl = this.dataConvertorService.getUiControl(tableData[0]);
-                this.customList.initListData(uiControl, data.length, data);
-                this.loadMenuItems();
+                if ((dataList === null || dataList === void 0 ? void 0 : dataList.length) > 0) {
+                    return dataList.map(item => this.convertToPepRowData(item, this._dataView));
+                }
+                else {
+                    return [];
+                }
+            }
+            else {
+                return [];
             }
         });
     }
-    selectedRowsChanged(selectedRowsCount) {
-        this.loadMenuItems();
+    /**
+     * loads virtual scroll items from api
+     */
+    onLoadItems(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const list = yield this.updateDataList(event.fromIndex, event.toIndex);
+            const convertedList = this._dataConvertorService.convertListData(list);
+            this.pepList.updateItems(convertedList, event);
+        });
     }
-    onCustomizeFieldClick(fieldClickEvent) {
-        this.fieldClick.emit(fieldClickEvent);
+    /**
+     * loads paging bulk from api
+     */
+    onLoadPage(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const fromIndex = event.pageIndex * event.pageSize;
+            const toIndex = Math.min(fromIndex + event.pageSize - 1, this.totalRowCount - 1);
+            const list = yield this.updateDataList(fromIndex, toIndex, event.pageIndex);
+            const convertedList = this._dataConvertorService.convertListData(list);
+            this.pepList.updatePage(convertedList, event);
+        });
+    }
+    ngOnDestroy() {
+        if (this._resize$) {
+            this._resize$.unsubscribe();
+        }
     }
 }
-GenericListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: GenericListComponent, deps: [{ token: i1.PepDataConvertorService }, { token: i1.PepLayoutService }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-GenericListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: GenericListComponent, selector: "pep-generic-list", inputs: { dataSource: "dataSource", addPadding: "addPadding", title: "title", inline: "inline", showSearch: "showSearch", allowSelection: "allowSelection", noDataMessage: "noDataMessage", allowMultipleSelection: "allowMultipleSelection" }, outputs: { fieldClick: "fieldClick" }, viewQueries: [{ propertyName: "customList", first: true, predicate: PepListComponent, descendants: true }], ngImport: i0, template: "<div *ngIf=\"inline\" class=\"inline-container\" [ngClass]=\"{ 'add-padding': addPadding }\">\n    <div class=\"inline-top-bar-container\">\n        <ng-container *ngTemplateOutlet=\"topBarTemplate\"></ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n</div>\n\n<pep-page-layout *ngIf=\"!inline\" [addPadding]=\"addPadding\">\n    <ng-container pep-top-area>\n        <ng-container *ngTemplateOutlet=\"topBarTemplate\"></ng-container>\n    </ng-container>\n\n    <div 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        <pep-list-actions [sizeType]=\"inline ? 'sm' : 'md'\" [actions]=\"menuActions\" (actionClick)=\"onMenuItemClicked($event)\"></pep-list-actions>\n        <pep-list-total [sizeType]=\"inline ? 'sm' : 'md'\" [totalRows]=\"customList ? customList.totalRows : -1\"></pep-list-total>\n\n        <pep-search *ngIf=\"showSearch\" [sizeType]=\"inline ? 'sm' : 'md'\" (search)=\"onSearchChanged($event)\">\n        </pep-search>\n    </pep-top-bar>\n</ng-template>\n\n<ng-template #listTemplate>\n    <div #listContainer class=\"list-container\">\n        <pep-list viewType=\"table\" [supportSorting]=\"false\"\n            [selectionTypeForActions]=\"allowMultipleSelection ? 'multi' : (allowSelection ? 'single' : 'none')\" [noDataFoundMsg]=\"noDataMessage\"\n            (fieldClick)=\"onCustomizeFieldClick($event)\"\n            (selectedItemsChange)=\"selectedRowsChanged($event)\">\n        </pep-list>\n    </div>\n</ng-template>", styles: [":host{height:inherit;display:block}.main-area-container{display:grid;height:inherit}.list-container{height:100%}.inline-container{height:inherit;display:grid;grid-template-rows:auto 1fr}.inline-container.add-padding{padding-inline:var(--pep-spacing-lg, 1rem)}.inline-container ::ng-deep .pep-top-bar-container.inline{height:auto;overflow:hidden}\n"], components: [{ type: i3.PepPageLayoutComponent, selector: "pep-page-layout", inputs: ["addPadding", "showShadow"] }, { type: i4.PepTopBarComponent, selector: "pep-top-bar", inputs: ["inline", "title"], outputs: ["footerStateChange"] }, { type: i5.PepListActionsComponent, selector: "pep-list-actions", inputs: ["actions", "sizeType", "xPosition", "hidden"], outputs: ["actionClick", "stateChange", "menuClick"] }, { type: i5.PepListTotalComponent, selector: "pep-list-total", inputs: ["totalRows", "totalAmount", "isMapView", "sizeType"] }, { type: i6.PepSearchComponent, selector: "pep-search", inputs: ["triggerOn", "autoCompleteTop", "shrinkInSmallScreen", "sizeType", "autoCompleteValues", "value", "searchControl", "useAsWebComponent"], outputs: ["search", "autocompleteChange", "stateChange"] }, { type: i5.PepListComponent, selector: "pep-list", inputs: ["noDataFoundMsg", "selectionTypeForActions", "showCardSelection", "hideAllSelectionInMulti", "cardSize", "firstFieldAsLink", "supportSorting", "supportResizing", "disabled", "lockItemInnerEvents", "printMode", "isReport", "totalsRow", "pagerType", "pageSize", "pageIndex", "scrollAnimationTime", "scrollDebounceTime", "scrollThrottlingTime", "viewType", "parentScroll", "lockEvents", "useAsWebComponent"], outputs: ["itemClick", "fieldClick", "valueChange", "sortingChange", "selectedItemsChange", "selectedItemChange", "selectAllClick", "listLoad", "loadItems", "loadPage", "startIndexChange"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+GenericListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: GenericListComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: PepGenericListService }, { token: i2.PepDataConvertorService }, { token: i2.PepLayoutService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+GenericListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: GenericListComponent, selector: "pep-generic-list", inputs: { dataSource: "dataSource", actions: "actions", uuidMapping: "uuidMapping", addPadding: "addPadding", title: "title", inline: "inline", showSearch: "showSearch", noDataFoundMsg: "noDataFoundMsg", selectionType: "selectionType", supportSorting: "supportSorting", pager: "pager", showTopBar: "showTopBar", breadCrumbsItems: "breadCrumbsItems" }, outputs: { fieldClick: "fieldClick", valueChange: "valueChange", breadCrumbItemClick: "breadCrumbItemClick" }, viewQueries: [{ 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>\n        <div *ngIf=\"showTopBar\" class=\"inline-top-bar-container\">\n            <ng-container *ngTemplateOutlet=\"topBarTemplate\"></ng-container>\n        </div>\n        <ng-container *ngIf=\"breadCrumbsItems.length > 0\">\n            <ng-container *ngTemplateOutlet=\"breadCrumbsTemplate\"></ng-container>\n        </ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n</div>\n\n<pep-page-layout *ngIf=\"!inline\" [addPadding]=\"addPadding\">\n    <ng-container *ngIf=\"showTopBar\" pep-top-area>\n        <ng-container *ngTemplateOutlet=\"topBarTemplate\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"breadCrumbsItems.length > 0\" pep-top-area>\n        <ng-container *ngTemplateOutlet=\"breadCrumbsTemplate\"></ng-container>\n    </ng-container>\n    <div 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\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\n        <pep-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 #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 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%}.inline-container{height:inherit;display:grid;grid-template-rows:auto 1fr}.inline-container.add-padding{padding-inline:var(--pep-spacing-lg, 1rem)}.noDataFoundMsg{height:100%;width:100%;background:rgba(26,26,26,.12);display:flex;justify-content:center;align-items:center}.bread-crumbs{padding:var(--pep-spacing-lg, 1rem) 0 var(--pep-spacing-sm, .5rem) 0}\n"], components: [{ type: i4.PepPageLayoutComponent, selector: "pep-page-layout", inputs: ["addPadding", "showShadow"] }, { type: i5.PepTopBarComponent, selector: "pep-top-bar", inputs: ["inline", "title"], outputs: ["footerStateChange"] }, { type: i6.PepListActionsComponent, selector: "pep-list-actions", inputs: ["actions", "sizeType", "xPosition", "hidden"], outputs: ["actionClick", "stateChange", "menuClick"] }, { type: i6.PepListTotalComponent, selector: "pep-list-total", inputs: ["totalRows", "totalAmount", "isMapView", "sizeType"] }, { type: i7.PepSearchComponent, selector: "pep-search", inputs: ["triggerOn", "autoCompleteTop", "sizeType", "autoCompleteValues", "shrink", "value", "searchControl", "useAsWebComponent"], outputs: ["search", "autocompleteChange", "stateChange"] }, { type: i8.PepBreadCrumbsComponent, selector: "pep-bread-crumbs", inputs: ["addSpacing", "items", "displayType"], outputs: ["itemClick"] }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: GenericListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'pep-generic-list',
                     templateUrl: './generic-list.component.html',
-                    styleUrls: ['./generic-list.component.scss'],
+                    styleUrls: ['./generic-list.component.scss']
                 }]
-        }], ctorParameters: function () { return [{ type: i1.PepDataConvertorService }, { type: i1.PepLayoutService }, { type: i2.TranslateService }]; }, propDecorators: { customList: [{
+        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: PepGenericListService }, { type: i2.PepDataConvertorService }, { type: i2.PepLayoutService }, { type: i3.TranslateService }]; }, propDecorators: { pepListContainer: [{
                 type: ViewChild,
-                args: [PepListComponent]
+                args: ['pepListContainer', { read: ViewContainerRef }]
             }], dataSource: [{
                 type: Input
+            }], actions: [{
+                type: Input
+            }], uuidMapping: [{
+                type: Input
             }], addPadding: [{
                 type: Input
             }], title: [{
@@ -159,14 +445,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImpor
                 type: Input
             }], showSearch: [{
                 type: Input
-            }], allowSelection: [{
+            }], noDataFoundMsg: [{
+                type: Input
+            }], selectionType: [{
+                type: Input
+            }], supportSorting: [{
+                type: Input
+            }], pager: [{
                 type: Input
-            }], noDataMessage: [{
+            }], showTopBar: [{
                 type: Input
-            }], allowMultipleSelection: [{
+            }], breadCrumbsItems: [{
                 type: Input
             }], fieldClick: [{
                 type: Output
+            }], valueChange: [{
+                type: Output
+            }], breadCrumbItemClick: [{
+                type: Output
             }] } });
 
 class PepGenericListModule {
@@ -179,8 +475,11 @@ PepGenericListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ve
         PepMenuModule,
         PepPageLayoutModule,
         PepTopBarModule,
-        PepSearchModule], exports: [GenericListComponent] });
-PepGenericListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepGenericListModule, imports: [[
+        PepSearchModule,
+        PepBreadCrumbsModule], exports: [GenericListComponent] });
+PepGenericListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepGenericListModule, providers: [
+        PepGenericListService
+    ], imports: [[
             CommonModule,
             PepNgxLibModule,
             PepListModule,
@@ -188,7 +487,8 @@ PepGenericListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ve
             PepMenuModule,
             PepPageLayoutModule,
             PepTopBarModule,
-            PepSearchModule
+            PepSearchModule,
+            PepBreadCrumbsModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepGenericListModule, decorators: [{
             type: NgModule,
@@ -204,9 +504,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImpor
                         PepMenuModule,
                         PepPageLayoutModule,
                         PepTopBarModule,
-                        PepSearchModule
+                        PepSearchModule,
+                        PepBreadCrumbsModule
+                    ],
+                    exports: [
+                        GenericListComponent
                     ],
-                    exports: [GenericListComponent],
+                    providers: [
+                        PepGenericListService
+                    ]
                 }]
         }] });
 
@@ -218,5 +524,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { GenericListComponent, PepGenericListModule };
+export { GenericListComponent, PepGenericListModule, PepGenericListService };
 //# sourceMappingURL=pepperi-addons-ngx-composite-lib-generic-list.js.map