fix(theme-shared): fix confirmation and toaster type errors

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

@@ -6,26 +6,28 @@
     </div>
     <div class="content">
       <h1 class="title" *ngIf="data.title">
-        {{ data.title | abpLocalization: titleLocalizationParams }}
+        {{ title }}
       </h1>
       <p class="message" *ngIf="data.message">
-        {{ data.message | abpLocalization: messageLocalizationParams }}
+        {{ message }}
       </p>
     </div>
     <div class="footer">
       <button
+        id="cancel"
         class="confirmation-button confirmation-button-reject"
-        *ngIf="data.options || !data.options.hideCancelBtn"
+        *ngIf="!data?.options?.hideCancelBtn"
         (click)="close(reject)"
       >
-        {{ data.options?.cancelText || 'AbpUi:Cancel' }}
+        {{ data.options?.cancelText || 'AbpUi::Cancel' | abpLocalization }}
       </button>
       <button
+        id="confirm"
         class="confirmation-button confirmation-button-approve"
-        *ngIf="data.options || !data.options.hideYesBtn"
+        *ngIf="!data?.options?.hideYesBtn"
         (click)="close(confirm)"
       >
-        {{ data.options?.yesText || 'AbpUi:Yes' }}
+        {{ data.options?.yesText || 'AbpUi::Yes' | abpLocalization }}
       </button>
     </div>
   </div>

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

@@ -32,17 +32,17 @@ export class ConfirmationComponent {
     }
   }
 
