ng-virtual-list 20.12.0-beta-09 → 20.12.1

package/README.md

@@ -4,7 +4,7 @@
 
 ⚡A powerful API for implementing lists of varying functionality and complexity.
 
-✨Flexible, and actively maintained Angular library that excels with high-performance, feature-rich virtualized lists—including grouping, sticky headers, snapping, animations, collapsing group elements, single and multiple selection of elements and both scroll directions, lists with scrolling bindings for elements, galleries of varying complexity, including 3D transformations of elements and effects such as MotionBlur, DOF ​​(Depth Of Field) and Fog. Whether you're rendering millions of items or building interactive list components, it delivers scalability and customization. Angular (14–21) compatibility.
+✨Flexible, and actively maintained Angular library that excels with high-performance, feature-rich virtualized lists—including grouping, sticky headers, snapping, animations, collapsing group elements, single and multiple selection of elements and both scroll directions, lists with scrolling bindings for elements, galleries of varying complexity, including 3D transformations of elements and effects such as MotionBlur, DOF ​​(Depth Of Field) and Fog. Whether you're rendering millions of items or building interactive list components, it delivers scalability and customization. Angular (14–22) compatibility.
 
 🧬The main advantage of this solution is the elimination of the "empty spaces" effect during fast scrolling, which occurs in the classic implementation of virtualized lists. Visualization is as close as possible to native lists.
 
