ng-virtual-list 14.12.2 → 14.12.4

package/fesm2015/ng-virtual-list.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
 import { Injectable, inject, Component, ChangeDetectorRef, ElementRef, ChangeDetectionStrategy, ViewChild, EventEmitter as EventEmitter$1, Directive, Input, Output, Injector, InjectionToken, TemplateRef, ViewContainerRef, ViewEncapsulation, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { Subject, BehaviorSubject, takeUntil, tap, map, combineLatest, fromEvent, race, of, debounceTime, switchMap as switchMap$1, distinctUntilChanged, filter as filter$1, delay, startWith, from, take, skip } from 'rxjs';
+import { Subject, BehaviorSubject, takeUntil, distinctUntilChanged, combineLatest, tap, map, fromEvent, race, of, debounceTime, switchMap as switchMap$1, filter as filter$1, delay, startWith, from, take, skip } from 'rxjs';
 import { BehaviorSubject as BehaviorSubject$1 } from 'rxjs/internal/BehaviorSubject';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { takeUntil as takeUntil$1, switchMap, filter, tap as tap$1 } from 'rxjs/operators';
+import { takeUntil as takeUntil$1, tap as tap$1, switchMap, filter } from 'rxjs/operators';
 import * as i4 from '@angular/cdk/scrolling';
 import { CdkScrollable, CdkScrollableModule } from '@angular/cdk/scrolling';
 
@@ -251,6 +251,7 @@ var TextDirections;
     TextDirections["LTR"] = "ltr";
 })(TextDirections || (TextDirections = {}));
 
+const INVISIBLE_POSITION = -10000;
 const SERVICE_PROP_DUMMY_ID = '__service-dummy-id__';
 const SERVICE_PROP_DUMMY = '__service-dummy__';
 const SERVICE_TYPE_DUMMY = '__service-type-dummy__';
