import { EventEmitter } from '../../stencil-public-runtime'; import { Breakpoint } from '../../utils/breakpoint-observer'; import { CssClassMap } from '../../utils/interfaces'; /** * Nomes das áreas do cabeçalho. */ declare const HeaderSlotNames: { readonly LOGO: "logo"; readonly SIGNATURE: "signature"; readonly LINKS: "links"; readonly FUNCTIONS: "functions"; readonly SEARCH_ICON: "search-icon"; readonly SEARCH: "search"; readonly ACCESS: "access"; readonly MENU_TRIGGER: "menu-trigger"; readonly CAPTION: "caption"; readonly SUBCAPTION: "subcaption"; }; /** * Tipo que representa os nomes das áreas do cabeçalho. */ type HeaderSlotName = (typeof HeaderSlotNames)[keyof typeof HeaderSlotNames]; /** * Tipo que representa as configurações de uma área do cabeçalho. */ type HeaderAreaConfig = { cssClassMap: CssClassMap; breakpoints: { loose: Breakpoint[]; compact: Breakpoint[]; }; hasContent: boolean; isVisible: boolean; isActive?: boolean; event?: { click?: (event: MouseEvent) => void; focus?: (event: FocusEvent) => void; }; }; /** * Tipo que representa as áreas do cabeçalho. */ type HeaderArea = { [K in HeaderSlotName]: HeaderAreaConfig; }; /** * Tipo que representa as densidades do cabeçalho. */ type HeaderDensity = 'small' | 'medium' | 'large'; /** * ## 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/header?tab=designer). * * @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. */ export declare class Header { /** * Referência ao elemento host do componente. * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente. */ el: HTMLBrHeaderElement; /** * Texto exibido como título do cabeçalho. */ readonly caption: string; /** * URL associada ao título do cabeçalho. */ readonly captionUrl: string; /** * Identificador único do cabeçalho; gerado automaticamente quando omitido. */ readonly customId: string; /** * Densidade do cabeçalho: controla espaçamento e proporções. */ readonly density: HeaderDensity; /** * Ativa o modo compacto do cabeçalho. */ isCompact: boolean; /** * Fixa o cabeçalho no topo durante a rolagem. */ readonly isSticky: boolean; /** * Texto da assinatura exibida ao lado da logo. */ readonly signature: string; /** * Define qual lista encolhe primeiro quando o espaço é limitado. */ readonly shrinkFirst: 'links' | 'functions'; /** * Texto exibido como subtítulo do cabeçalho. */ readonly subcaption: string; /** * URL associada ao subtítulo do cabeçalho. */ readonly subcaptionUrl: string; /** * Representa as configurações da área do cabeçalho. */ headerArea: HeaderArea; /** * 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 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; }>; /** * Observa mudanças na propriedade isCompact. * @param newValue O novo valor de isCompact. */ watchIsCompact(newValue: boolean): void; /** * Observador de mudanças de breakpoint. */ private breakpointObserver; /** * Indica o breakpoint atual. */ private currentBreakpoint; /** * Armazena a posição de scroll do elemento pai. */ private parentScrollTop; /** * Timeout para o evento de redimensionamento. */ private resizeTimeout; /** * 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; /** * Listener para o evento 'resize' da janela. * Dispara o evento de redimensionamento do cabeçalho após um breve atraso de 100ms */ private handleListResize; /** * Ciclo de vida do componente. * Executado quando o componente é conectado ao DOM. */ connectedCallback(): void; /** * Ciclo de vida do componente. * Executado uma vez após o componente ser totalmente carregado ao DOM. */ componentDidLoad(): void; /** * Ciclo de vida do componente. * Executado quando o componente é desconectado do DOM. */ disconnectedCallback(): void; /** * 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; /** * Manipula as mudanças de breakpoint. * @param breakpoint O breakpoint ativo. */ private handleBreakpointChange; /** * Manipula o evento de scroll no elemento pai. */ private handleParentScroll; /** * Manipula o clique no botão de fechar busca. */ private handleSearchCloseClick; /** * 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; /** * Monitora as mudanças de conteúdo dos slots. */ private monitorSlotContent; /** * Configura o observador de mudanças de breakpoint. */ private setBreakpointObserver; /** * Configura o evento de scroll no elemento pai. */ private setScrollOnParent; /** * Atualiza o estado da área do cabeçalho com base no conteúdo dos slots. */ private syncHeaderAreaStates; /** * Remove scroll event listener from parent element. */ private unsetScrollOnParent; /** * 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; } export {};