ng-virtual-list 18.12.2 → 18.12.3

package/fesm2022/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';
 
@@ -247,6 +247,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__';
@@ -276,7 +277,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,
@@ -332,13 +333,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';
@@ -492,6 +495,7 @@ const DEFAULT_TEMPLATE_CONTEXT = {
         isLast: false,
         fullSize: false,
         totalItems: 0,
+        grabbing: false,
     },
     reseted: false,
     index: -1,
@@ -707,6 +711,31 @@ class NgVirtualListService {
         this._langTextDir = v;
         this._$langTextDir.next(v);
     }
+    _$grabbing = new BehaviorSubject$1(false);
+    $grabbing = this._$grabbing.asObservable();
+    get grabbing() { return this._$grabbing.getValue(); }
+    _grabbing = false;
+    set grabbing(v) {
+        if (this._grabbing === v) {
+            return;
+        }
+        this._grabbing = v;
+        this._$grabbing.next(v);
+    }
+    _$clickPressed = new BehaviorSubject$1(false);
+    $clickPressed = this._$clickPressed.asObservable();
+    get clickPressed() { return this._$clickPressed.getValue(); }
+    _clickPressed = false;
+    set clickPressed(v) {
+        if (this._clickPressed === v) {
+            return;
+        }
+        this._clickPressed = v;
+        this._$clickPressed.next(v);
+    }
+    _$isGrabbing = new BehaviorSubject$1(false);
+    $isGrabbing = this._$isGrabbing.asObservable();
+    get isGrabbing() { return this._$isGrabbing.getValue(); }
     get scrollBarSize() { return this._$scrollBarSize.getValue(); }
     _scrollBarSize = 0;
     set scrollBarSize(v) {
@@ -750,6 +779,10 @@ class NgVirtualListService {
     }
     get collapsedIds() { return this._$collapsedIds.getValue(); }
     constructor() {
+        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: {
@@ -1230,7 +1263,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);
@@ -1282,6 +1315,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);
@@ -1319,9 +1355,9 @@ class BaseVirtualListItemComponent extends DisposableComponent {
         this._$measures.next(v?.measures ? { ...v.measures } : null);
         this._cdr.markForCheck();
     }
-    updateConfig(v) {
+    updateConfig(v, grabbing) {
         this._$config.next({
-            ...v?.config || {}, selected: this._isSelected, collapsed: this._isCollapsed, focused: this._$focused.getValue(),
+            ...v?.config || {}, selected: this._isSelected, collapsed: this._isCollapsed, focused: this._$focused.getValue(), grabbing,
         });
         this._cdr.markForCheck();
     }
@@ -1450,6 +1486,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;
@@ -1482,9 +1519,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 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/18.x/projects/ng-virtual-list/src/lib/directives/item-click/item-click.directive.ts
@@ -1492,30 +1528,44 @@ const DEFAULT_MAX_DISTANCE = 40;
  * @email djonnyx@gmail.com
  */
 class VirtualClickDirective {
-    _elementRef;
     _$unsubscribe = new Subject();
-    _maxDistance = DEFAULT_MAX_DISTANCE;
+    _$maxDistance = new BehaviorSubject(null);
+    $maxDistance = this._$maxDistance.asObservable();
+    _maxDistance = null;
     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);
     }
     onVirtualClick = new EventEmitter$1();
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
+    onVirtualClickPress = new EventEmitter$1();
+    onVirtualClickCancel = new EventEmitter$1();
+    _service = inject(NgVirtualListService);
+    _elementRef = inject(ElementRef);
+    constructor() {
+        let maxDistance = this._maxDistance ?? 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);
@@ -1529,8 +1579,8 @@ class VirtualClickDirective {
             this._$unsubscribe.complete();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: VirtualClickDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: VirtualClickDirective, selector: "[virtualClick]", inputs: { maxDistance: ["maxClickDistance", "maxDistance"] }, outputs: { onVirtualClick: "onVirtualClick" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: VirtualClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: VirtualClickDirective, selector: "[virtualClick]", inputs: { maxDistance: ["maxClickDistance", "maxDistance"] }, outputs: { onVirtualClick: "onVirtualClick", onVirtualClickPress: "onVirtualClickPress", onVirtualClickCancel: "onVirtualClickCancel" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: VirtualClickDirective, decorators: [{
             type: Directive,
@@ -1538,11 +1588,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: '[virtualClick]',
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { maxDistance: [{
+        }], ctorParameters: () => [], propDecorators: { maxDistance: [{
                 type: Input,
                 args: ['maxClickDistance']
             }], onVirtualClick: [{
                 type: Output
+            }], onVirtualClickPress: [{
+                type: Output
+            }], onVirtualClickCancel: [{
+                type: Output
             }] } });
 
 /**
@@ -1574,12 +1628,12 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
         fromEvent(this.element, EVENT_FOCUS_IN).pipe(takeUntil(this._$unsubscribe), tap(e => {
             this._service.focusedId = this.itemId ?? 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 => {
@@ -1612,7 +1666,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();
     }
@@ -1715,24 +1769,30 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
         }
         return Number.MIN_SAFE_INTEGER;
     }
-    updateConfig(v) {
+    updateConfig(v, grabbing) {
         this._$config.next({
-            ...v?.config || {}, selected: this._isSelected, collapsed: this._isCollapsed, focused: this._$focused.getValue(),
+            ...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;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NgVirtualListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: "18.2.14", 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: () => [] });
 
 /**
@@ -3292,7 +3352,7 @@ class TrackBox extends CacheMap {
         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--) {
@@ -3552,6 +3612,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;
@@ -3574,10 +3635,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;
@@ -3586,14 +3647,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?.[nexstStickyItemIndex + 1];
+                    if (lastStickyItem?.config?.sticky === 1 && displayItems?.[nexstStickyItemIndex + 2]?.config?.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 (lastStickyItem?.config?.sticky !== 1 && displayItems?.[nexstStickyItemIndex + 2]?.config?.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;
@@ -3601,9 +3683,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;
                 }
             }
@@ -3879,18 +3961,32 @@ const easeLinear = (t) => {
 class Animator {
     static _nextId = 0;
     _animationId = 0;
+    get animated() { return this._animationId > -1; }
+    get isAnimated() { return this.hasAnimation(this._currentId); }
     _currentId = Animator._nextId;
+    get id() { return this._currentId; }
     generateId() {
         return Animator._nextId = Animator._nextId === Number.MAX_SAFE_INTEGER
             ? 0 : Animator._nextId + 1;
     }
+    _diff = 0;
+    _startValue = 0;
+    _endValue = 0;
+    updateTo(value) {
+        this._endValue = value;
+        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, prevPos = startValue, startPosDelta = 0, delta = 0, prevTime = startTime, isFinished = false;
+        this._diff = this._endValue - this._startValue;
         const step = (currentTime) => {
             if (id !== this._currentId) {
                 isCanceled = true;
@@ -3904,10 +4000,10 @@ class Animator {
                 startDelta = cPos - 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 === 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;
+            const frameTimestamp = t - prevTime, actualFrameTimestamp = frameTimestamp < ANIMATOR_MIN_TIMESTAMP ? ANIMATOR_MIN_TIMESTAMP : frameTimestamp;
             prevTime = t;
             prevPos = currentValue;
             if (onUpdate !== undefined) {
@@ -3916,18 +4012,19 @@ class Animator {
                     delta,
                     elapsed,
                     value: !withDelta && isFinished ? endValue : currentValue,
-                    timestamp,
+                    timestamp: actualFrameTimestamp,
                 };
                 onUpdate(data);
             }
             if (isFinished) {
+                this._animationId = -1;
                 if (onComplete !== undefined) {
                     const data = {
                         id,
                         delta,
                         elapsed,
                         value: withDelta ? currentValue : endValue,
-                        timestamp,
+                        timestamp: actualFrameTimestamp,
                     };
                     onComplete(data);
                 }
@@ -3937,9 +4034,17 @@ class Animator {
             }
         };
         this._animationId = requestAnimationFrame(step);
+        return this._currentId;
+    }
+    hasAnimation(id = -1) {
+        if ((this._currentId === id || id === -1) && this.animated) {
+            return true;
+        }
+        return false;
     }
-    stop() {
-        cancelAnimationFrame(this._animationId);
+    stop(id = -1) {
+        cancelAnimationFrame(id === -1 ? this._animationId : id);
+        this._animationId = -1;
     }
     dispose() {
         this.stop();
@@ -4526,6 +4631,7 @@ class NgScrollView extends BaseScrollView {
     get startLayoutOffset() { return this._startLayoutOffset; }
     _intersectionComponentId = null;
     _isAlignmentAnimation = false;
+    get animated() { return this._animator?.isAnimated ?? false; }
     constructor() {
         super();
     }
@@ -4719,6 +4825,7 @@ class NgScrollView extends BaseScrollView {
             }));
         })).subscribe();
     }
+    hasAnimation(id = -1) { return this._animator?.hasAnimation(id) ?? false; }
     updateDirection(position, prePosition) {
         const delta = (position - this._delta) - prePosition;
         this._scrollDirection.add(delta > 0 ? 1 : delta < 0 ? -1 : 0);
@@ -4881,7 +4988,7 @@ class NgScrollView extends BaseScrollView {
     moveWithAcceleration(isVertical, position, v0, v, a0, timestamp) {
         if (a0 !== 0 && timestamp < MAX_VELOCITY_TIMESTAMP) {
             const dvSign = Math.sign(v), mass = this.scrollingSettings?.mass ?? MASS, duration = DURATION, maxDuration = this.scrollingSettings?.maxDuration ?? MAX_DURATION, maxDist = this.scrollingSettings?.maxDistance ?? 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);
@@ -4894,11 +5001,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,
@@ -4910,7 +5023,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 = calculateVelocity(position, value - this._delta, timestamp) ?? this.averageVelocity;
@@ -5042,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;
@@ -5128,21 +5241,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) {
@@ -5152,9 +5262,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) {
@@ -5163,6 +5270,7 @@ class NgScrollView extends BaseScrollView {
                 }
             }
         }
+        return -1;
     }
     emitScrollableEvent() {
         if (!!this.cdkScrollable) {
@@ -5181,6 +5289,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) {
@@ -5852,6 +5963,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({ ...classes, [direction]: true, grabbing, filtered });
         })).subscribe();
@@ -5989,7 +6104,7 @@ class NgScrollerComponent extends NgScrollView {
             this._isScrollbarUserAction = false;
             this.scrollBar?.stopScrolling();
         }
-        this.scroll({ ...params, userAction: userAction });
+        return this.scroll({ ...params, userAction: userAction });
     }
     stopScrollbar() {
         if (!!this.scrollBar) {
@@ -6389,14 +6504,14 @@ class NgPrerenderVirtualListItemComponent extends NgVirtualListItemComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NgPrerenderVirtualListItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: "18.2.14", 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"] }]
         }] });
 
 /**
@@ -8044,7 +8159,7 @@ class NgVirtualListComponent extends DisposableComponent {
         return v;
     };
     /**
-     * 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) {
@@ -8691,6 +8806,7 @@ class NgVirtualListComponent extends DisposableComponent {
     _readyForShow = false;
     _cached = false;
     _isLoading = false;
+    _animationId = -1;
     get cachable() {
         return this._prerender?.active ?? false;
     }
@@ -8752,6 +8868,7 @@ class NgVirtualListComponent extends DisposableComponent {
         })).subscribe();
     }
     ngAfterViewInit() {
+        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);
@@ -8944,6 +9061,7 @@ class NgVirtualListComponent extends DisposableComponent {
                 }), tap(items => {
                     this._trackBox.resetCollection(items, this.actualItemSize);
                 }), switchMap$1(i => of((i ?? []).length > 0)), distinctUntilChanged(), tap(v => {
+                    readyForAnimations = false;
                     if (!v) {
                         this.cacheClean();
                         this.cleanup();
@@ -9283,12 +9401,22 @@ 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) => {
-            const { alignment, snapScrollToStart, snapScrollToEnd, bounds, items, itemConfigMap, scrollSize, itemSize, minItemSize, maxItemSize, bufferSize, maxBufferSize, stickyEnabled, isVertical, dynamicSize, enabledBufferOptimization, snapToItem, snapToItemAlign, userAction, collapsedIds, itemTransform, } = params;
+            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) :
@@ -9332,12 +9460,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) {
@@ -9348,9 +9477,16 @@ 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,
                             };
+                            const animationId = scroller?.scrollTo?.(params);
+                            if (animationId > -1) {
+                                this._animationId = animationId;
+                            }
+                            else {
+                                scroller.stopAnimation(this._animationId);
+                            }
                             scroller?.scrollTo?.(params);
                             if (emitUpdate) {
                                 this._$update.next(getScrollStateVersion(totalSize, this._isVertical ? scroller.scrollTop : scroller.scrollLeft));
@@ -9371,9 +9507,16 @@ 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,
                         };
+                        const animationId = scroller?.scrollTo?.(params);
+                        if (animationId > -1) {
+                            this._animationId = animationId;
+                        }
+                        else {
+                            scroller.stopAnimation(this._animationId);
+                        }
                         scroller?.scrollTo?.(params);
                         if (emitUpdate) {
                             this._$update.next(getScrollStateVersion(totalSize, this._isVertical ? scroller.scrollTop : scroller.scrollLeft));
@@ -9387,9 +9530,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) {
@@ -10104,7 +10251,7 @@ class NgVirtualListComponent extends DisposableComponent {
                 comp?.destroy();
             }
         }
-        if (this._displayComponents) {
+        if (!!this._displayComponents) {
             while (this._displayComponents.length > 0) {
                 const comp = this._displayComponents.shift();
                 comp?.destroy();