Confirmation Icon Values moved token

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

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { ReplaySubject } from 'rxjs';
 import { Confirmation } from '../../models/confirmation';
+import { ConfirmationIcons } from '../../tokens/confirmation-icons.token';
 
 @Component({
   selector: 'abp-confirmation',
@@ -13,6 +14,7 @@ export class ConfirmationComponent {
   dismiss = Confirmation.Status.dismiss;
 
   confirmation$!: ReplaySubject<Confirmation.DialogData>;
+  icons: ConfirmationIcons;
 
   clear!: (status: Confirmation.Status) => void;
 
@@ -24,18 +26,10 @@ export class ConfirmationComponent {
     if (options && options.icon) {
       return options.icon;
     }
-    switch (severity) {
+    if (!this.icons) {
-      case 'info':
+      return '';
-        return 'fa fa-info-circle';
-      case 'success':
-        return 'fa fa-check-circle';
-      case 'warning':
-        return 'fa fa-exclamation-triangle';
-      case 'error':
-        return 'fa fa-times-circle';
-      default:
-        return 'fa fa-question-circle';
     }
+    return this.icons[severity] || this.icons.default;
   }
 
   isCustomIconExists({ options }: Confirmation.DialogData): boolean {

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;
   validation?: Partial<Validation.Config>;
+  confirmationIcons?: Partial<ConfirmationIcons>;
 }
 
 export type ErrorScreenErrorCodes = 401 | 403 | 404 | 500;

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

@@ -1,9 +1,10 @@
 import { ContentProjectionService, LocalizationParam, PROJECTION_STRATEGY } from '@abp/ng.core';
-import { ComponentRef, Injectable } from '@angular/core';
+import { ComponentRef, Inject, Injectable } from '@angular/core';
 import { fromEvent, Observable, ReplaySubject, Subject } from 'rxjs';
 import { debounceTime, filter, takeUntil } from 'rxjs/operators';
 import { ConfirmationComponent } from '../components/confirmation/confirmation.component';
 import { Confirmation } from '../models/confirmation';
+import { CONFIRMATION_ICONS, ConfirmationIcons } from '../tokens/confirmation-icons.token';
 
 @Injectable({ providedIn: 'root' })
 export class ConfirmationService {
@@ -17,13 +18,17 @@ export class ConfirmationService {
     this.status$.next(status);
   };
 
-  constructor(private contentProjectionService: ContentProjectionService) {}
+  constructor(
+    private contentProjectionService: ContentProjectionService,
+    @Inject(CONFIRMATION_ICONS) private confirmationIcons: ConfirmationIcons,
+  ) {}
 
   private setContainer() {
     this.containerComponentRef = this.contentProjectionService.projectContent(
       PROJECTION_STRATEGY.AppendComponentToBody(ConfirmationComponent, {
         confirmation$: this.confirmation$,
         clear: this.clear,
+        icons: this.confirmationIcons,
       }),
     );
 

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

@@ -6,6 +6,7 @@ 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],
@@ -21,6 +22,7 @@ describe('ConfirmationService', () => {
   const createService = createServiceFactory({
     service: ConfirmationService,
     imports: [CoreTestingModule.withConfig(), MockModule],
+    providers: [{ provide: CONFIRMATION_ICONS, useValue: DEFAULT_CONFIRMATION_ICONS }],
   });
 
   beforeEach(() => {
@@ -61,27 +63,27 @@ describe('ConfirmationService', () => {
   }));
 
   test('should display custom FA icon', fakeAsync(() => {
-    service.show('MESSAGE', 'TITLE',undefined,{
+    service.show('MESSAGE', 'TITLE', undefined, {
-      icon:'fa fa-info'
+      icon: 'fa fa-info',
     });
 
     tick();
-    expect(selectConfirmationElement(".icon").className).toBe('icon fa fa-info')
+    expect(selectConfirmationElement('.icon').className).toBe('icon fa fa-info');
   }));
 
   test('should display custom icon as html element', fakeAsync(() => {
-    const className = 'custom-icon'
+    const className = 'custom-icon';
-    const selector = '.'+className;
+    const selector = '.' + className;
 
-    service.show('MESSAGE', 'TITLE',undefined,{
+    service.show('MESSAGE', 'TITLE', undefined, {
-      iconTemplate: `<span class="${className}">I am icon</span>`
+      iconTemplate: `<span class="${className}">I am icon</span>`,
     });
 
     tick();
 
-    const element = selectConfirmationElement(selector)
+    const element = selectConfirmationElement(selector);
-    expect(element).toBeTruthy()
+    expect(element).toBeTruthy();
-    expect(element.innerHTML).toBe("I am icon")
+    expect(element.innerHTML).toBe('I am icon');
   }));
   test.each`
     type         | selector      | icon

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',
+};