import { ThyTranslate , UpdateHostClassService } from 'ngx-tethys/core' ; import { coerceBooleanProperty } from 'ngx-tethys/util' ; import { AfterViewInit , Component , ContentChild , ElementRef , HostBinding , Input , NgZone , OnInit , Renderer2 , TemplateRef } from '@angular/core' ; import { ThyEmptyConfig } from './empty.config' ; const sizeClassMap = { lg : [ 'thy-empty-state' , 'thy-empty-state--lg' ] , md : [ 'thy-empty-state' ] , sm : [ 'thy-empty-state' , 'thy-empty-state--sm' ] } ; const sizeMap = { lg : { height : 168 , offsetTop : 30 , defaultMarginTop : 120 } , md : { height : 118 , offsetTop : 20 , defaultMarginTop : 10 } , sm : { height : 78 , offsetTop : 10 , defaultMarginTop : 10 } } ; @ Component ( { selector : 'thy-empty' , templateUrl : './empty.component.html' , providers : [ UpdateHostClassService ] } ) export class ThyEmptyComponent implements OnInit , AfterViewInit { @ Input ( ) thyMessage : string ; @ Input ( ) thyTranslationKey : string ; @ Input ( ) thyTranslationValues : any ; @ Input ( ) thyEntityName : string ; @ Input ( ) thyEntityNameTranslateKey : string ; @ Input ( ) thyIconName : string ; @ Input ( ) set thySize ( value ) { this . size = value ; if ( this . _initialized ) { this . updateClass ( ) ; } } @ Input ( ) thyMarginTop : number | string ; @ Input ( ) thyTopAuto : boolean ; @ Input ( ) thyContainer : ElementRef ; @ Input ( ) thyImageUrl : string ; @ Input ( ) thyDescription : string ; private size : string = 'md' ; private _initialized = false ; @ ContentChild ( 'extra' ) extraTemplateRef : TemplateRef < any > ; get displayText ( ) { if ( this . thyMessage ) { return this . thyMessage ; } else if ( this . thyTranslationKey ) { return this . thyTranslate . instant ( this . thyTranslationKey , this . thyTranslationValues ) ; } else if ( this . thyEntityName ) { return this . thyTranslate . instant ( this . thyEmptyConfig . noResultWithTargetTranslateKey , { target : this . thyEntityName } ) ; } else if ( this . thyEntityNameTranslateKey ) { return this . thyTranslate . instant ( this . thyEmptyConfig . noResultWithTargetTranslateKey , { target : this . thyTranslate . instant ( this . thyEntityNameTranslateKey ) } ) ; } else { return this . thyTranslate . instant ( this . thyEmptyConfig . noResultTranslateKey ) ; } } _calculatePosition ( ) { const sizeOptions = sizeMap [ this . thySize || 'md' ] ; const topAuto = coerceBooleanProperty ( this . thyTopAuto ) ; let marginTop = null ; if ( topAuto ) { const containerElement = this . thyContainer ? this . thyContainer . nativeElement : this . elementRef . nativeElement . parentElement ; let emptyStateHeight = this . elementRef . nativeElement . offsetHeight ; if ( emptyStateHeight <= 10 ) { emptyStateHeight = sizeOptions . height ; } marginTop = ( containerElement . offsetHeight - emptyStateHeight ) / 2 - sizeOptions . offsetTop ; if ( marginTop < 0 ) { marginTop = 0 ; } } else { if ( this . thyMarginTop ) { marginTop = this . thyMarginTop ; } else { marginTop = 0 ; } } if ( marginTop ) { this . renderer . setStyle ( this . elementRef . nativeElement , 'marginTop' , marginTop + 'px' ) ; } } constructor ( private thyTranslate , private thyEmptyConfig , private elementRef , private renderer , private ngZone , private updateHostClassService ) { this . updateHostClassService . initializeElement ( elementRef . nativeElement ) ; } ngOnInit ( ) { this . updateClass ( ) ; this . _initialized = true ; } updateClass ( ) { const classList = sizeClassMap [ this . size ] || sizeClassMap [ 'md' ] ; if ( classList ) { this . updateHostClassService . updateClass ( classList ) ; } } ngAfterViewInit ( ) { this . ngZone . runOutsideAngular ( ( ) => { setTimeout ( ( ) => { this . _calculatePosition ( ) ; } , 50 ) ; } ) ; } }