@govbr-ds/webcomponents 2.0.0-next.34 → 2.0.0-next.36

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

@@ -0,0 +1,551 @@
+/*!
+ * 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 nomeado label-area: insere o conteúdo customizado dentro do botão que compõe o componente.
+ */
+export class StepItem {
+    /**
+     * Referência ao elemento host do componente.
+     * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
+     */
+    el;
+    elementInternals;
+    /**
+     *  Propriedade que define o conteúdo do texto auxiliar de realce do item de Step.
+     */
+    label = '';
+    /**
+     *  Propriedade que define o tipo de ícone de destaque exibido pelo item Step, com quatro opções disponíveis: "success", "info", "danger" e "warning".
+     */
+    highlight;
+    /**
+     *  Propriedade que define se o item Step está com estado ativo.
+     */
+    active = false;
+    /**
+     *  Propriedade que define se o item Step está com estado desativado..
+     */
+    disabled = false;
+    /**
+     *  Propriedade Define o nome do ícone do componente BRIcon que será exibido como conteúdo do step item, propriedade funciona apenas quando o state contentType assume o valor br-icon.
+     */
+    brIconName = '';
+    /**
+     *  Propriedade Define o nome do ícone o texto de acessibilidade apresentando quando o tipo de conteúdo for o br-icon
+     */
+    brIconAria = '';
+    showTimeLine = false;
+    stepItemPositionStatus = 'first';
+    stepLayout = 'horizontal';
+    labelPosition = 'bottom';
+    contentType = 'default';
+    mode = 'step';
+    content = '';
+    ariaLabelContent = '';
+    /**
+     * Emite um evento após o componente ter sido carregado pela primeira vez.
+     * Utilize este evento para realizar ações que devem ocorrer antes que o componente seja renderizado ou atualizado.
+     * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.
+     */
+    brWillRender;
+    componentWillRender() {
+        let accessibilityContent = '';
+        let activeItem = '';
+        if (this.contentType === 'slotted') {
+            const slotedContent = this.el.lastElementChild;
+            accessibilityContent =
+                this.label !== ''
+                    ? `passo ${this.content} ${slotedContent.textContent} ${this.label} ${this.highLightAriaLabel[this.highlight]}`
+                    : `passo ${this.content} ${slotedContent.textContent} ${this.highLightAriaLabel[this.highlight]}`;
+            this.ariaLabelContent = accessibilityContent;
+            return;
+        }
+        if (this.contentType === 'br-icon') {
+            accessibilityContent =
+                `passo  ${this.content} ` + this.brIconAria + this.label + this.highLightAriaLabel[this.highlight];
+            activeItem = this.active === true ? accessibilityContent + ' selecionado' : accessibilityContent;
+            this.ariaLabelContent = activeItem;
+            return;
+        }
+        else {
+            accessibilityContent =
+                this.label !== ''
+                    ? `passo ${this.content} ${this.label} ${this.highLightAriaLabel[this.highlight]}`
+                    : `passo ${this.content} ${this.highLightAriaLabel[this.highlight]}`;
+            activeItem = this.active === true ? accessibilityContent + ' selecionado' : accessibilityContent;
+            this.ariaLabelContent = activeItem;
+        }
+    }
+    /**
+     * Emite um evento após o componente ter sido carregado pela primeira vez.
+     * Utilize este evento para realizar ações que devem ocorrer antes que o componente seja renderizado ou atualizado.
+     * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.
+     */
+    brDidRender;
+    componentDidRender() {
+        const button = this.el.shadowRoot.getElementById('indicator-area').lastElementChild.shadowRoot;
+        if (button !== null) {
+            button.lastElementChild.setAttribute('role', 'option');
+            button.lastElementChild.setAttribute('aria-selected', `${this.active}`);
+            button.lastElementChild.setAttribute('aria-label', this.ariaLabelContent);
+        }
+    }
+    /**
+     * Watch que observa o valor da propriedade active, e ao alterar seu valor este método altera o valor do campo de acessibilidade aria-selected
+     */
+    watchItemIsActive(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            const button = this.el.shadowRoot.getElementById('indicator-area').lastElementChild.shadowRoot;
+            if (button !== null) {
+                button.lastElementChild.setAttribute('aria-selected', `${this.active}`);
+            }
+        }
+    }
+    /**
+     *
+     * Método disponibilizado via api do elemento que indica a posição do step item, ele serve para setar o state stepItemPositionStatus do componente
+     */
+    async setStepItemPositionStatus(value) {
+        this.stepItemPositionStatus = value;
+    }
+    /**
+     * Método que define a orientação do stepItem e controla a exibição da linha do tempo após o componente.
+     */
+    async handleShowTimeLine(value, layout) {
+        this.showTimeLine = value;
+        this.stepLayout = layout;
+    }
+    /**
+     *
+     * Método disponibilizado via api do elemento que atribui o valor ao estado que define onde o label, o texto de destaque, irá ficar localizado
+     */
+    async setLabelPosition(value) {
+        this.labelPosition = value;
+    }
+    /**
+     *
+     * Método disponibilizado via api do elemento que atribui o valor que irá definir o tipo de conteúdo apresentado dentro do componente stepItem
+     */
+    async setContentType(value) {
+        this.contentType = value;
+    }
+    /**
+     *
+     * Método disponibilizado via api do elemento que atribui o valor que irá definir o modo como o componente irá se comportar e exibir seu estilo.
+     */
+    async setMode(value) {
+        this.mode = value;
+    }
+    /**
+     *
+     * Método disponibilizado via api do elemento que atribui o valor que irá ser exibido dentro do componente stepItem
+     */
+    async setContent(value) {
+        this.content = value;
+    }
+    getStepContainerClassMap() {
+        return {
+            'step-item-container-horizontal': this.stepLayout === 'horizontal',
+            'step-item-container-vertical': this.stepLayout === 'vertical',
+            last: this.stepItemPositionStatus == 'last',
+            'label-top': this.labelPosition === 'top',
+            'label-left': this.labelPosition === 'left',
+            'label-right': this.labelPosition === 'right',
+            'label-bottom': this.labelPosition === 'bottom' && this.label !== '',
+            controller: this.mode === 'controller',
+            'disabled-div': true,
+        };
+    }
+    getStepItemContentClassMap() {
+        return {
+            'step-item-content': true,
+            'label-bottom': this.labelPosition === 'bottom',
+            'label-top': this.labelPosition === 'top',
+            'label-left': this.labelPosition === 'left',
+            'label-right': this.labelPosition === 'right',
+            timeline: this.showTimeLine === true,
+            middle: this.stepItemPositionStatus === 'middle',
+            first: this.stepItemPositionStatus === 'first',
+            controller: this.mode === 'controller',
+        };
+    }
+    getStepItemIndicatorAreaClassMap() {
+        return {
+            'step-item-indicator-area': true,
+        };
+    }
+    getStepItemLabelAreaClassMap() {
+        return {
+            'step-item-label-area': true,
+            vertical: this.stepLayout === 'vertical',
+            horizontal: this.stepLayout === 'horizontal',
+            'label-bottom': this.labelPosition === 'bottom',
+            'label-top': this.labelPosition === 'top',
+            'label-left': this.labelPosition === 'left',
+            'label-right': this.labelPosition === 'right',
+            'no-label': this.label === '',
+        };
+    }
+    getHighlightClass() {
+        return {
+            icon: true,
+            success: this.highlight === 'success',
+            info: this.highlight === 'info',
+            warning: this.highlight === 'warning',
+            danger: this.highlight === 'danger',
+            'no-content': this.contentType === 'no-content',
+        };
+    }
+    getStepItemIndicatorClass() {
+        return {
+            'step-button': true,
+            controller: this.mode === 'controller',
+            'disabled-host': this.disabled,
+        };
+    }
+    highLightAriaLabel = {
+        success: 'passo completo',
+        info: 'passo com item informativo',
+        warning: 'passo com alerta',
+        danger: 'passo com erro',
+        undefined: '',
+    };
+    IconsName = {
+        success: 'fa-check',
+        info: 'fa-info-circle',
+        warning: 'fa-exclamation-triangle',
+        danger: 'fa-times',
+    };
+    render() {
+        return (h(Host, { key: 'e9e2ccb453905a672186eadc980e9e3a5b80848b' }, h("div", { key: '072bdc10a574004b0e9f9053eee501e95addd817', id: "item-container", class: this.getStepContainerClassMap() }, h("div", { key: '601e8a86f1636635a51aa487293b2e4d313ef955', id: "item-content", class: this.getStepItemContentClassMap() }, h("div", { key: '0638eba0973ca1e437b1692f99320d7834262d2d', id: "indicator-area", "data-active": this.active, class: this.getStepItemIndicatorAreaClassMap() }, this.mode === 'step' && this.highlight && (h("div", { key: '8ecbdad942a4708c39d5e7a5fa78aeb1b7d2ca90', class: this.getHighlightClass() }, h("br-icon", { key: '0ede2e1bae06cb0599106097a9dd3fa1c65e9ca7', "icon-name": this.IconsName[this.highlight], class: `${this.highlight === 'warning' && 'warning-color'}` }))), this.mode === 'step' && (h("br-button", { key: '9bc929044bcb4454d9cc68ac87680b98f87b3f0c', shape: "circle", emphasis: "secondary", isActive: this.active, class: this.getStepItemIndicatorClass() }, this.contentType === 'no-content' && '', this.contentType === 'default' && this.content, this.contentType === 'br-icon' && (h("div", { key: 'd5574edf0e82ceab15b3c7c83e22c1231396bbf7' }, h("br-icon", { key: '848f20116ace873018fe5fa70183b4b9cc76eacd', "icon-name": this.brIconName, class: 'content-type-br-icon' }))), this.contentType === 'slotted' && h("slot", { key: '02f79368a2c1ff174871cd89aa1371f4d51b09c4', name: 'content-area' }))), this.mode === 'controller' && h("button", { key: '22ff1bcc09fad7a66b2ef4bedac8f7827749cd60', "data-active": this.active, class: 'mode-controller' })), h("div", { key: '4fb95e0cc976bc028dd6003dd3b066a359996c3f', id: "label-area", class: this.getStepItemLabelAreaClassMap() }, h("span", { key: 'cbe1fa48fe9e28ee3daffea476ca783f4d4cb222' }, " ", this.label, " "))))));
+    }
+    static get is() { return "br-step-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["step-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["step-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Propriedade que define o conte\u00FAdo do texto auxiliar de realce do item de Step."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "highlight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'success' | 'info' | 'danger' | 'warning'",
+                    "resolved": "\"danger\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Propriedade que define o tipo de \u00EDcone de destaque exibido pelo item Step, com quatro op\u00E7\u00F5es dispon\u00EDveis: \"success\", \"info\", \"danger\" e \"warning\"."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "highlight",
+                "reflect": true
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Propriedade que define se o item Step est\u00E1 com estado ativo."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "active",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Propriedade que define se o item Step est\u00E1 com estado desativado.."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "brIconName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Propriedade Define o nome do \u00EDcone do componente BRIcon que ser\u00E1 exibido como conte\u00FAdo do step item, propriedade funciona apenas quando o state contentType assume o valor br-icon."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "br-icon-name",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "brIconAria": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Propriedade Define o nome do \u00EDcone o texto de acessibilidade apresentando quando o tipo de conte\u00FAdo for o br-icon"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "br-icon-aria",
+                "reflect": true,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "showTimeLine": {},
+            "stepItemPositionStatus": {},
+            "stepLayout": {},
+            "labelPosition": {},
+            "contentType": {},
+            "mode": {},
+            "content": {},
+            "ariaLabelContent": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "brWillRender",
+                "name": "brWillRender",
+                "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 antes que o componente seja renderizado ou atualizado.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brDidRender",
+                "name": "brDidRender",
+                "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 antes que o componente seja renderizado ou atualizado.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setStepItemPositionStatus": {
+                "complexType": {
+                    "signature": "(value: \"first\" | \"middle\" | \"last\") => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "\"first\" | \"middle\" | \"last\"",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "\nM\u00E9todo disponibilizado via api do elemento que indica a posi\u00E7\u00E3o do step item, ele serve para setar o state stepItemPositionStatus do componente",
+                    "tags": []
+                }
+            },
+            "handleShowTimeLine": {
+                "complexType": {
+                    "signature": "(value: boolean, layout: any) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "boolean",
+                            "docs": ""
+                        }, {
+                            "name": "layout",
+                            "type": "any",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "M\u00E9todo que define a orienta\u00E7\u00E3o do stepItem e controla a exibi\u00E7\u00E3o da linha do tempo ap\u00F3s o componente.",
+                    "tags": []
+                }
+            },
+            "setLabelPosition": {
+                "complexType": {
+                    "signature": "(value: \"top\" | \"right\" | \"bottom\" | \"left\") => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "\"left\" | \"top\" | \"right\" | \"bottom\"",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "\nM\u00E9todo disponibilizado via api do elemento que atribui o valor ao estado que define onde o label, o texto de destaque, ir\u00E1 ficar localizado",
+                    "tags": []
+                }
+            },
+            "setContentType": {
+                "complexType": {
+                    "signature": "(value: \"default\" | \"br-icon\" | \"no-content\" | \"slotted\") => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "\"default\" | \"br-icon\" | \"no-content\" | \"slotted\"",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "\nM\u00E9todo disponibilizado via api do elemento que atribui o valor que ir\u00E1 definir o tipo de conte\u00FAdo apresentado dentro do componente stepItem",
+                    "tags": []
+                }
+            },
+            "setMode": {
+                "complexType": {
+                    "signature": "(value: \"controller\" | \"step\") => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "\"step\" | \"controller\"",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "\nM\u00E9todo disponibilizado via api do elemento que atribui o valor que ir\u00E1 definir o modo como o componente ir\u00E1 se comportar e exibir seu estilo.",
+                    "tags": []
+                }
+            },
+            "setContent": {
+                "complexType": {
+                    "signature": "(value: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "\nM\u00E9todo disponibilizado via api do elemento que atribui o valor que ir\u00E1 ser exibido dentro do componente stepItem",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "active",
+                "methodName": "watchItemIsActive"
+            }];
+    }
+    static get attachInternalsMemberName() { return "elementInternals"; }
+}
+//# sourceMappingURL=step-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"step-item.js","sourceRoot":"","sources":["../../../../../../packages/webcomponents/src/components/step-item/step-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\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 nomeado label-area: insere o conteúdo customizado dentro do botão que compõe o componente.\n */\n@Component({\n  tag: 'br-step-item',\n  styleUrl: 'step-item.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class StepItem {\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: HTMLBrStepItemElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   *  Propriedade que define o conteúdo do texto auxiliar de realce do item de Step.\n   */\n  @Prop({ reflect: true }) label: string = ''\n\n  /**\n   *  Propriedade que define o tipo de ícone de destaque exibido pelo item Step, com quatro opções disponíveis: \"success\", \"info\", \"danger\" e \"warning\".\n   */\n  @Prop({ reflect: true }) highlight?: 'success' | 'info' | 'danger' | 'warning'\n\n  /**\n   *  Propriedade que define se o item Step está com estado ativo.\n   */\n  @Prop({ reflect: true }) active: boolean = false\n\n  /**\n   *  Propriedade que define se o item Step está com estado desativado..\n   */\n  @Prop({ reflect: true }) disabled: boolean = false\n\n  /**\n   *  Propriedade Define o nome do ícone do componente BRIcon que será exibido como conteúdo do step item, propriedade funciona apenas quando o state contentType assume o valor br-icon.\n   */\n  @Prop({ reflect: true }) brIconName?: string = ''\n  /**\n   *  Propriedade Define o nome do ícone o texto de acessibilidade apresentando quando o tipo de conteúdo for o br-icon\n   */\n\n  @Prop({ reflect: true }) brIconAria: string = ''\n\n  @State() showTimeLine: boolean = false\n  @State() stepItemPositionStatus: 'first' | 'middle' | 'last' = 'first'\n  @State() stepLayout: 'horizontal' | 'vertical' = 'horizontal'\n  @State() labelPosition: 'top' | 'right' | 'bottom' | 'left' = 'bottom'\n  @State() contentType: 'default' | 'br-icon' | 'no-content' | 'slotted' = 'default'\n  @State() mode: 'controller' | 'step' = 'step'\n  @State() content: string = ''\n  @State() ariaLabelContent: string = ''\n\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 antes que o componente seja renderizado ou atualizado.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.\n   */\n  @Event() brWillRender: EventEmitter<void>\n  componentWillRender() {\n    let accessibilityContent = ''\n    let activeItem = ''\n    if (this.contentType === 'slotted') {\n      const slotedContent = this.el.lastElementChild\n      accessibilityContent =\n        this.label !== ''\n          ? `passo ${this.content} ${slotedContent.textContent} ${this.label} ${this.highLightAriaLabel[this.highlight]}`\n          : `passo ${this.content} ${slotedContent.textContent} ${this.highLightAriaLabel[this.highlight]}`\n      this.ariaLabelContent = accessibilityContent\n      return\n    }\n    if (this.contentType === 'br-icon') {\n      accessibilityContent =\n        `passo  ${this.content} ` + this.brIconAria + this.label + this.highLightAriaLabel[this.highlight]\n      activeItem = this.active === true ? accessibilityContent + ' selecionado' : accessibilityContent\n      this.ariaLabelContent = activeItem\n      return\n    } else {\n      accessibilityContent =\n        this.label !== ''\n          ? `passo ${this.content} ${this.label} ${this.highLightAriaLabel[this.highlight]}`\n          : `passo ${this.content} ${this.highLightAriaLabel[this.highlight]}`\n      activeItem = this.active === true ? accessibilityContent + ' selecionado' : accessibilityContent\n      this.ariaLabelContent = activeItem\n    }\n  }\n\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 antes que o componente seja renderizado ou atualizado.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.\n   */\n  @Event() brDidRender: EventEmitter<void>\n  componentDidRender() {\n    const button = this.el.shadowRoot.getElementById('indicator-area').lastElementChild.shadowRoot\n    if (button !== null) {\n      button.lastElementChild.setAttribute('role', 'option')\n      button.lastElementChild.setAttribute('aria-selected', `${this.active}`)\n      button.lastElementChild.setAttribute('aria-label', this.ariaLabelContent)\n    }\n  }\n\n  /**\n   * Watch que observa o valor da propriedade active, e ao alterar seu valor este método altera o valor do campo de acessibilidade aria-selected\n   */\n  @Watch('active')\n  watchItemIsActive(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      const button = this.el.shadowRoot.getElementById('indicator-area').lastElementChild.shadowRoot\n      if (button !== null) {\n        button.lastElementChild.setAttribute('aria-selected', `${this.active}`)\n      }\n    }\n  }\n\n  /**\n   *\n   * Método disponibilizado via api do elemento que indica a posição do step item, ele serve para setar o state stepItemPositionStatus do componente\n   */\n  @Method()\n  async setStepItemPositionStatus(value: 'first' | 'middle' | 'last') {\n    this.stepItemPositionStatus = value\n  }\n\n  /**\n   * Método que define a orientação do stepItem e controla a exibição da linha do tempo após o componente.\n   */\n  @Method()\n  async handleShowTimeLine(value: boolean, layout) {\n    this.showTimeLine = value\n    this.stepLayout = layout\n  }\n\n  /**\n   *\n   * Método disponibilizado via api do elemento que atribui o valor ao estado que define onde o label, o texto de destaque, irá ficar localizado\n   */\n  @Method()\n  async setLabelPosition(value: 'top' | 'right' | 'bottom' | 'left') {\n    this.labelPosition = value\n  }\n\n  /**\n   *\n   * Método disponibilizado via api do elemento que atribui o valor que irá definir o tipo de conteúdo apresentado dentro do componente stepItem\n   */\n  @Method()\n  async setContentType(value: 'default' | 'br-icon' | 'no-content' | 'slotted') {\n    this.contentType = value\n  }\n\n  /**\n   *\n   * Método disponibilizado via api do elemento que atribui o valor que irá definir o modo como o componente irá se comportar e exibir seu estilo.\n   */\n  @Method()\n  async setMode(value: 'controller' | 'step') {\n    this.mode = value\n  }\n  /**\n   *\n   * Método disponibilizado via api do elemento que atribui o valor que irá ser exibido dentro do componente stepItem\n   */\n  @Method()\n  async setContent(value: string) {\n    this.content = value\n  }\n\n  private getStepContainerClassMap(): CssClassMap {\n    return {\n      'step-item-container-horizontal': this.stepLayout === 'horizontal',\n      'step-item-container-vertical': this.stepLayout === 'vertical',\n      last: this.stepItemPositionStatus == 'last',\n      'label-top': this.labelPosition === 'top',\n      'label-left': this.labelPosition === 'left',\n      'label-right': this.labelPosition === 'right',\n      'label-bottom': this.labelPosition === 'bottom' && this.label !== '',\n      controller: this.mode === 'controller',\n      'disabled-div': true,\n    }\n  }\n\n  private getStepItemContentClassMap(): CssClassMap {\n    return {\n      'step-item-content': true,\n      'label-bottom': this.labelPosition === 'bottom',\n      'label-top': this.labelPosition === 'top',\n      'label-left': this.labelPosition === 'left',\n      'label-right': this.labelPosition === 'right',\n      timeline: this.showTimeLine === true,\n      middle: this.stepItemPositionStatus === 'middle',\n      first: this.stepItemPositionStatus === 'first',\n      controller: this.mode === 'controller',\n    }\n  }\n\n  private getStepItemIndicatorAreaClassMap(): CssClassMap {\n    return {\n      'step-item-indicator-area': true,\n    }\n  }\n\n  private getStepItemLabelAreaClassMap(): CssClassMap {\n    return {\n      'step-item-label-area': true,\n      vertical: this.stepLayout === 'vertical',\n      horizontal: this.stepLayout === 'horizontal',\n      'label-bottom': this.labelPosition === 'bottom',\n      'label-top': this.labelPosition === 'top',\n      'label-left': this.labelPosition === 'left',\n      'label-right': this.labelPosition === 'right',\n      'no-label': this.label === '',\n    }\n  }\n\n  private getHighlightClass(): CssClassMap {\n    return {\n      icon: true,\n      success: this.highlight === 'success',\n      info: this.highlight === 'info',\n      warning: this.highlight === 'warning',\n      danger: this.highlight === 'danger',\n      'no-content': this.contentType === 'no-content',\n    }\n  }\n\n  private getStepItemIndicatorClass(): CssClassMap {\n    return {\n      'step-button': true,\n      controller: this.mode === 'controller',\n      'disabled-host': this.disabled,\n    }\n  }\n\n  private highLightAriaLabel = {\n    success: 'passo completo',\n    info: 'passo com item informativo',\n    warning: 'passo com alerta',\n    danger: 'passo com erro',\n    undefined: '',\n  }\n\n  private IconsName = {\n    success: 'fa-check',\n    info: 'fa-info-circle',\n    warning: 'fa-exclamation-triangle',\n    danger: 'fa-times',\n  }\n\n  render() {\n    return (\n      <Host>\n        <div id=\"item-container\" class={this.getStepContainerClassMap()}>\n          <div id=\"item-content\" class={this.getStepItemContentClassMap()}>\n            <div id=\"indicator-area\" data-active={this.active} class={this.getStepItemIndicatorAreaClassMap()}>\n              {this.mode === 'step' && this.highlight && (\n                <div class={this.getHighlightClass()}>\n                  <br-icon\n                    icon-name={this.IconsName[this.highlight]}\n                    class={`${this.highlight === 'warning' && 'warning-color'}`}\n                  ></br-icon>\n                </div>\n              )}\n\n              {this.mode === 'step' && (\n                <br-button\n                  shape=\"circle\"\n                  emphasis=\"secondary\"\n                  isActive={this.active}\n                  class={this.getStepItemIndicatorClass()}\n                >\n                  {this.contentType === 'no-content' && ''}\n                  {this.contentType === 'default' && this.content}\n                  {this.contentType === 'br-icon' && (\n                    <div>\n                      <br-icon icon-name={this.brIconName} class={'content-type-br-icon'}></br-icon>\n                    </div>\n                  )}\n                  {this.contentType === 'slotted' && <slot name={'content-area'}></slot>}\n                </br-button>\n              )}\n\n              {this.mode === 'controller' && <button data-active={this.active} class={'mode-controller'}></button>}\n            </div>\n            <div id=\"label-area\" class={this.getStepItemLabelAreaClassMap()}>\n              <span> {this.label} </span>\n            </div>\n          </div>\n        </div>\n      </Host>\n    )\n  }\n}\n"]}