import { EventEmitter } from '../../stencil-public-runtime'; /** * ## 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/skip-link?tab=designer). * * @slot default - Slot para inserir os itens de navegação rápida (br-skiplink-item). * * @part container - Parte para o contêiner principal do componente skip-link, usada para estilização via ::part(). */ export declare class SkipLink { /** * Referência ao elemento host do componente. * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente. */ el: HTMLBrSkipLinkElement; elementInternals: ElementInternals; /** * Identificador único. * Caso não seja fornecido, um ID gerado automaticamente será usado. */ readonly customId: string; /** * Define se o skip link apresenta um ou múltiplos itens visíveis. * - 'simple': Exibe apenas um item por vez. * - 'compound': Exibe uma lista com múltiplos itens. */ readonly variant: 'simple' | 'compound'; /** * Define a posição do skip link na tela. * - 'top-left': Posicionado no canto superior esquerdo. * - 'top-center': Posicionado no centro superior. * - 'top-right': Posicionado no canto superior direito. */ readonly position: 'top-left' | 'top-center' | 'top-right'; /** * Define o z-index do componente. * Controla a ordem de empilhamento do componente na página. */ readonly zIndex: number | null; /** * Exibe a contagem de itens no formato (1/4), (2/4), etc. * Quando `true`, cada item mostrará sua posição relativa ao total de itens. * Por padrão, é `true` para o modo simple e `false` para o modo compound. */ readonly showItemCount?: boolean; /** * Estado interno que controla a visibilidade do componente. */ private isVisible; /** * Define se o componente está em modo tela pequena */ private isSmallScreen; /** * Define se o componente precisa mudar para modo simples por falta de espaço */ private needsSimpleMode; /** * Largura do container pai */ private containerWidth; /** * ResizeObserver para monitorar mudanças no tamanho do container */ private resizeObserver; /** * Evento emitido quando um item do skiplink é ativado. * O evento contém informações sobre o item acionado e o elemento target. */ brSkiplinkNavigation: EventEmitter<{ itemId: string; target: string; }>; /** * Evento emitido quando o skiplink se torna visível. */ brDidShow: EventEmitter; /** * Evento emitido quando o skiplink se torna oculto. */ brDidHide: EventEmitter; updateStyles(): void; /** * Observa mudanças nos estados que afetam o modo efetivo (simple/compound) * e atualiza as contagens dos itens quando necessário. */ watchModeChanges(): void; /** * Listener para eventos de navegação dos itens filhos. */ handleItemNavigation(event: CustomEvent<{ itemId: string; target: string; }>): void; /** * Listener para evento de foco no componente. */ handleFocusIn(): void; /** * Listener para evento de perda de foco no componente. */ handleFocusOut(event: FocusEvent): void; /** * Listener para a tecla Escape. */ handleKeyDown(event: KeyboardEvent): void; connectedCallback(): void; disconnectedCallback(): void; componentWillLoad(): void; componentDidLoad(): void; /** * Manipulador global para atalhos de teclado Alt+[número]. */ private globalKeyHandler; /** * Calcula a largura total dos itens e atualiza os estados do componente */ private updateContainerSize; /** * Calcula a largura total dos itens do skip-link e determina se deve usar modo simple ou compound. */ private calculateItemsWidth; /** * Soma a largura de todos os itens do skip-link */ private sumItemsWidth; /** * Calcula a largura disponível descontando margens e margem de segurança */ private calculateAvailableWidth; /** * Atualiza os atributos de contagem nos itens filhos. * Adiciona data-item-index e data-item-total em cada br-skiplink-item. * A contagem é exibida quando o componente está em modo simple (incluindo modo responsivo). */ private updateItemCounts; /** * Oculta o componente programaticamente. */ hide(): Promise; /** * Exibe o componente programaticamente. */ show(): Promise; private getEffectivePosition; private getCssClassMap; render(): any; }