import { Component , Input , Output , EventEmitter , ElementRef , ViewChild } from "@angular/core" ; @ Component ( { selector : "modal-header" , template : `<ng-content></ng-content>` } ) export class ModalHeader { } @ Component ( { selector : "modal-content" , template : `<ng-content></ng-content>` } ) export class ModalContent { } @ Component ( { selector : "modal-footer" , template : `<ng-content></ng-content>` } ) export class ModalFooter { } @ Component ( { selector : "modal" , template : `
<div class="modal" 
     tabindex="-1"
     role="dialog"
     #modalRoot
     (keydown.esc)="closeOnEscape ? close() : 0"
     [ngClass]="{ in: isOpened, fade: isOpened }"
     [ngStyle]="{ display: isOpened ? 'block' : 'none' }"
     (click)="closeOnOutsideClick ? close() : 0">
    <div [class]="'modal-dialog ' + modalClass" (click)="preventClosing($event)">
        <div class="modal-content" tabindex="0" *ngIf="isOpened">
            <div class="modal-header">
                <button *ngIf="!hideCloseButton" type="button" class="close" data-dismiss="modal" [attr.aria-label]="cancelButtonLabel || 'Close'" (click)="close()"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" *ngIf="title">{{ title }}</h4>
                <ng-content select="modal-header"></ng-content>
            </div>
            <div class="modal-body">
                <ng-content select="modal-content"></ng-content>
            </div>
            <div class="modal-footer">
                <ng-content select="modal-footer"></ng-content>
                <button *ngIf="cancelButtonLabel" type="button" class="btn btn-default" data-dismiss="modal" (click)="close()">{{ cancelButtonLabel }}</button>
                <button *ngIf="submitButtonLabel" type="button" class="btn btn-primary" (click)="onSubmit.emit(undefined)">{{ submitButtonLabel }}</button>
            </div>
        </div>
    </div>
</div>
` } ) export class Modal { @ Input ( ) public modalClass : string ; @ Input ( ) public closeOnEscape : boolean = true ; @ Input ( ) public closeOnOutsideClick : boolean = true ; @ Input ( ) public title : string ; @ Input ( ) public hideCloseButton = false ; @ Input ( ) public cancelButtonLabel : string ; @ Input ( ) public submitButtonLabel : string ; @ Input ( ) public backdrop : boolen = true ; @ Output ( ) public onOpen = new EventEmitter ( false ) ; @ Output ( ) public onClose = new EventEmitter ( false ) ; @ Output ( ) public onSubmit = new EventEmitter ( false ) ; public isOpened = false ; @ ViewChild ( "modalRoot" ) public modalRoot : ElementRef ; private backdropElement : HTMLElement ; constructor ( ) { this . createBackDrop ( ) ; } ngOnDestroy ( ) { document . body . className = document . body . className . replace ( /modal-open\b/ , "" ) ; if ( this . backdropElement && this . backdropElement . parentNode === document . body ) document . body . removeChild ( this . backdropElement ) ; } open ( ... args ) { if ( this . isOpened ) return ; this . isOpened = true ; this . onOpen . emit ( args ) ; document . body . appendChild ( this . backdropElement ) ; window . setTimeout ( ( ) => this . modalRoot . nativeElement . focus ( ) , 0 ) ; document . body . className += " modal-open" ; } close ( ... args ) { if ( ! this . isOpened ) return ; this . isOpened = false ; this . onClose . emit ( args ) ; document . body . removeChild ( this . backdropElement ) ; document . body . className = document . body . className . replace ( /modal-open\b/ , "" ) ; } public preventClosing ( event ) { event . stopPropagation ( ) ; } private createBackDrop ( ) { this . backdropElement = document . createElement ( "div" ) ; this . backdropElement . classList . add ( "fade" ) ; this . backdropElement . classList . add ( "in" ) ; if ( this . backdrop ) { this . backdropElement . classList . add ( "modal-backdrop" ) ; } } }