@po-ui/ng-components 19.24.0 → 19.25.0

package/lib/components/po-search/po-search-base.component.d.ts

@@ -1,36 +1,42 @@
 import { PoLanguageService } from '../../services/po-language/po-language.service';
 import { EventEmitter, TemplateRef } from '@angular/core';
-import { PoThemeService } from '../../services/po-theme/po-theme.service';
 import { PoSearchFilterMode } from './enums/po-search-filter-mode.enum';
 import { PoSearchFilterSelect } from './interfaces/po-search-filter-select.interface';
-import { PoSearchLiterals } from './literals/po-search-literals';
+import { PoSearchLiterals } from './literals/po-search-literals.interface';
+import { PoSearchLocateSummary } from './interfaces/po-search-locate-summary.interface';
 import * as i0 from "@angular/core";
-export type searchMode = 'action' | 'trigger';
+export type searchMode = 'action' | 'trigger' | 'locate';
 /**
  * @description
  *
- * O componente search, também conhecido como barra de pesquisa, é utilizado para ajudar os usuários a localizar um determinado conteúdo
+ * O componente search, também conhecido como barra de pesquisa, é utilizado para ajudar os usuários a localizar um determinado conteúdo.
  *
  * Normalmente localizado no canto superior direito, junto com o ícone de lupa, uma vez que este ícone é amplamente reconhecido.
  *
- * Portanto, é de extrema importância que, ao utilizar este componente, as pessoas responsáveis por seu desenvolvimento considerem os seguintes critérios.
- *
  * #### Boas práticas
  *
- * Foram estruturados os padrões de usabilidade para auxiliar na utilização do componente e garantir uma boa experiência aos usuários. Por isso, é muito importante que ao utilizar este componente, as pessoas que o projetarem devem levar em consideração os seguintes critérios:
- * - Utilize labels para apresentar resultados que estão sendo exibidos e apresente os resultados mais relevantes primeiro.
- * - Exiba uma mensagem clara quando não forem encontrados resultados para busca e sempre que possível ofereça outras sugestões de busca.
- * - Mantenha o texto original no campo de input, que facilita a ação do usuário caso queira fazer uma nova busca com alguma modificação na pesquisa.
- * - Caso seja possível detectar um erro de digitação, mostre os resultados para a palavra "corrigida", isso evita a frustração de não obter resultados e não força o usuário a realizar uma nova busca.
+ * Foram estruturados os padrões de usabilidade para auxiliar na utilização do componente e garantir uma boa experiência
+ * aos usuários. Portanto, é de extrema importância que, ao utilizar este componente, as pessoas responsáveis por seu
+ * desenvolvimento considerem os seguintes critérios:
+ * - Utilize labels para apresentar resultados que estão sendo exibidos e apresente os resultados mais relevantes
+ * primeiro.
+ * - Exiba uma mensagem clara quando não forem encontrados resultados para busca e sempre que possível ofereça outras
+ * sugestões de busca.
+ * - Mantenha o texto original no campo de input, que facilita a ação do usuário caso queira fazer uma nova busca com
+ * alguma modificação na pesquisa.
+ * - Caso seja possível detectar um erro de digitação, mostre os resultados para a palavra "corrigida", isso evita a
+ * frustração de não obter resultados e não força o usuário a realizar uma nova busca.
  * - Quando apropriado, destaque os termos da busca nos resultados.
  * - A entrada do campo de pesquisa deve caber em uma linha. Não use entradas de pesquisa de várias linhas.
- * - Recomenda-se ter apenas uma pesquisa por página. Se você precisar de várias pesquisas, rotule-as claramente para indicar sua finalidade.
- * - Se possível, forneça sugestões de pesquisa, seja em um helptext ou sugestão de pesquisa que é um autocomplete. Isso ajuda os usuários a encontrar o que estão procurando, especialmente se os itens pesquisáveis forem complexos.
+ * - Recomenda-se ter apenas uma pesquisa por página. Se você precisar de várias pesquisas, rotule-as claramente para
+ * indicar sua finalidade.
+ * - Se possível, forneça sugestões de pesquisa, seja em um helptext ou sugestão de pesquisa que é um autocomplete. Isso
+ * ajuda os usuários a encontrar o que estão procurando, especialmente se os itens pesquisáveis forem complexos.
  *
  * #### Acessibilidade tratada no componente
  *
- *  Algumas diretrizes de acessibilidade já são tratadas no componente, internamente, e não podem ser alteradas pelo proprietário do conteúdo. São elas:
- *
+ *  Algumas diretrizes de acessibilidade já são tratadas no componente, internamente, e não podem ser alteradas pelo
+ * proprietário do conteúdo. São elas:
  * - Permitir a interação via teclado (2.1.1: Keyboard (A));
  * - Alteração entre os estados precisa ser indicada por mais de um elemento além da cor (1.4.1: Use of Color);
  *
@@ -40,36 +46,39 @@ export type searchMode = 'action' | 'trigger';
  *
  * > Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
  *
- * | Propriedade                             | Descrição                                            | Valor Padrão                                      |
+ * | Propriedade                            | Descrição                                             | Valor Padrão                                      |
  * |----------------------------------------|-------------------------------------------------------|---------------------------------------------------|
  * | **Default Values**                     |                                                       |                                                   |
- * | `--font-family`                        | Família tipográfica usada                             | `var(--font-family-theme)`                        |
- * | `--font-size`                          | Tamanho da fonte                                      | `var(--font-size-default)`                        |
+ * | `--font-family`                        | Família tipográfica do campo                          | `var(--font-family-theme)`                        |
+ * | `--font-size`                          | Tamanho da fonte do campo                             | `var(--font-size-default)`                        |
  * | `--text-color-placeholder`             | Cor do texto no placeholder                           | `var(--color-neutral-light-30)`                   |
- * | `--color`                              | Cor principal do search                               | `var(--color-neutral-dark-70)`                    |
- * | `--border-radius`                      | Contém o valor do raio dos cantos do elemento    | `var(--border-radius-md)`                         |
+ * | `--color`                              | Cor das bordas                                        | `var(--color-neutral-dark-70)`                    |
+ * | `--border-radius`                      | Raio das bordas                                       | `var(--border-radius-md)`                         |
  * | `--background`                         | Cor de background                                     | `var(--color-neutral-light-05)`                   |
- * | `--text-color`                         | Cor do texto                                          | `var(--color-neutral-dark-90)`                    |
- * | `--color-clear`                        | Cor principal do icone close                          | `var(--color-action-default)`                     |
+ * | `--text-color`                         | Cor do texto editável                                 | `var(--color-neutral-dark-90)`                    |
+ * | `--color-clear`                        | Cor do ícone close                                    | `var(--color-action-default)`                     |
+ * | `--color-controls`                     | Cor dos ícones de controle do mode location           | `var(--color-action-default)`                     |
+ * | `--transition-property`                | Atributo da transição                                 | `all`                                             |
+ * | `--transition-duration`                | Duração da transição                                  | `var(--duration-extra-fast)`                      |
+ * | `--transition-timing`                  | Duração da transição com o tipo de transição          | `var(--timing-standart)`                          |
  * | **Icon**                               |                                                       |                                                   |
- * | `--color-icon-read`                    | Cor principal do icone de leitura                     | `var(--color-neutral-dark-70)`                    |
- * | `--color-icon`                         | Cor principal do icone                                | `var(--color-action-default)`                     |
+ * | `--color-icon-read`                    | Cor do ícone de busca no modo action                  | `var(--color-neutral-dark-70)`                    |
+ * | `--color-icon`                         | Cor do ícone de busca no modo trigger                 | `var(--color-action-default)`                     |
  * | **Hover**                              |                                                       |                                                   |
- * | `--color-hover`                        | Cor principal no estado hover                         | `var(--color-action-hover)`                       |
+ * | `--color-hover`                        | Cor das bordas no estado hover                        | `var(--color-action-hover)`                       |
  * | `--background-hover`                   | Cor de background no estado hover                     | `var(--color-brand-01-lightest)`                  |
  * | **Focused**                            |                                                       |                                                   |
- * | `--color-focused`                      | Cor principal no estado de focus                      | `var(--color-action-default)`                     |
- * | `--outline-color-focused`              | Cor do outline do estado de focus                     | `var(--color-action-focus)`                       |
+ * | `--color-focused`                      | Cor das bordas no estado de focus                     | `var(--color-action-default)`                     |
+ * | `--outline-color-focused`              | Cor do outline no estado de focus                     | `var(--color-action-focus)`                       |
  * | **Disabled**                           |                                                       |                                                   |
  * | `--color-disabled`                     | Cor principal no estado disabled                      | `var(--color-action-disabled)`                    |
- * | `--background-color-disabled`          | Cor de background no estado disabled                  | `var(--color-neutral-light-20)`                   |
+ * | `--background-disabled`                | Cor de background no estado disabled                  | `var(--color-neutral-light-20)`                   |
  *
  */
 export declare class PoSearchBaseComponent {
-    protected poThemeService: PoThemeService;
     private _literals?;
     private _ariaLabel?;
-    private language;
+    protected language: string;
     private _filterSelect?;
     private _size?;
     /**
@@ -77,42 +86,95 @@ export declare class PoSearchBaseComponent {
      *
      * @description
      *
-     * Desabilita o po-search e não permite que o usuário interaja com o mesmo.
+     * Define um aria-label para o po-search.
      *
-     * @default `false`
+     * > Devido o componente não possuir uma label assim como outros campos de texto, o `aria-label` é utilizado para
+     * acessibilidade.
      */
-    disabled?: boolean;
+    set ariaLabel(value: string);
+    get ariaLabel(): string;
     /**
      * @optional
      *
      * @description
      *
-     * Lista de itens que serão utilizados para pesquisa
+     * Desabilita o po-search e não permite que o usuário interaja com o mesmo.
+     *
+     * @default `false`
      */
-    items: Array<any>;
+    disabled?: boolean;
     /**
-     * @optional
+     * @description
      *
+     * Define os nomes das propriedades do objeto que serão utilizados para busca em `p-items`. Cada valor definido no
+     * array será considerado durante a apresentação e filtragem dos itens.
+     * Exemplo de uso:
+     * ```typescript
+     * const filterKeys: Array<string> = ['name', 'gender', 'planet', 'father'];
+     * ```
+     *
+     * > Esta propriedade é ignorada quando utilizado com `p-filter-select` e incompatível com a propriedade
+     * `p-search-type` do tipo `locate`.
+     */
+    filterKeys: Array<any>;
+    /**
      * @description
      *
-     * Define um aria-label para o po-search.
+     * Habilita um seletor de filtros à esquerda do campo, permitindo a aplicação de filtros agrupados na busca ou sobre
+     * os itens fornecidos em `p-items`. Automaticamente adiciona a opção **Todos**, com um mapeamento de todas as opções passadas.
      *
-     * > Devido o componente não possuir uma label assim como outros campos de texto, o `aria-label` é utilizado para acessibilidade.
+     * Exemplo de uso:
+     * ```typescript
+     * const filterSelect = [
+     *   { label: 'personal', value: ['name', 'email', 'nickname'] },
+     *   { label: 'address', value: ['country', 'state', 'city', 'street'] },
+     *   { label: 'family', value: ['father', 'mother', 'dependents'] }
+     * ];
+     * ```
+     *
+     * > Ao ser habilitada, a propriedade `p-filter-keys` será ignorada. Esta propriedade é incompatível com a propriedade
+     * `p-search-type` do tipo `locate`.
      */
-    set ariaLabel(value: string);
-    get ariaLabel(): string;
+    set filterSelect(values: Array<PoSearchFilterSelect>);
+    get filterSelect(): Array<PoSearchFilterSelect>;
     /**
+     * @optional
+     *
      * @description
      *
-     * Deve ser informado o nome da propriedade do objeto que será utilizado para a conversão dos itens apresentados na lista do componente (p-items), esta propriedade será responsável pelo texto de apresentação de cada item da lista.
+     * Define o modo de pesquisa utilizado no campo de busca. Os valores permitidos são definidos pelo enum
+     * **PoSearchFilterMode**.
+     *
+     * > Incompatível com a propriedade `p-search-type` do tipo `locate`.
+     *
+     * @default `startsWith`
      */
-    filterKeys: Array<any>;
+    filterType: PoSearchFilterMode;
     /**
      * @optional
      *
      * @description
      *
-     * Deve ser informado o nome da propriedade do objeto que será utilizado para a conversão dos itens apresentados na lista do componente (p-items), esta propriedade será responsável pelo texto de apresentação de cada item da lista.
+     * Permite customizar o ícone de busca que acompanha o campo.
+     *
+     * É possível usar qualquer um dos ícones da [Biblioteca de ícones PO UI](https://po-ui.io/icons), conforme exemplo:
+     * ```
+     * <po-search p-icon="an an-user"></po-search>
+     * ```
+     * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, desde que a biblioteca
+     * esteja carregada no projeto:
+     * ```
+     * <po-search p-icon="fa fa-podcast"></po-search>
+     * ```
+     *
+     * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo:
+     * ```
+     * <po-search [p-icon]="template"></po-search>
+     *
+     * <ng-template #template>
+     *   <i class="fa fa-podcast" style="font-size: inherit;"></i>
+     * </ng-template>
+     * ```
      */
     icon: string | TemplateRef<void>;
     /**
@@ -120,21 +182,17 @@ export declare class PoSearchBaseComponent {
      *
      * @description
      *
-     * Determina a forma de realizar a pesquisa no componente
+     * Lista de itens que serão utilizados para pesquisa.
      *
-     * Valores aceitos:
-     * - `action`: Realiza a busca a cada caractere digitado.
-     * - `trigger`: Realiza a busca ao pressionar `enter` ou clicar no ícone de busca.
-     *
-     * @default `action`
+     * > Incompatível com a propriedade `p-search-type` do tipo `locate`.
      */
-    type: searchMode;
+    items: Array<any>;
     /**
      * @optional
      *
      * @description
      *
-     * Objeto com as literais usadas no `po-search`.
+     * Objeto com as literais usadas no `po-search`, permitindo personalizar os textos exibidos no componente.
      *
      * Para utilizar basta passar a literal que deseja customizar:
      *
@@ -153,8 +211,8 @@ export declare class PoSearchBaseComponent {
      * </po-search>
      * ```
      *
-     * > O objeto padrão de literais será traduzido de acordo com o idioma do
-     * [`PoI18nService`](/documentation/po-i18n) ou do browser.
+     * > O objeto padrão de literais será traduzido de acordo com o idioma do [`PoI18nService`](/documentation/po-i18n) ou
+     * do browser.
      */
     set literals(value: PoSearchLiterals);
     get literals(): PoSearchLiterals;
@@ -163,41 +221,42 @@ export declare class PoSearchBaseComponent {
      *
      * @description
      *
-     * Define o modo de pesquisa utilizado no campo de busca, quando habilitado. Valores definidos no enum: PoSearchFilterMode
+     * Define os valores do contador exibido ao usar a propriedade `p-search-type` do tipo `locate`, indicando a posição
+     * atual e o total de ocorrências encontradas.
+     * Exemplo de uso:
+     * ```ts
+     * locateSummary: PoSearchLocateSummary = { currentIndex: 0, total: 5 };
+     * ```
      *
-     * @default `startsWith`
+     * > Compatível com a propriedade `p-search-type` do tipo `locate`.
      */
-    filterType: PoSearchFilterMode;
+    locateSummary: PoSearchLocateSummary;
     /**
      * @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.
+     * Determina a forma de realizar a pesquisa no componente. Valores aceitos:
+     * - `action`: Realiza a busca a cada caractere digitado.
+     * - `trigger`: Realiza a busca ao pressionar `enter` ou clicar no ícone de busca.
+     * - `locate`: Modo manual. Exibe botões e contador, mas não executa buscas — controle é do desenvolvedor.
      *
-     * @default `false`
+     * @default `action`
      */
-    showListbox?: boolean;
+    type: searchMode;
     /**
+     * @optional
+     *
      * @description
      *
-     * Define os tipos de filtros (p-filter-keys) a serem aplicados na busca ou lista do componente (p-items).
-     * Automaticamente adiciona a opção 'Todos', com um mapeamento de todas as opções passadas.
+     * Exibe uma lista (auto-complete) com as opções definidas em `p-filter-keys` ou `p-filter-select` enquanto realiza
+     * uma busca, respeitando o `p-filter-type` como modo de pesquisa.
      *
-     * > O uso desta propriedade torna a propriedade 'p-filter-keys' inválida.
+     * > Incompatível com a propriedade `p-search-type` do tipo `locate`.
      *
-     * Exemplo de uso:
-     * ```typescript
-     * const filterSelect = [
-     *   { label: 'personal', value: ['name', 'email', 'nickname'] },
-     *   { label: 'address', value: ['country', 'state', 'city', 'street'] },
-     *   { label: 'family', value: ['father', 'mother', 'dependents'] }
-     * ];
-     * ```
+     * @default `false`
      */
-    set filterSelect(values: Array<PoSearchFilterSelect>);
-    get filterSelect(): Array<PoSearchFilterSelect>;
+    showListbox?: boolean;
     /**
      * @optional
      *
@@ -219,37 +278,71 @@ export declare class PoSearchBaseComponent {
      *
      * @description
      *
-     * Evento disparado ao alterar valor do model.
+     * Evento disparado ao sair do campo.
      */
-    changeModel: EventEmitter<any>;
+    blur: EventEmitter<any>;
     /**
      * @optional
      *
      * @description
      *
-     * Pode ser informada uma função que será disparada quando houver alterações no input.
+     * Evento disparado ao alterar valor do model.
      */
-    filteredItemsChange: EventEmitter<any[]>;
+    changeModel: EventEmitter<any>;
     /**
      * @optional
      *
      * @description
      *
      * Pode ser informada uma função que será disparada quando houver alterações nos filtros.
+     *
+     * > Incompatível com a propriedade `p-search-type` do tipo `locate`.
      */
     filter: EventEmitter<any>;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Pode ser informada uma função que será disparada quando houver alterações no input.
+     *
+     * > Incompatível com a propriedade `p-search-type` do tipo `locate`.
+     */
+    filteredItemsChange: EventEmitter<any[]>;
     /**
      * @optional
      *
      * @description
      *
      * Pode ser informada uma função que será disparada quando houver click no listbox.
+     *
+     * > Incompatível com a propriedade `p-search-type` do tipo `locate`.
      */
     listboxOnClick: EventEmitter<any>;
-    constructor(languageService: PoLanguageService, poThemeService: PoThemeService);
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Evento disparado ao clicar no controle "Próximo resultado".
+     *
+     * > Compatível com a propriedade `p-search-type` do tipo `locate`.
+     */
+    locateNext: EventEmitter<void>;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Evento disparado ao clicar no controle "Resultado anterior".
+     *
+     * > Compatível com a propriedade `p-search-type` do tipo `locate`.
+     */
+    locatePrevious: EventEmitter<void>;
+    constructor(languageService: PoLanguageService);
     ensureFilterSelectOption(values: any): any[];
     static ɵfac: i0.ɵɵFactoryDeclaration<PoSearchBaseComponent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<PoSearchBaseComponent, never, never, { "disabled": { "alias": "p-disabled"; "required": false; }; "items": { "alias": "p-items"; "required": false; }; "ariaLabel": { "alias": "p-aria-label"; "required": false; }; "filterKeys": { "alias": "p-filter-keys"; "required": false; }; "icon": { "alias": "p-icon"; "required": false; }; "type": { "alias": "p-search-type"; "required": false; }; "literals": { "alias": "p-literals"; "required": false; }; "filterType": { "alias": "p-filter-type"; "required": false; }; "showListbox": { "alias": "p-show-listbox"; "required": false; }; "filterSelect": { "alias": "p-filter-select"; "required": false; }; "size": { "alias": "p-size"; "required": false; }; }, { "changeModel": "p-change-model"; "filteredItemsChange": "p-filtered-items-change"; "filter": "p-filter"; "listboxOnClick": "p-listbox-onclick"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PoSearchBaseComponent, never, never, { "ariaLabel": { "alias": "p-aria-label"; "required": false; }; "disabled": { "alias": "p-disabled"; "required": false; }; "filterKeys": { "alias": "p-filter-keys"; "required": false; }; "filterSelect": { "alias": "p-filter-select"; "required": false; }; "filterType": { "alias": "p-filter-type"; "required": false; }; "icon": { "alias": "p-icon"; "required": false; }; "items": { "alias": "p-items"; "required": false; }; "literals": { "alias": "p-literals"; "required": false; }; "locateSummary": { "alias": "p-locate-summary"; "required": false; }; "type": { "alias": "p-search-type"; "required": false; }; "showListbox": { "alias": "p-show-listbox"; "required": false; }; "size": { "alias": "p-size"; "required": false; }; }, { "blur": "p-blur"; "changeModel": "p-change-model"; "filter": "p-filter"; "filteredItemsChange": "p-filtered-items-change"; "listboxOnClick": "p-listbox-onclick"; "locateNext": "p-locate-next"; "locatePrevious": "p-locate-previous"; }, never, never, true, never>;
     static ngAcceptInputType_disabled: any;
     static ngAcceptInputType_showListbox: any;
 }

package/lib/components/po-search/po-search.component.d.ts

@@ -1,5 +1,4 @@
 import { ChangeDetectorRef, ElementRef, OnChanges, OnDestroy, OnInit, Renderer2, SimpleChanges } from '@angular/core';
-import { PoThemeService } from '../../services/po-theme/po-theme.service';
 import { PoControlPositionService } from '../../services/po-control-position/po-control-position.service';
 import { PoLanguageService } from '../../services/po-language/po-language.service';
 import { PoDropdownAction } from '../po-dropdown';
@@ -41,33 +40,49 @@ import * as i0 from "@angular/core";
  *  <file name="sample-po-search-filter-select/sample-po-search-filter-select.component.ts"> </file>
  * </example>
  *
+ * <example name="po-search-fields-locate" title="PO Search Form Fields with Locate">
+ *  <file name="sample-po-search-fields-locate/sample-po-search-fields-locate.component.html"> </file>
+ *  <file name="sample-po-search-fields-locate/sample-po-search-fields-locate.component.ts"> </file>
+ * </example>
+ *
  */
 export declare class PoSearchComponent extends PoSearchBaseComponent implements OnInit, OnDestroy, OnChanges {
     languageService: PoLanguageService;
-    protected poThemeService: PoThemeService;
-    private renderer;
-    private changeDetector;
-    private controlPosition;
+    protected renderer: Renderer2;
+    protected changeDetector: ChangeDetectorRef;
+    protected controlPosition: PoControlPositionService;
     private clickoutListener;
     private eventResizeListener;
+    private _locateCounter;
+    set locateCounter(element: ElementRef);
+    get locateCounter(): ElementRef;
     poSearchInput: ElementRef;
     poListboxContainerElement: ElementRef;
     poListboxElement: ElementRef;
     poListbox: PoListBoxComponent;
+    basePaddingRightSmall: number;
+    basePaddingRightMedium: number;
+    dynamicPaddingRight: number;
     listboxFilteredItems: Array<any>;
     filteredItems: Array<any>;
     listboxOpen: boolean;
     shouldMarkLetters: boolean;
     isFiltering: boolean;
+    isInputFocused: boolean;
     listboxItemclicked: boolean;
+    showSearchLocateControls: boolean;
+    showNoResults: boolean;
+    locateCounterResize: ResizeObserver;
     searchFilter: {};
     searchFilterSelectLabel: string;
     searchFilterSelectActions: Array<PoDropdownAction>;
-    constructor(languageService: PoLanguageService, poThemeService: PoThemeService, renderer: Renderer2, changeDetector: ChangeDetectorRef, controlPosition: PoControlPositionService);
+    constructor();
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     clearSearch(): void;
+    onCleanKeydown(event: KeyboardEvent): void;
+    onEnterKey(event: any): void;
     onSearchChange(searchText: string, activated: boolean, buttonClick?: boolean): void;
     private updateFilteredItems;
     private getFilteredItems;
@@ -84,17 +99,20 @@ export declare class PoSearchComponent extends PoSearchBaseComponent implements
     onCloseListbox(): void;
     onListboxClick(option: PoSearchOption, event?: any): void;
     onBlur(): void;
-    onKeyDown(event?: any): void;
+    onFocus(): void;
+    onInputHandler(value: string): void;
+    onKeyDown(event?: KeyboardEvent): void;
     private focusItem;
     private setContainerPosition;
     private adjustContainerPosition;
-    controlListboxVisibility(toOpen: boolean): void;
     private openListbox;
     closeListbox(): void;
     clickedOutsideInput(event: MouseEvent): void;
     private initializeListeners;
     private removeListeners;
-    private onScroll;
+    private updatePaddingRightLocate;
+    private updateShowSearchLocateControls;
+    private readonly onScroll;
     getInputValue(): any;
     createDropdownFilterSelect(): void;
     isSelected(filterOption: PoSearchFilterSelect): boolean;

package/lib/components/po-slide/po-slide.component.d.ts

@@ -1,5 +1,4 @@
 import { DoCheck, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
-import { AnimationBuilder } from '@angular/animations';
 import { PoSlideBaseComponent } from './po-slide-base.component';
 import { PoSlideContentTemplateDirective } from './directives/po-slide-content-template.directive';
 import { PoSlideItem } from './interfaces/po-slide-item.interface';
@@ -51,7 +50,6 @@ export declare class PoSlideComponent extends PoSlideBaseComponent implements On
     private get isImageSlide();
     private get offset();
     get hasSlides(): boolean;
-    constructor(builder: AnimationBuilder);
     onResize(): void;
     ngOnInit(): void;
     ngDoCheck(): void;

package/lib/components/po-stepper/po-step/po-step.component.d.ts

@@ -1,4 +1,4 @@
-import { AfterContentInit, ElementRef, TemplateRef } from '@angular/core';
+import { AfterContentInit, TemplateRef } from '@angular/core';
 import { Observable } from 'rxjs';
 import { PoStepperStatus } from '../enums/po-stepper-status.enum';
 import * as i0 from "@angular/core";
@@ -97,7 +97,6 @@ export declare class PoStepComponent implements AfterContentInit {
      * > Deve-se usar `font-size: inherit` para ajustar ícones que não se ajustam automaticamente.
      */
     iconDefault?: string | TemplateRef<void>;
-    constructor(elementRef: ElementRef);
     ngAfterContentInit(): void;
     protected setDisplayOnActiveOrError(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PoStepComponent, never>;

package/lib/components/po-stepper/po-stepper-label/po-stepper-label.component.d.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, ChangeDetectorRef, ElementRef, OnChanges, Renderer2, SimpleChanges } from '@angular/core';
+import { AfterViewInit, ElementRef, OnChanges, SimpleChanges } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * @docsPrivate
@@ -19,7 +19,6 @@ export declare class PoStepperLabelComponent implements AfterViewInit, OnChanges
     displayedContent: string;
     tooltipContent: string;
     private maxLabelLength;
-    constructor(renderer: Renderer2, changeDetectorRef: ChangeDetectorRef);
     ngAfterViewInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     onMouseOver(): void;

package/lib/components/po-stepper/po-stepper.component.d.ts

@@ -1,4 +1,4 @@
-import { AfterContentInit, ChangeDetectorRef, QueryList } from '@angular/core';
+import { AfterContentInit, QueryList } from '@angular/core';
 import { PoStepComponent } from './po-step/po-step.component';
 import { PoStepperBaseComponent } from './po-stepper-base.component';
 import { PoStepperItem } from './po-stepper-item.interface';
@@ -44,7 +44,6 @@ export declare class PoStepperComponent extends PoStepperBaseComponent implement
     get stepList(): QueryList<PoStepComponent> | Array<PoStepperItem>;
     get stepSizeCircle(): number;
     get usePoSteps(): boolean;
-    constructor(changeDetector: ChangeDetectorRef);
     ngAfterContentInit(): void;
     /**
      * Altera o status do *step* para ativo.

package/lib/components/po-table/po-table-base.component.d.ts

@@ -2,7 +2,6 @@ import { EventEmitter, OnChanges, OnDestroy, SimpleChanges } from '@angular/core
 import { Observable } from 'rxjs';
 import { PoDateService } from '../../services/po-date/po-date.service';
 import { PoLanguageService } from '../../services/po-language/po-language.service';
-import { PoThemeService } from '../../services/po-theme/po-theme.service';
 import { PoSearchFilterMode } from '../po-search/enums/po-search-filter-mode.enum';
 import { PoTableAction } from './interfaces/po-table-action.interface';
 import { PoTableColumnSort } from './interfaces/po-table-column-sort.interface';
@@ -74,7 +73,6 @@ export declare const poTableLiteralsDefault: {
  */
 export declare abstract class PoTableBaseComponent implements OnChanges, OnDestroy {
     private poDate;
-    protected poThemeService: PoThemeService;
     private poTableService;
     /**
      * @optional
@@ -400,7 +398,7 @@ export declare abstract class PoTableBaseComponent implements OnChanges, OnDestr
     private _draggable?;
     private _hideActionFixedColumns?;
     private _virtualScroll?;
-    constructor(poDate: PoDateService, languageService: PoLanguageService, poThemeService: PoThemeService, poTableService: PoTableService);
+    constructor(poDate: PoDateService, languageService: PoLanguageService, poTableService: PoTableService);
     /**
      * @optional
      *

package/lib/components/po-table/po-table-column-manager/po-table-column-manager.component.d.ts

@@ -1,5 +1,4 @@
 import { ElementRef, EventEmitter, OnChanges, OnDestroy, Renderer2, SimpleChanges } from '@angular/core';
-import { PoThemeService } from '../../../services';
 import { PoLanguageService } from '../../../services/po-language/po-language.service';
 import { PoCheckboxGroupOption } from '../../po-field/po-checkbox-group/interfaces/po-checkbox-group-option.interface';
 import { PoPageSlideComponent } from '../../po-page/po-page-slide';
@@ -25,7 +24,6 @@ export declare const poTableColumnManagerLiteralsDefault: {
     };
 };
 export declare class PoTableColumnManagerComponent implements OnChanges, OnDestroy {
-    protected poThemeService: PoThemeService;
     private renderer;
     popover: PoPopoverComponent;
     pageSlideColumnsManager: PoPageSlideComponent;
@@ -66,7 +64,7 @@ export declare class PoTableColumnManagerComponent implements OnChanges, OnDestr
     get componentsSize(): string;
     set maxColumns(value: number);
     get maxColumns(): number;
-    constructor(poThemeService: PoThemeService, renderer: Renderer2, languageService: PoLanguageService);
+    constructor(renderer: Renderer2, languageService: PoLanguageService);
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     checkChanges(event?: Array<string>, emit?: boolean): void;

package/lib/components/po-table/po-table-detail/po-table-detail.component.d.ts

@@ -1,6 +1,5 @@
 import { DecimalPipe } from '@angular/common';
 import { EventEmitter } from '@angular/core';
-import { PoThemeService } from '../../../services';
 import { PoTableDetailColumn } from './po-table-detail-column.interface';
 import { PoTableDetail } from './po-table-detail.interface';
 import * as i0 from "@angular/core";
@@ -12,7 +11,6 @@ import * as i0 from "@angular/core";
  * Componente responsável por apresentar o detalhe de cada linha da tabela.
  */
 export declare class PoTableDetailComponent {
-    protected poThemeService: PoThemeService;
     private decimalPipe;
     private _componentsSize?;
     /**
@@ -58,7 +56,7 @@ export declare class PoTableDetailComponent {
      */
     set detail(value: PoTableDetail);
     get detail(): PoTableDetail;
-    constructor(poThemeService: PoThemeService, decimalPipe: DecimalPipe);
+    constructor(decimalPipe: DecimalPipe);
     get detailColumns(): Array<PoTableDetailColumn>;
     get typeHeaderInline(): boolean;
     get typeHeaderTop(): boolean;