import { Directive , ElementRef , HostBinding , HostListener , Input , OnDestroy , OnInit } from '@angular/core' ; import { takeUntil } from 'rxjs/operators' ; import { Subject } from 'rxjs' ; import { ManagedFocusContainerService } from '../accessibility/managed-focus-container/managed-focus-container.service' ; import { HoverActionService } from './hover-action.service' ; @ Directive ( { selector : '[uxHoverActionContainer]' , providers : [ HoverActionService ] } ) export class HoverActionContainerDirective implements OnInit , OnDestroy { @ Input ( ) @ HostBinding ( 'tabindex' ) tabindex : number = 0 ; @ HostBinding ( 'class.hover-action-container-active' ) active : boolean = false ; private _onDestroy = new Subject < void > ( ) ; constructor ( private _elementRef , private _managedFocusContainerService , private _hoverActionService ) { } ngOnInit ( ) { this . _managedFocusContainerService . register ( this . _elementRef . nativeElement , this ) ; 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 ) ; } @ HostListener ( 'mouseenter' ) onHover ( ) { this . _hoverActionService . setHoverState ( true ) ; } @ HostListener ( 'mouseleave' ) onLeave ( ) { this . _hoverActionService . setHoverState ( false ) ; } }