feat(toastr): add onclick, onclose events (#2821)

src/framework/theme/components/toastr/toast.component.ts

@@ -11,6 +11,7 @@ import {
   HostBinding,
   HostListener,
   Input,
+  OnDestroy,
   OnInit,
   Output,
   Renderer2,
@@ -93,11 +94,12 @@ import { NbToast } from './model';
   styleUrls: ['./toast.component.scss'],
   templateUrl: './toast.component.html',
 })
-export class NbToastComponent implements OnInit {
+export class NbToastComponent implements OnInit, OnDestroy {
   @Input()
   toast: NbToast;
 
   @Output() destroy: EventEmitter<void> = new EventEmitter();
+  @Output() toastClick: EventEmitter<void> = new EventEmitter();
 
   @HostBinding('class.status-success')
   get success(): boolean {
@@ -168,7 +170,7 @@ export class NbToastComponent implements OnInit {
 
   @HostListener('click')
   onClick() {
-    this.destroy.emit();
+    this.toastClick.emit();
   }
 
   constructor(
@@ -182,4 +184,8 @@ export class NbToastComponent implements OnInit {
       this.renderer.addClass(this.elementRef.nativeElement, this.toast.config.toastClass);
     }
   }
+
+  ngOnDestroy() {
+    this.destroy.emit();
+  }
 }

src/framework/theme/components/toastr/toastr.service.ts

@@ -5,6 +5,8 @@
  */
 
 import { ComponentFactoryResolver, ComponentRef, Inject, Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { filter, takeUntil } from 'rxjs/operators';
 
 import { NbComponentPortal, NbOverlayRef } from '../cdk/overlay/mapping';
 import { NbOverlayService, patch } from '../cdk/overlay/overlay-service';
@@ -17,13 +19,21 @@ import { NbToastComponent } from './toast.component';
 import { NB_DOCUMENT } from '../../theme.options';
 
 export class NbToastRef {
-  constructor(private toastContainer: NbToastContainer,
-              private toast: NbToast) {
-  }
+  toastInstance: NbToastComponent;
+
+  constructor(private toastContainer: NbToastContainer, private toast: NbToast) {}
 
   close() {
     this.toastContainer.destroy(this.toast);
   }
+
+  onClose(): Observable<void> {
+    return this.toastInstance.destroy.asObservable();
+  }
+
+  onClick(): Observable<void> {
+    return this.toastInstance.toastClick.asObservable();
+  }
 }
 
 export class NbToastContainer {
@@ -34,10 +44,11 @@ export class NbToastContainer {
     return this.containerRef.location.nativeElement;
   }
 
-  constructor(protected position: NbGlobalPosition,
-              protected containerRef: ComponentRef<NbToastrContainerComponent>,
-              protected positionHelper: NbPositionHelper) {
-  }
+  constructor(
+    protected position: NbGlobalPosition,
+    protected containerRef: ComponentRef<NbToastrContainerComponent>,
+    protected positionHelper: NbPositionHelper,
+  ) {}
 
   attach(toast: NbToast): NbToastRef {
     if (toast.config.preventDuplicates && this.isDuplicate(toast)) {
@@ -57,15 +68,18 @@ export class NbToastContainer {
 
     this.prevToast = toast;
 
-    return new NbToastRef(this, toast);
+    const toastRef = new NbToastRef(this, toast);
+    toastRef.toastInstance = toastComponent;
+
+    return toastRef;
   }
 
   destroy(toast: NbToast) {
     if (this.prevToast === toast) {
       this.prevToast = null;
     }
 
-    this.toasts = this.toasts.filter(t => t !== toast);
+    this.toasts = this.toasts.filter((t) => t !== toast);
     this.updateContainer();
   }
 
@@ -80,13 +94,11 @@ export class NbToastContainer {
   }
 
   protected isDuplicateAmongAll(toast: NbToast): boolean {
-    return this.toasts.some(t => this.toastDuplicateCompareFunc(t, toast));
+    return this.toasts.some((t) => this.toastDuplicateCompareFunc(t, toast));
   }
 
   protected toastDuplicateCompareFunc = (t1: NbToast, t2: NbToast): boolean => {
-    return t1.message === t2.message
-      && t1.title === t2.title
-      && t1.config.status === t2.config.status;
+    return t1.message === t2.message && t1.title === t2.title && t1.config.status === t2.config.status;
   };
 
   protected removeToastIfLimitReached(toast: NbToast) {
@@ -125,7 +137,12 @@ export class NbToastContainer {
   }
 
   protected subscribeOnClick(toastComponent: NbToastComponent, toast: NbToast) {
-    toastComponent.destroy.subscribe(() => this.destroy(toast));
+    toastComponent.toastClick
+      .pipe(
+        filter(() => toast.config.destroyByClick),
+        takeUntil(toastComponent.destroy),
+      )
+      .subscribe(() => this.destroy(toast));
   }
 
   protected updateContainer() {
@@ -142,12 +159,13 @@ interface NbToastrOverlayWithContainer {
 export class NbToastrContainerRegistry {
   protected overlays: Map<NbGlobalPosition, NbToastrOverlayWithContainer> = new Map();
 
-  constructor(protected overlay: NbOverlayService,
-              protected positionBuilder: NbPositionBuilderService,
-              protected positionHelper: NbPositionHelper,
-              protected cfr: ComponentFactoryResolver,
-              @Inject(NB_DOCUMENT) protected document: any) {
-  }
+  constructor(
+    protected overlay: NbOverlayService,
+    protected positionBuilder: NbPositionBuilderService,
+    protected positionHelper: NbPositionHelper,
+    protected cfr: ComponentFactoryResolver,
+    @Inject(NB_DOCUMENT) protected document: any,
+  ) {}
 
   get(position: NbGlobalPosition): NbToastContainer {
     const logicalPosition: NbGlobalLogicalPosition = this.positionHelper.toLogicalPosition(position);
@@ -263,9 +281,10 @@ export class NbToastrContainerRegistry {
  * */
 @Injectable()
 export class NbToastrService {
-  constructor(@Inject(NB_TOASTR_CONFIG) protected globalConfig: NbToastrConfig,
-              protected containerRegistry: NbToastrContainerRegistry) {
-  }
+  constructor(
+    @Inject(NB_TOASTR_CONFIG) protected globalConfig: NbToastrConfig,
+    protected containerRegistry: NbToastrContainerRegistry,
+  ) {}
 
   /**
    * Shows toast with message, title and user config.