@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
66 lines • 8.18 kB
JavaScript
import { Directive, ElementRef, HostBinding, HostListener, inject, Input } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { FocusIndicatorService } from '../accessibility/index';
import { HoverActionService } from './hover-action.service';
import * as i0 from "@angular/core";
export class HoverActionDirective {
constructor() {
this._elementRef = inject(ElementRef);
this._hoverActionService = inject(HoverActionService);
this.focusIndicatorService = inject(FocusIndicatorService);
this.tabindex = 0;
this.active = false;
this.focused = false;
this._onDestroy = new Subject();
// create the focus indicator
this._focusIndicator = this.focusIndicatorService.monitor(this._elementRef.nativeElement);
// register the action
this._hoverActionService.register(this);
// watch for changes to the activeness of the container
this._hoverActionService.active.pipe(takeUntil(this._onDestroy)).subscribe(active => this.active = active);
}
ngOnDestroy() {
this._onDestroy.next();
this._onDestroy.complete();
this._hoverActionService.unregister(this);
this._focusIndicator.destroy();
}
focus() {
this._elementRef.nativeElement.focus();
}
onFocus() {
this.focused = true;
this._hoverActionService.updateVisibility();
}
onBlur() {
this.focused = false;
this._hoverActionService.updateVisibility();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: HoverActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.12", type: HoverActionDirective, selector: "[uxHoverAction]", inputs: { tabindex: "tabindex" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "tabindex": "this.tabindex", "class.hover-action-active": "this.active", "class.hover-action-focused": "this.focused" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: HoverActionDirective, decorators: [{
type: Directive,
args: [{
selector: '[uxHoverAction]'
}]
}], ctorParameters: () => [], propDecorators: { tabindex: [{
type: Input
}, {
type: HostBinding,
args: ['tabindex']
}], active: [{
type: HostBinding,
args: ['class.hover-action-active']
}], focused: [{
type: HostBinding,
args: ['class.hover-action-focused']
}], onFocus: [{
type: HostListener,
args: ['focus']
}], onBlur: [{
type: HostListener,
args: ['blur']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaG92ZXItYWN0aW9uLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9kaXJlY3RpdmVzL2hvdmVyLWFjdGlvbi9ob3Zlci1hY3Rpb24uZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLFdBQVcsRUFBRSxZQUFZLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBYSxNQUFNLGVBQWUsQ0FBQztBQUMzRyxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQy9CLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUMzQyxPQUFPLEVBQWtCLHFCQUFxQixFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDL0UsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sd0JBQXdCLENBQUM7O0FBSzVELE1BQU0sT0FBTyxvQkFBb0I7SUFvQjdCO1FBbkJpQixnQkFBVyxHQUFHLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQztRQUVqQyx3QkFBbUIsR0FBRyxNQUFNLENBQUMsa0JBQWtCLENBQUMsQ0FBQztRQUV6RCwwQkFBcUIsR0FBRyxNQUFNLENBQUMscUJBQXFCLENBQUMsQ0FBQztRQUkvRCxhQUFRLEdBQVcsQ0FBQyxDQUFDO1FBR3JCLFdBQU0sR0FBWSxLQUFLLENBQUM7UUFHeEIsWUFBTyxHQUFZLEtBQUssQ0FBQztRQUdSLGVBQVUsR0FBRyxJQUFJLE9BQU8sRUFBUSxDQUFDO1FBSTlDLDZCQUE2QjtRQUM3QixJQUFJLENBQUMsZUFBZSxHQUFHLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxhQUFhLENBQUMsQ0FBQztRQUUxRixzQkFBc0I7UUFDdEIsSUFBSSxDQUFDLG1CQUFtQixDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUV4Qyx1REFBdUQ7UUFDdkQsSUFBSSxDQUFDLG1CQUFtQixDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxNQUFNLENBQUMsRUFBRSxDQUFDLElBQUksQ0FBQyxNQUFNLEdBQUcsTUFBTSxDQUFDLENBQUM7SUFDL0csQ0FBQztJQUVELFdBQVc7UUFDUCxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ3ZCLElBQUksQ0FBQyxVQUFVLENBQUMsUUFBUSxFQUFFLENBQUM7UUFFM0IsSUFBSSxDQUFDLG1CQUFtQixDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUMxQyxJQUFJLENBQUMsZUFBZSxDQUFDLE9BQU8sRUFBRSxDQUFDO0lBQ25DLENBQUM7SUFFRCxLQUFLO1FBQ0QsSUFBSSxDQUFDLFdBQVcsQ0FBQyxhQUFhLENBQUMsS0FBSyxFQUFFLENBQUM7SUFDM0MsQ0FBQztJQUVzQixPQUFPO1FBQzFCLElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDO1FBQ3BCLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxnQkFBZ0IsRUFBRSxDQUFDO0lBQ2hELENBQUM7SUFFcUIsTUFBTTtRQUN4QixJQUFJLENBQUMsT0FBTyxHQUFHLEtBQUssQ0FBQztRQUNyQixJQUFJLENBQUMsbUJBQW1CLENBQUMsZ0JBQWdCLEVBQUUsQ0FBQztJQUNoRCxDQUFDOytHQXBEUSxvQkFBb0I7bUdBQXBCLG9CQUFvQjs7NEZBQXBCLG9CQUFvQjtrQkFIaEMsU0FBUzttQkFBQztvQkFDUCxRQUFRLEVBQUUsaUJBQWlCO2lCQUM5Qjt3REFVRyxRQUFRO3NCQUZQLEtBQUs7O3NCQUNMLFdBQVc7dUJBQUMsVUFBVTtnQkFJdkIsTUFBTTtzQkFETCxXQUFXO3VCQUFDLDJCQUEyQjtnQkFJeEMsT0FBTztzQkFETixXQUFXO3VCQUFDLDRCQUE0QjtnQkE4QmxCLE9BQU87c0JBQTdCLFlBQVk7dUJBQUMsT0FBTztnQkFLQyxNQUFNO3NCQUEzQixZQUFZO3VCQUFDLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIEhvc3RCaW5kaW5nLCBIb3N0TGlzdGVuZXIsIGluamVjdCwgSW5wdXQsIE9uRGVzdHJveSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU3ViamVjdCB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgdGFrZVVudGlsIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuaW1wb3J0IHsgRm9jdXNJbmRpY2F0b3IsIEZvY3VzSW5kaWNhdG9yU2VydmljZSB9IGZyb20gJy4uL2FjY2Vzc2liaWxpdHkvaW5kZXgnO1xuaW1wb3J0IHsgSG92ZXJBY3Rpb25TZXJ2aWNlIH0gZnJvbSAnLi9ob3Zlci1hY3Rpb24uc2VydmljZSc7XG5cbkBEaXJlY3RpdmUoe1xuICAgIHNlbGVjdG9yOiAnW3V4SG92ZXJBY3Rpb25dJ1xufSlcbmV4cG9ydCBjbGFzcyBIb3ZlckFjdGlvbkRpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uRGVzdHJveSB7XG4gICAgcHJpdmF0ZSByZWFkb25seSBfZWxlbWVudFJlZiA9IGluamVjdChFbGVtZW50UmVmKTtcblxuICAgIHByaXZhdGUgcmVhZG9ubHkgX2hvdmVyQWN0aW9uU2VydmljZSA9IGluamVjdChIb3ZlckFjdGlvblNlcnZpY2UpO1xuXG4gICAgcmVhZG9ubHkgZm9jdXNJbmRpY2F0b3JTZXJ2aWNlID0gaW5qZWN0KEZvY3VzSW5kaWNhdG9yU2VydmljZSk7XG5cbiAgICBASW5wdXQoKVxuICAgIEBIb3N0QmluZGluZygndGFiaW5kZXgnKVxuICAgIHRhYmluZGV4OiBudW1iZXIgPSAwO1xuXG4gICAgQEhvc3RCaW5kaW5nKCdjbGFzcy5ob3Zlci1hY3Rpb24tYWN0aXZlJylcbiAgICBhY3RpdmU6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAgIEBIb3N0QmluZGluZygnY2xhc3MuaG92ZXItYWN0aW9uLWZvY3VzZWQnKVxuICAgIGZvY3VzZWQ6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAgIHByaXZhdGUgcmVhZG9ubHkgX2ZvY3VzSW5kaWNhdG9yOiBGb2N1c0luZGljYXRvcjtcbiAgICBwcml2YXRlIHJlYWRvbmx5IF9vbkRlc3Ryb3kgPSBuZXcgU3ViamVjdDx2b2lkPigpO1xuXG4gICAgY29uc3RydWN0b3IoKSB7XG5cbiAgICAgICAgLy8gY3JlYXRlIHRoZSBmb2N1cyBpbmRpY2F0b3JcbiAgICAgICAgdGhpcy5fZm9jdXNJbmRpY2F0b3IgPSB0aGlzLmZvY3VzSW5kaWNhdG9yU2VydmljZS5tb25pdG9yKHRoaXMuX2VsZW1lbnRSZWYubmF0aXZlRWxlbWVudCk7XG5cbiAgICAgICAgLy8gcmVnaXN0ZXIgdGhlIGFjdGlvblxuICAgICAgICB0aGlzLl9ob3ZlckFjdGlvblNlcnZpY2UucmVnaXN0ZXIodGhpcyk7XG5cbiAgICAgICAgLy8gd2F0Y2ggZm9yIGNoYW5nZXMgdG8gdGhlIGFjdGl2ZW5lc3Mgb2YgdGhlIGNvbnRhaW5lclxuICAgICAgICB0aGlzLl9ob3ZlckFjdGlvblNlcnZpY2UuYWN0aXZlLnBpcGUodGFrZVVudGlsKHRoaXMuX29uRGVzdHJveSkpLnN1YnNjcmliZShhY3RpdmUgPT4gdGhpcy5hY3RpdmUgPSBhY3RpdmUpO1xuICAgIH1cblxuICAgIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgICAgICB0aGlzLl9vbkRlc3Ryb3kubmV4dCgpO1xuICAgICAgICB0aGlzLl9vbkRlc3Ryb3kuY29tcGxldGUoKTtcblxuICAgICAgICB0aGlzLl9ob3ZlckFjdGlvblNlcnZpY2UudW5yZWdpc3Rlcih0aGlzKTtcbiAgICAgICAgdGhpcy5fZm9jdXNJbmRpY2F0b3IuZGVzdHJveSgpO1xuICAgIH1cblxuICAgIGZvY3VzKCk6IHZvaWQge1xuICAgICAgICB0aGlzLl9lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQuZm9jdXMoKTtcbiAgICB9XG5cbiAgICBASG9zdExpc3RlbmVyKCdmb2N1cycpIG9uRm9jdXMoKTogdm9pZCB7XG4gICAgICAgIHRoaXMuZm9jdXNlZCA9IHRydWU7XG4gICAgICAgIHRoaXMuX2hvdmVyQWN0aW9uU2VydmljZS51cGRhdGVWaXNpYmlsaXR5KCk7XG4gICAgfVxuXG4gICAgQEhvc3RMaXN0ZW5lcignYmx1cicpIG9uQmx1cigpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5mb2N1c2VkID0gZmFsc2U7XG4gICAgICAgIHRoaXMuX2hvdmVyQWN0aW9uU2VydmljZS51cGRhdGVWaXNpYmlsaXR5KCk7XG4gICAgfVxufSJdfQ==