@pepperi-addons/ngx-lib 0.4.2-beta.137 → 0.4.2-beta.139

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

@@ -0,0 +1,3047 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, PLATFORM_ID, ElementRef, Component, Inject, Optional, Input, Output, ViewChild, ContentChild, NgModule, Injectable, Pipe } from '@angular/core';
+import * as i2 from '@angular/common';
+import { isPlatformServer, CommonModule } from '@angular/common';
+import { MatCommonModule } from '@angular/material/core';
+import * as i3 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i3$1 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i4$1 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
+import * as i4 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i1 from '@pepperi-addons/ngx-lib';
+import { FIELD_TYPE, PepScreenSizeType, PepNgxLibModule } from '@pepperi-addons/ngx-lib';
+import * as i2$2 from '@pepperi-addons/ngx-lib/bread-crumbs';
+import { PepBreadCrumbItem, PepBreadCrumbsModule } from '@pepperi-addons/ngx-lib/bread-crumbs';
+import * as i3$2 from '@pepperi-addons/ngx-lib/button';
+import { PepButtonModule } from '@pepperi-addons/ngx-lib/button';
+import * as i4$2 from '@pepperi-addons/ngx-lib/carousel';
+import { PepCarouselComponent, PepCarouselModule } from '@pepperi-addons/ngx-lib/carousel';
+import * as i5 from '@pepperi-addons/ngx-lib/icon';
+import { pepIconArrowDown, pepIconArrowEither, pepIconArrowUp, pepIconSystemMust, pepIconArrowRight, pepIconArrowRightAlt, pepIconArrowLeft, pepIconArrowLeftAlt, PepIconModule } from '@pepperi-addons/ngx-lib/icon';
+import * as i7 from '@pepperi-addons/ngx-lib/form';
+import { PepFormModule } from '@pepperi-addons/ngx-lib/form';
+import * as i1$1 from '@pepperi-addons/ngx-lib/menu';
+import { PepMenuModule } from '@pepperi-addons/ngx-lib/menu';
+import * as i6 from '@pepperi-addons/ngx-lib/textbox';
+import { PepTextboxModule } from '@pepperi-addons/ngx-lib/textbox';
+import * as tween from '@tweenjs/tween.js';
+import { coerceNumberProperty } from '@angular/cdk/coercion';
+import * as i2$1 from '@ngx-translate/core';
+
+function VIRTUAL_SCROLLER_DEFAULT_OPTIONS_FACTORY() {
+    return {
+        checkResizeInterval: 1000,
+        modifyOverflowStyleOfParentScroll: true,
+        resizeBypassRefreshThreshold: 5,
+        scrollAnimationTime: 750,
+        scrollDebounceTime: 0,
+        scrollThrottlingTime: 0,
+        stripedTable: false
+    };
+}
+class VirtualScrollerComponent {
+    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 === null || options === void 0 ? void 0 : options.checkResizeInterval) || defaultOptions.checkResizeInterval;
+        this.modifyOverflowStyleOfParentScroll = (options === null || options === void 0 ? void 0 : options.modifyOverflowStyleOfParentScroll) || defaultOptions.modifyOverflowStyleOfParentScroll;
+        this.resizeBypassRefreshThreshold = (options === null || options === void 0 ? void 0 : options.resizeBypassRefreshThreshold) || defaultOptions.resizeBypassRefreshThreshold;
+        this.scrollAnimationTime = (options === null || options === void 0 ? void 0 : options.scrollAnimationTime) || defaultOptions.scrollAnimationTime;
+        this.scrollDebounceTime = (options === null || options === void 0 ? void 0 : options.scrollDebounceTime) || defaultOptions.scrollDebounceTime;
+        this.scrollThrottlingTime = (options === null || options === void 0 ? void 0 : options.scrollThrottlingTime) || defaultOptions.scrollThrottlingTime;
+        this.scrollbarHeight = (options === null || options === void 0 ? void 0 : options.scrollbarHeight) || defaultOptions.scrollbarHeight;
+        this.scrollbarWidth = (options === null || options === void 0 ? void 0 : options.scrollbarWidth) || defaultOptions.scrollbarWidth;
+        this.stripedTable = (options === null || options === void 0 ? void 0 : options.stripedTable) || defaultOptions.stripedTable;
+        this.horizontal = false;
+        this.resetWrapGroupDimensions();
+    }
+    get viewPortInfo() {
+        const pageInfo = this.previousViewPort || {};
+        return {
+            startIndex: pageInfo.startIndex || 0,
+            endIndex: pageInfo.endIndex || 0,
+            scrollStartPosition: pageInfo.scrollStartPosition || 0,
+            scrollEndPosition: pageInfo.scrollEndPosition || 0,
+            scrollDirection: pageInfo.scrollDirection || 'forward',
+            maxScrollPosition: pageInfo.maxScrollPosition || 0,
+            startIndexWithBuffer: pageInfo.startIndexWithBuffer || 0,
+            endIndexWithBuffer: pageInfo.endIndexWithBuffer || 0,
+        };
+    }
+    get disable() {
+        return this._disable;
+    }
+    set disable(value) {
+        if (this._disable === value) {
+            return;
+        }
+        this._disable = value;
+        if (this._disable) {
+            this.removeScrollEventHandlers();
+        }
+        else {
+            this.addScrollEventHandlers();
+        }
+    }
+    get enableUnequalChildrenSizes() {
+        return this._enableUnequalChildrenSizes;
+    }
+    set enableUnequalChildrenSizes(value) {
+        if (this._enableUnequalChildrenSizes === value) {
+            return;
+        }
+        this._enableUnequalChildrenSizes = value;
+        this.minMeasuredChildWidth = undefined;
+        this.minMeasuredChildHeight = undefined;
+    }
+    get bufferAmount() {
+        if (typeof (this._bufferAmount) === 'number' && this._bufferAmount > 0) {
+            return this._bufferAmount;
+        }
+        else {
+            return this.enableUnequalChildrenSizes ? 5 : 0;
+        }
+    }
+    set bufferAmount(value) {
+        this._bufferAmount = value;
+    }
+    get scrollThrottlingTime() {
+        return this._scrollThrottlingTime;
+    }
+    set scrollThrottlingTime(value) {
+        this._scrollThrottlingTime = value;
+        this.updateOnScrollFunction();
+    }
+    get scrollDebounceTime() {
+        return this._scrollDebounceTime;
+    }
+    set scrollDebounceTime(value) {
+        this._scrollDebounceTime = value;
+        this.updateOnScrollFunction();
+    }
+    updateOnScrollFunction() {
+        if (this.scrollDebounceTime) {
+            this.onScroll = this.debounce(() => {
+                this.refresh_internal(false);
+            }, this.scrollDebounceTime);
+        }
+        else if (this.scrollThrottlingTime) {
+            this.onScroll = this.throttleTrailing(() => {
+                this.refresh_internal(false);
+            }, this.scrollThrottlingTime);
+        }
+        else {
+            this.onScroll = () => {
+                this.refresh_internal(false);
+            };
+        }
+    }
+    get checkResizeInterval() {
+        return this._checkResizeInterval;
+    }
+    set checkResizeInterval(value) {
+        if (this._checkResizeInterval === value) {
+            return;
+        }
+        this._checkResizeInterval = value;
+        this.addScrollEventHandlers();
+    }
+    get items() {
+        return this._items;
+    }
+    set items(value) {
+        if (value === this._items) {
+            return;
+        }
+        this._items = value || [];
+        this.refresh_internal(true);
+    }
+    get horizontal() {
+        return this._horizontal;
+    }
+    set horizontal(value) {
+        this._horizontal = value;
+        this.updateDirection();
+    }
+    revertParentOverscroll() {
+        const scrollElement = this.getScrollElement();
+        if (scrollElement && this.oldParentScrollOverflow) {
+            scrollElement.style['overflow-y'] = this.oldParentScrollOverflow.y;
+            scrollElement.style['overflow-x'] = this.oldParentScrollOverflow.x;
+        }
+        this.oldParentScrollOverflow = undefined;
+    }
+    get parentScroll() {
+        return this._parentScroll;
+    }
+    set parentScroll(value) {
+        if (this._parentScroll === value) {
+            return;
+        }
+        this.revertParentOverscroll();
+        this._parentScroll = value;
+        this.addScrollEventHandlers();
+        const scrollElement = this.getScrollElement();
+        if (this.modifyOverflowStyleOfParentScroll && scrollElement !== this.element.nativeElement) {
+            this.oldParentScrollOverflow = { x: scrollElement.style['overflow-x'], y: scrollElement.style['overflow-y'] };
+            scrollElement.style['overflow-y'] = this.horizontal ? 'visible' : 'auto';
+            scrollElement.style['overflow-x'] = this.horizontal ? 'auto' : 'visible';
+        }
+    }
+    ngOnInit() {
+        this.addScrollEventHandlers();
+    }
+    ngOnDestroy() {
+        this.removeScrollEventHandlers();
+        this.revertParentOverscroll();
+    }
+    ngOnChanges(changes) {
+        const indexLengthChanged = this.cachedItemsLength !== this.items.length;
+        this.cachedItemsLength = this.items.length;
+        const firstRun = !changes.items || !changes.items.previousValue || changes.items.previousValue.length === 0;
+        this.refresh_internal(indexLengthChanged || firstRun);
+    }
+    ngDoCheck() {
+        if (this.cachedItemsLength !== this.items.length) {
+            this.cachedItemsLength = this.items.length;
+            this.refresh_internal(true);
+            return;
+        }
+        if (this.previousViewPort && this.viewPortItems && this.viewPortItems.length > 0) {
+            let itemsArrayChanged = false;
+            for (let i = 0; i < this.viewPortItems.length; ++i) {
+                if (!this.compareItems(this.items[this.previousViewPort.startIndexWithBuffer + i], this.viewPortItems[i])) {
+                    itemsArrayChanged = true;
+                    break;
+                }
+            }
+            if (itemsArrayChanged) {
+                this.refresh_internal(true);
+            }
+        }
+    }
+    refresh(refreshCompletedCallback = undefined) {
+        this.refresh_internal(true, refreshCompletedCallback);
+    }
+    invalidateAllCachedMeasurements() {
+        this.wrapGroupDimensions = {
+            maxChildSizePerWrapGroup: [],
+            numberOfKnownWrapGroupChildSizes: 0,
+            sumOfKnownWrapGroupChildWidths: 0,
+            sumOfKnownWrapGroupChildHeights: 0
+        };
+        this.minMeasuredChildWidth = undefined;
+        this.minMeasuredChildHeight = undefined;
+        this.refresh_internal(false);
+    }
+    invalidateCachedMeasurementForItem(item) {
+        if (this.enableUnequalChildrenSizes) {
+            const index = this.items && this.items.indexOf(item);
+            if (index >= 0) {
+                this.invalidateCachedMeasurementAtIndex(index);
+            }
+        }
+        else {
+            this.minMeasuredChildWidth = undefined;
+            this.minMeasuredChildHeight = undefined;
+        }
+        this.refresh_internal(false);
+    }
+    invalidateCachedMeasurementAtIndex(index) {
+        if (this.enableUnequalChildrenSizes) {
+            const cachedMeasurement = this.wrapGroupDimensions.maxChildSizePerWrapGroup[index];
+            if (cachedMeasurement) {
+                this.wrapGroupDimensions.maxChildSizePerWrapGroup[index] = undefined;
+                --this.wrapGroupDimensions.numberOfKnownWrapGroupChildSizes;
+                this.wrapGroupDimensions.sumOfKnownWrapGroupChildWidths -= cachedMeasurement.childWidth || 0;
+                this.wrapGroupDimensions.sumOfKnownWrapGroupChildHeights -= cachedMeasurement.childHeight || 0;
+            }
+        }
+        else {
+            this.minMeasuredChildWidth = undefined;
+            this.minMeasuredChildHeight = undefined;
+        }
+        this.refresh_internal(false);
+    }
+    scrollInto(item, alignToBeginning = true, additionalOffset = 0, animationMilliseconds = undefined, animationCompletedCallback = undefined) {
+        const index = this.items.indexOf(item);
+        if (index === -1) {
+            return;
+        }
+        this.scrollToIndex(index, alignToBeginning, additionalOffset, animationMilliseconds, animationCompletedCallback);
+    }
+    scrollToIndex(index, alignToBeginning = true, additionalOffset = 0, animationMilliseconds = undefined, animationCompletedCallback = undefined) {
+        let maxRetries = 5;
+        const retryIfNeeded = () => {
+            --maxRetries;
+            if (maxRetries <= 0) {
+                if (animationCompletedCallback) {
+                    animationCompletedCallback();
+                }
+                return;
+            }
+            const dimensions = this.calculateDimensions();
+            const desiredStartIndex = Math.min(Math.max(index, 0), dimensions.itemCount - 1);
+            if (this.previousViewPort.startIndex === desiredStartIndex) {
+                if (animationCompletedCallback) {
+                    animationCompletedCallback();
+                }
+                return;
+            }
+            this.scrollToIndex_internal(index, alignToBeginning, additionalOffset, 0, retryIfNeeded);
+        };
+        this.scrollToIndex_internal(index, alignToBeginning, additionalOffset, animationMilliseconds, retryIfNeeded);
+    }
+    scrollToIndex_internal(index, alignToBeginning = true, additionalOffset = 0, animationMilliseconds = undefined, animationCompletedCallback = undefined) {
+        animationMilliseconds = animationMilliseconds === undefined ? this.scrollAnimationTime : animationMilliseconds;
+        const dimensions = this.calculateDimensions();
+        let scroll = this.calculatePadding(index, dimensions) + additionalOffset;
+        if (!alignToBeginning) {
+            scroll -= dimensions.wrapGroupsPerPage * dimensions[this._childScrollDim];
+        }
+        this.scrollToPosition(scroll, animationMilliseconds, animationCompletedCallback);
+    }
+    scrollToPosition(scrollPosition, animationMilliseconds = undefined, animationCompletedCallback = undefined) {
+        scrollPosition += this.getElementsOffset();
+        animationMilliseconds = animationMilliseconds === undefined ? this.scrollAnimationTime : animationMilliseconds;
+        const scrollElement = this.getScrollElement();
+        let animationRequest;
+        if (this.currentTween) {
+            this.currentTween.stop();
+            this.currentTween = undefined;
+        }
+        if (!animationMilliseconds) {
+            this.renderer.setProperty(scrollElement, this._scrollType, scrollPosition);
+            this.refresh_internal(false, animationCompletedCallback);
+            return;
+        }
+        const tweenConfigObj = { scrollPosition: scrollElement[this._scrollType] };
+        const newTween = new tween.Tween(tweenConfigObj)
+            .to({ scrollPosition }, animationMilliseconds)
+            .easing(tween.Easing.Quadratic.Out)
+            .onUpdate((data) => {
+            if (isNaN(data.scrollPosition)) {
+                return;
+            }
+            this.renderer.setProperty(scrollElement, this._scrollType, data.scrollPosition);
+            this.refresh_internal(false);
+        })
+            .onStop(() => {
+            cancelAnimationFrame(animationRequest);
+        })
+            .start();
+        const animate = (time) => {
+            if (!newTween["isPlaying"]()) {
+                return;
+            }
+            newTween.update(time);
+            if (tweenConfigObj.scrollPosition === scrollPosition) {
+                this.refresh_internal(false, animationCompletedCallback);
+                return;
+            }
+            this.zone.runOutsideAngular(() => {
+                animationRequest = requestAnimationFrame(animate);
+            });
+        };
+        animate();
+        this.currentTween = newTween;
+    }
+    getElementSize(element) {
+        const result = element.getBoundingClientRect();
+        const styles = getComputedStyle(element);
+        const marginTop = parseInt(styles['margin-top'], 10) || 0;
+        const marginBottom = parseInt(styles['margin-bottom'], 10) || 0;
+        const marginLeft = parseInt(styles['margin-left'], 10) || 0;
+        const marginRight = parseInt(styles['margin-right'], 10) || 0;
+        return {
+            top: result.top + marginTop,
+            bottom: result.bottom + marginBottom,
+            left: result.left + marginLeft,
+            right: result.right + marginRight,
+            width: parseFloat((result.width + marginLeft + marginRight).toFixed(3)),
+            height: parseFloat((result.height + marginTop + marginBottom).toFixed(3))
+        };
+    }
+    getContent() {
+        const content = (this.containerElementRef && this.containerElementRef.nativeElement) || this.contentElementRef.nativeElement;
+        return content;
+    }
+    checkScrollElementResized() {
+        const boundingRect = this.getElementSize(this.getScrollElement());
+        let sizeChanged;
+        if (!this.previousScrollBoundingRect) {
+            sizeChanged = true;
+        }
+        else {
+            const widthChange = Math.abs(boundingRect.width - this.previousScrollBoundingRect.width);
+            const heightChange = Math.abs(boundingRect.height - this.previousScrollBoundingRect.height);
+            sizeChanged = widthChange > this.resizeBypassRefreshThreshold || heightChange > this.resizeBypassRefreshThreshold;
+        }
+        if (sizeChanged) {
+            this.previousScrollBoundingRect = boundingRect;
+            if (boundingRect.width > 0 && boundingRect.height > 0) {
+                this.refresh_internal(false);
+            }
+        }
+    }
+    updateDirection() {
+        if (this.horizontal) {
+            this._childScrollDim = 'childWidth';
+            this._invisiblePaddingProperty = 'scaleX';
+            this._marginDir = 'margin-left';
+            this._offsetType = 'offsetLeft';
+            this._pageOffsetType = 'pageXOffset';
+            this._scrollType = 'scrollLeft';
+            this._translateDir = 'translateX';
+        }
+        else {
+            this._childScrollDim = 'childHeight';
+            this._invisiblePaddingProperty = 'scaleY';
+            this._marginDir = 'margin-top';
+            this._offsetType = 'offsetTop';
+            this._pageOffsetType = 'pageYOffset';
+            this._scrollType = 'scrollTop';
+            this._translateDir = 'translateY';
+        }
+    }
+    debounce(func, wait, ...args) {
+        const throttled = this.throttleTrailing(func, wait);
+        const result = function () {
+            throttled['cancel']();
+            throttled.apply(this, args);
+        };
+        result['cancel'] = function () {
+            throttled['cancel']();
+        };
+        return result;
+    }
+    throttleTrailing(func, wait, ...args) {
+        let timeout = undefined;
+        let _arguments = args;
+        const result = function () {
+            const _this = this;
+            _arguments = args;
+            if (timeout) {
+                return;
+            }
+            if (wait <= 0) {
+                func.apply(_this, _arguments);
+            }
+            else {
+                timeout = setTimeout(function () {
+                    timeout = undefined;
+                    func.apply(_this, _arguments);
+                }, wait);
+            }
+        };
+        result['cancel'] = function () {
+            if (timeout) {
+                clearTimeout(timeout);
+                timeout = undefined;
+            }
+        };
+        return result;
+    }
+    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
+        //The code would typically quit out on the 2nd iteration anyways. The main time it'd think more than 2 runs would be necessary would be for vastly different sized child items or if this is the 1st time the items array was initialized.
+        //Without maxRunTimes, If the user is actively scrolling this code would become an infinite loop until they stopped scrolling. This would be okay, except each scroll event would start an additional infinte loop. We want to short-circuit it to prevent this.
+        if (itemsArrayModified && this.previousViewPort && this.previousViewPort.scrollStartPosition > 0) {
+            //if items were prepended, scroll forward to keep same items visible
+            const oldViewPort = this.previousViewPort;
+            const oldViewPortItems = this.viewPortItems;
+            const oldRefreshCompletedCallback = refreshCompletedCallback;
+            refreshCompletedCallback = () => {
+                const scrollLengthDelta = this.previousViewPort.scrollLength - oldViewPort.scrollLength;
+                if (scrollLengthDelta > 0 && this.viewPortItems) {
+                    const oldStartItem = oldViewPortItems[0];
+                    const oldStartItemIndex = this.items.findIndex(x => this.compareItems(oldStartItem, x));
+                    if (oldStartItemIndex > this.previousViewPort.startIndexWithBuffer) {
+                        let itemOrderChanged = false;
+                        for (let i = 1; i < this.viewPortItems.length; ++i) {
+                            if (!this.compareItems(this.items[oldStartItemIndex + i], oldViewPortItems[i])) {
+                                itemOrderChanged = true;
+                                break;
+                            }
+                        }
+                        if (!itemOrderChanged) {
+                            this.scrollToPosition(this.previousViewPort.scrollStartPosition + scrollLengthDelta, 0, oldRefreshCompletedCallback);
+                            return;
+                        }
+                    }
+                }
+                if (oldRefreshCompletedCallback) {
+                    oldRefreshCompletedCallback();
+                }
+            };
+        }
+        this.zone.runOutsideAngular(() => {
+            requestAnimationFrame(() => {
+                if (itemsArrayModified) {
+                    this.resetWrapGroupDimensions();
+                }
+                const viewport = this.calculateViewport();
+                const startChanged = itemsArrayModified || viewport.startIndex !== this.previousViewPort.startIndex;
+                const endChanged = itemsArrayModified || viewport.endIndex !== this.previousViewPort.endIndex;
+                const scrollLengthChanged = viewport.scrollLength !== this.previousViewPort.scrollLength;
+                const paddingChanged = viewport.padding !== this.previousViewPort.padding;
+                const scrollPositionChanged = viewport.scrollStartPosition !== this.previousViewPort.scrollStartPosition || viewport.scrollEndPosition !== this.previousViewPort.scrollEndPosition || viewport.maxScrollPosition !== this.previousViewPort.maxScrollPosition;
+                const scrollDirection = this.previousViewPort.endIndex <= viewport.endIndex ? 'forward' : 'backward';
+                this.previousViewPort = viewport;
+                if (scrollLengthChanged) {
+                    this.renderer.setStyle(this.invisiblePaddingElementRef.nativeElement, 'transform', `${this._invisiblePaddingProperty}(${viewport.scrollLength})`);
+                    this.renderer.setStyle(this.invisiblePaddingElementRef.nativeElement, 'webkitTransform', `${this._invisiblePaddingProperty}(${viewport.scrollLength})`);
+                }
+                if (paddingChanged) {
+                    if (this.useMarginInsteadOfTranslate) {
+                        this.renderer.setStyle(this.contentElementRef.nativeElement, this._marginDir, `${viewport.padding}px`);
+                    }
+                    else {
+                        this.renderer.setStyle(this.contentElementRef.nativeElement, 'transform', `${this._translateDir}(${viewport.padding}px)`);
+                        this.renderer.setStyle(this.contentElementRef.nativeElement, 'webkitTransform', `${this._translateDir}(${viewport.padding}px)`);
+                    }
+                }
+                if (this.headerElementRef) {
+                    const scrollPosition = this.getScrollElement()[this._scrollType];
+                    const containerOffset = this.getElementsOffset();
+                    const offset = Math.max(scrollPosition - viewport.padding - containerOffset + this.headerElementRef.nativeElement.clientHeight, 0);
+                    this.renderer.setStyle(this.headerElementRef.nativeElement, 'transform', `${this._translateDir}(${offset}px)`);
+                    this.renderer.setStyle(this.headerElementRef.nativeElement, 'webkitTransform', `${this._translateDir}(${offset}px)`);
+                }
+                const changeEventArg = (startChanged || endChanged) ? {
+                    startIndex: viewport.startIndex,
+                    endIndex: viewport.endIndex,
+                    scrollStartPosition: viewport.scrollStartPosition,
+                    scrollEndPosition: viewport.scrollEndPosition,
+                    scrollDirection: scrollDirection,
+                    startIndexWithBuffer: viewport.startIndexWithBuffer,
+                    endIndexWithBuffer: viewport.endIndexWithBuffer,
+                    maxScrollPosition: viewport.maxScrollPosition,
+                } : undefined;
+                if (startChanged || endChanged || scrollPositionChanged) {
+                    const handleChanged = () => {
+                        // update the scroll list to trigger re-render of components in viewport
+                        this.viewPortItems = viewport.startIndexWithBuffer >= 0 && viewport.endIndexWithBuffer >= 0 ? this.items.slice(viewport.startIndexWithBuffer, viewport.endIndexWithBuffer + 1) : [];
+                        this.vsUpdate.emit(this.viewPortItems);
+                        if (startChanged) {
+                            this.vsStart.emit(changeEventArg);
+                        }
+                        if (endChanged) {
+                            this.vsEnd.emit(changeEventArg);
+                        }
+                        if (startChanged || endChanged) {
+                            this.changeDetectorRef.markForCheck();
+                            this.vsChange.emit(changeEventArg);
+                        }
+                        if (maxRunTimes > 0) {
+                            this.refresh_internal(false, refreshCompletedCallback, maxRunTimes - 1);
+                            return;
+                        }
+                        if (refreshCompletedCallback) {
+                            refreshCompletedCallback();
+                        }
+                    };
+                    if (this.executeRefreshOutsideAngularZone) {
+                        handleChanged();
+                    }
+                    else {
+                        this.zone.run(handleChanged);
+                    }
+                }
+                else {
+                    if (maxRunTimes > 0 && (scrollLengthChanged || paddingChanged)) {
+                        this.refresh_internal(false, refreshCompletedCallback, maxRunTimes - 1);
+                        return;
+                    }
+                    if (refreshCompletedCallback) {
+                        refreshCompletedCallback();
+                    }
+                }
+            });
+        });
+    }
+    getScrollElement() {
+        return this.parentScroll instanceof Window ? document.scrollingElement || document.documentElement || document.body : this.parentScroll || this.element.nativeElement;
+    }
+    addScrollEventHandlers() {
+        if (this.isAngularUniversalSSR) {
+            return;
+        }
+        const scrollElement = this.getScrollElement();
+        this.removeScrollEventHandlers();
+        this.zone.runOutsideAngular(() => {
+            if (this.parentScroll instanceof Window) {
+                this.disposeScrollHandler = this.renderer.listen('window', 'scroll', this.onScroll);
+                this.disposeResizeHandler = this.renderer.listen('window', 'resize', this.onScroll);
+            }
+            else {
+                this.disposeScrollHandler = this.renderer.listen(scrollElement, 'scroll', this.onScroll);
+                if (this._checkResizeInterval > 0) {
+                    this.checkScrollElementResizedTimer = setInterval(() => { this.checkScrollElementResized(); }, this._checkResizeInterval);
+                }
+            }
+        });
+    }
+    removeScrollEventHandlers() {
+        if (this.checkScrollElementResizedTimer) {
+            clearInterval(this.checkScrollElementResizedTimer);
+        }
+        if (this.disposeScrollHandler) {
+            this.disposeScrollHandler();
+            this.disposeScrollHandler = undefined;
+        }
+        if (this.disposeResizeHandler) {
+            this.disposeResizeHandler();
+            this.disposeResizeHandler = undefined;
+        }
+    }
+    getElementsOffset() {
+        if (this.isAngularUniversalSSR) {
+            return 0;
+        }
+        let offset = 0;
+        if (this.containerElementRef && this.containerElementRef.nativeElement) {
+            offset += this.containerElementRef.nativeElement[this._offsetType];
+        }
+        if (this.parentScroll) {
+            const scrollElement = this.getScrollElement();
+            const elementClientRect = this.getElementSize(this.element.nativeElement);
+            const scrollClientRect = this.getElementSize(scrollElement);
+            if (this.horizontal) {
+                offset += elementClientRect.left - scrollClientRect.left;
+            }
+            else {
+                offset += elementClientRect.top - scrollClientRect.top;
+            }
+            if (!(this.parentScroll instanceof Window)) {
+                offset += scrollElement[this._scrollType];
+            }
+        }
+        return offset;
+    }
+    countItemsPerWrapGroup() {
+        if (this.isAngularUniversalSSR) {
+            return Math.round(this.horizontal ? this.ssrViewportHeight / this.ssrChildHeight : this.ssrViewportWidth / this.ssrChildWidth);
+        }
+        const propertyName = this.horizontal ? 'offsetLeft' : 'offsetTop';
+        const children = this.getContent().children;
+        const childrenLength = children ? children.length : 0;
+        if (childrenLength === 0) {
+            return 1;
+        }
+        const firstOffset = children[0][propertyName];
+        let result = 1;
+        while (result < childrenLength && firstOffset === children[result][propertyName]) {
+            ++result;
+        }
+        return result;
+    }
+    getScrollStartPosition() {
+        let windowScrollValue = undefined;
+        if (this.parentScroll instanceof Window) {
+            windowScrollValue = window[this._pageOffsetType];
+        }
+        return windowScrollValue || this.getScrollElement()[this._scrollType] || 0;
+    }
+    resetWrapGroupDimensions() {
+        const oldWrapGroupDimensions = this.wrapGroupDimensions;
+        this.invalidateAllCachedMeasurements();
+        if (!this.enableUnequalChildrenSizes || !oldWrapGroupDimensions || oldWrapGroupDimensions.numberOfKnownWrapGroupChildSizes === 0) {
+            return;
+        }
+        const itemsPerWrapGroup = this.countItemsPerWrapGroup();
+        for (let wrapGroupIndex = 0; wrapGroupIndex < oldWrapGroupDimensions.maxChildSizePerWrapGroup.length; ++wrapGroupIndex) {
+            const oldWrapGroupDimension = oldWrapGroupDimensions.maxChildSizePerWrapGroup[wrapGroupIndex];
+            if (!oldWrapGroupDimension || !oldWrapGroupDimension.items || !oldWrapGroupDimension.items.length) {
+                continue;
+            }
+            if (oldWrapGroupDimension.items.length !== itemsPerWrapGroup) {
+                return;
+            }
+            let itemsChanged = false;
+            const arrayStartIndex = itemsPerWrapGroup * wrapGroupIndex;
+            for (let i = 0; i < itemsPerWrapGroup; ++i) {
+                if (!this.compareItems(oldWrapGroupDimension.items[i], this.items[arrayStartIndex + i])) {
+                    itemsChanged = true;
+                    break;
+                }
+            }
+            if (!itemsChanged) {
+                ++this.wrapGroupDimensions.numberOfKnownWrapGroupChildSizes;
+                this.wrapGroupDimensions.sumOfKnownWrapGroupChildWidths += oldWrapGroupDimension.childWidth || 0;
+                this.wrapGroupDimensions.sumOfKnownWrapGroupChildHeights += oldWrapGroupDimension.childHeight || 0;
+                this.wrapGroupDimensions.maxChildSizePerWrapGroup[wrapGroupIndex] = oldWrapGroupDimension;
+            }
+        }
+    }
+    calculateDimensions() {
+        const scrollElement = this.getScrollElement();
+        const maxCalculatedScrollBarSize = 25; // Note: Formula to auto-calculate doesn't work for ParentScroll, so we default to this if not set by consuming application
+        this.calculatedScrollbarHeight = Math.max(Math.min(scrollElement.offsetHeight - scrollElement.clientHeight, maxCalculatedScrollBarSize), this.calculatedScrollbarHeight);
+        this.calculatedScrollbarWidth = Math.max(Math.min(scrollElement.offsetWidth - scrollElement.clientWidth, maxCalculatedScrollBarSize), this.calculatedScrollbarWidth);
+        let viewportWidth = scrollElement.offsetWidth - (this.scrollbarWidth || this.calculatedScrollbarWidth || (this.horizontal ? 0 : maxCalculatedScrollBarSize));
+        let viewportHeight = scrollElement.offsetHeight - (this.scrollbarHeight || this.calculatedScrollbarHeight || (this.horizontal ? maxCalculatedScrollBarSize : 0));
+        const content = this.getContent();
+        const itemsPerWrapGroup = this.countItemsPerWrapGroup();
+        let wrapGroupsPerPage;
+        let defaultChildWidth;
+        let defaultChildHeight;
+        if (this.isAngularUniversalSSR) {
+            viewportWidth = this.ssrViewportWidth;
+            viewportHeight = this.ssrViewportHeight;
+            defaultChildWidth = this.ssrChildWidth;
+            defaultChildHeight = this.ssrChildHeight;
+            const itemsPerRow = Math.max(Math.ceil(viewportWidth / defaultChildWidth), 1);
+            const itemsPerCol = Math.max(Math.ceil(viewportHeight / defaultChildHeight), 1);
+            wrapGroupsPerPage = this.horizontal ? itemsPerRow : itemsPerCol;
+        }
+        else if (!this.enableUnequalChildrenSizes) {
+            if (content.children.length > 0) {
+                if (!this.childWidth || !this.childHeight) {
+                    if (!this.minMeasuredChildWidth && viewportWidth > 0) {
+                        this.minMeasuredChildWidth = viewportWidth;
+                    }
+                    if (!this.minMeasuredChildHeight && viewportHeight > 0) {
+                        this.minMeasuredChildHeight = viewportHeight;
+                    }
+                }
+                const child = content.children[0];
+                const clientRect = this.getElementSize(child);
+                this.minMeasuredChildWidth = Math.min(this.minMeasuredChildWidth, clientRect.width);
+                this.minMeasuredChildHeight = Math.min(this.minMeasuredChildHeight, clientRect.height);
+                // Added for getting the child height (for card view, return all the clientRect object).
+                // if (this._lastChildRect === null ||
+                // 	(clientRect?.height !== 0 && (
+                // 		Math.round(this._lastChildRect?.height) !== Math.round(clientRect?.height) || 
+                // 		Math.round(this._lastChildRect?.width) !== Math.round(clientRect?.width))
+                // 	)) {
+                // 	this._lastChildRect = clientRect;
+                // 	this.vsChildRectChange.emit(clientRect);
+                // }
+            }
+            defaultChildWidth = this.childWidth || this.minMeasuredChildWidth || viewportWidth;
+            defaultChildHeight = this.childHeight || this.minMeasuredChildHeight || viewportHeight;
+            const itemsPerRow = Math.max(Math.ceil(viewportWidth / defaultChildWidth), 1);
+            const itemsPerCol = Math.max(Math.ceil(viewportHeight / defaultChildHeight), 1);
+            wrapGroupsPerPage = this.horizontal ? itemsPerRow : itemsPerCol;
+        }
+        else {
+            let scrollOffset = scrollElement[this._scrollType] - (this.previousViewPort ? this.previousViewPort.padding : 0);
+            let arrayStartIndex = this.previousViewPort.startIndexWithBuffer || 0;
+            let wrapGroupIndex = Math.ceil(arrayStartIndex / itemsPerWrapGroup);
+            let maxWidthForWrapGroup = 0;
+            let maxHeightForWrapGroup = 0;
+            let sumOfVisibleMaxWidths = 0;
+            let sumOfVisibleMaxHeights = 0;
+            wrapGroupsPerPage = 0;
+            for (let i = 0; i < content.children.length; ++i) {
+                ++arrayStartIndex;
+                const child = content.children[i];
+                const clientRect = this.getElementSize(child);
+                maxWidthForWrapGroup = Math.max(maxWidthForWrapGroup, clientRect.width);
+                maxHeightForWrapGroup = Math.max(maxHeightForWrapGroup, clientRect.height);
+                if (arrayStartIndex % itemsPerWrapGroup === 0) {
+                    const oldValue = this.wrapGroupDimensions.maxChildSizePerWrapGroup[wrapGroupIndex];
+                    if (oldValue) {
+                        --this.wrapGroupDimensions.numberOfKnownWrapGroupChildSizes;
+                        this.wrapGroupDimensions.sumOfKnownWrapGroupChildWidths -= oldValue.childWidth || 0;
+                        this.wrapGroupDimensions.sumOfKnownWrapGroupChildHeights -= oldValue.childHeight || 0;
+                    }
+                    ++this.wrapGroupDimensions.numberOfKnownWrapGroupChildSizes;
+                    const items = this.items.slice(arrayStartIndex - itemsPerWrapGroup, arrayStartIndex);
+                    this.wrapGroupDimensions.maxChildSizePerWrapGroup[wrapGroupIndex] = {
+                        childWidth: maxWidthForWrapGroup,
+                        childHeight: maxHeightForWrapGroup,
+                        items: items
+                    };
+                    this.wrapGroupDimensions.sumOfKnownWrapGroupChildWidths += maxWidthForWrapGroup;
+                    this.wrapGroupDimensions.sumOfKnownWrapGroupChildHeights += maxHeightForWrapGroup;
+                    if (this.horizontal) {
+                        let maxVisibleWidthForWrapGroup = Math.min(maxWidthForWrapGroup, Math.max(viewportWidth - sumOfVisibleMaxWidths, 0));
+                        if (scrollOffset > 0) {
+                            const scrollOffsetToRemove = Math.min(scrollOffset, maxVisibleWidthForWrapGroup);
+                            maxVisibleWidthForWrapGroup -= scrollOffsetToRemove;
+                            scrollOffset -= scrollOffsetToRemove;
+                        }
+                        sumOfVisibleMaxWidths += maxVisibleWidthForWrapGroup;
+                        if (maxVisibleWidthForWrapGroup > 0 && viewportWidth >= sumOfVisibleMaxWidths) {
+                            ++wrapGroupsPerPage;
+                        }
+                    }
+                    else {
+                        let maxVisibleHeightForWrapGroup = Math.min(maxHeightForWrapGroup, Math.max(viewportHeight - sumOfVisibleMaxHeights, 0));
+                        if (scrollOffset > 0) {
+                            const scrollOffsetToRemove = Math.min(scrollOffset, maxVisibleHeightForWrapGroup);
+                            maxVisibleHeightForWrapGroup -= scrollOffsetToRemove;
+                            scrollOffset -= scrollOffsetToRemove;
+                        }
+                        sumOfVisibleMaxHeights += maxVisibleHeightForWrapGroup;
+                        if (maxVisibleHeightForWrapGroup > 0 && viewportHeight >= sumOfVisibleMaxHeights) {
+                            ++wrapGroupsPerPage;
+                        }
+                    }
+                    ++wrapGroupIndex;
+                    maxWidthForWrapGroup = 0;
+                    maxHeightForWrapGroup = 0;
+                }
+            }
+            const averageChildWidth = this.wrapGroupDimensions.sumOfKnownWrapGroupChildWidths / this.wrapGroupDimensions.numberOfKnownWrapGroupChildSizes;
+            const averageChildHeight = this.wrapGroupDimensions.sumOfKnownWrapGroupChildHeights / this.wrapGroupDimensions.numberOfKnownWrapGroupChildSizes;
+            defaultChildWidth = this.childWidth || averageChildWidth || viewportWidth;
+            defaultChildHeight = this.childHeight || averageChildHeight || viewportHeight;
+            if (this.horizontal) {
+                if (viewportWidth > sumOfVisibleMaxWidths) {
+                    wrapGroupsPerPage += Math.ceil((viewportWidth - sumOfVisibleMaxWidths) / defaultChildWidth);
+                }
+            }
+            else {
+                if (viewportHeight > sumOfVisibleMaxHeights) {
+                    wrapGroupsPerPage += Math.ceil((viewportHeight - sumOfVisibleMaxHeights) / defaultChildHeight);
+                }
+            }
+        }
+        const itemCount = this.items.length;
+        const itemsPerPage = itemsPerWrapGroup * wrapGroupsPerPage;
+        const pageCount_fractional = itemCount / itemsPerPage;
+        const numberOfWrapGroups = Math.ceil(itemCount / itemsPerWrapGroup);
+        let scrollLength = 0;
+        const defaultScrollLengthPerWrapGroup = this.horizontal ? defaultChildWidth : defaultChildHeight;
+        if (this.enableUnequalChildrenSizes) {
+            let numUnknownChildSizes = 0;
+            for (let i = 0; i < numberOfWrapGroups; ++i) {
+                const childSize = this.wrapGroupDimensions.maxChildSizePerWrapGroup[i] && this.wrapGroupDimensions.maxChildSizePerWrapGroup[i][this._childScrollDim];
+                if (childSize) {
+                    scrollLength += childSize;
+                }
+                else {
+                    ++numUnknownChildSizes;
+                }
+            }
+            scrollLength += Math.round(numUnknownChildSizes * defaultScrollLengthPerWrapGroup);
+        }
+        else {
+            scrollLength = numberOfWrapGroups * defaultScrollLengthPerWrapGroup;
+        }
+        if (this.headerElementRef) {
+            scrollLength += this.headerElementRef.nativeElement.clientHeight;
+        }
+        const viewportLength = this.horizontal ? viewportWidth : viewportHeight;
+        const maxScrollPosition = Math.max(scrollLength - viewportLength, 0);
+        return {
+            childHeight: defaultChildHeight,
+            childWidth: defaultChildWidth,
+            itemCount: itemCount,
+            itemsPerPage: itemsPerPage,
+            itemsPerWrapGroup: itemsPerWrapGroup,
+            maxScrollPosition: maxScrollPosition,
+            pageCount_fractional: pageCount_fractional,
+            scrollLength: scrollLength,
+            viewportLength: viewportLength,
+            wrapGroupsPerPage: wrapGroupsPerPage,
+        };
+    }
+    calculatePadding(arrayStartIndexWithBuffer, dimensions) {
+        if (dimensions.itemCount === 0) {
+            return 0;
+        }
+        const defaultScrollLengthPerWrapGroup = dimensions[this._childScrollDim];
+        const startingWrapGroupIndex = Math.floor(arrayStartIndexWithBuffer / dimensions.itemsPerWrapGroup) || 0;
+        if (!this.enableUnequalChildrenSizes) {
+            return defaultScrollLengthPerWrapGroup * startingWrapGroupIndex;
+        }
+        let numUnknownChildSizes = 0;
+        let result = 0;
+        for (let i = 0; i < startingWrapGroupIndex; ++i) {
+            const childSize = this.wrapGroupDimensions.maxChildSizePerWrapGroup[i] && this.wrapGroupDimensions.maxChildSizePerWrapGroup[i][this._childScrollDim];
+            if (childSize) {
+                result += childSize;
+            }
+            else {
+                ++numUnknownChildSizes;
+            }
+        }
+        result += Math.round(numUnknownChildSizes * defaultScrollLengthPerWrapGroup);
+        return result;
+    }
+    calculatePageInfo(scrollPosition, dimensions) {
+        let scrollPercentage = 0;
+        if (this.enableUnequalChildrenSizes) {
+            const numberOfWrapGroups = Math.ceil(dimensions.itemCount / dimensions.itemsPerWrapGroup);
+            let totalScrolledLength = 0;
+            const defaultScrollLengthPerWrapGroup = dimensions[this._childScrollDim];
+            for (let i = 0; i < numberOfWrapGroups; ++i) {
+                const childSize = this.wrapGroupDimensions.maxChildSizePerWrapGroup[i] && this.wrapGroupDimensions.maxChildSizePerWrapGroup[i][this._childScrollDim];
+                if (childSize) {
+                    totalScrolledLength += childSize;
+                }
+                else {
+                    totalScrolledLength += defaultScrollLengthPerWrapGroup;
+                }
+                if (scrollPosition < totalScrolledLength) {
+                    scrollPercentage = i / numberOfWrapGroups;
+                    break;
+                }
+            }
+        }
+        else {
+            scrollPercentage = scrollPosition / dimensions.scrollLength;
+        }
+        const startingArrayIndex_fractional = Math.min(Math.max(scrollPercentage * dimensions.pageCount_fractional, 0), dimensions.pageCount_fractional) * dimensions.itemsPerPage;
+        const maxStart = dimensions.itemCount - dimensions.itemsPerPage - 1;
+        let arrayStartIndex = Math.min(Math.floor(startingArrayIndex_fractional), maxStart);
+        arrayStartIndex -= arrayStartIndex % dimensions.itemsPerWrapGroup; // round down to start of wrapGroup
+        if (this.stripedTable) {
+            const bufferBoundary = 2 * dimensions.itemsPerWrapGroup;
+            if (arrayStartIndex % bufferBoundary !== 0) {
+                arrayStartIndex = Math.max(arrayStartIndex - arrayStartIndex % bufferBoundary, 0);
+            }
+        }
+        let arrayEndIndex = Math.ceil(startingArrayIndex_fractional) + dimensions.itemsPerPage - 1;
+        const endIndexWithinWrapGroup = (arrayEndIndex + 1) % dimensions.itemsPerWrapGroup;
+        if (endIndexWithinWrapGroup > 0) {
+            arrayEndIndex += dimensions.itemsPerWrapGroup - endIndexWithinWrapGroup; // round up to end of wrapGroup
+        }
+        if (isNaN(arrayStartIndex)) {
+            arrayStartIndex = 0;
+        }
+        if (isNaN(arrayEndIndex)) {
+            arrayEndIndex = 0;
+        }
+        arrayStartIndex = Math.min(Math.max(arrayStartIndex, 0), dimensions.itemCount - 1);
+        arrayEndIndex = Math.min(Math.max(arrayEndIndex, 0), dimensions.itemCount - 1);
+        const bufferSize = this.bufferAmount * dimensions.itemsPerWrapGroup;
+        const startIndexWithBuffer = Math.min(Math.max(arrayStartIndex - bufferSize, 0), dimensions.itemCount - 1);
+        const endIndexWithBuffer = Math.min(Math.max(arrayEndIndex + bufferSize, 0), dimensions.itemCount - 1);
+        return {
+            startIndex: arrayStartIndex,
+            endIndex: arrayEndIndex,
+            startIndexWithBuffer: startIndexWithBuffer,
+            endIndexWithBuffer: endIndexWithBuffer,
+            scrollStartPosition: scrollPosition,
+            scrollEndPosition: scrollPosition + dimensions.viewportLength,
+            maxScrollPosition: dimensions.maxScrollPosition
+        };
+    }
+    calculateViewport() {
+        const dimensions = this.calculateDimensions();
+        const offset = this.getElementsOffset();
+        let scrollStartPosition = this.getScrollStartPosition();
+        if (scrollStartPosition > (dimensions.scrollLength + offset) && !(this.parentScroll instanceof Window)) {
+            scrollStartPosition = dimensions.scrollLength;
+        }
+        else {
+            scrollStartPosition -= offset;
+        }
+        scrollStartPosition = Math.max(0, scrollStartPosition);
+        const pageInfo = this.calculatePageInfo(scrollStartPosition, dimensions);
+        const newPadding = this.calculatePadding(pageInfo.startIndexWithBuffer, dimensions);
+        const newScrollLength = dimensions.scrollLength;
+        return {
+            startIndex: pageInfo.startIndex,
+            endIndex: pageInfo.endIndex,
+            startIndexWithBuffer: pageInfo.startIndexWithBuffer,
+            endIndexWithBuffer: pageInfo.endIndexWithBuffer,
+            padding: Math.round(newPadding),
+            scrollLength: Math.round(newScrollLength),
+            scrollStartPosition: pageInfo.scrollStartPosition,
+            scrollEndPosition: pageInfo.scrollEndPosition,
+            maxScrollPosition: pageInfo.maxScrollPosition
+        };
+    }
+}
+VirtualScrollerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", 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: "14.0.2", 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: "14.0.2", ngImport: i0, type: VirtualScrollerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'virtual-scroller,[virtualScroller]', exportAs: 'virtualScroller', template: `
+    <div class="total-padding" #invisiblePadding></div>
+    <div class="scrollable-content" #content>
+      <ng-content></ng-content>
+    </div>
+  `, host: {
+                        '[class.horizontal]': "horizontal",
+                        '[class.vertical]': "!horizontal",
+                        '[class.selfScroll]': "!parentScroll",
+                        '[class.rtl]': "RTL"
+                    }, 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"] }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [PLATFORM_ID]
+                    }] }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: ['virtual-scroller-default-options']
+                    }] }];
+    }, propDecorators: { disable: [{
+                type: Input
+            }], executeRefreshOutsideAngularZone: [{
+                type: Input
+            }], enableUnequalChildrenSizes: [{
+                type: Input
+            }], RTL: [{
+                type: Input
+            }], useMarginInsteadOfTranslate: [{
+                type: Input
+            }], modifyOverflowStyleOfParentScroll: [{
+                type: Input
+            }], stripedTable: [{
+                type: Input
+            }], scrollbarWidth: [{
+                type: Input
+            }], scrollbarHeight: [{
+                type: Input
+            }], childWidth: [{
+                type: Input
+            }], childHeight: [{
+                type: Input
+            }], ssrChildWidth: [{
+                type: Input
+            }], ssrChildHeight: [{
+                type: Input
+            }], ssrViewportWidth: [{
+                type: Input
+            }], ssrViewportHeight: [{
+                type: Input
+            }], bufferAmount: [{
+                type: Input
+            }], scrollAnimationTime: [{
+                type: Input
+            }], resizeBypassRefreshThreshold: [{
+                type: Input
+            }], scrollThrottlingTime: [{
+                type: Input
+            }], scrollDebounceTime: [{
+                type: Input
+            }], checkResizeInterval: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], compareItems: [{
+                type: Input
+            }], horizontal: [{
+                type: Input
+            }], parentScroll: [{
+                type: Input
+            }], vsChildRectChange: [{
+                type: Output
+            }], vsUpdate: [{
+                type: Output
+            }], vsChange: [{
+                type: Output
+            }], vsStart: [{
+                type: Output
+            }], vsEnd: [{
+                type: Output
+            }], contentElementRef: [{
+                type: ViewChild,
+                args: ['content', { read: ElementRef, static: true }]
+            }], invisiblePaddingElementRef: [{
+                type: ViewChild,
+                args: ['invisiblePadding', { read: ElementRef, static: true }]
+            }], headerElementRef: [{
+                type: ContentChild,
+                args: ['header', { read: ElementRef, static: false }]
+            }], containerElementRef: [{
+                type: ContentChild,
+                args: ['container', { read: ElementRef, static: false }]
+            }] } });
+class VirtualScrollerModule {
+}
+VirtualScrollerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: VirtualScrollerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+VirtualScrollerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: VirtualScrollerModule, declarations: [VirtualScrollerComponent], imports: [CommonModule], exports: [VirtualScrollerComponent] });
+VirtualScrollerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", 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: "14.0.2", ngImport: i0, type: VirtualScrollerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [VirtualScrollerComponent],
+                    declarations: [VirtualScrollerComponent],
+                    imports: [CommonModule],
+                    providers: [
+                        {
+                            provide: 'virtual-scroller-default-options',
+                            useFactory: VIRTUAL_SCROLLER_DEFAULT_OPTIONS_FACTORY
+                        }
+                    ]
+                }]
+        }] });
+
+class PepSelectionData {
+}
+const DEFAULT_PAGE_SIZE = 50;
+
+class IPepListPagerChangeEvent {
+}
+class PepListPagerComponent {
+    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();
+    }
+    set pageIndex(value) {
+        this.setPageIndex(value);
+    }
+    get pageIndex() {
+        return this._pageIndex;
+    }
+    nextPage() {
+        if (!this.hasNextPage()) {
+            return;
+        }
+        this.setPageIndex(this.pageIndex + 1);
+    }
+    previousPage() {
+        if (!this.hasPreviousPage()) {
+            return;
+        }
+        this.setPageIndex(this.pageIndex - 1);
+    }
+    firstPage() {
+        if (!this.hasPreviousPage()) {
+            return;
+        }
+        this.setPageIndex(0);
+    }
+    lastPage() {
+        if (!this.hasNextPage()) {
+            return;
+        }
+        this.setPageIndex(this.getNumberOfPages() - 1);
+    }
+    hasPreviousPage() {
+        return this.pageIndex >= 1 && this.pageSize != 0;
+    }
+    hasNextPage() {
+        const maxPageIndex = this.getNumberOfPages() - 1;
+        return this.pageIndex < maxPageIndex && this.pageSize != 0;
+    }
+    getNumberOfPages() {
+        if (!this.pageSize) {
+            return 0;
+        }
+        return Math.ceil(this.length / this.pageSize);
+    }
+    /** Checks whether the buttons for going forwards should be disabled. */
+    _nextButtonsDisabled() {
+        return this.disabled || !this.hasNextPage();
+    }
+    /** Checks whether the buttons for going backwards should be disabled. */
+    _previousButtonsDisabled() {
+        return this.disabled || !this.hasPreviousPage();
+    }
+    onValueChange(value) {
+        const pageNumber = coerceNumberProperty(value);
+        this.setPageIndex(pageNumber - 1); // - 1 to convert number into index.
+    }
+    setPageIndex(newIndex) {
+        const previousPageIndex = this.pageIndex;
+        if (newIndex >= 0 && newIndex < this.getNumberOfPages()) {
+            this._pageIndex = newIndex;
+        }
+        else {
+            this._pageIndex = 0;
+        }
+        if (this.pageIndex !== previousPageIndex) {
+            this._emitChangeEvent(previousPageIndex);
+        }
+    }
+    /** Emits an event notifying that a change of the paginator's properties has been triggered. */
+    _emitChangeEvent(previousPageIndex) {
+        this.pagerChange.emit({
+            previousPageIndex,
+            pageIndex: this.pageIndex,
+            pageSize: this.pageSize,
+            length: this.length,
+        });
+    }
+}
+PepListPagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListPagerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
+PepListPagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListPagerComponent, selector: "pep-list-pager", inputs: { disabled: "disabled", pageIndex: "pageIndex", length: "length", pageSize: "pageSize" }, outputs: { pagerChange: "pagerChange" }, ngImport: i0, template: "<div class=\"pager-container body-sm\">\n    <span class=\"pep-spacing-element\">{{ 'LIST.PAGER_PAGE' | translate }}</span>\n    <pep-textbox pepAutoWidth class=\"page-index pep-spacing-element\" [key]=\"'pageIndex'\" [type]=\"'int'\"\n        [disabled]=\"disabled\" [xAlignment]=\"'center'\" [renderTitle]=\"false\" [renderError]=\"false\" [renderSymbol]=\"false\"\n        [value]=\"pageIndex + 1\" [minValue]=\"1\" [maxValue]=\"this.getNumberOfPages()\"\n        [maxFieldCharacters]=\"6\" [mandatory]=\"true\" (valueChange)=\"onValueChange($event)\">\n    </pep-textbox>\n    <span class=\"pep-spacing-element\">{{ 'LIST.PAGER_OUT_OF' | translate }}</span>\n    <span class=\"pep-spacing-element\">{{ getNumberOfPages() }}</span>\n    <button mat-button [disabled]=\"disabled || _previousButtonsDisabled()\"\n        [ngClass]=\"{ disabled: disabled || _previousButtonsDisabled() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"previousPage()\"\n        [title]=\"('LIST.PAGER_PREVIOUS' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_right' : 'arrow_left'\"></pep-icon>\n        </mat-icon>\n    </button>\n    <button mat-button [disabled]=\"disabled || _nextButtonsDisabled()\"\n        [ngClass]=\"{ disabled: disabled || _nextButtonsDisabled() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"nextPage()\"\n        [title]=\"('LIST.PAGER_NEXT' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_left' : 'arrow_right'\"></pep-icon>\n        </mat-icon>\n    </button>\n</div>", styles: [".pager-container{display:flex;justify-content:center;align-items:center;height:calc(2rem + calc(var(--pep-spacing-sm, .5rem) * 2));padding:var(--pep-spacing-sm, .5rem)}.pager-container .page-index{min-height:unset;margin-bottom:0}.pager-container .page-index ::ng-deep .mat-form-field-flex{padding:0 .5rem;min-height:2rem}.pager-container .page-index ::ng-deep .mat-form-field-flex .mat-input-element{min-width:1.25rem}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.PepInputAutoWidthDirective, selector: "[pepAutoWidth]", inputs: ["includePadding"] }, { kind: "directive", type: i1.PepMenuBlurDirective, selector: "[pepMenuBlur]" }, { kind: "directive", type: i1.PepRtlDirectionDirective, selector: "[pepRtlDirection]" }, { kind: "component", type: i5.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i6.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey", "regex", "regexError", "isInFocus"], outputs: ["valueChange", "keyup"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+PepListPagerComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListPagerComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListPagerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pep-list-pager', template: "<div class=\"pager-container body-sm\">\n    <span class=\"pep-spacing-element\">{{ 'LIST.PAGER_PAGE' | translate }}</span>\n    <pep-textbox pepAutoWidth class=\"page-index pep-spacing-element\" [key]=\"'pageIndex'\" [type]=\"'int'\"\n        [disabled]=\"disabled\" [xAlignment]=\"'center'\" [renderTitle]=\"false\" [renderError]=\"false\" [renderSymbol]=\"false\"\n        [value]=\"pageIndex + 1\" [minValue]=\"1\" [maxValue]=\"this.getNumberOfPages()\"\n        [maxFieldCharacters]=\"6\" [mandatory]=\"true\" (valueChange)=\"onValueChange($event)\">\n    </pep-textbox>\n    <span class=\"pep-spacing-element\">{{ 'LIST.PAGER_OUT_OF' | translate }}</span>\n    <span class=\"pep-spacing-element\">{{ getNumberOfPages() }}</span>\n    <button mat-button [disabled]=\"disabled || _previousButtonsDisabled()\"\n        [ngClass]=\"{ disabled: disabled || _previousButtonsDisabled() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"previousPage()\"\n        [title]=\"('LIST.PAGER_PREVIOUS' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_right' : 'arrow_left'\"></pep-icon>\n        </mat-icon>\n    </button>\n    <button mat-button [disabled]=\"disabled || _nextButtonsDisabled()\"\n        [ngClass]=\"{ disabled: disabled || _nextButtonsDisabled() }\"\n        class=\"pep-button icon-button pep-spacing-element sm weak\" pepRtlDirection pepMenuBlur (click)=\"nextPage()\"\n        [title]=\"('LIST.PAGER_NEXT' | translate)\">\n        <mat-icon>\n            <pep-icon [name]=\"layoutService.isRtl() ? 'arrow_left' : 'arrow_right'\"></pep-icon>\n        </mat-icon>\n    </button>\n</div>", styles: [".pager-container{display:flex;justify-content:center;align-items:center;height:calc(2rem + calc(var(--pep-spacing-sm, .5rem) * 2));padding:var(--pep-spacing-sm, .5rem)}.pager-container .page-index{min-height:unset;margin-bottom:0}.pager-container .page-index ::ng-deep .mat-form-field-flex{padding:0 .5rem;min-height:2rem}.pager-container .page-index ::ng-deep .mat-form-field-flex .mat-input-element{min-width:1.25rem}\n"] }]
+        }, {
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.PepLayoutService }]; }, propDecorators: { disabled: [{
+                type: Input
+            }], pageIndex: [{
+                type: Input
+            }], length: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], pagerChange: [{
+                type: Output
+            }] } });
+
+class PepListComponent {
+    constructor(hostElement, layoutService, sessionService, cd, renderer, zone) {
+        this.hostElement = hostElement;
+        this.layoutService = layoutService;
+        this.sessionService = sessionService;
+        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.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._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.SEPARATOR = ',';
+        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 = true;
+        this.sortBy = '';
+        this.isUserSelected = false;
+        this.checkForChanges = null;
+        this.calculatedObjectHeight = 'auto';
+        // this.nativeWindow = window;
+        this.layoutService.onResize$.subscribe((size) => {
+            this.screenSize = size;
+        });
+        this.layoutService.onMouseOver$.subscribe((deviceHasMouse) => {
+            this.deviceHasMouse = deviceHasMouse;
+        });
+    }
+    set sorting(value) {
+        this.sortBy = (value === null || value === void 0 ? void 0 : value.sortBy) || '';
+        this.isAsc = (value === null || value === void 0 ? void 0 : value.sortBy.length) > 0 ? value.isAsc : true;
+    }
+    get sorting() {
+        return {
+            sortBy: this.sortBy,
+            isAsc: this.isAsc
+        };
+    }
+    set viewType(value) {
+        this._viewType = value;
+        this.isTable = value === 'table';
+    }
+    get viewType() {
+        return this._viewType;
+    }
+    set parentScroll(value) {
+        this._parentScroll = value;
+    }
+    get parentScroll() {
+        return this._parentScroll;
+    }
+    set lockEvents(value) {
+        this._lockEvents = value;
+        if (this._lockEvents) {
+            this.renderer.addClass(this.hostElement.nativeElement, 'lock-events');
+        }
+        else {
+            this.renderer.removeClass(this.hostElement.nativeElement, 'lock-events');
+        }
+    }
+    get lockEvents() {
+        return this._lockEvents;
+    }
+    set useAsWebComponent(value) {
+        this._useAsWebComponent = value;
+        if (value) {
+            this.exportFunctionsOnHostElement();
+        }
+    }
+    get useAsWebComponent() {
+        return this._useAsWebComponent;
+    }
+    get layout() {
+        return this._layout;
+    }
+    get items() {
+        return this._items;
+    }
+    get loadingItemsFromApi() {
+        return this._loadingItemsFromApi;
+    }
+    ngOnInit() {
+        this.containerWidth = 0;
+        this.deviceHasMouse = this.layoutService.getDeviceHasMouse();
+    }
+    ngOnChanges(changes) {
+        if (this.containerWidth <= 0) {
+            this.setContainerWidth();
+        }
+    }
+    ngOnDestroy() {
+        // if (this.valueChange) {
+        //     this.valueChange.unsubscribe();
+        // }
+        // if (this.loadItems) {
+        //     this.loadItems.unsubscribe();
+        // }
+        // if (this.loadPage) {
+        //     this.loadPage.unsubscribe();
+        // }
+        // if (this.sortingChange) {
+        //     this.sortingChange.unsubscribe();
+        // }
+        // if (this.fieldClick) {
+        //     this.fieldClick.unsubscribe();
+        // }
+        // if (this.itemClick) {
+        //     this.itemClick.unsubscribe();
+        // }
+        // if (this.listLoad) {
+        //     this.listLoad.unsubscribe();
+        // }
+        this.saveSortingToSession();
+    }
+    getCachedItemsNumber() {
+        return this.cacheSize >= 0 ? this.cacheSize : PepListComponent.TOP_ITEMS_ARRAY;
+    }
+    getScrollingElement() {
+        var _a;
+        return this.parentScroll ? this.parentScroll : (_a = this.virtualScroller) === null || _a === void 0 ? void 0 : _a.contentElementRef.nativeElement.parentElement;
+    }
+    scrollToTop(animate = true) {
+        const scrollingElement = this.getScrollingElement();
+        if (scrollingElement) {
+            const scrollTop = 0;
+            // totally disable animate
+            if (!animate || this.scrollAnimationTime === 0) {
+                if (scrollingElement instanceof Window) {
+                    window.scrollTo(0, scrollTop);
+                }
+                else {
+                    scrollingElement.scrollTop = scrollTop;
+                }
+            }
+            else {
+                let animationRequest;
+                const isWindow = scrollingElement instanceof Window;
+                const currentScrollTop = scrollingElement instanceof Window
+                    ? window.pageYOffset
+                    : scrollingElement.scrollTop;
+                if (this.currentTween !== undefined) {
+                    this.currentTween.stop();
+                }
+                this.currentTween = new tween.Tween({ scrollTop: currentScrollTop })
+                    .to({ scrollTop }, this.scrollAnimationTime)
+                    .easing(tween.Easing.Quadratic.Out)
+                    .onUpdate((data) => {
+                    if (isNaN(data.scrollTop)) {
+                        return;
+                    }
+                    if (isWindow) {
+                        window.scrollTo(0, data.scrollTop);
+                    }
+                    else {
+                        this.renderer.setProperty(scrollingElement, 'scrollTop', data.scrollTop);
+                    }
+                })
+                    .onStop(() => {
+                    cancelAnimationFrame(animationRequest);
+                })
+                    .start();
+                const animate = (time) => {
+                    this.currentTween.update(time);
+                    if (this.currentTween._object.scrollTop !== scrollTop) {
+                        this.zone.runOutsideAngular(() => {
+                            animationRequest = requestAnimationFrame(animate);
+                        });
+                    }
+                };
+                animate();
+            }
+        }
+    }
+    getSelectionCheckBoxWidth() {
+        return this.selectionTypeForActions === 'multi' ? 44 : (this.selectionTypeForActions === 'single' ? 44 : 0);
+    }
+    setContainerWidth() {
+        if (!this.hostElement.nativeElement.parentElement) {
+            return;
+        }
+        const rowHeight = 40; // the table row height (2.5rem * 16font-size).
+        const style = getComputedStyle(this.hostElement.nativeElement.parentElement);
+        // The container-fluid class padding left + right + border
+        const containerFluidSpacing = parseInt(style.paddingLeft, 10) + parseInt(style.paddingRight, 10);
+        const parentContainer = this.hostElement.nativeElement.parentElement.parentElement > 0
+            ? this.hostElement.nativeElement.parentElement.parentElement
+            : this.hostElement.nativeElement.parentElement;
+        // Calculate if vertical scroll should appear, if so set the scroll width. (this.totalRows + 1) + 1 is for the header row.
+        this.tableScrollWidth = parentContainer.clientHeight < rowHeight * (this.totalRows + 1)
+            ? this.layoutService.getScrollbarWidth()
+            : 0;
+        // The selectionCheckBoxWidth width + containerFluidSpacing + this.tableScrollWidth.
+        const rowHeaderWidthToSub = containerFluidSpacing + this.getSelectionCheckBoxWidth() + this.tableScrollWidth;
+        this.containerWidth = parentContainer.offsetWidth - rowHeaderWidthToSub;
+    }
+    saveSortingToSession() {
+        this.sessionService.setObject(PepListComponent.SORT_BY_STATE_KEY, this.sortBy);
+        this.sessionService.setObject(PepListComponent.ASCENDING_STATE_KEY, this.isAsc);
+    }
+    getTopItems() {
+        return this.isTable
+            ? PepListComponent.TOP_ITEMS_TABLE
+            : PepListComponent.TOP_ITEMS_THUMBNAILS;
+    }
+    disableScroll(disable) {
+        if (disable) {
+            this.renderer.addClass(this.hostElement.nativeElement.parentElement, 'lock-events');
+        }
+        else {
+            this.renderer.removeClass(this.hostElement.nativeElement.parentElement, 'lock-events');
+        }
+    }
+    toggleLoadingItemsFropApi(loadingItemsFromApi) {
+        this._loadingItemsFromApi = loadingItemsFromApi;
+        // this.disableScroll(loadingItemsFromApi);
+    }
+    updateCurrentPageItems(startIndex, endIndex) {
+        this.currentPageItems = this.items.slice(startIndex, endIndex);
+    }
+    setSelectionItems(itemId, uniqItemId, isChecked) {
+        // Set selected item checkbox
+        if (this.isAllSelected) {
+            if (isChecked) {
+                this.unSelectedItems.delete(itemId);
+                this.selectedItems.set(itemId, uniqItemId);
+            }
+            else {
+                this.selectedItems.delete(itemId);
+                this.unSelectedItems.set(itemId, uniqItemId);
+            }
+        }
+        else {
+            if (isChecked) {
+                this.unSelectedItems.delete(itemId);
+                this.selectedItems.set(itemId, uniqItemId);
+            }
+            else {
+                this.selectedItems.delete(itemId);
+                this.unSelectedItems.set(itemId, uniqItemId);
+            }
+        }
+    }
+    getUniqItemId(itemId, itemType = '') {
+        return itemId + this.SEPARATOR + itemType;
+    }
+    setLayout() {
+        if (this.totalRows === 0 ||
+            !this._layout ||
+            !this._layout.ControlFields ||
+            this._layout.ControlFields.length === 0) {
+            return;
+        }
+        this._layout.ControlFields.forEach((cf) => {
+            if (cf.ColumnWidth === 0) {
+                cf.ColumnWidth = 10;
+            }
+            if (this.isTable &&
+                (cf.FieldType === FIELD_TYPE.Image ||
+                    // cf.FieldType === FIELD_TYPE.Indicators || ???
+                    cf.FieldType === FIELD_TYPE.Signature ||
+                    cf.FieldType === FIELD_TYPE.NumberIntegerQuantitySelector ||
+                    cf.FieldType === FIELD_TYPE.NumberRealQuantitySelector ||
+                    cf.FieldType === FIELD_TYPE.NumberIntegerForMatrix ||
+                    cf.FieldType === FIELD_TYPE.NumberRealForMatrix ||
+                    cf.FieldType === FIELD_TYPE.Package ||
+                    cf.ApiName === 'UnitsQuantity' ||
+                    cf.ApiName === 'QuantitySelector')) {
+                cf.Layout.XAlignment = 3;
+            }
+        });
+        if (!this.cd['destroyed']) {
+            this.cd.detectChanges();
+        }
+        // Set the container width.
+        if (this.containerWidth <= 0) {
+            this.setContainerWidth();
+        }
+        const isLastColumnsWidthSet = this.setLastColumnsWidth();
+        // Set the layout only if the last columns width couldn't set.
+        if (!isLastColumnsWidthSet) {
+            this.calcColumnsWidth();
+        }
+        this.checkForChanges = new Date().getTime();
+    }
+    setLastColumnsWidth() {
+        let res = false;
+        let totalCalcColsWidth = 0;
+        let widthToSet = 'inherit';
+        if (this.lastColumnsWidth.length > 0) {
+            // Check if this is the same UI control for table.
+            if (this.lastColumnsWidth.length === this._layout.ControlFields.length) {
+                let uiControlsAreTheSame = true;
+                for (let index = 0; index < this._layout.ControlFields.length; index++) {
+                    const uiControlField = this._layout.ControlFields[index];
+                    if (uiControlField.ApiName !== this.lastColumnsWidth[index].columnAPIName) {
+                        uiControlsAreTheSame = false;
+                        break;
+                    }
+                }
+                if (uiControlsAreTheSame) {
+                    for (let index = 0; index < this._layout.ControlFields.length; index++) {
+                        const uiControlField = this._layout.ControlFields[index];
+                        uiControlField.calcColumnWidth = this.lastColumnsWidth[index].calcColumnWidth;
+                        uiControlField.calcTitleColumnWidthString = this.lastColumnsWidth[index].calcTitleColumnWidthString;
+                        uiControlField.calcColumnWidthString = this.lastColumnsWidth[index].calcColumnWidthString;
+                        totalCalcColsWidth += this.lastColumnsWidth[index].calcColumnWidth;
+                    }
+                    widthToSet = (totalCalcColsWidth + this.getSelectionCheckBoxWidth()) + 'px';
+                    console.log(`setLastColumnsWidth -> widthToSet: ${widthToSet} *** totalCalcColsWidth: ${totalCalcColsWidth}`);
+                    this.setColumnsWidth(widthToSet);
+                    res = true;
+                }
+            }
+        }
+        return res;
+    }
+    setVirtualScrollWidth(widthToSet) {
+        if (this.virtualScroller) {
+            this.renderer.setStyle(this.virtualScroller.contentElementRef.nativeElement, 'width', widthToSet === 'inherit' ? '100%' : widthToSet);
+        }
+    }
+    setColumnsWidth(widthToSet) {
+        this.renderer.setStyle(this.hostElement.nativeElement, 'width', widthToSet);
+        if (this.isTable) {
+            this.setVirtualScrollWidth(widthToSet);
+        }
+        else {
+            // Do this only after UI is change cause the property isTable is Input and can refresh after this thread.
+            setTimeout(() => {
+                this.setVirtualScrollWidth(widthToSet);
+            }, 0);
+        }
+    }
+    calcColumnsWidth() {
+        const fixedMultiple = 3.78; // for converting em to pixel.
+        const length = this._layout.ControlFields.length;
+        // Is table AND there is at least one column of width type of percentage.
+        if (this.isTable) {
+            if (this._layout && this._layout.ControlFields) {
+                this.hasColumnWidthOfTypePercentage =
+                    this._layout.ControlFields.filter((cf) => cf.ColumnWidthType === 1).length === 0;
+            }
+        }
+        // If the columns size is fixed and the total is small then the container change it to percentage.
+        if (!this.hasColumnWidthOfTypePercentage) {
+            const totalFixedColsWidth = this._layout.ControlFields.map((cf) => cf.ColumnWidth * fixedMultiple).reduce((sum, current) => sum + current);
+            if (window.innerWidth > totalFixedColsWidth) {
+                this.hasColumnWidthOfTypePercentage = true;
+            }
+        }
+        let totalCalcColsWidth = 0;
+        let widthToSet = 'inherit';
+        // Calc by percentage
+        if (this.hasColumnWidthOfTypePercentage) {
+            const totalColsWidth = this._layout.ControlFields.map((cf) => cf.ColumnWidth).reduce((sum, current) => sum + current);
+            for (let index = 0; index < length; index++) {
+                const uiControlField = this._layout.ControlFields[index];
+                const calcColumnWidthPercentage = (100 / totalColsWidth) * uiControlField.ColumnWidth;
+                uiControlField.calcColumnWidth = Math.floor((this.containerWidth * calcColumnWidthPercentage) / 100);
+                if (index === length - 1) {
+                    uiControlField.calcTitleColumnWidthString = uiControlField.calcColumnWidthString = 'calc(100% - ' + totalCalcColsWidth + 'px)'; // For 100%
+                }
+                else {
+                    uiControlField.calcTitleColumnWidthString = uiControlField.calcColumnWidthString = uiControlField.calcColumnWidth + 'px';
+                    totalCalcColsWidth += uiControlField.calcColumnWidth;
+                }
+            }
+        }
+        else {
+            for (let index = 0; index < length; index++) {
+                const uiControlField = this._layout
+                    .ControlFields[index];
+                const currentFixedWidth = Math.floor(uiControlField.ColumnWidth * fixedMultiple);
+                if (index === length - 1) {
+                    uiControlField.calcTitleColumnWidthString = uiControlField.calcColumnWidthString = currentFixedWidth + 'px';
+                }
+                else {
+                    uiControlField.calcTitleColumnWidthString = uiControlField.calcColumnWidthString = currentFixedWidth + 'px';
+                }
+                totalCalcColsWidth += currentFixedWidth;
+            }
+            widthToSet = (totalCalcColsWidth + this.getSelectionCheckBoxWidth()) + 'px';
+        }
+        console.log(`calcColumnsWidth -> widthToSet: ${widthToSet} *** totalCalcColsWidth: ${totalCalcColsWidth}`);
+        this.setColumnsWidth(widthToSet);
+    }
+    calcObjectHeight() {
+        setTimeout(() => {
+            if (this.virtualScroller) {
+                const content = this.virtualScroller.getContent();
+                console.log(`content.children.length: ${content.children.length}`);
+                if (content.children.length > 0) {
+                    const rect = this.virtualScroller.getElementSize(content.children[0]);
+                    this.calculatedObjectHeight = rect.height + 'px';
+                    console.log(`this.calculatedObjectHeight: ${this.calculatedObjectHeight}`);
+                }
+            }
+            this.disableScroll(false);
+        }, 1000);
+    }
+    initResizeData() {
+        this.startX = 0;
+        this.startWidth = 0;
+        this.tableStartWidth = 0;
+        this.pressedColumn = '';
+        this.pressedColumnIndex = -1;
+    }
+    getParent(el, parentSelector) {
+        // If no parentSelector defined will bubble up all the way to *document*
+        if (parentSelector === undefined) {
+            parentSelector = document;
+        }
+        const parent = [];
+        let p = el.parentNode;
+        while (p &&
+            p.className !== '' &&
+            p.className.indexOf(parentSelector) === -1 &&
+            parentSelector !== document) {
+            const o = p;
+            p = o.parentNode;
+        }
+        if (p.className.indexOf(parentSelector) > -1) {
+            parent.push(p); // Push that parentSelector you wanted to stop at
+        }
+        return parent;
+    }
+    cleanItems() {
+        this.itemsCounter = 0;
+        this._items =
+            this.totalRows > 0 ? Array(this.totalRows) : [];
+        this.currentPageItems = [];
+        this.calculatedObjectHeight = 'auto';
+    }
+    initVariablesFromSession(items) {
+        const selectedItemsObject = this.sessionService.getObject(PepListComponent.SELECTED_ITEMS_STATE_KEY);
+        const selectedItemsFromMap = selectedItemsObject && selectedItemsObject.length > 0
+            ? new Map(selectedItemsObject)
+            : null;
+        if (selectedItemsFromMap != null &&
+            typeof selectedItemsFromMap.size !== 'undefined' &&
+            selectedItemsFromMap.size > 0) {
+            this.selectedItems = selectedItemsFromMap;
+            this.sessionService.removeObject(PepListComponent.SELECTED_ITEMS_STATE_KEY);
+        }
+        else {
+            this.selectedItems.clear();
+        }
+        const unSelectedItemsObject = this.sessionService.getObject(PepListComponent.UN_SELECTED_ITEMS_STATE_KEY);
+        const unSelectedItemsMap = unSelectedItemsObject && unSelectedItemsObject.length > 0
+            ? new Map(unSelectedItemsObject)
+            : null;
+        if (unSelectedItemsMap != null &&
+            typeof unSelectedItemsMap.size !== 'undefined' &&
+            unSelectedItemsMap.size > 0) {
+            this.unSelectedItems = unSelectedItemsMap;
+            this.sessionService.removeObject(PepListComponent.UN_SELECTED_ITEMS_STATE_KEY);
+        }
+        else {
+            this.unSelectedItems.clear();
+        }
+        const isAllSelected = this.sessionService.getObject(PepListComponent.ALL_SELECTED_STATE_KEY);
+        if (isAllSelected != null) {
+            // Comment this in version 0.4.2-beta.103, I don't know why we need this (&& this.getIsAllSelected(items))
+            // this.isAllSelected = isAllSelected && this.getIsAllSelected(items);
+            this.isAllSelected = isAllSelected;
+            this.sessionService.removeObject(PepListComponent.ALL_SELECTED_STATE_KEY);
+        }
+        else {
+            this.isAllSelected = false;
+        }
+        const sortBy = this.sessionService.getObject(PepListComponent.SORT_BY_STATE_KEY);
+        if (sortBy && sortBy !== '') {
+            this.sortBy = sortBy;
+            this.sessionService.removeObject(PepListComponent.SORT_BY_STATE_KEY);
+        }
+        else {
+            this.sortBy = '';
+        }
+        const isAsc = this.sessionService.getObject(PepListComponent.ASCENDING_STATE_KEY);
+        if (isAsc != null) {
+            this.isAsc = isAsc;
+            this.sessionService.removeObject(PepListComponent.ASCENDING_STATE_KEY);
+        }
+        else {
+            this.isAsc = true;
+        }
+    }
+    getIsAllSelected(items) {
+        var _a;
+        let result = true;
+        if (((_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.size) > 0 && (items === null || items === void 0 ? void 0 : items.length) > 0) {
+            for (const item of items) {
+                if (!(item && this.selectedItems.has(item === null || item === void 0 ? void 0 : item.UID.toString()))) {
+                    result = false;
+                    break;
+                }
+            }
+        }
+        else {
+            result = false;
+        }
+        return result;
+    }
+    getNumberOfStartItems() {
+        let numberOfStartItems = 20;
+        if (this.screenSize === PepScreenSizeType.XL ||
+            this.screenSize === PepScreenSizeType.LG) {
+            numberOfStartItems = this.isTable ? 50 : 40;
+        }
+        else if (this.screenSize === PepScreenSizeType.MD) {
+            numberOfStartItems = this.isTable ? 30 : 20;
+        }
+        else if (this.screenSize === PepScreenSizeType.SM) {
+            numberOfStartItems = this.isTable ? 20 : 10;
+        }
+        else if (this.screenSize === PepScreenSizeType.XS) {
+            numberOfStartItems = this.isTable ? 15 : 5;
+        }
+        return numberOfStartItems;
+    }
+    setItemClicked(itemId, isSelectableForActions, itemType, isChecked) {
+        const uniqItemId = this.getUniqItemId(itemId, itemType);
+        // select the selected item.
+        if (isChecked) {
+            // Set seleted item
+            this.selectedItemId = uniqItemId;
+        }
+        else {
+            if (this.selectedItemId === uniqItemId) {
+                this.selectedItemId = '';
+            }
+        }
+        if (this.selectionTypeForActions === 'single') {
+            this.selectedItemsChange.emit(this.selectedItemId.length === 0 ? 0 : 1);
+        }
+        else if (this.selectionTypeForActions === 'multi') {
+            if (isSelectableForActions) {
+                this.setSelectionItems(itemId, uniqItemId, isChecked);
+                const currentList = this.isAllSelected
+                    ? this.unSelectedItems
+                    : this.selectedItems;
+                const currentListCount = this.isAllSelected
+                    ? this.totalRows - currentList.size
+                    : currentList.size;
+                this.selectedItemsChange.emit(currentListCount);
+            }
+        }
+        // Raise selected item change event
+        if (this.selectionTypeForActions !== 'none') {
+            this.selectedItemChange.emit({
+                id: itemId,
+                selected: isChecked,
+            });
+        }
+    }
+    exportFunctionsOnHostElement() {
+        // This is for web component usage for use those functions.
+        this.hostElement.nativeElement.clear = this.clear.bind(this);
+        this.hostElement.nativeElement.initListData = this.initListData.bind(this);
+        this.hostElement.nativeElement.updateItems = this.updateItems.bind(this);
+        this.hostElement.nativeElement.updatePage = this.updatePage.bind(this);
+        this.hostElement.nativeElement.updateItem = this.updateItem.bind(this);
+    }
+    // For refresh the UI when change the is selectable for action on item.
+    getisItemDisabled(item) {
+        return this.printMode || this.lockItemInnerEvents || (item && !item.IsSelectableForActions);
+    }
+    getIsAllSelectedForActions() {
+        var _a;
+        let res = false;
+        if (this.isAllSelected) {
+            if (this.unSelectedItems.size === 0) {
+                res = true;
+            }
+        }
+        else {
+            if ((_a = this.virtualScroller) === null || _a === void 0 ? void 0 : _a.viewPortItems) {
+                if (this.selectedItems.size === this.totalRows) {
+                    res = this.getIsAllSelected(this.virtualScroller.viewPortItems);
+                }
+                else if (this.selectedItems.size < this.totalRows) {
+                    for (const item of this.virtualScroller.viewPortItems) {
+                        res =
+                            item && this.selectedItems.has(item === null || item === void 0 ? void 0 : item.UID.toString());
+                        if (!res) {
+                            break;
+                        }
+                    }
+                }
+            }
+        }
+        return res;
+    }
+    setIsAllSelected(isChecked) {
+        if (this.selectionTypeForActions === 'multi') {
+            this.selectAllCB.checked = isChecked;
+            this.isAllSelected = isChecked;
+        }
+    }
+    selectAllItemsForActions(e) {
+        // For material checkbox || radio.
+        const isChecked = e.source.checked;
+        // Indeterminate mode
+        let isIndeterminate = false;
+        const currentList = this.isAllSelected
+            ? this.unSelectedItems
+            : this.selectedItems;
+        if (currentList.size > 0) {
+            isIndeterminate = true;
+            this.isAllSelected = false;
+            this.selectedItemsChange.emit(0);
+            e.source.checked = false;
+        }
+        this.selectedItems.clear();
+        this.unSelectedItems.clear();
+        if (!isIndeterminate) {
+            this.isAllSelected = isChecked;
+            this.selectAllClick.emit(isChecked);
+            if (this.selectionTypeForActions === 'multi') {
+                if (!isChecked) {
+                    this.selectedItemsChange.emit(0);
+                    this.selectedItemId = '';
+                }
+                else {
+                    const filteredItems = this.items.filter((item) => item && item.IsSelectableForActions);
+                    this.selectedItemsChange.emit(filteredItems.length);
+                }
+            }
+        }
+        else {
+            // Remove all
+            if (this.selectionTypeForActions === 'multi') {
+                this.selectAllClick.emit(false);
+            }
+        }
+    }
+    raiseStartIndexChange(startIndex = 0) {
+        // this.startIndex = startIndex;
+        this.startIndexChange.emit({ startIndex });
+    }
+    getIsItemSelected(item) {
+        let isSelected = false;
+        if (item) {
+            if (this.selectionTypeForActions === 'single') {
+                isSelected = this.selectedItemId === this.getUniqItemId(item.UID, item.Type.toString());
+            }
+            else if (this.selectionTypeForActions === 'multi') {
+                if (item.IsSelectableForActions) {
+                    isSelected = (this.isAllSelected && !this.unSelectedItems.has(item.UID)) || this.selectedItems.has(item.UID);
+                }
+            }
+        }
+        return isSelected;
+    }
+    selectItemForActions(e, itemId, isSelectableForActions, itemType = '') {
+        // For material checkbox || radio.
+        const isChecked = e.source.checked;
+        this.setItemClicked(itemId, isSelectableForActions, itemType, isChecked);
+    }
+    itemClicked(e, item) {
+        // Set seleted item
+        const itemId = item === null || item === void 0 ? void 0 : item.UID.toString();
+        const itemType = item === null || item === void 0 ? void 0 : item.Type.toString();
+        let isChecked = false;
+        if (item && item.IsSelectableForActions) {
+            this.selectedItemId = this.getUniqItemId(itemId, itemType);
+            isChecked = true;
+        }
+        if (this.isTable) {
+            if (this.selectionTypeForActions === 'single') {
+                this.setItemClicked(itemId, item.IsSelectableForActions, itemType, isChecked);
+            }
+            else if (this.selectionTypeForActions === 'none') {
+                // Just mark the row as highlighted
+                this.setItemClicked(itemId, item.IsSelectableForActions, itemType, true);
+            }
+        }
+        else {
+            if (this.disabled) {
+                return;
+            }
+        }
+        this.itemClick.emit({ source: item, viewType: this.viewType });
+    }
+    onTableRowMouseEnter(event, itemId, itemType) {
+        if (!this.deviceHasMouse) {
+            return;
+        }
+        const uniqItemId = this.getUniqItemId(itemId, itemType);
+        this.hoveredItemId = uniqItemId;
+    }
+    onTableRowMouseLeave(event, itemId, itemType) {
+        this.hoveredItemId = '';
+    }
+    onCardMouseEnter(event, itemId, itemType) {
+        if (!this.deviceHasMouse) {
+            return;
+        }
+        const uniqItemId = this.getUniqItemId(itemId, itemType);
+        this.hoveredItemId = uniqItemId;
+    }
+    onCardMouseLeave(event, itemId, itemType) {
+        this.hoveredItemId = '';
+    }
+    // trackByFunc(index: number, item: ObjectsDataRow): any {
+    //     return item && item?.UID ? item?.UID : index;
+    //     // let res: string = "";
+    //     // if (item && item?.UID) {
+    //     //    res = item?.UID + "_" + this.listType + "_" + (this.isTable ? "Table" : "Thumbnails");
+    //     // }
+    //     // else {
+    //     //    res = index + "_" + this.listType + "_" + (this.isTable ? "Table" : "Thumbnails");
+    //     // }
+    //     // return res;
+    // }
+    clear() {
+        this.cleanItems();
+        this._layout = null;
+    }
+    setSelectedIds(selectedIds, items = null) {
+        var _a;
+        this.selectedItems.clear();
+        this.isAllSelected = false;
+        if (selectedIds) {
+            // for (let i = 0; i < selected.length; i++) {
+            for (const selectedId of selectedIds) {
+                const tmp = selectedId.split(this.SEPARATOR);
+                if (tmp && tmp.length > 0) {
+                    const itemId = tmp[0];
+                    const itemType = tmp.length > 1 ? tmp[1] : '';
+                    this.selectedItems.set(itemId, this.getUniqItemId(itemId, itemType));
+                }
+            }
+            this.isAllSelected = this.getIsAllSelected(items ? items : (_a = this.virtualScroller) === null || _a === void 0 ? void 0 : _a.viewPortItems);
+            this.setSelectionDataInSession();
+        }
+        this.refresh();
+    }
+    setSelectionDataInSession() {
+        if (this.selectedItems.size > 0) {
+            this.sessionService.setObject(PepListComponent.SELECTED_ITEMS_STATE_KEY, JSON.stringify([...this.selectedItems]));
+        }
+        if (this.unSelectedItems.size > 0) {
+            this.sessionService.setObject(PepListComponent.UN_SELECTED_ITEMS_STATE_KEY, JSON.stringify([...this.unSelectedItems]));
+        }
+        this.sessionService.setObject(PepListComponent.ALL_SELECTED_STATE_KEY, this.isAllSelected);
+    }
+    initListData(layout, totalRows, items) {
+        this.initVariablesFromSession(items);
+        const selectedItemsList = this.isAllSelected
+            ? this.unSelectedItems
+            : this.selectedItems;
+        const currentListCount = this.isAllSelected
+            ? this.totalRows - selectedItemsList.size
+            : selectedItemsList.size;
+        this.selectedItemsChange.emit(currentListCount);
+        this._layout = layout;
+        this.selectedItemId = '';
+        this.totalRows = totalRows;
+        // If is all selected is false && the size of the selected items is 1 && selectionTypeForActions is 'single' then set it as the selected item id.
+        // We need this in setTimeout cause the selectionTypeForActions is input that can set after this function.
+        setTimeout(() => {
+            if (!this.isAllSelected && this.selectedItems.size === 1 && this.selectionTypeForActions === 'single') {
+                this.selectedItemId = this.selectedItems.values()[0];
+            }
+        }, 0);
+        this.scrollToTop(false);
+        this.cleanItems();
+        this.disableScroll(true);
+        if (items) {
+            if (this.pagerType === 'pages') {
+                // If page index out of bounds - init to 0.
+                const numberOfPages = Math.ceil(totalRows / this.pageSize);
+                if (this.pageIndex >= numberOfPages) {
+                    this.pageIndex = 0;
+                }
+                this.updatePage(items, {
+                    pageIndex: this.pageIndex,
+                    pageSize: this.pageSize,
+                });
+                this.disableScroll(false);
+            }
+            else {
+                const numberOfStartItems = this.getNumberOfStartItems();
+                const event = {
+                    fromIndex: 0,
+                    toIndex: numberOfStartItems,
+                };
+                this.updateItems(items, event);
+                if (this.virtualScroller) {
+                    this.refresh(() => {
+                        this.calcObjectHeight();
+                    });
+                }
+                else {
+                    this.calcObjectHeight();
+                }
+            }
+        }
+        if (!this.isTable) {
+            this.lastColumnsWidth = [];
+        }
+        this.setLayout();
+        // setTimeout(() => {
+        this.onListLoad();
+        // }, 0);
+    }
+    updateItems(items, event = null) {
+        var _a;
+        if (!event) {
+            return; // Event isn't supplied.
+        }
+        // Clean array
+        if (this.itemsCounter + items.length > this.getCachedItemsNumber()) {
+            this.cleanItems();
+        }
+        const startIndex = (_a = event.fromIndex) !== null && _a !== void 0 ? _a : 0;
+        for (let i = 0; i < items.length; i++) {
+            if (!this.items[i + startIndex]) {
+                this.items[i + startIndex] = items[i];
+                this.itemsCounter += 1;
+            }
+        }
+        this.toggleLoadingItemsFropApi(false);
+    }
+    updatePage(items, event) {
+        if (!event) {
+            return; // Event isn't supplied.
+        }
+        // Clean array
+        if (this.itemsCounter + items.length > this.getCachedItemsNumber()) {
+            this.cleanItems();
+        }
+        // const loadInChunks = this.itemsCounter === 0;
+        const startIndex = Math.min(event.pageIndex * event.pageSize, this.totalRows);
+        const endIndex = Math.min(startIndex + event.pageSize, this.totalRows);
+        for (let i = 0; i < items.length; i++) {
+            if (!this.items[i + startIndex]) {
+                this.items[i + startIndex] = items[i];
+                this.itemsCounter += 1;
+            }
+        }
+        this.updateCurrentPageItems(startIndex, endIndex);
+        this.toggleLoadingItemsFropApi(false);
+    }
+    updateItem(data) {
+        const index = this.items.findIndex((i) => i && (i === null || i === void 0 ? void 0 : i.UID) === (data === null || data === void 0 ? void 0 : data.UID));
+        if (index >= 0 && index < this.items.length) {
+            this.updateItemProperties(this.items[index], data);
+        }
+    }
+    scrollToIndex(index, alignToBeginning = true, additionalOffset = 0, animationMilliseconds = undefined, animationCompletedCallback = undefined) {
+        var _a;
+        (_a = this.virtualScroller) === null || _a === void 0 ? void 0 : _a.scrollToIndex(index, alignToBeginning, additionalOffset, animationMilliseconds, animationCompletedCallback);
+    }
+    updateItemProperties(itemToUpdate, data) {
+        Object.assign(itemToUpdate, data);
+    }
+    getSelectedItemsData(isForEdit = false) {
+        const res = new PepSelectionData();
+        let selectionType = 1;
+        const items = [];
+        const itemTypes = [];
+        if (this.selectionTypeForActions === 'single') {
+            if (this.selectedItemId.length > 0) {
+                const tmp = this.selectedItemId.split(this.SEPARATOR);
+                items.push(tmp[0]);
+                itemTypes.push(tmp[1]);
+            }
+        }
+        else if (this.selectionTypeForActions === 'multi') {
+            let currentList = [];
+            // For edit - only the selected items.
+            if (isForEdit) {
+                if (!this.isAllSelected) {
+                    currentList = Array.from(this.selectedItems.values());
+                }
+                else {
+                    // Get the id's of the items that not founded in unSelectedItems.
+                    this.items.forEach((item) => {
+                        if (item &&
+                            !this.unSelectedItems.has(item === null || item === void 0 ? void 0 : item.UID.toString())) {
+                            currentList.push(this.getUniqItemId(item === null || item === void 0 ? void 0 : item.UID.toString(), item === null || item === void 0 ? void 0 : item.Type.toString()));
+                        }
+                    });
+                }
+            }
+            else {
+                // For delete - can be the unselected with select_all functionality.
+                currentList = Array.from(this.isAllSelected
+                    ? this.unSelectedItems.values()
+                    : this.selectedItems.values());
+                selectionType = this.isAllSelected ? 0 : 1;
+            }
+            currentList.forEach((item) => {
+                const tmp = item.split(this.SEPARATOR);
+                if (tmp.length === 2) {
+                    items.push(tmp[0]);
+                    itemTypes.push(tmp[1]);
+                }
+            });
+        }
+        res.selectionType = selectionType;
+        res.rows = items;
+        res.rowTypes = itemTypes;
+        return res;
+    }
+    getIsItemEditable(uid) {
+        const item = this.items.filter((x) => (x === null || x === void 0 ? void 0 : x.UID.toString()) === uid);
+        if (item.length > 0) {
+            return item[0].IsEditable;
+        }
+        else {
+            return false;
+        }
+    }
+    getItemDataByID(uid) {
+        return this.items.find((item) => (item === null || item === void 0 ? void 0 : item.UID.toString()) === uid);
+    }
+    refresh(refreshCompletedCallback = undefined) {
+        var _a;
+        (_a = this.virtualScroller) === null || _a === void 0 ? void 0 : _a.refresh(refreshCompletedCallback);
+    }
+    // ---------------------------------------------------------------
+    //              Events handlers.
+    // ---------------------------------------------------------------
+    onWinResize(e) {
+        this.refresh();
+        this.containerWidth = 0;
+        this.lastColumnsWidth = [];
+        this.setLayout();
+    }
+    onListResizeStart(event, columnKey, columnIndex) {
+        this.pressedColumn = columnKey;
+        this.pressedColumnIndex = columnIndex;
+        this.startX = event.x;
+        this.startWidth = event.target.closest('.header-column').offsetWidth;
+        this.tableStartWidth = this.hostElement.nativeElement.offsetWidth; // this.virtualScroller?.contentElementRef.nativeElement.offsetWidth;
+        console.log(`tableStartWidth - ${this.tableStartWidth}`);
+    }
+    onListResize(event) {
+        // if (this.pressedColumn.length > 0) {
+        if (this.pressedColumnIndex >= 0) {
+            let widthToAdd = this.layoutService.isRtl() ? this.startX - event.x : event.x - this.startX;
+            // Set the width of the column and the container of the whole columns.
+            if (this.startWidth + widthToAdd >= PepListComponent.MINIMUM_COLUMN_WIDTH || widthToAdd > 0) {
+                const length = this._layout.ControlFields.length;
+                let totalCalcColsWidth = 0;
+                for (let index = 0; index < length; index++) {
+                    const uiControlField = this._layout
+                        .ControlFields[index];
+                    if (index === length - 1) {
+                        // Calc the last column only in percentage type.
+                        if (this.hasColumnWidthOfTypePercentage) {
+                            const scrollWidth = this.layoutService.getScrollbarWidth();
+                            widthToAdd += scrollWidth;
+                            uiControlField.calcTitleColumnWidthString = uiControlField.calcColumnWidthString = 'calc(100% - ' + (totalCalcColsWidth + scrollWidth) + 'px)'; // For 100%
+                        }
+                        else {
+                            // if (uiControlField.ApiName === this.pressedColumn) {
+                            if (index === this.pressedColumnIndex) {
+                                uiControlField.calcColumnWidth = this.startWidth + widthToAdd;
+                                uiControlField.calcTitleColumnWidthString = uiControlField.calcColumnWidth + 'px';
+                                uiControlField.calcColumnWidthString = uiControlField.calcColumnWidth + 'px';
+                            }
+                        }
+                        // } else if (uiControlField.ApiName === this.pressedColumn) {
+                    }
+                    else if (index === this.pressedColumnIndex) {
+                        uiControlField.calcColumnWidth = this.startWidth + widthToAdd;
+                        uiControlField.calcTitleColumnWidthString = uiControlField.calcColumnWidthString = uiControlField.calcColumnWidth + 'px';
+                    }
+                    totalCalcColsWidth += uiControlField.calcColumnWidth;
+                }
+                const widthToSet = (this.tableStartWidth + widthToAdd) + 'px';
+                console.log(`onListResize -> widthToSet: ${widthToSet} *** widthToAdd: ${widthToAdd}`);
+                this.setColumnsWidth(widthToSet);
+                this.checkForChanges = new Date().getTime();
+            }
+        }
+    }
+    onListResizeEnd(event) {
+        // if (this.pressedColumn.length > 0) {
+        if (this.pressedColumnIndex >= 0) {
+            if (event &&
+                this.getParent(event.srcElement, 'resize-box').length > 0) {
+                this.initResizeData();
+            }
+            else {
+                // Set timeout 0 for onListSortingChange will have the pressedColumn.
+                setTimeout(() => {
+                    this.initResizeData();
+                }, 0);
+            }
+            this.lastColumnsWidth = [];
+            // Set the last columns width
+            for (let index = 0; index < this._layout.ControlFields.length; index++) {
+                const uiControlField = this._layout.ControlFields[index];
+                this.lastColumnsWidth.push({
+                    columnAPIName: uiControlField.ApiName,
+                    calcColumnWidth: uiControlField.calcColumnWidth,
+                    calcTitleColumnWidthString: uiControlField.calcTitleColumnWidthString,
+                    calcColumnWidthString: uiControlField.calcColumnWidthString
+                });
+            }
+            event.stopPropagation();
+        }
+    }
+    onListSortingChange(sortBy, isAsc, event = null) {
+        if (
+        // this.pressedColumn.length > 0 ||
+        this.pressedColumnIndex >= 0 ||
+            (event && this.getParent(event.srcElement, 'resize-box').length > 0)) {
+            return;
+        }
+        if (this.sortBy !== sortBy || this.isAsc !== isAsc) {
+            this.sortBy = sortBy;
+            this.isAsc = isAsc;
+            this.saveSortingToSession();
+            this.sortingChange.emit({ sortBy, isAsc });
+        }
+    }
+    onListHeaderMouseEnter(event) {
+        // this.headerIsInFocus = true;
+    }
+    onListHeaderMouseLeave(event) {
+        // this.headerIsInFocus = false;
+        this.onListResizeEnd(event);
+        this.initResizeData();
+    }
+    onPagerChange(event) {
+        this.pageIndex = event.pageIndex;
+        // Scroll to top.
+        this.scrollToTop();
+        const startIndex = event.pageIndex * event.pageSize;
+        const endIndex = Math.min(startIndex + event.pageSize, this.totalRows);
+        let shouldGetItemsFromApi = false;
+        let index = startIndex;
+        while (!shouldGetItemsFromApi && index < endIndex) {
+            if (!this.items[index]) {
+                shouldGetItemsFromApi = true;
+            }
+            index++;
+        }
+        // Get bulk from api.
+        if (shouldGetItemsFromApi) {
+            if (!this.loadingItemsFromApi) {
+                this.toggleLoadingItemsFropApi(true);
+                this.loadPage.emit({
+                    pageIndex: event.pageIndex,
+                    pageSize: event.pageSize,
+                });
+            }
+        }
+        else {
+            setTimeout(() => {
+                this.updateCurrentPageItems(startIndex, endIndex);
+            }, this.scrollAnimationTime);
+        }
+    }
+    onVirtualScrollerChange(event) {
+        this.raiseStartIndexChange(event.startIndex);
+        if (this.pagerType === 'scroll') {
+            // For other events do nothing.
+            if (typeof event.startIndex === 'undefined' || event.startIndex < 0 ||
+                typeof event.endIndex === 'undefined' || event.endIndex < 0) {
+                return;
+            }
+            const addAtStart = event.scrollDirection === 'backward';
+            let shouldGetItemsFromApi = false;
+            let indexOfMissingItem;
+            if (addAtStart) {
+                indexOfMissingItem = event.endIndex;
+                while (!shouldGetItemsFromApi && indexOfMissingItem >= event.startIndex) {
+                    if (!this.items[indexOfMissingItem]) {
+                        shouldGetItemsFromApi = true;
+                    }
+                    if (!shouldGetItemsFromApi) {
+                        indexOfMissingItem--;
+                    }
+                }
+            }
+            else {
+                indexOfMissingItem = event.startIndex;
+                while (!shouldGetItemsFromApi && indexOfMissingItem <= event.endIndex) {
+                    if (!this.items[indexOfMissingItem]) {
+                        shouldGetItemsFromApi = true;
+                    }
+                    if (!shouldGetItemsFromApi) {
+                        indexOfMissingItem++;
+                    }
+                }
+            }
+            // Get bulk from api.
+            if (shouldGetItemsFromApi) {
+                if (!this.loadingItemsFromApi) {
+                    this.toggleLoadingItemsFropApi(true);
+                    const top = this.getTopItems() - 1;
+                    const fromIndex = addAtStart ? Math.max(indexOfMissingItem - top, 0) : indexOfMissingItem;
+                    const toIndex = addAtStart ? indexOfMissingItem : Math.min(indexOfMissingItem + top, this.totalRows);
+                    this.loadItems.emit({
+                        fromIndex,
+                        toIndex,
+                    });
+                }
+            }
+        }
+    }
+    onListLoad() {
+        setTimeout(() => {
+            this.listLoad.emit();
+        }, 0);
+    }
+    // onChildRectChange(event: any) {
+    //     // Set the calculatedObjectHeight only if he's not set (this case is only for the initialize when virtual scroll is undefined).
+    //     // the other cases is handled in calcObjectHeight function.
+    //     if (this.calculatedObjectHeight === 'auto') {
+    //         this.calculatedObjectHeight = event?.height + 'px';
+    //     }
+    // }
+    onValueChanged(valueChange) {
+        if (this.disabled) {
+            return;
+        }
+        this.valueChange.emit(valueChange);
+    }
+    onCustomizeFieldClick(customizeFieldClickedData) {
+        if (this.disabled) {
+            return;
+        }
+        this.fieldClick.emit(customizeFieldClickedData);
+    }
+}
+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: "14.0.2", ngImport: i0, type: PepListComponent, deps: [{ token: i0.ElementRef }, { token: i1.PepLayoutService }, { token: i1.PepSessionService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+PepListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListComponent, selector: "pep-list", inputs: { sorting: "sorting", cacheSize: "cacheSize", noDataFoundMsg: "noDataFoundMsg", selectionTypeForActions: "selectionTypeForActions", showCardSelection: "showCardSelection", hideAllSelectionInMulti: "hideAllSelectionInMulti", cardSize: "cardSize", tableViewType: "tableViewType", viewType: "viewType", firstFieldAsLink: "firstFieldAsLink", supportSorting: "supportSorting", supportResizing: "supportResizing", parentScroll: "parentScroll", disabled: "disabled", lockEvents: "lockEvents", lockItemInnerEvents: "lockItemInnerEvents", printMode: "printMode", isReport: "isReport", zebraStripes: "zebraStripes", totalsRow: "totalsRow", pagerType: "pagerType", pageSize: "pageSize", pageIndex: "pageIndex", bufferAmount: "bufferAmount", scrollAnimationTime: "scrollAnimationTime", scrollDebounceTime: "scrollDebounceTime", scrollThrottlingTime: "scrollThrottlingTime", useAsWebComponent: "useAsWebComponent" }, outputs: { itemClick: "itemClick", fieldClick: "fieldClick", valueChange: "valueChange", sortingChange: "sortingChange", selectedItemsChange: "selectedItemsChange", selectedItemChange: "selectedItemChange", selectAllClick: "selectAllClick", listLoad: "listLoad", loadItems: "loadItems", loadPage: "loadPage", startIndexChange: "startIndexChange" }, host: { listeners: { "window:resize": "onWinResize($event)" } }, viewQueries: [{ propertyName: "virtualScroller", first: true, predicate: VirtualScrollerComponent, descendants: true }, { propertyName: "selectAllCB", first: true, predicate: ["selectAllCB"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"totalRows == 0\">\n    <ng-container *ngIf=\"noDataFoundMsg; then noDataMsgInputBlock; else noDataMsgDefaultBlock\"></ng-container>\n    <ng-template #noDataMsgInputBlock>\n        <div class=\"pep-border-bottom\">\n            <p class=\"title-xl no-data\">\n                {{ noDataFoundMsg }}\n            </p>\n        </div>\n    </ng-template>\n    <ng-template #noDataMsgDefaultBlock>\n        <div class=\"pep-border-bottom\">\n            <p class=\"title-xl no-data\">\n                {{ 'LIST.NO_DATA_FOUND' | translate}}\n            </p>\n        </div>\n        <div class=\"no-data-suggestions\">\n            <p class=\"suggestions-title title-lg\">\n                {{ 'LIST.NO_DATA_FOUND_SUGGESTIONS_TITLE' | translate}}\n            </p>\n            <ul class=\"suggestions-list body-lg\" [innerHtml]=\"'LIST.NO_DATA_FOUND_SUGGESTIONS_LIST' | translate\"></ul>\n        </div>\n    </ng-template>\n</ng-container>\n<ng-container *ngIf=\"totalRows > 0\">\n    <ng-container *ngTemplateOutlet=\"tableHeader\"></ng-container>\n\n    <!-- (vsChildRectChange)=\"onChildRectChange($event)\" -->\n    <virtual-scroller #scroller [items]=\"pagerType === 'pages' ? currentPageItems : items\"\n        [scrollDebounceTime]=\"scrollDebounceTime\" [scrollThrottlingTime]=\"scrollThrottlingTime\"\n        [bufferAmount]=\"printMode ? totalRows : bufferAmount\" [parentScroll]=\"parentScroll\" [disable]=\"loadingItemsFromApi\"\n        class=\"virtual-scroller\" [ngClass]=\"{ 'table-body': isTable, 'cards-body': !isTable }\"\n        (vsChange)=\"onVirtualScrollerChange($event)\" >\n        <ng-container *ngFor=\"let item of scroller.viewPortItems; let index = index; let isFirst = first;\">\n            <ng-container *ngTemplateOutlet=\"listData; context: {item: item, index:index}\"></ng-container>\n        </ng-container>\n    </virtual-scroller>\n\n    <pep-list-pager *ngIf=\"pagerType === 'pages'\" class=\" list-pager\" [disabled]=\"loadingItemsFromApi\"\n        [length]=\"totalRows\" [pageSize]=\"pageSize\" [pageIndex]=\"pageIndex\" (pagerChange)=\"onPagerChange($event)\">\n    </pep-list-pager>\n\n    <ng-container *ngTemplateOutlet=\"tableTotal\"></ng-container>\n</ng-container>\n\n<ng-template #listData let-item=\"item\" let-index=\"index\">\n    <ng-container *ngIf=\"isTable\">\n        <!-- getIsItemSelected(item) -> item | isItemSelected: selectionTypeForActions : selectedItemId : isAllSelected : selectedItems : unSelectedItems -->\n        <div class=\"table-row\" (mouseenter)=\"onTableRowMouseEnter($event, item?.UID, item?.Type)\" \n            (mouseleave)=\"onTableRowMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\n                'compact-view': tableViewType === 'compact',\n                even: zebraStripes && index % 2 !== 0,\n                selected: getIsItemSelected(item),\n                highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId}\" [ngStyle]=\"{ visibility: !loadingItemsFromApi || item ? 'visible' : 'hidden' }\">\n            <fieldset class=\"table-row-fieldset\" [ngStyle]=\"{ 'background-color': item?.BackgroundColor }\">\n                <mat-checkbox *ngIf=\"selectionTypeForActions == 'multi'\" type=\"checkbox\"\n                    class=\"pull-left flip row-selection\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n                    [disabled]=\"getisItemDisabled(item)\" [ngStyle]=\"{\n                            visibility: !deviceHasMouse ||\n                            item?.UID + SEPARATOR + item?.Type === hoveredItemId || isAllSelected || selectedItems.size > 0 ? 'visible' : 'hidden'\n                        }\" [checked]=\"getIsItemSelected(item)\"\n                    (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n                </mat-checkbox>\n                <mat-radio-button *ngIf=\"selectionTypeForActions == 'single'\" name=\"selection\"\n                    class=\"pull-left flip row-selection pep-radio-button\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n                    [disabled]=\"getisItemDisabled(item)\"\n                    [checked]=\"getIsItemSelected(item)\"\n                    (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n                </mat-radio-button>\n                <pep-form [layoutType]=\"'table'\" [checkForChanges]=\"checkForChanges\" [layout]=\"layout\"\n                    [firstFieldAsLink]=\"firstFieldAsLink\" [data]=\"item\" [canEditObject]=\"!disabled\"\n                    [lockEvents]=\"lockItemInnerEvents || printMode\" [isReport]=\"isReport\" [isActive]=\"\n                            (item?.UID + SEPARATOR + item?.Type === selectedItemId ||\n                            item?.UID + SEPARATOR + item?.Type === hoveredItemId) && deviceHasMouse\n                        \" (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\"\n                    (click)=\"itemClicked($event, item)\">\n                </pep-form>\n            </fieldset>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!isTable\">\n        <div (mouseenter)=\"onCardMouseEnter($event, item?.UID, item?.Type)\"\n            (mouseleave)=\"onCardMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\n                    selected: getIsItemSelected(item),\n                    highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId,\n                    'line-view': viewType === 'lines',\n                    'card-view': viewType === 'cards',\n                    'small-card': cardSize === 'sm'\n                }\" class=\"pull-left flip\"\n            [ngStyle]=\"{ height: calculatedObjectHeight, visibility: !loadingItemsFromApi || item ? 'visible' : 'hidden' }\">\n            <mat-checkbox *ngIf=\"showCardSelection\" class=\"pull-left flip card-selection\"\n                [disabled]=\"getisItemDisabled(item)\" [checked]=\"getIsItemSelected(item)\"\n                (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n            </mat-checkbox>\n            <pep-form [layoutType]=\"'card'\" [firstFieldAsLink]=\"firstFieldAsLink\" [checkForChanges]=\"checkForChanges\"\n                [layout]=\"layout\" [data]=\"item\" [canEditObject]=\"!disabled\"\n                [lockEvents]=\"lockItemInnerEvents || printMode\" [isActive]=\"\n                        (item?.UID + SEPARATOR + item?.Type === selectedItemId ||\n                        item?.UID + SEPARATOR + item?.Type === hoveredItemId) && deviceHasMouse\n                    \" (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\"\n                (click)=\"itemClicked($event, item)\">\n            </pep-form>\n        </div>\n    </ng-container>\n</ng-template>\n\n<ng-template #tableHeader>\n    <div *ngIf=\"isTable\" class=\"table-header\" (mouseup)=\"onListResizeEnd($event)\"\n        (mouseenter)=\"onListHeaderMouseEnter($event)\" (mouseleave)=\"onListHeaderMouseLeave($event)\"\n        (mousemove)=\"onListResize($event)\">\n\n        <div class=\"table-header-padding-top\"></div>\n        <fieldset class=\"table-header-fieldset\">\n            <mat-checkbox *ngIf=\"selectionTypeForActions !== 'none'\" #selectAllCB class=\"pull-left flip row-selection\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n                type=\"checkbox\" [ngStyle]=\"{\n                        visibility:\n                            selectionTypeForActions == 'single' || \n                            (selectionTypeForActions == 'multi' && hideAllSelectionInMulti) ? 'hidden' : 'visible'\n                    }\"\n                [indeterminate]=\"isAllSelected ? unSelectedItems.size > 0 && unSelectedItems.size < totalRows : (selectedItems.size > 0 && !getIsAllSelectedForActions())\"\n                [disabled]=\"disabled || selectionTypeForActions === 'single'\" [checked]=\"getIsAllSelectedForActions()\"\n                (change)=\"selectAllItemsForActions($event)\"></mat-checkbox>\n            <fieldset>\n                <div *ngFor=\"let field of layout?.ControlFields; let j = index\" class=\"header-column pull-left flip\"\n                    [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\" [ngClass]=\"{\n                            'compact-view': tableViewType === 'compact',\n                            'support-sorting': supportSorting,\n                            'has-sorting': field.ApiName === sortBy,\n                            'is-resizing': field.ApiName === pressedColumn,\n                            'is-first': j === 0 && selectionTypeForActions !== 'multi',\n                            'is-last': j === layout?.ControlFields?.length - 1\n                        }\"\n                    (click)=\"supportSorting ? (onListSortingChange(field.ApiName, sortBy !== null && sortBy != field.ApiName ? true : !isAsc, $event)) : false\">\n\n                    <label id=\"{{ field.ApiName }}\"\n                        class=\"header-label body-sm pull-left flip text-align-{{ field.Layout.XAlignment }}\"\n                        title=\"{{ field.Title }}\">\n                        <span *ngIf=\"field.Mandatory\" class=\"mandatory\">\n                            <pep-icon name=\"system_must\"></pep-icon>\n                        </span>\n                        {{ field.Title != '' ? field.Title : ' '}}\n                    </label>\n\n                    <div *ngIf=\"supportResizing\" class=\"resize-box pull-right flip\"\n                        (mousedown)=\"onListResizeStart($event, field.ApiName, j)\">\n                        <div class=\"splitter\"></div>\n                    </div>\n\n                    <div *ngIf=\"supportSorting\" class=\"sorting-box pull-left flip\"\n                        [ngClass]=\"{ 'has-sorting': field.ApiName === sortBy }\">\n                        <mat-icon *ngIf=\"field.ApiName !== sortBy\">\n                            <pep-icon name=\"arrow_either\" class=\"asc\"></pep-icon>\n                        </mat-icon>\n                        <ng-container *ngIf=\"field.ApiName === sortBy\">\n                            <mat-icon *ngIf=\"!isAsc\" [ngClass]=\"{ 'sort-by': field.ApiName === sortBy && isAsc }\"\n                                title=\"{{ 'LIST.SORT_ASC' | translate }}\">\n                                <pep-icon name=\"arrow_up\" class=\"asc\"></pep-icon>\n                            </mat-icon>\n                            <mat-icon *ngIf=\"isAsc\" [ngClass]=\"{ 'sort-by': field.ApiName === sortBy && !isAsc }\"\n                                title=\"{{ 'LIST.SORT_DESC' | translate }}\">\n                                <pep-icon name=\"arrow_down\" class=\"desc\"></pep-icon>\n                            </mat-icon>\n                        </ng-container>\n                    </div>\n                </div>\n            </fieldset>\n        </fieldset>\n    </div>\n</ng-template>\n\n<ng-template #tableTotal>\n    <div *ngIf=\"isTable && totalsRow?.length > 0 && totalsRow.length <= layout?.ControlFields.length\"\n        class=\"table-total\">\n        <fieldset class=\"table-header-fieldset\">\n            <div *ngFor=\"let field of layout?.ControlFields; let j = index\" class=\"total-column pull-left flip\"\n                [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\">\n                <label class=\"total-label body-sm text-align-{{ field.Layout.XAlignment }}\">\n                    {{ totalsRow[j] }}\n                </label>\n            </div>\n        </fieldset>\n    </div>\n</ng-template>", styles: [":host{height:inherit;display:flex;flex-direction:column}.no-data{margin:var(--pep-spacing-2xl, 2rem) 0}.no-data-suggestions .suggestions-title{margin:var(--pep-spacing-lg, 1rem) 0 var(--pep-spacing-sm, .5rem)}.no-data-suggestions .suggestions-list{margin:0;padding:0;padding-inline-start:var(--pep-spacing-2xl, 2rem)}.virtual-scroller{min-height:5rem;height:inherit}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4$1.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i7.PepFormComponent, selector: "pep-form", inputs: ["isInternal", "isReport", "layout", "lockEvents", "canEditObject", "data", "lockFields", "isActive", "layoutType", "objectId", "parentId", "searchCode", "showTitle", "firstFieldAsLink", "checkForChanges"], outputs: ["valueChange", "formValidationChange", "fieldClick", "internalFormFieldClick", "internalFormFieldChange"] }, { kind: "component", type: VirtualScrollerComponent, selector: "virtual-scroller,[virtualScroller]", inputs: ["disable", "executeRefreshOutsideAngularZone", "enableUnequalChildrenSizes", "RTL", "useMarginInsteadOfTranslate", "modifyOverflowStyleOfParentScroll", "stripedTable", "scrollbarWidth", "scrollbarHeight", "childWidth", "childHeight", "ssrChildWidth", "ssrChildHeight", "ssrViewportWidth", "ssrViewportHeight", "bufferAmount", "scrollAnimationTime", "resizeBypassRefreshThreshold", "scrollThrottlingTime", "scrollDebounceTime", "checkResizeInterval", "items", "compareItems", "horizontal", "parentScroll"], outputs: ["vsChildRectChange", "vsUpdate", "vsChange", "vsStart", "vsEnd"], exportAs: ["virtualScroller"] }, { kind: "component", type: PepListPagerComponent, selector: "pep-list-pager", inputs: ["disabled", "pageIndex", "length", "pageSize"], outputs: ["pagerChange"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pep-list', host: {
+                        '(window:resize)': 'onWinResize($event)',
+                    }, template: "<ng-container *ngIf=\"totalRows == 0\">\n    <ng-container *ngIf=\"noDataFoundMsg; then noDataMsgInputBlock; else noDataMsgDefaultBlock\"></ng-container>\n    <ng-template #noDataMsgInputBlock>\n        <div class=\"pep-border-bottom\">\n            <p class=\"title-xl no-data\">\n                {{ noDataFoundMsg }}\n            </p>\n        </div>\n    </ng-template>\n    <ng-template #noDataMsgDefaultBlock>\n        <div class=\"pep-border-bottom\">\n            <p class=\"title-xl no-data\">\n                {{ 'LIST.NO_DATA_FOUND' | translate}}\n            </p>\n        </div>\n        <div class=\"no-data-suggestions\">\n            <p class=\"suggestions-title title-lg\">\n                {{ 'LIST.NO_DATA_FOUND_SUGGESTIONS_TITLE' | translate}}\n            </p>\n            <ul class=\"suggestions-list body-lg\" [innerHtml]=\"'LIST.NO_DATA_FOUND_SUGGESTIONS_LIST' | translate\"></ul>\n        </div>\n    </ng-template>\n</ng-container>\n<ng-container *ngIf=\"totalRows > 0\">\n    <ng-container *ngTemplateOutlet=\"tableHeader\"></ng-container>\n\n    <!-- (vsChildRectChange)=\"onChildRectChange($event)\" -->\n    <virtual-scroller #scroller [items]=\"pagerType === 'pages' ? currentPageItems : items\"\n        [scrollDebounceTime]=\"scrollDebounceTime\" [scrollThrottlingTime]=\"scrollThrottlingTime\"\n        [bufferAmount]=\"printMode ? totalRows : bufferAmount\" [parentScroll]=\"parentScroll\" [disable]=\"loadingItemsFromApi\"\n        class=\"virtual-scroller\" [ngClass]=\"{ 'table-body': isTable, 'cards-body': !isTable }\"\n        (vsChange)=\"onVirtualScrollerChange($event)\" >\n        <ng-container *ngFor=\"let item of scroller.viewPortItems; let index = index; let isFirst = first;\">\n            <ng-container *ngTemplateOutlet=\"listData; context: {item: item, index:index}\"></ng-container>\n        </ng-container>\n    </virtual-scroller>\n\n    <pep-list-pager *ngIf=\"pagerType === 'pages'\" class=\" list-pager\" [disabled]=\"loadingItemsFromApi\"\n        [length]=\"totalRows\" [pageSize]=\"pageSize\" [pageIndex]=\"pageIndex\" (pagerChange)=\"onPagerChange($event)\">\n    </pep-list-pager>\n\n    <ng-container *ngTemplateOutlet=\"tableTotal\"></ng-container>\n</ng-container>\n\n<ng-template #listData let-item=\"item\" let-index=\"index\">\n    <ng-container *ngIf=\"isTable\">\n        <!-- getIsItemSelected(item) -> item | isItemSelected: selectionTypeForActions : selectedItemId : isAllSelected : selectedItems : unSelectedItems -->\n        <div class=\"table-row\" (mouseenter)=\"onTableRowMouseEnter($event, item?.UID, item?.Type)\" \n            (mouseleave)=\"onTableRowMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\n                'compact-view': tableViewType === 'compact',\n                even: zebraStripes && index % 2 !== 0,\n                selected: getIsItemSelected(item),\n                highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId}\" [ngStyle]=\"{ visibility: !loadingItemsFromApi || item ? 'visible' : 'hidden' }\">\n            <fieldset class=\"table-row-fieldset\" [ngStyle]=\"{ 'background-color': item?.BackgroundColor }\">\n                <mat-checkbox *ngIf=\"selectionTypeForActions == 'multi'\" type=\"checkbox\"\n                    class=\"pull-left flip row-selection\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n                    [disabled]=\"getisItemDisabled(item)\" [ngStyle]=\"{\n                            visibility: !deviceHasMouse ||\n                            item?.UID + SEPARATOR + item?.Type === hoveredItemId || isAllSelected || selectedItems.size > 0 ? 'visible' : 'hidden'\n                        }\" [checked]=\"getIsItemSelected(item)\"\n                    (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n                </mat-checkbox>\n                <mat-radio-button *ngIf=\"selectionTypeForActions == 'single'\" name=\"selection\"\n                    class=\"pull-left flip row-selection pep-radio-button\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n                    [disabled]=\"getisItemDisabled(item)\"\n                    [checked]=\"getIsItemSelected(item)\"\n                    (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n                </mat-radio-button>\n                <pep-form [layoutType]=\"'table'\" [checkForChanges]=\"checkForChanges\" [layout]=\"layout\"\n                    [firstFieldAsLink]=\"firstFieldAsLink\" [data]=\"item\" [canEditObject]=\"!disabled\"\n                    [lockEvents]=\"lockItemInnerEvents || printMode\" [isReport]=\"isReport\" [isActive]=\"\n                            (item?.UID + SEPARATOR + item?.Type === selectedItemId ||\n                            item?.UID + SEPARATOR + item?.Type === hoveredItemId) && deviceHasMouse\n                        \" (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\"\n                    (click)=\"itemClicked($event, item)\">\n                </pep-form>\n            </fieldset>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!isTable\">\n        <div (mouseenter)=\"onCardMouseEnter($event, item?.UID, item?.Type)\"\n            (mouseleave)=\"onCardMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\n                    selected: getIsItemSelected(item),\n                    highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId,\n                    'line-view': viewType === 'lines',\n                    'card-view': viewType === 'cards',\n                    'small-card': cardSize === 'sm'\n                }\" class=\"pull-left flip\"\n            [ngStyle]=\"{ height: calculatedObjectHeight, visibility: !loadingItemsFromApi || item ? 'visible' : 'hidden' }\">\n            <mat-checkbox *ngIf=\"showCardSelection\" class=\"pull-left flip card-selection\"\n                [disabled]=\"getisItemDisabled(item)\" [checked]=\"getIsItemSelected(item)\"\n                (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n            </mat-checkbox>\n            <pep-form [layoutType]=\"'card'\" [firstFieldAsLink]=\"firstFieldAsLink\" [checkForChanges]=\"checkForChanges\"\n                [layout]=\"layout\" [data]=\"item\" [canEditObject]=\"!disabled\"\n                [lockEvents]=\"lockItemInnerEvents || printMode\" [isActive]=\"\n                        (item?.UID + SEPARATOR + item?.Type === selectedItemId ||\n                        item?.UID + SEPARATOR + item?.Type === hoveredItemId) && deviceHasMouse\n                    \" (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\"\n                (click)=\"itemClicked($event, item)\">\n            </pep-form>\n        </div>\n    </ng-container>\n</ng-template>\n\n<ng-template #tableHeader>\n    <div *ngIf=\"isTable\" class=\"table-header\" (mouseup)=\"onListResizeEnd($event)\"\n        (mouseenter)=\"onListHeaderMouseEnter($event)\" (mouseleave)=\"onListHeaderMouseLeave($event)\"\n        (mousemove)=\"onListResize($event)\">\n\n        <div class=\"table-header-padding-top\"></div>\n        <fieldset class=\"table-header-fieldset\">\n            <mat-checkbox *ngIf=\"selectionTypeForActions !== 'none'\" #selectAllCB class=\"pull-left flip row-selection\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n                type=\"checkbox\" [ngStyle]=\"{\n                        visibility:\n                            selectionTypeForActions == 'single' || \n                            (selectionTypeForActions == 'multi' && hideAllSelectionInMulti) ? 'hidden' : 'visible'\n                    }\"\n                [indeterminate]=\"isAllSelected ? unSelectedItems.size > 0 && unSelectedItems.size < totalRows : (selectedItems.size > 0 && !getIsAllSelectedForActions())\"\n                [disabled]=\"disabled || selectionTypeForActions === 'single'\" [checked]=\"getIsAllSelectedForActions()\"\n                (change)=\"selectAllItemsForActions($event)\"></mat-checkbox>\n            <fieldset>\n                <div *ngFor=\"let field of layout?.ControlFields; let j = index\" class=\"header-column pull-left flip\"\n                    [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\" [ngClass]=\"{\n                            'compact-view': tableViewType === 'compact',\n                            'support-sorting': supportSorting,\n                            'has-sorting': field.ApiName === sortBy,\n                            'is-resizing': field.ApiName === pressedColumn,\n                            'is-first': j === 0 && selectionTypeForActions !== 'multi',\n                            'is-last': j === layout?.ControlFields?.length - 1\n                        }\"\n                    (click)=\"supportSorting ? (onListSortingChange(field.ApiName, sortBy !== null && sortBy != field.ApiName ? true : !isAsc, $event)) : false\">\n\n                    <label id=\"{{ field.ApiName }}\"\n                        class=\"header-label body-sm pull-left flip text-align-{{ field.Layout.XAlignment }}\"\n                        title=\"{{ field.Title }}\">\n                        <span *ngIf=\"field.Mandatory\" class=\"mandatory\">\n                            <pep-icon name=\"system_must\"></pep-icon>\n                        </span>\n                        {{ field.Title != '' ? field.Title : ' '}}\n                    </label>\n\n                    <div *ngIf=\"supportResizing\" class=\"resize-box pull-right flip\"\n                        (mousedown)=\"onListResizeStart($event, field.ApiName, j)\">\n                        <div class=\"splitter\"></div>\n                    </div>\n\n                    <div *ngIf=\"supportSorting\" class=\"sorting-box pull-left flip\"\n                        [ngClass]=\"{ 'has-sorting': field.ApiName === sortBy }\">\n                        <mat-icon *ngIf=\"field.ApiName !== sortBy\">\n                            <pep-icon name=\"arrow_either\" class=\"asc\"></pep-icon>\n                        </mat-icon>\n                        <ng-container *ngIf=\"field.ApiName === sortBy\">\n                            <mat-icon *ngIf=\"!isAsc\" [ngClass]=\"{ 'sort-by': field.ApiName === sortBy && isAsc }\"\n                                title=\"{{ 'LIST.SORT_ASC' | translate }}\">\n                                <pep-icon name=\"arrow_up\" class=\"asc\"></pep-icon>\n                            </mat-icon>\n                            <mat-icon *ngIf=\"isAsc\" [ngClass]=\"{ 'sort-by': field.ApiName === sortBy && !isAsc }\"\n                                title=\"{{ 'LIST.SORT_DESC' | translate }}\">\n                                <pep-icon name=\"arrow_down\" class=\"desc\"></pep-icon>\n                            </mat-icon>\n                        </ng-container>\n                    </div>\n                </div>\n            </fieldset>\n        </fieldset>\n    </div>\n</ng-template>\n\n<ng-template #tableTotal>\n    <div *ngIf=\"isTable && totalsRow?.length > 0 && totalsRow.length <= layout?.ControlFields.length\"\n        class=\"table-total\">\n        <fieldset class=\"table-header-fieldset\">\n            <div *ngFor=\"let field of layout?.ControlFields; let j = index\" class=\"total-column pull-left flip\"\n                [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\">\n                <label class=\"total-label body-sm text-align-{{ field.Layout.XAlignment }}\">\n                    {{ totalsRow[j] }}\n                </label>\n            </div>\n        </fieldset>\n    </div>\n</ng-template>", styles: [":host{height:inherit;display:flex;flex-direction:column}.no-data{margin:var(--pep-spacing-2xl, 2rem) 0}.no-data-suggestions .suggestions-title{margin:var(--pep-spacing-lg, 1rem) 0 var(--pep-spacing-sm, .5rem)}.no-data-suggestions .suggestions-list{margin:0;padding:0;padding-inline-start:var(--pep-spacing-2xl, 2rem)}.virtual-scroller{min-height:5rem;height:inherit}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.PepLayoutService }, { type: i1.PepSessionService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { sorting: [{
+                type: Input
+            }], cacheSize: [{
+                type: Input
+            }], noDataFoundMsg: [{
+                type: Input
+            }], selectionTypeForActions: [{
+                type: Input
+            }], showCardSelection: [{
+                type: Input
+            }], hideAllSelectionInMulti: [{
+                type: Input
+            }], cardSize: [{
+                type: Input
+            }], tableViewType: [{
+                type: Input
+            }], viewType: [{
+                type: Input
+            }], firstFieldAsLink: [{
+                type: Input
+            }], supportSorting: [{
+                type: Input
+            }], supportResizing: [{
+                type: Input
+            }], parentScroll: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], lockEvents: [{
+                type: Input
+            }], lockItemInnerEvents: [{
+                type: Input
+            }], printMode: [{
+                type: Input
+            }], isReport: [{
+                type: Input
+            }], zebraStripes: [{
+                type: Input
+            }], totalsRow: [{
+                type: Input
+            }], pagerType: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], pageIndex: [{
+                type: Input
+            }], bufferAmount: [{
+                type: Input
+            }], scrollAnimationTime: [{
+                type: Input
+            }], scrollDebounceTime: [{
+                type: Input
+            }], scrollThrottlingTime: [{
+                type: Input
+            }], useAsWebComponent: [{
+                type: Input
+            }], itemClick: [{
+                type: Output
+            }], fieldClick: [{
+                type: Output
+            }], valueChange: [{
+                type: Output
+            }], sortingChange: [{
+                type: Output
+            }], selectedItemsChange: [{
+                type: Output
+            }], selectedItemChange: [{
+                type: Output
+            }], selectAllClick: [{
+                type: Output
+            }], listLoad: [{
+                type: Output
+            }], loadItems: [{
+                type: Output
+            }], loadPage: [{
+                type: Output
+            }], startIndexChange: [{
+                type: Output
+            }], virtualScroller: [{
+                type: ViewChild,
+                args: [VirtualScrollerComponent]
+            }], selectAllCB: [{
+                type: ViewChild,
+                args: ['selectAllCB']
+            }] } });
+
+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();
+    }
+    onActionClicked(action) {
+        this.actionClick.emit(action);
+    }
+    onStateChanged(menuStateChangeEvent) {
+        this.stateChange.emit(menuStateChangeEvent);
+    }
+}
+PepListActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PepListActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListActionsComponent, selector: "pep-list-actions", inputs: { actions: "actions", sizeType: "sizeType", xPosition: "xPosition", hidden: "hidden" }, outputs: { actionClick: "actionClick", stateChange: "stateChange", menuClick: "menuClick" }, ngImport: i0, template: "<pep-menu [xPosition]=\"xPosition\" [styleType]=\"'strong'\" [sizeType]=\"sizeType\" [items]=\"!hidden ? actions : null\"\n    [hideOnEmptyItems]=\"true\" [iconName]=\"'system_edit'\" (menuItemClick)=\"onActionClicked($event)\"\n    (stateChange)=\"onStateChanged($event)\" (menuClick)=\"menuClick.emit();\">\n</pep-menu>\n", styles: [""], dependencies: [{ kind: "component", type: i1$1.PepMenuComponent, selector: "pep-menu", inputs: ["text", "iconName", "type", "styleType", "sizeType", "classNames", "xPosition", "hideOnEmptyItems", "items", "selectedItem", "disabled"], outputs: ["stateChange", "menuItemClick", "menuClick"] }] });
+PepListActionsComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListActionsComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pep-list-actions', template: "<pep-menu [xPosition]=\"xPosition\" [styleType]=\"'strong'\" [sizeType]=\"sizeType\" [items]=\"!hidden ? actions : null\"\n    [hideOnEmptyItems]=\"true\" [iconName]=\"'system_edit'\" (menuItemClick)=\"onActionClicked($event)\"\n    (stateChange)=\"onStateChanged($event)\" (menuClick)=\"menuClick.emit();\">\n</pep-menu>\n" }]
+        }, {
+            type: Injectable
+        }], propDecorators: { actions: [{
+                type: Input
+            }], sizeType: [{
+                type: Input
+            }], xPosition: [{
+                type: Input
+            }], hidden: [{
+                type: Input
+            }], actionClick: [{
+                type: Output
+            }], stateChange: [{
+                type: Output
+            }], menuClick: [{
+                type: Output
+            }] } });
+
+class PepListCarouselComponent {
+    // 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();
+    }
+    set items(value) {
+        this._items = value;
+        this.moveTo(0);
+    }
+    get items() {
+        return this._items;
+    }
+    set itemSize(value) {
+        this._itemSize = value;
+        this.moveTo(0);
+    }
+    get itemSize() {
+        return this._itemSize;
+    }
+    ngAfterViewInit() {
+        this.layoutService.onResize$.subscribe((size) => {
+            this.screenSize = size;
+        });
+        // this.layoutService.onMouseOver$.subscribe((deviceHasMouse: boolean) => {
+        //     this.deviceHasMouse = deviceHasMouse;
+        // });
+    }
+    ngOnDestroy() {
+        // if (this.itemClick) {
+        //     this.itemClick.unsubscribe();
+        // }
+    }
+    itemClicked(item) {
+        this.itemClick.emit({ source: item });
+    }
+    moveLeft() {
+        // this.carousel.moveLeft();
+        const indexToMove = Math.max(this.carousel.currIndex - this.itemsToMove, 0);
+        this.moveTo(indexToMove);
+    }
+    moveRight() {
+        // this.carousel.moveRight();
+        const indexToMove = Math.min(this.carousel.currIndex + this.itemsToMove, this.items.length);
+        this.moveTo(indexToMove);
+    }
+    moveTo(index) {
+        if (this.carousel) {
+            this.carousel.moveTo(index);
+        }
+    }
+    onReachesLeftBound(event) {
+        this.prevDisabled = event;
+    }
+    onReachesRightBound(event) {
+        this.nextDisabled = event;
+    }
+}
+PepListCarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListCarouselComponent, deps: [{ token: i1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
+PepListCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListCarouselComponent, selector: "pep-list-carousel", inputs: { duration: "duration", layout: "layout", itemsToMove: "itemsToMove", lockItemInnerEvents: "lockItemInnerEvents", hideArrowsInSmallScreen: "hideArrowsInSmallScreen", items: "items", itemSize: "itemSize" }, outputs: { itemClick: "itemClick" }, viewQueries: [{ propertyName: "carousel", first: true, predicate: ["carousel"], descendants: true, read: PepCarouselComponent }], ngImport: i0, template: "<div class=\"carousel-container\">\n    <ng-container *ngIf=\"items?.length > 0; then carouselBlock; else emptyBlock\"></ng-container>\n    <ng-template #emptyBlock>\n        <!-- No items -->\n    </ng-template>\n    <ng-template #carouselBlock>\n        <pep-button *ngIf=\"!(hideArrowsInSmallScreen && screenSize > PepScreenSizeType.SM)\"\n            [iconName]=\"'arrow_left_alt'\" [styleType]=\"'regular'\" [disabled]=\"prevDisabled\" (click)=\"moveLeft()\"\n            class=\"carousel-arrow start-arrow\">\n        </pep-button>\n        <pep-carousel #carousel [xWheelEnabled]=\"false\" [snapDuration]=\"duration\"\n            (reachesLeftBound)=\"onReachesLeftBound($event)\" (reachesRightBound)=\"onReachesRightBound($event)\">\n            <ng-container *ngFor=\"let item of items\">\n                <pep-form pepCarouselItem [layout]=\"layout\" [data]=\"item\" [layoutType]=\"'card'\"\n                    (click)=\"itemClicked(item)\" class=\"card-view \" [lockEvents]=\"lockItemInnerEvents\"\n                    [ngClass]=\"{ 'x-small-card': itemSize === 'xs', 'small-card': itemSize === 'sm'}\">\n                </pep-form>\n            </ng-container>\n        </pep-carousel>\n        <pep-button *ngIf=\"!(hideArrowsInSmallScreen && screenSize > PepScreenSizeType.SM)\"\n            [iconName]=\"'arrow_right_alt'\" [styleType]=\"'regular'\" [disabled]=\"nextDisabled\" (click)=\"moveRight()\"\n            class=\"carousel-arrow end-arrow\">\n        </pep-button>\n    </ng-template>\n</div>", styles: [".carousel-container{position:relative;margin:0 calc(var(--pep-spacing-sm, .5rem) * -1);display:grid}.carousel-container .carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:1}.carousel-container .carousel-arrow.start-arrow{left:0}.carousel-container .carousel-arrow.end-arrow{right:0}.carousel-container ::ng-deep .carousel-content .card-view{padding:var(--pep-spacing-sm, .5rem) 0!important}.carousel-container ::ng-deep .carousel-content .card-view:first-child{padding-inline-start:var(--pep-spacing-sm, .5rem)!important}.carousel-container ::ng-deep .carousel-content .card-view:last-child{padding-inline-end:var(--pep-spacing-sm, .5rem)!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i4$2.PepCarouselComponent, selector: "pep-carousel", inputs: ["scrollbarHidden", "disabled", "xDisabled", "yDisabled", "xWheelEnabled", "dragDisabled", "snapDisabled", "snapOffset", "snapDuration"], outputs: ["dsInitialized", "indexChanged", "reachesLeftBound", "reachesRightBound", "snapAnimationFinished", "dragStart", "dragEnd"] }, { kind: "directive", type: i4$2.PepCarouselItemDirective, selector: "[pepCarouselItem]", inputs: ["dragDisabled"] }, { kind: "component", type: i7.PepFormComponent, selector: "pep-form", inputs: ["isInternal", "isReport", "layout", "lockEvents", "canEditObject", "data", "lockFields", "isActive", "layoutType", "objectId", "parentId", "searchCode", "showTitle", "firstFieldAsLink", "checkForChanges"], outputs: ["valueChange", "formValidationChange", "fieldClick", "internalFormFieldClick", "internalFormFieldChange"] }] });
+PepListCarouselComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListCarouselComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListCarouselComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pep-list-carousel', template: "<div class=\"carousel-container\">\n    <ng-container *ngIf=\"items?.length > 0; then carouselBlock; else emptyBlock\"></ng-container>\n    <ng-template #emptyBlock>\n        <!-- No items -->\n    </ng-template>\n    <ng-template #carouselBlock>\n        <pep-button *ngIf=\"!(hideArrowsInSmallScreen && screenSize > PepScreenSizeType.SM)\"\n            [iconName]=\"'arrow_left_alt'\" [styleType]=\"'regular'\" [disabled]=\"prevDisabled\" (click)=\"moveLeft()\"\n            class=\"carousel-arrow start-arrow\">\n        </pep-button>\n        <pep-carousel #carousel [xWheelEnabled]=\"false\" [snapDuration]=\"duration\"\n            (reachesLeftBound)=\"onReachesLeftBound($event)\" (reachesRightBound)=\"onReachesRightBound($event)\">\n            <ng-container *ngFor=\"let item of items\">\n                <pep-form pepCarouselItem [layout]=\"layout\" [data]=\"item\" [layoutType]=\"'card'\"\n                    (click)=\"itemClicked(item)\" class=\"card-view \" [lockEvents]=\"lockItemInnerEvents\"\n                    [ngClass]=\"{ 'x-small-card': itemSize === 'xs', 'small-card': itemSize === 'sm'}\">\n                </pep-form>\n            </ng-container>\n        </pep-carousel>\n        <pep-button *ngIf=\"!(hideArrowsInSmallScreen && screenSize > PepScreenSizeType.SM)\"\n            [iconName]=\"'arrow_right_alt'\" [styleType]=\"'regular'\" [disabled]=\"nextDisabled\" (click)=\"moveRight()\"\n            class=\"carousel-arrow end-arrow\">\n        </pep-button>\n    </ng-template>\n</div>", styles: [".carousel-container{position:relative;margin:0 calc(var(--pep-spacing-sm, .5rem) * -1);display:grid}.carousel-container .carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:1}.carousel-container .carousel-arrow.start-arrow{left:0}.carousel-container .carousel-arrow.end-arrow{right:0}.carousel-container ::ng-deep .carousel-content .card-view{padding:var(--pep-spacing-sm, .5rem) 0!important}.carousel-container ::ng-deep .carousel-content .card-view:first-child{padding-inline-start:var(--pep-spacing-sm, .5rem)!important}.carousel-container ::ng-deep .carousel-content .card-view:last-child{padding-inline-end:var(--pep-spacing-sm, .5rem)!important}\n"] }]
+        }, {
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.PepLayoutService }]; }, propDecorators: { duration: [{
+                type: Input
+            }], layout: [{
+                type: Input
+            }], itemsToMove: [{
+                type: Input
+            }], lockItemInnerEvents: [{
+                type: Input
+            }], hideArrowsInSmallScreen: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], itemSize: [{
+                type: Input
+            }], itemClick: [{
+                type: Output
+            }], carousel: [{
+                type: ViewChild,
+                args: ['carousel', { read: PepCarouselComponent }]
+            }] } });
+
+class IPepListChooserOption {
+}
+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;
+    }
+    set options(value) {
+        var _a;
+        this._options = value;
+        this.menuItems = value.map((opt) => {
+            return { key: opt.key, text: opt.text };
+        });
+        if (((_a = this.menuItems) === null || _a === void 0 ? void 0 : _a.length) === 1) {
+            this.breadCrumbsItems = [];
+            this.breadCrumbsItems.push(new PepBreadCrumbItem({
+                key: this.menuItems[0].key,
+                text: this.menuItems[0].text,
+            }));
+        }
+    }
+    get options() {
+        return this._options;
+    }
+    set currentList(value) {
+        this._currentList = value;
+        this.currentItem = this.menuItems.find((mi) => mi.key === value.key);
+    }
+    get currentList() {
+        return this._currentList;
+    }
+    onMenuItemClicked(menuItemClickEvent) {
+        this.currentList = this.options.find((list) => list.key === menuItemClickEvent.source.key);
+        this.change.emit({ source: this.currentList });
+    }
+}
+PepListChooserComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListChooserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PepListChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListChooserComponent, selector: "pep-list-chooser", inputs: { options: "options", currentList: "currentList", sizeType: "sizeType" }, outputs: { change: "change" }, ngImport: i0, template: "<ng-container *ngIf=\"menuItems?.length > 1\">\n    <pep-menu [type]=\"'select'\" [sizeType]=\"sizeType\" [items]=\"menuItems\" [selectedItem]=\"currentItem\"\n        [iconName]=\"'arrow_down'\" (menuItemClick)=\"onMenuItemClicked($event)\"></pep-menu>\n</ng-container>\n<ng-container *ngIf=\"menuItems?.length == 1\">\n    <pep-bread-crumbs [items]=\"breadCrumbsItems\" [addSpacing]=\"true\"></pep-bread-crumbs>\n</ng-container>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.PepBreadCrumbsComponent, selector: "pep-bread-crumbs", inputs: ["items", "displayType", "addSpacing"], outputs: ["itemClick"] }, { kind: "component", type: i1$1.PepMenuComponent, selector: "pep-menu", inputs: ["text", "iconName", "type", "styleType", "sizeType", "classNames", "xPosition", "hideOnEmptyItems", "items", "selectedItem", "disabled"], outputs: ["stateChange", "menuItemClick", "menuClick"] }] });
+PepListChooserComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListChooserComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListChooserComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pep-list-chooser', template: "<ng-container *ngIf=\"menuItems?.length > 1\">\n    <pep-menu [type]=\"'select'\" [sizeType]=\"sizeType\" [items]=\"menuItems\" [selectedItem]=\"currentItem\"\n        [iconName]=\"'arrow_down'\" (menuItemClick)=\"onMenuItemClicked($event)\"></pep-menu>\n</ng-container>\n<ng-container *ngIf=\"menuItems?.length == 1\">\n    <pep-bread-crumbs [items]=\"breadCrumbsItems\" [addSpacing]=\"true\"></pep-bread-crumbs>\n</ng-container>" }]
+        }, {
+            type: Injectable
+        }], propDecorators: { options: [{
+                type: Input
+            }], currentList: [{
+                type: Input
+            }], sizeType: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }] } });
+
+class IPepListSortingOption {
+}
+class PepListSortingComponent {
+    constructor() {
+        this._options = null;
+        this._currentSorting = null;
+        this.sizeType = 'md';
+        this.change = new EventEmitter();
+        this.menuItems = null;
+        this.currentItem = null;
+    }
+    set options(value) {
+        this._options = value;
+        this.menuItems = value.map((opt) => {
+            return { key: opt.sortBy, text: opt.title, iconName: opt.iconName };
+        });
+    }
+    get options() {
+        return this._options;
+    }
+    set currentSorting(value) {
+        this._currentSorting = value;
+        this.currentItem = this.menuItems.find((mi) => mi.key === value.sortBy);
+    }
+    get currentSorting() {
+        return this._currentSorting;
+    }
+    ngOnInit() {
+        if (this.currentSorting === null &&
+            this.options &&
+            this.options.length > 0) {
+            this.currentSorting = this.options[0];
+        }
+    }
+    onMenuItemClicked(menuItemClickEvent) {
+        this.currentSorting = this.options.find((sorting) => sorting.sortBy === menuItemClickEvent.source.key);
+        this.change.emit({ source: this.currentSorting });
+    }
+}
+PepListSortingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListSortingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PepListSortingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListSortingComponent, selector: "pep-list-sorting", inputs: { options: "options", currentSorting: "currentSorting", sizeType: "sizeType" }, outputs: { change: "change" }, ngImport: i0, template: "<div class=\"sorting-container\">\n    <div class=\"body-xs sort-by\">\n        <span>{{ 'LIST.SORT_BY' | translate }}</span>\n    </div>\n    <pep-menu [type]=\"'select'\" [sizeType]=\"sizeType\" [items]=\"menuItems\" [selectedItem]=\"currentItem\"\n        [iconName]=\"'arrow_down'\" (menuItemClick)=\"onMenuItemClicked($event)\"></pep-menu>\n</div>", styles: [".sorting-container{display:flex;align-items:center}.sorting-container .sort-by{margin-inline-end:var(--pep-spacing-sm, .5rem)}\n"], dependencies: [{ kind: "component", type: i1$1.PepMenuComponent, selector: "pep-menu", inputs: ["text", "iconName", "type", "styleType", "sizeType", "classNames", "xPosition", "hideOnEmptyItems", "items", "selectedItem", "disabled"], outputs: ["stateChange", "menuItemClick", "menuClick"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+PepListSortingComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListSortingComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListSortingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pep-list-sorting', template: "<div class=\"sorting-container\">\n    <div class=\"body-xs sort-by\">\n        <span>{{ 'LIST.SORT_BY' | translate }}</span>\n    </div>\n    <pep-menu [type]=\"'select'\" [sizeType]=\"sizeType\" [items]=\"menuItems\" [selectedItem]=\"currentItem\"\n        [iconName]=\"'arrow_down'\" (menuItemClick)=\"onMenuItemClicked($event)\"></pep-menu>\n</div>", styles: [".sorting-container{display:flex;align-items:center}.sorting-container .sort-by{margin-inline-end:var(--pep-spacing-sm, .5rem)}\n"] }]
+        }, {
+            type: Injectable
+        }], propDecorators: { options: [{
+                type: Input
+            }], currentSorting: [{
+                type: Input
+            }], sizeType: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }] } });
+
+class PepListTotalComponent {
+    constructor() {
+        this.totalRows = -1;
+        this.totalAmount = -1;
+        this.isMapView = false;
+        this.sizeType = 'md';
+    }
+}
+PepListTotalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListTotalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PepListTotalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListTotalComponent, selector: "pep-list-total", inputs: { totalRows: "totalRows", totalAmount: "totalAmount", isMapView: "isMapView", sizeType: "sizeType" }, ngImport: i0, template: "<div class=\"total-items-container\">\n    <ng-container *ngIf=\"isMapView; then mapTemplate; else notMapTemplate\"></ng-container>\n\n    <ng-template #notMapTemplate>\n        <ng-container *ngIf=\"totalRows >= 0\">\n            <div class=\"body-{{sizeType}} total-items color-dimmed\"\n                [innerHtml]=\"(totalRows === 1 ? 'LIST.TOTAL_RESULT' : 'LIST.TOTAL_RESULTS') | translate: { totalRows: totalRows }\">\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"totalAmount > 0\"> {{ 'LIST.TOTAL_OF' | translate }} {{ totalAmount }} </ng-container>\n    </ng-template>\n\n    <ng-template #mapTemplate>\n        <ng-container *ngIf=\"totalAmount >= 0\">\n        </ng-container>\n        <ng-container *ngIf=\"totalRows >= 0\">\n            <div class=\"body-{{sizeType}} total-items color-dimmed\"\n                [innerHtml]=\"(totalRows === 1 ? 'LIST.TOTAL_RESULT_OUT_OF_RESULT' : 'LIST.TOTAL_RESULTS_OUT_OF') | translate: { xRows: totalAmount, totalRows: totalRows }\">\n            </div>\n        </ng-container>\n    </ng-template>\n</div>", styles: [":host{height:inherit}.total-items-container{height:100%;display:flex;align-items:center}\n", ""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+PepListTotalComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListTotalComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListTotalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pep-list-total', template: "<div class=\"total-items-container\">\n    <ng-container *ngIf=\"isMapView; then mapTemplate; else notMapTemplate\"></ng-container>\n\n    <ng-template #notMapTemplate>\n        <ng-container *ngIf=\"totalRows >= 0\">\n            <div class=\"body-{{sizeType}} total-items color-dimmed\"\n                [innerHtml]=\"(totalRows === 1 ? 'LIST.TOTAL_RESULT' : 'LIST.TOTAL_RESULTS') | translate: { totalRows: totalRows }\">\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"totalAmount > 0\"> {{ 'LIST.TOTAL_OF' | translate }} {{ totalAmount }} </ng-container>\n    </ng-template>\n\n    <ng-template #mapTemplate>\n        <ng-container *ngIf=\"totalAmount >= 0\">\n        </ng-container>\n        <ng-container *ngIf=\"totalRows >= 0\">\n            <div class=\"body-{{sizeType}} total-items color-dimmed\"\n                [innerHtml]=\"(totalRows === 1 ? 'LIST.TOTAL_RESULT_OUT_OF_RESULT' : 'LIST.TOTAL_RESULTS_OUT_OF') | translate: { xRows: totalAmount, totalRows: totalRows }\">\n            </div>\n        </ng-container>\n    </ng-template>\n</div>", styles: [":host{height:inherit}.total-items-container{height:100%;display:flex;align-items:center}\n"] }]
+        }, {
+            type: Injectable
+        }], propDecorators: { totalRows: [{
+                type: Input
+            }], totalAmount: [{
+                type: Input
+            }], isMapView: [{
+                type: Input
+            }], sizeType: [{
+                type: Input
+            }] } });
+
+class IPepListView {
+}
+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;
+    }
+    set views(value) {
+        this._views = value;
+        this.menuItems = value.map((opt) => {
+            return { key: opt.key, text: opt.title, iconName: opt.iconName };
+        });
+    }
+    get views() {
+        return this._views;
+    }
+    set currentView(value) {
+        this._currentView = value;
+        if (this.displayType === 'menu') {
+            this.currentItem = this.menuItems.find((mi) => mi.key === value.key);
+        }
+    }
+    get currentView() {
+        return this._currentView;
+    }
+    ngOnInit() {
+        if (this.displayType === 'buttons') {
+            if (this.currentView === null &&
+                this.views &&
+                this.views.length > 0) {
+                this.currentView = this.views[0];
+            }
+        }
+    }
+    onMenuItemClicked(menuItemClickEvent) {
+        this.currentView = this.views.find((list) => list.key === menuItemClickEvent.source.key);
+        this.raiseChangeEvent();
+    }
+    onViewChanged(view) {
+        this.currentView = view;
+        this.raiseChangeEvent();
+    }
+    raiseChangeEvent() {
+        this.change.emit({ source: this.currentView });
+    }
+}
+PepListViewsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListViewsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PepListViewsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepListViewsComponent, selector: "pep-list-views", inputs: { views: "views", currentView: "currentView", displayType: "displayType", styleType: "styleType", sizeType: "sizeType", classNames: "classNames" }, outputs: { change: "change" }, ngImport: i0, template: "<ng-container *ngIf=\"displayType === 'menu' then menuTemplate else buttonsTemplate\">\n</ng-container>\n<ng-template #menuTemplate>\n    <pep-menu [type]=\"'select'\" [styleType]=\"styleType\" [sizeType]=\"sizeType\" [classNames]=\"classNames\"\n        [items]=\"menuItems\" [selectedItem]=\"currentItem\"\n        [iconName]=\"currentItem?.iconName ? currentItem?.iconName : 'arrow_down'\"\n        (menuItemClick)=\"onMenuItemClicked($event)\"></pep-menu>\n</ng-template>\n<ng-template #buttonsTemplate>\n    <div class=\"buttons-wrapper pep-spacing-element-negative\">\n        <button *ngFor=\"let view of views\" mat-button [title]=\"view.title\" [disabled]=\"view.key === currentView?.key\"\n            class=\"pep-button icon-button pep-spacing-element {{ sizeType }} {{ styleType }} {{ classNames }}\"\n            pepRtlDirection pepMenuBlur (click)=\"onViewChanged(view)\">\n            <mat-icon>\n                <pep-icon name=\"{{ view?.iconName }}\"></pep-icon>\n            </mat-icon>\n        </button>\n    </div>\n</ng-template>", styles: [".buttons-wrapper{display:flex}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.PepMenuBlurDirective, selector: "[pepMenuBlur]" }, { kind: "directive", type: i1.PepRtlDirectionDirective, selector: "[pepRtlDirection]" }, { kind: "component", type: i5.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i1$1.PepMenuComponent, selector: "pep-menu", inputs: ["text", "iconName", "type", "styleType", "sizeType", "classNames", "xPosition", "hideOnEmptyItems", "items", "selectedItem", "disabled"], outputs: ["stateChange", "menuItemClick", "menuClick"] }] });
+PepListViewsComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListViewsComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListViewsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pep-list-views', template: "<ng-container *ngIf=\"displayType === 'menu' then menuTemplate else buttonsTemplate\">\n</ng-container>\n<ng-template #menuTemplate>\n    <pep-menu [type]=\"'select'\" [styleType]=\"styleType\" [sizeType]=\"sizeType\" [classNames]=\"classNames\"\n        [items]=\"menuItems\" [selectedItem]=\"currentItem\"\n        [iconName]=\"currentItem?.iconName ? currentItem?.iconName : 'arrow_down'\"\n        (menuItemClick)=\"onMenuItemClicked($event)\"></pep-menu>\n</ng-template>\n<ng-template #buttonsTemplate>\n    <div class=\"buttons-wrapper pep-spacing-element-negative\">\n        <button *ngFor=\"let view of views\" mat-button [title]=\"view.title\" [disabled]=\"view.key === currentView?.key\"\n            class=\"pep-button icon-button pep-spacing-element {{ sizeType }} {{ styleType }} {{ classNames }}\"\n            pepRtlDirection pepMenuBlur (click)=\"onViewChanged(view)\">\n            <mat-icon>\n                <pep-icon name=\"{{ view?.iconName }}\"></pep-icon>\n            </mat-icon>\n        </button>\n    </div>\n</ng-template>", styles: [".buttons-wrapper{display:flex}\n"] }]
+        }, {
+            type: Injectable
+        }], propDecorators: { views: [{
+                type: Input
+            }], currentView: [{
+                type: Input
+            }], displayType: [{
+                type: Input
+            }], styleType: [{
+                type: Input
+            }], sizeType: [{
+                type: Input
+            }], classNames: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }] } });
+
+class IsItemSelectedPipe {
+    constructor() {
+        this.SEPARATOR = ',';
+    }
+    getUniqItemId(itemId, itemType = '') {
+        return itemId + this.SEPARATOR + itemType;
+    }
+    transform(item, selectionTypeForActions, selectedItemId, isAllSelected, selectedItems, unSelectedItems) {
+        let isSelected = false;
+        if (selectionTypeForActions === 'single') {
+            isSelected = selectedItemId === this.getUniqItemId(item === null || item === void 0 ? void 0 : item.UID, item === null || item === void 0 ? void 0 : item.Type.toString());
+        }
+        // else if (selectionTypeForActions === 'single-action') {
+        //     isSelected = (isAllSelected && !unSelectedItems.has(item?.UID)) || selectedItems.has(item?.UID);
+        // }
+        else if (selectionTypeForActions === 'multi') {
+            if (item === null || item === void 0 ? void 0 : item.IsSelectableForActions) {
+                isSelected = (isAllSelected && !unSelectedItems.has(item === null || item === void 0 ? void 0 : item.UID)) || selectedItems.has(item === null || item === void 0 ? void 0 : item.UID);
+            }
+        }
+        return isSelected;
+    }
+}
+IsItemSelectedPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: IsItemSelectedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+IsItemSelectedPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: IsItemSelectedPipe, name: "isItemSelected" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: IsItemSelectedPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'isItemSelected'
+                }]
+        }] });
+class IsItemDisabledPipe {
+    transform(item, lockItemInnerEvents, printMode) {
+        return (printMode || lockItemInnerEvents || (item && !item.IsSelectableForActions));
+    }
+}
+IsItemDisabledPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: IsItemDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+IsItemDisabledPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: IsItemDisabledPipe, name: "isItemDisabled" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: IsItemDisabledPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'isItemDisabled'
+                }]
+        }] });
+
+const listComponents = [
+    // PepListOldComponent,
+    PepListComponent,
+    PepListActionsComponent,
+    PepListCarouselComponent,
+    PepListChooserComponent,
+    PepListPagerComponent,
+    PepListSortingComponent,
+    PepListTotalComponent,
+    PepListViewsComponent,
+];
+const listPipes = [
+    IsItemSelectedPipe,
+    IsItemDisabledPipe
+];
+// import { PepVirtualScrollComponent } from './virtual-scroll.component';
+class PepListModule {
+    constructor(pepIconRegistry) {
+        this.pepIconRegistry = pepIconRegistry;
+        this.pepIconRegistry.registerIcons([
+            pepIconArrowDown,
+            pepIconArrowEither,
+            pepIconArrowUp,
+            pepIconSystemMust,
+            pepIconArrowRight,
+            pepIconArrowRightAlt,
+            pepIconArrowLeft,
+            pepIconArrowLeftAlt,
+        ]);
+    }
+}
+PepListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepListModule, deps: [{ token: i5.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
+PepListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", 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: "14.0.2", 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: "14.0.2", ngImport: i0, type: PepListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        // Material modules,
+                        MatCommonModule,
+                        MatButtonModule,
+                        MatCheckboxModule,
+                        MatRadioModule,
+                        MatIconModule,
+                        MatMenuModule,
+                        // ngx-lib modules
+                        PepNgxLibModule,
+                        PepBreadCrumbsModule,
+                        PepButtonModule,
+                        PepCarouselModule,
+                        PepIconModule,
+                        PepFormModule,
+                        PepMenuModule,
+                        PepTextboxModule,
+                        VirtualScrollerModule
+                    ],
+                    exports: [listComponents],
+                    declarations: [listComponents, listPipes],
+                }]
+        }], ctorParameters: function () { return [{ type: i5.PepIconRegistry }]; } });
+
+/*
+ * Public API Surface of ngx-lib/list
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DEFAULT_PAGE_SIZE, IPepListChooserOption, IPepListPagerChangeEvent, IPepListSortingOption, IPepListView, PepListActionsComponent, PepListCarouselComponent, PepListChooserComponent, PepListComponent, PepListModule, PepListPagerComponent, PepListSortingComponent, PepListTotalComponent, PepListViewsComponent, PepSelectionData };
+//# sourceMappingURL=pepperi-addons-ngx-lib-list.mjs.map