ng-virtual-list 14.7.13 → 14.7.15

package/fesm2020/ng-virtual-list.mjs

@@ -82,6 +82,20 @@ var SnappingMethods;
     SnappingMethods["ADVANCED"] = "advanced";
 })(SnappingMethods || (SnappingMethods = {}));
 
+/**
+ * Focus Alignments.
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/14.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';
@@ -241,7 +256,9 @@ class NgVirtualListService {
         this.selectByClick = DEFAULT_SELECT_BY_CLICK;
         this.collapseByClick = DEFAULT_COLLAPSE_BY_CLICK;
         this.listElement = null;
-        this.collection = [];
+        this._$displayItems = new BehaviorSubject([]);
+        this.$displayItems = this._$displayItems.asObservable();
+        this._collection = [];
         this._$methodOfSelecting.pipe(takeUntil(this._$unsubscribe), tap(v => {
             switch (v) {
                 case MethodsForSelectingTypes.SELECT: {
@@ -269,6 +286,14 @@ class NgVirtualListService {
         this._$methodOfSelecting.next(v);
     }
     get focusedId() { return this._$focusedId.getValue(); }
+    set collection(v) {
+        if (this._collection === v) {
+            return;
+        }
+        this._collection = v;
+        this._$displayItems.next(v);
+    }
+    get collection() { return this._collection; }
     setSelectedIds(ids) {
         if (JSON.stringify(this._$selectedIds.getValue()) !== JSON.stringify(ids)) {
             this._$selectedIds.next(ids);
@@ -385,11 +410,11 @@ class NgVirtualListService {
     initialize(trackBox) {
         this._trackBox = trackBox;
     }
-    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) {
@@ -415,7 +440,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-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}"]`;
 };
@@ -438,8 +463,8 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
         this._$config = new BehaviorSubject$1({});
         this.$config = this._$config.asObservable();
         this.measures = new BehaviorSubject$1(undefined);
-        this._$focus = new BehaviorSubject$1(false);
-        this.$focus = this._$focus.asObservable();
+        this._$focused = new BehaviorSubject$1(false);
+        this.$focused = this._$focused.asObservable();
         this._$part = new BehaviorSubject$1(PART_DEFAULT_ITEM);
         this.$part = this._$part.asObservable();
         this.regular = false;
@@ -472,19 +497,26 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
             }
             this._service.collapse(data, collapsed);
         };
+        this._focusHandler = () => 
+        /**
+        * Focus a list item
+        */
+        (align = FocusAlignments.CENTER) => {
+            this.focus(align);
+        };
         this._id = this._service.generateComponentId();
-        const $data = this.$data, $focus = this.$focus;
+        const $data = this.$data, $focus = this.$focused;
         this._elementRef.nativeElement.setAttribute('id', String(this._id));
         $focus.pipe(takeUntil$1(this._$unsubscribe), tap$1(v => {
             this._service.areaFocus(v ? this._id : this._service.focusedId === this._id ? null : this._service.focusedId);
         })).subscribe();
         fromEvent(this.element, EVENT_FOCUS_IN).pipe(takeUntil$1(this._$unsubscribe), tap$1(e => {
-            this._$focus.next(true);
+            this._$focused.next(true);
             this.updateConfig(this.data);
             this.updatePartStr(this.data, this._isSelected, this._isCollapsed);
         })).subscribe(),
             fromEvent(this.element, EVENT_FOCUS_OUT).pipe(takeUntil$1(this._$unsubscribe), tap$1(e => {
-                this._$focus.next(false);
+                this._$focused.next(false);
                 this.updateConfig(this.data);
                 this.updatePartStr(this.data, this._isSelected, this._isCollapsed);
             })).subscribe(),
