@pepperi-addons/ngx-lib 0.4.2-beta.32 → 0.4.2-beta.321

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

@@ -13,7 +13,7 @@ import * as i4 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i1 from '@pepperi-addons/ngx-lib';
-import { FIELD_TYPE, PepScreenSizeType, PepNgxLibModule } from '@pepperi-addons/ngx-lib';
+import { PepScreenSizeType, FIELD_TYPE, PepNgxLibModule } from '@pepperi-addons/ngx-lib';
 import * as i2$2 from '@pepperi-addons/ngx-lib/bread-crumbs';
 import { PepBreadCrumbItem, PepBreadCrumbsModule } from '@pepperi-addons/ngx-lib/bread-crumbs';
 import * as i3$2 from '@pepperi-addons/ngx-lib/button';
@@ -22,11 +22,13 @@ import * as i4$2 from '@pepperi-addons/ngx-lib/carousel';
 import { PepCarouselComponent, PepCarouselModule } from '@pepperi-addons/ngx-lib/carousel';
 import * as i5 from '@pepperi-addons/ngx-lib/icon';
 import { pepIconArrowDown, pepIconArrowEither, pepIconArrowUp, pepIconSystemMust, pepIconArrowRight, pepIconArrowRightAlt, pepIconArrowLeft, pepIconArrowLeftAlt, PepIconModule } from '@pepperi-addons/ngx-lib/icon';
-import * as i7 from '@pepperi-addons/ngx-lib/form';
+import * as i7$1 from '@pepperi-addons/ngx-lib/form';
 import { PepFormModule } from '@pepperi-addons/ngx-lib/form';
 import * as i1$1 from '@pepperi-addons/ngx-lib/menu';
 import { PepMenuModule } from '@pepperi-addons/ngx-lib/menu';
-import * as i6 from '@pepperi-addons/ngx-lib/textbox';
+import * as i6 from '@pepperi-addons/ngx-lib/select';
+import { PepSelectModule } from '@pepperi-addons/ngx-lib/select';
+import * as i7 from '@pepperi-addons/ngx-lib/textbox';
 import { PepTextboxModule } from '@pepperi-addons/ngx-lib/textbox';
 import * as tween from '@tweenjs/tween.js';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
