import { type EventEmitter } from '../../stencil-public-runtime'; import type { BrOrientation, BrProgressionType } from '../global.types'; import type { StepChangeDetail, StepContentType, StepLabelPosition, StepMode, StepValidationStatus, StepVerticalContentPlacement } from './step.types'; /** * ## 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/step?tab=designer). * * @category Navegação * @status stable * @slot default - Slot para os itens do step (br-step-item), aceitando apenas esse componente. * * @part container - Parte para o contêiner principal envolvendo todos os step-items, usada para estilizar layout geral via ::part(). * */ export declare class Step { /** * Referência ao elemento host do componente. * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente. */ el: HTMLBrStepElement; activeStep: number; /** * `true` quando o componente está renderizado dentro de um `br-carousel`. * Detectado automaticamente em `componentDidLoad` via `closest('br-carousel')`. * Quando ativo, o container assume `role="tablist"` e cada item assume * `role="tab"` com roving tabindex — padrão W3C APG para carrossel com indicadores tipo abas. */ private isTablist; stepItems: HTMLBrStepItemElement[]; /** * propriedade responsável por definir a orientação do componente Step * @deprecated Use `orientation`. */ layout: BrOrientation; /** Orientação do componente. Quando informada, tem precedência sobre `layout`. */ orientation?: BrOrientation; /** * * define o passo que começará destacado * @deprecated Use `initialIndex`. */ initialStep: string; /** Índice inicial zero-based. Quando informado, tem precedência sobre `initialStep`. */ initialIndex?: number; /** * * Propriedade que define a posição onde o texto de destaque,label, ficará localizado no stepItem */ labelPosition?: StepLabelPosition; /** * * Propriedade que define o tipo de conteúdo a ser exibido dentro do componente step e stepItem */ contentType: StepContentType; /** * * Propriedade que define o tipo de comportamento que o componente Step deverá seguir */ mode: StepMode; /** * * Propriedade que define o tipo de progressão de etapas que o step vai executar */ progressionType: BrProgressionType; /** * Define a posição do conteúdo de cada etapa no layout vertical. * - `between`: conteúdo abaixo do indicador/rótulo, entre as etapas. * - `side`: conteúdo em coluna lateral à linha de indicadores. */ verticalContentPlacement: StepVerticalContentPlacement; /** * Observa mudanças na etapa ativa e sincroniza os itens filhos. */ activeStepChanged(newValue: number, oldValue: number): void; /** * Observa mudanças no passo inicial e atualiza a etapa ativa. */ initialStepChanged(newValue: string | number, oldValue: string | number): void; /** * Observa mudanças na posição do label e propaga aos itens. */ labelPositionChanged(): void; /** * Observa mudanças no tipo de conteúdo e propaga aos itens. */ contentTypeChanged(): void; /** * Observa mudanças no modo e propaga aos itens. */ modeChanged(newValue: StepMode): void; /** * Observa mudanças no layout e atualiza a linha do tempo dos itens. */ layoutChanged(): void; /** * Observa mudanças no tipo de progressão e atualiza itens desabilitados. */ progressionTypeChanged(): void; /** * Observa mudanças na posição do conteúdo vertical e propaga aos itens. */ verticalContentPlacementChanged(): void; /** * Emite um evento quando o step ativo muda. * O evento carrega o índice do novo step ativo (0-based). */ brStepChange: EventEmitter; componentWillLoad(): void; componentDidLoad(): void; /** * listener para ouvir o evento de click no componente step * Através desse listener o componente define qual será o proximo passo do step que terá o estado ativo */ handleClick(event: MouseEvent): void; /** * * Método disponibilizado via API do elemento que controla o componente Step, responsável por avançar para o próximo passo e atualizar o valor do estado activeStep * @deprecated Use `next`. */ ProceedToNextStep(): Promise; /** Avança para o próximo passo. */ next(): Promise; /** * * Método disponibilizado via API do elemento que controla o componente Step, responsável por retornar ao passo anterior e atualizar o valor do estado activeStep * @deprecated Use `previous`. */ BackToPreviousStep(): Promise; /** Retorna ao passo anterior. */ previous(): Promise; /** * * Método disponibilizado via API do elemento que integra um componente externo ao componente Step, permitindo sinalizar validações ou destacar a etapa com estado ativo. * @deprecated Use `setCurrentValidation`. */ StepValidation(validationStatus: StepValidationStatus): Promise; /** Define o estado de validação do passo ativo. */ setCurrentValidation(validationStatus: StepValidationStatus): Promise; /** * * Método disponibilizado via API do elemento que permite a um componente externo obter a etapa com o estado ativo do componente Step. */ GetActiveStep(): Promise; private get effectiveOrientation(); /** * Atualiza os atributos 'active' dos step-items de forma segura * Chamado via requestAnimationFrame para garantir que o DOM é atualizado após batched state changes */ private updateStepItemsActiveState; private getStepItemsElements; private getStepItems; private setStepItemsLabelPosition; private setStepItemsDefaultContent; private setStepItemsContentType; private setStepItemsMode; private setStepItemsVerticalContentPlacement; private setActiveStep; private isValidStepIndex; private configureStepItems; /** * Configura os step-items para o comportamento de tablist (carrossel). * Sobrescreve contentType e mode dos itens para que assumam * `role="tab"` com semântica W3C APG para carrossel com indicadores tipo abas. */ private configureTablistMode; private getStepItemPosition; private configureTimeLine; private configureLinearProgression; private clearLinearProgression; private getCssClassMap; private ariaObjectContent; private getAreaLabel; render(): any; private handleSlotChange; }