@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
43 lines • 7.09 kB
JavaScript
import { Directive, ElementRef, EventEmitter, inject, Output } from '@angular/core';
import { Subject } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';
import { FocusIndicatorService } from '../accessibility/index';
import { MenuNavigationService } from './menu-navigation.service';
import * as i0 from "@angular/core";
export class MenuNavigationItemDirective {
constructor() {
this.focusIndicatorService = inject(FocusIndicatorService);
this._elementRef = inject(ElementRef);
this._menuNavigationService = inject(MenuNavigationService);
/** Emit when this menu is activated */
this.activated = new EventEmitter();
/** Unsubscribe from all observables on destroy */
this._onDestroy = new Subject();
// register this item with the menu - this allows for nested menus as we each uxMenuNavigation will create its own service
this._menuNavigationService.register(this);
// create the focus indicator
this._focusIndicator = this.focusIndicatorService.monitor(this._elementRef.nativeElement, { programmaticFocusIndicator: true, checkChildren: false });
/** Subscribe to the current active index */
this._menuNavigationService.active$.pipe(takeUntil(this._onDestroy), filter(item => item === this)).subscribe(() => this.setActive());
}
ngOnDestroy() {
this._menuNavigationService.unregister(this);
this._onDestroy.unsubscribe();
this._focusIndicator.destroy();
}
setActive() {
this._elementRef.nativeElement.focus();
this.activated.emit();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: MenuNavigationItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.12", type: MenuNavigationItemDirective, selector: "[uxMenuNavigationItem]", outputs: { activated: "activated" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: MenuNavigationItemDirective, decorators: [{
type: Directive,
args: [{
selector: '[uxMenuNavigationItem]'
}]
}], ctorParameters: () => [], propDecorators: { activated: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVudS1uYXZpZ2F0aW9uLWl0ZW0uZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2RpcmVjdGl2ZXMvbWVudS1uYXZpZ2F0aW9uL21lbnUtbmF2aWdhdGlvbi1pdGVtLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFVBQVUsRUFBRSxZQUFZLEVBQUUsTUFBTSxFQUFhLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMvRixPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQy9CLE9BQU8sRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDbkQsT0FBTyxFQUFrQixxQkFBcUIsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQy9FLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLDJCQUEyQixDQUFDOztBQUtsRSxNQUFNLE9BQU8sMkJBQTJCO0lBZ0JwQztRQWZTLDBCQUFxQixHQUFHLE1BQU0sQ0FBQyxxQkFBcUIsQ0FBQyxDQUFDO1FBRTlDLGdCQUFXLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBRWpDLDJCQUFzQixHQUFHLE1BQU0sQ0FBQyxxQkFBcUIsQ0FBQyxDQUFDO1FBRXhFLHVDQUF1QztRQUM3QixjQUFTLEdBQUcsSUFBSSxZQUFZLEVBQVEsQ0FBQztRQUUvQyxrREFBa0Q7UUFDakMsZUFBVSxHQUFHLElBQUksT0FBTyxFQUFRLENBQUM7UUFPOUMsMEhBQTBIO1FBQzFILElBQUksQ0FBQyxzQkFBc0IsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLENBQUM7UUFFM0MsNkJBQTZCO1FBQzdCLElBQUksQ0FBQyxlQUFlLEdBQUcsSUFBSSxDQUFDLHFCQUFxQixDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsRUFBRSxFQUFFLDBCQUEwQixFQUFFLElBQUksRUFBRSxhQUFhLEVBQUUsS0FBSyxFQUFFLENBQUMsQ0FBQztRQUV0Siw0Q0FBNEM7UUFDNUMsSUFBSSxDQUFDLHNCQUFzQixDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsRUFBRSxNQUFNLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxJQUFJLEtBQUssSUFBSSxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDLENBQUM7SUFDMUksQ0FBQztJQUVELFdBQVc7UUFDUCxJQUFJLENBQUMsc0JBQXNCLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQzdDLElBQUksQ0FBQyxVQUFVLENBQUMsV0FBVyxFQUFFLENBQUM7UUFDOUIsSUFBSSxDQUFDLGVBQWUsQ0FBQyxPQUFPLEVBQUUsQ0FBQztJQUNuQyxDQUFDO0lBRUQsU0FBUztRQUNMLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxDQUFDLEtBQUssRUFBRSxDQUFDO1FBQ3ZDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDMUIsQ0FBQzsrR0FyQ1EsMkJBQTJCO21HQUEzQiwyQkFBMkI7OzRGQUEzQiwyQkFBMkI7a0JBSHZDLFNBQVM7bUJBQUM7b0JBQ1AsUUFBUSxFQUFFLHdCQUF3QjtpQkFDckM7d0RBU2EsU0FBUztzQkFBbEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERpcmVjdGl2ZSwgRWxlbWVudFJlZiwgRXZlbnRFbWl0dGVyLCBpbmplY3QsIE9uRGVzdHJveSwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTdWJqZWN0IH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBmaWx0ZXIsIHRha2VVbnRpbCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcbmltcG9ydCB7IEZvY3VzSW5kaWNhdG9yLCBGb2N1c0luZGljYXRvclNlcnZpY2UgfSBmcm9tICcuLi9hY2Nlc3NpYmlsaXR5L2luZGV4JztcbmltcG9ydCB7IE1lbnVOYXZpZ2F0aW9uU2VydmljZSB9IGZyb20gJy4vbWVudS1uYXZpZ2F0aW9uLnNlcnZpY2UnO1xuXG5ARGlyZWN0aXZlKHtcbiAgICBzZWxlY3RvcjogJ1t1eE1lbnVOYXZpZ2F0aW9uSXRlbV0nXG59KVxuZXhwb3J0IGNsYXNzIE1lbnVOYXZpZ2F0aW9uSXRlbURpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uRGVzdHJveSB7XG4gICAgcmVhZG9ubHkgZm9jdXNJbmRpY2F0b3JTZXJ2aWNlID0gaW5qZWN0KEZvY3VzSW5kaWNhdG9yU2VydmljZSk7XG5cbiAgICBwcml2YXRlIHJlYWRvbmx5IF9lbGVtZW50UmVmID0gaW5qZWN0KEVsZW1lbnRSZWYpO1xuXG4gICAgcHJpdmF0ZSByZWFkb25seSBfbWVudU5hdmlnYXRpb25TZXJ2aWNlID0gaW5qZWN0KE1lbnVOYXZpZ2F0aW9uU2VydmljZSk7XG5cbiAgICAvKiogRW1pdCB3aGVuIHRoaXMgbWVudSBpcyBhY3RpdmF0ZWQgKi9cbiAgICBAT3V0cHV0KCkgYWN0aXZhdGVkID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuXG4gICAgLyoqIFVuc3Vic2NyaWJlIGZyb20gYWxsIG9ic2VydmFibGVzIG9uIGRlc3Ryb3kgKi9cbiAgICBwcml2YXRlIHJlYWRvbmx5IF9vbkRlc3Ryb3kgPSBuZXcgU3ViamVjdDx2b2lkPigpO1xuXG4gICAgLyoqIEtlZXAgYSByZWZlcmVuY2UgdG8gdGhlIGZvY3VzIGluZGljYXRvciAqL1xuICAgIHByaXZhdGUgcmVhZG9ubHkgX2ZvY3VzSW5kaWNhdG9yOiBGb2N1c0luZGljYXRvcjtcblxuICAgIGNvbnN0cnVjdG9yKCkge1xuXG4gICAgICAgIC8vIHJlZ2lzdGVyIHRoaXMgaXRlbSB3aXRoIHRoZSBtZW51IC0gdGhpcyBhbGxvd3MgZm9yIG5lc3RlZCBtZW51cyBhcyB3ZSBlYWNoIHV4TWVudU5hdmlnYXRpb24gd2lsbCBjcmVhdGUgaXRzIG93biBzZXJ2aWNlXG4gICAgICAgIHRoaXMuX21lbnVOYXZpZ2F0aW9uU2VydmljZS5yZWdpc3Rlcih0aGlzKTtcblxuICAgICAgICAvLyBjcmVhdGUgdGhlIGZvY3VzIGluZGljYXRvclxuICAgICAgICB0aGlzLl9mb2N1c0luZGljYXRvciA9IHRoaXMuZm9jdXNJbmRpY2F0b3JTZXJ2aWNlLm1vbml0b3IodGhpcy5fZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LCB7IHByb2dyYW1tYXRpY0ZvY3VzSW5kaWNhdG9yOiB0cnVlLCBjaGVja0NoaWxkcmVuOiBmYWxzZSB9KTtcblxuICAgICAgICAvKiogU3Vic2NyaWJlIHRvIHRoZSBjdXJyZW50IGFjdGl2ZSBpbmRleCAqL1xuICAgICAgICB0aGlzLl9tZW51TmF2aWdhdGlvblNlcnZpY2UuYWN0aXZlJC5waXBlKHRha2VVbnRpbCh0aGlzLl9vbkRlc3Ryb3kpLCBmaWx0ZXIoaXRlbSA9PiBpdGVtID09PSB0aGlzKSkuc3Vic2NyaWJlKCgpID0+IHRoaXMuc2V0QWN0aXZlKCkpO1xuICAgIH1cblxuICAgIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgICAgICB0aGlzLl9tZW51TmF2aWdhdGlvblNlcnZpY2UudW5yZWdpc3Rlcih0aGlzKTtcbiAgICAgICAgdGhpcy5fb25EZXN0cm95LnVuc3Vic2NyaWJlKCk7XG4gICAgICAgIHRoaXMuX2ZvY3VzSW5kaWNhdG9yLmRlc3Ryb3koKTtcbiAgICB9XG5cbiAgICBzZXRBY3RpdmUoKTogdm9pZCB7XG4gICAgICAgIHRoaXMuX2VsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5mb2N1cygpO1xuICAgICAgICB0aGlzLmFjdGl2YXRlZC5lbWl0KCk7XG4gICAgfVxufSJdfQ==