ng-virtual-list 19.7.11 → 19.7.13

package/README.md

@@ -599,7 +599,7 @@ Inputs
 | items | [IVirtualListCollection](https://github.com/DjonnyX/ng-virtual-list/blob/19.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/19.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/19.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`. |

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;
@@ -165,6 +165,7 @@ class NgVirtualListService {
     collapseByClick = DEFAULT_COLLAPSE_BY_CLICK;
     _trackBox;
     listElement = null;
+    collection = [];
     constructor() {
         this._$methodOfSelecting.pipe(takeUntilDestroyed(), tap(v => {
             switch (v) {
@@ -208,6 +209,9 @@ class NgVirtualListService {
             this.select(data);
         }
     }
+    update() {
+        this._trackBox?.changes();
+    }
     /**
      * Selects a list item
      * @param data
@@ -299,6 +303,14 @@ class NgVirtualListService {
             }
         }
     }
+    itemToFocus;
+    focus(element) {
+        element.focus({ preventScroll: true });
+        if (element.parentElement) {
+            const pos = parseFloat(element.parentElement?.getAttribute('position') ?? '0');
+            this.itemToFocus?.(element, pos);
+        }
+    }
     initialize(trackBox) {
         this._trackBox = trackBox;
     }
@@ -316,7 +328,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }], 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/19.x/projects/ng-virtual-list/src/lib/components/ng-virtual-list-item.component.ts
@@ -473,20 +488,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 +530,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 +540,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 +615,14 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
         this._service.itemClick(this._data);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgVirtualListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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: "19.2.14", 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: "19.2.14", 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 +1045,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 +1073,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 +1083,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 +1106,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 +1791,7 @@ class TrackBox extends CacheMap {
                             snappedOut: false,
                             dynamic: dynamicSize,
                             isSnappingMethodAdvanced,
-                            tabIndex: count,
+                            tabIndex: items.length,
                             zIndex: '1',
                         };
                         const itemData = items[i];
@@ -1765,7 +1799,6 @@ class TrackBox extends CacheMap {
                         endStickyItemIndex = i;
                         endStickyItemSize = size;
                         displayItems.push(endStickyItem);
-                        count++;
                         break;
                     }
                 }
@@ -1801,6 +1834,7 @@ class TrackBox extends CacheMap {
                         tabIndex: count,
                         zIndex: '0',
                     };
+                    count++;
                     if (snapped) {
                         config.zIndex = '2';
                     }
@@ -1823,7 +1857,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;
@@ -2178,6 +2211,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,6 +2247,7 @@ 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;
@@ -2296,6 +2338,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 +2542,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 +2660,13 @@ class NgVirtualListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgVirtualListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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: "19.2.14", 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\" #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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", 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\" #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"] }]
         }], ctorParameters: () => [], propDecorators: { _listContainerRef: [{
                 type: ViewChild,
                 args: ['renderersContainer', { read: ViewContainerRef }]