diff --git a/docs/en/UI/Angular/Confirmation-Service.md b/docs/en/UI/Angular/Confirmation-Service.md index ef48332580..e2bd1107e3 100644 --- a/docs/en/UI/Angular/Confirmation-Service.md +++ b/docs/en/UI/Angular/Confirmation-Service.md @@ -75,7 +75,10 @@ const options: Partial = { yesText: 'Confirm', messageLocalizationParams: ['Demo'], titleLocalizationParams: [], -}; + // You can customize icon + // icon: 'fa fa-exclamation-triangle', // or + // iconTemplate : '' +} 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 diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.html index 47c555a16b..735055971d 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.html +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.html @@ -4,8 +4,11 @@ (click)="data.options?.dismissible ? close(dismiss) : null" >
-
- +
+
+ + +

; + confirmationIcons?: Partial; } export type ErrorScreenErrorCodes = 401 | 403 | 404 | 500; diff --git a/npm/ng-packs/packages/theme-shared/src/lib/models/confirmation.ts b/npm/ng-packs/packages/theme-shared/src/lib/models/confirmation.ts index 18a0d5ef3e..9ca4076187 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/models/confirmation.ts +++ b/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 { diff --git a/npm/ng-packs/packages/theme-shared/src/lib/services/confirmation.service.ts b/npm/ng-packs/packages/theme-shared/src/lib/services/confirmation.service.ts index 6f5ed1bc11..02840743da 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/services/confirmation.service.ts +++ b/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(); }); } diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tests/confirmation.service.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/confirmation.service.spec.ts index a695564069..5674a501de 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/tests/confirmation.service.spec.ts +++ b/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: `I am icon`, + }); + + 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'} diff --git a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts index 3f7ce92f77..6240925054 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts +++ b/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: [ - CoreModule, - NgxDatatableModule, - NgxValidateCoreModule, - NgbPaginationModule, - EllipsisModule, - ], - declarations: [...declarationsWithExports, HttpErrorWrapperComponent], - exports: [NgxDatatableModule, EllipsisModule, ...declarationsWithExports], - providers: [DatePipe] + imports: [ + CoreModule, + NgxDatatableModule, + NgxValidateCoreModule, + NgbPaginationModule, + EllipsisModule, + ], + declarations: [...declarationsWithExports, HttpErrorWrapperComponent], + exports: [NgxDatatableModule, EllipsisModule, ...declarationsWithExports], + 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 { return { ngModule: ThemeSharedModule, @@ -119,6 +120,13 @@ export class ThemeSharedModule { multi: true, deps: [DocumentDirHandlerService], }, + { + provide: CONFIRMATION_ICONS, + useValue: { + ...DEFAULT_CONFIRMATION_ICONS, + ...(confirmationIcons || {}), + }, + }, ], }; } diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tokens/confirmation-icons.token.ts b/npm/ng-packs/packages/theme-shared/src/lib/tokens/confirmation-icons.token.ts new file mode 100644 index 0000000000..0c001cd9d6 --- /dev/null +++ b/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>( + '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', +};