@pepperi-addons/ngx-lib 0.5.0-ng15.2 → 0.5.0-ng16.1

package/{fesm2020 → fesm2022}/pepperi-addons-ngx-lib-list.mjs

@@ -44,6 +44,12 @@ function VIRTUAL_SCROLLER_DEFAULT_OPTIONS_FACTORY() {
     };
 }
 class VirtualScrollerComponent {
+    element;
+    renderer;
+    zone;
+    changeDetectorRef;
+    viewPortItems;
+    window = window;
     get viewPortInfo() {
         const pageInfo = this.previousViewPort || {};
         return {
@@ -57,6 +63,7 @@ class VirtualScrollerComponent {
             endIndexWithBuffer: pageInfo.endIndexWithBuffer || 0,
         };
     }
+    _disable = false;
     get disable() {
         return this._disable;
     }
@@ -72,6 +79,8 @@ class VirtualScrollerComponent {
             this.addScrollEventHandlers();
         }
     }
+    executeRefreshOutsideAngularZone = false;
+    _enableUnequalChildrenSizes = false;
     get enableUnequalChildrenSizes() {
         return this._enableUnequalChildrenSizes;
     }
@@ -83,6 +92,19 @@ class VirtualScrollerComponent {
         this.minMeasuredChildWidth = undefined;
         this.minMeasuredChildHeight = undefined;
     }
+    RTL = false;
+    useMarginInsteadOfTranslate = false;
+    modifyOverflowStyleOfParentScroll;
+    stripedTable;
+    scrollbarWidth;
+    scrollbarHeight;
+    childWidth;
+    childHeight;
+    ssrChildWidth;
+    ssrChildHeight;
+    ssrViewportWidth = 1920;
+    ssrViewportHeight = 1080;
+    _bufferAmount;
     get bufferAmount() {
         if (typeof (this._bufferAmount) === 'number' && this._bufferAmount > 0) {
             return this._bufferAmount;
@@ -94,6 +116,9 @@ class VirtualScrollerComponent {
     set bufferAmount(value) {
         this._bufferAmount = value;
     }
+    scrollAnimationTime;
+    resizeBypassRefreshThreshold;
+    _scrollThrottlingTime;
     get scrollThrottlingTime() {
         return this._scrollThrottlingTime;
     }
@@ -101,6 +126,7 @@ class VirtualScrollerComponent {
         this._scrollThrottlingTime = value;
         this.updateOnScrollFunction();
     }
+    _scrollDebounceTime;
     get scrollDebounceTime() {
         return this._scrollDebounceTime;
     }
@@ -108,6 +134,7 @@ class VirtualScrollerComponent {
         this._scrollDebounceTime = value;
         this.updateOnScrollFunction();
     }
+    onScroll;
     updateOnScrollFunction() {
         if (this.scrollDebounceTime) {
             this.onScroll = this.debounce(() => {
@@ -125,6 +152,8 @@ class VirtualScrollerComponent {
             };
         }
     }
+    checkScrollElementResizedTimer;
+    _checkResizeInterval;
     get checkResizeInterval() {
         return this._checkResizeInterval;
     }
@@ -135,6 +164,7 @@ class VirtualScrollerComponent {
         this._checkResizeInterval = value;
         this.addScrollEventHandlers();
     }
+    _items = [];
     get items() {
         return this._items;
     }
@@ -145,6 +175,8 @@ class VirtualScrollerComponent {
         this._items = value || [];
         this.refresh_internal(true);
     }
+    compareItems = (item1, item2) => item1 === item2;
+    _horizontal;
     get horizontal() {
         return this._horizontal;
     }
@@ -160,6 +192,8 @@ class VirtualScrollerComponent {
         }
         this.oldParentScrollOverflow = undefined;
     }
+    oldParentScrollOverflow;
+    _parentScroll;
     get parentScroll() {
         return this._parentScroll;
     }
@@ -177,6 +211,16 @@ class VirtualScrollerComponent {
             scrollElement.style['overflow-x'] = this.horizontal ? 'auto' : 'visible';
         }
     }
+    // private _lastChildRect: DOMRect = null;
+    vsChildRectChange = new EventEmitter();
+    vsUpdate = new EventEmitter();
+    vsChange = new EventEmitter();
+    vsStart = new EventEmitter();
+    vsEnd = new EventEmitter();
+    contentElementRef;
+    invisiblePaddingElementRef;
+    headerElementRef;
+    containerElementRef;
     ngOnInit() {
         this.addScrollEventHandlers();
     }
@@ -335,33 +379,12 @@ class VirtualScrollerComponent {
         animate();
         this.currentTween = newTween;
     }
+    isAngularUniversalSSR;
     constructor(element, renderer, zone, changeDetectorRef, platformId, options) {
         this.element = element;
         this.renderer = renderer;
         this.zone = zone;
         this.changeDetectorRef = changeDetectorRef;
-        this.window = window;
-        this._disable = false;
-        this.executeRefreshOutsideAngularZone = false;
-        this._enableUnequalChildrenSizes = false;
-        this.RTL = false;
-        this.useMarginInsteadOfTranslate = false;
-        this.ssrViewportWidth = 1920;
-        this.ssrViewportHeight = 1080;
-        this._items = [];
-        this.compareItems = (item1, item2) => item1 === item2;
-        // private _lastChildRect: DOMRect = null;
-        this.vsChildRectChange = new EventEmitter();
-        this.vsUpdate = new EventEmitter();
-        this.vsChange = new EventEmitter();
-        this.vsStart = new EventEmitter();
-        this.vsEnd = new EventEmitter();
-        this.calculatedScrollbarWidth = 0;
-        this.calculatedScrollbarHeight = 0;
-        this.padding = 0;
-        this.previousViewPort = {};
-        this.cachedPageSize = 0;
-        this.previousScrollNumberElements = 0;
         this.isAngularUniversalSSR = isPlatformServer(platformId);
         const defaultOptions = VIRTUAL_SCROLLER_DEFAULT_OPTIONS_FACTORY();
         this.checkResizeInterval = options?.checkResizeInterval || defaultOptions.checkResizeInterval;
@@ -396,6 +419,7 @@ class VirtualScrollerComponent {
         const content = (this.containerElementRef && this.containerElementRef.nativeElement) || this.contentElementRef.nativeElement;
         return content;
     }
+    previousScrollBoundingRect;
     checkScrollElementResized() {
         const boundingRect = this.getElementSize(this.getScrollElement());
         let sizeChanged;
@@ -414,6 +438,13 @@ class VirtualScrollerComponent {
             }
         }
     }
+    _invisiblePaddingProperty;
+    _offsetType;
+    _scrollType;
+    _pageOffsetType;
+    _childScrollDim;
+    _translateDir;
+    _marginDir;
     updateDirection() {
         if (this.horizontal) {
             this._childScrollDim = 'childWidth';
@@ -472,6 +503,14 @@ class VirtualScrollerComponent {
         };
         return result;
     }
+    calculatedScrollbarWidth = 0;
+    calculatedScrollbarHeight = 0;
+    padding = 0;
+    previousViewPort = {};
+    currentTween;
+    cachedItemsLength;
+    disposeScrollHandler;
+    disposeResizeHandler;
     refresh_internal(itemsArrayModified, refreshCompletedCallback = undefined, maxRunTimes = 2) {
         //note: maxRunTimes is to force it to keep recalculating if the previous iteration caused a re-render (different sliced items in viewport or scrollPosition changed).
         //The default of 2x max will probably be accurate enough without causing too large a performance bottleneck
@@ -674,6 +713,9 @@ class VirtualScrollerComponent {
         }
         return windowScrollValue || this.getScrollElement()[this._scrollType] || 0;
     }
+    minMeasuredChildWidth;
+    minMeasuredChildHeight;
+    wrapGroupDimensions;
     resetWrapGroupDimensions() {
         const oldWrapGroupDimensions = this.wrapGroupDimensions;
         this.invalidateAllCachedMeasurements();
@@ -871,6 +913,8 @@ class VirtualScrollerComponent {
             wrapGroupsPerPage: wrapGroupsPerPage,
         };
     }
+    cachedPageSize = 0;
+    previousScrollNumberElements = 0;
     calculatePadding(arrayStartIndexWithBuffer, dimensions) {
         if (dimensions.itemCount === 0) {
             return 0;
@@ -979,15 +1023,15 @@ class VirtualScrollerComponent {
             maxScrollPosition: pageInfo.maxScrollPosition
         };
     }
-}
-VirtualScrollerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: VirtualScrollerComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: PLATFORM_ID }, { token: 'virtual-scroller-default-options', optional: true }], target: i0.ɵɵFactoryTarget.Component });
-VirtualScrollerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: VirtualScrollerComponent, selector: "virtual-scroller,[virtualScroller]", inputs: { disable: "disable", executeRefreshOutsideAngularZone: "executeRefreshOutsideAngularZone", enableUnequalChildrenSizes: "enableUnequalChildrenSizes", RTL: "RTL", useMarginInsteadOfTranslate: "useMarginInsteadOfTranslate", modifyOverflowStyleOfParentScroll: "modifyOverflowStyleOfParentScroll", stripedTable: "stripedTable", scrollbarWidth: "scrollbarWidth", scrollbarHeight: "scrollbarHeight", childWidth: "childWidth", childHeight: "childHeight", ssrChildWidth: "ssrChildWidth", ssrChildHeight: "ssrChildHeight", ssrViewportWidth: "ssrViewportWidth", ssrViewportHeight: "ssrViewportHeight", bufferAmount: "bufferAmount", scrollAnimationTime: "scrollAnimationTime", resizeBypassRefreshThreshold: "resizeBypassRefreshThreshold", scrollThrottlingTime: "scrollThrottlingTime", scrollDebounceTime: "scrollDebounceTime", checkResizeInterval: "checkResizeInterval", items: "items", compareItems: "compareItems", horizontal: "horizontal", parentScroll: "parentScroll" }, outputs: { vsChildRectChange: "vsChildRectChange", vsUpdate: "vsUpdate", vsChange: "vsChange", vsStart: "vsStart", vsEnd: "vsEnd" }, host: { properties: { "class.horizontal": "horizontal", "class.vertical": "!horizontal", "class.selfScroll": "!parentScroll", "class.rtl": "RTL" } }, queries: [{ propertyName: "headerElementRef", first: true, predicate: ["header"], descendants: true, read: ElementRef }, { propertyName: "containerElementRef", first: true, predicate: ["container"], descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "contentElementRef", first: true, predicate: ["content"], descendants: true, read: ElementRef, static: true }, { propertyName: "invisiblePaddingElementRef", first: true, predicate: ["invisiblePadding"], descendants: true, read: ElementRef, static: true }], exportAs: ["virtualScroller"], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VirtualScrollerComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: PLATFORM_ID }, { token: 'virtual-scroller-default-options', optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: VirtualScrollerComponent, selector: "virtual-scroller,[virtualScroller]", inputs: { disable: "disable", executeRefreshOutsideAngularZone: "executeRefreshOutsideAngularZone", enableUnequalChildrenSizes: "enableUnequalChildrenSizes", RTL: "RTL", useMarginInsteadOfTranslate: "useMarginInsteadOfTranslate", modifyOverflowStyleOfParentScroll: "modifyOverflowStyleOfParentScroll", stripedTable: "stripedTable", scrollbarWidth: "scrollbarWidth", scrollbarHeight: "scrollbarHeight", childWidth: "childWidth", childHeight: "childHeight", ssrChildWidth: "ssrChildWidth", ssrChildHeight: "ssrChildHeight", ssrViewportWidth: "ssrViewportWidth", ssrViewportHeight: "ssrViewportHeight", bufferAmount: "bufferAmount", scrollAnimationTime: "scrollAnimationTime", resizeBypassRefreshThreshold: "resizeBypassRefreshThreshold", scrollThrottlingTime: "scrollThrottlingTime", scrollDebounceTime: "scrollDebounceTime", checkResizeInterval: "checkResizeInterval", items: "items", compareItems: "compareItems", horizontal: "horizontal", parentScroll: "parentScroll" }, outputs: { vsChildRectChange: "vsChildRectChange", vsUpdate: "vsUpdate", vsChange: "vsChange", vsStart: "vsStart", vsEnd: "vsEnd" }, host: { properties: { "class.horizontal": "horizontal", "class.vertical": "!horizontal", "class.selfScroll": "!parentScroll", "class.rtl": "RTL" } }, queries: [{ propertyName: "headerElementRef", first: true, predicate: ["header"], descendants: true, read: ElementRef }, { propertyName: "containerElementRef", first: true, predicate: ["container"], descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "contentElementRef", first: true, predicate: ["content"], descendants: true, read: ElementRef, static: true }, { propertyName: "invisiblePaddingElementRef", first: true, predicate: ["invisiblePadding"], descendants: true, read: ElementRef, static: true }], exportAs: ["virtualScroller"], usesOnChanges: true, ngImport: i0, template: `
     <div class="total-padding" #invisiblePadding></div>
     <div class="scrollable-content" #content>
       <ng-content></ng-content>
     </div>
   `, isInline: true, styles: [":host{position:relative;display:block;-webkit-overflow-scrolling:touch}:host.horizontal.selfScroll{overflow-y:visible;overflow-x:auto}:host.horizontal.selfScroll.rtl{transform:scaleX(-1)}:host.vertical.selfScroll{overflow-y:auto;overflow-x:visible}.scrollable-content{top:0;left:0;width:100%;height:100%;max-width:100vw;max-height:100vh;position:absolute}.scrollable-content ::ng-deep>*{box-sizing:border-box}:host.horizontal{white-space:nowrap}:host.horizontal .scrollable-content{display:flex}:host.horizontal .scrollable-content ::ng-deep>*{flex-shrink:0;flex-grow:0;white-space:initial}:host.horizontal.rtl .scrollable-content ::ng-deep>*{transform:scaleX(-1)}.total-padding{position:absolute;top:0;left:0;height:1px;width:1px;transform-origin:0 0;opacity:0}:host.horizontal .total-padding{height:100%}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: VirtualScrollerComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VirtualScrollerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'virtual-scroller,[virtualScroller]', exportAs: 'virtualScroller', template: `
     <div class="total-padding" #invisiblePadding></div>
@@ -1082,16 +1126,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 args: ['container', { read: ElementRef, static: false }]
             }] } });
 class VirtualScrollerModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VirtualScrollerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: VirtualScrollerModule, declarations: [VirtualScrollerComponent], imports: [CommonModule], exports: [VirtualScrollerComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VirtualScrollerModule, providers: [
+            {
+                provide: 'virtual-scroller-default-options',
+                useFactory: VIRTUAL_SCROLLER_DEFAULT_OPTIONS_FACTORY
+            }
+        ], imports: [CommonModule] });
 }
-VirtualScrollerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: VirtualScrollerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-VirtualScrollerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: VirtualScrollerModule, declarations: [VirtualScrollerComponent], imports: [CommonModule], exports: [VirtualScrollerComponent] });
-VirtualScrollerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: VirtualScrollerModule, providers: [
-        {
-            provide: 'virtual-scroller-default-options',
-            useFactory: VIRTUAL_SCROLLER_DEFAULT_OPTIONS_FACTORY
-        }
-    ], imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: VirtualScrollerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VirtualScrollerModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [VirtualScrollerComponent],
@@ -1107,26 +1151,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         }] });
 
 class PepSelectionData {
+    selectionType;
+    rows;
+    rowTypes;
 }
 const DEFAULT_PAGE_SIZE = 50;
 
 class IPepListPagerChangeEvent {
+    pageIndex;
+    previousPageIndex;
+    pageSize;
+    length;
 }
 class PepListPagerComponent {
+    _changeDetectorRef;
+    layoutService;
+    disabled = false;
+    _pageIndex = 0;
     set pageIndex(value) {
         this.setPageIndex(value);
     }
     get pageIndex() {
         return this._pageIndex;
     }
+    length = 0;
+    pageSize = DEFAULT_PAGE_SIZE;
+    pagerChange = new EventEmitter();
     constructor(_changeDetectorRef, layoutService) {
         this._changeDetectorRef = _changeDetectorRef;
         this.layoutService = layoutService;
-        this.disabled = false;
-        this._pageIndex = 0;
-        this.length = 0;
-        this.pageSize = DEFAULT_PAGE_SIZE;
-        this.pagerChange = new EventEmitter();
     }
     nextPage() {
         if (!this.hasNextPage()) {
@@ -1198,11 +1251,11 @@ class PepListPagerComponent {
             length: this.length,
         });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepListPagerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PepListPagerComponent, selector: "pep-list-pager", inputs: { disabled: "disabled", pageIndex: "pageIndex", length: "length", pageSize: "pageSize" }, outputs: { pagerChange: "pagerChange" }, ngImport: i0, template: "\uFEFF<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,.pager-container .page-index ::ng-deep .mdc-form-field-flex{padding:0 .5rem;min-height:2rem}.pager-container .page-index ::ng-deep .mat-form-field-flex .mat-input-element,.pager-container .page-index ::ng-deep .mat-form-field-flex .mat-mdc-input-element,.pager-container .page-index ::ng-deep .mdc-form-field-flex .mat-input-element,.pager-container .page-index ::ng-deep .mdc-form-field-flex .mat-mdc-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-flat-button],    button[mat-stroked-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", "validationChange"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepListPagerComponent });
 }
-PepListPagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepListPagerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
-PepListPagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PepListPagerComponent, selector: "pep-list-pager", inputs: { disabled: "disabled", pageIndex: "pageIndex", length: "length", pageSize: "pageSize" }, outputs: { pagerChange: "pagerChange" }, ngImport: i0, template: "\uFEFF<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,.pager-container .page-index ::ng-deep .mdc-form-field-flex{padding:0 .5rem;min-height:2rem}.pager-container .page-index ::ng-deep .mat-form-field-flex .mat-input-element,.pager-container .page-index ::ng-deep .mat-form-field-flex .mat-mdc-input-element,.pager-container .page-index ::ng-deep .mdc-form-field-flex .mat-input-element,.pager-container .page-index ::ng-deep .mdc-form-field-flex .mat-mdc-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-flat-button],    button[mat-stroked-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", "validationChange"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
-PepListPagerComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepListPagerComponent });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepListPagerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepListPagerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-list-pager', template: "\uFEFF<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,.pager-container .page-index ::ng-deep .mdc-form-field-flex{padding:0 .5rem;min-height:2rem}.pager-container .page-index ::ng-deep .mat-form-field-flex .mat-input-element,.pager-container .page-index ::ng-deep .mat-form-field-flex .mat-mdc-input-element,.pager-container .page-index ::ng-deep .mdc-form-field-flex .mat-input-element,.pager-container .page-index ::ng-deep .mdc-form-field-flex .mat-mdc-input-element{min-width:1.25rem}\n"] }]
         }, {
@@ -1220,6 +1273,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class PepListComponent {
+    hostElement;
+    layoutService;
+    sessionService;
+    cd;
+    renderer;
+    zone;
+    listContainerResizableElementRef;
+    static TOP_ITEMS_DEFAULT = 100;
+    static TOP_ITEMS_TABLE = 100;
+    static TOP_ITEMS_THUMBNAILS = 100;
+    static TOP_ITEMS_ARRAY = 2500;
+    static SELECTED_ITEMS_STATE_KEY = 'SelectedItems';
+    static UN_SELECTED_ITEMS_STATE_KEY = 'UnSelectedItems';
+    static ALL_SELECTED_STATE_KEY = 'AllSelected';
+    static SORT_BY_STATE_KEY = 'SortBy';
+    static ASCENDING_STATE_KEY = 'IsAscending';
+    static MINIMUM_COLUMN_WIDTH = 72;
     set sorting(value) {
         this.sortBy = value?.sortBy || '';
         this.isAsc = value?.sortBy.length > 0 ? value.isAsc : this.isAsc;
@@ -1230,6 +1300,14 @@ class PepListComponent {
             isAsc: this.isAsc
         };
     }
+    cacheSize = -1;
+    noDataFoundMsg = null;
+    selectionTypeForActions = 'multi';
+    showCardSelection = false;
+    hideAllSelectionInMulti = false;
+    cardSize = 'md';
+    tableViewType = 'regular';
+    _viewType = '';
     set viewType(value) {
         this._viewType = value;
         this.isTable = value === 'table';
@@ -1237,12 +1315,19 @@ class PepListComponent {
     get viewType() {
         return this._viewType;
     }
+    firstFieldAsLink = false;
+    supportSorting = true;
+    supportSortingFields = undefined;
+    supportResizing = true;
+    _parentScroll = null;
     set parentScroll(value) {
         this._parentScroll = value;
     }
     get parentScroll() {
         return this._parentScroll;
     }
+    disabled = false;
+    _lockEvents = false;
     set lockEvents(value) {
         this._lockEvents = value;
         if (this._lockEvents) {
@@ -1255,6 +1340,21 @@ class PepListComponent {
     get lockEvents() {
         return this._lockEvents;
     }
+    lockItemInnerEvents = false;
+    printMode = false;
+    isReport = false;
+    zebraStripes = false;
+    totalsRow = [];
+    pagerType = 'scroll';
+    pageSize = DEFAULT_PAGE_SIZE;
+    pageIndex = 0;
+    // @Input() startIndex = 0;
+    bufferAmount = 0;
+    scrollAnimationTime = 500;
+    scrollDebounceTime = 0;
+    scrollThrottlingTime = 0;
+    SEPARATOR = ',';
+    _useAsWebComponent = false;
     set useAsWebComponent(value) {
         this._useAsWebComponent = value;
         if (value) {
@@ -1264,15 +1364,61 @@ class PepListComponent {
     get useAsWebComponent() {
         return this._useAsWebComponent;
     }
+    itemClick = new EventEmitter();
+    fieldClick = new EventEmitter();
+    valueChange = new EventEmitter();
+    sortingChange = new EventEmitter();
+    selectedItemsChange = new EventEmitter();
+    selectedItemChange = new EventEmitter();
+    selectAllClick = new EventEmitter();
+    // @Output()
+    // singleActionClick: EventEmitter<any> = new EventEmitter<any>();
+    listLoad = new EventEmitter();
+    loadItems = new EventEmitter();
+    loadPage = new EventEmitter();
+    startIndexChange = new EventEmitter();
+    virtualScroller;
+    selectAllCB;
+    _layout = null;
     get layout() {
         return this._layout;
     }
+    totalRows = -1;
+    isTable = false;
+    hasColumnWidthOfTypePercentage = true;
+    _items = null;
     get items() {
         return this._items;
     }
+    itemsCounter = 0;
+    currentPageItems;
+    isAllSelected = false;
+    selectedItems = new Map();
+    unSelectedItems = new Map();
+    currentTween;
+    selectedItemId = '';
+    hoveredItemId = '';
+    containerWidth = 0;
+    tableScrollWidth = 0;
+    _loadingItemsFromApi = false;
     get loadingItemsFromApi() {
         return this._loadingItemsFromApi;
     }
+    screenSize;
+    deviceHasMouse = false;
+    // For resize
+    pressedColumn = '';
+    pressedColumnIndex = -1;
+    startX = 0;
+    startWidth = 0;
+    tableStartWidth = 0;
+    lastColumnsWidth = [];
+    // For sorting
+    isAsc = false;
+    sortBy = '';
+    isUserSelected = false;
+    checkForChanges = null;
+    calculatedObjectHeight = 'auto';
     constructor(hostElement, layoutService, sessionService, cd, renderer, zone) {
         this.hostElement = hostElement;
         this.layoutService = layoutService;
@@ -1280,77 +1426,6 @@ class PepListComponent {
         this.cd = cd;
         this.renderer = renderer;
         this.zone = zone;
-        this.cacheSize = -1;
-        this.noDataFoundMsg = null;
-        this.selectionTypeForActions = 'multi';
-        this.showCardSelection = false;
-        this.hideAllSelectionInMulti = false;
-        this.cardSize = 'md';
-        this.tableViewType = 'regular';
-        this._viewType = '';
-        this.firstFieldAsLink = false;
-        this.supportSorting = true;
-        this.supportSortingFields = undefined;
-        this.supportResizing = true;
-        this._parentScroll = null;
-        this.disabled = false;
-        this._lockEvents = false;
-        this.lockItemInnerEvents = false;
-        this.printMode = false;
-        this.isReport = false;
-        this.zebraStripes = false;
-        this.totalsRow = [];
-        this.pagerType = 'scroll';
-        this.pageSize = DEFAULT_PAGE_SIZE;
-        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();
-        this.valueChange = new EventEmitter();
-        this.sortingChange = new EventEmitter();
-        this.selectedItemsChange = new EventEmitter();
-        this.selectedItemChange = new EventEmitter();
-        this.selectAllClick = new EventEmitter();
-        // @Output()
-        // singleActionClick: EventEmitter<any> = new EventEmitter<any>();
-        this.listLoad = new EventEmitter();
-        this.loadItems = new EventEmitter();
-        this.loadPage = new EventEmitter();
-        this.startIndexChange = new EventEmitter();
-        this._layout = null;
-        this.totalRows = -1;
-        this.isTable = false;
-        this.hasColumnWidthOfTypePercentage = true;
-        this._items = null;
-        this.itemsCounter = 0;
-        this.isAllSelected = false;
-        this.selectedItems = new Map();
-        this.unSelectedItems = new Map();
-        this.selectedItemId = '';
-        this.hoveredItemId = '';
-        this.containerWidth = 0;
-        this.tableScrollWidth = 0;
-        this._loadingItemsFromApi = false;
-        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 = false;
-        this.sortBy = '';
-        this.isUserSelected = false;
-        this.checkForChanges = null;
-        this.calculatedObjectHeight = 'auto';
         // this.nativeWindow = window;
         this.layoutService.onResize$.subscribe((size) => {
             this.screenSize = size;
@@ -2474,20 +2549,10 @@ class PepListComponent {
         else
             return false;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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", 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\" (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.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.TOP_ITEMS_DEFAULT = 100;
-PepListComponent.TOP_ITEMS_TABLE = 100;
-PepListComponent.TOP_ITEMS_THUMBNAILS = 100;
-PepListComponent.TOP_ITEMS_ARRAY = 2500;
-PepListComponent.SELECTED_ITEMS_STATE_KEY = 'SelectedItems';
-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 = 72;
-PepListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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: "15.2.10", 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", 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\" (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.PepFormComponent, selector: "pep-form", inputs: ["isInternal", "isReport", "layout", "lockEvents", "canEditObject", "data", "lockFields", "isActive", "layoutType", "objectId", "parentId", "searchCode", "showTitle", "firstFieldAsLink", "checkForChanges"], outputs: ["valueChange", "formValidationChange", "fieldClick", "internalFormFieldClick", "internalFormFieldChange"] }, { kind: "component", type: VirtualScrollerComponent, selector: "virtual-scroller,[virtualScroller]", inputs: ["disable", "executeRefreshOutsideAngularZone", "enableUnequalChildrenSizes", "RTL", "useMarginInsteadOfTranslate", "modifyOverflowStyleOfParentScroll", "stripedTable", "scrollbarWidth", "scrollbarHeight", "childWidth", "childHeight", "ssrChildWidth", "ssrChildHeight", "ssrViewportWidth", "ssrViewportHeight", "bufferAmount", "scrollAnimationTime", "resizeBypassRefreshThreshold", "scrollThrottlingTime", "scrollDebounceTime", "checkResizeInterval", "items", "compareItems", "horizontal", "parentScroll"], outputs: ["vsChildRectChange", "vsUpdate", "vsChange", "vsStart", "vsEnd"], exportAs: ["virtualScroller"] }, { kind: "component", type: PepListPagerComponent, selector: "pep-list-pager", inputs: ["disabled", "pageIndex", "length", "pageSize"], outputs: ["pagerChange"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-list', host: {
                         '(window:resize)': 'onWinResize($event)',
@@ -2586,26 +2651,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class PepListActionsComponent {
-    constructor() {
-        this.actions = null;
-        this.sizeType = 'md';
-        this.xPosition = 'before';
-        this.hidden = false;
-        this.actionClick = new EventEmitter();
-        this.stateChange = new EventEmitter();
-        this.menuClick = new EventEmitter();
-    }
+    actions = null;
+    sizeType = 'md';
+    xPosition = 'before';
+    hidden = false;
+    actionClick = new EventEmitter();
+    stateChange = new EventEmitter();
+    menuClick = new EventEmitter();
     onActionClicked(action) {
         this.actionClick.emit(action);
     }
     onStateChanged(menuStateChangeEvent) {
         this.stateChange.emit(menuStateChangeEvent);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepListActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: "\uFEFF<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"] }] });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepListActionsComponent });
 }
-PepListActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepListActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PepListActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "\uFEFF<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: "15.2.10", ngImport: i0, type: PepListActionsComponent });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepListActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepListActionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-list-actions', template: "\uFEFF<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" }]
         }, {
@@ -2627,6 +2690,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class PepListCarouselComponent {
+    layoutService;
+    duration = 1000;
+    layout = null;
+    itemsToMove = 3;
+    lockItemInnerEvents = true;
+    hideArrowsInSmallScreen = true;
+    _items = null;
     set items(value) {
         this._items = value;
         this.moveTo(0);
@@ -2634,6 +2704,7 @@ class PepListCarouselComponent {
     get items() {
         return this._items;
     }
+    _itemSize = 'xs';
     set itemSize(value) {
         this._itemSize = value;
         this.moveTo(0);
@@ -2641,20 +2712,15 @@ class PepListCarouselComponent {
     get itemSize() {
         return this._itemSize;
     }
+    itemClick = new EventEmitter();
+    carousel;
+    prevDisabled = false;
+    nextDisabled = false;
+    screenSize;
+    PepScreenSizeType = PepScreenSizeType;
     // deviceHasMouse = false;
     constructor(layoutService) {
         this.layoutService = layoutService;
-        this.duration = 1000;
-        this.layout = null;
-        this.itemsToMove = 3;
-        this.lockItemInnerEvents = true;
-        this.hideArrowsInSmallScreen = true;
-        this._items = null;
-        this._itemSize = 'xs';
-        this.itemClick = new EventEmitter();
-        this.prevDisabled = false;
-        this.nextDisabled = false;
-        this.PepScreenSizeType = PepScreenSizeType;
         // this.deviceHasMouse = this.layoutService.getDeviceHasMouse();
     }
     ngAfterViewInit() {
@@ -2694,11 +2760,11 @@ class PepListCarouselComponent {
     onReachesRightBound(event) {
         this.nextDisabled = event;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepListCarouselComponent, deps: [{ token: i1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: "\uFEFF<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"] }] });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepListCarouselComponent });
 }
-PepListCarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepListCarouselComponent, deps: [{ token: i1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
-PepListCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "\uFEFF<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.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepListCarouselComponent });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepListCarouselComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepListCarouselComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-list-carousel', template: "\uFEFF<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"] }]
         }, {
@@ -2725,17 +2791,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class IPepListChooserOption {
+    key;
+    text;
 }
 class PepListChooserComponent {
-    constructor() {
-        this._options = null;
-        this._currentList = null;
-        this.sizeType = 'md';
-        this.change = new EventEmitter();
-        this.breadCrumbsItems = null;
-        this.menuItems = null;
-        this.currentItem = null;
-    }
+    _options = null;
     set options(value) {
         this._options = value;
         this.menuItems = value.map((opt) => {
@@ -2752,6 +2812,7 @@ class PepListChooserComponent {
     get options() {
         return this._options;
     }
+    _currentList = null;
     set currentList(value) {
         this._currentList = value;
         this.currentItem = this.menuItems.find((mi) => mi.key === value.key);
@@ -2759,15 +2820,20 @@ class PepListChooserComponent {
     get currentList() {
         return this._currentList;
     }
+    sizeType = 'md';
+    change = new EventEmitter();
+    breadCrumbsItems = null;
+    menuItems = null;
+    currentItem = null;
     onMenuItemClicked(menuItemClickEvent) {
         this.currentList = this.options.find((list) => list.key === menuItemClickEvent.source.key);
         this.change.emit({ source: this.currentList });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepListChooserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PepListChooserComponent, selector: "pep-list-chooser", inputs: { options: "options", currentList: "currentList", sizeType: "sizeType" }, outputs: { change: "change" }, ngImport: i0, template: "\uFEFF<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"] }] });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepListChooserComponent });
 }
-PepListChooserComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepListChooserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PepListChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PepListChooserComponent, selector: "pep-list-chooser", inputs: { options: "options", currentList: "currentList", sizeType: "sizeType" }, outputs: { change: "change" }, ngImport: i0, template: "\uFEFF<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: "15.2.10", ngImport: i0, type: PepListChooserComponent });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepListChooserComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepListChooserComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-list-chooser', template: "\uFEFF<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>" }]
         }, {
@@ -2783,16 +2849,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class IPepListSortingOption {
+    sortBy;
+    title;
+    iconName;
+    isAsc;
 }
 class PepListSortingComponent {
-    constructor() {
-        this._options = null;
-        this._currentSorting = null;
-        this.sizeType = 'md';
-        this.change = new EventEmitter();
-        this.menuItems = null;
-        this.currentItem = null;
-    }
+    _options = null;
     set options(value) {
         this._options = value;
         this.menuItems = value.map((opt) => {
@@ -2802,6 +2865,7 @@ class PepListSortingComponent {
     get options() {
         return this._options;
     }
+    _currentSorting = null;
     set currentSorting(value) {
         this._currentSorting = value;
         this.currentItem = this.menuItems.find((mi) => mi.key === value.sortBy);
@@ -2809,6 +2873,10 @@ class PepListSortingComponent {
     get currentSorting() {
         return this._currentSorting;
     }
+    sizeType = 'md';
+    change = new EventEmitter();
+    menuItems = null;
+    currentItem = null;
     ngOnInit() {
         if (this.currentSorting === null &&
             this.options &&
@@ -2820,11 +2888,11 @@ class PepListSortingComponent {
         this.currentSorting = this.options.find((sorting) => sorting.sortBy === menuItemClickEvent.source.key);
         this.change.emit({ source: this.currentSorting });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepListSortingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PepListSortingComponent, selector: "pep-list-sorting", inputs: { options: "options", currentSorting: "currentSorting", sizeType: "sizeType" }, outputs: { change: "change" }, ngImport: i0, template: "\uFEFF<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" }] });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepListSortingComponent });
 }
-PepListSortingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepListSortingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PepListSortingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PepListSortingComponent, selector: "pep-list-sorting", inputs: { options: "options", currentSorting: "currentSorting", sizeType: "sizeType" }, outputs: { change: "change" }, ngImport: i0, template: "\uFEFF<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: "15.2.10", ngImport: i0, type: PepListSortingComponent });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepListSortingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepListSortingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-list-sorting', template: "\uFEFF<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"] }]
         }, {
@@ -2840,18 +2908,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class PepListTotalComponent {
-    constructor() {
-        this.totalRows = -1;
-        this.totalAmount = -1;
-        this.isMapView = false;
-        this.sizeType = 'md';
-        this.unknownCount = false;
-    }
+    totalRows = -1;
+    totalAmount = -1;
+    isMapView = false;
+    sizeType = 'md';
+    unknownCount = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepListTotalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PepListTotalComponent, selector: "pep-list-total", inputs: { totalRows: "totalRows", totalAmount: "totalAmount", isMapView: "isMapView", sizeType: "sizeType", unknownCount: "unknownCount" }, ngImport: i0, template: "\uFEFF<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" }] });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepListTotalComponent });
 }
-PepListTotalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepListTotalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PepListTotalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PepListTotalComponent, selector: "pep-list-total", inputs: { totalRows: "totalRows", totalAmount: "totalAmount", isMapView: "isMapView", sizeType: "sizeType", unknownCount: "unknownCount" }, ngImport: i0, template: "\uFEFF<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: "15.2.10", ngImport: i0, type: PepListTotalComponent });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepListTotalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepListTotalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-list-total', template: "\uFEFF<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"] }]
         }, {
@@ -2869,19 +2935,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class IPepListView {
+    key;
+    iconName;
+    title;
 }
 class PepListViewsComponent {
-    constructor() {
-        this._views = null;
-        this._currentView = null;
-        this.displayType = 'menu';
-        this.styleType = 'weak';
-        this.sizeType = 'md';
-        this.classNames = '';
-        this.change = new EventEmitter();
-        this.menuItems = null;
-        this.currentItem = null;
-    }
+    _views = null;
     set views(value) {
         this._views = value;
         this.menuItems = value.map((opt) => {
@@ -2891,6 +2950,7 @@ class PepListViewsComponent {
     get views() {
         return this._views;
     }
+    _currentView = null;
     set currentView(value) {
         this._currentView = value;
         if (this.displayType === 'menu') {
@@ -2900,6 +2960,13 @@ class PepListViewsComponent {
     get currentView() {
         return this._currentView;
     }
+    displayType = 'menu';
+    styleType = 'weak';
+    sizeType = 'md';
+    classNames = '';
+    change = new EventEmitter();
+    menuItems = null;
+    currentItem = null;
     ngOnInit() {
         if (this.displayType === 'buttons') {
             if (this.currentView === null &&
@@ -2920,11 +2987,11 @@ class PepListViewsComponent {
     raiseChangeEvent() {
         this.change.emit({ source: this.currentView });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepListViewsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: "\uFEFF<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-flat-button],    button[mat-stroked-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"] }] });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepListViewsComponent });
 }
-PepListViewsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepListViewsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PepListViewsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "\uFEFF<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-flat-button],    button[mat-stroked-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: "15.2.10", ngImport: i0, type: PepListViewsComponent });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepListViewsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepListViewsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-list-views', template: "\uFEFF<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"] }]
         }, {
@@ -2946,9 +3013,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class IsItemSelectedPipe {
-    constructor() {
-        this.SEPARATOR = ',';
-    }
+    SEPARATOR = ',';
     getUniqItemId(itemId, itemType = '') {
         return itemId + this.SEPARATOR + itemType;
     }
@@ -2967,10 +3032,10 @@ class IsItemSelectedPipe {
         }
         return isSelected;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IsItemSelectedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: IsItemSelectedPipe, name: "isItemSelected" });
 }
-IsItemSelectedPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IsItemSelectedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-IsItemSelectedPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: IsItemSelectedPipe, name: "isItemSelected" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IsItemSelectedPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IsItemSelectedPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'isItemSelected'
@@ -2980,10 +3045,10 @@ class IsItemDisabledPipe {
     transform(item, lockItemInnerEvents, printMode) {
         return (printMode || lockItemInnerEvents || (item && !item.IsSelectableForActions));
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IsItemDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: IsItemDisabledPipe, name: "isItemDisabled" });
 }
-IsItemDisabledPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IsItemDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-IsItemDisabledPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: IsItemDisabledPipe, name: "isItemDisabled" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IsItemDisabledPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IsItemDisabledPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'isItemDisabled'
@@ -3007,6 +3072,7 @@ const listPipes = [
 ];
 // import { PepVirtualScrollComponent } from './virtual-scroll.component';
 class PepListModule {
+    pepIconRegistry;
     constructor(pepIconRegistry) {
         this.pepIconRegistry = pepIconRegistry;
         this.pepIconRegistry.registerIcons([
@@ -3020,64 +3086,64 @@ class PepListModule {
             pepIconArrowLeftAlt,
         ]);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepListModule, deps: [{ token: i5.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: PepListModule, declarations: [
+            // PepListOldComponent,
+            PepListComponent,
+            PepListActionsComponent,
+            PepListCarouselComponent,
+            PepListChooserComponent,
+            PepListPagerComponent,
+            PepListSortingComponent,
+            PepListTotalComponent,
+            PepListViewsComponent, IsItemSelectedPipe,
+            IsItemDisabledPipe], imports: [CommonModule,
+            // Material modules,
+            MatCommonModule,
+            MatButtonModule,
+            MatCheckboxModule,
+            MatRadioModule,
+            MatIconModule,
+            MatMenuModule,
+            // ngx-lib modules
+            PepNgxLibModule,
+            PepBreadCrumbsModule,
+            PepButtonModule,
+            PepCarouselModule,
+            PepIconModule,
+            PepFormModule,
+            PepMenuModule,
+            PepTextboxModule,
+            VirtualScrollerModule], exports: [
+            // PepListOldComponent,
+            PepListComponent,
+            PepListActionsComponent,
+            PepListCarouselComponent,
+            PepListChooserComponent,
+            PepListPagerComponent,
+            PepListSortingComponent,
+            PepListTotalComponent,
+            PepListViewsComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepListModule, imports: [CommonModule,
+            // Material modules,
+            MatCommonModule,
+            MatButtonModule,
+            MatCheckboxModule,
+            MatRadioModule,
+            MatIconModule,
+            MatMenuModule,
+            // ngx-lib modules
+            PepNgxLibModule,
+            PepBreadCrumbsModule,
+            PepButtonModule,
+            PepCarouselModule,
+            PepIconModule,
+            PepFormModule,
+            PepMenuModule,
+            PepTextboxModule,
+            VirtualScrollerModule] });
 }
-PepListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepListModule, deps: [{ token: i5.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
-PepListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: PepListModule, declarations: [
-        // PepListOldComponent,
-        PepListComponent,
-        PepListActionsComponent,
-        PepListCarouselComponent,
-        PepListChooserComponent,
-        PepListPagerComponent,
-        PepListSortingComponent,
-        PepListTotalComponent,
-        PepListViewsComponent, IsItemSelectedPipe,
-        IsItemDisabledPipe], imports: [CommonModule,
-        // Material modules,
-        MatCommonModule,
-        MatButtonModule,
-        MatCheckboxModule,
-        MatRadioModule,
-        MatIconModule,
-        MatMenuModule,
-        // ngx-lib modules
-        PepNgxLibModule,
-        PepBreadCrumbsModule,
-        PepButtonModule,
-        PepCarouselModule,
-        PepIconModule,
-        PepFormModule,
-        PepMenuModule,
-        PepTextboxModule,
-        VirtualScrollerModule], exports: [
-        // PepListOldComponent,
-        PepListComponent,
-        PepListActionsComponent,
-        PepListCarouselComponent,
-        PepListChooserComponent,
-        PepListPagerComponent,
-        PepListSortingComponent,
-        PepListTotalComponent,
-        PepListViewsComponent] });
-PepListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepListModule, imports: [CommonModule,
-        // Material modules,
-        MatCommonModule,
-        MatButtonModule,
-        MatCheckboxModule,
-        MatRadioModule,
-        MatIconModule,
-        MatMenuModule,
-        // ngx-lib modules
-        PepNgxLibModule,
-        PepBreadCrumbsModule,
-        PepButtonModule,
-        PepCarouselModule,
-        PepIconModule,
-        PepFormModule,
-        PepMenuModule,
-        PepTextboxModule,
-        VirtualScrollerModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepListModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepListModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [