import { type EventEmitter } from '../../stencil-public-runtime';
import type { BrNavigateDetail, BrNavigationMode } from '../global.types';
import type { HeaderArea, HeaderCompactChangeDetail, HeaderDensity, HeaderLayoutWidth, HeaderShrinkFirst } from './header.types';
/**
* O `br-header` é o cabeçalho da página: logotipo, nome do sistema, links, atalhos, busca, acesso e botão do menu.
*
* ### Como montar
*
* Cada área tem um slot:
*
* | Área | Slot | Componente sugerido |
* | --- | --- | --- |
* | Logotipo | `logo` | `br-header-logo` |
* | Nome e subtítulo | — | props `caption` e `subcaption` |
* | Links | `links` | `br-header-list` com `br-header-link` |
* | Atalhos (contraste, ajuda…) | `functions` | `br-header-list` com `br-header-function` |
* | Busca | `search` e `search-icon` | `br-input` e um `br-button` com ícone |
* | Entrar | `access` | `br-sign-in` |
* | Menu | `menu-trigger` | `br-button` que abre o `br-menu` |
*
* ```html
*
*
*
*
* Serviços
*
*
*
*
*
*
*
*
* ```
*
* Use `sticky` para manter o cabeçalho visível ao rolar a página e `compact` para a versão reduzida. Em telas menores, a busca fica escondida até o clique no botão do slot `search-icon`.
*
* Consulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/header?tab=designer).
*
* @category Estrutura, Navegação, Identidade
* @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-icon - Botão que mostra o campo de busca em telas menores e no modo compacto.
* @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).
*
* Valores inválidos usam `medium`.
*/
density: HeaderDensity;
/**
* Ativa o modo compacto do cabeçalho.
* @deprecated Use `compact`.
*/
isCompact: boolean;
/** Estado compacto. Quando informado, tem precedência sobre `isCompact`. */
compact?: boolean;
/**
* Fixa o cabeçalho no topo durante a rolagem.
* Quando `compact` ou `is-compact` é definido explicitamente, o modo visual
* permanece fixo durante a rolagem. Sem essa configuração, o header sticky
* alterna automaticamente entre os modos compacto e expandido.
* @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;
private get effectiveShrinkFirst();
private get effectiveNavigationMode();
private get effectiveLayoutWidth();
private get effectiveCompact();
private getOwnedHeaderChildren;
private dispatchHeaderEvent;
private get hasBrandContent();
/**
* 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 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 handleHeaderListFocused;
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?;
/** Última largura do host vista pelo `ResizeObserver`. */
private observedHostWidth?;
private readonly headerResizeBatcher;
private emitHeaderWidthChange;
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;
}