ng-virtual-list 21.12.1 → 21.12.3

package/fesm2022/ng-virtual-list.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
 import { Injectable, inject, viewChild, signal, ElementRef, DestroyRef, effect, computed, ChangeDetectionStrategy, Component, output, Input, Directive, Injector, InjectionToken, input, ViewChild, ViewContainerRef, ViewEncapsulation, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
-import { Subject, BehaviorSubject, tap, map, fromEvent, race, of, debounceTime, switchMap as switchMap$1, combineLatest, filter as filter$1, delay, takeUntil as takeUntil$1, startWith, from, distinctUntilChanged, take, skip } from 'rxjs';
+import { Subject, BehaviorSubject, distinctUntilChanged, combineLatest, tap, map, fromEvent, race, of, debounceTime, switchMap as switchMap$1, filter as filter$1, delay, takeUntil as takeUntil$1, startWith, from, take, skip } from 'rxjs';
 import { takeUntilDestroyed, toSignal, toObservable } from '@angular/core/rxjs-interop';
 import { BehaviorSubject as BehaviorSubject$1 } from 'rxjs/internal/BehaviorSubject';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { switchMap, takeUntil, filter, tap as tap$1 } from 'rxjs/operators';
+import { tap as tap$1, switchMap, takeUntil, filter } from 'rxjs/operators';
 import * as i4 from '@angular/cdk/scrolling';
 import { CdkScrollable, CdkScrollableModule } from '@angular/cdk/scrolling';
 
@@ -248,6 +248,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__';
@@ -277,7 +278,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,
@@ -333,13 +334,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';
@@ -669,6 +672,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) {
@@ -712,6 +740,10 @@ class NgVirtualListService {
     }
     get collapsedIds() { return this._$collapsedIds.getValue(); }
     constructor() {
+        const $grabbing = this.$grabbing.pipe(takeUntilDestroyed(), distinctUntilChanged()), $clickPressed = this.$clickPressed.pipe(takeUntilDestroyed(), distinctUntilChanged());
+        combineLatest([$grabbing, $clickPressed]).pipe(takeUntilDestroyed(), tap(([grabbing, clickPressed]) => {
+            this._$isGrabbing.next(grabbing && !clickPressed);
+        })).subscribe();
         this._$selectingMode.pipe(takeUntilDestroyed(), tap(v => {
             switch (v) {
                 case SelectingModesTypes.SELECT: {
@@ -1154,7 +1186,7 @@ class BaseVirtualListItemComponent {
         }
         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.set(v);
@@ -1203,6 +1235,9 @@ class BaseVirtualListItemComponent {
         this._id = this._service.generateComponentId();
         this._listId = this._service.id;
         this._displayId = createDisplayId(this._listId, this._id);
+        this._service.$isGrabbing.pipe(takeUntilDestroyed(), tap(v => {
+            this.updateConfig(this._data, v);
+        })).subscribe();
         effect(() => {
             const part = this.part();
             this._elementRef.nativeElement.setAttribute('part', part);
@@ -1240,9 +1275,9 @@ class BaseVirtualListItemComponent {
     updateMeasures(v) {
         this.measures.set(v?.measures ? { ...v.measures } : null);
     }
-    updateConfig(v) {
+    updateConfig(v, grabbing) {
         this.config.set({
-            ...v?.config || {}, selected: this._isSelected, collapsed: this._isCollapsed, focused: this.focused(),
+            ...v?.config || {}, selected: this._isSelected, collapsed: this._isCollapsed, focused: this.focused(), grabbing,
         });
     }
     update() {
@@ -1368,6 +1403,7 @@ class BaseVirtualListItemComponent {
         }
         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;
@@ -1394,7 +1430,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { _item: [{ type: i0.ViewChild, args: ['item', { isSignal: true }] }], _container: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }] } });
 
-const DEFAULT_MAX_DISTANCE = 40;
 /**
  * VirtualClickDirective
  * Maximum performance for extremely large lists.
@@ -1404,29 +1439,44 @@ const DEFAULT_MAX_DISTANCE = 40;
  * @email djonnyx@gmail.com
  */
 class VirtualClickDirective {
-    _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 = output();
+    onVirtualClickPress = output();
+    onVirtualClickCancel = output();
+    _service = inject(NgVirtualListService);
     _elementRef = inject(ElementRef);
     _destroyRef = inject(DestroyRef);
     constructor() {
+        let maxDistance = this._maxDistance ?? DEFAULT_CLICK_DISTANCE;
+        combineLatest([this._service.$clickDistance, this.$maxDistance]).pipe(takeUntilDestroyed(), tap$1(([clickDistance, distance]) => {
+            maxDistance = distance === null ? clickDistance : distance;
+        })).subscribe();
         const $pointerPressed = fromEvent(this._elementRef.nativeElement, 'pointerdown'), $pointerCancel = race([
             fromEvent(window, 'pointerup').pipe(takeUntilDestroyed()),
             fromEvent(window, 'pointerleave').pipe(takeUntilDestroyed()),
         ]), $pointerRelease = fromEvent(this._elementRef.nativeElement, 'pointerup', { passive: false });
         $pointerPressed.pipe(takeUntilDestroyed(), switchMap(e => {
             const x = Math.abs(e.clientX), y = Math.abs(e.clientY);
+            this.onVirtualClickPress.emit(e);
             return $pointerRelease.pipe(takeUntilDestroyed(this._destroyRef), takeUntil(race([
-                $pointerCancel,
+                $pointerCancel.pipe(takeUntilDestroyed(this._destroyRef), tap$1(() => {
+                    this.onVirtualClickCancel.emit();
+                })),
                 fromEvent(window, 'pointermove').pipe(takeUntilDestroyed(this._destroyRef), 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);
-                }), takeUntilDestroyed(this._destroyRef), filter(v => !!v)),
+                }), filter(v => !!v)),
             ])), takeUntilDestroyed(this._destroyRef), tap$1(e => {
                 if (e) {
                     this.onVirtualClick.emit(e);
@@ -1435,7 +1485,7 @@ class VirtualClickDirective {
         })).subscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: VirtualClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: VirtualClickDirective, isStandalone: false, selector: "[virtualClick]", inputs: { maxDistance: ["maxClickDistance", "maxDistance"] }, outputs: { onVirtualClick: "onVirtualClick" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: VirtualClickDirective, isStandalone: false, selector: "[virtualClick]", inputs: { maxDistance: ["maxClickDistance", "maxDistance"] }, outputs: { onVirtualClick: "onVirtualClick", onVirtualClickPress: "onVirtualClickPress", onVirtualClickCancel: "onVirtualClickCancel" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: VirtualClickDirective, decorators: [{
             type: Directive,
@@ -1446,7 +1496,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         }], ctorParameters: () => [], propDecorators: { maxDistance: [{
                 type: Input,
                 args: ['maxClickDistance']
-            }], onVirtualClick: [{ type: i0.Output, args: ["onVirtualClick"] }] } });
+            }], onVirtualClick: [{ type: i0.Output, args: ["onVirtualClick"] }], onVirtualClickPress: [{ type: i0.Output, args: ["onVirtualClickPress"] }], onVirtualClickCancel: [{ type: i0.Output, args: ["onVirtualClickCancel"] }] } });
 
 /**
  * Virtual list component.
@@ -1476,12 +1526,12 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
         fromEvent(this.element, EVENT_FOCUS_IN).pipe(takeUntilDestroyed(this._destroyRef), tap(e => {
             this._service.focusedId = this.itemId ?? null;
             this.focused.set(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(takeUntilDestroyed(this._destroyRef), tap(e => {
                 this.focused.set(false);
-                this.updateConfig(this._data);
+                this.updateConfig(this._data, this._service.isGrabbing);
                 this.updatePartStr(this._data, this._isSelected, this._isCollapsed);
             })).subscribe();
         $focused.pipe(takeUntilDestroyed(this._destroyRef), debounceTime(this.getNavigationTimeout()), switchMap$1(v => {
@@ -1514,7 +1564,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();
     }
@@ -1617,23 +1667,29 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
         }
         return Number.MIN_SAFE_INTEGER;
     }
-    updateConfig(v) {
+    updateConfig(v, grabbing) {
         this.config.set({
-            ...v?.config || {}, selected: this._isSelected, collapsed: this._isCollapsed, focused: this.focused(),
+            ...v?.config || {}, selected: this._isSelected, collapsed: this._isCollapsed, focused: this.focused(), grabbing,
         });
     }
     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: "21.2.0", ngImport: i0, type: NgVirtualListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NgVirtualListItemComponent, isStandalone: false, selector: "ng-virtual-list-item", host: { attributes: { "role": "listitem" }, classAttribute: "ngvl__item" }, usesInheritance: true, ngImport: i0, template: "@let renderer = itemRenderer();\r\n@let class = classes();\r\n<div #item class=\"ngvl-item\" [ngClass]=\"class\" [part]=\"part()\" [attr.ngvl-index]=\"index()\" [attr.ngvl-visibility]=\"visibility\" tabindex=\"-1\">\r\n    @if (_blendColor) {\r\n        <div class=\"ngvl-item__blend-color\" [style.--blend-color]=\"_blendColor\"></div>\r\n    }\r\n    <div #container virtualClick [part]=\"fxPart()\" [maxClickDistance]=\"maxClickDistance()\" class=\"ngvl-item__container\"\r\n        [ngClass]=\"class\" (onVirtualClick)=\"onClickHandler()\">\r\n        @if (renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\" [ngTemplateOutletContext]=\"templateContext()\" />\r\n        }\r\n    </div>\r\n</div>", 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: VirtualClickDirective, selector: "[virtualClick]", inputs: ["maxClickDistance"], outputs: ["onVirtualClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NgVirtualListItemComponent, isStandalone: false, selector: "ng-virtual-list-item", host: { attributes: { "role": "listitem" }, classAttribute: "ngvl__item" }, usesInheritance: true, ngImport: i0, template: "@let renderer = itemRenderer();\r\n@let class = classes();\r\n<div #item class=\"ngvl-item\" [ngClass]=\"class\" [part]=\"part()\" [attr.ngvl-index]=\"index()\"\r\n    [attr.ngvl-visibility]=\"visibility\" tabindex=\"-1\">\r\n    @if (_blendColor) {\r\n        <div class=\"ngvl-item__blend-color\" [style.--blend-color]=\"_blendColor\"></div>\r\n    }\r\n    <div #container virtualClick [part]=\"fxPart()\" [maxClickDistance]=\"maxClickDistance()\" class=\"ngvl-item__container\"\r\n        [ngClass]=\"class\" (onVirtualClick)=\"onClickHandler()\" (onVirtualClickPress)=\"onClickPressHandler()\"\r\n        (onVirtualClickCancel)=\"onClickCancelHandler()\">\r\n        @if (renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\" [ngTemplateOutletContext]=\"templateContext()\" />\r\n        }\r\n    </div>\r\n</div>", 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: VirtualClickDirective, selector: "[virtualClick]", inputs: ["maxClickDistance"], outputs: ["onVirtualClick", "onVirtualClickPress", "onVirtualClickCancel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.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: "@let renderer = itemRenderer();\r\n@let class = classes();\r\n<div #item class=\"ngvl-item\" [ngClass]=\"class\" [part]=\"part()\" [attr.ngvl-index]=\"index()\" [attr.ngvl-visibility]=\"visibility\" tabindex=\"-1\">\r\n    @if (_blendColor) {\r\n        <div class=\"ngvl-item__blend-color\" [style.--blend-color]=\"_blendColor\"></div>\r\n    }\r\n    <div #container virtualClick [part]=\"fxPart()\" [maxClickDistance]=\"maxClickDistance()\" class=\"ngvl-item__container\"\r\n        [ngClass]=\"class\" (onVirtualClick)=\"onClickHandler()\">\r\n        @if (renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\" [ngTemplateOutletContext]=\"templateContext()\" />\r\n        }\r\n    </div>\r\n</div>", 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: "@let renderer = itemRenderer();\r\n@let class = classes();\r\n<div #item class=\"ngvl-item\" [ngClass]=\"class\" [part]=\"part()\" [attr.ngvl-index]=\"index()\"\r\n    [attr.ngvl-visibility]=\"visibility\" tabindex=\"-1\">\r\n    @if (_blendColor) {\r\n        <div class=\"ngvl-item__blend-color\" [style.--blend-color]=\"_blendColor\"></div>\r\n    }\r\n    <div #container virtualClick [part]=\"fxPart()\" [maxClickDistance]=\"maxClickDistance()\" class=\"ngvl-item__container\"\r\n        [ngClass]=\"class\" (onVirtualClick)=\"onClickHandler()\" (onVirtualClickPress)=\"onClickPressHandler()\"\r\n        (onVirtualClickCancel)=\"onClickCancelHandler()\">\r\n        @if (renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\" [ngTemplateOutletContext]=\"templateContext()\" />\r\n        }\r\n    </div>\r\n</div>", 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: () => [] });
 
 /**
@@ -3193,7 +3249,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--) {
@@ -3453,6 +3509,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;
@@ -3475,10 +3532,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;
@@ -3487,14 +3544,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;
@@ -3502,9 +3580,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;
                 }
             }
@@ -3968,18 +4046,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;
@@ -3993,10 +4085,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) {
@@ -4005,18 +4097,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);
                 }
@@ -4026,9 +4119,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();
@@ -4038,7 +4139,7 @@ class Animator {
 const SCROLL_VIEW_INVERSION = new InjectionToken('ScrollViewInversion');
 const SCROLL_VIEW_OVERSCROLL_ENABLED = new InjectionToken('ScrollViewOverscrollEnabled');
 const SCROLL_VIEW_NORMALIZE_VALUE_FROM_ZERO = new InjectionToken('ScrollViewNormalizeValueFromZero');
-const TOP$1 = 'top', LEFT$1 = 'left', INSTANT$1 = 'instant', AUTO = 'auto', SMOOTH = 'smooth', DURATION = 2000, FRICTION_FORCE = .035, MAX_DURATION = 4000, ANIMATION_DURATION = 50, MASS = .005, MAX_DIST = 12500, MAX_VELOCITY_TIMESTAMP = 100, SPEED_SCALE = 15, OVERSCROLL_START_ITERATION = 2, INTERSECTION_DISTANCE = 1;
+const TOP$1 = 'top', LEFT$1 = 'left', INSTANT$1 = 'instant', AUTO = 'auto', SMOOTH = 'smooth', DURATION = 2000, FRICTION_FORCE = .035, MAX_DURATION = 4000, ANIMATION_DURATION = 50, MASS = .005, ACCELERATION_SCALE = 40, MAX_DIST = 12500, MAX_VELOCITY_TIMESTAMP = 100, SPEED_SCALE = 15, OVERSCROLL_START_ITERATION = 2;
 const MAX_ITERATIONS_FOR_AVERAGE_CALCULATIONS = 5, INSTANT_VELOCITY_SCALE = 1000;
 const SCROLL_EVENT$1 = new Event(SCROLLER_SCROLL);
 
@@ -4465,6 +4566,7 @@ class NgScrollView extends BaseScrollView {
     get startLayoutOffset() { return this._startLayoutOffset; }
     _intersectionComponentId = null;
     _isAlignmentAnimation = false;
+    get animated() { return this._animator?.isAnimated ?? false; }
     constructor() {
         super();
         let mouseCanceled = false, touchCanceled = false;
@@ -4656,6 +4758,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);
@@ -4795,8 +4898,8 @@ class NgScrollView extends BaseScrollView {
                 continue;
             }
             if (v00) {
-                const a0 = timestamp < MAX_VELOCITY_TIMESTAMP ? (v00[1] !== 0 ? (lastVSign * Math.abs(Math.abs(v01[0]) - Math.abs(v00[0]))) / Math.abs(v00[1]) : 0) : 0.1;
-                aSum = (aSum * mass) + a0;
+                const a0 = timestamp < MAX_VELOCITY_TIMESTAMP ? (v00[1] !== 0 ? (lastVSign * Math.abs(Math.abs(v01[0]) - Math.abs(v00[0]))) / Math.abs(v00[1]) : 0) : .1;
+                aSum = Math.abs((aSum * mass)) + Math.abs(a0);
                 prevV0 = v01;
             }
             prevV0 = v01;
@@ -4817,8 +4920,8 @@ 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) / 1000) / mass, distance = Math.abs(s) < maxDist ? s : maxDistance, positionWithVelocity = position + (this._inversion ? -1 : 1) * distance, vmax = Math.max(Math.abs(v0), Math.abs(v)), ad = Math.abs(vmax !== 0 ? Math.sqrt(vmax) : 0) * 10 / mass, aDuration = ad < maxDuration ? ad : maxDuration, startPosition = isVertical ? this.y : this.x;
-            this.animate(startPosition, Math.round(positionWithVelocity), aDuration, easeOutQuad, true);
+            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, false, true);
         }
         else {
             this.alignPosition(true, true);
@@ -4831,11 +4934,17 @@ class NgScrollView extends BaseScrollView {
         const isVertical = this.isVertical(), 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();
         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,
@@ -4847,7 +4956,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;
@@ -4979,7 +5088,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().snapToItem : 1, easeOutQuad, false, false, false, true);
             return true;
         }
         return false;
@@ -5065,21 +5174,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) {
@@ -5089,9 +5195,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) {
@@ -5100,6 +5203,7 @@ class NgScrollView extends BaseScrollView {
                 }
             }
         }
+        return -1;
     }
     emitScrollableEvent() {
         if (!!this.cdkScrollable) {
@@ -5118,6 +5222,9 @@ class NgScrollView extends BaseScrollView {
         this.stopScrolling();
         this.move(this.isVertical(), offset);
     }
+    stopAnimation(id) {
+        this._animator.stop(id);
+    }
     ngOnDestroy() {
         if (this._animator) {
             this._animator.dispose();
@@ -5276,13 +5383,13 @@ class NgScrollBarComponent extends NgScrollView {
         })).subscribe();
     }
     createDragEvent(userAction) {
-        const isVertical = this.isVertical(), scrollSize = isVertical ? this.scrollHeight : this.scrollWidth, scrollContent = this.scrollContent()?.nativeElement, scrollViewport = this.scrollViewport()?.nativeElement;
+        const isVertical = this.isVertical(), scrollSize = isVertical ? this.scrollHeight : this.scrollWidth, scrollPosition = isVertical ? this.scrollTop : this.scrollLeft, startOffset = this.startOffset(), endOffset = this.endOffset(), scrollContent = this.scrollContent()?.nativeElement, scrollViewport = this.scrollViewport()?.nativeElement;
         if (!!scrollViewport && !!scrollContent) {
-            const contentSize = isVertical ? scrollContent.offsetHeight : scrollContent.offsetWidth, viewportSize = isVertical ? scrollViewport.offsetHeight : scrollViewport.offsetWidth;
+            const contentSize = isVertical ? scrollContent.offsetHeight : scrollContent.offsetWidth, viewportSize = isVertical ? scrollViewport.offsetHeight : scrollViewport.offsetWidth, offsetSize = (scrollSize !== 0 ? (startOffset / scrollSize) : 0), positionSize = (scrollSize !== 0 ? (scrollPosition / scrollSize) : 0), maxSize = 1 - offsetSize, pos = (positionSize - offsetSize);
             const event = {
-                position: scrollSize !== 0 ? ((isVertical ? this._y : this._x) / scrollSize) : 0,
-                min: scrollSize !== 0 ? (this.startOffset() / scrollSize) : 0,
-                max: scrollSize !== 0 ? ((viewportSize - this.endOffset() - contentSize) / scrollSize) : 0,
+                position: pos / maxSize,
+                min: scrollSize !== 0 ? (startOffset / scrollSize) : 0,
+                max: scrollSize !== 0 ? ((viewportSize - endOffset - contentSize) / scrollSize) : 0,
                 animation: !this._isMoving,
                 userAction,
             };
@@ -5496,6 +5603,10 @@ class NgScrollerComponent extends NgScrollView {
         $updateScrollBar.pipe(takeUntilDestroyed(this._destroyRef), debounceTime(0), tap(() => {
             this.updateScrollBarHandler(!this._isScrollbarUserAction);
         })).subscribe();
+        effect(() => {
+            const grabbing = this.grabbing();
+            this._service.grabbing = grabbing;
+        });
         this.actualClasses = computed(() => {
             const classes = this.classes(), direction = this.direction(), filtered = this.motionBlurEnabled();
             return { ...classes, [direction]: true, grabbing: this.grabbing(), filtered };
@@ -5633,7 +5744,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) {
@@ -6002,14 +6113,14 @@ class NgPrerenderVirtualListItemComponent extends NgVirtualListItemComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgPrerenderVirtualListItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NgPrerenderVirtualListItemComponent, isStandalone: false, selector: "ng-prerender-virtual-list-item", host: { attributes: { "role": "listitem" }, classAttribute: "ngvl__item" }, usesInheritance: true, ngImport: i0, template: "@let renderer = itemRenderer();\r\n@let class = classes();\r\n<div #item class=\"ngvl-item\" [ngClass]=\"class\" [part]=\"part()\" [attr.ngvl-index]=\"index()\" [attr.ngvl-visibility]=\"visibility\" tabindex=\"-1\">\r\n    @if (_blendColor) {\r\n        <div class=\"ngvl-item__blend-color\" [style.--blend-color]=\"_blendColor\"></div>\r\n    }\r\n    <div #container virtualClick [part]=\"fxPart()\" [maxClickDistance]=\"maxClickDistance()\" class=\"ngvl-item__container\"\r\n        [ngClass]=\"class\" (onVirtualClick)=\"onClickHandler()\">\r\n        @if (renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\" [ngTemplateOutletContext]=\"templateContext()\" />\r\n        }\r\n    </div>\r\n</div>", 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: VirtualClickDirective, selector: "[virtualClick]", inputs: ["maxClickDistance"], outputs: ["onVirtualClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NgPrerenderVirtualListItemComponent, isStandalone: false, selector: "ng-prerender-virtual-list-item", host: { attributes: { "role": "listitem" }, classAttribute: "ngvl__item" }, usesInheritance: true, ngImport: i0, template: "@let renderer = itemRenderer();\r\n@let class = classes();\r\n<div #item class=\"ngvl-item\" [ngClass]=\"class\" [part]=\"part()\" [attr.ngvl-index]=\"index()\"\r\n    [attr.ngvl-visibility]=\"visibility\" tabindex=\"-1\">\r\n    @if (_blendColor) {\r\n        <div class=\"ngvl-item__blend-color\" [style.--blend-color]=\"_blendColor\"></div>\r\n    }\r\n    <div #container virtualClick [part]=\"fxPart()\" [maxClickDistance]=\"maxClickDistance()\" class=\"ngvl-item__container\"\r\n        [ngClass]=\"class\" (onVirtualClick)=\"onClickHandler()\" (onVirtualClickPress)=\"onClickPressHandler()\"\r\n        (onVirtualClickCancel)=\"onClickCancelHandler()\">\r\n        @if (renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\" [ngTemplateOutletContext]=\"templateContext()\" />\r\n        }\r\n    </div>\r\n</div>", 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: VirtualClickDirective, selector: "[virtualClick]", inputs: ["maxClickDistance"], outputs: ["onVirtualClick", "onVirtualClickPress", "onVirtualClickCancel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.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: "@let renderer = itemRenderer();\r\n@let class = classes();\r\n<div #item class=\"ngvl-item\" [ngClass]=\"class\" [part]=\"part()\" [attr.ngvl-index]=\"index()\" [attr.ngvl-visibility]=\"visibility\" tabindex=\"-1\">\r\n    @if (_blendColor) {\r\n        <div class=\"ngvl-item__blend-color\" [style.--blend-color]=\"_blendColor\"></div>\r\n    }\r\n    <div #container virtualClick [part]=\"fxPart()\" [maxClickDistance]=\"maxClickDistance()\" class=\"ngvl-item__container\"\r\n        [ngClass]=\"class\" (onVirtualClick)=\"onClickHandler()\">\r\n        @if (renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\" [ngTemplateOutletContext]=\"templateContext()\" />\r\n        }\r\n    </div>\r\n</div>", 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: "@let renderer = itemRenderer();\r\n@let class = classes();\r\n<div #item class=\"ngvl-item\" [ngClass]=\"class\" [part]=\"part()\" [attr.ngvl-index]=\"index()\"\r\n    [attr.ngvl-visibility]=\"visibility\" tabindex=\"-1\">\r\n    @if (_blendColor) {\r\n        <div class=\"ngvl-item__blend-color\" [style.--blend-color]=\"_blendColor\"></div>\r\n    }\r\n    <div #container virtualClick [part]=\"fxPart()\" [maxClickDistance]=\"maxClickDistance()\" class=\"ngvl-item__container\"\r\n        [ngClass]=\"class\" (onVirtualClick)=\"onClickHandler()\" (onVirtualClickPress)=\"onClickPressHandler()\"\r\n        (onVirtualClickCancel)=\"onClickCancelHandler()\">\r\n        @if (renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\" [ngTemplateOutletContext]=\"templateContext()\" />\r\n        }\r\n    </div>\r\n</div>", 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"] }]
         }] });
 
 /**
@@ -7029,7 +7140,7 @@ class NgVirtualListComponent {
         },
     };
     /**
-     * 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 }".
      */
     animationParams = input(DEFAULT_ANIMATION_PARAMS, { ...(ngDevMode ? { debugName: "animationParams" } : {}), ...this._animationParamsOptions });
     _overscrollEnabledOptions = {
@@ -7503,6 +7614,7 @@ class NgVirtualListComponent {
     _readyForShow = false;
     _cached = false;
     _isLoading = false;
+    _animationId = -1;
     get cachable() {
         return this._prerender()?.active ?? false;
     }
@@ -7517,6 +7629,7 @@ class NgVirtualListComponent {
         NgVirtualListComponent.__nextId = NgVirtualListComponent.__nextId + 1 === Number.MAX_SAFE_INTEGER
             ? 0 : NgVirtualListComponent.__nextId + 1;
         this._id = NgVirtualListComponent.__nextId;
+        let readyForAnimations = false;
         const _$created = new BehaviorSubject(false), $created = _$created.asObservable();
         combineLatest([$created, this.$show]).pipe(takeUntilDestroyed(), filter$1(([created, shown]) => created && shown), debounceTime(1), tap(v => {
             this._$initialized.next(true);
@@ -7753,6 +7866,7 @@ class NgVirtualListComponent {
                 }), 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();
@@ -8094,12 +8208,22 @@ class NgVirtualListComponent {
         }), debounceTime(100), tap(() => {
             this._isLoading = false;
         })).subscribe();
+        let prevCacheVersion = -1, prevScrollable = false;
+        $viewInit.pipe(takeUntilDestroyed(), filter$1(v => !!v), switchMap$1(() => {
+            return this.$show.pipe(takeUntilDestroyed(this._destroyRef), debounceTime(Math.max(500, this.animationParams().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) :
@@ -8143,12 +8267,13 @@ class NgVirtualListComponent {
                     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) {
@@ -8159,10 +8284,16 @@ class NgVirtualListComponent {
                             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,
                             };
-                            scroller?.scrollTo?.(params);
+                            const animationId = scroller?.scrollTo?.(params);
+                            if (animationId > -1) {
+                                this._animationId = animationId;
+                            }
+                            else {
+                                scroller.stopAnimation(this._animationId);
+                            }
                             if (emitUpdate) {
                                 this._$update.next(getScrollStateVersion(totalSize, this._isVertical ? scroller.scrollTop : scroller.scrollLeft));
                             }
@@ -8182,10 +8313,16 @@ class NgVirtualListComponent {
                         }
                         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,
                         };
-                        scroller?.scrollTo?.(params);
+                        const animationId = scroller?.scrollTo?.(params);
+                        if (animationId > -1) {
+                            this._animationId = animationId;
+                        }
+                        else {
+                            scroller.stopAnimation(this._animationId);
+                        }
                         if (emitUpdate) {
                             this._$update.next(getScrollStateVersion(totalSize, this._isVertical ? scroller.scrollTop : scroller.scrollLeft));
                         }
@@ -8198,9 +8335,13 @@ class NgVirtualListComponent {
                         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) {
@@ -8887,7 +9028,7 @@ class NgVirtualListComponent {
         this._isScrollStart.set(false);
         this._isScrollEnd.set(false);
         this._trackBox.preventScrollSnapping(true);
-        if (scroller) {
+        if (!!scroller) {
             scroller.stopScrolling();
         }
     }
@@ -8913,7 +9054,7 @@ class NgVirtualListComponent {
                 comp?.destroy();
             }
         }
-        if (this._displayComponents) {
+        if (!!this._displayComponents) {
             while (this._displayComponents.length > 0) {
                 const comp = this._displayComponents.shift();
                 comp?.destroy();