@@ -627,18 +659,29 @@ 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.next(v?.measures ? { ...v.measures } : undefined);
     }
     updateConfig(v) {
         this._$config.next({
-            ...v?.config || {}, selected: this._isSelected, collapsed: this._isCollapsed, focus: this._$focus.getValue(),
-            collapse: this._collapseHandler(v), select: this._selectHandler(v)
+            ...v?.config || {}, selected: this._isSelected, collapsed: this._isCollapsed, focused: this._$focused.getValue(),
+            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) {
@@ -662,6 +705,9 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
             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) {
@@ -683,7 +729,7 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
         if (v ? v.config.new : false) {
             part += PART_ITEM_NEW;
         }
-        if (this._$focus.getValue()) {
+        if (this._$focused.getValue()) {
             part += PART_ITEM_FOCUSED;
         }
         this._$part.next(part);
@@ -737,13 +783,13 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
     }
 }
 NgVirtualListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgVirtualListItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: NgVirtualListService }], target: i0.ɵɵFactoryTarget.Component });
-NgVirtualListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgVirtualListItemComponent, selector: "ng-virtual-list-item", host: { attributes: { "role": "listitem" }, classAttribute: "ngvl__item" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data\">\r\n    <div #listItem [part]=\"$part | async\" [attr.ng-vl-index]=\"data.config.tabIndex || -1\" tabindex=\"0\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': data.config.snapped,\r\n        'snapped-out': data.config.snappedOut, 'focus': $focus | async}\" (click)=\"onClickHandler()\">\r\n        <ng-container *ngIf=\"itemRenderer\">\r\n            <ng-container [ngTemplateOutlet]=\"itemRenderer\"\r\n                [ngTemplateOutletContext]=\"{data: data.data || {}, measures: measures | async, config: $config | async}\"></ng-container>\r\n        </ng-container>\r\n    </div>\r\n</ng-container>", 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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NgVirtualListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgVirtualListItemComponent, selector: "ng-virtual-list-item", host: { attributes: { "role": "listitem" }, classAttribute: "ngvl__item" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data\">\r\n    <div #listItem [part]=\"$part | async\" [attr.ng-vl-index]=\"data.config.tabIndex || -1\" tabindex=\"0\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': data.config.snapped,\r\n        'snapped-out': data.config.snappedOut, 'focus': $focused | async}\" (click)=\"onClickHandler()\">\r\n        <ng-container *ngIf=\"itemRenderer\">\r\n            <ng-container [ngTemplateOutlet]=\"itemRenderer\"\r\n                [ngTemplateOutletContext]=\"{data: data.data || {}, measures: measures | async, config: $config | async}\"></ng-container>\r\n        </ng-container>\r\n    </div>\r\n</ng-container>", 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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgVirtualListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-virtual-list-item', host: {
                         'class': 'ngvl__item',
                         'role': 'listitem',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"data\">\r\n    <div #listItem [part]=\"$part | async\" [attr.ng-vl-index]=\"data.config.tabIndex || -1\" tabindex=\"0\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': data.config.snapped,\r\n        'snapped-out': data.config.snappedOut, 'focus': $focus | async}\" (click)=\"onClickHandler()\">\r\n        <ng-container *ngIf=\"itemRenderer\">\r\n            <ng-container [ngTemplateOutlet]=\"itemRenderer\"\r\n                [ngTemplateOutletContext]=\"{data: data.data || {}, measures: measures | async, config: $config | async}\"></ng-container>\r\n        </ng-container>\r\n    </div>\r\n</ng-container>", 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: "<ng-container *ngIf=\"data\">\r\n    <div #listItem [part]=\"$part | async\" [attr.ng-vl-index]=\"data.config.tabIndex || -1\" tabindex=\"0\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': data.config.snapped,\r\n        'snapped-out': data.config.snappedOut, 'focus': $focused | async}\" (click)=\"onClickHandler()\">\r\n        <ng-container *ngIf=\"itemRenderer\">\r\n            <ng-container [ngTemplateOutlet]=\"itemRenderer\"\r\n                [ngTemplateOutletContext]=\"{data: data.data || {}, measures: measures | async, config: $config | async}\"></ng-container>\r\n        </ng-container>\r\n    </div>\r\n</ng-container>", 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: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: NgVirtualListService }]; } });
 
 /**
@@ -2202,7 +2248,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) => {
@@ -2221,6 +2267,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.
@@ -2508,6 +2583,18 @@ class NgVirtualListComponent extends DisposableComponent {
             }
             return v;
         };
+        this._$screenReaderMessage = new BehaviorSubject$1(DEFAULT_SCREEN_READER_MESSAGE);
+        this.$screenReaderMessage = this._$screenReaderMessage.asObservable();
+        this._screenReaderMessageTransform = (v) => {
+            const valid = validateString(v);
+            if (!valid) {
+                console.error('The "screenReaderMessage" parameter must be of type `string`.');
+                return DEFAULT_SCREEN_READER_MESSAGE;
+            }
+            return v;
+        };
+        this._$screenReaderFormattedMessage = new BehaviorSubject$1(DEFAULT_SCREEN_READER_MESSAGE);
+        this.$screenReaderFormattedMessage = this._$screenReaderFormattedMessage.asObservable();
         this._isVertical = this.getIsVertical();
         this._isLazy = this.getIsLazy();
         this._$focusedElement = new BehaviorSubject$1(undefined);
@@ -2577,12 +2664,33 @@ class NgVirtualListComponent extends DisposableComponent {
                 this._$scrollSize.next(scrollSize);
             }
         };
-        this.itemToFocus = (element, position) => {
+        this.itemToFocus = (element, position, align = FocusAlignments.CENTER) => {
             const container = this._container?.nativeElement;
             if (container) {
-                const { width, height } = this._$bounds.getValue(), { 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.getValue(), { 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);
+                }
             }
         };
         this._$initialized = new BehaviorSubject$1(false);
@@ -2681,7 +2789,10 @@ class NgVirtualListComponent extends DisposableComponent {
         $trackBy.pipe(takeUntil(this._$unsubscribe), tap(v => {
             this._trackBox.trackingPropertyName = v;
         })).subscribe();
-        const $bounds = this._$bounds.asObservable().pipe(filter(b => !!b)), $items = this.$items.pipe(map$1(i => !i ? [] : i)), $scrollSize = this._$scrollSize.asObservable(), $itemSize = this.$itemSize.pipe(map$1(v => v <= 0 ? DEFAULT_ITEM_SIZE : v)), $bufferSize = this.$bufferSize.pipe(map$1(v => v < 0 ? DEFAULT_BUFFER_SIZE : v)), $maxBufferSize = this.$maxBufferSize.pipe(map$1(v => v < 0 ? DEFAULT_MAX_BUFFER_SIZE : v)), $itemConfigMap = this.$itemConfigMap.pipe(map$1(v => !v ? {} : v)), $snap = this.$snap, $isVertical = this.$direction.pipe(map$1(v => this.getIsVertical(v || DEFAULT_DIRECTION))), $isLazy = this.$collectionMode.pipe(map$1(v => this.getIsLazy(v || DEFAULT_COLLECTION_MODE))), $dynamicSize = this.$dynamicSize, $enabledBufferOptimization = this.$enabledBufferOptimization, $snappingMethod = this.$snappingMethod.pipe(map$1(v => this.getIsSnappingMethodAdvanced(v || DEFAULT_SNAPPING_METHOD))), $methodForSelecting = this.$methodForSelecting, $selectedIds = this.$selectedIds, $collapsedIds = this.$collapsedIds.pipe(map$1(v => Array.isArray(v) ? v : [])), $collapsedItemIds = this._$collapsedItemIds.asObservable().pipe(map$1(v => Array.isArray(v) ? v : [])), $actualItems = this._$actualItems.asObservable(), $cacheVersion = this.$cacheVersion;
+        const $bounds = this._$bounds.asObservable().pipe(filter(b => !!b)), $items = this.$items.pipe(map$1(i => !i ? [] : i)), $scrollSize = this._$scrollSize.asObservable(), $itemSize = this.$itemSize.pipe(map$1(v => v <= 0 ? DEFAULT_ITEM_SIZE : v)), $bufferSize = this.$bufferSize.pipe(map$1(v => v < 0 ? DEFAULT_BUFFER_SIZE : v)), $maxBufferSize = this.$maxBufferSize.pipe(map$1(v => v < 0 ? DEFAULT_MAX_BUFFER_SIZE : v)), $itemConfigMap = this.$itemConfigMap.pipe(map$1(v => !v ? {} : v)), $snap = this.$snap, $isVertical = this.$direction.pipe(map$1(v => this.getIsVertical(v || DEFAULT_DIRECTION))), $isLazy = this.$collectionMode.pipe(map$1(v => this.getIsLazy(v || DEFAULT_COLLECTION_MODE))), $dynamicSize = this.$dynamicSize, $enabledBufferOptimization = this.$enabledBufferOptimization, $snappingMethod = this.$snappingMethod.pipe(map$1(v => this.getIsSnappingMethodAdvanced(v || DEFAULT_SNAPPING_METHOD))), $methodForSelecting = this.$methodForSelecting, $selectedIds = this.$selectedIds, $collapsedIds = this.$collapsedIds.pipe(map$1(v => Array.isArray(v) ? v : [])), $collapsedItemIds = this._$collapsedItemIds.asObservable().pipe(map$1(v => Array.isArray(v) ? v : [])), $actualItems = this._$actualItems.asObservable(), $screenReaderMessage = this.$screenReaderMessage, $displayItems = this._service.$displayItems, $cacheVersion = this.$cacheVersion;
+        combineLatest([$displayItems, $screenReaderMessage, $isVertical, $scrollSize, $bounds]).pipe(takeUntil(this._$unsubscribe), distinctUntilChanged(), debounceTime(100), tap(([items, screenReaderMessage, isVertical, scrollSize, bounds]) => {
+            this._$screenReaderFormattedMessage.next(formatScreenReaderMessage(items, screenReaderMessage, scrollSize, isVertical, bounds));
+        })).subscribe();
         $isLazy.pipe(takeUntil(this._$unsubscribe), tap(v => {
             this._trackBox.isLazy = v;
         })).subscribe();
@@ -3078,6 +3189,21 @@ class NgVirtualListComponent extends DisposableComponent {
     }
     ;
     get trackBy() { return this._$trackBy.getValue(); }
+    /**
+     * 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.
+     */
+    set screenReaderMessage(v) {
+        if (this._$screenReaderMessage.getValue() === v) {
+            return;
+        }
+        const transformedValue = this._screenReaderMessageTransform(v);
+        this._$screenReaderMessage.next(transformedValue);
+    }
+    ;
+    get screenReaderMessage() { return this._$screenReaderMessage.getValue(); }
     get orientation() {
         return this._isVertical ? Directions.VERTICAL : Directions.HORIZONTAL;
     }
