feat(search): inclusão do listbox ao fazer o search

Implementação da propriedade 't-show-listbox'.
Com essa propriedade ativa, sempre ira mostrar uma listbox das opções informadas, quando
houver mudança no input. ela também obedece a regra do filterKeys

fixes DTHFUI-7812

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

@@ -0,0 +1,22 @@
+/**
+ * @usedBy PoSearchComponent
+ *
+ * @description
+ *
+ * Interface que define as opções que serão exibidas na lista ao procurar do `po-search`.
+ */
+export interface PoSearchOption {
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Descrição exibida nas opções da lista.
+   *
+   * > Caso não seja definida será assumido o valor definido na propriedade `value`.
+   */
+  label?: string;
+
+  /** Valor do objeto que será atribuído ao *model*. */
+  value: string | number;
+}

projects/ui/src/lib/components/po-search/po-search-base.component.ts

@@ -199,6 +199,18 @@ export class PoSearchBaseComponent {
    */
   @Input('p-filter-type') filterType: PoSearchFilterMode = PoSearchFilterMode.startsWith;
 
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Exibe uma lista (auto-complete) com as opções definidas no `p-filter-keys` enquanto realiza uma busca,
+   * respeitando o `p-filter-type` como modo de pesquisa.
+   *
+   * @default `false`
+   */
+  @Input('p-show-listbox') showListbox: boolean = false;
+
   /**
    * @optional
    *
@@ -226,6 +238,15 @@ export class PoSearchBaseComponent {
    */
   @Output('p-filter') filter: EventEmitter<any> = new EventEmitter<any>();
 
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Pode ser informada uma função que será disparada quando houver click no listbox.
+   */
+  @Output('p-listbox-onclick') listboxOnClick = new EventEmitter<any>();
+
   constructor(languageService: PoLanguageService) {
     this.language = languageService.getShortLanguage();
   }

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

@@ -12,8 +12,15 @@
     [class.po-search-input-trigger]="type === 'trigger'"
     [disabled]="disabled"
     [placeholder]="literals.search"
-    (input)="onSearchChange($event.target.value, type === 'action' ? true : false)"
-    (keyup.enter)="onSearchChange($event.target.value, type === 'trigger' ? true : false)"
+    (input)="
+      onSearchChange($event.target.value, false); onSearchChange($event.target.value, type === 'action' ? true : false)
+    "
+    (keyup.enter)="
+      listboxOpen ? closeListbox() : onSearchChange($event.target.value, type === 'trigger' ? true : false, true);
+      closeListbox()
+    "
+    (keydown)="onKeyDown($event)"
+    (blur)="onBlur()"
   />
 
   <div class="po-search-buttons">
@@ -33,11 +40,27 @@
       class="po-search-button po-search-button-trigger"
       type="button"
       [ariaLabel]="literals.search"
-      (click)="onSearchChange(poSearchInput.value, true)"
-      (keydown.enter)="onSearchChange(poSearchInput.value, true)"
+      (click)="onSearchChange(poSearchInput.value, true, true)"
+      (keydown.enter)="onSearchChange(poSearchInput.value, true, true)"
       [disabled]="disabled"
     >
       <po-icon [p-icon]="icon ? icon : 'po-icon-search'"> </po-icon>
     </button>
   </div>
 </div>
+
+<div #poListboxContainerElement class="po-search-listbox-container" [hidden]="!listboxOpen">
+  <po-listbox
+    #poListbox
+    #poListboxElement
+    p-type="option"
+    [p-items]="listboxFilteredItems"
+    (p-selectcombo-item)="onListboxClick($event, $event.event)"
+    [p-visible]="listboxOpen"
+    [p-filter-mode]="filterType"
+    [p-should-mark-letter]="shouldMarkLetters"
+    [p-filtering]="isFiltering"
+    [p-search-value]="getInputValue()"
+    (p-close)="onCloseListbox()"
+  ></po-listbox>
+</div>