feat(search): adiciona variação locate com busca controlada

Adiciona a opção `p-filter-locate` para cenários em que o filtro e a
navegação entre resultados são controlados externamente.

Ao ser ativada, exibe contador e botões de navegação entre os resultados
encontrados, que podem ser controlados por propriedades e eventos:
`p-locate-summary`, `p-next-occurrence`, `p-previous-occurrence`, além
dos eventos `p-keydown` e `p-blur` para controle via teclado.

fixex DTHFUI-11133

Author: anabye

projects/ui/src/lib/components/po-listbox/po-item-list/po-item-list.component.spec.ts

@@ -4,6 +4,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 
 import { PoItemListComponent } from './po-item-list.component';
 import { PoItemListFilterMode } from '../enums/po-item-list-filter-mode.enum';
+import { PoFieldSize } from '../../../enums/po-field-size.enum';
 
 describe('PoItemListComponent', () => {
   let component: PoItemListComponent;
@@ -269,6 +270,46 @@ describe('PoItemListComponent', () => {
       expect(component.getLabelFormatted('values')).toBe('values');
     });
 
+    it('getLabelFormatted: should apply small size class for startsWith', () => {
+      component.isFiltering = true;
+      component.filterMode = PoItemListFilterMode.startsWith;
+      component.size = PoFieldSize.Small;
+      component.safeHtml = (value: any) => value;
+      component.searchValue = 'val';
+
+      expect(component.getLabelFormatted('values')).toBe('<span class="po-font-text-bold">val</span>ues');
+    });
+
+    it('getLabelFormatted: should apply small size class for contains', () => {
+      component.isFiltering = true;
+      component.filterMode = PoItemListFilterMode.contains;
+      component.size = PoFieldSize.Small;
+      component.safeHtml = (value: any) => value;
+      component.searchValue = 'lue';
+
+      expect(component.getLabelFormatted('values')).toBe('va<span class="po-font-text-bold">lue</span>s');
+    });
+
+    it('getLabelFormatted: should apply small size class for endsWith', () => {
+      component.isFiltering = true;
+      component.filterMode = PoItemListFilterMode.endsWith;
+      component.size = PoFieldSize.Small;
+      component.safeHtml = (value: any) => value;
+      component.searchValue = 'lues';
+
+      expect(component.getLabelFormatted('values')).toBe('va<span class="po-font-text-bold">lues</span>');
+    });
+
+    it('getLabelFormatted: should apply large size class when size is not small', () => {
+      component.isFiltering = true;
+      component.filterMode = PoItemListFilterMode.startsWith;
+      component.size = PoFieldSize.Medium;
+      component.safeHtml = (value: any) => value;
+      component.searchValue = 'val';
+
+      expect(component.getLabelFormatted('values')).toBe('<span class="po-font-text-large-bold">val</span>ues');
+    });
+
     it('should format label when conditions are met', () => {
       component.isFiltering = true;
       component.compareCache = false;

projects/ui/src/lib/components/po-listbox/po-item-list/po-item-list.component.ts

@@ -1,10 +1,10 @@
 import { Component, ElementRef, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
-import { PoItemListOptionGroup } from './interfaces/po-item-list-option-group.interface';
+import { PoFieldSize } from '../../../enums/po-field-size.enum';
+import { PoItemListFilterMode } from '../enums/po-item-list-filter-mode.enum';
 import { PoItemListOption } from './interfaces/po-item-list-option.interface';
 import { PoItemListBaseComponent } from './po-item-list-base.component';
-import { PoItemListFilterMode } from '../enums/po-item-list-filter-mode.enum';
 
 @Component({
   selector: 'po-item-list',
@@ -19,7 +19,7 @@ export class PoItemListComponent extends PoItemListBaseComponent implements OnCh
   protected param;
   protected clickListener: () => void;
 
-  constructor(private sanitized: DomSanitizer) {
+  constructor(protected sanitized: DomSanitizer) {
     super();
   }
 
@@ -70,7 +70,8 @@ export class PoItemListComponent extends PoItemListBaseComponent implements OnCh
       const labelInput = this.sanitizeTagHTML(this.searchValue.toString().toLowerCase());
       const labelLowerCase = sanitizedLabel.toLowerCase();
 
-      const openTagBold = '<span class="po-font-text-large-bold">';
+      const highlightClass = this.size === PoFieldSize.Small ? 'po-font-text-bold' : 'po-font-text-large-bold';
+      const openTagBold = `<span class="${highlightClass}">`;
       const closeTagBold = '</span>';
 
       let startString;
@@ -79,7 +80,7 @@ export class PoItemListComponent extends PoItemListBaseComponent implements OnCh
 
       switch (this.filterMode) {
         case PoItemListFilterMode.startsWith:
-        case PoItemListFilterMode.contains:
+        case PoItemListFilterMode.contains: {
           const indexOfLabelInput = labelLowerCase.indexOf(labelInput);
 
           if (indexOfLabelInput > -1) {
@@ -92,7 +93,8 @@ export class PoItemListComponent extends PoItemListBaseComponent implements OnCh
           }
 
           break;
-        case PoItemListFilterMode.endsWith:
+        }
+        case PoItemListFilterMode.endsWith: {
           const lastIndexOfLabelInput = labelLowerCase.lastIndexOf(labelInput);
 
           if (lastIndexOfLabelInput > -1) {
@@ -102,6 +104,7 @@ export class PoItemListComponent extends PoItemListBaseComponent implements OnCh
             format = startString + openTagBold + middleString + closeTagBold;
           }
           break;
+        }
       }
     }
 
@@ -117,6 +120,6 @@ export class PoItemListComponent extends PoItemListBaseComponent implements OnCh
   }
 
   private sanitizeTagHTML(value: string = '') {
-    return value.replace(/\</gm, '&lt;').replace(/\>/g, '&gt;');
+    return value.replace(/</g, '&lt;').replace(/>/g, '&gt;');
   }
 }

projects/ui/src/lib/components/po-search/enums/po-search-filter-mode.enum.ts

@@ -3,7 +3,7 @@
  *
  * @description
  *
- * Define o tipo de busca usado no po-search.
+ * Define o tipo de busca usado no `po-search`.
  */
 export enum PoSearchFilterMode {
   /** Verifica se o texto *inicia* com o valor pesquisado. */

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

@@ -6,4 +6,4 @@ export * from './enums/po-search-filter-mode.enum';
 export * from './interfaces/po-search-filter-select.interface';
 export * from './interfaces/po-search-option.interface';
 
-export * from './literals/po-search-literals';
+export * from './literals/po-search-literals.interface';

projects/ui/src/lib/components/po-search/interfaces/po-search-filter-select.interface.ts

@@ -6,11 +6,7 @@
  * Interface que define as opções que serão exibidas no dropdown do `po-search`, ao usar a propriedade `p-filter-select`.
  */
 export interface PoSearchFilterSelect {
-  /**
-   * @description
-   *
-   * Descrição exibida nas opções da lista.
-   */
+  /** Descrição exibida nas opções da lista. */
   label: string;
 
   /** Valores que serão atribuídos ao `p-filter-keys` */

projects/ui/src/lib/components/po-search/interfaces/po-search-locate-summary.interface.ts

@@ -0,0 +1,14 @@
+/**
+ * @usedBy PoSearchComponent
+ *
+ * @description
+ *
+ * Interface que define o resumo de localização do filtro `p-filter-locate`.
+ */
+export interface PoSearchLocateSummary {
+  /** Índice atual da ocorrência localizada. */
+  currentIndex: number;
+
+  /** Total de ocorrências encontradas. */
+  total: number;
+}

projects/ui/src/lib/components/po-search/literals/po-search-literals-default.ts

@@ -1,24 +1,44 @@
-import { PoSearchLiterals } from './po-search-literals';
+import { PoSearchLiterals } from './po-search-literals.interface';
 
 export const poSearchLiteralsDefault = {
   en: <PoSearchLiterals>{
     search: 'Search',
-    clean: 'Clean',
-    all: 'All'
+    clean: 'Clear search',
+    all: 'All',
+    of: 'of',
+    next: 'Next result',
+    previous: 'Previous result',
+    result: 'Result',
+    none: 'No results found'
   },
   es: <PoSearchLiterals>{
     search: 'Buscar',
-    clean: 'limpiar',
-    all: 'Todo'
+    clean: 'Borrar búsqueda',
+    all: 'Todo',
+    of: 'de',
+    next: 'Siguiente resultado',
+    previous: 'Resultado anterior',
+    result: 'Resultado',
+    none: 'No hay resultados'
   },
   pt: <PoSearchLiterals>{
     search: 'Pesquisar',
-    clean: 'Apagar',
-    all: 'Todos'
+    clean: 'Limpar busca',
+    all: 'Todos',
+    of: 'de',
+    next: 'Próximo resultado',
+    previous: 'Resultado anterior',
+    result: 'Resultado',
+    none: 'Nenhum resultado encontrado'
   },
   ru: <PoSearchLiterals>{
     search: 'Поиск',
-    clean: 'чистый',
-    all: 'Все'
+    clean: 'Очистить поиск',
+    all: 'Все',
+    of: 'из',
+    next: 'Следующий результат',
+    previous: 'Предыдущий результат',
+    result: 'Результат',
+    none: 'Результаты не найдены'
   }
 };

projects/ui/src/lib/components/po-search/literals/po-search-literals.interface.ts

@@ -0,0 +1,52 @@
+/**
+ * @usedBy PoSearchComponent
+ *
+ * @description
+ *
+ * Interface para definição das literais usadas no `po-search`.
+ */
+export interface PoSearchLiterals {
+  /** Texto exibido como *placeholder* no campo de busca. */
+  search?: string;
+
+  /** Texto alternativo (aria-label) para o botão de limpar o campo de busca, usado por leitores de tela. */
+  clean?: string;
+
+  /**
+   * Texto exibido no dropdown de tipo de filtro, representando todos os tipos disponíveis.
+   *
+   * > Exibido apenas quando a propriedade `p-filter-select` estiver habilitada.
+   */
+  all?: string;
+
+  /**
+   * Texto alternativo (aria-label) para a palavra "de" no contador de resultados (ex: "Resultado 1 de 4").
+   *
+   * > Exibido apenas quando a propriedade `p-filter-locate` estiver habilitada.
+   * */
+  of?: string;
+
+  /**
+   * Texto alternativo (aria-label) para navegação até o próximo resultado da busca.
+   *
+   * > Exibido apenas quando a propriedade `p-filter-locate` estiver habilitada.
+   */
+  next?: string;
+
+  /** Texto alternativo (aria-label) para quando nenhum resultado for encontrado. */
+  none?: string;
+
+  /**
+   * Texto alternativo (aria-label) para navegação até o resultado anterior da busca.
+   *
+   * > Exibido apenas quando a propriedade `p-filter-locate` estiver habilitada.
+   */
+  previous?: string;
+
+  /**
+   * Texto alternativo (aria-label) para a label "Resultado" que acompanha o contador.
+   *
+   * > Exibido apenas quando a propriedade `p-filter-locate` estiver habilitada.
+   */
+  result?: string;
+}