@pepperi-addons/ngx-lib 0.4.2-beta.9 → 0.4.2-beta.91

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

@@ -1227,6 +1227,7 @@ class PepListComponent {
         this.cd = cd;
         this.renderer = renderer;
         this.zone = zone;
+        this.cacheSize = -1;
         this.noDataFoundMsg = null;
         this.selectionTypeForActions = 'multi';
         this.showCardSelection = false;
@@ -1288,6 +1289,7 @@ class PepListComponent {
         this.startX = 0;
         this.startWidth = 0;
         this.tableStartWidth = 0;
+        this.lastColumnsWidth = [];
         // For sorting
         this.isAsc = true;
         this.sortBy = '';
@@ -1302,6 +1304,16 @@ class PepListComponent {
             this.deviceHasMouse = deviceHasMouse;
         });
     }
+    set sorting(value) {
+        this.sortBy = value?.sortBy || '';
+        this.isAsc = value?.sortBy.length > 0 ? value.isAsc : true;
+    }
+    get sorting() {
+        return {
+            sortBy: this.sortBy,
+            isAsc: this.isAsc
+        };
+    }
     set viewType(value) {
         this._viewType = value;
         this.isTable = value === 'table';
@@ -1378,6 +1390,9 @@ class PepListComponent {
         // }
         this.saveSortingToSession();
     }
+    getCachedItemsNumber() {
+        return this.cacheSize >= 0 ? this.cacheSize : PepListComponent.TOP_ITEMS_ARRAY;
+    }
     getScrollingElement() {
         return this.parentScroll ? this.parentScroll : this.virtualScroller?.contentElementRef.nativeElement.parentElement;
     }
@@ -1433,11 +1448,13 @@ class PepListComponent {
             }
         }
     }
