ng-virtual-list 17.7.12 → 17.7.13

package/fesm2022/ng-virtual-list.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { Injectable, inject, ChangeDetectorRef, signal, ElementRef, ChangeDetectionStrategy, Component, viewChild, output, input, ViewContainerRef, ViewChild, ViewEncapsulation, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
-import { Subject, tap, fromEvent, combineLatest, map, filter, distinctUntilChanged, switchMap, of } from 'rxjs';
+import { Subject, tap, fromEvent, combineLatest, map, filter, distinctUntilChanged, skip, switchMap, of } from 'rxjs';
 import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/common';
@@ -110,6 +110,7 @@ const CLASS_LIST_VERTICAL = 'vertical';
 const CLASS_LIST_HORIZONTAL = 'horizontal';
 // styles
 const PART_DEFAULT_ITEM = 'item';
+const PART_ITEM_NEW = ' item-new';
 const PART_ITEM_ODD = ' item-odd';
 const PART_ITEM_EVEN = ' item-even';
 const PART_ITEM_SNAPPED = ' item-snapped';
@@ -648,6 +649,9 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
         if (isCollapsed) {
             part += PART_ITEM_COLLAPSED;
         }
+        if (v ? v.config.new : false) {
+            part += PART_ITEM_NEW;
+        }
         if (this.focus()) {
             part += PART_ITEM_FOCUSED;
         }
@@ -1333,6 +1337,7 @@ class TrackBox extends CacheMap {
     _maxBufferSize = this._defaultBufferSize;
     _resetBufferSizeTimeout = DEFAULT_RESET_BUFFER_SIZE_TIMEOUT;
     _resetBufferSizeTimer;
+    isInit = true;
     lifeCircle() {
         this.fireChangeIfNeed();
         this.lifeCircleDo();
@@ -1345,6 +1350,9 @@ class TrackBox extends CacheMap {
             console.warn('Attention! The collection must be immutable.');
             return;
         }
+        if (this.isInit && !(!this._previousCollection || this._previousCollection.length === 0)) {
+            this.isInit = false;
+        }
         this.updateCache(this._previousCollection, currentCollection, itemSize);
         this._previousCollection = currentCollection;
     }
@@ -1568,10 +1576,10 @@ class TrackBox extends CacheMap {
         else {
             leftItemsOffset = rightItemsOffset = bufferSize;
         }
-        let itemsFromStartToScrollEnd = -1, itemsFromDisplayEndToOffsetEnd = 0, itemsFromStartToDisplayEnd = -1, leftItemLength = 0, rightItemLength = 0, leftItemsWeight = 0, rightItemsWeight = 0, leftHiddenItemsWeight = 0, totalItemsToDisplayEndWeight = 0, leftSizeOfAddedItems = 0, leftSizeOfUpdatedItems = 0, leftSizeOfDeletedItems = 0, itemById = undefined, itemByIdPos = 0, targetDisplayItemIndex = -1, isTargetInOverscroll = false, actualScrollSize = itemByIdPos, totalSize = 0, startIndex, isFromItemIdFound = false;
+        let itemsFromStartToScrollEnd = -1, itemsFromDisplayEndToOffsetEnd = 0, itemsFromStartToDisplayEnd = -1, leftItemLength = 0, rightItemLength = 0, leftItemsWeight = 0, rightItemsWeight = 0, leftHiddenItemsWeight = 0, totalItemsToDisplayEndWeight = 0, leftSizeOfAddedItems = 0, leftSizeOfUpdatedItems = 0, leftSizeOfDeletedItems = 0, itemById = undefined, itemByIdPos = 0, targetDisplayItemIndex = -1, isTargetInOverscroll = false, actualScrollSize = itemByIdPos, totalSize = 0, startIndex, isFromItemIdFound = false, deltaFromStartCreation = 0;
         // If the list is dynamic or there are new elements in the collection, then it switches to the long algorithm.
         if (dynamicSize) {
-            let y = 0, stickyCollectionItem = undefined, stickyComponentSize = 0;
+            let y = 0, stickyCollectionItem = undefined, stickyComponentSize = 0, isNew = true;
             for (let i = 0, l = collection.length; i < l; i++) {
                 const ii = i + 1, collectionItem = collection[i], id = collectionItem.id;
                 let componentSize = 0, componentSizeDelta = 0, itemDisplayMethod = ItemDisplayMethods.NOT_CHANGED;
@@ -1579,17 +1587,24 @@ class TrackBox extends CacheMap {
                     const bounds = map.get(id) || { width: typicalItemSize, height: typicalItemSize };
                     componentSize = bounds[sizeProperty];
                     itemDisplayMethod = bounds?.method ?? ItemDisplayMethods.UPDATE;
+                    const isItemNew = bounds.isNew ?? true;
+                    if (isNew && (this.isInit || (!isItemNew && i > 0))) {
+                        isNew = false;
+                    }
                     switch (itemDisplayMethod) {
                         case ItemDisplayMethods.UPDATE: {
                             const snapshotBounds = snapshot.get(id);
                             const componentSnapshotSize = componentSize - (snapshotBounds ? snapshotBounds[sizeProperty] : typicalItemSize);
-                            componentSizeDelta = componentSnapshotSize;
-                            map.set(id, { ...bounds, method: ItemDisplayMethods.NOT_CHANGED });
+                            componentSizeDelta = isItemNew ? 0 : componentSnapshotSize;
+                            map.set(id, { ...bounds, method: ItemDisplayMethods.NOT_CHANGED, isNew: false });
+                            if (isItemNew) {
+                                deltaFromStartCreation += componentSize;
+                            }
                             break;
                         }
                         case ItemDisplayMethods.CREATE: {
-                            componentSizeDelta = typicalItemSize;
-                            map.set(id, { ...bounds, method: ItemDisplayMethods.NOT_CHANGED });
+                            componentSizeDelta = isNew ? 0 : typicalItemSize;
+                            map.set(id, { ...bounds, method: isNew ? ItemDisplayMethods.UPDATE : ItemDisplayMethods.NOT_CHANGED, isNew });
                             break;
                         }
                     }
@@ -1753,7 +1768,7 @@ class TrackBox extends CacheMap {
             actualScrollSize = scrollSize * k;
         }
         startIndex = Math.min(itemsFromStartToScrollEnd - leftItemLength, totalLength > 0 ? totalLength - 1 : 0);
-        const itemsOnDisplayWeight = totalItemsToDisplayEndWeight - leftItemsWeight, itemsOnDisplayLength = itemsFromStartToDisplayEnd - itemsFromStartToScrollEnd, startPosition = leftHiddenItemsWeight - leftItemsWeight, renderItems = itemsOnDisplayLength + leftItemLength + rightItemLength, delta = leftSizeOfUpdatedItems + leftSizeOfAddedItems - leftSizeOfDeletedItems;
+        const itemsOnDisplayWeight = totalItemsToDisplayEndWeight - leftItemsWeight, itemsOnDisplayLength = itemsFromStartToDisplayEnd - itemsFromStartToScrollEnd, startPosition = leftHiddenItemsWeight - leftItemsWeight, renderItems = itemsOnDisplayLength + leftItemLength + rightItemLength, delta = leftSizeOfUpdatedItems + leftSizeOfAddedItems - leftSizeOfDeletedItems + deltaFromStartCreation;
         const metrics = {
             delta,
             normalizedItemWidth: w,
@@ -1810,7 +1825,7 @@ class TrackBox extends CacheMap {
                     if (!items[i]) {
                         continue;
                     }
-                    const id = items[i].id, sticky = itemConfigMap[id]?.sticky ?? 0, selectable = itemConfigMap[id]?.selectable ?? true, collapsable = itemConfigMap[id]?.collapsable ?? false, size = dynamicSize ? this.get(id)?.[sizeProperty] || typicalItemSize : typicalItemSize;
+                    const id = items[i].id, cache = this.get(id), sticky = itemConfigMap[id]?.sticky ?? 0, selectable = itemConfigMap[id]?.selectable ?? true, collapsable = itemConfigMap[id]?.collapsable ?? false, size = dynamicSize ? cache?.[sizeProperty] || typicalItemSize : typicalItemSize;
                     if (sticky === 1) {
                         const isOdd = i % 2 != 0, measures = {
                             x: isVertical ? 0 : actualSnippedPosition,
@@ -1819,6 +1834,7 @@ class TrackBox extends CacheMap {
                             height: isVertical ? size : normalizedItemHeight,
                             delta: 0,
                         }, config = {
+                            new: cache.isNew === true,
                             odd: isOdd,
                             even: !isOdd,
                             isVertical,
@@ -1849,8 +1865,8 @@ class TrackBox extends CacheMap {
                     if (!items[i]) {
                         continue;
                     }
-                    const id = items[i].id, sticky = itemConfigMap[id]?.sticky ?? 0, selectable = itemConfigMap[id]?.selectable ?? true, collapsable = itemConfigMap[id]?.collapsable ?? false, size = dynamicSize
-                        ? this.get(id)?.[sizeProperty] || typicalItemSize
+                    const id = items[i].id, cache = this.get(id), sticky = itemConfigMap[id]?.sticky ?? 0, selectable = itemConfigMap[id]?.selectable ?? true, collapsable = itemConfigMap[id]?.collapsable ?? false, size = dynamicSize
+                        ? cache?.[sizeProperty] || typicalItemSize
                         : typicalItemSize;
                     if (sticky === 2) {
                         const isOdd = i % 2 != 0, w = isVertical ? normalizedItemWidth : size, h = isVertical ? size : normalizedItemHeight, measures = {
@@ -1860,6 +1876,7 @@ class TrackBox extends CacheMap {
                             height: h,
                             delta: 0,
                         }, config = {
+                            new: cache.isNew === true,
                             odd: isOdd,
                             even: !isOdd,
                             isVertical,
@@ -1891,7 +1908,7 @@ class TrackBox extends CacheMap {
                 if (!items[i]) {
                     continue;
                 }
-                const id = items[i].id, size = dynamicSize ? this.get(id)?.[sizeProperty] || typicalItemSize : typicalItemSize;
+                const id = items[i].id, cache = this.get(id), size = dynamicSize ? cache?.[sizeProperty] || typicalItemSize : typicalItemSize;
                 if (id !== stickyItem?.id && id !== endStickyItem?.id) {
                     const isOdd = i % 2 != 0, sticky = itemConfigMap[id]?.sticky ?? 0, selectable = itemConfigMap[id]?.selectable ?? true, collapsable = itemConfigMap[id]?.collapsable ?? false, snapped = snap && (sticky === 1 && pos <= scrollSize || sticky === 2 && pos >= scrollSize + boundsSize - size), measures = {
                         x: isVertical ? sticky === 1 ? 0 : boundsSize - size : pos,
@@ -1900,6 +1917,7 @@ class TrackBox extends CacheMap {
                         height: isVertical ? size : normalizedItemHeight,
                         delta: 0,
                     }, config = {
+                        new: cache.isNew === true,
                         odd: isOdd,
                         even: !isOdd,
                         isVertical,
@@ -2003,7 +2021,7 @@ class TrackBox extends CacheMap {
                 continue;
             }
             const bounds = component.instance.getBounds();
-            this.set(itemId, bounds);
+            this.set(itemId, { ...(this.get(itemId) || {}), ...bounds });
         }
     }
     dispose() {
@@ -2149,6 +2167,14 @@ class NgVirtualListComponent {
      * Fires when elements are collapsed.
      */
     onCollapse = output();
+    /**
+     * Fires when the scroll reaches the start.
+     */
+    onScrollReachStart = output();
+    /**
+     * Fires when the scroll reaches the end.
+     */
+    onScrollReachEnd = output();
     _itemsOptions = {
         transform: (v) => {
             let valid = validateArray(v, true);
@@ -2206,7 +2232,7 @@ class NgVirtualListComponent {
     selectedIds = input(undefined, { ...this._selectedIdsOptions });
     _collapsedIdsOptions = {
         transform: (v) => {
-            let valid = validateArray(v, true) || validateString(v, true) || validateFloat(v, true);
+            let valid = validateArray(v, true);
             if (valid) {
                 if (v && Array.isArray(v)) {
                     for (let i = 0, l = v.length; i < l; i++) {
@@ -2219,7 +2245,7 @@ class NgVirtualListComponent {
                 }
             }
             if (!valid) {
-                console.error('The "collapsedIds" parameter must be of type `Array<Id> | Id` or `undefined`.');
+                console.error('The "collapsedIds" parameter must be of type `Array<Id>.');
                 return [];
             }
             return v;
@@ -2292,10 +2318,9 @@ class NgVirtualListComponent {
     enabledBufferOptimization = input(DEFAULT_ENABLED_BUFFER_OPTIMIZATION, { ...this._enabledBufferOptimizationOptions });
     _itemRendererOptions = {
         transform: (v) => {
-            const valid = validateObject(v);
-            if (v) {
-                Object.hasOwn(v, 'elementRef');
-                Object.hasOwn(v, 'createEmbeddedView');
+            let valid = validateObject(v);
+            if (v && !(typeof v.elementRef === 'object' && typeof v.createEmbeddedView === 'function')) {
+                valid = false;
             }
             if (!valid) {
                 throw Error('The "itemRenderer" parameter must be of type `TemplateRef`.');
@@ -2487,6 +2512,8 @@ class NgVirtualListComponent {
     _snapedDisplayComponent;
     _bounds = signal(null);
     _scrollSize = signal(0);
+    _isScrollStart = signal(true);
+    _isScrollFinished = signal(false);
     _resizeObserver = null;
     _resizeSnappedComponentHandler = () => {
         const list = this._list(), container = this._container(), bounds = this._bounds(), snappedComponent = this._snapedDisplayComponent?.instance;
@@ -2585,7 +2612,17 @@ class NgVirtualListComponent {
         toObservable(this._list).pipe(takeUntilDestroyed(), filter(v => !!v), tap(v => {
             this._service.listElement = v.nativeElement;
         })).subscribe();
-        const $trackBy = toObservable(this.trackBy), $selectByClick = toObservable(this.selectByClick), $collapseByClick = toObservable(this.collapseByClick);
+        const $trackBy = toObservable(this.trackBy), $selectByClick = toObservable(this.selectByClick), $collapseByClick = toObservable(this.collapseByClick), $isScrollStart = toObservable(this._isScrollStart), $isScrollFinished = toObservable(this._isScrollFinished);
+        $isScrollStart.pipe(takeUntilDestroyed(), distinctUntilChanged(), skip(1), tap(v => {
+            if (v) {
+                this.onScrollReachStart.emit();
+            }
+        })).subscribe();
+        $isScrollFinished.pipe(takeUntilDestroyed(), distinctUntilChanged(), skip(1), tap(v => {
+            if (v) {
+                this.onScrollReachEnd.emit();
+            }
+        })).subscribe();
         $selectByClick.pipe(takeUntilDestroyed(), tap(v => {
             this._service.selectByClick = v;
         })).subscribe();
@@ -2673,6 +2710,9 @@ class NgVirtualListComponent {
             this.resetBoundsSize(isVertical, totalSize);
             this.createDisplayComponentsIfNeed(displayItems);
             this.tracking();
+            const scrollLength = (this._isVertical ? this._container()?.nativeElement.scrollHeight ?? 0 : this._container()?.nativeElement.scrollWidth) ?? 0, actualScrollLength = scrollLength === 0 ? 0 : scrollLength - (this._isVertical ? height : width), scrollPosition = actualScrollSize + this._trackBox.delta;
+            this._isScrollStart.set(scrollPosition === 0);
+            this._isScrollFinished.set(scrollPosition === actualScrollLength);
             if (this._isSnappingMethodAdvanced) {
                 this.updateRegularRenderer();
             }
@@ -2997,7 +3037,7 @@ class NgVirtualListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgVirtualListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NgVirtualListComponent, selector: "ng-virtual-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, 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 }, 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 }, 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 } }, outputs: { onScroll: "onScroll", onScrollEnd: "onScrollEnd", onViewportChange: "onViewportChange", onItemClick: "onItemClick", onSelect: "onSelect", onCollapse: "onCollapse" }, host: { styleAttribute: "position: relative;" }, providers: [NgVirtualListService], viewQueries: [{ propertyName: "_snappedContainer", first: true, predicate: ["snapped"], descendants: true, isSignal: true }, { propertyName: "_container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "_list", first: true, predicate: ["list"], 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: "@if (snap()) {\r\n  <div #snapped part=\"snapped-item\" class=\"ngvl__list-snapper\">\r\n    <ng-container #snapRendererContainer></ng-container>\r\n  </div>\r\n}\r\n<div #container part=\"scroller\" class=\"ngvl__scroller\">\r\n  <div [attr.aria-orientation]=\"orientation\" [attr.aria-activedescendant]=\"focusedElement()\" #list part=\"list\" class=\"ngvl__list\">\r\n    <ng-container #renderersContainer></ng-container>\r\n  </div>\r\n</div>", styles: [":host{position:relative;display:block;width:400px;overflow:hidden}:host(.horizontal){height:48px}:host(.horizontal) .ngvl__list{display:inline-flex}:host(.horizontal) .ngvl__scroller{overflow:auto hidden}:host(.vertical) .ngvl__scroller{overflow:hidden auto}:host(.vertical){height:320px}.ngvl__scroller{overflow:auto;width:100%;height:100%}.ngvl__list-snapper{pointer-events:none;position:absolute;list-style:none;left:0;top:0;z-index:1}.ngvl__list{position:relative;list-style:none;padding:0;margin:0;width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NgVirtualListComponent, selector: "ng-virtual-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, 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 }, 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 }, 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 } }, outputs: { onScroll: "onScroll", onScrollEnd: "onScrollEnd", onViewportChange: "onViewportChange", onItemClick: "onItemClick", onSelect: "onSelect", onCollapse: "onCollapse", onScrollReachStart: "onScrollReachStart", onScrollReachEnd: "onScrollReachEnd" }, host: { styleAttribute: "position: relative;" }, providers: [NgVirtualListService], viewQueries: [{ propertyName: "_snappedContainer", first: true, predicate: ["snapped"], descendants: true, isSignal: true }, { propertyName: "_container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "_list", first: true, predicate: ["list"], 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: "@if (snap()) {\r\n  <div #snapped part=\"snapped-item\" class=\"ngvl__list-snapper\">\r\n    <ng-container #snapRendererContainer></ng-container>\r\n  </div>\r\n}\r\n<div #container part=\"scroller\" class=\"ngvl__scroller\">\r\n  <div [attr.aria-orientation]=\"orientation\" [attr.aria-activedescendant]=\"focusedElement()\" #list part=\"list\" class=\"ngvl__list\">\r\n    <ng-container #renderersContainer></ng-container>\r\n  </div>\r\n</div>", styles: [":host{position:relative;display:block;width:400px;overflow:hidden}:host(.horizontal){height:48px}:host(.horizontal) .ngvl__list{display:inline-flex}:host(.horizontal) .ngvl__scroller{overflow:auto hidden}:host(.vertical) .ngvl__scroller{overflow:hidden auto}:host(.vertical){height:320px}.ngvl__scroller{overflow:auto;width:100%;height:100%}.ngvl__list-snapper{pointer-events:none;position:absolute;list-style:none;left:0;top:0;z-index:1}.ngvl__list{position:relative;list-style:none;padding:0;margin:0;width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgVirtualListComponent, decorators: [{
             type: Component,