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/wizard?tab=designer). * * @slot default - Slot para os painéis de etapa (br-wizard-panel) do wizard. */ export declare class Wizard { /** * Referência ao elemento host do componente. * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente. */ el: HTMLBrWizardElement; /** * Internals API para suporte a formulários nativos. */ elementInternals: ElementInternals; /** * Índice da etapa inicial do wizard. * Define qual etapa será exibida ao carregar o componente. * A numeração começa em 1 (primeira etapa = 1, segunda = 2, etc). */ initialStep: number; /** * Orientação visual do wizard. * Define se os indicadores de progresso serão exibidos horizontalmente ou verticalmente. */ orientation: 'horizontal' | 'vertical'; /** * Tipo de progressão entre etapas. * - `linear`: O usuário deve completar cada etapa sequencialmente. Não é possível pular etapas futuras. * - `nonlinear`: O usuário pode navegar livremente entre qualquer etapa. */ progressionType: 'linear' | 'nonlinear'; /** * ID customizado para o componente. * Se não fornecido, um ID único será gerado automaticamente. */ customId: string; /** * Etapa atual sendo exibida. * Gerenciado internamente pelo componente. */ currentStep: number; /** Estado mobile para detecção responsiva */ isMobile: boolean; /** * Estado collapsed para recolher/expandir barra de progresso (mobile) */ collapsed: boolean; /** * Lista de painéis filhos (br-wizard-panel). * Descobertos automaticamente via slot. */ panels: HTMLElement[]; /** * Mensagem de status para leitores de tela (aria-live) */ ariaLiveMessage: string; /** * Evento emitido APÓS mudar de etapa com sucesso. * * Este evento é disparado independente da origem da navegação: * - Botões "Avançar" ou "Voltar" * - Click direto em um step do indicador de progresso * - Chamadas programáticas via métodos públicos (goToStep, nextStep, etc) */ brWizardStepChange: EventEmitter; /** * Evento emitido ANTES de mudar de etapa (permite validação e cancelamento). * * Comportamento: * - Disparado apenas ao AVANÇAR (targetStep > currentStep) * - Não é disparado ao VOLTAR (targetStep < currentStep) * - Funciona tanto para cliques nos botões quanto para cliques diretos nos steps * - Pode ser cancelado com `event.preventDefault()` para bloquear a navegação */ brWizardBeforeStepChange: EventEmitter; /** * Evento emitido ao concluir o wizard (última etapa). */ brWizardComplete: EventEmitter; /** * Evento emitido ao cancelar o wizard. */ brWizardCancel: EventEmitter; /** * Evento emitido quando uma ação é bloqueada (validação falha, progressão linear impedida). * Emite uma string indicando o motivo: 'linear-progression' ou 'validation-failed'. * Use getCurrentStepIndex() para obter o contexto da etapa atual. */ brWizardNavigationBlocked: EventEmitter; /** * Referência ao componente br-step. */ private stepRef; /** * Flag para evitar loop quando sincronizamos programaticamente com br-step. */ private isSyncingWithStep; /** * Instância do Swipe para gestos mobile na barra de progresso. */ private progressBarSwipe; /** * Referência ao elemento DOM da barra de progresso. */ private progressBarRef; /** * Referência ao elemento DOM do formulário/painel ativo. */ private formRef; /** * Timer para limpar mensagens aria-live. */ private ariaLiveTimeout; /** * Tempo de espera para limpar mensagens aria-live (em ms). */ private readonly ARIA_LIVE_CLEANUP_DELAY; /** * Seletor de elementos focáveis dentro dos painéis. */ private readonly FOCUSABLE_SELECTOR; /** * Observa mudanças no tipo de progressão. * Atualiza a navegação dos painéis quando muda entre linear/nonlinear. */ handleProgressionTypeChange(): void; /** * Observa mudanças na etapa inicial. * Reinicializa o wizard quando a prop initialStep é alterada externamente. */ handleInitialStepChange(): Promise; /** * Observa mudanças na etapa atual (fonte única de verdade). * Sincroniza com br-step, atualiza painéis, anuncia mudança e move foco. * @param newStep - Nova etapa * @param oldStep - Etapa anterior */ handleCurrentStepChange(newStep: number, oldStep: number): Promise; /** * Detecta quando o slot muda (painéis adicionados/removidos dinamicamente). * Redescobre os painéis e ressincroniza o estado. * @param event - Evento slotchange */ handleSlotChange(event: Event): Promise; /** * Detecta quando o br-step muda de etapa ativa. * Valida e sincroniza a navegação com o componente interno br-step. * @param event - Evento customizado do br-step */ handleStepChange(event: CustomEvent<{ activeStep: number; }>): Promise; /** * Lifecycle: inicializa painéis antes da renderização. */ componentWillLoad(): void; /** * Lifecycle: carrega painéis e configura estado inicial. * Sincroniza com br-step, atualiza painéis e configura detecção mobile. */ componentDidLoad(): Promise; /** * Lifecycle: limpa listeners quando componente é removido. */ disconnectedCallback(): void; /** * Avança para a próxima etapa. * Executa validação via evento `brWizardBeforeStepChange` antes de navegar. * @returns Promise - true se navegou com sucesso, false se bloqueado */ nextStep(): Promise; /** * Volta para a etapa anterior. * Não executa validação ao retornar. * @returns Promise - true se navegou com sucesso, false se bloqueado */ previousStep(): Promise; /** * Navega para uma etapa específica. * Executa validação se estiver avançando (etapa alvo > etapa atual). * @param stepNumber - Número da etapa de destino (numeração começa em 1) * @returns Promise - true se navegou com sucesso, false se bloqueado */ goToStep(stepNumber: number): Promise; /** * Retorna à primeira etapa do wizard. * Não executa validação (útil para reiniciar o fluxo). * @returns Promise */ reset(): Promise; /** * Retorna o elemento HTML do painel ativo no momento. * @returns Promise */ getCurrentStep(): Promise; /** * Retorna todos os painéis do wizard. * @returns Promise */ getAllSteps(): Promise; /** * Retorna um painel específico pelo índice. * @param stepNumber - Número da etapa (numeração começa em 1) * @returns Promise */ getStepByIndex(stepNumber: number): Promise; /** * Retorna o índice (número) da etapa atual. * A numeração começa em 1 (primeira etapa = 1, segunda = 2, etc). * @returns Promise */ getCurrentStepIndex(): Promise; /** * Retorna o número total de etapas do wizard. * @returns Promise */ getTotalSteps(): Promise; /** * Método privado central que gerencia toda a navegação com validação. * * Comportamento unificado para linear e nonlinear: * - Linear: Valida ao avançar, não permite pular steps * - Nonlinear: Valida ao avançar, permite pular steps livremente * * @param targetStep - Número da etapa de destino (numeração começa em 1) * @param skipValidation - Se true, pula validação (útil para reset/programático) * @returns Promise - true se navegou com sucesso, false se bloqueado */ private navigateToStep; /** * Sincroniza estado do wizard com o br-step. * * O br-step já gerencia completamente os atributos 'active' via componentShouldUpdate * e requestAnimationFrame, então apenas chamamos os métodos de navegação dele. */ private syncWithBrStep; /** * Descobre painéis filhos usando assigned elements do slot. * @param slot - Elemento slot do shadow DOM */ private discoverPanelsFromSlot; /** * Atualiza estados de todos os painéis. * Define o índice e o estado ativo de cada painel. */ private updatePanels; /** * Define etapa inicial baseada na prop initialStep. * Garante que o valor esteja dentro dos limites válidos. */ private setInitialStep; /** * Anuncia mensagem para leitores de tela via aria-live. * Limpa automaticamente após 5 segundos para evitar poluição. * @param message - Mensagem a ser anunciada */ private announceToScreenReader; /** * Anuncia mudança de etapa para leitores de tela. * Informa direção da navegação e progresso atual. * @param newStep - Nova etapa * @param oldStep - Etapa anterior */ private announceStepChange; /** * Limpa o timeout de mensagens aria-live. */ private clearAriaLiveTimeout; /** * Move foco para o primeiro elemento do painel ativo. * */ private setFocusOnActivePanel; /** * Configura detecção de viewport mobile. * Ativa listeners de resize e configura gestos swipe. */ private setupMobileDetection; /** * Remove listeners de detecção mobile. */ private cleanupMobileDetection; /** * Handler de resize da janela. * Alterna entre modos mobile/desktop e configura/limpa gestos swipe. */ private handleResize; /** * Configura gestos swipe para mobile. */ private setupSwipeListeners; /** * Remove listeners de gestos swipe. */ private cleanupSwipeListeners; /** * Handler de toque no formulário. * Recolhe automaticamente a barra de progresso. */ private handleFormTouchStart; /** * Recolhe a barra de progresso (mobile). * Adiciona o atributo 'collapsed' ao host. */ private collapseSteps; /** * Expande a barra de progresso (mobile). * Remove o atributo 'collapsed' do host. */ private expandSteps; /** * Handler do botão "Avançar" ou "Concluir". * Se for a última etapa, valida e emite evento de conclusão. * Caso contrário, avança para a próxima etapa. */ private handleNext; /** * Handler do botão "Voltar". * Navega para a etapa anterior. */ private handlePrevious; /** * Handler do botão "Cancelar". * Emite evento de cancelamento do wizard. */ private handleCancel; /** * Retorna classes CSS do container principal. * @returns CssClassMap - Mapa de classes CSS */ private getHostClassMap; /** * Renderiza indicadores de progresso usando br-step. * @returns JSX.Element | null - Elemento de progresso ou null se não houver painéis */ private renderProgress; /** * Renderiza conteúdo dos painéis via slot. * @returns JSX.Element - Container com slot dos painéis */ private renderPanelContent; /** * Renderiza botões de navegação do wizard. * Adapta-se ao contexto: primeira etapa, última etapa, mobile/desktop. * @returns JSX.Element - Container com botões de navegação */ private renderPanelButtons; /** * Renderiza região de anúncios para leitores de tela. * Usa aria-live para comunicar mudanças de estado de forma acessível. * @returns JSX.Element - Elemento sr-only com aria-live */ private renderAriaLiveRegion; /** * Método de renderização principal do componente. * Monta a estrutura completa do wizard com acessibilidade integrada. * @returns JSX.Element - Estrutura completa do wizard */ render(): any; }