ng-virtual-list 18.7.2 → 18.7.3

package/fesm2022/ng-virtual-list.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { Injectable, inject, ChangeDetectorRef, signal, ElementRef, Component, ChangeDetectionStrategy, viewChild, output, input, ViewContainerRef, ViewEncapsulation, ViewChild, NgModule, NO_ERRORS_SCHEMA } 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';
 import * as i1 from '@angular/common';
@@ -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: "18.2.13", ngImpo
                 }]
         }], 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/18.x/projects/ng-virtual-list/src/lib/components/ng-virtual-list-item.component.ts
@@ -282,6 +284,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;
@@ -334,23 +337,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;
                 }
@@ -360,11 +411,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;
@@ -405,6 +474,9 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
         if (isSelected) {
             part += PART_ITEM_SELECTED;
         }
+        if (this.focus()) {
+            part += PART_ITEM_FOCUSED;
+        }
         this._part = part;
     }
     getBounds() {
@@ -449,14 +521,14 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
         this._service.itemClick(this._data);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgVirtualListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NgVirtualListItemComponent, selector: "ng-virtual-list-item", host: { attributes: { "role": "listitem" }, classAttribute: "ngvl__item" }, usesInheritance: true, ngImport: i0, template: "@if (data(); as item) {\r\n    <div #listItem [part]=\"part\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': item.config.snapped,\r\n            'snapped-out': item.config.snappedOut}\" (click)=\"onClickHandler()\">\r\n        @if (itemRenderer(); as renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\"\r\n                [ngTemplateOutletContext]=\"{data: item.data || {}, measures: measures(), config: config()}\" />\r\n            }\r\n    </div>\r\n}\r\n", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden}.ngvl-item__container{margin:0;padding:0;overflow:hidden;background-color:#fff;width:inherit;height:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NgVirtualListItemComponent, selector: "ng-virtual-list-item", host: { attributes: { "role": "listitem" }, classAttribute: "ngvl__item" }, usesInheritance: true, ngImport: i0, template: "@if (data(); as item) {\r\n    <div #listItem [part]=\"part\" class=\"ngvl-item__container\" [attr.index]=\"item.config.tabIndex\" tabindex=\"1\" [ngClass]=\"{'snapped': item.config.snapped,\r\n            'snapped-out': item.config.snappedOut, 'focus': focus()}\" (click)=\"onClickHandler()\">\r\n        @if (itemRenderer(); as renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\"\r\n                [ngTemplateOutletContext]=\"{data: item.data || {}, measures: measures(), config: config()}\" />\r\n            }\r\n    </div>\r\n}\r\n", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden}.ngvl-item__container{margin:0;padding:0;overflow:hidden;background-color:#fff;width:inherit;height:inherit;box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgVirtualListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-virtual-list-item', standalone: false, host: {
                         'class': 'ngvl__item',
                         'role': 'listitem',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (data(); as item) {\r\n    <div #listItem [part]=\"part\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': item.config.snapped,\r\n            'snapped-out': item.config.snappedOut}\" (click)=\"onClickHandler()\">\r\n        @if (itemRenderer(); as renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\"\r\n                [ngTemplateOutletContext]=\"{data: item.data || {}, measures: measures(), config: config()}\" />\r\n            }\r\n    </div>\r\n}\r\n", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden}.ngvl-item__container{margin:0;padding:0;overflow:hidden;background-color:#fff;width:inherit;height:inherit}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (data(); as item) {\r\n    <div #listItem [part]=\"part\" class=\"ngvl-item__container\" [attr.index]=\"item.config.tabIndex\" tabindex=\"1\" [ngClass]=\"{'snapped': item.config.snapped,\r\n            'snapped-out': item.config.snappedOut, 'focus': focus()}\" (click)=\"onClickHandler()\">\r\n        @if (itemRenderer(); as renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\"\r\n                [ngTemplateOutletContext]=\"{data: item.data || {}, measures: measures(), config: config()}\" />\r\n            }\r\n    </div>\r\n}\r\n", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden}.ngvl-item__container{margin:0;padding:0;overflow:hidden;background-color:#fff;width:inherit;height:inherit;box-sizing:border-box}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -1552,7 +1624,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]) {
@@ -1577,6 +1649,7 @@ class TrackBox extends CacheMap {
                             snappedOut: false,
                             dynamic: dynamicSize,
                             isSnappingMethodAdvanced,
+                            tabIndex: count,
                             zIndex: '1',
                         };
                         const itemData = items[i];
@@ -1584,6 +1657,7 @@ class TrackBox extends CacheMap {
                         stickyItemIndex = i;
                         stickyItemSize = size;
                         displayItems.push(stickyItem);
+                        count++;
                         break;
                     }
                 }
@@ -1615,6 +1689,7 @@ class TrackBox extends CacheMap {
                             snappedOut: false,
                             dynamic: dynamicSize,
                             isSnappingMethodAdvanced,
+                            tabIndex: count,
                             zIndex: '1',
                         };
                         const itemData = items[i];
@@ -1622,6 +1697,7 @@ class TrackBox extends CacheMap {
                         endStickyItemIndex = i;
                         endStickyItemSize = size;
                         displayItems.push(endStickyItem);
+                        count++;
                         break;
                     }
                 }
@@ -1653,6 +1729,7 @@ class TrackBox extends CacheMap {
                         snappedOut: false,
                         dynamic: dynamicSize,
                         isSnappingMethodAdvanced,
+                        tabIndex: count,
                         zIndex: '0',
                     };
                     if (snapped) {
@@ -1677,6 +1754,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;
@@ -2058,6 +2136,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;