ng-virtual-list 20.10.1 → 20.10.3

package/README.md

@@ -740,9 +740,9 @@ Properties
 | 19.x | 19.10.0 | [19.x](https://github.com/DjonnyX/ng-virtual-list/tree/19.x) | [19.10.0](https://www.npmjs.com/package/ng-virtual-list/v/19.10.0) |
 | 18.x | 18.10.0 | [18.x](https://github.com/DjonnyX/ng-virtual-list/tree/18.x) | [18.10.0](https://www.npmjs.com/package/ng-virtual-list/v/18.10.0) |
 | 17.x | 17.10.0 | [17.x](https://github.com/DjonnyX/ng-virtual-list/tree/17.x) | [17.10.0](https://www.npmjs.com/package/ng-virtual-list/v/17.10.0) |
-| 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.0 | [14.x](https://github.com/DjonnyX/ng-virtual-list/tree/14.x) | [14.10.0](https://www.npmjs.com/package/ng-virtual-list/v/14.10.0) |
+| 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

@@ -3444,8 +3444,9 @@ class NgScrollView {
         this._$scroll.next(userAction);
     }
     onDragStart() { }
-    reset() {
-        this.move(this.isVertical(), 0);
+    reset(offset = 0) {
+        this.stopScrolling();
+        this.move(this.isVertical(), offset);
     }
     ngOnDestroy() {
         if (this._animator) {
@@ -3811,11 +3812,13 @@ class NgScrollerComponent extends NgScrollView {
         this.updateScrollBar();
     }
     reset() {
-        super.reset();
+        super.reset(this.startOffset());
+        this.totalSize = 0;
         if (this.scrollBar) {
             this.scrollBar.stopScrolling();
         }
-        this.move(this.isVertical(), 0);
+        this.refresh(true, true);
+        this.prepared = false;
     }
     refresh(fireUpdate = false, updateScrollbar = true) {
         this.scrollLimits();
@@ -3880,19 +3883,19 @@ class NgScrollerComponent extends NgScrollView {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NgScrollerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.17", type: NgScrollerComponent, isStandalone: true, selector: "ng-scroller", inputs: { scrollbarEnabled: { classPropertyName: "scrollbarEnabled", publicName: "scrollbarEnabled", isSignal: true, isRequired: false, transformFunction: null }, scrollbarInteractive: { classPropertyName: "scrollbarInteractive", publicName: "scrollbarInteractive", 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 } }, providers: [
             { provide: SCROLL_VIEW_INVERSION, useValue: false },
-        ], viewQueries: [{ propertyName: "scrollBar", first: true, predicate: ["scrollBar"], descendants: true, read: NgScrollBarComponent }], usesInheritance: true, ngImport: i0, template: "<div localeSensitive [langTextDir]=\"langTextDir()\" [listDir]=\"direction()\" class=\"ngvl__container\"\r\n    [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    @let prepared = preparedSignal();\r\n    <ng-scroll-bar #scrollBar [direction]=\"direction()\" [size]=\"thumbSize()\" [theme]=\"scrollbarTheme()\"\r\n        [thumbGradientPositions]=\"thumbGradientPositions()\" [loading]=\"loading()\" [prepared]=\"prepared\"\r\n        [interactive]=\"scrollbarInteractive()\" [show]=\"scrollbarShow() && scrollbarEnabled() && prepared\"\r\n        [startOffset]=\"startOffset()\" [endOffset]=\"endOffset()\" [overscrollEnabled]=\"overscrollEnabled()\"\r\n        [scrollBehavior]=\"scrollBehavior()\" [scrollbarMinSize]=\"scrollbarMinSize()\"\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 0;transition:grid-template-rows .1s ease-out}.ngvl__container.horizontal.scrollable.enabled{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 0;transition:grid-template-columns .1s ease-out}.ngvl__container.vertical.scrollable.enabled{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.ready-to-start{transition:opacity .1s 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", "thumbGradientPositions", "size", "theme", "startOffset", "endOffset", "scrollbarMinSize", "prepared", "interactive", "show"], outputs: ["onDrag"] }] });
+        ], viewQueries: [{ propertyName: "scrollBar", first: true, predicate: ["scrollBar"], descendants: true, read: NgScrollBarComponent }], usesInheritance: true, ngImport: i0, template: "<div localeSensitive [langTextDir]=\"langTextDir()\" [listDir]=\"direction()\" class=\"ngvl__container\"\r\n    [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    @let prepared = preparedSignal();\r\n    <ng-scroll-bar #scrollBar [direction]=\"direction()\" [size]=\"thumbSize()\" [theme]=\"scrollbarTheme()\"\r\n        [thumbGradientPositions]=\"thumbGradientPositions()\" [loading]=\"loading()\" [prepared]=\"prepared\"\r\n        [interactive]=\"scrollbarInteractive()\" [show]=\"scrollbarShow() && scrollbarEnabled() && prepared\"\r\n        [startOffset]=\"startOffset()\" [endOffset]=\"endOffset()\" [overscrollEnabled]=\"overscrollEnabled()\"\r\n        [scrollBehavior]=\"scrollBehavior()\" [scrollbarMinSize]=\"scrollbarMinSize()\"\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 0;transition:grid-template-rows .1s ease-out}.ngvl__container.horizontal.scrollable.enabled{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 0;transition:grid-template-columns .1s ease-out}.ngvl__container.vertical.scrollable.enabled{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}\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", "thumbGradientPositions", "size", "theme", "startOffset", "endOffset", "scrollbarMinSize", "prepared", "interactive", "show"], outputs: ["onDrag"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NgScrollerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-scroller', imports: [CommonModule, CdkScrollable, LocaleSensitiveDirective, NgScrollBarComponent], providers: [
                         { provide: SCROLL_VIEW_INVERSION, useValue: false },
-                    ], schemas: [NO_ERRORS_SCHEMA], template: "<div localeSensitive [langTextDir]=\"langTextDir()\" [listDir]=\"direction()\" class=\"ngvl__container\"\r\n    [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    @let prepared = preparedSignal();\r\n    <ng-scroll-bar #scrollBar [direction]=\"direction()\" [size]=\"thumbSize()\" [theme]=\"scrollbarTheme()\"\r\n        [thumbGradientPositions]=\"thumbGradientPositions()\" [loading]=\"loading()\" [prepared]=\"prepared\"\r\n        [interactive]=\"scrollbarInteractive()\" [show]=\"scrollbarShow() && scrollbarEnabled() && prepared\"\r\n        [startOffset]=\"startOffset()\" [endOffset]=\"endOffset()\" [overscrollEnabled]=\"overscrollEnabled()\"\r\n        [scrollBehavior]=\"scrollBehavior()\" [scrollbarMinSize]=\"scrollbarMinSize()\"\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 0;transition:grid-template-rows .1s ease-out}.ngvl__container.horizontal.scrollable.enabled{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 0;transition:grid-template-columns .1s ease-out}.ngvl__container.vertical.scrollable.enabled{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.ready-to-start{transition:opacity .1s ease-out .1s}\n"] }]
+                    ], schemas: [NO_ERRORS_SCHEMA], template: "<div localeSensitive [langTextDir]=\"langTextDir()\" [listDir]=\"direction()\" class=\"ngvl__container\"\r\n    [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    @let prepared = preparedSignal();\r\n    <ng-scroll-bar #scrollBar [direction]=\"direction()\" [size]=\"thumbSize()\" [theme]=\"scrollbarTheme()\"\r\n        [thumbGradientPositions]=\"thumbGradientPositions()\" [loading]=\"loading()\" [prepared]=\"prepared\"\r\n        [interactive]=\"scrollbarInteractive()\" [show]=\"scrollbarShow() && scrollbarEnabled() && prepared\"\r\n        [startOffset]=\"startOffset()\" [endOffset]=\"endOffset()\" [overscrollEnabled]=\"overscrollEnabled()\"\r\n        [scrollBehavior]=\"scrollBehavior()\" [scrollbarMinSize]=\"scrollbarMinSize()\"\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 0;transition:grid-template-rows .1s ease-out}.ngvl__container.horizontal.scrollable.enabled{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 0;transition:grid-template-columns .1s ease-out}.ngvl__container.vertical.scrollable.enabled{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}\n"] }]
         }], ctorParameters: () => [], propDecorators: { scrollBar: [{
                 type: ViewChild,
                 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, MAX_INIT_ITERATIONS = 10, 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, 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 validateScrollIteration = (value) => {
     return Number.isNaN(value) || (value < 0) ? 0 : value > MAX_SCROLL_TO_ITERATIONS ? MAX_SCROLL_TO_ITERATIONS : value;
 }, validateId = (id) => {
@@ -4814,55 +4817,92 @@ class NgVirtualListComponent {
             this._service.clickDistance = dist;
         });
         let prepared = false, readyToStart = false, isUserScrolling = false;
-        const $updateComplete = this.$update.pipe(takeUntilDestroyed(), tap(() => {
+        const $updateComplete = this.$update.pipe(takeUntilDestroyed(), switchMap$1(() => {
             this._$updateIteration.next(this._$updateIteration.getValue() + 1);
-            if (this._$updateIteration.getValue() <= Math.max(MAX_INIT_ITERATIONS, this.items().length)) {
-                this._service.update(true);
+            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();
+                }
+                return of(false);
             }
-        }), debounceTime(250)), $items = toObservable(this.items).pipe(map(i => !i ? [] : i)), $dynamicSize = toObservable(this.dynamicSize);
-        $dynamicSize.pipe(takeUntilDestroyed(), tap(v => {
-            if (!v) {
-                this._$show.next(true);
+            return of(true);
+        }), debounceTime(200), distinctUntilChanged()), $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) {
                 prepared = readyToStart = true;
                 const scrollerComponent = this._scrollerComponent();
                 if (scrollerComponent) {
                     scrollerComponent.prepared = true;
                 }
                 this.classes.set({ prepared: true, [READY_TO_START]: true, [WAIT_FOR_PREPARATION]: false });
-                this._service.update(true);
-            }
-        }), filter$1(v => !!v), switchMap$1(() => {
-            return this.$prepared.pipe(takeUntilDestroyed(this._destroyRef), distinctUntilChanged(), tap(v => {
-                if (!v) {
-                    this._$show.next(false);
-                    readyToStart = isUserScrolling = prepared = false;
-                    this.cacheClean();
-                    const waitForPreparation = this.waitForPreparation();
-                    if (waitForPreparation) {
+                this._service.update();
+                this._$show.next(true);
+                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);
+                        readyToStart = isUserScrolling = prepared = false;
+                        this.cacheClean();
                         const scrollerComponent = this._scrollerComponent();
                         if (scrollerComponent) {
-                            scrollerComponent.prepared = v;
+                            scrollerComponent.prepared = false;
+                            scrollerComponent.stopScrolling();
                         }
-                        this.classes.set({ prepared: v, [READY_TO_START]: false, [WAIT_FOR_PREPARATION]: waitForPreparation });
+                        this.classes.set({ prepared: v, [READY_TO_START]: false, [WAIT_FOR_PREPARATION]: false });
+                        this._$updateIteration.next(0);
+                        this._service.update(true);
+                        return of(false);
                     }
-                }
-            }), filter$1(v => !!v), switchMap$1(v => {
-                return $updateComplete.pipe(takeUntilDestroyed(this._destroyRef), switchMap$1(() => of(v)), take(1), takeUntilDestroyed(this._destroyRef), tap(v => {
-                    prepared = v;
-                    const waitForPreparation = this.waitForPreparation(), scrollerComponent = this._scrollerComponent(), val = v || !waitForPreparation;
-                    if (scrollerComponent) {
-                        scrollerComponent.prepared = val;
-                    }
-                    this.classes.set({ prepared: val, [READY_TO_START]: true, [WAIT_FOR_PREPARATION]: waitForPreparation });
-                    this._service.update(true);
-                    this._$show.next(true);
-                }), debounceTime(100), takeUntilDestroyed(this._destroyRef), tap(v => {
-                    const waitForPreparation = this.waitForPreparation(), val = v || !waitForPreparation;
-                    this.classes.set({ prepared: val, [READY_TO_START]: true, [WAIT_FOR_PREPARATION]: waitForPreparation });
-                    readyToStart = true;
-                    this._service.update(true);
+                    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(() => {
+                                prepared = readyToStart = true;
+                                const waitForPreparation = this.waitForPreparation(), scrollerComponent = this._scrollerComponent();
+                                if (scrollerComponent) {
+                                    scrollerComponent.prepared = true;
+                                    scrollerComponent.stopScrolling();
+                                }
+                                this.classes.set({ prepared: true, [READY_TO_START]: true, [WAIT_FOR_PREPARATION]: waitForPreparation });
+                                this._service.update(true);
+                                this._$show.next(true);
+                            }));
+                        }
+                        prepared = readyToStart = true;
+                        const scrollerComponent = this._scrollerComponent();
+                        if (scrollerComponent) {
+                            scrollerComponent.prepared = true;
+                            scrollerComponent.stopScrolling();
+                        }
+                        this.classes.set({ prepared: true, [READY_TO_START]: true, [WAIT_FOR_PREPARATION]: waitForPreparation });
+                        this._service.update(true);
+                        this._$show.next(true);
+                        return of(false);
+                    }));
                 }));
-            }));
+            }
+            prepared = readyToStart = true;
+            const scrollerComponent = this._scrollerComponent();
+            if (scrollerComponent) {
+                scrollerComponent.prepared = true;
+                scrollerComponent.stopScrolling();
+            }
+            this.classes.set({ prepared: true, [READY_TO_START]: true, [WAIT_FOR_PREPARATION]: false });
+            this._service.update(true);
+            this._$show.next(true);
+            return of(false);
         })).subscribe();
         this._service.$focusedId.pipe(takeUntilDestroyed(), tap(v => {
             this.focusedElement.set(v ?? undefined);
@@ -4870,7 +4910,7 @@ class NgVirtualListComponent {
         toObservable(this._list).pipe(takeUntilDestroyed(), filter$1(v => !!v), tap(v => {
             this._service.listElement = v.nativeElement;
         })).subscribe();
-        const $defaultItemValue = toObservable(this.defaultItemValue), $snapScrollToBottom = toObservable(this.snapScrollToBottom), $trackBy = toObservable(this.trackBy), $selectByClick = toObservable(this.selectByClick), $collapseByClick = toObservable(this.collapseByClick), $isScrollStart = toObservable(this._isScrollStart), $isScrollFinished = toObservable(this._isScrollFinished), $scrollStartOffset = toObservable(this.scrollStartOffset), $scrollEndOffset = toObservable(this.scrollEndOffset), $isVertical = toObservable(this.direction).pipe(map(v => this.getIsVertical(v || DEFAULT_DIRECTION)));
+        const $defaultItemValue = toObservable(this.defaultItemValue), $trackBy = toObservable(this.trackBy), $selectByClick = toObservable(this.selectByClick), $collapseByClick = toObservable(this.collapseByClick), $isScrollStart = toObservable(this._isScrollStart), $isScrollFinished = toObservable(this._isScrollFinished), $scrollStartOffset = toObservable(this.scrollStartOffset), $scrollEndOffset = toObservable(this.scrollEndOffset), $isVertical = toObservable(this.direction).pipe(map(v => this.getIsVertical(v || DEFAULT_DIRECTION)));
         $snapScrollToBottom.pipe(takeUntilDestroyed(), tap(v => {
             this._service.snapScrollToBottom = v;
         })).subscribe();
@@ -5046,7 +5086,7 @@ class NgVirtualListComponent {
                         this._isScrollFinished.set(scrollPosition >= roundedMaxPosition);
                     }
                 }
-                actualScrollSize = (isVertical ? scroller.scrollTop ?? 0 : scroller.scrollLeft ?? 0);
+                actualScrollSize = (isVertical ? scroller.actualScrollTop ?? 0 : scroller.actualScrollLeft ?? 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();
@@ -5084,7 +5124,9 @@ class NgVirtualListComponent {
                         scroller.scrollTo(params);
                     }
                 }
-                this._$update.next();
+                if (!prepared && !readyToStart) {
+                    this._$update.next();
+                }
             }
         };
         combineLatest([$snapScrollToBottom, $bounds, $listBounds, $scrollEndOffset, $actualItems, $itemConfigMap, $scrollSize, $itemSize,
@@ -5223,6 +5265,9 @@ class NgVirtualListComponent {
         })).subscribe();
         const $scrollTo = this.$scrollTo;
         combineLatest([$scroller, $trackBy, $scrollTo]).pipe(takeUntilDestroyed(), filter$1(([scroller]) => scroller !== undefined), map(([scroller, trackBy, event]) => ({ scroller: scroller, trackBy, event })), switchMap$1(({ scroller, trackBy, event }) => {
+            if (!prepared || !readyToStart) {
+                return of([false]);
+            }
             const scrollerComponent = this._scrollerComponent(), { id, iteration = 0, blending = false, isLastIteration = false, scrollCalled = false, cb, } = event;
             if (scrollerComponent) {
                 const items = this._actualItems();
@@ -5291,7 +5336,7 @@ class NgVirtualListComponent {
             return of([true, { id, scroller: scrollerComponent, cb }]);
         }), takeUntilDestroyed(), filter$1(params => !!params), tap(([finished, params]) => {
             if (!finished) {
-                if (params) {
+                if (!!params) {
                     this._$scrollTo.next(params);
                 }
                 return;