/** * ## 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/menu?tab=designer). * * @slot default - Slot para o conteúdo principal do menu (menu-list e menu-item). * @slot header - Slot para o cabeçalho do menu, exibido apenas em modo não contextual. * @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. */ export declare class Menu { /** * Referência ao elemento host do componente. * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente. */ private el; /** * Classes CSS para definir breakpoints responsivos do menu. * Utilize esta propriedade para controlar a largura do menu em diferentes tamanhos de tela. */ breakpoints: string; /** * Define se o menu deve usar comportamento push (sempre visível em telas maiores). * Quando ativado, o menu permanece fixo na lateral e empurra o conteúdo principal. */ push: 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) */ density: 'large' | 'medium' | 'small'; /** * 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; active: boolean; inSubmenu: boolean; currentLevel: number; expandedDropMenus: { [key: string]: boolean; }; navigationStack: Array<{ element: HTMLElement; label: string; id: string; }>; private previouslyFocusedElement; private rafIds; componentDidLoad(): 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; private ensureSingleActiveItem; handleMenuItemClick(ev: Event): void; handleKeyDown(ev: KeyboardEvent): void; handleNavigateToSubmenu(ev: CustomEvent<{ element: HTMLElement; label: string; }>): void; handleFolderToggled(ev: CustomEvent): void; handleMenuHeaderClose(): void; /** * 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 toggleMenu; private closeMenu; private resetNavigation; private isVisibleElement; private getTopLevelTargets; /** * 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; private getDeepActiveElement; /** * 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; /** * 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 handleToggleMenu; private handleGoBack; private handleCloseMenu; /** * 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; render(): any; }