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

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@pepperi-addons/ngx-lib'), require('@pepperi-addons/ngx-lib/list'), require('@pepperi-addons/papi-sdk/dist/entities/data-view'), require('@ngx-translate/core'), require('@pepperi-addons/ngx-lib/page-layout'), require('@pepperi-addons/ngx-lib/top-bar'), require('@pepperi-addons/ngx-lib/search'), require('@pepperi-addons/ngx-lib/form'), require('@pepperi-addons/ngx-lib/menu')) :
-    typeof define === 'function' && define.amd ? define('@pepperi-addons/ngx-composite-lib/generic-list', ['exports', '@angular/core', '@angular/common', '@pepperi-addons/ngx-lib', '@pepperi-addons/ngx-lib/list', '@pepperi-addons/papi-sdk/dist/entities/data-view', '@ngx-translate/core', '@pepperi-addons/ngx-lib/page-layout', '@pepperi-addons/ngx-lib/top-bar', '@pepperi-addons/ngx-lib/search', '@pepperi-addons/ngx-lib/form', '@pepperi-addons/ngx-lib/menu'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["pepperi-addons"] = global["pepperi-addons"] || {}, global["pepperi-addons"]["ngx-composite-lib"] = global["pepperi-addons"]["ngx-composite-lib"] || {}, global["pepperi-addons"]["ngx-composite-lib"]["generic-list"] = {}), global.ng.core, global.ng.common, global["ngx-lib"], global["ngx-lib/list"], global["papi-sdk/data-view"], global.translate, global["ngx-lib/page-layout"], global["ngx-lib/top-bar"], global["ngx-lib/search"], global["ngx-lib/form"], global["ngx-lib/menu"]));
-})(this, (function (exports, i0, i7, i1, i5, dataView, i2, i3, i4, i6, form, menu) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@pepperi-addons/ngx-lib'), require('@pepperi-addons/ngx-lib/list'), require('@pepperi-addons/papi-sdk/dist/entities/data-view'), require('@pepperi-addons/data-views'), require('rxjs'), require('@ngx-translate/core'), require('@pepperi-addons/ngx-lib/page-layout'), require('@pepperi-addons/ngx-lib/top-bar'), require('@pepperi-addons/ngx-lib/search'), require('@pepperi-addons/ngx-lib/bread-crumbs'), require('@pepperi-addons/ngx-lib/form'), require('@pepperi-addons/ngx-lib/menu')) :
+    typeof define === 'function' && define.amd ? define('@pepperi-addons/ngx-composite-lib/generic-list', ['exports', '@angular/core', '@angular/common', '@pepperi-addons/ngx-lib', '@pepperi-addons/ngx-lib/list', '@pepperi-addons/papi-sdk/dist/entities/data-view', '@pepperi-addons/data-views', 'rxjs', '@ngx-translate/core', '@pepperi-addons/ngx-lib/page-layout', '@pepperi-addons/ngx-lib/top-bar', '@pepperi-addons/ngx-lib/search', '@pepperi-addons/ngx-lib/bread-crumbs', '@pepperi-addons/ngx-lib/form', '@pepperi-addons/ngx-lib/menu'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["pepperi-addons"] = global["pepperi-addons"] || {}, global["pepperi-addons"]["ngx-composite-lib"] = global["pepperi-addons"]["ngx-composite-lib"] || {}, global["pepperi-addons"]["ngx-composite-lib"]["generic-list"] = {}), global.ng.core, global.ng.common, global["ngx-lib"], global["ngx-lib/list"], global["papi-sdk/data-view"], global.dataViews, global.rxjs, global.translate, global["ngx-lib/page-layout"], global["ngx-lib/top-bar"], global["ngx-lib/search"], global["ngx-lib/bread-crumbs"], global["ngx-lib/form"], global["ngx-lib/menu"]));
+})(this, (function (exports, i0, i9, i2, i6, dataView, dataViews, rxjs, i3, i4, i5, i7, i8, form, menu) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -23,13 +23,14 @@
     }
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
-    var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
-    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
-    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
+    var i9__namespace = /*#__PURE__*/_interopNamespace(i9);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
+    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
     var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
-    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
+    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
+    var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
+    var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -349,46 +350,307 @@
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
+    //test
+    var PepGenericListService = /** @class */ (function () {
+        function PepGenericListService() {
+            this._refresh$ = new rxjs.BehaviorSubject(false);
+            this.refresh$ = this._refresh$.asObservable();
+            //
+        }
+        Object.defineProperty(PepGenericListService.prototype, "pepList", {
+            get: function () {
+                return this._pepList;
+            },
+            set: function (val) {
+                this._pepList = val;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PepGenericListService.prototype.getItemById = function (id) {
+            if (this._pepList) {
+                return this._pepList.getItemDataByID(id);
+            }
+            else {
+                return null;
+            }
+        };
+        PepGenericListService.prototype.getSelectedItems = function () {
+            if (this._pepList) {
+                return this._pepList.getSelectedItemsData();
+            }
+            else {
+                return null;
+            }
+        };
+        return PepGenericListService;
+    }());
+    PepGenericListService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepGenericListService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    PepGenericListService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepGenericListService, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepGenericListService, decorators: [{
+                type: i0.Injectable,
+                args: [{
+                        providedIn: 'root'
+                    }]
+            }], ctorParameters: function () { return []; } });
+
     var GenericListComponent = /** @class */ (function () {
-        // PepScreenSizeType = PepScreenSizeType;
-        // screenSize: PepScreenSizeType;
-        function GenericListComponent(dataConvertorService, layoutService, translate) {
-            this.dataConvertorService = dataConvertorService;
-            this.layoutService = layoutService;
-            this.translate = translate;
-            this.dataObjects = [];
-            this.searchString = '';
+        function GenericListComponent(_resolver, _genericListService, _dataConvertorService, _layoutService, _translate) {
+            var _this = this;
+            this._resolver = _resolver;
+            this._genericListService = _genericListService;
+            this._dataConvertorService = _dataConvertorService;
+            this._layoutService = _layoutService;
+            this._translate = _translate;
+            this._dataSource = {
+                init: function (params) { return __awaiter(_this, void 0, void 0, function () {
+                    return __generator(this, function (_f) {
+                        return [2 /*return*/, {
+                                dataView: {
+                                    Type: 'Grid'
+                                },
+                                totalCount: -1,
+                                items: []
+                            }];
+                    });
+                }); }
+            };
+            this.actions = {
+                get: function (data) { return __awaiter(_this, void 0, void 0, function () {
+                    return __generator(this, function (_f) {
+                        return [2 /*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 i0.EventEmitter();
-            // @Output()
-            // onAddClicked = new EventEmitter<void>();
+            this.valueChange = new i0.EventEmitter();
+            this.breadCrumbItemClick = new i0.EventEmitter();
+            this._resize$ = new rxjs.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(function (size) {
-                // this.screenSize = size;
+            this._resize$ = this._layoutService.onResize$.pipe().subscribe(function (size) {
+                //            
             });
         }
+        Object.defineProperty(GenericListComponent.prototype, "pepListContainer", {
+            set: function (val) {
+                this._pepListContainer = val;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(GenericListComponent.prototype, "dataSource", {
+            set: function (val) {
+                this._dataSource = val;
+                this.searchString = '';
+                this._sorting = undefined;
+                this.initTable();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(GenericListComponent.prototype, "noDataFoundMsg", {
+            set: function (val) {
+                this._tableInputs.noDataFoundMsg = val;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(GenericListComponent.prototype, "selectionType", {
+            set: function (val) {
+                this._tableInputs.selectionType = val;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(GenericListComponent.prototype, "supportSorting", {
+            set: function (val) {
+                this._tableInputs.supportSorting = val;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(GenericListComponent.prototype, "pager", {
+            set: function (val) {
+                this._tableInputs.pager = val;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(GenericListComponent.prototype, "pepList", {
+            get: function () {
+                return this._genericListService.pepList;
+            },
+            set: function (val) {
+                this._genericListService.pepList = val;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        GenericListComponent.prototype.ngOnInit = function () {
+            //
+        };
+        GenericListComponent.prototype.initTable = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_f) {
+                    setTimeout(function () { return __awaiter(_this, void 0, void 0, function () {
+                        var _a, _b, _c, _d, _e, factory, componentRef, tableInputs, fromIndex, toIndex, data, convertedList, uiControl;
+                        var _this = this;
+                        return __generator(this, function (_f) {
+                            switch (_f.label) {
+                                case 0:
+                                    if (!(this._dataSource &&
+                                        this._pepListContainer)) return [3 /*break*/, 3];
+                                    if (this._pepListContainer.length > 0) {
+                                        this._pepListContainer.remove();
+                                    }
+                                    factory = this._resolver.resolveComponentFactory(i6.PepListComponent);
+                                    componentRef = this._pepListContainer.createComponent(factory);
+                                    this.pepList = componentRef.instance;
+                                    return [4 /*yield*/, this.loadTableInputs()];
+                                case 1:
+                                    tableInputs = _f.sent();
+                                    fromIndex = 0;
+                                    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) || i6.DEFAULT_PAGE_SIZE) - 1;
+                                    }
+                                    else {
+                                        toIndex = 100; //TO DO - get reesult from - this.customList.getTopItems()
+                                    }
+                                    return [4 /*yield*/, this.loadData(fromIndex, toIndex)];
+                                case 2:
+                                    data = _f.sent();
+                                    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) || i6.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(function ($event) {
+                                        _this.onCustomizeFieldClick($event);
+                                    });
+                                    componentRef.instance.selectedItemsChange.subscribe(function ($event) {
+                                        _this.onSelectedItemsChanged($event);
+                                    });
+                                    componentRef.instance.loadItems.subscribe(function ($event) {
+                                        _this.onLoadItems($event);
+                                    });
+                                    componentRef.instance.loadPage.subscribe(function ($event) {
+                                        _this.onLoadPage($event);
+                                    });
+                                    componentRef.instance.valueChange.subscribe(function ($event) {
+                                        _this.onValueChanged($event);
+                                    });
+                                    componentRef.instance.sortingChange.subscribe(function ($event) {
+                                        _this.onSortingChange($event);
+                                    });
+                                    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);
+                                        }
+                                        uiControl = this.getUiControl(dataViews.DataViewConverter.toUIControlData(data.dataView));
+                                        componentRef.instance.initListData(uiControl, data.totalCount, convertedList);
+                                    }
+                                    _f.label = 3;
+                                case 3: return [2 /*return*/];
+                            }
+                        });
+                    }); }, 0);
+                    return [2 /*return*/];
+                });
+            });
+        };
+        /**
+        * checks if the object contains property
+        * @param obj object
+        * @param prop property name
+        * @returns true if contains, false otherwise
+        */
+        GenericListComponent.prototype.hasProperty = function (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
+         */
+        GenericListComponent.prototype.loadTableInputs = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var tableInputs, inputs;
+                var _this = this;
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
+                        case 0:
+                            tableInputs = Object.assign({}, this._tableInputs);
+                            if (!this._dataSource.inputs) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this._dataSource.inputs()];
+                        case 1:
+                            inputs = _f.sent();
+                            if (inputs) {
+                                Object.entries(inputs).forEach(function (item) {
+                                    if (_this.hasProperty(tableInputs, item[0])) {
+                                        tableInputs[item[0]] = item[1];
+                                    }
+                                });
+                            }
+                            _f.label = 2;
+                        case 2: return [2 /*return*/, tableInputs];
+                    }
+                });
+            });
+        };
+        GenericListComponent.prototype.getUiControl = function (data) {
+            var _this = this;
+            var uiControl = new i2.UIControl();
+            uiControl.ControlFields = [];
+            if (data === null || data === void 0 ? void 0 : data.ControlFields) {
+                uiControl.ControlFields = data.ControlFields.map(function (field) { return _this.convertToUiControlField(field); });
+            }
+            return uiControl;
+        };
         GenericListComponent.prototype.loadMenuItems = function () {
             var _this = this;
-            if (this.allowSelection) {
+            if (this._tableInputs.selectionType !== 'none') {
                 this.getMenuActions().then(function (x) { return _this.menuActions = x; });
             }
         };
         GenericListComponent.prototype.convertToPepRowData = function (object, dataView$1) {
-            var row = new i1.PepRowData();
+            var row = new i2.PepRowData();
+            row.UUID = object[this.uuidMapping] || undefined;
             row.Fields = [];
             if ((dataView$1 === null || dataView$1 === void 0 ? void 0 : dataView$1.Fields) && dataView$1.Columns) {
                 for (var index = 0; index < dataView$1.Fields.length; index++) {
                     var field = dataView$1.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(),
@@ -403,109 +665,214 @@
             }
             return row;
         };
+        GenericListComponent.prototype.convertToUiControlField = function (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,
+                }
+            };
+        };
         GenericListComponent.prototype.getMenuActions = function () {
-            var _a;
             return __awaiter(this, void 0, void 0, function () {
-                var actions, res;
+                var res, result, actions;
                 var _this = this;
-                return __generator(this, function (_d) {
-                    switch (_d.label) {
-                        case 0: return [4 /*yield*/, ((_a = this.dataSource) === null || _a === void 0 ? void 0 : _a.getActions(this.getMenuObjects()))];
-                        case 1:
-                            actions = _d.sent();
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
+                        case 0:
                             res = [];
+                            result = this.getMenuObjects();
+                            if (!result.success) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.actions.get(result.data)];
+                        case 1:
+                            actions = _f.sent();
                             this.menuHandlers = {};
                             actions === null || actions === void 0 ? void 0 : actions.forEach(function (item) {
-                                var uuid = i1.PepGuid.newGuid();
+                                var uuid = i2.PepGuid.newGuid();
                                 _this.menuHandlers[uuid] = item.handler;
                                 res.push({
                                     key: uuid,
                                     text: item.title
                                 });
                             });
-                            return [2 /*return*/, res];
+                            _f.label = 2;
+                        case 2: return [2 /*return*/, res];
                     }
                 });
             });
         };
         GenericListComponent.prototype.getMenuObjects = function () {
-            var _this = this;
-            var _a, _b, _c;
-            var 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(function (obj) { return obj.UID; }).filter(function (x) { return uuids.indexOf(x) != -1; });
+            var menuObjects = {
+                success: false,
+                data: new i6.PepSelectionData()
+            };
+            if (this.pepList) {
+                menuObjects.success = true;
+                menuObjects.data = this.pepList.getSelectedItemsData();
             }
-            var objects = uuids.map(function (uuid) { return _this.getObject(uuid); });
-            return objects;
+            return menuObjects;
         };