@@ -3190,6 +3316,20 @@ class NgVirtualListComponent extends DisposableComponent {
         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".
@@ -3330,12 +3470,12 @@ class NgVirtualListComponent extends DisposableComponent {
 }
 NgVirtualListComponent.__nextId = 0;
 NgVirtualListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgVirtualListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: NgVirtualListService }], target: i0.ɵɵFactoryTarget.Component });
-NgVirtualListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgVirtualListComponent, selector: "ng-virtual-list", inputs: { items: "items", selectedIds: "selectedIds", collapsedIds: "collapsedIds", selectByClick: "selectByClick", collapseByClick: "collapseByClick", snap: "snap", enabledBufferOptimization: "enabledBufferOptimization", itemRenderer: "itemRenderer", itemConfigMap: "itemConfigMap", itemSize: "itemSize", dynamicSize: "dynamicSize", direction: "direction", collectionMode: "collectionMode", bufferSize: "bufferSize", maxBufferSize: "maxBufferSize", snappingMethod: "snappingMethod", methodForSelecting: "methodForSelecting", trackBy: "trackBy" }, 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: "_listContainerRef", first: true, predicate: ["renderersContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_container", first: true, predicate: ["container"], descendants: true, read: (ElementRef) }, { propertyName: "_list", first: true, predicate: ["list"], descendants: true, read: (ElementRef) }, { propertyName: "_snapContainerRef", first: true, predicate: ["snapRendererContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_snappedContainer", first: true, predicate: ["snapped"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"snap\" #snapped part=\"snapped-item\" class=\"ngvl__list-snapper\">\r\n  <ng-container #snapRendererContainer></ng-container>\r\n</div>\r\n<div #container part=\"scroller\" class=\"ngvl__scroller\">\r\n  <div [attr.aria-orientation]=\"orientation\" [attr.aria-activedescendant]=\"$focusedElement | async\" #list part=\"list\"\r\n    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: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
+NgVirtualListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgVirtualListComponent, selector: "ng-virtual-list", inputs: { items: "items", selectedIds: "selectedIds", collapsedIds: "collapsedIds", selectByClick: "selectByClick", collapseByClick: "collapseByClick", snap: "snap", enabledBufferOptimization: "enabledBufferOptimization", itemRenderer: "itemRenderer", itemConfigMap: "itemConfigMap", itemSize: "itemSize", dynamicSize: "dynamicSize", direction: "direction", collectionMode: "collectionMode", bufferSize: "bufferSize", maxBufferSize: "maxBufferSize", snappingMethod: "snappingMethod", methodForSelecting: "methodForSelecting", trackBy: "trackBy", screenReaderMessage: "screenReaderMessage" }, 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: "_listContainerRef", first: true, predicate: ["renderersContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_container", first: true, predicate: ["container"], descendants: true, read: (ElementRef) }, { propertyName: "_list", first: true, predicate: ["list"], descendants: true, read: (ElementRef) }, { propertyName: "_snapContainerRef", first: true, predicate: ["snapRendererContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_snappedContainer", first: true, predicate: ["snapped"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "<div aria-live=\"polite\" aria-atomic=\"true\" class=\"ngvl__screen-reader\">\r\n  {{ $screenReaderFormattedMessage | async}}\r\n</div>\r\n<div *ngIf=\"snap\" #snapped part=\"snapped-item\" class=\"ngvl__list-snapper\">\r\n  <ng-container #snapRendererContainer></ng-container>\r\n</div>\r\n<div #container part=\"scroller\" class=\"ngvl__scroller\">\r\n  <div [attr.aria-orientation]=\"orientation\" [attr.aria-activedescendant]=\"$focusedElement | async\" #list part=\"list\"\r\n    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: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgVirtualListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-virtual-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, providers: [NgVirtualListService], host: {
                         'style': 'position: relative;'
-                    }, template: "<div *ngIf=\"snap\" #snapped part=\"snapped-item\" class=\"ngvl__list-snapper\">\r\n  <ng-container #snapRendererContainer></ng-container>\r\n</div>\r\n<div #container part=\"scroller\" class=\"ngvl__scroller\">\r\n  <div [attr.aria-orientation]=\"orientation\" [attr.aria-activedescendant]=\"$focusedElement | async\" #list part=\"list\"\r\n    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"] }]
+                    }, template: "<div aria-live=\"polite\" aria-atomic=\"true\" class=\"ngvl__screen-reader\">\r\n  {{ $screenReaderFormattedMessage | async}}\r\n</div>\r\n<div *ngIf=\"snap\" #snapped part=\"snapped-item\" class=\"ngvl__list-snapper\">\r\n  <ng-container #snapRendererContainer></ng-container>\r\n</div>\r\n<div #container part=\"scroller\" class=\"ngvl__scroller\">\r\n  <div [attr.aria-orientation]=\"orientation\" [attr.aria-activedescendant]=\"$focusedElement | async\" #list part=\"list\"\r\n    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: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: NgVirtualListService }]; }, propDecorators: { _listContainerRef: [{
                 type: ViewChild,
                 args: ['renderersContainer', { read: ViewContainerRef }]
@@ -3403,6 +3543,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], trackBy: [{
                 type: Input
+            }], screenReaderMessage: [{
+                type: Input
             }] } });
 
 class NgVirtualListModule {
@@ -3428,5 +3570,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CollectionModes, Directions, MethodsForSelecting, NgVirtualListComponent, NgVirtualListItemComponent, NgVirtualListModule, SnappingMethods };
+export { CollectionModes, Directions, FocusAlignments, MethodsForSelecting, NgVirtualListComponent, NgVirtualListItemComponent, NgVirtualListModule, SnappingMethods };
 //# sourceMappingURL=ng-virtual-list.mjs.map