@govbr-ds/webcomponents/dist/types/components/select/select.d.ts

Biblioteca de Web Components baseado no GovBR-DS

import { EventEmitter } from '../../stencil-public-runtime';
export declare class Select {
    /**
     * 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;
    /**
     * Rótulo que indica o tipo de informação que deve ser selecionada.
     */
    label: string;
    /**
     * Texto auxiliar exibido antes de uma seleção.
     */
    placeholder: string;
    /**
     * Habilita o modo múltiplo para selecionar várias opções.
     */
    isMultiple: boolean;
    /**
     * Define as opções disponíveis no componente de seleção.
     * Pode ser fornecida como:
     * - Uma **string** contendo um JSON válido que será analisado em um array de objetos. Exemplo: `'[{"label": "Opção 1", "value": "1"}]'.
     * - Um **array de objetos**, onde cada objeto representa uma opção com as propriedades:
     *   - `label`: O texto exibido para o usuário (obrigatório).
     *   - `value`: O valor associado à opção (obrigatório).
     *   - `selected`: Um boolean opcional que indica se a opção está pré-selecionada (padrão: `false`).
     * Se uma string for fornecida, ela será convertida internamente para um array via `JSON.parse`. Caso o formato seja inválido, um erro será registrado e as opções serão definidas como um array vazio.
     * Exemplo de uso:
     * ```typescript
     * options='[{"label": "Sim", "value": "1"}, {"label": "Não", "value": "0"}]'
     * // ou
     * options=[{ label: "Sim", value: "1" }, { label: "Não", value: "0" }]
     * ```
     */
    options: string | {
        label: string;
        value: string;
        selected?: boolean;
    }[];
    /**
     * Rótulo para selecionar todas as opções.
     */
    selectAllLabel: string;
    /**
     * Rótulo para desmarcar todas as opções.
     */
    unselectAllLabel: string;
    /**
     * Exibe o ícone de busca no campo de entrada.
     */
    showSearchIcon: boolean;
    /**
     * Indica se a listagem de itens do select está expandida
     */
    isOpen: boolean;
    /**
     * Identificador único.
     * Caso não seja fornecido, um ID gerado automaticamente será usado.
     */
    readonly customId: string;
    parsedOptions: {
        label: string;
        value: string;
        selected?: boolean;
    }[];
    inputValue: string;
    isAllSelected: boolean;
    isExpanded: boolean;
    focusedIndex: number;
    /**
     * Evento emitido sempre que houver atualização nos itens selecionados.
     */
    brDidSelectChange: EventEmitter;
    synchronizeSelect(): void;
    componentWillLoad(): void;
    componentDidLoad(): void;
    disconnectedCallback(): void;
    /**
     * Fecha a lista suspensa (`dropdown`) do `br-select` quando o usuário clica fora do componente.
     * O listener global é adicionado no `componentDidLoad` e removido no `disconnectedCallback` para evitar vazamentos de memória.
     * Se a lista estiver aberta (`this.isExpanded`) e o clique ocorrer fora (`!this.el.contains(target)`), ela é fechada.
     * A reatividade do StencilJS garante a atualização automática da interface.
     * A arrow function (`=>`) mantém o contexto correto de `this` ao ser usada como callback.
     *
     * @param {MouseEvent} event O evento de clique.
     * @returns {void}
     */
    private readonly handleClickOutside;
    private handleKeydownOnInput;
    private handleKeydownOnList;
    private handleKeydownOnItem;
    private handleSelectAllKeyDown;
    private resetFocus;
    private focusItemInDirection;
    private focusItem;
    private openSelect;
    private closeSelect;
    private handleSelection;
    private updateSelectedOptions;
    private getStringValue;
    private emitSelectedOptions;
    private updateSelectedAllState;
    private toggleSelectAll;
    private renderInput;
    private renderSelectAllCheckbox;
    private renderOptions;
    /**
     * Determina um id para o radio.
     */
    private getComputedId;
    /**
     * Inverte o valor da prop `isOpen`
     */
    toggleOpen(): Promise<void>;
    private getCssClassMap;
    render(): any;
}