@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
78 lines • 9.94 kB
JavaScript
import { DOWN_ARROW, ENTER, LEFT_ARROW, RIGHT_ARROW, SPACE, UP_ARROW } from '@angular/cdk/keycodes';
import { Directive, ElementRef, EventEmitter, HostListener, inject, Input, Output } from '@angular/core';
import { FocusIndicatorService } from '../accessibility/index';
import * as i0 from "@angular/core";
export class MenuNavigationToggleDirective {
/** Define if the menu is open */
get menuOpen() {
return this._menuOpen;
}
set menuOpen(value) {
this._menuOpen = value;
this.menuOpenChange.emit(value);
}
constructor() {
this.elementRef = inject(ElementRef);
this.focusIndicatorService = inject(FocusIndicatorService);
/** Define the position the menu appears relative to the button */
this.menuPosition = 'bottom';
/** Emit when the menu open state changes */
this.menuOpenChange = new EventEmitter();
/** Emits whenever a key that opens the menu is pressed */
this.keyEnter = new EventEmitter();
this._focusIndicator = this.focusIndicatorService.monitor(this.elementRef.nativeElement);
}
ngOnDestroy() {
this._focusIndicator.destroy();
}
focus(origin) {
this._focusIndicator.focus(origin);
}
keydownHandler(event) {
if (this.isKeyMatch(event.which)) {
// Open the menu
this.menuOpen = true;
// Allow the menu to init, then send the event to give it focus
setTimeout(() => this.keyEnter.emit());
event.preventDefault();
event.stopPropagation();
}
}
isKeyMatch(key) {
switch (key) {
case ENTER:
case SPACE:
return true;
case UP_ARROW:
return this.menuPosition === 'top';
case DOWN_ARROW:
return this.menuPosition === 'bottom';
case LEFT_ARROW:
return this.menuPosition === 'left';
case RIGHT_ARROW:
return this.menuPosition === 'right';
}
return false;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: MenuNavigationToggleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.12", type: MenuNavigationToggleDirective, selector: "[uxMenuNavigationToggle]", inputs: { menuOpen: "menuOpen", menuPosition: "menuPosition" }, outputs: { menuOpenChange: "menuOpenChange", keyEnter: "keyEnter" }, host: { listeners: { "keydown": "keydownHandler($event)" } }, exportAs: ["uxMenuNavigationToggle"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: MenuNavigationToggleDirective, decorators: [{
type: Directive,
args: [{
selector: '[uxMenuNavigationToggle]',
exportAs: 'uxMenuNavigationToggle'
}]
}], ctorParameters: () => [], propDecorators: { menuOpen: [{
type: Input
}], menuPosition: [{
type: Input
}], menuOpenChange: [{
type: Output
}], keyEnter: [{
type: Output
}], keydownHandler: [{
type: HostListener,
args: ['keydown', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVudS1uYXZpZ2F0aW9uLXRvZ2dsZS5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvZGlyZWN0aXZlcy9tZW51LW5hdmlnYXRpb24vbWVudS1uYXZpZ2F0aW9uLXRvZ2dsZS5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsT0FBTyxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUUsVUFBVSxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQUUsUUFBUSxFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFDcEcsT0FBTyxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsWUFBWSxFQUFFLFlBQVksRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFhLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNwSCxPQUFPLEVBQWtCLHFCQUFxQixFQUFFLE1BQU0sd0JBQXdCLENBQUM7O0FBTS9FLE1BQU0sT0FBTyw2QkFBNkI7SUFLdEMsaUNBQWlDO0lBQ2pDLElBQ0ksUUFBUTtRQUNSLE9BQU8sSUFBSSxDQUFDLFNBQVMsQ0FBQztJQUMxQixDQUFDO0lBRUQsSUFBSSxRQUFRLENBQUMsS0FBYztRQUN2QixJQUFJLENBQUMsU0FBUyxHQUFHLEtBQUssQ0FBQztRQUN2QixJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNwQyxDQUFDO0lBaUJEO1FBOUJTLGVBQVUsR0FBRyxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUM7UUFFaEMsMEJBQXFCLEdBQUcsTUFBTSxDQUFDLHFCQUFxQixDQUFDLENBQUM7UUFhL0Qsa0VBQWtFO1FBQ3pELGlCQUFZLEdBQXdDLFFBQVEsQ0FBQztRQUV0RSw0Q0FBNEM7UUFDbEMsbUJBQWMsR0FBRyxJQUFJLFlBQVksRUFBVyxDQUFDO1FBRXZELDBEQUEwRDtRQUNoRCxhQUFRLEdBQUcsSUFBSSxZQUFZLEVBQVEsQ0FBQztRQVMxQyxJQUFJLENBQUMsZUFBZSxHQUFHLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsQ0FBQztJQUM3RixDQUFDO0lBRUQsV0FBVztRQUNQLElBQUksQ0FBQyxlQUFlLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDbkMsQ0FBQztJQUVELEtBQUssQ0FBQyxNQUFvQjtRQUN0QixJQUFJLENBQUMsZUFBZSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUN2QyxDQUFDO0lBR0QsY0FBYyxDQUFDLEtBQW9CO1FBRS9CLElBQUksSUFBSSxDQUFDLFVBQVUsQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLEVBQUUsQ0FBQztZQUUvQixnQkFBZ0I7WUFDaEIsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUM7WUFFckIsK0RBQStEO1lBQy9ELFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksRUFBRSxDQUFDLENBQUM7WUFFdkMsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1lBQ3ZCLEtBQUssQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUM1QixDQUFDO0lBQ0wsQ0FBQztJQUVPLFVBQVUsQ0FBQyxHQUFXO1FBQzFCLFFBQVEsR0FBRyxFQUFFLENBQUM7WUFDVixLQUFLLEtBQUssQ0FBQztZQUNYLEtBQUssS0FBSztnQkFDTixPQUFPLElBQUksQ0FBQztZQUVoQixLQUFLLFFBQVE7Z0JBQ1QsT0FBTyxJQUFJLENBQUMsWUFBWSxLQUFLLEtBQUssQ0FBQztZQUV2QyxLQUFLLFVBQVU7Z0JBQ1gsT0FBTyxJQUFJLENBQUMsWUFBWSxLQUFLLFFBQVEsQ0FBQztZQUUxQyxLQUFLLFVBQVU7Z0JBQ1gsT0FBTyxJQUFJLENBQUMsWUFBWSxLQUFLLE1BQU0sQ0FBQztZQUV4QyxLQUFLLFdBQVc7Z0JBQ1osT0FBTyxJQUFJLENBQUMsWUFBWSxLQUFLLE9BQU8sQ0FBQztRQUM3QyxDQUFDO1FBRUQsT0FBTyxLQUFLLENBQUM7SUFDakIsQ0FBQzsrR0EvRVEsNkJBQTZCO21HQUE3Qiw2QkFBNkI7OzRGQUE3Qiw2QkFBNkI7a0JBSnpDLFNBQVM7bUJBQUM7b0JBQ1AsUUFBUSxFQUFFLDBCQUEwQjtvQkFDcEMsUUFBUSxFQUFFLHdCQUF3QjtpQkFDckM7d0RBUU8sUUFBUTtzQkFEWCxLQUFLO2dCQVdHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBR0ksY0FBYztzQkFBdkIsTUFBTTtnQkFHRyxRQUFRO3NCQUFqQixNQUFNO2dCQXFCUCxjQUFjO3NCQURiLFlBQVk7dUJBQUMsU0FBUyxFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRm9jdXNPcmlnaW4gfSBmcm9tICdAYW5ndWxhci9jZGsvYTExeSc7XG5pbXBvcnQgeyBET1dOX0FSUk9XLCBFTlRFUiwgTEVGVF9BUlJPVywgUklHSFRfQVJST1csIFNQQUNFLCBVUF9BUlJPVyB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9rZXljb2Rlcyc7XG5pbXBvcnQgeyBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciwgSG9zdExpc3RlbmVyLCBpbmplY3QsIElucHV0LCBPbkRlc3Ryb3ksIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRm9jdXNJbmRpY2F0b3IsIEZvY3VzSW5kaWNhdG9yU2VydmljZSB9IGZyb20gJy4uL2FjY2Vzc2liaWxpdHkvaW5kZXgnO1xuXG5ARGlyZWN0aXZlKHtcbiAgICBzZWxlY3RvcjogJ1t1eE1lbnVOYXZpZ2F0aW9uVG9nZ2xlXScsXG4gICAgZXhwb3J0QXM6ICd1eE1lbnVOYXZpZ2F0aW9uVG9nZ2xlJ1xufSlcbmV4cG9ydCBjbGFzcyBNZW51TmF2aWdhdGlvblRvZ2dsZURpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uRGVzdHJveSB7XG4gICAgcmVhZG9ubHkgZWxlbWVudFJlZiA9IGluamVjdChFbGVtZW50UmVmKTtcblxuICAgIHJlYWRvbmx5IGZvY3VzSW5kaWNhdG9yU2VydmljZSA9IGluamVjdChGb2N1c0luZGljYXRvclNlcnZpY2UpO1xuXG4gICAgLyoqIERlZmluZSBpZiB0aGUgbWVudSBpcyBvcGVuICovXG4gICAgQElucHV0KClcbiAgICBnZXQgbWVudU9wZW4oKTogYm9vbGVhbiB7XG4gICAgICAgIHJldHVybiB0aGlzLl9tZW51T3BlbjtcbiAgICB9XG5cbiAgICBzZXQgbWVudU9wZW4odmFsdWU6IGJvb2xlYW4pIHtcbiAgICAgICAgdGhpcy5fbWVudU9wZW4gPSB2YWx1ZTtcbiAgICAgICAgdGhpcy5tZW51T3BlbkNoYW5nZS5lbWl0KHZhbHVlKTtcbiAgICB9XG5cbiAgICAvKiogRGVmaW5lIHRoZSBwb3NpdGlvbiB0aGUgbWVudSBhcHBlYXJzIHJlbGF0aXZlIHRvIHRoZSBidXR0b24gKi9cbiAgICBASW5wdXQoKSBtZW51UG9zaXRpb246ICd0b3AnIHwgJ3JpZ2h0JyB8ICdib3R0b20nIHwgJ2xlZnQnID0gJ2JvdHRvbSc7XG5cbiAgICAvKiogRW1pdCB3aGVuIHRoZSBtZW51IG9wZW4gc3RhdGUgY2hhbmdlcyAqL1xuICAgIEBPdXRwdXQoKSBtZW51T3BlbkNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcblxuICAgIC8qKiBFbWl0cyB3aGVuZXZlciBhIGtleSB0aGF0IG9wZW5zIHRoZSBtZW51IGlzIHByZXNzZWQgKi9cbiAgICBAT3V0cHV0KCkga2V5RW50ZXIgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG5cbiAgICAvKiogU3RvcmUgdGhlIGN1cnJlbnQgbWVudSBvcGVuIHN0YXRlICovXG4gICAgcHJpdmF0ZSBfbWVudU9wZW46IGJvb2xlYW47XG5cbiAgICAvKiogU3RvcmUgYSByZWZlcmVuY2UgdG8gdGhlIGZvY3VzIGluZGljYXRvciAqL1xuICAgIHByaXZhdGUgcmVhZG9ubHkgX2ZvY3VzSW5kaWNhdG9yOiBGb2N1c0luZGljYXRvcjtcblxuICAgIGNvbnN0cnVjdG9yKCkge1xuICAgICAgICB0aGlzLl9mb2N1c0luZGljYXRvciA9IHRoaXMuZm9jdXNJbmRpY2F0b3JTZXJ2aWNlLm1vbml0b3IodGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQpO1xuICAgIH1cblxuICAgIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgICAgICB0aGlzLl9mb2N1c0luZGljYXRvci5kZXN0cm95KCk7XG4gICAgfVxuXG4gICAgZm9jdXMob3JpZ2luPzogRm9jdXNPcmlnaW4pOiB2b2lkIHtcbiAgICAgICAgdGhpcy5fZm9jdXNJbmRpY2F0b3IuZm9jdXMob3JpZ2luKTtcbiAgICB9XG5cbiAgICBASG9zdExpc3RlbmVyKCdrZXlkb3duJywgWyckZXZlbnQnXSlcbiAgICBrZXlkb3duSGFuZGxlcihldmVudDogS2V5Ym9hcmRFdmVudCk6IHZvaWQge1xuXG4gICAgICAgIGlmICh0aGlzLmlzS2V5TWF0Y2goZXZlbnQud2hpY2gpKSB7XG5cbiAgICAgICAgICAgIC8vIE9wZW4gdGhlIG1lbnVcbiAgICAgICAgICAgIHRoaXMubWVudU9wZW4gPSB0cnVlO1xuXG4gICAgICAgICAgICAvLyBBbGxvdyB0aGUgbWVudSB0byBpbml0LCB0aGVuIHNlbmQgdGhlIGV2ZW50IHRvIGdpdmUgaXQgZm9jdXNcbiAgICAgICAgICAgIHNldFRpbWVvdXQoKCkgPT4gdGhpcy5rZXlFbnRlci5lbWl0KCkpO1xuXG4gICAgICAgICAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgICAgICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBwcml2YXRlIGlzS2V5TWF0Y2goa2V5OiBudW1iZXIpOiBib29sZWFuIHtcbiAgICAgICAgc3dpdGNoIChrZXkpIHtcbiAgICAgICAgICAgIGNhc2UgRU5URVI6XG4gICAgICAgICAgICBjYXNlIFNQQUNFOlxuICAgICAgICAgICAgICAgIHJldHVybiB0cnVlO1xuXG4gICAgICAgICAgICBjYXNlIFVQX0FSUk9XOlxuICAgICAgICAgICAgICAgIHJldHVybiB0aGlzLm1lbnVQb3NpdGlvbiA9PT0gJ3RvcCc7XG5cbiAgICAgICAgICAgIGNhc2UgRE9XTl9BUlJPVzpcbiAgICAgICAgICAgICAgICByZXR1cm4gdGhpcy5tZW51UG9zaXRpb24gPT09ICdib3R0b20nO1xuXG4gICAgICAgICAgICBjYXNlIExFRlRfQVJST1c6XG4gICAgICAgICAgICAgICAgcmV0dXJuIHRoaXMubWVudVBvc2l0aW9uID09PSAnbGVmdCc7XG5cbiAgICAgICAgICAgIGNhc2UgUklHSFRfQVJST1c6XG4gICAgICAgICAgICAgICAgcmV0dXJuIHRoaXMubWVudVBvc2l0aW9uID09PSAncmlnaHQnO1xuICAgICAgICB9XG5cbiAgICAgICAgcmV0dXJuIGZhbHNlO1xuICAgIH1cbn0iXX0=