ng-virtual-list 21.12.8 → 21.12.9

package/fesm2022/ng-virtual-list.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { Injectable, inject, viewChild, signal, ElementRef, DestroyRef, effect, computed, ChangeDetectionStrategy, Component, output, Input, Directive, Injector, InjectionToken, input, ViewChild, ViewContainerRef, ViewEncapsulation, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
-import { Subject, BehaviorSubject, distinctUntilChanged, combineLatest, tap, map, fromEvent, race, of, debounceTime, switchMap as switchMap$1, filter as filter$1, delay, takeUntil as takeUntil$1, startWith, from, take, skip } from 'rxjs';
+import { Subject, BehaviorSubject, distinctUntilChanged, combineLatest, tap, map, fromEvent, race, of, debounceTime, switchMap as switchMap$1, filter as filter$1, delay, takeUntil as takeUntil$1, startWith, take, from, skip } from 'rxjs';
 import { takeUntilDestroyed, toSignal, toObservable } from '@angular/core/rxjs-interop';
 import { BehaviorSubject as BehaviorSubject$1 } from 'rxjs/internal/BehaviorSubject';
 import * as i1 from '@angular/common';
@@ -4155,7 +4155,7 @@ class Animator {
 const SCROLL_VIEW_INVERSION = new InjectionToken('ScrollViewInversion');
 const SCROLL_VIEW_OVERSCROLL_ENABLED = new InjectionToken('ScrollViewOverscrollEnabled');
 const SCROLL_VIEW_NORMALIZE_VALUE_FROM_ZERO = new InjectionToken('ScrollViewNormalizeValueFromZero');
-const TOP$1 = 'top', LEFT$2 = 'left', INSTANT$1 = 'instant', AUTO = 'auto', SMOOTH = 'smooth', DURATION = 2000, FRICTION_FORCE = .035, MAX_DURATION = 4000, ANIMATION_DURATION = 50, MASS = .005, ACCELERATION_SCALE = 40, MAX_DIST = 12500, MAX_VELOCITY_TIMESTAMP = 100, SPEED_SCALE = 15, OVERSCROLL_START_ITERATION = 2;
+const TOP$1 = 'top', LEFT$2 = 'left', INSTANT$1 = 'instant', AUTO = 'auto', SMOOTH = 'smooth', DURATION = 2000, FRICTION_FORCE = .035, MAX_DURATION = 4000, ANIMATION_DURATION = 50, MASS = .005, ACCELERATION_SCALE = 40, MAX_DIST = 12500, MIN_DELTA = 0.1, MAX_VELOCITY_TIMESTAMP = 100, MAX_VELOCITIES_LENGTH = 10, MIN_ACCELERATION = 0.001, SPEED_SCALE = 15, OVERSCROLL_START_ITERATION = 2;
 const MAX_ITERATIONS_FOR_AVERAGE_CALCULATIONS = 5, INSTANT_VELOCITY_SCALE = 1000;
 const SCROLL_EVENT$1 = new Event(SCROLLER_SCROLL);
 
@@ -4529,12 +4529,32 @@ class NgScrollView extends BaseScrollView {
     get averageVelocity() { return this._$averageVelocity.getValue(); }
     _measureVelocityTimestamp = Date.now();
     _measureVelocityLastPosition = this.isVertical() ? this._y : this._x;
-    _startPosition = 0;
+    _startPositionX = 0;
+    _startPositionY = 0;
+    set startPosition(v) {
+        const isVertical = this.isVertical(), c = isVertical ? this._startPositionY : this._startPositionX;
+        if (v !== c) {
+            if (isVertical) {
+                this._startPositionY = v;
+            }
+            else {
+                this._startPositionX = v;
+            }
+        }
+    }
+    get startPosition() {
+        if (this.isVertical()) {
+            return this._startPositionY;
+        }
+        return this._startPositionX;
+    }
     _animator = new Animator();
     _interactive = true;
     _horizontalAxisInvertion;
     get inverted() { return this._horizontalAxisInvertion(); }
     _overscrollIteration = 0;
+    _overscrollStartIteration = 0;
+    _overscrollApplied = false;
     set x(v) {
         this.setX(v);
     }
@@ -4574,7 +4594,7 @@ class NgScrollView extends BaseScrollView {
     _delta = 0;
     set delta(v) {
         this._delta = v;
-        this._startPosition += v;
+        this.startPosition += v;
     }
     set startLayoutOffset(v) {
         if (this._startLayoutOffset !== v) {
@@ -4583,6 +4603,8 @@ class NgScrollView extends BaseScrollView {
         }
     }
     get startLayoutOffset() { return this._startLayoutOffset; }
+    _scrollDirectionValueX = 0;
+    _scrollDirectionValueY = 0;
     _intersectionComponentId = null;
     _isAlignmentAnimation = false;
     get animated() { return this._animator?.isAnimated ?? false; }
@@ -4610,14 +4632,17 @@ class NgScrollView extends BaseScrollView {
         const $wheel = this.$wheel;
         $wheel.pipe(takeUntilDestroyed(), switchMap$1(v => of(this.averageVelocity)), debounceTime(100), tap(v => {
             this.snapWithInitialForceIfNecessary(v);
+            this._overscrollIteration = this._overscrollStartIteration = 0;
+            this._overscrollApplied = false;
             this._scrollDirection.clear();
+            this._scrollDirectionValueX = this._scrollDirectionValueY = 0;
         })).subscribe();
         const $viewport = toObservable(this.scrollViewport).pipe(takeUntilDestroyed(this._destroyRef), filter$1(v => !!v), map(v => v.nativeElement)), $content = toObservable(this.scrollContent).pipe(takeUntilDestroyed(this._destroyRef), filter$1(v => !!v), map(v => v.nativeElement)), $wheelEmitter = this._inversion ? $viewport : $content;
         $wheelEmitter.pipe(takeUntilDestroyed(this._destroyRef), switchMap$1(content => {
             return fromEvent(content, WHEEL, { passive: false }).pipe(filter$1(() => this._interactive), takeUntilDestroyed(this._destroyRef), tap(e => {
                 const isVertical = this.isVertical();
                 this.emitScrollableEvent();
-                this.checkOverscroll(e);
+                this.checkOverscroll(e, true);
                 this.stopScrolling(true);
                 const scrollSize = isVertical ? this.scrollHeight : this.scrollWidth, startPos = isVertical ? this._y : this._x, delta = isVertical ? e.deltaY : (e.deltaX * (this._horizontalAxisInvertion() ? -1 : 1)), dp = (startPos + delta), position = this.isInfinity() ? dp : (dp < 0 ? 0 : dp > scrollSize ? scrollSize : dp);
                 this.scroll({ [isVertical ? TOP$1 : LEFT$2]: position, behavior: INSTANT$1, userAction: true, blending: false, fireUpdate: true });
@@ -4660,7 +4685,10 @@ class NgScrollView extends BaseScrollView {
         $content.pipe(takeUntilDestroyed(this._destroyRef), switchMap$1(content => {
             return fromEvent(content, MOUSE_DOWN, { passive: false }).pipe(takeUntilDestroyed(this._destroyRef), filter$1(v => this._interactive), switchMap$1(e => {
                 mouseCanceled = false;
+                this._overscrollStartIteration = 0;
+                this._overscrollApplied = false;
                 this._scrollDirection.clear();
+                this._scrollDirectionValueX = this._scrollDirectionValueY = 0;
                 this.cancelOverscroll();
                 this.onDragStart();
                 this.stopScrolling(true);
@@ -4672,23 +4700,34 @@ class NgScrollView extends BaseScrollView {
                 const inversion = this._inversion, isVertical = this.isVertical();
                 this._isMoving = true;
                 this.grabbing.set(true);
-                this._startPosition = (isVertical ? this.y : this.x);
-                let prevClientPosition = (isVertical ? e.clientY : e.clientX) * (this._horizontalAxisInvertion() ? -1 : 1), startClientPos = prevClientPosition, offsets = new Array(), velocities = new Array(), startTime = Date.now();
+                this._startPositionX = this.x;
+                this._startPositionY = this.y;
+                let prevClientPositionX = (e.clientX) * (this._horizontalAxisInvertion() ? -1 : 1), prevClientPositionY = e.clientY, startClientPosX = prevClientPositionX, startClientPosY = prevClientPositionY, offsetsX = new Array(), offsetsY = new Array(), velocitiesX = new Array(), velocitiesY = new Array(), startTime = Date.now();
                 return fromEvent(window, MOUSE_MOVE, { passive: false }).pipe(takeUntilDestroyed(this._destroyRef), takeUntil$1($mouseDragCancel), tap(e => {
                     this.checkOverscroll(e);
                 }), switchMap$1(e => {
-                    const { position, currentPos, endTime, scrollDelta } = this.calculatePosition(isVertical, e, inversion, startClientPos, startTime, prevClientPosition, offsets, velocities);
-                    prevClientPosition = currentPos;
+                    const { position: positionX, currentPos: currentPosX, endTime, scrollDelta: scrollDeltaX } = this.calculatePosition(false, true, this._horizontalAxisInvertion(), e, inversion, startClientPosX, startTime, prevClientPositionX, offsetsX, velocitiesX), { position: positionY, currentPos: currentPosY, scrollDelta: scrollDeltaY } = this.calculatePosition(true, true, false, e, inversion, startClientPosY, startTime, prevClientPositionY, offsetsY, velocitiesY), position = isVertical ? positionY : positionX;
+                    prevClientPositionX = currentPosX;
+                    prevClientPositionY = currentPosY;
+                    this._scrollDirectionValueX += Math.abs(scrollDeltaX);
+                    this._scrollDirectionValueY += Math.abs(scrollDeltaY);
                     this.move(isVertical, position, true, true, true);
-                    const offset = Math.abs(position) - Math.abs(isVertical ? this._y : this._x), scrollSize = isVertical ? this.scrollHeight : this.scrollWidth, viewportSize = isVertical ? this.viewportBounds().height : this.viewportBounds().width;
-                    if (position >= (scrollSize - viewportSize * .5) || position <= 0) {
-                        startClientPos -= offset;
+                    if (this.isInfinity()) {
+                        const offset = Math.abs(position) - Math.abs(isVertical ? this._y : this._x), scrollSize = isVertical ? this.scrollHeight : this.scrollWidth, viewportSize = isVertical ? this.viewportBounds().height : this.viewportBounds().width;
+                        if (position >= (scrollSize - viewportSize * .5) || position <= 0) {
+                            if (isVertical) {
+                                startClientPosY -= offset;
+                            }
+                            else {
+                                startClientPosX -= offset;
+                            }
+                        }
                     }
                     startTime = endTime;
                     return race([fromEvent(window, MOUSE_UP, { passive: false }), fromEvent(content, MOUSE_UP, { passive: false })]).pipe(takeUntilDestroyed(this._destroyRef), takeUntil$1($mouseDragCancel), tap(e => {
                         mouseCanceled = true;
                         this.cancelOverscroll();
-                        const endTime = Date.now(), timestamp = endTime - startTime, { v0 } = this.calculateVelocity(offsets, scrollDelta, timestamp), { a0 } = this.calculateAcceleration(velocities, v0, timestamp);
+                        const endTime = Date.now(), timestamp = endTime - startTime, { v0 } = this.calculateVelocity(isVertical ? offsetsY : offsetsX, isVertical ? scrollDeltaY : scrollDeltaX, timestamp), { a0 } = this.calculateAcceleration(isVertical ? velocitiesY : velocitiesX, v0, timestamp);
                         this._isMoving = false;
                         this.grabbing.set(false);
                         if (!this.snapIfNecessary(v0, false) && this.scrollBehavior() !== BEHAVIOR_INSTANT) {
@@ -4738,7 +4777,10 @@ class NgScrollView extends BaseScrollView {
         $content.pipe(takeUntilDestroyed(this._destroyRef), switchMap$1(content => {
             return fromEvent(content, TOUCH_START, { passive: false }).pipe(takeUntilDestroyed(this._destroyRef), filter$1(() => this._interactive), switchMap$1(e => {
                 touchCanceled = false;
+                this._overscrollStartIteration = 0;
+                this._overscrollApplied = false;
                 this._scrollDirection.clear();
+                this._scrollDirectionValueX = this._scrollDirectionValueY = 0;
                 this.cancelOverscroll();
                 this.onDragStart();
                 this.stopScrolling(true);
@@ -4750,23 +4792,34 @@ class NgScrollView extends BaseScrollView {
                 const inversion = this._inversion, isVertical = this.isVertical();
                 this._isMoving = true;
                 this.grabbing.set(true);
-                this._startPosition = (isVertical ? this.y : this.x);
-                let prevClientPosition = (isVertical ? e.touches[e.touches.length - 1].clientY : e.touches[e.touches.length - 1].clientX) * (this._horizontalAxisInvertion() ? -1 : 1), startClientPos = prevClientPosition, offsets = new Array(), velocities = new Array(), startTime = Date.now();
+                this._startPositionX = this.x;
+                this._startPositionY = this.y;
+                let prevClientPositionX = (e.touches[e.touches.length - 1].clientX) * (this._horizontalAxisInvertion() ? -1 : 1), prevClientPositionY = e.touches[e.touches.length - 1].clientY, startClientPosX = prevClientPositionX, startClientPosY = prevClientPositionY, offsetsX = new Array(), offsetsY = new Array(), velocitiesX = new Array(), velocitiesY = new Array(), startTime = Date.now();
                 return fromEvent(window, TOUCH_MOVE, { passive: false }).pipe(takeUntilDestroyed(this._destroyRef), takeUntil$1($touchCanceler), tap(e => {
                     this.checkOverscroll(e);
                 }), switchMap$1(e => {
-                    const { position, currentPos, endTime, scrollDelta } = this.calculatePosition(isVertical, e, inversion, startClientPos, startTime, prevClientPosition, offsets, velocities);
-                    prevClientPosition = currentPos;
+                    const { position: positionX, currentPos: currentPosX, endTime, scrollDelta: scrollDeltaX } = this.calculatePosition(false, true, this._horizontalAxisInvertion(), e, inversion, startClientPosX, startTime, prevClientPositionX, offsetsX, velocitiesX), { position: positionY, currentPos: currentPosY, scrollDelta: scrollDeltaY } = this.calculatePosition(true, true, false, e, inversion, startClientPosY, startTime, prevClientPositionY, offsetsY, velocitiesY), position = isVertical ? positionY : positionX;
+                    prevClientPositionX = currentPosX;
+                    prevClientPositionY = currentPosY;
+                    this._scrollDirectionValueX += Math.abs(scrollDeltaX);
+                    this._scrollDirectionValueY += Math.abs(scrollDeltaY);
                     this.move(isVertical, position, true, true, true);
-                    const offset = Math.abs(position) - Math.abs(isVertical ? this._y : this._x), scrollSize = isVertical ? this.scrollHeight : this.scrollWidth, viewportSize = isVertical ? this.viewportBounds().height : this.viewportBounds().width;
-                    if (position >= (scrollSize - viewportSize * .5) || position <= 0) {
-                        startClientPos -= offset;
+                    if (this.isInfinity()) {
+                        const offset = Math.abs(position) - Math.abs(isVertical ? this._y : this._x), scrollSize = isVertical ? this.scrollHeight : this.scrollWidth, viewportSize = isVertical ? this.viewportBounds().height : this.viewportBounds().width;
+                        if (position >= (scrollSize - viewportSize * .5) || position <= 0) {
+                            if (isVertical) {
+                                startClientPosY -= offset;
+                            }
+                            else {
+                                startClientPosX -= offset;
+                            }
+                        }
                     }
                     startTime = endTime;
                     return race([fromEvent(window, TOUCH_END, { passive: false }), fromEvent(content, TOUCH_END, { passive: false })]).pipe(takeUntilDestroyed(this._destroyRef), takeUntil$1($touchCanceler), tap(e => {
                         touchCanceled = true;
                         this.cancelOverscroll();
-                        const endTime = Date.now(), timestamp = endTime - startTime, { v0 } = this.calculateVelocity(offsets, scrollDelta, timestamp), { a0 } = this.calculateAcceleration(velocities, v0, timestamp);
+                        const endTime = Date.now(), timestamp = endTime - startTime, { v0 } = this.calculateVelocity(isVertical ? offsetsY : offsetsX, isVertical ? scrollDeltaY : scrollDeltaX, timestamp), { a0 } = this.calculateAcceleration(isVertical ? velocitiesY : velocitiesX, v0, timestamp);
                         this._isMoving = false;
                         this.grabbing.set(false);
                         if (!this.snapIfNecessary(v0, false) && this.scrollBehavior() !== BEHAVIOR_INSTANT) {
@@ -4848,8 +4901,11 @@ class NgScrollView extends BaseScrollView {
         }
         return false;
     }
-    calculatePosition(isVertical, e, inversion, startClientPos, startTime, prevClientPosition, offsets, velocities) {
-        const currentPos = (isVertical ? e.touches?.[e.touches?.length - 1]?.clientY || e.clientY : e.touches?.[e.touches?.length - 1]?.clientX || e.clientX) * (this._horizontalAxisInvertion() ? -1 : 1), scrollSize = isVertical ? this.scrollHeight : this.scrollWidth, delta = (inversion ? -1 : 1) * (startClientPos - currentPos), dp = this._startPosition + delta, position = this.isInfinity() ? dp : dp < 0 ? 0 : dp > scrollSize ? scrollSize : dp, endTime = Date.now(), timestamp = endTime - startTime, scrollDelta = prevClientPosition === 0 ? 0 : prevClientPosition - currentPos, { v0 } = this.calculateVelocity(offsets, scrollDelta, timestamp);
+    calculatePosition(isVertical, enabled, axisInversion, e, inversion, startClientPos, startTime, prevClientPosition, offsets, velocities) {
+        if (!enabled) {
+            return { position: isVertical ? this._y : this._x, currentPos: null, endTime: Date.now(), scrollDelta: 0 };
+        }
+        const currentPos = (isVertical ? e.touches?.[e.touches?.length - 1]?.clientY || e.clientY : e.touches?.[e.touches?.length - 1]?.clientX || e.clientX) * (axisInversion ? -1 : 1), scrollSize = isVertical ? this.scrollHeight : this.scrollWidth, delta = (inversion ? -1 : 1) * (startClientPos - currentPos), dp = (isVertical ? this._startPositionY : this._startPositionX) + delta, position = this.isInfinity() ? dp : dp < 0 ? 0 : dp > scrollSize ? scrollSize : dp, endTime = Date.now(), timestamp = endTime - startTime, scrollDelta = (prevClientPosition === 0 || prevClientPosition === null) ? 0 : prevClientPosition - currentPos, { v0 } = this.calculateVelocity(offsets, scrollDelta, timestamp);
         this.calculateAcceleration(velocities, v0, timestamp);
         return { position, currentPos, endTime, scrollDelta };
     }
@@ -4878,7 +4934,7 @@ class NgScrollView extends BaseScrollView {
             }
         }
     }
-    checkOverscroll(e) {
+    checkOverscroll(e, wheel = false) {
         if (!this._overscrollEnabled || !this.overscrollEnabled()) {
             if (e.cancelable) {
                 e.stopImmediatePropagation();
@@ -4888,14 +4944,35 @@ class NgScrollView extends BaseScrollView {
         }
         if (this._overscrollEnabled) {
             if (this.isVertical()) {
-                this.checkOverscrollByAxis(e, this._y, this.scrollHeight);
+                if (this._overscrollStartIteration < OVERSCROLL_START_ITERATION) {
+                    this._overscrollStartIteration++;
+                    this.checkOverscrollByAxis(e, this._y, this.scrollHeight);
+                }
+                else {
+                    if (wheel || this._overscrollApplied || this._scrollDirectionValueY > this._scrollDirectionValueX) {
+                        this._overscrollApplied = true;
+                        this.checkOverscrollByAxis(e, this._y, this.scrollHeight);
+                    }
+                }
             }
             else {
-                this.checkOverscrollByAxis(e, this._x, this.scrollWidth);
+                if (this._overscrollStartIteration < OVERSCROLL_START_ITERATION) {
+                    this._overscrollStartIteration++;
+                    this.checkOverscrollByAxis(e, this._x, this.scrollWidth);
+                }
+                else {
+                    if (wheel || this._overscrollApplied || this._scrollDirectionValueX > this._scrollDirectionValueY) {
+                        this._overscrollApplied = true;
+                        this.checkOverscrollByAxis(e, this._x, this.scrollWidth);
+                    }
+                }
             }
         }
     }
     calculateVelocity(offsets, delta, timestamp, indexOffset = 10) {
+        if (offsets.length > MAX_VELOCITIES_LENGTH) {
+            offsets.shift();
+        }
         offsets.push([delta, timestamp < ANIMATOR_MIN_TIMESTAMP ? ANIMATOR_MIN_TIMESTAMP : timestamp]);
         const len = offsets.length, startIndex = len > indexOffset ? len - indexOffset : 0, lastVSign = calculateDirection(offsets), speedScale = this.scrollingSettings()?.speedScale ?? SPEED_SCALE;
         let vSum = 0;
@@ -4911,7 +4988,10 @@ class NgScrollView extends BaseScrollView {
         return { v0 };
     }
     calculateAcceleration(velocities, delta, timestamp, indexOffset = 10) {
-        velocities.push([delta, timestamp < ANIMATOR_MIN_TIMESTAMP ? ANIMATOR_MIN_TIMESTAMP : timestamp]);
+        if (velocities.length > MAX_VELOCITIES_LENGTH) {
+            velocities.shift();
+        }
+        velocities.push([Math.abs(delta) < MIN_DELTA ? 0 : delta, timestamp < ANIMATOR_MIN_TIMESTAMP ? ANIMATOR_MIN_TIMESTAMP : timestamp]);
         const len = velocities.length, startIndex = len > indexOffset ? len - indexOffset : 0;
         let aSum = 0, prevV0, iteration = 0, lastVSign = calculateDirection(velocities);
         const mass = this.scrollingSettings()?.mass ?? MASS;
@@ -4929,7 +5009,7 @@ class NgScrollView extends BaseScrollView {
             iteration++;
         }
         const a0 = aSum * (this.scrollingSettings()?.frictionalForce ?? FRICTION_FORCE);
-        return { a0 };
+        return { a0: Math.abs(a0) < MIN_ACCELERATION ? 0 : a0 };
     }
     stopScrolling(force = false) {
         if (this._isAlignmentAnimation && !force) {
@@ -5596,6 +5676,13 @@ class NgScrollerComponent extends NgScrollView {
         super();
         this._filterId = `${this._service.id}-${MOTION_BLUR}`;
         this._filter = `url(#${this._filterId})`;
+        this.$resizeViewport.pipe(takeUntilDestroyed(), debounceTime(0), tap(() => {
+            this.snapIfNeed();
+        }), switchMap$1(() => {
+            return this.$scroll.pipe(takeUntilDestroyed(this._destroyRef), take(1), tap(() => {
+                this.snapIfNeed();
+            }));
+        })).subscribe();
         const $filter = toObservable(this.filter), $motionBlur = toObservable(this.motionBlur), $maxMotionBlur = toObservable(this.maxMotionBlur), $motionBlurEnabled = toObservable(this.motionBlurEnabled), $isVertical = toObservable(this.isVertical);
         const $scrollbarScroll = this.$scrollbarScroll;
         $scrollbarScroll.pipe(takeUntilDestroyed(), debounceTime(50), tap(() => {
@@ -7595,7 +7682,7 @@ class NgVirtualListComponent {
                 this._trackBox.preventScrollSnapping(true);
                 const params = {
                     [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: pos, behavior, snap: false, normalize: true,
-                    fireUpdate: false, blending: false, userAction: false,
+                    fireUpdate: true, blending: false, userAction: false,
                     duration: this.snapToItem() ? Math.max(this.animationParams().scrollToItem, this.animationParams().navigateToItem) : this.animationParams().navigateToItem,
                 };
                 scroller.scrollTo(params);