ng-virtual-list 17.7.13 → 17.7.15

package/fesm2022/ng-virtual-list.mjs

@@ -1,11 +1,29 @@
 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, skip, switchMap, of } from 'rxjs';
-import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
+import { Subject, tap, fromEvent, combineLatest, map, filter, distinctUntilChanged, switchMap, of } from 'rxjs';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
+/**
+ * Action modes for collection elements.
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/17.x/projects/ng-virtual-list/src/lib/enums/collection-modes.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+var CollectionModes;
+(function (CollectionModes) {
+    /**
+     * When adding elements to the beginning of the collection, the scroll remains at the current position.
+     */
+    CollectionModes["NORMAL"] = "normal";
+    /**
+     * When adding elements to the beginning of the collection, the scroll is shifted by the sum of the sizes of the new elements.
+     */
+    CollectionModes["LAZY"] = "lazy";
+})(CollectionModes || (CollectionModes = {}));
+
 /**
  * Axis of the arrangement of virtual list elements.
  * @link https://github.com/DjonnyX/ng-virtual-list/blob/17.x/projects/ng-virtual-list/src/lib/enums/directions.ts
@@ -64,6 +82,20 @@ var SnappingMethods;
     SnappingMethods["ADVANCED"] = "advanced";
 })(SnappingMethods || (SnappingMethods = {}));
 
+/**
+ * Focus Alignments.
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/17.x/projects/ng-virtual-list/src/lib/enums/focus-alignments.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+var FocusAlignments;
+(function (FocusAlignments) {
+    FocusAlignments["NONE"] = "none";
+    FocusAlignments["START"] = "start";
+    FocusAlignments["CENTER"] = "center";
+    FocusAlignments["END"] = "end";
+})(FocusAlignments || (FocusAlignments = {}));
+
 const DEFAULT_ITEM_SIZE = 24;
 const DEFAULT_BUFFER_SIZE = 2;
 const DEFAULT_MAX_BUFFER_SIZE = 10;
@@ -75,6 +107,7 @@ const DEFAULT_ENABLED_BUFFER_OPTIMIZATION = false;
 const DEFAULT_DYNAMIC_SIZE = false;
 const TRACK_BY_PROPERTY_NAME = 'id';
 const DEFAULT_DIRECTION = Directions.VERTICAL;
+const DEFAULT_COLLECTION_MODE = CollectionModes.NORMAL;
 const DISPLAY_OBJECTS_LENGTH_MESUREMENT_ERROR = 1;
 const MAX_SCROLL_TO_ITERATIONS = 5;
 const DEFAULT_SNAPPING_METHOD = SnappingMethods.NORMAL;
@@ -308,11 +341,11 @@ class NgVirtualListService {
         }
     }
     itemToFocus;
-    focus(element) {
+    focus(element, align = FocusAlignments.CENTER) {
         element.focus({ preventScroll: true });
         if (element.parentElement) {
             const pos = parseFloat(element.parentElement?.getAttribute('position') ?? '0');
-            this.itemToFocus?.(element, pos);
+            this.itemToFocus?.(element, pos, align);
         }
     }
     areaFocus(id) {
@@ -391,7 +424,7 @@ const validateFunction = (value, undefinable = false, nullable = false) => {
     return (undefinable && isUndefinable(value)) || (nullable && isNullable(value)) || typeof value === 'function';
 };
 
-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 ATTR_AREA_SELECTED = 'area-selected', TABINDEX = 'ng-vl-index', POSITION = 'position', POSITION_ZERO = '0', ID = 'item-id', 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}"]`;
 };
@@ -412,7 +445,7 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
     _isCollapsed = false;
     config = signal({});
     measures = signal(undefined);
-    focus = signal(false);
+    focused = signal(false);
     part = signal(PART_DEFAULT_ITEM);
     regular = false;
     data = signal(undefined);
@@ -478,21 +511,28 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
         }
         this._service.collapse(data, collapsed);
     };
+    _focusHandler = () => 
+    /**
+    * Focus a list item
+    */
+    (align = FocusAlignments.CENTER) => {
+        this.focus(align);
+    };
     constructor() {
         super();
         this._id = this._service.generateComponentId();
         this._elementRef.nativeElement.setAttribute('id', String(this._id));
-        const $data = toObservable(this.data), $focus = toObservable(this.focus);
-        $focus.pipe(takeUntilDestroyed(), tap(v => {
+        const $data = toObservable(this.data), $focused = toObservable(this.focused);
+        $focused.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.focused.set(true);
             this.updateConfig(this._data);
             this.updatePartStr(this._data, this._isSelected, this._isCollapsed);
         })).subscribe(),
             fromEvent(this.element, EVENT_FOCUS_OUT).pipe(takeUntilDestroyed(), tap(e => {
-                this.focus.set(false);
+                this.focused.set(false);
                 this.updateConfig(this._data);
                 this.updatePartStr(this._data, this._isSelected, this._isCollapsed);
             })).subscribe(),
@@ -595,23 +635,34 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
             }
         }
     }
