ng-virtual-list 14.3.2 → 14.4.0

package/fesm2015/ng-virtual-list.mjs

@@ -41,7 +41,8 @@ var SnappingMethods;
 })(SnappingMethods || (SnappingMethods = {}));
 
 const DEFAULT_ITEM_SIZE = 24;
-const DEFAULT_ITEMS_OFFSET = 2;
+const DEFAULT_BUFFER_SIZE = 2;
+const DEFAULT_MAX_BUFFER_SIZE = 100;
 const DEFAULT_LIST_SIZE = 400;
 const DEFAULT_SNAP = false;
 const DEFAULT_ENABLED_BUFFER_OPTIMIZATION = false;
@@ -210,12 +211,12 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
 }
 NgVirtualListItemComponent.__nextId = 0;
 NgVirtualListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgVirtualListItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-NgVirtualListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgVirtualListItemComponent, selector: "ng-virtual-list-item", host: { classAttribute: "ngvl__item" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data\">\r\n    <li #listItem part=\"item\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': data.config.snapped,\r\n        'snapped-out': data.config.snappedOut}\">\r\n        <ng-container *ngIf=\"itemRenderer\">\r\n            <ng-container [ngTemplateOutlet]=\"itemRenderer\"\r\n                [ngTemplateOutletContext]=\"{data: data.data || {}, config: data.config}\"></ng-container>\r\n        </ng-container>\r\n    </li>\r\n</ng-container>", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden;will-change:scroll-position}.ngvl-item__container{margin:0;padding:0;overflow:hidden;background-color:#fff;width:inherit;height:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NgVirtualListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgVirtualListItemComponent, selector: "ng-virtual-list-item", host: { classAttribute: "ngvl__item" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data\">\r\n    <li #listItem part=\"item\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': data.config.snapped,\r\n        'snapped-out': data.config.snappedOut}\">\r\n        <ng-container *ngIf=\"itemRenderer\">\r\n            <ng-container [ngTemplateOutlet]=\"itemRenderer\"\r\n                [ngTemplateOutletContext]=\"{data: data.data || {}, config: data.config}\"></ng-container>\r\n        </ng-container>\r\n    </li>\r\n</ng-container>", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden}.ngvl-item__container{margin:0;padding:0;overflow:hidden;background-color:#fff;width:inherit;height:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgVirtualListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-virtual-list-item', host: {
                         'class': 'ngvl__item',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"data\">\r\n    <li #listItem part=\"item\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': data.config.snapped,\r\n        'snapped-out': data.config.snappedOut}\">\r\n        <ng-container *ngIf=\"itemRenderer\">\r\n            <ng-container [ngTemplateOutlet]=\"itemRenderer\"\r\n                [ngTemplateOutletContext]=\"{data: data.data || {}, config: data.config}\"></ng-container>\r\n        </ng-container>\r\n    </li>\r\n</ng-container>", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden;will-change:scroll-position}.ngvl-item__container{margin:0;padding:0;overflow:hidden;background-color:#fff;width:inherit;height:inherit}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"data\">\r\n    <li #listItem part=\"item\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': data.config.snapped,\r\n        'snapped-out': data.config.snappedOut}\">\r\n        <ng-container *ngIf=\"itemRenderer\">\r\n            <ng-container [ngTemplateOutlet]=\"itemRenderer\"\r\n                [ngTemplateOutletContext]=\"{data: data.data || {}, config: data.config}\"></ng-container>\r\n        </ng-container>\r\n    </li>\r\n</ng-container>", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden}.ngvl-item__container{margin:0;padding:0;overflow:hidden;background-color:#fff;width:inherit;height:inherit}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; } });
 
 const HORIZONTAL_ALIASES = [Directions.HORIZONTAL, 'horizontal'], VERTICAL_ALIASES = [Directions.VERTICAL, 'vertical'];
@@ -684,6 +685,33 @@ class CacheMap extends EventEmitter {
     }
 }
 
