Merge pull request #11576 from abpframework/feature/issue-11511

Icon customization properties added to confirmation popup. Issue #11511

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

@@ -75,7 +75,10 @@ const options: Partial<Confirmation.Options> = {
   yesText: 'Confirm',
   messageLocalizationParams: ['Demo'],
   titleLocalizationParams: [],
-};
+  // You can customize icon 
+  // icon: 'fa fa-exclamation-triangle', // or
+  // iconTemplate : '<img src="custom-image-path.jpg" alt=""/>'
+} 
 
 this.confirmation.warn(
   'AbpIdentity::RoleDeletionConfirmationMessage',
@@ -91,6 +94,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:
 
@@ -126,6 +131,25 @@ The open confirmation popup can be removed manually via the `clear` method:
 this.confirmation.clear();
 ```
 
+### How to Change Icons of The Confirmation Popup
+
+You can change icons with the token of "confirmationIcons" in ThemeSharedModule in the app.module.ts. The changes will affect  all confirmation popup in the project.
+
+```js
+...
+ThemeSharedModule.forRoot({
+  confirmationIcons: {
+    info: 'fa fa-info-circle',
+    success: 'fa fa-check-circle',
+    warning: 'fa fa-exclamation-triangle',
+    error: 'fa fa-times-circle',
+    default: 'fa fa-question-circle',
+  },
+}),
+...
+```
+
+
 ## API
 
 ### success

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,7 @@
-import { Component } from '@angular/core';
+import { Component, Inject } from '@angular/core';
 import { ReplaySubject } from 'rxjs';
 import { Confirmation } from '../../models/confirmation';
+import { CONFIRMATION_ICONS, ConfirmationIcons } from '../../tokens/confirmation-icons.token';
 
 @Component({
   selector: 'abp-confirmation',
@@ -8,6 +9,8 @@ import { Confirmation } from '../../models/confirmation';
   styleUrls: ['./confirmation.component.scss'],
 })
 export class ConfirmationComponent {
+  constructor(@Inject(CONFIRMATION_ICONS) private icons: ConfirmationIcons) {}
+
   confirm = Confirmation.Status.confirm;
   reject = Confirmation.Status.reject;
   dismiss = Confirmation.Status.dismiss;
@@ -20,18 +23,21 @@ export class ConfirmationComponent {
     this.clear(status);
   }
 
-  getIconClass({ severity }: Confirmation.DialogData): string {
+  getIconClass({ severity, options }: Confirmation.DialogData): string {
-    switch (severity) {
+    if (options && options.icon) {
-      case 'info':
+      return options.icon;
-        return 'fa-info-circle';
+    }
-      case 'success':
+    if (!this.icons) {
-        return 'fa-check-circle';
+      return '';
-      case 'warning':
-        return 'fa-exclamation-triangle';
-      case 'error':
-        return 'fa-times-circle';
-      default:
-        return 'fa-question-circle';
     }
+    return this.icons[severity] || this.icons.default;
+  }
+
+  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/common.ts

@@ -2,10 +2,12 @@ import { HttpErrorResponse } from '@angular/common/http';
 import { Injector, Type } from '@angular/core';
 import { Validation } from '@ngx-validate/core';
 import { Observable } from 'rxjs';
+import { ConfirmationIcons } from '../tokens/confirmation-icons.token';
 
 export interface RootParams {
-  httpErrorConfig: HttpErrorConfig;
+  httpErrorConfig?: HttpErrorConfig;
   validation?: Partial<Validation.Config>;
+  confirmationIcons?: Partial<ConfirmationIcons>;
 }
 
 export type ErrorScreenErrorCodes = 401 | 403 | 404 | 500;

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

@@ -10,6 +10,8 @@ export namespace Confirmation {
     hideYesBtn?: boolean;
     cancelText?: LocalizationParam;
     yesText?: LocalizationParam;
+    icon?: string;
+    iconTemplate?:string
   }
 
   export interface DialogData {

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

@@ -93,7 +93,7 @@ export class ConfirmationService {
         debounceTime(150),
         filter((key: KeyboardEvent) => key && key.key === 'Escape'),
       )
-      .subscribe(_ => {
+      .subscribe(() => {
         this.clear();
       });
   }

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

@@ -6,12 +6,14 @@ import { timer } from 'rxjs';
 import { ConfirmationComponent } from '../components';
 import { Confirmation } from '../models';
 import { ConfirmationService } from '../services';
+import { CONFIRMATION_ICONS, DEFAULT_CONFIRMATION_ICONS } from '../tokens/confirmation-icons.token';
 
 @NgModule({
   exports: [ConfirmationComponent],
   entryComponents: [ConfirmationComponent],
   declarations: [ConfirmationComponent],
   imports: [CoreTestingModule.withConfig()],
+  providers: [{ provide: CONFIRMATION_ICONS, useValue: DEFAULT_CONFIRMATION_ICONS }],
 })
 export class MockModule {}
 
@@ -60,6 +62,29 @@ describe('ConfirmationService', () => {
     expect(selectConfirmationContent('.custom-yes')).toBe('YES');
   }));
 
+  test('should display custom FA icon', fakeAsync(() => {
+    service.show('MESSAGE', 'TITLE', undefined, {
+      icon: 'fa fa-info',
+    });
+
+    tick();
+    expect(selectConfirmationElement('.icon').className).toBe('icon fa fa-info');
+  }));
+
+  test('should display custom icon as html element', fakeAsync(() => {
+    const className = 'custom-icon';
+    const selector = '.' + className;
+
+    service.show('MESSAGE', 'TITLE', undefined, {
+      iconTemplate: `<span class="${className}">I am icon</span>`,
+    });
+
+    tick();
+
+    const element = selectConfirmationElement(selector);
+    expect(element).toBeTruthy();
+    expect(element.innerHTML).toBe('I am icon');
+  }));
   test.each`
     type         | selector      | icon
     ${'info'}    | ${'.info'}    | ${'.fa-info-circle'}

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

@@ -34,6 +34,7 @@ import { THEME_SHARED_ROUTE_PROVIDERS } from './providers/route.provider';
 import { THEME_SHARED_APPEND_CONTENT } from './tokens/append-content.token';
 import { httpErrorConfigFactory, HTTP_ERROR_CONFIG } from './tokens/http-error.token';
 import { DateParserFormatter } from './utils/date-parser-formatter';
+import { CONFIRMATION_ICONS, DEFAULT_CONFIRMATION_ICONS } from './tokens/confirmation-icons.token';
 
 const declarationsWithExports = [
   BreadcrumbComponent,
@@ -52,16 +53,16 @@ const declarationsWithExports = [
 ];
 
 @NgModule({
-    imports: [
+  imports: [
-        CoreModule,
+    CoreModule,
-        NgxDatatableModule,
+    NgxDatatableModule,
-        NgxValidateCoreModule,
+    NgxValidateCoreModule,
-        NgbPaginationModule,
+    NgbPaginationModule,
-        EllipsisModule,
+    EllipsisModule,
-    ],
+  ],
-    declarations: [...declarationsWithExports, HttpErrorWrapperComponent],
+  declarations: [...declarationsWithExports, HttpErrorWrapperComponent],
-    exports: [NgxDatatableModule, EllipsisModule, ...declarationsWithExports],
+  exports: [NgxDatatableModule, EllipsisModule, ...declarationsWithExports],
-    providers: [DatePipe]
+  providers: [DatePipe],
 })
 export class BaseThemeSharedModule {}
 
@@ -71,7 +72,7 @@ export class BaseThemeSharedModule {}
 })
 export class ThemeSharedModule {
   static forRoot(
-    { httpErrorConfig, validation = {} } = {} as RootParams,
+    { httpErrorConfig, validation = {}, confirmationIcons = {} } = {} as RootParams,
   ): ModuleWithProviders<ThemeSharedModule> {
     return {
       ngModule: ThemeSharedModule,
@@ -119,6 +120,13 @@ export class ThemeSharedModule {
           multi: true,
           deps: [DocumentDirHandlerService],
         },
+        {
+          provide: CONFIRMATION_ICONS,
+          useValue: {
+            ...DEFAULT_CONFIRMATION_ICONS,
+            ...(confirmationIcons || {}),
+          },
+        },
       ],
     };
   }

npm/ng-packs/packages/theme-shared/src/lib/tokens/confirmation-icons.token.ts

@@ -0,0 +1,21 @@
+import { InjectionToken } from '@angular/core';
+
+export interface ConfirmationIcons {
+  info: string;
+  success: string;
+  warning: string;
+  error: string;
+  default: string;
+}
+
+export const CONFIRMATION_ICONS = new InjectionToken<Partial<ConfirmationIcons>>(
+  'CONFIRMATION_ICONS',
+);
+
+export const DEFAULT_CONFIRMATION_ICONS: ConfirmationIcons = {
+  info: 'fa fa-info-circle',
+  success: 'fa fa-check-circle',
+  warning: 'fa fa-exclamation-triangle',
+  error: 'fa fa-times-circle',
+  default: 'fa fa-question-circle',
+};