@@ -592,7 +594,10 @@ class VirtualScrollerComponent {
         });
     }
     getScrollElement() {
-        return this.parentScroll instanceof Window ? document.scrollingElement || document.documentElement || document.body : this.parentScroll || this.element.nativeElement;
+        if (this.parentScroll instanceof Window) {
+            return (document.scrollingElement || document.documentElement || document.body);
+        }
+        return (this.parentScroll || this.element.nativeElement);
     }
     addScrollEventHandlers() {
         if (this.isAngularUniversalSSR) {
@@ -660,6 +665,17 @@ class VirtualScrollerComponent {
         if (childrenLength === 0) {
             return 1;
         }
+        if (childrenLength === 1) {
+            const scrollElement = this.getScrollElement();
+            const child = children[0];
+            const childRect = this.getElementSize(child);
+            if (this.horizontal) {
+                const viewportHeight = scrollElement.offsetHeight - (this.scrollbarHeight || this.calculatedScrollbarHeight || 0);
+                return Math.max(Math.ceil(viewportHeight / Math.max(childRect.height, 1)), 1);
+            }
+            const viewportWidth = scrollElement.offsetWidth - (this.scrollbarWidth || this.calculatedScrollbarWidth || 0);
+            return Math.max(Math.ceil(viewportWidth / Math.max(childRect.width, 1)), 1);
+        }
         const firstOffset = children[0][propertyName];
         let result = 1;
         while (result < childrenLength && firstOffset === children[result][propertyName]) {
@@ -1115,14 +1131,36 @@ const DEFAULT_PAGE_SIZE = 50;
 class IPepListPagerChangeEvent {
 }
 class PepListPagerComponent {
-    constructor(_changeDetectorRef, layoutService) {
-        this._changeDetectorRef = _changeDetectorRef;
+    constructor(layoutService) {
         this.layoutService = layoutService;
         this.disabled = false;
+        this.showPageSizeSelector = false;
+        this.showFirstLastButtons = false;
+        this.PepScreenSizeType = PepScreenSizeType;
+        this.screenSize = PepScreenSizeType.LG;
+        this.pageSizeOptionsForSelect = [
+            { key: '10', value: '10' },
+            { key: '20', value: '20' },
+            { key: '50', value: '50' },
+        ];
+        this._pageSizeOptions = [10, 20, 50];
         this._pageIndex = 0;
         this.length = 0;
         this.pageSize = DEFAULT_PAGE_SIZE;
         this.pagerChange = new EventEmitter();
+        this.resizeSub = this.layoutService.onResize$.subscribe((size) => {
+            this.screenSize = size;
+        });
+    }
+    set pageSizeOptions(value) {
+        this._pageSizeOptions = Array.isArray(value) && value.length > 0 ? value : [10, 20, 50];
+        this.pageSizeOptionsForSelect = this._pageSizeOptions.map((n) => ({
+            key: n.toString(),
+            value: n.toString(),
+        }));
+    }
+    get pageSizeOptions() {
+        return this._pageSizeOptions;
     }
     set pageIndex(value) {
         this.setPageIndex(value);
@@ -1130,6 +1168,10 @@ class PepListPagerComponent {
     get pageIndex() {
         return this._pageIndex;
     }
+    ngOnDestroy() {
+        var _a;
+        (_a = this.resizeSub) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+    }
     nextPage() {
         if (!this.hasNextPage()) {
             return;
@@ -1179,6 +1221,20 @@ class PepListPagerComponent {
         const pageNumber = coerceNumberProperty(value);
         this.setPageIndex(pageNumber - 1); // - 1 to convert number into index.
     }
+    onPageSizeChange(value) {
+        const newPageSize = coerceNumberProperty(value);
+        if (!newPageSize || newPageSize === this.pageSize) {
+            return;
+        }
+        const previousPageIndex = this.pageIndex;
+        this.pageSize = newPageSize;
+        // Reset to first page on page-size change.
+        this.setPageIndex(0);
+        // If we were already on page 0, setPageIndex won't emit, so emit explicitly.
+        if (this.pageIndex === previousPageIndex) {
+            this._emitChangeEvent(previousPageIndex);
+        }
+    }
     setPageIndex(newIndex) {
         const previousPageIndex = this.pageIndex;
         if (newIndex >= 0 && newIndex < this.getNumberOfPages()) {
@@ -1201,15 +1257,21 @@ class PepListPagerComponent {
         });
     }
 }
-PepListPagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListPagerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
-PepListPagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListPagerComponent, selector: "pep-list-pager", inputs: { disabled: "disabled", pageIndex: "pageIndex", length: "length", pageSize: "pageSize" }, outputs: { pagerChange: "pagerChange" }, ngImport: i0, template: "<div class=\"pager-container body-sm\">\n    <span class=\"pep-spacing-element\">{{ 'LIST.PAGER_PAGE' | translate }}</span>\n    <pep-textbox pepAutoWidth class=\"page-index pep-spacing-element\" [key]=\"'pageIndex'\" [type]=\"'int'\"\n        [disabled]=\"disabled\" [xAlignment]=\"'center'\" [renderTitle]=\"false\" [renderError]=\"false\" [renderSymbol]=\"false\"\n        [value]=\"pageIndex + 1\" [minValue]=\"1\" [maxValue]=\"this.getNumberOfPages()\"\n        [maxFieldCharacters]=\"6\" [mandatory]=\"true\" (valueChange)=\"onValueChange($event)\">\n    </pep-textbox>\n    <span class=\"pep-spacing-element\">{{ 'LIST.PAGER_OUT_OF' | translate }}</span>\n    <span class=\"pep-spacing-element\">{{ getNumberOfPages() }}</span>\n    <button mat-button [disabled]=\"disabled || _previousButtonsDisabled()\"\n        [ngClass]=\"{ disabled: disabled || _previousButtonsDisabled() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"previousPage()\"\n        [title]=\"('LIST.PAGER_PREVIOUS' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_right' : 'arrow_left'\"></pep-icon>\n        </mat-icon>\n    </button>\n    <button mat-button [disabled]=\"disabled || _nextButtonsDisabled()\"\n        [ngClass]=\"{ disabled: disabled || _nextButtonsDisabled() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"nextPage()\"\n        [title]=\"('LIST.PAGER_NEXT' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_left' : 'arrow_right'\"></pep-icon>\n        </mat-icon>\n    </button>\n</div>", styles: [".pager-container{display:flex;justify-content:center;align-items:center;height:calc(2rem + calc(var(--pep-spacing-sm, .5rem) * 2));padding:var(--pep-spacing-sm, .5rem)}.pager-container .page-index{min-height:unset;margin-bottom:0}.pager-container .page-index ::ng-deep .mat-form-field-flex{padding:0 .5rem;min-height:2rem}.pager-container .page-index ::ng-deep .mat-form-field-flex .mat-input-element{min-width:1.25rem}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.PepInputAutoWidthDirective, selector: "[pepAutoWidth]", inputs: ["includePadding"] }, { kind: "directive", type: i1.PepMenuBlurDirective, selector: "[pepMenuBlur]" }, { kind: "directive", type: i1.PepRtlDirectionDirective, selector: "[pepRtlDirection]" }, { kind: "component", type: i5.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i6.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey", "regex", "regexError", "isInFocus"], outputs: ["valueChange", "keyup"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+PepListPagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListPagerComponent, deps: [{ token: i1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
+PepListPagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListPagerComponent, selector: "pep-list-pager", inputs: { disabled: "disabled", showPageSizeSelector: "showPageSizeSelector", showFirstLastButtons: "showFirstLastButtons", pageSizeOptions: "pageSizeOptions", pageIndex: "pageIndex", length: "length", pageSize: "pageSize" }, outputs: { pagerChange: "pagerChange" }, ngImport: i0, template: "<div class=\"pager-container body-sm\">\n    <span *ngIf=\"screenSize <= PepScreenSizeType.SM\" class=\"pep-spacing-element pager-label\">{{ 'LIST.PAGER_PAGE' | translate }}</span>\n    <button *ngIf=\"showFirstLastButtons && screenSize <= PepScreenSizeType.SM\" mat-button [disabled]=\"disabled || !hasPreviousPage()\"\n        [ngClass]=\"{ disabled: disabled || !hasPreviousPage() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"firstPage()\"\n        [title]=\"('LIST.PAGER_FIRST' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_back_right' : 'arrow_back_left'\"></pep-icon>\n        </mat-icon>\n    </button>\n    <button mat-button [disabled]=\"disabled || _previousButtonsDisabled()\"\n        [ngClass]=\"{ disabled: disabled || _previousButtonsDisabled() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"previousPage()\"\n        [title]=\"('LIST.PAGER_PREVIOUS' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_right' : 'arrow_left'\"></pep-icon>\n        </mat-icon>\n    </button>\n    <pep-textbox pepAutoWidth class=\"page-index pep-spacing-element\" [key]=\"'pageIndex'\" [type]=\"'int'\"\n        [disabled]=\"disabled\" [xAlignment]=\"'center'\" [renderTitle]=\"false\" [renderError]=\"false\" [renderSymbol]=\"false\"\n        [value]=\"pageIndex + 1\" [minValue]=\"1\" [maxValue]=\"this.getNumberOfPages()\"\n        [maxFieldCharacters]=\"6\" [mandatory]=\"true\" (valueChange)=\"onValueChange($event)\">\n    </pep-textbox>\n    <button mat-button [disabled]=\"disabled || _nextButtonsDisabled()\"\n        [ngClass]=\"{ disabled: disabled || _nextButtonsDisabled() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"nextPage()\"\n        [title]=\"('LIST.PAGER_NEXT' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_left' : 'arrow_right'\"></pep-icon>\n        </mat-icon>\n    </button>\n    <button *ngIf=\"showFirstLastButtons && screenSize <= PepScreenSizeType.SM\" mat-button [disabled]=\"disabled || !hasNextPage()\"\n        [ngClass]=\"{ disabled: disabled || !hasNextPage() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"lastPage()\"\n        [title]=\"('LIST.PAGER_LAST' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_back_left' : 'arrow_back_right'\"></pep-icon>\n        </mat-icon>\n    </button>\n    <span *ngIf=\"screenSize <= PepScreenSizeType.SM\" class=\"pep-spacing-element pager-label\">{{ 'LIST.PAGER_OUT_OF' | translate }}</span>\n    <span *ngIf=\"screenSize > PepScreenSizeType.SM\" class=\"pep-spacing-element pager-label\">/</span>\n    <span class=\"pep-spacing-element\">{{ getNumberOfPages() }}</span>\n    <ng-container *ngIf=\"showPageSizeSelector\">\n        <pep-select pepAutoWidth class=\"page-size pep-spacing-element\" [key]=\"'pageSize'\" [value]=\"pageSize?.toString()\"\n            [disabled]=\"disabled\" [renderTitle]=\"false\" [emptyOption]=\"false\" [options]=\"pageSizeOptionsForSelect\"\n            [title]=\"('LIST.PAGER_ITEMS_PER_PAGE' | translate)\"\n            (valueChange)=\"onPageSizeChange($event)\">\n        </pep-select>\n        <span *ngIf=\"screenSize <= PepScreenSizeType.MD\" class=\"pep-spacing-element pager-label\">{{ 'LIST.PAGER_ITEMS_PER_PAGE' | translate }}</span>\n    </ng-container>\n</div>", styles: [".pager-container{display:flex;justify-content:center;align-items:center;height:calc(2rem + calc(var(--pep-spacing-sm, .5rem) * 2));padding:var(--pep-spacing-sm, .5rem)}.pager-container .pager-label{white-space:nowrap}@media (max-width: 480px){.pager-container{height:auto;flex-wrap:wrap;row-gap:var(--pep-spacing-sm, .5rem)}}.pager-container .page-size{min-height:unset;margin-bottom:0}.pager-container .page-size ::ng-deep .mat-form-field-flex{padding:0 .5rem;min-height:2rem}.pager-container .page-index{min-height:unset;margin-bottom:0}.pager-container .page-index ::ng-deep .mat-form-field-flex{padding:0 .5rem;min-height:2rem}.pager-container .page-index ::ng-deep .mat-form-field-flex .mat-input-element{min-width:1.25rem}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.PepInputAutoWidthDirective, selector: "[pepAutoWidth]", inputs: ["includePadding"] }, { kind: "directive", type: i1.PepMenuBlurDirective, selector: "[pepMenuBlur]" }, { kind: "directive", type: i1.PepRtlDirectionDirective, selector: "[pepRtlDirection]" }, { kind: "component", type: i5.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i6.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "placeholder", "placeholderWhenDisabled", "autoSortOptions", "options", "visible", "emptyOption", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "renderTitle", "typeaheadDebounceInterval", "addValueToOptionsIfNotExist"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i7.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey", "regex", "regexError", "isInFocus"], outputs: ["valueChange", "keyup", "validationChange"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
 PepListPagerComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListPagerComponent });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListPagerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pep-list-pager', template: "<div class=\"pager-container body-sm\">\n    <span class=\"pep-spacing-element\">{{ 'LIST.PAGER_PAGE' | translate }}</span>\n    <pep-textbox pepAutoWidth class=\"page-index pep-spacing-element\" [key]=\"'pageIndex'\" [type]=\"'int'\"\n        [disabled]=\"disabled\" [xAlignment]=\"'center'\" [renderTitle]=\"false\" [renderError]=\"false\" [renderSymbol]=\"false\"\n        [value]=\"pageIndex + 1\" [minValue]=\"1\" [maxValue]=\"this.getNumberOfPages()\"\n        [maxFieldCharacters]=\"6\" [mandatory]=\"true\" (valueChange)=\"onValueChange($event)\">\n    </pep-textbox>\n    <span class=\"pep-spacing-element\">{{ 'LIST.PAGER_OUT_OF' | translate }}</span>\n    <span class=\"pep-spacing-element\">{{ getNumberOfPages() }}</span>\n    <button mat-button [disabled]=\"disabled || _previousButtonsDisabled()\"\n        [ngClass]=\"{ disabled: disabled || _previousButtonsDisabled() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"previousPage()\"\n        [title]=\"('LIST.PAGER_PREVIOUS' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_right' : 'arrow_left'\"></pep-icon>\n        </mat-icon>\n    </button>\n    <button mat-button [disabled]=\"disabled || _nextButtonsDisabled()\"\n        [ngClass]=\"{ disabled: disabled || _nextButtonsDisabled() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"nextPage()\"\n        [title]=\"('LIST.PAGER_NEXT' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_left' : 'arrow_right'\"></pep-icon>\n        </mat-icon>\n    </button>\n</div>", styles: [".pager-container{display:flex;justify-content:center;align-items:center;height:calc(2rem + calc(var(--pep-spacing-sm, .5rem) * 2));padding:var(--pep-spacing-sm, .5rem)}.pager-container .page-index{min-height:unset;margin-bottom:0}.pager-container .page-index ::ng-deep .mat-form-field-flex{padding:0 .5rem;min-height:2rem}.pager-container .page-index ::ng-deep .mat-form-field-flex .mat-input-element{min-width:1.25rem}\n"] }]
+            args: [{ selector: 'pep-list-pager', template: "<div class=\"pager-container body-sm\">\n    <span *ngIf=\"screenSize <= PepScreenSizeType.SM\" class=\"pep-spacing-element pager-label\">{{ 'LIST.PAGER_PAGE' | translate }}</span>\n    <button *ngIf=\"showFirstLastButtons && screenSize <= PepScreenSizeType.SM\" mat-button [disabled]=\"disabled || !hasPreviousPage()\"\n        [ngClass]=\"{ disabled: disabled || !hasPreviousPage() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"firstPage()\"\n        [title]=\"('LIST.PAGER_FIRST' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_back_right' : 'arrow_back_left'\"></pep-icon>\n        </mat-icon>\n    </button>\n    <button mat-button [disabled]=\"disabled || _previousButtonsDisabled()\"\n        [ngClass]=\"{ disabled: disabled || _previousButtonsDisabled() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"previousPage()\"\n        [title]=\"('LIST.PAGER_PREVIOUS' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_right' : 'arrow_left'\"></pep-icon>\n        </mat-icon>\n    </button>\n    <pep-textbox pepAutoWidth class=\"page-index pep-spacing-element\" [key]=\"'pageIndex'\" [type]=\"'int'\"\n        [disabled]=\"disabled\" [xAlignment]=\"'center'\" [renderTitle]=\"false\" [renderError]=\"false\" [renderSymbol]=\"false\"\n        [value]=\"pageIndex + 1\" [minValue]=\"1\" [maxValue]=\"this.getNumberOfPages()\"\n        [maxFieldCharacters]=\"6\" [mandatory]=\"true\" (valueChange)=\"onValueChange($event)\">\n    </pep-textbox>\n    <button mat-button [disabled]=\"disabled || _nextButtonsDisabled()\"\n        [ngClass]=\"{ disabled: disabled || _nextButtonsDisabled() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"nextPage()\"\n        [title]=\"('LIST.PAGER_NEXT' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_left' : 'arrow_right'\"></pep-icon>\n        </mat-icon>\n    </button>\n    <button *ngIf=\"showFirstLastButtons && screenSize <= PepScreenSizeType.SM\" mat-button [disabled]=\"disabled || !hasNextPage()\"\n        [ngClass]=\"{ disabled: disabled || !hasNextPage() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"lastPage()\"\n        [title]=\"('LIST.PAGER_LAST' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_back_left' : 'arrow_back_right'\"></pep-icon>\n        </mat-icon>\n    </button>\n    <span *ngIf=\"screenSize <= PepScreenSizeType.SM\" class=\"pep-spacing-element pager-label\">{{ 'LIST.PAGER_OUT_OF' | translate }}</span>\n    <span *ngIf=\"screenSize > PepScreenSizeType.SM\" class=\"pep-spacing-element pager-label\">/</span>\n    <span class=\"pep-spacing-element\">{{ getNumberOfPages() }}</span>\n    <ng-container *ngIf=\"showPageSizeSelector\">\n        <pep-select pepAutoWidth class=\"page-size pep-spacing-element\" [key]=\"'pageSize'\" [value]=\"pageSize?.toString()\"\n            [disabled]=\"disabled\" [renderTitle]=\"false\" [emptyOption]=\"false\" [options]=\"pageSizeOptionsForSelect\"\n            [title]=\"('LIST.PAGER_ITEMS_PER_PAGE' | translate)\"\n            (valueChange)=\"onPageSizeChange($event)\">\n        </pep-select>\n        <span *ngIf=\"screenSize <= PepScreenSizeType.MD\" class=\"pep-spacing-element pager-label\">{{ 'LIST.PAGER_ITEMS_PER_PAGE' | translate }}</span>\n    </ng-container>\n</div>", styles: [".pager-container{display:flex;justify-content:center;align-items:center;height:calc(2rem + calc(var(--pep-spacing-sm, .5rem) * 2));padding:var(--pep-spacing-sm, .5rem)}.pager-container .pager-label{white-space:nowrap}@media (max-width: 480px){.pager-container{height:auto;flex-wrap:wrap;row-gap:var(--pep-spacing-sm, .5rem)}}.pager-container .page-size{min-height:unset;margin-bottom:0}.pager-container .page-size ::ng-deep .mat-form-field-flex{padding:0 .5rem;min-height:2rem}.pager-container .page-index{min-height:unset;margin-bottom:0}.pager-container .page-index ::ng-deep .mat-form-field-flex{padding:0 .5rem;min-height:2rem}.pager-container .page-index ::ng-deep .mat-form-field-flex .mat-input-element{min-width:1.25rem}\n"] }]
         }, {
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.PepLayoutService }]; }, propDecorators: { disabled: [{
+        }], ctorParameters: function () { return [{ type: i1.PepLayoutService }]; }, propDecorators: { disabled: [{
+                type: Input
+            }], showPageSizeSelector: [{
+                type: Input
+            }], showFirstLastButtons: [{
+                type: Input
+            }], pageSizeOptions: [{
                 type: Input
             }], pageIndex: [{
                 type: Input
@@ -1229,6 +1291,7 @@ class PepListComponent {
         this.cd = cd;
         this.renderer = renderer;
         this.zone = zone;
+        this.cacheSize = -1;
         this.noDataFoundMsg = null;
         this.selectionTypeForActions = 'multi';
         this.showCardSelection = false;
@@ -1238,6 +1301,7 @@ class PepListComponent {
         this._viewType = '';
         this.firstFieldAsLink = false;
         this.supportSorting = true;
+        this.supportSortingFields = undefined;
         this.supportResizing = true;
         this._parentScroll = null;
         this.disabled = false;
@@ -1249,12 +1313,16 @@ class PepListComponent {
         this.totalsRow = [];
         this.pagerType = 'scroll';
         this.pageSize = DEFAULT_PAGE_SIZE;
+        this.showPageSizeSelector = false;
+        this.pageSizeOptions = [10, 20, 50];
+        this.showFirstLastButtons = false;
         this.pageIndex = 0;
         // @Input() startIndex = 0;
         this.bufferAmount = 0;
         this.scrollAnimationTime = 500;
         this.scrollDebounceTime = 0;
         this.scrollThrottlingTime = 0;
+        this.SEPARATOR = ',';
         this._useAsWebComponent = false;
         this.itemClick = new EventEmitter();
         this.fieldClick = new EventEmitter();
@@ -1275,7 +1343,6 @@ class PepListComponent {
         this.hasColumnWidthOfTypePercentage = true;
         this._items = null;
         this.itemsCounter = 0;
-        this.SEPARATOR = ',';
         this.isAllSelected = false;
         this.selectedItems = new Map();
         this.unSelectedItems = new Map();
@@ -1287,11 +1354,13 @@ class PepListComponent {
         this.deviceHasMouse = false;
         // For resize
         this.pressedColumn = '';
+        this.pressedColumnIndex = -1;
         this.startX = 0;
         this.startWidth = 0;
         this.tableStartWidth = 0;
+        this.lastColumnsWidth = [];
         // For sorting
-        this.isAsc = true;
+        this.isAsc = false;
         this.sortBy = '';
         this.isUserSelected = false;
         this.checkForChanges = null;
@@ -1304,6 +1373,16 @@ class PepListComponent {
             this.deviceHasMouse = deviceHasMouse;
         });
     }
+    set sorting(value) {
+        this.sortBy = (value === null || value === void 0 ? void 0 : value.sortBy) || '';
+        this.isAsc = (value === null || value === void 0 ? void 0 : value.sortBy.length) > 0 ? value.isAsc : this.isAsc;
+    }
+    get sorting() {
+        return {
+            sortBy: this.sortBy,
+            isAsc: this.isAsc
+        };
+    }
     set viewType(value) {
         this._viewType = value;
         this.isTable = value === 'table';
@@ -1380,6 +1459,9 @@ class PepListComponent {
         // }
         this.saveSortingToSession();
     }
+    getCachedItemsNumber() {
+        return this.cacheSize >= 0 ? this.cacheSize : PepListComponent.TOP_ITEMS_ARRAY;
+    }
     getScrollingElement() {
         var _a;
         return this.parentScroll ? this.parentScroll : (_a = this.virtualScroller) === null || _a === void 0 ? void 0 : _a.contentElementRef.nativeElement.parentElement;
@@ -1436,11 +1518,13 @@ class PepListComponent {
             }
         }
     }
+    getSelectionCheckBoxWidth() {
+        return this.selectionTypeForActions === 'multi' ? 44 : (this.selectionTypeForActions === 'single' ? 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
@@ -1453,7 +1537,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() {
@@ -1466,11 +1550,16 @@ class PepListComponent {
             : PepListComponent.TOP_ITEMS_THUMBNAILS;
     }
     disableScroll(disable) {
+        var _a, _b;
+        const hostParentElement = (_b = (_a = this.hostElement) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.parentElement;
+        if (!hostParentElement) {
+            return;
+        }
         if (disable) {
-            this.renderer.addClass(this.hostElement.nativeElement.parentElement, 'lock-events');
+            this.renderer.addClass(hostParentElement, 'lock-events');
         }
         else {
-            this.renderer.removeClass(this.hostElement.nativeElement.parentElement, 'lock-events');
+            this.renderer.removeClass(hostParentElement, 'lock-events');
         }
     }
     toggleLoadingItemsFropApi(loadingItemsFromApi) {
@@ -1503,6 +1592,19 @@ class PepListComponent {
             }
         }
     }
+    getSelectableItemsCount() {
+        var _a;
+        return ((_a = this.items) === null || _a === void 0 ? void 0 : _a.filter((item) => item && item.IsSelectableForActions).length) || 0;
+    }
+    normalizeMultiSelectionState() {
+        const selectableItemsCount = this.getSelectableItemsCount();
+        if (this.isAllSelected && (selectableItemsCount === 0 || this.unSelectedItems.size >= selectableItemsCount)) {
+            this.isAllSelected = false;
+            this.selectedItems.clear();
+            this.unSelectedItems.clear();
+            this.selectedItemId = '';
+        }
+    }
     getUniqItemId(itemId, itemType = '') {
         return itemId + this.SEPARATOR + itemType;
     }
@@ -1534,17 +1636,73 @@ 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';
+                    this.setColumnsWidth(widthToSet);
+                    res = true;
+                }
+            }
+        }
+        return res;
+    }
+    setVirtualScrollWidth(widthToSet) {
+        if (this.virtualScroller) {
+            this.renderer.setStyle(this.virtualScroller.contentElementRef.nativeElement, 'width', widthToSet === 'inherit' ? '100%' : widthToSet);
+        }
+    }
+    setColumnsWidth(widthToSet) {
+        // this.renderer.setStyle(
+        //     this.hostElement.nativeElement,
+        //     'width',
+        //     widthToSet
+        // );
+        this.renderer.setStyle(this.listContainerResizableElementRef.nativeElement, 'width', widthToSet);
+        if (this.isTable) {
+            this.setVirtualScrollWidth(widthToSet);
+        }
+        else {
+            // Do this only after UI is change cause the property isTable is Input and can refresh after this thread.
+            setTimeout(() => {
+                this.setVirtualScrollWidth(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) {
@@ -1560,6 +1718,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);
@@ -1575,7 +1734,6 @@ class PepListComponent {
                     totalCalcColsWidth += uiControlField.calcColumnWidth;
                 }
             }
-            this.renderer.setStyle(this.hostElement.nativeElement, 'width', 'inherit');
         }
         else {
             for (let index = 0; index < length; index++) {
@@ -1583,26 +1741,24 @@ 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';
         }
+        this.setColumnsWidth(widthToSet);
     }
     calcObjectHeight() {
         setTimeout(() => {
             if (this.virtualScroller) {
                 const content = this.virtualScroller.getContent();
-                console.log(`content.children.length: ${content.children.length}`);
                 if (content.children.length > 0) {
                     const rect = this.virtualScroller.getElementSize(content.children[0]);
                     this.calculatedObjectHeight = rect.height + 'px';
-                    console.log(`this.calculatedObjectHeight: ${this.calculatedObjectHeight}`);
                 }
             }
             this.disableScroll(false);
@@ -1613,6 +1769,7 @@ class PepListComponent {
         this.startWidth = 0;
         this.tableStartWidth = 0;
         this.pressedColumn = '';
+        this.pressedColumnIndex = -1;
     }
     getParent(el, parentSelector) {
         // If no parentSelector defined will bubble up all the way to *document*
@@ -1669,7 +1826,9 @@ class PepListComponent {
         }
         const isAllSelected = this.sessionService.getObject(PepListComponent.ALL_SELECTED_STATE_KEY);
         if (isAllSelected != null) {
-            this.isAllSelected = isAllSelected && this.getIsAllSelected(items);
+            // Comment this in version 0.4.2-beta.103, I don't know why we need this (&& this.getIsAllSelected(items))
+            // this.isAllSelected = isAllSelected && this.getIsAllSelected(items);
+            this.isAllSelected = isAllSelected;
             this.sessionService.removeObject(PepListComponent.ALL_SELECTED_STATE_KEY);
         }
         else {
@@ -1743,12 +1902,10 @@ class PepListComponent {
         else if (this.selectionTypeForActions === 'multi') {
             if (isSelectableForActions) {
                 this.setSelectionItems(itemId, uniqItemId, isChecked);
-                const currentList = this.isAllSelected
-                    ? this.unSelectedItems
-                    : this.selectedItems;
+                this.normalizeMultiSelectionState();
                 const currentListCount = this.isAllSelected
-                    ? this.totalRows - currentList.size
-                    : currentList.size;
+                    ? Math.max(this.getSelectableItemsCount() - this.unSelectedItems.size, 0)
+                    : this.selectedItems.size;
                 this.selectedItemsChange.emit(currentListCount);
             }
         }
@@ -1767,6 +1924,13 @@ class PepListComponent {
         this.hostElement.nativeElement.updateItems = this.updateItems.bind(this);
         this.hostElement.nativeElement.updatePage = this.updatePage.bind(this);
         this.hostElement.nativeElement.updateItem = this.updateItem.bind(this);
+        // Extended for React/GenericList consumers — needed for selection and navigation.
+        this.hostElement.nativeElement.scrollToIndex = this.scrollToIndex.bind(this);
+        this.hostElement.nativeElement.getSelectedItemsData = this.getSelectedItemsData.bind(this);
+        this.hostElement.nativeElement.getIsItemEditable = this.getIsItemEditable.bind(this);
+        this.hostElement.nativeElement.getItemDataByID = this.getItemDataByID.bind(this);
+        this.hostElement.nativeElement.setSelectedIds = this.setSelectedIds.bind(this);
+        this.hostElement.nativeElement.setIsAllSelected = this.setIsAllSelected.bind(this);
     }
     // For refresh the UI when change the is selectable for action on item.
     getisItemDisabled(item) {
@@ -1815,18 +1979,17 @@ class PepListComponent {
         if (currentList.size > 0) {
             isIndeterminate = true;
             this.isAllSelected = false;
-            this.selectedItemsChange.emit(0);
             e.source.checked = false;
         }
         this.selectedItems.clear();
         this.unSelectedItems.clear();
+        this.selectedItemId = '';
         if (!isIndeterminate) {
             this.isAllSelected = isChecked;
             this.selectAllClick.emit(isChecked);
             if (this.selectionTypeForActions === 'multi') {
                 if (!isChecked) {
                     this.selectedItemsChange.emit(0);
-                    this.selectedItemId = '';
                 }
                 else {
                     const filteredItems = this.items.filter((item) => item && item.IsSelectableForActions);
@@ -1838,6 +2001,7 @@ class PepListComponent {
             // Remove all
             if (this.selectionTypeForActions === 'multi') {
                 this.selectAllClick.emit(false);
+                this.selectedItemsChange.emit(0);
             }
         }
     }
@@ -1873,7 +2037,8 @@ class PepListComponent {
             this.selectedItemId = this.getUniqItemId(itemId, itemType);
             isChecked = true;
         }
-        if (this.isTable) {
+        // TODO - need to check what we want to do line view
+        if (this.isTable || this.viewType === 'cards') {
             if (this.selectionTypeForActions === 'single') {
                 this.setItemClicked(itemId, item.IsSelectableForActions, itemType, isChecked);
             }
@@ -1899,6 +2064,51 @@ class PepListComponent {
     onTableRowMouseLeave(event, itemId, itemType) {
         this.hoveredItemId = '';
     }
+    onTabKeydown(event, itemId, itemType) {
+        const keyboardEvent = event;
+        if (keyboardEvent.key === 'Tab') {
+            const jumpToNextRow = !keyboardEvent.shiftKey;
+            const eventTarget = event.target || event.srcElement;
+            const isLastColumn = this.isLastColunm(eventTarget, 'table-cell', jumpToNextRow);
+            // If the last column then go to the next row.
+            if (isLastColumn) {
+                const currentRowEL = this.getParentByClass(eventTarget, 'table-row');
+                const nextRow = jumpToNextRow ? currentRowEL === null || currentRowEL === void 0 ? void 0 : currentRowEL.nextElementSibling : currentRowEL === null || currentRowEL === void 0 ? void 0 : currentRowEL.previousElementSibling;
+                if (nextRow !== null) {
+                    // Remove the highlight from the current row.
+                    this.renderer.removeClass(nextRow, 'highlighted');
+                    // Highlight the next row.
+                    this.renderer.addClass(nextRow, 'highlighted');
+                    // Click on the first cell of the next row.
+                    const indexOfFocusCell = jumpToNextRow ? 0 : nextRow.querySelectorAll('.table-cell').length - 1;
+                    nextRow.querySelectorAll('.table-cell')[indexOfFocusCell].click();
+                    setTimeout(() => {
+                        nextRow.querySelectorAll('.table-cell')[indexOfFocusCell].focus();
+                    }, 100);
+                }
+            }
+        }
+    }
+    isLastColunm(el, parentSelector, isNext = true) {
+        const parent = this.getParentByClass(el, parentSelector);
+        // check if last column or if shifr pressed and it's the first column
+        return isNext ? (parent === null || parent === void 0 ? void 0 : parent.nextElementSibling) === null : ((parent === null || parent === void 0 ? void 0 : parent.previousElementSibling) === null);
+    }
+    getParentByClass(el, parentSelector /* optional */) {
+        var _a;
+        // If no parentSelector defined will bubble up all the way to *document*
+        if (parentSelector === undefined) {
+            parentSelector = document;
+        }
+        let p = el.parentNode;
+        while (p &&
+            !((_a = p === null || p === void 0 ? void 0 : p.classList) === null || _a === void 0 ? void 0 : _a.contains(parentSelector)) &&
+            parentSelector !== document) {
+            const o = p;
+            p = (o === null || o === void 0 ? void 0 : o.parentNode) || null;
+        }
+        return (p === null || p === void 0 ? void 0 : p.className.indexOf(parentSelector)) > -1 ? p : null;
+    }
     onCardMouseEnter(event, itemId, itemType) {
         if (!this.deviceHasMouse) {
             return;
@@ -1952,18 +2162,28 @@ class PepListComponent {
         }
         this.sessionService.setObject(PepListComponent.ALL_SELECTED_STATE_KEY, this.isAllSelected);
     }
-    initListData(layout, totalRows, items) {
+    initListData(layout, totalRows, items, selectionTypeForActions = undefined) {
         this.initVariablesFromSession(items);
-        const currentList = this.isAllSelected
+        const selectedItemsList = this.isAllSelected
             ? this.unSelectedItems
             : this.selectedItems;
         const currentListCount = this.isAllSelected
-            ? this.totalRows - currentList.size
-            : currentList.size;
+            ? this.totalRows - selectedItemsList.size
+            : selectedItemsList.size;
         this.selectedItemsChange.emit(currentListCount);
         this._layout = layout;
         this.selectedItemId = '';
         this.totalRows = totalRows;
+        // Added to handle if the selectionTypeForActions is set in the html then the input this.selectedItemId will no set cause this function happens before.
+        if (selectionTypeForActions) {
+            this.selectionTypeForActions = selectionTypeForActions;
+        }
+        // If is all selected is false && the size of the selected items is 1 && selectionTypeForActions is 'single' then set it as the selected item id.
+        // We need this in setTimeout cause the selectionTypeForActions is input that can set after this function.
+        if (!this.isAllSelected && this.selectedItems.size === 1 && this.selectionTypeForActions === 'single') {
+            const [firstValue] = this.selectedItems.values();
+            this.selectedItemId = firstValue;
+        }
         this.scrollToTop(false);
         this.cleanItems();
         this.disableScroll(true);
@@ -1997,6 +2217,9 @@ class PepListComponent {
                 }
             }
         }
+        if (!this.isTable) {
+            this.lastColumnsWidth = [];
+        }
         this.setLayout();
         // setTimeout(() => {
         this.onListLoad();
@@ -2008,7 +2231,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 = (_a = event.fromIndex) !== null && _a !== void 0 ? _a : 0;
@@ -2025,7 +2248,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;
@@ -2067,6 +2290,7 @@ class PepListComponent {
         }
         else if (this.selectionTypeForActions === 'multi') {
             let currentList = [];
+            const selectableItemsCount = this.getSelectableItemsCount();
             // For edit - only the selected items.
             if (isForEdit) {
                 if (!this.isAllSelected) {
@@ -2084,10 +2308,29 @@ class PepListComponent {
             }
             else {
                 // For delete - can be the unselected with select_all functionality.
-                currentList = Array.from(this.isAllSelected
-                    ? this.unSelectedItems.values()
-                    : this.selectedItems.values());
-                selectionType = this.isAllSelected ? 0 : 1;
+                if (this.isAllSelected) {
+                    if (selectableItemsCount === 1 && this.unSelectedItems.size === 0) {
+                        const selectedItem = this.items.find((item) => item && item.IsSelectableForActions);
+                        if (selectedItem) {
+                            currentList = [
+                                this.getUniqItemId(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.UID.toString(), selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.Type.toString())
+                            ];
+                        }
+                        selectionType = 1;
+                    }
+                    else if (selectableItemsCount === 0 || this.unSelectedItems.size >= selectableItemsCount) {
+                        currentList = [];
+                        selectionType = 1;
+                    }
+                    else {
+                        currentList = Array.from(this.unSelectedItems.values());
+                        selectionType = 0;
+                    }
+                }
+                else {
+                    currentList = Array.from(this.selectedItems.values());
+                    selectionType = 1;
+                }
             }
             currentList.forEach((item) => {
                 const tmp = item.split(this.SEPARATOR);
@@ -2124,17 +2367,20 @@ class PepListComponent {
     onWinResize(e) {
         this.refresh();
         this.containerWidth = 0;
+        this.lastColumnsWidth = [];
         this.setLayout();
     }
-    onListResizeStart(event, columnKey) {
-        var _a;
+    onListResizeStart(event, columnKey, columnIndex) {
         this.pressedColumn = columnKey;
+        this.pressedColumnIndex = columnIndex;
         this.startX = event.x;
         this.startWidth = event.target.closest('.header-column').offsetWidth;
-        this.tableStartWidth = (_a = this.virtualScroller) === null || _a === void 0 ? void 0 : _a.contentElementRef.nativeElement.offsetWidth;
+        // this.tableStartWidth = this.hostElement.nativeElement.offsetWidth; // this.virtualScroller?.contentElementRef.nativeElement.offsetWidth;
+        this.tableStartWidth = this.listContainerResizableElementRef.nativeElement.offsetWidth; // this.virtualScroller?.contentElementRef.nativeElement.offsetWidth;
     }
     onListResize(event) {
-        if (this.pressedColumn.length > 0) {
+        // if (this.pressedColumn.length > 0) {
+        if (this.pressedColumnIndex >= 0) {
             let widthToAdd = this.layoutService.isRtl() ? this.startX - event.x : event.x - this.startX;
             // Set the width of the column and the container of the whole columns.
             if (this.startWidth + widthToAdd >= PepListComponent.MINIMUM_COLUMN_WIDTH || widthToAdd > 0) {
@@ -2151,26 +2397,30 @@ class PepListComponent {
                             uiControlField.calcTitleColumnWidthString = uiControlField.calcColumnWidthString = 'calc(100% - ' + (totalCalcColsWidth + scrollWidth) + 'px)'; // For 100%
                         }
                         else {
-                            if (uiControlField.ApiName === this.pressedColumn) {
+                            // if (uiControlField.ApiName === this.pressedColumn) {
+                            if (index === this.pressedColumnIndex) {
                                 uiControlField.calcColumnWidth = this.startWidth + widthToAdd;
                                 uiControlField.calcTitleColumnWidthString = uiControlField.calcColumnWidth + 'px';
                                 uiControlField.calcColumnWidthString = uiControlField.calcColumnWidth + 'px';
                             }
                         }
+                        // } else if (uiControlField.ApiName === this.pressedColumn) {
                     }
-                    else if (uiControlField.ApiName === this.pressedColumn) {
+                    else if (index === this.pressedColumnIndex) {
                         uiControlField.calcColumnWidth = this.startWidth + widthToAdd;
                         uiControlField.calcTitleColumnWidthString = uiControlField.calcColumnWidthString = uiControlField.calcColumnWidth + 'px';
                     }
                     totalCalcColsWidth += uiControlField.calcColumnWidth;
                 }
-                this.renderer.setStyle(this.hostElement.nativeElement, 'width', this.tableStartWidth + widthToAdd + 'px');
+                const widthToSet = (this.tableStartWidth + widthToAdd) + 'px';
+                this.setColumnsWidth(widthToSet);
+                this.checkForChanges = new Date().getTime();
             }
-            this.checkForChanges = new Date().getTime();
         }
     }
     onListResizeEnd(event) {
-        if (this.pressedColumn.length > 0) {
+        // if (this.pressedColumn.length > 0) {
+        if (this.pressedColumnIndex >= 0) {
             if (event &&
                 this.getParent(event.srcElement, 'resize-box').length > 0) {
                 this.initResizeData();
@@ -2181,11 +2431,24 @@ 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();
         }
     }
     onListSortingChange(sortBy, isAsc, event = null) {
-        if (this.pressedColumn.length > 0 ||
+        if (
+        // this.pressedColumn.length > 0 ||
+        this.pressedColumnIndex >= 0 ||
             (event && this.getParent(event.srcElement, 'resize-box').length > 0)) {
             return;
         }
@@ -2205,9 +2468,13 @@ class PepListComponent {
         this.initResizeData();
     }
     onPagerChange(event) {
+        const pageSizeChanged = event.pageSize !== this.pageSize;
+        if (pageSizeChanged) {
+            this.pageSize = event.pageSize;
+        }
         this.pageIndex = event.pageIndex;
         // Scroll to top.
-        this.scrollToTop();
+        //this.scrollToTop();
         const startIndex = event.pageIndex * event.pageSize;
         const endIndex = Math.min(startIndex + event.pageSize, this.totalRows);
         let shouldGetItemsFromApi = false;
@@ -2226,11 +2493,13 @@ class PepListComponent {
                     pageIndex: event.pageIndex,
                     pageSize: event.pageSize,
                 });
+                this.scrollToTop();
             }
         }
         else {
             setTimeout(() => {
                 this.updateCurrentPageItems(startIndex, endIndex);
+                this.scrollToTop();
             }, this.scrollAnimationTime);
         }
     }
@@ -2306,6 +2575,22 @@ class PepListComponent {
         }
         this.fieldClick.emit(customizeFieldClickedData);
     }
+    //added to handle sorting by specific columns----
+    isSortableColumn(apiName) {
+        var _a;
+        //case 1 - supportSorting = true and array exists
+        if (this.supportSorting) {
+            if ((_a = this.supportSortingFields) === null || _a === void 0 ? void 0 : _a.length) {
+                return this.supportSortingFields.includes(apiName);
+                //case 2 - supportSorting = true and array does not exist
+            }
+            else if (this.supportSortingFields === undefined) {
+                return true;
+            } // case 3 supportSorting = false
+        }
+        else
+            return false;
+    }
 }
 PepListComponent.TOP_ITEMS_DEFAULT = 100;
 PepListComponent.TOP_ITEMS_TABLE = 100;
@@ -2316,15 +2601,22 @@ 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", supportSortingFields: "supportSortingFields", supportResizing: "supportResizing", parentScroll: "parentScroll", disabled: "disabled", lockEvents: "lockEvents", lockItemInnerEvents: "lockItemInnerEvents", printMode: "printMode", isReport: "isReport", zebraStripes: "zebraStripes", totalsRow: "totalsRow", pagerType: "pagerType", pageSize: "pageSize", showPageSizeSelector: "showPageSizeSelector", pageSizeOptions: "pageSizeOptions", showFirstLastButtons: "showFirstLastButtons", pageIndex: "pageIndex", bufferAmount: "bufferAmount", scrollAnimationTime: "scrollAnimationTime", scrollDebounceTime: "scrollDebounceTime", scrollThrottlingTime: "scrollThrottlingTime", SEPARATOR: "SEPARATOR", 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: "listContainerResizableElementRef", first: true, predicate: ["listContainerResizable"], descendants: true, read: ElementRef }, { 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    <div class=\"list-container\">\n        <div #listContainerResizable class=\"list-container-resizable\">\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            <ng-container *ngTemplateOutlet=\"tableTotal\"></ng-container>\n        </div>\n    </div>\n    <pep-list-pager *ngIf=\"pagerType === 'pages'\" class=\" list-pager\" [disabled]=\"loadingItemsFromApi\"\n        [length]=\"totalRows\" [pageSize]=\"pageSize\" [pageIndex]=\"pageIndex\" [showPageSizeSelector]=\"showPageSizeSelector\" [pageSizeOptions]=\"pageSizeOptions\" [showFirstLastButtons]=\"showFirstLastButtons\" (pagerChange)=\"onPagerChange($event)\">\n    </pep-list-pager>\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)\" (keydown)=\"onTabKeydown($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]=\"false && 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': isSortableColumn(field.ApiName),\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)=\"isSortableColumn(field.ApiName) ? (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, j)\">\n                        <div class=\"splitter\"></div>\n                    </div>\n\n                    <div *ngIf=\"isSortableColumn(field.ApiName)\" 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{width:100%;height:inherit;display:flex;flex-direction:column}:host .list-container{display:flex;flex-direction:column;height:inherit;width:100%;overflow:auto}:host .list-container .list-container-resizable{display:flex;flex-direction:column;height:inherit}.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$1.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", "showPageSizeSelector", "showFirstLastButtons", "pageSizeOptions", "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: [{
+                    }, 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    <div class=\"list-container\">\n        <div #listContainerResizable class=\"list-container-resizable\">\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            <ng-container *ngTemplateOutlet=\"tableTotal\"></ng-container>\n        </div>\n    </div>\n    <pep-list-pager *ngIf=\"pagerType === 'pages'\" class=\" list-pager\" [disabled]=\"loadingItemsFromApi\"\n        [length]=\"totalRows\" [pageSize]=\"pageSize\" [pageIndex]=\"pageIndex\" [showPageSizeSelector]=\"showPageSizeSelector\" [pageSizeOptions]=\"pageSizeOptions\" [showFirstLastButtons]=\"showFirstLastButtons\" (pagerChange)=\"onPagerChange($event)\">\n    </pep-list-pager>\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)\" (keydown)=\"onTabKeydown($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]=\"false && 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': isSortableColumn(field.ApiName),\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)=\"isSortableColumn(field.ApiName) ? (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, j)\">\n                        <div class=\"splitter\"></div>\n                    </div>\n\n                    <div *ngIf=\"isSortableColumn(field.ApiName)\" 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{width:100%;height:inherit;display:flex;flex-direction:column}:host .list-container{display:flex;flex-direction:column;height:inherit;width:100%;overflow:auto}:host .list-container .list-container-resizable{display:flex;flex-direction:column;height:inherit}.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: { listContainerResizableElementRef: [{
+                type: ViewChild,
+                args: ['listContainerResizable', { read: ElementRef }]
+            }], sorting: [{
+                type: Input
+            }], cacheSize: [{
+                type: Input
+            }], noDataFoundMsg: [{
                 type: Input
             }], selectionTypeForActions: [{
                 type: Input
@@ -2342,6 +2634,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Input
             }], supportSorting: [{
                 type: Input
+            }], supportSortingFields: [{
+                type: Input
             }], supportResizing: [{
                 type: Input
             }], parentScroll: [{
@@ -2364,6 +2658,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Input
             }], pageSize: [{
                 type: Input
+            }], showPageSizeSelector: [{
+                type: Input
+            }], pageSizeOptions: [{
+                type: Input
+            }], showFirstLastButtons: [{
+                type: Input
             }], pageIndex: [{
                 type: Input
             }], bufferAmount: [{
@@ -2374,6 +2674,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Input
             }], scrollThrottlingTime: [{
                 type: Input
+            }], SEPARATOR: [{
+                type: Input
             }], useAsWebComponent: [{
                 type: Input
             }], itemClick: [{
@@ -2424,7 +2726,7 @@ class PepListActionsComponent {
     }
 }
 PepListActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PepListActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListActionsComponent, selector: "pep-list-actions", inputs: { actions: "actions", sizeType: "sizeType", xPosition: "xPosition", hidden: "hidden" }, outputs: { actionClick: "actionClick", stateChange: "stateChange", menuClick: "menuClick" }, ngImport: i0, template: "<pep-menu [xPosition]=\"xPosition\" [styleType]=\"'strong'\" [sizeType]=\"sizeType\" [items]=\"!hidden ? actions : null\"\n    [hideOnEmptyItems]=\"true\" [iconName]=\"'system_edit'\" (menuItemClick)=\"onActionClicked($event)\"\n    (stateChange)=\"onStateChanged($event)\" (menuClick)=\"menuClick.emit();\">\n</pep-menu>\n", styles: [""], dependencies: [{ kind: "component", type: i1$1.PepMenuComponent, selector: "pep-menu", inputs: ["text", "iconName", "type", "styleType", "sizeType", "classNames", "xPosition", "hideOnEmptyItems", "items", "selectedItem", "disabled"], outputs: ["stateChange", "menuItemClick", "menuClick"] }] });
+PepListActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListActionsComponent, selector: "pep-list-actions", inputs: { actions: "actions", sizeType: "sizeType", xPosition: "xPosition", hidden: "hidden" }, outputs: { actionClick: "actionClick", stateChange: "stateChange", menuClick: "menuClick" }, ngImport: i0, template: "<pep-menu [xPosition]=\"xPosition\" [styleType]=\"'strong'\" [sizeType]=\"sizeType\" [items]=\"!hidden ? actions : null\"\n    [hideOnEmptyItems]=\"true\" [iconName]=\"'system_edit'\" (menuItemClick)=\"onActionClicked($event)\"\n    (stateChange)=\"onStateChanged($event)\" (menuClick)=\"menuClick.emit();\">\n</pep-menu>\n", styles: [""], dependencies: [{ kind: "component", type: i1$1.PepMenuComponent, selector: "pep-menu", inputs: ["text", "iconName", "iconPosition", "type", "styleType", "sizeType", "classNames", "xPosition", "hideOnEmptyItems", "items", "selectedItem", "disabled"], outputs: ["stateChange", "menuItemClick", "menuClick"] }] });
 PepListActionsComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListActionsComponent });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListActionsComponent, decorators: [{
             type: Component,
@@ -2517,7 +2819,7 @@ class PepListCarouselComponent {
     }
 }
 PepListCarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListCarouselComponent, deps: [{ token: i1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
-PepListCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListCarouselComponent, selector: "pep-list-carousel", inputs: { duration: "duration", layout: "layout", itemsToMove: "itemsToMove", lockItemInnerEvents: "lockItemInnerEvents", hideArrowsInSmallScreen: "hideArrowsInSmallScreen", items: "items", itemSize: "itemSize" }, outputs: { itemClick: "itemClick" }, viewQueries: [{ propertyName: "carousel", first: true, predicate: ["carousel"], descendants: true, read: PepCarouselComponent }], ngImport: i0, template: "<div class=\"carousel-container\">\n    <ng-container *ngIf=\"items?.length > 0; then carouselBlock; else emptyBlock\"></ng-container>\n    <ng-template #emptyBlock>\n        <!-- No items -->\n    </ng-template>\n    <ng-template #carouselBlock>\n        <pep-button *ngIf=\"!(hideArrowsInSmallScreen && screenSize > PepScreenSizeType.SM)\"\n            [iconName]=\"'arrow_left_alt'\" [styleType]=\"'regular'\" [disabled]=\"prevDisabled\" (click)=\"moveLeft()\"\n            class=\"carousel-arrow start-arrow\">\n        </pep-button>\n        <pep-carousel #carousel [xWheelEnabled]=\"false\" [snapDuration]=\"duration\"\n            (reachesLeftBound)=\"onReachesLeftBound($event)\" (reachesRightBound)=\"onReachesRightBound($event)\">\n            <ng-container *ngFor=\"let item of items\">\n                <pep-form pepCarouselItem [layout]=\"layout\" [data]=\"item\" [layoutType]=\"'card'\"\n                    (click)=\"itemClicked(item)\" class=\"card-view \" [lockEvents]=\"lockItemInnerEvents\"\n                    [ngClass]=\"{ 'x-small-card': itemSize === 'xs', 'small-card': itemSize === 'sm'}\">\n                </pep-form>\n            </ng-container>\n        </pep-carousel>\n        <pep-button *ngIf=\"!(hideArrowsInSmallScreen && screenSize > PepScreenSizeType.SM)\"\n            [iconName]=\"'arrow_right_alt'\" [styleType]=\"'regular'\" [disabled]=\"nextDisabled\" (click)=\"moveRight()\"\n            class=\"carousel-arrow end-arrow\">\n        </pep-button>\n    </ng-template>\n</div>", styles: [".carousel-container{position:relative;margin:0 calc(var(--pep-spacing-sm, .5rem) * -1);display:grid}.carousel-container .carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:1}.carousel-container .carousel-arrow.start-arrow{left:0}.carousel-container .carousel-arrow.end-arrow{right:0}.carousel-container ::ng-deep .carousel-content .card-view{padding:var(--pep-spacing-sm, .5rem) 0!important}.carousel-container ::ng-deep .carousel-content .card-view:first-child{padding-inline-start:var(--pep-spacing-sm, .5rem)!important}.carousel-container ::ng-deep .carousel-content .card-view:last-child{padding-inline-end:var(--pep-spacing-sm, .5rem)!important}\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: "component", type: i3$2.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i4$2.PepCarouselComponent, selector: "pep-carousel", inputs: ["scrollbarHidden", "disabled", "xDisabled", "yDisabled", "xWheelEnabled", "dragDisabled", "snapDisabled", "snapOffset", "snapDuration"], outputs: ["dsInitialized", "indexChanged", "reachesLeftBound", "reachesRightBound", "snapAnimationFinished", "dragStart", "dragEnd"] }, { kind: "directive", type: i4$2.PepCarouselItemDirective, selector: "[pepCarouselItem]", inputs: ["dragDisabled"] }, { 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"] }] });
+PepListCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListCarouselComponent, selector: "pep-list-carousel", inputs: { duration: "duration", layout: "layout", itemsToMove: "itemsToMove", lockItemInnerEvents: "lockItemInnerEvents", hideArrowsInSmallScreen: "hideArrowsInSmallScreen", items: "items", itemSize: "itemSize" }, outputs: { itemClick: "itemClick" }, viewQueries: [{ propertyName: "carousel", first: true, predicate: ["carousel"], descendants: true, read: PepCarouselComponent }], ngImport: i0, template: "<div class=\"carousel-container\">\n    <ng-container *ngIf=\"items?.length > 0; then carouselBlock; else emptyBlock\"></ng-container>\n    <ng-template #emptyBlock>\n        <!-- No items -->\n    </ng-template>\n    <ng-template #carouselBlock>\n        <pep-button *ngIf=\"!(hideArrowsInSmallScreen && screenSize > PepScreenSizeType.SM)\"\n            [iconName]=\"'arrow_left_alt'\" [styleType]=\"'regular'\" [disabled]=\"prevDisabled\" (click)=\"moveLeft()\"\n            class=\"carousel-arrow start-arrow\">\n        </pep-button>\n        <pep-carousel #carousel [xWheelEnabled]=\"false\" [snapDuration]=\"duration\"\n            (reachesLeftBound)=\"onReachesLeftBound($event)\" (reachesRightBound)=\"onReachesRightBound($event)\">\n            <ng-container *ngFor=\"let item of items\">\n                <pep-form pepCarouselItem [layout]=\"layout\" [data]=\"item\" [layoutType]=\"'card'\"\n                    (click)=\"itemClicked(item)\" class=\"card-view \" [lockEvents]=\"lockItemInnerEvents\"\n                    [ngClass]=\"{ 'x-small-card': itemSize === 'xs', 'small-card': itemSize === 'sm'}\">\n                </pep-form>\n            </ng-container>\n        </pep-carousel>\n        <pep-button *ngIf=\"!(hideArrowsInSmallScreen && screenSize > PepScreenSizeType.SM)\"\n            [iconName]=\"'arrow_right_alt'\" [styleType]=\"'regular'\" [disabled]=\"nextDisabled\" (click)=\"moveRight()\"\n            class=\"carousel-arrow end-arrow\">\n        </pep-button>\n    </ng-template>\n</div>", styles: [".carousel-container{position:relative;margin:0 calc(var(--pep-spacing-sm, .5rem) * -1);display:grid}.carousel-container .carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:1}.carousel-container .carousel-arrow.start-arrow{left:0}.carousel-container .carousel-arrow.end-arrow{right:0}.carousel-container ::ng-deep .carousel-content .card-view{padding:var(--pep-spacing-sm, .5rem) 0!important}.carousel-container ::ng-deep .carousel-content .card-view:first-child{padding-inline-start:var(--pep-spacing-sm, .5rem)!important}.carousel-container ::ng-deep .carousel-content .card-view:last-child{padding-inline-end:var(--pep-spacing-sm, .5rem)!important}\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: "component", type: i3$2.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i4$2.PepCarouselComponent, selector: "pep-carousel", inputs: ["scrollbarHidden", "disabled", "xDisabled", "yDisabled", "xWheelEnabled", "dragDisabled", "snapDisabled", "snapOffset", "snapDuration"], outputs: ["dsInitialized", "indexChanged", "reachesLeftBound", "reachesRightBound", "snapAnimationFinished", "dragStart", "dragEnd"] }, { kind: "directive", type: i4$2.PepCarouselItemDirective, selector: "[pepCarouselItem]", inputs: ["dragDisabled"] }, { kind: "component", type: i7$1.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"] }] });
 PepListCarouselComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListCarouselComponent });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListCarouselComponent, decorators: [{
             type: Component,
@@ -2587,7 +2889,7 @@ class PepListChooserComponent {
     }
 }
 PepListChooserComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListChooserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PepListChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListChooserComponent, selector: "pep-list-chooser", inputs: { options: "options", currentList: "currentList", sizeType: "sizeType" }, outputs: { change: "change" }, ngImport: i0, template: "<ng-container *ngIf=\"menuItems?.length > 1\">\n    <pep-menu [type]=\"'select'\" [sizeType]=\"sizeType\" [items]=\"menuItems\" [selectedItem]=\"currentItem\"\n        [iconName]=\"'arrow_down'\" (menuItemClick)=\"onMenuItemClicked($event)\"></pep-menu>\n</ng-container>\n<ng-container *ngIf=\"menuItems?.length == 1\">\n    <pep-bread-crumbs [items]=\"breadCrumbsItems\" [addSpacing]=\"true\"></pep-bread-crumbs>\n</ng-container>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.PepBreadCrumbsComponent, selector: "pep-bread-crumbs", inputs: ["items", "displayType", "addSpacing"], outputs: ["itemClick"] }, { kind: "component", type: i1$1.PepMenuComponent, selector: "pep-menu", inputs: ["text", "iconName", "type", "styleType", "sizeType", "classNames", "xPosition", "hideOnEmptyItems", "items", "selectedItem", "disabled"], outputs: ["stateChange", "menuItemClick", "menuClick"] }] });
+PepListChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListChooserComponent, selector: "pep-list-chooser", inputs: { options: "options", currentList: "currentList", sizeType: "sizeType" }, outputs: { change: "change" }, ngImport: i0, template: "<ng-container *ngIf=\"menuItems?.length > 1\">\n    <pep-menu [type]=\"'select'\" [sizeType]=\"sizeType\" [items]=\"menuItems\" [selectedItem]=\"currentItem\"\n        [iconName]=\"'arrow_down'\" (menuItemClick)=\"onMenuItemClicked($event)\"></pep-menu>\n</ng-container>\n<ng-container *ngIf=\"menuItems?.length == 1\">\n    <pep-bread-crumbs [items]=\"breadCrumbsItems\" [addSpacing]=\"true\"></pep-bread-crumbs>\n</ng-container>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.PepBreadCrumbsComponent, selector: "pep-bread-crumbs", inputs: ["items", "displayType", "addSpacing"], outputs: ["itemClick"] }, { kind: "component", type: i1$1.PepMenuComponent, selector: "pep-menu", inputs: ["text", "iconName", "iconPosition", "type", "styleType", "sizeType", "classNames", "xPosition", "hideOnEmptyItems", "items", "selectedItem", "disabled"], outputs: ["stateChange", "menuItemClick", "menuClick"] }] });
 PepListChooserComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListChooserComponent });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListChooserComponent, decorators: [{
             type: Component,
@@ -2644,7 +2946,7 @@ class PepListSortingComponent {
     }
 }
 PepListSortingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListSortingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PepListSortingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListSortingComponent, selector: "pep-list-sorting", inputs: { options: "options", currentSorting: "currentSorting", sizeType: "sizeType" }, outputs: { change: "change" }, ngImport: i0, template: "<div class=\"sorting-container\">\n    <div class=\"body-xs sort-by\">\n        <span>{{ 'LIST.SORT_BY' | translate }}</span>\n    </div>\n    <pep-menu [type]=\"'select'\" [sizeType]=\"sizeType\" [items]=\"menuItems\" [selectedItem]=\"currentItem\"\n        [iconName]=\"'arrow_down'\" (menuItemClick)=\"onMenuItemClicked($event)\"></pep-menu>\n</div>", styles: [".sorting-container{display:flex;align-items:center}.sorting-container .sort-by{margin-inline-end:var(--pep-spacing-sm, .5rem)}\n"], dependencies: [{ kind: "component", type: i1$1.PepMenuComponent, selector: "pep-menu", inputs: ["text", "iconName", "type", "styleType", "sizeType", "classNames", "xPosition", "hideOnEmptyItems", "items", "selectedItem", "disabled"], outputs: ["stateChange", "menuItemClick", "menuClick"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+PepListSortingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListSortingComponent, selector: "pep-list-sorting", inputs: { options: "options", currentSorting: "currentSorting", sizeType: "sizeType" }, outputs: { change: "change" }, ngImport: i0, template: "<div class=\"sorting-container\">\n    <div class=\"body-xs sort-by\">\n        <span>{{ 'LIST.SORT_BY' | translate }}</span>\n    </div>\n    <pep-menu [type]=\"'select'\" [sizeType]=\"sizeType\" [items]=\"menuItems\" [selectedItem]=\"currentItem\"\n        [iconName]=\"'arrow_down'\" (menuItemClick)=\"onMenuItemClicked($event)\"></pep-menu>\n</div>", styles: [".sorting-container{display:flex;align-items:center}.sorting-container .sort-by{margin-inline-end:var(--pep-spacing-sm, .5rem)}\n"], dependencies: [{ kind: "component", type: i1$1.PepMenuComponent, selector: "pep-menu", inputs: ["text", "iconName", "iconPosition", "type", "styleType", "sizeType", "classNames", "xPosition", "hideOnEmptyItems", "items", "selectedItem", "disabled"], outputs: ["stateChange", "menuItemClick", "menuClick"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
 PepListSortingComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListSortingComponent });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListSortingComponent, decorators: [{
             type: Component,
@@ -2667,14 +2969,15 @@ class PepListTotalComponent {
         this.totalAmount = -1;
         this.isMapView = false;
         this.sizeType = 'md';
+        this.unknownCount = false;
     }
 }
 PepListTotalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListTotalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PepListTotalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListTotalComponent, selector: "pep-list-total", inputs: { totalRows: "totalRows", totalAmount: "totalAmount", isMapView: "isMapView", sizeType: "sizeType" }, ngImport: i0, template: "<div class=\"total-items-container\">\n    <ng-container *ngIf=\"isMapView; then mapTemplate; else notMapTemplate\"></ng-container>\n\n    <ng-template #notMapTemplate>\n        <ng-container *ngIf=\"totalRows >= 0\">\n            <div class=\"body-{{sizeType}} total-items color-dimmed\"\n                [innerHtml]=\"(totalRows === 1 ? 'LIST.TOTAL_RESULT' : 'LIST.TOTAL_RESULTS') | translate: { totalRows: totalRows }\">\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"totalAmount > 0\"> {{ 'LIST.TOTAL_OF' | translate }} {{ totalAmount }} </ng-container>\n    </ng-template>\n\n    <ng-template #mapTemplate>\n        <ng-container *ngIf=\"totalAmount >= 0\">\n        </ng-container>\n        <ng-container *ngIf=\"totalRows >= 0\">\n            <div class=\"body-{{sizeType}} total-items color-dimmed\"\n                [innerHtml]=\"(totalRows === 1 ? 'LIST.TOTAL_RESULT_OUT_OF_RESULT' : 'LIST.TOTAL_RESULTS_OUT_OF') | translate: { xRows: totalAmount, totalRows: totalRows }\">\n            </div>\n        </ng-container>\n    </ng-template>\n</div>", styles: [":host{height:inherit}.total-items-container{height:100%;display:flex;align-items:center}\n", ""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+PepListTotalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListTotalComponent, selector: "pep-list-total", inputs: { totalRows: "totalRows", totalAmount: "totalAmount", isMapView: "isMapView", sizeType: "sizeType", unknownCount: "unknownCount" }, ngImport: i0, template: "<div class=\"total-items-container\">\n    <ng-container *ngIf=\"isMapView; then mapTemplate; else notMapTemplate\"></ng-container>\n\n    <ng-template #notMapTemplate>\n        <ng-container *ngIf=\"totalRows >= 0\">\n            <div class=\"body-{{sizeType}} total-items color-dimmed\"\n                [innerHtml]=\"(totalRows === 1 ? 'LIST.TOTAL_RESULT' : 'LIST.TOTAL_RESULTS') | translate: { totalRows: totalRows ,unknownCount: unknownCount === true ? '+' : ''}\">\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"totalAmount > 0\"> {{ 'LIST.TOTAL_OF' | translate }} {{ totalAmount }} </ng-container>\n    </ng-template>\n\n    <ng-template #mapTemplate>\n        <ng-container *ngIf=\"totalAmount >= 0\">\n        </ng-container>\n        <ng-container *ngIf=\"totalRows >= 0\">\n            <div class=\"body-{{sizeType}} total-items color-dimmed\"\n                [innerHtml]=\"(totalRows === 1 ? 'LIST.TOTAL_RESULT_OUT_OF_RESULT' : 'LIST.TOTAL_RESULTS_OUT_OF') | translate: { xRows: totalAmount, totalRows: totalRows }\">\n            </div>\n        </ng-container>\n    </ng-template>\n</div>", styles: [":host{height:inherit}.total-items-container{height:100%;display:flex;align-items:center}\n", ""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
 PepListTotalComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListTotalComponent });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListTotalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pep-list-total', template: "<div class=\"total-items-container\">\n    <ng-container *ngIf=\"isMapView; then mapTemplate; else notMapTemplate\"></ng-container>\n\n    <ng-template #notMapTemplate>\n        <ng-container *ngIf=\"totalRows >= 0\">\n            <div class=\"body-{{sizeType}} total-items color-dimmed\"\n                [innerHtml]=\"(totalRows === 1 ? 'LIST.TOTAL_RESULT' : 'LIST.TOTAL_RESULTS') | translate: { totalRows: totalRows }\">\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"totalAmount > 0\"> {{ 'LIST.TOTAL_OF' | translate }} {{ totalAmount }} </ng-container>\n    </ng-template>\n\n    <ng-template #mapTemplate>\n        <ng-container *ngIf=\"totalAmount >= 0\">\n        </ng-container>\n        <ng-container *ngIf=\"totalRows >= 0\">\n            <div class=\"body-{{sizeType}} total-items color-dimmed\"\n                [innerHtml]=\"(totalRows === 1 ? 'LIST.TOTAL_RESULT_OUT_OF_RESULT' : 'LIST.TOTAL_RESULTS_OUT_OF') | translate: { xRows: totalAmount, totalRows: totalRows }\">\n            </div>\n        </ng-container>\n    </ng-template>\n</div>", styles: [":host{height:inherit}.total-items-container{height:100%;display:flex;align-items:center}\n"] }]
+            args: [{ selector: 'pep-list-total', template: "<div class=\"total-items-container\">\n    <ng-container *ngIf=\"isMapView; then mapTemplate; else notMapTemplate\"></ng-container>\n\n    <ng-template #notMapTemplate>\n        <ng-container *ngIf=\"totalRows >= 0\">\n            <div class=\"body-{{sizeType}} total-items color-dimmed\"\n                [innerHtml]=\"(totalRows === 1 ? 'LIST.TOTAL_RESULT' : 'LIST.TOTAL_RESULTS') | translate: { totalRows: totalRows ,unknownCount: unknownCount === true ? '+' : ''}\">\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"totalAmount > 0\"> {{ 'LIST.TOTAL_OF' | translate }} {{ totalAmount }} </ng-container>\n    </ng-template>\n\n    <ng-template #mapTemplate>\n        <ng-container *ngIf=\"totalAmount >= 0\">\n        </ng-container>\n        <ng-container *ngIf=\"totalRows >= 0\">\n            <div class=\"body-{{sizeType}} total-items color-dimmed\"\n                [innerHtml]=\"(totalRows === 1 ? 'LIST.TOTAL_RESULT_OUT_OF_RESULT' : 'LIST.TOTAL_RESULTS_OUT_OF') | translate: { xRows: totalAmount, totalRows: totalRows }\">\n            </div>\n        </ng-container>\n    </ng-template>\n</div>", styles: [":host{height:inherit}.total-items-container{height:100%;display:flex;align-items:center}\n"] }]
         }, {
             type: Injectable
         }], propDecorators: { totalRows: [{
@@ -2685,6 +2988,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Input
             }], sizeType: [{
                 type: Input
+            }], unknownCount: [{
+                type: Input
             }] } });
 
 class IPepListView {
@@ -2741,7 +3046,7 @@ class PepListViewsComponent {
     }
 }
 PepListViewsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListViewsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PepListViewsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListViewsComponent, selector: "pep-list-views", inputs: { views: "views", currentView: "currentView", displayType: "displayType", styleType: "styleType", sizeType: "sizeType", classNames: "classNames" }, outputs: { change: "change" }, ngImport: i0, template: "<ng-container *ngIf=\"displayType === 'menu' then menuTemplate else buttonsTemplate\">\n</ng-container>\n<ng-template #menuTemplate>\n    <pep-menu [type]=\"'select'\" [styleType]=\"styleType\" [sizeType]=\"sizeType\" [classNames]=\"classNames\"\n        [items]=\"menuItems\" [selectedItem]=\"currentItem\"\n        [iconName]=\"currentItem?.iconName ? currentItem?.iconName : 'arrow_down'\"\n        (menuItemClick)=\"onMenuItemClicked($event)\"></pep-menu>\n</ng-template>\n<ng-template #buttonsTemplate>\n    <div class=\"buttons-wrapper pep-spacing-element-negative\">\n        <button *ngFor=\"let view of views\" mat-button [title]=\"view.title\" [disabled]=\"view.key === currentView?.key\"\n            class=\"pep-button icon-button pep-spacing-element {{ sizeType }} {{ styleType }} {{ classNames }}\"\n            pepRtlDirection pepMenuBlur (click)=\"onViewChanged(view)\">\n            <mat-icon>\n                <pep-icon name=\"{{ view?.iconName }}\"></pep-icon>\n            </mat-icon>\n        </button>\n    </div>\n</ng-template>", styles: [".buttons-wrapper{display:flex}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.PepMenuBlurDirective, selector: "[pepMenuBlur]" }, { kind: "directive", type: i1.PepRtlDirectionDirective, selector: "[pepRtlDirection]" }, { kind: "component", type: i5.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i1$1.PepMenuComponent, selector: "pep-menu", inputs: ["text", "iconName", "type", "styleType", "sizeType", "classNames", "xPosition", "hideOnEmptyItems", "items", "selectedItem", "disabled"], outputs: ["stateChange", "menuItemClick", "menuClick"] }] });
+PepListViewsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListViewsComponent, selector: "pep-list-views", inputs: { views: "views", currentView: "currentView", displayType: "displayType", styleType: "styleType", sizeType: "sizeType", classNames: "classNames" }, outputs: { change: "change" }, ngImport: i0, template: "<ng-container *ngIf=\"displayType === 'menu' then menuTemplate else buttonsTemplate\">\n</ng-container>\n<ng-template #menuTemplate>\n    <pep-menu [type]=\"'select'\" [styleType]=\"styleType\" [sizeType]=\"sizeType\" [classNames]=\"classNames\"\n        [items]=\"menuItems\" [selectedItem]=\"currentItem\"\n        [iconName]=\"currentItem?.iconName ? currentItem?.iconName : 'arrow_down'\"\n        (menuItemClick)=\"onMenuItemClicked($event)\"></pep-menu>\n</ng-template>\n<ng-template #buttonsTemplate>\n    <div class=\"buttons-wrapper pep-spacing-element-negative\">\n        <button *ngFor=\"let view of views\" mat-button [title]=\"view.title\" [disabled]=\"view.key === currentView?.key\"\n            class=\"pep-button icon-button pep-spacing-element {{ sizeType }} {{ styleType }} {{ classNames }}\"\n            pepRtlDirection pepMenuBlur (click)=\"onViewChanged(view)\">\n            <mat-icon>\n                <pep-icon name=\"{{ view?.iconName }}\"></pep-icon>\n            </mat-icon>\n        </button>\n    </div>\n</ng-template>", styles: [".buttons-wrapper{display:flex}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.PepMenuBlurDirective, selector: "[pepMenuBlur]" }, { kind: "directive", type: i1.PepRtlDirectionDirective, selector: "[pepRtlDirection]" }, { kind: "component", type: i5.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i1$1.PepMenuComponent, selector: "pep-menu", inputs: ["text", "iconName", "iconPosition", "type", "styleType", "sizeType", "classNames", "xPosition", "hideOnEmptyItems", "items", "selectedItem", "disabled"], outputs: ["stateChange", "menuItemClick", "menuClick"] }] });
 PepListViewsComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListViewsComponent });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListViewsComponent, decorators: [{
             type: Component,
@@ -2868,6 +3173,7 @@ PepListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         PepIconModule,
         PepFormModule,
         PepMenuModule,
+        PepSelectModule,
         PepTextboxModule,
         VirtualScrollerModule], exports: [
         // PepListOldComponent,
@@ -2896,6 +3202,7 @@ PepListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
         PepIconModule,
         PepFormModule,
         PepMenuModule,
+        PepSelectModule,
         PepTextboxModule,
         VirtualScrollerModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListModule, decorators: [{
@@ -2918,6 +3225,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                         PepIconModule,
                         PepFormModule,
                         PepMenuModule,
+                        PepSelectModule,
                         PepTextboxModule,
                         VirtualScrollerModule
                     ],