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

Biblioteca de Web Components baseado no GovBR-DS

import { EventEmitter } from '../../stencil-public-runtime';
/**
 * O componente `br-collapse` pode ser utilizado em dois cenários principais: collapse simples ou accordion.
 *
 * - Collapse simples: Cada instância funciona de forma independente, permitindo abrir ou fechar o conteúdo conforme necessário, sem impactar outros componentes na página.
 * - Accordion: Quando configurado com a propriedade `accordionGroup`, múltiplos componentes `br-collapse` são agrupados. Nesse caso, apenas um item pode estar expandido por vez. Ao abrir um novo item, o anteriormente expandido será automaticamente fechado.
 *
 * @slot default - O conteúdo expansível mostrado/ocultado dinamicamente.
 * @slot trigger - Permite personalizar o conteúdo do acionador (texto, imagens, etc.).
 */
export declare class Collapse {
    /**
     * Referência ao elemento host do componente.
     * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
     */
    el: HTMLBrCollapseElement;
    elementInternals: ElementInternals;
    /**
     * Identificador único.
     * Caso não seja fornecido, um ID gerado automaticamente será usado.
     */
    readonly customId: string;
    /**
     * Define se o collapse está aberto ou fechado.
     * @default false
     */
    open: boolean;
    /**
     * Define se o collapse faz parte de um accordion
     * @default null
     */
    accordionGroup?: string;
    /**
     * Classe CSS para o ícone de expansão
     * @default 'fa6-solid:chevron-down'
     */
    iconToShow: string;
    /**
     * Classe CSS para o ícone de recolhimento
     * @default 'fa6-solid:chevron-up'
     */
    iconToHide: string;
    /**
     * Define a posição do ícone: 'left' ou 'right'
     * @default 'right'
     */
    iconPosition: 'left' | 'right';
    /**
     * Evento emitido ao expandir.
     */
    brDidOpen: EventEmitter<{
        id: string;
        accordionGroup: string;
    }>;
    /**
     * Evento emitido ao recolher.
     */
    brDidClose: EventEmitter<{
        id: string;
        accordionGroup: string;
    }>;
    /**
     * Evento disparado quando o componente é aberto.
     * @param event Evento disparado quando o componente é aberto.
     */
    /**
     * Handler para o evento de abertura do componente.
     * Fecha o collapse atual se ele não for parte do mesmo grupo de accordion.
     * @param event Evento disparado quando o componente é aberto.
     */
    handleOpen(event: CustomEvent): void;
    /**
     * Ciclo de vida do componente. Chamado uma vez logo após o componente ser adicionado ao DOM.
     */
    componentWillLoad(): void;
    /**
     * Ciclo de vida do componente. Chamado quando o componente é removido do DOM.
     */
    disconnectedCallback(): void;
    /**
     * Sincroniza o estado do elemento <details> com a propriedade open.
     * Isso garante que o estado visual do componente corresponda ao estado interno.
     */
    private syncDetailsWithOpen;
    /**
     * Método chamado quando o elemento <details> é aberto ou fechado.
     * Atualiza o estado interno do componente e emite eventos apropriados.
     * @param event O evento de toggle do elemento <details>.
     */
    private handleCollapse;
    /**
     * Método público para abrir.
     * Este método pode ser chamado externamente para abrir o componente.
     */
    openCollapse(): Promise<void>;
    /**
     * Método público para fechar.
     * Este método pode ser chamado externamente para fechar o componente.
     */
    closeCollapse(): Promise<void>;
    /**
     * Renderiza o ícone de acordo com o estado do collapse.
     * Se o collapse estiver aberto, renderiza o ícone para ocultar.
     * Caso contrário, renderiza o ícone para mostrar.
     * @returns JSX do ícone
     */
    private renderIcon;
    /**
     * Renderiza o componente.
     * O componente é renderizado como um elemento <details> com um <summary> que contém o acionador.
     * @returns JSX do componente.
     */
    render(): any;
}