@govbr-ds/webcomponents 2.1.0 → 2.1.2

package/dist/collection/components/step/step.js

@@ -0,0 +1,896 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+import { Host, h, } from "@stencil/core";
+/**
+ * ## 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 class Step {
+    constructor() {
+        this.activeStep = 0;
+        /**
+         * `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.
+         */
+        this.isTablist = false;
+        this.stepItems = [];
+        /**
+         * propriedade responsável por definir a orientação do componente Step
+         * @deprecated Use `orientation`.
+         */
+        this.layout = 'horizontal';
+        /**
+         *
+         * define o passo que começará destacado
+         * @deprecated Use `initialIndex`.
+         */
+        this.initialStep = '0';
+        /**
+         *
+         * Propriedade que  define a posição onde o texto de destaque,label, ficará localizado no stepItem
+         */
+        this.labelPosition = 'bottom';
+        /**
+         *
+         * Propriedade que define o tipo de conteúdo a ser exibido dentro do componente step  e stepItem
+         */
+        this.contentType = 'default';
+        /**
+         *
+         * Propriedade que define o tipo de comportamento que o componente Step deverá seguir
+         */
+        this.mode = 'step';
+        /**
+         *
+         * Propriedade que define o tipo de progressão de etapas que o step vai executar
+         */
+        this.progressionType = 'nonlinear';
+        /**
+         * 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.
+         */
+        this.verticalContentPlacement = 'between';
+        this.ariaObjectContent = {
+            step: 'Modo etapas ',
+            controller: 'Modo controle ',
+            default: 'passos com conteúdo numérico ',
+            'br-icon': 'passos com conteúdo que possuem icones ',
+            slotted: 'passos com conteúdo customizados ',
+            'no-content': 'passos que apresentam conteúdo por meio de tooltip ',
+            linear: 'progressão linear ',
+            nonlinear: 'progressão não linear ',
+            vertical: 'com layout vertical ',
+            horizontal: 'com layout horizontal ',
+        };
+    }
+    /**
+     * Observa mudanças na etapa ativa e sincroniza os itens filhos.
+     */
+    activeStepChanged(newValue, oldValue) {
+        if (oldValue === newValue || !this.isValidStepIndex(newValue))
+            return;
+        this.updateStepItemsActiveState(oldValue);
+        if (this.progressionType === 'linear') {
+            this.configureLinearProgression();
+        }
+        this.brStepChange.emit({ activeStep: newValue });
+    }
+    /**
+     * Observa mudanças no passo inicial e atualiza a etapa ativa.
+     */
+    initialStepChanged(newValue, oldValue) {
+        if (newValue === oldValue)
+            return;
+        const num = Number(newValue);
+        if (!Number.isNaN(num)) {
+            this.setActiveStep(num);
+        }
+    }
+    /**
+     * Observa mudanças na posição do label e propaga aos itens.
+     */
+    labelPositionChanged() {
+        this.setStepItemsLabelPosition();
+    }
+    /**
+     * Observa mudanças no tipo de conteúdo e propaga aos itens.
+     */
+    contentTypeChanged() {
+        void this.setStepItemsContentType();
+    }
+    /**
+     * Observa mudanças no modo e propaga aos itens.
+     */
+    modeChanged(newValue) {
+        this.setStepItemsMode(newValue);
+        this.configureStepItems();
+    }
+    /**
+     * Observa mudanças no layout e atualiza a linha do tempo dos itens.
+     */
+    layoutChanged() {
+        this.configureStepItems();
+    }
+    /**
+     * Observa mudanças no tipo de progressão e atualiza itens desabilitados.
+     */
+    progressionTypeChanged() {
+        this.configureStepItems();
+    }
+    /**
+     * Observa mudanças na posição do conteúdo vertical e propaga aos itens.
+     */
+    verticalContentPlacementChanged() {
+        this.setStepItemsVerticalContentPlacement();
+    }
+    componentWillLoad() {
+        this.activeStep = this.initialIndex ?? Number(this.initialStep);
+        this.getStepItemsElements();
+        const root = this.el.getRootNode();
+        this.isTablist = root instanceof ShadowRoot && root.host?.tagName?.toLowerCase() === 'br-carousel';
+    }
+    componentDidLoad() {
+        this.setStepItemsLabelPosition();
+        this.setStepItemsContentType();
+        this.setStepItemsDefaultContent();
+        this.setStepItemsMode(this.mode);
+        this.setStepItemsVerticalContentPlacement();
+        this.configureStepItems();
+        if (this.isValidStepIndex(this.activeStep)) {
+            this.stepItems[this.activeStep].setAttribute('active', 'true');
+        }
+        else {
+            console.warn('br-step initial-step attribute has value more than number of step-items provided');
+        }
+    }
+    /**
+     * 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) {
+        const targetElement = event.target;
+        const targetStepItem = targetElement.closest('br-step-item');
+        if (targetStepItem === null)
+            return;
+        this.setActiveStep(this.stepItems.indexOf(targetStepItem));
+    }
+    /**
+     *
+     * 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`.
+     */
+    // biome-ignore lint/style/useNamingConvention: API pública legada exposta para consumidores externos.
+    async ProceedToNextStep() {
+        this.getStepItemsElements();
+        if (this.activeStep + 1 < this.stepItems.length) {
+            this.setActiveStep(this.activeStep + 1);
+            if (this.progressionType === 'linear') {
+                this.configureLinearProgression();
+            }
+        }
+    }
+    /** Avança para o próximo passo. */
+    async next() {
+        await this.ProceedToNextStep();
+    }
+    /**
+     *
+     * 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`.
+     */
+    // biome-ignore lint/style/useNamingConvention: API pública legada exposta para consumidores externos.
+    async BackToPreviousStep() {
+        if (this.activeStep - 1 >= 0) {
+            this.setActiveStep(this.activeStep - 1);
+        }
+    }
+    /** Retorna ao passo anterior. */
+    async previous() {
+        await this.BackToPreviousStep();
+    }
+    /**
+     *
+     * 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`.
+     */
+    // biome-ignore lint/style/useNamingConvention: API pública legada exposta para consumidores externos.
+    async StepValidation(validationStatus) {
+        this.stepItems[this.activeStep].setAttribute('highlight', validationStatus);
+    }
+    /** Define o estado de validação do passo ativo. */
+    async setCurrentValidation(validationStatus) {
+        await this.StepValidation(validationStatus);
+    }
+    /**
+     *
+     * Método disponibilizado via API do elemento que permite a um componente externo obter a etapa com o estado ativo do componente Step.
+     */
+    // biome-ignore lint/style/useNamingConvention: API pública legada exposta para consumidores externos.
+    async GetActiveStep() {
+        return this.activeStep;
+    }
+    get effectiveOrientation() {
+        return this.orientation ?? this.layout;
+    }
+    /**
+     * Atualiza os atributos 'active' dos step-items de forma segura
+     * Chamado via requestAnimationFrame para garantir que o DOM é atualizado após batched state changes
+     */
+    updateStepItemsActiveState(previousActiveStep) {
+        if (this.isValidStepIndex(previousActiveStep)) {
+            this.stepItems[previousActiveStep].removeAttribute('active');
+        }
+        this.stepItems[this.activeStep].setAttribute('active', 'true');
+    }
+    getStepItemsElements() {
+        const rawChildren = Array.from(this.el.children).filter((child) => child.tagName.toLowerCase() !== 'style' && child.tagName.toLowerCase() !== 'script');
+        if (rawChildren.length === 0) {
+            this.stepItems = [];
+            return;
+        }
+        const childrenHaveConsistentTagName = rawChildren.every((item) => item.tagName.toLowerCase() === 'br-step-item');
+        if (!childrenHaveConsistentTagName) {
+            throw new Error('br-step component must have as child elements only br-step-items components');
+        }
+        const slotItems = rawChildren;
+        const firstChildrenContentTypeValue = slotItems[0].getAttribute('content-type');
+        const childrenHaveConsistentContentType = slotItems.every((item) => item.getAttribute('content-type') === firstChildrenContentTypeValue);
+        if (!childrenHaveConsistentContentType) {
+            throw new Error('br-step must have all child elements with same content type attribute value');
+        }
+        this.stepItems = slotItems;
+    }
+    getStepItems() {
+        this.getStepItemsElements();
+        if (this.stepItems.length > 0) {
+            return this.stepItems;
+        }
+        return Array.from(this.el.children).filter((child) => child.tagName.toLowerCase() === 'br-step-item');
+    }
+    setStepItemsLabelPosition() {
+        const slotItems = this.getStepItems();
+        slotItems.forEach((elements) => {
+            if (this.labelPosition !== undefined) {
+                elements.setLabelPosition(this.labelPosition);
+            }
+        });
+    }
+    setStepItemsDefaultContent() {
+        const slotItems = this.getStepItems();
+        slotItems.forEach((elements, index) => {
+            const indicatorContent = index + 1;
+            elements.setContent(indicatorContent.toString());
+        });
+    }
+    async setStepItemsContentType() {
+        const slotItems = this.getStepItems();
+        await Promise.all(slotItems.map((element) => element.setContentType(this.contentType)));
+        slotItems.forEach((elements, index) => {
+            elements.setAttribute('aria-posinset', `${index + 1}`);
+            elements.setAttribute('aria-setsize', `${slotItems.length}`);
+        });
+    }
+    setStepItemsMode(mode) {
+        const slotItems = this.getStepItems();
+        slotItems.forEach((elements) => {
+            elements.setMode(mode);
+            if (mode === 'controller') {
+                elements.setContentType('no-content');
+                elements.removeAttribute('label');
+            }
+        });
+        if (mode === 'controller' && this.effectiveOrientation !== 'horizontal') {
+            if (this.orientation !== undefined)
+                this.orientation = 'horizontal';
+            else
+                this.layout = 'horizontal';
+        }
+    }
+    setStepItemsVerticalContentPlacement() {
+        const slotItems = this.getStepItems();
+        slotItems.forEach((element) => {
+            element.setVerticalContentPlacement(this.verticalContentPlacement);
+        });
+    }
+    setActiveStep(value) {
+        if (!this.isValidStepIndex(value))
+            return;
+        if (this.progressionType !== 'linear' && this.stepItems[value]?.hasAttribute('disabled'))
+            return;
+        this.activeStep = value;
+    }
+    isValidStepIndex(value) {
+        return Number.isInteger(value) && value >= 0 && value < this.stepItems.length;
+    }
+    configureStepItems() {
+        if (this.isTablist) {
+            this.configureTablistMode();
+            return;
+        }
+        if (this.mode === 'step') {
+            this.configureTimeLine();
+        }
+        if (this.progressionType === 'linear') {
+            this.configureLinearProgression();
+        }
+        else {
+            this.clearLinearProgression();
+        }
+    }
+    /**
+     * 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.
+     */
+    configureTablistMode() {
+        if (this.effectiveOrientation !== 'horizontal') {
+            if (this.orientation !== undefined)
+                this.orientation = 'horizontal';
+            else
+                this.layout = 'horizontal';
+        }
+        const slotItems = Array.from(this.el.getElementsByTagName('br-step-item'));
+        slotItems.forEach((item) => {
+            item.setItemRole('tab');
+            item.setContentType('no-content');
+            item.removeAttribute('label');
+        });
+    }
+    getStepItemPosition(stepItemsElements, index) {
+        if (index === 0) {
+            return 'first';
+        }
+        if (index > 0 && index < stepItemsElements.length - 1) {
+            return 'middle';
+        }
+        return 'last';
+    }
+    configureTimeLine() {
+        const slotItems = this.getStepItems();
+        slotItems.forEach((elements, index) => {
+            const elementPosition = this.getStepItemPosition(slotItems, index);
+            elements.setStepItemPositionStatus(elementPosition);
+            elements.handleShowTimeLine(true, this.effectiveOrientation);
+        });
+    }
+    configureLinearProgression() {
+        const slotItems = this.getStepItems();
+        slotItems.forEach((element, index) => {
+            const isDisabled = index > this.activeStep;
+            element.disabled = isDisabled;
+            if (isDisabled) {
+                element.setAttribute('disabled', 'true');
+            }
+            else {
+                element.removeAttribute('disabled');
+            }
+        });
+    }
+    clearLinearProgression() {
+        const slotItems = this.getStepItems();
+        slotItems.forEach((elements) => {
+            elements.removeAttribute('disabled');
+        });
+    }
+    getCssClassMap() {
+        return {
+            'br-step': true,
+            horizontal: this.effectiveOrientation === 'horizontal',
+            vertical: this.effectiveOrientation === 'vertical',
+        };
+    }
+    getAreaLabel() {
+        if (this.isTablist) {
+            return 'Slides';
+        }
+        let ariaLabel = ' Lista de Opções ';
+        if (this.mode !== 'controller') {
+            ariaLabel +=
+                this.ariaObjectContent[this.mode] +
+                    this.ariaObjectContent[this.contentType] +
+                    this.ariaObjectContent[this.progressionType] +
+                    this.ariaObjectContent[this.effectiveOrientation];
+        }
+        else {
+            ariaLabel += this.ariaObjectContent[this.mode];
+        }
+        return ariaLabel;
+    }
+    render() {
+        const isTablist = this.isTablist;
+        return (h(Host, { key: 'afbe0f698f9c2e98309cc4ebcd920eade167209f' }, this.stepItems.length > 0 &&
+            (isTablist ? (h("div", { part: "container", role: "tablist", "aria-orientation": this.effectiveOrientation, "aria-label": this.getAreaLabel(), class: this.getCssClassMap(), "data-label": this.labelPosition }, h("div", { class: "step-progress" }, h("slot", { onSlotchange: () => this.handleSlotChange() })))) : (h("div", { part: "container", role: "group", "aria-label": this.getAreaLabel(), class: this.getCssClassMap(), "data-label": this.labelPosition }, h("div", { class: "step-progress" }, h("slot", { onSlotchange: () => this.handleSlotChange() })))))));
+    }
+    handleSlotChange() {
+        this.getStepItemsElements();
+        this.setStepItemsLabelPosition();
+        void this.setStepItemsContentType();
+        this.setStepItemsDefaultContent();
+        this.setStepItemsMode(this.mode);
+        this.setStepItemsVerticalContentPlacement();
+        this.configureStepItems();
+    }
+    static get is() { return "br-step"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["step.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["step.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "layout": {
+                "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": [{
+                            "name": "deprecated",
+                            "text": "Use `orientation`."
+                        }],
+                    "text": "propriedade respons\u00E1vel por definir a orienta\u00E7\u00E3o do componente Step"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "layout",
+                "defaultValue": "'horizontal'"
+            },
+            "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": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Orienta\u00E7\u00E3o do componente. Quando informada, tem preced\u00EAncia sobre `layout`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation"
+            },
+            "initialStep": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `initialIndex`."
+                        }],
+                    "text": "\ndefine o passo que come\u00E7ar\u00E1 destacado"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "initial-step",
+                "defaultValue": "'0'"
+            },
+            "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"
+            },
+            "labelPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StepLabelPosition",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "StepLabelPosition": {
+                            "location": "import",
+                            "path": "./step.types",
+                            "id": "src/components/step/step.types.ts::StepLabelPosition",
+                            "referenceLocation": "StepLabelPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\nPropriedade que  define a posi\u00E7\u00E3o onde o texto de destaque,label, ficar\u00E1 localizado no stepItem"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "label-position",
+                "defaultValue": "'bottom'"
+            },
+            "contentType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StepContentType",
+                    "resolved": "\"br-icon\" | \"default\" | \"no-content\" | \"slotted\"",
+                    "references": {
+                        "StepContentType": {
+                            "location": "import",
+                            "path": "./step.types",
+                            "id": "src/components/step/step.types.ts::StepContentType",
+                            "referenceLocation": "StepContentType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\nPropriedade que define o tipo de conte\u00FAdo a ser exibido dentro do componente step  e stepItem"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "content-type",
+                "defaultValue": "'default'"
+            },
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StepMode",
+                    "resolved": "\"controller\" | \"step\"",
+                    "references": {
+                        "StepMode": {
+                            "location": "import",
+                            "path": "./step.types",
+                            "id": "src/components/step/step.types.ts::StepMode",
+                            "referenceLocation": "StepMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\nPropriedade que define o tipo de comportamento que o componente Step dever\u00E1 seguir"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "mode",
+                "defaultValue": "'step'"
+            },
+            "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": "\nPropriedade que define o tipo de progress\u00E3o de etapas que o step vai executar"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "progression-type",
+                "defaultValue": "'nonlinear'"
+            },
+            "verticalContentPlacement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StepVerticalContentPlacement",
+                    "resolved": "\"between\" | \"side\"",
+                    "references": {
+                        "StepVerticalContentPlacement": {
+                            "location": "import",
+                            "path": "./step.types",
+                            "id": "src/components/step/step.types.ts::StepVerticalContentPlacement",
+                            "referenceLocation": "StepVerticalContentPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define a posi\u00E7\u00E3o do conte\u00FAdo de cada etapa no layout vertical.\n- `between`: conte\u00FAdo abaixo do indicador/r\u00F3tulo, entre as etapas.\n- `side`: conte\u00FAdo em coluna lateral \u00E0 linha de indicadores."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "vertical-content-placement",
+                "defaultValue": "'between'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "activeStep": {},
+            "isTablist": {},
+            "stepItems": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "brStepChange",
+                "name": "brStepChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite um evento quando o step ativo muda.\nO evento carrega o \u00EDndice do novo step ativo (0-based)."
+                },
+                "complexType": {
+                    "original": "StepChangeDetail",
+                    "resolved": "{ activeStep: number; }",
+                    "references": {
+                        "StepChangeDetail": {
+                            "location": "import",
+                            "path": "./step.types",
+                            "id": "src/components/step/step.types.ts::StepChangeDetail",
+                            "referenceLocation": "StepChangeDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "ProceedToNextStep": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "\nM\u00E9todo disponibilizado via API do elemento que controla o componente Step, respons\u00E1vel por avan\u00E7ar para o pr\u00F3ximo passo e atualizar o valor do estado activeStep",
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `next`."
+                        }]
+                }
+            },
+            "next": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Avan\u00E7a para o pr\u00F3ximo passo.",
+                    "tags": []
+                }
+            },
+            "BackToPreviousStep": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "\nM\u00E9todo disponibilizado via API do elemento que controla o componente Step, respons\u00E1vel por retornar ao passo anterior e atualizar o valor do estado activeStep",
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `previous`."
+                        }]
+                }
+            },
+            "previous": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Retorna ao passo anterior.",
+                    "tags": []
+                }
+            },
+            "StepValidation": {
+                "complexType": {
+                    "signature": "(validationStatus: StepValidationStatus) => Promise<void>",
+                    "parameters": [{
+                            "name": "validationStatus",
+                            "type": "\"info\" | \"warning\" | \"danger\" | \"success\"",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "StepValidationStatus": {
+                            "location": "import",
+                            "path": "./step.types",
+                            "id": "src/components/step/step.types.ts::StepValidationStatus",
+                            "referenceLocation": "StepValidationStatus"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "\nM\u00E9todo disponibilizado via API do elemento que integra um componente externo ao componente Step, permitindo sinalizar valida\u00E7\u00F5es ou destacar a etapa com estado ativo.",
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `setCurrentValidation`."
+                        }]
+                }
+            },
+            "setCurrentValidation": {
+                "complexType": {
+                    "signature": "(validationStatus: StepValidationStatus) => Promise<void>",
+                    "parameters": [{
+                            "name": "validationStatus",
+                            "type": "\"info\" | \"warning\" | \"danger\" | \"success\"",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "StepValidationStatus": {
+                            "location": "import",
+                            "path": "./step.types",
+                            "id": "src/components/step/step.types.ts::StepValidationStatus",
+                            "referenceLocation": "StepValidationStatus"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Define o estado de valida\u00E7\u00E3o do passo ativo.",
+                    "tags": []
+                }
+            },
+            "GetActiveStep": {
+                "complexType": {
+                    "signature": "() => Promise<number>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<number>"
+                },
+                "docs": {
+                    "text": "\nM\u00E9todo disponibilizado via API do elemento que permite a um componente externo obter a etapa com o estado ativo do componente Step.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "activeStep",
+                "methodName": "activeStepChanged"
+            }, {
+                "propName": "initialStep",
+                "methodName": "initialStepChanged"
+            }, {
+                "propName": "labelPosition",
+                "methodName": "labelPositionChanged"
+            }, {
+                "propName": "contentType",
+                "methodName": "contentTypeChanged"
+            }, {
+                "propName": "mode",
+                "methodName": "modeChanged"
+            }, {
+                "propName": "layout",
+                "methodName": "layoutChanged"
+            }, {
+                "propName": "progressionType",
+                "methodName": "progressionTypeChanged"
+            }, {
+                "propName": "verticalContentPlacement",
+                "methodName": "verticalContentPlacementChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClick",
+                "target": undefined,
+                "capture": true,
+                "passive": false
+            }];
+    }
+}