ng-virtual-list 19.7.29 → 19.7.30

package/README.md

@@ -639,8 +639,8 @@ Methods
 
 | Method | Type | Description |
 |--|--|--|
-| scrollTo | (id: [Id](https://github.com/DjonnyX/ng-virtual-list/blob/19.x/projects/ng-virtual-list/src/lib/types/id.ts), behavior: ScrollBehavior = 'auto') => number | The method scrolls the list to the element with the given id and returns the value of the scrolled area. Behavior accepts the values ​​"auto", "instant" and "smooth". |
-| scrollToEnd | (behavior?: ScrollBehavior) => void | Scrolls the scroll area to the desired element with the specified ID. |
+| scrollTo | (id: [Id](https://github.com/DjonnyX/ng-virtual-list/blob/19.x/projects/ng-virtual-list/src/lib/types/id.ts), cb?: () => void, options?: [IScrollOptions](https://github.com/DjonnyX/ng-virtual-list/blob/19.x/projects/ng-virtual-list/src/lib/models/scroll-options.model.ts)) | The method scrolls the list to the element with the given `id` and returns the value of the scrolled area. |
+| scrollToEnd | (cb?: () => void, options?: [IScrollOptions](https://github.com/DjonnyX/ng-virtual-list/blob/19.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/19.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/19.x/projects/ng-virtual-list/src/lib/types/id.ts), align: [FocusAlignment](https://github.com/DjonnyX/ng-virtual-list/blob/19.x/projects/ng-virtual-list/src/lib/types/focus-alignment.ts) = [FocusAlignments.NONE](https://github.com/DjonnyX/ng-virtual-list/blob/19.x/projects/ng-virtual-list/src/lib/enums/focus-alignments.ts) | Focus an list item by a given id. |
 

package/fesm2022/ng-virtual-list.mjs

@@ -4,7 +4,7 @@ import * as i0 from '@angular/core';
 import { Injectable, inject, signal, ElementRef, ChangeDetectionStrategy, Component, viewChild, output, input, ViewContainerRef, ViewChild, ViewEncapsulation } from '@angular/core';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
-import { Subject, tap, fromEvent, combineLatest, map, filter, distinctUntilChanged, debounceTime, switchMap, of } from 'rxjs';
+import { Subject, tap, fromEvent, combineLatest, map, filter, distinctUntilChanged, debounceTime, switchMap, of, BehaviorSubject as BehaviorSubject$1, delay, take } from 'rxjs';
 
 /**
  * Action modes for collection elements.
@@ -2728,14 +2728,6 @@ class NgVirtualListComponent {
             this.updateRegularRenderer();
         }
     };
-    _onScrollHandler = (e) => {
-        this.clearScrollToRepeatExecutionTimeout();
-        const container = this._container()?.nativeElement;
-        if (container) {
-            const scrollSize = (this._isVertical ? container.scrollTop : container.scrollLeft), actualScrollSize = scrollSize;
-            this._scrollSize.set(actualScrollSize);
-        }
-    };
     itemToFocus = (element, position, align = FocusAlignments.CENTER) => {
         const container = this._container()?.nativeElement;
         if (container) {
@@ -2785,6 +2777,17 @@ class NgVirtualListComponent {
     };
     _cacheVersion = signal(-1);
     _isResetedReachStart = true;
+    _$scrollTo = new Subject();
+    $scrollTo = this._$scrollTo.asObservable();
+    _$scrollToCanceller = new Subject();
+    cancelScrollTo() {
+        if (this._$scrollToCanceller) {
+            this._$scrollToCanceller.next();
+            this._$scrollToCanceller.complete();
+            this._$scrollToCanceller = undefined;
+        }
+    }
+    ;
     _onTrackBoxResetHandler = (v) => {
         if (v) {
             this._isResetedReachStart = true;
@@ -2836,7 +2839,7 @@ class NgVirtualListComponent {
             this._trackBox.trackingPropertyName = v;
         })).subscribe();
         const $bounds = toObservable(this._bounds).pipe(filter(b => !!b)), $items = toObservable(this.items).pipe(map(i => !i ? [] : i)), $scrollSize = toObservable(this._scrollSize), $itemSize = toObservable(this.itemSize).pipe(map(v => v <= 0 ? DEFAULT_ITEM_SIZE : v)), $bufferSize = toObservable(this.bufferSize).pipe(map(v => v < 0 ? DEFAULT_BUFFER_SIZE : v)), $maxBufferSize = toObservable(this.maxBufferSize).pipe(map(v => v < 0 ? DEFAULT_BUFFER_SIZE : v)), $itemConfigMap = toObservable(this.itemConfigMap).pipe(map(v => !v ? {} : v)), $snap = toObservable(this.snap), $isVertical = toObservable(this.direction).pipe(map(v => this.getIsVertical(v || DEFAULT_DIRECTION))), $isLazy = toObservable(this.collectionMode).pipe(map(v => this.getIsLazy(v || DEFAULT_COLLECTION_MODE))), $dynamicSize = toObservable(this.dynamicSize), $enabledBufferOptimization = toObservable(this.enabledBufferOptimization), $snappingMethod = toObservable(this.snappingMethod).pipe(map(v => this.getIsSnappingMethodAdvanced(v || DEFAULT_SNAPPING_METHOD))), $methodForSelecting = toObservable(this.methodForSelecting), $selectedIds = toObservable(this.selectedIds), $collapsedIds = toObservable(this.collapsedIds).pipe(map(v => Array.isArray(v) ? v : [])), $collapsedItemIds = toObservable(this._collapsedItemIds).pipe(map(v => Array.isArray(v) ? v : [])), $actualItems = toObservable(this._actualItems), $screenReaderMessage = toObservable(this.screenReaderMessage), $displayItems = this._service.$displayItems, $cacheVersion = toObservable(this._cacheVersion);
-        combineLatest([$displayItems, $screenReaderMessage, $isVertical, $scrollSize, $bounds]).pipe(takeUntilDestroyed(), distinctUntilChanged(), debounceTime(100), tap(([items, screenReaderMessage, isVertical, scrollSize, bounds]) => {
+        combineLatest([$displayItems, $screenReaderMessage, $isVertical, $scrollSize, $bounds]).pipe(takeUntilDestroyed(), distinctUntilChanged(), debounceTime(100), takeUntilDestroyed(), tap(([items, screenReaderMessage, isVertical, scrollSize, bounds]) => {
             this.screenReaderFormattedMessage.set(formatScreenReaderMessage(items, screenReaderMessage, scrollSize, isVertical, bounds));
         })).subscribe();
         $isLazy.pipe(takeUntilDestroyed(), tap(v => {
@@ -2942,6 +2945,137 @@ class NgVirtualListComponent {
             }
             return of(displayItems);
         })).subscribe();
+        const $container = toObservable(this._container);
+        $container.pipe(distinctUntilChanged(), filter(v => !!v), map(v => v.nativeElement), switchMap(container => {
+            return fromEvent(container, SCROLL);
+        }), tap(e => {
+            const containerEl = this._container();
+            if (containerEl) {
+                const scrollSize = (this._isVertical ? containerEl.nativeElement.scrollTop : containerEl.nativeElement.scrollLeft), currentScollSize = this._scrollSize();
+                this._trackBox.deltaDirection = currentScollSize > scrollSize ? -1 : currentScollSize < scrollSize ? 1 : 0;
+                const event = new ScrollEvent({
+                    direction: this._trackBox.scrollDirection, container: containerEl.nativeElement,
+                    list: this._list().nativeElement, delta: this._trackBox.delta,
+                    scrollDelta: this._trackBox.scrollDelta, isVertical: this._isVertical,
+                });
+                this.onScroll.emit(event);
+            }
+        })).subscribe();
+        $container.pipe(distinctUntilChanged(), filter(v => !!v), map(v => v.nativeElement), switchMap(container => {
+            return fromEvent(container, SCROLL_END);
+        }), tap(e => {
+            const containerEl = this._container();
+            if (containerEl) {
+                const scrollSize = (this._isVertical ? containerEl.nativeElement.scrollTop : containerEl.nativeElement.scrollLeft), currentScollSize = this._scrollSize();
+                this._trackBox.deltaDirection = currentScollSize > scrollSize ? -1 : 0;
+                const event = new ScrollEvent({
+                    direction: this._trackBox.scrollDirection, container: containerEl.nativeElement,
+                    list: this._list().nativeElement, delta: this._trackBox.delta,
+                    scrollDelta: this._trackBox.scrollDelta, isVertical: this._isVertical,
+                });
+                this.onScrollEnd.emit(event);
+            }
+        })).subscribe();
+        const _$scrollCanceller = new BehaviorSubject$1(false);
+        $container.pipe(distinctUntilChanged(), filter(v => !!v), map(v => v.nativeElement), switchMap(container => {
+            return fromEvent(container, SCROLL).pipe(filter(() => !_$scrollCanceller.getValue()));
+        }), tap(e => {
+            this.cancelScrollTo();
+            const container = this._container()?.nativeElement;
+            if (container) {
+                const scrollSize = (this._isVertical ? container.scrollTop : container.scrollLeft), actualScrollSize = scrollSize;
+                this._scrollSize.set(actualScrollSize);
+            }
+        })).subscribe();
+        $container.pipe(distinctUntilChanged(), filter(v => !!v), map(v => v.nativeElement), tap(container => {
+            if (this._resizeObserver) {
+                this._resizeObserver.disconnect();
+            }
+            this._resizeObserver = new ResizeObserver(this._onResizeHandler);
+            this._resizeObserver.observe(container);
+            this._onResizeHandler();
+        })).subscribe();
+        const $scrollTo = this.$scrollTo;
+        combineLatest([$container, $scrollTo]).pipe(takeUntilDestroyed(), filter(([container]) => container !== undefined), map(([container, event]) => ({ container: container?.nativeElement, event })), switchMap(({ container, event }) => {
+            const cnt = container, { id, behavior = BEHAVIOR_INSTANT, iteration = 0, isLastIteration = false, scrollCalled = false, cb } = event;
+            const items = this._actualItems();
+            if (items && items.length) {
+                const dynamicSize = this.dynamicSize(), itemSize = this.itemSize();
+                this.cancelScrollTo();
+                if (dynamicSize) {
+                    _$scrollCanceller.next(true);
+                    const { width, height } = this._bounds() || { width: DEFAULT_LIST_SIZE, height: DEFAULT_LIST_SIZE }, itemConfigMap = this.itemConfigMap(), items = this._actualItems(), isVertical = this._isVertical, currentScollSize = (isVertical ? cnt.scrollTop : cnt.scrollLeft), delta = this._trackBox.delta, opts = {
+                        bounds: { width, height }, collection: items, dynamicSize, isVertical: this._isVertical, itemSize,
+                        bufferSize: this.bufferSize(), maxBufferSize: this.maxBufferSize(),
+                        scrollSize: (isVertical ? cnt.scrollTop : cnt.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 };
+                    if (scrollSize === -1) {
+                        _$scrollCanceller.next(false);
+                        return of([true, { id, container: cnt, scrollCalled, cb }]);
+                    }
+                    this._trackBox.clearDelta();
+                    const { displayItems, totalSize } = this._trackBox.updateCollection(items, itemConfigMap, {
+                        ...opts, scrollSize, fromItemId: isLastIteration ? undefined : id,
+                    }), delta1 = this._trackBox.delta;
+                    this._service.collection = displayItems;
+                    this._trackBox.clearDelta();
+                    let actualScrollSize = scrollSize + delta1;
+                    this.resetBoundsSize(isVertical, totalSize);
+                    this.createDisplayComponentsIfNeed(displayItems);
+                    this.tracking();
+                    const _scrollSize = this._trackBox.getItemPosition(id, itemConfigMap, { ...opts, scrollSize: actualScrollSize, fromItemId: id });
+                    if (_scrollSize === -1) {
+                        _$scrollCanceller.next(false);
+                        return of([true, { id, container: cnt, scrollCalled, cb }]);
+                    }
+                    const notChanged = actualScrollSize === currentScollSize;
+                    cnt.scrollTo(params);
+                    if ((!notChanged && iteration < MAX_SCROLL_TO_ITERATIONS) || iteration < MAX_SCROLL_TO_ITERATIONS) {
+                        this.cancelScrollTo();
+                        this._$scrollToCanceller = new Subject();
+                        this._$scrollTo.next(params);
+                        return of([false, {
+                                id, behavior: BEHAVIOR_INSTANT, container: cnt, iteration: iteration + 1,
+                                isLastIteration: notChanged, scrollCalled: true, cb,
+                            }]).pipe(delay(1));
+                    }
+                    else {
+                        this._scrollSize.set(actualScrollSize);
+                        _$scrollCanceller.next(false);
+                        return of([true, { id, container: cnt, scrollCalled, cb }]);
+                    }
+                }
+                else {
+                    const index = items.findIndex(item => item.id === id);
+                    if (index > -1) {
+                        const isVertical = this._isVertical, currentScollSize = (isVertical ? cnt.scrollTop : cnt.scrollLeft), scrollSize = index * this.itemSize();
+                        if (currentScollSize !== scrollSize) {
+                            const params = { [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: scrollSize, behavior };
+                            cnt.scrollTo(params);
+                            return fromEvent(cnt, SCROLL_END).pipe(take(1), switchMap(() => of([true, { id, container: cnt, cb }])));
+                        }
+                    }
+                }
+            }
+            return of([true, { id, container: cnt, cb }]);
+        }), filter(params => !!params), takeUntilDestroyed(), tap(([finished, params]) => {
+            if (!finished) {
+                if (params) {
+                    this._$scrollTo.next(params);
+                }
+                return;
+            }
+            const p = params;
+            if (p.scrollCalled && p.container) {
+                p.cb?.();
+                return;
+            }
+            if (p) {
+                const { cb } = p;
+                cb?.();
+            }
+        })).subscribe();
         const $itemRenderer = toObservable(this.itemRenderer);
         $itemRenderer.pipe(takeUntilDestroyed(), distinctUntilChanged(), filter(v => !!v), tap(v => {
             this._itemRenderer.set(v);
@@ -3106,137 +3240,31 @@ class NgVirtualListComponent {
         }
     }
     /**
-     * The method scrolls the list to the element with the given id and returns the value of the scrolled area.
-     * Behavior accepts the values ​​"auto", "instant" and "smooth".
+     * The method scrolls the list to the element with the given `id` and returns the value of the scrolled area.
      */
-    scrollTo(id, behavior = BEHAVIOR_AUTO, iteration = 0) {
+    scrollTo(id, cb, options) {
+        const behavior = options?.behavior ?? BEHAVIOR_INSTANT, iteration = options?.iteration ?? 0;
         validateId(id);
         validateScrollBehavior(behavior);
         validateIteration(iteration);
-        this.scrollToExecutor(id, behavior, validateScrollIteration(iteration));
-    }
-    _scrollToRepeatExecutionTimeout;
-    clearScrollToRepeatExecutionTimeout() {
-        clearTimeout(this._scrollToRepeatExecutionTimeout);
-    }
-    scrollToExecutor(id, behavior, iteration = 0, isLastIteration = false) {
-        const items = this._actualItems();
-        if (!items || !items.length) {
-            return;
-        }
-        const dynamicSize = this.dynamicSize(), container = this._container(), itemSize = this.itemSize();
-        if (container) {
-            this.clearScrollToRepeatExecutionTimeout();
-            if (dynamicSize) {
-                if (container) {
-                    container.nativeElement.removeEventListener(SCROLL, this._onScrollHandler);
-                }
-                const { width, height } = this._bounds() || { width: DEFAULT_LIST_SIZE, height: DEFAULT_LIST_SIZE }, itemConfigMap = this.itemConfigMap(), items = this._actualItems(), isVertical = this._isVertical, delta = this._trackBox.delta, opts = {
-                    bounds: { width, height }, collection: items, dynamicSize, isVertical: this._isVertical, itemSize,
-                    bufferSize: this.bufferSize(), maxBufferSize: this.maxBufferSize(),
-                    scrollSize: (isVertical ? container.nativeElement.scrollTop : container.nativeElement.scrollLeft) + delta,
-                    snap: this.snap(), fromItemId: id, enabledBufferOptimization: this.enabledBufferOptimization(),
-                }, scrollSize = this._trackBox.getItemPosition(id, itemConfigMap, opts), params = { [isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: scrollSize, behavior };
-                if (scrollSize === -1) {
-                    container.nativeElement.addEventListener(SCROLL, this._onScrollHandler);
-                    return;
-                }
-                this._trackBox.clearDelta();
-                if (container) {
-                    const { displayItems, totalSize } = this._trackBox.updateCollection(items, itemConfigMap, {
-                        ...opts, scrollSize, fromItemId: isLastIteration ? undefined : id,
-                    }), delta = this._trackBox.delta;
-                    this._service.collection = displayItems;
-                    this._trackBox.clearDelta();
-                    let actualScrollSize = scrollSize + delta;
-                    this.resetBoundsSize(isVertical, totalSize);
-                    this.createDisplayComponentsIfNeed(displayItems);
-                    this.tracking();
-                    const _scrollSize = this._trackBox.getItemPosition(id, itemConfigMap, { ...opts, scrollSize: actualScrollSize, fromItemId: id });
-                    if (_scrollSize === -1) {
-                        container.nativeElement.addEventListener(SCROLL, this._onScrollHandler);
-                        return;
-                    }
-                    const notChanged = actualScrollSize === _scrollSize;
-                    if (!notChanged || iteration < MAX_SCROLL_TO_ITERATIONS) {
-                        this.clearScrollToRepeatExecutionTimeout();
-                        this._scrollToRepeatExecutionTimeout = setTimeout(() => {
-                            this.scrollToExecutor(id, BEHAVIOR_INSTANT, iteration + 1, notChanged);
-                        });
-                    }
-                    else {
-                        this._scrollSize.set(actualScrollSize);
-                        container.nativeElement.addEventListener(SCROLL, this._onScrollHandler);
-                    }
-                }
-                container.nativeElement.scrollTo(params);
-                this._scrollSize.set(scrollSize);
-            }
-            else {
-                const index = items.findIndex(item => item.id === id);
-                if (index > -1) {
-                    const scrollSize = index * this.itemSize();
-                    const params = { [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: scrollSize, behavior };
-                    container.nativeElement.scrollTo(params);
-                }
-            }
-        }
+        const actualIteration = validateScrollIteration(iteration);
+        this._$scrollTo.next({ id, behavior, iteration: actualIteration, isLastIteration: actualIteration === MAX_SCROLL_TO_ITERATIONS, cb });
     }
     /**
-     * Scrolls the scroll area to the desired element with the specified ID.
+     * Scrolls the scroll area to the last item in the collection.
      */
-    scrollToEnd(behavior = BEHAVIOR_INSTANT, iteration = 0) {
+    scrollToEnd(cb, options) {
+        const behavior = options?.behavior ?? BEHAVIOR_INSTANT, iteration = options?.iteration ?? 0;
         validateScrollBehavior(behavior);
         validateIteration(iteration);
-        const items = this.items(), latItem = items[items.length > 0 ? items.length - 1 : 0];
-        this.scrollTo(latItem.id, behavior, validateScrollIteration(iteration));
-    }
-    _onContainerScrollHandler = (e) => {
-        const containerEl = this._container();
-        if (containerEl) {
-            const scrollSize = (this._isVertical ? containerEl.nativeElement.scrollTop : containerEl.nativeElement.scrollLeft), currentScollSize = this._scrollSize();
-            this._trackBox.deltaDirection = currentScollSize > scrollSize ? -1 : currentScollSize < scrollSize ? 1 : 0;
-            const event = new ScrollEvent({
-                direction: this._trackBox.scrollDirection, container: containerEl.nativeElement,
-                list: this._list().nativeElement, delta: this._trackBox.delta,
-                scrollDelta: this._trackBox.scrollDelta, isVertical: this._isVertical,
-            });
-            this.onScroll.emit(event);
-        }
-    };
-    _onContainerScrollEndHandler = (e) => {
-        const containerEl = this._container();
-        if (containerEl) {
-            const scrollSize = (this._isVertical ? containerEl.nativeElement.scrollTop : containerEl.nativeElement.scrollLeft), currentScollSize = this._scrollSize();
-            this._trackBox.deltaDirection = currentScollSize > scrollSize ? -1 : 0;
-            const event = new ScrollEvent({
-                direction: this._trackBox.scrollDirection, container: containerEl.nativeElement,
-                list: this._list().nativeElement, delta: this._trackBox.delta,
-                scrollDelta: this._trackBox.scrollDelta, isVertical: this._isVertical,
-            });
-            this.onScrollEnd.emit(event);
-        }
-    };
-    ngAfterViewInit() {
-        this.afterViewInit();
-    }
-    afterViewInit() {
-        const containerEl = this._container();
-        if (containerEl) {
-            // for direction calculation
-            containerEl.nativeElement.addEventListener(SCROLL, this._onContainerScrollHandler);
-            containerEl.nativeElement.addEventListener(SCROLL_END, this._onContainerScrollEndHandler);
-            containerEl.nativeElement.addEventListener(SCROLL, this._onScrollHandler);
-            this._resizeObserver = new ResizeObserver(this._onResizeHandler);
-            this._resizeObserver.observe(containerEl.nativeElement);
-            this._onResizeHandler();
-        }
+        const items = this.items(), latItem = items[items.length > 0 ? items.length - 1 : 0], id = latItem.id, actualIteration = validateScrollIteration(iteration);
+        this._$scrollTo.next({ id, behavior, iteration: actualIteration, isLastIteration: actualIteration === MAX_SCROLL_TO_ITERATIONS, cb });
     }
     ngOnDestroy() {
         this.dispose();
     }
     dispose() {
-        this.clearScrollToRepeatExecutionTimeout();
+        this.cancelScrollTo();
         if (this._trackBox) {
             this._trackBox.dispose();
         }
@@ -3249,12 +3277,6 @@ class NgVirtualListComponent {
         if (this._resizeObserver) {
             this._resizeObserver.disconnect();
         }
-        const containerEl = this._container();
-        if (containerEl) {
-            containerEl.nativeElement.removeEventListener(SCROLL, this._onScrollHandler);
-            containerEl.nativeElement.removeEventListener(SCROLL, this._onContainerScrollHandler);
-            containerEl.nativeElement.removeEventListener(SCROLL_END, this._onContainerScrollEndHandler);
-        }
         if (this._snapedDisplayComponent) {
             this._snapedDisplayComponent.destroy();
         }