feature(theme-shared): add esc listener to confirmation service

npm/ng-packs/packages/theme-shared/src/lib/abstracts/toaster.ts

@@ -10,6 +10,7 @@ export class AbstractToaster<T = Toaster.Options> {
   sticky: boolean = false;
 
   constructor(protected messageService: MessageService) {}
+
   info(message: string, title: string, options?: T): Observable<Toaster.Status> {
     return this.show(message, title, 'info', options);
   }

npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts

@@ -1,10 +1,10 @@
 import { StartLoader, StopLoader } from '@abp/ng.core';
-import { Component, Input, OnDestroy } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnDestroy } from '@angular/core';
-import { NavigationEnd, NavigationStart, Router, NavigationError } from '@angular/router';
+import { NavigationEnd, NavigationError, NavigationStart, Router } from '@angular/router';
 import { takeUntilDestroy } from '@ngx-validate/core';
 import { Actions, ofActionSuccessful } from '@ngxs/store';
+import { interval, Subscription, timer } from 'rxjs';
 import { filter } from 'rxjs/operators';
-import { timer } from 'rxjs';
 
 @Component({
   selector: 'abp-loader-bar',
@@ -37,13 +37,15 @@ export class LoaderBarComponent implements OnDestroy {
 
   progressLevel: number = 0;
 
-  interval: any;
+  interval: Subscription;
+
+  timer: Subscription;
 
   get boxShadow(): string {
     return `0 0 10px rgba(${this.color}, 0.5)`;
   }
 
-  constructor(private actions: Actions, private router: Router) {
+  constructor(private actions: Actions, private router: Router, private cdRef: ChangeDetectorRef) {
     actions
       .pipe(
         ofActionSuccessful(StartLoader, StopLoader),
@@ -69,11 +71,15 @@ export class LoaderBarComponent implements OnDestroy {
       });
   }
 
-  ngOnDestroy() {}
+  ngOnDestroy() {
+    this.interval.unsubscribe();
+  }
 
   startLoading() {
+    if (this.isLoading || this.progressLevel !== 0) return;
+
     this.isLoading = true;
-    const interval = setInterval(() => {
+    this.interval = interval(350).subscribe(() => {
       if (this.progressLevel < 75) {
         this.progressLevel += Math.random() * 10;
       } else if (this.progressLevel < 90) {
@@ -81,18 +87,21 @@ export class LoaderBarComponent implements OnDestroy {
       } else if (this.progressLevel < 100) {
         this.progressLevel += 0.1;
       } else {
-        clearInterval(interval);
+        this.interval.unsubscribe();
       }
-    }, 300);
+      this.cdRef.detectChanges();
-
+    });
-    this.interval = interval;
   }
 
   stopLoading() {
-    clearInterval(this.interval);
+    this.interval.unsubscribe();
     this.progressLevel = 100;
     this.isLoading = false;
+    if (this.timer) this.timer.unsubscribe();
 
-    timer(810).subscribe(() => (this.progressLevel = 0));
+    this.timer = timer(820).subscribe(() => {
+      this.progressLevel = 0;
+      this.cdRef.detectChanges();
+    });
   }
 }

npm/ng-packs/packages/theme-shared/src/lib/services/confirmation.service.ts

@@ -1,10 +1,49 @@
 import { Injectable } from '@angular/core';
 import { AbstractToaster } from '../abstracts/toaster';
 import { Confirmation } from '../models/confirmation';
+import { MessageService } from 'primeng/components/common/messageservice';
+import { fromEvent, Observable, Subject } from 'rxjs';
+import { takeUntil, debounceTime, filter } from 'rxjs/operators';
+import { Toaster } from '../models/toaster';
 
 @Injectable({ providedIn: 'root' })
 export class ConfirmationService extends AbstractToaster<Confirmation.Options> {
   key: string = 'abpConfirmation';
 
   sticky: boolean = true;
+
+  destroy$ = new Subject();
+
+  constructor(protected messageService: MessageService) {
+    super(messageService);
+  }
+
+  show(
+    message: string,
+    title: string,
+    severity: Toaster.Severity,
+    options?: Confirmation.Options,
+  ): Observable<Toaster.Status> {
+    this.listenToEscape();
+
+    return super.show(message, title, severity, options);
+  }
+
+  clear(status?: Toaster.Status) {
+    super.clear(status);
+
+    this.destroy$.next();
+  }
+
+  listenToEscape() {
+    fromEvent(document, 'keyup')
+      .pipe(
+        takeUntil(this.destroy$),
+        debounceTime(150),
+        filter((key: KeyboardEvent) => key && key.code === 'Escape'),
+      )
+      .subscribe(_ => {
+        this.clear();
+      });
+  }
 }