ng-virtual-list 20.7.9 → 20.7.10

package/README.md

@@ -599,7 +599,7 @@ Inputs
 | items | [IVirtualListCollection](https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/models/collection.model.ts) | Collection of list items. The collection of elements must be immutable. |
 | itemSize | number? = 24 | If direction = 'vertical', then the height of a typical element. If direction = 'horizontal', then the width of a typical element. Ignored if the dynamicSize property is true. |
 | bufferSize | number? = 2 | Number of elements outside the scope of visibility. Default value is 2. |
-| maxBufferSize | number? = 100 | Maximum number of elements outside the scope of visibility. Default value is 100. If maxBufferSize is set to be greater than bufferSize, then adaptive buffer mode is enabled. The greater the scroll size, the more elements are allocated for rendering. |
+| maxBufferSize | number? = 10 | Maximum number of elements outside the scope of visibility. Default value is 10. If maxBufferSize is set to be greater than bufferSize, then adaptive buffer mode is enabled. The greater the scroll size, the more elements are allocated for rendering. |
 | itemRenderer | TemplateRef | Rendering element template. |
 | methodForSelecting | [MethodForSelecting](https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/enums/method-for-selecting.ts) | Method for selecting list items. Default value is 'none'. 'select' - List items are selected one by one. 'multi-select' - Multiple selection of list items. 'none' - List items are not selectable. |
 | itemConfigMap | [IVirtualListItemConfigMap?](https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/models/item-config-map.model.ts) | Sets `sticky` position and `selectable` for the list item element. If `sticky` position is greater than `0`, then `sticky` position is applied. If the `sticky` value is greater than `0`, then the `sticky` position mode is enabled for the element. `1` - position start, `2` - position end. Default value is `0`. `selectable` determines whether an element can be selected or not. Default value is `true`. |
@@ -644,12 +644,12 @@ Methods
 
 | Angular version | ng-virtual-list version | git | npm |
 |--|--|--|--|
