import { ChangeDetectorRef, EventEmitter, OnInit, TemplateRef } from '@angular/core'; import { AbstractControl, ControlValueAccessor, Validator } from '@angular/forms'; import { PoLanguageService } from '../../../services/po-language/po-language.service'; import { PoComboFilterMode } from './enums/po-combo-filter-mode.enum'; import { PoComboFilter } from './interfaces/po-combo-filter.interface'; import { PoComboGroup } from './interfaces/po-combo-group.interface'; import { PoComboLiterals } from './interfaces/po-combo-literals.interface'; import { PoComboOptionGroup } from './interfaces/po-combo-option-group.interface'; import { PoComboOption } from './interfaces/po-combo-option.interface'; import { PoComboFilterService } from './po-combo-filter.service'; import { PoHelperOptions } from '../../po-helper'; /** * @description * * O `po-combo` exibe uma lista de opções com fácil seleção e filtragem. * * Além da exibição padrão, nele é possível listar as opões em agrupamentos. * * É possível selecionar e navegar entre as opções da lista tanto através do *mouse* quanto do teclado. No teclado navegue com * as setas e pressione *Enter* na opção que desejar. * * Com ele também é possível definir uma lista à partir da requisição de um serviço definido em `p-filter-service`. * * Em `p-filter-mode`, o filtro poderá ser configurado para buscar opões que correspondam ao início, fim ou que contenha o valor digitado. * * O `po-combo` guarda o último valor caso o usuário desista de uma busca, deixando o campo ou pressionando *Esc*. Caso seja digitado no * campo de busca a descrição completa de um item, então a seleção será automaticamente efetuada ao deixar o campo ou pressionando *Enter*. * * Utilizando po-combo com serviço, é possivel digitar um valor no campo de entrada e pressionar a tecla 'tab' para que o componente * faça uma requisição à URL informada passando o valor digitado no campo. Se encontrado o valor, então o mesmo será selecionado, caso * não seja encontrado, então a lista de itens voltará para o estado inicial. * * #### Tokens customizáveis * * É possível alterar o estilo do componente usando os seguintes tokens (CSS): * * > 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 | * |----------------------------------------|-------------------------------------------------------|---------------------------------------------------| * | **Default Values** | | | * | `--font-family` | Família tipográfica usada | `var(--font-family-theme)` | * | `--font-size` | Tamanho da fonte | `var(--font-size-default)` | * | `--text-color` | Cor do texto | `var(--color-neutral-dark-90)` | * | `--text-color-placeholder` | Cor do texto no placeholder | `var(--color-neutral-light-30)` | * | `--color` | Cor principal do Combo | `var(--color-neutral-dark-70)` | * | `--background` | Cor de background | `var(--color-neutral-light-05)` | * | `--border-radius` | Contém o valor do raio dos cantos do elemento  | `var(--border-width-lg)` | * | `--min-width` | Largura mínima do combo | `150px` | * | `--field-container-title-justify` | Alinhamento horizontal do título (`justify-content`) | `space-between` | * | `--field-container-title-flex` | Flex do título (`flex`) | `1 auto` | * | **Hover** | | | * | `--color-hover` | Cor principal 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)` | * | **Error** | | | * | `--color-error` | Cor principal no estado de erro | `var(--color-feedback-negative-base)` | * | **Disabled** | | | * | `--color-disabled` | Cor principal no estado disabled | `var(--color-neutral-light-30)` | * | `--background-disabled` | Cor de background no estado disabled | `var(--color-neutral-light-20)` | * | **Suggestion** | | | * | `--text-color-suggestion` | Cor do texto no estado suggestion | `var(--color-neutral-mid-60)` | * | `--background-suggestion` | Cor do background no estado suggestion | `var(--color-brand-01-lightest)` | * */ export declare abstract class PoComboBaseComponent implements ControlValueAccessor, OnInit, Validator { protected changeDetector: ChangeDetectorRef; additionalHelpEventTrigger: string | undefined; /** * * @deprecated v23.x.x use `p-helper` * * @optional * * @description * Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`. * **Como boa prática, indica-se utilizar um texto com até 140 caracteres.** * > Requer um recuo mínimo de 8px se o componente estiver próximo à lateral da tela. * * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade. */ additionalHelpTooltip?: string; /** * @optional * * @description * * Evento disparado ao sair do campo. */ blur: EventEmitter; /** * @optional * * @description * * Aplica foco no elemento ao ser iniciado. * * > Caso mais de um elemento seja configurado com essa propriedade, apenas o último elemento declarado com ela terá o foco. * * @default `false` */ autoFocus: boolean; /** * @optional * * @description * Define se o título do campo será exibido de forma compacta. * * Quando habilitado (`true`), o modo compacto afeta o conjunto composto por: * - `po-label` * - `p-requirement (showRequired)` * - `po-helper` * * Ou seja, todos os elementos relacionados ao título do campo * (rótulo, indicador de obrigatoriedade e componente auxiliar) passam * a seguir o comportamento de layout compacto. * * Também é possível definir esse comportamento de forma global, * uma única vez, na folha de estilo geral da aplicação, por meio * da customização dos tokens CSS: * * - `--field-container-title-justify` * - `--field-container-title-flex` * * Exemplo: * * ``` * :root { * --field-container-title-justify: flex-start; * --field-container-title-flex: 0 1 auto; * } * ``` * * Dessa forma, o layout compacto passa a ser o padrão da aplicação, * sem a necessidade de definir a propriedade individualmente em cada campo. * * @default `false` */ compactLabel: import("@angular/core").InputSignalWithTransform; /** Label no componente. */ label?: string; /** Texto de apoio para o campo. */ help?: string; /** Nome do componente. */ name: string; /** * @optional * * @description * Nesta propriedade deve ser informada a URL do serviço em que será realizado o filtro para carregamento da lista de * itens no componente. * Caso haja a necessidade de customização, então pode ser informado um serviço implementando a interface PoComboFilter. * * Caso utilizado uma URL, o serviço deve ser retornado no padrão API TOTVS e utiliza as propriedades * `p-field-label` e `p-field-value` para a construção da lista de itens. * * Quando utilizada uma URL de serviço, então será concatenada nesta URL o valor que deseja-se filtrar da seguinte forma: * ``` * url + ?filter=Peter * ``` * * Se for definida a propriedade `p-filter-params`, a mesma também será concatenada. Por exemplo, para o * parâmetro `{ age: 23 }` a URL ficaria: * * ``` * url + ?page=1&pageSize=20&age=23&filter=Peter * ``` */ filterService: PoComboFilter | string; /** * @optional * * @description * * Se verdadeiro ativa a funcionalidade de scroll infinito para o combo, Ao chegar ao fim da tabela executará nova busca dos dados conforme paginação. * * @default `false` */ set infiniteScroll(value: boolean); get infiniteScroll(): boolean; /** * @optional * * @description * * Define o percentual necessário para disparar o evento `show-more`, que é responsável por carregar mais dados no combo. Caso o valor seja maior que 100 ou menor que 0, o valor padrão será 100%. * * **Exemplos** * - p-infinite-scroll-distance = 80: Quando atingir 80% do scroll do combo, o `show-more` será disparado. */ set infiniteScrollDistance(value: number); get infiniteScrollDistance(): number; /** * @optional * * @description * * Define o ícone que será exibido no início do campo. * * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo: * ``` * * ``` * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma: * ``` * * ``` * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo: * ``` * * * * * * ``` * > Para o ícone enquadrar corretamente, deve-se utilizar `font-size: inherit` caso o ícone utilizado não aplique-o. */ icon?: string | TemplateRef; /** * @optional * * @description * * Define se a indicação de campo opcional será exibida. * * > Não será exibida a indicação se: * - O campo conter `p-required`; * - Não possuir `p-help` e/ou `p-label`. * * @default `false` */ optional: boolean; /** Se verdadeiro, o campo receberá um botão para ser limpo. */ clean?: boolean; /** * @optional * * @description * * Se verdadeiro, o evento `p-change` receberá como argumento o `PoComboOption` referente à opção selecionada. * * @default `false` */ emitObjectValue: boolean; /** * @optional * * @description * * Se verdadeiro, desabilitará a busca de um item via TAB. * * @default `false` */ disabledTabFilter: boolean; /** * @optional * * @description * * Define se o filtro inicial será removido no primeiro clique do campo. * * Quando habilitado e o combo possui um valor padrão, o primeiro clique * exibirá todos os itens da lista ao invés de apenas o item inicializado. * * @default `false` */ set removeInitialFilter(value: boolean); get removeInitialFilter(): boolean; /** * @optional * * @description * * Exibe a mensagem setada se o campo estiver vazio e for requerido. * * > Necessário que a propriedade `p-required` esteja habilitada. * */ fieldErrorMessage: string; /** * * @deprecated v23.x.x use `p-helper` * * @optional * * @description * Evento disparado ao clicar no ícone de ajuda adicional. * * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade. */ additionalHelp: EventEmitter; /** * @optional * * @description * * Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo. * * > Caso essa propriedade seja definida como `true`, a mensagem de erro será limitada a duas linhas * e um tooltip será exibido ao passar o mouse sobre a mensagem para mostrar o conteúdo completo. * * @default `false` */ errorLimit: boolean; /** * @optional * * @description * * Deve ser informada uma função que será disparada quando houver alterações no ngModel. A função receberá como argumento o model modificado. * * > Pode-se optar pelo recebimento do objeto selecionado ao invés do model através da propriedade `p-emit-object-value`. */ change: EventEmitter; /** * @optional * * @description * Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. * Retorna um objeto `KeyboardEvent` com informações sobre a tecla. */ keydown: EventEmitter; /** * @optional * * @description * * Função para atualizar o ngModel do componente, necessário quando não for utilizado dentro da tag form. * * Na versão 12.2.0 do Angular a verificação `strictTemplates` vem true como default. Portanto, para utilizar * two-way binding no componente deve se utilizar da seguinte forma: * * ``` * * ``` * */ ngModelChange: EventEmitter; /** * @optional * * @description * * Deve ser informada uma função que será disparada quando houver alterações no Search input. A função receberá como argumento o input modificado. * */ inputChange: EventEmitter; /** * @docsPrivate * * Determinar se o valor do compo deve retorna objeto do tipo {value: any, label: any} */ controlValueWithLabel?: boolean; /** * @optional * * @description * * Define a direção preferida para exibição do `listbox` em relação ao campo (`top` ou `bottom`). * Útil em casos onde o posicionamento automático não se comporta como esperado, como quando o componente está próximo * ao final do formulário ou do container visível. Na maioria dos casos, essa direção será respeitada; no entanto, * pode ser ajustada automaticamente conforme o espaço disponível na tela. * * @default `bottom` */ listboxControlPosition: 'top' | 'bottom'; /** * @optional * * @description * * Define as opções do componente de ajuda (po-helper) que será exibido ao lado do label quando a propriedade `p-label` for definida, ou, ao lado do componente na ausência da propriedade `p-label`. * > Para mais informações acesse: https://po-ui.io/documentation/po-helper. * * > Ao configurar esta propriedade, o antigo ícone de ajuda adicional (`p-additional-help-tooltip` e `p-additional-help`) será ignorado. */ poHelperComponent: import("@angular/core").InputSignal; /** * @optional * * @description * * Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede * o espaço disponível é transferido para a próxima linha em pontos apropriados para uma * leitura clara. * * @default `false` */ labelTextWrap: import("@angular/core").InputSignal; cacheOptions: Array; defaultService: PoComboFilterService; firstInWriteValue: boolean; isFirstFilter: boolean; isFiltering: boolean; keyupSubscribe: any; onModelChange: any; previousSearchValue: string; selectedOption: any; selectedValue: any; selectedView: any; service: PoComboFilterService; visibleOptions: Array; page: number; pageSize: number; displayAdditionalHelp: boolean; dynamicLabel: string; dynamicValue: string; shouldApplyFocus: boolean; protected hasValidatorRequired: boolean; protected cacheStaticOptions: Array; protected comboOptionsList: Array; protected onModelTouched: any; private _changeOnEnter?; private _debounceTime?; private _disabled?; private _disabledInitFilter?; private _fieldLabel?; private _fieldValue?; private _filterMinlength?; private _filterMode?; private _filterParams?; private _literals?; private _loading; private _options; private _placeholder; private _required?; private _size?; private _initialSize?; private _sort?; private readonly language; private _infiniteScrollDistance?; private _infiniteScroll?; private _removeInitialFilter; private isRemoveInitialFilterSetByInput; private fromWriteValue; private validatorChange; /** Mensagem apresentada enquanto o campo estiver vazio. */ set placeholder(value: string); get placeholder(): string; /** * @optional * * @description * Esta propriedade define em quanto tempo (em milissegundos), aguarda para acionar o evento de filtro após cada pressionamento de tecla. * Será utilizada apenas quando houver serviço (`p-filter-service`). * * @default `400` */ set debounceTime(value: number); get debounceTime(): number; /** * @optional * * @description * Desabilita o filtro inicial no serviço, que é executado no primeiro clique no campo. * * @default `false` * */ set disabledInitFilter(value: boolean); get disabledInitFilter(): boolean; /** * @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-options`), esta propriedade será responsável pelo valor de cada item da lista. * * Necessário quando informar o serviço como URL e o mesmo não estiver retornando uma lista de objetos no padrão da interface * PoComboOption. * * @default `value` */ set fieldValue(value: string); get fieldValue(): string; /** * @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-options`), esta propriedade será responsável pelo texto de apresentação de cada item da lista. * * Necessário quando informar o serviço como URL e o mesmo não estiver retornando uma lista de objetos no padrão da interface * PoComboOption. * * @default `label` */ set fieldLabel(value: string); get fieldLabel(): string; /** * @optional * * @description * Valor mínimo de caracteres para realizar o filtro no serviço. * * @default `0` */ set filterMinlength(value: number); get filterMinlength(): number; /** * @optional * * @description * Define que o campo será obrigatório. * * @default `false` */ set required(required: boolean); get required(): boolean; /** * Define se a indicação de campo obrigatório será exibida. * * > Não será exibida a indicação se: * - Não possuir `p-help` e/ou `p-label`. */ showRequired: boolean; /** * @optional * * @description * * Define o tamanho do componente: * - `small`: altura do input como 32px (disponível apenas para acessibilidade AA). * - `medium`: altura do input como 44px. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` */ set size(value: string); get size(): string; /** * @optional * * @description * Indica que o evento `p-change` só será disparado ao clicar ou pressionar a tecla "Enter" sobre uma opção selecionada. * * @default `false` */ set changeOnEnter(changeOnEnter: boolean); get changeOnEnter(): boolean; /** * @optional * * @description * Indica que o campo será desabilitado. * * @default `false` */ set disabled(disabled: boolean); get disabled(): boolean; /** * @optional * * @description * Exibe um ícone de carregamento no lado direito do campo para sinalizar que uma operação está em andamento. * * @default `false` */ set loading(value: boolean); get loading(): boolean; get isDisabled(): boolean; /** Indica que a lista definida na propriedade p-options será ordenada pela descrição. */ set sort(sort: boolean); get sort(): boolean; /** * Nesta propriedade define a lista de opções do `po-combo`. * * > A lista pode ser definida utilizando um array com o valor representando o `value` e o `label` das seguintes formas: * * ``` * * ``` * * ``` * * ``` * * - Aconselha-se utilizar valores distintos no `label` e `value` dos itens. */ set options(options: Array); get options(): Array; /** * @optional * * @description * * Define o modo de pesquisa utilizado no filtro da lista de seleção: `startsWith`, `contains` ou `endsWith`. * * > Quando utilizar a propriedade `p-filter-service` esta propriedade será ignorada. * * @default `startsWith` */ set filterMode(filterMode: PoComboFilterMode); get filterMode(): PoComboFilterMode; /** * @optional * * @description * * Valor que será repassado como parâmetro para a URL ou aos métodos do serviço que implementam a interface *PoComboFilter*. * * > Caso a lista contenha agrupamentos, os mesmos só serão exibidos se houver no mínimo uma opção que corresponda à pesquisa. */ set filterParams(filterParams: any); get filterParams(): any; /** * @optional * * @description * * Objeto com as literais usadas no `po-combo`. * * Para utilizar basta passar a literal que deseja customizar: * * ``` * const customLiterals: PoComboLiterals = { * noData: 'Nenhum valor' * }; * ``` * * E para carregar a literal customizada, basta apenas passar o objeto para o componente. * * ``` * * * ``` * * > O objeto padrão de literais será traduzido de acordo com o idioma do * [`PoI18nService`](/documentation/po-i18n) ou do browser. */ set literals(value: PoComboLiterals); get literals(): PoComboLiterals; /** * @optional * * @description * * Define se o componente irá guardar o valor do model para evitar requisições repetidas. * * > Caso o valor seja `false`, o componente fará uma nova requisição mesmo que o valor procurado seja o mesmo do model. * * @default `true` */ cache: boolean; /** * @optional * * @description * * Define que o `listbox` e/ou popover (`p-helper` e/ou `p-error-limit`) serão incluídos no body da * página e não dentro do componente. Essa opção pode ser necessária em cenários com containers que possuem scroll ou * overflow escondido,garantindo o posicionamento correto de ambos próximo ao elemento. * * > Quando utilizado com `p-helper`, leitores de tela como o NVDA podem não ler o conteúdo do popover. * * @default `false` */ appendBox?: boolean; constructor(languageService: PoLanguageService, changeDetector: ChangeDetectorRef); get isOptionGroupList(): boolean; ngOnInit(): void; protected onThemeChange(): void; onInitService(): void; setService(service: PoComboFilter | string): void; compareMethod(search: string, option: PoComboOption | PoComboGroup, filterMode: PoComboFilterMode): any; startsWith(search: string, option: any): any; contains(search: string, option: any): boolean; endsWith(search: string, option: any): any; getOptionFromValue(value: any, options: any): any; getOptionFromLabel(label: any, options: any): any; updateSelectedValue(option: any, isUpdateModel?: boolean): void; callModelChange(value: any): any; isEqual(value: any, inputValue: any): boolean; mapSizeToIcon(size: string): string; searchForLabel(search: string, options: Array, filterMode: PoComboFilterMode): void; updateComboList(options?: Array): void; getNextOption(value: any, options: Array, reverse?: boolean): any; getIndexSelectedView(): number; compareObjects(obj1: any, obj2: any): boolean; verifyValidOption(): void; writeValue(value: any): void; setDisabledState(isDisabled: boolean): void; registerOnChange(fn: any): void; registerOnTouched(fn: any): void; registerOnValidatorChange(fn: () => void): void; validate(abstractControl: AbstractControl): { [key: string]: any; }; clear(value: any): void; protected configAfterSetFilterService(service: PoComboFilter | string): void; protected unsubscribeKeyupObservable(): void; protected validateModel(model: any): void; private comboListDefinitions; private checkIfService; private compareOptions; private getValueUpdate; private getValueWrite; private normalizeModelIfNeeded; private hasDuplicatedOption; private listingComboOptions; private sortOptions; private validateValue; private verifyComboOptions; private verifyComboOptionsGroup; private verifyIfHasLabel; private updateInternalVariables; private updateModel; private updateSelectedValueWithOldOption; private updateHasNext; private applySizeBasedOnA11y; abstract setInputValue(value: any): void; abstract applyFilter(value: string): void; abstract getObjectByValue(value: string): void; abstract getInputValue(): string; abstract initInputObservable(): void; }