-  get titleLocalizationParams(): string {
+  get title(): string {
     return this.localizationService.instant(
       this.data.title,
-      ...this.data.options.titleLocalizationParams,
+      ...(this.data.options.titleLocalizationParams || []),
     );
   }
 
-  get messageLocalizationParams(): string {
+  get message(): string {
     return this.localizationService.instant(
       this.data.message,
-      ...this.data.options.messageLocalizationParams,
+      ...(this.data.options.messageLocalizationParams || []),
     );
   }
 

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

@@ -1,4 +1,3 @@
-import { Toaster } from './toaster';
 import { Config } from '@abp/ng.core';
 
 export namespace Confirmation {

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

@@ -1,3 +1,5 @@
+import { Config } from '@abp/ng.core';
+
 export namespace Toaster {
   export interface ToastOptions {
     life?: number;
@@ -11,8 +13,8 @@ export namespace Toaster {
   }
 
   export interface Toast {
-    message: string;
-    title?: string;
+    message: Config.LocalizationParam;
+    title?: Config.LocalizationParam;
     severity?: string;
     options?: ToastOptions;
   }

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

@@ -48,7 +48,6 @@ export class ConfirmationService {
     severity?: Toaster.Severity,
     options?: Partial<Confirmation.Options>,
   ): Observable<Toaster.Status> {
-    this.listenToEscape();
     this.confirmation$.next({
       message,
       title: title || 'AbpUi:AreYouSure',
@@ -56,6 +55,7 @@ export class ConfirmationService {
       options,
     });
     this.status$ = new Subject();
+    this.listenToEscape();
     return this.status$;
   }
 

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

@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Toaster } from '../models';
 import { ReplaySubject } from 'rxjs';
+import { Config } from '@abp/ng.core';
 
 @Injectable({
   providedIn: 'root',
@@ -18,7 +19,11 @@ export class ToasterService {
    * @param title Title of the toast
    * @param options Spesific style or structural options for individual toast
    */
-  info(message: string, title?: string, options?: Partial<Toaster.ToastOptions>) {
+  info(
+    message: Config.LocalizationParam,
+    title?: Config.LocalizationParam,
+    options?: Partial<Toaster.ToastOptions>,
+  ) {
     return this.show(message, title, 'info', options);
   }
 
@@ -28,7 +33,11 @@ export class ToasterService {
    * @param title Title of the toast
    * @param options Spesific style or structural options for individual toast
    */
-  success(message: string, title?: string, options?: Partial<Toaster.ToastOptions>) {
+  success(
+    message: Config.LocalizationParam,
+    title?: Config.LocalizationParam,
+    options?: Partial<Toaster.ToastOptions>,
+  ) {
     return this.show(message, title, 'success', options);
   }
 
@@ -38,7 +47,11 @@ export class ToasterService {
    * @param title Title of the toast
    * @param options Spesific style or structural options for individual toast
    */
-  warn(message: string, title?: string, options?: Partial<Toaster.ToastOptions>) {
+  warn(
+    message: Config.LocalizationParam,
+    title?: Config.LocalizationParam,
+    options?: Partial<Toaster.ToastOptions>,
+  ) {
     return this.show(message, title, 'warning', options);
   }
 
@@ -48,7 +61,11 @@ export class ToasterService {
    * @param title Title of the toast
    * @param options Spesific style or structural options for individual toast
    */
-  error(message: string, title?: string, options?: Partial<Toaster.ToastOptions>) {
+  error(
+    message: Config.LocalizationParam,
+    title?: Config.LocalizationParam,
+    options?: Partial<Toaster.ToastOptions>,
+  ) {
     return this.show(message, title, 'error', options);
   }
 
@@ -61,8 +78,8 @@ export class ToasterService {
    */
 
   show(
-    message: string,
-    title: string = null,
+    message: Config.LocalizationParam,
+    title: Config.LocalizationParam = null,
     severity: Toaster.Severity = 'neutral',
     options: Partial<Toaster.ToastOptions> = null,
   ) {

npm/ng-packs/packages/theme-shared/src/lib/tests/error.handler.spec.ts

@@ -73,10 +73,10 @@ describe('ErrorHandler', () => {
   it('should display the confirmation when not found error occurs', () => {
     store.dispatch(new RestOccurError(new HttpErrorResponse({ status: 404 })));
     spectator.detectChanges();
-    expect(spectator.query('.abp-confirm-summary')).toHaveText(
+    expect(spectator.query('.confirmation .title')).toHaveText(
       DEFAULT_ERROR_MESSAGES.defaultError404.title,
     );
-    expect(spectator.query('.abp-confirm-body')).toHaveText(
+    expect(spectator.query('.confirmation .message')).toHaveText(
       DEFAULT_ERROR_MESSAGES.defaultError404.details,
     );
   });
@@ -84,10 +84,10 @@ describe('ErrorHandler', () => {
   it('should display the confirmation when default error occurs', () => {
     store.dispatch(new RestOccurError(new HttpErrorResponse({ status: 412 })));
     spectator.detectChanges();
-    expect(spectator.query('.abp-confirm-summary')).toHaveText(
+    expect(spectator.query('.confirmation .title')).toHaveText(
       DEFAULT_ERROR_MESSAGES.defaultError.title,
     );
-    expect(spectator.query('.abp-confirm-body')).toHaveText(
+    expect(spectator.query('.confirmation .message')).toHaveText(
       DEFAULT_ERROR_MESSAGES.defaultError.details,
     );
   });
@@ -128,8 +128,9 @@ describe('ErrorHandler', () => {
     );
     spectator.detectChanges();
 
-    expect(spectator.query('.abp-confirm-summary')).toHaveText('test message');
-    expect(spectator.query('.abp-confirm-body')).toHaveText('test detail');
+    console.warn(spectator.query('.confirmation'));
+    expect(spectator.query('.title')).toHaveText('test message');
+    expect(spectator.query('.confirmation .message')).toHaveText('test detail');
   });
 });
 

npm/ng-packs/packages/theme-shared/src/lib/tests/modal.component.spec.ts

@@ -5,14 +5,18 @@ import { MessageService } from 'primeng/components/common/messageservice';
 import { ToastModule } from 'primeng/toast';
 import { timer } from 'rxjs';
 import { ButtonComponent, ConfirmationComponent, ModalComponent } from '../components';
+import { RouterTestingModule } from '@angular/router/testing';
 
 describe('ModalComponent', () => {
-  let spectator: SpectatorHost<ModalComponent, { visible: boolean; busy: boolean; ngDirty: boolean }>;
+  let spectator: SpectatorHost<
+    ModalComponent,
+    { visible: boolean; busy: boolean; ngDirty: boolean }
+  >;
   let appearFn;
   let disappearFn;
   const createHost = createHostFactory({
     component: ModalComponent,
-    imports: [ToastModule],
+    imports: [ToastModule, RouterTestingModule],
     declarations: [ConfirmationComponent, LocalizationPipe, ButtonComponent],
     providers: [MessageService],
     mocks: [Store],
@@ -82,7 +86,7 @@ describe('ModalComponent', () => {
       spectator.click('#abp-modal-close-button');
       expect(disappearFn).not.toHaveBeenCalled();
 
-      expect(spectator.query('p-toast')).toBeTruthy();
+      expect(spectator.query('div.confirmation')).toBeTruthy();
       spectator.click('button#cancel');
       expect(spectator.query('div.modal')).toBeTruthy();