ng-virtual-list 16.12.4 → 16.12.9

package/fesm2022/ng-virtual-list.mjs

@@ -1,6 +1,6 @@
 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, distinctUntilChanged, combineLatest, tap, map, fromEvent, race, of, debounceTime, switchMap as switchMap$1, 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, take, from, skip } from 'rxjs';
 import { BehaviorSubject as BehaviorSubject$1 } from 'rxjs/internal/BehaviorSubject';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
@@ -327,7 +327,7 @@ const VISIBILITY_HIDDEN = 'hidden';
 const SIZE_100_PERSENT = '100%';
 const SIZE_AUTO = 'auto';
 const UNSET$5 = 'unset';
-const LEFT$2 = 'left';
+const LEFT$3 = 'left';
 const RIGHT$1 = 'right';
 const POSITION$1 = 'position';
 const POSITION_RELATIVE = 'relative';
@@ -496,6 +496,7 @@ const DEFAULT_TEMPLATE_CONTEXT = {
         fullSize: false,
         totalItems: 0,
         grabbing: false,
+        inverted: false,
     },
     reseted: false,
     index: -1,
@@ -1921,7 +1922,7 @@ class ScrollEvent {
 
 /**
  * Event emitter
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/main/library/src/utils/event-emitter/event-emitter.ts
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/16.x/library/src/utils/event-emitter/event-emitter.ts
  * @author Evgenii Alexandrovich Grebennikov
  * @email djonnyx@gmail.com
  */
@@ -2831,7 +2832,7 @@ class TrackBox extends CacheMap {
      * Calculates list metrics
      */
     recalculateMetrics(options) {
-        const { alignment, fromItemId, bounds, collection, dynamicSize, isVertical, itemSize, minItemSize, maxItemSize, bufferSize: minBufferSize, scrollSize, stickyEnabled, itemConfigMap, enabledBufferOptimization, previousTotalSize, snapToItem, snapToItemAlign, deletedItemsMap, itemTransform } = options, roundedScrollSize = Math.round(scrollSize);
+        const { alignment, fromItemId, bounds, collection, dynamicSize, isVertical, itemSize, minItemSize, maxItemSize, bufferSize: minBufferSize, scrollSize, stickyEnabled, itemConfigMap, enabledBufferOptimization, previousTotalSize, snapToItem, snapToItemAlign, deletedItemsMap, inverted, itemTransform } = options, roundedScrollSize = Math.round(scrollSize);
         const trackBy = this._trackingPropertyName, bufferSize = Math.max(minBufferSize, this._bufferSize), { width, height } = bounds, sizeProperty = isVertical ? HEIGHT_PROP_NAME : WIDTH_PROP_NAME, size = isVertical ? height : width, totalLength = collection.length, typicalItemSize = itemSize, w = isVertical ? width : typicalItemSize, h = isVertical ? typicalItemSize : height, map = this._map, snapshot = this._snapshot, divides = this._divides, stickyPos = Math.floor(scrollSize) + this._scrollStartOffset, leftItemsOrRowsWeights = [], isFromId = fromItemId !== undefined && (typeof fromItemId === 'number' && fromItemId > -1)
             || (typeof fromItemId === 'string' && fromItemId > '-1');
         let leftItemsOffset = 0, rightItemsOffset = 0;
@@ -3284,6 +3285,7 @@ class TrackBox extends CacheMap {
             rightItemLength,
             rightItemsWeight,
             scrollSize: actualScrollSize,
+            maxScrollSize: totalSize,
             leftSizeOfAddedItems,
             sizeProperty,
             stickyEnabled,
@@ -3298,6 +3300,7 @@ class TrackBox extends CacheMap {
             isUpdating,
             snapToItem,
             snapToItemAlign,
+            inverted,
             itemTransform,
         };
         return metrics;
@@ -3349,7 +3352,7 @@ class TrackBox extends CacheMap {
         return false;
     }
     generateDisplayCollection(items, actualItems, itemConfigMap, metrics) {
-        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 = [];
+        const { width, height, normalizedItemWidth, normalizedItemHeight, dynamicSize, divides, itemsOnDisplayLength, itemsFromStartToScrollEnd, isVertical, leftLayoutOffset: layoutOffset, leftLayoutIndexOffset: layoutIndexOffset, renderItems: renderItemsLength, scrollSize, maxScrollSize, sizeProperty, stickyEnabled, stickyPos, startPosition, totalLength, startIndex, typicalItemSize, minItemSize, maxItemSize, snapToItem, snapToItemAlign, inverted, 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, nexstStickyItemIndex = -1, stickyItemSize = 0, endStickyItem, nextEndSticky, endStickyItemIndex = -1, endStickyItemSize = 0;
@@ -3389,6 +3392,7 @@ class TrackBox extends CacheMap {
                             position: pos,
                             boundsSize,
                             scrollSize,
+                            maxScrollSize,
                             absoluteStartPosition,
                             absoluteStartPositionPercent,
                             absoluteEndPosition,
@@ -3419,6 +3423,7 @@ class TrackBox extends CacheMap {
                             tabIndex: i - layoutIndexOffset,
                             divides,
                             opacity: 1,
+                            inverted,
                             zIndex: Z_INDEX_1,
                         };
                         const itemData = collectionItem;
@@ -3465,6 +3470,7 @@ class TrackBox extends CacheMap {
                             position: pos,
                             boundsSize,
                             scrollSize,
+                            maxScrollSize,
                             absoluteStartPosition,
                             absoluteStartPositionPercent,
                             absoluteEndPosition,
@@ -3501,6 +3507,7 @@ class TrackBox extends CacheMap {
                             tabIndex: i - layoutIndexOffset,
                             divides,
                             opacity: 1,
+                            inverted,
                             zIndex: Z_INDEX_1,
                         };
                         const itemData = collectionItem;
@@ -3561,6 +3568,7 @@ class TrackBox extends CacheMap {
                             position: pos,
                             boundsSize,
                             scrollSize,
+                            maxScrollSize,
                             absoluteStartPosition,
                             absoluteStartPositionPercent,
                             absoluteEndPosition,
@@ -3599,6 +3607,7 @@ class TrackBox extends CacheMap {
                             opacity: 1,
                             zIndex: Z_INDEX_0,
                             fullSize,
+                            inverted,
                         };
                         if (snapped) {
                             config.zIndex = Z_INDEX_2;
@@ -3743,18 +3752,18 @@ class TrackBox extends CacheMap {
         let first = null, last = null;
         if (!!components) {
             for (const comp of components) {
-                const id = comp.instance.itemId ?? null, isVertical = comp.instance.item?.config?.isVertical, x = comp.instance.item?.measures?.x ?? 0, y = comp.instance.item?.measures?.y ?? 0, isFirst = comp.instance.item?.config?.isFirst ?? false, isLast = comp.instance.item?.config?.isLast ?? false, { width, height } = comp.instance.getBounds(), pos = position;
+                const id = comp.instance.itemId ?? null, isVertical = comp.instance.item?.config?.isVertical, inverted = comp.instance.item?.config.inverted ?? false, maxScrollSize = comp.instance.item?.measures.maxScrollSize ?? 0, { width, height } = comp.instance.getBounds(), x = comp.instance.item?.measures?.x ?? 0, xx = inverted ? (maxScrollSize - x) - width : x, y = comp.instance.item?.measures?.y ?? 0, isFirst = comp.instance.item?.config?.isFirst ?? false, isLast = comp.instance.item?.config?.isLast ?? false, pos = position;
                 if (isVertical && (pos >= y && pos < y + height)) {
                     return { id, x, y, width, height, isFirst, isLast };
                 }
-                else if (!isVertical && (pos >= x && pos < x + width)) {
-                    return { id, x, y, width, height, isFirst, isLast };
+                else if (!isVertical && (pos >= xx && pos < xx + width)) {
+                    return { id, x: xx, y, width, height, isFirst, isLast };
                 }
                 if (isFirst) {
-                    first = { id, x, y, width, height, isFirst, isLast };
+                    first = { id, x: xx, y, width, height, isFirst, isLast };
                 }
                 else if (isLast) {
-                    last = { id, x, y, width, height, isFirst, isLast };
+                    last = { id, x: xx, y, width, height, isFirst, isLast };
                 }
             }
         }
@@ -3954,7 +3963,7 @@ const easeLinear = (t) => {
 
 /**
  * Animator
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/main/library/src/utils/animator/animator.ts
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/16.x/library/src/utils/animator/animator.ts
  * @author Evgenii Alexandrovich Grebennikov
  * @email djonnyx@gmail.com
  */
@@ -3974,9 +3983,13 @@ class Animator {
     _endValue = 0;
     _prevPos = 0;
     updateTo(end) {
-        this._endValue = end;
-        this._diff = this._endValue - this._startValue;
-        return this.hasAnimation();
+        if (this.hasAnimation()) {
+            this._startValue = this._prevPos;
+            this._endValue = end;
+            this._diff = this._endValue - this._startValue;
+            return true;
+        }
+        return false;
     }
     animate(params) {
         this.stop();
@@ -4008,6 +4021,9 @@ class Animator {
             const frameTimestamp = t - prevTime, actualFrameTimestamp = frameTimestamp < ANIMATOR_MIN_TIMESTAMP ? ANIMATOR_MIN_TIMESTAMP : frameTimestamp;
             prevTime = t;
             this._prevPos = currentValue;
+            if (isFinished) {
+                this._animationId = -1;
+            }
             if (onUpdate !== undefined) {
                 const data = {
                     id,
@@ -4019,7 +4035,6 @@ class Animator {
                 onUpdate(data);
             }
             if (isFinished) {
-                this._animationId = -1;
                 if (onComplete !== undefined) {
                     const data = {
                         id,
@@ -4056,7 +4071,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, ACCELERATION_SCALE = 40, MAX_DIST = 12500, MAX_VELOCITY_TIMESTAMP = 100, SPEED_SCALE = 15, OVERSCROLL_START_ITERATION = 2;
+const TOP$1 = 'top', LEFT$2 = 'left', INSTANT$1 = 'instant', AUTO = 'auto', SMOOTH = 'smooth', DURATION = 2000, FRICTION_FORCE = .035, MAX_DURATION = 4000, ANIMATION_DURATION = 50, MASS = .005, ACCELERATION_SCALE = 40, MAX_DIST = 12500, MIN_DELTA = 0.1, MAX_VELOCITY_TIMESTAMP = 100, MAX_VELOCITIES_LENGTH = 10, MIN_ACCELERATION = 0.001, SPEED_SCALE = 15, OVERSCROLL_START_ITERATION = 2;
 const MAX_ITERATIONS_FOR_AVERAGE_CALCULATIONS = 5, INSTANT_VELOCITY_SCALE = 1000;
 const SCROLL_EVENT$1 = new Event(SCROLLER_SCROLL);
 
@@ -4221,6 +4236,17 @@ class BaseScrollView extends DisposableComponent {
     $isVertical = this._$isVertical.asObservable();
     _$grabbing = new BehaviorSubject(false);
     $grabbing = this._$grabbing.asObservable();
+    get grabbing() {
+        return this._$grabbing.getValue();
+    }
+    _$langTextDir = new BehaviorSubject(DEFAULT_LANG_TEXT_DIR);
+    $langTextDir = this._$langTextDir.asObservable();
+    set langTextDir(v) {
+        if (this._$langTextDir.getValue() !== v) {
+            this._$langTextDir.next(v);
+        }
+    }
+    get langTextDir() { return this._$langTextDir.getValue(); }
     _inversion = inject(SCROLL_VIEW_INVERSION);
     _overscrollEnabled = inject(SCROLL_VIEW_OVERSCROLL_ENABLED);
     _$updateScrollBar = new Subject();
@@ -4386,7 +4412,7 @@ class BaseScrollView extends DisposableComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BaseScrollView, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BaseScrollView, selector: "base-scroll-view", inputs: { direction: "direction", startOffset: "startOffset", endOffset: "endOffset", alignmentStartOffset: "alignmentStartOffset", alignmentEndOffset: "alignmentEndOffset", isInfinity: "isInfinity" }, viewQueries: [{ propertyName: "scrollContent", first: true, predicate: ["scrollContent"], descendants: true }, { propertyName: "scrollViewport", first: true, predicate: ["scrollViewport"], descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BaseScrollView, selector: "base-scroll-view", inputs: { direction: "direction", startOffset: "startOffset", endOffset: "endOffset", alignmentStartOffset: "alignmentStartOffset", alignmentEndOffset: "alignmentEndOffset", isInfinity: "isInfinity", langTextDir: "langTextDir" }, viewQueries: [{ propertyName: "scrollContent", first: true, predicate: ["scrollContent"], descendants: true }, { propertyName: "scrollViewport", first: true, predicate: ["scrollViewport"], descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BaseScrollView, decorators: [{
             type: Component,
@@ -4412,6 +4438,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], isInfinity: [{
                 type: Input
+            }], langTextDir: [{
+                type: Input
             }] } });
 
 /**
@@ -4579,10 +4607,34 @@ class NgScrollView extends BaseScrollView {
     get averageVelocity() { return this._$averageVelocity.getValue(); }
     _measureVelocityTimestamp = Date.now();
     _measureVelocityLastPosition = this._$isVertical.getValue() ? this._y : this._x;
-    _startPosition = 0;
+    _startPositionX = 0;
+    _startPositionY = 0;
+    set startPosition(v) {
+        const isVertical = this._$isVertical.getValue(), c = isVertical ? this._startPositionY : this._startPositionX;
+        if (v !== c) {
+            if (isVertical) {
+                this._startPositionY = v;
+            }
+            else {
+                this._startPositionX = v;
+            }
+        }
+    }
+    get startPosition() {
+        if (this._$isVertical.getValue()) {
+            return this._startPositionY;
+        }
+        return this._startPositionX;
+    }
     _animator = new Animator();
+    _$horizontalAxisInvertion = new BehaviorSubject(false);
+    $horizontalAxisInvertion = this._$horizontalAxisInvertion.asObservable();
+    get horizontalAxisInvertion() { return this._$horizontalAxisInvertion.getValue(); }
+    get inverted() { return this._$horizontalAxisInvertion.getValue(); }
     _interactive = true;
     _overscrollIteration = 0;
+    _overscrollStartIteration = 0;
+    _overscrollApplied = false;
     set x(v) {
         this.setX(v);
     }
@@ -4622,7 +4674,7 @@ class NgScrollView extends BaseScrollView {
     _delta = 0;
     set delta(v) {
         this._delta = v;
-        this._startPosition += v;
+        this.startPosition += v;
     }
     set startLayoutOffset(v) {
         if (this._startLayoutOffset !== v) {
@@ -4631,6 +4683,8 @@ class NgScrollView extends BaseScrollView {
         }
     }
     get startLayoutOffset() { return this._startLayoutOffset; }
+    _scrollDirectionValueX = 0;
+    _scrollDirectionValueY = 0;
     _intersectionComponentId = null;
     _isAlignmentAnimation = false;
     get animated() { return this._animator?.isAnimated ?? false; }
@@ -4639,6 +4693,9 @@ class NgScrollView extends BaseScrollView {
     }
     ngAfterViewInit() {
         let mouseCanceled = false, touchCanceled = false;
+        combineLatest([this.$isVertical, this.$langTextDir]).pipe(takeUntil(this._$unsubscribe), tap(([isVertical, langTextDir]) => {
+            this._$horizontalAxisInvertion.next(!isVertical && langTextDir === TextDirections.RTL);
+        })).subscribe();
         const $viewportBounds = this.$viewportBounds;
         $viewportBounds.pipe(takeUntil(this._$unsubscribe), debounceTime(0), tap(() => {
             this._isMoving = false;
@@ -4654,19 +4711,25 @@ class NgScrollView extends BaseScrollView {
             this._$scrollEnd.next(false);
         })).subscribe();
         const $wheel = this.$wheel;
-        $wheel.pipe(takeUntil(this._$unsubscribe), switchMap$1(v => of(this.averageVelocity)), debounceTime(100), tap(v => {
+        $wheel.pipe(takeUntil(this._$unsubscribe), tap(() => {
+            this._$grabbing.next(true);
+        }), switchMap$1(v => of(this.averageVelocity)), debounceTime(100), tap(v => {
+            this._$grabbing.next(false);
             this.snapWithInitialForceIfNecessary(v);
+            this._overscrollIteration = this._overscrollStartIteration = 0;
+            this._overscrollApplied = false;
             this._scrollDirection.clear();
+            this._scrollDirectionValueX = this._scrollDirectionValueY = 0;
         })).subscribe();
         const $viewport = of(this.scrollViewport).pipe(takeUntil(this._$unsubscribe), filter$1(v => !!v), map(v => v.nativeElement)), $content = of(this.scrollContent).pipe(takeUntil(this._$unsubscribe), filter$1(v => !!v), map(v => v.nativeElement)), $wheelEmitter = this._inversion ? $viewport : $content;
         $wheelEmitter.pipe(takeUntil(this._$unsubscribe), switchMap$1(content => {
             return fromEvent(content, WHEEL, { passive: false }).pipe(filter$1(() => this._interactive), takeUntil(this._$unsubscribe), tap(e => {
                 const isVertical = this._$isVertical.getValue();
                 this.emitScrollableEvent();
-                this.checkOverscroll(e);
+                this.checkOverscroll(e, true);
                 this.stopScrolling(true);
-                const scrollSize = isVertical ? this.scrollHeight : this.scrollWidth, startPos = isVertical ? this._y : this._x, delta = isVertical ? e.deltaY : e.deltaX, dp = (startPos + delta), position = this.isInfinity ? dp : (dp < 0 ? 0 : dp > scrollSize ? scrollSize : dp);
-                this.scroll({ [isVertical ? TOP$1 : LEFT$1]: position, behavior: INSTANT$1, userAction: true, blending: false, fireUpdate: true });
+                const scrollSize = isVertical ? this.scrollHeight : this.scrollWidth, startPos = isVertical ? this._y : this._x, delta = isVertical ? e.deltaY : (e.deltaX * (this.horizontalAxisInvertion ? -1 : 1)), dp = (startPos + delta), position = this.isInfinity ? dp : (dp < 0 ? 0 : dp > scrollSize ? scrollSize : dp);
+                this.scroll({ [isVertical ? TOP$1 : LEFT$2]: position, behavior: INSTANT$1, userAction: true, blending: false, fireUpdate: true });
                 this._$wheel.next(delta);
             }));
         })).subscribe();
@@ -4706,7 +4769,10 @@ class NgScrollView extends BaseScrollView {
         $content.pipe(takeUntil(this._$unsubscribe), switchMap$1(content => {
             return fromEvent(content, MOUSE_DOWN, { passive: false }).pipe(takeUntil(this._$unsubscribe), filter$1(v => this._interactive), switchMap$1(e => {
                 mouseCanceled = false;
+                this._overscrollStartIteration = 0;
+                this._overscrollApplied = false;
                 this._scrollDirection.clear();
+                this._scrollDirectionValueX = this._scrollDirectionValueY = 0;
                 this.cancelOverscroll();
                 this.onDragStart();
                 this.stopScrolling(true);
@@ -4718,23 +4784,34 @@ class NgScrollView extends BaseScrollView {
                 const inversion = this._inversion, isVertical = this._$isVertical.getValue();
                 this._isMoving = true;
                 this._$grabbing.next(true);
-                this._startPosition = (isVertical ? this.y : this.x);
-                let prevClientPosition = isVertical ? e.clientY : e.clientX, startClientPos = prevClientPosition, offsets = new Array(), velocities = new Array(), startTime = Date.now();
+                this._startPositionX = this.x;
+                this._startPositionY = this.y;
+                let prevClientPositionX = (e.clientX) * (this.horizontalAxisInvertion ? -1 : 1), prevClientPositionY = e.clientY, startClientPosX = prevClientPositionX, startClientPosY = prevClientPositionY, offsetsX = new Array(), offsetsY = new Array(), velocitiesX = new Array(), velocitiesY = new Array(), startTime = Date.now();
                 return fromEvent(window, MOUSE_MOVE, { passive: false }).pipe(takeUntil(this._$unsubscribe), takeUntil($mouseDragCancel), tap(e => {
                     this.checkOverscroll(e);
                 }), switchMap$1(e => {
-                    const { position, currentPos, endTime, scrollDelta } = this.calculatePosition(isVertical, e, inversion, startClientPos, startTime, prevClientPosition, offsets, velocities);
-                    prevClientPosition = currentPos;
+                    const { position: positionX, currentPos: currentPosX, endTime, scrollDelta: scrollDeltaX } = this.calculatePosition(false, true, this.horizontalAxisInvertion, e, inversion, startClientPosX, startTime, prevClientPositionX, offsetsX, velocitiesX), { position: positionY, currentPos: currentPosY, scrollDelta: scrollDeltaY } = this.calculatePosition(true, true, false, e, inversion, startClientPosY, startTime, prevClientPositionY, offsetsY, velocitiesY), position = isVertical ? positionY : positionX;
+                    prevClientPositionX = currentPosX;
+                    prevClientPositionY = currentPosY;
+                    this._scrollDirectionValueX += Math.abs(scrollDeltaX);
+                    this._scrollDirectionValueY += Math.abs(scrollDeltaY);
                     this.move(isVertical, position, true, true, true);
-                    const offset = Math.abs(position) - Math.abs(isVertical ? this._y : this._x), scrollSize = isVertical ? this.scrollHeight : this.scrollWidth, viewportSize = isVertical ? this._$viewportBounds.getValue().height : this._$viewportBounds.getValue().width;
-                    if (position >= (scrollSize - viewportSize * .5) || position <= 0) {
-                        startClientPos -= offset;
+                    if (this.isInfinity) {
+                        const offset = Math.abs(position) - Math.abs(isVertical ? this._y : this._x), scrollSize = isVertical ? this.scrollHeight : this.scrollWidth, viewportSize = isVertical ? this._$viewportBounds.getValue().height : this._$viewportBounds.getValue().width;
+                        if (position >= (scrollSize - viewportSize * .5) || position <= 0) {
+                            if (isVertical) {
+                                startClientPosY -= offset;
+                            }
+                            else {
+                                startClientPosX -= offset;
+                            }
+                        }
                     }
                     startTime = endTime;
                     return race([fromEvent(window, MOUSE_UP, { passive: false }), fromEvent(content, MOUSE_UP, { passive: false })]).pipe(takeUntil(this._$unsubscribe), takeUntil($mouseDragCancel), tap(e => {
                         mouseCanceled = true;
                         this.cancelOverscroll();
-                        const endTime = Date.now(), timestamp = endTime - startTime, { v0 } = this.calculateVelocity(offsets, scrollDelta, timestamp), { a0 } = this.calculateAcceleration(velocities, v0, timestamp);
+                        const endTime = Date.now(), timestamp = endTime - startTime, { v0 } = this.calculateVelocity(isVertical ? offsetsY : offsetsX, isVertical ? scrollDeltaY : scrollDeltaX, timestamp), { a0 } = this.calculateAcceleration(isVertical ? velocitiesY : velocitiesX, v0, timestamp);
                         this._isMoving = false;
                         this._$grabbing.next(false);
                         if (!this.snapIfNecessary(v0, false) && this.scrollBehavior !== BEHAVIOR_INSTANT) {
@@ -4784,7 +4861,10 @@ class NgScrollView extends BaseScrollView {
         $content.pipe(takeUntil(this._$unsubscribe), switchMap$1(content => {
             return fromEvent(content, TOUCH_START, { passive: false }).pipe(takeUntil(this._$unsubscribe), filter$1(() => this._interactive), switchMap$1(e => {
                 touchCanceled = false;
+                this._overscrollStartIteration = 0;
+                this._overscrollApplied = false;
                 this._scrollDirection.clear();
+                this._scrollDirectionValueX = this._scrollDirectionValueY = 0;
                 this.cancelOverscroll();
                 this.onDragStart();
                 this.stopScrolling(true);
@@ -4796,23 +4876,34 @@ class NgScrollView extends BaseScrollView {
                 const inversion = this._inversion, isVertical = this._$isVertical.getValue();
                 this._isMoving = true;
                 this._$grabbing.next(true);
-                this._startPosition = (isVertical ? this.y : this.x);
-                let prevClientPosition = isVertical ? e.touches[e.touches.length - 1].clientY : e.touches[e.touches.length - 1].clientX, startClientPos = prevClientPosition, offsets = new Array(), velocities = new Array(), startTime = Date.now();
+                this._startPositionX = this.x;
+                this._startPositionY = this.y;
+                let prevClientPositionX = (e.touches[e.touches.length - 1].clientX) * (this.horizontalAxisInvertion ? -1 : 1), prevClientPositionY = e.touches[e.touches.length - 1].clientY, startClientPosX = prevClientPositionX, startClientPosY = prevClientPositionY, offsetsX = new Array(), offsetsY = new Array(), velocitiesX = new Array(), velocitiesY = new Array(), startTime = Date.now();
                 return fromEvent(window, TOUCH_MOVE, { passive: false }).pipe(takeUntil(this._$unsubscribe), takeUntil($touchCanceler), tap(e => {
                     this.checkOverscroll(e);
                 }), switchMap$1(e => {
-                    const { position, currentPos, endTime, scrollDelta } = this.calculatePosition(isVertical, e, inversion, startClientPos, startTime, prevClientPosition, offsets, velocities);
-                    prevClientPosition = currentPos;
+                    const { position: positionX, currentPos: currentPosX, endTime, scrollDelta: scrollDeltaX } = this.calculatePosition(false, true, this.horizontalAxisInvertion, e, inversion, startClientPosX, startTime, prevClientPositionX, offsetsX, velocitiesX), { position: positionY, currentPos: currentPosY, scrollDelta: scrollDeltaY } = this.calculatePosition(true, true, false, e, inversion, startClientPosY, startTime, prevClientPositionY, offsetsY, velocitiesY), position = isVertical ? positionY : positionX;
+                    prevClientPositionX = currentPosX;
+                    prevClientPositionY = currentPosY;
+                    this._scrollDirectionValueX += Math.abs(scrollDeltaX);
+                    this._scrollDirectionValueY += Math.abs(scrollDeltaY);
                     this.move(isVertical, position, true, true, true);
-                    const offset = Math.abs(position) - Math.abs(isVertical ? this._y : this._x), scrollSize = isVertical ? this.scrollHeight : this.scrollWidth, viewportSize = isVertical ? this._$viewportBounds.getValue().height : this._$viewportBounds.getValue().width;
-                    if (position >= (scrollSize - viewportSize * .5) || position <= 0) {
-                        startClientPos -= offset;
+                    if (this.isInfinity) {
+                        const offset = Math.abs(position) - Math.abs(isVertical ? this._y : this._x), scrollSize = isVertical ? this.scrollHeight : this.scrollWidth, viewportSize = isVertical ? this._$viewportBounds.getValue().height : this._$viewportBounds.getValue().width;
+                        if (position >= (scrollSize - viewportSize * .5) || position <= 0) {
+                            if (isVertical) {
+                                startClientPosY -= offset;
+                            }
+                            else {
+                                startClientPosX -= offset;
+                            }
+                        }
                     }
                     startTime = endTime;
                     return race([fromEvent(window, TOUCH_END, { passive: false }), fromEvent(content, TOUCH_END, { passive: false })]).pipe(takeUntil(this._$unsubscribe), takeUntil($touchCanceler), tap(e => {
                         touchCanceled = true;
                         this.cancelOverscroll();
-                        const endTime = Date.now(), timestamp = endTime - startTime, { v0 } = this.calculateVelocity(offsets, scrollDelta, timestamp), { a0 } = this.calculateAcceleration(velocities, v0, timestamp);
+                        const endTime = Date.now(), timestamp = endTime - startTime, { v0 } = this.calculateVelocity(isVertical ? offsetsY : offsetsX, isVertical ? scrollDeltaY : scrollDeltaX, timestamp), { a0 } = this.calculateAcceleration(isVertical ? velocitiesY : velocitiesX, v0, timestamp);
                         this._isMoving = false;
                         this._$grabbing.next(false);
                         if (!this.snapIfNecessary(v0, false) && this.scrollBehavior !== BEHAVIOR_INSTANT) {
@@ -4894,8 +4985,11 @@ class NgScrollView extends BaseScrollView {
         }
         return false;
     }
-    calculatePosition(isVertical, e, inversion, startClientPos, startTime, prevClientPosition, offsets, velocities) {
-        const currentPos = isVertical ? e.touches?.[e.touches?.length - 1]?.clientY || e.clientY : e.touches?.[e.touches?.length - 1]?.clientX || e.clientX, scrollSize = isVertical ? this.scrollHeight : this.scrollWidth, delta = (inversion ? -1 : 1) * (startClientPos - currentPos), dp = this._startPosition + delta, position = this.isInfinity ? dp : dp < 0 ? 0 : dp > scrollSize ? scrollSize : dp, endTime = Date.now(), timestamp = endTime - startTime, scrollDelta = prevClientPosition === 0 ? 0 : prevClientPosition - currentPos, { v0 } = this.calculateVelocity(offsets, scrollDelta, timestamp);
+    calculatePosition(isVertical, enabled, axisInversion, e, inversion, startClientPos, startTime, prevClientPosition, offsets, velocities) {
+        if (!enabled) {
+            return { position: isVertical ? this._y : this._x, currentPos: null, endTime: Date.now(), scrollDelta: 0 };
+        }
+        const currentPos = (isVertical ? e.touches?.[e.touches?.length - 1]?.clientY || e.clientY : e.touches?.[e.touches?.length - 1]?.clientX || e.clientX) * (axisInversion ? -1 : 1), scrollSize = isVertical ? this.scrollHeight : this.scrollWidth, delta = (inversion ? -1 : 1) * (startClientPos - currentPos), dp = (isVertical ? this._startPositionY : this._startPositionX) + delta, position = this.isInfinity ? dp : dp < 0 ? 0 : dp > scrollSize ? scrollSize : dp, endTime = Date.now(), timestamp = endTime - startTime, scrollDelta = (prevClientPosition === 0 || prevClientPosition === null) ? 0 : prevClientPosition - currentPos, { v0 } = this.calculateVelocity(offsets, scrollDelta, timestamp);
         this.calculateAcceleration(velocities, v0, timestamp);
         return { position, currentPos, endTime, scrollDelta };
     }
@@ -4924,7 +5018,7 @@ class NgScrollView extends BaseScrollView {
             }
         }
     }
-    checkOverscroll(e) {
+    checkOverscroll(e, wheel = false) {
         if (!this._overscrollEnabled || !this.overscrollEnabled) {
             if (e.cancelable) {
                 e.stopImmediatePropagation();
@@ -4934,14 +5028,35 @@ class NgScrollView extends BaseScrollView {
         }
         if (this._overscrollEnabled) {
             if (this._$isVertical.getValue()) {
-                this.checkOverscrollByAxis(e, this._y, this.scrollHeight);
+                if (this._overscrollStartIteration < OVERSCROLL_START_ITERATION) {
+                    this._overscrollStartIteration++;
+                    this.checkOverscrollByAxis(e, this._y, this.scrollHeight);
+                }
+                else {
+                    if (wheel || this._overscrollApplied || this._scrollDirectionValueY > this._scrollDirectionValueX) {
+                        this._overscrollApplied = true;
+                        this.checkOverscrollByAxis(e, this._y, this.scrollHeight);
+                    }
+                }
             }
             else {
-                this.checkOverscrollByAxis(e, this._x, this.scrollWidth);
+                if (this._overscrollStartIteration < OVERSCROLL_START_ITERATION) {
+                    this._overscrollStartIteration++;
+                    this.checkOverscrollByAxis(e, this._x, this.scrollWidth);
+                }
+                else {
+                    if (wheel || this._overscrollApplied || this._scrollDirectionValueX > this._scrollDirectionValueY) {
+                        this._overscrollApplied = true;
+                        this.checkOverscrollByAxis(e, this._x, this.scrollWidth);
+                    }
+                }
             }
         }
     }
     calculateVelocity(offsets, delta, timestamp, indexOffset = 10) {
+        if (offsets.length > MAX_VELOCITIES_LENGTH) {
+            offsets.shift();
+        }
         offsets.push([delta, timestamp < ANIMATOR_MIN_TIMESTAMP ? ANIMATOR_MIN_TIMESTAMP : timestamp]);
         const len = offsets.length, startIndex = len > indexOffset ? len - indexOffset : 0, lastVSign = calculateDirection(offsets), speedScale = this.scrollingSettings?.speedScale ?? SPEED_SCALE;
         let vSum = 0;
@@ -4957,7 +5072,10 @@ class NgScrollView extends BaseScrollView {
         return { v0 };
     }
     calculateAcceleration(velocities, delta, timestamp, indexOffset = 10) {
-        velocities.push([delta, timestamp < ANIMATOR_MIN_TIMESTAMP ? ANIMATOR_MIN_TIMESTAMP : timestamp]);
+        if (velocities.length > MAX_VELOCITIES_LENGTH) {
+            velocities.shift();
+        }
+        velocities.push([Math.abs(delta) < MIN_DELTA ? 0 : delta, timestamp < ANIMATOR_MIN_TIMESTAMP ? ANIMATOR_MIN_TIMESTAMP : timestamp]);
         const len = velocities.length, startIndex = len > indexOffset ? len - indexOffset : 0;
         let aSum = 0, prevV0, iteration = 0, lastVSign = calculateDirection(velocities);
         const mass = this.scrollingSettings?.mass ?? MASS;
@@ -4975,7 +5093,7 @@ class NgScrollView extends BaseScrollView {
             iteration++;
         }
         const a0 = aSum * (this.scrollingSettings?.frictionalForce ?? FRICTION_FORCE);
-        return { a0 };
+        return { a0: Math.abs(a0) < MIN_ACCELERATION ? 0 : a0 };
     }
     stopScrolling(force = false) {
         if (this._isAlignmentAnimation && !force) {
@@ -4985,7 +5103,7 @@ class NgScrollView extends BaseScrollView {
         this._animator.stop();
     }
     move(isVertical, position, blending = false, userAction = false, fireUpdate = true) {
-        this.scroll({ [isVertical ? TOP$1 : LEFT$1]: position, behavior: INSTANT$1, blending, userAction, fireUpdate });
+        this.scroll({ [isVertical ? TOP$1 : LEFT$2]: position, behavior: INSTANT$1, blending, userAction, fireUpdate });
     }
     moveWithAcceleration(isVertical, position, v0, v, a0, timestamp) {
         if (a0 !== 0 && timestamp < MAX_VELOCITY_TIMESTAMP) {
@@ -5281,7 +5399,7 @@ class NgScrollView extends BaseScrollView {
     }
     refreshCoordinate(x, y) {
         const scrollContent = this.scrollContent?.nativeElement;
-        scrollContent.style.transform = matrix3d((this._inversion ? 1 : -1) * x + (this._$isVertical.getValue() ? 0 : this._startLayoutOffset), (this._inversion ? 1 : -1) * y + (this._$isVertical.getValue() ? this._startLayoutOffset : 0));
+        scrollContent.style.transform = matrix3d((this._inversion ? 1 : -1) * x * (this.horizontalAxisInvertion ? -1 : 1) + (this._$isVertical.getValue() ? 0 : this._startLayoutOffset), (this._inversion ? 1 : -1) * y + (this._$isVertical.getValue() ? this._startLayoutOffset : 0));
     }
     fireScrollEvent(userAction) {
         this._$scroll.next(userAction);
@@ -5390,7 +5508,7 @@ class NgScrollBarComponent extends NgScrollView {
             this._$scrollbarMinSize.next(v);
         }
     }
-    get scrollbarMinSize() { return this._$endOffset.getValue(); }
+    get scrollbarMinSize() { return this._$scrollbarMinSize.getValue(); }
     _$prepared = new BehaviorSubject(false);
     $prepared = this._$prepared.asObservable();
     set prepared(v) {
@@ -5399,14 +5517,6 @@ class NgScrollBarComponent extends NgScrollView {
         }
     }
     get prepared() { return this._$prepared.getValue(); }
-    _$langTextDir = new BehaviorSubject(DEFAULT_LANG_TEXT_DIR);
-    $langTextDir = this._$langTextDir.asObservable();
-    set langTextDir(v) {
-        if (this._$langTextDir.getValue() !== v) {
-            this._$langTextDir.next(v);
-        }
-    }
-    get langTextDir() { return this._$langTextDir.getValue(); }
     _$interactive = new BehaviorSubject(DEFAULT_SCROLLBAR_INTERACTIVE);
     $interactive = this._$interactive.asObservable();
     set interactive(v) {
@@ -5549,7 +5659,7 @@ class NgScrollBarComponent extends NgScrollView {
             const el = this._elementRef.nativeElement;
             if (!!el) {
                 el.style[POSITION$1] = overlapping ? POSITION_ABSOLUTE : POSITION_RELATIVE;
-                el.style[LEFT$2] = overlapping && langTextDir === TextDirections.RTL ? '0' : UNSET$5;
+                el.style[LEFT$3] = overlapping && langTextDir === TextDirections.RTL ? '0' : UNSET$5;
                 el.style[RIGHT$1] = overlapping && langTextDir === TextDirections.LTR ? '0' : UNSET$5;
                 el.style[WIDTH] = overlapping ? SIZE_AUTO : SIZE_100_PERSENT;
             }
@@ -5573,7 +5683,7 @@ class NgScrollBarComponent extends NgScrollView {
         })).subscribe();
     }
     createDragEvent(userAction) {
-        const isVertical = this._$isVertical.getValue(), 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;
+        const isVertical = this._$isVertical.getValue(), scrollSize = isVertical ? this.scrollHeight : this.scrollWidth, scrollPosition = isVertical ? this.y : this.x, 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, offsetSize = (scrollSize !== 0 ? (startOffset / scrollSize) : 0), positionSize = (scrollSize !== 0 ? (scrollPosition / scrollSize) : 0), maxSize = 1 - offsetSize, pos = (positionSize - offsetSize);
             const event = {
@@ -5601,7 +5711,7 @@ class NgScrollBarComponent extends NgScrollView {
         this._scrollBarService.click(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgScrollBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgScrollBarComponent, selector: "ng-scroll-bar", inputs: { loading: "loading", thumbGradientPositions: "thumbGradientPositions", size: "size", thickness: "thickness", scrollbarMinSize: "scrollbarMinSize", prepared: "prepared", langTextDir: "langTextDir", interactive: "interactive", overlapping: "overlapping", show: "show", params: "params", renderer: "renderer" }, outputs: { onDrag: "onDrag", onDragEnd: "onDragEnd" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgScrollBarComponent, selector: "ng-scroll-bar", inputs: { loading: "loading", thumbGradientPositions: "thumbGradientPositions", size: "size", thickness: "thickness", scrollbarMinSize: "scrollbarMinSize", prepared: "prepared", interactive: "interactive", overlapping: "overlapping", show: "show", params: "params", renderer: "renderer" }, outputs: { onDrag: "onDrag", onDragEnd: "onDragEnd" }, providers: [
             { provide: SCROLL_VIEW_INVERSION, useValue: true },
             { provide: SCROLL_VIEW_NORMALIZE_VALUE_FROM_ZERO, useValue: false },
             { provide: SCROLL_VIEW_OVERSCROLL_ENABLED, useValue: false },
@@ -5637,8 +5747,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], prepared: [{
                 type: Input
-            }], langTextDir: [{
-                type: Input
             }], interactive: [{
                 type: Input
             }], overlapping: [{
@@ -5651,7 +5759,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
-const RIGHT = 'right', DIR = 'dir';
+const LEFT$1 = 'left', RIGHT = 'right', DIR = 'dir';
 /**
  * LocaleSensitiveDirective
  * Maximum performance for extremely large lists.
@@ -5679,14 +5787,15 @@ class LocaleSensitiveDirective {
         this._elementRef = _elementRef;
         const $langTextDir = this.$langTextDir, $listDir = this.$listDir;
         combineLatest([$langTextDir, $listDir]).pipe(takeUntil(this._$unsubscribe), tap(([dir, listDir]) => {
-            const element = this._elementRef.nativeElement, isVertical = isDirection(listDir, ScrollerDirection$1.VERTICAL);
-            element.setAttribute(DIR, isVertical ? dir : TextDirections.LTR);
-            if (dir === TextDirections.RTL && isVertical) {
+            const element = this._elementRef.nativeElement;
+            element.setAttribute(DIR, dir);
+            if (dir === TextDirections.RTL) {
                 element.style.textAlign = RIGHT;
                 element.classList.add(TextDirections.RTL);
                 element.classList.remove(TextDirections.LTR);
             }
             else {
+                element.style.textAlign = LEFT$1;
                 element.classList.add(TextDirections.LTR);
                 element.classList.remove(TextDirections.RTL);
             }
@@ -5857,8 +5966,6 @@ class NgScrollerComponent extends NgScrollView {
     $show = this._$show.asObservable();
     _$preparedSignal = new BehaviorSubject(false);
     $preparedSignal = this._$preparedSignal.asObservable();
-    _$langTextDir = new BehaviorSubject(TextDirections.LTR);
-    $langTextDir = this._$langTextDir.asObservable();
     _$listStyles = new BehaviorSubject({ perspectiveOrigin: 'center' });
     $listStyles = this._$listStyles.asObservable();
     _scrollBox = new ScrollBox$1();
@@ -5933,6 +6040,13 @@ class NgScrollerComponent extends NgScrollView {
     }
     ngAfterViewInit() {
         super.ngAfterViewInit();
+        this.$resizeViewport.pipe(takeUntil(this._$unsubscribe), debounceTime(0), tap(() => {
+            this.snapIfNeed();
+        }), switchMap$1(() => {
+            return this.$scroll.pipe(takeUntil(this._$unsubscribe), take(1), tap(() => {
+                this.snapIfNeed();
+            }));
+        })).subscribe();
         const $filter = of(this.filter), $motionBlur = this.$motionBlur, $maxMotionBlur = this.$maxMotionBlur, $motionBlurEnabled = this.$motionBlurEnabled, $isVertical = this.$isVertical;
         const $scrollbarScroll = this.$scrollbarScroll;
         $scrollbarScroll.pipe(takeUntil(this._$unsubscribe), debounceTime(50), tap(() => {
@@ -5946,9 +6060,6 @@ class NgScrollerComponent extends NgScrollView {
         }), debounceTime(50), tap(([, , filter, ,]) => {
             filter.nativeElement.setStdDeviation(0, 0);
         })).subscribe();
-        this._service.$langTextDir.pipe(takeUntil(this._$unsubscribe), debounceTime(0), tap(v => {
-            this._$langTextDir.next(v);
-        })).subscribe();
         const $prepare = this.$preparedSignal;
         $prepare.pipe(takeUntil(this._$unsubscribe), filter$1(v => !!v), tap(() => {
             this.updateScrollBarHandler(true, false, true);
@@ -5988,9 +6099,9 @@ class NgScrollerComponent extends NgScrollView {
         this._$viewInitialized.next(true);
     }
     recalculatePerspective() {
-        const isVertical = this._$isVertical.getValue(), scrollSize = (isVertical ? this.scrollTop : this.scrollLeft) - this._startLayoutOffset, { width, height } = this._$viewportBounds.getValue();
+        const isVertical = this._$isVertical.getValue(), inverted = this.horizontalAxisInvertion, scrollSize = (isVertical ? this.scrollTop : this.scrollLeft) - this._startLayoutOffset, maxScrollSize = isVertical ? this.scrollHeight : this.scrollWidth, { width, height } = this._$viewportBounds.getValue();
         this._$listStyles.next({
-            perspectiveOrigin: `${isVertical ? width * .5 : (scrollSize + width * .5)}${PX$1} ${isVertical ? (scrollSize + height * .5) : height * .5}${PX$1}`
+            perspectiveOrigin: `${isVertical ? width * .5 : (inverted ? ((maxScrollSize - scrollSize) + width * .5 - this.startOffset) : (scrollSize + width * .5))}${PX$1} ${isVertical ? (inverted ? ((maxScrollSize - scrollSize) + height * .5) : (scrollSize + height * .5)) : height * .5}${PX$1}`
         });
     }
     onResizeViewport() {
@@ -6003,6 +6114,7 @@ class NgScrollerComponent extends NgScrollView {
             this._$viewportBounds.next(bounds);
             this.updateScrollBar();
             this._$resizeViewport.next(bounds);
+            this.recalculatePerspective();
         }
     }
     onResizeContent(value = null) {
@@ -6018,6 +6130,7 @@ class NgScrollerComponent extends NgScrollView {
             this._$contentBounds.next(bounds);
             this.updateScrollBar();
             this._$resizeContent.next(bounds);
+            this.recalculatePerspective();
         }
     }
     updateScrollBarHandler(update = false, blending = true, fireUpdate = false) {
@@ -6182,7 +6295,7 @@ class NgScrollerComponent extends NgScrollView {
             { provide: SCROLL_VIEW_INVERSION, useValue: false },
             { provide: SCROLL_VIEW_NORMALIZE_VALUE_FROM_ZERO, useValue: true },
             { provide: SCROLL_VIEW_OVERSCROLL_ENABLED, useValue: true },
-        ], viewQueries: [{ propertyName: "scrollBar", first: true, predicate: ["scrollBar"], descendants: true, read: NgScrollBarComponent }, { propertyName: "filter", first: true, predicate: ["filter"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div localeSensitive [langTextDir]=\"($langTextDir | async)!\" [listDir]=\"($direction | async)!\" class=\"ngvl__container\"\r\n    [ngClass]=\"($containerClasses | async)!\">\r\n    <svg part=\"viewport\" width=\"100%\" height=\"100%\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n        <filter [id]=\"_filterId\">\r\n            <feGaussianBlur #filter></feGaussianBlur>\r\n        </filter>\r\n        <foreignObject xmlns=\"http://www.w3.org/1999/xhtml\" width=\"100%\" height=\"100%\" class=\"ngvl__viewport\">\r\n            <div class=\"ngvl__scroller-wrapper\" [class.filtered]=\"($motionBlurEnabled | async)!\" [style.filter]=\"($motionBlurEnabled | async)! ? _filter : 'unset'\">\r\n                <div cdkScrollable #scrollViewport part=\"scroller\" class=\"ngvl__scroller\">\r\n                    <div #scrollContent [attr.aria-orientation]=\"($direction | async)!\"\r\n                        [attr.aria-activedescendant]=\"$focusedElement | async\" tabindex=\"0\" part=\"list\" class=\"ngvl__list\"\r\n                        [ngClass]=\"($actualClasses | async)!\" [ngStyle]=\"($listStyles | async)!\">\r\n                        <ng-content></ng-content>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </foreignObject>\r\n    </svg>\r\n    <ng-container *ngIf=\"($scrollbarEnabled | async)!\">\r\n        <ng-scroll-bar #scrollBar [direction]=\"($direction | async)!\" [size]=\"($actualThumbSize | async)!\" [renderer]=\"($scrollbarThumbRenderer | async)!\"\r\n            [thickness]=\"($scrollbarThickness | async)!\" [params]=\"($scrollbarThumbParams | async)!\" [loading]=\"($loading | async)!\" [overlapping]=\"($overlappingScrollbar | async)!\"\r\n            [thumbGradientPositions]=\"($thumbColorPositions | async)!\" [prepared]=\"($preparedSignal | async)!\" [interactive]=\"($scrollbarInteractive | async)!\"\r\n            [show]=\"($show | async)!\" [startOffset]=\"($startOffset | async)!\" [langTextDir]=\"($langTextDir | async)!\"\r\n            [endOffset]=\"($endOffset | async)!\" [overscrollEnabled]=\"($overscrollEnabled | async)!\" [scrollBehavior]=\"($scrollBehavior | async)!\"\r\n            [scrollbarMinSize]=\"($scrollbarMinSize | async)!\" (onDrag)=\"onScrollBarDragHandler($event)\"\r\n            (onDragEnd)=\"onScrollBarDragEndHandler($event)\"></ng-scroll-bar>\r\n    </ng-container>\r\n</div>", styles: [":host{position:relative;overflow:hidden;-webkit-user-select:none;user-select:none}.ngvl__container{position:relative;overflow:hidden;display:grid;width:100%;height:100%;cursor:grab}.ngvl__container.overlapping{position:relative;display:block}.ngvl__container.grabbing{cursor:grabbing}.ngvl__container.horizontal{transition:grid-template-rows .1s ease-out}.ngvl__container.horizontal:not(.overlapping){grid-template-rows:1fr 0}.ngvl__container.horizontal.scrollable.enabled:not(.overlapping){grid-template-rows:1fr auto}.ngvl__container.horizontal .ngvl__list{display:inline-flex}.ngvl__container.horizontal .ngvl__scroller-wrapper.filtered,.ngvl__container.horizontal .ngvl__scroller{overflow:unset}.ngvl__container.vertical{transition:grid-template-columns .1s ease-out}.ngvl__container.vertical:not(.overlapping){grid-template-columns:1fr 0}.ngvl__container.vertical.scrollable.enabled:not(.overlapping){grid-template-columns:1fr auto}.ngvl__container.vertical .ngvl__scroller-wrapper.filtered,.ngvl__container.vertical .ngvl__scroller{overflow:unset}.ngvl__container .ngvl__scroller-wrapper,.ngvl__container .ngvl__scroller{display:block;position:relative;overflow:hidden;width:100%;height:100%}.ngvl__container .ngvl__list{position:absolute;list-style:none;padding:0;margin:0;width:100%;height:100%;opacity:0}.ngvl__container .ngvl__list.prepared{opacity:1}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NgScrollBarComponent, selector: "ng-scroll-bar", inputs: ["loading", "thumbGradientPositions", "size", "thickness", "scrollbarMinSize", "prepared", "langTextDir", "interactive", "overlapping", "show", "params", "renderer"], outputs: ["onDrag", "onDragEnd"] }, { kind: "directive", type: LocaleSensitiveDirective, selector: "[localeSensitive]", inputs: ["langTextDir", "listDir"] }, { kind: "directive", type: i4.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+        ], viewQueries: [{ propertyName: "scrollBar", first: true, predicate: ["scrollBar"], descendants: true, read: NgScrollBarComponent }, { propertyName: "filter", first: true, predicate: ["filter"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div localeSensitive [langTextDir]=\"($langTextDir | async)!\" [listDir]=\"($direction | async)!\" class=\"ngvl__container\"\r\n    [ngClass]=\"($containerClasses | async)!\">\r\n    <svg part=\"viewport\" width=\"100%\" height=\"100%\" xmlns=\"http://www.w3.org/2000/svg\"\r\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n        <filter [id]=\"_filterId\">\r\n            <feGaussianBlur #filter></feGaussianBlur>\r\n        </filter>\r\n        <foreignObject xmlns=\"http://www.w3.org/1999/xhtml\" width=\"100%\" height=\"100%\" class=\"ngvl__viewport\">\r\n            <div class=\"ngvl__scroller-wrapper\" [class.filtered]=\"($motionBlurEnabled | async)!\"\r\n                [style.filter]=\"($motionBlurEnabled | async)! ? _filter : 'unset'\">\r\n                <div cdkScrollable #scrollViewport part=\"scroller\" class=\"ngvl__scroller\">\r\n                    <div #scrollContent [attr.aria-orientation]=\"($direction | async)!\"\r\n                        [attr.aria-activedescendant]=\"$focusedElement | async\" tabindex=\"0\" part=\"list\"\r\n                        class=\"ngvl__list\" [ngClass]=\"($actualClasses | async)!\" [ngStyle]=\"($listStyles | async)!\">\r\n                        <ng-content></ng-content>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </foreignObject>\r\n    </svg>\r\n    <ng-container *ngIf=\"($scrollbarEnabled | async)!\">\r\n        <ng-scroll-bar #scrollBar [direction]=\"($direction | async)!\" [size]=\"($actualThumbSize | async)!\"\r\n            [langTextDir]=\"($langTextDir | async)!\" [renderer]=\"($scrollbarThumbRenderer | async)!\"\r\n            [thickness]=\"($scrollbarThickness | async)!\" [params]=\"($scrollbarThumbParams | async)!\"\r\n            [loading]=\"($loading | async)!\" [overlapping]=\"($overlappingScrollbar | async)!\"\r\n            [thumbGradientPositions]=\"($thumbColorPositions | async)!\" [prepared]=\"($preparedSignal | async)!\"\r\n            [interactive]=\"($scrollbarInteractive | async)!\" [show]=\"($show | async)!\"\r\n            [startOffset]=\"($startOffset | async)!\" [langTextDir]=\"($langTextDir | async)!\"\r\n            [endOffset]=\"($endOffset | async)!\" [overscrollEnabled]=\"($overscrollEnabled | async)!\"\r\n            [scrollBehavior]=\"($scrollBehavior | async)!\" [scrollbarMinSize]=\"($scrollbarMinSize | async)!\"\r\n            (onDrag)=\"onScrollBarDragHandler($event)\" (onDragEnd)=\"onScrollBarDragEndHandler($event)\"></ng-scroll-bar>\r\n    </ng-container>\r\n</div>", styles: [":host{position:relative;overflow:hidden;-webkit-user-select:none;user-select:none}.ngvl__container{position:relative;overflow:hidden;display:grid;width:100%;height:100%;cursor:grab}.ngvl__container.overlapping{position:relative;display:block}.ngvl__container.grabbing{cursor:grabbing}.ngvl__container.horizontal{transition:grid-template-rows .1s ease-out}.ngvl__container.horizontal:not(.overlapping){grid-template-rows:1fr 0}.ngvl__container.horizontal.scrollable.enabled:not(.overlapping){grid-template-rows:1fr auto}.ngvl__container.horizontal .ngvl__list{display:inline-flex}.ngvl__container.horizontal .ngvl__scroller-wrapper.filtered,.ngvl__container.horizontal .ngvl__scroller{overflow:unset}.ngvl__container.vertical{transition:grid-template-columns .1s ease-out}.ngvl__container.vertical:not(.overlapping){grid-template-columns:1fr 0}.ngvl__container.vertical.scrollable.enabled:not(.overlapping){grid-template-columns:1fr auto}.ngvl__container.vertical .ngvl__scroller-wrapper.filtered,.ngvl__container.vertical .ngvl__scroller{overflow:unset}.ngvl__container .ngvl__scroller-wrapper,.ngvl__container .ngvl__scroller{display:block;position:relative;overflow:hidden;width:100%;height:100%}.ngvl__container .ngvl__list{position:absolute;list-style:none;padding:0;margin:0;width:100%;height:100%;opacity:0}.ngvl__container .ngvl__list.prepared{opacity:1}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NgScrollBarComponent, selector: "ng-scroll-bar", inputs: ["loading", "thumbGradientPositions", "size", "thickness", "scrollbarMinSize", "prepared", "interactive", "overlapping", "show", "params", "renderer"], outputs: ["onDrag", "onDragEnd"] }, { kind: "directive", type: LocaleSensitiveDirective, selector: "[localeSensitive]", inputs: ["langTextDir", "listDir"] }, { kind: "directive", type: i4.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgScrollerComponent, decorators: [{
             type: Component,
@@ -6190,7 +6303,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         { provide: SCROLL_VIEW_INVERSION, useValue: false },
                         { provide: SCROLL_VIEW_NORMALIZE_VALUE_FROM_ZERO, useValue: true },
                         { provide: SCROLL_VIEW_OVERSCROLL_ENABLED, useValue: true },
-                    ], standalone: false, template: "<div localeSensitive [langTextDir]=\"($langTextDir | async)!\" [listDir]=\"($direction | async)!\" class=\"ngvl__container\"\r\n    [ngClass]=\"($containerClasses | async)!\">\r\n    <svg part=\"viewport\" width=\"100%\" height=\"100%\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n        <filter [id]=\"_filterId\">\r\n            <feGaussianBlur #filter></feGaussianBlur>\r\n        </filter>\r\n        <foreignObject xmlns=\"http://www.w3.org/1999/xhtml\" width=\"100%\" height=\"100%\" class=\"ngvl__viewport\">\r\n            <div class=\"ngvl__scroller-wrapper\" [class.filtered]=\"($motionBlurEnabled | async)!\" [style.filter]=\"($motionBlurEnabled | async)! ? _filter : 'unset'\">\r\n                <div cdkScrollable #scrollViewport part=\"scroller\" class=\"ngvl__scroller\">\r\n                    <div #scrollContent [attr.aria-orientation]=\"($direction | async)!\"\r\n                        [attr.aria-activedescendant]=\"$focusedElement | async\" tabindex=\"0\" part=\"list\" class=\"ngvl__list\"\r\n                        [ngClass]=\"($actualClasses | async)!\" [ngStyle]=\"($listStyles | async)!\">\r\n                        <ng-content></ng-content>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </foreignObject>\r\n    </svg>\r\n    <ng-container *ngIf=\"($scrollbarEnabled | async)!\">\r\n        <ng-scroll-bar #scrollBar [direction]=\"($direction | async)!\" [size]=\"($actualThumbSize | async)!\" [renderer]=\"($scrollbarThumbRenderer | async)!\"\r\n            [thickness]=\"($scrollbarThickness | async)!\" [params]=\"($scrollbarThumbParams | async)!\" [loading]=\"($loading | async)!\" [overlapping]=\"($overlappingScrollbar | async)!\"\r\n            [thumbGradientPositions]=\"($thumbColorPositions | async)!\" [prepared]=\"($preparedSignal | async)!\" [interactive]=\"($scrollbarInteractive | async)!\"\r\n            [show]=\"($show | async)!\" [startOffset]=\"($startOffset | async)!\" [langTextDir]=\"($langTextDir | async)!\"\r\n            [endOffset]=\"($endOffset | async)!\" [overscrollEnabled]=\"($overscrollEnabled | async)!\" [scrollBehavior]=\"($scrollBehavior | async)!\"\r\n            [scrollbarMinSize]=\"($scrollbarMinSize | async)!\" (onDrag)=\"onScrollBarDragHandler($event)\"\r\n            (onDragEnd)=\"onScrollBarDragEndHandler($event)\"></ng-scroll-bar>\r\n    </ng-container>\r\n</div>", styles: [":host{position:relative;overflow:hidden;-webkit-user-select:none;user-select:none}.ngvl__container{position:relative;overflow:hidden;display:grid;width:100%;height:100%;cursor:grab}.ngvl__container.overlapping{position:relative;display:block}.ngvl__container.grabbing{cursor:grabbing}.ngvl__container.horizontal{transition:grid-template-rows .1s ease-out}.ngvl__container.horizontal:not(.overlapping){grid-template-rows:1fr 0}.ngvl__container.horizontal.scrollable.enabled:not(.overlapping){grid-template-rows:1fr auto}.ngvl__container.horizontal .ngvl__list{display:inline-flex}.ngvl__container.horizontal .ngvl__scroller-wrapper.filtered,.ngvl__container.horizontal .ngvl__scroller{overflow:unset}.ngvl__container.vertical{transition:grid-template-columns .1s ease-out}.ngvl__container.vertical:not(.overlapping){grid-template-columns:1fr 0}.ngvl__container.vertical.scrollable.enabled:not(.overlapping){grid-template-columns:1fr auto}.ngvl__container.vertical .ngvl__scroller-wrapper.filtered,.ngvl__container.vertical .ngvl__scroller{overflow:unset}.ngvl__container .ngvl__scroller-wrapper,.ngvl__container .ngvl__scroller{display:block;position:relative;overflow:hidden;width:100%;height:100%}.ngvl__container .ngvl__list{position:absolute;list-style:none;padding:0;margin:0;width:100%;height:100%;opacity:0}.ngvl__container .ngvl__list.prepared{opacity:1}\n"] }]
+                    ], standalone: false, template: "<div localeSensitive [langTextDir]=\"($langTextDir | async)!\" [listDir]=\"($direction | async)!\" class=\"ngvl__container\"\r\n    [ngClass]=\"($containerClasses | async)!\">\r\n    <svg part=\"viewport\" width=\"100%\" height=\"100%\" xmlns=\"http://www.w3.org/2000/svg\"\r\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n        <filter [id]=\"_filterId\">\r\n            <feGaussianBlur #filter></feGaussianBlur>\r\n        </filter>\r\n        <foreignObject xmlns=\"http://www.w3.org/1999/xhtml\" width=\"100%\" height=\"100%\" class=\"ngvl__viewport\">\r\n            <div class=\"ngvl__scroller-wrapper\" [class.filtered]=\"($motionBlurEnabled | async)!\"\r\n                [style.filter]=\"($motionBlurEnabled | async)! ? _filter : 'unset'\">\r\n                <div cdkScrollable #scrollViewport part=\"scroller\" class=\"ngvl__scroller\">\r\n                    <div #scrollContent [attr.aria-orientation]=\"($direction | async)!\"\r\n                        [attr.aria-activedescendant]=\"$focusedElement | async\" tabindex=\"0\" part=\"list\"\r\n                        class=\"ngvl__list\" [ngClass]=\"($actualClasses | async)!\" [ngStyle]=\"($listStyles | async)!\">\r\n                        <ng-content></ng-content>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </foreignObject>\r\n    </svg>\r\n    <ng-container *ngIf=\"($scrollbarEnabled | async)!\">\r\n        <ng-scroll-bar #scrollBar [direction]=\"($direction | async)!\" [size]=\"($actualThumbSize | async)!\"\r\n            [langTextDir]=\"($langTextDir | async)!\" [renderer]=\"($scrollbarThumbRenderer | async)!\"\r\n            [thickness]=\"($scrollbarThickness | async)!\" [params]=\"($scrollbarThumbParams | async)!\"\r\n            [loading]=\"($loading | async)!\" [overlapping]=\"($overlappingScrollbar | async)!\"\r\n            [thumbGradientPositions]=\"($thumbColorPositions | async)!\" [prepared]=\"($preparedSignal | async)!\"\r\n            [interactive]=\"($scrollbarInteractive | async)!\" [show]=\"($show | async)!\"\r\n            [startOffset]=\"($startOffset | async)!\" [langTextDir]=\"($langTextDir | async)!\"\r\n            [endOffset]=\"($endOffset | async)!\" [overscrollEnabled]=\"($overscrollEnabled | async)!\"\r\n            [scrollBehavior]=\"($scrollBehavior | async)!\" [scrollbarMinSize]=\"($scrollbarMinSize | async)!\"\r\n            (onDrag)=\"onScrollBarDragHandler($event)\" (onDragEnd)=\"onScrollBarDragEndHandler($event)\"></ng-scroll-bar>\r\n    </ng-container>\r\n</div>", styles: [":host{position:relative;overflow:hidden;-webkit-user-select:none;user-select:none}.ngvl__container{position:relative;overflow:hidden;display:grid;width:100%;height:100%;cursor:grab}.ngvl__container.overlapping{position:relative;display:block}.ngvl__container.grabbing{cursor:grabbing}.ngvl__container.horizontal{transition:grid-template-rows .1s ease-out}.ngvl__container.horizontal:not(.overlapping){grid-template-rows:1fr 0}.ngvl__container.horizontal.scrollable.enabled:not(.overlapping){grid-template-rows:1fr auto}.ngvl__container.horizontal .ngvl__list{display:inline-flex}.ngvl__container.horizontal .ngvl__scroller-wrapper.filtered,.ngvl__container.horizontal .ngvl__scroller{overflow:unset}.ngvl__container.vertical{transition:grid-template-columns .1s ease-out}.ngvl__container.vertical:not(.overlapping){grid-template-columns:1fr 0}.ngvl__container.vertical.scrollable.enabled:not(.overlapping){grid-template-columns:1fr auto}.ngvl__container.vertical .ngvl__scroller-wrapper.filtered,.ngvl__container.vertical .ngvl__scroller{overflow:unset}.ngvl__container .ngvl__scroller-wrapper,.ngvl__container .ngvl__scroller{display:block;position:relative;overflow:hidden;width:100%;height:100%}.ngvl__container .ngvl__list{position:absolute;list-style:none;padding:0;margin:0;width:100%;height:100%;opacity:0}.ngvl__container .ngvl__list.prepared{opacity:1}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { scrollBar: [{
                 type: ViewChild,
                 args: ['scrollBar', { read: NgScrollBarComponent }]
@@ -6243,6 +6356,7 @@ const createItemData = (data, isVertical, bounds, boundsSize, dynamic, divides,
         measures: {
             position: 0,
             scrollSize: 0,
+            maxScrollSize: 0,
             size: itemSize,
             row: {
                 size: itemSize,
@@ -6302,6 +6416,7 @@ const createItemData = (data, isVertical, bounds, boundsSize, dynamic, divides,
             fullSize: false,
             layoutIndexOffset: 0,
             totalItems: 0,
+            inverted: false,
         },
     };
 };
@@ -6526,8 +6641,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class NgPrerenderScrollerComponent extends BaseScrollView {
     scrollBar;
-    _$langTextDir = new BehaviorSubject(TextDirections.LTR);
-    $langTextDir = this._$langTextDir.asObservable();
     _$scrollbarEnabled = new BehaviorSubject(DEFAULT_SCROLLBAR_ENABLED);
     $scrollbarEnabled = this._$scrollbarEnabled.asObservable();
     set scrollbarEnabled(v) {
@@ -7311,16 +7424,6 @@ class NgVirtualListComponent extends DisposableComponent {
     }
     ;
     get scrollbarThumbParams() { return this._$scrollbarThumbParams.getValue(); }
-    _loading = {
-        transform: (v) => {
-            const valid = validateBoolean(v);
-            if (!valid) {
-                console.error('The "loading" parameter must be of type `boolean`.');
-                return false;
-            }
-            return v;
-        },
-    };
     _$loading = new BehaviorSubject(false);
     $loading = this._$loading.asObservable();
     _loadingTransform = (v) => {
@@ -8074,9 +8177,9 @@ class NgVirtualListComponent extends DisposableComponent {
         const valid = validateFloat(v);
         if (!valid) {
             console.error('The "motionBlur" parameter must be of type `number`.');
-            return DEFAULT_DIVIDES;
+            return DEFAULT_MOTION_BLUR;
         }
-        return v <= 0 ? DEFAULT_DIVIDES : v;
+        return v <= 0 ? DEFAULT_MOTION_BLUR : v;
     };
     /**
      * Motion blur effect. The default value is `0.15`.
@@ -8742,19 +8845,22 @@ class NgVirtualListComponent extends DisposableComponent {
         }
         const scroller = this._scrollerComponent;
         if (!!scroller) {
-            const { width, height } = this._$bounds.getValue(), { width: elementWidth, height: elementHeight } = element.getBoundingClientRect(), isVertical = this._isVertical, viewportSize = isVertical ? height : width, elementSize = isVertical ? elementHeight : elementWidth;
+            const { width, height } = this._$bounds.getValue(), { width: elementWidth, height: elementHeight } = element.getBoundingClientRect(), isVertical = this._isVertical, viewportSize = isVertical ? height : width, maxPosition = isVertical ? scroller.scrollHeight : scroller.scrollWidth, elementSize = isVertical ? elementHeight : elementWidth;
             let pos = Number.NaN;
             switch (align) {
                 case FocusAlignments.START: {
-                    pos = position + scroller.startLayoutOffset;
+                    const p = position + scroller.startLayoutOffset;
+                    pos = scroller.inverted ? (maxPosition - p) : p;
                     break;
                 }
                 case FocusAlignments.CENTER: {
-                    pos = position - (viewportSize - elementSize) * .5 + scroller.startLayoutOffset;
+                    const p = position - (viewportSize - elementSize) * .5 + scroller.startLayoutOffset;
+                    pos = scroller.inverted ? (maxPosition - p) : p;
                     break;
                 }
                 case FocusAlignments.END: {
-                    pos = position - (viewportSize - elementSize) + scroller.startLayoutOffset;
+                    const p = position - (viewportSize - elementSize) + scroller.startLayoutOffset;
+                    pos = scroller.inverted ? (maxPosition - p) : p;
                     break;
                 }
                 case FocusAlignments.NONE:
@@ -8766,7 +8872,7 @@ class NgVirtualListComponent extends DisposableComponent {
                 this._trackBox.preventScrollSnapping(true);
                 const params = {
                     [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: pos, behavior, snap: false, normalize: true,
-                    fireUpdate: false, blending: false, userAction: false,
+                    fireUpdate: true, blending: false, userAction: false,
                     duration: this.snapToItem ? Math.max(this.animationParams.scrollToItem, this.animationParams.navigateToItem) : this.animationParams.navigateToItem,
                 };
                 scroller.scrollTo(params);
@@ -8862,10 +8968,9 @@ class NgVirtualListComponent extends DisposableComponent {
             this.onSnapItem.emit(id);
         })).subscribe();
         this._service.$tick.pipe(takeUntil(this._$unsubscribe), tap(() => {
-            this._scrollerComponent?.tick();
-        })).subscribe();
-        this._service.$tick.pipe(takeUntil(this._$unsubscribe), filter$1(() => this.dynamicSize === true), tap(() => {
-            this.checkBoundsOfElements();
+            if (this.dynamicSize === true) {
+                this.checkBoundsOfElements();
+            }
             this._scrollerComponent?.tick();
         })).subscribe();
     }
@@ -9238,7 +9343,12 @@ class NgVirtualListComponent extends DisposableComponent {
         combineLatest([this.$scrollbarEnabled, this.$isInfinity]).pipe(takeUntil(this._$unsubscribe), debounceTime(0), tap(([scrollbarEnabled, isInfinity]) => {
             this._$actualScrollbarEnabled.next(isInfinity ? false : scrollbarEnabled);
         })).subscribe();
-        const $alignment = this.$actualAlignment, $precalculatedScrollStartOffset = this._$precalculatedScrollStartOffset.asObservable(), $precalculatedScrollEndOffset = this._$precalculatedScrollEndOffset.asObservable(), $listBounds = this._$listBounds.asObservable().pipe(filter$1(b => !!b)), $scrollSize = this._$scrollSize.asObservable(), $bufferSize = this.$bufferSize.pipe(map(v => v < 0 ? DEFAULT_BUFFER_SIZE : v)), $maxBufferSize = this.$maxBufferSize.pipe(map(v => v < 0 ? DEFAULT_BUFFER_SIZE : v)), $snapToItem = this.$snapToItem, $snapToItemAlign = this.$snapToItemAlign, $stickyEnabled = this.$stickyEnabled, $isLazy = this.$collectionMode.pipe(map(v => this.getIsLazy(v || DEFAULT_COLLECTION_MODE))), $enabledBufferOptimization = this.$enabledBufferOptimization, $snappingMethod = this.$snappingMethod.pipe(map(v => this.getIsSnappingMethodAdvanced(v || DEFAULT_SNAPPING_METHOD))), $collapsingMode = this.$collapsingMode, $selectingMode = this.$selectingMode, $selectedIds = this.$selectedIds, $collapsedIds = this.$collapsedIds.pipe(distinctUntilChanged(), map(v => Array.isArray(v) ? v : [])), $collapsedItemIds = this._$collapsedItemIds.asObservable().pipe(distinctUntilChanged(), map(v => Array.isArray(v) ? v : [])), $itemTransform = this.$itemTransform, $screenReaderMessage = this.$screenReaderMessage, $displayItems = this._service.$displayItems, $cacheVersion = this._service.$cacheVersion;
+        const $alignment = this.$actualAlignment, $precalculatedScrollStartOffset = this._$precalculatedScrollStartOffset.asObservable(), $precalculatedScrollEndOffset = this._$precalculatedScrollEndOffset.asObservable(), $listBounds = this._$listBounds.asObservable().pipe(filter$1(b => !!b)), $scrollSize = this._$scrollSize.asObservable(), $bufferSize = this.$bufferSize.pipe(map(v => v < 0 ? DEFAULT_BUFFER_SIZE : v)), $maxBufferSize = this.$maxBufferSize.pipe(map(v => v < 0 ? DEFAULT_BUFFER_SIZE : v)), $snapToItem = this.$snapToItem, $snapToItemAlign = this.$snapToItemAlign, $stickyEnabled = this.$stickyEnabled, $isLazy = this.$collectionMode.pipe(map(v => this.getIsLazy(v || DEFAULT_COLLECTION_MODE))), $enabledBufferOptimization = this.$enabledBufferOptimization, $snappingMethod = this.$snappingMethod.pipe(map(v => this.getIsSnappingMethodAdvanced(v || DEFAULT_SNAPPING_METHOD))), $collapsingMode = this.$collapsingMode, $selectingMode = this.$selectingMode, $selectedIds = this.$selectedIds, $collapsedIds = this.$collapsedIds.pipe(distinctUntilChanged(), map(v => Array.isArray(v) ? v : [])), $collapsedItemIds = this._$collapsedItemIds.asObservable().pipe(distinctUntilChanged(), map(v => Array.isArray(v) ? v : [])), $langTextDir = this.$langTextDir, $itemTransform = this.$itemTransform, $screenReaderMessage = this.$screenReaderMessage, $displayItems = this._service.$displayItems, $cacheVersion = this._service.$cacheVersion;
+        combineLatest([$isVertical, $langTextDir, $itemTransform]).pipe(takeUntil(this._$unsubscribe), debounceTime(0), tap(([isVertical, langTextDir, itemTransform]) => {
+            if (langTextDir === TextDirections.RTL && !isVertical && itemTransform) {
+                throw Error('Currently, converting right-to-left items in horizontal lists is not possible.');
+            }
+        })).subscribe();
         $snapToItem.pipe(takeUntil(this._$unsubscribe), tap(v => {
             this._service.snapToItem = v;
         })).subscribe();
@@ -9299,6 +9409,9 @@ class NgVirtualListComponent extends DisposableComponent {
                 actualItems.push(item);
             }
             const normalizedCollection = normalizeCollection(actualItems, itemConfigMap, trackBy, divides);
+            if (this._scrollerComponent?.inverted) {
+                normalizedCollection.reverse();
+            }
             this._$actualItems.next(normalizedCollection);
         })).subscribe();
         $isVertical.pipe(takeUntil(this._$unsubscribe), tap(v => {
@@ -9420,20 +9533,21 @@ class NgVirtualListComponent extends DisposableComponent {
             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, 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) :
+                    const inverted = scroller.inverted, currentScrollSize = (isVertical ? scroller.scrollTop : scroller.scrollLeft), maxScrollSize = (isVertical ? scroller.scrollHeight : scroller.scrollWidth);
+                    let actualScrollSize = !this._readyForShow && snapScrollToEnd ? maxScrollSize :
                         (isVertical ? scroller.scrollTop : scroller.scrollLeft), leftLayoutOffset = 0, displayItems;
-                    const { width, height } = bounds, viewportSize = (isVertical ? height : width), opts = {
+                    const { width, height } = bounds, opts = {
                         alignment, bounds: { width, height }, dynamicSize, isVertical, itemSize, minItemSize, maxItemSize, bufferSize, maxBufferSize,
-                        scrollSize: actualScrollSize, stickyEnabled, enabledBufferOptimization, snapToItem, snapToItemAlign, itemTransform,
+                        scrollSize: inverted ? maxScrollSize - actualScrollSize : actualScrollSize, stickyEnabled, enabledBufferOptimization,
+                        snapToItem, snapToItemAlign, inverted, itemTransform,
                     };
                     if (snapScrollToEnd && !this._readyForShow) {
-                        const { displayItems: calculatedDisplayItems, totalSize: calculatedTotalSize1, leftLayoutOffset: leftLayoutOffset1 } = this._trackBox.updateCollection(items, itemConfigMap, { ...opts, scrollSize: actualScrollSize });
+                        const { displayItems: calculatedDisplayItems, totalSize: calculatedTotalSize1, leftLayoutOffset: leftLayoutOffset1 } = this._trackBox.updateCollection(items, itemConfigMap, { ...opts, scrollSize: inverted ? maxScrollSize - actualScrollSize : actualScrollSize });
                         displayItems = calculatedDisplayItems;
                         totalSize = calculatedTotalSize1;
                         leftLayoutOffset = leftLayoutOffset1;
                         if (!!itemTransform && dynamicSize && this._trackBox.delta !== 0) {
-                            const { displayItems: calculatedDisplayItems, totalSize: calculatedTotalSize1, leftLayoutOffset: leftLayoutOffset1 } = this._trackBox.updateCollection(items, itemConfigMap, { ...opts, scrollSize: actualScrollSize + this._trackBox.delta });
+                            const { displayItems: calculatedDisplayItems, totalSize: calculatedTotalSize1, leftLayoutOffset: leftLayoutOffset1 } = this._trackBox.updateCollection(items, itemConfigMap, { ...opts, scrollSize: inverted ? (maxScrollSize - actualScrollSize + this._trackBox.delta) : (actualScrollSize + this._trackBox.delta) });
                             displayItems = calculatedDisplayItems;
                             totalSize = calculatedTotalSize1;
                             leftLayoutOffset = leftLayoutOffset1;
@@ -9445,7 +9559,7 @@ class NgVirtualListComponent extends DisposableComponent {
                         totalSize = calculatedTotalSize;
                         leftLayoutOffset = leftLayoutOffset1;
                         if (!!itemTransform && dynamicSize && this._trackBox.delta !== 0) {
-                            const { displayItems: calculatedDisplayItems, totalSize: calculatedTotalSize, leftLayoutOffset: leftLayoutOffset1 } = this._trackBox.updateCollection(items, itemConfigMap, { ...opts, scrollSize: actualScrollSize + this._trackBox.delta });
+                            const { displayItems: calculatedDisplayItems, totalSize: calculatedTotalSize, leftLayoutOffset: leftLayoutOffset1 } = this._trackBox.updateCollection(items, itemConfigMap, { ...opts, scrollSize: inverted ? (maxScrollSize - actualScrollSize + this._trackBox.delta) : (actualScrollSize + this._trackBox.delta) });
                             displayItems = calculatedDisplayItems;
                             totalSize = calculatedTotalSize;
                             leftLayoutOffset = leftLayoutOffset1;
@@ -9469,18 +9583,49 @@ class NgVirtualListComponent extends DisposableComponent {
                     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) {
+                    if (!scroller.grabbing) {
+                        if ((snapScrollToStart && this._trackBox.isSnappedToStart && scroller.scrollable) ||
+                            (snapScrollToStart && currentScrollSize <= MIN_PIXELS_FOR_PREVENT_SNAPPING)) {
+                            if (currentScrollSize !== roundedScrollPositionAfterUpdate) {
+                                this._trackBox.clearDelta();
+                                if (this._readyForShow) {
+                                    this.emitScrollEvent(true, false, userAction);
+                                }
+                                this._trackBox.isScrollEnd;
+                                const params = {
+                                    [isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: 0, userAction,
+                                    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));
+                                }
+                            }
+                            return;
+                        }
+                        if ((snapScrollToEnd && this._trackBox.isSnappedToEnd) || (snapScrollToEnd && !scroller.scrollable) ||
+                            (scrollPositionAfterUpdate + MIN_PIXELS_FOR_PREVENT_SNAPPING >= roundedMaxPositionAfterUpdate) ||
+                            (roundedScrollPositionAfterUpdate >= scrollPositionAfterUpdate + MIN_PIXELS_FOR_PREVENT_SNAPPING)) {
                             this._trackBox.clearDelta();
+                            if (!this._trackBox.isSnappedToEnd) {
+                                this._trackBox.isScrollEnd = true;
+                                this._trackBox.isScrollStart = false;
+                            }
                             if (this._readyForShow) {
-                                this.emitScrollEvent(true, false, userAction);
+                                this.emitScrollEvent(true, false, false);
                             }
-                            this._trackBox.isScrollEnd;
                             const params = {
-                                [isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: 0, userAction,
-                                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,
+                                [isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: roundedMaxPositionAfterUpdate,
+                                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) {
@@ -9493,37 +9638,8 @@ class NgVirtualListComponent extends DisposableComponent {
                             if (emitUpdate) {
                                 this._$update.next(getScrollStateVersion(totalSize, this._isVertical ? scroller.scrollTop : scroller.scrollLeft));
                             }
+                            return;
                         }
-                        return;
-                    }
-                    if ((snapScrollToEnd && this._trackBox.isSnappedToEnd) || (snapScrollToEnd && !scroller.scrollable) ||
-                        (scrollPositionAfterUpdate + MIN_PIXELS_FOR_PREVENT_SNAPPING >= roundedMaxPositionAfterUpdate) ||
-                        (roundedScrollPositionAfterUpdate >= scrollPositionAfterUpdate + MIN_PIXELS_FOR_PREVENT_SNAPPING)) {
-                        this._trackBox.clearDelta();
-                        if (!this._trackBox.isSnappedToEnd) {
-                            this._trackBox.isScrollEnd = true;
-                            this._trackBox.isScrollStart = false;
-                        }
-                        if (this._readyForShow) {
-                            this.emitScrollEvent(true, false, false);
-                        }
-                        const params = {
-                            [isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: roundedMaxPositionAfterUpdate,
-                            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));
-                        }
-                        return;
                     }
                     if (scrollSize !== scrollPositionAfterUpdate &&
                         ((scrollPositionAfterUpdate >= 0 && scrollPositionAfterUpdate < roundedMaxPositionAfterUpdate) ||
@@ -9663,23 +9779,23 @@ class NgVirtualListComponent extends DisposableComponent {
                 if (!!items && items.length) {
                     const dynamicSize = this.dynamicSize, itemSize = this.actualItemSize, minItemSize = this.actualMinItemSize, maxItemSize = this.actualMaxItemSize, snapScrollToEnd = this.snapScrollToEnd;
                     if (dynamicSize) {
-                        const { width, height } = this._$bounds.getValue() || { width: DEFAULT_LIST_SIZE, height: DEFAULT_LIST_SIZE }, itemConfigMap = this.itemConfigMap, isVertical = this._isVertical, currentScrollSize = isVertical ? scrollerComponent.scrollTop : scrollerComponent.scrollLeft, opts = {
-                            alignment: this._$actualAlignment.getValue(),
+                        const { width, height } = this._$bounds.getValue() || { width: DEFAULT_LIST_SIZE, height: DEFAULT_LIST_SIZE }, itemConfigMap = this.itemConfigMap, isVertical = this._isVertical, inverted = scrollerComponent.inverted, maxScrollSize = isVertical ? scrollerComponent.scrollHeight : scrollerComponent.scrollWidth, currentScrollSize = isVertical ? scrollerComponent.scrollTop : scrollerComponent.scrollLeft, opts = {
+                            alignment: this.actualAlignment, inverted,
                             bounds: { width, height }, collection: items, dynamicSize, isVertical: this._isVertical, itemSize, minItemSize, maxItemSize,
                             bufferSize: this.bufferSize, maxBufferSize: this.maxBufferSize, itemTransform: this.itemTransform,
-                            scrollSize: (isVertical ? scrollerComponent.scrollTop : scrollerComponent.scrollLeft),
+                            scrollSize: (inverted ? (maxScrollSize - currentScrollSize) : currentScrollSize),
                             snapToItem: this.snapToItem, snapToItemAlign: this.snapToItemAlign,
                             stickyEnabled: this.stickyEnabled, fromItemId: id, enabledBufferOptimization: this.enabledBufferOptimization,
                         };
                         let scrollSize = snapScrollToEnd && this._trackBox.isSnappedToEnd ?
-                            (isVertical ? scrollerComponent.scrollHeight : scrollerComponent.scrollWidth) :
+                            maxScrollSize :
                             this._trackBox.getItemPosition(id, itemConfigMap, opts);
                         if (scrollSize === -1) {
                             return of([finished, { id, blending, iteration: nextIteration, cb }]).pipe(delay(0));
                         }
                         this._trackBox.clearDelta();
                         const viewportSize = (isVertical ? height : width), { displayItems, totalSize, leftLayoutOffset } = this._trackBox.updateCollection(items, itemConfigMap, {
-                            ...opts, scrollSize, fromItemId: isLastIteration ? undefined : id,
+                            ...opts, scrollSize: (inverted ? (maxScrollSize - scrollSize) : scrollSize), fromItemId: isLastIteration ? undefined : id,
                         }), delta1 = this._trackBox.delta;
                         const normalizedTotalSize = totalSize < viewportSize ? viewportSize : totalSize;
                         scrollerComponent.startLayoutOffset = leftLayoutOffset;
@@ -9691,7 +9807,7 @@ class NgVirtualListComponent extends DisposableComponent {
                         this.tracking();
                         this.snappingHandler();
                         this.updateOffsetsByAllignment();
-                        scrollSize = this._trackBox.getItemPosition(id, itemConfigMap, { ...opts, scrollSize: actualScrollSize, fromItemId: id });
+                        scrollSize = this._trackBox.getItemPosition(id, itemConfigMap, { ...opts, scrollSize: (inverted ? (maxScrollSize - actualScrollSize) : actualScrollSize), fromItemId: id });
                         if (scrollSize === -1) {
                             return of([finished, { id, blending, iteration: nextIteration, cb }]).pipe(delay(0));
                         }
@@ -9716,11 +9832,11 @@ class NgVirtualListComponent extends DisposableComponent {
                     else {
                         const index = items.findIndex(item => item[trackBy] === id);
                         if (index > -1) {
-                            const isVertical = this._isVertical, itemSize = this.actualItemSize;
+                            const isVertical = this._isVertical, itemSize = this.actualItemSize, isInfinity = this.isInfinity, snapToItem = this.snapToItem, snapToItemAlign = this.snapToItemAlign;
                             let scrollSize = index * itemSize;
-                            if (this.isInfinity) {
-                                if (this.snapToItem) {
-                                    switch (this.snapToItemAlign) {
+                            if (isInfinity) {
+                                if (snapToItem) {
+                                    switch (snapToItemAlign) {
                                         case SnapToItemAligns.CENTER: {
                                             scrollSize += itemSize * .5;
                                             break;
@@ -9728,17 +9844,18 @@ class NgVirtualListComponent extends DisposableComponent {
                                     }
                                 }
                             }
-                            const { width, height } = this._$bounds.getValue() || { width: DEFAULT_LIST_SIZE, height: DEFAULT_LIST_SIZE }, itemConfigMap = this.itemConfigMap, items = this._$actualItems.getValue(), opts = {
-                                alignment: this._$actualAlignment.getValue(),
+                            const { width, height } = this._$bounds.getValue() || { width: DEFAULT_LIST_SIZE, height: DEFAULT_LIST_SIZE }, itemConfigMap = this.itemConfigMap, items = this._$actualItems.getValue(), inverted = scrollerComponent.inverted, maxScrollSize = (isVertical ? scrollerComponent.scrollHeight : scrollerComponent.scrollWidth), actualScrollSize = (isVertical ? scrollerComponent.scrollTop : scrollerComponent.scrollLeft), opts = {
+                                alignment: this.actualAlignment, inverted,
                                 bounds: { width, height }, collection: items, dynamicSize, isVertical: this._isVertical, itemSize, minItemSize, maxItemSize,
                                 bufferSize: this.bufferSize, maxBufferSize: this.maxBufferSize, itemTransform: this.itemTransform,
-                                scrollSize: (isVertical ? scrollerComponent.scrollTop : scrollerComponent.scrollLeft),
-                                snapToItem: this.snapToItem, snapToItemAlign: this.snapToItemAlign,
-                                stickyEnabled: this.stickyEnabled, fromItemId: id, enabledBufferOptimization: this.enabledBufferOptimization,
+                                scrollSize: (inverted ? (maxScrollSize - actualScrollSize) : actualScrollSize),
+                                snapToItem, snapToItemAlign, stickyEnabled: this.stickyEnabled, fromItemId: id,
+                                enabledBufferOptimization: this.enabledBufferOptimization,
                             };
                             this._trackBox.clearDelta();
                             const viewportSize = (isVertical ? height : width), { displayItems, totalSize, leftLayoutOffset } = this._trackBox.updateCollection(items, itemConfigMap, {
-                                ...opts, scrollSize, fromItemId: isLastIteration ? undefined : id,
+                                ...opts, scrollSize: (inverted ? (maxScrollSize - scrollSize) : scrollSize),
+                                fromItemId: isLastIteration ? undefined : id,
                             });
                             const actualTotalSize = this.isInfinity ? (totalSize + viewportSize) : totalSize;
                             const normalizedTotalSize = actualTotalSize < viewportSize ? viewportSize : actualTotalSize;
@@ -10261,13 +10378,13 @@ class NgVirtualListComponent extends DisposableComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgVirtualListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgVirtualListComponent, selector: "ng-virtual-list", inputs: { scrollbarThickness: "scrollbarThickness", scrollbarMinSize: "scrollbarMinSize", scrollbarThumbRenderer: "scrollbarThumbRenderer", scrollbarThumbParams: "scrollbarThumbParams", loading: "loading", waitForPreparation: "waitForPreparation", clickDistance: "clickDistance", items: "items", selectedIds: "selectedIds", defaultItemValue: "defaultItemValue", collapsedIds: "collapsedIds", selectByClick: "selectByClick", collapseByClick: "collapseByClick", snap: "snap", stickyEnabled: "stickyEnabled", snapToEndTransitionInstantOffset: "snapToEndTransitionInstantOffset", scrollStartOffset: "scrollStartOffset", scrollEndOffset: "scrollEndOffset", snapScrollToStart: "snapScrollToStart", snapScrollToEnd: "snapScrollToEnd", snapScrollToBottom: "snapScrollToBottom", scrollbarEnabled: "scrollbarEnabled", scrollbarInteractive: "scrollbarInteractive", overlappingScrollbar: "overlappingScrollbar", scrollBehavior: "scrollBehavior", scrollingSettings: "scrollingSettings", itemTransform: "itemTransform", snapToItem: "snapToItem", snapToItemAlign: "snapToItemAlign", snappingDistance: "snappingDistance", scrollingOneByOne: "scrollingOneByOne", alignment: "alignment", zIndexWhenSelecting: "zIndexWhenSelecting", spreadingMode: "spreadingMode", divides: "divides", motionBlur: "motionBlur", maxMotionBlur: "maxMotionBlur", motionBlurEnabled: "motionBlurEnabled", animationParams: "animationParams", overscrollEnabled: "overscrollEnabled", enabledBufferOptimization: "enabledBufferOptimization", itemRenderer: "itemRenderer", itemConfigMap: "itemConfigMap", itemSize: "itemSize", minItemSize: "minItemSize", maxItemSize: "maxItemSize", dynamicSize: "dynamicSize", direction: "direction", collectionMode: "collectionMode", bufferSize: "bufferSize", maxBufferSize: "maxBufferSize", snappingMethod: "snappingMethod", collapsingMode: "collapsingMode", methodForSelecting: "methodForSelecting", selectingMode: "selectingMode", trackBy: "trackBy", screenReaderMessage: "screenReaderMessage", langTextDir: "langTextDir" }, outputs: { onScroll: "onScroll", onScrollEnd: "onScrollEnd", onViewportChange: "onViewportChange", onSnapItem: "onSnapItem", onItemClick: "onItemClick", onSelect: "onSelect", onCollapse: "onCollapse", onScrollReachStart: "onScrollReachStart", onScrollReachEnd: "onScrollReachEnd" }, host: { styleAttribute: "position: relative;" }, providers: [NgVirtualListService, NgVirtualListPublicService], viewQueries: [{ propertyName: "_prerender", first: true, predicate: ["prerender"], descendants: true, read: NgPrerenderContainer }, { propertyName: "_listContainerRef", first: true, predicate: ["renderersContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_snapContainerRef", first: true, predicate: ["snapRendererContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_scrollerComponent", first: true, predicate: ["scroller"], descendants: true, read: NgScrollerComponent }], usesInheritance: true, ngImport: i0, template: "<div aria-live=\"polite\" aria-atomic=\"true\" class=\"ngvl__screen-reader\">\r\n  {{ $screenReaderFormattedMessage | async }}\r\n</div>\r\n\r\n<ng-prerender-container #prerender [bounds]=\"($bounds | async)!\" [direction]=\"($direction | async)!\"\r\n  [dynamic]=\"($dynamicSize | async)!\" [divides]=\"($divides | async)!\" [isVertical]=\"($isVertical | async)!\"\r\n  [itemSize]=\"($actualItemSize | async)!\" [trackBy]=\"($trackBy | async)!\" [itemRenderer]=\"($itemRenderer | async)!\"\r\n  [startOffset]=\"($startOffset | async)!\" [endOffset]=\"($endOffset | async)!\"\r\n  [scrollbarEnabled]=\"(scroller.$scrollbarShow | async)!\"\r\n  [enabled]=\"($prerenderEnabled | async)!\"></ng-prerender-container>\r\n\r\n<ng-container *ngIf=\"($stickyEnabled | async)!\">\r\n  <div localeSensitive [langTextDir]=\"($langTextDir | async)!\" #snappedContainer class=\"ngvl__snapped-container\"\r\n    [ngClass]=\"($classes | async)\">\r\n    <div #snapped part=\"snapped-item\" class=\"ngvl__list-snapper\">\r\n      <ng-container #snapRendererContainer></ng-container>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-scroller #scroller class=\"ngvl__list-scroller\" [classes]=\"($classes | async)!\"\r\n  [startOffset]=\"($startOffset | async)!\" [endOffset]=\"($endOffset | async)!\"\r\n  [alignmentStartOffset]=\"($alignmentScrollStartOffset | async)!\"\r\n  [alignmentEndOffset]=\"($alignmentScrollEndOffset | async)!\" [direction]=\"($direction | async)!\"\r\n  [scrollbarThumbRenderer]=\"($scrollbarThumbRenderer | async)!\" [isInfinity]=\"($isInfinity | async)!\"\r\n  [scrollbarThickness]=\"($scrollbarThickness | async)!\" [scrollbarThumbParams]=\"($scrollbarThumbParams | async)!\"\r\n  [animationParams]=\"($animationParams | async)!\" [focusedElement]=\"($focusedElement | async)!\"\r\n  [loading]=\"($loading | async)!\" [overscrollEnabled]=\"($overscrollEnabled | async)!\"\r\n  [snappingDistance]=\"($snappingDistance | async)!\" [overlappingScrollbar]=\"($overlappingScrollbar | async)!\"\r\n  [scrollbarEnabled]=\"($actualScrollbarEnabled | async)!\" [scrollbarInteractive]=\"($scrollbarInteractive | async)!\"\r\n  [snapToItem]=\"($snapToItem | async)!\" [snapToItemAlign]=\"($snapToItemAlign | async)!\"\r\n  [scrollbarMinSize]=\"($scrollbarMinSize | async)!\" [scrollBehavior]=\"($scrollBehavior | async)!\"\r\n  [scrollingSettings]=\"($scrollingSettings | async)!\" [scrollingOneByOne]=\"($scrollingOneByOne | async)!\"\r\n  [motionBlur]=\"($motionBlur | async)!\" [maxMotionBlur]=\"($maxMotionBlur | async)!\"\r\n  [motionBlurEnabled]=\"($motionBlurEnabled | async)!\">\r\n  <ng-container #renderersContainer></ng-container>\r\n</ng-scroller>", styles: [":host{position:relative;display:block;width:400px;overflow:hidden}:host(.horizontal){height:48px}:host(.vertical){height:320px}.ngvl__snapped-container{position:relative;width:100%;opacity:0}.ngvl__snapped-container.prepared{opacity:1}.ngvl__list-snapper{-webkit-tap-highlight-color:transparent;position:absolute;list-style:none;left:0;top:0;z-index:1}.ngvl__list-scroller{-webkit-tap-highlight-color:transparent;position:absolute;left:0;top:0;width:100%;height:100%;z-index:0}.ngvl__screen-reader{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgScrollerComponent, selector: "ng-scroller", inputs: ["scrollbarEnabled", "scrollbarInteractive", "focusedElement", "overlappingScrollbar", "content", "loading", "classes", "scrollbarMinSize", "scrollbarThickness", "scrollbarThumbRenderer", "scrollbarThumbParams", "motionBlur", "maxMotionBlur", "motionBlurEnabled"], outputs: ["onScrollbarVisible"] }, { kind: "component", type: NgPrerenderContainer, selector: "ng-prerender-container", inputs: ["enabled", "direction", "isVertical", "scrollbarEnabled", "startOffset", "endOffset", "bounds", "dynamic", "itemSize", "trackBy", "divides"] }, { kind: "directive", type: LocaleSensitiveDirective, selector: "[localeSensitive]", inputs: ["langTextDir", "listDir"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgVirtualListComponent, selector: "ng-virtual-list", inputs: { scrollbarThickness: "scrollbarThickness", scrollbarMinSize: "scrollbarMinSize", scrollbarThumbRenderer: "scrollbarThumbRenderer", scrollbarThumbParams: "scrollbarThumbParams", loading: "loading", waitForPreparation: "waitForPreparation", clickDistance: "clickDistance", items: "items", selectedIds: "selectedIds", defaultItemValue: "defaultItemValue", collapsedIds: "collapsedIds", selectByClick: "selectByClick", collapseByClick: "collapseByClick", snap: "snap", stickyEnabled: "stickyEnabled", snapToEndTransitionInstantOffset: "snapToEndTransitionInstantOffset", scrollStartOffset: "scrollStartOffset", scrollEndOffset: "scrollEndOffset", snapScrollToStart: "snapScrollToStart", snapScrollToEnd: "snapScrollToEnd", snapScrollToBottom: "snapScrollToBottom", scrollbarEnabled: "scrollbarEnabled", scrollbarInteractive: "scrollbarInteractive", overlappingScrollbar: "overlappingScrollbar", scrollBehavior: "scrollBehavior", scrollingSettings: "scrollingSettings", itemTransform: "itemTransform", snapToItem: "snapToItem", snapToItemAlign: "snapToItemAlign", snappingDistance: "snappingDistance", scrollingOneByOne: "scrollingOneByOne", alignment: "alignment", zIndexWhenSelecting: "zIndexWhenSelecting", spreadingMode: "spreadingMode", divides: "divides", motionBlur: "motionBlur", maxMotionBlur: "maxMotionBlur", motionBlurEnabled: "motionBlurEnabled", animationParams: "animationParams", overscrollEnabled: "overscrollEnabled", enabledBufferOptimization: "enabledBufferOptimization", itemRenderer: "itemRenderer", itemConfigMap: "itemConfigMap", itemSize: "itemSize", minItemSize: "minItemSize", maxItemSize: "maxItemSize", dynamicSize: "dynamicSize", direction: "direction", collectionMode: "collectionMode", bufferSize: "bufferSize", maxBufferSize: "maxBufferSize", snappingMethod: "snappingMethod", collapsingMode: "collapsingMode", methodForSelecting: "methodForSelecting", selectingMode: "selectingMode", trackBy: "trackBy", screenReaderMessage: "screenReaderMessage", langTextDir: "langTextDir" }, outputs: { onScroll: "onScroll", onScrollEnd: "onScrollEnd", onViewportChange: "onViewportChange", onSnapItem: "onSnapItem", onItemClick: "onItemClick", onSelect: "onSelect", onCollapse: "onCollapse", onScrollReachStart: "onScrollReachStart", onScrollReachEnd: "onScrollReachEnd" }, host: { styleAttribute: "position: relative;" }, providers: [NgVirtualListService, NgVirtualListPublicService], viewQueries: [{ propertyName: "_prerender", first: true, predicate: ["prerender"], descendants: true, read: NgPrerenderContainer }, { propertyName: "_listContainerRef", first: true, predicate: ["renderersContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_snapContainerRef", first: true, predicate: ["snapRendererContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_scrollerComponent", first: true, predicate: ["scroller"], descendants: true, read: NgScrollerComponent }], usesInheritance: true, ngImport: i0, template: "<div aria-live=\"polite\" aria-atomic=\"true\" class=\"ngvl__screen-reader\">\r\n  {{ $screenReaderFormattedMessage | async }}\r\n</div>\r\n\r\n<ng-prerender-container #prerender [bounds]=\"($bounds | async)!\" [direction]=\"($direction | async)!\"\r\n  [dynamic]=\"($dynamicSize | async)!\" [divides]=\"($divides | async)!\" [isVertical]=\"($isVertical | async)!\"\r\n  [itemSize]=\"($actualItemSize | async)!\" [trackBy]=\"($trackBy | async)!\" [itemRenderer]=\"($itemRenderer | async)!\"\r\n  [startOffset]=\"($startOffset | async)!\" [endOffset]=\"($endOffset | async)!\"\r\n  [scrollbarEnabled]=\"(scroller.$scrollbarShow | async)!\"\r\n  [enabled]=\"($prerenderEnabled | async)!\"></ng-prerender-container>\r\n\r\n<ng-container *ngIf=\"($stickyEnabled | async)!\">\r\n  <div localeSensitive [langTextDir]=\"($langTextDir | async)!\" #snappedContainer class=\"ngvl__snapped-container\"\r\n    [ngClass]=\"($classes | async)\">\r\n    <div #snapped part=\"snapped-item\" class=\"ngvl__list-snapper\">\r\n      <ng-container #snapRendererContainer></ng-container>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-scroller #scroller class=\"ngvl__list-scroller\" [classes]=\"($classes | async)!\"\r\n  [langTextDir]=\"($langTextDir | async)!\" [startOffset]=\"($startOffset | async)!\" [endOffset]=\"($endOffset | async)!\"\r\n  [alignmentStartOffset]=\"($alignmentScrollStartOffset | async)!\"\r\n  [alignmentEndOffset]=\"($alignmentScrollEndOffset | async)!\" [direction]=\"($direction | async)!\"\r\n  [scrollbarThumbRenderer]=\"($scrollbarThumbRenderer | async)!\" [isInfinity]=\"($isInfinity | async)!\"\r\n  [scrollbarThickness]=\"($scrollbarThickness | async)!\" [scrollbarThumbParams]=\"($scrollbarThumbParams | async)!\"\r\n  [animationParams]=\"($animationParams | async)!\" [focusedElement]=\"($focusedElement | async)!\"\r\n  [loading]=\"($loading | async)!\" [overscrollEnabled]=\"($overscrollEnabled | async)!\"\r\n  [snappingDistance]=\"($snappingDistance | async)!\" [overlappingScrollbar]=\"($overlappingScrollbar | async)!\"\r\n  [scrollbarEnabled]=\"($actualScrollbarEnabled | async)!\" [scrollbarInteractive]=\"($scrollbarInteractive | async)!\"\r\n  [snapToItem]=\"($snapToItem | async)!\" [snapToItemAlign]=\"($snapToItemAlign | async)!\"\r\n  [scrollbarMinSize]=\"($scrollbarMinSize | async)!\" [scrollBehavior]=\"($scrollBehavior | async)!\"\r\n  [scrollingSettings]=\"($scrollingSettings | async)!\" [scrollingOneByOne]=\"($scrollingOneByOne | async)!\"\r\n  [motionBlur]=\"($motionBlur | async)!\" [maxMotionBlur]=\"($maxMotionBlur | async)!\"\r\n  [motionBlurEnabled]=\"($motionBlurEnabled | async)!\">\r\n  <ng-container #renderersContainer></ng-container>\r\n</ng-scroller>", styles: [":host{position:relative;display:block;width:400px;overflow:hidden}:host(.horizontal){height:48px}:host(.vertical){height:320px}.ngvl__snapped-container{position:relative;width:100%;opacity:0}.ngvl__snapped-container.prepared{opacity:1}.ngvl__list-snapper{-webkit-tap-highlight-color:transparent;position:absolute;list-style:none;left:0;top:0;z-index:1}.ngvl__list-scroller{-webkit-tap-highlight-color:transparent;position:absolute;left:0;top:0;width:100%;height:100%;z-index:0}.ngvl__screen-reader{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgScrollerComponent, selector: "ng-scroller", inputs: ["scrollbarEnabled", "scrollbarInteractive", "focusedElement", "overlappingScrollbar", "content", "loading", "classes", "scrollbarMinSize", "scrollbarThickness", "scrollbarThumbRenderer", "scrollbarThumbParams", "motionBlur", "maxMotionBlur", "motionBlurEnabled"], outputs: ["onScrollbarVisible"] }, { kind: "component", type: NgPrerenderContainer, selector: "ng-prerender-container", inputs: ["enabled", "direction", "isVertical", "scrollbarEnabled", "startOffset", "endOffset", "bounds", "dynamic", "itemSize", "trackBy", "divides"] }, { kind: "directive", type: LocaleSensitiveDirective, selector: "[localeSensitive]", inputs: ["langTextDir", "listDir"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgVirtualListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-virtual-list', host: {
                         'style': 'position: relative;'
-                    }, standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, providers: [NgVirtualListService, NgVirtualListPublicService], template: "<div aria-live=\"polite\" aria-atomic=\"true\" class=\"ngvl__screen-reader\">\r\n  {{ $screenReaderFormattedMessage | async }}\r\n</div>\r\n\r\n<ng-prerender-container #prerender [bounds]=\"($bounds | async)!\" [direction]=\"($direction | async)!\"\r\n  [dynamic]=\"($dynamicSize | async)!\" [divides]=\"($divides | async)!\" [isVertical]=\"($isVertical | async)!\"\r\n  [itemSize]=\"($actualItemSize | async)!\" [trackBy]=\"($trackBy | async)!\" [itemRenderer]=\"($itemRenderer | async)!\"\r\n  [startOffset]=\"($startOffset | async)!\" [endOffset]=\"($endOffset | async)!\"\r\n  [scrollbarEnabled]=\"(scroller.$scrollbarShow | async)!\"\r\n  [enabled]=\"($prerenderEnabled | async)!\"></ng-prerender-container>\r\n\r\n<ng-container *ngIf=\"($stickyEnabled | async)!\">\r\n  <div localeSensitive [langTextDir]=\"($langTextDir | async)!\" #snappedContainer class=\"ngvl__snapped-container\"\r\n    [ngClass]=\"($classes | async)\">\r\n    <div #snapped part=\"snapped-item\" class=\"ngvl__list-snapper\">\r\n      <ng-container #snapRendererContainer></ng-container>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-scroller #scroller class=\"ngvl__list-scroller\" [classes]=\"($classes | async)!\"\r\n  [startOffset]=\"($startOffset | async)!\" [endOffset]=\"($endOffset | async)!\"\r\n  [alignmentStartOffset]=\"($alignmentScrollStartOffset | async)!\"\r\n  [alignmentEndOffset]=\"($alignmentScrollEndOffset | async)!\" [direction]=\"($direction | async)!\"\r\n  [scrollbarThumbRenderer]=\"($scrollbarThumbRenderer | async)!\" [isInfinity]=\"($isInfinity | async)!\"\r\n  [scrollbarThickness]=\"($scrollbarThickness | async)!\" [scrollbarThumbParams]=\"($scrollbarThumbParams | async)!\"\r\n  [animationParams]=\"($animationParams | async)!\" [focusedElement]=\"($focusedElement | async)!\"\r\n  [loading]=\"($loading | async)!\" [overscrollEnabled]=\"($overscrollEnabled | async)!\"\r\n  [snappingDistance]=\"($snappingDistance | async)!\" [overlappingScrollbar]=\"($overlappingScrollbar | async)!\"\r\n  [scrollbarEnabled]=\"($actualScrollbarEnabled | async)!\" [scrollbarInteractive]=\"($scrollbarInteractive | async)!\"\r\n  [snapToItem]=\"($snapToItem | async)!\" [snapToItemAlign]=\"($snapToItemAlign | async)!\"\r\n  [scrollbarMinSize]=\"($scrollbarMinSize | async)!\" [scrollBehavior]=\"($scrollBehavior | async)!\"\r\n  [scrollingSettings]=\"($scrollingSettings | async)!\" [scrollingOneByOne]=\"($scrollingOneByOne | async)!\"\r\n  [motionBlur]=\"($motionBlur | async)!\" [maxMotionBlur]=\"($maxMotionBlur | async)!\"\r\n  [motionBlurEnabled]=\"($motionBlurEnabled | async)!\">\r\n  <ng-container #renderersContainer></ng-container>\r\n</ng-scroller>", styles: [":host{position:relative;display:block;width:400px;overflow:hidden}:host(.horizontal){height:48px}:host(.vertical){height:320px}.ngvl__snapped-container{position:relative;width:100%;opacity:0}.ngvl__snapped-container.prepared{opacity:1}.ngvl__list-snapper{-webkit-tap-highlight-color:transparent;position:absolute;list-style:none;left:0;top:0;z-index:1}.ngvl__list-scroller{-webkit-tap-highlight-color:transparent;position:absolute;left:0;top:0;width:100%;height:100%;z-index:0}.ngvl__screen-reader{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
+                    }, standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, providers: [NgVirtualListService, NgVirtualListPublicService], template: "<div aria-live=\"polite\" aria-atomic=\"true\" class=\"ngvl__screen-reader\">\r\n  {{ $screenReaderFormattedMessage | async }}\r\n</div>\r\n\r\n<ng-prerender-container #prerender [bounds]=\"($bounds | async)!\" [direction]=\"($direction | async)!\"\r\n  [dynamic]=\"($dynamicSize | async)!\" [divides]=\"($divides | async)!\" [isVertical]=\"($isVertical | async)!\"\r\n  [itemSize]=\"($actualItemSize | async)!\" [trackBy]=\"($trackBy | async)!\" [itemRenderer]=\"($itemRenderer | async)!\"\r\n  [startOffset]=\"($startOffset | async)!\" [endOffset]=\"($endOffset | async)!\"\r\n  [scrollbarEnabled]=\"(scroller.$scrollbarShow | async)!\"\r\n  [enabled]=\"($prerenderEnabled | async)!\"></ng-prerender-container>\r\n\r\n<ng-container *ngIf=\"($stickyEnabled | async)!\">\r\n  <div localeSensitive [langTextDir]=\"($langTextDir | async)!\" #snappedContainer class=\"ngvl__snapped-container\"\r\n    [ngClass]=\"($classes | async)\">\r\n    <div #snapped part=\"snapped-item\" class=\"ngvl__list-snapper\">\r\n      <ng-container #snapRendererContainer></ng-container>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-scroller #scroller class=\"ngvl__list-scroller\" [classes]=\"($classes | async)!\"\r\n  [langTextDir]=\"($langTextDir | async)!\" [startOffset]=\"($startOffset | async)!\" [endOffset]=\"($endOffset | async)!\"\r\n  [alignmentStartOffset]=\"($alignmentScrollStartOffset | async)!\"\r\n  [alignmentEndOffset]=\"($alignmentScrollEndOffset | async)!\" [direction]=\"($direction | async)!\"\r\n  [scrollbarThumbRenderer]=\"($scrollbarThumbRenderer | async)!\" [isInfinity]=\"($isInfinity | async)!\"\r\n  [scrollbarThickness]=\"($scrollbarThickness | async)!\" [scrollbarThumbParams]=\"($scrollbarThumbParams | async)!\"\r\n  [animationParams]=\"($animationParams | async)!\" [focusedElement]=\"($focusedElement | async)!\"\r\n  [loading]=\"($loading | async)!\" [overscrollEnabled]=\"($overscrollEnabled | async)!\"\r\n  [snappingDistance]=\"($snappingDistance | async)!\" [overlappingScrollbar]=\"($overlappingScrollbar | async)!\"\r\n  [scrollbarEnabled]=\"($actualScrollbarEnabled | async)!\" [scrollbarInteractive]=\"($scrollbarInteractive | async)!\"\r\n  [snapToItem]=\"($snapToItem | async)!\" [snapToItemAlign]=\"($snapToItemAlign | async)!\"\r\n  [scrollbarMinSize]=\"($scrollbarMinSize | async)!\" [scrollBehavior]=\"($scrollBehavior | async)!\"\r\n  [scrollingSettings]=\"($scrollingSettings | async)!\" [scrollingOneByOne]=\"($scrollingOneByOne | async)!\"\r\n  [motionBlur]=\"($motionBlur | async)!\" [maxMotionBlur]=\"($maxMotionBlur | async)!\"\r\n  [motionBlurEnabled]=\"($motionBlurEnabled | async)!\">\r\n  <ng-container #renderersContainer></ng-container>\r\n</ng-scroller>", styles: [":host{position:relative;display:block;width:400px;overflow:hidden}:host(.horizontal){height:48px}:host(.vertical){height:320px}.ngvl__snapped-container{position:relative;width:100%;opacity:0}.ngvl__snapped-container.prepared{opacity:1}.ngvl__list-snapper{-webkit-tap-highlight-color:transparent;position:absolute;list-style:none;left:0;top:0;z-index:1}.ngvl__list-scroller{-webkit-tap-highlight-color:transparent;position:absolute;left:0;top:0;width:100%;height:100%;z-index:0}.ngvl__screen-reader{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { _prerender: [{
                 type: ViewChild,
                 args: ['prerender', { read: NgPrerenderContainer }]