ng-virtual-list 20.7.20 → 20.8.0

package/fesm2022/ng-virtual-list.mjs

@@ -803,7 +803,7 @@ const debounce = (cb, debounceTime = 0) => {
 
 /**
  * Switch css classes
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/utils/toggleClassName.ts
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/utils/toggle-class-name.ts
  * @author Evgenii Grebennikov
  * @email djonnyx@gmail.com
  */
@@ -818,7 +818,7 @@ const toggleClassName = (el, className, removeClassName) => {
 
 /**
  * Scroll event.
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/utils/scrollEvent.ts
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/utils/scroll-event.ts
  * @author Evgenii Grebennikov
  * @email djonnyx@gmail.com
  */
@@ -860,7 +860,7 @@ class ScrollEvent {
 
 /**
  * Simple event emitter
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/utils/eventEmitter.ts
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/utils/event-emitter.ts
  * @author Evgenii Grebennikov
  * @email djonnyx@gmail.com
  */
@@ -989,13 +989,16 @@ class CMap {
     clear() {
         this._dict = {};
     }
+    toObject() {
+        return this._dict;
+    }
 }
 const CACHE_BOX_CHANGE_EVENT_NAME = 'change';
 const MAX_SCROLL_DIRECTION_POOL = 50, CLEAR_SCROLL_DIRECTION_TO = 10, DIR_BACK = '-1', DIR_NONE = '0', DIR_FORWARD = '1';
 /**
  * Cache map.
  * Emits a change event on each mutation.
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/utils/cacheMap.ts
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/utils/cache-map.ts
  * @author Evgenii Grebennikov
  * @email djonnyx@gmail.com
  */
@@ -1118,6 +1121,12 @@ class CacheMap extends EventEmitter {
     get(id) {
         return this._map.get(id);
     }
+    delete(id) {
+        this._map.delete(id);
+    }
+    clear() {
+        this._map.clear();
+    }
     snapshot() {
         this._snapshot = new CMap(this._map);
     }
@@ -1170,10 +1179,10 @@ class Tracker {
         if (!items) {
             return;
         }
-        const idPropName = this._trackingPropertyName, untrackedItems = [...components], newTrackItems = [], isDown = direction === 0 || direction === 1;
+        const untrackedItems = [...components], newTrackItems = [], isDown = direction === 0 || direction === 1;
         let isRegularSnapped = false;
         for (let i = isDown ? 0 : items.length - 1, l = isDown ? items.length : 0; isDown ? i < l : i >= l; isDown ? i++ : i--) {
-            const item = items[i], itemTrackingProperty = item[idPropName];
+            const item = items[i], itemTrackingProperty = item.id;
             if (this._trackMap) {
                 if (this._trackMap.has(itemTrackingProperty)) {
                     const diId = this._trackMap.get(itemTrackingProperty), compIndex = this._displayObjectIndexMapById[diId], comp = components[compIndex];
@@ -1219,7 +1228,7 @@ class Tracker {
         }
         for (let i = 0, l = newTrackItems.length; i < l; i++) {
             if (untrackedItems.length > 0) {
-                const comp = untrackedItems.shift(), item = newTrackItems[i], itemTrackingProperty = item[idPropName];
+                const comp = untrackedItems.shift(), item = newTrackItems[i], itemTrackingProperty = item.id;
                 if (comp) {
                     if (snapedComponent) {
                         if (item['config']['snapped'] || item['config']['snappedOut']) {
@@ -1294,7 +1303,7 @@ const bufferInterpolation = (currentBufferValue, array, value, extra) => {
     else {
         array.push(value);
     }
-    while (array.length >= bufferSize) {
+    while (array.length > bufferSize) {
         array.shift();
     }
     const l = array.length;
@@ -1320,7 +1329,7 @@ var ItemDisplayMethods;
 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/20.x/projects/ng-virtual-list/src/lib/utils/trackBox.ts
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/utils/track-box.ts
  * @author Evgenii Grebennikov
  * @email djonnyx@gmail.com
  */
@@ -1376,14 +1385,14 @@ class TrackBox extends CacheMap {
     initialize() {
         this._tracker = new Tracker(this._trackingPropertyName);
     }
-    set(id, bounds) {
+    set(id, cache) {
         if (this._map.has(id)) {
             const b = this._map.get(id);
-            if (b?.width === bounds.width && b.height === bounds.height) {
+            if (b?.width === cache.width && b.height === cache.height) {
                 return this._map;
             }
         }
-        const v = this._map.set(id, bounds);
+        const v = this._map.set(id, cache);
         this.bumpVersion();
         return v;
     }
@@ -1409,7 +1418,7 @@ class TrackBox extends CacheMap {
     _maxBufferSize = this._defaultBufferSize;
     _resetBufferSizeTimeout = DEFAULT_RESET_BUFFER_SIZE_TIMEOUT;
     _resetBufferSizeTimer;
-    isReseted = true;
+    _isReseted = true;
     lifeCircle() {
         this.fireChangeIfNeed();
         this.lifeCircleDo();
@@ -1418,20 +1427,14 @@ class TrackBox extends CacheMap {
      * Scans the collection for deleted items and flushes the deleted item cache.
      */
     resetCollection(currentCollection, itemSize) {
-        if (currentCollection !== undefined && currentCollection !== null && currentCollection === this._previousCollection) {
+        if (currentCollection !== undefined && currentCollection !== null &&
+            currentCollection === this._previousCollection) {
             console.warn('Attention! The collection must be immutable.');
             return;
         }
-        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;
+        const reseted = !((!!this._previousCollection && this._previousCollection.length > 0) &&
+            (!!currentCollection && currentCollection.length > 0));
+        this._isReseted = reseted;
         this.dispatch(TrackBoxEvents.RESET, reseted);
         this.updateCache(this._previousCollection, currentCollection, itemSize);
         this._previousCollection = [...(currentCollection || [])];
@@ -1440,12 +1443,13 @@ class TrackBox extends CacheMap {
      * Update the cache of items from the list
      */
     updateCache(previousCollection, currentCollection, itemSize) {
+        const trackBy = this._trackingPropertyName;
         let crudDetected = false;
         if (!currentCollection || currentCollection.length === 0) {
             if (previousCollection) {
                 // deleted
                 for (let i = 0, l = previousCollection.length; i < l; i++) {
-                    const item = previousCollection[i], id = item.id;
+                    const item = previousCollection[i], id = item[trackBy];
                     crudDetected = true;
                     if (this._map.has(id)) {
                         this._map.delete(id);
@@ -1459,7 +1463,7 @@ class TrackBox extends CacheMap {
                 // added
                 for (let i = 0, l = currentCollection.length; i < l; i++) {
                     crudDetected = true;
-                    const item = currentCollection[i], id = item.id;
+                    const item = currentCollection[i], id = item[trackBy];
                     this._map.set(id, { width: itemSize, height: itemSize, method: ItemDisplayMethods.CREATE });
                 }
             }
@@ -1469,38 +1473,45 @@ class TrackBox extends CacheMap {
         for (let i = 0, l = currentCollection.length; i < l; i++) {
             const item = currentCollection[i];
             if (item) {
-                collectionDict[item.id] = item;
+                collectionDict[item[trackBy]] = item;
             }
         }
         const notChangedMap = {}, deletedMap = {}, deletedItemsMap = {}, updatedMap = {};
         for (let i = 0, l = previousCollection.length; i < l; i++) {
-            const item = previousCollection[i], id = item.id;
+            const item = previousCollection[i], id = item[trackBy];
             if (item) {
                 if (collectionDict.hasOwnProperty(id)) {
                     if (item === collectionDict[id]) {
                         // not changed
-                        notChangedMap[item.id] = item;
-                        this._map.set(id, { ...(this._map.get(id) || { width: itemSize, height: itemSize }), method: ItemDisplayMethods.NOT_CHANGED });
+                        notChangedMap[item[trackBy]] = item;
+                        this._map.set(id, {
+                            ...(this._map.get(id) || { width: itemSize, height: itemSize }),
+                            method: ItemDisplayMethods.NOT_CHANGED
+                        });
                         continue;
                     }
                     else {
                         // updated
                         crudDetected = true;
-                        updatedMap[item.id] = item;
-                        this._map.set(id, { ...(this._map.get(id) || { width: itemSize, height: itemSize }), method: ItemDisplayMethods.UPDATE });
+                        updatedMap[item[trackBy]] = item;
+                        this._map.set(id, {
+                            ...(this._map.get(id) || { width: itemSize, height: itemSize }),
+                            method: ItemDisplayMethods.UPDATE
+                        });
                         continue;
                     }
                 }
                 // deleted
                 crudDetected = true;
-                deletedMap[item.id] = item;
-                deletedItemsMap[i] = this._map.get(item.id);
+                deletedMap[id] = item;
+                deletedItemsMap[i] = this._map.get(id);
                 this._map.delete(id);
             }
         }
         for (let i = 0, l = currentCollection.length; i < l; i++) {
-            const item = currentCollection[i], id = item.id;
-            if (item && !deletedMap.hasOwnProperty(id) && !updatedMap.hasOwnProperty(id) && !notChangedMap.hasOwnProperty(id)) {
+            const item = currentCollection[i], id = item[trackBy];
+            if (item && !deletedMap.hasOwnProperty(id) && !updatedMap.hasOwnProperty(id) &&
+                !notChangedMap.hasOwnProperty(id)) {
                 // added
                 crudDetected = true;
                 this._map.set(id, { width: itemSize, height: itemSize, method: ItemDisplayMethods.CREATE });
@@ -1553,12 +1564,6 @@ class TrackBox extends CacheMap {
         const displayItems = this.generateDisplayCollection(items, itemConfigMap, { ...metrics, });
         return { displayItems, totalSize: metrics.totalSize, delta: metrics.delta, crudDetected };
     }
-    /**
-     * Finds the closest element in the collection by scrollSize
-     */
-    getNearestItem(scrollSize, items, itemSize, isVertical) {
-        return this.getElementFromStart(scrollSize, items, this._map, itemSize, isVertical);
-    }
     _previousScrollSize = 0;
     updateAdaptiveBufferParams(metrics, totalItemsLength) {
         this.disposeClearBufferSizeTimer();
@@ -1580,41 +1585,18 @@ class TrackBox extends CacheMap {
     disposeClearBufferSizeTimer() {
         clearTimeout(this._resetBufferSizeTimer);
     }
-    /**
-     * Calculates the position of an element based on the given scrollSize
-     */
-    getElementFromStart(scrollSize, collection, map, typicalItemSize, isVertical) {
-        const sizeProperty = isVertical ? HEIGHT_PROP_NAME : WIDTH_PROP_NAME;
-        let offset = 0;
-        for (let i = 0, l = collection.length; i < l; i++) {
-            const item = collection[i], id = item.id;
-            let itemSize = 0;
-            if (map.has(id)) {
-                const bounds = map.get(id);
-                itemSize = bounds ? bounds[sizeProperty] : typicalItemSize;
-            }
-            else {
-                itemSize = typicalItemSize;
-            }
-            if (offset > scrollSize) {
-                return item;
-            }
-            offset += itemSize;
-        }
-        return undefined;
-    }
     /**
      * Calculates the entry into the overscroll area and returns the number of overscroll elements
      */
     getElementNumToEnd(i, collection, map, typicalItemSize, size, isVertical, indexOffset = 0) {
-        const sizeProperty = isVertical ? HEIGHT_PROP_NAME : WIDTH_PROP_NAME;
+        const trackBy = this._trackingPropertyName, sizeProperty = isVertical ? HEIGHT_PROP_NAME : WIDTH_PROP_NAME;
         let offset = 0, num = 0;
         for (let j = collection.length - indexOffset - 1; j >= i; j--) {
-            const item = collection[j], id = item.id;
+            const item = collection[j], id = item[trackBy];
             let itemSize = 0;
             if (map.has(id)) {
-                const bounds = map.get(id);
-                itemSize = bounds ? bounds[sizeProperty] : typicalItemSize;
+                const cache = map.get(id);
+                itemSize = cache ? cache[sizeProperty] : typicalItemSize;
             }
             else {
                 itemSize = typicalItemSize;
@@ -1631,8 +1613,8 @@ class TrackBox extends CacheMap {
      * Calculates list metrics
      */
     recalculateMetrics(options) {
-        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)
+        const { fromItemId, bounds, collection, dynamicSize, isVertical, itemSize, bufferSize: minBufferSize, scrollSize, snap, itemConfigMap, enabledBufferOptimization, previousTotalSize, crudDetected, deletedItemsMap } = options, roundedScrollSize = Math.round(scrollSize);
+        const trackBy = this._trackingPropertyName, 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');
         let leftItemsOffset = 0, rightItemsOffset = 0;
         if (enabledBufferOptimization) {
@@ -1657,41 +1639,40 @@ 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);
+        let isNew = !this._isReseted && (roundedScrollSize === 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;
             for (let i = 0, l = collection.length; i < l; i++) {
-                const ii = i + 1, collectionItem = collection[i], id = collectionItem.id;
+                const ii = i + 1, collectionItem = collection[i], id = collectionItem[trackBy];
                 let componentSize = 0, componentSizeDelta = 0, itemDisplayMethod = ItemDisplayMethods.NOT_CHANGED;
                 if (map.has(id)) {
-                    const bounds = map.get(id) || { width: typicalItemSize, height: typicalItemSize };
-                    componentSize = bounds[sizeProperty];
-                    itemDisplayMethod = bounds?.method ?? ItemDisplayMethods.UPDATE;
-                    const isItemNew = bounds?.[IS_NEW] ?? this._isLazy;
-                    if (!isItemNew && (!this._isLazy || !itemConfigMap[collection[0].id]?.sticky)) {
+                    const cache = map.get(id) || { width: typicalItemSize, height: typicalItemSize };
+                    componentSize = cache[sizeProperty];
+                    itemDisplayMethod = cache?.method ?? ItemDisplayMethods.UPDATE;
+                    const isItemNew = cache?.[IS_NEW] ?? (this._isLazy && this._isReseted);
+                    if (!isItemNew && (!this._isLazy || !itemConfigMap[collection[0][trackBy]]?.sticky) || (roundedScrollSize > 0)) {
                         isNew = false;
                     }
                     switch (itemDisplayMethod) {
                         case ItemDisplayMethods.UPDATE: {
-                            const snapshotBounds = snapshot.get(id);
-                            const componentSnapshotSize = componentSize - (snapshotBounds ? snapshotBounds[sizeProperty] : typicalItemSize);
-                            componentSizeDelta = isItemNew ? 0 : componentSnapshotSize;
-                            map.set(id, { ...bounds, method: ItemDisplayMethods.NOT_CHANGED, isNew: false });
-                            if (isItemNew) {
+                            const snapshotBounds = snapshot.get(id), componentSnapshotSize = componentSize - (snapshotBounds ? snapshotBounds[sizeProperty] : typicalItemSize);
+                            componentSizeDelta = componentSnapshotSize;
+                            map.set(id, { ...cache, method: ItemDisplayMethods.NOT_CHANGED, isNew: false });
+                            if (isNew) {
                                 deltaFromStartCreation += componentSize;
                             }
                             break;
                         }
                         case ItemDisplayMethods.CREATE: {
                             componentSizeDelta = isNew ? 0 : typicalItemSize;
-                            map.set(id, { ...bounds, method: isNew ? ItemDisplayMethods.UPDATE : ItemDisplayMethods.NOT_CHANGED, isNew });
+                            map.set(id, { ...cache, method: ItemDisplayMethods.UPDATE, isNew });
                             break;
                         }
                     }
                 }
                 if (deletedItemsMap.hasOwnProperty(i)) {
-                    const bounds = deletedItemsMap[i], size = bounds?.[sizeProperty] ?? typicalItemSize;
+                    const cache = deletedItemsMap[i], size = cache?.[sizeProperty] ?? typicalItemSize;
                     if (y < scrollSize - size) {
                         leftSizeOfDeletedItems += size;
                     }
@@ -1713,7 +1694,7 @@ class TrackBox extends CacheMap {
                                     y -= size - componentSize;
                                 }
                                 else {
-                                    if (itemConfigMap && !itemConfigMap[collectionItem.id] && y >= scrollSize && y < scrollSize + stickyComponentSize) {
+                                    if (itemConfigMap && !itemConfigMap[id] && y >= scrollSize && y < scrollSize + stickyComponentSize) {
                                         const snappedY = scrollSize - stickyComponentSize;
                                         leftHiddenItemsWeight -= (snappedY - y);
                                         y = snappedY;
@@ -1801,24 +1782,24 @@ class TrackBox extends CacheMap {
             if (crudDetected) {
                 let y = 0;
                 for (let i = 0, l = collection.length; i < l; i++) {
-                    const collectionItem = collection[i], id = collectionItem.id;
+                    const collectionItem = collection[i], id = collectionItem[trackBy];
                     let componentSize = typicalItemSize, itemDisplayMethod = ItemDisplayMethods.NOT_CHANGED;
                     if (map.has(id)) {
-                        const bounds = map.get(id);
-                        itemDisplayMethod = bounds?.method ?? ItemDisplayMethods.UPDATE;
-                        const isItemNew = bounds?.[IS_NEW] ?? this._isLazy;
-                        if (!isItemNew && (!this._isLazy || !itemConfigMap[collection[0].id]?.sticky)) {
+                        const cache = map.get(id);
+                        itemDisplayMethod = cache?.method ?? ItemDisplayMethods.UPDATE;
+                        const isItemNew = cache?.[IS_NEW] ?? this._isLazy;
+                        if (!isItemNew && (!this._isLazy || !itemConfigMap[collection[0][trackBy]]?.sticky)) {
                             isNew = false;
                         }
                         if (itemDisplayMethod === ItemDisplayMethods.CREATE) {
                             if (isNew) {
                                 deltaFromStartCreation += componentSize;
                             }
-                            map.set(id, { ...bounds, method: ItemDisplayMethods.NOT_CHANGED, isNew });
+                            map.set(id, { ...cache, method: ItemDisplayMethods.NOT_CHANGED, isNew });
                         }
                     }
                     if (deletedItemsMap.hasOwnProperty(i)) {
-                        const bounds = deletedItemsMap[i], size = bounds?.[sizeProperty] ?? typicalItemSize;
+                        const cache = deletedItemsMap[i], size = cache?.[sizeProperty] ?? typicalItemSize;
                         if (y < scrollSize - size) {
                             leftSizeOfDeletedItems += size;
                         }
@@ -1908,14 +1889,15 @@ class TrackBox extends CacheMap {
     generateDisplayCollection(items, itemConfigMap, metrics) {
         const { width, height, normalizedItemWidth, normalizedItemHeight, dynamicSize, itemsOnDisplayLength, itemsFromStartToScrollEnd, isVertical, renderItems: renderItemsLength, scrollSize, sizeProperty, snap, snippedPos, startPosition, totalLength, startIndex, typicalItemSize, } = metrics, displayItems = [];
         if (items.length) {
-            const actualSnippedPosition = snippedPos, isSnappingMethodAdvanced = this.isSnappingMethodAdvanced, boundsSize = isVertical ? height : width, actualEndSnippedPosition = boundsSize;
+            const trackBy = this._trackingPropertyName, actualSnippedPosition = snippedPos, isSnappingMethodAdvanced = this.isSnappingMethodAdvanced, boundsSize = isVertical ? height : width, actualEndSnippedPosition = boundsSize;
             let pos = startPosition, renderItems = renderItemsLength, stickyItem, nextSticky, stickyItemIndex = -1, stickyItemSize = 0, endStickyItem, nextEndSticky, endStickyItemIndex = -1, endStickyItemSize = 0, count = 1;
             if (snap) {
                 for (let i = Math.min(itemsFromStartToScrollEnd > 0 ? itemsFromStartToScrollEnd : 0, totalLength - 1); i >= 0; i--) {
-                    if (!items[i]) {
+                    const collectionItem = items[i];
+                    if (!collectionItem) {
                         continue;
                     }
-                    const id = items[i].id, cache = this.get(id), sticky = itemConfigMap[id]?.sticky ?? 0, selectable = itemConfigMap[id]?.selectable ?? true, collapsable = itemConfigMap[id]?.collapsable ?? false, size = dynamicSize ? cache?.[sizeProperty] || typicalItemSize : typicalItemSize;
+                    const id = collectionItem[trackBy], cache = this.get(id), sticky = itemConfigMap[id]?.sticky ?? 0, selectable = itemConfigMap[id]?.selectable ?? true, collapsable = itemConfigMap[id]?.collapsable ?? false, size = dynamicSize ? cache?.[sizeProperty] || typicalItemSize : typicalItemSize;
                     if (sticky === 1) {
                         const isOdd = i % 2 != 0, measures = {
                             x: isVertical ? 0 : actualSnippedPosition,
@@ -1939,7 +1921,7 @@ class TrackBox extends CacheMap {
                             tabIndex: count,
                             zIndex: '1',
                         };
-                        const itemData = items[i];
+                        const itemData = collectionItem;
                         stickyItem = { index: i, id, measures, data: itemData, config };
                         stickyItemIndex = i;
                         stickyItemSize = size;
@@ -1950,12 +1932,13 @@ class TrackBox extends CacheMap {
                 }
             }
             if (snap) {
-                const startIndex = itemsFromStartToScrollEnd + itemsOnDisplayLength - 1;
+                const si = itemsFromStartToScrollEnd + itemsOnDisplayLength - 1, startIndex = si < 0 ? si : si;
                 for (let i = Math.min(startIndex, totalLength > 0 ? totalLength - 1 : 0), l = totalLength; i < l; i++) {
-                    if (!items[i]) {
+                    const collectionItem = items[i];
+                    if (!collectionItem) {
                         continue;
                     }
-                    const id = items[i].id, cache = this.get(id), sticky = itemConfigMap[id]?.sticky ?? 0, selectable = itemConfigMap[id]?.selectable ?? true, collapsable = itemConfigMap[id]?.collapsable ?? false, size = dynamicSize
+                    const id = collectionItem[trackBy], cache = this.get(id), sticky = itemConfigMap[id]?.sticky ?? 0, selectable = itemConfigMap[id]?.selectable ?? true, collapsable = itemConfigMap[id]?.collapsable ?? false, size = dynamicSize
                         ? cache?.[sizeProperty] || typicalItemSize
                         : typicalItemSize;
                     if (sticky === 2) {
@@ -1981,7 +1964,7 @@ class TrackBox extends CacheMap {
                             tabIndex: items.length,
                             zIndex: '1',
                         };
-                        const itemData = items[i];
+                        const itemData = collectionItem;
                         endStickyItem = { index: i, id, measures, data: itemData, config };
                         endStickyItemIndex = i;
                         endStickyItemSize = size;
@@ -1995,10 +1978,11 @@ class TrackBox extends CacheMap {
                 if (i >= totalLength) {
                     break;
                 }
-                if (!items[i]) {
+                const collectionItem = items[i];
+                if (!collectionItem) {
                     continue;
                 }
-                const id = items[i].id, cache = this.get(id), size = dynamicSize ? cache?.[sizeProperty] || typicalItemSize : typicalItemSize;
+                const id = collectionItem[trackBy], cache = this.get(id), size = dynamicSize ? cache?.[sizeProperty] || typicalItemSize : typicalItemSize;
                 if (id !== stickyItem?.id && id !== endStickyItem?.id) {
                     const isOdd = i % 2 != 0, sticky = itemConfigMap[id]?.sticky ?? 0, selectable = itemConfigMap[id]?.selectable ?? true, collapsable = itemConfigMap[id]?.collapsable ?? false, snapped = snap && (sticky === 1 && pos <= scrollSize || sticky === 2 && pos >= scrollSize + boundsSize - size), measures = {
                         x: isVertical ? sticky === 1 ? 0 : boundsSize - size : pos,
@@ -2026,7 +2010,7 @@ class TrackBox extends CacheMap {
                     if (snapped) {
                         config.zIndex = '2';
                     }
-                    const itemData = items[i];
+                    const itemData = collectionItem;
                     const item = { index: i, id, measures, data: itemData, config };
                     if (!nextSticky && stickyItemIndex < i && sticky === 1 && (pos <= scrollSize + size + stickyItemSize)) {
                         item.measures.x = isVertical ? 0 : snapped ? actualSnippedPosition : pos;
@@ -2036,7 +2020,8 @@ class TrackBox extends CacheMap {
                         nextSticky.measures.delta = isVertical ? (item.measures.y - scrollSize) : (item.measures.x - scrollSize);
                         nextSticky.config.zIndex = '3';
                     }
-                    else if (!nextEndSticky && endStickyItemIndex > i && sticky === 2 && (pos >= scrollSize + boundsSize - size - endStickyItemSize)) {
+                    else if (!nextEndSticky && endStickyItemIndex > i && sticky === 2 &&
+                        (pos >= scrollSize + boundsSize - size - endStickyItemSize)) {
                         item.measures.x = isVertical ? 0 : snapped ? actualEndSnippedPosition - size : pos;
                         item.measures.y = isVertical ? snapped ? actualEndSnippedPosition - size : pos : 0;
                         nextEndSticky = item;
@@ -2064,7 +2049,8 @@ class TrackBox extends CacheMap {
                     nextSticky.measures.delta = isVertical ? nextSticky.measures.y - scrollSize : nextSticky.measures.x - scrollSize;
                 }
             }
-            if (nextEndSticky && endStickyItem && nextEndSticky.measures[axis] >= scrollSize + boundsSize - endStickyItemSize - nextEndSticky.measures[sizeProperty]) {
+            if (nextEndSticky && endStickyItem &&
+                (nextEndSticky.measures[axis] >= scrollSize + boundsSize - endStickyItemSize - nextEndSticky.measures[sizeProperty])) {
                 if (nextEndSticky.measures[axis] < scrollSize + boundsSize - endStickyItemSize) {
                     endStickyItem.measures[axis] = nextEndSticky.measures[axis] + nextEndSticky.measures[sizeProperty];
                     endStickyItem.config.snapped = nextEndSticky.config.snapped = false;
@@ -2137,7 +2123,7 @@ const FIREFOX_SCROLLBAR_OVERLAP_SIZE = 12;
 const HORIZONTAL_ALIASES = [Directions.HORIZONTAL, 'horizontal'], VERTICAL_ALIASES = [Directions.VERTICAL, 'vertical'];
 /**
  * Determines the axis membership of a virtual list
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/utils/isDirection.ts
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/utils/is-direction.ts
  * @author Evgenii Grebennikov
  * @email djonnyx@gmail.com
  */
@@ -2151,7 +2137,7 @@ const isDirection = (src, expected) => {
 const NONE_ALIASES = [MethodsForSelecting.NONE, 'none'], SELECT_ALIASES = [MethodsForSelecting.SELECT, 'select'], MULTI_SELECT_ALIASES = [MethodsForSelecting.MULTI_SELECT, 'multi-select'];
 /**
  * Defines the method for selecting list items.
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/utils/isMethodForSelecting.ts
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/utils/is-method-for-selecting.ts
  * @author Evgenii Grebennikov
  * @email djonnyx@gmail.com
  */
@@ -2196,7 +2182,7 @@ const copyValueAsReadonly = (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/20.x/projects/ng-virtual-list/src/lib/utils/isCollectionMode.ts
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/utils/is-collection-mode.ts
  * @author Evgenii Grebennikov
  * @email djonnyx@gmail.com
  */
@@ -2313,11 +2299,12 @@ class NgVirtualListComponent {
             let valid = validateArray(v, true);
             if (valid) {
                 if (v) {
+                    const trackBy = this.trackBy();
                     for (let i = 0, l = v.length; i < l; i++) {
                         const item = v[i];
                         valid = validateObject(item, true);
                         if (valid) {
-                            if (item && !(validateFloat(item.id, true) || validateString(item.id, true))) {
+                            if (item && !(validateFloat(item?.[trackBy], true) || validateString(item?.[trackBy], true))) {
                                 valid = false;
                                 break;
                             }
@@ -2848,11 +2835,11 @@ class NgVirtualListComponent {
         combineLatest([$items, $itemSize]).pipe(takeUntilDestroyed(), map(([items, itemSize]) => ({ items, itemSize })), tap(({ items, itemSize }) => {
             this._trackBox.resetCollection(items, itemSize);
         })).subscribe();
-        combineLatest([$items, $collapsedItemIds, $itemConfigMap]).pipe(takeUntilDestroyed(), tap(([items, collapsedIds, itemConfigMap]) => {
+        combineLatest([$items, $collapsedItemIds, $itemConfigMap, $trackBy]).pipe(takeUntilDestroyed(), tap(([items, collapsedIds, itemConfigMap, trackBy]) => {
             const hiddenItems = new CMap();
             let isCollapsed = false;
             for (let i = 0, l = items.length; i < l; i++) {
-                const item = items[i], id = item.id, group = (itemConfigMap[id]?.sticky ?? 0) > 0, collapsed = collapsedIds.includes(id);
+                const item = items[i], id = item[trackBy], group = (itemConfigMap[id]?.sticky ?? 0) > 0, collapsed = collapsedIds.includes(id);
                 if (group) {
                     isCollapsed = collapsed;
                 }
@@ -2864,7 +2851,7 @@ class NgVirtualListComponent {
             }
             const actualItems = [];
             for (let i = 0, l = items.length; i < l; i++) {
-                const item = items[i], id = item.id;
+                const item = items[i], id = item[trackBy];
                 if (hiddenItems.has(id)) {
                     continue;
                 }
@@ -2996,7 +2983,7 @@ class NgVirtualListComponent {
             this._onResizeHandler();
         })).subscribe();
         const $scrollTo = this.$scrollTo;
-        combineLatest([$container, $scrollTo]).pipe(takeUntilDestroyed(), filter(([container]) => container !== undefined), map(([container, event]) => ({ container: container?.nativeElement, event })), switchMap(({ container, event }) => {
+        combineLatest([$container, $trackBy, $scrollTo]).pipe(takeUntilDestroyed(), filter(([container]) => container !== undefined), map(([container, trackBy, event]) => ({ container: container?.nativeElement, trackBy, event })), switchMap(({ container, trackBy, event }) => {
             const cnt = container, { id, behavior = BEHAVIOR_INSTANT, iteration = 0, isLastIteration = false, scrollCalled = false, cb } = event;
             const items = this._actualItems();
             if (items && items.length) {
@@ -3047,7 +3034,7 @@ class NgVirtualListComponent {
                     }
                 }
                 else {
-                    const index = items.findIndex(item => item.id === id);
+                    const index = items.findIndex(item => item[trackBy] === id);
                     if (index > -1) {
                         const isVertical = this._isVertical, currentScollSize = (isVertical ? cnt.scrollTop : cnt.scrollLeft), scrollSize = index * this.itemSize();
                         if (currentScollSize !== scrollSize) {
@@ -3257,7 +3244,7 @@ class NgVirtualListComponent {
         const behavior = options?.behavior ?? BEHAVIOR_INSTANT, iteration = options?.iteration ?? 0;
         validateScrollBehavior(behavior);
         validateIteration(iteration);
-        const items = this.items(), latItem = items[items.length > 0 ? items.length - 1 : 0], id = latItem.id, actualIteration = validateScrollIteration(iteration);
+        const trackBy = this.trackBy(), items = this.items(), latItem = items[items.length > 0 ? items.length - 1 : 0], id = latItem[trackBy], actualIteration = validateScrollIteration(iteration);
         this._$scrollTo.next({ id, behavior, iteration: actualIteration, isLastIteration: actualIteration === MAX_SCROLL_TO_ITERATIONS, cb });
     }
     ngOnDestroy() {