@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
65 lines • 9.54 kB
JavaScript
import { Directive, ElementRef, HostListener, inject, Input, Renderer2 } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { FocusIndicatorService } from '../../../directives/accessibility/index';
import { MenuItemType } from '../menu-item/menu-item-type.enum';
import { MenuComponent } from '../menu/menu.component';
import * as i0 from "@angular/core";
export class MenuTabbableItemDirective {
constructor() {
this._menu = inject(MenuComponent);
this._elementRef = inject(ElementRef);
this._focusIndicatorService = inject(FocusIndicatorService);
this._renderer = inject(Renderer2);
/** Define if this item is disabled or not */
this.disabled = false;
/** Indicate the type of the menu item */
this.type = MenuItemType.Default;
/** Automatically unsubscribe when directive is destroyed */
this._onDestroy$ = new Subject();
}
ngOnInit() {
// register this item in the MenuComponent
this._menu._addItem(this);
// we only want to show the focus indicator whenever the keyboard is used
this.focusIndicator = this._focusIndicatorService.monitor(this._elementRef.nativeElement);
// subscribe to active item changes
this._menu._activeItem$.pipe(takeUntil(this._onDestroy$))
.subscribe(item => this.setTabIndex(item === this));
}
ngOnDestroy() {
this._onDestroy$.next();
this._onDestroy$.complete();
this.focusIndicator.destroy();
}
/** Focus this item with a given origin */
focus(origin) {
this.focusIndicator.focus(origin);
}
/** This function is built into the CDK manager to allow jumping to items based on text content */
getLabel() {
return this._elementRef.nativeElement.textContent.trim();
}
/** Forward any keyboard events to the MenuComponent for accessibility */
_onKeydown(event) {
this._menu._onKeydown(event);
}
/** Update the tab index on this item */
setTabIndex(isTabbable) {
this._renderer.setAttribute(this._elementRef.nativeElement, 'tabindex', isTabbable ? '0' : '-1');
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: MenuTabbableItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.12", type: MenuTabbableItemDirective, selector: "[uxMenuTabbableItem]", inputs: { disabled: "disabled" }, host: { listeners: { "keydown": "_onKeydown($event)" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: MenuTabbableItemDirective, decorators: [{
type: Directive,
args: [{
selector: '[uxMenuTabbableItem]',
}]
}], propDecorators: { disabled: [{
type: Input
}], _onKeydown: [{
type: HostListener,
args: ['keydown', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVudS10YWJiYWJsZS1pdGVtLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL21lbnUvbWVudS10YWJiYWJsZS1pdGVtL21lbnUtdGFiYmFibGUtaXRlbS5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsT0FBTyxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsWUFBWSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQXFCLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNqSCxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQy9CLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUMzQyxPQUFPLEVBQWtCLHFCQUFxQixFQUFFLE1BQU0seUNBQXlDLENBQUM7QUFDaEcsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGtDQUFrQyxDQUFDO0FBQ2hFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQzs7QUFLdkQsTUFBTSxPQUFPLHlCQUF5QjtJQUh0QztRQUl1QixVQUFLLEdBQUcsTUFBTSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1FBRTlCLGdCQUFXLEdBQUcsTUFBTSxDQUEwQixVQUFVLENBQUMsQ0FBQztRQUUxRCwyQkFBc0IsR0FBRyxNQUFNLENBQUMscUJBQXFCLENBQUMsQ0FBQztRQUV2RCxjQUFTLEdBQUcsTUFBTSxDQUFDLFNBQVMsQ0FBQyxDQUFDO1FBRWpELDZDQUE2QztRQUNwQyxhQUFRLEdBQVksS0FBSyxDQUFDO1FBRW5DLHlDQUF5QztRQUNoQyxTQUFJLEdBQWlCLFlBQVksQ0FBQyxPQUFPLENBQUM7UUFLbkQsNERBQTREO1FBQ2xELGdCQUFXLEdBQUcsSUFBSSxPQUFPLEVBQVEsQ0FBQztLQXlDL0M7SUF2Q0csUUFBUTtRQUNKLDBDQUEwQztRQUMxQyxJQUFJLENBQUMsS0FBSyxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUUxQix5RUFBeUU7UUFDekUsSUFBSSxDQUFDLGNBQWMsR0FBRyxJQUFJLENBQUMsc0JBQXNCLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxDQUFDLENBQUM7UUFFMUYsbUNBQW1DO1FBQ25DLElBQUksQ0FBQyxLQUFLLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO2FBQ3BELFNBQVMsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxLQUFLLElBQUksQ0FBQyxDQUFDLENBQUM7SUFDNUQsQ0FBQztJQUVELFdBQVc7UUFDUCxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ3hCLElBQUksQ0FBQyxXQUFXLENBQUMsUUFBUSxFQUFFLENBQUM7UUFDNUIsSUFBSSxDQUFDLGNBQWMsQ0FBQyxPQUFPLEVBQUUsQ0FBQztJQUNsQyxDQUFDO0lBRUQsMENBQTBDO0lBQzFDLEtBQUssQ0FBQyxNQUFtQjtRQUNyQixJQUFJLENBQUMsY0FBYyxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUN0QyxDQUFDO0lBRUQsa0dBQWtHO0lBQ2xHLFFBQVE7UUFDSixPQUFPLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxDQUFDLFdBQVcsQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUM3RCxDQUFDO0lBRUQseUVBQXlFO0lBRXpFLFVBQVUsQ0FBQyxLQUFvQjtRQUMzQixJQUFJLENBQUMsS0FBSyxDQUFDLFVBQVUsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNqQyxDQUFDO0lBRUQsd0NBQXdDO0lBQzlCLFdBQVcsQ0FBQyxVQUFtQjtRQUNyQyxJQUFJLENBQUMsU0FBUyxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsRUFBRSxVQUFVLEVBQUUsVUFBVSxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ3JHLENBQUM7K0dBMURRLHlCQUF5QjttR0FBekIseUJBQXlCOzs0RkFBekIseUJBQXlCO2tCQUhyQyxTQUFTO21CQUFDO29CQUNQLFFBQVEsRUFBRSxzQkFBc0I7aUJBQ25DOzhCQVdZLFFBQVE7c0JBQWhCLEtBQUs7Z0JBeUNOLFVBQVU7c0JBRFQsWUFBWTt1QkFBQyxTQUFTLEVBQUUsQ0FBQyxRQUFRLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBGb2N1c2FibGVPcHRpb24sIEZvY3VzT3JpZ2luIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL2ExMXknO1xuaW1wb3J0IHsgRGlyZWN0aXZlLCBFbGVtZW50UmVmLCBIb3N0TGlzdGVuZXIsIGluamVjdCwgSW5wdXQsIE9uRGVzdHJveSwgT25Jbml0LCBSZW5kZXJlcjIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFN1YmplY3QgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IHRha2VVbnRpbCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcbmltcG9ydCB7IEZvY3VzSW5kaWNhdG9yLCBGb2N1c0luZGljYXRvclNlcnZpY2UgfSBmcm9tICcuLi8uLi8uLi9kaXJlY3RpdmVzL2FjY2Vzc2liaWxpdHkvaW5kZXgnO1xuaW1wb3J0IHsgTWVudUl0ZW1UeXBlIH0gZnJvbSAnLi4vbWVudS1pdGVtL21lbnUtaXRlbS10eXBlLmVudW0nO1xuaW1wb3J0IHsgTWVudUNvbXBvbmVudCB9IGZyb20gJy4uL21lbnUvbWVudS5jb21wb25lbnQnO1xuXG5ARGlyZWN0aXZlKHtcbiAgICBzZWxlY3RvcjogJ1t1eE1lbnVUYWJiYWJsZUl0ZW1dJyxcbn0pXG5leHBvcnQgY2xhc3MgTWVudVRhYmJhYmxlSXRlbURpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95LCBGb2N1c2FibGVPcHRpb24ge1xuICAgIHByb3RlY3RlZCByZWFkb25seSBfbWVudSA9IGluamVjdChNZW51Q29tcG9uZW50KTtcblxuICAgIHByb3RlY3RlZCByZWFkb25seSBfZWxlbWVudFJlZiA9IGluamVjdDxFbGVtZW50UmVmPEhUTUxFbGVtZW50Pj4oRWxlbWVudFJlZik7XG5cbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgX2ZvY3VzSW5kaWNhdG9yU2VydmljZSA9IGluamVjdChGb2N1c0luZGljYXRvclNlcnZpY2UpO1xuXG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IF9yZW5kZXJlciA9IGluamVjdChSZW5kZXJlcjIpO1xuXG4gICAgLyoqIERlZmluZSBpZiB0aGlzIGl0ZW0gaXMgZGlzYWJsZWQgb3Igbm90ICovXG4gICAgQElucHV0KCkgZGlzYWJsZWQ6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAgIC8qKiBJbmRpY2F0ZSB0aGUgdHlwZSBvZiB0aGUgbWVudSBpdGVtICovXG4gICAgcmVhZG9ubHkgdHlwZTogTWVudUl0ZW1UeXBlID0gTWVudUl0ZW1UeXBlLkRlZmF1bHQ7XG5cbiAgICAvKiogU3RvcmUgdGhlIGZvY3VzIGluZGljYXRvciBpbnN0YW5jZSAqL1xuICAgIHByb3RlY3RlZCBmb2N1c0luZGljYXRvcjogRm9jdXNJbmRpY2F0b3I7XG5cbiAgICAvKiogQXV0b21hdGljYWxseSB1bnN1YnNjcmliZSB3aGVuIGRpcmVjdGl2ZSBpcyBkZXN0cm95ZWQgKi9cbiAgICBwcm90ZWN0ZWQgX29uRGVzdHJveSQgPSBuZXcgU3ViamVjdDx2b2lkPigpO1xuXG4gICAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgICAgIC8vIHJlZ2lzdGVyIHRoaXMgaXRlbSBpbiB0aGUgTWVudUNvbXBvbmVudFxuICAgICAgICB0aGlzLl9tZW51Ll9hZGRJdGVtKHRoaXMpO1xuXG4gICAgICAgIC8vIHdlIG9ubHkgd2FudCB0byBzaG93IHRoZSBmb2N1cyBpbmRpY2F0b3Igd2hlbmV2ZXIgdGhlIGtleWJvYXJkIGlzIHVzZWRcbiAgICAgICAgdGhpcy5mb2N1c0luZGljYXRvciA9IHRoaXMuX2ZvY3VzSW5kaWNhdG9yU2VydmljZS5tb25pdG9yKHRoaXMuX2VsZW1lbnRSZWYubmF0aXZlRWxlbWVudCk7XG5cbiAgICAgICAgLy8gc3Vic2NyaWJlIHRvIGFjdGl2ZSBpdGVtIGNoYW5nZXNcbiAgICAgICAgdGhpcy5fbWVudS5fYWN0aXZlSXRlbSQucGlwZSh0YWtlVW50aWwodGhpcy5fb25EZXN0cm95JCkpXG4gICAgICAgICAgICAuc3Vic2NyaWJlKGl0ZW0gPT4gdGhpcy5zZXRUYWJJbmRleChpdGVtID09PSB0aGlzKSk7XG4gICAgfVxuXG4gICAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgICAgIHRoaXMuX29uRGVzdHJveSQubmV4dCgpO1xuICAgICAgICB0aGlzLl9vbkRlc3Ryb3kkLmNvbXBsZXRlKCk7XG4gICAgICAgIHRoaXMuZm9jdXNJbmRpY2F0b3IuZGVzdHJveSgpO1xuICAgIH1cblxuICAgIC8qKiBGb2N1cyB0aGlzIGl0ZW0gd2l0aCBhIGdpdmVuIG9yaWdpbiAqL1xuICAgIGZvY3VzKG9yaWdpbjogRm9jdXNPcmlnaW4pOiB2b2lkIHtcbiAgICAgICAgdGhpcy5mb2N1c0luZGljYXRvci5mb2N1cyhvcmlnaW4pO1xuICAgIH1cblxuICAgIC8qKiBUaGlzIGZ1bmN0aW9uIGlzIGJ1aWx0IGludG8gdGhlIENESyBtYW5hZ2VyIHRvIGFsbG93IGp1bXBpbmcgdG8gaXRlbXMgYmFzZWQgb24gdGV4dCBjb250ZW50ICovXG4gICAgZ2V0TGFiZWwoKTogc3RyaW5nIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuX2VsZW1lbnRSZWYubmF0aXZlRWxlbWVudC50ZXh0Q29udGVudC50cmltKCk7XG4gICAgfVxuXG4gICAgLyoqIEZvcndhcmQgYW55IGtleWJvYXJkIGV2ZW50cyB0byB0aGUgTWVudUNvbXBvbmVudCBmb3IgYWNjZXNzaWJpbGl0eSAqL1xuICAgIEBIb3N0TGlzdGVuZXIoJ2tleWRvd24nLCBbJyRldmVudCddKVxuICAgIF9vbktleWRvd24oZXZlbnQ6IEtleWJvYXJkRXZlbnQpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5fbWVudS5fb25LZXlkb3duKGV2ZW50KTtcbiAgICB9XG5cbiAgICAvKiogVXBkYXRlIHRoZSB0YWIgaW5kZXggb24gdGhpcyBpdGVtICovXG4gICAgcHJvdGVjdGVkIHNldFRhYkluZGV4KGlzVGFiYmFibGU6IGJvb2xlYW4pOiB2b2lkIHtcbiAgICAgICAgdGhpcy5fcmVuZGVyZXIuc2V0QXR0cmlidXRlKHRoaXMuX2VsZW1lbnRSZWYubmF0aXZlRWxlbWVudCwgJ3RhYmluZGV4JywgaXNUYWJiYWJsZSA/ICcwJyA6ICctMScpO1xuICAgIH1cblxufVxuIl19