import { type EventEmitter } from '../../stencil-public-runtime'; import { type FormValidationState } from '../../shared/utils/form'; import type { BrDensity } from '../global.types'; import type { InputToggle } from '../input/input.types'; import type { SelectOptionData, SelectOptionStateChange, SelectSearchDetail, SelectSearchMode, SelectStateChangeDetail, SelectValidator } from './select.types'; /** * O `br-select` permite escolher uma ou mais opções em uma lista suspensa expansível com suporte a busca e virtualização. * * Declare as opções com `` no slot padrão, ou forneça os dados dinamicamente com o método `setOptions()`. Para seleção múltipla, use `multiple`. Para habilitar busca por digitação, use `filterable`. * * ```html * * * * * * ``` * * Em formulários HTML, o componente integra-se nativamente via `ElementInternals`, enviando os valores selecionados no submit e validando campos obrigatórios com `required`. * * ### Quando usar * * - Listas com 5 ou mais opções que ocupariam muito espaço visível se exibidas abertas. * - Seleção que exige filtro ou busca por digitação. * - Carregamento dinâmico ou remoto de opções a partir de uma API (`search-mode="remote"`). * * ### Quando evitar * * - Poucas opções fixas (2 a 4 opções): use `br-radio` ou `br-radio-group`. * - Escolha simples de sim/não: use `br-switch` ou `br-checkbox`. * * Consulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/select?tab=designer). * * @category Formulários, Seleção * @status stable * @slot default - Opções declaradas com elementos br-select-option. * @slot feedback - Mensagem de validação, normalmente um br-message. * @slot validation-loading - Indicador exibido durante validação assíncrona. * @slot loading - Indicador exibido na lista enquanto `loading` está ativo. Padrão: spinner com o texto "Pesquisando…"; aceita texto, imagem ou qualquer HTML. * * @part container - Contêiner visual principal do select. * @part input - Campo de seleção e busca. * @part input-container - Contêiner visual do campo. * @part input-label - Rótulo do campo. * @part input-field - Campo input nativo. * @part input-group - Grupo visual do campo. * @part input-icon - Ícone do campo. * @part input-action - Botão de abertura e fechamento. * @part input-action-button - Botão interno da ação. * @part input-clear - Botão de limpar o termo digitado durante a busca. * @part list - Lista de opções. * @part option - Opção individual. * @part option-group - Cabeçalho visual de um grupo de opções. * @part select-all - Alias legado para a opção de selecionar todos. * @part empty-option - Alias legado para a opção vazia da lista. * @part option-checkbox - Alias legado para o checkbox da opção. * @part option-radio - Alias legado para o radio da opção. * @part hidden-select - Select nativo invisível usado na integração com formulários. * @part feedback - Área de mensagem de validação. * @part validation-loading - Área do indicador de validação assíncrona. */ export declare class Select { private static readonly SELECT_ALL_LABEL; private static readonly DESELECT_ALL_LABEL; /** * Referência ao elemento host do componente. * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente. */ el: HTMLBrSelectElement; elementInternals: ElementInternals; formDisabledCallback(disabled: boolean): void; formResetCallback(): void; formStateRestoreCallback(state: string | File | FormData | null): void; /** * Remove a borda do input quando o componente não está em foco. * * @default false */ borderless: boolean; /** * Desativa toda a interação do select. * * @default false */ disabled: boolean; /** * Define a densidade visual compartilhada pelo campo e pela lista de opções. * Aceita `small`, `medium` ou `large`. Valores inválidos usam `medium`. * A opção sintética de selecionar todos permanece com densidade `small`. * * @default 'medium' */ density: BrDensity; /** * Exibe label e campo na mesma linha. * * @default false * @deprecated Use `inline`. */ isInline: boolean; /** Exibe rótulo e controle em linha. Quando informada, tem precedência sobre `isInline`. */ inline?: boolean; /** * Habilita o modo de seleção múltipla. * * @default false * @deprecated Use `multiple`. */ isMultiple: boolean; /** Habilita seleção múltipla. Quando informada, tem precedência sobre `isMultiple`. */ multiple?: boolean; /** * Mantém a lista aberta depois de uma seleção. * * @default false * @deprecated O comportamento atual usa o fechamento padrão do select; mantenha esta prop * apenas para compatibilidade com integrações legadas. */ keepOpenOnSelect: boolean; /** * Define quantas linhas visuais ficam visíveis na janela da lista. * Cabeçalhos de grupo também ocupam uma linha quando existem. * Deve ser um inteiro positivo; valores inválidos usam 6. * * @default 6 */ visibleItems: number; /** * Informa a altura base de cada opção ou cabeçalho para o cálculo de virtual scroll. * Deve ser um número finito positivo; valores inválidos usam 40. * * @default 40 */ itemHeight: number; /** * Controla a largura do campo de entrada. * * @type {string} * @example '20rem' */ inputWidth: string | undefined; /** * Define quantas opções extras são renderizadas antes e depois da área visível no virtual scroll. * Deve ser um inteiro não negativo; valores inválidos usam 1. * * @default 1 */ overscan: number; /** * Oculta os divisores entre opções consecutivas, sem alterar a altura das linhas. * @default false */ hideDividers: boolean; private get effectiveVisibleItems(); private get effectiveDensity(); private get effectiveItemHeight(); private get effectiveOverscan(); /** * Controla o estado aberto/fechado da lista. * * @default false * @deprecated Use `open`. */ isOpen: boolean; /** Controla o estado aberto. Quando informada, tem precedência sobre `isOpen`. */ open?: boolean; /** * Texto exibido como rótulo do campo. * * @type {string | undefined} */ label?: string; /** * Nome do campo para integração com formulários. * * @type {string | undefined} */ name?: string; /** * Valor público do select baseado nas opções atualmente selecionadas. * * @type {string | string[] | undefined} * @remarks Em modo múltiplo, o valor público é um array de strings. * @example * ```js * const select = document.querySelector('br-select'); * select.multiple = true; * select.value = ['df', 'sp']; * ``` */ value?: string | string[]; /** * Texto exibido quando não há seleção. * * @type {string | undefined} */ placeholder: string; /** * Indica que o preenchimento do select é obrigatório. * * @default false */ required: boolean; /** * Rótulo apresentado para a opção de selecionar todos no modo múltiplo. * * @default 'Selecionar todos' */ selectAllLabel: string; /** * Habilita a filtragem textual das opções por rótulo ou valor. * * @default true */ filterable: boolean; /** * Define se as opções são filtradas localmente ou fornecidas por uma busca remota. * Em `remote`, o componente emite `brSelectSearch` e exibe as opções recebidas * sem filtrá-las de novo pelo termo digitado; a aplicação deve buscar, validar e * aplicar a resposta com `setOptions()` ou re-renderizando os `br-select-option`. * A seleção é preservada mesmo quando não aparece na resposta seguinte. * @default 'local' */ searchMode: SelectSearchMode; /** * Termo repassado à lista. Ela só filtra no modo local; no remoto, usa o termo * apenas para exibir a mensagem de lista vazia. */ private get listSearchTerm(); private get effectiveSearchMode(); /** * Indica que uma busca remota de opções está pendente. * Enquanto ativo, a lista exibe o slot `loading` (padrão: "Pesquisando…") e novas * opções não podem ser selecionadas; a aplicação continua responsável por * debounce, cancelamento, erros e autenticação. * @default false */ loading: boolean; /** * Exibe a lupa mesmo quando o select não é filtrável; selects com `filterable` * já a exibem. A lupa é omitida quando o campo é estreito demais (menos de * 128px) para comportar lupa, valor e seta. * * @default false */ showSearchIcon: boolean; /** * Oculta a lupa mesmo quando `filterable` está ativo, sem desabilitar a busca. * Tem precedência visual sobre `showSearchIcon` e não altera o comportamento padrão. * * @default false */ hideSearchIcon: boolean; /** * Rótulo apresentado quando todas as opções já estão selecionadas no modo múltiplo. * * @default 'Desselecionar todos' */ unselectAllLabel: string; /** * Fornece opções como array ou JSON, além das opções projetadas por slot. * Use property binding para arrays em JavaScript e frameworks; no atributo * HTML, informe uma string JSON válida. Na inicialização, opções no slot têm * precedência quando existem. Depois de uma alteração nesta prop ou de uma * chamada a `setOptions()`, a coleção imperativa passa a ser a fonte de dados. * Não use em código novo. Declare `br-select-option` no slot padrão ou, para * respostas dinâmicas/remotas, atualize a coleção com `setOptions()`. * * @example * ```html * * * ``` * @deprecated Use `br-select-option` no slot padrão ou `setOptions()` para respostas dinâmicas/remotas. */ options: string | { group?: string; label: string; value: string; selected?: boolean; }[] | SelectOptionData[]; /** Controla o autocomplete do campo de busca interno. Aceita `on` ou `off`; valores inválidos são ignorados. */ autocomplete?: InputToggle; /** Identificador público do controle. */ readonly customId: string; /** Quantidade mínima de opções selecionadas no modo múltiplo. Deve ser um inteiro não negativo; valores inválidos usam 0. */ readonly minSelections: number; /** Quantidade máxima de opções selecionadas no modo múltiplo. Deve ser um inteiro não negativo; valores inválidos usam 0. */ readonly maxSelections: number; private get effectiveMinSelections(); private get effectiveAutocomplete(); private get effectiveMaxSelections(); /** * Validação síncrona ou assíncrona executada no método `validate()`. * Recebe uma string no modo simples e um array de strings no modo múltiplo. * * @example * ```js * const select = document.querySelector('br-select'); * select.validator = (value) => * (Array.isArray(value) ? value.length > 0 : Boolean(value)) ? null : 'Selecione uma opção'; * ``` */ readonly validator?: SelectValidator | string; /** * Evento emitido quando o estado público do select muda. * * @event brSelectStateChange * @type {EventEmitter} * @remarks * O payload consolidado informa abertura, desabilitação e seleção atual. */ brSelectStateChange: EventEmitter; /** * Evento emitido quando o valor público do select é alterado. * * @deprecated Use os eventos nativos `input` e `change`. */ valueChange: EventEmitter; /** * Emite a opção que recebeu foco ou hover. * * @deprecated Use a navegação e os eventos de estado atuais. */ optionHover: EventEmitter<{ label: string; value: string; }>; /** * Emitido uma vez por edição do campo de busca, inclusive ao limpar a consulta. * O `detail` contém `{ query }`; o evento é informativo e não cancelável. * A aplicação deve controlar debounce, transporte e ciclo de vida da busca. */ brSelectSearch: EventEmitter; /** * Emitido quando a lista é aberta. * * @deprecated Use `brSelectStateChange`. */ opened: EventEmitter; /** * Emitido quando a lista é fechada. * * @deprecated Use `brSelectStateChange`. */ closed: EventEmitter; /** * Informa o início e o resultado de uma validação síncrona ou assíncrona. * O `detail` contém `validating`, `valid` e `message`. */ brSelectValidationChange: EventEmitter<{ validating: boolean; valid: boolean | null; message: string | null; }>; private selectInputElement; private selectListElement; private shouldRestoreSelectedOptionOnOpen; private isSelectInputPointerDown; private skipSelectInputClickToggle; private pendingOptions; private slotElement; private handleSlotChange; private readonly slotReconciler; private lastEmittedStateKey; private isStateChangeReady; private isValueChangeReady; private readonly listboxId; private checkingValidity; private showValidationErrors; private validationErrorMessage; private activeOptionIndex; /** * Oculta o indicador visual da opção ativa após interação por ponteiro, como `:focus-visible`. * O índice ativo e o `aria-activedescendant` são preservados; o teclado volta a exibi-lo. */ private isActiveIndicatorHidden; private displayValue?; private searchTerm; private formDisabled; private isValidating; private validatorMessage; private hasFeedbackSlot; private hasValidationLoadingSlot; private selectedValuesState; private nativeSelect?; private initialValue?; private customValidationMessage; private validationRunId; private lastAnnouncedOpen; private cleanupBlockingSurfaceDismissal?; private isApplyingExternalValue; private suppressValueChange; private hasImperativeOptions; private remoteSelectedOptions; private selectionInitialized; private typeAhead; private lastTypeAheadTime; private selectedValues; componentWillLoad(): void; componentDidLoad(): void; componentDidRender(): void; disconnectedCallback(): void; private get effectiveMultiple(); private get effectiveInline(); private get effectiveOpen(); private valueFromPublicValue; private setSelectedValues; private get canonicalSelectedValues(); private applyCanonicalSelection; private getListOptions; private isDisabled; handleDisabledChange(isDisabled: boolean): void; handleIsOpenChange(isOpen: boolean): void; handleFilterableChange(filterable: boolean): void; handleLoadingChange(loading: boolean): void; handleIsMultipleChange(isMultiple: boolean): void; handleMultipleChange(multiple?: boolean): void; handleOpenChange(open?: boolean): void; handleExternalValueChange(value?: string | string[]): void; handleOptionsChange(): void; private syncOpenState; private attachBlockingSurfaceListener; private detachBlockingSurfaceListener; handleSelectFocusOut(event: FocusEvent): void; handleSelectInvalid(event: Event): void; handleSelectInputFocus(): void; handleSelectPointerDown(event: PointerEvent): void; handleSelectInputValueChange(event: CustomEvent): void; handleSelectInputActionClick(): void; handleSelectInputClick(): void; handleSelectOptionStateChange(event: CustomEvent, restoreFocus?: boolean): void; /** * Recalcula a coleção quando uma opção projetada muda por atribuição direta * de `selected`, `disabled`, `label`, `group` ou `value`. A lista virtualizada em * Shadow DOM não é uma fonte independente; ela recebe o snapshot pelo seu * contrato público `options`. */ handleSelectOptionPropsChange(event: Event): void; handleSelectOptionHover(event: CustomEvent<{ label: string; value: string; }>): void; handleKeyDown(event: KeyboardEvent): Promise; handleWindowClick(ev: MouseEvent): void; /** * Habilita o select para interação do usuário. * * @returns Uma promise concluída após a atualização do estado. */ enable(): Promise; /** * Desabilita o select e impede novas interações. * * @returns Uma promise concluída após a atualização do estado. */ disable(): Promise; /** * Abre a lista de opções quando o componente está habilitado. * * @returns Uma promise concluída após a atualização do estado. */ show(): Promise; /** * Fecha a lista de opções quando o componente está habilitado. * * @returns Uma promise concluída após a atualização do estado. */ close(): Promise; /** * Alterna entre os estados aberto e fechado do select. * * @returns {Promise} Uma promise concluída após a atualização do estado. */ toggleOpen(): Promise; /** * Limpa a seleção atual. * * @deprecated Use `setValue('')` ou a API de formulário. */ clear(): Promise; /** * Retorna o valor público atual. * * @deprecated Leia a propriedade `value` diretamente. */ getValue(): Promise; /** * Define o valor público do select. * * @deprecated Atribua a propriedade `value` diretamente. */ setValue(value: string | string[]): Promise; /** * Move o foco para o campo interno. * * @deprecated Use o foco nativo do componente quando possível. */ setFocus(): Promise; checkValidity(): Promise; reportValidity(): Promise; setCustomValidity(message: string): Promise; getValidationState(): Promise; validate(): Promise; /** * Substitui a coleção atual de opções por uma nova lista. * * @param options Opções que devem ser exibidas pela lista interna. * Em `search-mode="remote"`, a seleção atual é preservada mesmo quando não * aparece na resposta recebida. * @returns Uma promise concluída após a sincronização das opções. */ setOptions(options: SelectOptionData[]): Promise; /** * Adiciona ou atualiza uma única opção na coleção interna. * * @param option Opção que deve ser inserida ou atualizada. * @returns Uma promise concluída após a sincronização da opção. */ setOption(option: SelectOptionData): Promise; /** * Sincroniza as opções declaradas no slot com a lista interna renderizada. * * @remarks * Esse passo mantém alinhados o estado visual da lista e o texto exibido no input * quando as opções são adicionadas, removidas ou alteradas dinamicamente. */ private syncOptionsFromSlot; private getHostOptions; private nodeToOption; private elementToOption; private textNodeToOption; private optionElementToData; private getOptionElementGroup; private extractInnerTextFromOption; private getOptionLabel; private getDisplayValue; private syncDisplayValue; private syncValue; private getSerializedValue; private getOptionsProp; private applySelectedValue; private applyRemoteSelection; private rememberRemoteSelections; private getFormOptions; private syncFormState; private syncNativeSelectSelection; private getSelectedValues; private updateValidity; private getNativeSelect; private resolveValidator; private getRenderedDisplayValue; /** * Retorna o id da opção atualmente ativa para consumo do `aria-activedescendant`. * * @returns O id da opção ativa ou `undefined` quando a lista está fechada. */ private syncComboboxAccessibility; /** * Indica se o clique atual foi o mesmo que deu foco ao campo e abriu a lista, * limpando o estado do ponteiro. Esse clique não deve alternar a lista de novo. */ private consumeFocusOpenClick; private toggleOpenFromPointer; private openListAndRestorePointerFocus; private scrollFirstSelectedOptionToTop; private openAndFocusBoundary; private focusOptionByTypedCharacters; /** * Define qual opção deve receber foco ao abrir ou iniciar a navegação pelo teclado. * * @param direction Direção inicial da navegação. `1` avança e `-1` recua. */ private focusInitialOption; private moveActiveOption; /** * Resolve o índice ativo atual a partir do estado local ou da opção já selecionada. * * @returns O índice que deve servir como base para a próxima navegação por teclado. */ private getCurrentActiveIndex; /** * Encaminha o foco lógico para uma opção específica da lista interna. * * @param index Índice da opção que deve receber foco. * @param scrollToTop Posiciona a opção no topo da viewport quando verdadeiro. */ private focusOptionByIndex; /** * Seleciona a opção atualmente ativa sem duplicar a lógica de seleção da lista. * * @remarks * Em modo simples, confirma a opção ativa; no múltiplo, alterna sua seleção. */ private selectFocusedOption; private syncActiveOptionIndex; /** * Reflete no slot a seleção que foi consolidada pela lista interna. * * @param detail Estado emitido pela opção que disparou a mudança. * @remarks * Essa sincronização mantém as props/atributos das opções declaradas pelo consumidor em * conformidade com o estado calculado internamente, inclusive no caso do "selecionar todos". */ private syncSlottedOptionSelection; private reflectRenderedListSelection; private isSelectAllLabel; private isSelectAllOption; private getSelectAllLabel; private normalizeSelectAllState; private handleOutsideClick; private emitStateChange; private getStateChangeDetail; private normalizeOptionForOutput; private getStateChangeKey; /** * Obtém o snapshot atual das opções respeitando a fonte mais atual disponível. * * @returns A coleção de opções normalizadas para leitura do estado público. * @remarks * A precedência é: lista interna, opções pendentes, conteúdo do slot e, por último, * os filhos atuais do host. */ private getCurrentOptions; private getNavigableOptions; private clearSearch; private getEventPath; private getSelectListController; private getCssClassMap; private getAccessibleLabel; private setSelectionMode; private renderSelectInput; private renderSelectList; private renderHiddenSelect; private getNativeOptionGroups; private renderNativeOption; render(): any; }