@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
67 lines • 10.1 kB
JavaScript
import { FocusKeyManager } from '@angular/cdk/a11y';
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { map, takeUntil } from 'rxjs/operators';
import { tick } from '../../../common/operators/index';
import * as i0 from "@angular/core";
export class PageHeaderNavigationService {
constructor() {
/**
* Emit when focus changes. We can't directly use the FocusKeyManager
* `change` observable as it cannot be instantiate until after the view
* has been instantiated.
*/
this._onChange = new Subject();
/** Unsubscribe on destroy */
this._onDestroy = new Subject();
}
ngOnDestroy() {
this._onDestroy.next();
this._onDestroy.complete();
}
/** Make menu items navigable using arrow keys */
initialize(items) {
// store the query list for future lookups
this._items = items;
// create new focus key manager with horizontal orientation
this._focusManager = new FocusKeyManager(items)
.withHorizontalOrientation('ltr');
// listen for changes to the focused item
this._focusManager.change.pipe(takeUntil(this._onDestroy)).subscribe(() => this._onChange.next());
// make the first item tabbable initially
this._focusManager.updateActiveItem(0);
// on changes ensure there is always an active item
this._items.changes.subscribe(() => {
if (this._items.length > 0 && this._items.toArray().indexOf(this._focusManager.activeItem) === -1) {
this._focusManager.updateActiveItem(0);
}
});
// emit the initial change
this._onChange.next();
}
/** Listen for keyboard events */
onKeydown(event) {
this._focusManager.onKeydown(event);
}
/** Get the tab index for this item as an observable */
getTabIndex(item) {
return this._onChange.pipe(map(() => this.getItemTabIndex(item)), tick(), takeUntil(this._onDestroy));
}
/** Determine the tab index of a given item */
getItemTabIndex(item) {
// until the focus key manager is set up make everything tabbable
if (!this._items) {
return 0;
}
// get the index within the query list
const index = this._items.toArray().indexOf(item);
// if it is the current active element then it is tabbable
return index === this._focusManager.activeItemIndex ? 0 : -1;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: PageHeaderNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: PageHeaderNavigationService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: PageHeaderNavigationService, decorators: [{
type: Injectable
}] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmF2aWdhdGlvbi5zZXJ2aWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvcGFnZS1oZWFkZXIvbmF2aWdhdGlvbi9uYXZpZ2F0aW9uLnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBQ3BELE9BQU8sRUFBRSxVQUFVLEVBQXdCLE1BQU0sZUFBZSxDQUFDO0FBQ2pFLE9BQU8sRUFBYyxPQUFPLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDM0MsT0FBTyxFQUFFLEdBQUcsRUFBRSxTQUFTLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUNoRCxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0saUNBQWlDLENBQUM7O0FBSXZELE1BQU0sT0FBTywyQkFBMkI7SUFEeEM7UUFTSTs7OztXQUlHO1FBQ2MsY0FBUyxHQUFHLElBQUksT0FBTyxFQUFRLENBQUM7UUFFakQsNkJBQTZCO1FBQ1osZUFBVSxHQUFHLElBQUksT0FBTyxFQUFRLENBQUM7S0EyRHJEO0lBekRHLFdBQVc7UUFDUCxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ3ZCLElBQUksQ0FBQyxVQUFVLENBQUMsUUFBUSxFQUFFLENBQUM7SUFDL0IsQ0FBQztJQUVELGlEQUFpRDtJQUNqRCxVQUFVLENBQUMsS0FBbUQ7UUFFMUQsMENBQTBDO1FBQzFDLElBQUksQ0FBQyxNQUFNLEdBQUcsS0FBSyxDQUFDO1FBRXBCLDJEQUEyRDtRQUMzRCxJQUFJLENBQUMsYUFBYSxHQUFHLElBQUksZUFBZSxDQUFvQyxLQUFLLENBQUM7YUFDN0UseUJBQXlCLENBQUMsS0FBSyxDQUFDLENBQUM7UUFFdEMseUNBQXlDO1FBQ3pDLElBQUksQ0FBQyxhQUFhLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQztRQUVsRyx5Q0FBeUM7UUFDekMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUV2QyxtREFBbUQ7UUFDbkQsSUFBSSxDQUFDLE1BQU0sQ0FBQyxPQUFPLENBQUMsU0FBUyxDQUFDLEdBQUcsRUFBRTtZQUMvQixJQUFJLElBQUksQ0FBQyxNQUFNLENBQUMsTUFBTSxHQUFHLENBQUMsSUFBSSxJQUFJLENBQUMsTUFBTSxDQUFDLE9BQU8sRUFBRSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLFVBQVUsQ0FBQyxLQUFLLENBQUMsQ0FBQyxFQUFFLENBQUM7Z0JBQ2hHLElBQUksQ0FBQyxhQUFhLENBQUMsZ0JBQWdCLENBQUMsQ0FBQyxDQUFDLENBQUM7WUFDM0MsQ0FBQztRQUNMLENBQUMsQ0FBQyxDQUFDO1FBRUgsMEJBQTBCO1FBQzFCLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDMUIsQ0FBQztJQUVELGlDQUFpQztJQUNqQyxTQUFTLENBQUMsS0FBb0I7UUFDMUIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxTQUFTLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDeEMsQ0FBQztJQUVELHVEQUF1RDtJQUN2RCxXQUFXLENBQUMsSUFBdUM7UUFDL0MsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsQ0FBQyxFQUFFLElBQUksRUFBRSxFQUFFLFNBQVMsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQztJQUMxRyxDQUFDO0lBRUQsOENBQThDO0lBQ3RDLGVBQWUsQ0FBQyxJQUF1QztRQUUzRCxpRUFBaUU7UUFDakUsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQztZQUNmLE9BQU8sQ0FBQyxDQUFDO1FBQ2IsQ0FBQztRQUVELHNDQUFzQztRQUN0QyxNQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDLE9BQU8sRUFBRSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUVsRCwwREFBMEQ7UUFDMUQsT0FBTyxLQUFLLEtBQUssSUFBSSxDQUFDLGFBQWEsQ0FBQyxlQUFlLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDakUsQ0FBQzsrR0F6RVEsMkJBQTJCO21IQUEzQiwyQkFBMkI7OzRGQUEzQiwyQkFBMkI7a0JBRHZDLFVBQVUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBGb2N1c0tleU1hbmFnZXIgfSBmcm9tICdAYW5ndWxhci9jZGsvYTExeSc7XG5pbXBvcnQgeyBJbmplY3RhYmxlLCBPbkRlc3Ryb3ksIFF1ZXJ5TGlzdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgT2JzZXJ2YWJsZSwgU3ViamVjdCB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgbWFwLCB0YWtlVW50aWwgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5pbXBvcnQgeyB0aWNrIH0gZnJvbSAnLi4vLi4vLi4vY29tbW9uL29wZXJhdG9ycy9pbmRleCc7XG5pbXBvcnQgeyBQYWdlSGVhZGVyTmF2aWdhdGlvbkl0ZW1Db21wb25lbnQgfSBmcm9tICcuL25hdmlnYXRpb24taXRlbS9uYXZpZ2F0aW9uLWl0ZW0uY29tcG9uZW50JztcblxuQEluamVjdGFibGUoKVxuZXhwb3J0IGNsYXNzIFBhZ2VIZWFkZXJOYXZpZ2F0aW9uU2VydmljZSBpbXBsZW1lbnRzIE9uRGVzdHJveSB7XG5cbiAgICAvKiogU3RvcmUgYW4gaW5zdGFuY2Ugb2YgdGhlIGZvY3VzIGtleSBtYW5hZ2VyICovXG4gICAgcHJpdmF0ZSBfZm9jdXNNYW5hZ2VyOiBGb2N1c0tleU1hbmFnZXI8UGFnZUhlYWRlck5hdmlnYXRpb25JdGVtQ29tcG9uZW50PjtcblxuICAgIC8qKiBTdG9yZSB0aGUgcXVlcnkgbGlzdCAqL1xuICAgIHByaXZhdGUgX2l0ZW1zOiBRdWVyeUxpc3Q8UGFnZUhlYWRlck5hdmlnYXRpb25JdGVtQ29tcG9uZW50PjtcblxuICAgIC8qKlxuICAgICAqIEVtaXQgd2hlbiBmb2N1cyBjaGFuZ2VzLiBXZSBjYW4ndCBkaXJlY3RseSB1c2UgdGhlIEZvY3VzS2V5TWFuYWdlclxuICAgICAqIGBjaGFuZ2VgIG9ic2VydmFibGUgYXMgaXQgY2Fubm90IGJlIGluc3RhbnRpYXRlIHVudGlsIGFmdGVyIHRoZSB2aWV3XG4gICAgICogaGFzIGJlZW4gaW5zdGFudGlhdGVkLlxuICAgICAqL1xuICAgIHByaXZhdGUgcmVhZG9ubHkgX29uQ2hhbmdlID0gbmV3IFN1YmplY3Q8dm9pZD4oKTtcblxuICAgIC8qKiBVbnN1YnNjcmliZSBvbiBkZXN0cm95ICovXG4gICAgcHJpdmF0ZSByZWFkb25seSBfb25EZXN0cm95ID0gbmV3IFN1YmplY3Q8dm9pZD4oKTtcblxuICAgIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgICAgICB0aGlzLl9vbkRlc3Ryb3kubmV4dCgpO1xuICAgICAgICB0aGlzLl9vbkRlc3Ryb3kuY29tcGxldGUoKTtcbiAgICB9XG5cbiAgICAvKiogTWFrZSBtZW51IGl0ZW1zIG5hdmlnYWJsZSB1c2luZyBhcnJvdyBrZXlzICovXG4gICAgaW5pdGlhbGl6ZShpdGVtczogUXVlcnlMaXN0PFBhZ2VIZWFkZXJOYXZpZ2F0aW9uSXRlbUNvbXBvbmVudD4pOiB2b2lkIHtcblxuICAgICAgICAvLyBzdG9yZSB0aGUgcXVlcnkgbGlzdCBmb3IgZnV0dXJlIGxvb2t1cHNcbiAgICAgICAgdGhpcy5faXRlbXMgPSBpdGVtcztcblxuICAgICAgICAvLyBjcmVhdGUgbmV3IGZvY3VzIGtleSBtYW5hZ2VyIHdpdGggaG9yaXpvbnRhbCBvcmllbnRhdGlvblxuICAgICAgICB0aGlzLl9mb2N1c01hbmFnZXIgPSBuZXcgRm9jdXNLZXlNYW5hZ2VyPFBhZ2VIZWFkZXJOYXZpZ2F0aW9uSXRlbUNvbXBvbmVudD4oaXRlbXMpXG4gICAgICAgICAgICAud2l0aEhvcml6b250YWxPcmllbnRhdGlvbignbHRyJyk7XG5cbiAgICAgICAgLy8gbGlzdGVuIGZvciBjaGFuZ2VzIHRvIHRoZSBmb2N1c2VkIGl0ZW1cbiAgICAgICAgdGhpcy5fZm9jdXNNYW5hZ2VyLmNoYW5nZS5waXBlKHRha2VVbnRpbCh0aGlzLl9vbkRlc3Ryb3kpKS5zdWJzY3JpYmUoKCkgPT4gdGhpcy5fb25DaGFuZ2UubmV4dCgpKTtcblxuICAgICAgICAvLyBtYWtlIHRoZSBmaXJzdCBpdGVtIHRhYmJhYmxlIGluaXRpYWxseVxuICAgICAgICB0aGlzLl9mb2N1c01hbmFnZXIudXBkYXRlQWN0aXZlSXRlbSgwKTtcblxuICAgICAgICAvLyBvbiBjaGFuZ2VzIGVuc3VyZSB0aGVyZSBpcyBhbHdheXMgYW4gYWN0aXZlIGl0ZW1cbiAgICAgICAgdGhpcy5faXRlbXMuY2hhbmdlcy5zdWJzY3JpYmUoKCkgPT4ge1xuICAgICAgICAgICAgaWYgKHRoaXMuX2l0ZW1zLmxlbmd0aCA+IDAgJiYgdGhpcy5faXRlbXMudG9BcnJheSgpLmluZGV4T2YodGhpcy5fZm9jdXNNYW5hZ2VyLmFjdGl2ZUl0ZW0pID09PSAtMSkge1xuICAgICAgICAgICAgICAgIHRoaXMuX2ZvY3VzTWFuYWdlci51cGRhdGVBY3RpdmVJdGVtKDApO1xuICAgICAgICAgICAgfVxuICAgICAgICB9KTtcblxuICAgICAgICAvLyBlbWl0IHRoZSBpbml0aWFsIGNoYW5nZVxuICAgICAgICB0aGlzLl9vbkNoYW5nZS5uZXh0KCk7XG4gICAgfVxuXG4gICAgLyoqIExpc3RlbiBmb3Iga2V5Ym9hcmQgZXZlbnRzICovXG4gICAgb25LZXlkb3duKGV2ZW50OiBLZXlib2FyZEV2ZW50KTogdm9pZCB7XG4gICAgICAgIHRoaXMuX2ZvY3VzTWFuYWdlci5vbktleWRvd24oZXZlbnQpO1xuICAgIH1cblxuICAgIC8qKiBHZXQgdGhlIHRhYiBpbmRleCBmb3IgdGhpcyBpdGVtIGFzIGFuIG9ic2VydmFibGUgKi9cbiAgICBnZXRUYWJJbmRleChpdGVtOiBQYWdlSGVhZGVyTmF2aWdhdGlvbkl0ZW1Db21wb25lbnQpOiBPYnNlcnZhYmxlPG51bWJlcj4ge1xuICAgICAgICByZXR1cm4gdGhpcy5fb25DaGFuZ2UucGlwZShtYXAoKCkgPT4gdGhpcy5nZXRJdGVtVGFiSW5kZXgoaXRlbSkpLCB0aWNrKCksIHRha2VVbnRpbCh0aGlzLl9vbkRlc3Ryb3kpKTtcbiAgICB9XG5cbiAgICAvKiogRGV0ZXJtaW5lIHRoZSB0YWIgaW5kZXggb2YgYSBnaXZlbiBpdGVtICovXG4gICAgcHJpdmF0ZSBnZXRJdGVtVGFiSW5kZXgoaXRlbTogUGFnZUhlYWRlck5hdmlnYXRpb25JdGVtQ29tcG9uZW50KTogbnVtYmVyIHtcblxuICAgICAgICAvLyB1bnRpbCB0aGUgZm9jdXMga2V5IG1hbmFnZXIgaXMgc2V0IHVwIG1ha2UgZXZlcnl0aGluZyB0YWJiYWJsZVxuICAgICAgICBpZiAoIXRoaXMuX2l0ZW1zKSB7XG4gICAgICAgICAgICByZXR1cm4gMDtcbiAgICAgICAgfVxuXG4gICAgICAgIC8vIGdldCB0aGUgaW5kZXggd2l0aGluIHRoZSBxdWVyeSBsaXN0XG4gICAgICAgIGNvbnN0IGluZGV4ID0gdGhpcy5faXRlbXMudG9BcnJheSgpLmluZGV4T2YoaXRlbSk7XG5cbiAgICAgICAgLy8gaWYgaXQgaXMgdGhlIGN1cnJlbnQgYWN0aXZlIGVsZW1lbnQgdGhlbiBpdCBpcyB0YWJiYWJsZVxuICAgICAgICByZXR1cm4gaW5kZXggPT09IHRoaXMuX2ZvY3VzTWFuYWdlci5hY3RpdmVJdGVtSW5kZXggPyAwIDogLTE7XG4gICAgfVxuXG59Il19