@govbr-ds/webcomponents 2.1.0 → 2.1.2

package/dist/collection/components/wizard/wizard.js

@@ -0,0 +1,1228 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+import { Host, h, } from "@stencil/core";
+import { generateUniqueId } from "../../shared/utils/id";
+import { UniversalSwipe } from "../../shared/utils/swipe";
+/**
+ * Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/wizard?tab=designer).
+ *
+ * @category Navegação
+ * @status stable
+ * @slot default - Slot para os painéis de etapa (br-wizard-panel) do wizard.
+ * @slot cancel-button - Conteúdo customizado do botão de cancelar. Quando utilizado, o texto padrão "Cancelar" é substituído.
+ * @slot next-button - Conteúdo customizado do botão de avançar/concluir. Quando utilizado, os textos padrão "Avançar" e "Concluir" são substituídos.
+ * @slot previous-button - Conteúdo customizado do botão de voltar. Quando utilizado, o texto padrão "Voltar" é substituído.
+ *
+ * @part form - Área do formulário do wizard.
+ * @part panel - Painel ativo do wizard.
+ * @part progress - Área de progresso do wizard.
+ * @part content - Conteúdo do painel ativo.
+ * @part buttons - Área de botões de navegação.
+ */
+export class Wizard {
+    constructor() {
+        /**
+         * Mensagem de status para leitores de tela (aria-live)
+         */
+        this.ariaLiveMessage = '';
+        /**
+         * Estado collapsed para recolher/expandir barra de progresso (mobile)
+         */
+        this.collapsed = false;
+        /**
+         * Etapa atual sendo exibida.
+         * Gerenciado internamente pelo componente.
+         */
+        this.currentStep = 1;
+        /** Estado mobile para detecção responsiva */
+        this.isMobile = false;
+        /**
+         * Lista de painéis filhos (br-wizard-panel).
+         * Descobertos automaticamente via slot.
+         */
+        this.panels = [];
+        /** Etapa atual (numeração 1-indexada). Reflete para atributo step. */
+        this.step = 1;
+        /**
+         * Í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).
+         * @deprecated Use `initialIndex`.
+         */
+        this.initialStep = 1;
+        /**
+         * Orientação visual do wizard.
+         * Define se os indicadores de progresso serão exibidos horizontalmente ou verticalmente.
+         */
+        this.orientation = 'horizontal';
+        /**
+         * 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.
+         */
+        this.progressionType = 'nonlinear';
+        /**
+         * Identificador único do componente.
+         * Quando omitido, um valor é gerado automaticamente.
+         *
+         * > **Padrão:** valor único gerado por generateUniqueId().
+         *
+         */
+        this.customId = generateUniqueId();
+        /**
+         * Referência ao componente br-step.
+         */
+        this.stepRef = null;
+        /**
+         * Flag para evitar loop quando sincronizamos programaticamente com br-step.
+         */
+        this.isSyncingWithStep = false;
+        /**
+         * Instância do Swipe para gestos mobile na barra de progresso.
+         */
+        this.progressBarSwipe = null;
+        /**
+         * Referência ao elemento DOM da barra de progresso.
+         */
+        this.progressBarRef = null;
+        /**
+         * Referência ao elemento DOM do formulário/painel ativo.
+         */
+        this.formRef = null;
+        /**
+         * Timer para limpar mensagens aria-live.
+         */
+        this.ariaLiveTimeout = null;
+        /**
+         * Tempo de espera para limpar mensagens aria-live (em ms).
+         */
+        this.ARIA_LIVE_CLEANUP_DELAY = 5000;
+        /**
+         * Seletor de elementos focáveis dentro dos painéis.
+         */
+        this.FOCUSABLE_SELECTOR = 'br-button, button, [href], br-item, br-input, input, br-select, select, br-textarea, textarea, [tabindex]:not([tabindex="-1"])';
+        /**
+         * Handler de resize da janela.
+         * Alterna entre modos mobile/desktop e configura/limpa gestos swipe.
+         */
+        this.handleResize = () => {
+            const wasMobile = this.isMobile;
+            this.isMobile = window.innerWidth <= 992;
+            if (this.isMobile && !wasMobile) {
+                this.collapsed = true;
+                this.setupSwipeListeners();
+            }
+            else if (!this.isMobile && wasMobile) {
+                this.cleanupSwipeListeners();
+                this.collapsed = false;
+            }
+        };
+        /**
+         * Handler de toque no formulário.
+         * Recolhe automaticamente a barra de progresso.
+         */
+        this.handleFormTouchStart = () => {
+            this.collapseSteps();
+        };
+        /**
+         * 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.
+         */
+        this.handleNext = async () => {
+            if (this.currentStep === this.panels.length) {
+                // Última etapa: validar antes de completar
+                const eventResult = this.brWizardBeforeStepChange.emit(this.currentStep);
+                // Se preventDefault() foi chamado, bloqueia conclusão
+                if (!eventResult.defaultPrevented) {
+                    this.brWizardComplete.emit();
+                }
+            }
+            else {
+                await this.nextStep();
+            }
+        };
+        /**
+         * Handler do botão "Voltar".
+         * Navega para a etapa anterior.
+         */
+        this.handlePrevious = async () => {
+            await this.previousStep();
+        };
+        /**
+         * Handler do botão "Cancelar".
+         * Emite evento de cancelamento do wizard.
+         */
+        this.handleCancel = () => {
+            this.brWizardCancel.emit();
+        };
+    }
+    /**
+     * Observa mudanças no tipo de progressão.
+     * Atualiza a navegação dos painéis quando muda entre linear/nonlinear.
+     */
+    handleProgressionTypeChange() {
+        this.updatePanels();
+    }
+    /**
+     * Observa mudanças na etapa inicial.
+     * Reinicializa o wizard quando a prop initialStep é alterada externamente.
+     */
+    async handleInitialStepChange() {
+        this.setInitialStep();
+        await this.syncWithBrStep();
+        this.updatePanels();
+    }
+    async handleInitialIndexChange() {
+        this.setInitialStep();
+        await this.syncWithBrStep();
+        this.updatePanels();
+    }
+    async handleCurrentIndexChange(newIndex) {
+        if (newIndex !== undefined && newIndex + 1 !== this.currentStep)
+            await this.navigateToStep(newIndex + 1, true);
+    }
+    async handleStepChangeProp(newStep) {
+        if (newStep !== undefined && newStep !== this.currentStep) {
+            await this.navigateToStep(newStep, true);
+        }
+    }
+    /**
+     * 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
+     */
+    async handleCurrentStepChange(newStep, oldStep) {
+        if (newStep !== oldStep) {
+            this.step = newStep;
+            this.el.setAttribute('step', String(newStep));
+            if (this.currentIndex !== undefined && this.currentIndex !== newStep - 1)
+                this.currentIndex = newStep - 1;
+            await this.syncWithBrStep();
+            this.updatePanels();
+            this.announceStepChange(newStep, oldStep);
+            this.setFocusOnActivePanel();
+        }
+    }
+    /**
+     * Lifecycle: limpa listeners quando componente é removido.
+     */
+    disconnectedCallback() {
+        this.cleanupMobileDetection();
+        this.cleanupSwipeListeners();
+        this.clearAriaLiveTimeout();
+    }
+    /**
+     * Lifecycle: inicializa painéis antes da renderização.
+     */
+    componentWillLoad() {
+        this.panels = Array.from(this.el.querySelectorAll('br-wizard-panel'));
+        this.setInitialStep();
+    }
+    /**
+     * Lifecycle: carrega painéis e configura estado inicial.
+     * Sincroniza com br-step, atualiza painéis e configura detecção mobile.
+     */
+    async componentDidLoad() {
+        const slot = this.el.shadowRoot?.querySelector('slot');
+        if (slot !== null && typeof slot !== 'undefined') {
+            const assignedElements = slot.assignedElements();
+            const slotPanels = assignedElements.filter((el) => el.tagName.toLowerCase() === 'br-wizard-panel');
+            if (slotPanels.length > 0) {
+                this.panels = slotPanels;
+            }
+        }
+        await this.syncWithBrStep();
+        this.updatePanels();
+        this.setupMobileDetection();
+        if (this.isMobile) {
+            this.collapsed = true;
+        }
+    }
+    /**
+     * Detecta quando o slot muda (painéis adicionados/removidos dinamicamente).
+     * Redescobre os painéis e ressincroniza o estado.
+     * @param event - Evento slotchange
+     */
+    async handleSlotChange(event) {
+        const slot = event.target;
+        this.discoverPanelsFromSlot(slot);
+        await this.syncWithBrStep();
+        this.updatePanels();
+    }
+    /**
+     * 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
+     */
+    async handleStepChange(event) {
+        if (this.isSyncingWithStep) {
+            return;
+        }
+        const requestedStep = event.detail.activeStep + 1;
+        const success = await this.navigateToStep(requestedStep);
+        if (!success) {
+            event.stopPropagation();
+            await this.syncWithBrStep();
+        }
+    }
+    /**
+     * Avança para a próxima etapa.
+     * Executa validação via evento `brWizardBeforeStepChange` antes de navegar.
+     * @returns Promise<boolean> - true se navegou com sucesso, false se bloqueado
+     */
+    async nextStep() {
+        return await this.navigateToStep(this.currentStep + 1);
+    }
+    /** Avança para a próxima etapa. */
+    async next() {
+        return await this.nextStep();
+    }
+    /**
+     * Volta para a etapa anterior.
+     * Não executa validação ao retornar.
+     * @returns Promise<boolean> - true se navegou com sucesso, false se bloqueado
+     */
+    async previousStep() {
+        return await this.navigateToStep(this.currentStep - 1);
+    }
+    /** Retorna para a etapa anterior. */
+    async previous() {
+        return await this.previousStep();
+    }
+    /**
+     * 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<boolean> - true se navegou com sucesso, false se bloqueado
+     */
+    async goToStep(stepNumber) {
+        return await this.navigateToStep(stepNumber);
+    }
+    /**
+     * Retorna à primeira etapa do wizard.
+     * Não executa validação (útil para reiniciar o fluxo).
+     * @returns Promise<void>
+     */
+    async reset() {
+        await this.navigateToStep(1, true);
+    }
+    /**
+     * Retorna o elemento HTML do painel ativo no momento.
+     * @returns Promise<HTMLElement | null>
+     */
+    async getCurrentStep() {
+        return this.panels[this.currentStep - 1] || null;
+    }
+    /**
+     * Retorna todos os painéis do wizard.
+     * @returns Promise<HTMLElement[]>
+     */
+    async getAllSteps() {
+        return [...this.panels];
+    }
+    /**
+     * Retorna um painel específico pelo índice.
+     * @param stepNumber - Número da etapa (numeração começa em 1)
+     * @returns Promise<HTMLElement | null>
+     */
+    async getStepByIndex(stepNumber) {
+        return this.panels[stepNumber - 1] || null;
+    }
+    /**
+     * Retorna o índice (número) da etapa atual.
+     * A numeração começa em 1 (primeira etapa = 1, segunda = 2, etc).
+     * @returns Promise<number>
+     */
+    async getCurrentStepIndex() {
+        return this.currentStep;
+    }
+    /**
+     * Retorna o número total de etapas do wizard.
+     * @returns Promise<number>
+     */
+    async getTotalSteps() {
+        return this.panels.length;
+    }
+    /**
+     * 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<boolean> - true se navegou com sucesso, false se bloqueado
+     */
+    async navigateToStep(targetStep, skipValidation = false) {
+        /**
+         * VALIDAÇÕES BÁSICAS
+         * 1. Verifica se targetStep está dentro dos limites válidos
+         * 2. Se já estamos na etapa alvo, retorna sucesso imediatamente
+         */
+        if (targetStep < 1 || targetStep > this.panels.length) {
+            return false;
+        }
+        if (targetStep === this.currentStep) {
+            return true;
+        }
+        /**
+         * MODO LINEAR: RESTRIÇÕES
+         * No modo linear, não é permitido pular para etapas futuras não visitadas.
+         * É possível voltar, mas não avançar além da próxima etapa sequencial.
+         */
+        if (this.progressionType === 'linear') {
+            if (targetStep > this.currentStep + 1) {
+                const message = `Não é possível pular etapas. Complete a etapa ${this.currentStep + 1} antes de avançar.`;
+                this.announceToScreenReader(message);
+                this.brWizardNavigationBlocked.emit('linear-progression');
+                return false;
+            }
+        }
+        /**
+         * VALIDAÇÃO CUSTOMIZADA
+         * Emite evento brWizardBeforeStepChange APENAS se:
+         * 1. Não estamos pulando validação (skipValidation=false)
+         * 2. Estamos AVANÇANDO (targetStep > currentStep)
+         *
+         * Observações:
+         * - Voltar não precisa validar
+         * - Validação se aplica a ambos os modos (linear e nonlinear)
+         */
+        const shouldValidate = !skipValidation && targetStep > this.currentStep;
+        if (shouldValidate) {
+            const eventResult = this.brWizardBeforeStepChange.emit(targetStep);
+            /**
+             * Se preventDefault() foi chamado no listener do evento,
+             * bloqueia a navegação e retorna false
+             */
+            if (eventResult.defaultPrevented) {
+                const message = 'Não é possível avançar. Verifique os campos obrigatórios da etapa atual.';
+                this.announceToScreenReader(message);
+                this.brWizardNavigationBlocked.emit('validation-failed');
+                return false;
+            }
+        }
+        /**
+         * EXECUTA NAVEGAÇÃO
+         * Atualiza o estado interno e emite evento de confirmação
+         */
+        this.currentStep = targetStep;
+        this.brWizardStepChange.emit(this.currentStep);
+        return true;
+    }
+    /**
+     * 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.
+     */
+    async syncWithBrStep() {
+        if (this.stepRef === null)
+            return;
+        if (typeof this.stepRef.GetActiveStep !== 'function') {
+            return;
+        }
+        this.isSyncingWithStep = true;
+        try {
+            const targetStepIndex = this.currentStep - 1;
+            const currentActiveStep = await this.stepRef.GetActiveStep();
+            if (currentActiveStep !== targetStepIndex) {
+                const diff = targetStepIndex - currentActiveStep;
+                if (diff > 0) {
+                    for (let i = 0; i < diff; i++) {
+                        await this.stepRef.ProceedToNextStep();
+                    }
+                }
+                else {
+                    for (let i = 0; i < Math.abs(diff); i++) {
+                        await this.stepRef.BackToPreviousStep();
+                    }
+                }
+            }
+        }
+        finally {
+            this.isSyncingWithStep = false;
+        }
+    }
+    /**
+     * Descobre painéis filhos usando assigned elements do slot.
+     * @param slot - Elemento slot do shadow DOM
+     */
+    discoverPanelsFromSlot(slot) {
+        const assignedElements = slot.assignedElements();
+        this.panels = assignedElements.filter((el) => el.tagName.toLowerCase() === 'br-wizard-panel');
+    }
+    /**
+     * Atualiza estados de todos os painéis.
+     * Define o índice e o estado ativo de cada painel.
+     */
+    async updatePanels() {
+        for (let idx = 0; idx < this.panels.length; idx++) {
+            const panel = this.panels[idx];
+            const stepNumber = idx + 1;
+            const isActive = stepNumber === this.currentStep;
+            await panel.setIndex(stepNumber);
+            await panel.setActive(isActive);
+        }
+    }
+    /**
+     * Define etapa inicial baseada na prop initialStep.
+     * Garante que o valor esteja dentro dos limites válidos.
+     */
+    setInitialStep() {
+        const initialStep = this.initialIndex === undefined ? this.initialStep : this.initialIndex + 1;
+        this.currentStep = Math.max(1, Math.min(initialStep, this.panels.length));
+        this.step = this.currentStep;
+        this.el.setAttribute('step', String(this.currentStep));
+        if (this.currentIndex !== undefined)
+            this.currentIndex = this.currentStep - 1;
+    }
+    /**
+     * 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
+     */
+    announceToScreenReader(message) {
+        this.ariaLiveMessage = '';
+        requestAnimationFrame(() => {
+            this.ariaLiveMessage = message;
+            this.clearAriaLiveTimeout();
+            this.ariaLiveTimeout = window.setTimeout(() => {
+                this.ariaLiveMessage = '';
+            }, this.ARIA_LIVE_CLEANUP_DELAY);
+        });
+    }
+    /**
+     * 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
+     */
+    announceStepChange(newStep, oldStep) {
+        const totalSteps = this.panels.length;
+        let direction = '';
+        if (newStep > oldStep) {
+            direction = 'Avançando para';
+        }
+        else if (newStep < oldStep) {
+            direction = 'Retornando para';
+        }
+        const message = `${direction}, etapa ${newStep} de ${totalSteps}`;
+        this.announceToScreenReader(message);
+    }
+    /**
+     * Limpa o timeout de mensagens aria-live.
+     */
+    clearAriaLiveTimeout() {
+        if (this.ariaLiveTimeout !== null) {
+            clearTimeout(this.ariaLiveTimeout);
+            this.ariaLiveTimeout = null;
+        }
+    }
+    /**
+     * Move foco para o primeiro elemento do painel ativo.
+     *
+     */
+    setFocusOnActivePanel() {
+        requestAnimationFrame(() => {
+            const activePanel = this.panels[this.currentStep - 1];
+            if (typeof activePanel === 'undefined')
+                return;
+            const panelElement = activePanel.shadowRoot?.querySelector('.wizard-panel-content');
+            if (typeof panelElement === 'undefined' || panelElement === null)
+                return;
+            const focusableElements = panelElement.querySelectorAll(this.FOCUSABLE_SELECTOR);
+            if (focusableElements.length > 0) {
+                focusableElements[0].focus();
+            }
+        });
+    }
+    /**
+     * Configura detecção de viewport mobile.
+     * Ativa listeners de resize e configura gestos swipe.
+     */
+    setupMobileDetection() {
+        this.isMobile = window.innerWidth <= 992;
+        window.addEventListener('resize', this.handleResize);
+        if (this.isMobile) {
+            if (this.orientation === 'vertical') {
+                this.collapsed = true;
+            }
+            this.setupSwipeListeners();
+        }
+    }
+    /**
+     * Remove listeners de detecção mobile.
+     */
+    cleanupMobileDetection() {
+        window.removeEventListener('resize', this.handleResize);
+    }
+    /**
+     * Configura gestos swipe para mobile.
+     */
+    setupSwipeListeners() {
+        if (!this.isMobile)
+            return;
+        requestAnimationFrame(() => {
+            this.progressBarRef = this.el.shadowRoot?.querySelector('.wizard-progress') || null;
+            this.formRef = this.el.shadowRoot?.querySelector('.wizard-form') || null;
+            if (this.progressBarRef !== null) {
+                const direction = this.orientation === 'horizontal' ? 'vertical' : 'horizontal';
+                this.progressBarSwipe = new UniversalSwipe(this.progressBarRef, { direction });
+                if (this.orientation === 'horizontal') {
+                    this.progressBarSwipe.on('SWIPE_DOWN', () => this.expandSteps());
+                    this.progressBarSwipe.on('SWIPE_UP', () => this.collapseSteps());
+                }
+                else {
+                    this.progressBarSwipe.on('SWIPE_RIGHT', () => this.expandSteps());
+                    this.progressBarSwipe.on('SWIPE_LEFT', () => this.collapseSteps());
+                }
+            }
+            if (this.formRef !== null) {
+                this.formRef.addEventListener('touchstart', this.handleFormTouchStart, { passive: true });
+            }
+        });
+    }
+    /**
+     * Remove listeners de gestos swipe.
+     */
+    cleanupSwipeListeners() {
+        if (this.progressBarSwipe !== null) {
+            this.progressBarSwipe.off('SWIPE_DOWN', this.expandSteps);
+            this.progressBarSwipe.off('SWIPE_UP', this.collapseSteps);
+            this.progressBarSwipe.off('SWIPE_RIGHT', this.expandSteps);
+            this.progressBarSwipe.off('SWIPE_LEFT', this.collapseSteps);
+            this.progressBarSwipe.destroy();
+            this.progressBarSwipe = null;
+        }
+        if (this.formRef !== null) {
+            this.formRef.removeEventListener('touchstart', this.handleFormTouchStart);
+        }
+    }
+    /**
+     * Recolhe a barra de progresso (mobile).
+     * Adiciona o atributo 'collapsed' ao host.
+     */
+    collapseSteps() {
+        if (this.isMobile) {
+            this.collapsed = true;
+        }
+    }
+    /**
+     * Expande a barra de progresso (mobile).
+     * Remove o atributo 'collapsed' do host.
+     */
+    expandSteps() {
+        if (this.isMobile) {
+            this.collapsed = false;
+        }
+    }
+    /**
+     * Retorna classes CSS do container principal.
+     * @returns CssClassMap - Mapa de classes CSS
+     */
+    getHostClassMap() {
+        return {
+            'br-wizard': true,
+        };
+    }
+    /**
+     * Renderiza indicadores de progresso usando br-step.
+     * @returns JSX.Element | null - Elemento de progresso ou null se não houver painéis
+     */
+    renderProgress() {
+        if (this.panels.length === 0) {
+            return null;
+        }
+        return (h("div", { class: "wizard-progress", part: "progress" }, h("br-step", { ref: (el) => (this.stepRef = el), "initial-step": String(this.currentStep - 1), layout: this.orientation, "label-position": this.orientation === 'vertical' ? 'bottom' : 'bottom', "progression-type": this.progressionType, mode: "step" }, this.panels.map((panel, index) => {
+            const label = panel.getAttribute('label') || '';
+            return (h("br-step-item", { key: panel.id || panel.getAttribute('custom-id') || `wizard-panel-${index}`, label: label }));
+        }))));
+    }
+    /**
+     * Renderiza conteúdo dos painéis via slot.
+     * @returns JSX.Element - Container com slot dos painéis
+     */
+    renderPanelContent() {
+        return (h("div", { class: "wizard-panel-content", part: "content" }, h("slot", null)));
+    }
+    /**
+     * 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
+     */
+    renderPanelButtons() {
+        const isFirst = this.currentStep === 1;
+        const isLast = this.currentStep === this.panels.length;
+        const buttonShape = this.isMobile ? 'block' : undefined;
+        return (h("div", { class: "wizard-panel-btn", part: "buttons" }, h("br-button", { class: "wizard-btn-canc", type: "button", shape: buttonShape, emphasis: "tertiary", "prop:ariaLabel": "Cancelar", onClick: this.handleCancel }, h("slot", { name: "cancel-button" }, "Cancelar")), h("br-button", { class: isLast ? 'wizard-btn' : 'wizard-btn-next', emphasis: "primary", type: "button", shape: buttonShape, "prop:ariaLabel": isLast ? 'Concluir' : 'Avançar', onClick: this.handleNext }, h("slot", { name: "next-button" }, isLast ? 'Concluir' : 'Avançar')), !isFirst && (h("br-button", { class: "wizard-btn-prev", emphasis: "secondary", type: "button", shape: buttonShape, "prop:ariaLabel": "Voltar", onClick: this.handlePrevious }, h("slot", { name: "previous-button" }, "Voltar")))));
+    }
+    /**
+     * 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
+     */
+    renderAriaLiveRegion() {
+        return (h("div", { class: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.ariaLiveMessage));
+    }
+    /**
+     * 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() {
+        const hostClass = this.getHostClassMap();
+        const verticalAttr = this.orientation === 'vertical' ? { vertical: '' } : {};
+        const collapsedAttr = this.collapsed ? { collapsed: '' } : {};
+        const activePanelAttr = { active: '' };
+        // Atributos ARIA para o painel ativo
+        const totalSteps = this.panels.length;
+        const currentPanel = this.panels[this.currentStep - 1];
+        const stepLabel = currentPanel?.getAttribute('label') || `Etapa ${this.currentStep}`;
+        return (h(Host, { key: 'f01acdc3c90053109123a756711e0d37b2dc77d7', class: hostClass, ...verticalAttr, ...collapsedAttr, step: String(this.currentStep) }, this.renderAriaLiveRegion(), this.renderProgress(), h("div", { key: '7c79f3c8404807e951b85f9916e42c16a964a41d', class: "wizard-form", role: "region", "aria-label": `Wizard: ${stepLabel}`, part: "form" }, h("div", { key: '21e0bf5935d80f9b6f40d1bcd1783de6cc771298', class: "wizard-panel", ...activePanelAttr, role: "group", "aria-label": `${stepLabel}, etapa ${this.currentStep} de ${totalSteps}`, part: "panel" }, this.renderPanelContent(), this.renderPanelButtons()))));
+    }
+    static get is() { return "br-wizard"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wizard.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wizard.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "step": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Etapa atual (numera\u00E7\u00E3o 1-indexada). Reflete para atributo step."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "step",
+                "defaultValue": "1"
+            },
+            "initialStep": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `initialIndex`."
+                        }],
+                    "text": "\u00CDndice da etapa inicial do wizard.\nDefine qual etapa ser\u00E1 exibida ao carregar o componente.\nA numera\u00E7\u00E3o come\u00E7a em 1 (primeira etapa = 1, segunda = 2, etc)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "initial-step",
+                "defaultValue": "1"
+            },
+            "initialIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u00CDndice inicial zero-based. Quando informado, tem preced\u00EAncia sobre `initialStep`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "initial-index"
+            },
+            "currentIndex": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u00CDndice atual zero-based para controle externo opcional."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "current-index"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BrOrientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "BrOrientation": {
+                            "location": "import",
+                            "path": "../global.types",
+                            "id": "src/components/global.types.ts::BrOrientation",
+                            "referenceLocation": "BrOrientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Orienta\u00E7\u00E3o visual do wizard.\nDefine se os indicadores de progresso ser\u00E3o exibidos horizontalmente ou verticalmente."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            },
+            "progressionType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BrProgressionType",
+                    "resolved": "\"linear\" | \"nonlinear\"",
+                    "references": {
+                        "BrProgressionType": {
+                            "location": "import",
+                            "path": "../global.types",
+                            "id": "src/components/global.types.ts::BrProgressionType",
+                            "referenceLocation": "BrProgressionType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tipo de progress\u00E3o entre etapas.\n- `linear`: O usu\u00E1rio deve completar cada etapa sequencialmente. N\u00E3o \u00E9 poss\u00EDvel pular etapas futuras.\n- `nonlinear`: O usu\u00E1rio pode navegar livremente entre qualquer etapa."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "progression-type",
+                "defaultValue": "'nonlinear'"
+            },
+            "customId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identificador \u00FAnico do componente.\nQuando omitido, um valor \u00E9 gerado automaticamente.\n\n> **Padr\u00E3o:** valor \u00FAnico gerado por generateUniqueId()."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "custom-id",
+                "defaultValue": "generateUniqueId()"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "ariaLiveMessage": {},
+            "collapsed": {},
+            "currentStep": {},
+            "isMobile": {},
+            "panels": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "brWizardStepChange",
+                "name": "brWizardStepChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento emitido AP\u00D3S mudar de etapa com sucesso.\n\nEste evento \u00E9 disparado independente da origem da navega\u00E7\u00E3o:\n- Bot\u00F5es \"Avan\u00E7ar\" ou \"Voltar\"\n- Click direto em um step do indicador de progresso\n- Chamadas program\u00E1ticas via m\u00E9todos p\u00FAblicos (goToStep, nextStep, etc)"
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "brWizardBeforeStepChange",
+                "name": "brWizardBeforeStepChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento emitido ANTES de mudar de etapa (permite valida\u00E7\u00E3o e cancelamento).\n\nComportamento:\n- Disparado apenas ao AVAN\u00C7AR (targetStep > currentStep)\n- N\u00E3o \u00E9 disparado ao VOLTAR (targetStep < currentStep)\n- Funciona tanto para cliques nos bot\u00F5es quanto para cliques diretos nos steps\n- Pode ser cancelado com `event.preventDefault()` para bloquear a navega\u00E7\u00E3o"
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "brWizardComplete",
+                "name": "brWizardComplete",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento emitido ao concluir o wizard (\u00FAltima etapa)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brWizardCancel",
+                "name": "brWizardCancel",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento emitido ao cancelar o wizard."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brWizardNavigationBlocked",
+                "name": "brWizardNavigationBlocked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento emitido quando uma a\u00E7\u00E3o \u00E9 bloqueada (valida\u00E7\u00E3o falha, progress\u00E3o linear impedida).\nEmite uma string indicando o motivo: 'linear-progression' ou 'validation-failed'.\nUse getCurrentStepIndex() para obter o contexto da etapa atual."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "nextStep": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Avan\u00E7a para a pr\u00F3xima etapa.\nExecuta valida\u00E7\u00E3o via evento `brWizardBeforeStepChange` antes de navegar.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise<boolean> - true se navegou com sucesso, false se bloqueado"
+                        }]
+                }
+            },
+            "next": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Avan\u00E7a para a pr\u00F3xima etapa.",
+                    "tags": []
+                }
+            },
+            "previousStep": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Volta para a etapa anterior.\nN\u00E3o executa valida\u00E7\u00E3o ao retornar.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise<boolean> - true se navegou com sucesso, false se bloqueado"
+                        }]
+                }
+            },
+            "previous": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Retorna para a etapa anterior.",
+                    "tags": []
+                }
+            },
+            "goToStep": {
+                "complexType": {
+                    "signature": "(stepNumber: number) => Promise<boolean>",
+                    "parameters": [{
+                            "name": "stepNumber",
+                            "type": "number",
+                            "docs": "- N\u00FAmero da etapa de destino (numera\u00E7\u00E3o come\u00E7a em 1)"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Navega para uma etapa espec\u00EDfica.\nExecuta valida\u00E7\u00E3o se estiver avan\u00E7ando (etapa alvo > etapa atual).",
+                    "tags": [{
+                            "name": "param",
+                            "text": "stepNumber - N\u00FAmero da etapa de destino (numera\u00E7\u00E3o come\u00E7a em 1)"
+                        }, {
+                            "name": "returns",
+                            "text": "Promise<boolean> - true se navegou com sucesso, false se bloqueado"
+                        }]
+                }
+            },
+            "reset": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Retorna \u00E0 primeira etapa do wizard.\nN\u00E3o executa valida\u00E7\u00E3o (\u00FAtil para reiniciar o fluxo).",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise<void>"
+                        }]
+                }
+            },
+            "getCurrentStep": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLElement | null>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<HTMLElement>"
+                },
+                "docs": {
+                    "text": "Retorna o elemento HTML do painel ativo no momento.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise<HTMLElement | null>"
+                        }]
+                }
+            },
+            "getAllSteps": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLElement[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<HTMLElement[]>"
+                },
+                "docs": {
+                    "text": "Retorna todos os pain\u00E9is do wizard.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise<HTMLElement[]>"
+                        }]
+                }
+            },
+            "getStepByIndex": {
+                "complexType": {
+                    "signature": "(stepNumber: number) => Promise<HTMLElement | null>",
+                    "parameters": [{
+                            "name": "stepNumber",
+                            "type": "number",
+                            "docs": "- N\u00FAmero da etapa (numera\u00E7\u00E3o come\u00E7a em 1)"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<HTMLElement>"
+                },
+                "docs": {
+                    "text": "Retorna um painel espec\u00EDfico pelo \u00EDndice.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "stepNumber - N\u00FAmero da etapa (numera\u00E7\u00E3o come\u00E7a em 1)"
+                        }, {
+                            "name": "returns",
+                            "text": "Promise<HTMLElement | null>"
+                        }]
+                }
+            },
+            "getCurrentStepIndex": {
+                "complexType": {
+                    "signature": "() => Promise<number>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<number>"
+                },
+                "docs": {
+                    "text": "Retorna o \u00EDndice (n\u00FAmero) da etapa atual.\nA numera\u00E7\u00E3o come\u00E7a em 1 (primeira etapa = 1, segunda = 2, etc).",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise<number>"
+                        }]
+                }
+            },
+            "getTotalSteps": {
+                "complexType": {
+                    "signature": "() => Promise<number>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<number>"
+                },
+                "docs": {
+                    "text": "Retorna o n\u00FAmero total de etapas do wizard.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise<number>"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "progressionType",
+                "methodName": "handleProgressionTypeChange"
+            }, {
+                "propName": "initialStep",
+                "methodName": "handleInitialStepChange"
+            }, {
+                "propName": "initialIndex",
+                "methodName": "handleInitialIndexChange"
+            }, {
+                "propName": "currentIndex",
+                "methodName": "handleCurrentIndexChange"
+            }, {
+                "propName": "step",
+                "methodName": "handleStepChangeProp"
+            }, {
+                "propName": "currentStep",
+                "methodName": "handleCurrentStepChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "slotchange",
+                "method": "handleSlotChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "brStepChange",
+                "method": "handleStepChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}