import { Component , ViewEncapsulation , ChangeDetectionStrategy , ChangeDetectorRef , HostBinding , ElementRef , TemplateRef , OnInit } from '@angular/core' ; import { Observable , Subject } from 'rxjs' ; import { AnimationEvent } from '@angular/animations' ; import { ThyTooltipVisibility } from './interface' ; import { thyTooltipAnimations } from './tooltip-animations' ; import { UpdateHostClassService } from 'ngx-tethys/core' ; import { coerceArray } from 'ngx-tethys/util' ; @ Component ( { selector : 'thy-tooltip' , templateUrl : './tooltip.component.html' , encapsulation : ViewEncapsulation . None , changeDetection : ChangeDetectionStrategy . OnPush , animations : [ thyTooltipAnimations . tooltipState ] , host : { '[@state]' : 'visibility' , '(@state.start)' : 'animationStart()' , '(@state.done)' : 'animationDone($event)' } , providers : [ UpdateHostClassService ] } ) export class ThyTooltipComponent implements OnInit { @ HostBinding ( `class.thy-tooltip` ) addTooltipContainerClass = true ; _content : string | TemplateRef < HTMLElement > ; data : any ; private readonly onHide : Subject < void > = new Subject ( ) ; private closeOnInteraction = false ; visibility : ThyTooltipVisibility = 'initial' ; showTimeoutId : number | null | any ; hideTimeoutId : number | null | any ; tooltipClasses : string [ ] = [ ] ; isTemplateRef = false ; get content ( ) { return this . _content ; } set content ( value ) { this . _content = value ; this . isTemplateRef = value instanceof TemplateRef ; } private updateClasses ( ) { let classes = [ ] ; if ( this . tooltipClasses ) { classes = classes . concat ( this . tooltipClasses ) ; } this . updateHostClassService . updateClass ( classes ) ; } constructor ( private changeDetectorRef , private updateHostClassService , elementRef ) { this . updateHostClassService . initializeElement ( elementRef ) ; } ngOnInit ( ) { } markForCheck ( ) { this . changeDetectorRef . markForCheck ( ) ; } isVisible ( ) { return this . visibility === 'visible' ; } show ( delay ) { if ( this . hideTimeoutId ) { clearTimeout ( this . hideTimeoutId ) ; this . hideTimeoutId = null ; } this . closeOnInteraction = true ; this . showTimeoutId = setTimeout ( ( ) => { this . visibility = 'visible' ; this . showTimeoutId = null ; this . markForCheck ( ) ; } , delay ) ; } hide ( delay ) { if ( this . showTimeoutId ) { clearTimeout ( this . showTimeoutId ) ; this . showTimeoutId = null ; } this . hideTimeoutId = setTimeout ( ( ) => { this . visibility = 'hidden' ; this . hideTimeoutId = null ; this . markForCheck ( ) ; } , delay ) ; } animationStart ( ) { this . closeOnInteraction = false ; } animationDone ( event ) { const toState = event . toState as ThyTooltipVisibility ; if ( toState === 'hidden' && ! this . isVisible ( ) ) { this . onHide . next ( ) ; } if ( toState === 'visible' || toState === 'hidden' ) { this . closeOnInteraction = true ; } } afterHidden ( ) { return this . onHide . asObservable ( ) ; } setTooltipClass ( classes ) { this . tooltipClasses = coerceArray ( classes ) ; this . updateClasses ( ) ; } }