From da046770940ceba0ea1ac5b0ff9f32ff19881a87 Mon Sep 17 00:00:00 2001
From: Arman Ozak <arman@armanozak.com>
Date: Sat, 25 Apr 2020 14:46:12 +0300
Subject: [PATCH 1/2] feat: allow title, message, and buttons to have HTML
 string

---
 .../confirmation/confirmation.component.html  | 26 ++++++++++---------
 .../lib/tests/confirmation.service.spec.ts    | 19 ++++++++++++++
 2 files changed, 33 insertions(+), 12 deletions(-)

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 f2b1417f14..a40d72adf4 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
@@ -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>
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 e43ff885f9..e70b88061f 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
@@ -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'}

From 7a030e1714d2e38303a4d6ce8f449381c9c165ab Mon Sep 17 00:00:00 2001
From: Arman Ozak <arman@armanozak.com>
Date: Sat, 25 Apr 2020 14:58:44 +0300
Subject: [PATCH 2/2] docs: add how to pass HTML to confirmation dialog

---
 docs/en/UI/Angular/Confirmation-Service.md | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/docs/en/UI/Angular/Confirmation-Service.md b/docs/en/UI/Angular/Confirmation-Service.md
index a8d2c4c2a7..2d1c5c1843 100644
--- a/docs/en/UI/Angular/Confirmation-Service.md
+++ b/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: