ng-virtual-list 14.7.12 → 14.7.13

package/fesm2015/ng-virtual-list.mjs

@@ -1,11 +1,29 @@
 import * as i0 from '@angular/core';
 import { Injectable, Component, ChangeDetectionStrategy, EventEmitter as EventEmitter$1, ViewContainerRef, ElementRef, ViewEncapsulation, ViewChild, Output, Input, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { takeUntil as takeUntil$1, tap as tap$1, map } from 'rxjs/operators';
-import { Subject, takeUntil, tap, BehaviorSubject as BehaviorSubject$1, fromEvent, combineLatest, filter, distinctUntilChanged, skip, map as map$1, debounceTime, switchMap, of } from 'rxjs';
+import { Subject, takeUntil, tap, BehaviorSubject as BehaviorSubject$1, fromEvent, combineLatest, filter, distinctUntilChanged, map as map$1, debounceTime, switchMap, of } from 'rxjs';
 import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
+/**
+ * Action modes for collection elements.
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/14.x/projects/ng-virtual-list/src/lib/enums/collection-modes.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+var CollectionModes;
+(function (CollectionModes) {
+    /**
+     * When adding elements to the beginning of the collection, the scroll remains at the current position.
+     */
+    CollectionModes["NORMAL"] = "normal";
+    /**
+     * When adding elements to the beginning of the collection, the scroll is shifted by the sum of the sizes of the new elements.
+     */
+    CollectionModes["LAZY"] = "lazy";
+})(CollectionModes || (CollectionModes = {}));
+
 /**
  * Axis of the arrangement of virtual list elements.
  * @link https://github.com/DjonnyX/ng-virtual-list/blob/14.x/projects/ng-virtual-list/src/lib/enums/directions.ts
@@ -75,6 +93,7 @@ const DEFAULT_ENABLED_BUFFER_OPTIMIZATION = false;
 const DEFAULT_DYNAMIC_SIZE = false;
 const TRACK_BY_PROPERTY_NAME = 'id';
 const DEFAULT_DIRECTION = Directions.VERTICAL;
+const DEFAULT_COLLECTION_MODE = CollectionModes.NORMAL;
 const DISPLAY_OBJECTS_LENGTH_MESUREMENT_ERROR = 1;
 const MAX_SCROLL_TO_ITERATIONS = 5;
 const DEFAULT_SNAPPING_METHOD = SnappingMethods.NORMAL;
@@ -1265,7 +1284,11 @@ const bufferInterpolation = (currentBufferValue, array, value, extra) => {
     return Math.ceil(buffer / l);
 };
 
-const TRACK_BOX_CHANGE_EVENT_NAME = 'change';
+var TrackBoxEvents;
+(function (TrackBoxEvents) {
+    TrackBoxEvents["CHANGE"] = "change";
+    TrackBoxEvents["RESET"] = "reset";
+})(TrackBoxEvents || (TrackBoxEvents = {}));
 var ItemDisplayMethods;
 (function (ItemDisplayMethods) {
     ItemDisplayMethods[ItemDisplayMethods["CREATE"] = 0] = "CREATE";
@@ -1273,7 +1296,7 @@ var ItemDisplayMethods;
     ItemDisplayMethods[ItemDisplayMethods["DELETE"] = 2] = "DELETE";
     ItemDisplayMethods[ItemDisplayMethods["NOT_CHANGED"] = 3] = "NOT_CHANGED";
 })(ItemDisplayMethods || (ItemDisplayMethods = {}));
-const DEFAULT_BUFFER_EXTREMUM_THRESHOLD = 15, DEFAULT_MAX_BUFFER_SEQUENCE_LENGTH = 30, DEFAULT_RESET_BUFFER_SIZE_TIMEOUT = 10000;
+const DEFAULT_BUFFER_EXTREMUM_THRESHOLD = 15, DEFAULT_MAX_BUFFER_SEQUENCE_LENGTH = 30, DEFAULT_RESET_BUFFER_SIZE_TIMEOUT = 10000, IS_NEW = 'isNew';
 /**
  * An object that performs tracking, calculations and caching.
  * @link https://github.com/DjonnyX/ng-virtual-list/blob/14.x/projects/ng-virtual-list/src/lib/utils/trackBox.ts
@@ -1284,6 +1307,7 @@ class TrackBox extends CacheMap {
     constructor(trackingPropertyName) {
         super();
         this._isSnappingMethodAdvanced = false;
+        this._isLazy = false;
         this._trackingPropertyName = TRACK_BY_PROPERTY_NAME;
         this._deletedItemsMap = {};
         this._crudDetected = false;
@@ -1297,7 +1321,7 @@ class TrackBox extends CacheMap {
         this._defaultBufferSize = 0;
         this._maxBufferSize = this._defaultBufferSize;
         this._resetBufferSizeTimeout = DEFAULT_RESET_BUFFER_SIZE_TIMEOUT;
-        this.isInit = true;
+        this.isReseted = true;
         this._previousScrollSize = 0;
         this._trackingPropertyName = trackingPropertyName;
         this.initialize();
@@ -1326,6 +1350,12 @@ class TrackBox extends CacheMap {
         }
         this._isSnappingMethodAdvanced = v;
     }
+    set isLazy(v) {
+        if (this._isLazy === v) {
+            return;
+        }
+        this._isLazy = v;
+    }
     /**
      * Set the trackBy property
      */