-        GenericListComponent.prototype.getObject = function (uuid) {
-            return this.dataObjects.find(function (obj) { return obj.UID === uuid; });
+        GenericListComponent.prototype.onActionItemClicked = function (action) {
+            var result = this.getMenuObjects();
+            if (result.success) {
+                this.menuHandlers[action.source.key](result.data);
+            }
         };
-        GenericListComponent.prototype.ngOnInit = function () {
+        GenericListComponent.prototype.onSearchChanged = function (event) {
+            this.searchString = event.value;
+            this.initTable();
+        };
+        GenericListComponent.prototype.onSelectedItemsChanged = function (selectedRowsCount) {
+            var _this = this;
+            //loading menu items after pep-list selected items are updated
+            setTimeout(function () {
+                _this.loadMenuItems();
+            }, 0);
         };
-        GenericListComponent.prototype.ngAfterViewInit = function () {
-            this.reload();
+        GenericListComponent.prototype.onCustomizeFieldClick = function (fieldClickEvent) {
+            this.fieldClick.emit(fieldClickEvent);
         };
-        GenericListComponent.prototype.onMenuItemClicked = function (action) {
-            this.menuHandlers[action.source.key](this.getMenuObjects());
+        GenericListComponent.prototype.onBreadCrumbItemClick = function (event) {
+            this.breadCrumbItemClick.emit(event);
         };
-        GenericListComponent.prototype.onSearchChanged = function (event) {
-            this.searchString = event.value;
-            this.reload();
+        GenericListComponent.prototype.onValueChanged = function (event) {
+            this.valueChange.emit(event);
+        };
+        GenericListComponent.prototype.onSortingChange = function (event) {
+            this._sorting = event;
+            this.initTable();
+        };
+        GenericListComponent.prototype.loadData = function (fromIndex, toIndex) {
+            var _a;
+            return __awaiter(this, void 0, void 0, function () {
+                var data;
+                var _this = this;
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
+                        case 0: return [4 /*yield*/, this._dataSource.init({
+                                searchString: this.searchString || undefined,
+                                sorting: this._sorting || undefined,
+                                fromIndex: fromIndex,
+                                toIndex: toIndex
+                            })];
+                        case 1:
+                            data = _f.sent();
+                            if (data) {
+                                this._dataView = data.dataView;
+                                if (((_a = data.items) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                                    data.items = data.items.map(function (item) { return _this.convertToPepRowData(item, data.dataView); });
+                                }
+                            }
+                            return [2 /*return*/, data];
+                    }
+                });
+            });
         };
-        GenericListComponent.prototype.reload = function () {
+        GenericListComponent.prototype.updateDataList = function (fromIndex, toIndex, pageIndex) {
+            if (pageIndex === void 0) { pageIndex = undefined; }
             return __awaiter(this, void 0, void 0, function () {
-                var _d, dataView_1, tableData, data, uiControl;
+                var dataList;
                 var _this = this;
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
-                            if (!(this.customList && this.dataSource)) return [3 /*break*/, 3];
-                            _d = this;
-                            return [4 /*yield*/, this.dataSource.getList({
-                                    searchString: this.searchString
+                            if (!this._dataSource.update) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this._dataSource.update({
+                                    searchString: this.searchString || undefined,
+                                    sorting: this._sorting || undefined,
+                                    fromIndex: fromIndex,
+                                    toIndex: toIndex,
+                                    pageIndex: pageIndex
                                 })];
                         case 1:
-                            _d.dataObjects = _e.sent();
-                            return [4 /*yield*/, this.dataSource.getDataView()];
-                        case 2:
-                            dataView_1 = _e.sent();
-                            tableData = this.dataObjects.map(function (x) { return _this.convertToPepRowData(x, dataView_1); });
-                            data = this.dataConvertorService.convertListData(tableData);
-                            data.forEach(function (obj, i) {
-                                _this.dataObjects[i].UID = obj.UID;
-                            });
-                            uiControl = this.dataConvertorService.getUiControl(tableData[0]);
-                            this.customList.initListData(uiControl, data.length, data);
-                            this.loadMenuItems();
-                            _e.label = 3;
+                            dataList = _f.sent();
+                            if ((dataList === null || dataList === void 0 ? void 0 : dataList.length) > 0) {
+                                return [2 /*return*/, dataList.map(function (item) { return _this.convertToPepRowData(item, _this._dataView); })];
+                            }
+                            else {
+                                return [2 /*return*/, []];
+                            }
+                            return [3 /*break*/, 3];
+                        case 2: return [2 /*return*/, []];
                         case 3: return [2 /*return*/];
                     }
                 });
             });
         };
-        GenericListComponent.prototype.selectedRowsChanged = function (selectedRowsCount) {
-            this.loadMenuItems();
+        /**
+         * loads virtual scroll items from api
+         */
+        GenericListComponent.prototype.onLoadItems = function (event) {
+            return __awaiter(this, void 0, void 0, function () {
+                var list, convertedList;
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
+                        case 0: return [4 /*yield*/, this.updateDataList(event.fromIndex, event.toIndex)];
+                        case 1:
+                            list = _f.sent();
+                            convertedList = this._dataConvertorService.convertListData(list);
+                            this.pepList.updateItems(convertedList, event);
+                            return [2 /*return*/];
+                    }
+                });
+            });
         };
-        GenericListComponent.prototype.onCustomizeFieldClick = function (fieldClickEvent) {
-            this.fieldClick.emit(fieldClickEvent);
+        /**
+         * loads paging bulk from api
+         */
+        GenericListComponent.prototype.onLoadPage = function (event) {
+            return __awaiter(this, void 0, void 0, function () {
+                var fromIndex, toIndex, list, convertedList;
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
+                        case 0:
+                            fromIndex = event.pageIndex * event.pageSize;
+                            toIndex = Math.min(fromIndex + event.pageSize - 1, this.totalRowCount - 1);
+                            return [4 /*yield*/, this.updateDataList(fromIndex, toIndex, event.pageIndex)];
+                        case 1:
+                            list = _f.sent();
+                            convertedList = this._dataConvertorService.convertListData(list);
+                            this.pepList.updatePage(convertedList, event);
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        GenericListComponent.prototype.ngOnDestroy = function () {
+            if (this._resize$) {
+                this._resize$.unsubscribe();
+            }
         };
         return GenericListComponent;
     }());
-    GenericListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: GenericListComponent, deps: [{ token: i1__namespace.PepDataConvertorService }, { token: i1__namespace.PepLayoutService }, { token: i2__namespace.TranslateService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    GenericListComponent.ɵcmp = i0__namespace.ɵɵ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: i5.PepListComponent, descendants: true }], ngImport: i0__namespace, 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__namespace.PepPageLayoutComponent, selector: "pep-page-layout", inputs: ["addPadding", "showShadow"] }, { type: i4__namespace.PepTopBarComponent, selector: "pep-top-bar", inputs: ["inline", "title"], outputs: ["footerStateChange"] }, { type: i5__namespace.PepListActionsComponent, selector: "pep-list-actions", inputs: ["actions", "sizeType", "xPosition", "hidden"], outputs: ["actionClick", "stateChange", "menuClick"] }, { type: i5__namespace.PepListTotalComponent, selector: "pep-list-total", inputs: ["totalRows", "totalAmount", "isMapView", "sizeType"] }, { type: i6__namespace.PepSearchComponent, selector: "pep-search", inputs: ["triggerOn", "autoCompleteTop", "shrinkInSmallScreen", "sizeType", "autoCompleteValues", "value", "searchControl", "useAsWebComponent"], outputs: ["search", "autocompleteChange", "stateChange"] }, { type: i5__namespace.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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    GenericListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: GenericListComponent, deps: [{ token: i0__namespace.ComponentFactoryResolver }, { token: PepGenericListService }, { token: i2__namespace.PepDataConvertorService }, { token: i2__namespace.PepLayoutService }, { token: i3__namespace.TranslateService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    GenericListComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ViewContainerRef }], ngImport: i0__namespace, 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__namespace.PepPageLayoutComponent, selector: "pep-page-layout", inputs: ["addPadding", "showShadow"] }, { type: i5__namespace.PepTopBarComponent, selector: "pep-top-bar", inputs: ["inline", "title"], outputs: ["footerStateChange"] }, { type: i6__namespace.PepListActionsComponent, selector: "pep-list-actions", inputs: ["actions", "sizeType", "xPosition", "hidden"], outputs: ["actionClick", "stateChange", "menuClick"] }, { type: i6__namespace.PepListTotalComponent, selector: "pep-list-total", inputs: ["totalRows", "totalAmount", "isMapView", "sizeType"] }, { type: i7__namespace.PepSearchComponent, selector: "pep-search", inputs: ["triggerOn", "autoCompleteTop", "sizeType", "autoCompleteValues", "shrink", "value", "searchControl", "useAsWebComponent"], outputs: ["search", "autocompleteChange", "stateChange"] }, { type: i8__namespace.PepBreadCrumbsComponent, selector: "pep-bread-crumbs", inputs: ["addSpacing", "items", "displayType"], outputs: ["itemClick"] }], directives: [{ type: i9__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: GenericListComponent, decorators: [{
                 type: i0.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__namespace.PepDataConvertorService }, { type: i1__namespace.PepLayoutService }, { type: i2__namespace.TranslateService }]; }, propDecorators: { customList: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.ComponentFactoryResolver }, { type: PepGenericListService }, { type: i2__namespace.PepDataConvertorService }, { type: i2__namespace.PepLayoutService }, { type: i3__namespace.TranslateService }]; }, propDecorators: { pepListContainer: [{
                     type: i0.ViewChild,
-                    args: [i5.PepListComponent]
+                    args: ['pepListContainer', { read: i0.ViewContainerRef }]
                 }], dataSource: [{
                     type: i0.Input
+                }], actions: [{
+                    type: i0.Input
+                }], uuidMapping: [{
+                    type: i0.Input
                 }], addPadding: [{
                     type: i0.Input
                 }], title: [{
@@ -514,14 +881,24 @@
                     type: i0.Input
                 }], showSearch: [{
                     type: i0.Input
-                }], allowSelection: [{
+                }], noDataFoundMsg: [{
                     type: i0.Input
-                }], noDataMessage: [{
+                }], selectionType: [{
                     type: i0.Input
-                }], allowMultipleSelection: [{
+                }], supportSorting: [{
+                    type: i0.Input
+                }], pager: [{
+                    type: i0.Input
+                }], showTopBar: [{
+                    type: i0.Input
+                }], breadCrumbsItems: [{
                     type: i0.Input
                 }], fieldClick: [{
                     type: i0.Output
+                }], valueChange: [{
+                    type: i0.Output
+                }], breadCrumbItemClick: [{
+                    type: i0.Output
                 }] } });
 
     var PepGenericListModule = /** @class */ (function () {
@@ -530,23 +907,27 @@
         return PepGenericListModule;
     }());
     PepGenericListModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepGenericListModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    PepGenericListModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepGenericListModule, declarations: [GenericListComponent], imports: [i7.CommonModule,
-            i1.PepNgxLibModule,
-            i5.PepListModule,
+    PepGenericListModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepGenericListModule, declarations: [GenericListComponent], imports: [i9.CommonModule,
+            i2.PepNgxLibModule,
+            i6.PepListModule,
             form.PepFormModule,
             menu.PepMenuModule,
-            i3.PepPageLayoutModule,
-            i4.PepTopBarModule,
-            i6.PepSearchModule], exports: [GenericListComponent] });
-    PepGenericListModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepGenericListModule, imports: [[
-                i7.CommonModule,
-                i1.PepNgxLibModule,
-                i5.PepListModule,
+            i4.PepPageLayoutModule,
+            i5.PepTopBarModule,
+            i7.PepSearchModule,
+            i8.PepBreadCrumbsModule], exports: [GenericListComponent] });
+    PepGenericListModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepGenericListModule, providers: [
+            PepGenericListService
+        ], imports: [[
+                i9.CommonModule,
+                i2.PepNgxLibModule,
+                i6.PepListModule,
                 form.PepFormModule,
                 menu.PepMenuModule,
-                i3.PepPageLayoutModule,
-                i4.PepTopBarModule,
-                i6.PepSearchModule
+                i4.PepPageLayoutModule,
+                i5.PepTopBarModule,
+                i7.PepSearchModule,
+                i8.PepBreadCrumbsModule
             ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepGenericListModule, decorators: [{
                 type: i0.NgModule,
@@ -555,16 +936,22 @@
                             GenericListComponent
                         ],
                         imports: [
-                            i7.CommonModule,
-                            i1.PepNgxLibModule,
-                            i5.PepListModule,
+                            i9.CommonModule,
+                            i2.PepNgxLibModule,
+                            i6.PepListModule,
                             form.PepFormModule,
                             menu.PepMenuModule,
-                            i3.PepPageLayoutModule,
-                            i4.PepTopBarModule,
-                            i6.PepSearchModule
+                            i4.PepPageLayoutModule,
+                            i5.PepTopBarModule,
+                            i7.PepSearchModule,
+                            i8.PepBreadCrumbsModule
+                        ],
+                        exports: [
+                            GenericListComponent
                         ],
-                        exports: [GenericListComponent],
+                        providers: [
+                            PepGenericListService
+                        ]
                     }]
             }] });
 
@@ -578,6 +965,7 @@
 
     exports.GenericListComponent = GenericListComponent;
     exports.PepGenericListModule = PepGenericListModule;
+    exports.PepGenericListService = PepGenericListService;
 
     Object.defineProperty(exports, '__esModule', { value: true });