-| 19.x | 19.7.11 | [19.x](https://github.com/DjonnyX/ng-virtual-list/tree/19.x) | [19.7.11](https://www.npmjs.com/package/ng-virtual-list/v/19.7.11) |
-| 18.x | 18.7.9 | [18.x](https://github.com/DjonnyX/ng-virtual-list/tree/18.x) | [18.7.9](https://www.npmjs.com/package/ng-virtual-list/v/18.7.9) |
-| 17.x | 17.7.9 | [17.x](https://github.com/DjonnyX/ng-virtual-list/tree/17.x) | [17.7.9](https://www.npmjs.com/package/ng-virtual-list/v/17.7.9) |
-| 16.x | 16.7.8 | [16.x](https://github.com/DjonnyX/ng-virtual-list/tree/16.x) | [16.7.8](https://www.npmjs.com/package/ng-virtual-list/v/16.7.8) |
-| 15.x | 15.7.8 | [15.x](https://github.com/DjonnyX/ng-virtual-list/tree/15.x) | [15.7.8](https://www.npmjs.com/package/ng-virtual-list/v/15.7.8) |
-| 14.x | 14.7.8 | [14.x](https://github.com/DjonnyX/ng-virtual-list/tree/14.x) | [14.7.8](https://www.npmjs.com/package/ng-virtual-list/v/14.7.8) |
+| 19.x | 19.7.14 | [19.x](https://github.com/DjonnyX/ng-virtual-list/tree/19.x) | [19.7.14](https://www.npmjs.com/package/ng-virtual-list/v/19.7.14) |
+| 18.x | 18.7.10 | [18.x](https://github.com/DjonnyX/ng-virtual-list/tree/18.x) | [18.7.10](https://www.npmjs.com/package/ng-virtual-list/v/18.7.10) |
+| 17.x | 17.7.11 | [17.x](https://github.com/DjonnyX/ng-virtual-list/tree/17.x) | [17.7.11](https://www.npmjs.com/package/ng-virtual-list/v/17.7.11) |
+| 16.x | 16.7.9 | [16.x](https://github.com/DjonnyX/ng-virtual-list/tree/16.x) | [16.7.9](https://www.npmjs.com/package/ng-virtual-list/v/16.7.9) |
+| 15.x | 15.7.9 | [15.x](https://github.com/DjonnyX/ng-virtual-list/tree/15.x) | [15.7.9](https://www.npmjs.com/package/ng-virtual-list/v/15.7.9) |
+| 14.x | 14.7.9 | [14.x](https://github.com/DjonnyX/ng-virtual-list/tree/14.x) | [14.7.9](https://www.npmjs.com/package/ng-virtual-list/v/14.7.9) |
 
 <br/>
 

package/fesm2022/ng-virtual-list.mjs

@@ -66,7 +66,7 @@ var SnappingMethods;
 
 const DEFAULT_ITEM_SIZE = 24;
 const DEFAULT_BUFFER_SIZE = 2;
-const DEFAULT_MAX_BUFFER_SIZE = 100;
+const DEFAULT_MAX_BUFFER_SIZE = 10;
 const DEFAULT_LIST_SIZE = 400;
 const DEFAULT_SNAP = false;
 const DEFAULT_SELECT_BY_CLICK = true;
@@ -161,10 +161,14 @@ class NgVirtualListService {
     set methodOfSelecting(v) {
         this._$methodOfSelecting.next(v);
     }
+    _$focusedId = new BehaviorSubject(null);
+    $focusedId = this._$focusedId.asObservable();
+    get focusedId() { return this._$focusedId.getValue(); }
     selectByClick = DEFAULT_SELECT_BY_CLICK;
     collapseByClick = DEFAULT_COLLAPSE_BY_CLICK;
     _trackBox;
     listElement = null;
+    collection = [];
     constructor() {
         this._$methodOfSelecting.pipe(takeUntilDestroyed(), tap(v => {
             switch (v) {
@@ -208,6 +212,9 @@ class NgVirtualListService {
             this.select(data);
         }
     }
+    update() {
+        this._trackBox?.changes();
+    }
     /**
      * Selects a list item
      * @param data
@@ -299,6 +306,17 @@ class NgVirtualListService {
             }
         }
     }
+    itemToFocus;
+    focus(element) {
+        element.focus({ preventScroll: true });
+        if (element.parentElement) {
+            const pos = parseFloat(element.parentElement?.getAttribute('position') ?? '0');
+            this.itemToFocus?.(element, pos);
+        }
+    }
+    areaFocus(id) {
+        this._$focusedId.next(id);
+    }
     initialize(trackBox) {
         this._trackBox = trackBox;
     }
@@ -316,7 +334,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-const ATTR_AREA_SELECTED = 'area-selected', TABINDEX = 'index', KEY_SPACE = " ", KEY_ARR_LEFT = "ArrowLeft", KEY_ARR_UP = "ArrowUp", KEY_ARR_RIGHT = "ArrowRight", KEY_ARR_DOWN = "ArrowDown", EVENT_FOCUS_IN = 'focusin', EVENT_FOCUS_OUT = 'focusout', EVENT_KEY_DOWN = 'keydown';
+const ATTR_AREA_SELECTED = 'area-selected', TABINDEX = 'ng-vl-index', KEY_SPACE = " ", KEY_ARR_LEFT = "ArrowLeft", KEY_ARR_UP = "ArrowUp", KEY_ARR_RIGHT = "ArrowRight", KEY_ARR_DOWN = "ArrowDown", EVENT_FOCUS_IN = 'focusin', EVENT_FOCUS_OUT = 'focusout', EVENT_KEY_DOWN = 'keydown';
+const getElementByIndex = (index) => {
+    return `[${TABINDEX}="${index}"]`;
+};
 /**
  * Virtual list item component
  * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/components/ng-virtual-list-item.component.ts
@@ -390,7 +411,11 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
     constructor() {
         super();
         this._id = this._service.generateComponentId();
-        const $data = toObservable(this.data);
+        this._elementRef.nativeElement.setAttribute('id', String(this._id));
+        const $data = toObservable(this.data), $focus = toObservable(this.focus);
+        $focus.pipe(takeUntilDestroyed(), tap(v => {
+            this._service.areaFocus(v ? this._id : this._service.focusedId === this._id ? null : this._service.focusedId);
+        })).subscribe();
         fromEvent(this.element, EVENT_FOCUS_IN).pipe(takeUntilDestroyed(), tap(e => {
             this.focus.set(true);
             this.updateConfig(this._data);
@@ -473,20 +498,30 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
         })).subscribe();
     }
     focusNext() {
-        const tabIndex = this.config()?.tabIndex ?? 0;
-        if (this._service.listElement && tabIndex > 0) {
-            const el = this._service.listElement.querySelector(`[${TABINDEX}="${tabIndex + 1}"]`);
-            if (el) {
-                el.focus();
+        if (this._service.listElement) {
+            const tabIndex = this._data?.config?.tabIndex ?? 0, length = this._service.collection?.length ?? 0;
+            let index = tabIndex;
+            while (index <= length) {
+                index++;
+                const el = this._service.listElement.querySelector(getElementByIndex(index));
+                if (el) {
+                    this._service.focus(el);
+                    break;
+                }
             }
         }
     }
     focusPrev() {
-        const tabIndex = this.config()?.tabIndex ?? 0;
-        if (this._service.listElement && tabIndex > 1) {
-            const el = this._service.listElement.querySelector(`[${TABINDEX}="${tabIndex - 1}"]`);
-            if (el) {
-                el.focus();
+        if (this._service.listElement) {
+            const tabIndex = this._data?.config?.tabIndex ?? 0;
+            let index = tabIndex;
+            while (index >= 0) {
+                index--;
+                const el = this._service.listElement.querySelector(getElementByIndex(index));
+                if (el) {
+                    this._service.focus(el);
+                    break;
+                }
             }
         }
     }
@@ -505,6 +540,7 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
             const styles = this._elementRef.nativeElement.style;
             styles.zIndex = data.config.zIndex;
             if (data.config.snapped) {
+                this._elementRef.nativeElement.setAttribute('position', data.config.sticky === 1 ? '0' : `${data.config.isVertical ? data.measures.y : data.measures.x}`);
                 styles.transform = data.config.sticky === 1 ? ZEROS_TRANSLATE_3D : `${TRANSLATE_3D}(${data.config.isVertical ? 0 : data.measures.x}${PX}, ${data.config.isVertical ? data.measures.y : 0}${PX} , 0)`;
                 ;
                 if (!data.config.isSnappingMethodAdvanced) {
@@ -514,9 +550,11 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
             else {
                 styles.position = POSITION_ABSOLUTE;
                 if (regular) {
+                    this._elementRef.nativeElement.setAttribute('position', '0');
                     styles.transform = `${TRANSLATE_3D}(${data.config.isVertical ? 0 : data.measures.delta}${PX}, ${data.config.isVertical ? data.measures.delta : 0}${PX} , 0)`;
                 }
                 else {
+                    this._elementRef.nativeElement.setAttribute('position', `${data.config.isVertical ? data.measures.y : data.measures.x}`);
                     styles.transform = `${TRANSLATE_3D}(${data.config.isVertical ? 0 : data.measures.x}${PX}, ${data.config.isVertical ? data.measures.y : 0}${PX} , 0)`;
                 }
             }
@@ -587,14 +625,14 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
         this._service.itemClick(this._data);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: NgVirtualListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: NgVirtualListItemComponent, isStandalone: true, selector: "ng-virtual-list-item", host: { attributes: { "role": "listitem" }, classAttribute: "ngvl__item" }, usesInheritance: true, ngImport: i0, template: "@let item = data();\r\n@let _config = config();\r\n@let _part = part();\r\n@let _measures = measures();\r\n@let renderer = itemRenderer();\r\n\r\n@if (item) {\r\n    <div #listItem [part]=\"_part\" [attr.index]=\"item.config.tabIndex\" tabindex=\"0\" class=\"ngvl-item__container\"\r\n        [ngClass]=\"{'snapped': item.config.snapped, 'snapped-out': item.config.snappedOut, 'focus': focus()}\" (click)=\"onClickHandler()\">\r\n        @if (renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\"\r\n                [ngTemplateOutletContext]=\"{data: item.data, measures: _measures, config: _config}\" />\r\n        }\r\n    </div>\r\n}", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden}.ngvl-item__container{margin:0;padding:0;overflow:hidden;background-color:#fff;width:inherit;height:inherit;box-sizing:border-box}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: NgVirtualListItemComponent, isStandalone: true, selector: "ng-virtual-list-item", host: { attributes: { "role": "listitem" }, classAttribute: "ngvl__item" }, usesInheritance: true, ngImport: i0, template: "@let item = data();\r\n@let _config = config();\r\n@let _part = part();\r\n@let _measures = measures();\r\n@let renderer = itemRenderer();\r\n\r\n@if (item) {\r\n    <div #listItem [part]=\"_part\" [attr.ng-vl-index]=\"_config.tabIndex || -1\" tabindex=\"0\" class=\"ngvl-item__container\"\r\n        [ngClass]=\"{'snapped': item.config.snapped, 'snapped-out': item.config.snappedOut, 'focus': focus()}\" (click)=\"onClickHandler()\">\r\n        @if (renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\"\r\n                [ngTemplateOutletContext]=\"{data: item.data, measures: _measures, config: _config}\" />\r\n        }\r\n    </div>\r\n}", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden}.ngvl-item__container{margin:0;padding:0;overflow:hidden;background-color:#fff;width:inherit;height:inherit;box-sizing:border-box}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: NgVirtualListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-virtual-list-item', imports: [CommonModule], host: {
                         'class': 'ngvl__item',
                         'role': 'listitem',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let item = data();\r\n@let _config = config();\r\n@let _part = part();\r\n@let _measures = measures();\r\n@let renderer = itemRenderer();\r\n\r\n@if (item) {\r\n    <div #listItem [part]=\"_part\" [attr.index]=\"item.config.tabIndex\" tabindex=\"0\" class=\"ngvl-item__container\"\r\n        [ngClass]=\"{'snapped': item.config.snapped, 'snapped-out': item.config.snappedOut, 'focus': focus()}\" (click)=\"onClickHandler()\">\r\n        @if (renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\"\r\n                [ngTemplateOutletContext]=\"{data: item.data, measures: _measures, config: _config}\" />\r\n        }\r\n    </div>\r\n}", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden}.ngvl-item__container{margin:0;padding:0;overflow:hidden;background-color:#fff;width:inherit;height:inherit;box-sizing:border-box}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let item = data();\r\n@let _config = config();\r\n@let _part = part();\r\n@let _measures = measures();\r\n@let renderer = itemRenderer();\r\n\r\n@if (item) {\r\n    <div #listItem [part]=\"_part\" [attr.ng-vl-index]=\"_config.tabIndex || -1\" tabindex=\"0\" class=\"ngvl-item__container\"\r\n        [ngClass]=\"{'snapped': item.config.snapped, 'snapped-out': item.config.snappedOut, 'focus': focus()}\" (click)=\"onClickHandler()\">\r\n        @if (renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\"\r\n                [ngTemplateOutletContext]=\"{data: item.data, measures: _measures, config: _config}\" />\r\n        }\r\n    </div>\r\n}", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden}.ngvl-item__container{margin:0;padding:0;overflow:hidden;background-color:#fff;width:inherit;height:inherit;box-sizing:border-box}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -1017,22 +1055,26 @@ class Tracker {
                                     snapedComponent.instance.show();
                                 }
                             }
-                            comp.instance.item = item;
                             if (snapedComponent) {
                                 if (item['config']['snapped'] || item['config']['snappedOut']) {
+                                    comp.instance.item = null;
                                     comp.instance.hide();
                                 }
                                 else {
+                                    comp.instance.item = item;
                                     comp.instance.show();
                                 }
                             }
                             else {
+                                comp.instance.item = item;
                                 comp.instance.show();
                             }
                             untrackedItems.splice(indexByUntrackedItems, 1);
                             continue;
                         }
                     }
+                }
+                else {
                     this._trackMap.delete(itemTrackingProperty);
                 }
             }
@@ -1041,9 +1083,8 @@ class Tracker {
             }
         }
         for (let i = 0, l = newTrackItems.length; i < l; i++) {
-            const item = newTrackItems[i], itemTrackingProperty = item[idPropName];
             if (untrackedItems.length > 0) {
-                const comp = untrackedItems.shift(), item = items[i];
+                const comp = untrackedItems.shift(), item = newTrackItems[i], itemTrackingProperty = item[idPropName];
                 if (comp) {
                     if (snapedComponent) {
                         if (item['config']['snapped'] || item['config']['snappedOut']) {
@@ -1052,16 +1093,18 @@ class Tracker {
                             snapedComponent.instance.show();
                         }
                     }
-                    comp.instance.item = item;
                     if (snapedComponent) {
                         if (item['config']['snapped'] || item['config']['snappedOut']) {
+                            comp.instance.item = null;
                             comp.instance.hide();
                         }
                         else {
+                            comp.instance.item = item;
                             comp.instance.show();
                         }
                     }
                     else {
+                        comp.instance.item = item;
                         comp.instance.show();
                     }
                     if (this._trackMap) {
@@ -1073,6 +1116,7 @@ class Tracker {
         if (untrackedItems.length) {
             for (let i = 0, l = untrackedItems.length; i < l; i++) {
                 const comp = untrackedItems[i];
+                comp.instance.item = null;
                 comp.instance.hide();
             }
         }
@@ -1757,7 +1801,7 @@ class TrackBox extends CacheMap {
                             snappedOut: false,
                             dynamic: dynamicSize,
                             isSnappingMethodAdvanced,
-                            tabIndex: count,
+                            tabIndex: items.length,
                             zIndex: '1',
                         };
                         const itemData = items[i];
@@ -1765,7 +1809,6 @@ class TrackBox extends CacheMap {
                         endStickyItemIndex = i;
                         endStickyItemSize = size;
                         displayItems.push(endStickyItem);
-                        count++;
                         break;
                     }
                 }
@@ -1801,6 +1844,7 @@ class TrackBox extends CacheMap {
                         tabIndex: count,
                         zIndex: '0',
                     };
+                    count++;
                     if (snapped) {
                         config.zIndex = '2';
                     }
@@ -1823,7 +1867,6 @@ class TrackBox extends CacheMap {
                         nextEndSticky.measures.delta = isVertical ? (item.measures.y - scrollSize) : (item.measures.x - scrollSize);
                     }
                     displayItems.push(item);
-                    count++;
                 }
                 renderItems -= 1;
                 pos += size;
@@ -2116,6 +2159,7 @@ class NgVirtualListComponent {
     get orientation() {
         return this._isVertical ? Directions.VERTICAL : Directions.HORIZONTAL;
     }
+    focusedElement = signal(undefined);
     _actualItems = signal([]);
     _collapsedItemIds = signal([]);
     _displayComponents = [];
@@ -2178,6 +2222,14 @@ class NgVirtualListComponent {
             this._scrollSize.set(actualScrollSize);
         }
     };
+    itemToFocus = (element, position) => {
+        const container = this._container()?.nativeElement;
+        if (container) {
+            const { width, height } = this._bounds(), { width: elementWidth, height: elementHeight } = element.getBoundingClientRect(), isVertical = this._isVertical, pos = isVertical ? position - (height - elementHeight) * .5 : position - (width - elementWidth) * .5;
+            const params = { [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: pos, behavior: 'instant' };
+            container.scrollTo(params);
+        }
+    };
     _elementRef = inject((ElementRef));
     _initialized;
     $initialized;
@@ -2206,9 +2258,13 @@ class NgVirtualListComponent {
             ? 0 : NgVirtualListComponent.__nextId + 1;
         this._id = NgVirtualListComponent.__nextId;
         this._service.initialize(this._trackBox);
+        this._service.itemToFocus = this.itemToFocus;
         this._initialized = signal(false);
         this.$initialized = toObservable(this._initialized);
         this._trackBox.displayComponents = this._displayComponents;
+        this._service.$focusedId.pipe(takeUntilDestroyed(), tap(v => {
+            this.focusedElement.set(v ?? undefined);
+        })).subscribe();
         toObservable(this._list).pipe(takeUntilDestroyed(), filter(v => !!v), tap(v => {
             this._service.listElement = v.nativeElement;
         })).subscribe();
@@ -2296,6 +2352,7 @@ class NgVirtualListComponent {
                 bounds: { width, height }, dynamicSize, isVertical, itemSize,
                 bufferSize, maxBufferSize, scrollSize: actualScrollSize, snap, enabledBufferOptimization,
             }, { displayItems, totalSize } = this._trackBox.updateCollection(items, itemConfigMap, opts);
+            this._service.collection = displayItems;
             this.resetBoundsSize(isVertical, totalSize);
             this.createDisplayComponentsIfNeed(displayItems);
             this.tracking();
@@ -2499,6 +2556,7 @@ class NgVirtualListComponent {
                     const { displayItems, totalSize } = this._trackBox.updateCollection(items, itemConfigMap, {
                         ...opts, scrollSize, fromItemId: isLastIteration ? undefined : id,
                     }), delta = this._trackBox.delta;
+                    this._service.collection = displayItems;
                     this._trackBox.clearDelta();
                     let actualScrollSize = scrollSize + delta;
                     this.resetBoundsSize(isVertical, totalSize);
@@ -2616,11 +2674,13 @@ class NgVirtualListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: NgVirtualListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: NgVirtualListComponent, isStandalone: true, 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" }, 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\" #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"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: NgVirtualListComponent, isStandalone: true, 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()\" tabindex=\"0\" #list\r\n    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"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: NgVirtualListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-virtual-list', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, providers: [NgVirtualListService], 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\" #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"] }]
+            args: [{ selector: 'ng-virtual-list', imports: [CommonModule], host: {
+                        'style': 'position: relative;'
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, providers: [NgVirtualListService], 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()\" tabindex=\"0\" #list\r\n    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"] }]
         }], ctorParameters: () => [], propDecorators: { _listContainerRef: [{
                 type: ViewChild,
                 args: ['renderersContainer', { read: ViewContainerRef }]