import { EventEmitter } from '../../stencil-public-runtime'; /** * Tipo de densidade para o componente Tab, definindo o espaçamento e tamanho dos elementos. */ type TabDensity = 'small' | 'medium' | 'large'; /** * Tipo de modo de cor para o componente Tab, definindo o esquema de cores utilizado. */ type TabColorMode = 'dark'; /** * Tipo de alinhamento dos itens da tab na barra de navegação. */ type TabAlignItems = 'start' | 'center' | 'end'; /** * ## 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/tab?tab=designer). * * @slot default - Slot para inserir os itens das abas (br-tab-item) * * @part container - Parte para o contêiner principal das abas * @part nav - Parte para a navegação das abas */ export declare class Tab { /** * Referência ao elemento host do componente. */ el: HTMLBrTabElement; /** * Identificador único. * Caso não seja fornecido, um ID gerado automaticamente será usado. */ readonly customId: string; /** * A propriedade 'density' define a densidade do componente. */ readonly density: TabDensity; /** * Define se o Tab usará um esquema de cores escuro. */ readonly colorMode?: TabColorMode; /** * Label de acessibilidade para a navegação das tabs */ readonly label: string; /** * Define o alinhamento horizontal dos itens da tab na barra de navegação. */ readonly alignItemsTab: TabAlignItems; /** * Desabilita o scroll automático da área de conteúdo. * Por padrão, o scroll vertical fica apenas na região de conteúdo. */ readonly scrollDisabled: boolean; /** * Define a altura máxima da área de conteúdo, ativando o scroll interno quando o conteúdo ultrapassa essa altura. */ readonly height?: string; /** * Lista dos tab items registrados */ private tabItems; /** * ID do tab atualmente ativo */ private activeTabId; /** * Flag para controlar se o activeTabId já foi inicializado */ private activeTabInitialized; /** * Evento disparado quando um tab é ativado. */ brTabChange: EventEmitter<{ tabId: string; tabIndex: number; }>; /** * Referência ao elemento de slot para monitorar mudanças nos tab items filhos. */ private slotElement; /** * Observador de mutação para detectar mudanças nos tab items filhos */ private mutationObserver; /** * Observa mudanças no tab ativo para atualizar os estados */ activeTabChanged(newId: string): void; /** * Observa mudanças no color mode para propagar aos filhos */ colorModeChanged(newValue: string): void; /** * Escuta evento de mudança de propriedades dos tab-items filhos. * Este listener garante que o componente pai seja re-renderizado quando * propriedades como tabItemTitle, icon, counter ou onlyIcon mudam dinamicamente. */ handleTabItemPropsChange(): void; /** * Registra os tab items filhos e garante que cada um tenha um ID único. * Também propaga o color mode para os tab items. * @returns void */ private registerTabItems; /** * Atualiza o estado ativo de todos os tab items * Comunicação direta similar ao Vue */ private updateTabStates; /** * Manipula o clique em um botão de tab */ private handleTabClick; /** * Manipula a navegação por teclado nos botões de tab para melhorar a acessibilidade */ private handleTabButtonClick; /** * Manipula o evento de pressionamento de tecla nos botões de tab para melhorar a acessibilidade * @param event Evento de teclado */ private handleTabButtonKeyDown; /** * Encontra o índice habilitado mais próximo na direção indicada (1 = frente, -1 = trás). * Retorna currentIndex se todos os outros itens estiverem desabilitados. */ private findEnabledIndex; /** * Manipula navegação por teclado (acessibilidade) */ private handleKeyNavigation; /** * Retorna o mapeamento de classes CSS do componente */ private getCssClassMap; /** * Retorna o mapeamento de classes CSS para cada item de navegação */ private getTabItemCssClassMap; /** * Retorna o alinhamento em formato flexbox */ private getAlignItemsStyle; /** * Verifica se o valor fornecido é uma altura válida para o componente, aceitando unidades CSS modernas e a palavra-chave 'auto'. * @param value Valor a ser verificado * @returns true se o valor for uma altura válida, caso contrário false */ private isValidHeight; /** * Retorna a altura resolvida do componente, considerando valores válidos e emitindo um aviso para valores inválidos. * @returns A altura resolvida ou undefined se o valor for inválido */ private getResolvedHeight; /** * Ciclo de vida. Executado antes do componente ser carregado no DOM. * Garante que os tab items sejam registrados mesmo que o evento slotchange não seja disparado. */ componentWillLoad(): void; /** * Ciclo de vida. Executado quando o componente é removido do DOM. * Desconecta o MutationObserver para evitar vazamentos de memória. */ disconnectedCallback(): void; /** * Renderiza o componente. * @returns JSX.Element */ render(): any; } export {};