@@ -1349,7 +1379,7 @@ class TrackBox extends CacheMap {
     get crudDetected() { return this._crudDetected; }
     fireChangeIfNeed() {
         if (this.changesDetected()) {
-            this.dispatch(TRACK_BOX_CHANGE_EVENT_NAME, this._version);
+            this.dispatch(TrackBoxEvents.CHANGE, this._version);
         }
     }
     get scrollDelta() { return this._scrollDelta; }
@@ -1366,11 +1396,19 @@ class TrackBox extends CacheMap {
             console.warn('Attention! The collection must be immutable.');
             return;
         }
-        if (this.isInit && !(!this._previousCollection || this._previousCollection.length === 0)) {
-            this.isInit = false;
+        let reseted = this.isReseted;
+        if (reseted) {
+            if (!(!this._previousCollection || this._previousCollection.length === 0)) {
+                reseted = false;
+            }
         }
+        if (!reseted && (!currentCollection || currentCollection.length === 0)) {
+            reseted = true;
+        }
+        this.isReseted = reseted;
+        this.dispatch(TrackBoxEvents.RESET, reseted);
         this.updateCache(this._previousCollection, currentCollection, itemSize);
-        this._previousCollection = currentCollection;
+        this._previousCollection = [...(currentCollection || [])];
     }
     /**
      * Update the cache of items from the list
@@ -1554,7 +1592,7 @@ class TrackBox extends CacheMap {
      * Calculates list metrics
      */
     recalculateMetrics(options) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         const { fromItemId, bounds, collection, dynamicSize, isVertical, itemSize, bufferSize: minBufferSize, scrollSize, snap, itemConfigMap, enabledBufferOptimization, previousTotalSize, crudDetected, deletedItemsMap } = options;
         const bufferSize = Math.max(minBufferSize, this._bufferSize), { width, height } = bounds, sizeProperty = isVertical ? HEIGHT_PROP_NAME : WIDTH_PROP_NAME, size = isVertical ? height : width, totalLength = collection.length, typicalItemSize = itemSize, w = isVertical ? width : typicalItemSize, h = isVertical ? typicalItemSize : height, map = this._map, snapshot = this._snapshot, checkOverscrollItemsLimit = Math.ceil(size / typicalItemSize), snippedPos = Math.floor(scrollSize), leftItemsWeights = [], isFromId = fromItemId !== undefined && (typeof fromItemId === 'number' && fromItemId > -1)
             || (typeof fromItemId === 'string' && fromItemId > '-1');
@@ -1581,9 +1619,10 @@ class TrackBox extends CacheMap {
             leftItemsOffset = rightItemsOffset = bufferSize;
         }
         let itemsFromStartToScrollEnd = -1, itemsFromDisplayEndToOffsetEnd = 0, itemsFromStartToDisplayEnd = -1, leftItemLength = 0, rightItemLength = 0, leftItemsWeight = 0, rightItemsWeight = 0, leftHiddenItemsWeight = 0, totalItemsToDisplayEndWeight = 0, leftSizeOfAddedItems = 0, leftSizeOfUpdatedItems = 0, leftSizeOfDeletedItems = 0, itemById = undefined, itemByIdPos = 0, targetDisplayItemIndex = -1, isTargetInOverscroll = false, actualScrollSize = itemByIdPos, totalSize = 0, startIndex, isFromItemIdFound = false, deltaFromStartCreation = 0;
+        let isNew = !this.isReseted && (scrollSize === 0);
         // If the list is dynamic or there are new elements in the collection, then it switches to the long algorithm.
         if (dynamicSize) {
-            let y = 0, stickyCollectionItem = undefined, stickyComponentSize = 0, isNew = true;
+            let y = 0, stickyCollectionItem = undefined, stickyComponentSize = 0;
             for (let i = 0, l = collection.length; i < l; i++) {
                 const ii = i + 1, collectionItem = collection[i], id = collectionItem.id;
                 let componentSize = 0, componentSizeDelta = 0, itemDisplayMethod = ItemDisplayMethods.NOT_CHANGED;
@@ -1591,8 +1630,8 @@ class TrackBox extends CacheMap {
                     const bounds = map.get(id) || { width: typicalItemSize, height: typicalItemSize };
                     componentSize = bounds[sizeProperty];
                     itemDisplayMethod = (_a = bounds === null || bounds === void 0 ? void 0 : bounds.method) !== null && _a !== void 0 ? _a : ItemDisplayMethods.UPDATE;
-                    const isItemNew = (_b = bounds.isNew) !== null && _b !== void 0 ? _b : true;
-                    if (isNew && (this.isInit || (!isItemNew && i > 0))) {
+                    const isItemNew = (_b = bounds === null || bounds === void 0 ? void 0 : bounds[IS_NEW]) !== null && _b !== void 0 ? _b : this._isLazy;
+                    if (!isItemNew && (!this._isLazy || !((_c = itemConfigMap[collection[0].id]) === null || _c === void 0 ? void 0 : _c.sticky))) {
                         isNew = false;
                     }
                     switch (itemDisplayMethod) {
@@ -1614,7 +1653,7 @@ class TrackBox extends CacheMap {
                     }
                 }
                 if (deletedItemsMap.hasOwnProperty(i)) {
-                    const bounds = deletedItemsMap[i], size = (_c = bounds === null || bounds === void 0 ? void 0 : bounds[sizeProperty]) !== null && _c !== void 0 ? _c : typicalItemSize;
+                    const bounds = deletedItemsMap[i], size = (_d = bounds === null || bounds === void 0 ? void 0 : bounds[sizeProperty]) !== null && _d !== void 0 ? _d : typicalItemSize;
                     if (y < scrollSize - size) {
                         leftSizeOfDeletedItems += size;
                     }
@@ -1622,7 +1661,7 @@ class TrackBox extends CacheMap {
                 totalSize += componentSize;
                 if (isFromId) {
                     if (itemById === undefined) {
-                        if (id !== fromItemId && itemConfigMap && ((_d = itemConfigMap[id]) === null || _d === void 0 ? void 0 : _d.sticky) === 1) {
+                        if (id !== fromItemId && itemConfigMap && ((_e = itemConfigMap[id]) === null || _e === void 0 ? void 0 : _e.sticky) === 1) {
                             stickyComponentSize = componentSize;
                             stickyCollectionItem = collectionItem;
                         }
@@ -1728,13 +1767,20 @@ class TrackBox extends CacheMap {
                     let componentSize = typicalItemSize, itemDisplayMethod = ItemDisplayMethods.NOT_CHANGED;
                     if (map.has(id)) {
                         const bounds = map.get(id);
-                        itemDisplayMethod = (_e = bounds === null || bounds === void 0 ? void 0 : bounds.method) !== null && _e !== void 0 ? _e : ItemDisplayMethods.UPDATE;
+                        itemDisplayMethod = (_f = bounds === null || bounds === void 0 ? void 0 : bounds.method) !== null && _f !== void 0 ? _f : ItemDisplayMethods.UPDATE;
+                        const isItemNew = (_g = bounds === null || bounds === void 0 ? void 0 : bounds[IS_NEW]) !== null && _g !== void 0 ? _g : this._isLazy;
+                        if (!isItemNew && (!this._isLazy || !((_h = itemConfigMap[collection[0].id]) === null || _h === void 0 ? void 0 : _h.sticky))) {
+                            isNew = false;
+                        }
                         if (itemDisplayMethod === ItemDisplayMethods.CREATE) {
-                            map.set(id, Object.assign(Object.assign({}, bounds), { method: ItemDisplayMethods.NOT_CHANGED }));
+                            if (isNew) {
+                                deltaFromStartCreation += componentSize;
+                            }
+                            map.set(id, Object.assign(Object.assign({}, bounds), { method: ItemDisplayMethods.NOT_CHANGED, isNew }));
                         }
                     }
                     if (deletedItemsMap.hasOwnProperty(i)) {
-                        const bounds = deletedItemsMap[i], size = (_f = bounds === null || bounds === void 0 ? void 0 : bounds[sizeProperty]) !== null && _f !== void 0 ? _f : typicalItemSize;
+                        const bounds = deletedItemsMap[i], size = (_j = bounds === null || bounds === void 0 ? void 0 : bounds[sizeProperty]) !== null && _j !== void 0 ? _j : typicalItemSize;
                         if (y < scrollSize - size) {
                             leftSizeOfDeletedItems += size;
                         }
@@ -1742,7 +1788,9 @@ class TrackBox extends CacheMap {
                     if (y < scrollSize - componentSize) {
                         switch (itemDisplayMethod) {
                             case ItemDisplayMethods.CREATE: {
-                                leftSizeOfUpdatedItems += componentSize;
+                                if (!isNew) {
+                                    leftSizeOfUpdatedItems += componentSize;
+                                }
                                 break;
                             }
                             case ItemDisplayMethods.UPDATE: {
@@ -1839,7 +1887,7 @@ class TrackBox extends CacheMap {
                             height: isVertical ? size : normalizedItemHeight,
                             delta: 0,
                         }, config = {
-                            new: cache.isNew === true,
+                            new: (cache === null || cache === void 0 ? void 0 : cache[IS_NEW]) === true,
                             odd: isOdd,
                             even: !isOdd,
                             isVertical,
@@ -1881,7 +1929,7 @@ class TrackBox extends CacheMap {
                             height: h,
                             delta: 0,
                         }, config = {
-                            new: cache.isNew === true,
+                            new: (cache === null || cache === void 0 ? void 0 : cache[IS_NEW]) === true,
                             odd: isOdd,
                             even: !isOdd,
                             isVertical,
@@ -1922,7 +1970,7 @@ class TrackBox extends CacheMap {
                         height: isVertical ? size : normalizedItemHeight,
                         delta: 0,
                     }, config = {
-                        new: cache.isNew === true,
+                        new: (cache === null || cache === void 0 ? void 0 : cache[IS_NEW]) === true,
                         odd: isOdd,
                         even: !isOdd,
                         isVertical,
@@ -2134,6 +2182,20 @@ const copyValueAsReadonly = (source) => {
     return source;
 };
 
+const NORMAL_ALIASES = [CollectionModes.NORMAL, 'normal'], LAZY_ALIASES = [CollectionModes.LAZY, 'lazy'];
+/**
+ * Determines the axis membership of a virtual list
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/14.x/projects/ng-virtual-list/src/lib/utils/isCollectionMode.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+const isCollectionMode = (src, expected) => {
+    if (LAZY_ALIASES.includes(expected)) {
+        return LAZY_ALIASES.includes(src);
+    }
+    return NORMAL_ALIASES.includes(src);
+};
+
 const ROLE_LIST = 'list', ROLE_LIST_BOX = 'listbox';
 const validateScrollIteration = (value) => {
     return Number.isNaN(value) || (value < 0) ? 0 : value > MAX_SCROLL_TO_ITERATIONS ? MAX_SCROLL_TO_ITERATIONS : value;
@@ -2375,6 +2437,16 @@ class NgVirtualListComponent extends DisposableComponent {
             }
             return v;
         };
+        this._$collectionMode = new BehaviorSubject$1(DEFAULT_COLLECTION_MODE);
+        this.$collectionMode = this._$collectionMode.asObservable();
+        this._collectionModeTransform = (v) => {
+            const valid = validateString(v) && (v === 'normal' || v === 'lazy');
+            if (!valid) {
+                console.error('The "direction" parameter must have the value `normal` or `lazy`.');
+                return DEFAULT_COLLECTION_MODE;
+            }
+            return v;
+        };
         this._$bufferSize = new BehaviorSubject$1(DEFAULT_BUFFER_SIZE);
         this.$bufferSize = this._$bufferSize.asObservable();
         this._bufferSizeTransform = (v) => {
@@ -2431,6 +2503,7 @@ class NgVirtualListComponent extends DisposableComponent {
             return v;
         };
         this._isVertical = this.getIsVertical();
+        this._isLazy = this.getIsLazy();
         this._$focusedElement = new BehaviorSubject$1(undefined);
         this.$focusedElement = this._$focusedElement.asObservable();
         this._isSnappingMethodAdvanced = this.getIsSnappingMethodAdvanced();
@@ -2530,6 +2603,21 @@ class NgVirtualListComponent extends DisposableComponent {
             this._$cacheVersion.next(v);
         };
         this._$cacheVersion = new BehaviorSubject$1(-1);
+        this._isResetedReachStart = true;
+        this._onTrackBoxResetHandler = (v) => {
+            var _a;
+            if (v) {
+                this._isResetedReachStart = true;
+                const container = (_a = this._container) === null || _a === void 0 ? void 0 : _a.nativeElement;
+                if (container) {
+                    const params = {
+                        [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: 0,
+                        behavior: BEHAVIOR_INSTANT,
+                    };
+                    container.scrollTo(params);
+                }
+            }
+        };
         this._componentsResizeObserver = new ResizeObserver(() => {
             this._trackBox.changes();
         });
@@ -2573,12 +2661,13 @@ class NgVirtualListComponent extends DisposableComponent {
         })).subscribe();
         this._trackBox.displayComponents = this._displayComponents;
         const $trackBy = this.$trackBy, $selectByClick = this.$selectByClick, $collapseByClick = this.$collapseByClick, $isScrollStart = this._$isScrollStart.asObservable(), $isScrollFinished = this._$isScrollFinished.asObservable();
-        $isScrollStart.pipe(takeUntil(this._$unsubscribe), distinctUntilChanged(), skip(1), tap(v => {
-            if (v) {
+        $isScrollStart.pipe(takeUntil(this._$unsubscribe), distinctUntilChanged(), tap(v => {
+            if (v && !this._isResetedReachStart) {
                 this.onScrollReachStart.emit();
             }
+            this._isResetedReachStart = false;
         })).subscribe();
-        $isScrollFinished.pipe(takeUntil(this._$unsubscribe), distinctUntilChanged(), skip(1), tap(v => {
+        $isScrollFinished.pipe(takeUntil(this._$unsubscribe), distinctUntilChanged(), tap(v => {
             if (v) {
                 this.onScrollReachEnd.emit();
             }
@@ -2592,7 +2681,10 @@ class NgVirtualListComponent extends DisposableComponent {
         $trackBy.pipe(takeUntil(this._$unsubscribe), tap(v => {
             this._trackBox.trackingPropertyName = v;
         })).subscribe();
-        const $bounds = this._$bounds.asObservable().pipe(filter(b => !!b)), $items = this.$items.pipe(map$1(i => !i ? [] : i)), $scrollSize = this._$scrollSize.asObservable(), $itemSize = this.$itemSize.pipe(map$1(v => v <= 0 ? DEFAULT_ITEM_SIZE : v)), $bufferSize = this.$bufferSize.pipe(map$1(v => v < 0 ? DEFAULT_BUFFER_SIZE : v)), $maxBufferSize = this.$maxBufferSize.pipe(map$1(v => v < 0 ? DEFAULT_MAX_BUFFER_SIZE : v)), $itemConfigMap = this.$itemConfigMap.pipe(map$1(v => !v ? {} : v)), $snap = this.$snap, $isVertical = this.$direction.pipe(map$1(v => this.getIsVertical(v || DEFAULT_DIRECTION))), $dynamicSize = this.$dynamicSize, $enabledBufferOptimization = this.$enabledBufferOptimization, $snappingMethod = this.$snappingMethod.pipe(map$1(v => this.getIsSnappingMethodAdvanced(v || DEFAULT_SNAPPING_METHOD))), $methodForSelecting = this.$methodForSelecting, $selectedIds = this.$selectedIds, $collapsedIds = this.$collapsedIds.pipe(map$1(v => Array.isArray(v) ? v : [])), $collapsedItemIds = this._$collapsedItemIds.asObservable().pipe(map$1(v => Array.isArray(v) ? v : [])), $actualItems = this._$actualItems.asObservable(), $cacheVersion = this.$cacheVersion;
+        const $bounds = this._$bounds.asObservable().pipe(filter(b => !!b)), $items = this.$items.pipe(map$1(i => !i ? [] : i)), $scrollSize = this._$scrollSize.asObservable(), $itemSize = this.$itemSize.pipe(map$1(v => v <= 0 ? DEFAULT_ITEM_SIZE : v)), $bufferSize = this.$bufferSize.pipe(map$1(v => v < 0 ? DEFAULT_BUFFER_SIZE : v)), $maxBufferSize = this.$maxBufferSize.pipe(map$1(v => v < 0 ? DEFAULT_MAX_BUFFER_SIZE : v)), $itemConfigMap = this.$itemConfigMap.pipe(map$1(v => !v ? {} : v)), $snap = this.$snap, $isVertical = this.$direction.pipe(map$1(v => this.getIsVertical(v || DEFAULT_DIRECTION))), $isLazy = this.$collectionMode.pipe(map$1(v => this.getIsLazy(v || DEFAULT_COLLECTION_MODE))), $dynamicSize = this.$dynamicSize, $enabledBufferOptimization = this.$enabledBufferOptimization, $snappingMethod = this.$snappingMethod.pipe(map$1(v => this.getIsSnappingMethodAdvanced(v || DEFAULT_SNAPPING_METHOD))), $methodForSelecting = this.$methodForSelecting, $selectedIds = this.$selectedIds, $collapsedIds = this.$collapsedIds.pipe(map$1(v => Array.isArray(v) ? v : [])), $collapsedItemIds = this._$collapsedItemIds.asObservable().pipe(map$1(v => Array.isArray(v) ? v : [])), $actualItems = this._$actualItems.asObservable(), $cacheVersion = this.$cacheVersion;
+        $isLazy.pipe(takeUntil(this._$unsubscribe), tap(v => {
+            this._trackBox.isLazy = v;
+        })).subscribe();
         combineLatest([$items, $itemSize, this.$initialized]).pipe(takeUntil(this._$unsubscribe), distinctUntilChanged(), filter(([, , init]) => !!init), map$1(([items, itemSize]) => ({ items, itemSize })), tap(({ items, itemSize }) => {
             this._trackBox.resetCollection(items, itemSize);
         })).subscribe();
@@ -2909,6 +3001,19 @@ class NgVirtualListComponent extends DisposableComponent {
     }
     ;
     get direction() { return this._$direction.getValue(); }
+    /**
+     * Determines the action modes for collection elements. Default value is "normal".
+     */
+    set collectionMode(v) {
+        if (this._$collectionMode.getValue() === v) {
+            return;
+        }
+        const transformedValue = this._collectionModeTransform(v);
+        this._$collectionMode.next(transformedValue);
+        this._cdr.markForCheck();
+    }
+    ;
+    get collectionMode() { return this._$collectionMode.getValue(); }
     /**
      * Number of elements outside the scope of visibility. Default value is 2.
      */
@@ -2992,13 +3097,13 @@ class NgVirtualListComponent extends DisposableComponent {
     }
     listenCacheChangesIfNeed(value) {
         if (value) {
-            if (!this._trackBox.hasEventListener(TRACK_BOX_CHANGE_EVENT_NAME, this._onTrackBoxChangeHandler)) {
-                this._trackBox.addEventListener(TRACK_BOX_CHANGE_EVENT_NAME, this._onTrackBoxChangeHandler);
+            if (!this._trackBox.hasEventListener(TrackBoxEvents.CHANGE, this._onTrackBoxChangeHandler)) {
+                this._trackBox.addEventListener(TrackBoxEvents.CHANGE, this._onTrackBoxChangeHandler);
             }
         }
         else {
-            if (this._trackBox.hasEventListener(TRACK_BOX_CHANGE_EVENT_NAME, this._onTrackBoxChangeHandler)) {
-                this._trackBox.removeEventListener(TRACK_BOX_CHANGE_EVENT_NAME, this._onTrackBoxChangeHandler);
+            if (this._trackBox.hasEventListener(TrackBoxEvents.CHANGE, this._onTrackBoxChangeHandler)) {
+                this._trackBox.removeEventListener(TrackBoxEvents.CHANGE, this._onTrackBoxChangeHandler);
             }
         }
     }
@@ -3022,6 +3127,10 @@ class NgVirtualListComponent extends DisposableComponent {
         const dir = d || this.direction;
         return isDirection(dir, Directions.VERTICAL);
     }
+    getIsLazy(m) {
+        const mode = m || this.collectionMode;
+        return isCollectionMode(mode, CollectionModes.LAZY);
+    }
     createDisplayComponentsIfNeed(displayItems) {
         if (!displayItems || !this._listContainerRef) {
             this._trackBox.setDisplayObjectIndexMapById({});
@@ -3222,7 +3331,7 @@ class NgVirtualListComponent extends DisposableComponent {
 }
 NgVirtualListComponent.__nextId = 0;
 NgVirtualListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgVirtualListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: NgVirtualListService }], target: i0.ɵɵFactoryTarget.Component });
-NgVirtualListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgVirtualListComponent, selector: "ng-virtual-list", inputs: { items: "items", selectedIds: "selectedIds", collapsedIds: "collapsedIds", selectByClick: "selectByClick", collapseByClick: "collapseByClick", snap: "snap", enabledBufferOptimization: "enabledBufferOptimization", itemRenderer: "itemRenderer", itemConfigMap: "itemConfigMap", itemSize: "itemSize", dynamicSize: "dynamicSize", direction: "direction", bufferSize: "bufferSize", maxBufferSize: "maxBufferSize", snappingMethod: "snappingMethod", methodForSelecting: "methodForSelecting", trackBy: "trackBy" }, outputs: { onScroll: "onScroll", onScrollEnd: "onScrollEnd", onViewportChange: "onViewportChange", onItemClick: "onItemClick", onSelect: "onSelect", onCollapse: "onCollapse", onScrollReachStart: "onScrollReachStart", onScrollReachEnd: "onScrollReachEnd" }, host: { styleAttribute: "position: relative;" }, providers: [NgVirtualListService], viewQueries: [{ propertyName: "_listContainerRef", first: true, predicate: ["renderersContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_container", first: true, predicate: ["container"], descendants: true, read: (ElementRef) }, { propertyName: "_list", first: true, predicate: ["list"], descendants: true, read: (ElementRef) }, { propertyName: "_snapContainerRef", first: true, predicate: ["snapRendererContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_snappedContainer", first: true, predicate: ["snapped"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"snap\" #snapped part=\"snapped-item\" class=\"ngvl__list-snapper\">\r\n  <ng-container #snapRendererContainer></ng-container>\r\n</div>\r\n<div #container part=\"scroller\" class=\"ngvl__scroller\">\r\n  <div [attr.aria-orientation]=\"orientation\" [attr.aria-activedescendant]=\"$focusedElement | async\" #list part=\"list\"\r\n    class=\"ngvl__list\">\r\n    <ng-container #renderersContainer></ng-container>\r\n  </div>\r\n</div>", styles: [":host{position:relative;display:block;width:400px;overflow:hidden}:host(.horizontal){height:48px}:host(.horizontal) .ngvl__list{display:inline-flex}:host(.horizontal) .ngvl__scroller{overflow:auto hidden}:host(.vertical) .ngvl__scroller{overflow:hidden auto}:host(.vertical){height:320px}.ngvl__scroller{overflow:auto;width:100%;height:100%}.ngvl__list-snapper{pointer-events:none;position:absolute;list-style:none;left:0;top:0;z-index:1}.ngvl__list{position:relative;list-style:none;padding:0;margin:0;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
+NgVirtualListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgVirtualListComponent, selector: "ng-virtual-list", inputs: { items: "items", selectedIds: "selectedIds", collapsedIds: "collapsedIds", selectByClick: "selectByClick", collapseByClick: "collapseByClick", snap: "snap", enabledBufferOptimization: "enabledBufferOptimization", itemRenderer: "itemRenderer", itemConfigMap: "itemConfigMap", itemSize: "itemSize", dynamicSize: "dynamicSize", direction: "direction", collectionMode: "collectionMode", bufferSize: "bufferSize", maxBufferSize: "maxBufferSize", snappingMethod: "snappingMethod", methodForSelecting: "methodForSelecting", trackBy: "trackBy" }, outputs: { onScroll: "onScroll", onScrollEnd: "onScrollEnd", onViewportChange: "onViewportChange", onItemClick: "onItemClick", onSelect: "onSelect", onCollapse: "onCollapse", onScrollReachStart: "onScrollReachStart", onScrollReachEnd: "onScrollReachEnd" }, host: { styleAttribute: "position: relative;" }, providers: [NgVirtualListService], viewQueries: [{ propertyName: "_listContainerRef", first: true, predicate: ["renderersContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_container", first: true, predicate: ["container"], descendants: true, read: (ElementRef) }, { propertyName: "_list", first: true, predicate: ["list"], descendants: true, read: (ElementRef) }, { propertyName: "_snapContainerRef", first: true, predicate: ["snapRendererContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_snappedContainer", first: true, predicate: ["snapped"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"snap\" #snapped part=\"snapped-item\" class=\"ngvl__list-snapper\">\r\n  <ng-container #snapRendererContainer></ng-container>\r\n</div>\r\n<div #container part=\"scroller\" class=\"ngvl__scroller\">\r\n  <div [attr.aria-orientation]=\"orientation\" [attr.aria-activedescendant]=\"$focusedElement | async\" #list part=\"list\"\r\n    class=\"ngvl__list\">\r\n    <ng-container #renderersContainer></ng-container>\r\n  </div>\r\n</div>", styles: [":host{position:relative;display:block;width:400px;overflow:hidden}:host(.horizontal){height:48px}:host(.horizontal) .ngvl__list{display:inline-flex}:host(.horizontal) .ngvl__scroller{overflow:auto hidden}:host(.vertical) .ngvl__scroller{overflow:hidden auto}:host(.vertical){height:320px}.ngvl__scroller{overflow:auto;width:100%;height:100%}.ngvl__list-snapper{pointer-events:none;position:absolute;list-style:none;left:0;top:0;z-index:1}.ngvl__list{position:relative;list-style:none;padding:0;margin:0;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgVirtualListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-virtual-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, providers: [NgVirtualListService], host: {
@@ -3283,6 +3392,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], direction: [{
                 type: Input
+            }], collectionMode: [{
+                type: Input
             }], bufferSize: [{
                 type: Input
             }], maxBufferSize: [{
@@ -3318,5 +3429,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { Directions, MethodsForSelecting, NgVirtualListComponent, NgVirtualListItemComponent, NgVirtualListModule, SnappingMethods };
+export { CollectionModes, Directions, MethodsForSelecting, NgVirtualListComponent, NgVirtualListItemComponent, NgVirtualListModule, SnappingMethods };
 //# sourceMappingURL=ng-virtual-list.mjs.map