+    getSelectionCheckBoxWidth() {
+        return this.selectionTypeForActions === 'multi' ? 44 : 0;
+    }
     setContainerWidth() {
         if (!this.hostElement.nativeElement.parentElement) {
             return;
         }
-        const selectionCheckBoxWidth = this.selectionTypeForActions === 'multi' ? 44 : 0;
         const rowHeight = 40; // the table row height (2.5rem * 16font-size).
         const style = getComputedStyle(this.hostElement.nativeElement.parentElement);
         // The container-fluid class padding left + right + border
@@ -1450,7 +1467,7 @@ class PepListComponent {
             ? this.layoutService.getScrollbarWidth()
             : 0;
         // The selectionCheckBoxWidth width + containerFluidSpacing + this.tableScrollWidth.
-        const rowHeaderWidthToSub = containerFluidSpacing + selectionCheckBoxWidth + this.tableScrollWidth;
+        const rowHeaderWidthToSub = containerFluidSpacing + this.getSelectionCheckBoxWidth() + this.tableScrollWidth;
         this.containerWidth = parentContainer.offsetWidth - rowHeaderWidthToSub;
     }
     saveSortingToSession() {
@@ -1531,17 +1548,68 @@ class PepListComponent {
         if (!this.cd['destroyed']) {
             this.cd.detectChanges();
         }
-        // Set the columns width.
+        // Set the container width.
         if (this.containerWidth <= 0) {
             this.setContainerWidth();
         }
-        this.calcColumnsWidth();
+        const isLastColumnsWidthSet = this.setLastColumnsWidth();
+        // Set the layout only if the last columns width couldn't set.
+        if (!isLastColumnsWidthSet) {
+            this.calcColumnsWidth();
+        }
         this.checkForChanges = new Date().getTime();
     }
+    setLastColumnsWidth() {
+        let res = false;
+        let totalCalcColsWidth = 0;
+        let widthToSet = 'inherit';
+        if (this.lastColumnsWidth.length > 0) {
+            // Check if this is the same UI control for table.
+            if (this.lastColumnsWidth.length === this._layout.ControlFields.length) {
+                let uiControlsAreTheSame = true;
+                for (let index = 0; index < this._layout.ControlFields.length; index++) {
+                    const uiControlField = this._layout.ControlFields[index];
+                    if (uiControlField.ApiName !== this.lastColumnsWidth[index].columnAPIName) {
+                        uiControlsAreTheSame = false;
+                        break;
+                    }
+                }
+                if (uiControlsAreTheSame) {
+                    for (let index = 0; index < this._layout.ControlFields.length; index++) {
+                        const uiControlField = this._layout.ControlFields[index];
+                        uiControlField.calcColumnWidth = this.lastColumnsWidth[index].calcColumnWidth;
+                        uiControlField.calcTitleColumnWidthString = this.lastColumnsWidth[index].calcTitleColumnWidthString;
+                        uiControlField.calcColumnWidthString = this.lastColumnsWidth[index].calcColumnWidthString;
+                        totalCalcColsWidth += this.lastColumnsWidth[index].calcColumnWidth;
+                    }
+                    widthToSet = (totalCalcColsWidth + this.getSelectionCheckBoxWidth()) + 'px';
+                    console.log(`setLastColumnsWidth -> widthToSet: ${widthToSet} *** totalCalcColsWidth: ${totalCalcColsWidth}`);
+                    this.setColumnsWidth(widthToSet);
+                    res = true;
+                }
+            }
+        }
+        return res;
+    }
+    setColumnsWidth(widthToSet, wait = false) {
+        this.renderer.setStyle(this.hostElement.nativeElement, 'width', widthToSet);
+        // Do this only after UI is change cause the property isTable is Input and can refresh after this thread.
+        if (this.virtualScroller) {
+            this.renderer.setStyle(this.virtualScroller.contentElementRef.nativeElement, 'width', widthToSet === 'inherit' ? '100%' : widthToSet);
+        }
+        // Wait for delay to update properties in the last chosen and not this.
+        // await new Promise((resolve) => setTimeout(resolve, 0));
+        setTimeout(() => {
+            this.renderer.setStyle(this.hostElement.nativeElement, 'width', widthToSet);
+            // Do this only after UI is change cause the property isTable is Input and can refresh after this thread.
+            if (this.virtualScroller) {
+                this.renderer.setStyle(this.virtualScroller.contentElementRef.nativeElement, 'width', widthToSet === 'inherit' ? '100%' : widthToSet);
+            }
+        }, 0);
+    }
     calcColumnsWidth() {
         const fixedMultiple = 3.78; // for converting em to pixel.
         const length = this._layout.ControlFields.length;
-        const selectionCheckBoxWidth = this.selectionTypeForActions === 'multi' ? 44 : 0;
         // Is table AND there is at least one column of width type of percentage.
         if (this.isTable) {
             if (this._layout && this._layout.ControlFields) {
@@ -1557,6 +1625,7 @@ class PepListComponent {
             }
         }
         let totalCalcColsWidth = 0;
+        let widthToSet = 'inherit';
         // Calc by percentage
         if (this.hasColumnWidthOfTypePercentage) {
             const totalColsWidth = this._layout.ControlFields.map((cf) => cf.ColumnWidth).reduce((sum, current) => sum + current);
@@ -1572,7 +1641,6 @@ class PepListComponent {
                     totalCalcColsWidth += uiControlField.calcColumnWidth;
                 }
             }
-            this.renderer.setStyle(this.hostElement.nativeElement, 'width', 'inherit');
         }
         else {
             for (let index = 0; index < length; index++) {
@@ -1580,16 +1648,17 @@ class PepListComponent {
                     .ControlFields[index];
                 const currentFixedWidth = Math.floor(uiControlField.ColumnWidth * fixedMultiple);
                 if (index === length - 1) {
-                    uiControlField.calcTitleColumnWidthString = currentFixedWidth + 'px';
-                    uiControlField.calcColumnWidthString = currentFixedWidth + 'px';
+                    uiControlField.calcTitleColumnWidthString = uiControlField.calcColumnWidthString = currentFixedWidth + 'px';
                 }
                 else {
                     uiControlField.calcTitleColumnWidthString = uiControlField.calcColumnWidthString = currentFixedWidth + 'px';
                 }
                 totalCalcColsWidth += currentFixedWidth;
             }
-            this.renderer.setStyle(this.hostElement.nativeElement, 'width', totalCalcColsWidth + selectionCheckBoxWidth + 'px');
+            widthToSet = (totalCalcColsWidth + this.getSelectionCheckBoxWidth()) + 'px';
         }
+        console.log(`calcColumnsWidth -> widthToSet: ${widthToSet} *** totalCalcColsWidth: ${totalCalcColsWidth}`);
+        this.setColumnsWidth(widthToSet);
     }
     calcObjectHeight() {
         setTimeout(() => {
@@ -1991,6 +2060,9 @@ class PepListComponent {
                 }
             }
         }
+        if (!this.isTable) {
+            this.lastColumnsWidth = [];
+        }
         this.setLayout();
         // setTimeout(() => {
         this.onListLoad();
@@ -2001,7 +2073,7 @@ class PepListComponent {
             return; // Event isn't supplied.
         }
         // Clean array
-        if (this.itemsCounter + items.length > PepListComponent.TOP_ITEMS_ARRAY) {
+        if (this.itemsCounter + items.length > this.getCachedItemsNumber()) {
             this.cleanItems();
         }
         const startIndex = event.fromIndex ?? 0;
@@ -2018,7 +2090,7 @@ class PepListComponent {
             return; // Event isn't supplied.
         }
         // Clean array
-        if (this.itemsCounter + items.length > PepListComponent.TOP_ITEMS_ARRAY) {
+        if (this.itemsCounter + items.length > this.getCachedItemsNumber()) {
             this.cleanItems();
         }
         // const loadInChunks = this.itemsCounter === 0;
@@ -2115,13 +2187,15 @@ class PepListComponent {
     onWinResize(e) {
         this.refresh();
         this.containerWidth = 0;
+        this.lastColumnsWidth = [];
         this.setLayout();
     }
     onListResizeStart(event, columnKey) {
         this.pressedColumn = columnKey;
         this.startX = event.x;
         this.startWidth = event.target.closest('.header-column').offsetWidth;
-        this.tableStartWidth = this.virtualScroller?.contentElementRef.nativeElement.offsetWidth;
+        this.tableStartWidth = this.hostElement.nativeElement.offsetWidth; // this.virtualScroller?.contentElementRef.nativeElement.offsetWidth;
+        console.log(`tableStartWidth - ${this.tableStartWidth}`);
     }
     onListResize(event) {
         if (this.pressedColumn.length > 0) {
@@ -2154,9 +2228,11 @@ class PepListComponent {
                     }
                     totalCalcColsWidth += uiControlField.calcColumnWidth;
                 }
-                this.renderer.setStyle(this.hostElement.nativeElement, 'width', this.tableStartWidth + widthToAdd + 'px');
+                const widthToSet = (this.tableStartWidth + (widthToAdd * 2)) + 'px';
+                console.log(`onListResize -> widthToSet: ${widthToSet} *** widthToAdd: ${widthToAdd}`);
+                this.setColumnsWidth(widthToSet);
+                this.checkForChanges = new Date().getTime();
             }
-            this.checkForChanges = new Date().getTime();
         }
     }
     onListResizeEnd(event) {
@@ -2171,6 +2247,17 @@ class PepListComponent {
                     this.initResizeData();
                 }, 0);
             }
+            this.lastColumnsWidth = [];
+            // Set the last columns width
+            for (let index = 0; index < this._layout.ControlFields.length; index++) {
+                const uiControlField = this._layout.ControlFields[index];
+                this.lastColumnsWidth.push({
+                    columnAPIName: uiControlField.ApiName,
+                    calcColumnWidth: uiControlField.calcColumnWidth,
+                    calcTitleColumnWidthString: uiControlField.calcTitleColumnWidthString,
+                    calcColumnWidthString: uiControlField.calcColumnWidthString
+                });
+            }
             event.stopPropagation();
         }
     }
@@ -2306,15 +2393,19 @@ PepListComponent.UN_SELECTED_ITEMS_STATE_KEY = 'UnSelectedItems';
 PepListComponent.ALL_SELECTED_STATE_KEY = 'AllSelected';
 PepListComponent.SORT_BY_STATE_KEY = 'SortBy';
 PepListComponent.ASCENDING_STATE_KEY = 'IsAscending';
-PepListComponent.MINIMUM_COLUMN_WIDTH = 48;
+PepListComponent.MINIMUM_COLUMN_WIDTH = 72;
 PepListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListComponent, deps: [{ token: i0.ElementRef }, { token: i1.PepLayoutService }, { token: i1.PepSessionService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PepListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListComponent, selector: "pep-list", inputs: { noDataFoundMsg: "noDataFoundMsg", selectionTypeForActions: "selectionTypeForActions", showCardSelection: "showCardSelection", hideAllSelectionInMulti: "hideAllSelectionInMulti", cardSize: "cardSize", tableViewType: "tableViewType", viewType: "viewType", firstFieldAsLink: "firstFieldAsLink", supportSorting: "supportSorting", supportResizing: "supportResizing", parentScroll: "parentScroll", disabled: "disabled", lockEvents: "lockEvents", lockItemInnerEvents: "lockItemInnerEvents", printMode: "printMode", isReport: "isReport", zebraStripes: "zebraStripes", totalsRow: "totalsRow", pagerType: "pagerType", pageSize: "pageSize", pageIndex: "pageIndex", bufferAmount: "bufferAmount", scrollAnimationTime: "scrollAnimationTime", scrollDebounceTime: "scrollDebounceTime", scrollThrottlingTime: "scrollThrottlingTime", useAsWebComponent: "useAsWebComponent" }, outputs: { itemClick: "itemClick", fieldClick: "fieldClick", valueChange: "valueChange", sortingChange: "sortingChange", selectedItemsChange: "selectedItemsChange", selectedItemChange: "selectedItemChange", selectAllClick: "selectAllClick", listLoad: "listLoad", loadItems: "loadItems", loadPage: "loadPage", startIndexChange: "startIndexChange" }, host: { listeners: { "window:resize": "onWinResize($event)" } }, viewQueries: [{ propertyName: "virtualScroller", first: true, predicate: VirtualScrollerComponent, descendants: true }, { propertyName: "selectAllCB", first: true, predicate: ["selectAllCB"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"totalRows == 0\">\n    <ng-container *ngIf=\"noDataFoundMsg; then noDataMsgInputBlock; else noDataMsgDefaultBlock\"></ng-container>\n    <ng-template #noDataMsgInputBlock>\n        <div class=\"pep-border-bottom\">\n            <p class=\"title-xl no-data\">\n                {{ noDataFoundMsg }}\n            </p>\n        </div>\n    </ng-template>\n    <ng-template #noDataMsgDefaultBlock>\n        <div class=\"pep-border-bottom\">\n            <p class=\"title-xl no-data\">\n                {{ 'LIST.NO_DATA_FOUND' | translate}}\n            </p>\n        </div>\n        <div class=\"no-data-suggestions\">\n            <p class=\"suggestions-title title-lg\">\n                {{ 'LIST.NO_DATA_FOUND_SUGGESTIONS_TITLE' | translate}}\n            </p>\n            <ul class=\"suggestions-list body-lg\" [innerHtml]=\"'LIST.NO_DATA_FOUND_SUGGESTIONS_LIST' | translate\"></ul>\n        </div>\n    </ng-template>\n</ng-container>\n<ng-container *ngIf=\"totalRows > 0\">\n    <ng-container *ngTemplateOutlet=\"tableHeader\"></ng-container>\n\n    <!-- (vsChildRectChange)=\"onChildRectChange($event)\" -->\n    <virtual-scroller #scroller [items]=\"pagerType === 'pages' ? currentPageItems : items\"\n        [scrollDebounceTime]=\"scrollDebounceTime\" [scrollThrottlingTime]=\"scrollThrottlingTime\"\n        [bufferAmount]=\"printMode ? totalRows : bufferAmount\" [parentScroll]=\"parentScroll\" [disable]=\"loadingItemsFromApi\"\n        class=\"virtual-scroller\" [ngClass]=\"{ 'table-body': isTable, 'cards-body': !isTable }\"\n        (vsChange)=\"onVirtualScrollerChange($event)\" >\n        <ng-container *ngFor=\"let item of scroller.viewPortItems; let index = index; let isFirst = first;\">\n            <ng-container *ngTemplateOutlet=\"listData; context: {item: item, index:index}\"></ng-container>\n        </ng-container>\n    </virtual-scroller>\n\n    <pep-list-pager *ngIf=\"pagerType === 'pages'\" class=\" list-pager\" [disabled]=\"loadingItemsFromApi\"\n        [length]=\"totalRows\" [pageSize]=\"pageSize\" [pageIndex]=\"pageIndex\" (pagerChange)=\"onPagerChange($event)\">\n    </pep-list-pager>\n\n    <ng-container *ngTemplateOutlet=\"tableTotal\"></ng-container>\n</ng-container>\n\n<ng-template #listData let-item=\"item\" let-index=\"index\">\n    <ng-container *ngIf=\"isTable\">\n        <!-- getIsItemSelected(item) -> item | isItemSelected: selectionTypeForActions : selectedItemId : isAllSelected : selectedItems : unSelectedItems -->\n        <div class=\"table-row\" (mouseenter)=\"onTableRowMouseEnter($event, item?.UID, item?.Type)\" \n            (mouseleave)=\"onTableRowMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\n                'compact-view': tableViewType === 'compact',\n                even: zebraStripes && index % 2 !== 0,\n                selected: getIsItemSelected(item),\n                highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId}\" [ngStyle]=\"{ visibility: !loadingItemsFromApi || item ? 'visible' : 'hidden' }\">\n            <fieldset class=\"table-row-fieldset\" [ngStyle]=\"{ 'background-color': item?.BackgroundColor }\">\n                <mat-checkbox *ngIf=\"selectionTypeForActions == 'multi'\" type=\"checkbox\"\n                    class=\"pull-left flip row-selection\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n                    [disabled]=\"getisItemDisabled(item)\" [ngStyle]=\"{\n                            visibility: !deviceHasMouse ||\n                            item?.UID + SEPARATOR + item?.Type === hoveredItemId || isAllSelected || selectedItems.size > 0 ? 'visible' : 'hidden'\n                        }\" [checked]=\"getIsItemSelected(item)\"\n                    (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n                </mat-checkbox>\n                <mat-radio-button *ngIf=\"selectionTypeForActions == 'single'\" name=\"selection\"\n                    class=\"pull-left flip row-selection pep-radio-button\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n                    [disabled]=\"getisItemDisabled(item)\"\n                    [checked]=\"getIsItemSelected(item)\"\n                    (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n                </mat-radio-button>\n                <pep-form [layoutType]=\"'table'\" [checkForChanges]=\"checkForChanges\" [layout]=\"layout\"\n                    [firstFieldAsLink]=\"firstFieldAsLink\" [data]=\"item\" [canEditObject]=\"!disabled\"\n                    [lockEvents]=\"lockItemInnerEvents || printMode\" [isReport]=\"isReport\" [isActive]=\"\n                            (item?.UID + SEPARATOR + item?.Type === selectedItemId ||\n                            item?.UID + SEPARATOR + item?.Type === hoveredItemId) && deviceHasMouse\n                        \" (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\"\n                    (click)=\"itemClicked($event, item)\">\n                </pep-form>\n            </fieldset>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!isTable\">\n        <div (mouseenter)=\"onCardMouseEnter($event, item?.UID, item?.Type)\"\n            (mouseleave)=\"onCardMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\n                    selected: getIsItemSelected(item),\n                    highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId,\n                    'line-view': viewType === 'lines',\n                    'card-view': viewType === 'cards',\n                    'small-card': cardSize === 'sm'\n                }\" class=\"pull-left flip\"\n            [ngStyle]=\"{ height: calculatedObjectHeight, visibility: !loadingItemsFromApi || item ? 'visible' : 'hidden' }\">\n            <mat-checkbox *ngIf=\"showCardSelection\" class=\"pull-left flip card-selection\"\n                [disabled]=\"getisItemDisabled(item)\" [checked]=\"getIsItemSelected(item)\"\n                (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n            </mat-checkbox>\n            <pep-form [layoutType]=\"'card'\" [firstFieldAsLink]=\"firstFieldAsLink\" [checkForChanges]=\"checkForChanges\"\n                [layout]=\"layout\" [data]=\"item\" [canEditObject]=\"!disabled\"\n                [lockEvents]=\"lockItemInnerEvents || printMode\" [isActive]=\"\n                        (item?.UID + SEPARATOR + item?.Type === selectedItemId ||\n                        item?.UID + SEPARATOR + item?.Type === hoveredItemId) && deviceHasMouse\n                    \" (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\"\n                (click)=\"itemClicked($event, item)\">\n            </pep-form>\n        </div>\n    </ng-container>\n</ng-template>\n\n<ng-template #tableHeader>\n    <div *ngIf=\"isTable\" class=\"table-header\" (mouseup)=\"onListResizeEnd($event)\"\n        (mouseenter)=\"onListHeaderMouseEnter($event)\" (mouseleave)=\"onListHeaderMouseLeave($event)\"\n        (mousemove)=\"onListResize($event)\">\n\n        <div class=\"table-header-padding-top\"></div>\n        <fieldset class=\"table-header-fieldset\">\n            <mat-checkbox *ngIf=\"selectionTypeForActions !== 'none'\" #selectAllCB class=\"pull-left flip row-selection\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n                type=\"checkbox\" [ngStyle]=\"{\n                        visibility:\n                            selectionTypeForActions == 'single' || \n                            (selectionTypeForActions == 'multi' && hideAllSelectionInMulti) ? 'hidden' : 'visible'\n                    }\"\n                [indeterminate]=\"isAllSelected ? unSelectedItems.size > 0 && unSelectedItems.size < totalRows : (selectedItems.size > 0 && !getIsAllSelectedForActions())\"\n                [disabled]=\"disabled || selectionTypeForActions === 'single'\" [checked]=\"getIsAllSelectedForActions()\"\n                (change)=\"selectAllItemsForActions($event)\"></mat-checkbox>\n            <fieldset>\n                <div *ngFor=\"let field of layout?.ControlFields; let j = index\" class=\"header-column pull-left flip\"\n                    [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\" [ngClass]=\"{\n                            'compact-view': tableViewType === 'compact',\n                            'support-sorting': supportSorting,\n                            'has-sorting': field.ApiName === sortBy,\n                            'is-resizing': field.ApiName === pressedColumn,\n                            'is-first': j === 0 && selectionTypeForActions !== 'multi',\n                            'is-last': j === layout?.ControlFields?.length - 1\n                        }\"\n                    (click)=\"supportSorting ? (onListSortingChange(field.ApiName, sortBy !== null && sortBy != field.ApiName ? true : !isAsc, $event)) : false\">\n\n                    <label id=\"{{ field.ApiName }}\"\n                        class=\"header-label body-sm pull-left flip text-align-{{ field.Layout.XAlignment }}\"\n                        title=\"{{ field.Title }}\">\n                        <span *ngIf=\"field.Mandatory\" class=\"mandatory\">\n                            <pep-icon name=\"system_must\"></pep-icon>\n                        </span>\n                        {{ field.Title != '' ? field.Title : ' '}}\n                    </label>\n\n                    <div *ngIf=\"supportResizing\" class=\"resize-box pull-right flip\"\n                        (mousedown)=\"onListResizeStart($event, field.ApiName)\">\n                        <div class=\"splitter\"></div>\n                    </div>\n\n                    <div *ngIf=\"supportSorting\" class=\"sorting-box pull-left flip\"\n                        [ngClass]=\"{ 'has-sorting': field.ApiName === sortBy }\">\n                        <mat-icon *ngIf=\"field.ApiName !== sortBy\">\n                            <pep-icon name=\"arrow_either\" class=\"asc\"></pep-icon>\n                        </mat-icon>\n                        <ng-container *ngIf=\"field.ApiName === sortBy\">\n                            <mat-icon *ngIf=\"!isAsc\" [ngClass]=\"{ 'sort-by': field.ApiName === sortBy && isAsc }\"\n                                title=\"{{ 'LIST.SORT_ASC' | translate }}\">\n                                <pep-icon name=\"arrow_up\" class=\"asc\"></pep-icon>\n                            </mat-icon>\n                            <mat-icon *ngIf=\"isAsc\" [ngClass]=\"{ 'sort-by': field.ApiName === sortBy && !isAsc }\"\n                                title=\"{{ 'LIST.SORT_DESC' | translate }}\">\n                                <pep-icon name=\"arrow_down\" class=\"desc\"></pep-icon>\n                            </mat-icon>\n                        </ng-container>\n                    </div>\n                </div>\n            </fieldset>\n        </fieldset>\n    </div>\n</ng-template>\n\n<ng-template #tableTotal>\n    <div *ngIf=\"isTable && totalsRow?.length > 0 && totalsRow.length <= layout?.ControlFields.length\"\n        class=\"table-total\">\n        <fieldset class=\"table-header-fieldset\">\n            <div *ngFor=\"let field of layout?.ControlFields; let j = index\" class=\"total-column pull-left flip\"\n                [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\">\n                <label class=\"total-label body-sm text-align-{{ field.Layout.XAlignment }}\">\n                    {{ totalsRow[j] }}\n                </label>\n            </div>\n        </fieldset>\n    </div>\n</ng-template>", styles: [":host{height:inherit;display:flex;flex-direction:column}.no-data{margin:var(--pep-spacing-2xl, 2rem) 0}.no-data-suggestions .suggestions-title{margin:var(--pep-spacing-lg, 1rem) 0 var(--pep-spacing-sm, .5rem)}.no-data-suggestions .suggestions-list{margin:0;padding:0;padding-inline-start:var(--pep-spacing-2xl, 2rem)}.virtual-scroller{min-height:5rem;height:inherit}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4$1.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i7.PepFormComponent, selector: "pep-form", inputs: ["isInternal", "isReport", "layout", "lockEvents", "canEditObject", "data", "lockFields", "isActive", "layoutType", "objectId", "parentId", "searchCode", "showTitle", "firstFieldAsLink", "checkForChanges"], outputs: ["valueChange", "formValidationChange", "fieldClick", "internalFormFieldClick", "internalFormFieldChange"] }, { kind: "component", type: VirtualScrollerComponent, selector: "virtual-scroller,[virtualScroller]", inputs: ["disable", "executeRefreshOutsideAngularZone", "enableUnequalChildrenSizes", "RTL", "useMarginInsteadOfTranslate", "modifyOverflowStyleOfParentScroll", "stripedTable", "scrollbarWidth", "scrollbarHeight", "childWidth", "childHeight", "ssrChildWidth", "ssrChildHeight", "ssrViewportWidth", "ssrViewportHeight", "bufferAmount", "scrollAnimationTime", "resizeBypassRefreshThreshold", "scrollThrottlingTime", "scrollDebounceTime", "checkResizeInterval", "items", "compareItems", "horizontal", "parentScroll"], outputs: ["vsChildRectChange", "vsUpdate", "vsChange", "vsStart", "vsEnd"], exportAs: ["virtualScroller"] }, { kind: "component", type: PepListPagerComponent, selector: "pep-list-pager", inputs: ["disabled", "pageIndex", "length", "pageSize"], outputs: ["pagerChange"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+PepListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListComponent, selector: "pep-list", inputs: { sorting: "sorting", cacheSize: "cacheSize", noDataFoundMsg: "noDataFoundMsg", selectionTypeForActions: "selectionTypeForActions", showCardSelection: "showCardSelection", hideAllSelectionInMulti: "hideAllSelectionInMulti", cardSize: "cardSize", tableViewType: "tableViewType", viewType: "viewType", firstFieldAsLink: "firstFieldAsLink", supportSorting: "supportSorting", supportResizing: "supportResizing", parentScroll: "parentScroll", disabled: "disabled", lockEvents: "lockEvents", lockItemInnerEvents: "lockItemInnerEvents", printMode: "printMode", isReport: "isReport", zebraStripes: "zebraStripes", totalsRow: "totalsRow", pagerType: "pagerType", pageSize: "pageSize", pageIndex: "pageIndex", bufferAmount: "bufferAmount", scrollAnimationTime: "scrollAnimationTime", scrollDebounceTime: "scrollDebounceTime", scrollThrottlingTime: "scrollThrottlingTime", useAsWebComponent: "useAsWebComponent" }, outputs: { itemClick: "itemClick", fieldClick: "fieldClick", valueChange: "valueChange", sortingChange: "sortingChange", selectedItemsChange: "selectedItemsChange", selectedItemChange: "selectedItemChange", selectAllClick: "selectAllClick", listLoad: "listLoad", loadItems: "loadItems", loadPage: "loadPage", startIndexChange: "startIndexChange" }, host: { listeners: { "window:resize": "onWinResize($event)" } }, viewQueries: [{ propertyName: "virtualScroller", first: true, predicate: VirtualScrollerComponent, descendants: true }, { propertyName: "selectAllCB", first: true, predicate: ["selectAllCB"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"totalRows == 0\">\n    <ng-container *ngIf=\"noDataFoundMsg; then noDataMsgInputBlock; else noDataMsgDefaultBlock\"></ng-container>\n    <ng-template #noDataMsgInputBlock>\n        <div class=\"pep-border-bottom\">\n            <p class=\"title-xl no-data\">\n                {{ noDataFoundMsg }}\n            </p>\n        </div>\n    </ng-template>\n    <ng-template #noDataMsgDefaultBlock>\n        <div class=\"pep-border-bottom\">\n            <p class=\"title-xl no-data\">\n                {{ 'LIST.NO_DATA_FOUND' | translate}}\n            </p>\n        </div>\n        <div class=\"no-data-suggestions\">\n            <p class=\"suggestions-title title-lg\">\n                {{ 'LIST.NO_DATA_FOUND_SUGGESTIONS_TITLE' | translate}}\n            </p>\n            <ul class=\"suggestions-list body-lg\" [innerHtml]=\"'LIST.NO_DATA_FOUND_SUGGESTIONS_LIST' | translate\"></ul>\n        </div>\n    </ng-template>\n</ng-container>\n<ng-container *ngIf=\"totalRows > 0\">\n    <ng-container *ngTemplateOutlet=\"tableHeader\"></ng-container>\n\n    <!-- (vsChildRectChange)=\"onChildRectChange($event)\" -->\n    <virtual-scroller #scroller [items]=\"pagerType === 'pages' ? currentPageItems : items\"\n        [scrollDebounceTime]=\"scrollDebounceTime\" [scrollThrottlingTime]=\"scrollThrottlingTime\"\n        [bufferAmount]=\"printMode ? totalRows : bufferAmount\" [parentScroll]=\"parentScroll\" [disable]=\"loadingItemsFromApi\"\n        class=\"virtual-scroller\" [ngClass]=\"{ 'table-body': isTable, 'cards-body': !isTable }\"\n        (vsChange)=\"onVirtualScrollerChange($event)\" >\n        <ng-container *ngFor=\"let item of scroller.viewPortItems; let index = index; let isFirst = first;\">\n            <ng-container *ngTemplateOutlet=\"listData; context: {item: item, index:index}\"></ng-container>\n        </ng-container>\n    </virtual-scroller>\n\n    <pep-list-pager *ngIf=\"pagerType === 'pages'\" class=\" list-pager\" [disabled]=\"loadingItemsFromApi\"\n        [length]=\"totalRows\" [pageSize]=\"pageSize\" [pageIndex]=\"pageIndex\" (pagerChange)=\"onPagerChange($event)\">\n    </pep-list-pager>\n\n    <ng-container *ngTemplateOutlet=\"tableTotal\"></ng-container>\n</ng-container>\n\n<ng-template #listData let-item=\"item\" let-index=\"index\">\n    <ng-container *ngIf=\"isTable\">\n        <!-- getIsItemSelected(item) -> item | isItemSelected: selectionTypeForActions : selectedItemId : isAllSelected : selectedItems : unSelectedItems -->\n        <div class=\"table-row\" (mouseenter)=\"onTableRowMouseEnter($event, item?.UID, item?.Type)\" \n            (mouseleave)=\"onTableRowMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\n                'compact-view': tableViewType === 'compact',\n                even: zebraStripes && index % 2 !== 0,\n                selected: getIsItemSelected(item),\n                highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId}\" [ngStyle]=\"{ visibility: !loadingItemsFromApi || item ? 'visible' : 'hidden' }\">\n            <fieldset class=\"table-row-fieldset\" [ngStyle]=\"{ 'background-color': item?.BackgroundColor }\">\n                <mat-checkbox *ngIf=\"selectionTypeForActions == 'multi'\" type=\"checkbox\"\n                    class=\"pull-left flip row-selection\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n                    [disabled]=\"getisItemDisabled(item)\" [ngStyle]=\"{\n                            visibility: !deviceHasMouse ||\n                            item?.UID + SEPARATOR + item?.Type === hoveredItemId || isAllSelected || selectedItems.size > 0 ? 'visible' : 'hidden'\n                        }\" [checked]=\"getIsItemSelected(item)\"\n                    (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n                </mat-checkbox>\n                <mat-radio-button *ngIf=\"selectionTypeForActions == 'single'\" name=\"selection\"\n                    class=\"pull-left flip row-selection pep-radio-button\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n                    [disabled]=\"getisItemDisabled(item)\"\n                    [checked]=\"getIsItemSelected(item)\"\n                    (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n                </mat-radio-button>\n                <pep-form [layoutType]=\"'table'\" [checkForChanges]=\"checkForChanges\" [layout]=\"layout\"\n                    [firstFieldAsLink]=\"firstFieldAsLink\" [data]=\"item\" [canEditObject]=\"!disabled\"\n                    [lockEvents]=\"lockItemInnerEvents || printMode\" [isReport]=\"isReport\" [isActive]=\"\n                            (item?.UID + SEPARATOR + item?.Type === selectedItemId ||\n                            item?.UID + SEPARATOR + item?.Type === hoveredItemId) && deviceHasMouse\n                        \" (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\"\n                    (click)=\"itemClicked($event, item)\">\n                </pep-form>\n            </fieldset>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!isTable\">\n        <div (mouseenter)=\"onCardMouseEnter($event, item?.UID, item?.Type)\"\n            (mouseleave)=\"onCardMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\n                    selected: getIsItemSelected(item),\n                    highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId,\n                    'line-view': viewType === 'lines',\n                    'card-view': viewType === 'cards',\n                    'small-card': cardSize === 'sm'\n                }\" class=\"pull-left flip\"\n            [ngStyle]=\"{ height: calculatedObjectHeight, visibility: !loadingItemsFromApi || item ? 'visible' : 'hidden' }\">\n            <mat-checkbox *ngIf=\"showCardSelection\" class=\"pull-left flip card-selection\"\n                [disabled]=\"getisItemDisabled(item)\" [checked]=\"getIsItemSelected(item)\"\n                (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n            </mat-checkbox>\n            <pep-form [layoutType]=\"'card'\" [firstFieldAsLink]=\"firstFieldAsLink\" [checkForChanges]=\"checkForChanges\"\n                [layout]=\"layout\" [data]=\"item\" [canEditObject]=\"!disabled\"\n                [lockEvents]=\"lockItemInnerEvents || printMode\" [isActive]=\"\n                        (item?.UID + SEPARATOR + item?.Type === selectedItemId ||\n                        item?.UID + SEPARATOR + item?.Type === hoveredItemId) && deviceHasMouse\n                    \" (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\"\n                (click)=\"itemClicked($event, item)\">\n            </pep-form>\n        </div>\n    </ng-container>\n</ng-template>\n\n<ng-template #tableHeader>\n    <div *ngIf=\"isTable\" class=\"table-header\" (mouseup)=\"onListResizeEnd($event)\"\n        (mouseenter)=\"onListHeaderMouseEnter($event)\" (mouseleave)=\"onListHeaderMouseLeave($event)\"\n        (mousemove)=\"onListResize($event)\">\n\n        <div class=\"table-header-padding-top\"></div>\n        <fieldset class=\"table-header-fieldset\">\n            <mat-checkbox *ngIf=\"selectionTypeForActions !== 'none'\" #selectAllCB class=\"pull-left flip row-selection\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n                type=\"checkbox\" [ngStyle]=\"{\n                        visibility:\n                            selectionTypeForActions == 'single' || \n                            (selectionTypeForActions == 'multi' && hideAllSelectionInMulti) ? 'hidden' : 'visible'\n                    }\"\n                [indeterminate]=\"isAllSelected ? unSelectedItems.size > 0 && unSelectedItems.size < totalRows : (selectedItems.size > 0 && !getIsAllSelectedForActions())\"\n                [disabled]=\"disabled || selectionTypeForActions === 'single'\" [checked]=\"getIsAllSelectedForActions()\"\n                (change)=\"selectAllItemsForActions($event)\"></mat-checkbox>\n            <fieldset>\n                <div *ngFor=\"let field of layout?.ControlFields; let j = index\" class=\"header-column pull-left flip\"\n                    [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\" [ngClass]=\"{\n                            'compact-view': tableViewType === 'compact',\n                            'support-sorting': supportSorting,\n                            'has-sorting': field.ApiName === sortBy,\n                            'is-resizing': field.ApiName === pressedColumn,\n                            'is-first': j === 0 && selectionTypeForActions !== 'multi',\n                            'is-last': j === layout?.ControlFields?.length - 1\n                        }\"\n                    (click)=\"supportSorting ? (onListSortingChange(field.ApiName, sortBy !== null && sortBy != field.ApiName ? true : !isAsc, $event)) : false\">\n\n                    <label id=\"{{ field.ApiName }}\"\n                        class=\"header-label body-sm pull-left flip text-align-{{ field.Layout.XAlignment }}\"\n                        title=\"{{ field.Title }}\">\n                        <span *ngIf=\"field.Mandatory\" class=\"mandatory\">\n                            <pep-icon name=\"system_must\"></pep-icon>\n                        </span>\n                        {{ field.Title != '' ? field.Title : ' '}}\n                    </label>\n\n                    <div *ngIf=\"supportResizing\" class=\"resize-box pull-right flip\"\n                        (mousedown)=\"onListResizeStart($event, field.ApiName)\">\n                        <div class=\"splitter\"></div>\n                    </div>\n\n                    <div *ngIf=\"supportSorting\" class=\"sorting-box pull-left flip\"\n                        [ngClass]=\"{ 'has-sorting': field.ApiName === sortBy }\">\n                        <mat-icon *ngIf=\"field.ApiName !== sortBy\">\n                            <pep-icon name=\"arrow_either\" class=\"asc\"></pep-icon>\n                        </mat-icon>\n                        <ng-container *ngIf=\"field.ApiName === sortBy\">\n                            <mat-icon *ngIf=\"!isAsc\" [ngClass]=\"{ 'sort-by': field.ApiName === sortBy && isAsc }\"\n                                title=\"{{ 'LIST.SORT_ASC' | translate }}\">\n                                <pep-icon name=\"arrow_up\" class=\"asc\"></pep-icon>\n                            </mat-icon>\n                            <mat-icon *ngIf=\"isAsc\" [ngClass]=\"{ 'sort-by': field.ApiName === sortBy && !isAsc }\"\n                                title=\"{{ 'LIST.SORT_DESC' | translate }}\">\n                                <pep-icon name=\"arrow_down\" class=\"desc\"></pep-icon>\n                            </mat-icon>\n                        </ng-container>\n                    </div>\n                </div>\n            </fieldset>\n        </fieldset>\n    </div>\n</ng-template>\n\n<ng-template #tableTotal>\n    <div *ngIf=\"isTable && totalsRow?.length > 0 && totalsRow.length <= layout?.ControlFields.length\"\n        class=\"table-total\">\n        <fieldset class=\"table-header-fieldset\">\n            <div *ngFor=\"let field of layout?.ControlFields; let j = index\" class=\"total-column pull-left flip\"\n                [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\">\n                <label class=\"total-label body-sm text-align-{{ field.Layout.XAlignment }}\">\n                    {{ totalsRow[j] }}\n                </label>\n            </div>\n        </fieldset>\n    </div>\n</ng-template>", styles: [":host{height:inherit;display:flex;flex-direction:column}.no-data{margin:var(--pep-spacing-2xl, 2rem) 0}.no-data-suggestions .suggestions-title{margin:var(--pep-spacing-lg, 1rem) 0 var(--pep-spacing-sm, .5rem)}.no-data-suggestions .suggestions-list{margin:0;padding:0;padding-inline-start:var(--pep-spacing-2xl, 2rem)}.virtual-scroller{min-height:5rem;height:inherit}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4$1.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i7.PepFormComponent, selector: "pep-form", inputs: ["isInternal", "isReport", "layout", "lockEvents", "canEditObject", "data", "lockFields", "isActive", "layoutType", "objectId", "parentId", "searchCode", "showTitle", "firstFieldAsLink", "checkForChanges"], outputs: ["valueChange", "formValidationChange", "fieldClick", "internalFormFieldClick", "internalFormFieldChange"] }, { kind: "component", type: VirtualScrollerComponent, selector: "virtual-scroller,[virtualScroller]", inputs: ["disable", "executeRefreshOutsideAngularZone", "enableUnequalChildrenSizes", "RTL", "useMarginInsteadOfTranslate", "modifyOverflowStyleOfParentScroll", "stripedTable", "scrollbarWidth", "scrollbarHeight", "childWidth", "childHeight", "ssrChildWidth", "ssrChildHeight", "ssrViewportWidth", "ssrViewportHeight", "bufferAmount", "scrollAnimationTime", "resizeBypassRefreshThreshold", "scrollThrottlingTime", "scrollDebounceTime", "checkResizeInterval", "items", "compareItems", "horizontal", "parentScroll"], outputs: ["vsChildRectChange", "vsUpdate", "vsChange", "vsStart", "vsEnd"], exportAs: ["virtualScroller"] }, { kind: "component", type: PepListPagerComponent, selector: "pep-list-pager", inputs: ["disabled", "pageIndex", "length", "pageSize"], outputs: ["pagerChange"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-list', host: {
                         '(window:resize)': 'onWinResize($event)',
                     }, template: "<ng-container *ngIf=\"totalRows == 0\">\n    <ng-container *ngIf=\"noDataFoundMsg; then noDataMsgInputBlock; else noDataMsgDefaultBlock\"></ng-container>\n    <ng-template #noDataMsgInputBlock>\n        <div class=\"pep-border-bottom\">\n            <p class=\"title-xl no-data\">\n                {{ noDataFoundMsg }}\n            </p>\n        </div>\n    </ng-template>\n    <ng-template #noDataMsgDefaultBlock>\n        <div class=\"pep-border-bottom\">\n            <p class=\"title-xl no-data\">\n                {{ 'LIST.NO_DATA_FOUND' | translate}}\n            </p>\n        </div>\n        <div class=\"no-data-suggestions\">\n            <p class=\"suggestions-title title-lg\">\n                {{ 'LIST.NO_DATA_FOUND_SUGGESTIONS_TITLE' | translate}}\n            </p>\n            <ul class=\"suggestions-list body-lg\" [innerHtml]=\"'LIST.NO_DATA_FOUND_SUGGESTIONS_LIST' | translate\"></ul>\n        </div>\n    </ng-template>\n</ng-container>\n<ng-container *ngIf=\"totalRows > 0\">\n    <ng-container *ngTemplateOutlet=\"tableHeader\"></ng-container>\n\n    <!-- (vsChildRectChange)=\"onChildRectChange($event)\" -->\n    <virtual-scroller #scroller [items]=\"pagerType === 'pages' ? currentPageItems : items\"\n        [scrollDebounceTime]=\"scrollDebounceTime\" [scrollThrottlingTime]=\"scrollThrottlingTime\"\n        [bufferAmount]=\"printMode ? totalRows : bufferAmount\" [parentScroll]=\"parentScroll\" [disable]=\"loadingItemsFromApi\"\n        class=\"virtual-scroller\" [ngClass]=\"{ 'table-body': isTable, 'cards-body': !isTable }\"\n        (vsChange)=\"onVirtualScrollerChange($event)\" >\n        <ng-container *ngFor=\"let item of scroller.viewPortItems; let index = index; let isFirst = first;\">\n            <ng-container *ngTemplateOutlet=\"listData; context: {item: item, index:index}\"></ng-container>\n        </ng-container>\n    </virtual-scroller>\n\n    <pep-list-pager *ngIf=\"pagerType === 'pages'\" class=\" list-pager\" [disabled]=\"loadingItemsFromApi\"\n        [length]=\"totalRows\" [pageSize]=\"pageSize\" [pageIndex]=\"pageIndex\" (pagerChange)=\"onPagerChange($event)\">\n    </pep-list-pager>\n\n    <ng-container *ngTemplateOutlet=\"tableTotal\"></ng-container>\n</ng-container>\n\n<ng-template #listData let-item=\"item\" let-index=\"index\">\n    <ng-container *ngIf=\"isTable\">\n        <!-- getIsItemSelected(item) -> item | isItemSelected: selectionTypeForActions : selectedItemId : isAllSelected : selectedItems : unSelectedItems -->\n        <div class=\"table-row\" (mouseenter)=\"onTableRowMouseEnter($event, item?.UID, item?.Type)\" \n            (mouseleave)=\"onTableRowMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\n                'compact-view': tableViewType === 'compact',\n                even: zebraStripes && index % 2 !== 0,\n                selected: getIsItemSelected(item),\n                highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId}\" [ngStyle]=\"{ visibility: !loadingItemsFromApi || item ? 'visible' : 'hidden' }\">\n            <fieldset class=\"table-row-fieldset\" [ngStyle]=\"{ 'background-color': item?.BackgroundColor }\">\n                <mat-checkbox *ngIf=\"selectionTypeForActions == 'multi'\" type=\"checkbox\"\n                    class=\"pull-left flip row-selection\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n                    [disabled]=\"getisItemDisabled(item)\" [ngStyle]=\"{\n                            visibility: !deviceHasMouse ||\n                            item?.UID + SEPARATOR + item?.Type === hoveredItemId || isAllSelected || selectedItems.size > 0 ? 'visible' : 'hidden'\n                        }\" [checked]=\"getIsItemSelected(item)\"\n                    (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n                </mat-checkbox>\n                <mat-radio-button *ngIf=\"selectionTypeForActions == 'single'\" name=\"selection\"\n                    class=\"pull-left flip row-selection pep-radio-button\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n                    [disabled]=\"getisItemDisabled(item)\"\n                    [checked]=\"getIsItemSelected(item)\"\n                    (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n                </mat-radio-button>\n                <pep-form [layoutType]=\"'table'\" [checkForChanges]=\"checkForChanges\" [layout]=\"layout\"\n                    [firstFieldAsLink]=\"firstFieldAsLink\" [data]=\"item\" [canEditObject]=\"!disabled\"\n                    [lockEvents]=\"lockItemInnerEvents || printMode\" [isReport]=\"isReport\" [isActive]=\"\n                            (item?.UID + SEPARATOR + item?.Type === selectedItemId ||\n                            item?.UID + SEPARATOR + item?.Type === hoveredItemId) && deviceHasMouse\n                        \" (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\"\n                    (click)=\"itemClicked($event, item)\">\n                </pep-form>\n            </fieldset>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!isTable\">\n        <div (mouseenter)=\"onCardMouseEnter($event, item?.UID, item?.Type)\"\n            (mouseleave)=\"onCardMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\n                    selected: getIsItemSelected(item),\n                    highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId,\n                    'line-view': viewType === 'lines',\n                    'card-view': viewType === 'cards',\n                    'small-card': cardSize === 'sm'\n                }\" class=\"pull-left flip\"\n            [ngStyle]=\"{ height: calculatedObjectHeight, visibility: !loadingItemsFromApi || item ? 'visible' : 'hidden' }\">\n            <mat-checkbox *ngIf=\"showCardSelection\" class=\"pull-left flip card-selection\"\n                [disabled]=\"getisItemDisabled(item)\" [checked]=\"getIsItemSelected(item)\"\n                (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n            </mat-checkbox>\n            <pep-form [layoutType]=\"'card'\" [firstFieldAsLink]=\"firstFieldAsLink\" [checkForChanges]=\"checkForChanges\"\n                [layout]=\"layout\" [data]=\"item\" [canEditObject]=\"!disabled\"\n                [lockEvents]=\"lockItemInnerEvents || printMode\" [isActive]=\"\n                        (item?.UID + SEPARATOR + item?.Type === selectedItemId ||\n                        item?.UID + SEPARATOR + item?.Type === hoveredItemId) && deviceHasMouse\n                    \" (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\"\n                (click)=\"itemClicked($event, item)\">\n            </pep-form>\n        </div>\n    </ng-container>\n</ng-template>\n\n<ng-template #tableHeader>\n    <div *ngIf=\"isTable\" class=\"table-header\" (mouseup)=\"onListResizeEnd($event)\"\n        (mouseenter)=\"onListHeaderMouseEnter($event)\" (mouseleave)=\"onListHeaderMouseLeave($event)\"\n        (mousemove)=\"onListResize($event)\">\n\n        <div class=\"table-header-padding-top\"></div>\n        <fieldset class=\"table-header-fieldset\">\n            <mat-checkbox *ngIf=\"selectionTypeForActions !== 'none'\" #selectAllCB class=\"pull-left flip row-selection\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n                type=\"checkbox\" [ngStyle]=\"{\n                        visibility:\n                            selectionTypeForActions == 'single' || \n                            (selectionTypeForActions == 'multi' && hideAllSelectionInMulti) ? 'hidden' : 'visible'\n                    }\"\n                [indeterminate]=\"isAllSelected ? unSelectedItems.size > 0 && unSelectedItems.size < totalRows : (selectedItems.size > 0 && !getIsAllSelectedForActions())\"\n                [disabled]=\"disabled || selectionTypeForActions === 'single'\" [checked]=\"getIsAllSelectedForActions()\"\n                (change)=\"selectAllItemsForActions($event)\"></mat-checkbox>\n            <fieldset>\n                <div *ngFor=\"let field of layout?.ControlFields; let j = index\" class=\"header-column pull-left flip\"\n                    [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\" [ngClass]=\"{\n                            'compact-view': tableViewType === 'compact',\n                            'support-sorting': supportSorting,\n                            'has-sorting': field.ApiName === sortBy,\n                            'is-resizing': field.ApiName === pressedColumn,\n                            'is-first': j === 0 && selectionTypeForActions !== 'multi',\n                            'is-last': j === layout?.ControlFields?.length - 1\n                        }\"\n                    (click)=\"supportSorting ? (onListSortingChange(field.ApiName, sortBy !== null && sortBy != field.ApiName ? true : !isAsc, $event)) : false\">\n\n                    <label id=\"{{ field.ApiName }}\"\n                        class=\"header-label body-sm pull-left flip text-align-{{ field.Layout.XAlignment }}\"\n                        title=\"{{ field.Title }}\">\n                        <span *ngIf=\"field.Mandatory\" class=\"mandatory\">\n                            <pep-icon name=\"system_must\"></pep-icon>\n                        </span>\n                        {{ field.Title != '' ? field.Title : ' '}}\n                    </label>\n\n                    <div *ngIf=\"supportResizing\" class=\"resize-box pull-right flip\"\n                        (mousedown)=\"onListResizeStart($event, field.ApiName)\">\n                        <div class=\"splitter\"></div>\n                    </div>\n\n                    <div *ngIf=\"supportSorting\" class=\"sorting-box pull-left flip\"\n                        [ngClass]=\"{ 'has-sorting': field.ApiName === sortBy }\">\n                        <mat-icon *ngIf=\"field.ApiName !== sortBy\">\n                            <pep-icon name=\"arrow_either\" class=\"asc\"></pep-icon>\n                        </mat-icon>\n                        <ng-container *ngIf=\"field.ApiName === sortBy\">\n                            <mat-icon *ngIf=\"!isAsc\" [ngClass]=\"{ 'sort-by': field.ApiName === sortBy && isAsc }\"\n                                title=\"{{ 'LIST.SORT_ASC' | translate }}\">\n                                <pep-icon name=\"arrow_up\" class=\"asc\"></pep-icon>\n                            </mat-icon>\n                            <mat-icon *ngIf=\"isAsc\" [ngClass]=\"{ 'sort-by': field.ApiName === sortBy && !isAsc }\"\n                                title=\"{{ 'LIST.SORT_DESC' | translate }}\">\n                                <pep-icon name=\"arrow_down\" class=\"desc\"></pep-icon>\n                            </mat-icon>\n                        </ng-container>\n                    </div>\n                </div>\n            </fieldset>\n        </fieldset>\n    </div>\n</ng-template>\n\n<ng-template #tableTotal>\n    <div *ngIf=\"isTable && totalsRow?.length > 0 && totalsRow.length <= layout?.ControlFields.length\"\n        class=\"table-total\">\n        <fieldset class=\"table-header-fieldset\">\n            <div *ngFor=\"let field of layout?.ControlFields; let j = index\" class=\"total-column pull-left flip\"\n                [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\">\n                <label class=\"total-label body-sm text-align-{{ field.Layout.XAlignment }}\">\n                    {{ totalsRow[j] }}\n                </label>\n            </div>\n        </fieldset>\n    </div>\n</ng-template>", styles: [":host{height:inherit;display:flex;flex-direction:column}.no-data{margin:var(--pep-spacing-2xl, 2rem) 0}.no-data-suggestions .suggestions-title{margin:var(--pep-spacing-lg, 1rem) 0 var(--pep-spacing-sm, .5rem)}.no-data-suggestions .suggestions-list{margin:0;padding:0;padding-inline-start:var(--pep-spacing-2xl, 2rem)}.virtual-scroller{min-height:5rem;height:inherit}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.PepLayoutService }, { type: i1.PepSessionService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { noDataFoundMsg: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.PepLayoutService }, { type: i1.PepSessionService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { sorting: [{
+                type: Input
+            }], cacheSize: [{
+                type: Input
+            }], noDataFoundMsg: [{
                 type: Input
             }], selectionTypeForActions: [{
                 type: Input