import { ChangeDetectorRef, ElementRef, EventEmitter, OnInit } from '@angular/core'; import { AbstractControl, ControlValueAccessor, Validator } from '@angular/forms'; import { Observable, Subject, Subscription } from 'rxjs'; import { PoLanguageService } from '../../../services/po-language/po-language.service'; import { PoMultiselectFilterMode } from './enums/po-multiselect-filter-mode.enum'; import { PoMultiselectFilter } from './interfaces/po-multiselect-filter.interface'; import { PoMultiselectLiterals } from './interfaces/po-multiselect-literals.interface'; import { PoMultiselectOption } from './interfaces/po-multiselect-option.interface'; import { PoMultiselectFilterService } from './po-multiselect-filter.service'; import { PoHelperOptions } from '../../po-helper'; export declare const poMultiselectLiteralsDefault: { en: PoMultiselectLiterals; es: PoMultiselectLiterals; pt: PoMultiselectLiterals; ru: PoMultiselectLiterals; }; /** * @description * * O po-multiselect é um componente de múltipla seleção. * Este componente é recomendado para dar ao usuário a opção de selecionar vários itens em uma lista. * * Quando a lista possuir poucos itens, deve-se dar preferência para o uso do po-checkbox-group, por ser mais simples * e mais rápido para a seleção do usuário. * * Este componente também não deve ser utilizado em casos onde a seleção seja única. Nesses casos, deve-se utilizar o * po-select, po-combo ou po-radio-group. * * Com ele também é possível definir uma lista à partir da requisição de um serviço definido em `p-filter-service`. * * #### Boas práticas * * - Caso a lista apresente menos de 5 itens, considere utilizar outro componente; * - Não utilize o multiselect caso o usuário possa selecionar apenas uma opção. Para esse caso, opte por utilizar po-radio ou po-select; * * #### 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: * * - Quando em foco, o multiselect abre o listbox usando as teclas de Espaço ou Enter do teclado. * - Utilize as teclas Arrow Up [seta para cima] ou Arrow Down [seta para baixo] do teclado para navegar entre os itens do listbox. * - Utilize a tecla Esc do teclado para fechar o listbox. * - Quando um item estiver em foco, utilize as teclas Arrow Right [seta para direita] ou Arrow Left [seta para esquerda] do teclado para navegar entre eles. * - Quando em foco e havendo um item ou mais já selecionado, utilize a tecla Arrow Down [seta para baixo] do teclado para abrir o listbox. * * #### 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-placeholder`   | Cor do texto do placeholder | `var(--color-action-disabled)` | * | `--color` | Cor principal do multiselect | `var(--color-neutral-dark-70)` | * | `--background` | Cor de background | `var(--color-neutral-light-05)` | * | `--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-lighter)` | * | **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)` | * | **Disabled** | | | * | `--color-disabled` | Cor principal no estado disabled | `var(--color-action-disabled)` | * | `--background-disabled`   | Cor de background no estado disabled   | `var(--color-neutral-light-20)` | * | **Error** | | | * | `--color-error` | Cor principal no estado error | `var(--color-feedback-negative-base)` | * */ export declare abstract class PoMultiselectBaseComponent implements ControlValueAccessor, OnInit, Validator { protected cd?: ChangeDetectorRef; inputElement: ElementRef; 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 * * 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; /** * @optional * * @description * * Evento disparado ao sair do campo. */ blur: EventEmitter; /** Label no componente. */ label?: string; /** Texto de apoio para o campo. */ help?: string; /** * @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; /** Mensagem apresentada enquanto o campo estiver vazio. */ placeholder?: string; /** * @description * * Placeholder do campo de pesquisa. * * > Caso o mesmo não seja informado, o valor padrão será traduzido com base no idioma do navegador (pt, es e en). * * @default `Buscar` */ placeholderSearch?: string; /** Nome do componente. */ name: string; /** * @optional * * @description * * Indica se o campo "Selecionar todos" será escondido. * * @default `false` */ hideSelectAll?: 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; /** * @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; /** * * @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 * * Pode ser informada uma função que será disparada quando houver alterações no ngModel. */ 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 * * 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; /** * @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; selectedOptions: Array; visibleOptionsDropdown: Array; visibleTags: any[]; isServerSearching: boolean; isFirstFilter: boolean; filterSubject: Subject; service: PoMultiselectFilterService; defaultService: PoMultiselectFilterService; displayAdditionalHelp: boolean; protected onModelTouched: any; protected clickOutListener: () => void; protected resizeListener: () => void; protected getObjectsByValuesSubscription: Subscription; protected isExpandedHeight: boolean; private _filterService?; private _debounceTime?; private _disabled?; private _filterMode?; private _hideSearch?; private _literals; private _loading; private _options; private _required?; private _sort?; private _autoHeight; private _fieldLabel?; private _fieldValue?; private _size?; private _initialSize?; private readonly language; private lastLengthModel; private onModelChange; private validatorChange; private autoHeightInitialValue; /** * @optional * * @description * Nesta propriedade pode ser informada a URL do serviço em que será realizado o filtro para carregamento da lista de itens no componente. * *Também existe a possibilidade de informar um serviço implementando a interface `PoMultiselectFilter`. * *Caso utilizado uma URL, o serviço deve ser retornado no padrão [API PO UI](https://po-ui.io/guides/api) e utilizar 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: * *``` * // caso filtrar por "Peter" * https://localhost:8080/api/heroes?filter=Peter *``` * *E caso iniciar o campo com valor, os itens serão buscados da seguinte forma: * *``` * // caso o valor do campo for [1234, 5678]; * https://localhost:8080/api/heroes?value=1234,5678 * * //O *value* é referente ao `fieldValue`. *``` * */ set filterService(value: PoMultiselectFilter | string); get filterService(): PoMultiselectFilter | string; /** * @optional * * @description * * Define que a altura do componente será auto ajustável, possuindo uma altura minima porém a altura máxima será de acordo * com o número de itens selecionados e a extensão dos mesmos, mantendo-os sempre visíveis. * * > O valor padrão será `true` quando houver serviço (`p-filter-service`). * * @default `false` */ set autoHeight(value: boolean); get autoHeight(): boolean; /** * @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`) e somente será aceito valor maior do que *zero*. * * @default `400` */ set debounceTime(value: number); get debounceTime(): number; /** * @optional * * @description * * Objeto com as literais usadas no `po-multiselect`. * * Existem duas maneiras de customizar o componente, passando um objeto com todas as literais disponíveis: * * ``` * const customLiterals: PoMultiselectLiterals = { * noData: 'Nenhum dado encontrado', * placeholderSearch: 'Buscar', * selectAll: 'Select all', * selectItem: 'Select items' * }; * ``` * * Ou passando apenas as literais que deseja customizar: * * ``` * const customLiterals: PoMultiselectLiterals = { * noData: 'Sem dados' * }; * ``` * * E para carregar as literais customizadas, 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: PoMultiselectLiterals); get literals(): PoMultiselectLiterals; /** * @optional * * @description * * Define que o campo será obrigatório. * * > Esta propriedade é desconsiderada quando o input está desabilitado `(p-disabled)`. * * @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 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; /** * @optional * * @description * * Esconde o campo de pesquisa existente dentro do dropdown do po-multiselect. * * @default `false` */ set hideSearch(hideSearch: boolean); get hideSearch(): boolean; /** * @description * * Nesta propriedade deve ser definida uma lista de objetos que será exibida no multiselect. * Esta lista deve conter os valores e os labels que serão apresentados na tela. * * > Essa propriedade é imutável, ou seja, sempre que quiser atualizar a lista de opções disponíveis * atualize a referência do objeto: * * ``` * // atualiza a referência do objeto garantindo a atualização do template * this.options = [...this.options, { value: 'x', label: 'Nova opção' }]; * * // evite, pois não atualiza a referência do objeto podendo gerar atrasos na atualização do template * this.options.push({ value: 'x', label: 'Nova opção' }); * ``` * > A lista pode ser definida utilizando um array com o valor representando `value` e `label` das seguintes formas: * * ``` * * ``` * * ``` * * ``` * * - Aconselha-se utilizar valores distintos no `label` e `value` dos itens. */ set options(options: Array); get options(): Array; /** * @optional * * @description * * Indica que a lista definida na propriedade p-options será ordenada pelo label antes de ser apresentada no * dropdown. * * @default `false` */ set sort(sort: boolean); get sort(): boolean; /** * @optional * * @description * * Define o modo de pesquisa utilizado no campo de busca, quando habilitado. * Valores definidos no enum: PoMultiselectFilterMode * * @default `startsWith` */ set filterMode(filterMode: PoMultiselectFilterMode); get filterMode(): PoMultiselectFilterMode; /** * @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 * `PoMultiSelectOption`. * * @default `label` */ set fieldLabel(value: string); get fieldLabel(): 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 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 * `PoMultiSelectOption`. * * @default `value` */ set fieldValue(value: string); get fieldValue(): string; constructor(languageService: PoLanguageService, cd?: ChangeDetectorRef); ngOnInit(): void; protected onThemeChange(): void; setService(service: PoMultiselectFilter | string): void; validAndSortOptions(): void; setUndefinedLabels(options: any): void; updateList(options: Array): void; callOnChange(selectedOptions: Array): void; eventChange(selectedOptions: any): void; getValuesFromOptions(selectedOptions: Array): any[]; getLabelByValue(value: any): any; mapSizeToIcon(size: string): string; searchByLabel(search: string, options: Array, filterMode: PoMultiselectFilterMode): void; compareMethod(search: string, option: PoMultiselectOption, filterMode: PoMultiselectFilterMode): any; startsWith(search: string, option: PoMultiselectOption): any; contains(search: string, option: PoMultiselectOption): boolean; endsWith(search: string, option: PoMultiselectOption): any; validate(c: AbstractControl): { [key: string]: any; }; updateSelectedOptions(newOptions: Array, options?: any[]): void; writeValue(values: any): void; setDisabledState(isDisabled: boolean): void; registerOnChange(fn: any): void; registerOnTouched(fn: any): void; registerOnValidatorChange(fn: () => void): void; private getValueUpdate; private getValueWrite; private setLabelsAndValuesOptions; private validateModel; private updateInputHeight; private applySizeBasedOnA11y; abstract applyFilter(value?: string): Observable>; abstract updateVisibleItems(): void; }