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/scrim?tab=designer). * * @slot default - Slot para o conteúdo principal a ser exibido sobre o fundo escurecido do scrim. * @slot activator - Slot para o elemento ativador do scrim, com prioridade sobre a propriedade activator. */ export declare class Scrim { /** * Referência ao elemento host do componente. */ el: HTMLBrScrimElement; elementInternals: ElementInternals; /** * Identificador único. * Caso não seja fornecido, um ID gerado automaticamente será usado. */ readonly customId: string; /** * Ativa/desativa o scrim */ isOpen: boolean; /** * Posiciona o conteúdo no topo, centro, direita, esquerda, abaixo dentro do scrim */ positionContent: 'top' | 'center' | 'right' | 'left' | 'bottom'; /** * Desativa o fechamento do scrim ao ser clicado */ disableCloseOnClick: boolean; /** * Define o valor de z-index do scrim */ zIndex: number | null; /** * Cor de fundo personalizada para o scrim. * Aceita os seguintes formatos de cor: * - Cores nomeadas do CSS: 'red', 'blue', 'green', 'yellow', etc. * - Códigos hexadecimais: '#ff0000', '#00ff00', '#0000ff', etc. * - Valores RGB: 'rgb(255, 0, 0)', 'rgb(0, 255, 0)', etc. * - Valores RGBA: 'rgba(255, 0, 0, 0.5)', 'rgba(0, 255, 0, 0.8)', etc. * - Valores HSL: 'hsl(0, 100%, 50%)', 'hsl(120, 100%, 50%)', etc. * - Valores HSLA: 'hsla(0, 100%, 50%, 0.5)', 'hsla(240, 100%, 50%, 0.7)', etc. * Se não especificada, usa a cor padrão do tema. */ bgColor: string | null; /** * Define a opacidade personalizada do scrim */ customOpacity: number | null; /** * Define o modo de exibição do scrim: * - `'fullscreen'`: Ocupa toda a tela (`position: fixed`). (_padrão_) * - `'parent'`: Ocupa apenas o elemento pai (`position: absolute`). * O elemento pai deve ter `position: relative` ou outro valor diferente de `static`. * * Para a variante `'legibility'`, este atributo é ignorado: o posicionamento é sempre * calculado automaticamente a partir das coordenadas do elemento pai. */ displayMode: 'fullscreen' | 'parent'; /** * Define a estratégia de manipulação de rolagem quando scrim está aberto * - 'block': Impede a rolagem completamente * - 'close': Fecha o scrim quando ocorre rolagem */ scrollStrategy: 'block' | 'close'; /** * Determina quanto de rolagem (em pixels) é necessário para acionar a ação de fechamento automático do scrim. */ scrollThreshold: number; /** * Define o seletor para o elemento activator. * Nota: O slot 'activator' tem prioridade sobre esta propriedade. */ activator: string | null; /** * Define um rótulo acessível personalizado para o diálogo. * Se não fornecido, será usado "Conteúdo do diálogo" como padrão. */ ariaLabel: string | null; /** * Define a variante semântica do scrim * - `'focus'`: Redireciona o foco hierárquico do usuário. Cor #000000 com opacidade 40%. (_padrão_) * - `'spotlight'`: Scrim vazado — destaca um elemento específico criando uma fresta no overlay. * Aplica as mesmas cores da variante `'focus'`. Use `spotlightTargetId` para indicar o elemento a ser destacado. * - `'legibility'`: Melhora o contraste e leitura de texto sobre superfícies. Cor #000000 com opacidade 64%. * Para cobertura parcial, use `legibilityAnchor` + `legibilitySize`. * Para gradiente suave, use `bgColor` com um valor de gradiente CSS e `customOpacity="1"`, * ex.: `bg-color="linear-gradient(to top, rgba(0,0,0,0.64), transparent)"`.. * * Quando definida, aplica automaticamente as especificações de cor e opacidade do Design System. * As propriedades `bgColor` e `customOpacity` têm prioridade e sobrepõem os valores da variante. */ variant: 'focus' | 'spotlight' | 'legibility'; /** * Define a borda de ancoragem da faixa de cobertura da variante `legibility`. * * Controla de qual borda (ou centro) do elemento a máscara de overlay cresce, * tendo seu tamanho determinado por `legibilitySize`. * * - `'top'`: faixa ancorada na borda superior, cresce para baixo. * - `'bottom'`: faixa ancorada na borda inferior, cresce para cima. * - `'left'`: faixa ancorada na borda esquerda, cresce para a direita. * - `'right'`: faixa ancorada na borda direita, cresce para a esquerda. * - `'center'`: faixa centralizada verticalmente no elemento. * * Quando `legibilitySize` é `null`, a máscara ocupa 100% independentemente * da âncora definida, equivalendo a uma cobertura total. * * Só tem efeito quando `variant="legibility"`. */ legibilityAnchor: 'top' | 'bottom' | 'left' | 'right' | 'center'; /** * Define o tamanho da faixa de cobertura da variante `legibility`, usado em * conjunto com `legibilityAnchor`. * * Aceita qualquer valor CSS de comprimento válido: * - Percentual relativo ao elemento pai: `'40%'`, `'75%'` * - Comprimento absoluto: `'120px'`, `'8rem'`, `'6em'` * - Função CSS: `'calc(100% - 2rem)'` * * Quando `null` (padrão), a máscara ocupa **100%** da dimensão relevante: * - **altura** para âncoras `top`, `bottom` e `center` * - **largura** para âncoras `left` e `right` * * Só tem efeito quando `variant="legibility"` está definido. */ legibilitySize: string | null; /** * Ativa o modo de scrim vazado (variante 'spotlight'), criando uma área de fresta no overlay * que destaca o elemento referenciado pelo seletor CSS fornecido. */ spotlightTargetId: string | null; /** * Espaçamento interno (em pixels) ao redor da área de fresta no scrim vazado. */ spotlightPadding: number; /** * Define a forma da área de fresta no scrim vazado. * - 'rect': Retangular com bordas retas. * - 'rounded': Retangular com bordas arredondadas (border-radius de 8px). * - 'circle': Elipse inscrita na área do elemento alvo. */ spotlightShape: 'rect' | 'rounded' | 'circle'; /** Indica que o scrim foi aberto. */ brScrimOpen: EventEmitter; /** Indica que o scrim foi fechado */ brScrimClose: EventEmitter; isActive: boolean; hasActivatorSlot: boolean; /** Rect do elemento alvo do scrim vazado. */ spotlightRect: DOMRect | null; /** Indica se o atributo `display-mode` foi explicitamente informado pelo usuário */ private displayModeExplicit; private contentRef; private activatorElement; private scrollOffset; private lastScrollTop; private scrollOrigin; private previouslyFocusedElement; private focusTimeoutId; private restoreFocusTimeoutId; /** ResizeObserver que monitora o elemento alvo do spotlight para recalcular a posição. */ private spotlightResizeObserver; /** Elemento atualmente sendo destacado pelo scrim vazado. */ private spotlightTargetElement; /** Referência ao div interno do scrim para aplicação de estilos de posicionamento da variante legibility. */ private scrimDivRef; /** ResizeObserver que monitora o elemento pai para recalcular a posição da variante legibility. */ private legibilityResizeObserver; /** * Flag que suprime handleGlobalFocus enquanto a modal filha está * gerenciando ativamente sua própria sequência de foco (moveFocusIntoModal). */ private isModalFocusing; private modalFocusSuppressId; private static readonly FOCUSABLE_SELECTORS; handleOpenChange(newValue: boolean): void; updateStyles(): void; handleVariantChange(): void; handleSpotlightChange(): void; handleActivatorChange(): void; componentWillLoad(): void; componentDidLoad(): void; /** * Adiciona event listener ao contentRef para capturar eventos de teclado * e gerenciar a navegação por teclado dentro do scrim. */ private addContentEventListener; connectedCallback(): void; disconnectedCallback(): void; /** * Ativa o guard que suprime `handleGlobalFocus` enquanto a modal filha executa * sua sequência assíncrona de foco (`moveFocusIntoModal`). * * O guard é desativado assim que o evento `brModalFocusReady` chega (via * `handleModalFocusReady`). O timeout é apenas um safety net para o caso de * o evento nunca chegar (ex: erro interno na modal). */ private suppressFocusGuard; /** * Handler para o evento `brModalFocusReady` emitido pela modal filha. * Desativa o guard imediatamente assim que o foco está estabilizado, * cancelando o timeout de segurança do `suppressFocusGuard`. */ private handleModalFocusReady; /** * Handler para evento brModalOpen emitido por modal filha */ private handleModalOpen; /** * Handler para evento brModalClose emitido por modal filha */ private handleModalClose; /** * Verifica se um elemento é filho direto deste scrim (não nested) */ private isDirectChild; /** * Adiciona listeners para eventos brModalOpen, brModalClose e brModalFocusReady das modais filhas */ private listenToModalEvents; /** * Remove listeners dos eventos da modal */ private removeModalEventListener; /** * Retorna os elementos filhos diretos do scrim via slot padrão */ private getDirectChildren; /** * Busca uma modal filha direta do scrim */ private findModalChild; /** * Verifica se há uma modal filha com autoClose=false (padrão ou explícito) * Retorna true se: * - Existe modal filha E autoClose não é explicitamente true */ private hasModalWithAutoClose; /** * Fecha a modal filha direta, se existir e estiver aberta. * Chamado quando o scrim é fechado (ex: via ESC) para garantir sincronização de estado. */ private closeModalChild; private checkActivatorSlot; private setupActivatorSlotClick; private setupActivator; private handleActivatorClick; private addActivatorClickListener; private removeActivatorClickListener; private cleanupActivatorSlotClick; private applyScrollStrategy; private getScrollPosition; private enableScrollBlock; private enableScrollWatcher; private handleBlockScroll; private resetScrolling; private handleScrollClose; private focusFirstElement; private restoreFocus; private getFocusableElements; private filterVisibleElements; private handleKeyDown; /** * Intercepta todos os eventos de teclado globalmente quando o scrim está ativo. * * Usa `composedPath()[0]` para obter o elemento real com foco, mesmo dentro de shadow roots. * `event.target` é retargetado ao cruzar shadow boundaries e não reflete o elemento concreto * quando o foco está dentro do shadow DOM de componentes filhos como `br-modal`. */ private handleGlobalKeyDown; private handleGlobalClick; /** * Intercepta eventos de foco globalmente */ private handleGlobalFocus; private shouldHandleEscape; private handleTabNavigation; private shouldTrapFocus; private wrapFocus; /** * Verifica se um elemento está dentro do scrim. * Funciona com shadow DOM: aceita tanto o host (br-modal) quanto elementos * dentro de shadow roots filhos — verifica o host mais próximo via getRootNode. */ private isElementInsideScrim; /** * Adiciona interceptação global de eventos */ private addGlobalEventInterception; /** * Remove interceptação global de eventos */ private removeGlobalEventInterception; /** * Handler para clique na máscara do scrim. * Fecha o scrim se disableCloseOnClick for false e não houver modal filha com autoClose=false. * Não afeta o comportamento de ESC, que sempre fecha (W3C Dialog Pattern). */ private handleMaskClick; /** * Retorna true quando a variante é 'legibility'. * Nesse modo o scrim é puramente decorativo: nunca fecha, nunca intercepta * eventos de teclado/foco/clique e nunca bloqueia rolagem. */ private get isLegibilityVariant(); /** * Resolve o display-mode efetivo. * Para a variante 'legibility', usa 'parent' por padrão — a menos que o * atributo `display-mode` tenha sido explicitamente definido pelo usuário. */ private get effectiveDisplayMode(); /** * Aplica as especificações de cor e opacidade conforme a variante selecionada. */ private applyVariantDefaults; /** * Inicializa o modo de scrim vazado: resolve o elemento alvo, calcula o rect * inicial e instala um ResizeObserver para atualizar automaticamente. * Só opera quando `variant === 'spotlight'`. */ private setupSpotlight; /** * Desmonta o modo de scrim vazado, removendo observers e limpando o estado. */ private cleanupSpotlight; /** * Resolve o elemento alvo do spotlight via prop `spotlightTargetId` (seletor CSS). */ private resolveSpotlightTarget; /** * Recalcula as coordenadas da fresta com base no bounding rect do elemento alvo. * Coordenadas são relativas ao viewport (mode-fullscreen) ou ao elemento pai (mode-parent). */ private computeSpotlightRect; /** * Inicializa o posicionamento da variante legibility. * * Aplica `position: fixed` com as coordenadas exatas do elemento pai via * `getBoundingClientRect`, sem exigir nenhum CSS adicional no pai. * * Com `ResizeObserver`, observa o pai **e todos os seus ancestrais**: quando um * elemento irmão muda de tamanho (ex: menu abrindo), o ancestral comum redimensiona * e o callback reposiciona o scrim automaticamente. */ private setupLegibility; /** * Desmonta o posicionamento da variante legibility, removendo observers e listeners * e limpando os estilos inline aplicados ao div interno do scrim. */ private cleanupLegibility; /** * Recalcula as coordenadas do elemento pai via getBoundingClientRect e aplica * como estilos inline no div interno, sobrepondo o `inset: 0` do mode-fullscreen. */ private computeLegibilityRect; /** * Remove os estilos inline de posicionamento aplicados pelo computeLegibilityRect. */ private resetLegibilityStyles; /** * Renderiza o SVG de overlay do scrim vazado (spotlight). * Retorna null quando não há elemento alvo resolvido. */ private renderSpotlightOverlay; private getCssClassMap; /** * Define o limite de rolagem para o fechamento automático do scrim. */ setScrollThreshold(threshold: number): Promise; /** * Método público para exibir o scrim */ open(): Promise; /** * Método público para esconder o scrim */ close(): Promise; /** * Método público para alternar o estado de exibição do scrim */ toggle(): Promise; /** * Recalcula manualmente a posição e dimensões da fresta do scrim vazado. * Útil quando o elemento alvo muda de posição sem disparar resize ou scroll. */ updateSpotlight(): Promise; render(): any; }