import { type EventEmitter } from '../../stencil-public-runtime';
import type { MenuDensity, MenuOpenChangeDetail } from './menu.types';
/**
* O `br-menu` organiza a navegação lateral da aplicação em gaveta retrátil ou barra fixa.
*
* Use `is-open` para controlar a visibilidade, ou chame os métodos `open()`, `close()` e `toggle()`. Estruture a navegação com os subcomponentes `br-menu-header`, `br-menu-group`, `br-menu-list` e `br-menu-item`.
*
* ```html
*
* ```
*
* ### Quando usar
*
* - Menus com hierarquia de seções, grupos ou múltiplos níveis de páginas.
* - Navegação lateral que precisa ser recolhida em telas móveis com fechamento por máscara (`br-scrim`).
*
* ### Quando evitar
*
* - Poucos itens que cabem diretamente no cabeçalho: use `br-header`.
* - Alternar visões na mesma página: use `br-tab`.
*
* Consulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/menu?tab=designer).
*
* @category Navegação, Estrutura
* @status stable
* @slot default - Slot para o conteúdo principal do menu (menu-list, menu-group e menu-item).
* @slot header - Slot para o cabeçalho do menu, exibido apenas em modo não contextual e não push.
* @slot logo - Slot para logotipos de parceiros no rodapé.
* @slot link - Slot para links externos no rodapé (use br-menu-link).
* @slot social - Slot para ícones de redes sociais no rodapé.
* @slot info - Slot para informações adicionais no rodapé.
*
* @part footer - Parte para o contêiner principal do rodapé do menu, agrupando logos, links, redes sociais e informações.
* @part logo - Parte para a área de logotipos de parceiros no rodapé.
* @part link - Parte para links úteis ou navegação secundária no rodapé.
* @part social - Parte para ícones de redes sociais no rodapé.
* @part info - Parte para informações adicionais, como licença ou direitos autorais.
* @part container - Parte para o container externo que envolve o menu inteiro.
* @part panel - Parte para o painel de navegação do menu (o menu propriamente dito).
* @part body - Parte principal onde ficam os links e grupos de navegação.
* @part trigger - Botão de acionamento do menu (hambúrguer ou contextual).
* @part back-btn - Botão de voltar do menu de navegação drill-down.
*/
export declare class Menu {
currentLevel: number;
expandedDropMenus: {
[key: string]: boolean;
};
isInSubmenu: boolean;
navigationStack: Array<{
element: HTMLElement;
label: string;
id: string;
}>;
/**
* Identificador único do componente.
* Quando omitido, um valor é gerado automaticamente.
*
* > **Padrão:** valor único gerado por generateUniqueId().
*/
customId: string;
/**
* Classes de coluna do grid GovBR para definir a largura responsiva do painel sobreposto.
* Exemplo: `col-sm-4 col-lg-3`. Os modos `push`, `fixed` e `contextual` não usam esta propriedade.
* Quando vazia, o painel ocupa a largura disponível.
*/
breakpoints: string;
/**
* Define se o menu deve usar comportamento push.
* Quando ativado, o menu permanece fixo na lateral e empurra o conteúdo principal.
*/
push: boolean;
/**
* Mantém o menu como uma barra lateral fixa quando estiver aberto.
* O menu continua podendo ser ocultado alterando `isOpen` ou chamando `close()`.
* A largura padrão é `20rem`, limitada à viewport, e pode ser sobrescrita
* pela variável CSS `--menu-fixed-width`.
*/
fixed: boolean;
/**
* Define se o painel do menu está aberto/visível.
* Em modo push, esta propriedade permite controle externo da visibilidade.
* O nome permanece porque o método público `open()` já ocupa a propriedade `open` no host.
*/
isOpen: boolean;
/**
* Define se o menu deve usar comportamento contextual (aparece na parte inferior).
* Quando ativado, o menu é posicionado na parte inferior da tela em dispositivos móveis.
*/
contextual: boolean;
/**
* Define a densidade dos itens do menu, alterando o espaçamento interno.
* - `small` (densidade alta): itens mais compactos
* - `medium` (padrão): equilíbrio entre economia de espaço e separação
* - `large` (densidade baixa): maior espaçamento (recomendado em touch)
* Valores inválidos usam `medium`.
*/
density: MenuDensity;
/**
* Título da seção de redes sociais exibida no rodapé do menu.
* Utilize esta propriedade para personalizar o texto que aparece acima dos ícones sociais.
*/
socialTitle: string;
/**
* Rótulo do botão trigger do menu contextual.
* Exibido apenas em modo contextual e em telas menores (mobile).
*/
contextualLabel: string;
/**
* Evento emitido quando o menu abre ou fecha.
* @deprecated Use `brMenuOpenChange`.
*/
brMenuStateChange: EventEmitter<{
isOpen: boolean;
}>;
/**
* Evento emitido quando o menu abre ou fecha.
* `detail.open` contém o estado concluído e `detail.sourceId` identifica a instância pelo `id` ou `customId`.
*/
brMenuOpenChange: EventEmitter;
onOpenChange(isOpening: boolean): void;
/**
* Método do ciclo de vida do componente.
* Este método é chamado quando o componente é desconectado do DOM.
* Realiza limpeza de recursos para evitar vazamento de memória.
*/
disconnectedCallback(): void;
componentDidLoad(): void;
componentDidRender(): void;
onMenuItemClick(ev: Event): void;
onKeyDown(ev: KeyboardEvent): void;
/**
* Escuta cliques no documento para alternar o estado do menu automaticamente
* quando um elemento com o atributo `data-toggle="menu"` é clicado.
* Utiliza o caminho completo do evento (composedPath) para permitir o funcionamento
* correto quando o botão acionador está dentro de outros componentes com Shadow DOM (ex: br-header).
*/
onDocumentClick(ev: MouseEvent): void;
onNavigateToSubmenu(ev: CustomEvent<{
element: HTMLElement;
label: string;
}>): void;
onFolderToggled(ev: CustomEvent): void;
onMenuToggle(ev: CustomEvent<{
target?: string;
}>): void;
private isEventTargetInsideAnyMenu;
onScrimClose(ev: Event): void;
onMenuGoBack(): void;
/**
* Abre o painel do menu.
* Pode ser chamado externamente: `menuEl.open()`.
*/
open(): Promise;
/**
* Fecha o painel do menu.
* Pode ser chamado externamente: `menuEl.close()`.
*/
close(): Promise;
/**
* Alterna o estado do painel do menu (abre se fechado, fecha se aberto).
* Pode ser chamado externamente: `menuEl.toggle()`.
*/
toggle(): Promise;
/**
* Referência ao elemento host do componente.
* Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
*/
private el;
private previouslyFocusedElement;
private rafIds;
private scrimRef;
private nativeDialogRef;
private activeMenuItem;
private getOwnedMenuElements;
private get usesNativeDialog();
private syncNativeDialog;
private handleNativeCancel;
private ensureSingleActiveItem;
/**
* Alterna o estado expandido de um menu drop-down no modo acordeão.
*
* Este método recebe o identificador único (`itemId`) de um menu do tipo drop-down (nível 0)
* e inverte o seu estado de expansão dentro do objeto `expandedDropMenus`.
*
* Se o menu estiver atualmente expandido, ele será recolhido; se estiver recolhido, será expandido.
* O spread operator (`...this.expandedDropMenus`) garante que os estados dos outros menus sejam preservados.
*
* @param itemId - Identificador único do menu drop-down a ser alternado.
*/
private toggleDropMenu;
/**
* Recolhe todos os folders do nível 0, exceto o especificado.
* Garante que apenas um folder possa estar expandido por vez no comportamento acordeão.
*
* @param activeItemId - ID do folder que deve permanecer expandido
*/
private collapseOtherFolders;
/**
* Navega para um nível específico do menu (drill-down).
*
* Este método é chamado quando o usuário interage com um item de menu de nível 2 ou superior,
* ou seja, quando o comportamento esperado é de drill-down (aprofundamento em submenus).
*
* Funcionamento:
* 1. Adiciona o item atual à pilha de navegação (`navigationStack`), permitindo que o usuário volte para níveis anteriores.
* 2. Obtém o nível do menu a partir do atributo `menu-level` do elemento clicado.
* 3. Atualiza o estado `currentLevel` para refletir o novo nível de profundidade (sempre um nível abaixo do atual).
* 4. Define `inSubmenu` como `true`, indicando que o usuário está navegando em um submenu.
* 5. Oculta todos os itens do menu, exceto o submenu selecionado, para garantir foco e clareza na navegação.
* 6. Marca o elemento ativo como "drill active" para controle visual e de acessibilidade.
*
* @param item - Objeto contendo o elemento do menu, seu rótulo e identificador único.
*/
private navigateToLevel;
private focusFirstChildOfList;
private applyOpenState;
private resetNavigation;
private isVisibleElement;
private getTopLevelTargets;
private collectTopLevelGroupTargets;
/**
* Obtém todos os elementos navegáveis visíveis no menu, incluindo itens dentro de agrupamentos expandidos.
* Utilizado para navegação global por setas no modo contextual.
*/
private getAllVisibleTargets;
/**
* Coleta recursivamente todos os targets visíveis de um elemento e seus descendentes.
* Respeita o estado expandido/recolhido dos agrupamentos.
*/
private collectVisibleTargetsFrom;
/**
* Obtém targets com escopo limitado ao menu-list mais próximo (usado em drill-down).
*/
private getScopedTargets;
private isNodeWithinHost;
private findClosestMenuListFrom;
private getTargetsForMenuList;
private focusFirstVisibleTarget;
/**
* Coleta recursivamente os elementos focáveis no modo drill-down.
* Respeita a ordem do DOM e a hierarquia dos elementos.
* Apenas coleta elementos que não têm o atributo 'hidden'.
*/
private collectDrillDownTargets;
/**
* Obtém todos os elementos focáveis dentro do menu que estão visíveis.
* Inclui botões, links e outros elementos interativos.
* No modo contextual, inclui itens dentro de agrupamentos expandidos.
*/
private getFocusableElements;
/**
* Oculta todos os elementos do menu, exceto o elemento ativo e sua cadeia de ancestrais,
* garantindo que apenas o submenu relevante esteja visível durante a navegação drill-down.
*
* Funcionamento detalhado:
* 1. Oculta todos os elementos e do menu, aplicando o atributo 'hidden'.
* Isso garante que nada além do caminho de navegação atual fique visível.
* 2. Remove o atributo 'drill-ancestor' de quaisquer listas marcadas anteriormente, limpando o estado visual.
* 3. Remove o atributo 'hidden' do elemento ativo (o submenu ou item selecionado), tornando-o visível.
* 4. Percorre a cadeia de ancestrais do elemento ativo:
* - Para cada ancestral do tipo ou , remove o 'hidden' para garantir visibilidade.
* - Para ancestrais (exceto o próprio ativo), adiciona o atributo 'drill-ancestor' para permitir
* estilização diferenciada (por exemplo, ocultar cabeçalhos mas manter o conteúdo visível).
* - Interrompe o loop ao chegar no elemento host do componente.
* 5. Exibe todos os filhos diretos do elemento ativo que sejam ou ,
* removendo o 'hidden' para mostrar as opções do submenu.
* 6. Exibe também filhos que estejam dentro de um (estrutura comum em subníveis),
* garantindo que todos os itens relevantes do submenu estejam visíveis.
*
* Este método é fundamental para a experiência de navegação drill-down, pois controla
* exatamente quais partes do menu são exibidas ao usuário em cada etapa da navegação.
*
* @param activeElement O elemento ou que representa o submenu/item atualmente ativo.
*/
private hideAllExcept;
private getDirectMenuChildren;
/**
* Exibe todos os itens e listas do menu, removendo o atributo 'hidden' de cada um.
*
* Esta função é utilizada para restaurar a visualização completa do menu,
* normalmente após uma navegação drill-down ou ao retornar ao nível raiz.
*
* O método percorre todos os elementos e dentro do componente
* e garante que estejam visíveis, removendo o atributo 'hidden' que pode ter sido
* adicionado durante a navegação entre submenus.
*/
private showAllMenuItems;
/**
* Marca ou desmarca um elemento como ativo no contexto de navegação drill-down.
*
* Quando 'active' é true, adiciona o atributo 'drill-active' ao elemento, indicando que
* ele está no foco da navegação. Quando 'active' é false, remove esse atributo.
*
* Esse atributo pode ser utilizado para aplicar estilos visuais ou lógica condicional
* durante a navegação entre níveis do menu.
*
* @param element Elemento a ser marcado/desmarcado
* @param active Boolean indicando se o elemento deve ser marcado como ativo
*/
private setDrillActive;
/**
* Remove todos os marcadores de navegação drill-down do menu.
*
* Esta função percorre todos os elementos que possuem os atributos
* 'drill-active' ou 'drill-ancestor' e remove esses atributos. Isso é necessário
* para garantir que, ao retornar ao nível raiz ou reiniciar a navegação, nenhum
* marcador visual ou lógico de navegação anterior permaneça ativo.
*/
private clearAllDrillMarkers;
/**
* Realiza a navegação de retorno (voltar) em menus do tipo drill-down.
*
* Esta função é chamada quando o usuário deseja voltar um nível na navegação do menu.
* Ela utiliza uma pilha de navegação (navigationStack) para controlar o histórico de navegação.
*
* - Se houver elementos na pilha, remove o elemento do topo (nível atual) e desmarca como ativo.
* - Se, após a remoção, a pilha estiver vazia, significa que o usuário retornou ao nível raiz:
* - Restaura o estado inicial do menu, mostrando todos os itens e limpando marcadores de navegação.
* - Caso contrário, ativa o elemento do nível anterior e oculta os demais, mantendo o contexto do drill-down.
*/
private goBack;
private onToggleClick;
private onGoBackClick;
/**
* Verifica se um slot específico possui conteúdo.
*/
private hasSlotContent;
private getEffectiveBreakpoints;
private getCssClassMap;
/**
* Retorna as classes CSS para o painel do menu.
* Aplica breakpoints apenas quando o menu NÃO está no modo push ou contextual.
*/
private getMenuPanelClasses;
/**
* Renderiza o scrim do menu (backdrop)
*/
private renderScrim;
render(): any;
}