import {Component, ElementRef, EventEmitter, Input, Output, ViewChild, ViewEncapsulation} from '@angular/core'; declare var UIkit: any; @Component({ selector: 'modal-alert', template: `
{{alertTitle}}
`, encapsulation: ViewEncapsulation.None, }) /** * API to an open alert window. */ export class AlertModal { private static MODAL_COUNTER: number = 0; id: string = "modal"; @Input() classTitle: string = "uk-background-primary-opacity"; @Input() classBody: string = ""; @Input() large: boolean = false; @Input() overflowBody: boolean = true; /** * 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 = true; /** * Emitted when ok button was clicked * or when Ok method is called. */ @Output() public alertOutput: EventEmitter = new EventEmitter(); /** * Emitted when cancel button was clicked * or when cancel method is called. */ @Output() public cancelOutput: EventEmitter = new EventEmitter(); @ViewChild('element') element: ElementRef; constructor() { } ngOnInit() { AlertModal.MODAL_COUNTER++; this.id = 'modal-' + AlertModal.MODAL_COUNTER; } ngOnDestroy() { if(typeof document !== "undefined") { const element = document.getElementById("modal-container"); for (let i = element.childNodes.length - 1; i >= 0; --i) { let child: ChildNode = element.childNodes[i]; if (child['id'] == this.id) { child.remove(); } } } } /** * Opens an alert window creating backdrop. */ open() { UIkit.modal(this.element.nativeElement).show(); } /** * ok method closes the modal and emits modalOutput. */ ok() { if (!this.stayOpen) { UIkit.modal(this.element.nativeElement).hide(); } 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(); this.cancelOutput.emit(true); } }