import { Component , Output , Input , EventEmitter , OnDestroy , HostListener , Inject , PLATFORM_ID , } from '@angular/core' ; import { isPlatformBrowser } from '@angular/common' ; @ Component ( { selector : 'm-walletModal' , templateUrl : './modal.component.html' , } ) export class WalletModalComponent implements OnDestroy { showModalTimeout : any = null ; justOpened = true ; modalWasClicked = false ; public _showModal = false ; @ Input ( ) public set showModal ( val ) { this . _showModal = val ; val ? this . show ( ) : this . close ( ) ; } @ Output ( ) closeModal : EventEmitter < any > = new EventEmitter ( ) ; constructor ( @ Inject ( PLATFORM_ID ) protected platformId ) { } show ( ) { if ( document && document . body ) { this . justOpened = true ; document . body . classList . add ( 'm-overlay-modal--shown--no-scroll' ) ; if ( isPlatformBrowser ( this . platformId ) ) { this . showModalTimeout = setTimeout ( ( ) => { this . justOpened = false ; } , 20 ) ; } } } @ HostListener ( 'document:click' , [ '$event' ] ) clickedBackdrop ( $event ) { if ( this . _showModal && ! this . justOpened && ! this . modalWasClicked ) { $event . preventDefault ( ) ; $event . stopPropagation ( ) ; this . close ( ) ; } this . modalWasClicked = false ; } clickedModal ( $event ) { this . modalWasClicked = true ; } close ( ) { document . body . classList . remove ( 'm-overlay-modal--shown--no-scroll' ) ; this . closeModal . emit ( ) ; } ngOnDestroy ( ) { if ( this . showModalTimeout ) { clearTimeout ( this . showModalTimeout ) ; } this . close ( ) ; } }