ng-virtual-list 16.7.2 → 16.7.3

package/fesm2022/ng-virtual-list.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
 import { Injectable, Component, ChangeDetectionStrategy, EventEmitter as EventEmitter$1, ViewContainerRef, ElementRef, ViewEncapsulation, ViewChild, Output, Input, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { takeUntil, map, tap as tap$1 } from 'rxjs/operators';
-import { Subject, tap, BehaviorSubject as BehaviorSubject$1, combineLatest, filter, map as map$1, debounceTime, distinctUntilChanged, switchMap, of } from 'rxjs';
-import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
+import { tap as tap$1, map } from 'rxjs/operators';
+import { Subject, tap, BehaviorSubject as BehaviorSubject$1, fromEvent, combineLatest, filter, map as map$1, debounceTime, distinctUntilChanged, switchMap, of } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
@@ -110,10 +110,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
@@ -157,8 +158,9 @@ class NgVirtualListService {
     set methodOfSelecting(v) {
         this._$methodOfSelecting.next(v);
     }
-    selectByClick = DEFAULT_SELECT_BY_CLICK;
     _trackBox;
+    selectByClick = DEFAULT_SELECT_BY_CLICK;
+    listElement = null;
     constructor() {
         this._$methodOfSelecting.pipe(takeUntilDestroyed(), tap(v => {
             switch (v) {
@@ -265,7 +267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
 
-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/16.x/projects/ng-virtual-list/src/lib/components/ng-virtual-list-item.component.ts
@@ -276,7 +278,6 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
     _cdr;
     _elementRef;
     _service;
-    _$unsubscribe = new Subject();
     _id;
     get id() {
         return this._id;
@@ -284,8 +285,11 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
     _part = PART_DEFAULT_ITEM;
     get part() { return this._part; }
     _isSelected = false;
-    config = new BehaviorSubject$1({});
+    _$config = new BehaviorSubject$1({});
+    $config = this._$config.asObservable();
     measures = new BehaviorSubject$1(undefined);
+    _$focus = new BehaviorSubject$1(false);
+    $focus = this._$focus.asObservable();
     regular = false;
     data;
     _$data = new BehaviorSubject$1(this.data);
@@ -343,7 +347,55 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
         this._service = _service;
         this._id = this._service.generateComponentId();
         const $data = this.$data;
-        combineLatest([$data, this._service.$methodOfSelecting, this._service.$selectedIds]).pipe(takeUntil(this._$unsubscribe), map(([, m, ids]) => ({ method: m, ids })), tap$1(({ method, ids }) => {
+        fromEvent(this.element, 'focusin').pipe(takeUntilDestroyed(), tap$1(e => {
+            this._$focus.next(true);
+            this.updateConfig(this.data);
+            this.updatePartStr(this.data, this._isSelected);
+        })).subscribe(),
+            fromEvent(this.element, 'focusout').pipe(takeUntilDestroyed(), tap$1(e => {
+                this._$focus.next(false);
+                this.updateConfig(this.data);
+                this.updatePartStr(this.data, this._isSelected);
+            })).subscribe(),
+            fromEvent(this.element, 'keydown').pipe(takeUntilDestroyed(), tap$1(e => {
+                switch (e.key) {
+                    case KEY_SPACE: {
+                        e.stopImmediatePropagation();
+                        e.preventDefault();
+                        this._service.select(this.data);
+                        break;
+                    }
+                    case KEY_ARR_LEFT:
+                        if (!this._$config.getValue().isVertical) {
+                            e.stopImmediatePropagation();
+                            e.preventDefault();
+                            this.focusPrev();
+                        }
+                        break;
+                    case KEY_ARR_UP:
+                        if (this._$config.getValue().isVertical) {
+                            e.stopImmediatePropagation();
+                            e.preventDefault();
+                            this.focusPrev();
+                        }
+                        break;
+                    case KEY_ARR_RIGHT:
+                        if (!this._$config.getValue().isVertical) {
+                            e.stopImmediatePropagation();
+                            e.preventDefault();
+                            this.focusNext();
+                        }
+                        break;
+                    case KEY_ARR_DOWN:
+                        if (this._$config.getValue().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$1(({ method, ids }) => {
             switch (method) {
                 case MethodsForSelectingTypes.SELECT: {
                     const id = ids, isSelected = id === this.itemId;
@@ -369,11 +421,29 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
             this.updateMeasures(this.data);
         })).subscribe();
     }
+    focusNext() {
+        const tabIndex = this._$config.getValue()?.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.getValue()?.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.next(v?.measures ? { ...v.measures } : undefined);
     }
     updateConfig(v) {
-        this.config.next({ ...v?.config || {}, selected: this._isSelected, select: this._selectHandler(v) });
+        this._$config.next({ ...v?.config || {}, selected: this._isSelected, select: this._selectHandler(v), focus: this._$focus.getValue() });
     }
     update() {
         const data = this.data, regular = this.regular, length = this._regularLength;
@@ -414,6 +484,9 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
         if (isSelected) {
             part += PART_ITEM_SELECTED;
         }
+        if (this._$focus.getValue()) {
+            part += PART_ITEM_FOCUSED;
+        }
         this._part = part;
     }
     getBounds() {
@@ -457,21 +530,15 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
     onClickHandler() {
         this._service.itemClick(this.data);
     }
-    ngOnDestroy() {
-        if (this._$unsubscribe) {
-            this._$unsubscribe.next();
-            this._$unsubscribe.complete();
-        }
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgVirtualListItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: NgVirtualListService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': data.config.snapped,\r\n        'snapped-out': data.config.snappedOut}\" (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}\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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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\" [attr.index]=\"data.config.tabIndex\" tabindex=\"1\" 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': data.config.snapped,\r\n        'snapped-out': data.config.snappedOut}\" (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}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"data\">\r\n    <div #listItem [part]=\"part\" [attr.index]=\"data.config.tabIndex\" tabindex=\"1\" 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"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: NgVirtualListService }]; } });
 
 /**
@@ -1567,7 +1634,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]) {
@@ -1592,6 +1659,7 @@ class TrackBox extends CacheMap {
                             snappedOut: false,
                             dynamic: dynamicSize,
                             isSnappingMethodAdvanced,
+                            tabIndex: count,
                             zIndex: '1',
                         };
                         const itemData = items[i];
@@ -1599,6 +1667,7 @@ class TrackBox extends CacheMap {
                         stickyItemIndex = i;
                         stickyItemSize = size;
                         displayItems.push(stickyItem);
+                        count++;
                         break;
                     }
                 }
@@ -1630,6 +1699,7 @@ class TrackBox extends CacheMap {
                             snappedOut: false,
                             dynamic: dynamicSize,
                             isSnappingMethodAdvanced,
+                            tabIndex: count,
                             zIndex: '1',
                         };
                         const itemData = items[i];
@@ -1637,6 +1707,7 @@ class TrackBox extends CacheMap {
                         endStickyItemIndex = i;
                         endStickyItemSize = size;
                         displayItems.push(endStickyItem);
+                        count++;
                         break;
                     }
                 }
@@ -1668,6 +1739,7 @@ class TrackBox extends CacheMap {
                         snappedOut: false,
                         dynamic: dynamicSize,
                         isSnappingMethodAdvanced,
+                        tabIndex: count,
                         zIndex: '0',
                     };
                     if (snapped) {
@@ -1692,6 +1764,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;
@@ -2183,7 +2256,9 @@ class NgVirtualListComponent {
         }
     };
     _$initialized = new BehaviorSubject$1(false);
-    $initialized;
+    $initialized = this._$initialized.asObservable();
+    _$viewInitialized = new BehaviorSubject$1(false);
+    $viewInitialized = this._$viewInitialized.asObservable();
     /**
      * Base class of the element component
      */
@@ -2209,8 +2284,9 @@ class NgVirtualListComponent {
             ? 0 : NgVirtualListComponent.__nextId + 1;
         this._id = NgVirtualListComponent.__nextId;
         this._service.initialize(this._trackBox);
-        this._$initialized = new BehaviorSubject$1(false);
-        this.$initialized = this._$initialized.asObservable();
+        this.$viewInitialized.pipe(takeUntilDestroyed(), filter(v => !!v), tap(v => {
+            this._service.listElement = this._list?.nativeElement ?? null;
+        })).subscribe();
         this._trackBox.displayComponents = this._displayComponents;
         const $trackBy = this.$trackBy, $selectByClick = this.$selectByClick;
         $selectByClick.pipe(takeUntilDestroyed(), tap(v => {
@@ -2536,6 +2612,7 @@ class NgVirtualListComponent {
             this._resizeObserver.observe(containerEl.nativeElement);
             this._onResizeHandler();
         }
+        this._$viewInitialized.next(true);
     }
     /** @internal */
     ngOnDestroy() {