@@ -280,7 +281,7 @@ const DEFAULT_MOTION_BLUR = 0.15;
 const DEFAULT_MOTION_BLUR_ENABLED = false;
 const DEFAULT_MAX_MOTION_BLUR = 0.5;
 const DEFAULT_ANIMATION_PARAMS = {
-    scrollToItem: 50,
+    scrollToItem: 150,
     snapToItem: 150,
     navigateToItem: 150,
     navigateByKeyboard: NAVIGATION_BY_KEYBOARD_TIMER,
@@ -336,13 +337,15 @@ const POSITION$1 = 'position';
 const POSITION_RELATIVE = 'relative';
 const POSITION_ABSOLUTE = 'absolute';
 const TRANSLATE_3D = 'translate3d';
-const ZEROS_TRANSLATE_3D = `${TRANSLATE_3D}(0,0,0)`;
+const INVISIBLE_TRANSLATE_3D = `${TRANSLATE_3D}(${INVISIBLE_POSITION},${INVISIBLE_POSITION},0)`;
 const HIDDEN_ZINDEX = '-1';
 const DEFAULT_ZINDEX = '0';
 const TOP_PROP_NAME = 'top';
 const LEFT_PROP_NAME = 'left';
 const X_PROP_NAME = 'x';
 const Y_PROP_NAME = 'y';
+const TRANSFORMED_X_PROP_NAME = 'transformedX';
+const TRANSFORMED_Y_PROP_NAME = 'transformedY';
 const WIDTH_PROP_NAME = 'width';
 const HEIGHT_PROP_NAME = 'height';
 const MARGIN_TOP = 'marginTop';
@@ -496,6 +499,7 @@ const DEFAULT_TEMPLATE_CONTEXT = {
         isLast: false,
         fullSize: false,
         totalItems: 0,
+        grabbing: false,
     },
     reseted: false,
     index: -1,
@@ -684,6 +688,14 @@ class NgVirtualListService {
         this._$langTextDir = new BehaviorSubject$1(TextDirections.LTR);
         this.$langTextDir = this._$langTextDir.asObservable();
         this._langTextDir = TextDirections.LTR;
+        this._$grabbing = new BehaviorSubject$1(false);
+        this.$grabbing = this._$grabbing.asObservable();
+        this._grabbing = false;
+        this._$clickPressed = new BehaviorSubject$1(false);
+        this.$clickPressed = this._$clickPressed.asObservable();
+        this._clickPressed = false;
+        this._$isGrabbing = new BehaviorSubject$1(false);
+        this.$isGrabbing = this._$isGrabbing.asObservable();
         this._scrollBarSize = 0;
         this._$scrollBarSize = new BehaviorSubject$1(this._scrollBarSize);
         this.$scrollBarSize = this._$scrollBarSize.asObservable();
@@ -698,6 +710,10 @@ class NgVirtualListService {
         this._onTrackBoxChangeHandler = (v) => {
             this._$cacheVersion.next(v);
         };
+        const $grabbing = this.$grabbing.pipe(takeUntil(this._$unsubscribe), distinctUntilChanged()), $clickPressed = this.$clickPressed.pipe(takeUntil(this._$unsubscribe), distinctUntilChanged());
+        combineLatest([$grabbing, $clickPressed]).pipe(takeUntil(this._$unsubscribe), tap(([grabbing, clickPressed]) => {
+            this._$isGrabbing.next(grabbing && !clickPressed);
+        })).subscribe();
         this._$selectingMode.pipe(takeUntil(this._$unsubscribe), tap(v => {
             switch (v) {
                 case SelectingModesTypes.SELECT: {
@@ -748,6 +764,23 @@ class NgVirtualListService {
         this._langTextDir = v;
         this._$langTextDir.next(v);
     }
+    get grabbing() { return this._$grabbing.getValue(); }
+    set grabbing(v) {
+        if (this._grabbing === v) {
+            return;
+        }
+        this._grabbing = v;
+        this._$grabbing.next(v);
+    }
+    get clickPressed() { return this._$clickPressed.getValue(); }
+    set clickPressed(v) {
+        if (this._clickPressed === v) {
+            return;
+        }
+        this._clickPressed = v;
+        this._$clickPressed.next(v);
+    }
+    get isGrabbing() { return this._$isGrabbing.getValue(); }
     get scrollBarSize() { return this._$scrollBarSize.getValue(); }
     set scrollBarSize(v) {
         if (this._scrollBarSize === v) {
@@ -1236,6 +1269,9 @@ class BaseVirtualListItemComponent extends DisposableComponent {
         this._id = this._service.generateComponentId();
         this._listId = this._service.id;
         this._displayId = createDisplayId(this._listId, this._id);
+        this._service.$isGrabbing.pipe(takeUntil(this._$unsubscribe), tap(v => {
+            this.updateConfig(this._data, v);
+        })).subscribe();
         const $part = this.$part;
         $part.pipe(takeUntil(this._$unsubscribe), tap(part => {
             this._elementRef.nativeElement.setAttribute('part', part);
@@ -1296,7 +1332,7 @@ class BaseVirtualListItemComponent extends DisposableComponent {
         }
         this._data = v;
         this.updatePartStr(v, this._isSelected, this._isCollapsed);
-        this.updateConfig(v);
+        this.updateConfig(v, this._service.isGrabbing);
         this.updateMeasures(v);
         this.update();
         this._$data.next(v);
@@ -1335,8 +1371,8 @@ class BaseVirtualListItemComponent extends DisposableComponent {
         this._$measures.next((v === null || v === void 0 ? void 0 : v.measures) ? Object.assign({}, v.measures) : null);
         this._cdr.markForCheck();
     }
-    updateConfig(v) {
-        this._$config.next(Object.assign(Object.assign({}, (v === null || v === void 0 ? void 0 : v.config) || {}), { selected: this._isSelected, collapsed: this._isCollapsed, focused: this._$focused.getValue() }));
+    updateConfig(v, grabbing) {
+        this._$config.next(Object.assign(Object.assign({}, (v === null || v === void 0 ? void 0 : v.config) || {}), { selected: this._isSelected, collapsed: this._isCollapsed, focused: this._$focused.getValue(), grabbing }));
         this._cdr.markForCheck();
     }
     update() {
@@ -1468,6 +1504,7 @@ class BaseVirtualListItemComponent extends DisposableComponent {
         }
         const el = this._elementRef.nativeElement, styles = el.style;
         styles.zIndex = HIDDEN_ZINDEX;
+        styles.transform = INVISIBLE_TRANSLATE_3D;
         if (this.regular) {
             if (styles.display === DISPLAY_NONE) {
                 return;
@@ -1500,9 +1537,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ['container']
             }] } });
 
-const DEFAULT_MAX_DISTANCE = 40;
 /**
- * ItemClickDirective
+ * VirtualClickDirective
  * Maximum performance for extremely large lists.
  * It is based on algorithms for virtualization of screen objects.
  * @link https://github.com/DjonnyX/ng-virtual-list/blob/14.x/projects/ng-virtual-list/src/lib/directives/item-click/item-click.directive.ts
@@ -1510,26 +1546,40 @@ const DEFAULT_MAX_DISTANCE = 40;
  * @email djonnyx@gmail.com
  */
 class VirtualClickDirective {
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
+    constructor() {
+        var _a;
         this._$unsubscribe = new Subject();
-        this._maxDistance = DEFAULT_MAX_DISTANCE;
+        this._$maxDistance = new BehaviorSubject(null);
+        this.$maxDistance = this._$maxDistance.asObservable();
+        this._maxDistance = null;
         this.onVirtualClick = new EventEmitter$1();
+        this.onVirtualClickPress = new EventEmitter$1();
+        this.onVirtualClickCancel = new EventEmitter$1();
+        this._service = inject(NgVirtualListService);
+        this._elementRef = inject(ElementRef);
+        let maxDistance = (_a = this._maxDistance) !== null && _a !== void 0 ? _a : DEFAULT_CLICK_DISTANCE;
+        combineLatest([this._service.$clickDistance, this.$maxDistance]).pipe(takeUntil$1(this._$unsubscribe), tap$1(([clickDistance, distance]) => {
+            maxDistance = distance === null ? clickDistance : distance;
+        })).subscribe();
         const $pointerPressed = fromEvent(this._elementRef.nativeElement, 'pointerdown'), $pointerCancel = race([
             fromEvent(window, 'pointerup').pipe(takeUntil$1(this._$unsubscribe)),
             fromEvent(window, 'pointerleave').pipe(takeUntil$1(this._$unsubscribe)),
         ]), $pointerRelease = fromEvent(this._elementRef.nativeElement, 'pointerup', { passive: false });
         $pointerPressed.pipe(takeUntil$1(this._$unsubscribe), switchMap(e => {
             const x = Math.abs(e.clientX), y = Math.abs(e.clientY);
+            this.onVirtualClickPress.emit(e);
             return $pointerRelease.pipe(takeUntil$1(this._$unsubscribe), takeUntil$1(race([
-                $pointerCancel,
+                $pointerCancel.pipe(takeUntil$1(this._$unsubscribe), tap$1(() => {
+                    this.onVirtualClickCancel.emit();
+                })),
                 fromEvent(window, 'pointermove').pipe(takeUntil$1(this._$unsubscribe), switchMap(e => {
                     const xx = x - Math.abs(e.clientX), yy = y - Math.abs(e.clientY), dist = Math.sqrt(Math.pow(xx, 2) + Math.pow(yy, 2));
-                    if (dist > this._maxDistance) {
+                    if (dist > maxDistance) {
+                        this.onVirtualClickCancel.emit();
                         return of(true);
                     }
                     return of(false);
-                }), takeUntil$1(this._$unsubscribe), filter(v => !!v)),
+                }), filter(v => !!v)),
             ])), takeUntil$1(this._$unsubscribe), tap$1(e => {
                 if (e) {
                     this.onVirtualClick.emit(e);
@@ -1538,7 +1588,9 @@ class VirtualClickDirective {
         })).subscribe();
     }
     set maxDistance(v) {
-        this._maxDistance = (v !== null || v !== undefined) ? Number(v) : DEFAULT_MAX_DISTANCE;
+        const value = (v !== null || v !== undefined) ? Number(v) : null;
+        this._maxDistance = value;
+        this._$maxDistance.next(value);
     }
     ngOnDestroy() {
         if (this._$unsubscribe) {
@@ -1547,19 +1599,23 @@ class VirtualClickDirective {
         }
     }
 }
-VirtualClickDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: VirtualClickDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-VirtualClickDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: VirtualClickDirective, selector: "[virtualClick]", inputs: { maxDistance: ["maxClickDistance", "maxDistance"] }, outputs: { onVirtualClick: "onVirtualClick" }, ngImport: i0 });
+VirtualClickDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: VirtualClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+VirtualClickDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: VirtualClickDirective, selector: "[virtualClick]", inputs: { maxDistance: ["maxClickDistance", "maxDistance"] }, outputs: { onVirtualClick: "onVirtualClick", onVirtualClickPress: "onVirtualClickPress", onVirtualClickCancel: "onVirtualClickCancel" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: VirtualClickDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[virtualClick]',
                     standalone: false,
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { maxDistance: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { maxDistance: [{
                 type: Input,
                 args: ['maxClickDistance']
             }], onVirtualClick: [{
                 type: Output
+            }], onVirtualClickPress: [{
+                type: Output
+            }], onVirtualClickCancel: [{
+                type: Output
             }] } });
 
 /**
@@ -1592,12 +1648,12 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
             var _a;
             this._service.focusedId = (_a = this.itemId) !== null && _a !== void 0 ? _a : null;
             this._$focused.next(true);
-            this.updateConfig(this._data);
+            this.updateConfig(this._data, this._service.isGrabbing);
             this.updatePartStr(this._data, this._isSelected, this._isCollapsed);
         })).subscribe(),
             fromEvent(this.element, EVENT_FOCUS_OUT).pipe(takeUntil(this._$unsubscribe), tap(e => {
                 this._$focused.next(false);
-                this.updateConfig(this._data);
+                this.updateConfig(this._data, this._service.isGrabbing);
                 this.updatePartStr(this._data, this._isSelected, this._isCollapsed);
             })).subscribe();
         $focused.pipe(takeUntil(this._$unsubscribe), debounceTime(this.getNavigationTimeout()), switchMap$1(v => {
@@ -1630,7 +1686,7 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
             const actualIds = collapsedIds, isCollapsed = this.itemId !== undefined && actualIds && actualIds.includes(this.itemId);
             this._isCollapsed = isCollapsed;
             this.updatePartStr(this._data, this._isSelected, isCollapsed);
-            this.updateConfig(this._data);
+            this.updateConfig(this._data, this._service.isGrabbing);
             this.updateMeasures(this._data);
         })).subscribe();
     }
@@ -1736,22 +1792,28 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
         }
         return Number.MIN_SAFE_INTEGER;
     }
-    updateConfig(v) {
-        this._$config.next(Object.assign(Object.assign({}, (v === null || v === void 0 ? void 0 : v.config) || {}), { selected: this._isSelected, collapsed: this._isCollapsed, focused: this._$focused.getValue() }));
+    updateConfig(v, grabbing) {
+        this._$config.next(Object.assign(Object.assign({}, (v === null || v === void 0 ? void 0 : v.config) || {}), { selected: this._isSelected, collapsed: this._isCollapsed, focused: this._$focused.getValue(), grabbing }));
         this._cdr.markForCheck();
     }
     onClickHandler() {
         this._service.virtualClick(this._data);
     }
+    onClickPressHandler() {
+        this._service.clickPressed = true;
+    }
+    onClickCancelHandler() {
+        this._service.clickPressed = false;
+    }
 }
 NgVirtualListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgVirtualListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NgVirtualListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgVirtualListItemComponent, selector: "ng-virtual-list-item", host: { attributes: { "role": "listitem" }, classAttribute: "ngvl__item" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"($data | async) as data\">\r\n    <div #item class=\"ngvl-item\" [ngClass]=\"($classes | async)!\" [part]=\"($part | async)!\" [attr.ngvl-index]=\"($index | async)!\"\r\n        [attr.ngvl-visibility]=\"visibility\" tabindex=\"-1\">\r\n        <div *ngIf=\"_blendColor\" class=\"ngvl-item__blend-color\" [style.--blend-color]=\"_blendColor\"></div>\r\n        <div #container virtualClick [part]=\"$fxPart | async\" [maxClickDistance]=\"$maxClickDistance | async\"\r\n            class=\"ngvl-item__container\" [ngClass]=\"($classes | async)!\" (onVirtualClick)=\"onClickHandler()\">\r\n            <ng-container [ngTemplateOutlet]=\"itemRenderer ?? null\"\r\n                [ngTemplateOutletContext]=\"$templateContext | async\"></ng-container>\r\n        </div>\r\n    </div>\r\n</ng-container>", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none;-moz-user-drag:none;text-rendering:optimizeSpeed;image-rendering:auto}.ngvl-item{position:relative;margin:0;padding:0;overflow:hidden;outline:none;width:inherit;height:inherit;box-sizing:border-box}.ngvl-item__blend-color{position:absolute;left:0;top:0;width:100%;height:100%;background-color:var(--blend-color);z-index:-1}.ngvl-item__container{margin:0;padding:0;width:100%;height:100%;box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: VirtualClickDirective, selector: "[virtualClick]", inputs: ["maxClickDistance"], outputs: ["onVirtualClick"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NgVirtualListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgVirtualListItemComponent, selector: "ng-virtual-list-item", host: { attributes: { "role": "listitem" }, classAttribute: "ngvl__item" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"($data | async) as data\">\r\n    <div #item class=\"ngvl-item\" [ngClass]=\"($classes | async)!\" [part]=\"($part | async)!\"\r\n        [attr.ngvl-index]=\"($index | async)!\" [attr.ngvl-visibility]=\"visibility\" tabindex=\"-1\">\r\n        <div *ngIf=\"_blendColor\" class=\"ngvl-item__blend-color\" [style.--blend-color]=\"_blendColor\"></div>\r\n        <div #container virtualClick [part]=\"$fxPart | async\" [maxClickDistance]=\"($maxClickDistance | async)!\"\r\n            class=\"ngvl-item__container\" [ngClass]=\"($classes | async)!\" (onVirtualClick)=\"onClickHandler()\"\r\n            (onVirtualClickPress)=\"onClickPressHandler()\" (onVirtualClickCancel)=\"onClickCancelHandler()\">\r\n            <ng-container [ngTemplateOutlet]=\"itemRenderer ?? null\"\r\n                [ngTemplateOutletContext]=\"$templateContext | async\"></ng-container>\r\n        </div>\r\n    </div>\r\n</ng-container>", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none;-moz-user-drag:none;text-rendering:optimizeSpeed;image-rendering:auto}.ngvl-item{position:relative;margin:0;padding:0;overflow:hidden;outline:none;width:inherit;height:inherit;box-sizing:border-box}.ngvl-item__blend-color{position:absolute;left:0;top:0;width:100%;height:100%;background-color:var(--blend-color);z-index:-1}.ngvl-item__container{margin:0;padding:0;width:100%;height:100%;box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: VirtualClickDirective, selector: "[virtualClick]", inputs: ["maxClickDistance"], outputs: ["onVirtualClick", "onVirtualClickPress", "onVirtualClickCancel"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgVirtualListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-virtual-list-item', host: {
                         'class': 'ngvl__item',
                         'role': 'listitem',
-                    }, standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"($data | async) as data\">\r\n    <div #item class=\"ngvl-item\" [ngClass]=\"($classes | async)!\" [part]=\"($part | async)!\" [attr.ngvl-index]=\"($index | async)!\"\r\n        [attr.ngvl-visibility]=\"visibility\" tabindex=\"-1\">\r\n        <div *ngIf=\"_blendColor\" class=\"ngvl-item__blend-color\" [style.--blend-color]=\"_blendColor\"></div>\r\n        <div #container virtualClick [part]=\"$fxPart | async\" [maxClickDistance]=\"$maxClickDistance | async\"\r\n            class=\"ngvl-item__container\" [ngClass]=\"($classes | async)!\" (onVirtualClick)=\"onClickHandler()\">\r\n            <ng-container [ngTemplateOutlet]=\"itemRenderer ?? null\"\r\n                [ngTemplateOutletContext]=\"$templateContext | async\"></ng-container>\r\n        </div>\r\n    </div>\r\n</ng-container>", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none;-moz-user-drag:none;text-rendering:optimizeSpeed;image-rendering:auto}.ngvl-item{position:relative;margin:0;padding:0;overflow:hidden;outline:none;width:inherit;height:inherit;box-sizing:border-box}.ngvl-item__blend-color{position:absolute;left:0;top:0;width:100%;height:100%;background-color:var(--blend-color);z-index:-1}.ngvl-item__container{margin:0;padding:0;width:100%;height:100%;box-sizing:border-box}\n"] }]
+                    }, standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"($data | async) as data\">\r\n    <div #item class=\"ngvl-item\" [ngClass]=\"($classes | async)!\" [part]=\"($part | async)!\"\r\n        [attr.ngvl-index]=\"($index | async)!\" [attr.ngvl-visibility]=\"visibility\" tabindex=\"-1\">\r\n        <div *ngIf=\"_blendColor\" class=\"ngvl-item__blend-color\" [style.--blend-color]=\"_blendColor\"></div>\r\n        <div #container virtualClick [part]=\"$fxPart | async\" [maxClickDistance]=\"($maxClickDistance | async)!\"\r\n            class=\"ngvl-item__container\" [ngClass]=\"($classes | async)!\" (onVirtualClick)=\"onClickHandler()\"\r\n            (onVirtualClickPress)=\"onClickPressHandler()\" (onVirtualClickCancel)=\"onClickCancelHandler()\">\r\n            <ng-container [ngTemplateOutlet]=\"itemRenderer ?? null\"\r\n                [ngTemplateOutletContext]=\"$templateContext | async\"></ng-container>\r\n        </div>\r\n    </div>\r\n</ng-container>", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none;-moz-user-drag:none;text-rendering:optimizeSpeed;image-rendering:auto}.ngvl-item{position:relative;margin:0;padding:0;overflow:hidden;outline:none;width:inherit;height:inherit;box-sizing:border-box}.ngvl-item__blend-color{position:absolute;left:0;top:0;width:100%;height:100%;background-color:var(--blend-color);z-index:-1}.ngvl-item__container{margin:0;padding:0;width:100%;height:100%;box-sizing:border-box}\n"] }]
         }], ctorParameters: function () { return []; } });
 
 /**
@@ -3282,11 +3344,11 @@ class TrackBox extends CacheMap {
         return false;
     }
     generateDisplayCollection(items, actualItems, itemConfigMap, metrics) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
         const { width, height, normalizedItemWidth, normalizedItemHeight, dynamicSize, divides, itemsOnDisplayLength, itemsFromStartToScrollEnd, isVertical, leftLayoutOffset: layoutOffset, leftLayoutIndexOffset: layoutIndexOffset, renderItems: renderItemsLength, scrollSize, sizeProperty, stickyEnabled, stickyPos, startPosition, totalLength, startIndex, typicalItemSize, minItemSize, maxItemSize, snapToItem, snapToItemAlign, itemTransform, } = metrics, displayItems = [];
         if (items.length) {
             const trackBy = this._trackingPropertyName, actualSnippedPosition = stickyPos, isSnappingMethodAdvanced = this._isSnappingMethodAdvanced, deltaOffet = (isSnappingMethodAdvanced ? scrollSize : 0), scrollDirection = this._scrollDirection, boundsSize = isVertical ? height : width, actualEndSnippedPosition = scrollSize + boundsSize - this._scrollEndOffset;
-            let pos = startPosition, renderItems = renderItemsLength, stickyItem, nextSticky, stickyItemIndex = -1, stickyItemSize = 0, endStickyItem, nextEndSticky, endStickyItemIndex = -1, endStickyItemSize = 0;
+            let pos = startPosition, renderItems = renderItemsLength, stickyItem, nextSticky, stickyItemIndex = -1, nexstStickyItemIndex = -1, stickyItemSize = 0, endStickyItem, nextEndSticky, endStickyItemIndex = -1, endStickyItemSize = 0;
             const li = layoutIndexOffset + actualItems.length - 1;
             if (stickyEnabled) {
                 for (let i = Math.min(itemsFromStartToScrollEnd > 0 ? (divides > 1 ? (itemsFromStartToScrollEnd - 1) : itemsFromStartToScrollEnd) : 0, totalLength - 1); i >= 0; i--) {
@@ -3546,6 +3608,7 @@ class TrackBox extends CacheMap {
                             item.measures.x = isVertical ? 0 : snapped ? actualSnippedPosition : pos;
                             item.measures.y = isVertical ? snapped ? actualSnippedPosition : pos : 0;
                             nextSticky = item;
+                            nexstStickyItemIndex = displayItems.length;
                             nextSticky.config.snapped = snapped;
                             nextSticky.measures.delta = (isVertical ? item.measures.y : item.measures.x) - scrollSize;
                             nextSticky.config.zIndex = Z_INDEX_3;
@@ -3568,10 +3631,10 @@ class TrackBox extends CacheMap {
                 }
                 i++;
             }
-            const axis = isVertical ? Y_PROP_NAME : X_PROP_NAME;
+            const axis = isVertical ? Y_PROP_NAME : X_PROP_NAME, transformedAxis = isVertical ? TRANSFORMED_Y_PROP_NAME : TRANSFORMED_X_PROP_NAME;
             if (!!nextSticky && !!stickyItem && nextSticky.measures[axis] <= actualSnippedPosition + stickyItem.measures[sizeProperty]) {
                 if (nextSticky.measures[axis] > actualSnippedPosition) {
-                    stickyItem.measures[axis] = nextSticky.measures[axis] - stickyItem.measures[sizeProperty];
+                    stickyItem.measures[axis] = stickyItem.measures[transformedAxis] = nextSticky.measures[axis] - stickyItem.measures[sizeProperty];
                     stickyItem.config.snapped = nextSticky.config.snapped = false;
                     stickyItem.config.snappedOut = true;
                     stickyItem.config.sticky = 1;
@@ -3580,14 +3643,35 @@ class TrackBox extends CacheMap {
                 else {
                     nextSticky.config.snapped = true;
                     nextSticky.measures.delta = (isVertical ? nextSticky.measures.y : nextSticky.measures.x) - scrollSize;
-                    stickyItem.measures[axis] = nextSticky.measures[axis] - stickyItem.measures[sizeProperty];
+                    stickyItem.measures[axis] = stickyItem.measures[transformedAxis] = nextSticky.measures[axis] - stickyItem.measures[sizeProperty];
                     stickyItem.measures.delta = (isVertical ? stickyItem.measures.y : stickyItem.measures.x) - scrollSize;
+                    const lastStickyItem = displayItems === null || displayItems === void 0 ? void 0 : displayItems[nexstStickyItemIndex + 1];
+                    if (((_w = lastStickyItem === null || lastStickyItem === void 0 ? void 0 : lastStickyItem.config) === null || _w === void 0 ? void 0 : _w.sticky) === 1 && ((_y = (_x = displayItems === null || displayItems === void 0 ? void 0 : displayItems[nexstStickyItemIndex + 2]) === null || _x === void 0 ? void 0 : _x.config) === null || _y === void 0 ? void 0 : _y.sticky) !== 1) {
+                        nextSticky.config.snapped = nextSticky.config.snappedOut = false;
+                        stickyItem.config.snappedOut = true;
+                        nextSticky.measures.delta = this._scrollStartOffset;
+                        if (lastStickyItem.measures[axis] <= actualSnippedPosition) {
+                            lastStickyItem.config.snapped = lastStickyItem.config.snappedOut = true;
+                            lastStickyItem.measures[axis] = lastStickyItem.measures[transformedAxis] = lastStickyItem.measures.position = actualSnippedPosition;
+                            lastStickyItem.measures.delta = this._scrollStartOffset;
+                        }
+                    }
+                    else if (((_z = lastStickyItem === null || lastStickyItem === void 0 ? void 0 : lastStickyItem.config) === null || _z === void 0 ? void 0 : _z.sticky) !== 1 && ((_1 = (_0 = displayItems === null || displayItems === void 0 ? void 0 : displayItems[nexstStickyItemIndex + 2]) === null || _0 === void 0 ? void 0 : _0.config) === null || _1 === void 0 ? void 0 : _1.sticky) !== 1) {
+                        if (nextSticky.measures[axis] <= actualSnippedPosition) {
+                            nextSticky.config.snapped = nextSticky.config.snappedOut = true;
+                            nextSticky.measures[axis] = nextSticky.measures[transformedAxis] = nextSticky.measures.position = actualSnippedPosition;
+                            nextSticky.measures.delta = this._scrollStartOffset;
+                        }
+                    }
+                    else {
+                        nextSticky.config.snapped = nextSticky.config.snappedOut = false;
+                    }
                 }
             }
             if (!!nextEndSticky && !!endStickyItem &&
                 (nextEndSticky.measures[axis] >= actualEndSnippedPosition - endStickyItemSize - nextEndSticky.measures[sizeProperty])) {
                 if (nextEndSticky.measures[axis] < actualEndSnippedPosition - nextEndSticky.measures[sizeProperty]) {
-                    endStickyItem.measures[axis] = nextEndSticky.measures[axis] + nextEndSticky.measures[sizeProperty];
+                    endStickyItem.measures[axis] = endStickyItem.measures[transformedAxis] = nextEndSticky.measures[axis] + nextEndSticky.measures[sizeProperty];
                     endStickyItem.config.snapped = nextEndSticky.config.snapped = false;
                     endStickyItem.config.snappedOut = true;
                     endStickyItem.config.sticky = 2;
@@ -3595,9 +3679,9 @@ class TrackBox extends CacheMap {
                 }
                 else {
                     nextEndSticky.config.snapped = true;
-                    nextEndSticky.measures[axis] = actualEndSnippedPosition - nextEndSticky.measures[sizeProperty];
+                    nextEndSticky.measures[axis] = nextEndSticky.measures[transformedAxis] = actualEndSnippedPosition - nextEndSticky.measures[sizeProperty];
                     nextEndSticky.measures.delta = (isVertical ? nextEndSticky.measures.y : nextEndSticky.measures.x) - scrollSize;
-                    endStickyItem.measures[axis] = nextEndSticky.measures[axis] + nextEndSticky.measures[sizeProperty];
+                    endStickyItem.measures[axis] = endStickyItem.measures[transformedAxis] = nextEndSticky.measures[axis] + nextEndSticky.measures[sizeProperty];
                     endStickyItem.measures.delta = (isVertical ? endStickyItem.measures.y : endStickyItem.measures.x) - scrollSize;
                 }
             }
@@ -3869,18 +3953,34 @@ class Animator {
     constructor() {
         this._animationId = 0;
         this._currentId = Animator._nextId;
-    }
+        this._diff = 0;
+        this._startValue = 0;
+        this._endValue = 0;
+        this._prevPos = 0;
+    }
+    get animated() { return this._animationId > -1; }
+    get isAnimated() { return this.hasAnimation(this._currentId); }
+    get id() { return this._currentId; }
     generateId() {
         return Animator._nextId = Animator._nextId === Number.MAX_SAFE_INTEGER
             ? 0 : Animator._nextId + 1;
     }
+    updateTo(end) {
+        this._endValue = end;
+        this._diff = this._endValue - this._startValue;
+        return this.hasAnimation();
+    }
     animate(params) {
         this.stop();
         const id = this.generateId();
         this._currentId = id;
         const { withDelta = DEFAULT_WITH_DELTA, startValue, endValue, duration = DEFAULT_ANIMATION_DURATION, getPropValue, easingFunction = easeLinear, onUpdate, onComplete, } = params;
+        this._startValue = startValue;
+        this._endValue = endValue;
         const startTime = performance.now();
-        let isCanceled = false, prevPos = startValue, start = startValue, startPosDelta = 0, delta = 0, prevTime = startTime, diff = endValue - start, isFinished = false;
+        let isCanceled = false, startPosDelta = 0, delta = 0, prevTime = startTime, isFinished = false;
+        this._prevPos = startValue;
+        this._diff = this._endValue - this._startValue;
         const step = (currentTime) => {
             if (id !== this._currentId) {
                 isCanceled = true;
@@ -3890,34 +3990,35 @@ class Animator {
             }
             const cPos = (getPropValue === null || getPropValue === void 0 ? void 0 : getPropValue()) || 0;
             let startDelta = 0;
-            if (cPos !== prevPos) {
-                startDelta = cPos - prevPos;
+            if (cPos !== this._prevPos) {
+                startDelta = cPos - this._prevPos;
                 startPosDelta += startDelta;
             }
-            const elapsed = currentTime - startTime, progress = start === endValue ? 1 : Math.min(duration > 0 ? elapsed / duration : 0, 1), easedProgress = easingFunction(progress), val = (withDelta ? startPosDelta : 0) + start + diff * easedProgress, currentValue = val, t = performance.now();
+            const elapsed = currentTime - startTime, progress = this._startValue === this._endValue ? 1 : Math.min(duration > 0 ? elapsed / duration : 0, 1), easedProgress = easingFunction(progress), val = (withDelta ? startPosDelta : 0) + this._startValue + this._diff * easedProgress, currentValue = val, t = performance.now();
             isFinished = progress === 1;
-            delta = currentValue - startDelta - prevPos;
-            const ts = t - prevTime, timestamp = ts < ANIMATOR_MIN_TIMESTAMP ? ANIMATOR_MIN_TIMESTAMP : ts;
+            delta = currentValue - startDelta - this._prevPos;
+            const frameTimestamp = t - prevTime, actualFrameTimestamp = frameTimestamp < ANIMATOR_MIN_TIMESTAMP ? ANIMATOR_MIN_TIMESTAMP : frameTimestamp;
             prevTime = t;
-            prevPos = currentValue;
+            this._prevPos = currentValue;
             if (onUpdate !== undefined) {
                 const data = {
                     id,
                     delta,
                     elapsed,
-                    value: !withDelta && isFinished ? endValue : currentValue,
-                    timestamp,
+                    value: currentValue,
+                    timestamp: actualFrameTimestamp,
                 };
                 onUpdate(data);
             }
             if (isFinished) {
+                this._animationId = -1;
                 if (onComplete !== undefined) {
                     const data = {
                         id,
                         delta,
                         elapsed,
-                        value: withDelta ? currentValue : endValue,
-                        timestamp,
+                        value: currentValue,
+                        timestamp: actualFrameTimestamp,
                     };
                     onComplete(data);
                 }
@@ -3927,9 +4028,17 @@ class Animator {
             }
         };
         this._animationId = requestAnimationFrame(step);
+        return this._currentId;
     }
-    stop() {
-        cancelAnimationFrame(this._animationId);
+    hasAnimation(id = -1) {
+        if ((this._currentId === id || id === -1) && this.animated) {
+            return true;
+        }
+        return false;
+    }
+    stop(id = -1) {
+        cancelAnimationFrame(id === -1 ? this._animationId : id);
+        this._animationId = -1;
     }
     dispose() {
         this.stop();
@@ -4518,6 +4627,7 @@ class NgScrollView extends BaseScrollView {
         }
     }
     get startLayoutOffset() { return this._startLayoutOffset; }
+    get animated() { var _a, _b; return (_b = (_a = this._animator) === null || _a === void 0 ? void 0 : _a.isAnimated) !== null && _b !== void 0 ? _b : false; }
     ngAfterViewInit() {
         let mouseCanceled = false, touchCanceled = false;
         const $viewportBounds = this.$viewportBounds;
@@ -4708,6 +4818,7 @@ class NgScrollView extends BaseScrollView {
             }));
         })).subscribe();
     }
+    hasAnimation(id = -1) { var _a, _b; return (_b = (_a = this._animator) === null || _a === void 0 ? void 0 : _a.hasAnimation(id)) !== null && _b !== void 0 ? _b : false; }
     updateDirection(position, prePosition) {
         const delta = (position - this._delta) - prePosition;
         this._scrollDirection.add(delta > 0 ? 1 : delta < 0 ? -1 : 0);
@@ -4874,7 +4985,7 @@ class NgScrollView extends BaseScrollView {
         var _a, _b, _c, _d, _e, _f;
         if (a0 !== 0 && timestamp < MAX_VELOCITY_TIMESTAMP) {
             const dvSign = Math.sign(v), mass = (_b = (_a = this.scrollingSettings) === null || _a === void 0 ? void 0 : _a.mass) !== null && _b !== void 0 ? _b : MASS, duration = DURATION, maxDuration = (_d = (_c = this.scrollingSettings) === null || _c === void 0 ? void 0 : _c.maxDuration) !== null && _d !== void 0 ? _d : MAX_DURATION, maxDist = (_f = (_e = this.scrollingSettings) === null || _e === void 0 ? void 0 : _e.maxDistance) !== null && _f !== void 0 ? _f : MAX_DIST, maxDistance = dvSign * maxDist, s = (dvSign * Math.abs((a0 * Math.pow(duration, 2)) * .5) / 10000) / mass, distance = Math.abs(s) < maxDist ? s : maxDistance, positionWithVelocity = position + (this._inversion ? -1 : 1) * distance, ad = Math.abs(a0 !== 0 ? Math.sqrt(a0) : 0) * ACCELERATION_SCALE / mass, aDuration = ad < maxDuration ? ad : maxDuration, startPosition = isVertical ? this.y : this.x;
-            this.animate(startPosition, Math.round(positionWithVelocity), aDuration, easeOutQuad, true);
+            this.animate(startPosition, Math.round(positionWithVelocity), aDuration, easeOutQuad, false, true);
         }
         else {
             this.alignPosition(true, true);
@@ -4887,11 +4998,17 @@ class NgScrollView extends BaseScrollView {
         const isVertical = this._$isVertical.getValue(), startOffset = this._normalizeValueFromZero ? 0 : this.startOffset, scrollSize = this.scrollable ? ((isVertical ? this.scrollHeight : this.scrollWidth) - this.alignmentEndOffset) : 0, result = this.scrollable ? (value <= startOffset ? startOffset : value > scrollSize ? scrollSize : value) : startOffset;
         return result;
     }
-    animate(startValue, endValue, duration = ANIMATION_DURATION, easingFunction = easeOutQuad, userAction = false, alignmentAtComplete = true, skipOverridedCoordinates = false) {
+    animate(startValue, endValue, duration = ANIMATION_DURATION, easingFunction = easeOutQuad, blending = false, userAction = false, alignmentAtComplete = true, skipOverridedCoordinates = false) {
         const isVertical = this._$isVertical.getValue();
         let position = startValue;
         this._isAlignmentAnimation = !alignmentAtComplete;
-        this._animator.animate({
+        if (this.hasAnimation() && blending) {
+            const updatable = this._animator.updateTo(endValue);
+            if (updatable) {
+                return this._animator.id;
+            }
+        }
+        return this._animator.animate({
             withDelta: this._service.dynamic && !this.isInfinity,
             startValue,
             endValue,
@@ -4904,7 +5021,7 @@ class NgScrollView extends BaseScrollView {
                 if (this._isCoordinatesOverrided && !skipOverridedCoordinates) {
                     this._isCoordinatesOverrided = false;
                     const currentCoordinate = isVertical ? this._y : this._x, delta = endValue - value;
-                    this.animate(currentCoordinate, currentCoordinate + delta, duration - elapsed, easingFunction, userAction, alignmentAtComplete);
+                    this.animate(currentCoordinate, currentCoordinate + delta, duration - elapsed, easingFunction, blending, userAction, alignmentAtComplete);
                     return;
                 }
                 const v0 = (_a = calculateVelocity(position, value - this._delta, timestamp)) !== null && _a !== void 0 ? _a : this.averageVelocity;
@@ -5038,7 +5155,7 @@ class NgScrollView extends BaseScrollView {
         const cPos = (isVertical ? this.scrollTop : this.scrollLeft);
         if (position !== null && position !== cPos) {
             this.stopScrolling(true);
-            this.animate(cPos, position, animated ? this.animationParams.snapToItem : 1, easeOutQuad, false, false, true);
+            this.animate(cPos, position, animated ? this._$animationParams.getValue().snapToItem : 1, easeOutQuad, false, false, false, true);
             return true;
         }
         return false;
@@ -5125,21 +5242,18 @@ class NgScrollView extends BaseScrollView {
         if (behavior === AUTO || behavior === SMOOTH) {
             if (isVertical) {
                 if (prevY !== y) {
-                    this.animate(prevY, y, duration, ease, userAction);
+                    return this.animate(prevY, y, duration, ease, blending, userAction);
                 }
             }
             else {
                 if (prevX !== x) {
-                    this.animate(prevX, x, duration, ease, userAction);
+                    return this.animate(prevX, x, duration, ease, blending, userAction);
                 }
             }
         }
         else {
             if (isVertical) {
                 if (this._y !== y || force) {
-                    if (!blending) {
-                        this.stopScrolling(force);
-                    }
                     this.setY(y, snap, normalize);
                     this.emitScrollableEvent();
                     if (fireUpdate) {
@@ -5149,9 +5263,6 @@ class NgScrollView extends BaseScrollView {
             }
             else {
                 if (this._x !== x || force) {
-                    if (!blending) {
-                        this.stopScrolling(force);
-                    }
                     this.setX(x, snap, normalize);
                     this.emitScrollableEvent();
                     if (fireUpdate) {
@@ -5160,6 +5271,7 @@ class NgScrollView extends BaseScrollView {
                 }
             }
         }
+        return -1;
     }
     emitScrollableEvent() {
         var _a, _b;
@@ -5180,6 +5292,9 @@ class NgScrollView extends BaseScrollView {
         this.stopScrolling();
         this.move(this._$isVertical.getValue(), offset);
     }
+    stopAnimation(id) {
+        this._animator.stop(id);
+    }
     ngOnDestroy() {
         super.ngOnDestroy();
         if (this._animator) {
@@ -5851,6 +5966,10 @@ class NgScrollerComponent extends NgScrollView {
         $updateScrollBar.pipe(takeUntil(this._$unsubscribe), debounceTime(0), tap(() => {
             this.updateScrollBarHandler(!this._isScrollbarUserAction);
         })).subscribe();
+        const $grabbing = this.$grabbing;
+        $grabbing.pipe(takeUntil(this._$unsubscribe), tap(v => {
+            this._service.grabbing = v;
+        })).subscribe();
         combineLatest([this.$classes, this.$direction, this.$grabbing, this.$motionBlurEnabled]).pipe(takeUntil(this._$unsubscribe), distinctUntilChanged(), debounceTime(0), tap(([classes, direction, grabbing, filtered]) => {
             this._$actualClasses.next(Object.assign(Object.assign({}, classes), { [direction]: true, grabbing, filtered }));
         })).subscribe();
@@ -5993,7 +6112,7 @@ class NgScrollerComponent extends NgScrollView {
             this._isScrollbarUserAction = false;
             (_b = this.scrollBar) === null || _b === void 0 ? void 0 : _b.stopScrolling();
         }
-        this.scroll(Object.assign(Object.assign({}, params), { userAction: userAction }));
+        return this.scroll(Object.assign(Object.assign({}, params), { userAction: userAction }));
     }
     stopScrollbar() {
         if (!!this.scrollBar) {
@@ -6402,13 +6521,13 @@ class NgPrerenderVirtualListItemComponent extends NgVirtualListItemComponent {
     }
 }
 NgPrerenderVirtualListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgPrerenderVirtualListItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NgPrerenderVirtualListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgPrerenderVirtualListItemComponent, selector: "ng-prerender-virtual-list-item", host: { attributes: { "role": "listitem" }, classAttribute: "ngvl__item" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"($data | async) as data\">\r\n    <div #item class=\"ngvl-item\" [ngClass]=\"($classes | async)!\" [part]=\"($part | async)!\" [attr.ngvl-index]=\"($index | async)!\"\r\n        [attr.ngvl-visibility]=\"visibility\" tabindex=\"-1\">\r\n        <div *ngIf=\"_blendColor\" class=\"ngvl-item__blend-color\" [style.--blend-color]=\"_blendColor\"></div>\r\n        <div #container virtualClick [part]=\"$fxPart | async\" [maxClickDistance]=\"$maxClickDistance | async\"\r\n            class=\"ngvl-item__container\" [ngClass]=\"($classes | async)!\" (onVirtualClick)=\"onClickHandler()\">\r\n            <ng-container [ngTemplateOutlet]=\"itemRenderer ?? null\"\r\n                [ngTemplateOutletContext]=\"$templateContext | async\"></ng-container>\r\n        </div>\r\n    </div>\r\n</ng-container>", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none;-moz-user-drag:none;text-rendering:optimizeSpeed;image-rendering:auto}.ngvl-item{position:relative;margin:0;padding:0;overflow:hidden;outline:none;width:inherit;height:inherit;box-sizing:border-box}.ngvl-item__blend-color{position:absolute;left:0;top:0;width:100%;height:100%;background-color:var(--blend-color);z-index:-1}.ngvl-item__container{margin:0;padding:0;width:100%;height:100%;box-sizing:border-box}\n", ":host{display:block;position:absolute!important;left:0;top:0;box-sizing:border-box;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none;-moz-user-drag:none;pointer-events:none;-webkit-user-select:none;user-select:none;text-rendering:optimizeSpeed;image-rendering:pixelated}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: VirtualClickDirective, selector: "[virtualClick]", inputs: ["maxClickDistance"], outputs: ["onVirtualClick"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NgPrerenderVirtualListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgPrerenderVirtualListItemComponent, selector: "ng-prerender-virtual-list-item", host: { attributes: { "role": "listitem" }, classAttribute: "ngvl__item" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"($data | async) as data\">\r\n    <div #item class=\"ngvl-item\" [ngClass]=\"($classes | async)!\" [part]=\"($part | async)!\"\r\n        [attr.ngvl-index]=\"($index | async)!\" [attr.ngvl-visibility]=\"visibility\" tabindex=\"-1\">\r\n        <div *ngIf=\"_blendColor\" class=\"ngvl-item__blend-color\" [style.--blend-color]=\"_blendColor\"></div>\r\n        <div #container virtualClick [part]=\"$fxPart | async\" [maxClickDistance]=\"($maxClickDistance | async)!\"\r\n            class=\"ngvl-item__container\" [ngClass]=\"($classes | async)!\" (onVirtualClick)=\"onClickHandler()\"\r\n            (onVirtualClickPress)=\"onClickPressHandler()\" (onVirtualClickCancel)=\"onClickCancelHandler()\">\r\n            <ng-container [ngTemplateOutlet]=\"itemRenderer ?? null\"\r\n                [ngTemplateOutletContext]=\"$templateContext | async\"></ng-container>\r\n        </div>\r\n    </div>\r\n</ng-container>", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none;-moz-user-drag:none;text-rendering:optimizeSpeed;image-rendering:auto}.ngvl-item{position:relative;margin:0;padding:0;overflow:hidden;outline:none;width:inherit;height:inherit;box-sizing:border-box}.ngvl-item__blend-color{position:absolute;left:0;top:0;width:100%;height:100%;background-color:var(--blend-color);z-index:-1}.ngvl-item__container{margin:0;padding:0;width:100%;height:100%;box-sizing:border-box}\n", ":host{display:block;position:absolute!important;left:0;top:0;box-sizing:border-box;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none;-moz-user-drag:none;pointer-events:none;-webkit-user-select:none;user-select:none;text-rendering:optimizeSpeed;image-rendering:pixelated}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: VirtualClickDirective, selector: "[virtualClick]", inputs: ["maxClickDistance"], outputs: ["onVirtualClick", "onVirtualClickPress", "onVirtualClickCancel"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgPrerenderVirtualListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-prerender-virtual-list-item', host: {
                         'class': 'ngvl__item',
                         'role': 'listitem',
-                    }, standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"($data | async) as data\">\r\n    <div #item class=\"ngvl-item\" [ngClass]=\"($classes | async)!\" [part]=\"($part | async)!\" [attr.ngvl-index]=\"($index | async)!\"\r\n        [attr.ngvl-visibility]=\"visibility\" tabindex=\"-1\">\r\n        <div *ngIf=\"_blendColor\" class=\"ngvl-item__blend-color\" [style.--blend-color]=\"_blendColor\"></div>\r\n        <div #container virtualClick [part]=\"$fxPart | async\" [maxClickDistance]=\"$maxClickDistance | async\"\r\n            class=\"ngvl-item__container\" [ngClass]=\"($classes | async)!\" (onVirtualClick)=\"onClickHandler()\">\r\n            <ng-container [ngTemplateOutlet]=\"itemRenderer ?? null\"\r\n                [ngTemplateOutletContext]=\"$templateContext | async\"></ng-container>\r\n        </div>\r\n    </div>\r\n</ng-container>", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none;-moz-user-drag:none;text-rendering:optimizeSpeed;image-rendering:auto}.ngvl-item{position:relative;margin:0;padding:0;overflow:hidden;outline:none;width:inherit;height:inherit;box-sizing:border-box}.ngvl-item__blend-color{position:absolute;left:0;top:0;width:100%;height:100%;background-color:var(--blend-color);z-index:-1}.ngvl-item__container{margin:0;padding:0;width:100%;height:100%;box-sizing:border-box}\n", ":host{display:block;position:absolute!important;left:0;top:0;box-sizing:border-box;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none;-moz-user-drag:none;pointer-events:none;-webkit-user-select:none;user-select:none;text-rendering:optimizeSpeed;image-rendering:pixelated}\n"] }]
+                    }, standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"($data | async) as data\">\r\n    <div #item class=\"ngvl-item\" [ngClass]=\"($classes | async)!\" [part]=\"($part | async)!\"\r\n        [attr.ngvl-index]=\"($index | async)!\" [attr.ngvl-visibility]=\"visibility\" tabindex=\"-1\">\r\n        <div *ngIf=\"_blendColor\" class=\"ngvl-item__blend-color\" [style.--blend-color]=\"_blendColor\"></div>\r\n        <div #container virtualClick [part]=\"$fxPart | async\" [maxClickDistance]=\"($maxClickDistance | async)!\"\r\n            class=\"ngvl-item__container\" [ngClass]=\"($classes | async)!\" (onVirtualClick)=\"onClickHandler()\"\r\n            (onVirtualClickPress)=\"onClickPressHandler()\" (onVirtualClickCancel)=\"onClickCancelHandler()\">\r\n            <ng-container [ngTemplateOutlet]=\"itemRenderer ?? null\"\r\n                [ngTemplateOutletContext]=\"$templateContext | async\"></ng-container>\r\n        </div>\r\n    </div>\r\n</ng-container>", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none;-moz-user-drag:none;text-rendering:optimizeSpeed;image-rendering:auto}.ngvl-item{position:relative;margin:0;padding:0;overflow:hidden;outline:none;width:inherit;height:inherit;box-sizing:border-box}.ngvl-item__blend-color{position:absolute;left:0;top:0;width:100%;height:100%;background-color:var(--blend-color);z-index:-1}.ngvl-item__container{margin:0;padding:0;width:100%;height:100%;box-sizing:border-box}\n", ":host{display:block;position:absolute!important;left:0;top:0;box-sizing:border-box;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none;-moz-user-drag:none;pointer-events:none;-webkit-user-select:none;user-select:none;text-rendering:optimizeSpeed;image-rendering:pixelated}\n"] }]
         }] });
 
 /**
@@ -7945,6 +8064,7 @@ class NgVirtualListComponent extends DisposableComponent {
         this._readyForShow = false;
         this._cached = false;
         this._isLoading = false;
+        this._animationId = -1;
         this._$viewInit = new BehaviorSubject(false);
         this.$viewInit = this._$viewInit.asObservable();
         this._$destroy = new Subject();
@@ -8476,7 +8596,7 @@ class NgVirtualListComponent extends DisposableComponent {
     ;
     get motionBlurEnabled() { return this._$motionBlurEnabled.getValue(); }
     /**
-     * Animation parameters. The default value is "{ scrollToItem: 50, snapToItem: 150, navigateToItem: 150, navigateByKeyboard: 50 }".
+     * Animation parameters. The default value is "{ scrollToItem: 150, snapToItem: 150, navigateToItem: 150, navigateByKeyboard: 50 }".
      */
     set animationParams(v) {
         if (this._$animationParams.getValue() === v) {
@@ -8766,6 +8886,7 @@ class NgVirtualListComponent extends DisposableComponent {
     }
     ngAfterViewInit() {
         var _a, _b;
+        let readyForAnimations = false;
         const _$created = new BehaviorSubject(false), $created = _$created.asObservable();
         combineLatest([$created, this.$show]).pipe(takeUntil(this._$unsubscribe), filter$1(([created, shown]) => created && shown), debounceTime(1), tap(v => {
             this._$initialized.next(true);
@@ -8964,6 +9085,7 @@ class NgVirtualListComponent extends DisposableComponent {
                 }), tap(items => {
                     this._trackBox.resetCollection(items, this.actualItemSize);
                 }), switchMap$1(i => of((i !== null && i !== void 0 ? i : []).length > 0)), distinctUntilChanged(), tap(v => {
+                    readyForAnimations = false;
                     if (!v) {
                         this.cacheClean();
                         this.cleanup();
@@ -9308,13 +9430,23 @@ class NgVirtualListComponent extends DisposableComponent {
         }), debounceTime(100), tap(() => {
             this._isLoading = false;
         })).subscribe();
+        let prevCacheVersion = -1, prevScrollable = false;
+        $viewInit.pipe(takeUntil(this._$unsubscribe), filter$1(v => !!v), switchMap$1(() => {
+            return this.$show.pipe(takeUntil(this._$unsubscribe), debounceTime(Math.max(500, this._$animationParams.getValue().scrollToItem)), tap(() => {
+                if (this._readyForShow || (this.cachable && this._cached)) {
+                    readyForAnimations = true;
+                }
+            }));
+        })).subscribe();
         const update = (params) => {
-            var _a, _b;
-            const { alignment, snapScrollToStart, snapScrollToEnd, bounds, items, itemConfigMap, scrollSize, itemSize, minItemSize, maxItemSize, bufferSize, maxBufferSize, stickyEnabled, isVertical, dynamicSize, enabledBufferOptimization, snapToItem, snapToItemAlign, userAction, collapsedIds, itemTransform, } = params;
+            var _a, _b, _c, _d;
+            const { alignment, snapScrollToStart, snapScrollToEnd, bounds, items, itemConfigMap, scrollSize, itemSize, minItemSize, maxItemSize, bufferSize, maxBufferSize, stickyEnabled, isVertical, dynamicSize, enabledBufferOptimization, snapToItem, snapToItemAlign, userAction, collapsedIds, cacheVersion, itemTransform, } = params;
+            const cacheChanged = prevCacheVersion !== cacheVersion;
+            prevCacheVersion = cacheVersion;
             const scroller = this._scrollerComponent;
             let totalSize = 0;
             if (!!scroller) {
-                const isInfinity = this.isInfinity, collapsable = collapsedIds.length > 0, cachable = this.cachable, cached = this._cached, waitingCache = cachable && !cached, emitUpdate = !this._readyForShow || waitingCache || collapsable || isChunkLoading, fireUpdate = !this._readyForShow || this._$scrollingTo.getValue(), fireUpdateAtEdges = fireUpdate || !isInfinity;
+                const isInfinity = this.isInfinity, collapsable = collapsedIds.length > 0, cachable = this.cachable, cached = this._cached, waitingCache = cachable && !cached, emitUpdate = !this._readyForShow || waitingCache || collapsable || isChunkLoading, fireUpdate = !this._readyForShow || this._$scrollingTo.getValue(), fireUpdateAtEdges = fireUpdate || !isInfinity, useAnimations = !isInfinity && readyForAnimations && prevScrollable;
                 if (this._readyForShow || (cachable && cached)) {
                     const currentScrollSize = (isVertical ? scroller.scrollTop : scroller.scrollLeft);
                     let actualScrollSize = !this._readyForShow && snapScrollToEnd ? (isVertical ? scroller.scrollHeight : scroller.scrollWidth) :
@@ -9358,12 +9490,13 @@ class NgVirtualListComponent extends DisposableComponent {
                     if (!_$created.getValue()) {
                         _$created.next(true);
                     }
-                    const delta = this._trackBox.delta, scrollPositionAfterUpdate = actualScrollSize + delta, roundedScrollPositionAfterUpdate = scrollPositionAfterUpdate, roundedMaxPositionAfterUpdate = isVertical ? scroller.scrollHeight : scroller.scrollWidth;
+                    const delta = this._trackBox.delta, scrollPositionAfterUpdate = actualScrollSize + delta, roundedScrollPositionAfterUpdate = scrollPositionAfterUpdate, roundedMaxPositionAfterUpdate = isVertical ? scroller.actualScrollHeight : scroller.actualScrollWidth;
                     if (this._isSnappingMethodAdvanced) {
                         this.updateRegularRenderer();
                     }
                     this.updateOffsetsByAllignment();
                     scroller.delta = delta;
+                    prevScrollable = scroller.scrollable;
                     if ((snapScrollToStart && this._trackBox.isSnappedToStart && scroller.scrollable) ||
                         (snapScrollToStart && currentScrollSize <= MIN_PIXELS_FOR_PREVENT_SNAPPING)) {
                         if (currentScrollSize !== roundedScrollPositionAfterUpdate) {
@@ -9374,10 +9507,17 @@ class NgVirtualListComponent extends DisposableComponent {
                             this._trackBox.isScrollEnd;
                             const params = {
                                 [isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: 0, userAction,
-                                fireUpdate: fireUpdateAtEdges, behavior: BEHAVIOR_INSTANT,
-                                blending: false, duration: this.animationParams.scrollToItem,
+                                fireUpdate: fireUpdateAtEdges, behavior: !useAnimations ? BEHAVIOR_INSTANT : ((this.animationParams.scrollToItem > 0 && this.scrollBehavior !== BEHAVIOR_INSTANT) ? BEHAVIOR_AUTO : BEHAVIOR_INSTANT),
+                                blending: useAnimations && scroller.hasAnimation(this._animationId), duration: this.animationParams.scrollToItem,
                             };
-                            (_a = scroller === null || scroller === void 0 ? void 0 : scroller.scrollTo) === null || _a === void 0 ? void 0 : _a.call(scroller, params);
+                            const animationId = (_a = scroller === null || scroller === void 0 ? void 0 : scroller.scrollTo) === null || _a === void 0 ? void 0 : _a.call(scroller, params);
+                            if (animationId > -1) {
+                                this._animationId = animationId;
+                            }
+                            else {
+                                scroller.stopAnimation(this._animationId);
+                            }
+                            (_b = scroller === null || scroller === void 0 ? void 0 : scroller.scrollTo) === null || _b === void 0 ? void 0 : _b.call(scroller, params);
                             if (emitUpdate) {
                                 this._$update.next(getScrollStateVersion(totalSize, this._isVertical ? scroller.scrollTop : scroller.scrollLeft));
                             }
@@ -9397,10 +9537,17 @@ class NgVirtualListComponent extends DisposableComponent {
                         }
                         const params = {
                             [isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: roundedMaxPositionAfterUpdate,
-                            fireUpdate: fireUpdateAtEdges, behavior: BEHAVIOR_INSTANT, userAction: false,
-                            blending: false, duration: this.animationParams.scrollToItem,
+                            fireUpdate: fireUpdateAtEdges, behavior: !useAnimations ? BEHAVIOR_INSTANT : ((this.animationParams.scrollToItem > 0 && this.scrollBehavior !== BEHAVIOR_INSTANT) ? BEHAVIOR_AUTO : BEHAVIOR_INSTANT), userAction: false,
+                            blending: useAnimations && scroller.hasAnimation(this._animationId) || cacheChanged, duration: this.animationParams.scrollToItem,
                         };
-                        (_b = scroller === null || scroller === void 0 ? void 0 : scroller.scrollTo) === null || _b === void 0 ? void 0 : _b.call(scroller, params);
+                        const animationId = (_c = scroller === null || scroller === void 0 ? void 0 : scroller.scrollTo) === null || _c === void 0 ? void 0 : _c.call(scroller, params);
+                        if (animationId > -1) {
+                            this._animationId = animationId;
+                        }
+                        else {
+                            scroller.stopAnimation(this._animationId);
+                        }
+                        (_d = scroller === null || scroller === void 0 ? void 0 : scroller.scrollTo) === null || _d === void 0 ? void 0 : _d.call(scroller, params);
                         if (emitUpdate) {
                             this._$update.next(getScrollStateVersion(totalSize, this._isVertical ? scroller.scrollTop : scroller.scrollLeft));
                         }
@@ -9413,9 +9560,13 @@ class NgVirtualListComponent extends DisposableComponent {
                         if (this._readyForShow) {
                             this.emitScrollEvent(true, false, userAction);
                         }
+                        if (this._animationId > -1) {
+                            scroller.stopAnimation(this._animationId);
+                            this._animationId = -1;
+                        }
                         const params = {
                             [isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: scrollPositionAfterUpdate, blending: true, userAction,
-                            fireUpdate, behavior: BEHAVIOR_INSTANT, duration: this.animationParams.scrollToItem,
+                            fireUpdate, behavior: BEHAVIOR_INSTANT, duration: 0,
                         };
                         scroller.scrollTo(params);
                         if (emitUpdate) {
@@ -10141,7 +10292,7 @@ class NgVirtualListComponent extends DisposableComponent {
                 comp === null || comp === void 0 ? void 0 : comp.destroy();
             }
         }
-        if (this._displayComponents) {
+        if (!!this._displayComponents) {
             while (this._displayComponents.length > 0) {
                 const comp = this._displayComponents.shift();
                 comp === null || comp === void 0 ? void 0 : comp.destroy();