Icon customization properties added to confirmation popup. Issue #11511

docs/en/UI/Angular/Confirmation-Service.md

@@ -75,7 +75,9 @@ const options: Partial<Confirmation.Options> = {
   yesText: 'Confirm',
   messageLocalizationParams: ['Demo'],
   titleLocalizationParams: [],
-};
+  icon: 'fa fa-info-circle',
+  iconTemplate : '<img src="custom-image-path.jpg" alt=""/>'
+} 
 
 this.confirmation.warn(
   'AbpIdentity::RoleDeletionConfirmationMessage',
@@ -91,6 +93,8 @@ this.confirmation.warn(
 - `yesText` is the text of the confirmation button. A localization key or localization object can be passed. Default value is `AbpUi::Yes`.
 - `messageLocalizationParams` is the interpolation parameters for the localization of the message.
 - `titleLocalizationParams` is the interpolation parameters for the localization of the title.
+- `icon` is the custom class of the icon. Default value is `undefined`.
+- `iconTemplate` is the template for icon. Default value is `undefined`.
 
 With the options above, the confirmation popup looks like this:
 

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

@@ -4,8 +4,11 @@
     (click)="data.options?.dismissible ? close(dismiss) : null"
   ></div>
   <div class="confirmation-dialog">
-    <div class="icon-container" [ngClass]="data.severity" *ngIf="data.severity">
+    <div class="icon-container" [ngClass]="data.severity" *ngIf="data.severity || isCustomIconExists(data)">
-      <i class="fa icon" [ngClass]="getIconClass(data)"></i>
+      <div  [outerHTML]="data.options.iconTemplate" *ngIf="isIconTemplateExits(data); else iconHolder" ></div>
+       <ng-template #iconHolder>
+         <i class="icon" [ngClass]="getIconClass(data)"></i>
+       </ng-template>
     </div>
     <div class="content">
       <h1

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

@@ -1,6 +1,6 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
-import { ReplaySubject } from 'rxjs';
+import {ReplaySubject} from 'rxjs';
-import { Confirmation } from '../../models/confirmation';
+import {Confirmation} from '../../models/confirmation';
 
 @Component({
   selector: 'abp-confirmation',
@@ -20,18 +20,30 @@ export class ConfirmationComponent {
     this.clear(status);
   }
 
-  getIconClass({ severity }: Confirmation.DialogData): string {
+  getIconClass({severity, options}: Confirmation.DialogData): string {
+    if (options && options.icon) {
+      return options.icon
+    }
     switch (severity) {
       case 'info':
-        return 'fa-info-circle';
+        return 'fa fa-info-circle';
       case 'success':
-        return 'fa-check-circle';
+        return 'fa fa-check-circle';
       case 'warning':
-        return 'fa-exclamation-triangle';
+        return 'fa fa-exclamation-triangle';
       case 'error':
-        return 'fa-times-circle';
+        return 'fa fa-times-circle';
       default:
-        return 'fa-question-circle';
+        return 'fa fa-question-circle';
     }
   }
+
+  isCustomIconExists({options}: Confirmation.DialogData): boolean {
+    return !!(options && (options.iconTemplate || options.icon))
+  }
+
+  isIconTemplateExits({options}: Confirmation.DialogData): boolean {
+    return !!(options && options.iconTemplate)
+  }
+
 }

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

@@ -1,4 +1,5 @@
 import { LocalizationParam } from '@abp/ng.core';
+import {TemplateRef} from "@angular/core";
 
 export namespace Confirmation {
   export interface Options {
@@ -10,6 +11,8 @@ export namespace Confirmation {
     hideYesBtn?: boolean;
     cancelText?: LocalizationParam;
     yesText?: LocalizationParam;
+    icon?: string;
+    iconTemplate?:string | TemplateRef<any>
   }
 
   export interface DialogData {