ng-virtual-list 21.9.3 → 21.9.5

package/README.md

@@ -751,6 +751,10 @@ Methods
 | scrollToEnd | (cb?: () => void, options?: [IScrollOptions](https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/models/scroll-options.model.ts)) | Scrolls the scroll area to the last item in the collection. |
 | getItemBounds | (id: [Id](https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/types/id.ts), behavior?: ScrollBehavior) => void | Returns the bounds of an element with a given id |
 | focus | [Id](https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/types/id.ts), align: [FocusAlignment](https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/types/focus-alignment.ts) = [FocusAlignments.NONE](https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/enums/focus-alignments.ts) | Focus an list item by a given id. |
+| cacheClean |  | Force clearing the cache. |
+| stopSnappingScrollToEnd |  | Stops the list from snapping to the bottom edge. |
+| updateImmediately |  | Instantly refreshes the list. |
+| markForUpdate |  | Marks the list for an update that will trigger on the next tick. |
 
 <br/>
 
@@ -776,13 +780,13 @@ Properties
 
 | Angular version | ng-virtual-list version | git | npm |
 |--|--|--|--|
-| 20.x | 20.9.2 | [20.x](https://github.com/DjonnyX/ng-virtual-list/tree/20.x) | [20.9.2](https://www.npmjs.com/package/ng-virtual-list/v/20.9.2) |
-| 19.x | 19.9.4 | [19.x](https://github.com/DjonnyX/ng-virtual-list/tree/19.x) | [19.9.4](https://www.npmjs.com/package/ng-virtual-list/v/19.9.4) |
-| 18.x | 18.9.2 | [18.x](https://github.com/DjonnyX/ng-virtual-list/tree/18.x) | [18.9.2](https://www.npmjs.com/package/ng-virtual-list/v/18.9.2) |
-| 17.x | 17.9.2 | [17.x](https://github.com/DjonnyX/ng-virtual-list/tree/17.x) | [17.9.2](https://www.npmjs.com/package/ng-virtual-list/v/17.9.2) |
-| 16.x | 16.9.3 | [16.x](https://github.com/DjonnyX/ng-virtual-list/tree/16.x) | [16.9.3](https://www.npmjs.com/package/ng-virtual-list/v/16.9.3) |
-| 15.x | 15.9.3 | [15.x](https://github.com/DjonnyX/ng-virtual-list/tree/15.x) | [15.9.3](https://www.npmjs.com/package/ng-virtual-list/v/15.9.3) |
-| 14.x | 14.9.3 | [14.x](https://github.com/DjonnyX/ng-virtual-list/tree/14.x) | [14.9.3](https://www.npmjs.com/package/ng-virtual-list/v/14.9.3) |
+| 20.x | 20.9.6 | [20.x](https://github.com/DjonnyX/ng-virtual-list/tree/20.x) | [20.9.6](https://www.npmjs.com/package/ng-virtual-list/v/20.9.6) |
+| 19.x | 19.9.6 | [19.x](https://github.com/DjonnyX/ng-virtual-list/tree/19.x) | [19.9.6](https://www.npmjs.com/package/ng-virtual-list/v/19.9.6) |
+| 18.x | 18.9.4 | [18.x](https://github.com/DjonnyX/ng-virtual-list/tree/18.x) | [18.9.4](https://www.npmjs.com/package/ng-virtual-list/v/18.9.4) |
+| 17.x | 17.9.4 | [17.x](https://github.com/DjonnyX/ng-virtual-list/tree/17.x) | [17.9.4](https://www.npmjs.com/package/ng-virtual-list/v/17.9.4) |
+| 16.x | 16.9.6 | [16.x](https://github.com/DjonnyX/ng-virtual-list/tree/16.x) | [16.9.6](https://www.npmjs.com/package/ng-virtual-list/v/16.9.6) |
+| 15.x | 15.9.6 | [15.x](https://github.com/DjonnyX/ng-virtual-list/tree/15.x) | [15.9.6](https://www.npmjs.com/package/ng-virtual-list/v/15.9.6) |
+| 14.x | 14.9.6 | [14.x](https://github.com/DjonnyX/ng-virtual-list/tree/14.x) | [14.9.6](https://www.npmjs.com/package/ng-virtual-list/v/14.9.6) |
 
 <br/>
 

package/fesm2022/ng-virtual-list.mjs

@@ -345,8 +345,8 @@ class NgVirtualListService {
             this.select(data);
         }
     }
-    update() {
-        this._trackBox?.changes();
+    update(immediately = false) {
+        this._trackBox?.changes(immediately);
     }
     /**
      * Selects a list item
@@ -599,7 +599,6 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
     config = signal({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
     measures = signal(undefined, ...(ngDevMode ? [{ debugName: "measures" }] : []));
     focused = signal(false, ...(ngDevMode ? [{ debugName: "focused" }] : []));
-    reseted = signal(false, ...(ngDevMode ? [{ debugName: "reseted" }] : []));
     part = signal(PART_DEFAULT_ITEM, ...(ngDevMode ? [{ debugName: "part" }] : []));
     maxClickDistance = signal(DEFAULT_CLICK_DISTANCE, ...(ngDevMode ? [{ debugName: "maxClickDistance" }] : []));
     data = signal(undefined, ...(ngDevMode ? [{ debugName: "data" }] : []));
@@ -683,7 +682,10 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
         })).subscribe();
         this.classes = computed(() => {
             const data = this.data(), focused = this.focused();
-            return { [CLASS_NAME_SNAPPED]: data?.config?.snapped ?? false, [CLASS_NAME_SNAPPED_OUT]: data?.config?.snappedOut ?? false, [CLASS_NAME_FOCUS]: focused };
+            return {
+                [CLASS_NAME_SNAPPED]: data?.config?.snapped ?? false, [CLASS_NAME_SNAPPED_OUT]: data?.config?.snappedOut ?? false,
+                [CLASS_NAME_FOCUS]: focused,
+            };
         }, ...(ngDevMode ? [{ debugName: "classes" }] : []));
         this.index = computed(() => {
             return this.config()?.tabIndex ?? -1;
@@ -692,7 +694,7 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
             const data = this.data(), measures = this.measures(), config = this.config();
             return {
                 data: data?.data, prevData: data?.previouseData, nextData: data?.nextData, measures,
-                config, reseted: this.reseted(), index: data?.index ?? -1
+                config, reseted: false, index: data?.index ?? -1
             };
         }, ...(ngDevMode ? [{ debugName: "templateContext" }] : []));
         const $data = toObservable(this.data), $focused = toObservable(this.focused);
@@ -874,7 +876,6 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
         return { width: width > 0 ? width : 1, height: height > 0 ? height : 1, };
     }
     show() {
-        this.reseted.set(false);
         const el = this._elementRef.nativeElement, styles = el.style;
         styles.zIndex = this._data?.config?.zIndex ?? DEFAULT_ZINDEX;
         if (this.regular) {
@@ -891,7 +892,6 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
         }
     }
     hide() {
-        this.reseted.set(true);
         const el = this._elementRef.nativeElement, styles = el.style;
         styles.position = POSITION_ABSOLUTE;
         styles.transform = `${TRANSLATE_3D$1}(${this._data?.config?.isVertical ? 0 : ZEROS_POSITION},${this._data?.config?.isVertical ? 0 : ZEROS_POSITION},0)`;
@@ -1202,14 +1202,14 @@ class CacheMap extends EventEmitter {
     }
     stopLifeCircle() {
         if (this._lifeCircleId !== undefined) {
-            cancelAnimationFrame(this._lifeCircleId);
+            clearTimeout(this._lifeCircleId);
         }
     }
     nextTick(cb) {
         if (this._disposed) {
             return;
         }
-        this._lifeCircleId = requestAnimationFrame(() => {
+        this._lifeCircleId = setTimeout(() => {
             cb();
         });
         return this._lifeCircleId;
@@ -1902,7 +1902,7 @@ class TrackBox extends CacheMap {
      * Calculates list metrics
      */
     recalculateMetrics(options) {
-        const { fromItemId, bounds, collection, dynamicSize, isVertical, itemSize, reversed, bufferSize: minBufferSize, scrollSize, snap, itemConfigMap, enabledBufferOptimization, previousTotalSize, crudDetected, deletedItemsMap } = options, roundedScrollSize = Math.round(scrollSize);
+        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(typicalItemSize !== 0 ? size / typicalItemSize : 0), snippedPos = Math.floor(scrollSize) + this._scrollStartOffset, leftItemsWeights = [], isFromId = fromItemId !== undefined && (typeof fromItemId === 'number' && fromItemId > -1)
             || (typeof fromItemId === 'string' && fromItemId > '-1');
         let leftItemsOffset = 0, rightItemsOffset = 0;
@@ -2173,7 +2173,6 @@ class TrackBox extends CacheMap {
             totalSize,
             typicalItemSize,
             isFromItemIdFound,
-            reversed: options.reversed,
             isUpdating,
         };
         return metrics;
@@ -2187,11 +2186,18 @@ class TrackBox extends CacheMap {
             this.clearScrollDirectionCache();
         }
     }
-    changes() {
+    changes(immediately = false) {
+        if (this.changesDetected()) {
+            return;
+        }
         this.bumpVersion();
+        if (immediately) {
+            this._previousVersion = this._version;
+            this.dispatch(CACHE_BOX_CHANGE_EVENT_NAME, this.version);
+        }
     }
     generateDisplayCollection(items, itemConfigMap, metrics) {
-        const { offsetY, offsetX, width, height, normalizedItemWidth, normalizedItemHeight, dynamicSize, itemsOnDisplayLength, itemsFromStartToScrollEnd, isVertical, renderItems: renderItemsLength, scrollSize, sizeProperty, snap, snippedPos, startPosition, totalLength, startIndex, typicalItemSize, reversed, } = metrics, displayItems = [];
+        const { offsetY, offsetX, width, height, normalizedItemWidth, normalizedItemHeight, dynamicSize, itemsOnDisplayLength, itemsFromStartToScrollEnd, isVertical, renderItems: renderItemsLength, scrollSize, sizeProperty, snap, snippedPos, startPosition, totalLength, startIndex, typicalItemSize, } = metrics, displayItems = [];
         if (items.length) {
             const trackBy = this._trackingPropertyName, actualSnippedPosition = snippedPos, isSnappingMethodAdvanced = this.isSnappingMethodAdvanced, boundsSize = isVertical ? height : width, actualEndSnippedPosition = scrollSize + boundsSize - this._scrollEndOffset, positionOffset = isVertical ? offsetY : offsetX;
             let pos = startPosition, renderItems = renderItemsLength, stickyItem, nextSticky, stickyItemIndex = -1, stickyItemSize = 0, endStickyItem, nextEndSticky, endStickyItemIndex = -1, endStickyItemSize = 0, count = 1;
@@ -2307,7 +2313,7 @@ class TrackBox extends CacheMap {
                 if (iterations > totalLength || i >= totalLength) {
                     break;
                 }
-                const collectionItem = items[reversed ? (items.length - i + 1) : i];
+                const collectionItem = items[i];
                 if (!collectionItem) {
                     continue;
                 }
@@ -3663,11 +3669,11 @@ class NgScrollerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgScrollerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: NgScrollerComponent, isStandalone: true, selector: "ng-scroller", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, focusedElement: { classPropertyName: "focusedElement", publicName: "focusedElement", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null }, startOffset: { classPropertyName: "startOffset", publicName: "startOffset", isSignal: true, isRequired: false, transformFunction: null }, endOffset: { classPropertyName: "endOffset", publicName: "endOffset", isSignal: true, isRequired: false, transformFunction: null }, scrollbarTheme: { classPropertyName: "scrollbarTheme", publicName: "scrollbarTheme", isSignal: true, isRequired: false, transformFunction: null }, scrollbarMinSize: { classPropertyName: "scrollbarMinSize", publicName: "scrollbarMinSize", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "scrollContent", first: true, predicate: ["scrollContent"], descendants: true, isSignal: true }, { propertyName: "scrollViewport", first: true, predicate: ["scrollViewport"], descendants: true, isSignal: true }, { propertyName: "cdkScrollable", first: true, predicate: ["scrollViewport"], descendants: true, read: CdkScrollable }, { propertyName: "scrollBar", first: true, predicate: ["scrollBar"], descendants: true, read: NgScrollBarComponent }], ngImport: i0, template: "<div localeSensitive [langTextDir]=\"langTextDir()\" [listDir]=\"direction()\" class=\"ngvl__container\" [ngClass]=\"containerClasses()\">\r\n    <div #scrollViewport cdkScrollable part=\"scroller\" class=\"ngvl__scroller\">\r\n        <div #scrollContent [attr.aria-orientation]=\"direction()\" [attr.aria-activedescendant]=\"focusedElement()\"\r\n            tabindex=\"0\" part=\"list\" class=\"ngvl__list\" [ngClass]=\"actualClasses()\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n    <ng-scroll-bar #scrollBar [isVertical]=\"isVertical()\" [size]=\"thumbSize()\" [theme]=\"scrollbarTheme()\" [position]=\"thumbPosition()\"\r\n        [thumbGradientPositions]=\"thumbGradientPositions()\" [loading]=\"loading()\" [prepared]=\"preparedSignal()\" [show]=\"thumbShow()\"\r\n        (onDrag)=\"onScrollBarDragHandler($event)\"></ng-scroll-bar>\r\n</div>", styles: [":host{position:relative;overflow:hidden;-webkit-user-select:none;user-select:none}.ngvl__container{position:relative;overflow:hidden;display:grid;width:100%;height:100%;cursor:grab}.ngvl__container.grabbing{cursor:grabbing}.ngvl__container.horizontal{grid-template-rows:1fr auto}.ngvl__container.horizontal .ngvl__list{display:inline-flex}.ngvl__container.horizontal .ngvl__scroller{overflow:hidden}.ngvl__container.vertical{grid-template-columns:1fr auto}.ngvl__container.vertical .ngvl__scroller{overflow:hidden}.ngvl__scroller{display:block;position:relative;overflow:hidden;width:100%;height:100%}.ngvl__list{position:absolute;list-style:none;padding:0;margin:0;width:100%;height:100%;opacity:0}.ngvl__list.prepared{opacity:1;overflow:hidden}.ngvl__list.prepared.wait-for-preparation{transition:opacity .15s ease-out .1s}.ngvl__list.ready-to-start{transition:height .15s ease-out}.ngvl__list.ready-to-start.wait-for-preparation{transition:height .15s ease-out,opacity .15s ease-out .1s}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: LocaleSensitiveDirective, selector: "[localeSensitive]", inputs: ["langTextDir", "listDir"] }, { kind: "component", type: NgScrollBarComponent, selector: "ng-scroll-bar", inputs: ["loading", "isVertical", "position", "thumbGradientPositions", "size", "theme", "prepared", "show"], outputs: ["onDrag"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: NgScrollerComponent, isStandalone: true, selector: "ng-scroller", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, focusedElement: { classPropertyName: "focusedElement", publicName: "focusedElement", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null }, startOffset: { classPropertyName: "startOffset", publicName: "startOffset", isSignal: true, isRequired: false, transformFunction: null }, endOffset: { classPropertyName: "endOffset", publicName: "endOffset", isSignal: true, isRequired: false, transformFunction: null }, scrollbarTheme: { classPropertyName: "scrollbarTheme", publicName: "scrollbarTheme", isSignal: true, isRequired: false, transformFunction: null }, scrollbarMinSize: { classPropertyName: "scrollbarMinSize", publicName: "scrollbarMinSize", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "scrollContent", first: true, predicate: ["scrollContent"], descendants: true, isSignal: true }, { propertyName: "scrollViewport", first: true, predicate: ["scrollViewport"], descendants: true, isSignal: true }, { propertyName: "cdkScrollable", first: true, predicate: ["scrollViewport"], descendants: true, read: CdkScrollable }, { propertyName: "scrollBar", first: true, predicate: ["scrollBar"], descendants: true, read: NgScrollBarComponent }], ngImport: i0, template: "<div localeSensitive [langTextDir]=\"langTextDir()\" [listDir]=\"direction()\" class=\"ngvl__container\" [ngClass]=\"containerClasses()\">\r\n    <div #scrollViewport cdkScrollable part=\"scroller\" class=\"ngvl__scroller\">\r\n        <div #scrollContent [attr.aria-orientation]=\"direction()\" [attr.aria-activedescendant]=\"focusedElement()\"\r\n            tabindex=\"0\" part=\"list\" class=\"ngvl__list\" [ngClass]=\"actualClasses()\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n    <ng-scroll-bar #scrollBar [isVertical]=\"isVertical()\" [size]=\"thumbSize()\" [theme]=\"scrollbarTheme()\" [position]=\"thumbPosition()\"\r\n        [thumbGradientPositions]=\"thumbGradientPositions()\" [loading]=\"loading()\" [prepared]=\"preparedSignal()\" [show]=\"thumbShow()\"\r\n        (onDrag)=\"onScrollBarDragHandler($event)\"></ng-scroll-bar>\r\n</div>", styles: [":host{position:relative;overflow:hidden;-webkit-user-select:none;user-select:none}.ngvl__container{position:relative;overflow:hidden;display:grid;width:100%;height:100%;cursor:grab}.ngvl__container.grabbing{cursor:grabbing}.ngvl__container.horizontal{grid-template-rows:1fr auto}.ngvl__container.horizontal .ngvl__list{display:inline-flex}.ngvl__container.horizontal .ngvl__scroller{overflow:hidden}.ngvl__container.vertical{grid-template-columns:1fr auto}.ngvl__container.vertical .ngvl__scroller{overflow:hidden}.ngvl__scroller{display:block;position:relative;overflow:hidden;width:100%;height:100%}.ngvl__list{position:absolute;list-style:none;padding:0;margin:0;width:100%;height:100%}.ngvl__list.prepared{overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: LocaleSensitiveDirective, selector: "[localeSensitive]", inputs: ["langTextDir", "listDir"] }, { kind: "component", type: NgScrollBarComponent, selector: "ng-scroll-bar", inputs: ["loading", "isVertical", "position", "thumbGradientPositions", "size", "theme", "prepared", "show"], outputs: ["onDrag"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgScrollerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-scroller', imports: [CommonModule, CdkScrollable, LocaleSensitiveDirective, NgScrollBarComponent], template: "<div localeSensitive [langTextDir]=\"langTextDir()\" [listDir]=\"direction()\" class=\"ngvl__container\" [ngClass]=\"containerClasses()\">\r\n    <div #scrollViewport cdkScrollable part=\"scroller\" class=\"ngvl__scroller\">\r\n        <div #scrollContent [attr.aria-orientation]=\"direction()\" [attr.aria-activedescendant]=\"focusedElement()\"\r\n            tabindex=\"0\" part=\"list\" class=\"ngvl__list\" [ngClass]=\"actualClasses()\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n    <ng-scroll-bar #scrollBar [isVertical]=\"isVertical()\" [size]=\"thumbSize()\" [theme]=\"scrollbarTheme()\" [position]=\"thumbPosition()\"\r\n        [thumbGradientPositions]=\"thumbGradientPositions()\" [loading]=\"loading()\" [prepared]=\"preparedSignal()\" [show]=\"thumbShow()\"\r\n        (onDrag)=\"onScrollBarDragHandler($event)\"></ng-scroll-bar>\r\n</div>", styles: [":host{position:relative;overflow:hidden;-webkit-user-select:none;user-select:none}.ngvl__container{position:relative;overflow:hidden;display:grid;width:100%;height:100%;cursor:grab}.ngvl__container.grabbing{cursor:grabbing}.ngvl__container.horizontal{grid-template-rows:1fr auto}.ngvl__container.horizontal .ngvl__list{display:inline-flex}.ngvl__container.horizontal .ngvl__scroller{overflow:hidden}.ngvl__container.vertical{grid-template-columns:1fr auto}.ngvl__container.vertical .ngvl__scroller{overflow:hidden}.ngvl__scroller{display:block;position:relative;overflow:hidden;width:100%;height:100%}.ngvl__list{position:absolute;list-style:none;padding:0;margin:0;width:100%;height:100%;opacity:0}.ngvl__list.prepared{opacity:1;overflow:hidden}.ngvl__list.prepared.wait-for-preparation{transition:opacity .15s ease-out .1s}.ngvl__list.ready-to-start{transition:height .15s ease-out}.ngvl__list.ready-to-start.wait-for-preparation{transition:height .15s ease-out,opacity .15s ease-out .1s}\n"] }]
+            args: [{ selector: 'ng-scroller', imports: [CommonModule, CdkScrollable, LocaleSensitiveDirective, NgScrollBarComponent], template: "<div localeSensitive [langTextDir]=\"langTextDir()\" [listDir]=\"direction()\" class=\"ngvl__container\" [ngClass]=\"containerClasses()\">\r\n    <div #scrollViewport cdkScrollable part=\"scroller\" class=\"ngvl__scroller\">\r\n        <div #scrollContent [attr.aria-orientation]=\"direction()\" [attr.aria-activedescendant]=\"focusedElement()\"\r\n            tabindex=\"0\" part=\"list\" class=\"ngvl__list\" [ngClass]=\"actualClasses()\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n    <ng-scroll-bar #scrollBar [isVertical]=\"isVertical()\" [size]=\"thumbSize()\" [theme]=\"scrollbarTheme()\" [position]=\"thumbPosition()\"\r\n        [thumbGradientPositions]=\"thumbGradientPositions()\" [loading]=\"loading()\" [prepared]=\"preparedSignal()\" [show]=\"thumbShow()\"\r\n        (onDrag)=\"onScrollBarDragHandler($event)\"></ng-scroll-bar>\r\n</div>", styles: [":host{position:relative;overflow:hidden;-webkit-user-select:none;user-select:none}.ngvl__container{position:relative;overflow:hidden;display:grid;width:100%;height:100%;cursor:grab}.ngvl__container.grabbing{cursor:grabbing}.ngvl__container.horizontal{grid-template-rows:1fr auto}.ngvl__container.horizontal .ngvl__list{display:inline-flex}.ngvl__container.horizontal .ngvl__scroller{overflow:hidden}.ngvl__container.vertical{grid-template-columns:1fr auto}.ngvl__container.vertical .ngvl__scroller{overflow:hidden}.ngvl__scroller{display:block;position:relative;overflow:hidden;width:100%;height:100%}.ngvl__list{position:absolute;list-style:none;padding:0;margin:0;width:100%;height:100%}.ngvl__list.prepared{overflow:hidden}\n"] }]
         }], ctorParameters: () => [], propDecorators: { scrollContent: [{ type: i0.ViewChild, args: ['scrollContent', { isSignal: true }] }], cdkScrollable: [{
                 type: ViewChild,
                 args: ['scrollViewport', { read: CdkScrollable }]
@@ -4514,38 +4520,42 @@ class NgVirtualListComponent {
         });
         let prepared = false, readyToStart = false, isUserScrolling = false;
         this.$prepared.pipe(takeUntilDestroyed(), distinctUntilChanged(), tap(v => {
-            const waitForPreparation = this.waitForPreparation();
-            if (waitForPreparation) {
-                if (!v) {
-                    prepared = readyToStart = v;
+            if (!v) {
+                this.cacheClean();
+                readyToStart = isUserScrolling = false;
+                prepared = readyToStart = v;
+                const waitForPreparation = this.waitForPreparation();
+                if (waitForPreparation) {
                     const scrollerComponent = this._scrollerComponent();
                     if (scrollerComponent) {
                         scrollerComponent.prepared = v;
                     }
                     this.classes.set({ prepared: v, [WAIT_FOR_PREPARATION]: waitForPreparation });
-                    this.cacheClean();
                 }
-            }
-            else {
-                prepared = readyToStart = true;
-                const scrollerComponent = this._scrollerComponent();
-                if (scrollerComponent) {
-                    scrollerComponent.prepared = true;
+                else {
+                    const scrollerComponent = this._scrollerComponent();
+                    if (scrollerComponent) {
+                        scrollerComponent.prepared = true;
+                    }
+                    this.classes.set({ prepared: true, [READY_TO_START]: true, [WAIT_FOR_PREPARATION]: waitForPreparation });
+                    this.updateImmediately();
                 }
-                this.classes.set({ prepared: true, [READY_TO_START]: true, [WAIT_FOR_PREPARATION]: waitForPreparation });
             }
-        }), filter$1(v => !!v), debounceTime(0), takeUntilDestroyed(this._destroyRef), tap(v => {
+        }), filter$1(v => !!v), delay(0), takeUntilDestroyed(this._destroyRef), tap(v => {
             prepared = v;
+            this.updateImmediately();
         }), delay(0), takeUntilDestroyed(this._destroyRef), tap(v => {
             const waitForPreparation = this.waitForPreparation(), scrollerComponent = this._scrollerComponent(), val = v || !waitForPreparation;
             if (scrollerComponent) {
                 scrollerComponent.prepared = val;
             }
             this.classes.set({ prepared: val, [WAIT_FOR_PREPARATION]: waitForPreparation });
+            this.updateImmediately();
         }), delay(1000), takeUntilDestroyed(this._destroyRef), tap(v => {
             const waitForPreparation = this.waitForPreparation();
             readyToStart = v;
             this.classes.set({ prepared: true, [READY_TO_START]: true, [WAIT_FOR_PREPARATION]: waitForPreparation });
+            this.updateImmediately();
         })).subscribe();
         this._service.$focusedId.pipe(takeUntilDestroyed(), tap(v => {
             this.focusedElement.set(v ?? undefined);
@@ -4693,14 +4703,12 @@ class NgVirtualListComponent {
                 const { width, height, x, y } = bounds, viewportSize = (isVertical ? height : width);
                 let scrollLength = Math.round(this._totalSize()) ?? 0, actualScrollLength = Math.round(scrollLength === 0 ? 0 : scrollLength > viewportSize ? scrollLength - viewportSize : scrollLength), roundedMaxPosition = Math.round(actualScrollLength), scrollPosition = Math.round(actualScrollSize);
                 const opts = {
-                    bounds: { width, height, x, y }, dynamicSize, isVertical, itemSize, reversed: false,
+                    bounds: { width, height, x, y }, dynamicSize, isVertical, itemSize,
                     bufferSize, maxBufferSize, scrollSize: actualScrollSize, snap, enabledBufferOptimization,
                 };
-                if (snapScrollToBottom && scrollLength > viewportSize && !prepared) {
-                    const { totalSize: calculatedTotalSize } = this._trackBox.getMetrics(items, itemConfigMap, { ...opts, reversed: true });
-                    totalSize = calculatedTotalSize;
+                if (snapScrollToBottom && !prepared) {
                     actualScrollSize = (totalSize > viewportSize ? totalSize - viewportSize : 0);
-                    const { displayItems: calculatedDisplayItems, totalSize: calculatedTotalSize1 } = this._trackBox.updateCollection(items, itemConfigMap, { ...opts, reversed: true, scrollSize: actualScrollSize });
+                    const { displayItems: calculatedDisplayItems, totalSize: calculatedTotalSize1 } = this._trackBox.updateCollection(items, itemConfigMap, { ...opts, scrollSize: actualScrollSize });
                     displayItems = calculatedDisplayItems;
                     totalSize = calculatedTotalSize1;
                     scrollLength = Math.round(totalSize) ?? 0;
@@ -4905,13 +4913,12 @@ class NgVirtualListComponent {
                     if (dynamicSize) {
                         const { width, height, x, y } = this._bounds() || { x: 0, y: 0, width: DEFAULT_LIST_SIZE, height: DEFAULT_LIST_SIZE }, itemConfigMap = this.itemConfigMap(), items = this._actualItems(), isVertical = this._isVertical, currentScollSize = (isVertical ? scrollerComponent.scrollTop : scrollerComponent.scrollLeft), delta = this._trackBox.delta, opts = {
                             bounds: { width, height, x, y }, collection: items, dynamicSize, isVertical: this._isVertical, itemSize,
-                            bufferSize: this.bufferSize(), maxBufferSize: this.maxBufferSize(), reversed: false,
+                            bufferSize: this.bufferSize(), maxBufferSize: this.maxBufferSize(),
                             scrollSize: (isVertical ? scrollerComponent.scrollTop : scrollerComponent.scrollLeft) + delta,
                             snap: this.snap(), fromItemId: id, enabledBufferOptimization: this.enabledBufferOptimization(),
                         }, scrollSize = this._trackBox.getItemPosition(id, itemConfigMap, opts), params = {
                             [isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: scrollSize, behavior: BEHAVIOR_INSTANT,
-                            fireUpdate: false,
-                            blending: true,
+                            fireUpdate: false, blending: false,
                         };
                         if (scrollSize === -1) {
                             return of([true, { id, scroller: scrollerComponent, scrollCalled, cb }]);
@@ -4954,7 +4961,7 @@ class NgVirtualListComponent {
                                 _$scrollToEndDuringUpdateCanceller.next(1);
                                 const params = {
                                     [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: scrollSize,
-                                    behavior: BEHAVIOR_INSTANT, blending: true,
+                                    behavior: BEHAVIOR_INSTANT, blending: false,
                                 };
                                 scrollerComponent?.scrollTo?.(params);
                                 return of([true, { id, scroller: scrollerComponent, cb }]).pipe(delay(1));
@@ -5194,6 +5201,9 @@ class NgVirtualListComponent {
             this._trackBox.changes();
         }
     }
+    /**
+     * Force clearing the cache.
+     */
     cacheClean() {
         this._trackBox.cacheClean();
         this._collapsedItemIds.set([]);
@@ -5205,7 +5215,11 @@ class NgVirtualListComponent {
         if (scrollerComponent) {
             scrollerComponent.reset();
         }
+        this._$prepared.next(false);
     }
+    /**
+     * Stops the list from snapping to the bottom edge.
+     */
     stopSnappingScrollToEnd() {
         const scroller = this._scrollerComponent();
         this._isScrollFinished.set(false);
@@ -5214,6 +5228,18 @@ class NgVirtualListComponent {
             scroller.stopScrolling();
         }
     }
+    /**
+     * Instantly refreshes the list.
+     */
+    updateImmediately() {
+        this._service.update(true);
+    }
+    /**
+     * Marks the list for an update that will trigger on the next tick.
+     */
+    markForUpdate() {
+        this._service.update();
+    }
     ngOnDestroy() {
         this.dispose();
     }