ng-virtual-list 20.7.2 → 20.7.3

package/README.md

@@ -44,6 +44,10 @@ As each item may contain images, nested components, or interactions, virtual ren
 
 Single and multiple selection of elements
 
+Navigating with the keyboard
+
+Support for element animation
+
 <br/>
 
 ## Installation
@@ -575,12 +579,12 @@ Methods
 
 | Angular version | ng-virtual-list version | git | npm |
 |--|--|--|--|
-| 19.x | 19.7.3 | [19.x](https://github.com/DjonnyX/ng-virtual-list/tree/19.x) | [19.7.3](https://www.npmjs.com/package/ng-virtual-list/v/19.7.3) |
-| 18.x | 18.7.2 | [18.x](https://github.com/DjonnyX/ng-virtual-list/tree/18.x) | [18.7.2](https://www.npmjs.com/package/ng-virtual-list/v/18.7.2) |
-| 17.x | 17.7.2 | [17.x](https://github.com/DjonnyX/ng-virtual-list/tree/17.x) | [17.7.2](https://www.npmjs.com/package/ng-virtual-list/v/17.7.2) |
-| 16.x | 16.7.2 | [16.x](https://github.com/DjonnyX/ng-virtual-list/tree/16.x) | [16.7.2](https://www.npmjs.com/package/ng-virtual-list/v/16.7.2) |
-| 15.x | 15.7.2 | [15.x](https://github.com/DjonnyX/ng-virtual-list/tree/15.x) | [15.7.2](https://www.npmjs.com/package/ng-virtual-list/v/15.7.2) |
-| 14.x | 14.7.2 | [14.x](https://github.com/DjonnyX/ng-virtual-list/tree/14.x) | [14.7.2](https://www.npmjs.com/package/ng-virtual-list/v/14.7.2) |
+| 19.x | 19.7.4 | [19.x](https://github.com/DjonnyX/ng-virtual-list/tree/19.x) | [19.7.4](https://www.npmjs.com/package/ng-virtual-list/v/19.7.4) |
+| 18.x | 18.7.3 | [18.x](https://github.com/DjonnyX/ng-virtual-list/tree/18.x) | [18.7.3](https://www.npmjs.com/package/ng-virtual-list/v/18.7.3) |
+| 17.x | 17.7.3 | [17.x](https://github.com/DjonnyX/ng-virtual-list/tree/17.x) | [17.7.3](https://www.npmjs.com/package/ng-virtual-list/v/17.7.3) |
+| 16.x | 16.7.3 | [16.x](https://github.com/DjonnyX/ng-virtual-list/tree/16.x) | [16.7.3](https://www.npmjs.com/package/ng-virtual-list/v/16.7.3) |
+| 15.x | 15.7.3 | [15.x](https://github.com/DjonnyX/ng-virtual-list/tree/15.x) | [15.7.3](https://www.npmjs.com/package/ng-virtual-list/v/15.7.3) |
+| 14.x | 14.7.3 | [14.x](https://github.com/DjonnyX/ng-virtual-list/tree/14.x) | [14.7.3](https://www.npmjs.com/package/ng-virtual-list/v/14.7.3) |
 
 <br/>
 

package/fesm2022/ng-virtual-list.mjs

@@ -2,7 +2,7 @@ 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, combineLatest, map, filter, distinctUntilChanged, switchMap, of } from 'rxjs';
+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';
 
@@ -109,10 +109,11 @@ const CLASS_LIST_VERTICAL = 'vertical';
 const CLASS_LIST_HORIZONTAL = 'horizontal';
 // styles
 const PART_DEFAULT_ITEM = 'item';
-const PART_ITEM_ODD = ' odd';
-const PART_ITEM_EVEN = ' even';
-const PART_ITEM_SNAPPED = ' snapped';
-const PART_ITEM_SELECTED = ' selected';
+const PART_ITEM_ODD = ' item-odd';
+const PART_ITEM_EVEN = ' item-even';
+const PART_ITEM_SNAPPED = ' item-snapped';
+const PART_ITEM_SELECTED = ' item-selected';
+const PART_ITEM_FOCUSED = ' item-focused';
 
 /**
  * Virtual List Item Interface
@@ -158,6 +159,7 @@ class NgVirtualListService {
     }
     selectByClick = DEFAULT_SELECT_BY_CLICK;
     _trackBox;
+    listElement = null;
     constructor() {
         this._$methodOfSelecting.pipe(takeUntilDestroyed(), tap(v => {
             switch (v) {
@@ -265,7 +267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-const ATTR_AREA_SELECTED = 'area-selected';
+const ATTR_AREA_SELECTED = 'area-selected', TABINDEX = 'index', KEY_SPACE = " ", KEY_ARR_LEFT = "ArrowLeft", KEY_ARR_UP = "ArrowUp", KEY_ARR_RIGHT = "ArrowRight", KEY_ARR_DOWN = "ArrowDown";
 /**
  * Virtual list item component
  * @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/components/ng-virtual-list-item.component.ts
@@ -281,6 +283,7 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
     _isSelected = false;
     config = signal({});
     measures = signal(undefined);
+    focus = signal(false);
     _part = PART_DEFAULT_ITEM;
     get part() { return this._part; }
     regular = false;
@@ -331,23 +334,71 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
         super();
         this._id = this._service.generateComponentId();
         const $data = toObservable(this.data);
+        fromEvent(this.element, 'focusin').pipe(takeUntilDestroyed(), tap(e => {
+            this.focus.set(true);
+            this.updateConfig(this._data);
+            this.updatePartStr(this._data, this._isSelected);
+        })).subscribe(),
+            fromEvent(this.element, 'focusout').pipe(takeUntilDestroyed(), tap(e => {
+                this.focus.set(false);
+                this.updateConfig(this._data);
+                this.updatePartStr(this._data, this._isSelected);
+            })).subscribe(),
+            fromEvent(this.element, 'keydown').pipe(takeUntilDestroyed(), tap(e => {
+                switch (e.key) {
+                    case KEY_SPACE: {
+                        e.stopImmediatePropagation();
+                        e.preventDefault();
+                        this._service.select(this._data);
+                        break;
+                    }
+                    case KEY_ARR_LEFT:
+                        if (!this.config().isVertical) {
+                            e.stopImmediatePropagation();
+                            e.preventDefault();
+                            this.focusPrev();
+                        }
+                        break;
+                    case KEY_ARR_UP:
+                        if (this.config().isVertical) {
+                            e.stopImmediatePropagation();
+                            e.preventDefault();
+                            this.focusPrev();
+                        }
+                        break;
+                    case KEY_ARR_RIGHT:
+                        if (!this.config().isVertical) {
+                            e.stopImmediatePropagation();
+                            e.preventDefault();
+                            this.focusNext();
+                        }
+                        break;
+                    case KEY_ARR_DOWN:
+                        if (this.config().isVertical) {
+                            e.stopImmediatePropagation();
+                            e.preventDefault();
+                            this.focusNext();
+                        }
+                        break;
+                }
+            })).subscribe();
         combineLatest([$data, this._service.$methodOfSelecting, this._service.$selectedIds]).pipe(takeUntilDestroyed(), map(([, m, ids]) => ({ method: m, ids })), tap(({ method, ids }) => {
             switch (method) {
                 case MethodsForSelectingTypes.SELECT: {
                     const id = ids, isSelected = id === this.itemId;
-                    this._elementRef.nativeElement.setAttribute(ATTR_AREA_SELECTED, String(isSelected));
+                    this.element.setAttribute(ATTR_AREA_SELECTED, String(isSelected));
                     this._isSelected = isSelected;
                     break;
                 }
                 case MethodsForSelectingTypes.MULTI_SELECT: {
                     const actualIds = ids, isSelected = this.itemId !== undefined && actualIds && actualIds.includes(this.itemId);
-                    this._elementRef.nativeElement.setAttribute(ATTR_AREA_SELECTED, String(isSelected));
+                    this.element.setAttribute(ATTR_AREA_SELECTED, String(isSelected));
                     this._isSelected = isSelected;
                     break;
                 }
                 case MethodsForSelectingTypes.NONE:
                 default: {
-                    this._elementRef.nativeElement.removeAttribute(ATTR_AREA_SELECTED);
+                    this.element.removeAttribute(ATTR_AREA_SELECTED);
                     this._isSelected = false;
                     break;
                 }
@@ -357,11 +408,29 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
             this.updateMeasures(this._data);
         })).subscribe();
     }
+    focusNext() {
+        const tabIndex = this.config()?.tabIndex ?? 0;
+        if (this._service.listElement && tabIndex > 0) {
+            const el = this._service.listElement.querySelector(`[${TABINDEX}="${tabIndex + 1}"]`);
+            if (el) {
+                el.focus();
+            }
+        }
+    }
+    focusPrev() {
+        const tabIndex = this.config()?.tabIndex ?? 0;
+        if (this._service.listElement && tabIndex > 1) {
+            const el = this._service.listElement.querySelector(`[${TABINDEX}="${tabIndex - 1}"]`);
+            if (el) {
+                el.focus();
+            }
+        }
+    }
     updateMeasures(v) {
         this.measures.set(v?.measures ? { ...v.measures } : undefined);
     }
     updateConfig(v) {
-        this.config.set({ ...v?.config || {}, selected: this._isSelected, select: this._selectHandler(v) });
+        this.config.set({ ...v?.config || {}, selected: this._isSelected, select: this._selectHandler(v), focus: this.focus() });
     }
     update() {
         const data = this._data, regular = this.regular, length = this._regularLength;
@@ -401,6 +470,9 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
         if (isSelected) {
             part += PART_ITEM_SELECTED;
         }
+        if (this.focus()) {
+            part += PART_ITEM_FOCUSED;
+        }
         this._part = part;
     }
     getBounds() {
@@ -445,14 +517,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 _measures = measures();\r\n@let renderer = itemRenderer();\r\n\r\n@if (item) {\r\n    <div #listItem [part]=\"part\" class=\"ngvl-item__container\"\r\n        [ngClass]=\"{'snapped': item.config.snapped, 'snapped-out': item.config.snappedOut}\" (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}\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 _measures = measures();\r\n@let renderer = itemRenderer();\r\n\r\n@if (item) {\r\n    <div #listItem [part]=\"part\" [attr.index]=\"item.config.tabIndex\" tabindex=\"1\" class=\"ngvl-item__container\"\r\n        [ngClass]=\"{'snapped': item.config.snapped, 'snapped-out': item.config.snappedOut, 'focus': focus()}\" (click)=\"onClickHandler()\">\r\n        @if (renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\"\r\n                [ngTemplateOutletContext]=\"{data: item.data, measures: _measures, config: _config}\" />\r\n        }\r\n    </div>\r\n}", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden}.ngvl-item__container{margin:0;padding:0;overflow:hidden;background-color:#fff;width:inherit;height:inherit;box-sizing:border-box}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: NgVirtualListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-virtual-list-item', imports: [CommonModule], host: {
                         'class': 'ngvl__item',
                         'role': 'listitem',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let item = data();\r\n@let _config = config();\r\n@let _measures = measures();\r\n@let renderer = itemRenderer();\r\n\r\n@if (item) {\r\n    <div #listItem [part]=\"part\" class=\"ngvl-item__container\"\r\n        [ngClass]=\"{'snapped': item.config.snapped, 'snapped-out': item.config.snappedOut}\" (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}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let item = data();\r\n@let _config = config();\r\n@let _measures = measures();\r\n@let renderer = itemRenderer();\r\n\r\n@if (item) {\r\n    <div #listItem [part]=\"part\" [attr.index]=\"item.config.tabIndex\" tabindex=\"1\" class=\"ngvl-item__container\"\r\n        [ngClass]=\"{'snapped': item.config.snapped, 'snapped-out': item.config.snappedOut, 'focus': focus()}\" (click)=\"onClickHandler()\">\r\n        @if (renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\"\r\n                [ngTemplateOutletContext]=\"{data: item.data, measures: _measures, config: _config}\" />\r\n        }\r\n    </div>\r\n}", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden}.ngvl-item__container{margin:0;padding:0;overflow:hidden;background-color:#fff;width:inherit;height:inherit;box-sizing:border-box}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -1548,7 +1620,7 @@ class TrackBox extends CacheMap {
         const { width, height, normalizedItemWidth, normalizedItemHeight, dynamicSize, itemsOnDisplayLength, itemsFromStartToScrollEnd, isVertical, renderItems: renderItemsLength, scrollSize, sizeProperty, snap, snippedPos, startPosition, totalLength, startIndex, typicalItemSize, } = metrics, displayItems = [];
         if (items.length) {
             const actualSnippedPosition = snippedPos, isSnappingMethodAdvanced = this.isSnappingMethodAdvanced, boundsSize = isVertical ? height : width, actualEndSnippedPosition = boundsSize;
-            let pos = startPosition, renderItems = renderItemsLength, stickyItem, nextSticky, stickyItemIndex = -1, stickyItemSize = 0, endStickyItem, nextEndSticky, endStickyItemIndex = -1, endStickyItemSize = 0;
+            let pos = startPosition, renderItems = renderItemsLength, stickyItem, nextSticky, stickyItemIndex = -1, stickyItemSize = 0, endStickyItem, nextEndSticky, endStickyItemIndex = -1, endStickyItemSize = 0, count = 1;
             if (snap) {
                 for (let i = Math.min(itemsFromStartToScrollEnd > 0 ? itemsFromStartToScrollEnd : 0, totalLength - 1); i >= 0; i--) {
                     if (!items[i]) {
@@ -1573,6 +1645,7 @@ class TrackBox extends CacheMap {
                             snappedOut: false,
                             dynamic: dynamicSize,
                             isSnappingMethodAdvanced,
+                            tabIndex: count,
                             zIndex: '1',
                         };
                         const itemData = items[i];
@@ -1580,6 +1653,7 @@ class TrackBox extends CacheMap {
                         stickyItemIndex = i;
                         stickyItemSize = size;
                         displayItems.push(stickyItem);
+                        count++;
                         break;
                     }
                 }
@@ -1611,6 +1685,7 @@ class TrackBox extends CacheMap {
                             snappedOut: false,
                             dynamic: dynamicSize,
                             isSnappingMethodAdvanced,
+                            tabIndex: count,
                             zIndex: '1',
                         };
                         const itemData = items[i];
@@ -1618,6 +1693,7 @@ class TrackBox extends CacheMap {
                         endStickyItemIndex = i;
                         endStickyItemSize = size;
                         displayItems.push(endStickyItem);
+                        count++;
                         break;
                     }
                 }
@@ -1649,6 +1725,7 @@ class TrackBox extends CacheMap {
                         snappedOut: false,
                         dynamic: dynamicSize,
                         isSnappingMethodAdvanced,
+                        tabIndex: count,
                         zIndex: '0',
                     };
                     if (snapped) {
@@ -1673,6 +1750,7 @@ class TrackBox extends CacheMap {
                         nextEndSticky.measures.delta = isVertical ? (item.measures.y - scrollSize) : (item.measures.x - scrollSize);
                     }
                     displayItems.push(item);
+                    count++;
                 }
                 renderItems -= 1;
                 pos += size;
@@ -2054,6 +2132,9 @@ class NgVirtualListComponent {
         this._initialized = signal(false);
         this.$initialized = toObservable(this._initialized);
         this._trackBox.displayComponents = this._displayComponents;
+        toObservable(this._list).pipe(takeUntilDestroyed(), filter(v => !!v), tap(v => {
+            this._service.listElement = v.nativeElement;
+        })).subscribe();
         const $trackBy = toObservable(this.trackBy), $selectByClick = toObservable(this.selectByClick);
         $selectByClick.pipe(takeUntilDestroyed(), tap(v => {
             this._service.selectByClick = v;