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

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

@@ -1,7 +1,7 @@
 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 { EventEmitter, Component, Injectable, Input, Output, ElementRef, ViewChild, Pipe, NgModule } from '@angular/core';
 import * as i2 from '@angular/common';
-import { isPlatformServer, CommonModule } from '@angular/common';
+import { CommonModule } from '@angular/common';
 import { MatCommonModule } from '@angular/material/core';
 import * as i3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
@@ -32,1124 +32,6 @@ 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 {
-    element;
-    renderer;
-    zone;
-    changeDetectorRef;
-    viewPortItems;
-    window = window;
-    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,
-        };
-    }
-    _disable = false;
-    get disable() {
-        return this._disable;
-    }
-    set disable(value) {
-        if (this._disable === value) {
-            return;
-        }
-        this._disable = value;
-        if (this._disable) {
-            this.removeScrollEventHandlers();
-        }
-        else {
-            this.addScrollEventHandlers();
-        }
-    }
-    executeRefreshOutsideAngularZone = false;
-    _enableUnequalChildrenSizes = false;
-    get enableUnequalChildrenSizes() {
-        return this._enableUnequalChildrenSizes;
-    }
-    set enableUnequalChildrenSizes(value) {
-        if (this._enableUnequalChildrenSizes === value) {
-            return;
-        }
-        this._enableUnequalChildrenSizes = value;
-        this.minMeasuredChildWidth = undefined;
-        this.minMeasuredChildHeight = undefined;
-    }
-    RTL = false;
-    useMarginInsteadOfTranslate = false;
-    modifyOverflowStyleOfParentScroll;
-    stripedTable;
-    scrollbarWidth;
-    scrollbarHeight;
-    childWidth;
-    childHeight;
-    ssrChildWidth;
-    ssrChildHeight;
-    ssrViewportWidth = 1920;
-    ssrViewportHeight = 1080;
-    _bufferAmount;
-    get bufferAmount() {
-        if (typeof (this._bufferAmount) === 'number' && this._bufferAmount > 0) {
-            return this._bufferAmount;
-        }
-        else {
-            return this.enableUnequalChildrenSizes ? 5 : 0;
-        }
-    }
-    set bufferAmount(value) {
-        this._bufferAmount = value;
-    }
-    scrollAnimationTime;
-    resizeBypassRefreshThreshold;
-    _scrollThrottlingTime;
-    get scrollThrottlingTime() {
-        return this._scrollThrottlingTime;
-    }
-    set scrollThrottlingTime(value) {
-        this._scrollThrottlingTime = value;
-        this.updateOnScrollFunction();
-    }
-    _scrollDebounceTime;
-    get scrollDebounceTime() {
-        return this._scrollDebounceTime;
-    }
-    set scrollDebounceTime(value) {
-        this._scrollDebounceTime = value;
-        this.updateOnScrollFunction();
-    }
-    onScroll;
-    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);
-            };
-        }
-    }
-    checkScrollElementResizedTimer;
-    _checkResizeInterval;
-    get checkResizeInterval() {
-        return this._checkResizeInterval;
-    }
-    set checkResizeInterval(value) {
-        if (this._checkResizeInterval === value) {
-            return;
-        }
-        this._checkResizeInterval = value;
-        this.addScrollEventHandlers();
-    }
-    _items = [];
-    get items() {
-        return this._items;
-    }
-    set items(value) {
-        if (value === this._items) {
-            return;
-        }
-        this._items = value || [];
-        this.refresh_internal(true);
-    }
-    compareItems = (item1, item2) => item1 === item2;
-    _horizontal;
-    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;
-    }
-    oldParentScrollOverflow;
-    _parentScroll;
-    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';
-        }
-    }
-    // private _lastChildRect: DOMRect = null;
-    vsChildRectChange = new EventEmitter();
-    vsUpdate = new EventEmitter();
-    vsChange = new EventEmitter();
-    vsStart = new EventEmitter();
-    vsEnd = new EventEmitter();
-    contentElementRef;
-    invisiblePaddingElementRef;
-    headerElementRef;
-    containerElementRef;
-    ngOnInit() {
-        this.addScrollEventHandlers();
-    }
-    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;
-    }
-    isAngularUniversalSSR;
-    constructor(element, renderer, zone, changeDetectorRef, platformId, options) {
-        this.element = element;
-        this.renderer = renderer;
-        this.zone = zone;
-        this.changeDetectorRef = changeDetectorRef;
-        this.isAngularUniversalSSR = isPlatformServer(platformId);
-        const defaultOptions = VIRTUAL_SCROLLER_DEFAULT_OPTIONS_FACTORY();
-        this.checkResizeInterval = options?.checkResizeInterval || defaultOptions.checkResizeInterval;
-        this.modifyOverflowStyleOfParentScroll = options?.modifyOverflowStyleOfParentScroll || defaultOptions.modifyOverflowStyleOfParentScroll;
-        this.resizeBypassRefreshThreshold = options?.resizeBypassRefreshThreshold || defaultOptions.resizeBypassRefreshThreshold;
-        this.scrollAnimationTime = options?.scrollAnimationTime || defaultOptions.scrollAnimationTime;
-        this.scrollDebounceTime = options?.scrollDebounceTime || defaultOptions.scrollDebounceTime;
-        this.scrollThrottlingTime = options?.scrollThrottlingTime || defaultOptions.scrollThrottlingTime;
-        this.scrollbarHeight = options?.scrollbarHeight || defaultOptions.scrollbarHeight;
-        this.scrollbarWidth = options?.scrollbarWidth || defaultOptions.scrollbarWidth;
-        this.stripedTable = options?.stripedTable || defaultOptions.stripedTable;
-        this.horizontal = false;
-        this.resetWrapGroupDimensions();
-    }
-    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;
-    }
-    previousScrollBoundingRect;
-    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);
-            }
-        }
-    }
-    _invisiblePaddingProperty;
-    _offsetType;
-    _scrollType;
-    _pageOffsetType;
-    _childScrollDim;
-    _translateDir;
-    _marginDir;
-    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;
-    }
-    calculatedScrollbarWidth = 0;
-    calculatedScrollbarHeight = 0;
-    padding = 0;
-    previousViewPort = {};
-    currentTween;
-    cachedItemsLength;
-    disposeScrollHandler;
-    disposeResizeHandler;
-    refresh_internal(itemsArrayModified, refreshCompletedCallback = undefined, maxRunTimes = 2) {
-        //note: maxRunTimes is to force it to keep recalculating if the previous iteration caused a re-render (different sliced items in viewport or scrollPosition changed).
-        //The default of 2x max will probably be accurate enough without causing too large a performance bottleneck
-        //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;
-    }
-    minMeasuredChildWidth;
-    minMeasuredChildHeight;
-    wrapGroupDimensions;
-    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,
-        };
-    }
-    cachedPageSize = 0;
-    previousScrollNumberElements = 0;
-    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
-        };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VirtualScrollerComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: PLATFORM_ID }, { token: 'virtual-scroller-default-options', optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: VirtualScrollerComponent, selector: "virtual-scroller,[virtualScroller]", inputs: { disable: "disable", executeRefreshOutsideAngularZone: "executeRefreshOutsideAngularZone", enableUnequalChildrenSizes: "enableUnequalChildrenSizes", RTL: "RTL", useMarginInsteadOfTranslate: "useMarginInsteadOfTranslate", modifyOverflowStyleOfParentScroll: "modifyOverflowStyleOfParentScroll", stripedTable: "stripedTable", scrollbarWidth: "scrollbarWidth", scrollbarHeight: "scrollbarHeight", childWidth: "childWidth", childHeight: "childHeight", ssrChildWidth: "ssrChildWidth", ssrChildHeight: "ssrChildHeight", ssrViewportWidth: "ssrViewportWidth", ssrViewportHeight: "ssrViewportHeight", bufferAmount: "bufferAmount", scrollAnimationTime: "scrollAnimationTime", resizeBypassRefreshThreshold: "resizeBypassRefreshThreshold", scrollThrottlingTime: "scrollThrottlingTime", scrollDebounceTime: "scrollDebounceTime", checkResizeInterval: "checkResizeInterval", items: "items", compareItems: "compareItems", horizontal: "horizontal", parentScroll: "parentScroll" }, outputs: { vsChildRectChange: "vsChildRectChange", vsUpdate: "vsUpdate", vsChange: "vsChange", vsStart: "vsStart", vsEnd: "vsEnd" }, host: { properties: { "class.horizontal": "horizontal", "class.vertical": "!horizontal", "class.selfScroll": "!parentScroll", "class.rtl": "RTL" } }, queries: [{ propertyName: "headerElementRef", first: true, predicate: ["header"], descendants: true, read: ElementRef }, { propertyName: "containerElementRef", first: true, predicate: ["container"], descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "contentElementRef", first: true, predicate: ["content"], descendants: true, read: ElementRef, static: true }, { propertyName: "invisiblePaddingElementRef", first: true, predicate: ["invisiblePadding"], descendants: true, read: ElementRef, static: true }], exportAs: ["virtualScroller"], usesOnChanges: true, ngImport: i0, template: `
-    <div class="total-padding" #invisiblePadding></div>
-    <div class="scrollable-content" #content>
-      <ng-content></ng-content>
-    </div>
-  `, isInline: true, styles: [":host{position:relative;display:block;-webkit-overflow-scrolling:touch}:host.horizontal.selfScroll{overflow-y:visible;overflow-x:auto}:host.horizontal.selfScroll.rtl{transform:scaleX(-1)}:host.vertical.selfScroll{overflow-y:auto;overflow-x:visible}.scrollable-content{top:0;left:0;width:100%;height:100%;max-width:100vw;max-height:100vh;position:absolute}.scrollable-content ::ng-deep>*{box-sizing:border-box}:host.horizontal{white-space:nowrap}:host.horizontal .scrollable-content{display:flex}:host.horizontal .scrollable-content ::ng-deep>*{flex-shrink:0;flex-grow:0;white-space:initial}:host.horizontal.rtl .scrollable-content ::ng-deep>*{transform:scaleX(-1)}.total-padding{position:absolute;top:0;left:0;height:1px;width:1px;transform-origin:0 0;opacity:0}:host.horizontal .total-padding{height:100%}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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 {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VirtualScrollerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: VirtualScrollerModule, declarations: [VirtualScrollerComponent], imports: [CommonModule], exports: [VirtualScrollerComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VirtualScrollerModule, providers: [
-            {
-                provide: 'virtual-scroller-default-options',
-                useFactory: VIRTUAL_SCROLLER_DEFAULT_OPTIONS_FACTORY
-            }
-        ], imports: [CommonModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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 {
     selectionType;
     rows;
@@ -1377,7 +259,9 @@ class PepListComponent {
     loadItems = new EventEmitter();
     loadPage = new EventEmitter();
     startIndexChange = new EventEmitter();
-    virtualScroller;
+    // TODO Avner: Remove this when the virtual scroller is implemented
+    // @ViewChild(VirtualScrollerComponent) private virtualScroller: VirtualScrollerComponent;
+    virtualScroller = undefined;
     selectAllCB;
     _layout = null;
     get layout() {
@@ -2550,13 +1434,13 @@ class PepListComponent {
             return false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepListComponent, deps: [{ token: i0.ElementRef }, { token: i1.PepLayoutService }, { token: i1.PepSessionService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PepListComponent, selector: "pep-list", inputs: { sorting: "sorting", cacheSize: "cacheSize", noDataFoundMsg: "noDataFoundMsg", selectionTypeForActions: "selectionTypeForActions", showCardSelection: "showCardSelection", hideAllSelectionInMulti: "hideAllSelectionInMulti", cardSize: "cardSize", tableViewType: "tableViewType", viewType: "viewType", firstFieldAsLink: "firstFieldAsLink", supportSorting: "supportSorting", supportSortingFields: "supportSortingFields", supportResizing: "supportResizing", parentScroll: "parentScroll", disabled: "disabled", lockEvents: "lockEvents", lockItemInnerEvents: "lockItemInnerEvents", printMode: "printMode", isReport: "isReport", zebraStripes: "zebraStripes", totalsRow: "totalsRow", pagerType: "pagerType", pageSize: "pageSize", pageIndex: "pageIndex", bufferAmount: "bufferAmount", scrollAnimationTime: "scrollAnimationTime", scrollDebounceTime: "scrollDebounceTime", scrollThrottlingTime: "scrollThrottlingTime", SEPARATOR: "SEPARATOR", useAsWebComponent: "useAsWebComponent" }, outputs: { itemClick: "itemClick", fieldClick: "fieldClick", valueChange: "valueChange", sortingChange: "sortingChange", selectedItemsChange: "selectedItemsChange", selectedItemChange: "selectedItemChange", selectAllClick: "selectAllClick", listLoad: "listLoad", loadItems: "loadItems", loadPage: "loadPage", startIndexChange: "startIndexChange" }, host: { listeners: { "window:resize": "onWinResize($event)" } }, viewQueries: [{ propertyName: "listContainerResizableElementRef", first: true, predicate: ["listContainerResizable"], descendants: true, read: ElementRef }, { propertyName: "virtualScroller", first: true, predicate: VirtualScrollerComponent, descendants: true }, { propertyName: "selectAllCB", first: true, predicate: ["selectAllCB"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"totalRows == 0\">\n    <ng-container *ngIf=\"noDataFoundMsg; then noDataMsgInputBlock; else noDataMsgDefaultBlock\"></ng-container>\n    <ng-template #noDataMsgInputBlock>\n        <div class=\"pep-border-bottom\">\n            <p class=\"title-xl no-data\">\n                {{ noDataFoundMsg }}\n            </p>\n        </div>\n    </ng-template>\n    <ng-template #noDataMsgDefaultBlock>\n        <div class=\"pep-border-bottom\">\n            <p class=\"title-xl no-data\">\n                {{ 'LIST.NO_DATA_FOUND' | translate}}\n            </p>\n        </div>\n        <div class=\"no-data-suggestions\">\n            <p class=\"suggestions-title title-lg\">\n                {{ 'LIST.NO_DATA_FOUND_SUGGESTIONS_TITLE' | translate}}\n            </p>\n            <ul class=\"suggestions-list body-lg\" [innerHtml]=\"'LIST.NO_DATA_FOUND_SUGGESTIONS_LIST' | translate\"></ul>\n        </div>\n    </ng-template>\n</ng-container>\n<ng-container *ngIf=\"totalRows > 0\">\n    <div class=\"list-container\">\n        <div #listContainerResizable class=\"list-container-resizable\">\n            <ng-container *ngTemplateOutlet=\"tableHeader\"></ng-container>\n\n            <!-- (vsChildRectChange)=\"onChildRectChange($event)\" -->\n            <virtual-scroller #scroller [items]=\"pagerType === 'pages' ? currentPageItems : items\"\n                [scrollDebounceTime]=\"scrollDebounceTime\" [scrollThrottlingTime]=\"scrollThrottlingTime\"\n                [bufferAmount]=\"printMode ? totalRows : bufferAmount\" [parentScroll]=\"parentScroll\" [disable]=\"loadingItemsFromApi\"\n                class=\"virtual-scroller\" [ngClass]=\"{ 'table-body': isTable, 'cards-body': !isTable }\"\n                (vsChange)=\"onVirtualScrollerChange($event)\" >\n                <ng-container *ngFor=\"let item of scroller.viewPortItems; let index = index; let isFirst = first;\">\n                    <ng-container *ngTemplateOutlet=\"listData; context: {item: item, index:index}\"></ng-container>\n                </ng-container>\n            </virtual-scroller>\n            \n            <ng-container *ngTemplateOutlet=\"tableTotal\"></ng-container>\n        </div>\n    </div>\n    <pep-list-pager *ngIf=\"pagerType === 'pages'\" class=\" list-pager\" [disabled]=\"loadingItemsFromApi\"\n        [length]=\"totalRows\" [pageSize]=\"pageSize\" [pageIndex]=\"pageIndex\" (pagerChange)=\"onPagerChange($event)\">\n    </pep-list-pager>\n</ng-container>\n\n<ng-template #listData let-item=\"item\" let-index=\"index\">\n    <ng-container *ngIf=\"isTable\">\n        <!-- getIsItemSelected(item) -> item | isItemSelected: selectionTypeForActions : selectedItemId : isAllSelected : selectedItems : unSelectedItems -->\n        <div class=\"table-row\" (mouseenter)=\"onTableRowMouseEnter($event, item?.UID, item?.Type)\" (keydown)=\"onTabKeydown($event, item?.UID, item?.Type)\"\n            (mouseleave)=\"onTableRowMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\n                'compact-view': tableViewType === 'compact',\n                even: zebraStripes && index % 2 !== 0,\n                selected: getIsItemSelected(item),\n                highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId}\" [ngStyle]=\"{ visibility: !loadingItemsFromApi || item ? 'visible' : 'hidden' }\">\n            <fieldset class=\"table-row-fieldset\" [ngStyle]=\"{ 'background-color': item?.BackgroundColor }\">\n                <mat-checkbox *ngIf=\"selectionTypeForActions == 'multi'\" type=\"checkbox\"\n                    class=\"pull-left flip row-selection\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n                    [disabled]=\"false && getisItemDisabled(item)\" [ngStyle]=\"{\n                            visibility: !deviceHasMouse ||\n                            item?.UID + SEPARATOR + item?.Type === hoveredItemId || isAllSelected || selectedItems.size > 0 ? 'visible' : 'hidden'\n                        }\" [checked]=\"getIsItemSelected(item)\"\n                    (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n                </mat-checkbox>\n                <mat-radio-button *ngIf=\"selectionTypeForActions == 'single'\" name=\"selection\"\n                    class=\"pull-left flip row-selection pep-radio-button\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n                    [disabled]=\"getisItemDisabled(item)\"\n                    [checked]=\"getIsItemSelected(item)\"\n                    (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n                </mat-radio-button>\n                <pep-form [layoutType]=\"'table'\" [checkForChanges]=\"checkForChanges\" [layout]=\"layout\"\n                    [firstFieldAsLink]=\"firstFieldAsLink\" [data]=\"item\" [canEditObject]=\"!disabled\"\n                    [lockEvents]=\"lockItemInnerEvents || printMode\" [isReport]=\"isReport\" [isActive]=\"\n                            (item?.UID + SEPARATOR + item?.Type === selectedItemId ||\n                            item?.UID + SEPARATOR + item?.Type === hoveredItemId) && deviceHasMouse\n                        \" (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\"\n                    (click)=\"itemClicked($event, item)\">\n                </pep-form>\n            </fieldset>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!isTable\">\n        <div (mouseenter)=\"onCardMouseEnter($event, item?.UID, item?.Type)\"\n            (mouseleave)=\"onCardMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\n                    selected: getIsItemSelected(item),\n                    highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId,\n                    'line-view': viewType === 'lines',\n                    'card-view': viewType === 'cards',\n                    'small-card': cardSize === 'sm'\n                }\" class=\"pull-left flip\"\n            [ngStyle]=\"{ height: calculatedObjectHeight, visibility: !loadingItemsFromApi || item ? 'visible' : 'hidden' }\">\n            <mat-checkbox *ngIf=\"showCardSelection\" class=\"pull-left flip card-selection\"\n                [disabled]=\"getisItemDisabled(item)\" [checked]=\"getIsItemSelected(item)\"\n                (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n            </mat-checkbox>\n            <pep-form [layoutType]=\"'card'\" [firstFieldAsLink]=\"firstFieldAsLink\" [checkForChanges]=\"checkForChanges\"\n                [layout]=\"layout\" [data]=\"item\" [canEditObject]=\"!disabled\"\n                [lockEvents]=\"lockItemInnerEvents || printMode\" [isActive]=\"\n                        (item?.UID + SEPARATOR + item?.Type === selectedItemId ||\n                        item?.UID + SEPARATOR + item?.Type === hoveredItemId) && deviceHasMouse\n                    \" (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\"\n                (click)=\"itemClicked($event, item)\">\n            </pep-form>\n        </div>\n    </ng-container>\n</ng-template>\n\n<ng-template #tableHeader>\n    <div *ngIf=\"isTable\" class=\"table-header\" (mouseup)=\"onListResizeEnd($event)\"\n        (mouseenter)=\"onListHeaderMouseEnter($event)\" (mouseleave)=\"onListHeaderMouseLeave($event)\"\n        (mousemove)=\"onListResize($event)\">\n\n        <div class=\"table-header-padding-top\"></div>\n        <fieldset class=\"table-header-fieldset\">\n            <mat-checkbox *ngIf=\"selectionTypeForActions !== 'none'\" #selectAllCB class=\"pull-left flip row-selection\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n                type=\"checkbox\" [ngStyle]=\"{\n                        visibility:\n                            selectionTypeForActions == 'single' || \n                            (selectionTypeForActions == 'multi' && hideAllSelectionInMulti) ? 'hidden' : 'visible'\n                    }\"\n                [indeterminate]=\"isAllSelected ? unSelectedItems.size > 0 && unSelectedItems.size < totalRows : (selectedItems.size > 0 && !getIsAllSelectedForActions())\"\n                [disabled]=\"disabled || selectionTypeForActions === 'single'\" [checked]=\"getIsAllSelectedForActions()\"\n                (change)=\"selectAllItemsForActions($event)\"></mat-checkbox>\n            <fieldset>\n                <div *ngFor=\"let field of layout?.ControlFields; let j = index\" class=\"header-column pull-left flip\"\n                    [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\" [ngClass]=\"{\n                            'compact-view': tableViewType === 'compact',\n                            'support-sorting': isSortableColumn(field.ApiName),\n                            'has-sorting': field.ApiName === sortBy,\n                            'is-resizing': field.ApiName === pressedColumn,\n                            'is-first': j === 0 && selectionTypeForActions !== 'multi',\n                            'is-last': j === layout?.ControlFields?.length - 1\n                        }\"\n                    (click)=\"isSortableColumn(field.ApiName) ? (onListSortingChange(field.ApiName, sortBy !== null && sortBy != field.ApiName ? true : !isAsc, $event)) : false\">\n\n                    <label id=\"{{ field.ApiName }}\"\n                        class=\"header-label body-sm pull-left flip text-align-{{ field.Layout.XAlignment }}\"\n                        title=\"{{ field.Title }}\">\n                        <span *ngIf=\"field.Mandatory\" class=\"mandatory\">\n                            <pep-icon name=\"system_must\"></pep-icon>\n                        </span>\n                        {{ field.Title != '' ? field.Title : ' '}}\n                    </label>\n\n                    <div *ngIf=\"supportResizing\" class=\"resize-box pull-right flip\"\n                        (mousedown)=\"onListResizeStart($event, field.ApiName, j)\">\n                        <div class=\"splitter\"></div>\n                    </div>\n\n                    <div *ngIf=\"isSortableColumn(field.ApiName)\" class=\"sorting-box pull-left flip\"\n                        [ngClass]=\"{ 'has-sorting': field.ApiName === sortBy }\">\n                        <mat-icon *ngIf=\"field.ApiName !== sortBy\">\n                            <pep-icon name=\"arrow_either\" class=\"asc\"></pep-icon>\n                        </mat-icon>\n                        <ng-container *ngIf=\"field.ApiName === sortBy\">\n                            <mat-icon *ngIf=\"!isAsc\" [ngClass]=\"{ 'sort-by': field.ApiName === sortBy && isAsc }\"\n                                title=\"{{ 'LIST.SORT_ASC' | translate }}\">\n                                <pep-icon name=\"arrow_up\" class=\"asc\"></pep-icon>\n                            </mat-icon>\n                            <mat-icon *ngIf=\"isAsc\" [ngClass]=\"{ 'sort-by': field.ApiName === sortBy && !isAsc }\"\n                                title=\"{{ 'LIST.SORT_DESC' | translate }}\">\n                                <pep-icon name=\"arrow_down\" class=\"desc\"></pep-icon>\n                            </mat-icon>\n                        </ng-container>\n                    </div>\n                </div>\n            </fieldset>\n        </fieldset>\n    </div>\n</ng-template>\n\n<ng-template #tableTotal>\n    <div *ngIf=\"isTable && totalsRow?.length > 0 && totalsRow.length <= layout?.ControlFields.length\"\n        class=\"table-total\">\n        <fieldset class=\"table-header-fieldset\">\n            <div *ngFor=\"let field of layout?.ControlFields; let j = index\" class=\"total-column pull-left flip\"\n                [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\">\n                <label class=\"total-label body-sm text-align-{{ field.Layout.XAlignment }}\">\n                    {{ totalsRow[j] }}\n                </label>\n            </div>\n        </fieldset>\n    </div>\n</ng-template>", styles: [":host{width:100%;height:inherit;display:flex;flex-direction:column}:host .list-container{display:flex;flex-direction:column;height:inherit;width:100%;overflow:auto}:host .list-container .list-container-resizable{display:flex;flex-direction:column;height:inherit}.no-data{margin:var(--pep-spacing-2xl, 2rem) 0}.no-data-suggestions .suggestions-title{margin:var(--pep-spacing-lg, 1rem) 0 var(--pep-spacing-sm, .5rem)}.no-data-suggestions .suggestions-list{margin:0;padding:0;padding-inline-start:var(--pep-spacing-2xl, 2rem)}.virtual-scroller{min-height:5rem;height:inherit}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4$1.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i7.PepFormComponent, selector: "pep-form", inputs: ["isInternal", "isReport", "layout", "lockEvents", "canEditObject", "data", "lockFields", "isActive", "layoutType", "objectId", "parentId", "searchCode", "showTitle", "firstFieldAsLink", "checkForChanges"], outputs: ["valueChange", "formValidationChange", "fieldClick", "internalFormFieldClick", "internalFormFieldChange"] }, { kind: "component", type: VirtualScrollerComponent, selector: "virtual-scroller,[virtualScroller]", inputs: ["disable", "executeRefreshOutsideAngularZone", "enableUnequalChildrenSizes", "RTL", "useMarginInsteadOfTranslate", "modifyOverflowStyleOfParentScroll", "stripedTable", "scrollbarWidth", "scrollbarHeight", "childWidth", "childHeight", "ssrChildWidth", "ssrChildHeight", "ssrViewportWidth", "ssrViewportHeight", "bufferAmount", "scrollAnimationTime", "resizeBypassRefreshThreshold", "scrollThrottlingTime", "scrollDebounceTime", "checkResizeInterval", "items", "compareItems", "horizontal", "parentScroll"], outputs: ["vsChildRectChange", "vsUpdate", "vsChange", "vsStart", "vsEnd"], exportAs: ["virtualScroller"] }, { kind: "component", type: PepListPagerComponent, selector: "pep-list-pager", inputs: ["disabled", "pageIndex", "length", "pageSize"], outputs: ["pagerChange"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PepListComponent, selector: "pep-list", inputs: { sorting: "sorting", cacheSize: "cacheSize", noDataFoundMsg: "noDataFoundMsg", selectionTypeForActions: "selectionTypeForActions", showCardSelection: "showCardSelection", hideAllSelectionInMulti: "hideAllSelectionInMulti", cardSize: "cardSize", tableViewType: "tableViewType", viewType: "viewType", firstFieldAsLink: "firstFieldAsLink", supportSorting: "supportSorting", supportSortingFields: "supportSortingFields", supportResizing: "supportResizing", parentScroll: "parentScroll", disabled: "disabled", lockEvents: "lockEvents", lockItemInnerEvents: "lockItemInnerEvents", printMode: "printMode", isReport: "isReport", zebraStripes: "zebraStripes", totalsRow: "totalsRow", pagerType: "pagerType", pageSize: "pageSize", pageIndex: "pageIndex", bufferAmount: "bufferAmount", scrollAnimationTime: "scrollAnimationTime", scrollDebounceTime: "scrollDebounceTime", scrollThrottlingTime: "scrollThrottlingTime", SEPARATOR: "SEPARATOR", useAsWebComponent: "useAsWebComponent" }, outputs: { itemClick: "itemClick", fieldClick: "fieldClick", valueChange: "valueChange", sortingChange: "sortingChange", selectedItemsChange: "selectedItemsChange", selectedItemChange: "selectedItemChange", selectAllClick: "selectAllClick", listLoad: "listLoad", loadItems: "loadItems", loadPage: "loadPage", startIndexChange: "startIndexChange" }, host: { listeners: { "window:resize": "onWinResize($event)" } }, viewQueries: [{ propertyName: "listContainerResizableElementRef", first: true, predicate: ["listContainerResizable"], descendants: true, read: ElementRef }, { propertyName: "selectAllCB", first: true, predicate: ["selectAllCB"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"totalRows == 0\">\n    <ng-container *ngIf=\"noDataFoundMsg; then noDataMsgInputBlock; else noDataMsgDefaultBlock\"></ng-container>\n    <ng-template #noDataMsgInputBlock>\n        <div class=\"pep-border-bottom\">\n            <p class=\"title-xl no-data\">\n                {{ noDataFoundMsg }}\n            </p>\n        </div>\n    </ng-template>\n    <ng-template #noDataMsgDefaultBlock>\n        <div class=\"pep-border-bottom\">\n            <p class=\"title-xl no-data\">\n                {{ 'LIST.NO_DATA_FOUND' | translate}}\n            </p>\n        </div>\n        <div class=\"no-data-suggestions\">\n            <p class=\"suggestions-title title-lg\">\n                {{ 'LIST.NO_DATA_FOUND_SUGGESTIONS_TITLE' | translate}}\n            </p>\n            <ul class=\"suggestions-list body-lg\" [innerHtml]=\"'LIST.NO_DATA_FOUND_SUGGESTIONS_LIST' | translate\"></ul>\n        </div>\n    </ng-template>\n</ng-container>\n<ng-container *ngIf=\"totalRows > 0\">\n    <div class=\"list-container\">\n        <div #listContainerResizable class=\"list-container-resizable\">\n            <ng-container *ngTemplateOutlet=\"tableHeader\"></ng-container>\n\n            <!-- (vsChildRectChange)=\"onChildRectChange($event)\" -->\n            <!-- <virtual-scroller #scroller [items]=\"pagerType === 'pages' ? currentPageItems : items\"\n                [scrollDebounceTime]=\"scrollDebounceTime\" [scrollThrottlingTime]=\"scrollThrottlingTime\"\n                [bufferAmount]=\"printMode ? totalRows : bufferAmount\" [parentScroll]=\"parentScroll\" [disable]=\"loadingItemsFromApi\"\n                class=\"virtual-scroller\" [ngClass]=\"{ 'table-body': isTable, 'cards-body': !isTable }\"\n                (vsChange)=\"onVirtualScrollerChange($event)\" >\n                <ng-container *ngFor=\"let item of scroller.viewPortItems; let index = index; let isFirst = first;\">\n                    <ng-container *ngTemplateOutlet=\"listData; context: {item: item, index:index}\"></ng-container>\n                </ng-container>\n            </virtual-scroller> -->\n            \n            <ng-container *ngTemplateOutlet=\"tableTotal\"></ng-container>\n        </div>\n    </div>\n    <pep-list-pager *ngIf=\"pagerType === 'pages'\" class=\" list-pager\" [disabled]=\"loadingItemsFromApi\"\n        [length]=\"totalRows\" [pageSize]=\"pageSize\" [pageIndex]=\"pageIndex\" (pagerChange)=\"onPagerChange($event)\">\n    </pep-list-pager>\n</ng-container>\n\n<ng-template #listData let-item=\"item\" let-index=\"index\">\n    <ng-container *ngIf=\"isTable\">\n        <!-- getIsItemSelected(item) -> item | isItemSelected: selectionTypeForActions : selectedItemId : isAllSelected : selectedItems : unSelectedItems -->\n        <div class=\"table-row\" (mouseenter)=\"onTableRowMouseEnter($event, item?.UID, item?.Type)\" (keydown)=\"onTabKeydown($event, item?.UID, item?.Type)\"\n            (mouseleave)=\"onTableRowMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\n                'compact-view': tableViewType === 'compact',\n                even: zebraStripes && index % 2 !== 0,\n                selected: getIsItemSelected(item),\n                highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId}\" [ngStyle]=\"{ visibility: !loadingItemsFromApi || item ? 'visible' : 'hidden' }\">\n            <fieldset class=\"table-row-fieldset\" [ngStyle]=\"{ 'background-color': item?.BackgroundColor }\">\n                <mat-checkbox *ngIf=\"selectionTypeForActions == 'multi'\" type=\"checkbox\"\n                    class=\"pull-left flip row-selection\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n                    [disabled]=\"false && getisItemDisabled(item)\" [ngStyle]=\"{\n                            visibility: !deviceHasMouse ||\n                            item?.UID + SEPARATOR + item?.Type === hoveredItemId || isAllSelected || selectedItems.size > 0 ? 'visible' : 'hidden'\n                        }\" [checked]=\"getIsItemSelected(item)\"\n                    (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n                </mat-checkbox>\n                <mat-radio-button *ngIf=\"selectionTypeForActions == 'single'\" name=\"selection\"\n                    class=\"pull-left flip row-selection pep-radio-button\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n                    [disabled]=\"getisItemDisabled(item)\"\n                    [checked]=\"getIsItemSelected(item)\"\n                    (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n                </mat-radio-button>\n                <pep-form [layoutType]=\"'table'\" [checkForChanges]=\"checkForChanges\" [layout]=\"layout\"\n                    [firstFieldAsLink]=\"firstFieldAsLink\" [data]=\"item\" [canEditObject]=\"!disabled\"\n                    [lockEvents]=\"lockItemInnerEvents || printMode\" [isReport]=\"isReport\" [isActive]=\"\n                            (item?.UID + SEPARATOR + item?.Type === selectedItemId ||\n                            item?.UID + SEPARATOR + item?.Type === hoveredItemId) && deviceHasMouse\n                        \" (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\"\n                    (click)=\"itemClicked($event, item)\">\n                </pep-form>\n            </fieldset>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!isTable\">\n        <div (mouseenter)=\"onCardMouseEnter($event, item?.UID, item?.Type)\"\n            (mouseleave)=\"onCardMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\n                    selected: getIsItemSelected(item),\n                    highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId,\n                    'line-view': viewType === 'lines',\n                    'card-view': viewType === 'cards',\n                    'small-card': cardSize === 'sm'\n                }\" class=\"pull-left flip\"\n            [ngStyle]=\"{ height: calculatedObjectHeight, visibility: !loadingItemsFromApi || item ? 'visible' : 'hidden' }\">\n            <mat-checkbox *ngIf=\"showCardSelection\" class=\"pull-left flip card-selection\"\n                [disabled]=\"getisItemDisabled(item)\" [checked]=\"getIsItemSelected(item)\"\n                (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n            </mat-checkbox>\n            <pep-form [layoutType]=\"'card'\" [firstFieldAsLink]=\"firstFieldAsLink\" [checkForChanges]=\"checkForChanges\"\n                [layout]=\"layout\" [data]=\"item\" [canEditObject]=\"!disabled\"\n                [lockEvents]=\"lockItemInnerEvents || printMode\" [isActive]=\"\n                        (item?.UID + SEPARATOR + item?.Type === selectedItemId ||\n                        item?.UID + SEPARATOR + item?.Type === hoveredItemId) && deviceHasMouse\n                    \" (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\"\n                (click)=\"itemClicked($event, item)\">\n            </pep-form>\n        </div>\n    </ng-container>\n</ng-template>\n\n<ng-template #tableHeader>\n    <div *ngIf=\"isTable\" class=\"table-header\" (mouseup)=\"onListResizeEnd($event)\"\n        (mouseenter)=\"onListHeaderMouseEnter($event)\" (mouseleave)=\"onListHeaderMouseLeave($event)\"\n        (mousemove)=\"onListResize($event)\">\n\n        <div class=\"table-header-padding-top\"></div>\n        <fieldset class=\"table-header-fieldset\">\n            <mat-checkbox *ngIf=\"selectionTypeForActions !== 'none'\" #selectAllCB class=\"pull-left flip row-selection\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n                type=\"checkbox\" [ngStyle]=\"{\n                        visibility:\n                            selectionTypeForActions == 'single' || \n                            (selectionTypeForActions == 'multi' && hideAllSelectionInMulti) ? 'hidden' : 'visible'\n                    }\"\n                [indeterminate]=\"isAllSelected ? unSelectedItems.size > 0 && unSelectedItems.size < totalRows : (selectedItems.size > 0 && !getIsAllSelectedForActions())\"\n                [disabled]=\"disabled || selectionTypeForActions === 'single'\" [checked]=\"getIsAllSelectedForActions()\"\n                (change)=\"selectAllItemsForActions($event)\"></mat-checkbox>\n            <fieldset>\n                <div *ngFor=\"let field of layout?.ControlFields; let j = index\" class=\"header-column pull-left flip\"\n                    [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\" [ngClass]=\"{\n                            'compact-view': tableViewType === 'compact',\n                            'support-sorting': isSortableColumn(field.ApiName),\n                            'has-sorting': field.ApiName === sortBy,\n                            'is-resizing': field.ApiName === pressedColumn,\n                            'is-first': j === 0 && selectionTypeForActions !== 'multi',\n                            'is-last': j === layout?.ControlFields?.length - 1\n                        }\"\n                    (click)=\"isSortableColumn(field.ApiName) ? (onListSortingChange(field.ApiName, sortBy !== null && sortBy != field.ApiName ? true : !isAsc, $event)) : false\">\n\n                    <label id=\"{{ field.ApiName }}\"\n                        class=\"header-label body-sm pull-left flip text-align-{{ field.Layout.XAlignment }}\"\n                        title=\"{{ field.Title }}\">\n                        <span *ngIf=\"field.Mandatory\" class=\"mandatory\">\n                            <pep-icon name=\"system_must\"></pep-icon>\n                        </span>\n                        {{ field.Title != '' ? field.Title : ' '}}\n                    </label>\n\n                    <div *ngIf=\"supportResizing\" class=\"resize-box pull-right flip\"\n                        (mousedown)=\"onListResizeStart($event, field.ApiName, j)\">\n                        <div class=\"splitter\"></div>\n                    </div>\n\n                    <div *ngIf=\"isSortableColumn(field.ApiName)\" class=\"sorting-box pull-left flip\"\n                        [ngClass]=\"{ 'has-sorting': field.ApiName === sortBy }\">\n                        <mat-icon *ngIf=\"field.ApiName !== sortBy\">\n                            <pep-icon name=\"arrow_either\" class=\"asc\"></pep-icon>\n                        </mat-icon>\n                        <ng-container *ngIf=\"field.ApiName === sortBy\">\n                            <mat-icon *ngIf=\"!isAsc\" [ngClass]=\"{ 'sort-by': field.ApiName === sortBy && isAsc }\"\n                                title=\"{{ 'LIST.SORT_ASC' | translate }}\">\n                                <pep-icon name=\"arrow_up\" class=\"asc\"></pep-icon>\n                            </mat-icon>\n                            <mat-icon *ngIf=\"isAsc\" [ngClass]=\"{ 'sort-by': field.ApiName === sortBy && !isAsc }\"\n                                title=\"{{ 'LIST.SORT_DESC' | translate }}\">\n                                <pep-icon name=\"arrow_down\" class=\"desc\"></pep-icon>\n                            </mat-icon>\n                        </ng-container>\n                    </div>\n                </div>\n            </fieldset>\n        </fieldset>\n    </div>\n</ng-template>\n\n<ng-template #tableTotal>\n    <div *ngIf=\"isTable && totalsRow?.length > 0 && totalsRow.length <= layout?.ControlFields.length\"\n        class=\"table-total\">\n        <fieldset class=\"table-header-fieldset\">\n            <div *ngFor=\"let field of layout?.ControlFields; let j = index\" class=\"total-column pull-left flip\"\n                [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\">\n                <label class=\"total-label body-sm text-align-{{ field.Layout.XAlignment }}\">\n                    {{ totalsRow[j] }}\n                </label>\n            </div>\n        </fieldset>\n    </div>\n</ng-template>", styles: [":host{width:100%;height:inherit;display:flex;flex-direction:column}:host .list-container{display:flex;flex-direction:column;height:inherit;width:100%;overflow:auto}:host .list-container .list-container-resizable{display:flex;flex-direction:column;height:inherit}.no-data{margin:var(--pep-spacing-2xl, 2rem) 0}.no-data-suggestions .suggestions-title{margin:var(--pep-spacing-lg, 1rem) 0 var(--pep-spacing-sm, .5rem)}.no-data-suggestions .suggestions-list{margin:0;padding:0;padding-inline-start:var(--pep-spacing-2xl, 2rem)}.virtual-scroller{min-height:5rem;height:inherit}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4$1.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i7.PepFormComponent, selector: "pep-form", inputs: ["isInternal", "isReport", "layout", "lockEvents", "canEditObject", "data", "lockFields", "isActive", "layoutType", "objectId", "parentId", "searchCode", "showTitle", "firstFieldAsLink", "checkForChanges"], outputs: ["valueChange", "formValidationChange", "fieldClick", "internalFormFieldClick", "internalFormFieldChange"] }, { kind: "component", type: 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: "16.2.12", 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    <div class=\"list-container\">\n        <div #listContainerResizable class=\"list-container-resizable\">\n            <ng-container *ngTemplateOutlet=\"tableHeader\"></ng-container>\n\n            <!-- (vsChildRectChange)=\"onChildRectChange($event)\" -->\n            <virtual-scroller #scroller [items]=\"pagerType === 'pages' ? currentPageItems : items\"\n                [scrollDebounceTime]=\"scrollDebounceTime\" [scrollThrottlingTime]=\"scrollThrottlingTime\"\n                [bufferAmount]=\"printMode ? totalRows : bufferAmount\" [parentScroll]=\"parentScroll\" [disable]=\"loadingItemsFromApi\"\n                class=\"virtual-scroller\" [ngClass]=\"{ 'table-body': isTable, 'cards-body': !isTable }\"\n                (vsChange)=\"onVirtualScrollerChange($event)\" >\n                <ng-container *ngFor=\"let item of scroller.viewPortItems; let index = index; let isFirst = first;\">\n                    <ng-container *ngTemplateOutlet=\"listData; context: {item: item, index:index}\"></ng-container>\n                </ng-container>\n            </virtual-scroller>\n            \n            <ng-container *ngTemplateOutlet=\"tableTotal\"></ng-container>\n        </div>\n    </div>\n    <pep-list-pager *ngIf=\"pagerType === 'pages'\" class=\" list-pager\" [disabled]=\"loadingItemsFromApi\"\n        [length]=\"totalRows\" [pageSize]=\"pageSize\" [pageIndex]=\"pageIndex\" (pagerChange)=\"onPagerChange($event)\">\n    </pep-list-pager>\n</ng-container>\n\n<ng-template #listData let-item=\"item\" let-index=\"index\">\n    <ng-container *ngIf=\"isTable\">\n        <!-- getIsItemSelected(item) -> item | isItemSelected: selectionTypeForActions : selectedItemId : isAllSelected : selectedItems : unSelectedItems -->\n        <div class=\"table-row\" (mouseenter)=\"onTableRowMouseEnter($event, item?.UID, item?.Type)\" (keydown)=\"onTabKeydown($event, item?.UID, item?.Type)\"\n            (mouseleave)=\"onTableRowMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\n                'compact-view': tableViewType === 'compact',\n                even: zebraStripes && index % 2 !== 0,\n                selected: getIsItemSelected(item),\n                highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId}\" [ngStyle]=\"{ visibility: !loadingItemsFromApi || item ? 'visible' : 'hidden' }\">\n            <fieldset class=\"table-row-fieldset\" [ngStyle]=\"{ 'background-color': item?.BackgroundColor }\">\n                <mat-checkbox *ngIf=\"selectionTypeForActions == 'multi'\" type=\"checkbox\"\n                    class=\"pull-left flip row-selection\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n                    [disabled]=\"false && getisItemDisabled(item)\" [ngStyle]=\"{\n                            visibility: !deviceHasMouse ||\n                            item?.UID + SEPARATOR + item?.Type === hoveredItemId || isAllSelected || selectedItems.size > 0 ? 'visible' : 'hidden'\n                        }\" [checked]=\"getIsItemSelected(item)\"\n                    (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n                </mat-checkbox>\n                <mat-radio-button *ngIf=\"selectionTypeForActions == 'single'\" name=\"selection\"\n                    class=\"pull-left flip row-selection pep-radio-button\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n                    [disabled]=\"getisItemDisabled(item)\"\n                    [checked]=\"getIsItemSelected(item)\"\n                    (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n                </mat-radio-button>\n                <pep-form [layoutType]=\"'table'\" [checkForChanges]=\"checkForChanges\" [layout]=\"layout\"\n                    [firstFieldAsLink]=\"firstFieldAsLink\" [data]=\"item\" [canEditObject]=\"!disabled\"\n                    [lockEvents]=\"lockItemInnerEvents || printMode\" [isReport]=\"isReport\" [isActive]=\"\n                            (item?.UID + SEPARATOR + item?.Type === selectedItemId ||\n                            item?.UID + SEPARATOR + item?.Type === hoveredItemId) && deviceHasMouse\n                        \" (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\"\n                    (click)=\"itemClicked($event, item)\">\n                </pep-form>\n            </fieldset>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!isTable\">\n        <div (mouseenter)=\"onCardMouseEnter($event, item?.UID, item?.Type)\"\n            (mouseleave)=\"onCardMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\n                    selected: getIsItemSelected(item),\n                    highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId,\n                    'line-view': viewType === 'lines',\n                    'card-view': viewType === 'cards',\n                    'small-card': cardSize === 'sm'\n                }\" class=\"pull-left flip\"\n            [ngStyle]=\"{ height: calculatedObjectHeight, visibility: !loadingItemsFromApi || item ? 'visible' : 'hidden' }\">\n            <mat-checkbox *ngIf=\"showCardSelection\" class=\"pull-left flip card-selection\"\n                [disabled]=\"getisItemDisabled(item)\" [checked]=\"getIsItemSelected(item)\"\n                (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n            </mat-checkbox>\n            <pep-form [layoutType]=\"'card'\" [firstFieldAsLink]=\"firstFieldAsLink\" [checkForChanges]=\"checkForChanges\"\n                [layout]=\"layout\" [data]=\"item\" [canEditObject]=\"!disabled\"\n                [lockEvents]=\"lockItemInnerEvents || printMode\" [isActive]=\"\n                        (item?.UID + SEPARATOR + item?.Type === selectedItemId ||\n                        item?.UID + SEPARATOR + item?.Type === hoveredItemId) && deviceHasMouse\n                    \" (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\"\n                (click)=\"itemClicked($event, item)\">\n            </pep-form>\n        </div>\n    </ng-container>\n</ng-template>\n\n<ng-template #tableHeader>\n    <div *ngIf=\"isTable\" class=\"table-header\" (mouseup)=\"onListResizeEnd($event)\"\n        (mouseenter)=\"onListHeaderMouseEnter($event)\" (mouseleave)=\"onListHeaderMouseLeave($event)\"\n        (mousemove)=\"onListResize($event)\">\n\n        <div class=\"table-header-padding-top\"></div>\n        <fieldset class=\"table-header-fieldset\">\n            <mat-checkbox *ngIf=\"selectionTypeForActions !== 'none'\" #selectAllCB class=\"pull-left flip row-selection\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n                type=\"checkbox\" [ngStyle]=\"{\n                        visibility:\n                            selectionTypeForActions == 'single' || \n                            (selectionTypeForActions == 'multi' && hideAllSelectionInMulti) ? 'hidden' : 'visible'\n                    }\"\n                [indeterminate]=\"isAllSelected ? unSelectedItems.size > 0 && unSelectedItems.size < totalRows : (selectedItems.size > 0 && !getIsAllSelectedForActions())\"\n                [disabled]=\"disabled || selectionTypeForActions === 'single'\" [checked]=\"getIsAllSelectedForActions()\"\n                (change)=\"selectAllItemsForActions($event)\"></mat-checkbox>\n            <fieldset>\n                <div *ngFor=\"let field of layout?.ControlFields; let j = index\" class=\"header-column pull-left flip\"\n                    [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\" [ngClass]=\"{\n                            'compact-view': tableViewType === 'compact',\n                            'support-sorting': isSortableColumn(field.ApiName),\n                            'has-sorting': field.ApiName === sortBy,\n                            'is-resizing': field.ApiName === pressedColumn,\n                            'is-first': j === 0 && selectionTypeForActions !== 'multi',\n                            'is-last': j === layout?.ControlFields?.length - 1\n                        }\"\n                    (click)=\"isSortableColumn(field.ApiName) ? (onListSortingChange(field.ApiName, sortBy !== null && sortBy != field.ApiName ? true : !isAsc, $event)) : false\">\n\n                    <label id=\"{{ field.ApiName }}\"\n                        class=\"header-label body-sm pull-left flip text-align-{{ field.Layout.XAlignment }}\"\n                        title=\"{{ field.Title }}\">\n                        <span *ngIf=\"field.Mandatory\" class=\"mandatory\">\n                            <pep-icon name=\"system_must\"></pep-icon>\n                        </span>\n                        {{ field.Title != '' ? field.Title : ' '}}\n                    </label>\n\n                    <div *ngIf=\"supportResizing\" class=\"resize-box pull-right flip\"\n                        (mousedown)=\"onListResizeStart($event, field.ApiName, j)\">\n                        <div class=\"splitter\"></div>\n                    </div>\n\n                    <div *ngIf=\"isSortableColumn(field.ApiName)\" class=\"sorting-box pull-left flip\"\n                        [ngClass]=\"{ 'has-sorting': field.ApiName === sortBy }\">\n                        <mat-icon *ngIf=\"field.ApiName !== sortBy\">\n                            <pep-icon name=\"arrow_either\" class=\"asc\"></pep-icon>\n                        </mat-icon>\n                        <ng-container *ngIf=\"field.ApiName === sortBy\">\n                            <mat-icon *ngIf=\"!isAsc\" [ngClass]=\"{ 'sort-by': field.ApiName === sortBy && isAsc }\"\n                                title=\"{{ 'LIST.SORT_ASC' | translate }}\">\n                                <pep-icon name=\"arrow_up\" class=\"asc\"></pep-icon>\n                            </mat-icon>\n                            <mat-icon *ngIf=\"isAsc\" [ngClass]=\"{ 'sort-by': field.ApiName === sortBy && !isAsc }\"\n                                title=\"{{ 'LIST.SORT_DESC' | translate }}\">\n                                <pep-icon name=\"arrow_down\" class=\"desc\"></pep-icon>\n                            </mat-icon>\n                        </ng-container>\n                    </div>\n                </div>\n            </fieldset>\n        </fieldset>\n    </div>\n</ng-template>\n\n<ng-template #tableTotal>\n    <div *ngIf=\"isTable && totalsRow?.length > 0 && totalsRow.length <= layout?.ControlFields.length\"\n        class=\"table-total\">\n        <fieldset class=\"table-header-fieldset\">\n            <div *ngFor=\"let field of layout?.ControlFields; let j = index\" class=\"total-column pull-left flip\"\n                [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\">\n                <label class=\"total-label body-sm text-align-{{ field.Layout.XAlignment }}\">\n                    {{ totalsRow[j] }}\n                </label>\n            </div>\n        </fieldset>\n    </div>\n</ng-template>", styles: [":host{width:100%;height:inherit;display:flex;flex-direction:column}:host .list-container{display:flex;flex-direction:column;height:inherit;width:100%;overflow:auto}:host .list-container .list-container-resizable{display:flex;flex-direction:column;height:inherit}.no-data{margin:var(--pep-spacing-2xl, 2rem) 0}.no-data-suggestions .suggestions-title{margin:var(--pep-spacing-lg, 1rem) 0 var(--pep-spacing-sm, .5rem)}.no-data-suggestions .suggestions-list{margin:0;padding:0;padding-inline-start:var(--pep-spacing-2xl, 2rem)}.virtual-scroller{min-height:5rem;height:inherit}\n"] }]
+                    }, template: "<ng-container *ngIf=\"totalRows == 0\">\n    <ng-container *ngIf=\"noDataFoundMsg; then noDataMsgInputBlock; else noDataMsgDefaultBlock\"></ng-container>\n    <ng-template #noDataMsgInputBlock>\n        <div class=\"pep-border-bottom\">\n            <p class=\"title-xl no-data\">\n                {{ noDataFoundMsg }}\n            </p>\n        </div>\n    </ng-template>\n    <ng-template #noDataMsgDefaultBlock>\n        <div class=\"pep-border-bottom\">\n            <p class=\"title-xl no-data\">\n                {{ 'LIST.NO_DATA_FOUND' | translate}}\n            </p>\n        </div>\n        <div class=\"no-data-suggestions\">\n            <p class=\"suggestions-title title-lg\">\n                {{ 'LIST.NO_DATA_FOUND_SUGGESTIONS_TITLE' | translate}}\n            </p>\n            <ul class=\"suggestions-list body-lg\" [innerHtml]=\"'LIST.NO_DATA_FOUND_SUGGESTIONS_LIST' | translate\"></ul>\n        </div>\n    </ng-template>\n</ng-container>\n<ng-container *ngIf=\"totalRows > 0\">\n    <div class=\"list-container\">\n        <div #listContainerResizable class=\"list-container-resizable\">\n            <ng-container *ngTemplateOutlet=\"tableHeader\"></ng-container>\n\n            <!-- (vsChildRectChange)=\"onChildRectChange($event)\" -->\n            <!-- <virtual-scroller #scroller [items]=\"pagerType === 'pages' ? currentPageItems : items\"\n                [scrollDebounceTime]=\"scrollDebounceTime\" [scrollThrottlingTime]=\"scrollThrottlingTime\"\n                [bufferAmount]=\"printMode ? totalRows : bufferAmount\" [parentScroll]=\"parentScroll\" [disable]=\"loadingItemsFromApi\"\n                class=\"virtual-scroller\" [ngClass]=\"{ 'table-body': isTable, 'cards-body': !isTable }\"\n                (vsChange)=\"onVirtualScrollerChange($event)\" >\n                <ng-container *ngFor=\"let item of scroller.viewPortItems; let index = index; let isFirst = first;\">\n                    <ng-container *ngTemplateOutlet=\"listData; context: {item: item, index:index}\"></ng-container>\n                </ng-container>\n            </virtual-scroller> -->\n            \n            <ng-container *ngTemplateOutlet=\"tableTotal\"></ng-container>\n        </div>\n    </div>\n    <pep-list-pager *ngIf=\"pagerType === 'pages'\" class=\" list-pager\" [disabled]=\"loadingItemsFromApi\"\n        [length]=\"totalRows\" [pageSize]=\"pageSize\" [pageIndex]=\"pageIndex\" (pagerChange)=\"onPagerChange($event)\">\n    </pep-list-pager>\n</ng-container>\n\n<ng-template #listData let-item=\"item\" let-index=\"index\">\n    <ng-container *ngIf=\"isTable\">\n        <!-- getIsItemSelected(item) -> item | isItemSelected: selectionTypeForActions : selectedItemId : isAllSelected : selectedItems : unSelectedItems -->\n        <div class=\"table-row\" (mouseenter)=\"onTableRowMouseEnter($event, item?.UID, item?.Type)\" (keydown)=\"onTabKeydown($event, item?.UID, item?.Type)\"\n            (mouseleave)=\"onTableRowMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\n                'compact-view': tableViewType === 'compact',\n                even: zebraStripes && index % 2 !== 0,\n                selected: getIsItemSelected(item),\n                highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId}\" [ngStyle]=\"{ visibility: !loadingItemsFromApi || item ? 'visible' : 'hidden' }\">\n            <fieldset class=\"table-row-fieldset\" [ngStyle]=\"{ 'background-color': item?.BackgroundColor }\">\n                <mat-checkbox *ngIf=\"selectionTypeForActions == 'multi'\" type=\"checkbox\"\n                    class=\"pull-left flip row-selection\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n                    [disabled]=\"false && getisItemDisabled(item)\" [ngStyle]=\"{\n                            visibility: !deviceHasMouse ||\n                            item?.UID + SEPARATOR + item?.Type === hoveredItemId || isAllSelected || selectedItems.size > 0 ? 'visible' : 'hidden'\n                        }\" [checked]=\"getIsItemSelected(item)\"\n                    (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n                </mat-checkbox>\n                <mat-radio-button *ngIf=\"selectionTypeForActions == 'single'\" name=\"selection\"\n                    class=\"pull-left flip row-selection pep-radio-button\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n                    [disabled]=\"getisItemDisabled(item)\"\n                    [checked]=\"getIsItemSelected(item)\"\n                    (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n                </mat-radio-button>\n                <pep-form [layoutType]=\"'table'\" [checkForChanges]=\"checkForChanges\" [layout]=\"layout\"\n                    [firstFieldAsLink]=\"firstFieldAsLink\" [data]=\"item\" [canEditObject]=\"!disabled\"\n                    [lockEvents]=\"lockItemInnerEvents || printMode\" [isReport]=\"isReport\" [isActive]=\"\n                            (item?.UID + SEPARATOR + item?.Type === selectedItemId ||\n                            item?.UID + SEPARATOR + item?.Type === hoveredItemId) && deviceHasMouse\n                        \" (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\"\n                    (click)=\"itemClicked($event, item)\">\n                </pep-form>\n            </fieldset>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!isTable\">\n        <div (mouseenter)=\"onCardMouseEnter($event, item?.UID, item?.Type)\"\n            (mouseleave)=\"onCardMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\n                    selected: getIsItemSelected(item),\n                    highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId,\n                    'line-view': viewType === 'lines',\n                    'card-view': viewType === 'cards',\n                    'small-card': cardSize === 'sm'\n                }\" class=\"pull-left flip\"\n            [ngStyle]=\"{ height: calculatedObjectHeight, visibility: !loadingItemsFromApi || item ? 'visible' : 'hidden' }\">\n            <mat-checkbox *ngIf=\"showCardSelection\" class=\"pull-left flip card-selection\"\n                [disabled]=\"getisItemDisabled(item)\" [checked]=\"getIsItemSelected(item)\"\n                (change)=\"selectItemForActions($event, item?.UID, item?.IsSelectableForActions, item?.Type)\">\n            </mat-checkbox>\n            <pep-form [layoutType]=\"'card'\" [firstFieldAsLink]=\"firstFieldAsLink\" [checkForChanges]=\"checkForChanges\"\n                [layout]=\"layout\" [data]=\"item\" [canEditObject]=\"!disabled\"\n                [lockEvents]=\"lockItemInnerEvents || printMode\" [isActive]=\"\n                        (item?.UID + SEPARATOR + item?.Type === selectedItemId ||\n                        item?.UID + SEPARATOR + item?.Type === hoveredItemId) && deviceHasMouse\n                    \" (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\"\n                (click)=\"itemClicked($event, item)\">\n            </pep-form>\n        </div>\n    </ng-container>\n</ng-template>\n\n<ng-template #tableHeader>\n    <div *ngIf=\"isTable\" class=\"table-header\" (mouseup)=\"onListResizeEnd($event)\"\n        (mouseenter)=\"onListHeaderMouseEnter($event)\" (mouseleave)=\"onListHeaderMouseLeave($event)\"\n        (mousemove)=\"onListResize($event)\">\n\n        <div class=\"table-header-padding-top\"></div>\n        <fieldset class=\"table-header-fieldset\">\n            <mat-checkbox *ngIf=\"selectionTypeForActions !== 'none'\" #selectAllCB class=\"pull-left flip row-selection\" [ngClass]=\"{ 'md': tableViewType === 'compact' }\"\n                type=\"checkbox\" [ngStyle]=\"{\n                        visibility:\n                            selectionTypeForActions == 'single' || \n                            (selectionTypeForActions == 'multi' && hideAllSelectionInMulti) ? 'hidden' : 'visible'\n                    }\"\n                [indeterminate]=\"isAllSelected ? unSelectedItems.size > 0 && unSelectedItems.size < totalRows : (selectedItems.size > 0 && !getIsAllSelectedForActions())\"\n                [disabled]=\"disabled || selectionTypeForActions === 'single'\" [checked]=\"getIsAllSelectedForActions()\"\n                (change)=\"selectAllItemsForActions($event)\"></mat-checkbox>\n            <fieldset>\n                <div *ngFor=\"let field of layout?.ControlFields; let j = index\" class=\"header-column pull-left flip\"\n                    [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\" [ngClass]=\"{\n                            'compact-view': tableViewType === 'compact',\n                            'support-sorting': isSortableColumn(field.ApiName),\n                            'has-sorting': field.ApiName === sortBy,\n                            'is-resizing': field.ApiName === pressedColumn,\n                            'is-first': j === 0 && selectionTypeForActions !== 'multi',\n                            'is-last': j === layout?.ControlFields?.length - 1\n                        }\"\n                    (click)=\"isSortableColumn(field.ApiName) ? (onListSortingChange(field.ApiName, sortBy !== null && sortBy != field.ApiName ? true : !isAsc, $event)) : false\">\n\n                    <label id=\"{{ field.ApiName }}\"\n                        class=\"header-label body-sm pull-left flip text-align-{{ field.Layout.XAlignment }}\"\n                        title=\"{{ field.Title }}\">\n                        <span *ngIf=\"field.Mandatory\" class=\"mandatory\">\n                            <pep-icon name=\"system_must\"></pep-icon>\n                        </span>\n                        {{ field.Title != '' ? field.Title : ' '}}\n                    </label>\n\n                    <div *ngIf=\"supportResizing\" class=\"resize-box pull-right flip\"\n                        (mousedown)=\"onListResizeStart($event, field.ApiName, j)\">\n                        <div class=\"splitter\"></div>\n                    </div>\n\n                    <div *ngIf=\"isSortableColumn(field.ApiName)\" class=\"sorting-box pull-left flip\"\n                        [ngClass]=\"{ 'has-sorting': field.ApiName === sortBy }\">\n                        <mat-icon *ngIf=\"field.ApiName !== sortBy\">\n                            <pep-icon name=\"arrow_either\" class=\"asc\"></pep-icon>\n                        </mat-icon>\n                        <ng-container *ngIf=\"field.ApiName === sortBy\">\n                            <mat-icon *ngIf=\"!isAsc\" [ngClass]=\"{ 'sort-by': field.ApiName === sortBy && isAsc }\"\n                                title=\"{{ 'LIST.SORT_ASC' | translate }}\">\n                                <pep-icon name=\"arrow_up\" class=\"asc\"></pep-icon>\n                            </mat-icon>\n                            <mat-icon *ngIf=\"isAsc\" [ngClass]=\"{ 'sort-by': field.ApiName === sortBy && !isAsc }\"\n                                title=\"{{ 'LIST.SORT_DESC' | translate }}\">\n                                <pep-icon name=\"arrow_down\" class=\"desc\"></pep-icon>\n                            </mat-icon>\n                        </ng-container>\n                    </div>\n                </div>\n            </fieldset>\n        </fieldset>\n    </div>\n</ng-template>\n\n<ng-template #tableTotal>\n    <div *ngIf=\"isTable && totalsRow?.length > 0 && totalsRow.length <= layout?.ControlFields.length\"\n        class=\"table-total\">\n        <fieldset class=\"table-header-fieldset\">\n            <div *ngFor=\"let field of layout?.ControlFields; let j = index\" class=\"total-column pull-left flip\"\n                [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\">\n                <label class=\"total-label body-sm text-align-{{ field.Layout.XAlignment }}\">\n                    {{ totalsRow[j] }}\n                </label>\n            </div>\n        </fieldset>\n    </div>\n</ng-template>", styles: [":host{width:100%;height:inherit;display:flex;flex-direction:column}:host .list-container{display:flex;flex-direction:column;height:inherit;width:100%;overflow:auto}:host .list-container .list-container-resizable{display:flex;flex-direction:column;height:inherit}.no-data{margin:var(--pep-spacing-2xl, 2rem) 0}.no-data-suggestions .suggestions-title{margin:var(--pep-spacing-lg, 1rem) 0 var(--pep-spacing-sm, .5rem)}.no-data-suggestions .suggestions-list{margin:0;padding:0;padding-inline-start:var(--pep-spacing-2xl, 2rem)}.virtual-scroller{min-height:5rem;height:inherit}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.PepLayoutService }, { type: i1.PepSessionService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { listContainerResizableElementRef: [{
                 type: ViewChild,
                 args: ['listContainerResizable', { read: ElementRef }]
@@ -2642,9 +1526,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }], startIndexChange: [{
                 type: Output
-            }], virtualScroller: [{
-                type: ViewChild,
-                args: [VirtualScrollerComponent]
             }], selectAllCB: [{
                 type: ViewChild,
                 args: ['selectAllCB']
@@ -3070,6 +1951,7 @@ const listPipes = [
     IsItemSelectedPipe,
     IsItemDisabledPipe
 ];
+//import { VirtualScrollerModule } from './virtual-scroller';
 // import { PepVirtualScrollComponent } from './virtual-scroll.component';
 class PepListModule {
     pepIconRegistry;
@@ -3113,8 +1995,7 @@ class PepListModule {
             PepIconModule,
             PepFormModule,
             PepMenuModule,
-            PepTextboxModule,
-            VirtualScrollerModule], exports: [
+            PepTextboxModule], exports: [
             // PepListOldComponent,
             PepListComponent,
             PepListActionsComponent,
@@ -3140,8 +2021,7 @@ class PepListModule {
             PepIconModule,
             PepFormModule,
             PepMenuModule,
-            PepTextboxModule,
-            VirtualScrollerModule] });
+            PepTextboxModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepListModule, decorators: [{
             type: NgModule,
@@ -3164,7 +2044,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         PepFormModule,
                         PepMenuModule,
                         PepTextboxModule,
-                        VirtualScrollerModule
+                        //VirtualScrollerModule
                     ],
                     exports: [listComponents],
                     declarations: [listComponents, listPipes],