ng-virtual-list 21.11.0 → 21.11.1

package/README.md

@@ -16,9 +16,12 @@ Works correctly in all browsers and platforms.
 ![npm downloads](https://img.shields.io/npm/dm/ng-virtual-list)
 ![npm total downloads](https://img.shields.io/npm/dt/ng-virtual-list)
 
-[Live Demo](https://chat-demo.eugene-grebennikov.pro/)
+[Chat Demo](https://chat-demo.eugene-grebennikov.pro/)
 [(Code)](https://github.com/DjonnyX/ng-virtual-list-chat-demo)
 
+[News Feed Demo](https://news-feed-demo.eugene-grebennikov.pro/)
+[(Code)](https://github.com/DjonnyX/ng-virtual-list-news-feed-demo)
+
 [Live Examples (Storybook)](https://ng-virtual-list-examples.eugene-grebennikov.pro/)
 
 [Examples](https://ng-virtual-list.eugene-grebennikov.pro/)
@@ -690,13 +693,13 @@ Properties
 
 | Angular version | ng-virtual-list version | git | npm |
 |--|--|--|--|
-| 20.x | 20.11.3 | [20.x](https://github.com/DjonnyX/ng-virtual-list/tree/21.x) | [20.11.3](https://www.npmjs.com/package/ng-virtual-list/v/20.11.3) |
-| 19.x | 19.11.0 | [19.x](https://github.com/DjonnyX/ng-virtual-list/tree/19.x) | [19.11.0](https://www.npmjs.com/package/ng-virtual-list/v/19.11.0) |
-| 18.x | 18.11.0 | [18.x](https://github.com/DjonnyX/ng-virtual-list/tree/18.x) | [18.11.0](https://www.npmjs.com/package/ng-virtual-list/v/18.11.0) |
-| 17.x | 17.11.0 | [17.x](https://github.com/DjonnyX/ng-virtual-list/tree/17.x) | [17.11.0](https://www.npmjs.com/package/ng-virtual-list/v/17.11.0) |
-| 16.x | 16.11.0 | [16.x](https://github.com/DjonnyX/ng-virtual-list/tree/16.x) | [16.11.0](https://www.npmjs.com/package/ng-virtual-list/v/16.11.0) |
-| 15.x | 15.11.0 | [15.x](https://github.com/DjonnyX/ng-virtual-list/tree/15.x) | [15.11.0](https://www.npmjs.com/package/ng-virtual-list/v/15.11.0) |
-| 14.x | 14.11.0 | [14.x](https://github.com/DjonnyX/ng-virtual-list/tree/14.x) | [14.11.0](https://www.npmjs.com/package/ng-virtual-list/v/14.11.0) |
+| 20.x | 20.11.7 | [20.x](https://github.com/DjonnyX/ng-virtual-list/tree/21.x) | [20.11.7](https://www.npmjs.com/package/ng-virtual-list/v/20.11.7) |
+| 19.x | 19.11.2 | [19.x](https://github.com/DjonnyX/ng-virtual-list/tree/19.x) | [19.11.2](https://www.npmjs.com/package/ng-virtual-list/v/19.11.2) |
+| 18.x | 18.11.1 | [18.x](https://github.com/DjonnyX/ng-virtual-list/tree/18.x) | [18.11.1](https://www.npmjs.com/package/ng-virtual-list/v/18.11.1) |
+| 17.x | 17.11.1 | [17.x](https://github.com/DjonnyX/ng-virtual-list/tree/17.x) | [17.11.1](https://www.npmjs.com/package/ng-virtual-list/v/17.11.1) |
+| 16.x | 16.11.1 | [16.x](https://github.com/DjonnyX/ng-virtual-list/tree/16.x) | [16.11.1](https://www.npmjs.com/package/ng-virtual-list/v/16.11.1) |
+| 15.x | 15.11.2 | [15.x](https://github.com/DjonnyX/ng-virtual-list/tree/15.x) | [15.11.2](https://www.npmjs.com/package/ng-virtual-list/v/15.11.2) |
+| 14.x | 14.11.2 | [14.x](https://github.com/DjonnyX/ng-virtual-list/tree/14.x) | [14.11.2](https://www.npmjs.com/package/ng-virtual-list/v/14.11.2) |
 <br/>
 
 ## 🤝 Contributing

package/fesm2022/ng-virtual-list.mjs

@@ -1079,6 +1079,7 @@ class TrackBox extends CacheMap {
     _resetBufferSizeTimer;
     _isReseted = true;
     _prerenderedCache = null;
+    _newItems = [];
     lifeCircle() {
         this.fireChangeIfNeed();
         this.fireTick();
@@ -1105,6 +1106,7 @@ class TrackBox extends CacheMap {
     updateCache(previousCollection, currentCollection, itemSize) {
         const trackBy = this._trackingPropertyName;
         let crudDetected = false;
+        this._newItems = [];
         if (!currentCollection || currentCollection.length === 0) {
             if (previousCollection) {
                 // deleted
@@ -1172,6 +1174,7 @@ class TrackBox extends CacheMap {
             const item = currentCollection[i], id = item[trackBy];
             if (item && !deletedMap.hasOwnProperty(id) && !updatedMap.hasOwnProperty(id) &&
                 !notChangedMap.hasOwnProperty(id)) {
+                this._newItems.push(id);
                 // added
                 crudDetected = true;
                 this._map.set(id, { width: itemSize, height: itemSize, method: ItemDisplayMethods.CREATE });
@@ -1339,7 +1342,7 @@ class TrackBox extends CacheMap {
                     }
                 }
             }
-            let y = this._scrollStartOffset, stickyCollectionItem = undefined, stickyComponentSize = 0;
+            let y = this._scrollStartOffset, stickyComponentSize = 0;
             for (let i = 0, l = collection.length; i < l; i++) {
                 const ii = i + 1, collectionItem = collection[i], id = collectionItem[trackBy];
                 let componentSize = 0, componentSizeDelta = 0, itemDisplayMethod = ItemDisplayMethods.NOT_CHANGED;
@@ -1347,7 +1350,7 @@ class TrackBox extends CacheMap {
                     const cache = map.get(id);
                     componentSize = cache[sizeProperty] > 0 ? cache[sizeProperty] : typicalItemSize;
                     itemDisplayMethod = cache?.method ?? ItemDisplayMethods.UPDATE;
-                    const isItemNew = cache?.[IS_NEW] ?? (this._isLazy && isStart && !this._isReseted);
+                    const isItemNew = this._newItems.indexOf(id) > -1 || (this._isLazy && isStart && !this._isReseted);
                     isNew = isItemNew;
                     if (isNew) {
                         isUpdating = true;
@@ -1385,7 +1388,6 @@ class TrackBox extends CacheMap {
                     if (itemById === undefined) {
                         if (id !== fromItemId && id === stickyItemId && itemConfigMap?.[id]?.sticky === 1) {
                             stickyComponentSize = componentSize;
-                            stickyCollectionItem = collectionItem;
                             y -= stickyComponentSize;
                         }
                         if (id === fromItemId) {
@@ -1529,9 +1531,6 @@ class TrackBox extends CacheMap {
     refreshCache(cache) {
         this._prerenderedCache = cache;
     }
-    clearDeltaDirection() {
-        this.clearScrollDirectionCache();
-    }
     clearDelta(clearDirectionDetector = false) {
         this._delta = this._deltaOfNewItems = 0;
         if (clearDirectionDetector) {
@@ -1854,6 +1853,9 @@ class TrackBox extends CacheMap {
             this._prerenderedCache = null;
         }
     }
+    resetCacheChunkInfo() {
+        this._newItems = [];
+    }
     cacheClean() {
         this._map.clear();
         this._snapshot.clear();
@@ -2658,7 +2660,7 @@ const DEFAULT_MAX_DISTANCE = 40;
  * ItemClickDirective
  * 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/21.x/projects/ng-virtual-list/src/lib/directives/item-click/item-click.directive.ts
  * @author Evgenii Alexandrovich Grebennikov
  * @email djonnyx@gmail.com
  */
@@ -3851,7 +3853,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/21.x/projects/ng-virtual-list/src/lib/directives/locale-sensitive/locale-sensitive.directive.ts
  * @author Evgenii Alexandrovich Grebennikov
  * @email djonnyx@gmail.com
  */
@@ -4387,11 +4389,11 @@ class PrerenderTrackBox extends EventEmitter {
  * Virtual list component.
  * 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/21.x/projects/ng-virtual-list/src/lib/components/list-item/ng-virtual-list-item.component.ts
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/components/ng-prerender-container/components/ng-prerender-list-item.component.ts
  * @author Evgenii Alexandrovich Grebennikov
  * @email djonnyx@gmail.com
  */
-class PrerenderVirtualListItemComponent extends NgVirtualListItemComponent {
+class NgPrerenderVirtualListItemComponent extends NgVirtualListItemComponent {
     update() {
         const data = this._data, regular = this.regular, length = this._regularLength;
         if (data) {
@@ -4443,12 +4445,12 @@ class PrerenderVirtualListItemComponent extends NgVirtualListItemComponent {
             styles.visibility = VISIBILITY_HIDDEN;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PrerenderVirtualListItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: PrerenderVirtualListItemComponent, isStandalone: false, selector: "prerender-virtual-list-item", host: { attributes: { "role": "listitem" }, classAttribute: "ngvl__item" }, usesInheritance: true, ngImport: i0, template: "@let renderer = itemRenderer();\r\n<div itemClick [maxClickDistance]=\"maxClickDistance()\" [part]=\"part()\" [attr.ngvl-index]=\"index()\" tabindex=\"-1\"\r\n    class=\"ngvl-item__container\" [ngClass]=\"classes()\" (onClick)=\"onClickHandler()\">\r\n    @if (renderer) {\r\n        <ng-container [ngTemplateOutlet]=\"renderer\" [ngTemplateOutletContext]=\"templateContext()\" />\r\n    }\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__container{margin:0;padding:0;overflow:hidden;background-color:#fff;width:inherit;height:inherit;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: ItemClickDirective, selector: "[itemClick]", inputs: ["maxClickDistance"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgPrerenderVirtualListItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NgPrerenderVirtualListItemComponent, isStandalone: false, selector: "ng-prerender-virtual-list-item", host: { attributes: { "role": "listitem" }, classAttribute: "ngvl__item" }, usesInheritance: true, ngImport: i0, template: "@let renderer = itemRenderer();\r\n<div itemClick [maxClickDistance]=\"maxClickDistance()\" [part]=\"part()\" [attr.ngvl-index]=\"index()\" tabindex=\"-1\"\r\n    class=\"ngvl-item__container\" [ngClass]=\"classes()\" (onClick)=\"onClickHandler()\">\r\n    @if (renderer) {\r\n        <ng-container [ngTemplateOutlet]=\"renderer\" [ngTemplateOutletContext]=\"templateContext()\" />\r\n    }\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__container{margin:0;padding:0;overflow:hidden;background-color:#fff;width:inherit;height:inherit;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: ItemClickDirective, selector: "[itemClick]", inputs: ["maxClickDistance"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PrerenderVirtualListItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgPrerenderVirtualListItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'prerender-virtual-list-item', host: {
+            args: [{ selector: 'ng-prerender-virtual-list-item', host: {
                         'class': 'ngvl__item',
                         'role': 'listitem',
                     }, standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let renderer = itemRenderer();\r\n<div itemClick [maxClickDistance]=\"maxClickDistance()\" [part]=\"part()\" [attr.ngvl-index]=\"index()\" tabindex=\"-1\"\r\n    class=\"ngvl-item__container\" [ngClass]=\"classes()\" (onClick)=\"onClickHandler()\">\r\n    @if (renderer) {\r\n        <ng-container [ngTemplateOutlet]=\"renderer\" [ngTemplateOutletContext]=\"templateContext()\" />\r\n    }\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__container{margin:0;padding:0;overflow:hidden;background-color:#fff;width:inherit;height:inherit;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"] }]
@@ -4462,7 +4464,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * @author Evgenii Alexandrovich Grebennikov
  * @email djonnyx@gmail.com
  */
-class PrerenderScrollerComponent extends BaseScrollView {
+class NgPrerenderScrollerComponent extends BaseScrollView {
     scrollBar;
     langTextDir = signal(TextDirections.LTR, ...(ngDevMode ? [{ debugName: "langTextDir" }] : []));
     scrollbarEnabled = input(DEFAULT_SCROLLBAR_ENABLED, ...(ngDevMode ? [{ debugName: "scrollbarEnabled" }] : []));
@@ -4542,15 +4544,15 @@ class PrerenderScrollerComponent extends BaseScrollView {
     updateScrollBar() {
         this._$updateScrollBar.next();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PrerenderScrollerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: PrerenderScrollerComponent, isStandalone: false, selector: "prerender-scroller", inputs: { scrollbarEnabled: { classPropertyName: "scrollbarEnabled", publicName: "scrollbarEnabled", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgPrerenderScrollerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: NgPrerenderScrollerComponent, isStandalone: false, selector: "ng-prerender-scroller", inputs: { scrollbarEnabled: { classPropertyName: "scrollbarEnabled", publicName: "scrollbarEnabled", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             { provide: SCROLL_VIEW_INVERSION, useValue: false },
             { provide: SCROLL_VIEW_NORMALIZE_VALUE_FROM_ZERO, useValue: true },
         ], viewQueries: [{ propertyName: "scrollBar", first: true, predicate: ["scrollBar"], descendants: true, read: NgScrollBarComponent }], usesInheritance: true, ngImport: i0, template: "<div localeSensitive [langTextDir]=\"langTextDir()\" [listDir]=\"direction()\" class=\"ngvl__container\"\r\n    [ngClass]=\"containerClasses()\">\r\n    <div #scrollViewport part=\"scroller\" class=\"ngvl__scroller\">\r\n        <div #scrollContent part=\"list\" class=\"ngvl__list\" [ngClass]=\"actualClasses()\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\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.grabbing{cursor:grabbing}.ngvl__container.horizontal{grid-template-rows:1fr 0;transition:grid-template-rows .1s ease-out}.ngvl__container.horizontal.scrollable.enabled{grid-template-rows:1fr auto}.ngvl__container.horizontal .ngvl__list{display:inline-flex}.ngvl__container.horizontal .ngvl__scroller{overflow:hidden}.ngvl__container.vertical{grid-template-columns:1fr 0;transition:grid-template-columns .1s ease-out}.ngvl__container.vertical.scrollable.enabled{grid-template-columns:1fr auto}.ngvl__container.vertical .ngvl__scroller{overflow:hidden}.ngvl__scroller{display:block;position:relative;overflow:hidden;width:100%;height:100%}.ngvl__list{position:absolute;list-style:none;padding:0;margin:0;width:100%;height:100%;opacity:0}.ngvl__list.prepared{opacity:1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: LocaleSensitiveDirective, selector: "[localeSensitive]", inputs: ["langTextDir", "listDir"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PrerenderScrollerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgPrerenderScrollerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'prerender-scroller', providers: [
+            args: [{ selector: 'ng-prerender-scroller', providers: [
                         { provide: SCROLL_VIEW_INVERSION, useValue: false },
                         { provide: SCROLL_VIEW_NORMALIZE_VALUE_FROM_ZERO, useValue: true },
                     ], standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div localeSensitive [langTextDir]=\"langTextDir()\" [listDir]=\"direction()\" class=\"ngvl__container\"\r\n    [ngClass]=\"containerClasses()\">\r\n    <div #scrollViewport part=\"scroller\" class=\"ngvl__scroller\">\r\n        <div #scrollContent part=\"list\" class=\"ngvl__list\" [ngClass]=\"actualClasses()\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\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.grabbing{cursor:grabbing}.ngvl__container.horizontal{grid-template-rows:1fr 0;transition:grid-template-rows .1s ease-out}.ngvl__container.horizontal.scrollable.enabled{grid-template-rows:1fr auto}.ngvl__container.horizontal .ngvl__list{display:inline-flex}.ngvl__container.horizontal .ngvl__scroller{overflow:hidden}.ngvl__container.vertical{grid-template-columns:1fr 0;transition:grid-template-columns .1s ease-out}.ngvl__container.vertical.scrollable.enabled{grid-template-columns:1fr auto}.ngvl__container.vertical .ngvl__scroller{overflow:hidden}.ngvl__scroller{display:block;position:relative;overflow:hidden;width:100%;height:100%}.ngvl__list{position:absolute;list-style:none;padding:0;margin:0;width:100%;height:100%;opacity:0}.ngvl__list.prepared{opacity:1}\n"] }]
@@ -4567,7 +4569,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * @author Evgenii Alexandrovich Grebennikov
  * @email djonnyx@gmail.com
  */
-class PrerenderList {
+class NgPrerenderList {
     _listContainerRef;
     enabled = input(false, ...(ngDevMode ? [{ debugName: "enabled" }] : []));
     direction = input(DEFAULT_DIRECTION, ...(ngDevMode ? [{ debugName: "direction" }] : []));
@@ -4580,7 +4582,7 @@ class PrerenderList {
     itemSize = input(DEFAULT_ITEM_SIZE, ...(ngDevMode ? [{ debugName: "itemSize" }] : []));
     trackBy = input(TRACK_BY_PROPERTY_NAME, ...(ngDevMode ? [{ debugName: "trackBy" }] : []));
     itemRenderer = input(...(ngDevMode ? [undefined, { debugName: "itemRenderer" }] : []));
-    itemComponentClass = input(PrerenderVirtualListItemComponent, ...(ngDevMode ? [{ debugName: "itemComponentClass" }] : []));
+    itemComponentClass = input(NgPrerenderVirtualListItemComponent, ...(ngDevMode ? [{ debugName: "itemComponentClass" }] : []));
     _items = signal(null, ...(ngDevMode ? [{ debugName: "_items" }] : []));
     classes = signal({ prepared: true }, ...(ngDevMode ? [{ debugName: "classes" }] : []));
     _$render = new Subject();
@@ -4690,14 +4692,14 @@ class PrerenderList {
             this._trackBox = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PrerenderList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: PrerenderList, isStandalone: false, selector: "prerender-list", inputs: { enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, isVertical: { classPropertyName: "isVertical", publicName: "isVertical", isSignal: true, isRequired: false, transformFunction: null }, scrollbarEnabled: { classPropertyName: "scrollbarEnabled", publicName: "scrollbarEnabled", isSignal: true, isRequired: false, transformFunction: null }, startOffset: { classPropertyName: "startOffset", publicName: "startOffset", isSignal: true, isRequired: false, transformFunction: null }, endOffset: { classPropertyName: "endOffset", publicName: "endOffset", isSignal: true, isRequired: false, transformFunction: null }, bounds: { classPropertyName: "bounds", publicName: "bounds", isSignal: true, isRequired: true, transformFunction: null }, dynamic: { classPropertyName: "dynamic", publicName: "dynamic", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, itemRenderer: { classPropertyName: "itemRenderer", publicName: "itemRenderer", isSignal: true, isRequired: false, transformFunction: null }, itemComponentClass: { classPropertyName: "itemComponentClass", publicName: "itemComponentClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "position: relative;" }, viewQueries: [{ propertyName: "_listContainerRef", first: true, predicate: ["renderersContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<prerender-scroller #scroller class=\"ngvl__list-scroller\" [classes]=\"classes()\" [direction]=\"direction()\"\r\n  [scrollbarEnabled]=\"scrollbarEnabled()\" [startOffset]=\"startOffset()\" [endOffset]=\"endOffset()\">\r\n  <ng-container #renderersContainer></ng-container>\r\n</prerender-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;pointer-events:none;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", ":host{width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: PrerenderScrollerComponent, selector: "prerender-scroller", inputs: ["scrollbarEnabled", "classes"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgPrerenderList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: NgPrerenderList, isStandalone: false, selector: "ng-prerender-list", inputs: { enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, isVertical: { classPropertyName: "isVertical", publicName: "isVertical", isSignal: true, isRequired: false, transformFunction: null }, scrollbarEnabled: { classPropertyName: "scrollbarEnabled", publicName: "scrollbarEnabled", isSignal: true, isRequired: false, transformFunction: null }, startOffset: { classPropertyName: "startOffset", publicName: "startOffset", isSignal: true, isRequired: false, transformFunction: null }, endOffset: { classPropertyName: "endOffset", publicName: "endOffset", isSignal: true, isRequired: false, transformFunction: null }, bounds: { classPropertyName: "bounds", publicName: "bounds", isSignal: true, isRequired: true, transformFunction: null }, dynamic: { classPropertyName: "dynamic", publicName: "dynamic", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, itemRenderer: { classPropertyName: "itemRenderer", publicName: "itemRenderer", isSignal: true, isRequired: false, transformFunction: null }, itemComponentClass: { classPropertyName: "itemComponentClass", publicName: "itemComponentClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "position: relative;" }, viewQueries: [{ propertyName: "_listContainerRef", first: true, predicate: ["renderersContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<ng-prerender-scroller #scroller class=\"ngvl__list-scroller\" [classes]=\"classes()\" [direction]=\"direction()\"\r\n  [scrollbarEnabled]=\"scrollbarEnabled()\" [startOffset]=\"startOffset()\" [endOffset]=\"endOffset()\">\r\n  <ng-container #renderersContainer></ng-container>\r\n</ng-prerender-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;pointer-events:none;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", ":host{width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: NgPrerenderScrollerComponent, selector: "ng-prerender-scroller", inputs: ["scrollbarEnabled", "classes"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PrerenderList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgPrerenderList, decorators: [{
             type: Component,
-            args: [{ selector: 'prerender-list', host: {
+            args: [{ selector: 'ng-prerender-list', host: {
                         'style': 'position: relative;'
-                    }, standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, template: "<prerender-scroller #scroller class=\"ngvl__list-scroller\" [classes]=\"classes()\" [direction]=\"direction()\"\r\n  [scrollbarEnabled]=\"scrollbarEnabled()\" [startOffset]=\"startOffset()\" [endOffset]=\"endOffset()\">\r\n  <ng-container #renderersContainer></ng-container>\r\n</prerender-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;pointer-events:none;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", ":host{width:100%;height:100%}\n"] }]
+                    }, standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, template: "<ng-prerender-scroller #scroller class=\"ngvl__list-scroller\" [classes]=\"classes()\" [direction]=\"direction()\"\r\n  [scrollbarEnabled]=\"scrollbarEnabled()\" [startOffset]=\"startOffset()\" [endOffset]=\"endOffset()\">\r\n  <ng-container #renderersContainer></ng-container>\r\n</ng-prerender-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;pointer-events:none;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", ":host{width:100%;height:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _listContainerRef: [{
                 type: ViewChild,
                 args: ['renderersContainer', { read: ViewContainerRef }]
@@ -4707,11 +4709,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * Prerender container.
  * 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/21.x/projects/ng-virtual-list/src/lib/prerender-container/prerender-container.component.ts
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/21.x/projects/ng-virtual-list/src/lib/ng-prerender-container/ng-prerender-container.component.ts
  * @author Evgenii Alexandrovich Grebennikov
  * @email djonnyx@gmail.com
  */
-class PrerenderContainer {
+class NgPrerenderContainer {
     _list = viewChild('list', ...(ngDevMode ? [{ debugName: "_list" }] : []));
     enabled = input(false, ...(ngDevMode ? [{ debugName: "enabled" }] : []));
     direction = input(DEFAULT_DIRECTION, ...(ngDevMode ? [{ debugName: "direction" }] : []));
@@ -4750,14 +4752,14 @@ class PrerenderContainer {
             list.off();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PrerenderContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: PrerenderContainer, isStandalone: false, selector: "prerender-container", inputs: { enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, isVertical: { classPropertyName: "isVertical", publicName: "isVertical", isSignal: true, isRequired: false, transformFunction: null }, scrollbarEnabled: { classPropertyName: "scrollbarEnabled", publicName: "scrollbarEnabled", isSignal: true, isRequired: false, transformFunction: null }, startOffset: { classPropertyName: "startOffset", publicName: "startOffset", isSignal: true, isRequired: false, transformFunction: null }, endOffset: { classPropertyName: "endOffset", publicName: "endOffset", isSignal: true, isRequired: false, transformFunction: null }, bounds: { classPropertyName: "bounds", publicName: "bounds", isSignal: true, isRequired: true, transformFunction: null }, dynamic: { classPropertyName: "dynamic", publicName: "dynamic", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, itemRenderer: { classPropertyName: "itemRenderer", publicName: "itemRenderer", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "position: relative;" }, viewQueries: [{ propertyName: "_list", first: true, predicate: ["list"], descendants: true, isSignal: true }], ngImport: i0, template: "<prerender-list #list [bounds]=\"bounds()!\" [direction]=\"direction()\" [dynamic]=\"dynamic()\"\r\n  [isVertical]=\"isVertical()\" [itemSize]=\"itemSize()\" [trackBy]=\"trackBy()\" [itemRenderer]=\"itemRenderer()\"\r\n  [startOffset]=\"startOffset()\" [endOffset]=\"endOffset()\" [scrollbarEnabled]=\"scrollbarEnabled()\"\r\n  [enabled]=\"enabled()\" />", 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;pointer-events:none;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", ":host{visibility:hidden;height:0!important;width:0!important;overflow:hidden}\n"], dependencies: [{ kind: "component", type: PrerenderList, selector: "prerender-list", inputs: ["enabled", "direction", "isVertical", "scrollbarEnabled", "startOffset", "endOffset", "bounds", "dynamic", "itemSize", "trackBy", "itemRenderer", "itemComponentClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgPrerenderContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: NgPrerenderContainer, isStandalone: false, selector: "ng-prerender-container", inputs: { enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, isVertical: { classPropertyName: "isVertical", publicName: "isVertical", isSignal: true, isRequired: false, transformFunction: null }, scrollbarEnabled: { classPropertyName: "scrollbarEnabled", publicName: "scrollbarEnabled", isSignal: true, isRequired: false, transformFunction: null }, startOffset: { classPropertyName: "startOffset", publicName: "startOffset", isSignal: true, isRequired: false, transformFunction: null }, endOffset: { classPropertyName: "endOffset", publicName: "endOffset", isSignal: true, isRequired: false, transformFunction: null }, bounds: { classPropertyName: "bounds", publicName: "bounds", isSignal: true, isRequired: true, transformFunction: null }, dynamic: { classPropertyName: "dynamic", publicName: "dynamic", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, itemRenderer: { classPropertyName: "itemRenderer", publicName: "itemRenderer", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "position: relative;" }, viewQueries: [{ propertyName: "_list", first: true, predicate: ["list"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-prerender-list #list [bounds]=\"bounds()!\" [direction]=\"direction()\" [dynamic]=\"dynamic()\"\r\n  [isVertical]=\"isVertical()\" [itemSize]=\"itemSize()\" [trackBy]=\"trackBy()\" [itemRenderer]=\"itemRenderer()\"\r\n  [startOffset]=\"startOffset()\" [endOffset]=\"endOffset()\" [scrollbarEnabled]=\"scrollbarEnabled()\"\r\n  [enabled]=\"enabled()\" />", 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;pointer-events:none;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", ":host{visibility:hidden;height:0!important;width:0!important;overflow:hidden}\n"], dependencies: [{ kind: "component", type: NgPrerenderList, selector: "ng-prerender-list", inputs: ["enabled", "direction", "isVertical", "scrollbarEnabled", "startOffset", "endOffset", "bounds", "dynamic", "itemSize", "trackBy", "itemRenderer", "itemComponentClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PrerenderContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgPrerenderContainer, decorators: [{
             type: Component,
-            args: [{ selector: 'prerender-container', host: {
+            args: [{ selector: 'ng-prerender-container', host: {
                         'style': 'position: relative;'
-                    }, standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, template: "<prerender-list #list [bounds]=\"bounds()!\" [direction]=\"direction()\" [dynamic]=\"dynamic()\"\r\n  [isVertical]=\"isVertical()\" [itemSize]=\"itemSize()\" [trackBy]=\"trackBy()\" [itemRenderer]=\"itemRenderer()\"\r\n  [startOffset]=\"startOffset()\" [endOffset]=\"endOffset()\" [scrollbarEnabled]=\"scrollbarEnabled()\"\r\n  [enabled]=\"enabled()\" />", 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;pointer-events:none;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", ":host{visibility:hidden;height:0!important;width:0!important;overflow:hidden}\n"] }]
+                    }, standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, template: "<ng-prerender-list #list [bounds]=\"bounds()!\" [direction]=\"direction()\" [dynamic]=\"dynamic()\"\r\n  [isVertical]=\"isVertical()\" [itemSize]=\"itemSize()\" [trackBy]=\"trackBy()\" [itemRenderer]=\"itemRenderer()\"\r\n  [startOffset]=\"startOffset()\" [endOffset]=\"endOffset()\" [scrollbarEnabled]=\"scrollbarEnabled()\"\r\n  [enabled]=\"enabled()\" />", 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;pointer-events:none;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", ":host{visibility:hidden;height:0!important;width:0!important;overflow:hidden}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _list: [{ type: i0.ViewChild, args: ['list', { isSignal: true }] }], 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 }] }], itemRenderer: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemRenderer", required: false }] }] } });
 
 /**
@@ -5734,8 +5736,8 @@ class NgVirtualListComponent {
         $fireUpdate.pipe(takeUntilDestroyed(), tap(userAction => {
             hasUserAction = userAction;
         })).subscribe();
-        let renderStabilizerPrevScrollStateVersion = EMPTY_SCROLL_STATE_VERSION, renderStabilizerUpdateIterations = 0;
         const $update = this.$update, renderStabilizer = (options) => {
+            let renderStabilizerPrevScrollStateVersion = EMPTY_SCROLL_STATE_VERSION, renderStabilizerUpdateIterations = 0;
             const prepareIterations = options?.prepareIterations ?? PREPARE_ITERATIONS, prepareReupdateLength = options?.prepareReupdateLength ?? PREPARATION_REUPDATE_LENGTH;
             return of(null).pipe(takeUntilDestroyed(this._destroyRef), switchMap$1(() => {
                 renderStabilizerPrevScrollStateVersion = EMPTY_SCROLL_STATE_VERSION;
@@ -5768,6 +5770,9 @@ class NgVirtualListComponent {
         }), $updateItemsRenderStabilizer = renderStabilizer({
             prepareIterations: PREPARE_ITERATIONS_FOR_UPDATE_ITEMS,
             prepareReupdateLength: PREPARATION_REUPDATE_LENGTH_FOR_UPDATE_ITEMS,
+        }), $chunkLoadingRenderStabilizer = renderStabilizer({
+            prepareIterations: PREPARE_ITERATIONS_FOR_UPDATE_ITEMS,
+            prepareReupdateLength: PREPARATION_REUPDATE_LENGTH_FOR_UPDATE_ITEMS,
         }), $collapseItemsRenderStabilizer = renderStabilizer({
             prepareIterations: PREPARE_ITERATIONS_FOR_COLLAPSE_ITEMS,
             prepareReupdateLength: PREPARATION_REUPDATE_LENGTH_FOR_COLLAPSE_ITEMS,
@@ -6041,11 +6046,26 @@ class NgVirtualListComponent {
                 this._$fireUpdate.next(true);
             }));
         })).subscribe();
+        let isChunkLoading = false;
         const $loading = toObservable(this.loading);
         $loading.pipe(takeUntilDestroyed(), distinctUntilChanged(), skip(1), filter$1(v => !v), switchMap$1(() => {
-            return $actualItems.pipe(takeUntilDestroyed(this._destroyRef), debounceTime(100), take(1), tap(() => {
-                this._scrollerComponent()?.refreshScrollbar();
-            }));
+            isChunkLoading = true;
+            const scrollbar = this._scrollerComponent();
+            if (!!scrollbar) {
+                scrollbar.stopScrollbar();
+                scrollbar.refreshScrollbar();
+            }
+            return $actualItems.pipe(takeUntilDestroyed(this._destroyRef), take(1), tap(() => {
+                this._$fireUpdateNextFrame.next(true);
+            }), switchMap$1(() => $chunkLoadingRenderStabilizer.pipe(takeUntilDestroyed(this._destroyRef), take(1), tap(() => {
+                isChunkLoading = false;
+                this._trackBox.resetCacheChunkInfo();
+                const scrollbar = this._scrollerComponent();
+                if (!!scrollbar) {
+                    scrollbar.stopScrollbar();
+                    scrollbar.refreshScrollbar();
+                }
+            }))));
         })).subscribe();
         $loading.pipe(takeUntilDestroyed(), skip(1), distinctUntilChanged(), tap(v => {
             if (v) {
@@ -6063,7 +6083,7 @@ class NgVirtualListComponent {
             const scroller = this._scrollerComponent();
             let totalSize = 0;
             if (scroller) {
-                const collapsable = collapsedIds.length > 0, cachable = this.cachable, cached = this._cached, waitingCache = cachable && !cached, emitUpdate = !this._readyForShow || waitingCache || collapsable;
+                const collapsable = collapsedIds.length > 0, cachable = this.cachable, cached = this._cached, waitingCache = cachable && !cached, emitUpdate = !this._readyForShow || waitingCache || collapsable || isChunkLoading;
                 if (this._readyForShow || (cachable && cached)) {
                     const currentScrollSize = (isVertical ? scroller.scrollTop ?? 0 : scroller.scrollLeft ?? 0), fireUpdate = emitUpdate || reupdate || (!optimization && !userAction) || this._$scrollingTo.getValue();
                     let actualScrollSize = !this._readyForShow && snapScrollToEnd ? (isVertical ? scroller.scrollHeight ?? 0 : scroller.scrollWidth ?? 0) :
@@ -6137,23 +6157,22 @@ class NgVirtualListComponent {
                         this._trackBox.isScrollEnd;
                         return;
                     }
-                    if (scrollPositionAfterUpdate >= 0 && scrollPositionAfterUpdate < roundedMaxPositionAfterUpdate) {
-                        if (scrollSize !== roundedMaxPositionAfterUpdate || currentScrollSize !== scrollPositionAfterUpdate) {
-                            this._trackBox.clearDelta();
-                            if (this._readyForShow) {
-                                this.emitScrollEvent(true, false, userAction);
-                            }
-                            const params = {
-                                [isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: scrollPositionAfterUpdate, blending: true, userAction,
-                                fireUpdate, behavior: BEHAVIOR_INSTANT, duration: this.animationParams().scrollToItem,
-                            };
-                            scroller.scrollTo(params);
-                            if (emitUpdate) {
-                                this._$update.next(this.getScrollStateVersion(totalSize, this._isVertical ? scroller.scrollTop : scroller.scrollLeft, cacheVersion));
-                            }
+                    if ((scrollPositionAfterUpdate >= 0 && scrollPositionAfterUpdate < roundedMaxPositionAfterUpdate) ||
+                        (scrollSize !== roundedMaxPositionAfterUpdate || currentScrollSize !== scrollPositionAfterUpdate)) {
+                        this._trackBox.clearDelta();
+                        if (this._readyForShow) {
+                            this.emitScrollEvent(true, false, userAction);
+                        }
+                        const params = {
+                            [isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: scrollPositionAfterUpdate, blending: true, userAction,
+                            fireUpdate, behavior: BEHAVIOR_INSTANT, duration: this.animationParams().scrollToItem,
+                        };
+                        scroller.scrollTo(params);
+                        if (emitUpdate) {
+                            this._$update.next(this.getScrollStateVersion(totalSize, this._isVertical ? scroller.scrollTop : scroller.scrollLeft, cacheVersion));
                         }
-                        return;
                     }
+                    return;
                 }
                 if (emitUpdate) {
                     this._$update.next(this.getScrollStateVersion(totalSize, this._isVertical ? scroller.scrollTop : scroller.scrollLeft, cacheVersion));
@@ -6763,13 +6782,13 @@ class NgVirtualListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgVirtualListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NgVirtualListComponent, isStandalone: false, selector: "ng-virtual-list", inputs: { scrollbarThickness: { classPropertyName: "scrollbarThickness", publicName: "scrollbarThickness", isSignal: true, isRequired: false, transformFunction: null }, scrollbarMinSize: { classPropertyName: "scrollbarMinSize", publicName: "scrollbarMinSize", isSignal: true, isRequired: false, transformFunction: null }, scrollbarThumbRenderer: { classPropertyName: "scrollbarThumbRenderer", publicName: "scrollbarThumbRenderer", isSignal: true, isRequired: false, transformFunction: null }, scrollbarThumbParams: { classPropertyName: "scrollbarThumbParams", publicName: "scrollbarThumbParams", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, waitForPreparation: { classPropertyName: "waitForPreparation", publicName: "waitForPreparation", isSignal: true, isRequired: false, transformFunction: null }, clickDistance: { classPropertyName: "clickDistance", publicName: "clickDistance", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, defaultItemValue: { classPropertyName: "defaultItemValue", publicName: "defaultItemValue", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, collapsedIds: { classPropertyName: "collapsedIds", publicName: "collapsedIds", isSignal: true, isRequired: false, transformFunction: null }, selectByClick: { classPropertyName: "selectByClick", publicName: "selectByClick", isSignal: true, isRequired: false, transformFunction: null }, collapseByClick: { classPropertyName: "collapseByClick", publicName: "collapseByClick", isSignal: true, isRequired: false, transformFunction: null }, snap: { classPropertyName: "snap", publicName: "snap", isSignal: true, isRequired: false, transformFunction: null }, snapToEndTransitionInstantOffset: { classPropertyName: "snapToEndTransitionInstantOffset", publicName: "snapToEndTransitionInstantOffset", isSignal: true, isRequired: false, transformFunction: null }, scrollStartOffset: { classPropertyName: "scrollStartOffset", publicName: "scrollStartOffset", isSignal: true, isRequired: false, transformFunction: null }, scrollEndOffset: { classPropertyName: "scrollEndOffset", publicName: "scrollEndOffset", isSignal: true, isRequired: false, transformFunction: null }, snapScrollToStart: { classPropertyName: "snapScrollToStart", publicName: "snapScrollToStart", isSignal: true, isRequired: false, transformFunction: null }, snapScrollToEnd: { classPropertyName: "snapScrollToEnd", publicName: "snapScrollToEnd", isSignal: true, isRequired: false, transformFunction: null }, snapScrollToBottom: { classPropertyName: "snapScrollToBottom", publicName: "snapScrollToBottom", isSignal: true, isRequired: false, transformFunction: null }, scrollbarEnabled: { classPropertyName: "scrollbarEnabled", publicName: "scrollbarEnabled", isSignal: true, isRequired: false, transformFunction: null }, scrollbarInteractive: { classPropertyName: "scrollbarInteractive", publicName: "scrollbarInteractive", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, animationParams: { classPropertyName: "animationParams", publicName: "animationParams", isSignal: true, isRequired: false, transformFunction: null }, overscrollEnabled: { classPropertyName: "overscrollEnabled", publicName: "overscrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, enabledBufferOptimization: { classPropertyName: "enabledBufferOptimization", publicName: "enabledBufferOptimization", isSignal: true, isRequired: false, transformFunction: null }, itemRenderer: { classPropertyName: "itemRenderer", publicName: "itemRenderer", isSignal: true, isRequired: true, transformFunction: null }, itemConfigMap: { classPropertyName: "itemConfigMap", publicName: "itemConfigMap", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, dynamicSize: { classPropertyName: "dynamicSize", publicName: "dynamicSize", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, collectionMode: { classPropertyName: "collectionMode", publicName: "collectionMode", isSignal: true, isRequired: false, transformFunction: null }, bufferSize: { classPropertyName: "bufferSize", publicName: "bufferSize", isSignal: true, isRequired: false, transformFunction: null }, maxBufferSize: { classPropertyName: "maxBufferSize", publicName: "maxBufferSize", isSignal: true, isRequired: false, transformFunction: null }, snappingMethod: { classPropertyName: "snappingMethod", publicName: "snappingMethod", isSignal: true, isRequired: false, transformFunction: null }, methodForSelecting: { classPropertyName: "methodForSelecting", publicName: "methodForSelecting", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, screenReaderMessage: { classPropertyName: "screenReaderMessage", publicName: "screenReaderMessage", isSignal: true, isRequired: false, transformFunction: null }, langTextDir: { classPropertyName: "langTextDir", publicName: "langTextDir", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onScroll: "onScroll", onScrollEnd: "onScrollEnd", onViewportChange: "onViewportChange", 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, isSignal: true }, { propertyName: "_scrollerComponent", first: true, predicate: ["scroller"], descendants: true, isSignal: true }, { propertyName: "_listContainerRef", first: true, predicate: ["renderersContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_snapContainerRef", first: true, predicate: ["snapRendererContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div aria-live=\"polite\" aria-atomic=\"true\" class=\"ngvl__screen-reader\">\r\n  {{ screenReaderFormattedMessage() }}\r\n</div>\r\n\r\n<prerender-container #prerender [bounds]=\"bounds()!\" [direction]=\"direction()\"\r\n  [dynamic]=\"dynamicSize()\" [isVertical]=\"isVertical\" [itemSize]=\"itemSize()\" [trackBy]=\"trackBy()\"\r\n  [itemRenderer]=\"itemRenderer()\" [startOffset]=\"scrollStartOffset()\" [endOffset]=\"scrollEndOffset()\"\r\n  [scrollbarEnabled]=\"scroller.scrollbarShow()\" [enabled]=\"dynamicSize() && snapScrollToEnd()\" />\r\n\r\n@if (snap()) {\r\n  <div localeSensitive [langTextDir]=\"langTextDir()\" #snappedContainer class=\"ngvl__snapped-container\"\r\n    [ngClass]=\"classes()\">\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}\r\n<ng-scroller #scroller class=\"ngvl__list-scroller\" [classes]=\"classes()\" [startOffset]=\"scrollStartOffset()\"\r\n  [direction]=\"direction()\" [endOffset]=\"scrollEndOffset()\" [scrollbarThumbRenderer]=\"scrollbarThumbRenderer()\"\r\n  [scrollbarThickness]=\"scrollbarThickness()\" [scrollbarThumbParams]=\"scrollbarThumbParams()\"\r\n  [focusedElement]=\"focusedElement()\" [loading]=\"loading()\" [overscrollEnabled]=\"overscrollEnabled()\"\r\n  [scrollbarEnabled]=\"scrollbarEnabled()\" [scrollbarInteractive]=\"scrollbarInteractive()\"\r\n  [scrollbarMinSize]=\"scrollbarMinSize()\" [scrollBehavior]=\"scrollBehavior()\">\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;pointer-events:none;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: "component", type: NgScrollerComponent, selector: "ng-scroller", inputs: ["scrollbarEnabled", "scrollbarInteractive", "focusedElement", "content", "loading", "classes", "scrollbarMinSize", "scrollbarThickness", "scrollbarThumbRenderer", "scrollbarThumbParams"], outputs: ["onScrollbarVisible"] }, { kind: "component", type: PrerenderContainer, selector: "prerender-container", inputs: ["enabled", "direction", "isVertical", "scrollbarEnabled", "startOffset", "endOffset", "bounds", "dynamic", "itemSize", "trackBy", "itemRenderer"] }, { kind: "directive", type: LocaleSensitiveDirective, selector: "[localeSensitive]", inputs: ["langTextDir", "listDir"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NgVirtualListComponent, isStandalone: false, selector: "ng-virtual-list", inputs: { scrollbarThickness: { classPropertyName: "scrollbarThickness", publicName: "scrollbarThickness", isSignal: true, isRequired: false, transformFunction: null }, scrollbarMinSize: { classPropertyName: "scrollbarMinSize", publicName: "scrollbarMinSize", isSignal: true, isRequired: false, transformFunction: null }, scrollbarThumbRenderer: { classPropertyName: "scrollbarThumbRenderer", publicName: "scrollbarThumbRenderer", isSignal: true, isRequired: false, transformFunction: null }, scrollbarThumbParams: { classPropertyName: "scrollbarThumbParams", publicName: "scrollbarThumbParams", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, waitForPreparation: { classPropertyName: "waitForPreparation", publicName: "waitForPreparation", isSignal: true, isRequired: false, transformFunction: null }, clickDistance: { classPropertyName: "clickDistance", publicName: "clickDistance", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, defaultItemValue: { classPropertyName: "defaultItemValue", publicName: "defaultItemValue", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, collapsedIds: { classPropertyName: "collapsedIds", publicName: "collapsedIds", isSignal: true, isRequired: false, transformFunction: null }, selectByClick: { classPropertyName: "selectByClick", publicName: "selectByClick", isSignal: true, isRequired: false, transformFunction: null }, collapseByClick: { classPropertyName: "collapseByClick", publicName: "collapseByClick", isSignal: true, isRequired: false, transformFunction: null }, snap: { classPropertyName: "snap", publicName: "snap", isSignal: true, isRequired: false, transformFunction: null }, snapToEndTransitionInstantOffset: { classPropertyName: "snapToEndTransitionInstantOffset", publicName: "snapToEndTransitionInstantOffset", isSignal: true, isRequired: false, transformFunction: null }, scrollStartOffset: { classPropertyName: "scrollStartOffset", publicName: "scrollStartOffset", isSignal: true, isRequired: false, transformFunction: null }, scrollEndOffset: { classPropertyName: "scrollEndOffset", publicName: "scrollEndOffset", isSignal: true, isRequired: false, transformFunction: null }, snapScrollToStart: { classPropertyName: "snapScrollToStart", publicName: "snapScrollToStart", isSignal: true, isRequired: false, transformFunction: null }, snapScrollToEnd: { classPropertyName: "snapScrollToEnd", publicName: "snapScrollToEnd", isSignal: true, isRequired: false, transformFunction: null }, snapScrollToBottom: { classPropertyName: "snapScrollToBottom", publicName: "snapScrollToBottom", isSignal: true, isRequired: false, transformFunction: null }, scrollbarEnabled: { classPropertyName: "scrollbarEnabled", publicName: "scrollbarEnabled", isSignal: true, isRequired: false, transformFunction: null }, scrollbarInteractive: { classPropertyName: "scrollbarInteractive", publicName: "scrollbarInteractive", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, animationParams: { classPropertyName: "animationParams", publicName: "animationParams", isSignal: true, isRequired: false, transformFunction: null }, overscrollEnabled: { classPropertyName: "overscrollEnabled", publicName: "overscrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, enabledBufferOptimization: { classPropertyName: "enabledBufferOptimization", publicName: "enabledBufferOptimization", isSignal: true, isRequired: false, transformFunction: null }, itemRenderer: { classPropertyName: "itemRenderer", publicName: "itemRenderer", isSignal: true, isRequired: true, transformFunction: null }, itemConfigMap: { classPropertyName: "itemConfigMap", publicName: "itemConfigMap", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, dynamicSize: { classPropertyName: "dynamicSize", publicName: "dynamicSize", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, collectionMode: { classPropertyName: "collectionMode", publicName: "collectionMode", isSignal: true, isRequired: false, transformFunction: null }, bufferSize: { classPropertyName: "bufferSize", publicName: "bufferSize", isSignal: true, isRequired: false, transformFunction: null }, maxBufferSize: { classPropertyName: "maxBufferSize", publicName: "maxBufferSize", isSignal: true, isRequired: false, transformFunction: null }, snappingMethod: { classPropertyName: "snappingMethod", publicName: "snappingMethod", isSignal: true, isRequired: false, transformFunction: null }, methodForSelecting: { classPropertyName: "methodForSelecting", publicName: "methodForSelecting", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, screenReaderMessage: { classPropertyName: "screenReaderMessage", publicName: "screenReaderMessage", isSignal: true, isRequired: false, transformFunction: null }, langTextDir: { classPropertyName: "langTextDir", publicName: "langTextDir", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onScroll: "onScroll", onScrollEnd: "onScrollEnd", onViewportChange: "onViewportChange", 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, isSignal: true }, { propertyName: "_scrollerComponent", first: true, predicate: ["scroller"], descendants: true, isSignal: true }, { propertyName: "_listContainerRef", first: true, predicate: ["renderersContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_snapContainerRef", first: true, predicate: ["snapRendererContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div aria-live=\"polite\" aria-atomic=\"true\" class=\"ngvl__screen-reader\">\r\n  {{ screenReaderFormattedMessage() }}\r\n</div>\r\n\r\n<ng-prerender-container #prerender [bounds]=\"bounds()!\" [direction]=\"direction()\"\r\n  [dynamic]=\"dynamicSize()\" [isVertical]=\"isVertical\" [itemSize]=\"itemSize()\" [trackBy]=\"trackBy()\"\r\n  [itemRenderer]=\"itemRenderer()\" [startOffset]=\"scrollStartOffset()\" [endOffset]=\"scrollEndOffset()\"\r\n  [scrollbarEnabled]=\"scroller.scrollbarShow()\" [enabled]=\"dynamicSize() && snapScrollToEnd()\" />\r\n\r\n@if (snap()) {\r\n  <div localeSensitive [langTextDir]=\"langTextDir()\" #snappedContainer class=\"ngvl__snapped-container\"\r\n    [ngClass]=\"classes()\">\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}\r\n<ng-scroller #scroller class=\"ngvl__list-scroller\" [classes]=\"classes()\" [startOffset]=\"scrollStartOffset()\"\r\n  [direction]=\"direction()\" [endOffset]=\"scrollEndOffset()\" [scrollbarThumbRenderer]=\"scrollbarThumbRenderer()\"\r\n  [scrollbarThickness]=\"scrollbarThickness()\" [scrollbarThumbParams]=\"scrollbarThumbParams()\"\r\n  [focusedElement]=\"focusedElement()\" [loading]=\"loading()\" [overscrollEnabled]=\"overscrollEnabled()\"\r\n  [scrollbarEnabled]=\"scrollbarEnabled()\" [scrollbarInteractive]=\"scrollbarInteractive()\"\r\n  [scrollbarMinSize]=\"scrollbarMinSize()\" [scrollBehavior]=\"scrollBehavior()\">\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;pointer-events:none;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: "component", type: NgScrollerComponent, selector: "ng-scroller", inputs: ["scrollbarEnabled", "scrollbarInteractive", "focusedElement", "content", "loading", "classes", "scrollbarMinSize", "scrollbarThickness", "scrollbarThumbRenderer", "scrollbarThumbParams"], outputs: ["onScrollbarVisible"] }, { kind: "component", type: NgPrerenderContainer, selector: "ng-prerender-container", inputs: ["enabled", "direction", "isVertical", "scrollbarEnabled", "startOffset", "endOffset", "bounds", "dynamic", "itemSize", "trackBy", "itemRenderer"] }, { kind: "directive", type: LocaleSensitiveDirective, selector: "[localeSensitive]", inputs: ["langTextDir", "listDir"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", 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() }}\r\n</div>\r\n\r\n<prerender-container #prerender [bounds]=\"bounds()!\" [direction]=\"direction()\"\r\n  [dynamic]=\"dynamicSize()\" [isVertical]=\"isVertical\" [itemSize]=\"itemSize()\" [trackBy]=\"trackBy()\"\r\n  [itemRenderer]=\"itemRenderer()\" [startOffset]=\"scrollStartOffset()\" [endOffset]=\"scrollEndOffset()\"\r\n  [scrollbarEnabled]=\"scroller.scrollbarShow()\" [enabled]=\"dynamicSize() && snapScrollToEnd()\" />\r\n\r\n@if (snap()) {\r\n  <div localeSensitive [langTextDir]=\"langTextDir()\" #snappedContainer class=\"ngvl__snapped-container\"\r\n    [ngClass]=\"classes()\">\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}\r\n<ng-scroller #scroller class=\"ngvl__list-scroller\" [classes]=\"classes()\" [startOffset]=\"scrollStartOffset()\"\r\n  [direction]=\"direction()\" [endOffset]=\"scrollEndOffset()\" [scrollbarThumbRenderer]=\"scrollbarThumbRenderer()\"\r\n  [scrollbarThickness]=\"scrollbarThickness()\" [scrollbarThumbParams]=\"scrollbarThumbParams()\"\r\n  [focusedElement]=\"focusedElement()\" [loading]=\"loading()\" [overscrollEnabled]=\"overscrollEnabled()\"\r\n  [scrollbarEnabled]=\"scrollbarEnabled()\" [scrollbarInteractive]=\"scrollbarInteractive()\"\r\n  [scrollbarMinSize]=\"scrollbarMinSize()\" [scrollBehavior]=\"scrollBehavior()\">\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;pointer-events:none;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() }}\r\n</div>\r\n\r\n<ng-prerender-container #prerender [bounds]=\"bounds()!\" [direction]=\"direction()\"\r\n  [dynamic]=\"dynamicSize()\" [isVertical]=\"isVertical\" [itemSize]=\"itemSize()\" [trackBy]=\"trackBy()\"\r\n  [itemRenderer]=\"itemRenderer()\" [startOffset]=\"scrollStartOffset()\" [endOffset]=\"scrollEndOffset()\"\r\n  [scrollbarEnabled]=\"scroller.scrollbarShow()\" [enabled]=\"dynamicSize() && snapScrollToEnd()\" />\r\n\r\n@if (snap()) {\r\n  <div localeSensitive [langTextDir]=\"langTextDir()\" #snappedContainer class=\"ngvl__snapped-container\"\r\n    [ngClass]=\"classes()\">\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}\r\n<ng-scroller #scroller class=\"ngvl__list-scroller\" [classes]=\"classes()\" [startOffset]=\"scrollStartOffset()\"\r\n  [direction]=\"direction()\" [endOffset]=\"scrollEndOffset()\" [scrollbarThumbRenderer]=\"scrollbarThumbRenderer()\"\r\n  [scrollbarThickness]=\"scrollbarThickness()\" [scrollbarThumbParams]=\"scrollbarThumbParams()\"\r\n  [focusedElement]=\"focusedElement()\" [loading]=\"loading()\" [overscrollEnabled]=\"overscrollEnabled()\"\r\n  [scrollbarEnabled]=\"scrollbarEnabled()\" [scrollbarInteractive]=\"scrollbarInteractive()\"\r\n  [scrollbarMinSize]=\"scrollbarMinSize()\" [scrollBehavior]=\"scrollBehavior()\">\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;pointer-events:none;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: () => [], propDecorators: { _prerender: [{ type: i0.ViewChild, args: ['prerender', { isSignal: true }] }], _listContainerRef: [{
                 type: ViewChild,
                 args: ['renderersContainer', { read: ViewContainerRef }]
@@ -6853,77 +6872,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 }]
         }] });
 
-class PrerenderVirtualListItemModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PrerenderVirtualListItemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: PrerenderVirtualListItemModule, declarations: [PrerenderVirtualListItemComponent], imports: [CommonModule, ItemClickModule], exports: [PrerenderVirtualListItemComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PrerenderVirtualListItemModule, imports: [CommonModule, ItemClickModule] });
+class NgPrerenderVirtualListItemModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgPrerenderVirtualListItemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: NgPrerenderVirtualListItemModule, declarations: [NgPrerenderVirtualListItemComponent], imports: [CommonModule, ItemClickModule], exports: [NgPrerenderVirtualListItemComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgPrerenderVirtualListItemModule, imports: [CommonModule, ItemClickModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PrerenderVirtualListItemModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgPrerenderVirtualListItemModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [PrerenderVirtualListItemComponent],
-                    exports: [PrerenderVirtualListItemComponent],
+                    declarations: [NgPrerenderVirtualListItemComponent],
+                    exports: [NgPrerenderVirtualListItemComponent],
                     imports: [CommonModule, ItemClickModule],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
                 }]
         }] });
 
-class PrerenderScrollerModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PrerenderScrollerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: PrerenderScrollerModule, declarations: [PrerenderScrollerComponent], imports: [CommonModule, LocaleSensitiveModule], exports: [PrerenderScrollerComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PrerenderScrollerModule, imports: [CommonModule, LocaleSensitiveModule] });
+class NgPrerenderScrollerModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgPrerenderScrollerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: NgPrerenderScrollerModule, declarations: [NgPrerenderScrollerComponent], imports: [CommonModule, LocaleSensitiveModule], exports: [NgPrerenderScrollerComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgPrerenderScrollerModule, imports: [CommonModule, LocaleSensitiveModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PrerenderScrollerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgPrerenderScrollerModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [PrerenderScrollerComponent],
-                    exports: [PrerenderScrollerComponent],
+                    declarations: [NgPrerenderScrollerComponent],
+                    exports: [NgPrerenderScrollerComponent],
                     imports: [CommonModule, LocaleSensitiveModule],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
                 }]
         }] });
 
-class PrerenderListModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PrerenderListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: PrerenderListModule, declarations: [PrerenderList], imports: [CommonModule, PrerenderVirtualListItemModule, PrerenderScrollerModule], exports: [PrerenderList] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PrerenderListModule, imports: [CommonModule, PrerenderVirtualListItemModule, PrerenderScrollerModule] });
+class NgPrerenderListModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgPrerenderListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: NgPrerenderListModule, declarations: [NgPrerenderList], imports: [CommonModule, NgPrerenderVirtualListItemModule, NgPrerenderScrollerModule], exports: [NgPrerenderList] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgPrerenderListModule, imports: [CommonModule, NgPrerenderVirtualListItemModule, NgPrerenderScrollerModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PrerenderListModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgPrerenderListModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [PrerenderList],
-                    exports: [PrerenderList],
-                    imports: [CommonModule, PrerenderVirtualListItemModule, PrerenderScrollerModule],
+                    declarations: [NgPrerenderList],
+                    exports: [NgPrerenderList],
+                    imports: [CommonModule, NgPrerenderVirtualListItemModule, NgPrerenderScrollerModule],
                     schemas: [NO_ERRORS_SCHEMA],
                 }]
         }] });
 
-class PrerenderContainerModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PrerenderContainerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: PrerenderContainerModule, declarations: [PrerenderContainer], imports: [CommonModule, PrerenderListModule], exports: [PrerenderContainer] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PrerenderContainerModule, imports: [CommonModule, PrerenderListModule] });
+class NgPrerenderContainerModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgPrerenderContainerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: NgPrerenderContainerModule, declarations: [NgPrerenderContainer], imports: [CommonModule, NgPrerenderListModule], exports: [NgPrerenderContainer] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgPrerenderContainerModule, imports: [CommonModule, NgPrerenderListModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PrerenderContainerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgPrerenderContainerModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [PrerenderContainer],
-                    exports: [PrerenderContainer],
-                    imports: [CommonModule, PrerenderListModule],
+                    declarations: [NgPrerenderContainer],
+                    exports: [NgPrerenderContainer],
+                    imports: [CommonModule, NgPrerenderListModule],
                     schemas: [NO_ERRORS_SCHEMA],
                 }]
         }] });
 
 class NgVirtualListModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgVirtualListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: NgVirtualListModule, declarations: [NgVirtualListComponent], imports: [CommonModule, NgVirtualListItemModule, NgScrollerModule, PrerenderContainerModule, LocaleSensitiveModule], exports: [NgVirtualListComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgVirtualListModule, imports: [CommonModule, NgVirtualListItemModule, NgScrollerModule, PrerenderContainerModule, LocaleSensitiveModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: NgVirtualListModule, declarations: [NgVirtualListComponent], imports: [CommonModule, NgVirtualListItemModule, NgScrollerModule, NgPrerenderContainerModule, LocaleSensitiveModule], exports: [NgVirtualListComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgVirtualListModule, imports: [CommonModule, NgVirtualListItemModule, NgScrollerModule, NgPrerenderContainerModule, LocaleSensitiveModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgVirtualListModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NgVirtualListComponent],
                     exports: [NgVirtualListComponent],
-                    imports: [CommonModule, NgVirtualListItemModule, NgScrollerModule, PrerenderContainerModule, LocaleSensitiveModule],
+                    imports: [CommonModule, NgVirtualListItemModule, NgScrollerModule, NgPrerenderContainerModule, LocaleSensitiveModule],
                     schemas: [NO_ERRORS_SCHEMA],
                 }]
         }] });