import { type EventEmitter } from '../../stencil-public-runtime'; import type { BrNavigateDetail, BrNavigationMode } from '../global.types'; import type { HeaderArea, HeaderCompactChangeDetail, HeaderDensity, HeaderLayoutWidth, HeaderShrinkFirst } from './header.types'; /** * Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/header?tab=designer). * * ### Acionamento de Menu Associado * Para integrar o cabeçalho com um menu (`br-menu`), passe um botão no slot `menu-trigger` com os seguintes atributos: * - `data-toggle="menu"` * - `data-target="#id-do-menu"` (substitua pelo ID ou `customId` do seu `br-menu`) * * O componente `br-menu` escuta a esses atributos no escopo do documento e controlará automaticamente sua visibilidade. * * @category Estrutura * @status stable * @slot logo - Slot para a logo do cabeçalho. * @slot signature - Slot para a assinatura visual da organização. * @slot links - Slot para links de navegação principais. * @slot functions - Slot para botões de ação no cabeçalho. * @slot search - Slot para o campo de busca. * @slot access - Slot para o botão de acesso ou autenticação. * @slot menu-trigger - Slot para o botão que abre o menu. * @slot caption - Slot para o título do cabeçalho. * @slot subcaption - Slot para o subtítulo do cabeçalho. * * @part header - Elemento header principal. * @part top - Área superior do header. * @part top-left - Área superior esquerda (logo + assinatura). * @part top-right - Área superior direita (links + funções + busca + acesso). * @part bottom - Área inferior do header. * @part bottom-left - Área inferior esquerda (menu + título). * @part bottom-right - Área inferior direita (busca expandida). */ export declare class Header { private hasLoaded; private slotContentObserver; private headerSyncFrame; private monitoredSlots; /** * Referência ao elemento host do componente. * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente. */ el: HTMLBrHeaderElement; /** * Representa as configurações da área do cabeçalho. */ headerArea: HeaderArea; /** * Texto exibido como título do cabeçalho. */ caption: string; /** * URL associada ao título do cabeçalho. */ captionUrl: string; /** * Identificador único do componente. * Quando omitido, um valor é gerado automaticamente. * * > **Padrão:** valor único gerado por generateUniqueId(). * */ customId: string; /** * Define a densidade visual do componente. * * - `small`: Alta densidade (componente menor, mais compacto e com menos espaçamento). * - `medium`: Densidade intermediária, padrão recomendado para a maioria dos casos. * - `large`: Baixa densidade (componente maior, mais espaçamento e altura). * */ density: HeaderDensity; /** * Ativa o modo compacto do cabeçalho. * @deprecated Use `compact`. */ isCompact: boolean; /** Estado compacto canônico. Quando informado, tem precedência sobre `isCompact`. */ compact?: boolean; /** * Fixa o cabeçalho no topo durante a rolagem. * @deprecated Use `sticky`. */ isSticky: boolean; /** Fixa o cabeçalho no topo. Quando informado, tem precedência sobre `isSticky`. */ sticky?: boolean; /** * Texto da assinatura exibida ao lado da logo. */ signature: string; /** * Define qual lista encolhe primeiro quando o espaço é limitado. */ shrinkFirst: HeaderShrinkFirst; /** * Texto exibido como subtítulo do cabeçalho. */ subcaption: string; /** * URL associada ao subtítulo do cabeçalho. */ subcaptionUrl: string; /** * Controla como os links internos do cabeçalho integram a navegação mantendo `href` real. * - `native` (padrão): preserva o comportamento do navegador, conforme HTML/W3C. * - `event`: emite `brNavigate`; se o evento for cancelado, bloqueia a navegação nativa para a SPA assumir. */ navigationMode: BrNavigationMode; /** * Define a largura do container interno do cabeçalho. * - `contained`: largura máxima limitada pela grade no breakpoint desktop (`container-lg`). * - `full`: sempre ocupa 100% da largura disponível (`container-fluid`). */ layoutWidth: HeaderLayoutWidth; /** * Observa mudanças na propriedade isCompact. * @param newValue O novo valor de isCompact. */ watchIsCompact(newValue: boolean): void; watchCompact(newValue?: boolean): void; watchIsSticky(): void; watchSticky(): void; /** * Evento disparado quando o cabeçalho entra ou sai do modo compacto. * O evento contém os detalhes do estado compacto e o ID do componente pai. * @event headerCompactChange */ headerCompactChange: EventEmitter<{ parentId: string; isCompact: boolean; }>; /** Evento canônico emitido quando o modo compacto muda. */ brHeaderCompactChange: EventEmitter; /** * Evento disparado para indicar qual lista deve encolher primeiro. * O evento contém os detalhes do ID do componente pai e o nome da lista. * @event headerWidthChange */ headerWidthChange: EventEmitter<{ id: string; listNames: ('links' | 'functions')[]; shrink: boolean; }>; /** * Evento disparado para alternar o estado de um menu associado. * @event brMenuToggle */ brMenuToggle: EventEmitter<{ target?: string; }>; /** * Evento cancelável emitido em `navigation-mode="event"` para cliques primários sem modificadores em links `_self`. * Chame `event.preventDefault()` no listener para impedir a navegação nativa e entregar `event.detail.href` ao roteador da SPA. */ brNavigate: EventEmitter; /** * Ciclo de vida do componente. * Executado quando o componente é conectado ao DOM. */ connectedCallback(): void; /** * Ciclo de vida do componente. * Executado quando o componente é desconectado do DOM. */ disconnectedCallback(): void; /** * Ciclo de vida do componente. * Executado uma vez após o componente ser totalmente carregado ao DOM. */ componentDidLoad(): void; onMenuStateChange(ev: CustomEvent<{ open: boolean; sourceId: string; }>): void; /** * Listener para o evento 'headerListUpdate', disparado pelos componentes filhos 'br-header-list'. * O evento contém o ID do componente pai e o nome da lista. */ private handleHeaderListUpdate; private handleListResize; /** * Reinicializa o estado das listas do cabeçalho, disparando o evento de redimensionamento. * Pode ser chamado externamente para forçar a atualização das listas. */ resetHeaderList(): Promise; /** * Observador de mudanças de breakpoint. */ private breakpointObserver; /** * Indica o breakpoint atual. */ private currentBreakpoint; /** * Elemento responsável pela rolagem do cabeçalho. */ private scrollTarget; /** Indica que o estado compacto atual foi derivado da rolagem. */ private compactFromScroll; private headerResizeObserver?; private readonly headerResizeBatcher; private handleNavigation; /** * Manipula as mudanças de breakpoint. * @param breakpoint O breakpoint ativo. */ private handleBreakpointChange; /** * Manipula o evento de scroll da janela ou do ancestral rolável. */ private handleScroll; /** * Manipula o clique no botão de fechar busca. */ private handleSearchCloseClick; /** * Manipula o clique no botão de acionamento do menu. */ private handleMenuTriggerClick; /** * Manipula o clique no ícone de busca. */ private handleSearchIconClick; /** * Manipula o foco no ícone de busca. */ private handleSearchIconFocus; /** * * Controla a atualização dos estados da área do cabeçalho. * @param name O nome da área do cabeçalho. */ private controlHeaderAreaUpdateStates; /** * Retorna um mapa de classes CSS para o componente. * @returns Um objeto contendo as classes CSS a serem aplicadas. */ private getCssClassMap; /** * Verifica se um valor é um nome de slot de cabeçalho válido. * @param value O valor a ser verificado. * @returns Um valor booleano indicando se o valor é um nome de slot de cabeçalho válido. */ private isHeaderSlotName; /** * Verifica se a área deve aparecer no breakpoint e no modo atuais. * @param name O nome da área do cabeçalho. * @returns Verdadeiro quando a área deve estar visível. */ private isAreaVisibleAtCurrentBreakpoint; /** * Monitora as mudanças de conteúdo dos slots. */ private monitorSlotContent; private handleSlotChange; /** * Configura o observador de mudanças de breakpoint. */ private setBreakpointObserver; /** * Retorna a janela ou o ancestral que controla a rolagem do cabeçalho. */ private getScrollTarget; private getScrollTop; private setScrollTop; /** Sincroniza o listener com o estado sticky efetivo. */ private syncScrollListener; /** * Atualiza o estado da área do cabeçalho com base no conteúdo dos slots. */ private syncHeaderAreaStates; /** * Remove o listener do alvo de rolagem atual. */ private unsetScrollListener; /** * Atualiza a área do cabeçalho. * @param name O nome da área do cabeçalho. * @param updates As atualizações a serem aplicadas. */ private updateHeaderArea; /** * Verifica o espaço disponível para uma lista específica no cabeçalho. * @param listName O nome da lista a ser verificada. */ private verifyListSpace; /** * Renderiza o conteúdo padrão do título. * @returns Um elemento JSX representando o conteúdo padrão do título. */ private renderDefaultCaptionContent; /** * Renderiza o conteúdo padrão da assinatura. * @returns Um elemento JSX representando o conteúdo padrão da assinatura. */ private renderDefaultSignatureContent; /** * Renderiza o conteúdo padrão do subtítulo. * @returns Um elemento JSX representando o conteúdo padrão do subtítulo. */ private renderDefaultSubcaptionContent; /** * Renderiza o divisor entre as áreas do cabeçalho. * @param mainArea A área principal do cabeçalho. * @param secondaryAreas As áreas secundárias do cabeçalho. * @returns Um elemento JSX representando o divisor entre as áreas do cabeçalho. */ private renderDivider; /** * Renderiza a área do cabeçalho. * @param name O nome da área do cabeçalho. * @returns Um elemento JSX representando a área do cabeçalho. */ private renderHeaderArea; /** * Renderiza o botão de fechar busca. * @returns Um elemento JSX representando o botão de fechar busca. */ private renderSearchCloseButton; /** * Renderiza o conteúdo padrão do slot. * @param name O nome do slot. * @returns Um elemento JSX representando o conteúdo padrão do slot. */ private renderSlotDefaultContent; /** * Renderiza o componente. * @returns JSX.Element */ render(): any; }