+    focus(align = FocusAlignments.CENTER) {
+        if (this._service.listElement) {
+            const tabIndex = this._data?.config?.tabIndex ?? 0;
+            let index = tabIndex;
+            const el = this._service.listElement.querySelector(getElementByIndex(index));
+            if (el) {
+                this._service.focus(el, align);
+            }
+        }
+    }
     updateMeasures(v) {
         this.measures.set(v?.measures ? { ...v.measures } : undefined);
     }
     updateConfig(v) {
         this.config.set({
-            ...v?.config || {}, selected: this._isSelected, collapsed: this._isCollapsed, focus: this.focus(),
-            collapse: this._collapseHandler(v), select: this._selectHandler(v)
+            ...v?.config || {}, selected: this._isSelected, collapsed: this._isCollapsed, focused: this.focused(),
+            collapse: this._collapseHandler(v), select: this._selectHandler(v), focus: this._focusHandler(),
         });
     }
     update() {
         const data = this._data, regular = this.regular, length = this._regularLength;
         if (data) {
+            this._elementRef.nativeElement.setAttribute(ID, `${data.id}`);
             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)`;
+                this._elementRef.nativeElement.setAttribute(POSITION, data.config.sticky === 1 ? POSITION_ZERO : `${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}, ${POSITION_ZERO})`;
                 ;
                 if (!data.config.isSnappingMethodAdvanced) {
                     styles.position = POSITION_STICKY;
@@ -620,17 +671,20 @@ 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)`;
+                    this._elementRef.nativeElement.setAttribute(POSITION, POSITION_ZERO);
+                    styles.transform = `${TRANSLATE_3D}(${data.config.isVertical ? 0 : data.measures.delta}${PX}, ${data.config.isVertical ? data.measures.delta : 0}${PX}, ${POSITION_ZERO})`;
                 }
                 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)`;
+                    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}, ${POSITION_ZERO})`;
                 }
             }
             styles.height = data.config.isVertical ? data.config.dynamic ? SIZE_AUTO : `${data.measures.height}${PX}` : regular ? length : SIZE_100_PERSENT;
             styles.width = data.config.isVertical ? regular ? length : SIZE_100_PERSENT : data.config.dynamic ? SIZE_AUTO : `${data.measures.width}${PX}`;
         }
