Merge pull request #3738 from abpframework/feat/3710

Allowed HTML Title, Message, and Button Content in Confirmation Dialog

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

@@ -94,6 +94,28 @@ With the options above, the confirmation popup looks like this:
 
 ![confirmation](./images/confirmation.png)
 
+You are able to pass in an HTML string as title, message, or button texts. Here is an example:
+
+```js
+const options: Partial<Confirmation.Options> = {
+  yesText: '<i class="fa fa-trash mr-1"></i>Yes, delete it',
+};
+
+this.confirmation.warn(
+  `
+    <strong>Role Demo</strong> will be <strong>deleted</strong>
+    <br>
+    Do you confirm that?
+  `,
+  '<span class="my-custom-title">Are you sure?</span>',
+  options,
+);
+```
+
+Since the values are HTML now, localization should be handled manually. Check out the [LocalizationService](./Localization#using-the-localization-service) to see how you can accomplish that.
+
+> Please note that all strings will be sanitized by Angular and not every HTML string will work. Only values that are considered as "safe" by Angular will be displayed.
+
 ### How to Remove a Confirmation Popup
 
 The open confirmation popup can be removed manually via the `clear` method:

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

@@ -5,30 +5,32 @@
       <i class="fa icon" [ngClass]="iconClass"></i>
     </div>
     <div class="content">
-      <h1 class="title" *ngIf="data.title">
-        {{ data.title | abpLocalization: data.options?.titleLocalizationParams }}
-      </h1>
-      <p class="message" *ngIf="data.message">
-        {{ data.message | abpLocalization: data.options?.messageLocalizationParams }}
-      </p>
+      <h1
+        class="title"
+        *ngIf="data.title"
+        [innerHTML]="data.title | abpLocalization: data.options?.titleLocalizationParams"
+      ></h1>
+      <p
+        class="message"
+        *ngIf="data.message"
+        [innerHTML]="data.message | abpLocalization: data.options?.messageLocalizationParams"
+      ></p>
     </div>
     <div class="footer">
       <button
         id="cancel"
         class="confirmation-button confirmation-button--reject"
+        [innerHTML]="data.options?.cancelText || 'AbpUi::Cancel'"
         *ngIf="!data?.options?.hideCancelBtn"
         (click)="close(reject)"
-      >
-        {{ data.options?.cancelText || 'AbpUi::Cancel' | abpLocalization }}
-      </button>
+      ></button>
       <button
         id="confirm"
         class="confirmation-button confirmation-button--approve"
+        [innerHTML]="data.options?.yesText || 'AbpUi::Yes'"
         *ngIf="!data?.options?.hideYesBtn"
         (click)="close(confirm)"
-      >
-        {{ data.options?.yesText || 'AbpUi::Yes' | abpLocalization }}
-      </button>
+      ></button>
     </div>
   </div>
 </div>

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

@@ -43,6 +43,25 @@ describe('ConfirmationService', () => {
     expect(selectConfirmationContent('.message')).toBe('MESSAGE');
   }));
 
+  test('should display HTML string in title, message, and buttons', fakeAsync(() => {
+    service.show(
+      '<span class="custom-message">MESSAGE<span>',
+      '<span class="custom-title">TITLE<span>',
+      'neutral',
+      {
+        cancelText: '<span class="custom-cancel">CANCEL</span>',
+        yesText: '<span class="custom-yes">YES</span>',
+      },
+    );
+
+    tick();
+
+    expect(selectConfirmationContent('.custom-title')).toBe('TITLE');
+    expect(selectConfirmationContent('.custom-message')).toBe('MESSAGE');
+    expect(selectConfirmationContent('.custom-cancel')).toBe('CANCEL');
+    expect(selectConfirmationContent('.custom-yes')).toBe('YES');
+  }));
+
   test.each`
     type         | selector      | icon
     ${'info'}    | ${'.info'}    | ${'.fa-info-circle'}