@@ -20,7 +20,7 @@
 ![npm downloads](https://img.shields.io/npm/dm/ng-virtual-list)
 ![npm total downloads](https://img.shields.io/npm/dt/ng-virtual-list)
 
-[Documentation](https://ng-virtual-list-x12.eugene-grebennikov.pro/)
+[Documentation](https://ng-virtual-list.eugene-grebennikov.pro/)
 
 <br/>
 
@@ -612,11 +612,7 @@ Inputs
 | itemSize | number \| 'viewport' = 24 | If direction = 'vertical', then the height of a typical element. If direction = 'horizontal', then the width of a typical element. If the dynamicSize property is true, the items in the list can have different sizes, and you must specify the itemSize property to adjust the sizes of the items in the unallocated area. If the value is 'viewport', the sizes of elements are automatically resized to fit the viewport size. |
 | itemTransform | [ItemTransform](https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/types/item-transform.ts) \| null = null | Custom transformation of element's position, rotation, scale, opacity and zIndex. The default value is `null`. |
 | itemRenderer | TemplateRef | Rendering element template. |
-| itemConfigMap | [IVirtualListItemConfigMap?](https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/models/item-config-map.model.ts) | Sets `sticky` position, `fullSize`, `collapsable` and `selectable` for the list item element. If `sticky` position is greater than `0`, then `sticky` position is applied. 
-   If the `sticky` value is greater than `0`, then the `sticky` position mode is enabled for the element. `1` - position start, `2` - position end. Default value is `0`.
-   `selectable` determines whether an element can be selected or not. Default value is `true`.
-   `collapsable` determines whether an element with a `sticky` property greater than zero can collapse and collapse elements in front that do not have a `sticky` property.
-   `fullSize` determines the size of an element when rendering lists with cell divisions. If sticky is 1 or 2, fullSize automatically becomes true. The default value is false. |
+| itemConfigMap | [IVirtualListItemConfigMap?](https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/models/item-config-map.model.ts) | Sets `sticky` position, `fullSize`, `collapsable` and `selectable` for the list item element. If `sticky` position is greater than `0`, then `sticky` position is applied. If the `sticky` value is greater than `0`, then the `sticky` position mode is enabled for the element. `1` - position start, `2` - position end. Default value is `0`. `selectable` determines whether an element can be selected or not. Default value is `true`. `collapsable` determines whether an element with a `sticky` property greater than zero can collapse and collapse elements in front that do not have a `sticky` property. `fullSize` determines the size of an element when rendering lists with cell divisions. If sticky is 1 or 2, fullSize automatically becomes true. The default value is false. |
 | langTextDir | [TextDirection? = 'ltr'](https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/enums/text-direction.ts) | A string indicating the direction of text for the locale. Can be either "ltr" (left-to-right) or "rtl" (right-to-left). |
 | loading | boolean? = false | If `true`, the scrollBar goes into loading state. The default value is `false`. |
 | maxBufferSize | number? = 10 | Maximum number of elements outside the scope of visibility. Default value is 10. If maxBufferSize is set to be greater than bufferSize, then adaptive buffer mode is enabled. The greater the scroll size, the more elements are allocated for rendering. |
@@ -705,7 +701,7 @@ Properties
 
 <br/>
 
-### [VirtualClickModule](https://github.com/DjonnyX/ng-virtual-list/blob/18.x/projects/ng-virtual-list/src/lib/directives/item-click/item-click.module.ts)
+### [VirtualClickModule](https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/directives/item-click/item-click.module.ts)
 
 ### Virtual click directive
 
@@ -730,12 +726,6 @@ import { NgVirtualListModule, VirtualClickModule } from 'ng-virtual-list';
 </ng-template>
 ```
 
-## 🤝 Contributing
-
-PRs and feature requests are welcome!
-Open an issue or start a discussion to shape the future of [ng-virtual-list](https://github.com/DjonnyX/ng-virtual-list/).
-Try it out, star ⭐ the repo, and let us know what you’re building.
-
 <br/>
 
 ## 📄 License

package/fesm2022/ng-virtual-list.mjs

@@ -1399,7 +1399,7 @@ const DEFAULT_MAX_DISTANCE = 40;
  * VirtualClickDirective
  * Maximum performance for extremely large lists.
  * It is based on algorithms for virtualization of screen objects.
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/18.x/projects/ng-virtual-list/src/lib/directives/item-click/item-click.directive.ts
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/directives/item-click/item-click.directive.ts
  * @author Evgenii Alexandrovich Grebennikov
  * @email djonnyx@gmail.com
  */
@@ -1626,14 +1626,14 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
         this._service.virtualClick(this._data);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgVirtualListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: NgVirtualListItemComponent, isStandalone: false, selector: "ng-virtual-list-item", host: { attributes: { "role": "listitem" }, classAttribute: "ngvl__item" }, usesInheritance: true, ngImport: i0, template: "@let renderer = itemRenderer();\r\n@let class = classes();\r\n<div #item class=\"ngvl-item\" [ngClass]=\"class\" [attr.ngvl-index]=\"index()\" [attr.ngvl-visibility]=\"visibility\" tabindex=\"-1\">\r\n    @if (_blendColor) {\r\n        <div class=\"ngvl-item__blend-color\" [style.--blend-color]=\"_blendColor\"></div>\r\n    }\r\n    <div #container virtualClick [part]=\"fxPart()\" [maxClickDistance]=\"maxClickDistance()\" class=\"ngvl-item__container\"\r\n        [ngClass]=\"class\" (onVirtualClick)=\"onClickHandler()\">\r\n        @if (renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\" [ngTemplateOutletContext]=\"templateContext()\" />\r\n        }\r\n    </div>\r\n</div>", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none;-moz-user-drag:none;text-rendering:optimizeSpeed;image-rendering:auto}.ngvl-item{position:relative;margin:0;padding:0;overflow:hidden;outline:none;width:inherit;height:inherit;box-sizing:border-box}.ngvl-item__blend-color{position:absolute;left:0;top:0;width:100%;height:100%;background-color:var(--blend-color);z-index:-1}.ngvl-item__container{margin:0;padding:0;width:100%;height:100%;box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: VirtualClickDirective, selector: "[virtualClick]", inputs: ["maxClickDistance"], outputs: ["onVirtualClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: NgVirtualListItemComponent, isStandalone: false, selector: "ng-virtual-list-item", host: { attributes: { "role": "listitem" }, classAttribute: "ngvl__item" }, usesInheritance: true, ngImport: i0, template: "@let renderer = itemRenderer();\r\n@let class = classes();\r\n<div #item class=\"ngvl-item\" [ngClass]=\"class\" [part]=\"part()\" [attr.ngvl-index]=\"index()\" [attr.ngvl-visibility]=\"visibility\" tabindex=\"-1\">\r\n    @if (_blendColor) {\r\n        <div class=\"ngvl-item__blend-color\" [style.--blend-color]=\"_blendColor\"></div>\r\n    }\r\n    <div #container virtualClick [part]=\"fxPart()\" [maxClickDistance]=\"maxClickDistance()\" class=\"ngvl-item__container\"\r\n        [ngClass]=\"class\" (onVirtualClick)=\"onClickHandler()\">\r\n        @if (renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\" [ngTemplateOutletContext]=\"templateContext()\" />\r\n        }\r\n    </div>\r\n</div>", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none;-moz-user-drag:none;text-rendering:optimizeSpeed;image-rendering:auto}.ngvl-item{position:relative;margin:0;padding:0;overflow:hidden;outline:none;width:inherit;height:inherit;box-sizing:border-box}.ngvl-item__blend-color{position:absolute;left:0;top:0;width:100%;height:100%;background-color:var(--blend-color);z-index:-1}.ngvl-item__container{margin:0;padding:0;width:100%;height:100%;box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: VirtualClickDirective, selector: "[virtualClick]", inputs: ["maxClickDistance"], outputs: ["onVirtualClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgVirtualListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-virtual-list-item', host: {
                         'class': 'ngvl__item',
                         'role': 'listitem',
-                    }, standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let renderer = itemRenderer();\r\n@let class = classes();\r\n<div #item class=\"ngvl-item\" [ngClass]=\"class\" [attr.ngvl-index]=\"index()\" [attr.ngvl-visibility]=\"visibility\" tabindex=\"-1\">\r\n    @if (_blendColor) {\r\n        <div class=\"ngvl-item__blend-color\" [style.--blend-color]=\"_blendColor\"></div>\r\n    }\r\n    <div #container virtualClick [part]=\"fxPart()\" [maxClickDistance]=\"maxClickDistance()\" class=\"ngvl-item__container\"\r\n        [ngClass]=\"class\" (onVirtualClick)=\"onClickHandler()\">\r\n        @if (renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\" [ngTemplateOutletContext]=\"templateContext()\" />\r\n        }\r\n    </div>\r\n</div>", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none;-moz-user-drag:none;text-rendering:optimizeSpeed;image-rendering:auto}.ngvl-item{position:relative;margin:0;padding:0;overflow:hidden;outline:none;width:inherit;height:inherit;box-sizing:border-box}.ngvl-item__blend-color{position:absolute;left:0;top:0;width:100%;height:100%;background-color:var(--blend-color);z-index:-1}.ngvl-item__container{margin:0;padding:0;width:100%;height:100%;box-sizing:border-box}\n"] }]
+                    }, standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let renderer = itemRenderer();\r\n@let class = classes();\r\n<div #item class=\"ngvl-item\" [ngClass]=\"class\" [part]=\"part()\" [attr.ngvl-index]=\"index()\" [attr.ngvl-visibility]=\"visibility\" tabindex=\"-1\">\r\n    @if (_blendColor) {\r\n        <div class=\"ngvl-item__blend-color\" [style.--blend-color]=\"_blendColor\"></div>\r\n    }\r\n    <div #container virtualClick [part]=\"fxPart()\" [maxClickDistance]=\"maxClickDistance()\" class=\"ngvl-item__container\"\r\n        [ngClass]=\"class\" (onVirtualClick)=\"onClickHandler()\">\r\n        @if (renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\" [ngTemplateOutletContext]=\"templateContext()\" />\r\n        }\r\n    </div>\r\n</div>", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none;-moz-user-drag:none;text-rendering:optimizeSpeed;image-rendering:auto}.ngvl-item{position:relative;margin:0;padding:0;overflow:hidden;outline:none;width:inherit;height:inherit;box-sizing:border-box}.ngvl-item__blend-color{position:absolute;left:0;top:0;width:100%;height:100%;background-color:var(--blend-color);z-index:-1}.ngvl-item__container{margin:0;padding:0;width:100%;height:100%;box-sizing:border-box}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -1762,7 +1762,7 @@ class ScrollEvent {
 
 /**
  * Event emitter
- * @link https://github.com/DjonnyX/data-channel-router/blob/main/library/src/utils/event-emitter/event-emitter.ts
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/main/library/src/utils/event-emitter/event-emitter.ts
  * @author Evgenii Alexandrovich Grebennikov
  * @email djonnyx@gmail.com
  */
@@ -2065,7 +2065,7 @@ class Tracker {
         }
         const untrackedItems = [...components], newTrackItems = [], untrackedComponentsByTypeMap = {}, isDown = direction === 0 || direction === 1, snapped = !!snappedComponents ? [...snappedComponents] : [];
         let isRegularSnapped = false;
-        const serviceIdProp = getServiceIdProp(trackBy);
+        const serviceIdProp = getServiceIdProp(trackBy), snappedItems = new Array();
         for (let i = isDown ? 0 : items.length - 1, l = isDown ? items.length : 0; isDown ? i < l : i >= l; isDown ? i++ : i--) {
             const item = items[i], isDummy = item?.data?.[SERVICE_PROP_DUMMY] && (item?.data?.[SERVICE_PROP_DUMMY] === SERVICE_PROP_DUMMY_ENABLED);
             if (isDummy) {
@@ -2088,6 +2088,7 @@ class Tracker {
                                         isRegularSnapped = true;
                                         snappedComponent.instance.item = item;
                                         snappedComponent.instance.show();
+                                        snappedItems.push(snappedComponent);
                                     }
                                 }
                             }
@@ -2153,6 +2154,7 @@ class Tracker {
                             if (!!snappedComponent) {
                                 snappedComponent.instance.item = item;
                                 snappedComponent.instance.show();
+                                snappedItems.push(snappedComponent);
                             }
                         }
                     }
@@ -2183,13 +2185,14 @@ class Tracker {
                 comp.instance.hide();
             }
         }
-        if (!isRegularSnapped) {
-            for (let i = 0, l = snapped.length; i < l; i++) {
-                const snappedComponent = snapped[i];
-                if (!!snappedComponent) {
-                    snappedComponent.instance.item = null;
-                    snappedComponent.instance.hide();
-                }
+        for (let i = 0, l = snapped.length; i < l; i++) {
+            const snappedComponent = snapped[i];
+            if (snappedItems.indexOf(snappedComponent) > -1) {
+                continue;
+            }
+            if (!!snappedComponent) {
+                snappedComponent.instance.item = null;
+                snappedComponent.instance.hide();
             }
         }
     }
@@ -2669,7 +2672,7 @@ class TrackBox extends CacheMap {
      * Calculates list metrics
      */
     recalculateMetrics(options) {
-        const { 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, 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;
@@ -2809,15 +2812,17 @@ class TrackBox extends CacheMap {
                         }
                         if (id == fromItemId) {
                             isFromItemIdFound = true;
-                            const { num, offset } = this.getElementNumToEnd(i, collection, map, typicalItemSize, size, isVertical), leftViewportSize = size - offset;
-                            if (leftViewportSize > 0) {
-                                const { num: num1, offset: offset1 } = this.getElementNumToEnd(i + num, collection, map, typicalItemSize, size, isVertical, 0, true), deltaNum = (num1 - num), deltaOffset = (offset1 - offset);
-                                totalItemsToDisplayEndWeight += offset;
-                                itemsFromStartToScrollEnd -= deltaNum;
-                                rightItemsWeight = rightItemLength = 0;
-                                leftHiddenItemsWeight -= deltaOffset;
-                                leftItemsOrRowsWeights.splice(leftItemsOrRowsWeights.length - deltaNum, deltaNum);
-                                y -= deltaOffset;
+                            if (alignment !== Alignments.CENTER) {
+                                const { num, offset } = this.getElementNumToEnd(i, collection, map, typicalItemSize, size, isVertical), leftViewportSize = size - offset;
+                                if (leftViewportSize > 0) {
+                                    const { num: num1, offset: offset1 } = this.getElementNumToEnd(i + num, collection, map, typicalItemSize, size, isVertical, 0, true), deltaNum = (num1 - num), deltaOffset = (offset1 - offset);
+                                    totalItemsToDisplayEndWeight += offset;
+                                    itemsFromStartToScrollEnd -= deltaNum;
+                                    rightItemsWeight = rightItemLength = 0;
+                                    leftHiddenItemsWeight -= deltaOffset;
+                                    leftItemsOrRowsWeights.splice(leftItemsOrRowsWeights.length - deltaNum, deltaNum);
+                                    y -= deltaOffset;
+                                }
                             }
                             itemById = collectionItem;
                             itemByIdPos = y;
@@ -3004,7 +3009,7 @@ class TrackBox extends CacheMap {
             rightItemsWeight = Math.floor(rightItemLength * dividedTypicalItemSize / typicalItemSize) * typicalItemSize;
             leftHiddenItemsWeight = Math.floor(itemsFromStartToScrollEnd * dividedTypicalItemSize / typicalItemSize) * typicalItemSize;
             totalItemsToDisplayEndWeight = Math.floor(itemsFromStartToDisplayEnd * dividedTypicalItemSize / typicalItemSize) * typicalItemSize;
-            totalSize = (totalLength * dividedTypicalItemSize) + this._scrollStartOffset + this._scrollEndOffset;
+            totalSize = (Math.ceil(totalLength / divides) * divides * dividedTypicalItemSize) + this._scrollStartOffset + this._scrollEndOffset;
             const k = totalSize !== 0 ? previousTotalSize / totalSize : 0;
             if (isFromId) {
                 const index = collection.findIndex(item => item[trackBy] == fromItemId);
@@ -3380,7 +3385,7 @@ class TrackBox extends CacheMap {
                 }
                 if (!isDummy) {
                     if ((isSnappingMethodAdvanced || id !== stickyItem?.id) && id !== endStickyItem?.id) {
-                        const isOdd = (items.length - layoutIndexOffset + i) % 2 != 0, sticky = itemConfigMap[id]?.sticky ?? 0, fullSize = itemConfigMap[id]?.fullSize ?? false, selectable = itemConfigMap[id]?.selectable ?? true, collapsable = itemConfigMap[id]?.collapsable ?? false, snapped = stickyEnabled && (sticky === 1 && (pos <= scrollSize + this._scrollStartOffset) || sticky === 2 && (pos >= scrollSize + boundsSize - size)), absoluteStartPosition = pos - scrollSize, ratio = size !== 0 ? boundsSize / size : 0, absoluteStartPositionPercent = -(boundsSize !== 0 ? absoluteStartPosition / boundsSize : 0) * ratio, absoluteEndPosition = boundsSize - (absoluteStartPositionPercent + size), absoluteEndPositionPercent = (absoluteStartPositionPercent + (boundsSize !== 0 ? (absoluteEndPosition + size) / boundsSize : 0) * ratio), x = isVertical ? divSize * ((sticky || fullSize) ? 0 : ci) : pos, y = isVertical ? pos : divSize * ((sticky || fullSize) ? 0 : ci), measures = {
+                        const isOdd = (items.length - layoutIndexOffset + i) % 2 != 0, sticky = itemConfigMap[id]?.sticky ?? 0, fullSize = itemConfigMap[id]?.fullSize ?? false, selectable = itemConfigMap[id]?.selectable ?? true, collapsable = itemConfigMap[id]?.collapsable ?? false, snapped = stickyEnabled && ((sticky === 1 && (pos <= scrollSize + this._scrollStartOffset)) || (sticky === 2 && (pos >= scrollSize + boundsSize - size))), absoluteStartPosition = pos - scrollSize, ratio = size !== 0 ? boundsSize / size : 0, absoluteStartPositionPercent = -(boundsSize !== 0 ? absoluteStartPosition / boundsSize : 0) * ratio, absoluteEndPosition = boundsSize - (absoluteStartPositionPercent + size), absoluteEndPositionPercent = (absoluteStartPositionPercent + (boundsSize !== 0 ? (absoluteEndPosition + size) / boundsSize : 0) * ratio), x = isVertical ? divSize * ((sticky || fullSize) ? 0 : ci) : pos, y = isVertical ? pos : divSize * ((sticky || fullSize) ? 0 : ci), measures = {
                             x,
                             y,
                             transformedX: x,
@@ -3408,7 +3413,7 @@ class TrackBox extends CacheMap {
                             maxWidth: maxItemSize,
                             maxHeight: maxItemSize,
                             scrollDirection,
-                            delta: sticky === 1 ? actualSnippedPosition : sticky === 2 ? actualEndSnippedPosition - deltaOffet - size : 0,
+                            delta: sticky === 1 ? actualSnippedPosition : (sticky === 2 ? (actualEndSnippedPosition - deltaOffet - size) : 0),
                         }, config = {
                             isFirst: i === layoutIndexOffset,
                             isLast: i === li,
@@ -3418,7 +3423,7 @@ class TrackBox extends CacheMap {
                             isVertical,
                             collapsable,
                             selectable,
-                            sticky: sticky,
+                            sticky,
                             snap: stickyEnabled,
                             snapped: false,
                             snappedOut: false,
@@ -3471,9 +3476,9 @@ class TrackBox extends CacheMap {
                 i++;
             }
             const axis = isVertical ? Y_PROP_NAME : X_PROP_NAME;
-            if (!!nextSticky && !!stickyItem && nextSticky.measures[axis] <= actualSnippedPosition + stickyItemSize) {
-                if (nextSticky.measures[axis] > scrollSize - stickyItemSize) {
-                    stickyItem.measures[axis] = nextSticky.measures[axis] - stickyItemSize;
+            if (!!nextSticky && !!stickyItem && nextSticky.measures[axis] <= actualSnippedPosition + stickyItem.measures[sizeProperty]) {
+                if (nextSticky.measures[axis] > actualSnippedPosition) {
+                    stickyItem.measures[axis] = nextSticky.measures[axis] - stickyItem.measures[sizeProperty];
                     stickyItem.config.snapped = nextSticky.config.snapped = false;
                     stickyItem.config.snappedOut = true;
                     stickyItem.config.sticky = 1;
@@ -3482,7 +3487,8 @@ class TrackBox extends CacheMap {
                 else {
                     nextSticky.config.snapped = true;
                     nextSticky.measures.delta = (isVertical ? nextSticky.measures.y : nextSticky.measures.x) - scrollSize;
-                    stickyItem.measures[axis] = stickyItem.measures[axis] + stickyItem.measures[sizeProperty];
+                    stickyItem.measures[axis] = nextSticky.measures[axis] - stickyItem.measures[sizeProperty];
+                    stickyItem.measures.delta = (isVertical ? stickyItem.measures.y : stickyItem.measures.x) - scrollSize;
                 }
             }
             if (!!nextEndSticky && !!endStickyItem &&
@@ -3499,6 +3505,7 @@ class TrackBox extends CacheMap {
                     nextEndSticky.measures[axis] = actualEndSnippedPosition - nextEndSticky.measures[sizeProperty];
                     nextEndSticky.measures.delta = (isVertical ? nextEndSticky.measures.y : nextEndSticky.measures.x) - scrollSize;
                     endStickyItem.measures[axis] = nextEndSticky.measures[axis] + nextEndSticky.measures[sizeProperty];
+                    endStickyItem.measures.delta = (isVertical ? endStickyItem.measures.y : endStickyItem.measures.x) - scrollSize;
                 }
             }
             if (itemTransform !== null) {
@@ -3556,10 +3563,10 @@ class TrackBox extends CacheMap {
         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;
-                if (isVertical && comp.instance.zIndex !== Z_INDEX_NONE && (pos >= y && pos < y + height)) {
+                if (isVertical && (pos >= y && pos < y + height)) {
                     return { id, x, y, width, height, isFirst, isLast };
                 }
-                else if (!isVertical && comp.instance.zIndex !== Z_INDEX_NONE && (pos >= x && pos < x + width)) {
+                else if (!isVertical && (pos >= x && pos < x + width)) {
                     return { id, x, y, width, height, isFirst, isLast };
                 }
                 if (isFirst) {
@@ -3954,7 +3961,7 @@ const easeLinear = (t) => {
 
 /**
  * Animator
- * @link https://github.com/DjonnyX/data-channel-router/blob/main/library/src/utils/animator/animator.ts
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/main/library/src/utils/animator/animator.ts
  * @author Evgenii Alexandrovich Grebennikov
  * @email djonnyx@gmail.com
  */
@@ -4826,7 +4833,7 @@ class NgScrollView extends BaseScrollView {
     }
     animate(startValue, endValue, duration = ANIMATION_DURATION, easingFunction = easeOutQuad, userAction = false, alignmentAtComplete = true, skipOverridedCoordinates = false) {
         const isVertical = this.isVertical();
-        let iteration = 0, position = startValue;
+        let position = startValue;
         this._isAlignmentAnimation = !alignmentAtComplete;
         this._animator.animate({
             withDelta: this._service.dynamic && !this.isInfinity(),
@@ -4843,17 +4850,16 @@ class NgScrollView extends BaseScrollView {
                     this.animate(currentCoordinate, currentCoordinate + delta, duration - elapsed, easingFunction, userAction, alignmentAtComplete);
                     return;
                 }
-                const v0 = calculateVelocity(position, value, timestamp) ?? this.averageVelocity;
+                const v0 = calculateVelocity(position, value - this._delta, timestamp) ?? this.averageVelocity;
                 position = value;
                 if (alignmentAtComplete && !this._isAlignmentAnimation && !skipOverridedCoordinates) {
-                    if (iteration < MAX_ITERATIONS_FOR_AVERAGE_CALCULATIONS || !this.snapIfNecessary(v0)) {
+                    if (!this.snapIfNecessary(v0)) {
                         this.move(isVertical, value, false, userAction);
                     }
                 }
                 else {
                     this.move(isVertical, value, false, userAction);
                 }
-                iteration++;
                 this._service.update(true);
             }, onComplete: ({ value, timestamp }) => {
                 this._isAlignmentAnimation = false;
@@ -4905,10 +4911,9 @@ class NgScrollView extends BaseScrollView {
         return size;
     }
     alignPosition(animated = true, force = false) {
-        if (!this.snapToItem() || this._isAlignmentAnimation) {
+        if (!this.snapToItem() || (this._isAlignmentAnimation && !force)) {
             return false;
         }
-        this.stopScrolling(true);
         const scrollDirection = this._scrollDirection.get() || (force ? 1 : 0);
         if (scrollDirection === 0) {
             return false;
@@ -5323,7 +5328,7 @@ const RIGHT = 'right', DIR = 'dir';
  * LocaleSensitiveDirective
  * Maximum performance for extremely large lists.
  * It is based on algorithms for virtualization of screen objects.
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/18.x/projects/ng-virtual-list/src/lib/directives/locale-sensitive/locale-sensitive.directive.ts
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/directives/locale-sensitive/locale-sensitive.directive.ts
  * @author Evgenii Alexandrovich Grebennikov
  * @email djonnyx@gmail.com
  */
@@ -5919,10 +5924,10 @@ class PrerenderTrackBox extends EventEmitter {
 }
 
 /**
- * Virtual list component.
+ * NgPrerenderVirtualListItemComponent
  * Maximum performance for extremely large lists.
  * It is based on algorithms for virtualization of screen objects.
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/components/ng-prerender-container/components/ng-prerender-list-item.component.ts
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/components/ng-prerender-container/components/ng-prerender-list-item/ng-prerender-list-item.component.ts
  * @author Evgenii Alexandrovich Grebennikov
  * @email djonnyx@gmail.com
  */
@@ -5997,21 +6002,21 @@ class NgPrerenderVirtualListItemComponent extends NgVirtualListItemComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgPrerenderVirtualListItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: NgPrerenderVirtualListItemComponent, isStandalone: false, selector: "ng-prerender-virtual-list-item", host: { attributes: { "role": "listitem" }, classAttribute: "ngvl__item" }, usesInheritance: true, ngImport: i0, template: "@let renderer = itemRenderer();\r\n@let class = classes();\r\n<div #item class=\"ngvl-item\" [ngClass]=\"class\" [attr.ngvl-index]=\"index()\" [attr.ngvl-visibility]=\"visibility\" tabindex=\"-1\">\r\n    @if (_blendColor) {\r\n        <div class=\"ngvl-item__blend-color\" [style.--blend-color]=\"_blendColor\"></div>\r\n    }\r\n    <div #container virtualClick [part]=\"fxPart()\" [maxClickDistance]=\"maxClickDistance()\" class=\"ngvl-item__container\"\r\n        [ngClass]=\"class\" (onVirtualClick)=\"onClickHandler()\">\r\n        @if (renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\" [ngTemplateOutletContext]=\"templateContext()\" />\r\n        }\r\n    </div>\r\n</div>", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none;-moz-user-drag:none;text-rendering:optimizeSpeed;image-rendering:auto}.ngvl-item{position:relative;margin:0;padding:0;overflow:hidden;outline:none;width:inherit;height:inherit;box-sizing:border-box}.ngvl-item__blend-color{position:absolute;left:0;top:0;width:100%;height:100%;background-color:var(--blend-color);z-index:-1}.ngvl-item__container{margin:0;padding:0;width:100%;height:100%;box-sizing:border-box}\n", ":host{display:block;position:absolute!important;left:0;top:0;box-sizing:border-box;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none;-moz-user-drag:none;pointer-events:none;-webkit-user-select:none;user-select:none;text-rendering:optimizeSpeed;image-rendering:pixelated}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: VirtualClickDirective, selector: "[virtualClick]", inputs: ["maxClickDistance"], outputs: ["onVirtualClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: NgPrerenderVirtualListItemComponent, isStandalone: false, selector: "ng-prerender-virtual-list-item", host: { attributes: { "role": "listitem" }, classAttribute: "ngvl__item" }, usesInheritance: true, ngImport: i0, template: "@let renderer = itemRenderer();\r\n@let class = classes();\r\n<div #item class=\"ngvl-item\" [ngClass]=\"class\" [part]=\"part()\" [attr.ngvl-index]=\"index()\" [attr.ngvl-visibility]=\"visibility\" tabindex=\"-1\">\r\n    @if (_blendColor) {\r\n        <div class=\"ngvl-item__blend-color\" [style.--blend-color]=\"_blendColor\"></div>\r\n    }\r\n    <div #container virtualClick [part]=\"fxPart()\" [maxClickDistance]=\"maxClickDistance()\" class=\"ngvl-item__container\"\r\n        [ngClass]=\"class\" (onVirtualClick)=\"onClickHandler()\">\r\n        @if (renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\" [ngTemplateOutletContext]=\"templateContext()\" />\r\n        }\r\n    </div>\r\n</div>", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none;-moz-user-drag:none;text-rendering:optimizeSpeed;image-rendering:auto}.ngvl-item{position:relative;margin:0;padding:0;overflow:hidden;outline:none;width:inherit;height:inherit;box-sizing:border-box}.ngvl-item__blend-color{position:absolute;left:0;top:0;width:100%;height:100%;background-color:var(--blend-color);z-index:-1}.ngvl-item__container{margin:0;padding:0;width:100%;height:100%;box-sizing:border-box}\n", ":host{display:block;position:absolute!important;left:0;top:0;box-sizing:border-box;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none;-moz-user-drag:none;pointer-events:none;-webkit-user-select:none;user-select:none;text-rendering:optimizeSpeed;image-rendering:pixelated}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: VirtualClickDirective, selector: "[virtualClick]", inputs: ["maxClickDistance"], outputs: ["onVirtualClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgPrerenderVirtualListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-prerender-virtual-list-item', host: {
                         'class': 'ngvl__item',
                         'role': 'listitem',
-                    }, standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let renderer = itemRenderer();\r\n@let class = classes();\r\n<div #item class=\"ngvl-item\" [ngClass]=\"class\" [attr.ngvl-index]=\"index()\" [attr.ngvl-visibility]=\"visibility\" tabindex=\"-1\">\r\n    @if (_blendColor) {\r\n        <div class=\"ngvl-item__blend-color\" [style.--blend-color]=\"_blendColor\"></div>\r\n    }\r\n    <div #container virtualClick [part]=\"fxPart()\" [maxClickDistance]=\"maxClickDistance()\" class=\"ngvl-item__container\"\r\n        [ngClass]=\"class\" (onVirtualClick)=\"onClickHandler()\">\r\n        @if (renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\" [ngTemplateOutletContext]=\"templateContext()\" />\r\n        }\r\n    </div>\r\n</div>", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none;-moz-user-drag:none;text-rendering:optimizeSpeed;image-rendering:auto}.ngvl-item{position:relative;margin:0;padding:0;overflow:hidden;outline:none;width:inherit;height:inherit;box-sizing:border-box}.ngvl-item__blend-color{position:absolute;left:0;top:0;width:100%;height:100%;background-color:var(--blend-color);z-index:-1}.ngvl-item__container{margin:0;padding:0;width:100%;height:100%;box-sizing:border-box}\n", ":host{display:block;position:absolute!important;left:0;top:0;box-sizing:border-box;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none;-moz-user-drag:none;pointer-events:none;-webkit-user-select:none;user-select:none;text-rendering:optimizeSpeed;image-rendering:pixelated}\n"] }]
+                    }, standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let renderer = itemRenderer();\r\n@let class = classes();\r\n<div #item class=\"ngvl-item\" [ngClass]=\"class\" [part]=\"part()\" [attr.ngvl-index]=\"index()\" [attr.ngvl-visibility]=\"visibility\" tabindex=\"-1\">\r\n    @if (_blendColor) {\r\n        <div class=\"ngvl-item__blend-color\" [style.--blend-color]=\"_blendColor\"></div>\r\n    }\r\n    <div #container virtualClick [part]=\"fxPart()\" [maxClickDistance]=\"maxClickDistance()\" class=\"ngvl-item__container\"\r\n        [ngClass]=\"class\" (onVirtualClick)=\"onClickHandler()\">\r\n        @if (renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\" [ngTemplateOutletContext]=\"templateContext()\" />\r\n        }\r\n    </div>\r\n</div>", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none;-moz-user-drag:none;text-rendering:optimizeSpeed;image-rendering:auto}.ngvl-item{position:relative;margin:0;padding:0;overflow:hidden;outline:none;width:inherit;height:inherit;box-sizing:border-box}.ngvl-item__blend-color{position:absolute;left:0;top:0;width:100%;height:100%;background-color:var(--blend-color);z-index:-1}.ngvl-item__container{margin:0;padding:0;width:100%;height:100%;box-sizing:border-box}\n", ":host{display:block;position:absolute!important;left:0;top:0;box-sizing:border-box;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none;-moz-user-drag:none;pointer-events:none;-webkit-user-select:none;user-select:none;text-rendering:optimizeSpeed;image-rendering:pixelated}\n"] }]
         }] });
 
 /**
- * PrerenderScrollerComponent.
+ * NgPrerenderScrollerComponent
  * Maximum performance for extremely large lists.
  * It is based on algorithms for virtualization of screen objects.
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/components/prerender-container/prerender-scroller/prerender-scroller.component.ts
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/components/ng-prerender-container/components/ng-prerender-scroller/ng-prerender-scroller.component.ts
  * @author Evgenii Alexandrovich Grebennikov
  * @email djonnyx@gmail.com
  */
@@ -6115,10 +6120,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
             }], scrollbarEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollbarEnabled", required: false }] }], classes: [{ type: i0.Input, args: [{ isSignal: true, alias: "classes", required: false }] }] } });
 
 /**
- * PrerenderList.
+ * NgPrerenderList
  * Maximum performance for extremely large lists.
  * It is based on algorithms for virtualization of screen objects.
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/prerender-container/components/prerender-list/prerender-list.component.ts
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/components/ng-prerender-container/components/ng-prerender-list/ng-prerender-list.component.ts
  * @author Evgenii Alexandrovich Grebennikov
  * @email djonnyx@gmail.com
  */
@@ -6261,10 +6266,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
             }], enabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "enabled", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], isVertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "isVertical", required: false }] }], scrollbarEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollbarEnabled", required: false }] }], startOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "startOffset", required: false }] }], endOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "endOffset", required: false }] }], bounds: [{ type: i0.Input, args: [{ isSignal: true, alias: "bounds", required: true }] }], dynamic: [{ type: i0.Input, args: [{ isSignal: true, alias: "dynamic", required: false }] }], itemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemSize", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], divides: [{ type: i0.Input, args: [{ isSignal: true, alias: "divides", required: false }] }], itemRenderer: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemRenderer", required: false }] }], itemComponentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemComponentClass", required: false }] }] } });
 
 /**
- * Prerender container.
+ * NgPrerenderContainer
  * Maximum performance for extremely large lists.
  * It is based on algorithms for virtualization of screen objects.
- * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/ng-prerender-container/ng-prerender-container.component.ts
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/components/ng-prerender-container/ng-prerender-container.component.ts
  * @author Evgenii Alexandrovich Grebennikov
  * @email djonnyx@gmail.com
  */
@@ -7519,7 +7524,10 @@ class NgVirtualListComponent {
             this._$initialized.next(true);
         })).subscribe();
         this._service.initialize(this._id, this._trackBox);
-        this._service.animationParams = this.animationParams();
+        const $animationParams = toObservable(this.animationParams);
+        $animationParams.pipe(takeUntilDestroyed(), tap(v => {
+            this._service.animationParams = v;
+        })).subscribe();
         this._isInfinity = computed(() => {
             const mode = this.spreadingMode();
             return isSpreadingMode(mode, SpreadingModes.INFINITY);
@@ -8089,7 +8097,7 @@ class NgVirtualListComponent {
             this._isLoading = false;
         })).subscribe();
         const update = (params) => {
-            const { alignment, precalculatedScrollStartOffset, precalculatedScrollEndOffset, trackBy, isInfinity, snapScrollToStart, snapScrollToEnd, bounds, listBounds, scrollEndOffset, items, itemConfigMap, scrollSize, itemSize, minItemSize, maxItemSize, divides, bufferSize, maxBufferSize, stickyEnabled, isVertical, dynamicSize, enabledBufferOptimization, snapToItem, snapToItemAlign, cacheVersion, userAction, collapsedIds, itemTransform, } = params;
+            const { alignment, snapScrollToStart, snapScrollToEnd, bounds, items, itemConfigMap, scrollSize, itemSize, minItemSize, maxItemSize, bufferSize, maxBufferSize, stickyEnabled, isVertical, dynamicSize, enabledBufferOptimization, snapToItem, snapToItemAlign, userAction, collapsedIds, itemTransform, } = params;
             const scroller = this._scrollerComponent();
             let totalSize = 0;
             if (!!scroller) {
@@ -8099,7 +8107,7 @@ class NgVirtualListComponent {
                     let actualScrollSize = !this._readyForShow && snapScrollToEnd ? (isVertical ? scroller.scrollHeight : scroller.scrollWidth) :
                         (isVertical ? scroller.scrollTop : scroller.scrollLeft), leftLayoutOffset = 0, displayItems;
                     const { width, height } = bounds, viewportSize = (isVertical ? height : width), opts = {
-                        bounds: { width, height }, dynamicSize, isVertical, itemSize, minItemSize, maxItemSize, bufferSize, maxBufferSize,
+                        alignment, bounds: { width, height }, dynamicSize, isVertical, itemSize, minItemSize, maxItemSize, bufferSize, maxBufferSize,
                         scrollSize: actualScrollSize, stickyEnabled, enabledBufferOptimization, snapToItem, snapToItemAlign, itemTransform,
                     };
                     if (snapScrollToEnd && !this._readyForShow) {
@@ -8107,12 +8115,24 @@ class NgVirtualListComponent {
                         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 });
+                            displayItems = calculatedDisplayItems;
+                            totalSize = calculatedTotalSize1;
+                            leftLayoutOffset = leftLayoutOffset1;
+                        }
                     }
                     else {
                         const { displayItems: calculatedDisplayItems, totalSize: calculatedTotalSize, leftLayoutOffset: leftLayoutOffset1 } = this._trackBox.updateCollection(items, itemConfigMap, opts);
                         displayItems = calculatedDisplayItems;
                         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 });
+                            displayItems = calculatedDisplayItems;
+                            totalSize = calculatedTotalSize;
+                            leftLayoutOffset = leftLayoutOffset1;
+                        }
                     }
                     scroller.totalSize = totalSize;
                     scroller.startLayoutOffset = leftLayoutOffset;
@@ -8129,23 +8149,7 @@ class NgVirtualListComponent {
                     if (this._isSnappingMethodAdvanced) {
                         this.updateRegularRenderer();
                     }
-                    switch (alignment) {
-                        case Alignments.NONE: {
-                            this._actualScrollStartOffset.set(precalculatedScrollStartOffset);
-                            this._actualScrollEndOffset.set(precalculatedScrollEndOffset);
-                            break;
-                        }
-                        case Alignments.CENTER: {
-                            const firstItemId = items.length > 0 ? (items[0]?.[trackBy] ?? null) : null, endItemId = items.length > 0 ? (items?.[items.length - 1]?.[trackBy] ?? null) : null, alignmentStartOffset = viewportSize * .5 - (firstItemId !== null ? (isVertical ? (this._service.getItemBounds(firstItemId)?.height ?? 0) :
-                                (this._service.getItemBounds(firstItemId)?.width ?? 0)) : 0) * (isInfinity ? 0 : .5), alignmentEndOffset = viewportSize * .5 - (endItemId !== null ? (isVertical ? (this._service.getItemBounds(endItemId)?.height ?? 0) :
-                                (this._service.getItemBounds(endItemId)?.width ?? 0)) : 0) * (isInfinity ? 0 : .5);
-                            this._alignmentScrollStartOffset.set(alignmentStartOffset);
-                            this._alignmentScrollEndOffset.set(alignmentEndOffset);
-                            this._actualScrollStartOffset.set(precalculatedScrollStartOffset + alignmentStartOffset);
-                            this._actualScrollEndOffset.set(precalculatedScrollEndOffset + alignmentEndOffset);
-                            break;
-                        }
-                    }
+                    this.updateOffsetsByAllignment();
                     scroller.delta = delta;
                     if ((snapScrollToStart && this._trackBox.isSnappedToStart && scroller.scrollable) ||
                         (snapScrollToStart && currentScrollSize <= MIN_PIXELS_FOR_PREVENT_SNAPPING)) {
@@ -8324,6 +8328,7 @@ class NgVirtualListComponent {
                     const dynamicSize = this.dynamicSize(), itemSize = this._actualItemSize(), minItemSize = this._actualMinItemSize(), maxItemSize = this._actualMaxItemSize(), snapScrollToEnd = this.snapScrollToEnd();
                     if (dynamicSize) {
                         const { width, height } = this._bounds() || { width: DEFAULT_LIST_SIZE, height: DEFAULT_LIST_SIZE }, itemConfigMap = this.itemConfigMap(), isVertical = this._isVertical, currentScrollSize = isVertical ? scrollerComponent.scrollTop : scrollerComponent.scrollLeft, opts = {
+                            alignment: this.actualAlignment(),
                             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),
@@ -8349,21 +8354,8 @@ class NgVirtualListComponent {
                         this.createDisplayComponentsIfNeed(displayItems);
                         this.tracking();
                         this.snappingHandler();
+                        this.updateOffsetsByAllignment();
                         scrollSize = this._trackBox.getItemPosition(id, itemConfigMap, { ...opts, scrollSize: actualScrollSize, fromItemId: id });
-                        if (this._isInfinity()) {
-                            if (this.snapToItem()) {
-                                const itemBounds = this._trackBox.getItemBounds(id);
-                                if (!!itemBounds) {
-                                    const itemSize = isVertical ? itemBounds.height : itemBounds.width;
-                                    switch (this.snapToItemAlign()) {
-                                        case SnapToItemAligns.CENTER: {
-                                            scrollSize += itemSize * .5;
-                                            break;
-                                        }
-                                    }
-                                }
-                            }
-                        }
                         if (scrollSize === -1) {
                             return of([finished, { id, blending, iteration: nextIteration, cb }]).pipe(delay(0));
                         }
@@ -8388,11 +8380,11 @@ class NgVirtualListComponent {
                     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;
@@ -8401,11 +8393,12 @@ class NgVirtualListComponent {
                                 }
                             }
                             const { width, height } = this._bounds() || { width: DEFAULT_LIST_SIZE, height: DEFAULT_LIST_SIZE }, itemConfigMap = this.itemConfigMap(), items = this._actualItems(), opts = {
+                                alignment: this._actualAlignment(),
                                 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(),
+                                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, {
@@ -8420,6 +8413,7 @@ class NgVirtualListComponent {
                             this.createDisplayComponentsIfNeed(displayItems);
                             this.tracking();
                             this.snappingHandler();
+                            this.updateOffsetsByAllignment();
                             this._$preventScrollSnapping.next(true);
                             const params = {
                                 [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: scrollSize, fireUpdate: false,
@@ -8446,7 +8440,7 @@ class NgVirtualListComponent {
             this.emitScrollEvent(true, false, true);
             const scrollParams = params;
             scrollParams?.cb?.();
-        }), delay(100), tap(([finished]) => {
+        }), delay(0), tap(([finished]) => {
             if (finished) {
                 this._scrollerComponent()?.snapIfNeed();
             }
@@ -8487,6 +8481,14 @@ class NgVirtualListComponent {
                 }
             }));
         })).subscribe();
+        combineLatest([$itemConfigMap, $dynamicSize, $divides]).pipe(takeUntilDestroyed(), filter$1(([itemConfigMap, dynamicSize, divides]) => !!itemConfigMap && !dynamicSize && divides > 1), tap(([itemConfigMap]) => {
+            for (const id in itemConfigMap) {
+                const metaData = itemConfigMap[id];
+                if (metaData?.fullSize || metaData?.sticky === 1 || metaData?.sticky === 2) {
+                    throw Error('The accelerated rendering algorithm `[dynamicSize]="false"` cannot correctly handle non-uniform lists (the itemConfigMap specifies full-size elements). For correct rendering, specify `[dynamicSize]="true"`.');
+                }
+            }
+        })).subscribe();
         combineLatest([$collapsingMode, $items, $itemConfigMap, $trackBy]).pipe(takeUntilDestroyed(), tap(([collapsingMode, items, itemConfigMap, trackBy]) => {
             const isAccordion = isCollapseMode(collapsingMode, CollapsingModes.ACCORDION);
             if (isAccordion) {
@@ -8690,6 +8692,26 @@ class NgVirtualListComponent {
             this._trackBox.setDisplayObjectIndexMapById(doMap);
         }
     }
+    updateOffsetsByAllignment() {
+        const alignment = this._actualAlignment(), items = this._actualItems(), trackBy = this.trackBy(), isInfinity = this._isInfinity(), isVertical = this._isVertical, { width, height } = this._bounds() || { width: DEFAULT_LIST_SIZE, height: DEFAULT_LIST_SIZE }, viewportSize = isVertical ? height : width, precalculatedScrollStartOffset = this._precalculatedScrollStartOffset(), precalculatedScrollEndOffset = this._precalculatedScrollEndOffset();
+        switch (alignment) {
+            case Alignments.NONE: {
+                this._actualScrollStartOffset.set(precalculatedScrollStartOffset);
+                this._actualScrollEndOffset.set(precalculatedScrollEndOffset);
+                break;
+            }
+            case Alignments.CENTER: {
+                const firstItemId = items.length > 0 ? (items[0]?.[trackBy] ?? null) : null, endItemId = items.length > 0 ? (items?.[items.length - 1]?.[trackBy] ?? null) : null, alignmentStartOffset = viewportSize * .5 - (firstItemId !== null ? (isVertical ? (this._service.getItemBounds(firstItemId)?.height ?? 0) :
+                    (this._service.getItemBounds(firstItemId)?.width ?? 0)) : 0) * (isInfinity ? 0 : .5), alignmentEndOffset = viewportSize * .5 - (endItemId !== null ? (isVertical ? (this._service.getItemBounds(endItemId)?.height ?? 0) :
+                    (this._service.getItemBounds(endItemId)?.width ?? 0)) : 0) * (isInfinity ? 0 : .5);
+                this._alignmentScrollStartOffset.set(alignmentStartOffset);
+                this._alignmentScrollEndOffset.set(alignmentEndOffset);
+                this._actualScrollStartOffset.set(precalculatedScrollStartOffset + alignmentStartOffset);
+                this._actualScrollEndOffset.set(precalculatedScrollEndOffset + alignmentEndOffset);
+                break;
+            }
+        }
+    }
     updateRegularRenderer() {
         this._resizeSnappedComponentHandler();
     }