+        else {
+            this._elementRef.nativeElement.removeAttribute(ID);
+        }
         this._cdr.markForCheck();
     }
     updatePartStr(v, isSelected, isCollapsed) {
@@ -652,7 +706,7 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
         if (v ? v.config.new : false) {
             part += PART_ITEM_NEW;
         }
-        if (this.focus()) {
+        if (this.focused()) {
             part += PART_ITEM_FOCUSED;
         }
         this.part.set(part);
@@ -699,14 +753,14 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
         this._service.itemClick(this._data);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgVirtualListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NgVirtualListItemComponent, selector: "ng-virtual-list-item", host: { attributes: { "role": "listitem" }, classAttribute: "ngvl__item" }, usesInheritance: true, ngImport: i0, template: "@if (data(); as item) {\r\n    <div #listItem [part]=\"part()\" class=\"ngvl-item__container\" [attr.ng-vl-index]=\"item.config.tabIndex || -1\" tabindex=\"0\" [ngClass]=\"{'snapped': item.config.snapped,\r\n            'snapped-out': item.config.snappedOut, 'focus': focus()}\" (click)=\"onClickHandler()\">\r\n        @if (itemRenderer(); as renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\"\r\n                [ngTemplateOutletContext]=\"{data: item.data || {}, measures: measures(), config: config()}\" />\r\n            }\r\n    </div>\r\n}\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: "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: "17.3.12", type: NgVirtualListItemComponent, selector: "ng-virtual-list-item", host: { attributes: { "role": "listitem" }, classAttribute: "ngvl__item" }, usesInheritance: true, ngImport: i0, template: "@if (data(); as item) {\r\n    <div #listItem [part]=\"part()\" class=\"ngvl-item__container\" [attr.ng-vl-index]=\"item.config.tabIndex || -1\" tabindex=\"0\" [ngClass]=\"{'snapped': item.config.snapped,\r\n            'snapped-out': item.config.snappedOut, 'focus': focused()}\" (click)=\"onClickHandler()\">\r\n        @if (itemRenderer(); as renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\"\r\n                [ngTemplateOutletContext]=\"{data: item.data || {}, measures: measures(), config: config()}\" />\r\n            }\r\n    </div>\r\n}\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: "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: "17.3.12", ngImport: i0, type: NgVirtualListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-virtual-list-item', standalone: false, host: {
                         'class': 'ngvl__item',
                         'role': 'listitem',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (data(); as item) {\r\n    <div #listItem [part]=\"part()\" class=\"ngvl-item__container\" [attr.ng-vl-index]=\"item.config.tabIndex || -1\" tabindex=\"0\" [ngClass]=\"{'snapped': item.config.snapped,\r\n            'snapped-out': item.config.snappedOut, 'focus': focus()}\" (click)=\"onClickHandler()\">\r\n        @if (itemRenderer(); as renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\"\r\n                [ngTemplateOutletContext]=\"{data: item.data || {}, measures: measures(), config: config()}\" />\r\n            }\r\n    </div>\r\n}\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: "@if (data(); as item) {\r\n    <div #listItem [part]=\"part()\" class=\"ngvl-item__container\" [attr.ng-vl-index]=\"item.config.tabIndex || -1\" tabindex=\"0\" [ngClass]=\"{'snapped': item.config.snapped,\r\n            'snapped-out': item.config.snappedOut, 'focus': focused()}\" (click)=\"onClickHandler()\">\r\n        @if (itemRenderer(); as renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\"\r\n                [ngTemplateOutletContext]=\"{data: item.data || {}, measures: measures(), config: config()}\" />\r\n            }\r\n    </div>\r\n}\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: () => [] });
 
 /**
@@ -1244,7 +1298,11 @@ const bufferInterpolation = (currentBufferValue, array, value, extra) => {
     return Math.ceil(buffer / l);
 };
 
-const TRACK_BOX_CHANGE_EVENT_NAME = 'change';
+var TrackBoxEvents;
+(function (TrackBoxEvents) {
+    TrackBoxEvents["CHANGE"] = "change";
+    TrackBoxEvents["RESET"] = "reset";
+})(TrackBoxEvents || (TrackBoxEvents = {}));
 var ItemDisplayMethods;
 (function (ItemDisplayMethods) {
     ItemDisplayMethods[ItemDisplayMethods["CREATE"] = 0] = "CREATE";
@@ -1252,7 +1310,7 @@ var ItemDisplayMethods;
     ItemDisplayMethods[ItemDisplayMethods["DELETE"] = 2] = "DELETE";
     ItemDisplayMethods[ItemDisplayMethods["NOT_CHANGED"] = 3] = "NOT_CHANGED";
 })(ItemDisplayMethods || (ItemDisplayMethods = {}));
-const DEFAULT_BUFFER_EXTREMUM_THRESHOLD = 15, DEFAULT_MAX_BUFFER_SEQUENCE_LENGTH = 30, DEFAULT_RESET_BUFFER_SIZE_TIMEOUT = 10000;
+const DEFAULT_BUFFER_EXTREMUM_THRESHOLD = 15, DEFAULT_MAX_BUFFER_SEQUENCE_LENGTH = 30, DEFAULT_RESET_BUFFER_SIZE_TIMEOUT = 10000, IS_NEW = 'isNew';
 /**
  * An object that performs tracking, calculations and caching.
  * @link https://github.com/DjonnyX/ng-virtual-list/blob/17.x/projects/ng-virtual-list/src/lib/utils/trackBox.ts
@@ -1289,6 +1347,13 @@ class TrackBox extends CacheMap {
         }
         this._isSnappingMethodAdvanced = v;
     }
+    _isLazy = false;
+    set isLazy(v) {
+        if (this._isLazy === v) {
+            return;
+        }
+        this._isLazy = v;
+    }
     /**
      * Set the trackBy property
      */
@@ -1321,7 +1386,7 @@ class TrackBox extends CacheMap {
     get crudDetected() { return this._crudDetected; }
     fireChangeIfNeed() {
         if (this.changesDetected()) {
-            this.dispatch(TRACK_BOX_CHANGE_EVENT_NAME, this._version);
+            this.dispatch(TrackBoxEvents.CHANGE, this._version);
         }
     }
     _previousTotalSize = 0;
@@ -1337,7 +1402,7 @@ class TrackBox extends CacheMap {
     _maxBufferSize = this._defaultBufferSize;
     _resetBufferSizeTimeout = DEFAULT_RESET_BUFFER_SIZE_TIMEOUT;
     _resetBufferSizeTimer;
-    isInit = true;
+    isReseted = true;
     lifeCircle() {
         this.fireChangeIfNeed();
         this.lifeCircleDo();
@@ -1350,11 +1415,19 @@ 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;
+        let reseted = this.isReseted;
+        if (reseted) {
+            if (!(!this._previousCollection || this._previousCollection.length === 0)) {
+                reseted = false;
+            }
+        }
+        if (!reseted && (!currentCollection || currentCollection.length === 0)) {
+            reseted = true;
         }
+        this.isReseted = reseted;
+        this.dispatch(TrackBoxEvents.RESET, reseted);
         this.updateCache(this._previousCollection, currentCollection, itemSize);
-        this._previousCollection = currentCollection;
+        this._previousCollection = [...(currentCollection || [])];
     }
     /**
      * Update the cache of items from the list
@@ -1577,9 +1650,10 @@ class TrackBox extends CacheMap {
             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, deltaFromStartCreation = 0;
+        let isNew = !this.isReseted && (scrollSize === 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, isNew = true;
+            let y = 0, stickyCollectionItem = undefined, stickyComponentSize = 0;
             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;
@@ -1587,8 +1661,8 @@ 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))) {
+                    const isItemNew = (bounds)?.[IS_NEW] ?? this._isLazy;
+                    if (!isItemNew && (!this._isLazy || !itemConfigMap[collection[0].id]?.sticky)) {
                         isNew = false;
                     }
                     switch (itemDisplayMethod) {
@@ -1725,8 +1799,15 @@ class TrackBox extends CacheMap {
                     if (map.has(id)) {
                         const bounds = map.get(id);
                         itemDisplayMethod = bounds?.method ?? ItemDisplayMethods.UPDATE;
+                        const isItemNew = (bounds)?.[IS_NEW] ?? this._isLazy;
+                        if (!isItemNew && (!this._isLazy || !itemConfigMap[collection[0].id]?.sticky)) {
+                            isNew = false;
+                        }
                         if (itemDisplayMethod === ItemDisplayMethods.CREATE) {
-                            map.set(id, { ...bounds, method: ItemDisplayMethods.NOT_CHANGED });
+                            if (isNew) {
+                                deltaFromStartCreation += componentSize;
+                            }
+                            map.set(id, { ...bounds, method: ItemDisplayMethods.NOT_CHANGED, isNew });
                         }
                     }
                     if (deletedItemsMap.hasOwnProperty(i)) {
@@ -1738,7 +1819,9 @@ class TrackBox extends CacheMap {
                     if (y < scrollSize - componentSize) {
                         switch (itemDisplayMethod) {
                             case ItemDisplayMethods.CREATE: {
-                                leftSizeOfUpdatedItems += componentSize;
+                                if (!isNew) {
+                                    leftSizeOfUpdatedItems += componentSize;
+                                }
                                 break;
                             }
                             case ItemDisplayMethods.UPDATE: {
@@ -1834,7 +1917,7 @@ class TrackBox extends CacheMap {
                             height: isVertical ? size : normalizedItemHeight,
                             delta: 0,
                         }, config = {
-                            new: cache.isNew === true,
+                            new: (cache)?.[IS_NEW] === true,
                             odd: isOdd,
                             even: !isOdd,
                             isVertical,
@@ -1876,7 +1959,7 @@ class TrackBox extends CacheMap {
                             height: h,
                             delta: 0,
                         }, config = {
-                            new: cache.isNew === true,
+                            new: (cache)?.[IS_NEW] === true,
                             odd: isOdd,
                             even: !isOdd,
                             isVertical,
@@ -1917,7 +2000,7 @@ class TrackBox extends CacheMap {
                         height: isVertical ? size : normalizedItemHeight,
                         delta: 0,
                     }, config = {
-                        new: cache.isNew === true,
+                        new: (cache)?.[IS_NEW] === true,
                         odd: isOdd,
                         even: !isOdd,
                         isVertical,
@@ -2103,7 +2186,21 @@ const copyValueAsReadonly = (source) => {
     return source;
 };
 
-const ROLE_LIST = 'list', ROLE_LIST_BOX = 'listbox';
+const NORMAL_ALIASES = [CollectionModes.NORMAL, 'normal'], LAZY_ALIASES = [CollectionModes.LAZY, 'lazy'];
+/**
+ * Determines the axis membership of a virtual list
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/17.x/projects/ng-virtual-list/src/lib/utils/isCollectionMode.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+const isCollectionMode = (src, expected) => {
+    if (LAZY_ALIASES.includes(expected)) {
+        return LAZY_ALIASES.includes(src);
+    }
+    return NORMAL_ALIASES.includes(src);
+};
+
+const ROLE_LIST = 'list', ROLE_LIST_BOX = 'listbox', ITEM_ID = 'item-id', ITEM_CONTAINER = 'ngvl-item__container';
 const validateScrollIteration = (value) => {
     return Number.isNaN(value) || (value < 0) ? 0 : value > MAX_SCROLL_TO_ITERATIONS ? MAX_SCROLL_TO_ITERATIONS : value;
 }, validateId = (id) => {
@@ -2121,6 +2218,11 @@ const validateScrollIteration = (value) => {
     if (!valid) {
         throw Error('The "iteration" parameter must be of type `number`.');
     }
+}, validateFocusAlignment = (align) => {
+    const valid = validateString(align) && (align === 'none' || align === 'start' || align === 'center' || align === 'end');
+    if (!valid) {
+        throw Error('The "align" parameter must have the value `none`, `start`, `center` or `end`.');
+    }
 };
 /**
  * Virtual list component.
@@ -2411,6 +2513,20 @@ class NgVirtualListComponent {
      * Determines the direction in which elements are placed. Default value is "vertical".
      */
     direction = input(DEFAULT_DIRECTION, { ...this._directionOptions });
+    _collectionModeOptions = {
+        transform: (v) => {
+            const valid = validateString(v) && (v === 'normal' || v === 'lazy');
+            if (!valid) {
+                console.error('The "direction" parameter must have the value `normal` or `lazy`.');
+                return DEFAULT_COLLECTION_MODE;
+            }
+            return v;
+        },
+    };
+    /**
+     * Determines the action modes for collection elements. Default value is "normal".
+     */
+    collectionMode = input(DEFAULT_COLLECTION_MODE, { ...this._collectionModeOptions });
     _bufferSizeOptions = {
         transform: (v) => {
             const valid = validateInt(v);
@@ -2501,6 +2617,7 @@ class NgVirtualListComponent {
     get isMultiSelecting() { return this._isMultiSelecting; }
     _isSnappingMethodAdvanced = this.getIsSnappingMethodAdvanced();
     get isSnappingMethodAdvanced() { return this._isSnappingMethodAdvanced; }
+    _isLazy = this.getIsLazy();
     _isVertical = this.getIsVertical();
     get orientation() {
         return this._isVertical ? Directions.VERTICAL : Directions.HORIZONTAL;
@@ -2570,12 +2687,33 @@ class NgVirtualListComponent {
             this._scrollSize.set(actualScrollSize);
         }
     };
-    itemToFocus = (element, position) => {
+    itemToFocus = (element, position, align = FocusAlignments.CENTER) => {
         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);
+            const { width, height } = this._bounds(), { width: elementWidth, height: elementHeight } = element.getBoundingClientRect(), isVertical = this._isVertical;
+            let pos = Number.NaN;
+            switch (align) {
+                case FocusAlignments.START: {
+                    pos = isVertical ? position : position;
+                    break;
+                }
+                case FocusAlignments.CENTER: {
+                    pos = isVertical ? position - (height - elementHeight) * .5 : position - (width - elementWidth) * .5;
+                    break;
+                }
+                case FocusAlignments.END: {
+                    pos = isVertical ? position - (height - elementHeight) : position - (width - elementWidth);
+                    break;
+                }
+                case FocusAlignments.NONE:
+                default: {
+                    break;
+                }
+            }
+            if (!Number.isNaN(pos)) {
+                const params = { [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: pos, behavior: 'instant' };
+                container.scrollTo(params);
+            }
         }
     };
     _elementRef = inject((ElementRef));
@@ -2597,10 +2735,25 @@ class NgVirtualListComponent {
         this._cacheVersion.set(v);
     };
     _cacheVersion = signal(-1);
+    _isResetedReachStart = true;
+    _onTrackBoxResetHandler = (v) => {
+        if (v) {
+            this._isResetedReachStart = true;
+            const container = this._container()?.nativeElement;
+            if (container) {
+                const params = {
+                    [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: 0,
+                    behavior: BEHAVIOR_INSTANT,
+                };
+                container.scrollTo(params);
+            }
+        }
+    };
     constructor() {
         NgVirtualListComponent.__nextId = NgVirtualListComponent.__nextId + 1 === Number.MAX_SAFE_INTEGER
             ? 0 : NgVirtualListComponent.__nextId + 1;
         this._id = NgVirtualListComponent.__nextId;
+        this._trackBox.addEventListener(TrackBoxEvents.RESET, this._onTrackBoxResetHandler);
         this._service.initialize(this._trackBox);
         this._service.itemToFocus = this.itemToFocus;
         this._initialized = signal(false);
@@ -2613,12 +2766,13 @@ class NgVirtualListComponent {
             this._service.listElement = v.nativeElement;
         })).subscribe();
         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) {
+        $isScrollStart.pipe(takeUntilDestroyed(), distinctUntilChanged(), tap(v => {
+            if (v && !this._isResetedReachStart) {
                 this.onScrollReachStart.emit();
             }
+            this._isResetedReachStart = false;
         })).subscribe();
-        $isScrollFinished.pipe(takeUntilDestroyed(), distinctUntilChanged(), skip(1), tap(v => {
+        $isScrollFinished.pipe(takeUntilDestroyed(), distinctUntilChanged(), tap(v => {
             if (v) {
                 this.onScrollReachEnd.emit();
             }
@@ -2632,7 +2786,10 @@ class NgVirtualListComponent {
         $trackBy.pipe(takeUntilDestroyed(), tap(v => {
             this._trackBox.trackingPropertyName = v;
         })).subscribe();
-        const $bounds = toObservable(this._bounds).pipe(filter(b => !!b)), $items = toObservable(this.items).pipe(map(i => !i ? [] : i)), $scrollSize = toObservable(this._scrollSize), $itemSize = toObservable(this.itemSize).pipe(map(v => v <= 0 ? DEFAULT_ITEM_SIZE : v)), $bufferSize = toObservable(this.bufferSize).pipe(map(v => v < 0 ? DEFAULT_BUFFER_SIZE : v)), $maxBufferSize = toObservable(this.maxBufferSize).pipe(map(v => v < 0 ? DEFAULT_BUFFER_SIZE : v)), $itemConfigMap = toObservable(this.itemConfigMap).pipe(map(v => !v ? {} : v)), $snap = toObservable(this.snap), $isVertical = toObservable(this.direction).pipe(map(v => this.getIsVertical(v || DEFAULT_DIRECTION))), $dynamicSize = toObservable(this.dynamicSize), $enabledBufferOptimization = toObservable(this.enabledBufferOptimization), $snappingMethod = toObservable(this.snappingMethod).pipe(map(v => this.getIsSnappingMethodAdvanced(v || DEFAULT_SNAPPING_METHOD))), $methodForSelecting = toObservable(this.methodForSelecting), $selectedIds = toObservable(this.selectedIds), $collapsedIds = toObservable(this.collapsedIds).pipe(map(v => Array.isArray(v) ? v : [])), $collapsedItemIds = toObservable(this._collapsedItemIds).pipe(map(v => Array.isArray(v) ? v : [])), $actualItems = toObservable(this._actualItems), $cacheVersion = toObservable(this._cacheVersion);
+        const $bounds = toObservable(this._bounds).pipe(filter(b => !!b)), $items = toObservable(this.items).pipe(map(i => !i ? [] : i)), $scrollSize = toObservable(this._scrollSize), $itemSize = toObservable(this.itemSize).pipe(map(v => v <= 0 ? DEFAULT_ITEM_SIZE : v)), $bufferSize = toObservable(this.bufferSize).pipe(map(v => v < 0 ? DEFAULT_BUFFER_SIZE : v)), $maxBufferSize = toObservable(this.maxBufferSize).pipe(map(v => v < 0 ? DEFAULT_BUFFER_SIZE : v)), $itemConfigMap = toObservable(this.itemConfigMap).pipe(map(v => !v ? {} : v)), $snap = toObservable(this.snap), $isVertical = toObservable(this.direction).pipe(map(v => this.getIsVertical(v || DEFAULT_DIRECTION))), $isLazy = toObservable(this.collectionMode).pipe(map(v => this.getIsLazy(v || DEFAULT_COLLECTION_MODE))), $dynamicSize = toObservable(this.dynamicSize), $enabledBufferOptimization = toObservable(this.enabledBufferOptimization), $snappingMethod = toObservable(this.snappingMethod).pipe(map(v => this.getIsSnappingMethodAdvanced(v || DEFAULT_SNAPPING_METHOD))), $methodForSelecting = toObservable(this.methodForSelecting), $selectedIds = toObservable(this.selectedIds), $collapsedIds = toObservable(this.collapsedIds).pipe(map(v => Array.isArray(v) ? v : [])), $collapsedItemIds = toObservable(this._collapsedItemIds).pipe(map(v => Array.isArray(v) ? v : [])), $actualItems = toObservable(this._actualItems), $cacheVersion = toObservable(this._cacheVersion);
+        $isLazy.pipe(takeUntilDestroyed(), tap(v => {
+            this._trackBox.isLazy = v;
+        })).subscribe();
         combineLatest([$items, $itemSize]).pipe(takeUntilDestroyed(), map(([items, itemSize]) => ({ items, itemSize })), tap(({ items, itemSize }) => {
             this._trackBox.resetCollection(items, itemSize);
         })).subscribe();
@@ -2710,9 +2867,11 @@ 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);
+            const scrollLength = (this._isVertical ? this._container()?.nativeElement.scrollHeight ?? 0 : this._container()?.nativeElement.scrollWidth) ?? 0, actualScrollLength = scrollLength === 0 ? 0 : Math.round(scrollLength - (this._isVertical ? height : width)), scrollPosition = actualScrollSize + this._trackBox.delta;
+            if (actualScrollLength > 0) {
+                this._isScrollStart.set(scrollPosition === 0);
+                this._isScrollFinished.set(scrollPosition === actualScrollLength);
+            }
             if (this._isSnappingMethodAdvanced) {
                 this.updateRegularRenderer();
             }
@@ -2781,13 +2940,13 @@ class NgVirtualListComponent {
     }
     listenCacheChangesIfNeed(value) {
         if (value) {
-            if (!this._trackBox.hasEventListener(TRACK_BOX_CHANGE_EVENT_NAME, this._onTrackBoxChangeHandler)) {
-                this._trackBox.addEventListener(TRACK_BOX_CHANGE_EVENT_NAME, this._onTrackBoxChangeHandler);
+            if (!this._trackBox.hasEventListener(TrackBoxEvents.CHANGE, this._onTrackBoxChangeHandler)) {
+                this._trackBox.addEventListener(TrackBoxEvents.CHANGE, this._onTrackBoxChangeHandler);
             }
         }
         else {
-            if (this._trackBox.hasEventListener(TRACK_BOX_CHANGE_EVENT_NAME, this._onTrackBoxChangeHandler)) {
-                this._trackBox.removeEventListener(TRACK_BOX_CHANGE_EVENT_NAME, this._onTrackBoxChangeHandler);
+            if (this._trackBox.hasEventListener(TrackBoxEvents.CHANGE, this._onTrackBoxChangeHandler)) {
+                this._trackBox.removeEventListener(TrackBoxEvents.CHANGE, this._onTrackBoxChangeHandler);
             }
         }
     }
@@ -2811,6 +2970,10 @@ class NgVirtualListComponent {
         const dir = d || this.direction();
         return isDirection(dir, Directions.VERTICAL);
     }
+    getIsLazy(m) {
+        const mode = m || this.collectionMode();
+        return isCollectionMode(mode, CollectionModes.LAZY);
+    }
     createDisplayComponentsIfNeed(displayItems) {
         if (!displayItems || !this._listContainerRef) {
             this._trackBox.setDisplayObjectIndexMapById({});
@@ -2876,6 +3039,20 @@ class NgVirtualListComponent {
         validateId(id);
         return this._trackBox.getItemBounds(id);
     }
+    /**
+     * Focus an list item by a given id.
+     */
+    focus(id, align = FocusAlignments.NONE) {
+        validateId(id);
+        validateFocusAlignment(align);
+        const el = this._list()?.nativeElement.querySelector(`[${ITEM_ID}="${id}"]`);
+        if (el) {
+            const focusedEl = el.querySelector(`.${ITEM_CONTAINER}`);
+            if (focusedEl) {
+                this._service.focus(focusedEl, align);
+            }
+        }
+    }
     /**
      * The method scrolls the list to the element with the given id and returns the value of the scrolled area.
      * Behavior accepts the values ​​"auto", "instant" and "smooth".
@@ -3037,7 +3214,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", 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 });
+    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 }, collectionMode: { classPropertyName: "collectionMode", publicName: "collectionMode", isSignal: true, isRequired: false, transformFunction: null }, bufferSize: { classPropertyName: "bufferSize", publicName: "bufferSize", isSignal: true, isRequired: false, transformFunction: null }, maxBufferSize: { classPropertyName: "maxBufferSize", publicName: "maxBufferSize", isSignal: true, isRequired: false, transformFunction: null }, snappingMethod: { classPropertyName: "snappingMethod", publicName: "snappingMethod", isSignal: true, isRequired: false, transformFunction: null }, methodForSelecting: { classPropertyName: "methodForSelecting", publicName: "methodForSelecting", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, 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,
@@ -3075,5 +3252,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { Directions, MethodsForSelecting, NgVirtualListComponent, NgVirtualListItemComponent, NgVirtualListModule, ScrollEvent, SnappingMethods, debounce, toggleClassName };
+export { CollectionModes, Directions, FocusAlignments, MethodsForSelecting, NgVirtualListComponent, NgVirtualListItemComponent, NgVirtualListModule, ScrollEvent, SnappingMethods, debounce, toggleClassName };
 //# sourceMappingURL=ng-virtual-list.mjs.map