ng-virtual-list 20.7.13 → 20.7.15

package/README.md

@@ -589,7 +589,7 @@ Selecting even elements:
 
 ## 📚 API
 
-[NgVirtualListComponent](https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/ng-virtual-list.component.ts)
+### [NgVirtualListComponent](https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/ng-virtual-list.component.ts)
 
 Inputs
 
@@ -614,6 +614,7 @@ Inputs
 | trackBy | string? = 'id' | The name of the property by which tracking is performed. |
 | selectedIds | Array<[Id](https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/types/id.ts)> \| [Id](https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/types/id.ts) \| undefined | Sets the selected items. |
 | collapsedIds | Array<[Id](https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/types/id.ts)> | Sets the collapsed items. |
+| screenReaderMessage | string? = "Showing items $1 to $2" | Message for screen reader. The message format is: "some text `$1` some text `$2`", where `$1` is the number of the first element of the screen collection, `$2` is the number of the last element of the screen collection. |
 
 <br/>
 
@@ -640,6 +641,25 @@ Methods
 | scrollTo | (id: [Id](https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/types/id.ts), behavior: ScrollBehavior = 'auto') => number | 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". |
 | scrollToEnd | (behavior?: ScrollBehavior) => void | Scrolls the scroll area to the desired element with the specified ID. |
 | getItemBounds | (id: [Id](https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/types/id.ts), behavior?: ScrollBehavior) => void | Returns the bounds of an element with a given id |
+| focus | [Id](https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/types/id.ts), align: [FocusAlignment](https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/types/focus-alignment.ts) = [FocusAlignments.NONE](https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/enums/focus-alignments.ts) | Focus an list item by a given id. |
+
+<br/>
+
+### Template API
+
+```html
+<ng-template #itemRenderer let-data="data" let-config="config" let-measures="measures">
+  <!-- content -->
+</ng-template>
+```
+
+Properties
+
+| Property | Type | Description |
+|--|--|--|
+| data | {\[id: [Id](https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/types/id.ts) \], [otherProps: string]: any;} | Collection item data. |
+| config | [IDisplayObjectConfig](https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/models/display-object-config.model.ts) | Display object configuration. A set of `select`, `collapse`, and `focus` methods are also provided. |
+| measures | [IDisplayObjectMeasures](https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/models/display-object-measures.model.ts) \| undefined | Display object metrics. |
 
 <br/>
 
@@ -647,12 +667,12 @@ Methods
 
 | Angular version | ng-virtual-list version | git | npm |
 |--|--|--|--|
