Pause all notifications when hovering over board

src/app/shared/notifications/notification/notification.component.html

@@ -1,6 +1,4 @@
 <div class="alert {{notification.type}} alert-dismissible m-3 shadow" role="alert"
-     (mouseenter)="isPaused$.next(true)"
-     (mouseleave)="isPaused$.next(false)"
      [@enterLeave]="animate">
 
   <div class="notification-progress-loader position-absolute w-100" *ngIf="showProgressBar">

src/app/shared/notifications/notification/notification.component.ts

@@ -1,4 +1,4 @@
-import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
+import { Observable, of as observableOf } from 'rxjs';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -48,6 +48,11 @@ export class NotificationComponent implements OnInit, OnDestroy {
 
   @Input() public notification = null as INotification;
 
+  /**
+   * Whether this notification's countdown should be paused
+   */
+  @Input() public isPaused$: Observable<boolean>;
+
   // Progress bar variables
   public title: Observable<string>;
   public content: Observable<string>;
@@ -66,7 +71,6 @@ export class NotificationComponent implements OnInit, OnDestroy {
   private count = 0;
   private start: any;
   private diff: any;
-  public isPaused$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
   public animate: string;
 
   constructor(private notificationService: NotificationsService,

src/app/shared/notifications/notifications-board/notifications-board.component.html

@@ -1,7 +1,10 @@
-<div class="notifications-wrapper position-fixed" [ngClass]="position">
+<div class="notifications-wrapper position-fixed"
+     [ngClass]="position"
+     (mouseenter)="this.isPaused$.next(true);"
+     (mouseleave)="this.isPaused$.next(false);">
   <ds-notification
     class="notification"
     *ngFor="let a of notifications; let i = index"
-    [notification]="a">
+    [notification]="a" [isPaused$]="isPaused$">
   </ds-notification>
 </div>

src/app/shared/notifications/notifications-board/notifications-board.component.ts

@@ -9,7 +9,7 @@ import {
 } from '@angular/core';
 
 import { select, Store } from '@ngrx/store';
-import { Subscription } from 'rxjs';
+import { BehaviorSubject, Subscription } from 'rxjs';
 import { difference } from 'lodash';
 
 import { NotificationsService } from '../notifications.service';
@@ -44,6 +44,11 @@ export class NotificationsBoardComponent implements OnInit, OnDestroy {
   public rtl = false;
   public animate: 'fade' | 'fromTop' | 'fromRight' | 'fromBottom' | 'fromLeft' | 'rotate' | 'scale' = 'fromRight';
 
+  /**
+   * Whether to pause the dismiss countdown of all notifications on the board
+   */
+  public isPaused$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+
   constructor(private service: NotificationsService,
               private store: Store<AppState>,
               private cdr: ChangeDetectorRef) {
@@ -129,7 +134,6 @@ export class NotificationsBoardComponent implements OnInit, OnDestroy {
       }
     });
   }
-
   ngOnDestroy(): void {
     if (this.sub) {
       this.sub.unsubscribe();