@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
43 lines • 6.15 kB
JavaScript
import { Directive, ElementRef, EventEmitter, inject, Output } from '@angular/core';
import * as i0 from "@angular/core";
export class FocusWithinDirective {
/**
* Note: We used to use @angular/cdk FocusMonitor here instead of manually listening
* to focus blur events, however this was problematic as any child elements using the FocusMonitor,
* eg: `uxFocusIndicator` which not get the correct `origin`, they will instead get a programmatic
* origin even if it was clicked or focused via the keyboard.
*/
constructor() {
this._elementRef = inject(ElementRef);
/** Emits when a child element gains focus */
this.uxFocusWithin = new EventEmitter();
/** Emits when a child element loses focus */
this.uxBlurWithin = new EventEmitter();
// We need to listen in capture phase since focus events don't bubble.
this._elementRef.nativeElement.addEventListener('focus', this.onFocus.bind(this), true);
this._elementRef.nativeElement.addEventListener('blur', this.onBlur.bind(this), true);
}
ngOnDestroy() {
this._elementRef.nativeElement.removeEventListener('focus', this.onFocus.bind(this), true);
this._elementRef.nativeElement.removeEventListener('blur', this.onBlur.bind(this), true);
}
onFocus() {
this.uxFocusWithin.emit();
}
onBlur() {
this.uxBlurWithin.emit();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FocusWithinDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.12", type: FocusWithinDirective, selector: "[uxFocusWithin],[uxBlurWithin]", outputs: { uxFocusWithin: "uxFocusWithin", uxBlurWithin: "uxBlurWithin" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FocusWithinDirective, decorators: [{
type: Directive,
args: [{
selector: '[uxFocusWithin],[uxBlurWithin]',
}]
}], ctorParameters: () => [], propDecorators: { uxFocusWithin: [{
type: Output
}], uxBlurWithin: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9jdXMtd2l0aGluLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9kaXJlY3RpdmVzL2FjY2Vzc2liaWxpdHkvZm9jdXMtd2l0aGluL2ZvY3VzLXdpdGhpbi5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsWUFBWSxFQUFFLE1BQU0sRUFBYSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBSy9GLE1BQU0sT0FBTyxvQkFBb0I7SUFTN0I7Ozs7O09BS0c7SUFDSDtRQWRpQixnQkFBVyxHQUFHLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQztRQUVsRCw2Q0FBNkM7UUFDbkMsa0JBQWEsR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO1FBRW5ELDZDQUE2QztRQUNuQyxpQkFBWSxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7UUFVOUMsc0VBQXNFO1FBQ3RFLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxDQUFDLGdCQUFnQixDQUFDLE9BQU8sRUFBRSxJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsRUFBRSxJQUFJLENBQUMsQ0FBQztRQUN4RixJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsQ0FBQyxnQkFBZ0IsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEVBQUUsSUFBSSxDQUFDLENBQUM7SUFDMUYsQ0FBQztJQUVELFdBQVc7UUFDUCxJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsQ0FBQyxtQkFBbUIsQ0FBQyxPQUFPLEVBQUUsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEVBQUUsSUFBSSxDQUFDLENBQUM7UUFDM0YsSUFBSSxDQUFDLFdBQVcsQ0FBQyxhQUFhLENBQUMsbUJBQW1CLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxFQUFFLElBQUksQ0FBQyxDQUFDO0lBQzdGLENBQUM7SUFFTyxPQUFPO1FBQ1gsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUM5QixDQUFDO0lBRU8sTUFBTTtRQUNWLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDN0IsQ0FBQzsrR0FqQ1Esb0JBQW9CO21HQUFwQixvQkFBb0I7OzRGQUFwQixvQkFBb0I7a0JBSGhDLFNBQVM7bUJBQUM7b0JBQ1AsUUFBUSxFQUFFLGdDQUFnQztpQkFDN0M7d0RBS2EsYUFBYTtzQkFBdEIsTUFBTTtnQkFHRyxZQUFZO3NCQUFyQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRGlyZWN0aXZlLCBFbGVtZW50UmVmLCBFdmVudEVtaXR0ZXIsIGluamVjdCwgT25EZXN0cm95LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQERpcmVjdGl2ZSh7XG4gICAgc2VsZWN0b3I6ICdbdXhGb2N1c1dpdGhpbl0sW3V4Qmx1cldpdGhpbl0nLFxufSlcbmV4cG9ydCBjbGFzcyBGb2N1c1dpdGhpbkRpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uRGVzdHJveSB7XG4gICAgcHJpdmF0ZSByZWFkb25seSBfZWxlbWVudFJlZiA9IGluamVjdChFbGVtZW50UmVmKTtcblxuICAgIC8qKiBFbWl0cyB3aGVuIGEgY2hpbGQgZWxlbWVudCBnYWlucyBmb2N1cyAqL1xuICAgIEBPdXRwdXQoKSB1eEZvY3VzV2l0aGluID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuXG4gICAgLyoqIEVtaXRzIHdoZW4gYSBjaGlsZCBlbGVtZW50IGxvc2VzIGZvY3VzICovXG4gICAgQE91dHB1dCgpIHV4Qmx1cldpdGhpbiA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcblxuICAgIC8qKlxuICAgICAqIE5vdGU6IFdlIHVzZWQgdG8gdXNlIEBhbmd1bGFyL2NkayBGb2N1c01vbml0b3IgaGVyZSBpbnN0ZWFkIG9mIG1hbnVhbGx5IGxpc3RlbmluZ1xuICAgICAqIHRvIGZvY3VzIGJsdXIgZXZlbnRzLCBob3dldmVyIHRoaXMgd2FzIHByb2JsZW1hdGljIGFzIGFueSBjaGlsZCBlbGVtZW50cyB1c2luZyB0aGUgRm9jdXNNb25pdG9yLFxuICAgICAqIGVnOiBgdXhGb2N1c0luZGljYXRvcmAgd2hpY2ggbm90IGdldCB0aGUgY29ycmVjdCBgb3JpZ2luYCwgdGhleSB3aWxsIGluc3RlYWQgZ2V0IGEgcHJvZ3JhbW1hdGljXG4gICAgICogb3JpZ2luIGV2ZW4gaWYgaXQgd2FzIGNsaWNrZWQgb3IgZm9jdXNlZCB2aWEgdGhlIGtleWJvYXJkLlxuICAgICAqL1xuICAgIGNvbnN0cnVjdG9yKCkge1xuXG4gICAgICAgIC8vIFdlIG5lZWQgdG8gbGlzdGVuIGluIGNhcHR1cmUgcGhhc2Ugc2luY2UgZm9jdXMgZXZlbnRzIGRvbid0IGJ1YmJsZS5cbiAgICAgICAgdGhpcy5fZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LmFkZEV2ZW50TGlzdGVuZXIoJ2ZvY3VzJywgdGhpcy5vbkZvY3VzLmJpbmQodGhpcyksIHRydWUpO1xuICAgICAgICB0aGlzLl9lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignYmx1cicsIHRoaXMub25CbHVyLmJpbmQodGhpcyksIHRydWUpO1xuICAgIH1cblxuICAgIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgICAgICB0aGlzLl9lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQucmVtb3ZlRXZlbnRMaXN0ZW5lcignZm9jdXMnLCB0aGlzLm9uRm9jdXMuYmluZCh0aGlzKSwgdHJ1ZSk7XG4gICAgICAgIHRoaXMuX2VsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5yZW1vdmVFdmVudExpc3RlbmVyKCdibHVyJywgdGhpcy5vbkJsdXIuYmluZCh0aGlzKSwgdHJ1ZSk7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBvbkZvY3VzKCk6IHZvaWQge1xuICAgICAgICB0aGlzLnV4Rm9jdXNXaXRoaW4uZW1pdCgpO1xuICAgIH1cblxuICAgIHByaXZhdGUgb25CbHVyKCk6IHZvaWQge1xuICAgICAgICB0aGlzLnV4Qmx1cldpdGhpbi5lbWl0KCk7XG4gICAgfVxufVxuIl19