import { EventEmitter } from '../../stencil-public-runtime'; /** * ## 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/modal?tab=designer). * * @slot header - Cabeçalho do modal. Se não for usado, o `title-text` será exibido. * @slot default - Corpo do modal. * @slot footer - Rodapé do modal. * @slot close-button - Botão de fechar customizado. Se não for usado, o botão padrão será exibido. * */ export declare class Modal { /** Referência ao elemento host do componente. */ el: HTMLBrModalElement; elementInternals: ElementInternals; /** * Identificador único. * Caso não seja fornecido, um ID gerado automaticamente será usado. */ readonly customId: string; /** O texto do título a ser exibido no cabeçalho do modal. Usado quando o slot `header` não é fornecido. */ readonly titleText: string; /** Controla a visibilidade do modal. */ show: boolean; /** * Define o comportamento de fechamento do modal. * * - `true`: O modal fecha automaticamente ao clicar no botão fechar. * - `false`: O modal emite `brModalBeforeClose` mas não fecha, permitindo a implementação de lógica customizada (validação, confirmação, etc.) antes do fechamento. O desenvolvedor deve * controlar manualmente o fechamento. */ autoClose: boolean; /** * Seletor CSS do elemento que deve receber foco quando o modal é aberto (ex: `"#meu-elemento"`). */ readonly initialFocusSelector: string; /** * Define o tamanho (largura) do modal. */ readonly size: 'xsmall' | 'small' | 'medium' | 'large' | 'auto'; /** * Se `true`, habilita a rolagem interna do conteúdo do modal. */ readonly scrollable = false; /** * Define o alinhamento do conteúdo do rodapé (slot="footer"). */ readonly alignFooter: 'start' | 'end' | 'center'; private isOpeningParentScrim; private triggerElement; private pendingFocus; private static readonly FOCUSABLE_SELECTORS; /** * Evento emitido quando o modal é aberto (quando `show` muda de `false` para `true`). */ brModalOpen: EventEmitter; /** * Evento emitido após o modal ser fechado (quando `show` muda de `true` para `false`). */ brModalClose: EventEmitter; /** * Evento emitido antes do fechamento do modal (quando o botão X é clicado). * Se autoClose está desativado, o desenvolvedor deve fechar manualmente o modal após este evento. * Se autoClose está ativado, o modal fecha automaticamente após este evento. */ brModalBeforeClose: EventEmitter; /** * Evento emitido após o modal estar completamente aberto e com o foco estabilizado * dentro dele. Complementa `brModalOpen` (que dispara imediatamente ao abrir): * use `brModalOpened` quando precisar interagir com o modal já pronto. */ brModalOpened: EventEmitter; handleShowChange(newValue: boolean, oldValue: boolean): void; componentWillLoad(): void; componentDidLoad(): void; disconnectedCallback(): void; componentDidRender(): void; /** * GERENCIAMENTO DE FOCO * * Métodos responsáveis por mover o foco para dentro do modal, estabilizar o * foco em elementos iniciais e localizar elementos nativos focáveis dentro * de web components que utilizam Shadow DOM. */ private moveFocusIntoModal; /** * Encontra recursivamente o primeiro elemento nativo focusável dentro de um elemento, * perfurando shadow roots aninhados em qualquer profundidade (ex: br-select → br-input → ). * * @returns O elemento nativo encontrado, ou null se nenhum for encontrado. */ private findDeepNativeFocusable; /** * Aguarda o elemento aparecer no DOM e estar pronto para receber foco. * Tenta por até 10 vezes com intervalos de 50ms (500ms total). */ private waitForElement; /** * TECLADO * * Manipuladores e utilitários relacionados à interação por teclado, * incluindo tratamento de `Escape` para fechar o modal e navegação por * `Tab`/`Shift+Tab` para manter o foco preso (focus trap) dentro do modal. */ private handleKeyDown; /** * Implementa o focus trap circular dentro da modal. * Quando Tab é pressionado no último elemento focalizável, o foco vai para o primeiro. * Quando Shift+Tab é pressionado no primeiro, o foco vai para o último. * * Usa `composedPath()[0]` para obter o elemento real com foco, pois web components * com shadow DOM retornam o host via `document.activeElement`, não o elemento nativo interno. * * Usa `findDeepNativeFocusable` no wrap porque `host.focus()` é no-op em web components * sem `delegatesFocus` — focar o elemento nativo mais profundo garante que o wrap aconteça. */ private handleTabNavigation; /** * Verifica se `target` é igual a `container` ou está dentro dele, * perfurando shadow roots na subida (getRootNode().host). */ private isOrInsideElement; /** * Coleta todos os elementos focalizáveis dentro da modal, * perfurando o shadow DOM: inclui elementos do shadow root (ex: botão fechar) * e dos slots (conteúdo fornecido pelo usuário nos slots header, default, footer e close-button). */ private getFocusableElements; /** * INTEGRAÇÃO COM BR-SCRIM * * Métodos para integrar o comportamento do modal com um `br-scrim` pai, * incluindo abertura/fechamento sincronizados e listeners para eventos do * scrim. */ private closeParentScrim; /** * Adiciona listeners para eventos do parent scrim */ private listenToParentScrimEvents; /** * Remove listeners de eventos do parent scrim */ private removeParentScrimEventListeners; /** * Handler para evento brScrimOpen do parent scrim * Quando scrim abre programaticamente, a modal deve abrir também */ private handleParentScrimOpen; /** * Handler para evento brScrimClose do parent scrim * Se autoClose=true, fecha a modal junto com o scrim * Se autoClose=false, não faz nada (modal permanece aberta) */ private handleParentScrimClose; private openParentScrim; /** * UTILITÁRIOS * * Getters e helpers utilitários usados internamente pelo componente, * como geração de IDs e mapeamento de classes CSS. */ private get titleId(); private get contentId(); private getCssClassMap; private handleClose; /** * MÉTODOS PÚBLICOS (API) * * Métodos públicos expostos pela API do componente (`open`, `close`, etc.). */ /** * Método público para abrir o modal */ open(): Promise; /** * Método público para fechar o modal */ close(): Promise; render(): any; }