ng-virtual-list 21.10.2 → 21.10.3

package/README.md

@@ -101,7 +101,7 @@ npm i ng-virtual-list
 
 ## 🚀 Quick Start
 ```html
-<ng-virtual-list [items]="items" [bufferSize]="5" [itemRenderer]="itemRenderer" [itemSize]="64"></ng-virtual-list>
+<ng-virtual-list [items]="items" [bufferSize]="5" [itemRenderer]="itemRenderer" [dynamicSize]="false" [itemSize]="64"></ng-virtual-list>
 
 <ng-template #itemRenderer let-data="data">
   @if (data) {
@@ -124,7 +124,7 @@ items = Array.from({ length: 100000 }, (_, i) => ({ id: i, name: `Item #${i}` })
 Template:
 ```html
 <ng-virtual-list class="list" direction="horizontal" [items]="horizontalItems" [bufferSize]="1" [maxBufferSize]="5"
-    [itemRenderer]="horizontalItemRenderer" [itemSize]="64" [methodForSelecting]="'select'"
+    [itemRenderer]="horizontalItemRenderer" [dynamicSize]="false" [itemSize]="64" [methodForSelecting]="'select'"
     [selectedIds]="2" (onSelect)="onSelect($event)" (onItemClick)="onItemClick($event)"></ng-virtual-list>
 
 <ng-template #horizontalItemRenderer let-data="data" let-config="config">
@@ -174,7 +174,7 @@ export class AppComponent {
 Template:
 ```html
 <ng-virtual-list class="list" direction="horizontal" [items]="horizontalGroupItems" [itemRenderer]="horizontalGroupItemRenderer"
-    [bufferSize]="1" [maxBufferSize]="5" [itemConfigMap]="horizontalGroupItemConfigMap" [itemSize]="54" [snap]="true"
+    [bufferSize]="1" [maxBufferSize]="5" [itemConfigMap]="horizontalGroupItemConfigMap" [dynamicSize]="false" [itemSize]="54" [snap]="true"
     methodForSelecting="multi-select" [selectedIds]="[3,2]" (onSelect)="onSelect($event)" (onItemClick)="onItemClick($event)"></ng-virtual-list>
 
 <ng-template #horizontalGroupItemRenderer let-data="data" let-config="config">
@@ -248,7 +248,7 @@ export class AppComponent {
 Template:
 ```html
 <ng-virtual-list class="list simple" [items]="items" [bufferSize]="1" [maxBufferSize]="5" [itemRenderer]="itemRenderer"
-  [itemSize]="40"></ng-virtual-list>
+  [dynamicSize]="false" [itemSize]="40"></ng-virtual-list>
 
 <ng-template #itemRenderer let-data="data">
   @if (data) {
@@ -289,7 +289,7 @@ export class AppComponent {
 Template:
 ```html
 <ng-virtual-list class="list simple" [items]="groupItems" [bufferSize]="1" [maxBufferSize]="5" [itemRenderer]="groupItemRenderer"
-    [itemConfigMap]="groupItemConfigMap" [itemSize]="40" [snap]="false"></ng-virtual-list>
+    [itemConfigMap]="groupItemConfigMap" [dynamicSize]="false" [itemSize]="40" [snap]="false"></ng-virtual-list>
 
 <ng-template #groupItemRenderer let-data="data">
   @if (data) {
@@ -316,7 +316,7 @@ Template:
 Template (with snapping):
 ```html
 <ng-virtual-list class="list simple" [items]="groupItems" [bufferSize]="1" [maxBufferSize]="5" [itemRenderer]="groupItemRenderer"
-    [itemConfigMap]="groupItemConfigMap" [itemSize]="40" [snap]="true"></ng-virtual-list>
+    [itemConfigMap]="groupItemConfigMap" [dynamicSize]="false" [itemSize]="40" [snap]="true"></ng-virtual-list>
 
 <ng-template #groupItemRenderer let-data="data">
   @if (data) {
@@ -381,7 +381,7 @@ Template
 </div>
 
 <ng-virtual-list #virtualList class="list" [items]="items" [itemRenderer]="itemRenderer" [bufferSize]="1" [maxBufferSize]="5"
-  [itemSize]="40"></ng-virtual-list>
+  [dynamicSize]="false" [itemSize]="40"></ng-virtual-list>
 
 <ng-template #itemRenderer let-data="data">
 @if (data) {
@@ -435,7 +435,7 @@ Virtual list with height-adjustable elements.
 Template
 ```html
 <ng-virtual-list #dynamicList class="list" [items]="groupDynamicItems" [itemRenderer]="groupItemRenderer" [bufferSize]="1" [maxBufferSize]="5"
-      [itemConfigMap]="groupDynamicItemConfigMap" [dynamicSize]="true" [snap]="true"></ng-virtual-list>
+      [itemConfigMap]="groupDynamicItemConfigMap" [snap]="true"></ng-virtual-list>
 
 <ng-template #groupItemRenderer let-data="data">
   @if (data) {
@@ -649,7 +649,7 @@ Inputs
 |---|---|---|
 | id | number | Readonly. Returns the unique identifier of the component. | 
 | items | [IVirtualListCollection](https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/models/collection.model.ts) | Collection of list items. The collection of elements must be immutable. |
-| itemSize | number? = 24 | If direction = 'vertical', then the height of a typical element. If direction = 'horizontal', then the width of a typical element. Ignored if the dynamicSize property is true. |
+| itemSize | number? = 24 | If direction = 'vertical', then the height of a typical element. If direction = 'horizontal', then the width of a typical element. If the dynamicSize property is true, the items in the list can have different sizes, and you must specify the itemSize property to adjust the sizes of the items in the unallocated area. |
 | bufferSize | number? = 2 | Number of elements outside the scope of visibility. Default value is 2. |
 | maxBufferSize | number? = 10 | Maximum number of elements outside the scope of visibility. Default value is 10. 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. |
 | itemRenderer | TemplateRef | Rendering element template. |
@@ -661,7 +661,7 @@ Inputs
 | snap | boolean? = false | Determines whether elements will snap. Default value is "false". |
 | snappingMethod | [SnappingMethod? = 'normal'](https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/enums/snapping-method.ts) | Snapping method. 'normal' - Normal group rendering. 'advanced' - The group is rendered on a transparent background. 'chat' - The group is rendered on a background. List items below the group are not rendered. |
 | direction | [Direction? = 'vertical'](https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/enums/direction.ts) | Determines the direction in which elements are placed. Default value is "vertical". |
-| dynamicSize | boolean? = false | If true then the items in the list can have different sizes and the itemSize property is ignored. If false then the items in the list have a fixed size specified by the itemSize property. The default value is false. |
+| dynamicSize | boolean? = true | If true, items in the list may have different sizes, and the itemSize property must be specified to adjust the sizes of items in the unallocated area. If false then the items in the list have a fixed size specified by the itemSize property. The default value is true. |
 | enabledBufferOptimization | boolean? = true | Experimental! Enables buffer optimization. Can only be used if items in the collection are not added or updated. |
 | trackBy | string? = 'id' | The name of the property by which tracking is performed. |
 | selectedIds | Array<[Id](https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/types/id.ts)> \| [Id](https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/types/id.ts) \| undefined | Sets the selected items. |
@@ -737,13 +737,13 @@ Properties
 
 | Angular version | ng-virtual-list version | git | npm |
 |--|--|--|--|
-| 20.x | 20.10.3 | [20.x](https://github.com/DjonnyX/ng-virtual-list/tree/20.x) | [20.10.3](https://www.npmjs.com/package/ng-virtual-list/v/20.10.3) |
-| 19.x | 19.10.1 | [19.x](https://github.com/DjonnyX/ng-virtual-list/tree/19.x) | [19.10.1](https://www.npmjs.com/package/ng-virtual-list/v/19.10.1) |
-| 18.x | 18.10.1 | [18.x](https://github.com/DjonnyX/ng-virtual-list/tree/18.x) | [18.10.1](https://www.npmjs.com/package/ng-virtual-list/v/18.10.1) |
-| 17.x | 17.10.1 | [17.x](https://github.com/DjonnyX/ng-virtual-list/tree/17.x) | [17.10.1](https://www.npmjs.com/package/ng-virtual-list/v/17.10.1) |
-| 16.x | 16.10.0 | [16.x](https://github.com/DjonnyX/ng-virtual-list/tree/16.x) | [16.10.0](https://www.npmjs.com/package/ng-virtual-list/v/16.10.0) |
-| 15.x | 15.10.0 | [15.x](https://github.com/DjonnyX/ng-virtual-list/tree/15.x) | [15.10.0](https://www.npmjs.com/package/ng-virtual-list/v/15.10.0) |
-| 14.x | 14.10.1 | [14.x](https://github.com/DjonnyX/ng-virtual-list/tree/14.x) | [14.10.1](https://www.npmjs.com/package/ng-virtual-list/v/14.10.1) |
+| 20.x | 20.10.4 | [20.x](https://github.com/DjonnyX/ng-virtual-list/tree/20.x) | [20.10.4](https://www.npmjs.com/package/ng-virtual-list/v/20.10.4) |
+| 21.x | 19.10.2 | [21.x](https://github.com/DjonnyX/ng-virtual-list/tree/21.x) | [19.10.2](https://www.npmjs.com/package/ng-virtual-list/v/19.10.2) |
+| 18.x | 18.10.2 | [18.x](https://github.com/DjonnyX/ng-virtual-list/tree/18.x) | [18.10.2](https://www.npmjs.com/package/ng-virtual-list/v/18.10.2) |
+| 17.x | 17.10.2 | [17.x](https://github.com/DjonnyX/ng-virtual-list/tree/17.x) | [17.10.2](https://www.npmjs.com/package/ng-virtual-list/v/17.10.2) |
+| 16.x | 16.10.1 | [16.x](https://github.com/DjonnyX/ng-virtual-list/tree/16.x) | [16.10.1](https://www.npmjs.com/package/ng-virtual-list/v/16.10.1) |
+| 15.x | 15.10.1 | [15.x](https://github.com/DjonnyX/ng-virtual-list/tree/15.x) | [15.10.1](https://www.npmjs.com/package/ng-virtual-list/v/15.10.1) |
+| 14.x | 14.10.2 | [14.x](https://github.com/DjonnyX/ng-virtual-list/tree/14.x) | [14.10.2](https://www.npmjs.com/package/ng-virtual-list/v/14.10.2) |
 <br/>
 
 ## 🤝 Contributing

package/fesm2022/ng-virtual-list.mjs

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Injectable, output, inject, ElementRef, DestroyRef, Input, Directive, signal, computed, ChangeDetectionStrategy, Component, viewChild, input, effect, ViewEncapsulation, InjectionToken, ViewChild, NO_ERRORS_SCHEMA, ViewContainerRef } from '@angular/core';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
-import { Subject, tap, fromEvent, race, of, combineLatest, map, filter as filter$1, switchMap as switchMap$1, delay, takeUntil as takeUntil$1, from, debounceTime, BehaviorSubject as BehaviorSubject$1, distinctUntilChanged, take } from 'rxjs';
+import { Subject, tap, fromEvent, race, of, switchMap as switchMap$1, combineLatest, map, filter as filter$1, delay, takeUntil as takeUntil$1, from, debounceTime, BehaviorSubject as BehaviorSubject$1, distinctUntilChanged, take } from 'rxjs';
 import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
 import { switchMap, takeUntil, filter, tap as tap$1 } from 'rxjs/operators';
 import { CdkScrollable } from '@angular/cdk/scrolling';
@@ -134,7 +134,7 @@ const DEFAULT_SNAP = false;
 const DEFAULT_SELECT_BY_CLICK = true;
 const DEFAULT_COLLAPSE_BY_CLICK = true;
 const DEFAULT_ENABLED_BUFFER_OPTIMIZATION = false;
-const DEFAULT_DYNAMIC_SIZE = false;
+const DEFAULT_DYNAMIC_SIZE = true;
 const DEFAULT_SNAP_TO_END_TRANSITION_INSTANT_OFFSET = 1;
 const DEFAULT_SNAP_SCROLLTO_BOTTOM = false;
 const TRACK_BY_PROPERTY_NAME = 'id';
@@ -288,6 +288,7 @@ class NgVirtualListService {
     $scrollToStart = this._$scrollToStart.asObservable();
     _$scrollToEnd = new Subject();
     $scrollToEnd = this._$scrollToEnd.asObservable();
+    lastFocusedItemId = -1;
     scrollStartOffset = 0;
     scrollEndOffset = 0;
     scrollBarSize = 0;
@@ -634,7 +635,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 args: ['maxClickDistance']
             }], onClick: [{ type: i0.Output, args: ["onClick"] }] } });
 
-const ZEROS_POSITION = -1000, ATTR_AREA_SELECTED = 'area-selected', POSITION = 'position', POSITION_ZERO = '0', ID$1 = 'item-id', KEY_SPACE = ' ', KEY_ARR_LEFT = 'ArrowLeft', KEY_ARR_UP = 'ArrowUp', KEY_ARR_RIGHT = 'ArrowRight', KEY_ARR_DOWN = 'ArrowDown', EVENT_FOCUS_IN = 'focusin', EVENT_FOCUS_OUT = 'focusout', EVENT_KEY_DOWN = 'keydown', CLASS_NAME_SNAPPED = 'snapped', CLASS_NAME_SNAPPED_OUT = 'snapped-out', CLASS_NAME_FOCUS = 'focus';
+const ZEROS_POSITION = -1000, NAVIGATE_TO_ATTEMT = 5, ATTR_AREA_SELECTED = 'area-selected', POSITION = 'position', POSITION_ZERO = '0', ID$1 = 'item-id', KEY_SPACE = ' ', KEY_ARR_LEFT = 'ArrowLeft', KEY_ARR_UP = 'ArrowUp', KEY_ARR_RIGHT = 'ArrowRight', KEY_ARR_DOWN = 'ArrowDown', EVENT_FOCUS_IN = 'focusin', EVENT_FOCUS_OUT = 'focusout', EVENT_KEY_DOWN = 'keydown', CLASS_NAME_SNAPPED = 'snapped', CLASS_NAME_SNAPPED_OUT = 'snapped-out', CLASS_NAME_FOCUS = 'focus';
 /**
  * Virtual list component.
  * Maximum performance for extremely large lists.
@@ -728,6 +729,7 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
     (align = FocusAlignments.CENTER) => {
         this.focus(align);
     };
+    _destroyRef = inject(DestroyRef);
     constructor() {
         super();
         this._id = this._service.generateComponentId();
@@ -765,46 +767,43 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
                 this.focused.set(false);
                 this.updateConfig(this._data);
                 this.updatePartStr(this._data, this._isSelected, this._isCollapsed);
-            })).subscribe(),
-            fromEvent(this.element, EVENT_KEY_DOWN).pipe(takeUntilDestroyed(), tap(e => {
-                switch (e.key) {
-                    case KEY_SPACE: {
-                        e.stopImmediatePropagation();
-                        e.preventDefault();
-                        this._service.select(this._data);
-                        this._service.collapse(this._data);
-                        break;
-                    }
-                    case KEY_ARR_LEFT:
-                        if (!this.config().isVertical) {
-                            e.stopImmediatePropagation();
-                            e.preventDefault();
-                            this.focusPrev();
-                        }
-                        break;
-                    case KEY_ARR_UP:
-                        if (this.config().isVertical) {
-                            e.stopImmediatePropagation();
-                            e.preventDefault();
-                            this.focusPrev();
-                        }
-                        break;
-                    case KEY_ARR_RIGHT:
-                        if (!this.config().isVertical) {
-                            e.stopImmediatePropagation();
-                            e.preventDefault();
-                            this.focusNext();
-                        }
-                        break;
-                    case KEY_ARR_DOWN:
-                        if (this.config().isVertical) {
+            })).subscribe();
+        $focused.pipe(takeUntilDestroyed(), switchMap$1(v => {
+            if (v) {
+                return fromEvent(this.element, EVENT_KEY_DOWN).pipe(takeUntilDestroyed(this._destroyRef), tap(e => {
+                    switch (e.key) {
+                        case KEY_SPACE: {
                             e.stopImmediatePropagation();
                             e.preventDefault();
-                            this.focusNext();
+                            this._service.select(this._data);
+                            this._service.collapse(this._data);
+                            break;
                         }
-                        break;
-                }
-            })).subscribe();
+                        case KEY_ARR_LEFT:
+                            if (!this.config().isVertical) {
+                                this.toPrevItem(e);
+                            }
+                            break;
+                        case KEY_ARR_UP:
+                            if (this.config().isVertical) {
+                                this.toPrevItem(e);
+                            }
+                            break;
+                        case KEY_ARR_RIGHT:
+                            if (!this.config().isVertical) {
+                                this.toNextItem(e);
+                            }
+                            break;
+                        case KEY_ARR_DOWN:
+                            if (this.config().isVertical) {
+                                this.toNextItem(e);
+                            }
+                            break;
+                    }
+                }));
+            }
+            return of(false);
+        })).subscribe();
         combineLatest([$data, this._service.$methodOfSelecting, this._service.$selectedIds, this._service.$collapsedIds]).pipe(takeUntilDestroyed(), map(([, m, selectedIds, collapsedIds]) => ({ method: m, selectedIds, collapsedIds })), tap(({ method, selectedIds, collapsedIds }) => {
             switch (method) {
                 case MethodsForSelectingTypes.SELECT: {
@@ -833,19 +832,54 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
             this.updateMeasures(this._data);
         })).subscribe();
     }
+    toNextItem(e, attempt = NAVIGATE_TO_ATTEMT) {
+        const index = this.focusNext();
+        if (index > -1) {
+            this._service.lastFocusedItemId = index;
+            if (!!e && e.cancelable) {
+                e.stopImmediatePropagation();
+                e.preventDefault();
+            }
+            return;
+        }
+        if (this._service.lastFocusedItemId > -1) {
+            this.focus(FocusAlignments.CENTER, this._service.lastFocusedItemId);
+        }
+        if (attempt > 0) {
+            this.toNextItem(e, attempt - 1);
+        }
+    }
+    toPrevItem(e, attempt = NAVIGATE_TO_ATTEMT) {
+        const index = this.focusPrev();
+        if (index > -1) {
+            this._service.lastFocusedItemId = index;
+            if (!!e && e.cancelable) {
+                e.stopImmediatePropagation();
+                e.preventDefault();
+            }
+            return;
+        }
+        if (this._service.lastFocusedItemId > -1) {
+            this.focus(FocusAlignments.CENTER, this._service.lastFocusedItemId);
+        }
+        if (attempt > 0) {
+            this.toPrevItem(e, attempt - 1);
+        }
+    }
     focusNext() {
         if (this._service.listElement) {
             const tabIndex = this._data?.config?.tabIndex ?? 0, length = this._service.collection?.length ?? 0;
             let index = tabIndex;
             while (index <= length) {
                 index++;
-                const el = this._service.listElement.querySelector(getListElementByIndex(index));
-                if (el) {
-                    this._service.focus(el);
-                    break;
+                const element = this._service.listElement.querySelector(getListElementByIndex(index));
+                if (!!element && element.style.visibility !== VISIBILITY_HIDDEN) {
+                    this._service.focus(element);
+                    return index;
                 }
             }
         }
+        return -1;
     }
     focusPrev() {
         if (this._service.listElement) {
@@ -853,21 +887,22 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
             let index = tabIndex;
             while (index >= 0) {
                 index--;
-                const el = this._service.listElement.querySelector(getListElementByIndex(index));
-                if (el) {
-                    this._service.focus(el);
-                    break;
+                const element = this._service.listElement.querySelector(getListElementByIndex(index));
+                if (!!element) {
+                    this._service.focus(element);
+                    return index;
                 }
             }
         }
+        return -1;
     }
-    focus(align = FocusAlignments.CENTER) {
+    focus(align = FocusAlignments.CENTER, index = -1) {
         if (this._service.listElement) {
-            const tabIndex = this._data?.config?.tabIndex ?? 0;
-            let index = tabIndex;
-            const el = this._service.listElement.querySelector(getListElementByIndex(index));
-            if (el) {
-                this._service.focus(el, align);
+            const tabIndex = index > -1 ? index : this._data?.config?.tabIndex ?? 0;
+            let i = tabIndex;
+            const element = this._service.listElement.querySelector(getListElementByIndex(i));
+            if (!!element) {
+                this._service.focus(element, align);
             }
         }
     }
@@ -2195,14 +2230,16 @@ class TrackBox extends CacheMap {
         }
     }
     changes(immediately = false) {
-        if (this.changesDetected()) {
-            return;
-        }
-        this.bumpVersion();
         if (immediately) {
             this._previousVersion = this._version;
             this.dispatch(CACHE_BOX_CHANGE_EVENT_NAME, this.version);
         }
+        else {
+            if (this.changesDetected()) {
+                return;
+            }
+            this.bumpVersion();
+        }
     }
     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, } = metrics, displayItems = [];
@@ -3839,10 +3876,10 @@ class NgScrollerComponent extends NgScrollView {
         this.prepared = false;
     }
     refresh(fireUpdate = false, updateScrollbar = true) {
-        this.scrollLimits();
         if (updateScrollbar) {
             this.stopScrolling();
         }
+        this.scrollLimits();
         if (this.isVertical()) {
             this.refreshY(this._y);
         }
@@ -3850,7 +3887,7 @@ class NgScrollerComponent extends NgScrollView {
             this.refreshX(this._x);
         }
         if (updateScrollbar) {
-            this.updateScrollBarHandler(true);
+            this.updateScrollBarHandler(false);
             if (this.cdkScrollable) {
                 this.cdkScrollable.getElementRef().nativeElement.dispatchEvent(SCROLLBAR_SCROLL_EVENT);
             }
@@ -3913,7 +3950,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 args: ['scrollBar', { read: NgScrollBarComponent }]
             }], scrollbarEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollbarEnabled", required: false }] }], scrollbarInteractive: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollbarInteractive", required: false }] }], focusedElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusedElement", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], classes: [{ type: i0.Input, args: [{ isSignal: true, alias: "classes", required: false }] }], startOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "startOffset", required: false }] }], endOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "endOffset", required: false }] }], scrollbarTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollbarTheme", required: false }] }], scrollbarMinSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollbarMinSize", required: false }] }] } });
 
-const MIN_SCROLL_TO_START_PIXELS = 10, RANGE_DISPLAY_ITEMS_END_OFFSET = 20, DEFAULT_INIT_ITERATIONS = 30, ROLE_LIST = 'list', ROLE_LIST_BOX = 'listbox', ITEM_ID = 'item-id', ITEM_CONTAINER = 'ngvl-item__container', READY_TO_START = 'ready-to-start', WAIT_FOR_PREPARATION = 'wait-for-preparation';
+const MIN_SCROLL_TO_START_PIXELS = 10, RANGE_DISPLAY_ITEMS_END_OFFSET = 20, MIN_PREPARE_ITERATIONS = 20, EMPTY_SCROLL_STATE_VERSION = '-1', ROLE_LIST = 'list', ROLE_LIST_BOX = 'listbox', ITEM_ID = 'item-id', ITEM_CONTAINER = 'ngvl-item__container', READY_TO_START = 'ready-to-start', WAIT_FOR_PREPARATION = 'wait-for-preparation';
+const getScrollStateVersion = (scrollSize, cacheVersion) => {
+    return `${scrollSize}_${cacheVersion}`;
+};
 const validateScrollIteration = (value) => {
     return Number.isNaN(value) || (value < 0) ? 0 : value > MAX_SCROLL_TO_ITERATIONS ? MAX_SCROLL_TO_ITERATIONS : value;
 }, validateId = (id) => {
@@ -4435,7 +4475,8 @@ class NgVirtualListComponent {
     };
     /**
      * If direction = 'vertical', then the height of a typical element. If direction = 'horizontal', then the width of a typical element.
-     * Ignored if the dynamicSize property is true.
+     * If the dynamicSize property is true, the items in the list can have different sizes, and you must specify the itemSize property
+     * to adjust the sizes of the items in the unallocated area.
      */
     itemSize = input(DEFAULT_ITEM_SIZE, { ...(ngDevMode ? { debugName: "itemSize" } : {}), ...this._itemSizeOptions });
     _dynamicSizeOptions = {
@@ -4449,8 +4490,9 @@ class NgVirtualListComponent {
         },
     };
     /**
-     * If true then the items in the list can have different sizes and the itemSize property is ignored.
-     * If false then the items in the list have a fixed size specified by the itemSize property. The default value is false.
+     * If true, items in the list may have different sizes, and the itemSize property must be specified to adjust
+     * the sizes of items in the unallocated area.
+     * If false then the items in the list have a fixed size specified by the itemSize property. The default value is true.
      */
     dynamicSize = input(DEFAULT_DYNAMIC_SIZE, { ...(ngDevMode ? { debugName: "dynamicSize" } : {}), ...this._dynamicSizeOptions });
     _directionOptions = {
@@ -4737,6 +4779,7 @@ class NgVirtualListComponent {
                     [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: pos, behavior,
                     fireUpdate: true, blending: true, userAction: true, duration: this.animationParams().navigateToItem,
                 };
+                scroller.refresh(false);
                 scroller.scrollTo(params);
             }
         }
@@ -4771,8 +4814,10 @@ class NgVirtualListComponent {
     $scrollTo = this._$scrollTo.asObservable();
     _$scroll = new Subject();
     $scroll = this._$scroll.asObservable();
-    _$userScroll = new Subject();
-    $userScroll = this._$userScroll.asObservable();
+    _$fireUpdate = new Subject();
+    $fireUpdate = this._$fireUpdate.asObservable();
+    _$fireUpdateNextFrame = new Subject();
+    $fireUpdateNextFrame = this._$fireUpdateNextFrame.asObservable();
     _onTrackBoxResetHandler = (v) => {
         if (v && this._scrollerComponent()?.scrollable) {
             this._$isResetedReachStart.next(true);
@@ -4790,9 +4835,7 @@ class NgVirtualListComponent {
             }
         }
     };
-    _$updateIteration = new BehaviorSubject$1(0);
     _onPreparedHandler = (v) => {
-        this._$updateIteration.next(0);
         this._$prepared.next(v);
     };
     _destroyRef = inject(DestroyRef);
@@ -4806,6 +4849,9 @@ class NgVirtualListComponent {
         this._service.initialize(this._trackBox);
         this._service.itemToFocus = this.itemToFocus;
         this._trackBox.displayComponents = this._displayComponents;
+        this.$fireUpdateNextFrame.pipe(takeUntilDestroyed(), debounceTime(0), tap(e => {
+            this._$fireUpdate.next(e);
+        })).subscribe();
         const $scrollToItem = this.$scrollTo.pipe(takeUntilDestroyed()), $mouseDown = fromEvent(this._elementRef.nativeElement, MOUSE_DOWN).pipe(takeUntilDestroyed()), $touchStart = fromEvent(this._elementRef.nativeElement, TOUCH_START).pipe(takeUntilDestroyed());
         fromEvent(document, KEY_DOWN).pipe(takeUntilDestroyed(), switchMap$1(e => {
             return fromEvent(this._elementRef.nativeElement, FOCUS).pipe(takeUntilDestroyed(this._destroyRef), delay(0), takeUntil$1($scrollToItem), takeUntil$1($mouseDown), takeUntil$1($touchStart), tap(e => {
@@ -4833,24 +4879,28 @@ class NgVirtualListComponent {
             this._service.clickDistance = dist;
         });
         let prepared = false, readyToStart = false, isUserScrolling = false;
-        const $updateComplete = this.$update.pipe(takeUntilDestroyed(), switchMap$1(() => {
-            this._$updateIteration.next(this._$updateIteration.getValue() + 1);
-            const iterations = Math.min(DEFAULT_INIT_ITERATIONS, this.items().length || 1);
-            if (this._$updateIteration.getValue() <= iterations) {
-                const scroller = this._scrollerComponent();
-                if (!!scroller) {
-                    const isVerrtical = this._isVertical, actualScrollSize = isVerrtical ? (scroller?.actualScrollHeight ?? 0) : (scroller?.actualScrollWidth ?? 0), params = {
-                        [isVerrtical ? TOP_PROP_NAME : LEFT_PROP_NAME]: actualScrollSize,
-                        blending: false, fireUpdate: true, userAction: false, behavior: BEHAVIOR_INSTANT,
-                    };
-                    scroller.stopScrolling();
-                    scroller.scrollTo(params);
-                    this._service.update();
+        let prevScrollStateVersion = EMPTY_SCROLL_STATE_VERSION, updateIterations = 0;
+        const $updateComplete = this.$update.pipe(takeUntilDestroyed(), debounceTime(0), switchMap$1((v) => {
+            if (((prevScrollStateVersion === EMPTY_SCROLL_STATE_VERSION) || (prevScrollStateVersion !== v)) &&
+                (updateIterations < MIN_PREPARE_ITERATIONS)) {
+                if (v !== EMPTY_SCROLL_STATE_VERSION) {
+                    prevScrollStateVersion = v;
                 }
+                this._trackBox.isScrollEnd = true;
+                this._$fireUpdateNextFrame.next();
                 return of(false);
             }
+            if (prevScrollStateVersion === v) {
+                this._trackBox.isScrollEnd = true;
+                if (updateIterations < MIN_PREPARE_ITERATIONS) {
+                    updateIterations++;
+                    this._$fireUpdateNextFrame.next();
+                    return of(false);
+                }
+            }
+            prevScrollStateVersion = v;
             return of(true);
-        }), debounceTime(200), distinctUntilChanged()), $items = toObservable(this.items).pipe(map(i => !i ? [] : i)), $dynamicSize = toObservable(this.dynamicSize);
+        }), debounceTime(0), filter$1(v => !!v)), $items = toObservable(this.items).pipe(map(i => !i ? [] : i)), $dynamicSize = toObservable(this.dynamicSize);
         const $snapScrollToBottom = toObservable(this.snapScrollToBottom), $waitForPreparation = toObservable(this.waitForPreparation);
         combineLatest([$dynamicSize, $snapScrollToBottom, $waitForPreparation]).pipe(takeUntilDestroyed(), switchMap$1(([dynamicSize, snapScrollToBottom, waitForPreparation]) => {
             if (!dynamicSize || !snapScrollToBottom || !waitForPreparation) {
@@ -4865,7 +4915,6 @@ class NgVirtualListComponent {
                 return of(false);
             }
             if (!!dynamicSize && !!snapScrollToBottom && !!waitForPreparation) {
-                this._$updateIteration.next(0);
                 return this.$prepared.pipe(takeUntilDestroyed(this._destroyRef), distinctUntilChanged(), switchMap$1(v => {
                     if (!v) {
                         this._$show.next(false);
@@ -4877,14 +4926,15 @@ class NgVirtualListComponent {
                             scrollerComponent.stopScrolling();
                         }
                         this.classes.set({ prepared: v, [READY_TO_START]: false, [WAIT_FOR_PREPARATION]: false });
-                        this._$updateIteration.next(0);
                         this._service.update(true);
                         return of(false);
                     }
                     return of(true).pipe(takeUntilDestroyed(this._destroyRef), switchMap$1(v => {
                         const waitForPreparation = this.waitForPreparation();
                         if (waitForPreparation) {
-                            return $updateComplete.pipe(takeUntilDestroyed(this._destroyRef), filter$1(v => !!v), take(1), tap(() => {
+                            prevScrollStateVersion = EMPTY_SCROLL_STATE_VERSION;
+                            updateIterations = 0;
+                            return $updateComplete.pipe(takeUntilDestroyed(this._destroyRef), take(1), tap(() => {
                                 prepared = readyToStart = true;
                                 const waitForPreparation = this.waitForPreparation(), scrollerComponent = this._scrollerComponent();
                                 if (scrollerComponent) {
@@ -5063,9 +5113,8 @@ class NgVirtualListComponent {
             const { snapScrollToBottom, bounds, listBounds, scrollEndOffset, items, itemConfigMap, scrollSize, itemSize, bufferSize, maxBufferSize, snap, isVertical, dynamicSize, enabledBufferOptimization, cacheVersion, } = params;
             const scroller = this._scrollerComponent();
             if (scroller) {
-                let actualScrollSize = snapScrollToBottom && !prepared ?
-                    (isVertical ? scroller.actualScrollHeight ?? 0 : scroller.actualScrollWidth ?? 0) :
-                    (isVertical ? scroller.actualScrollTop ?? 0 : scroller.actualScrollLeft ?? 0), totalSize = 0, displayItems;
+                let actualScrollSize = !prepared && snapScrollToBottom ? (isVertical ? scroller.scrollHeight ?? 0 : scroller.scrollWidth ?? 0) :
+                    (isVertical ? scroller.scrollTop ?? 0 : scroller.scrollLeft ?? 0), totalSize = 0, displayItems;
                 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 = {
@@ -5102,7 +5151,8 @@ class NgVirtualListComponent {
                         this._isScrollFinished.set(scrollPosition >= roundedMaxPosition);
                     }
                 }
-                actualScrollSize = (isVertical ? scroller.actualScrollTop ?? 0 : scroller.actualScrollLeft ?? 0);
+                actualScrollSize = !prepared && snapScrollToBottom ? (isVertical ? scroller.scrollHeight ?? 0 : scroller.scrollWidth ?? 0) :
+                    (isVertical ? scroller.scrollTop ?? 0 : scroller.scrollLeft ?? 0);
                 const delta = this._trackBox.delta, roundedActualScrollSize = Math.round(actualScrollSize), scrollPositionAfterUpdate = actualScrollSize + delta, roundedScrollPositionAfterUpdate = Math.round(scrollPositionAfterUpdate), roundedMaxPositionAfterUpdate = Math.round(totalSize - viewportSize);
                 if (this._isSnappingMethodAdvanced) {
                     this.updateRegularRenderer();
@@ -5118,12 +5168,14 @@ class NgVirtualListComponent {
                     }
                     this._trackBox.isScrollEnd = true;
                     if (roundedMaxPositionAfterUpdate > 0) {
-                        const diff = roundedMaxPositionAfterUpdate - roundedScrollPositionAfterUpdate, snapToEndTransitionInstantOffset = this.snapToEndTransitionInstantOffset() || viewportSize, animated = prepared && readyToStart && diff >= 0 && diff <= snapToEndTransitionInstantOffset, params = {
+                        const params = {
                             [isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: roundedMaxPositionAfterUpdate,
-                            fireUpdate: !(prepared && readyToStart), behavior: animated ? this.scrollBehavior() : BEHAVIOR_INSTANT,
+                            fireUpdate: false, behavior: BEHAVIOR_INSTANT,
                             blending: false, duration: this.animationParams().scrollToItem,
                         };
                         scroller?.scrollTo?.(params);
+                        this._$update.next(getScrollStateVersion(this._isVertical ? scroller.scrollTop : scroller.scrollLeft, cacheVersion));
+                        return;
                     }
                 }
                 else if (roundedActualScrollSize !== roundedScrollPositionAfterUpdate && scrollPositionAfterUpdate > 0) {
@@ -5135,18 +5187,20 @@ class NgVirtualListComponent {
                     if (this._scrollSize() !== scrollPositionAfterUpdate) {
                         const params = {
                             [isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: scrollPositionAfterUpdate, blending: prepared && readyToStart,
-                            fireUpdate: !(prepared && readyToStart), behavior: BEHAVIOR_INSTANT, duration: this.animationParams().scrollToItem,
+                            fireUpdate: false, behavior: BEHAVIOR_INSTANT, duration: this.animationParams().scrollToItem,
                         };
                         scroller.scrollTo(params);
+                        this._$update.next(getScrollStateVersion(this._isVertical ? scroller.scrollTop : scroller.scrollLeft, cacheVersion));
+                        return;
                     }
                 }
                 if (!prepared && !readyToStart) {
-                    this._$update.next();
+                    this._$update.next(getScrollStateVersion(this._isVertical ? scroller.scrollTop : scroller.scrollLeft, cacheVersion));
                 }
             }
         };
         combineLatest([$snapScrollToBottom, $bounds, $listBounds, $scrollEndOffset, $actualItems, $itemConfigMap, $scrollSize, $itemSize,
-            $bufferSize, $maxBufferSize, $snap, $isVertical, $dynamicSize, $enabledBufferOptimization, $cacheVersion, this.$userScroll,
+            $bufferSize, $maxBufferSize, $snap, $isVertical, $dynamicSize, $enabledBufferOptimization, $cacheVersion, this.$fireUpdate,
         ]).pipe(takeUntilDestroyed(), distinctUntilChanged(), tap(([snapScrollToBottom, bounds, listBounds, scrollEndOffset, items, itemConfigMap, scrollSize, itemSize, bufferSize, maxBufferSize, snap, isVertical, dynamicSize, enabledBufferOptimization, cacheVersion,]) => {
             update({
                 snapScrollToBottom, bounds, listBounds, scrollEndOffset, items, itemConfigMap, scrollSize, itemSize,
@@ -5223,7 +5277,7 @@ class NgVirtualListComponent {
                 this.onScroll.emit(event);
                 this._$scroll.next(event);
                 if (userAction && !this.dynamicSize()) {
-                    this._$userScroll.next(event);
+                    this._$fireUpdate.next(event);
                 }
             }
         })).subscribe();
@@ -5245,7 +5299,7 @@ class NgVirtualListComponent {
                 this.onScrollEnd.emit(event);
                 this._$scroll.next(event);
                 if (userAction && !this.dynamicSize()) {
-                    this._$userScroll.next(event);
+                    this._$fireUpdate.next(event);
                 }
             }
         })).subscribe();
@@ -5413,7 +5467,7 @@ class NgVirtualListComponent {
         $collapsedIds.pipe(takeUntilDestroyed(), distinctUntilChanged(), tap(v => {
             this._service.setCollapsedIds(v);
         })).subscribe();
-        this._$userScroll.next({
+        this._$fireUpdate.next({
             scrollSize: 0,
             scrollWeight: 0,
             size: 0,