import { type EventEmitter } from '../../stencil-public-runtime'; import { type FormValidationState } from '../../shared/utils/form'; import type { InputToggle } from '../input/input.types'; import type { SelectOptionData, SelectOptionStateChange, SelectSearchDetail, SelectSearchMode, SelectStateChangeDetail, SelectValidator } from './select.types'; /** * ## Design System * * Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/select?tab=designer). * * @category Formulários * @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 durante a busca remota de opções. * * @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 list - Lista de opções. * @part option - Opção individual. * @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; /** * 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 opções ficam visíveis na janela da lista. * * @default 6 */ visibleItems: number; /** * Informa a altura base de cada opção para o cálculo de virtual scroll. * * @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. * * @default 1 */ overscan: number; /** * 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. */ 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`; a aplicação deve buscar, * validar e aplicar as opções por `setOptions()`. * @default 'local' */ searchMode: SelectSearchMode; /** * Indica que uma busca remota de opções está pendente. * Enquanto ativo, 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 o ícone de busca no campo de entrada. * * @default false */ showSearchIcon: boolean; /** * Rótulo apresentado quando todas as opções já estão selecionadas no modo múltiplo. * * @default 'Desselecionar todos' */ unselectAllLabel: string; /** * Opções fornecidas como array ou JSON, além das opções projetadas por slot. * * @deprecated O formato de opções tipado atual é preferível; o formato legado permanece aceito. */ options: string | { label: string; value: string; selected?: boolean; }[] | SelectOptionData[]; /** Controla o autocomplete do campo de busca interno. */ autocomplete?: InputToggle; /** Identificador público do controle. */ readonly customId: string; /** Quantidade mínima de opções selecionadas no modo múltiplo. */ readonly minSelections: number; /** Quantidade máxima de opções selecionadas no modo múltiplo. */ readonly maxSelections: number; /** Validação síncrona ou assíncrona executada no método `validate()`. */ 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 pendingOptions; private slotElement; private handleSlotChange; private lastEmittedStateKey; private isStateChangeReady; private isValueChangeReady; private readonly listboxId; private activeOptionIndex; 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 selectedValues; private suppressFocusOpen; 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; handleSelectInputFocus(): void; handleSelectInputValueChange(event: CustomEvent): void; handleSelectInputActionClick(): void; handleSelectInputClick(): void; handleSelectOptionStateChange(event: CustomEvent): 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 extractInnerTextFromOption; private getAssignedSlotText; 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 getActiveDescendant; private toggleOpenFromPointer; private openListAndRestorePointerFocus; private scrollFirstSelectedOptionToTop; private openAndFocusBoundary; /** * Define qual opção deve receber foco ao abrir o select pelo teclado. * * @param direction Direção inicial da navegação. `1` abre do topo para baixo e `-1` do fim para cima. */ 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. */ private focusOptionByIndex; /** * Seleciona a opção atualmente ativa sem duplicar a lógica de seleção da lista. * * @remarks * Em modo simples, a opção ativa é sempre marcada. Em modo múltiplo, a seleção é alternada. */ 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 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 normalizeSearchText; private getNavigableOptions; private clearSearch; private getEventPath; private getSelectListController; private getCssClassMap; private getAccessibleLabel; private setSelectionMode; private renderSelectInput; private renderSelectList; private renderHiddenSelect; render(): any; }