Modal: Add uikit close event, in order to catch click outside close events.

utils/modal/alert.ts

@@ -1,4 +1,14 @@
-import {Component, ElementRef, EventEmitter, Input, Output, ViewChild, ViewEncapsulation} from '@angular/core';
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input, OnDestroy,
+  OnInit,
+  Output,
+  ViewChild,
+  ViewEncapsulation
+} from '@angular/core';
 
 declare var UIkit: any;
 
@@ -48,7 +58,7 @@ declare var UIkit: any;
 /**
  * API to an open alert window.
  */
-export class AlertModal {
+export class AlertModal implements OnInit, AfterViewInit, OnDestroy {
   private static MODAL_COUNTER: number = 0;
 
   id: string = "modal";
@@ -136,6 +146,7 @@ export class AlertModal {
   @Output() public cancelOutput: EventEmitter<any> = new EventEmitter();
 
   @ViewChild('element') element: ElementRef;
+  private subscriptions: any[] = [];
 
   constructor() {
   }
@@ -145,6 +156,14 @@ export class AlertModal {
     this.id = 'modal-' + AlertModal.MODAL_COUNTER;
   }
 
+  ngAfterViewInit() {
+    if(this.element) {
+      this.subscriptions.push(UIkit.util.on(document, 'hide', '#' + this.id, () => {
+        this.cancelOutput.emit(true);
+      }));
+    }
+  }
+
   ngOnDestroy() {
     if(typeof document !== "undefined") {
       const element = document.getElementById("modal-container");
@@ -155,6 +174,11 @@ export class AlertModal {
         }
       }
     }
+    this.subscriptions.forEach(subscription => {
+      if(subscription instanceof Function) {
+        subscription();
+      }
+    });
   }
 
   /**
@@ -186,6 +210,5 @@ export class AlertModal {
    */
   cancel() {
     UIkit.modal(this.element.nativeElement).hide();
-    this.cancelOutput.emit(true);
   }
 }