+const DEFAULT_EXTRA = {
+    extremumThreshold: 2,
+    bufferSize: 10,
+};
+const bufferInterpolation = (currentBufferValue, array, value, extra) => {
+    const { extremumThreshold = DEFAULT_EXTRA.extremumThreshold, bufferSize = DEFAULT_EXTRA.bufferSize, } = extra !== null && extra !== void 0 ? extra : DEFAULT_EXTRA;
+    if (currentBufferValue < value) {
+        let i = 0;
+        while (i < extremumThreshold) {
+            array.push(value);
+            i++;
+        }
+    }
+    else {
+        array.push(value);
+    }
+    while (array.length >= bufferSize) {
+        array.shift();
+    }
+    const l = array.length;
+    let buffer = 0;
+    for (let i = 0; i < l; i++) {
+        buffer += array[i];
+    }
+    return Math.ceil(buffer / l);
+};
+
 const TRACK_BOX_CHANGE_EVENT_NAME = 'change';
 var ItemDisplayMethods;
 (function (ItemDisplayMethods) {
@@ -692,6 +720,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;
 /**
  * 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
@@ -706,6 +735,15 @@ class TrackBox extends CacheMap {
         this._crudDetected = false;
         this._previousTotalSize = 0;
         this._scrollDelta = 0;
+        this.isAdaptiveBuffer = true;
+        this._bufferSequenceExtraThreshold = DEFAULT_BUFFER_EXTREMUM_THRESHOLD;
+        this._maxBufferSequenceLength = DEFAULT_MAX_BUFFER_SEQUENCE_LENGTH;
+        this._bufferSizeSequence = [];
+        this._bufferSize = 0;
+        this._defaultBufferSize = 0;
+        this._maxBufferSize = this._defaultBufferSize;
+        this._resetBufferSizeTimeout = DEFAULT_RESET_BUFFER_SIZE_TIMEOUT;
+        this._previousScrollSize = 0;
         this._tracker = new Tracker(trackingPropertyName);
     }
     set items(v) {
@@ -756,6 +794,7 @@ class TrackBox extends CacheMap {
         }
     }
     get scrollDelta() { return this._scrollDelta; }
+    get bufferSize() { return this._bufferSize; }
     lifeCircle() {
         this.fireChangeIfNeed();
         this.lifeCircleDo();
@@ -849,6 +888,8 @@ class TrackBox extends CacheMap {
      */
     getItemPosition(id, stickyMap, options) {
         const opt = Object.assign({ fromItemId: id, stickyMap }, options);
+        this._defaultBufferSize = opt.bufferSize;
+        this._maxBufferSize = opt.maxBufferSize;
         const { scrollSize, isFromItemIdFound } = this.recalculateMetrics(Object.assign(Object.assign({}, opt), { dynamicSize: this._crudDetected || opt.dynamicSize, previousTotalSize: this._previousTotalSize, crudDetected: this._crudDetected, deletedItemsMap: this._deletedItemsMap }));
         return isFromItemIdFound ? scrollSize : -1;
     }
@@ -860,8 +901,11 @@ class TrackBox extends CacheMap {
         if (opt.dynamicSize) {
             this.cacheElements();
         }
+        this._defaultBufferSize = opt.bufferSize;
+        this._maxBufferSize = opt.maxBufferSize;
         const metrics = this.recalculateMetrics(Object.assign(Object.assign({}, opt), { collection: items, previousTotalSize: this._previousTotalSize, crudDetected: this._crudDetected, deletedItemsMap }));
         this._delta += metrics.delta;
+        this.updateAdaptiveBufferParams(metrics, items.length);
         this._previousTotalSize = metrics.totalSize;
         this._deletedItemsMap = {};
         this._crudDetected = false;
@@ -877,6 +921,26 @@ class TrackBox extends CacheMap {
     getNearestItem(scrollSize, items, itemSize, isVertical) {
         return this.getElementFromStart(scrollSize, items, this._map, itemSize, isVertical);
     }
+    updateAdaptiveBufferParams(metrics, totalItemsLength) {
+        this.disposeClearBufferSizeTimer();
+        const scrollSize = metrics.scrollSize + this._delta, delta = Math.abs(this._previousScrollSize - scrollSize);
+        this._previousScrollSize = scrollSize;
+        const bufferRawSize = Math.min(Math.floor(delta / metrics.typicalItemSize) * 5, totalItemsLength), minBufferSize = bufferRawSize < this._defaultBufferSize ? this._defaultBufferSize : bufferRawSize, bufferValue = minBufferSize > this._maxBufferSize ? this._maxBufferSize : minBufferSize;
+        this._bufferSize = bufferInterpolation(this._bufferSize, this._bufferSizeSequence, bufferValue, {
+            extremumThreshold: this._bufferSequenceExtraThreshold,
+            bufferSize: this._maxBufferSequenceLength,
+        });
+        this.startResetBufferSizeTimer();
+    }
+    startResetBufferSizeTimer() {
+        this._resetBufferSizeTimer = setTimeout(() => {
+            this._bufferSize = this._defaultBufferSize;
+            this._bufferSizeSequence = [];
+        }, this._resetBufferSizeTimeout);
+    }
+    disposeClearBufferSizeTimer() {
+        clearTimeout(this._resetBufferSizeTimer);
+    }
     /**
      * Calculates the position of an element based on the given scrollSize
      */
@@ -929,30 +993,30 @@ class TrackBox extends CacheMap {
      */
     recalculateMetrics(options) {
         var _a, _b, _c, _d;
-        const { fromItemId, bounds, collection, dynamicSize, isVertical, itemSize, itemsOffset, scrollSize, snap, stickyMap, enabledBufferOptimization, previousTotalSize, crudDetected, deletedItemsMap } = options;
-        const { 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, stickyMap, 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');
         let leftItemsOffset = 0, rightItemsOffset = 0;
         if (enabledBufferOptimization) {
             switch (this.scrollDirection) {
                 case 1: {
                     leftItemsOffset = 0;
-                    rightItemsOffset = itemsOffset;
+                    rightItemsOffset = bufferSize;
                     break;
                 }
                 case -1: {
-                    leftItemsOffset = itemsOffset;
+                    leftItemsOffset = bufferSize;
                     rightItemsOffset = 0;
                     break;
                 }
                 case 0:
                 default: {
-                    leftItemsOffset = rightItemsOffset = itemsOffset;
+                    leftItemsOffset = rightItemsOffset = bufferSize;
                 }
             }
         }
         else {
-            leftItemsOffset = rightItemsOffset = itemsOffset;
+            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;
         // If the list is dynamic or there are new elements in the collection, then it switches to the long algorithm.
@@ -1127,9 +1191,9 @@ class TrackBox extends CacheMap {
             }
             itemsFromStartToScrollEnd = Math.floor(scrollSize / typicalItemSize);
             itemsFromStartToDisplayEnd = Math.ceil((scrollSize + size) / typicalItemSize);
-            leftItemLength = Math.min(itemsFromStartToScrollEnd, itemsOffset);
-            rightItemLength = itemsFromStartToDisplayEnd + itemsOffset > totalLength
-                ? totalLength - itemsFromStartToDisplayEnd : itemsOffset;
+            leftItemLength = Math.min(itemsFromStartToScrollEnd, bufferSize);
+            rightItemLength = itemsFromStartToDisplayEnd + bufferSize > totalLength
+                ? totalLength - itemsFromStartToDisplayEnd : bufferSize;
             leftItemsWeight = leftItemLength * typicalItemSize;
             rightItemsWeight = rightItemLength * typicalItemSize;
             leftHiddenItemsWeight = itemsFromStartToScrollEnd * typicalItemSize;
@@ -1372,6 +1436,7 @@ class TrackBox extends CacheMap {
     }
     dispose() {
         super.dispose();
+        this.disposeClearBufferSizeTimer();
         if (this._tracker) {
             this._tracker.dispose();
         }
@@ -1507,8 +1572,17 @@ class NgVirtualListComponent extends DisposableComponent {
         this.$dynamicSize = this._$dynamicSize.asObservable();
         this._$direction = new BehaviorSubject(DEFAULT_DIRECTION);
         this.$direction = this._$direction.asObservable();
-        this._$itemsOffset = new BehaviorSubject(DEFAULT_ITEMS_OFFSET);
-        this.$itemsOffset = this._$itemsOffset.asObservable();
+        this._$bufferSize = new BehaviorSubject(DEFAULT_BUFFER_SIZE);
+        this.$bufferSize = this._$bufferSize.asObservable();
+        this._maxBufferSizeTransform = (v) => {
+            const bufferSize = this._$bufferSize.getValue();
+            if (v === undefined || v <= bufferSize) {
+                return bufferSize;
+            }
+            return v;
+        };
+        this._$maxBufferSize = new BehaviorSubject(DEFAULT_MAX_BUFFER_SIZE);
+        this.$maxBufferSize = this._$maxBufferSize.asObservable();
         this._$trackBy = new BehaviorSubject(TRACK_BY_PROPERTY_NAME);
         this.$trackBy = this._$trackBy.asObservable();
         this._isVertical = this.getIsVertical();
@@ -1631,7 +1705,7 @@ 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(i => !i ? [] : i)), $scrollSize = this._$scrollSize.asObservable(), $itemSize = this.$itemSize.pipe(map(v => v <= 0 ? DEFAULT_ITEM_SIZE : v)), $itemsOffset = this.$itemsOffset.pipe(map(v => v < 0 ? DEFAULT_ITEMS_OFFSET : v)), $stickyMap = this.$stickyMap.pipe(map(v => !v ? {} : v)), $snap = this.$snap, $isVertical = this.$direction.pipe(map(v => this.getIsVertical(v || DEFAULT_DIRECTION))), $dynamicSize = this.$dynamicSize, $enabledBufferOptimization = this.$enabledBufferOptimization, $snappingMethod = this.$snappingMethod.pipe(map(v => this.getIsSnappingMethodAdvanced(v || DEFAULT_SNAPPING_METHOD))), $cacheVersion = this.$cacheVersion;
+        const $bounds = this._$bounds.asObservable().pipe(filter(b => !!b)), $items = this.$items.pipe(map(i => !i ? [] : i)), $scrollSize = this._$scrollSize.asObservable(), $itemSize = this.$itemSize.pipe(map(v => v <= 0 ? DEFAULT_ITEM_SIZE : v)), $bufferSize = this.$bufferSize.pipe(map(v => v < 0 ? DEFAULT_BUFFER_SIZE : v)), $maxBufferSize = this.$maxBufferSize.pipe(map(v => v < 0 ? DEFAULT_MAX_BUFFER_SIZE : v)), $stickyMap = this.$stickyMap.pipe(map(v => !v ? {} : v)), $snap = this.$snap, $isVertical = this.$direction.pipe(map(v => this.getIsVertical(v || DEFAULT_DIRECTION))), $dynamicSize = this.$dynamicSize, $enabledBufferOptimization = this.$enabledBufferOptimization, $snappingMethod = this.$snappingMethod.pipe(map(v => this.getIsSnappingMethodAdvanced(v || DEFAULT_SNAPPING_METHOD))), $cacheVersion = this.$cacheVersion;
         $isVertical.pipe(takeUntil(this._$unsubscribe), tap(v => {
             this._isVertical = v;
             const el = this._elementRef.nativeElement;
@@ -1644,13 +1718,13 @@ class NgVirtualListComponent extends DisposableComponent {
             this.listenCacheChangesIfNeed(dynamicSize);
         })).subscribe();
         combineLatest([this.$initialized, $bounds, $items, $stickyMap, $scrollSize, $itemSize,
-            $itemsOffset, $snap, $isVertical, $dynamicSize, $enabledBufferOptimization, $cacheVersion,
-        ]).pipe(takeUntil(this._$unsubscribe), distinctUntilChanged(), filter(([initialized]) => !!initialized), switchMap(([, bounds, items, stickyMap, scrollSize, itemSize, itemsOffset, snap, isVertical, dynamicSize, enabledBufferOptimization, cacheVersion,]) => {
+            $bufferSize, $maxBufferSize, $snap, $isVertical, $dynamicSize, $enabledBufferOptimization, $cacheVersion,
+        ]).pipe(takeUntil(this._$unsubscribe), distinctUntilChanged(), filter(([initialized]) => !!initialized), switchMap(([, bounds, items, stickyMap, scrollSize, itemSize, bufferSize, maxBufferSize, snap, isVertical, dynamicSize, enabledBufferOptimization, cacheVersion,]) => {
             var _a, _b, _c, _d;
             let actualScrollSize = (_d = (this._isVertical ? (_b = (_a = this._container) === null || _a === void 0 ? void 0 : _a.nativeElement.scrollTop) !== null && _b !== void 0 ? _b : 0 : (_c = this._container) === null || _c === void 0 ? void 0 : _c.nativeElement.scrollLeft)) !== null && _d !== void 0 ? _d : 0;
             const { width, height } = bounds, opts = {
                 bounds: { width, height }, dynamicSize, isVertical, itemSize,
-                itemsOffset, scrollSize: actualScrollSize, snap, enabledBufferOptimization,
+                bufferSize, maxBufferSize, scrollSize: actualScrollSize, snap, enabledBufferOptimization,
             }, { displayItems, totalSize } = this._trackBox.updateCollection(items, stickyMap, opts);
             this.resetBoundsSize(isVertical, totalSize);
             this.createDisplayComponentsIfNeed(displayItems);
@@ -1783,16 +1857,37 @@ class NgVirtualListComponent extends DisposableComponent {
     ;
     get direction() { return this._$direction.getValue(); }
     /**
-     * Number of elements outside the scope of visibility. Default value is 2.
+     * @deprecated "itemOffset" parameter is deprecated. Use "bufferSize" and "maxBufferSize".
      */
     set itemsOffset(v) {
-        if (this._$itemsOffset.getValue() === v) {
+        throw Error('"itemOffset" parameter is deprecated. Use "bufferSize" and "maxBufferSize".');
+    }
+    ;
+    /**
+     * Number of elements outside the scope of visibility. Default value is 2.
+     */
+    set bufferSize(v) {
+        if (this._$bufferSize.getValue() === v) {
+            return;
+        }
+        this._$bufferSize.next(v);
+    }
+    ;
+    get bufferSize() { return this._$bufferSize.getValue(); }
+    /**
+     * Maximum number of elements outside the scope of visibility. Default value is 100.
+     * If maxBufferSize is set to be greater than bufferSize, then adaptive buffer mode is enabled.
+     * The greater the scroll size, the more elements are allocated for rendering.
+     */
+    set maxBufferSize(v) {
+        const val = this._maxBufferSizeTransform(v);
+        if (this._$maxBufferSize.getValue() === val) {
             return;
         }
-        this._$itemsOffset.next(v);
+        this._$maxBufferSize.next(val);
     }
     ;
-    get itemsOffset() { return this._$itemsOffset.getValue(); }
+    get maxBufferSize() { return this._$maxBufferSize.getValue(); }
     /**
      * The name of the property by which tracking is performed
      */
@@ -1937,7 +2032,7 @@ class NgVirtualListComponent extends DisposableComponent {
                 }
                 const { width, height } = this._$bounds.getValue() || { width: 0, height: 0 }, stickyMap = this.stickyMap, items = this.items, isVertical = this._isVertical, delta = this._trackBox.delta, opts = {
                     bounds: { width, height }, collection: items, dynamicSize, isVertical: this._isVertical, itemSize,
-                    itemsOffset: this.itemsOffset, scrollSize: (isVertical ? container.nativeElement.scrollTop : container.nativeElement.scrollLeft) + delta,
+                    bufferSize: this.bufferSize, maxBufferSize: this.maxBufferSize, scrollSize: (isVertical ? container.nativeElement.scrollTop : container.nativeElement.scrollLeft) + delta,
                     snap: this.snap, fromItemId: id, enabledBufferOptimization: this.enabledBufferOptimization,
                 }, scrollSize = this._trackBox.getItemPosition(id, stickyMap, opts), params = { [isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: scrollSize, behavior };
                 if (scrollSize === -1) {
@@ -2043,7 +2138,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 }], 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", snap: "snap", enabledBufferOptimization: "enabledBufferOptimization", itemRenderer: "itemRenderer", stickyMap: "stickyMap", itemSize: "itemSize", dynamicSize: "dynamicSize", direction: "direction", itemsOffset: "itemsOffset", trackBy: "trackBy", snappingMethod: "snappingMethod" }, outputs: { onScroll: "onScroll", onScrollEnd: "onScrollEnd" }, 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  <ul #list part=\"list\" class=\"ngvl__list\">\r\n    <ng-container #renderersContainer></ng-container>\r\n  </ul>\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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], 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", snap: "snap", enabledBufferOptimization: "enabledBufferOptimization", itemRenderer: "itemRenderer", stickyMap: "stickyMap", itemSize: "itemSize", dynamicSize: "dynamicSize", direction: "direction", itemsOffset: "itemsOffset", bufferSize: "bufferSize", maxBufferSize: "maxBufferSize", trackBy: "trackBy", snappingMethod: "snappingMethod" }, outputs: { onScroll: "onScroll", onScrollEnd: "onScrollEnd" }, 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  <ul #list part=\"list\" class=\"ngvl__list\">\r\n    <ng-container #renderersContainer></ng-container>\r\n  </ul>\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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], 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, 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  <ul #list part=\"list\" class=\"ngvl__list\">\r\n    <ng-container #renderersContainer></ng-container>\r\n  </ul>\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"] }]
@@ -2084,6 +2179,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], itemsOffset: [{
                 type: Input
+            }], bufferSize: [{
+                type: Input
+            }], maxBufferSize: [{
+                type: Input
             }], trackBy: [{
                 type: Input
             }], snappingMethod: [{