feat: allow title, message, and buttons to have HTML string

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">
+      <h1
-        {{ data.title | abpLocalization: data.options?.titleLocalizationParams }}
+        class="title"
-      </h1>
+        *ngIf="data.title"
-      <p class="message" *ngIf="data.message">
+        [innerHTML]="data.title | abpLocalization: data.options?.titleLocalizationParams"
-        {{ data.message | abpLocalization: data.options?.messageLocalizationParams }}
+      ></h1>
-      </p>
+      <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)"
-      >
+      ></button>
-        {{ data.options?.cancelText || 'AbpUi::Cancel' | abpLocalization }}
-      </button>
       <button
         id="confirm"
         class="confirmation-button confirmation-button--approve"
+        [innerHTML]="data.options?.yesText || 'AbpUi::Yes'"
         *ngIf="!data?.options?.hideYesBtn"
         (click)="close(confirm)"
-      >
+      ></button>
-        {{ data.options?.yesText || 'AbpUi::Yes' | abpLocalization }}
-      </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'}