From 9f2e227b67fbcd99e3826bd65f104280a4c18c99 Mon Sep 17 00:00:00 2001 From: Mahmut Gundogdu Date: Mon, 14 Feb 2022 17:26:20 +0300 Subject: [PATCH 1/8] Icon customization properties added to confirmation popup. Issue #11511 --- docs/en/UI/Angular/Confirmation-Service.md | 6 +++- .../confirmation/confirmation.component.html | 7 +++-- .../confirmation/confirmation.component.ts | 30 +++++++++++++------ .../src/lib/models/confirmation.ts | 3 ++ 4 files changed, 34 insertions(+), 12 deletions(-) diff --git a/docs/en/UI/Angular/Confirmation-Service.md b/docs/en/UI/Angular/Confirmation-Service.md index ef48332580..6a869fa317 100644 --- a/docs/en/UI/Angular/Confirmation-Service.md +++ b/docs/en/UI/Angular/Confirmation-Service.md @@ -75,7 +75,9 @@ const options: Partial = { yesText: 'Confirm', messageLocalizationParams: ['Demo'], titleLocalizationParams: [], -}; + icon: 'fa fa-info-circle', + iconTemplate : '' +} 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: 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" >
-
- +
+
+ + +

} export interface DialogData { From 0795ee3fb8afb2e40e81b51dde05883cd2891121 Mon Sep 17 00:00:00 2001 From: Mahmut Gundogdu Date: Tue, 15 Feb 2022 10:40:29 +0300 Subject: [PATCH 2/8] Custom icon tests added the confirmation service --- docs/en/UI/Angular/Confirmation-Service.md | 5 ++-- .../src/lib/models/confirmation.ts | 2 +- .../lib/tests/confirmation.service.spec.ts | 23 +++++++++++++++++++ 3 files changed, 27 insertions(+), 3 deletions(-) diff --git a/docs/en/UI/Angular/Confirmation-Service.md b/docs/en/UI/Angular/Confirmation-Service.md index 6a869fa317..78c78eb2d6 100644 --- a/docs/en/UI/Angular/Confirmation-Service.md +++ b/docs/en/UI/Angular/Confirmation-Service.md @@ -75,8 +75,9 @@ const options: Partial = { yesText: 'Confirm', messageLocalizationParams: ['Demo'], titleLocalizationParams: [], - icon: 'fa fa-info-circle', - iconTemplate : '' + // You can customize icon + // icon: 'fa fa-exclamation-triangle', // or + // iconTemplate : '' } this.confirmation.warn( 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 e33df96f20..e19ca43a1b 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 @@ -12,7 +12,7 @@ export namespace Confirmation { cancelText?: LocalizationParam; yesText?: LocalizationParam; icon?: string; - iconTemplate?:string | TemplateRef + iconTemplate?:string } export interface DialogData { 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..ec06073962 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 @@ -60,6 +60,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'} From 6432e54f95c966058dee72fb24d96a53a8b3b8d9 Mon Sep 17 00:00:00 2001 From: Mahmut Gundogdu Date: Tue, 15 Feb 2022 10:48:50 +0300 Subject: [PATCH 3/8] Lint errors was fixed --- .../packages/theme-shared/src/lib/models/confirmation.ts | 1 - .../theme-shared/src/lib/services/confirmation.service.ts | 6 +++--- 2 files changed, 3 insertions(+), 4 deletions(-) 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 e19ca43a1b..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 @@ -1,5 +1,4 @@ import { LocalizationParam } from '@abp/ng.core'; -import {TemplateRef} from "@angular/core"; export namespace Confirmation { export interface Options { 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..8ad925ee5b 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 @@ -2,8 +2,8 @@ import { ContentProjectionService, LocalizationParam, PROJECTION_STRATEGY } from import { ComponentRef, 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 { ConfirmationComponent } from '../components'; +import { Confirmation } from '../models'; @Injectable({ providedIn: 'root' }) export class ConfirmationService { @@ -93,7 +93,7 @@ export class ConfirmationService { debounceTime(150), filter((key: KeyboardEvent) => key && key.key === 'Escape'), ) - .subscribe(_ => { + .subscribe(() => { this.clear(); }); } From 3a58bc2efecdff7d1fc367f776aef866ed6d39f5 Mon Sep 17 00:00:00 2001 From: Mahmut Gundogdu Date: Tue, 15 Feb 2022 14:11:15 +0300 Subject: [PATCH 4/8] Path of dependencies of component service changes rollback --- .../theme-shared/src/lib/services/confirmation.service.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 8ad925ee5b..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 @@ -2,8 +2,8 @@ import { ContentProjectionService, LocalizationParam, PROJECTION_STRATEGY } from import { ComponentRef, Injectable } from '@angular/core'; import { fromEvent, Observable, ReplaySubject, Subject } from 'rxjs'; import { debounceTime, filter, takeUntil } from 'rxjs/operators'; -import { ConfirmationComponent } from '../components'; -import { Confirmation } from '../models'; +import { ConfirmationComponent } from '../components/confirmation/confirmation.component'; +import { Confirmation } from '../models/confirmation'; @Injectable({ providedIn: 'root' }) export class ConfirmationService { From 8be74265c8f6562160c4626863e6b7f113afa6a8 Mon Sep 17 00:00:00 2001 From: Mahmut Gundogdu Date: Tue, 15 Feb 2022 14:19:50 +0300 Subject: [PATCH 5/8] confirmation.component.ts reformatted with Prettier --- .../confirmation/confirmation.component.ts | 21 +++++++++---------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts index cefcee447a..4420251ea6 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts @@ -1,7 +1,7 @@ -import {Component} from '@angular/core'; -import {ReplaySubject} from 'rxjs'; -import {Confirmation} from '../../models/confirmation'; - +import { Component } from '@angular/core'; +import { ReplaySubject } from 'rxjs'; +import { Confirmation } from '../../models/confirmation'; +// @Component({ selector: 'abp-confirmation', templateUrl: './confirmation.component.html', @@ -20,9 +20,9 @@ export class ConfirmationComponent { this.clear(status); } - getIconClass({severity, options}: Confirmation.DialogData): string { + getIconClass({ severity, options }: Confirmation.DialogData): string { if (options && options.icon) { - return options.icon + return options.icon; } switch (severity) { case 'info': @@ -38,12 +38,11 @@ export class ConfirmationComponent { } } - isCustomIconExists({options}: Confirmation.DialogData): boolean { - return !!(options && (options.iconTemplate || options.icon)) + isCustomIconExists({ options }: Confirmation.DialogData): boolean { + return !!(options && (options.iconTemplate || options.icon)); } - isIconTemplateExits({options}: Confirmation.DialogData): boolean { - return !!(options && options.iconTemplate) + isIconTemplateExits({ options }: Confirmation.DialogData): boolean { + return !!(options && options.iconTemplate); } - } From 8b63a6e98e814b205cbec46aa48285a2428185a3 Mon Sep 17 00:00:00 2001 From: Mahmut Gundogdu Date: Tue, 15 Feb 2022 14:20:47 +0300 Subject: [PATCH 6/8] unused comment operator removed --- .../src/lib/components/confirmation/confirmation.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts index 4420251ea6..fb5a8d5ef9 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; import { ReplaySubject } from 'rxjs'; import { Confirmation } from '../../models/confirmation'; -// + @Component({ selector: 'abp-confirmation', templateUrl: './confirmation.component.html', From 726b8ca3e8c96f2f2a6be318e4542ad0ad435665 Mon Sep 17 00:00:00 2001 From: Mahmut Gundogdu Date: Tue, 15 Feb 2022 16:49:16 +0300 Subject: [PATCH 7/8] Confirmation Icon Values moved token --- .../confirmation/confirmation.component.ts | 16 ++++------ .../theme-shared/src/lib/models/common.ts | 2 ++ .../src/lib/services/confirmation.service.ts | 9 ++++-- .../lib/tests/confirmation.service.spec.ts | 22 +++++++------- .../src/lib/theme-shared.module.ts | 30 ++++++++++++------- .../lib/tokens/confirmation-icons.token.ts | 21 +++++++++++++ 6 files changed, 66 insertions(+), 34 deletions(-) create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/tokens/confirmation-icons.token.ts diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts index fb5a8d5ef9..fcaec92d1f 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts +++ b/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; + icons: ConfirmationIcons; clear!: (status: Confirmation.Status) => void; @@ -24,18 +26,10 @@ export class ConfirmationComponent { if (options && options.icon) { return options.icon; } - switch (severity) { - case 'info': - 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'; + if (!this.icons) { + return ''; } + return this.icons[severity] || this.icons.default; } isCustomIconExists({ options }: Confirmation.DialogData): boolean { diff --git a/npm/ng-packs/packages/theme-shared/src/lib/models/common.ts b/npm/ng-packs/packages/theme-shared/src/lib/models/common.ts index 0e8dd9e592..a4df438629 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/models/common.ts +++ b/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; + confirmationIcons?: Partial; } export type ErrorScreenErrorCodes = 401 | 403 | 404 | 500; 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 02840743da..6e48843d33 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 @@ -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, }), ); 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 ec06073962..98bb444c64 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,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,{ - icon:'fa fa-info' + service.show('MESSAGE', 'TITLE', undefined, { + 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 selector = '.'+className; + const className = 'custom-icon'; + const selector = '.' + className; - service.show('MESSAGE', 'TITLE',undefined,{ - iconTemplate: `I am icon` + service.show('MESSAGE', 'TITLE', undefined, { + iconTemplate: `I am icon`, }); tick(); - const element = selectConfirmationElement(selector) - expect(element).toBeTruthy() - expect(element.innerHTML).toBe("I am icon") + const element = selectConfirmationElement(selector); + expect(element).toBeTruthy(); + expect(element.innerHTML).toBe('I am icon'); })); test.each` type | selector | icon 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', +}; From 323128ac02dc26f49c582483995d984677649a95 Mon Sep 17 00:00:00 2001 From: Mahmut Gundogdu Date: Wed, 16 Feb 2022 16:21:01 +0300 Subject: [PATCH 8/8] Confirmation Icon can change via DI. --- docs/en/UI/Angular/Confirmation-Service.md | 19 +++++++++++++++++++ .../confirmation/confirmation.component.ts | 7 ++++--- .../theme-shared/src/lib/models/common.ts | 2 +- .../src/lib/services/confirmation.service.ts | 9 ++------- .../lib/tests/confirmation.service.spec.ts | 2 +- 5 files changed, 27 insertions(+), 12 deletions(-) diff --git a/docs/en/UI/Angular/Confirmation-Service.md b/docs/en/UI/Angular/Confirmation-Service.md index 78c78eb2d6..e2bd1107e3 100644 --- a/docs/en/UI/Angular/Confirmation-Service.md +++ b/docs/en/UI/Angular/Confirmation-Service.md @@ -131,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.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts index fcaec92d1f..53e09d9788 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts @@ -1,7 +1,7 @@ -import { Component } from '@angular/core'; +import { Component, Inject } from '@angular/core'; import { ReplaySubject } from 'rxjs'; import { Confirmation } from '../../models/confirmation'; -import { ConfirmationIcons } from '../../tokens/confirmation-icons.token'; +import { CONFIRMATION_ICONS, ConfirmationIcons } from '../../tokens/confirmation-icons.token'; @Component({ selector: 'abp-confirmation', @@ -9,12 +9,13 @@ import { ConfirmationIcons } from '../../tokens/confirmation-icons.token'; 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; confirmation$!: ReplaySubject; - icons: ConfirmationIcons; clear!: (status: Confirmation.Status) => void; diff --git a/npm/ng-packs/packages/theme-shared/src/lib/models/common.ts b/npm/ng-packs/packages/theme-shared/src/lib/models/common.ts index a4df438629..9ddbe0f5be 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/models/common.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/models/common.ts @@ -5,7 +5,7 @@ import { Observable } from 'rxjs'; import { ConfirmationIcons } from '../tokens/confirmation-icons.token'; export interface RootParams { - httpErrorConfig: HttpErrorConfig; + httpErrorConfig?: HttpErrorConfig; validation?: Partial; confirmationIcons?: Partial; } 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 6e48843d33..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 @@ -1,10 +1,9 @@ import { ContentProjectionService, LocalizationParam, PROJECTION_STRATEGY } from '@abp/ng.core'; -import { ComponentRef, Inject, Injectable } from '@angular/core'; +import { ComponentRef, 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 { @@ -18,17 +17,13 @@ export class ConfirmationService { this.status$.next(status); }; - constructor( - private contentProjectionService: ContentProjectionService, - @Inject(CONFIRMATION_ICONS) private confirmationIcons: ConfirmationIcons, - ) {} + constructor(private contentProjectionService: ContentProjectionService) {} private setContainer() { this.containerComponentRef = this.contentProjectionService.projectContent( PROJECTION_STRATEGY.AppendComponentToBody(ConfirmationComponent, { confirmation$: this.confirmation$, clear: this.clear, - icons: this.confirmationIcons, }), ); 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 98bb444c64..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 @@ -13,6 +13,7 @@ import { CONFIRMATION_ICONS, DEFAULT_CONFIRMATION_ICONS } from '../tokens/confir entryComponents: [ConfirmationComponent], declarations: [ConfirmationComponent], imports: [CoreTestingModule.withConfig()], + providers: [{ provide: CONFIRMATION_ICONS, useValue: DEFAULT_CONFIRMATION_ICONS }], }) export class MockModule {} @@ -22,7 +23,6 @@ describe('ConfirmationService', () => { const createService = createServiceFactory({ service: ConfirmationService, imports: [CoreTestingModule.withConfig(), MockModule], - providers: [{ provide: CONFIRMATION_ICONS, useValue: DEFAULT_CONFIRMATION_ICONS }], }); beforeEach(() => {