@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
61 lines • 8.14 kB
JavaScript
import { Directive, ElementRef, HostBinding, HostListener, inject, Input } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { ManagedFocusContainerService } from '../accessibility/managed-focus-container/managed-focus-container.service';
import { HoverActionService } from './hover-action.service';
import * as i0 from "@angular/core";
export class HoverActionContainerDirective {
constructor() {
this._elementRef = inject(ElementRef);
this._managedFocusContainerService = inject(ManagedFocusContainerService);
this._hoverActionService = inject(HoverActionService);
this.tabindex = 0;
this.active = false;
this._onDestroy = new Subject();
}
ngOnInit() {
// Watch for focus within the container element and manage tabindex of descendants
this._managedFocusContainerService.register(this._elementRef.nativeElement, this);
// Track focus and update state for the child directives
this._managedFocusContainerService.hasFocus(this._elementRef.nativeElement)
.pipe(takeUntil(this._onDestroy)).subscribe(active => {
this.active = active;
this._hoverActionService.setFocusState(active);
});
}
ngOnDestroy() {
this._onDestroy.next();
this._onDestroy.complete();
this._managedFocusContainerService.unregister(this._elementRef.nativeElement, this);
}
onHover() {
this._hoverActionService.setHoverState(true);
}
onLeave() {
this._hoverActionService.setHoverState(false);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: HoverActionContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.12", type: HoverActionContainerDirective, selector: "[uxHoverActionContainer]", inputs: { tabindex: "tabindex" }, host: { listeners: { "mouseenter": "onHover()", "mouseleave": "onLeave()" }, properties: { "tabindex": "this.tabindex", "class.hover-action-container-active": "this.active" } }, providers: [HoverActionService], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: HoverActionContainerDirective, decorators: [{
type: Directive,
args: [{
selector: '[uxHoverActionContainer]',
providers: [HoverActionService]
}]
}], propDecorators: { tabindex: [{
type: Input
}, {
type: HostBinding,
args: ['tabindex']
}], active: [{
type: HostBinding,
args: ['class.hover-action-container-active']
}], onHover: [{
type: HostListener,
args: ['mouseenter']
}], onLeave: [{
type: HostListener,
args: ['mouseleave']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaG92ZXItYWN0aW9uLWNvbnRhaW5lci5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvZGlyZWN0aXZlcy9ob3Zlci1hY3Rpb24vaG92ZXItYWN0aW9uLWNvbnRhaW5lci5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsV0FBVyxFQUFFLFlBQVksRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFxQixNQUFNLGVBQWUsQ0FBQztBQUNuSCxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQy9CLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUMzQyxPQUFPLEVBQUUsNEJBQTRCLEVBQUUsTUFBTSwwRUFBMEUsQ0FBQztBQUN4SCxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQzs7QUFNNUQsTUFBTSxPQUFPLDZCQUE2QjtJQUoxQztRQUtxQixnQkFBVyxHQUFHLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQztRQUVqQyxrQ0FBNkIsR0FBRyxNQUFNLENBQUMsNEJBQTRCLENBQUMsQ0FBQztRQUVyRSx3QkFBbUIsR0FBRyxNQUFNLENBQUMsa0JBQWtCLENBQUMsQ0FBQztRQUlsRSxhQUFRLEdBQVcsQ0FBQyxDQUFDO1FBR3JCLFdBQU0sR0FBWSxLQUFLLENBQUM7UUFFUCxlQUFVLEdBQUcsSUFBSSxPQUFPLEVBQVEsQ0FBQztLQTZCckQ7SUEzQkcsUUFBUTtRQUVKLGtGQUFrRjtRQUNsRixJQUFJLENBQUMsNkJBQTZCLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxFQUFFLElBQUksQ0FBQyxDQUFDO1FBRWxGLHdEQUF3RDtRQUN4RCxJQUFJLENBQUMsNkJBQTZCLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxDQUFDO2FBQ3RFLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLE1BQU0sQ0FBQyxFQUFFO1lBQ2pELElBQUksQ0FBQyxNQUFNLEdBQUcsTUFBTSxDQUFDO1lBQ3JCLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxhQUFhLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDbkQsQ0FBQyxDQUFDLENBQUM7SUFDWCxDQUFDO0lBRUQsV0FBVztRQUNQLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDdkIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxRQUFRLEVBQUUsQ0FBQztRQUUzQixJQUFJLENBQUMsNkJBQTZCLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxFQUFFLElBQUksQ0FBQyxDQUFDO0lBQ3hGLENBQUM7SUFFMkIsT0FBTztRQUMvQixJQUFJLENBQUMsbUJBQW1CLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ2pELENBQUM7SUFFMkIsT0FBTztRQUMvQixJQUFJLENBQUMsbUJBQW1CLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ2xELENBQUM7K0dBMUNRLDZCQUE2QjttR0FBN0IsNkJBQTZCLHVRQUYzQixDQUFDLGtCQUFrQixDQUFDOzs0RkFFdEIsNkJBQTZCO2tCQUp6QyxTQUFTO21CQUFDO29CQUNQLFFBQVEsRUFBRSwwQkFBMEI7b0JBQ3BDLFNBQVMsRUFBRSxDQUFDLGtCQUFrQixDQUFDO2lCQUNsQzs4QkFVRyxRQUFRO3NCQUZQLEtBQUs7O3NCQUNMLFdBQVc7dUJBQUMsVUFBVTtnQkFJdkIsTUFBTTtzQkFETCxXQUFXO3VCQUFDLHFDQUFxQztnQkF5QnRCLE9BQU87c0JBQWxDLFlBQVk7dUJBQUMsWUFBWTtnQkFJRSxPQUFPO3NCQUFsQyxZQUFZO3VCQUFDLFlBQVkiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIEhvc3RCaW5kaW5nLCBIb3N0TGlzdGVuZXIsIGluamVjdCwgSW5wdXQsIE9uRGVzdHJveSwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTdWJqZWN0IH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyB0YWtlVW50aWwgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5pbXBvcnQgeyBNYW5hZ2VkRm9jdXNDb250YWluZXJTZXJ2aWNlIH0gZnJvbSAnLi4vYWNjZXNzaWJpbGl0eS9tYW5hZ2VkLWZvY3VzLWNvbnRhaW5lci9tYW5hZ2VkLWZvY3VzLWNvbnRhaW5lci5zZXJ2aWNlJztcbmltcG9ydCB7IEhvdmVyQWN0aW9uU2VydmljZSB9IGZyb20gJy4vaG92ZXItYWN0aW9uLnNlcnZpY2UnO1xuXG5ARGlyZWN0aXZlKHtcbiAgICBzZWxlY3RvcjogJ1t1eEhvdmVyQWN0aW9uQ29udGFpbmVyXScsXG4gICAgcHJvdmlkZXJzOiBbSG92ZXJBY3Rpb25TZXJ2aWNlXVxufSlcbmV4cG9ydCBjbGFzcyBIb3ZlckFjdGlvbkNvbnRhaW5lckRpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95IHtcbiAgICBwcml2YXRlIHJlYWRvbmx5IF9lbGVtZW50UmVmID0gaW5qZWN0KEVsZW1lbnRSZWYpO1xuXG4gICAgcHJpdmF0ZSByZWFkb25seSBfbWFuYWdlZEZvY3VzQ29udGFpbmVyU2VydmljZSA9IGluamVjdChNYW5hZ2VkRm9jdXNDb250YWluZXJTZXJ2aWNlKTtcblxuICAgIHByaXZhdGUgcmVhZG9ubHkgX2hvdmVyQWN0aW9uU2VydmljZSA9IGluamVjdChIb3ZlckFjdGlvblNlcnZpY2UpO1xuXG4gICAgQElucHV0KClcbiAgICBASG9zdEJpbmRpbmcoJ3RhYmluZGV4JylcbiAgICB0YWJpbmRleDogbnVtYmVyID0gMDtcblxuICAgIEBIb3N0QmluZGluZygnY2xhc3MuaG92ZXItYWN0aW9uLWNvbnRhaW5lci1hY3RpdmUnKVxuICAgIGFjdGl2ZTogYm9vbGVhbiA9IGZhbHNlO1xuXG4gICAgcHJpdmF0ZSByZWFkb25seSBfb25EZXN0cm95ID0gbmV3IFN1YmplY3Q8dm9pZD4oKTtcblxuICAgIG5nT25Jbml0KCk6IHZvaWQge1xuXG4gICAgICAgIC8vIFdhdGNoIGZvciBmb2N1cyB3aXRoaW4gdGhlIGNvbnRhaW5lciBlbGVtZW50IGFuZCBtYW5hZ2UgdGFiaW5kZXggb2YgZGVzY2VuZGFudHNcbiAgICAgICAgdGhpcy5fbWFuYWdlZEZvY3VzQ29udGFpbmVyU2VydmljZS5yZWdpc3Rlcih0aGlzLl9lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQsIHRoaXMpO1xuXG4gICAgICAgIC8vIFRyYWNrIGZvY3VzIGFuZCB1cGRhdGUgc3RhdGUgZm9yIHRoZSBjaGlsZCBkaXJlY3RpdmVzXG4gICAgICAgIHRoaXMuX21hbmFnZWRGb2N1c0NvbnRhaW5lclNlcnZpY2UuaGFzRm9jdXModGhpcy5fZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50KVxuICAgICAgICAgICAgLnBpcGUodGFrZVVudGlsKHRoaXMuX29uRGVzdHJveSkpLnN1YnNjcmliZShhY3RpdmUgPT4ge1xuICAgICAgICAgICAgICAgIHRoaXMuYWN0aXZlID0gYWN0aXZlO1xuICAgICAgICAgICAgICAgIHRoaXMuX2hvdmVyQWN0aW9uU2VydmljZS5zZXRGb2N1c1N0YXRlKGFjdGl2ZSk7XG4gICAgICAgICAgICB9KTtcbiAgICB9XG5cbiAgICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5fb25EZXN0cm95Lm5leHQoKTtcbiAgICAgICAgdGhpcy5fb25EZXN0cm95LmNvbXBsZXRlKCk7XG5cbiAgICAgICAgdGhpcy5fbWFuYWdlZEZvY3VzQ29udGFpbmVyU2VydmljZS51bnJlZ2lzdGVyKHRoaXMuX2VsZW1lbnRSZWYubmF0aXZlRWxlbWVudCwgdGhpcyk7XG4gICAgfVxuXG4gICAgQEhvc3RMaXN0ZW5lcignbW91c2VlbnRlcicpIG9uSG92ZXIoKTogdm9pZCB7XG4gICAgICAgIHRoaXMuX2hvdmVyQWN0aW9uU2VydmljZS5zZXRIb3ZlclN0YXRlKHRydWUpO1xuICAgIH1cblxuICAgIEBIb3N0TGlzdGVuZXIoJ21vdXNlbGVhdmUnKSBvbkxlYXZlKCk6IHZvaWQge1xuICAgICAgICB0aGlzLl9ob3ZlckFjdGlvblNlcnZpY2Uuc2V0SG92ZXJTdGF0ZShmYWxzZSk7XG4gICAgfVxufVxuIl19