feat(page): suporta tags HTML básicas no subtitle

Permite a formatação de texto no conteúdo do subtitle utilizando as
tags HTML básicas: <b>, <strong>, <i>, <em> e <u>.

Fixes DTHFUI-13081

Author: anabye

projects/ui/src/lib/components/po-helper/index.ts

@@ -1,5 +1,3 @@
 export * from './po-helper.module';
 export * from './po-helper.component';
 export * from './interfaces/po-helper.interface';
-export * from './po-helper-content-utils';
-export * from './po-helper-content.pipe';

projects/ui/src/lib/components/po-helper/po-helper-content-utils.ts

@@ -28,9 +28,9 @@
       <span class="po-helper-content-text">
         @for (fragment of contentFragments(); track $index) {
           <span
-            [class.po-helper-text-bold]="fragment.bold"
-            [class.po-helper-text-italic]="fragment.italic"
-            [class.po-helper-text-underline]="fragment.underline"
+            [class.po-text-bold]="fragment.bold"
+            [class.po-text-italic]="fragment.italic"
+            [class.po-text-underline]="fragment.underline"
             >{{ fragment.text }}</span
           >
         }

projects/ui/src/lib/components/po-helper/po-helper-content.pipe.spec.ts

@@ -13,7 +13,10 @@ import { PoHelperBaseComponent } from './po-helper-base.component';
 import { PoHelperOptions } from './interfaces/po-helper.interface';
 import { PoPopoverComponent } from '../po-popover/po-popover.component';
 import { PoButtonComponent } from '../po-button';
-import { parseHelperContent, PoHelperTextFragment } from './po-helper-content-utils';
+import { parseSafeText, PoTextFragment, PoFormattingTag } from '../../utils/safe-text-parser';
+
+/** Tags de formatação aceitas pelo po-helper. */
+const PO_HELPER_ALLOWED_TAGS: Array<PoFormattingTag> = ['b', 'i', 'u', 'strong', 'em'];
 /**
  * @docsExtends PoHelperBaseComponent
  *
@@ -70,12 +73,12 @@ export class PoHelperComponent extends PoHelperBaseComponent implements AfterVie
     }
   };
 
-  protected readonly contentFragments = computed<Array<PoHelperTextFragment>>(() => {
+  protected readonly contentFragments = computed<Array<PoTextFragment>>(() => {
     const helperValue = this.helper();
     if (!helperValue) {
       return [];
     }
-    return parseHelperContent((helperValue as PoHelperOptions).content);
+    return parseSafeText((helperValue as PoHelperOptions).content, PO_HELPER_ALLOWED_TAGS);
   });
 
   constructor(private readonly cdr: ChangeDetectorRef) {

projects/ui/src/lib/components/po-helper/po-helper-content.pipe.ts

@@ -2,7 +2,6 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { PoHelperComponent } from './po-helper.component';
-import { PoHelperContentPipe } from './po-helper-content.pipe';
 
 import { PoIconModule } from '../po-icon/index';
 import { PoLinkModule } from '../po-link/index';
@@ -15,7 +14,7 @@ import { PoDividerModule } from '../po-divider/index';
  */
 @NgModule({
   imports: [CommonModule, PoIconModule, PoPopoverModule, PoLinkModule, PoDividerModule],
-  declarations: [PoHelperComponent, PoHelperContentPipe],
+  declarations: [PoHelperComponent],
   exports: [PoHelperComponent]
 })
 export class PoHelperModule {}

projects/ui/src/lib/components/po-helper/po-helper.component.html

@@ -283,7 +283,15 @@ export abstract class PoPageDefaultBaseComponent {
    *
    * Define um texto de apoio ou informações adicionais logo abaixo do título principal.
    *
-   * > Requer que`p-title` esteja definido.
+   * Suporta formatação básica com as tags `<b>` (negrito), `<strong>` (negrito), `<i>` (itálico), `<em>` (itálico) e
+   * `<u>` (sublinhado).
+   *
+   * Exemplo:
+   * ```typescript
+   * subtitle = 'Texto <b>importante</b> com <em>destaque</em> e <u>sublinhado</u>';
+   * ```
+   *
+   * > Requer que `p-title` esteja definido.
    */
   @Input('p-subtitle') set subtitle(value: string) {
     this._subtitle = value;

projects/ui/src/lib/components/po-helper/po-helper.component.ts

@@ -192,7 +192,17 @@ export class PoPageDetailBaseComponent {
    *
    * @description
    *
-   * Subtitulo do Header da página
+   * Subtitulo do Header da página.
+   *
+   * Suporta formatação básica com as tags `<b>` (negrito), `<strong>` (negrito), `<i>` (itálico), `<em>` (itálico) e
+   * `<u>` (sublinhado).
+   *
+   * Exemplo:
+   * ```typescript
+   * subtitle = 'Status: <b>Active</b> | Role: <i>Administrator</i>';
+   * ```
+   *
+   * > Requer que `p-title` esteja definido.
    */
   @Input('p-subtitle') subtitle: string;
 

projects/ui/src/lib/components/po-helper/po-helper.module.ts

@@ -1,4 +1,9 @@
-<po-page-detail p-title="User Detail" [p-breadcrumb]="breadcrumb" (p-edit)="edit()">
+<po-page-detail
+  p-title="User Detail"
+  p-subtitle="Status: <b>Active</b> | Role: <i>Administrator</i>"
+  [p-breadcrumb]="breadcrumb"
+  (p-edit)="edit()"
+>
   <div class="po-row">
     <po-info class="po-md-4" p-label="User ID" [p-value]="userId"> </po-info>