-| 19.x | 19.7.22 | [19.x](https://github.com/DjonnyX/ng-virtual-list/tree/19.x) | [19.7.22](https://www.npmjs.com/package/ng-virtual-list/v/19.7.22) |
-| 18.x | 18.7.13 | [18.x](https://github.com/DjonnyX/ng-virtual-list/tree/18.x) | [18.7.13](https://www.npmjs.com/package/ng-virtual-list/v/18.7.13) |
-| 17.x | 17.7.14 | [17.x](https://github.com/DjonnyX/ng-virtual-list/tree/17.x) | [17.7.14](https://www.npmjs.com/package/ng-virtual-list/v/17.7.14) |
-| 16.x | 16.7.12 | [16.x](https://github.com/DjonnyX/ng-virtual-list/tree/16.x) | [16.7.12](https://www.npmjs.com/package/ng-virtual-list/v/16.7.12) |
-| 15.x | 15.7.12 | [15.x](https://github.com/DjonnyX/ng-virtual-list/tree/15.x) | [15.7.12](https://www.npmjs.com/package/ng-virtual-list/v/15.7.12) |
-| 14.x | 14.7.13 | [14.x](https://github.com/DjonnyX/ng-virtual-list/tree/14.x) | [14.7.13](https://www.npmjs.com/package/ng-virtual-list/v/14.7.13) |
+| 19.x | 19.7.23 | [19.x](https://github.com/DjonnyX/ng-virtual-list/tree/19.x) | [19.7.23](https://www.npmjs.com/package/ng-virtual-list/v/19.7.23) |
+| 18.x | 18.7.14 | [18.x](https://github.com/DjonnyX/ng-virtual-list/tree/18.x) | [18.7.14](https://www.npmjs.com/package/ng-virtual-list/v/18.7.14) |
+| 17.x | 17.7.15 | [17.x](https://github.com/DjonnyX/ng-virtual-list/tree/17.x) | [17.7.15](https://www.npmjs.com/package/ng-virtual-list/v/17.7.15) |
+| 16.x | 16.7.13 | [16.x](https://github.com/DjonnyX/ng-virtual-list/tree/16.x) | [16.7.13](https://www.npmjs.com/package/ng-virtual-list/v/16.7.13) |
+| 15.x | 15.7.13 | [15.x](https://github.com/DjonnyX/ng-virtual-list/tree/15.x) | [15.7.13](https://www.npmjs.com/package/ng-virtual-list/v/15.7.13) |
+| 14.x | 14.7.14 | [14.x](https://github.com/DjonnyX/ng-virtual-list/tree/14.x) | [14.7.14](https://www.npmjs.com/package/ng-virtual-list/v/14.7.14) |
 
 <br/>
 

package/fesm2022/ng-virtual-list.mjs

@@ -2,9 +2,9 @@ import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Injectable, inject, signal, ElementRef, ChangeDetectionStrategy, Component, viewChild, output, input, ViewContainerRef, ViewChild, ViewEncapsulation } from '@angular/core';
-import { Subject, tap, fromEvent, combineLatest, map, filter, distinctUntilChanged, 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, debounceTime, switchMap, of } from 'rxjs';
 
 /**
  * Action modes for collection elements.
@@ -82,6 +82,20 @@ var SnappingMethods;
     SnappingMethods["ADVANCED"] = "advanced";
 })(SnappingMethods || (SnappingMethods = {}));
 
+/**
+ * Focus Alignments.
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.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;
@@ -98,6 +112,7 @@ const DISPLAY_OBJECTS_LENGTH_MESUREMENT_ERROR = 1;
 const MAX_SCROLL_TO_ITERATIONS = 5;
 const DEFAULT_SNAPPING_METHOD = SnappingMethods.NORMAL;
 const DEFAULT_SELECT_METHOD = MethodsForSelecting.NONE;
+const DEFAULT_SCREEN_READER_MESSAGE = 'Showing items $1 to $2';
 // presets
 const BEHAVIOR_AUTO = 'auto';
 const BEHAVIOR_INSTANT = 'instant';
@@ -188,7 +203,17 @@ class NgVirtualListService {
     collapseByClick = DEFAULT_COLLAPSE_BY_CLICK;
     _trackBox;
     listElement = null;
-    collection = [];
+    _$displayItems = new BehaviorSubject([]);
+    $displayItems = this._$displayItems.asObservable();
+    _collection = [];
+    set collection(v) {
+        if (this._collection === v) {
+            return;
+        }
+        this._collection = v;
+        this._$displayItems.next(v);
+    }
+    get collection() { return this._collection; }
     constructor() {
         this._$methodOfSelecting.pipe(takeUntilDestroyed(), tap(v => {
             switch (v) {
@@ -327,11 +352,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) {
@@ -410,7 +435,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}"]`;
 };
@@ -430,7 +455,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);
@@ -494,21 +519,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(),
@@ -611,23 +643,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;
@@ -636,17 +679,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);
+        }
     }
     updatePartStr(v, isSelected, isCollapsed) {
         let odd = false;
@@ -667,7 +713,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);
@@ -714,14 +760,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.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 });
+    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': focused()}\" (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.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"] }]
+                    }, 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': focused()}\" (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: () => [] });
 
 /**
@@ -2161,7 +2207,7 @@ const isCollectionMode = (src, expected) => {
     return NORMAL_ALIASES.includes(src);
 };
 
-const ROLE_LIST = 'list', ROLE_LIST_BOX = 'listbox';
+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) => {
@@ -2179,6 +2225,35 @@ 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`.');
+    }
+};
+const formatScreenReaderMessage = (items, messagePattern, scrollSize, isVertical, bounds) => {
+    if (!messagePattern) {
+        return '';
+    }
+    const list = items ?? [], size = isVertical ? bounds.height : bounds.width;
+    let start = Number.NaN, end = Number.NaN, prevItem;
+    for (let i = 0, l = list.length; i < l; i++) {
+        const item = list[i], position = isVertical ? item.measures.y : item.measures.x, itemSize = isVertical ? item.measures.height : item.measures.width;
+        if (((position + itemSize) >= scrollSize) && Number.isNaN(start)) {
+            start = item.index + 1;
+        }
+        if ((position >= (scrollSize + size)) && Number.isNaN(end) && prevItem) {
+            end = prevItem.index + 1;
+        }
+        prevItem = item;
+    }
+    if (Number.isNaN(start) || Number.isNaN(end)) {
+        return '';
+    }
+    let formatted = messagePattern ?? '';
+    formatted = formatted.replace('$1', `${start}`);
+    formatted = formatted.replace('$2', `${end}`);
+    return formatted;
 };
 /**
  * Virtual list component.
@@ -2565,6 +2640,24 @@ class NgVirtualListComponent {
      * The name of the property by which tracking is performed
      */
     trackBy = input(TRACK_BY_PROPERTY_NAME, { ...this._trackByOptions });
+    _screenReaderMessageOptions = {
+        transform: (v) => {
+            const valid = validateString(v);
+            if (!valid) {
+                console.error('The "screenReaderMessage" parameter must be of type `string`.');
+                return DEFAULT_SCREEN_READER_MESSAGE;
+            }
+            return v;
+        },
+    };
+    /**
+     * Message for screen reader.
+     * The message format is: "some text $1 some text $2",
+     * where $1 is the number of the first element of the screen collection,
+     * $2 is the number of the last element of the screen collection.
+     */
+    screenReaderMessage = input(DEFAULT_SCREEN_READER_MESSAGE, { ...this._screenReaderMessageOptions });
+    screenReaderFormattedMessage = signal(this.screenReaderMessage());
     _isNotSelecting = this.getIsNotSelecting();
     get isNotSelecting() { return this._isNotSelecting; }
     _isSingleSelecting = this.getIsSingleSelecting();
@@ -2643,12 +2736,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));
@@ -2721,7 +2835,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))), $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);
+        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), $screenReaderMessage = toObservable(this.screenReaderMessage), $displayItems = this._service.$displayItems, $cacheVersion = toObservable(this._cacheVersion);
+        combineLatest([$displayItems, $screenReaderMessage, $isVertical, $scrollSize, $bounds]).pipe(takeUntilDestroyed(), distinctUntilChanged(), debounceTime(100), tap(([items, screenReaderMessage, isVertical, scrollSize, bounds]) => {
+            this.screenReaderFormattedMessage.set(formatScreenReaderMessage(items, screenReaderMessage, scrollSize, isVertical, bounds));
+        })).subscribe();
         $isLazy.pipe(takeUntilDestroyed(), tap(v => {
             this._trackBox.isLazy = v;
         })).subscribe();
@@ -2974,6 +3091,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".
@@ -3135,13 +3266,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 }, 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()\" 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 });
+    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 }, collectionMode: { classPropertyName: "collectionMode", publicName: "collectionMode", isSignal: true, isRequired: false, transformFunction: null }, bufferSize: { classPropertyName: "bufferSize", publicName: "bufferSize", isSignal: true, isRequired: false, transformFunction: null }, maxBufferSize: { classPropertyName: "maxBufferSize", publicName: "maxBufferSize", isSignal: true, isRequired: false, transformFunction: null }, snappingMethod: { classPropertyName: "snappingMethod", publicName: "snappingMethod", isSignal: true, isRequired: false, transformFunction: null }, methodForSelecting: { classPropertyName: "methodForSelecting", publicName: "methodForSelecting", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, screenReaderMessage: { classPropertyName: "screenReaderMessage", publicName: "screenReaderMessage", isSignal: true, isRequired: false, transformFunction: null } }, 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: "<div aria-live=\"polite\" aria-atomic=\"true\" class=\"ngvl__screen-reader\">\r\n  {{ screenReaderFormattedMessage() }}\r\n</div>\r\n\r\n@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%}.ngvl__screen-reader{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "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], 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"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, providers: [NgVirtualListService], template: "<div aria-live=\"polite\" aria-atomic=\"true\" class=\"ngvl__screen-reader\">\r\n  {{ screenReaderFormattedMessage() }}\r\n</div>\r\n\r\n@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%}.ngvl__screen-reader{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _listContainerRef: [{
                 type: ViewChild,
                 args: ['renderersContainer', { read: ViewContainerRef }]
@@ -3158,5 +3289,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CollectionModes, Directions, MethodsForSelecting, NgVirtualListComponent, NgVirtualListItemComponent, ScrollEvent, SnappingMethods, debounce, toggleClassName };
+export { CollectionModes, Directions, FocusAlignments, MethodsForSelecting, NgVirtualListComponent, NgVirtualListItemComponent, ScrollEvent, SnappingMethods, debounce, toggleClassName };
 //# sourceMappingURL=ng-virtual-list.mjs.map