@govbr-ds/webcomponents 2.0.0-next.4 → 2.0.0-next.41

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

@@ -0,0 +1,546 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+import { h, Host, } from "@stencil/core";
+/**
+ * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/step?tab=designer).
+ *
+ * @slot default - Slot que abriga o componente step-item. Este slot tem a particularidade de aceitar somente o componente step-item em sua composição. Caso outro elemento ou componente seja incluído dentro dele, o componente Step não será renderizado, e uma mensagem de erro será exibida no console.
+ */
+export class Step {
+    /**
+     * Referência ao elemento host do componente.
+     * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
+     */
+    el;
+    elementInternals;
+    /**
+     * propriedade responsável por definir a orientação do componente Step
+     */
+    layout = 'horizontal';
+    /**
+     *
+     * define o passo que começará destacado
+     */
+    initialStep = '0';
+    /**
+     *
+     * Propriedade que  define a posição onde o texto de destaque,label, ficará localizado no stepItem
+     */
+    labelPosition = 'bottom';
+    /**
+     *
+     * Propriedade que define o tipo de conteúdo a ser exibido dentro do componente step  e stepItem
+     */
+    contentType = 'default';
+    /**
+     *
+     * Propriedade que define o tipo de comportamento que o componente Step deverá seguir
+     */
+    mode = 'step';
+    /**
+     *
+     * Propriedade que define o tipo de progressão de etapas que o step vai executar
+     */
+    progressionType = 'nonlinear';
+    activeStep = 0;
+    stepItems = [];
+    /**
+     * Emite um evento após o componente ter sido carregado pela primeira vez.
+     * Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado.
+     * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.
+     */
+    brDidLoad;
+    componentDidLoad() {
+        this.setStepItemsLabelPosition();
+        this.setStepItemsContentType();
+        this.setStepItemsDefaultContent();
+        this.setStepItemsMode(this.mode);
+        if (this.mode === 'step') {
+            this.configureTimeLine();
+        }
+        if (this.progressionType === 'linear') {
+            this.configureLinearProgression();
+        }
+        if (this.activeStep <= this.stepItems.length - 1) {
+            this.stepItems[this.activeStep].setAttribute('active', 'true');
+        }
+        else {
+            console.warn('br-step initial-step attribute has value more than number of step-items provided');
+        }
+        this.brDidLoad.emit();
+    }
+    /**
+     * Emite um evento antes do componente ser renderizado pela primeira vez, permitindo a preparação de dados ou inicializações necessárias.
+     * Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado.
+     * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdwillLoad) para mais detalhes.
+     */
+    brWilLoad;
+    componentWillLoad() {
+        this.activeStep = Number(this.initialStep);
+        this.getStepItemsElements();
+        this.brWilLoad.emit();
+    }
+    /**
+     * Emite um evento para indicar se o componente deve ser atualizado ou não.
+     * Este evento é chamado antes de qualquer atualização do componente para decidir se a atualização deve prosseguir.
+     * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentshouldupdate) para mais detalhes.
+     */
+    brShouldUpdate;
+    componentShouldUpdate(newValue, oldValue, stateName) {
+        if (stateName == 'activeStep' && oldValue != newValue) {
+            const outOfRange = oldValue > this.stepItems.length - 1;
+            this.stepItems[this.activeStep].setAttribute('active', 'true');
+            if (!outOfRange) {
+                this.stepItems[oldValue].removeAttribute('active');
+            }
+            this.brShouldUpdate.emit();
+        }
+    }
+    /**
+     * 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;
+        if (targetElement.getAttribute('slot') !== null) {
+            const slotItem = this.stepItems.findIndex((element) => element.lastElementChild === targetElement);
+            this.activeStep = slotItem;
+            return;
+        }
+        const item = this.stepItems.findIndex((element) => element === targetElement);
+        this.activeStep = item;
+    }
+    getStepItemsElements() {
+        const slotItems = Array.from(this.el.children);
+        const firstChildrenContentTypeValue = slotItems[0].getAttribute('content-type');
+        const childrenHaveConsistentContentType = slotItems.every((item) => item.getAttribute('content-type') === firstChildrenContentTypeValue);
+        const childrenHaveConsistentTagName = slotItems.every((item) => item.tagName.toLowerCase() === 'br-step-item');
+        if (childrenHaveConsistentContentType && childrenHaveConsistentTagName) {
+            this.stepItems = slotItems;
+            return;
+        }
+        if (!childrenHaveConsistentTagName) {
+            throw new Error('br-step component must have as child elements only br-step-items components');
+        }
+        if (!childrenHaveConsistentContentType) {
+            throw new Error('br-step must have all child elements with same content type attribute value');
+        }
+    }
+    setStepItemsLabelPosition() {
+        const slotItems = Array.from(this.el.getElementsByTagName('br-step-item'));
+        slotItems.forEach((elements) => {
+            if (this.labelPosition !== undefined) {
+                elements.setLabelPosition(this.labelPosition);
+            }
+        });
+    }
+    setStepItemsDefaultContent() {
+        const slotItems = Array.from(this.el.getElementsByTagName('br-step-item'));
+        slotItems.forEach((elements, index) => {
+            const indicatorContent = index + 1;
+            elements.setContent(indicatorContent.toString());
+        });
+    }
+    async setStepItemsContentType() {
+        const slotItems = Array.from(this.el.getElementsByTagName('br-step-item'));
+        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 = Array.from(this.el.getElementsByTagName('br-step-item'));
+        slotItems.forEach((elements) => {
+            if (mode === 'controller') {
+                elements.setMode(this.mode);
+                elements.setContentType('no-content');
+                if (this.layout !== 'horizontal') {
+                    this.layout = 'horizontal';
+                }
+                elements.handleShowTimeLine(false, this.layout);
+                elements.removeAttribute('label');
+            }
+        });
+    }
+    getStepItemPosition(stepItemsElements, index) {
+        if (index === 0) {
+            return 'first';
+        }
+        if (index > 0 && index < stepItemsElements.length - 1) {
+            return 'middle';
+        }
+        return 'last';
+    }
+    configureTimeLine() {
+        const slotItems = Array.from(this.el.getElementsByTagName('br-step-item'));
+        slotItems.forEach((elements, index) => {
+            const elementPosition = this.getStepItemPosition(slotItems, index);
+            elements.setStepItemPositionStatus(elementPosition);
+            elements.handleShowTimeLine(true, this.layout);
+        });
+    }
+    configureLinearProgression() {
+        const slotItems = Array.from(this.el.getElementsByTagName('br-step-item'));
+        slotItems.forEach((elements, index) => {
+            if (index > 0) {
+                elements.setAttribute('disabled', 'true');
+            }
+        });
+    }
+    /**
+     *
+     * 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
+     */
+    async ProceedToNextStep() {
+        if (this.activeStep + 1 < this.stepItems.length) {
+            this.activeStep = this.activeStep + 1;
+            if (this.progressionType === 'linear') {
+                this.stepItems[this.activeStep].removeAttribute('disabled');
+            }
+        }
+    }
+    /**
+     *
+     * 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
+     */
+    async BackToPreviousStep() {
+        if (this.activeStep - 1 >= 0) {
+            this.activeStep = this.activeStep - 1;
+        }
+    }
+    /**
+     *
+     * 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.
+     */
+    async StepValidation(validationStatus) {
+        this.stepItems[this.activeStep].setAttribute('highlight', validationStatus);
+    }
+    /**
+     *
+     * Método disponibilizado via API do elemento que permite a um componente externo obter a etapa com o estado ativo do componente Step.
+     */
+    async GetActiveStep() {
+        return this.activeStep;
+    }
+    getCssClassMap() {
+        return {
+            'br-step': true,
+            'step-container': true,
+            horizontal: this.layout === 'horizontal',
+            vertical: this.layout === 'vertical',
+            'label-left': this.labelPosition === 'left',
+            'label-right': this.labelPosition === 'right',
+        };
+    }
+    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 ',
+    };
+    getAreaLabel() {
+        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.layout];
+        }
+        else {
+            ariaLabel += this.AriaObjectContent[this.mode];
+        }
+        return ariaLabel;
+    }
+    render() {
+        return (h(Host, { key: 'cbaeabac0c6bf3032362e8bd0f8f4fd3ee90fbe1' }, this.stepItems.length > 0 && (h("div", { key: '972b6a81364adcae6526a24ab45e4f0a2218a9ff', role: "listbox", tabIndex: 0, "aria-orientation": this.layout, "aria-label": this.getAreaLabel(), class: this.getCssClassMap() }, h("slot", { key: '9ea6ba364882b94c97d18a66aab552aeb097d05d' })))));
+    }
+    static get is() { return "br-step"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["step.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["step.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "propriedade respons\u00E1vel por definir a orienta\u00E7\u00E3o do componente Step"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "layout",
+                "reflect": true,
+                "defaultValue": "'horizontal'"
+            },
+            "initialStep": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\ndefine o passo que come\u00E7ar\u00E1 destacado"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "initial-step",
+                "reflect": true,
+                "defaultValue": "'0'"
+            },
+            "labelPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top' | 'right' | 'bottom' | 'left'",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {}
+                },
+                "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,
+                "attribute": "label-position",
+                "reflect": true,
+                "defaultValue": "'bottom'"
+            },
+            "contentType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'br-icon' | 'no-content' | 'slotted'",
+                    "resolved": "\"br-icon\" | \"default\" | \"no-content\" | \"slotted\"",
+                    "references": {}
+                },
+                "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,
+                "attribute": "content-type",
+                "reflect": true,
+                "defaultValue": "'default'"
+            },
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'controller' | 'step'",
+                    "resolved": "\"controller\" | \"step\"",
+                    "references": {}
+                },
+                "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,
+                "attribute": "mode",
+                "reflect": true,
+                "defaultValue": "'step'"
+            },
+            "progressionType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'linear' | 'nonlinear'",
+                    "resolved": "\"linear\" | \"nonlinear\"",
+                    "references": {}
+                },
+                "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,
+                "attribute": "progression-type",
+                "reflect": true,
+                "defaultValue": "'nonlinear'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "activeStep": {},
+            "stepItems": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "brDidLoad",
+                "name": "brDidLoad",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite um evento ap\u00F3s o componente ter sido carregado pela primeira vez.\nUtilize este evento para realizar a\u00E7\u00F5es que devem ocorrer depois que o componente foi totalmente carregado.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brWilLoad",
+                "name": "brWilLoad",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite um evento antes do componente ser renderizado pela primeira vez, permitindo a prepara\u00E7\u00E3o de dados ou inicializa\u00E7\u00F5es necess\u00E1rias.\nUtilize este evento para realizar a\u00E7\u00F5es que devem ocorrer depois que o componente foi totalmente carregado.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdwillLoad) para mais detalhes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brShouldUpdate",
+                "name": "brShouldUpdate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite um evento para indicar se o componente deve ser atualizado ou n\u00E3o.\nEste evento \u00E9 chamado antes de qualquer atualiza\u00E7\u00E3o do componente para decidir se a atualiza\u00E7\u00E3o deve prosseguir.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentshouldupdate) para mais detalhes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    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": []
+                }
+            },
+            "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": []
+                }
+            },
+            "StepValidation": {
+                "complexType": {
+                    "signature": "(validationStatus: \"success\" | \"info\" | \"danger\" | \"warning\") => Promise<void>",
+                    "parameters": [{
+                            "name": "validationStatus",
+                            "type": "\"success\" | \"info\" | \"warning\" | \"danger\"",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "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": []
+                }
+            },
+            "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 listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClick",
+                "target": undefined,
+                "capture": true,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "elementInternals"; }
+}
+//# sourceMappingURL=step.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"step.js","sourceRoot":"","sources":["../../../../../../packages/webcomponents/src/components/step/step.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core'\n\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/step?tab=designer).\n *\n * @slot default - Slot que abriga o componente step-item. Este slot tem a particularidade de aceitar somente o componente step-item em sua composição. Caso outro elemento ou componente seja incluído dentro dele, o componente Step não será renderizado, e uma mensagem de erro será exibida no console.\n */\n@Component({\n  tag: 'br-step',\n  styleUrl: 'step.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Step {\n  /**\n   * Referência ao elemento host do componente.\n   * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.\n   */\n  @Element() el: HTMLBrStepElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * propriedade responsável por definir a orientação do componente Step\n   */\n  @Prop({ reflect: true }) layout: 'horizontal' | 'vertical' = 'horizontal'\n  /**\n   *\n   * define o passo que começará destacado\n   */\n  @Prop({ reflect: true }) initialStep: string = '0'\n  /**\n   *\n   * Propriedade que  define a posição onde o texto de destaque,label, ficará localizado no stepItem\n   */\n  @Prop({ reflect: true }) labelPosition?: 'top' | 'right' | 'bottom' | 'left' = 'bottom'\n  /**\n   *\n   * Propriedade que define o tipo de conteúdo a ser exibido dentro do componente step  e stepItem\n   */\n  @Prop({ reflect: true }) contentType: 'default' | 'br-icon' | 'no-content' | 'slotted' = 'default'\n  /**\n   *\n   * Propriedade que define o tipo de comportamento que o componente Step deverá seguir\n   */\n  @Prop({ reflect: true }) mode: 'controller' | 'step' = 'step'\n\n  /**\n   *\n   * Propriedade que define o tipo de progressão de etapas que o step vai executar\n   */\n  @Prop({ reflect: true }) progressionType: 'linear' | 'nonlinear' = 'nonlinear'\n\n  @State() activeStep: number = 0\n  @State() stepItems: Element[] = []\n  /**\n   * Emite um evento após o componente ter sido carregado pela primeira vez.\n   * Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.\n   */\n  @Event() brDidLoad: EventEmitter<void>\n  componentDidLoad() {\n    this.setStepItemsLabelPosition()\n    this.setStepItemsContentType()\n    this.setStepItemsDefaultContent()\n    this.setStepItemsMode(this.mode)\n    if (this.mode === 'step') {\n      this.configureTimeLine()\n    }\n    if (this.progressionType === 'linear') {\n      this.configureLinearProgression()\n    }\n    if (this.activeStep <= this.stepItems.length - 1) {\n      this.stepItems[this.activeStep].setAttribute('active', 'true')\n    } else {\n      console.warn('br-step initial-step attribute has value more than number of step-items provided')\n    }\n    this.brDidLoad.emit()\n  }\n\n  /**\n   * Emite um evento antes do componente ser renderizado pela primeira vez, permitindo a preparação de dados ou inicializações necessárias.\n   * Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdwillLoad) para mais detalhes.\n   */\n  @Event() brWilLoad: EventEmitter<void>\n  componentWillLoad() {\n    this.activeStep = Number(this.initialStep)\n    this.getStepItemsElements()\n    this.brWilLoad.emit()\n  }\n\n  /**\n   * Emite um evento para indicar se o componente deve ser atualizado ou não.\n   * Este evento é chamado antes de qualquer atualização do componente para decidir se a atualização deve prosseguir.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentshouldupdate) para mais detalhes.\n   */\n  @Event() brShouldUpdate: EventEmitter<void>\n  componentShouldUpdate(newValue, oldValue, stateName) {\n    if (stateName == 'activeStep' && oldValue != newValue) {\n      const outOfRange = oldValue > this.stepItems.length - 1\n      this.stepItems[this.activeStep].setAttribute('active', 'true')\n      if (!outOfRange) {\n        this.stepItems[oldValue].removeAttribute('active')\n      }\n      this.brShouldUpdate.emit()\n    }\n  }\n\n  /**\n   * listener para ouvir o evento de click no componente step\n   * Através desse listener o componente define qual será o proximo passo do step que terá o estado ativo\n   */\n\n  @Listen('click', { capture: true })\n  handleClick(event) {\n    const targetElement = event.target as Element\n    if (targetElement.getAttribute('slot') !== null) {\n      const slotItem = this.stepItems.findIndex((element) => element.lastElementChild === targetElement)\n      this.activeStep = slotItem\n      return\n    }\n    const item = this.stepItems.findIndex((element) => element === targetElement)\n    this.activeStep = item\n  }\n\n  private getStepItemsElements() {\n    const slotItems = Array.from(this.el.children)\n    const firstChildrenContentTypeValue = slotItems[0].getAttribute('content-type')\n    const childrenHaveConsistentContentType = slotItems.every(\n      (item) => item.getAttribute('content-type') === firstChildrenContentTypeValue\n    )\n    const childrenHaveConsistentTagName = slotItems.every((item) => item.tagName.toLowerCase() === 'br-step-item')\n    if (childrenHaveConsistentContentType && childrenHaveConsistentTagName) {\n      this.stepItems = slotItems\n      return\n    }\n    if (!childrenHaveConsistentTagName) {\n      throw new Error('br-step component must have as child elements only br-step-items components')\n    }\n    if (!childrenHaveConsistentContentType) {\n      throw new Error('br-step must have all child elements with same content type attribute value')\n    }\n  }\n\n  private setStepItemsLabelPosition() {\n    const slotItems = Array.from(this.el.getElementsByTagName('br-step-item'))\n    slotItems.forEach((elements) => {\n      if (this.labelPosition !== undefined) {\n        elements.setLabelPosition(this.labelPosition)\n      }\n    })\n  }\n\n  private setStepItemsDefaultContent() {\n    const slotItems = Array.from(this.el.getElementsByTagName('br-step-item'))\n    slotItems.forEach((elements, index) => {\n      const indicatorContent = index + 1\n      elements.setContent(indicatorContent.toString())\n    })\n  }\n\n  private async setStepItemsContentType() {\n    const slotItems = Array.from(this.el.getElementsByTagName('br-step-item'))\n    await Promise.all(slotItems.map((element) => element.setContentType(this.contentType)))\n    slotItems.forEach((elements, index) => {\n      elements.setAttribute('aria-posinset', `${index + 1}`)\n      elements.setAttribute('aria-setsize', `${slotItems.length}`)\n    })\n  }\n\n  private setStepItemsMode(mode: 'controller' | 'step') {\n    const slotItems = Array.from(this.el.getElementsByTagName('br-step-item'))\n    slotItems.forEach((elements) => {\n      if (mode === 'controller') {\n        elements.setMode(this.mode)\n        elements.setContentType('no-content')\n        if (this.layout !== 'horizontal') {\n          this.layout = 'horizontal'\n        }\n        elements.handleShowTimeLine(false, this.layout)\n        elements.removeAttribute('label')\n      }\n    })\n  }\n\n  private getStepItemPosition(stepItemsElements: HTMLBrStepItemElement[], index) {\n    if (index === 0) {\n      return 'first'\n    }\n    if (index > 0 && index < stepItemsElements.length - 1) {\n      return 'middle'\n    }\n    return 'last'\n  }\n\n  private configureTimeLine() {\n    const slotItems = Array.from(this.el.getElementsByTagName('br-step-item'))\n    slotItems.forEach((elements, index) => {\n      const elementPosition = this.getStepItemPosition(slotItems, index)\n      elements.setStepItemPositionStatus(elementPosition)\n      elements.handleShowTimeLine(true, this.layout)\n    })\n  }\n\n  private configureLinearProgression() {\n    const slotItems = Array.from(this.el.getElementsByTagName('br-step-item'))\n    slotItems.forEach((elements, index) => {\n      if (index > 0) {\n        elements.setAttribute('disabled', 'true')\n      }\n    })\n  }\n\n  /**\n   *\n   * 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\n   */\n  @Method()\n  async ProceedToNextStep() {\n    if (this.activeStep + 1 < this.stepItems.length) {\n      this.activeStep = this.activeStep + 1\n      if (this.progressionType === 'linear') {\n        this.stepItems[this.activeStep].removeAttribute('disabled')\n      }\n    }\n  }\n\n  /**\n   *\n   * 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\n   */\n  @Method()\n  async BackToPreviousStep() {\n    if (this.activeStep - 1 >= 0) {\n      this.activeStep = this.activeStep - 1\n    }\n  }\n\n  /**\n   *\n   * 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.\n   */\n  @Method()\n  async StepValidation(validationStatus: 'success' | 'info' | 'danger' | 'warning') {\n    this.stepItems[this.activeStep].setAttribute('highlight', validationStatus)\n  }\n\n  /**\n   *\n   * Método disponibilizado via API do elemento que permite a um componente externo obter a etapa com o estado ativo do componente Step.\n   */\n  @Method()\n  async GetActiveStep() {\n    return this.activeStep\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-step': true,\n      'step-container': true,\n      horizontal: this.layout === 'horizontal',\n      vertical: this.layout === 'vertical',\n      'label-left': this.labelPosition === 'left',\n      'label-right': this.labelPosition === 'right',\n    }\n  }\n\n  private AriaObjectContent = {\n    step: 'Modo etapas ',\n    controller: 'Modo controle ',\n    default: 'passos com conteúdo numérico ',\n    'br-icon': 'passos com conteúdo que possuem icones ',\n    slotted: 'passos com conteúdo customizados ',\n    'no-content': 'passos que apresentam conteúdo por meio de tooltip ',\n    linear: 'progressão linear ',\n    nonlinear: 'progressão não linear ',\n    vertical: 'com layout vertical ',\n    horizontal: 'com layout horizontal ',\n  }\n\n  private getAreaLabel(): string {\n    let ariaLabel = ' Lista de Opções '\n    if (this.mode !== 'controller') {\n      ariaLabel +=\n        this.AriaObjectContent[this.mode] +\n        this.AriaObjectContent[this.contentType] +\n        this.AriaObjectContent[this.progressionType] +\n        this.AriaObjectContent[this.layout]\n    } else {\n      ariaLabel += this.AriaObjectContent[this.mode]\n    }\n    return ariaLabel\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.stepItems.length > 0 && (\n          <div\n            role=\"listbox\"\n            tabIndex={0}\n            aria-orientation={this.layout}\n            aria-label={this.getAreaLabel()}\n            class={this.getCssClassMap()}\n          >\n            <slot></slot>\n          </div>\n        )}\n      </Host>\n    )\n  }\n}\n"]}