feat(theme-shared): add dismissible property to confirmation options

#3686

npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.html

@@ -1,5 +1,8 @@
 <div class="confirmation" *ngIf="confirmation$ | async as data">
-  <div class="confirmation-backdrop"></div>
+  <div
+    class="confirmation-backdrop"
+    (click)="data.options?.dismissible ? close(dismiss) : null"
+  ></div>
   <div class="confirmation-dialog">
     <div class="icon-container" [ngClass]="data.severity" *ngIf="data.severity">
       <i class="fa icon" [ngClass]="getIconClass(data)"></i>

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

@@ -3,13 +3,19 @@ import { Config } from '@abp/ng.core';
 export namespace Confirmation {
   export interface Options {
     id?: any;
-    closable?: boolean;
+    dismissible?: boolean;
     messageLocalizationParams?: string[];
     titleLocalizationParams?: string[];
     hideCancelBtn?: boolean;
     hideYesBtn?: boolean;
     cancelText?: Config.LocalizationParam;
     yesText?: Config.LocalizationParam;
+
+    /**
+     *
+     * @deprecated To be deleted in v2.9
+     */
+    closable?: boolean;
   }
 
   export interface DialogData {

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

@@ -68,7 +68,7 @@ export class ConfirmationService {
     message: Config.LocalizationParam,
     title: Config.LocalizationParam,
     severity?: Confirmation.Severity,
-    options?: Partial<Confirmation.Options>,
+    options = {} as Partial<Confirmation.Options>,
   ): Observable<Confirmation.Status> {
     if (!this.containerComponentRef) this.setContainer();
 
@@ -78,8 +78,11 @@ export class ConfirmationService {
       severity: severity || 'neutral',
       options,
     });
+
     this.status$ = new Subject();
-    this.listenToEscape();
+    const { dismissible = true } = options;
+    if (dismissible) this.listenToEscape();
+
     return this.status$;
   }