import {Component, ViewEncapsulation, ElementRef, EventEmitter, Output, Input, ViewChild} from '@angular/core'; declare var UIkit: any; @Component({ selector: 'modal-alert', template: ` `, encapsulation: ViewEncapsulation.None, }) /** * API to an open alert window. */ export class AlertModal { @Input() classBody: string = ""; /** * Caption for the title. */ public alertTitle: string; /** * Describes if the alert contains Ok Button. * The default Ok button will close the alert and emit the callback. * Defaults to true. */ public okButton: boolean = true; /** * Caption for the OK button. * Default: Ok */ public okButtonText: string = 'Ok'; /** * Describes if the alert contains cancel Button. * The default Cancelbutton will close the alert. * Defaults to true. */ public cancelButton: boolean = true; /** * Caption for the Cancel button. * Default: Cancel */ public cancelButtonText: string = 'Cancel'; /** * if the alertMessage is true it will show the contentString inside alert body. */ public alertMessage: boolean = true; /** * Some message/content can be set in message which will be shown in alert body. */ public message: string; /** * if the value is true alert footer will be visible or else it will be hidden. */ public alertFooter: boolean = true; /** * shows alert header if the value is true. */ public alertHeader: boolean = true; /** * if the value is true ok button align on the left, else on the right */ public okButtonLeft: boolean = true; /** * if the value is true ok button is disabled */ @Input() public okDisabled: boolean = false; /** * If the value is true, a checkbox option will be appeared on the right side of footer */ @Input() public choice: boolean = false; /** * if the value is true then on ok clicked, modal will stay open. */ public stayOpen: boolean = false; /** * Value will be emitted if @choice is true */ public select: boolean = false; /** * Emitted when a ok button was clicked * or when Ok method is called. */ @Output() public alertOutput: EventEmitter = new EventEmitter(); @ViewChild('element') element: ElementRef; constructor() { } /** * Opens a alert window creating backdrop. */ open() { UIkit.modal(this.element.nativeElement).show(); } /** * ok method closes the modal and emits modalOutput. */ ok() { if (!this.stayOpen) { this.cancel(); } if (!this.choice) { this.alertOutput.emit(true); } else { this.alertOutput.emit({ value: true, choice: this.select }); } } /** * cancel method closes the modal. */ cancel() { UIkit.modal(this.element.nativeElement).hide(); } }