@govbr-ds/webcomponents 2.0.0-next.14 → 2.0.0-next.15

package/dist/collection/components/textarea/textarea.js

@@ -0,0 +1,566 @@
+import { h, Host, } from "@stencil/core";
+import { v4 as uuidv4 } from "uuid";
+import { inheritAriaAttributes } from "../../utils/inherited-attributes";
+var Density;
+(function (Density) {
+    Density["Small"] = "small";
+    Density["Medium"] = "medium";
+    Density["Large"] = "large";
+})(Density || (Density = {}));
+var States;
+(function (States) {
+    States["Danger"] = "danger";
+    States["Success"] = "success";
+    States["Warning"] = "warning";
+})(States || (States = {}));
+/**
+ * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/textarea?tab=designer).
+ *
+ * @slot default - Espaço de conteúdo do textarea. Geralmente usado para incluir texto adicional ou instruções para o usuário.
+ */
+export class Textarea {
+    constructor() {
+        this.inheritedAttributes = {};
+        this.value = '';
+        this.label = '';
+        this.placeholder = '';
+        this.disabled = false;
+        this.maxlength = 0;
+        this.states = null;
+        this.density = Density.Medium;
+        this.isDarkMode = false;
+        this.isLabelLeft = false;
+        this.currentLength = 0;
+        this.defaultId = `br-textarea-${uuidv4()}`;
+    }
+    connectedCallback() {
+        this.brDidConnect.emit();
+    }
+    componentWillLoad() {
+        this.currentLength = this.value.length;
+        this.brWillLoad.emit();
+        this.inheritedAttributes = inheritAriaAttributes(this.el);
+    }
+    componentDidLoad() {
+        this.brDidLoad.emit();
+    }
+    componentWillRender() {
+        this.brWillRender.emit();
+    }
+    componentDidRender() {
+        this.brDidRender.emit();
+    }
+    componentShouldUpdate() {
+        this.brShouldUpdate.emit();
+    }
+    componentWillUpdate() {
+        this.brWillUpdate.emit();
+    }
+    componentDidUpdate() {
+        this.brDidUpdate.emit();
+    }
+    disconnectedCallback() {
+        this.brDidDisconnect.emit();
+    }
+    formAssociatedCallback(form) {
+        this.brFormAssociatedCallback.emit(form);
+    }
+    formDisabledCallback(disabled) {
+        this.brFormDisabledCallback.emit(disabled);
+    }
+    formResetCallback() {
+        this.brFormResetCallback.emit();
+    }
+    formStateRestoreCallback(state, _mode) {
+        this.brFormStateRestoreCallback.emit([state, _mode]);
+    }
+    valueChanged() {
+        this.currentLength = this.value.length;
+    }
+    /**
+     * Manipula a mudança de valor do textarea. Atualiza o valor e emite um evento de mudança.
+     * @param event - O evento de entrada do textarea.
+     */
+    handleChange(event) {
+        const textarea = event.target;
+        this.value = textarea.value;
+        this.currentLength = this.value.length;
+        this.emitValueChange();
+    }
+    /**
+     * Define um novo valor para o textarea.
+     * @param newValue - O novo valor a ser definido.
+     */
+    async setValue(newValue) {
+        this.value = newValue;
+        this.currentLength = this.value.length;
+        this.emitValueChange();
+    }
+    emitValueChange() {
+        const changeEvent = new CustomEvent('valueChange', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        });
+        this.el.dispatchEvent(changeEvent);
+    }
+    getCssClassMap() {
+        return {
+            'br-textarea': true,
+            'dark-mode': this.isDarkMode,
+            small: this.density === Density.Small,
+            medium: this.density === Density.Medium,
+            large: this.density === Density.Large,
+            success: this.states === States.Success,
+            danger: this.states === States.Danger,
+            warning: this.states === States.Warning,
+        };
+    }
+    render() {
+        const caracteresRestantes = this.maxlength - this.currentLength;
+        const mostrarLimite = this.currentLength === 0;
+        return (h(Host, { key: '9aaae65f9b632e21c44a8ea4ce736d6e5e394b85' }, h("div", Object.assign({ key: '5bcc99ec860393cf7be86403fde553c12df1f3ca', class: this.getCssClassMap() }, this.inheritedAttributes), h("div", { key: 'b19610ee44e038fd69b38bbb6773f805116e99a1', class: this.isLabelLeft ? 'row' : '' }, this.isLabelLeft ? (h("div", { class: "col-auto pt-half" }, h("label", { htmlFor: this.defaultId }, this.label))) : (h("label", { htmlFor: this.defaultId }, this.label)), h("div", { key: '3af5ad0220ff70f942ba7144e662066801b695bd', class: this.isLabelLeft ? 'col' : '' }, h("textarea", Object.assign({ key: 'a0630ed64f956f5c7179738fba617dc387d1a87b', id: this.defaultId, value: this.value, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleChange.bind(this) }, (this.maxlength > 0 ? { maxLength: this.maxlength } : {}))), h("div", { key: '98c265485d7f229ea0284a77b610799037b0186b', class: "text-base mt-1" }, this.maxlength > 0 && (h("div", { key: '3edc0d76bc64ca56dfbcc548e79eb2b379d2eb0e' }, mostrarLimite ? (h("span", { class: "limit", "aria-live": "polite" }, "Limite m\u00E1ximo de ", h("strong", null, this.maxlength), " caracteres")) : (h("span", { class: "restantes", "aria-live": "polite", role: "status", id: "limitmax" }, "Restam ", h("strong", null, caracteresRestantes), " caracteres"))))), h("slot", { key: '8b41a47359ea19a8bee6e39c2b02ac65aa2cfaa1' }))))));
+    }
+    static get is() { return "br-textarea"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["textarea.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["textarea.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor atual do textarea. Este valor pode ser alterado programaticamente."
+                },
+                "attribute": "value",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto do r\u00F3tulo associado ao textarea. Este r\u00F3tulo \u00E9 exibido acima do campo de entrada."
+                },
+                "attribute": "label",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto exibido quando o textarea est\u00E1 vazio. Ajuda a guiar o usu\u00E1rio sobre o que deve ser inserido."
+                },
+                "attribute": "placeholder",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indica se o textarea est\u00E1 desabilitado. Quando verdadeiro, o usu\u00E1rio n\u00E3o pode interagir com o campo."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "maxlength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "N\u00FAmero m\u00E1ximo de caracteres permitidos no textarea. Se definido como 0, n\u00E3o h\u00E1 limite."
+                },
+                "attribute": "maxlength",
+                "reflect": true,
+                "defaultValue": "0"
+            },
+            "states": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o estado visual do componente, podendo ser 'danger', 'success' ou 'warning'."
+                },
+                "attribute": "states",
+                "reflect": true,
+                "defaultValue": "null"
+            },
+            "density": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Ajusta a densidade do componente, podendo ser 'small', 'medium' ou 'large'."
+                },
+                "attribute": "density",
+                "reflect": true,
+                "defaultValue": "Density.Medium"
+            },
+            "isDarkMode": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Ativa o modo escuro para o componente. Quando verdadeiro, o componente ser\u00E1 exibido em um tema escuro."
+                },
+                "attribute": "is-dark-mode",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "isLabelLeft": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define se o r\u00F3tulo deve ser exibido \u00E0 esquerda do textarea. Quando verdadeiro, o r\u00F3tulo \u00E9 posicionado \u00E0 esquerda."
+                },
+                "attribute": "is-label-left",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "defaultId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identificador \u00FAnico do textarea, gerado automaticamente.\nEste ID \u00E9 utilizado para associar o textarea a outros elementos, como r\u00F3tulos,\ne garantir que cada inst\u00E2ncia do componente tenha um identificador distinto."
+                },
+                "attribute": "default-id",
+                "reflect": true,
+                "defaultValue": "`br-textarea-${uuidv4()}`"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currentLength": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "brDidConnect",
+                "name": "brDidConnect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite um evento quando o componente \u00E9 conectado ao DOM.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#connectedcallback) para mais detalhes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brWillLoad",
+                "name": "brWillLoad",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite um evento antes que o componente seja carregado pela primeira vez.\nUtilize este evento para realizar tarefas de inicializa\u00E7\u00E3o antes do componente ser exibido.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillload) para mais detalhes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "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": "brWillRender",
+                "name": "brWillRender",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite um evento antes do componente ser renderizado.\nUtilize este evento para preparar o componente antes de sua renderiza\u00E7\u00E3o.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillrender) 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 renderizado.\nUtilize este evento para executar a\u00E7\u00F5es que devem ocorrer ap\u00F3s a renderiza\u00E7\u00E3o do componente.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidrender) 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": {}
+                }
+            }, {
+                "method": "brWillUpdate",
+                "name": "brWillUpdate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite um evento antes de o componente ser atualizado.\nUtilize este evento para realizar a\u00E7\u00F5es preparat\u00F3rias antes da atualiza\u00E7\u00E3o do componente.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillupdate) para mais detalhes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brDidUpdate",
+                "name": "brDidUpdate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite um evento ap\u00F3s o componente ter sido atualizado.\nUtilize este evento para realizar a\u00E7\u00F5es ap\u00F3s a atualiza\u00E7\u00E3o do componente.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidupdate) para mais detalhes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brDidDisconnect",
+                "name": "brDidDisconnect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite um evento quando o componente \u00E9 desconectado do DOM.\nUtilize este evento para realizar a limpeza ou outras a\u00E7\u00F5es necess\u00E1rias quando o componente \u00E9 removido.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#disconnectedcallback) para mais detalhes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brFormAssociatedCallback",
+                "name": "brFormAssociatedCallback",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite um evento quando o formul\u00E1rio associado \u00E9 enviado.\nUtilize este evento para realizar a\u00E7\u00F5es quando o formul\u00E1rio \u00E9 enviado."
+                },
+                "complexType": {
+                    "original": "FormData",
+                    "resolved": "FormData",
+                    "references": {
+                        "FormData": {
+                            "location": "global",
+                            "id": "global::FormData"
+                        }
+                    }
+                }
+            }, {
+                "method": "brFormDisabledCallback",
+                "name": "brFormDisabledCallback",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite um evento quando o estado do formul\u00E1rio \u00E9 alterado para desabilitado.\nUtilize este evento para realizar a\u00E7\u00F5es quando o formul\u00E1rio \u00E9 desabilitado."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "brFormResetCallback",
+                "name": "brFormResetCallback",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite um evento quando o formul\u00E1rio \u00E9 redefinido.\nUtilize este evento para realizar a\u00E7\u00F5es quando o formul\u00E1rio \u00E9 redefinido."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brFormStateRestoreCallback",
+                "name": "brFormStateRestoreCallback",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite um evento para restaurar o estado do formul\u00E1rio.\nUtilize este evento para realizar a\u00E7\u00F5es quando o estado do formul\u00E1rio \u00E9 restaurado."
+                },
+                "complexType": {
+                    "original": "[state: string, _mode: string]",
+                    "resolved": "[state: string, _mode: string]",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setValue": {
+                "complexType": {
+                    "signature": "(newValue: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "newValue",
+                            "type": "string",
+                            "docs": "- O novo valor a ser definido."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Define um novo valor para o textarea.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "newValue - O novo valor a ser definido."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
+    static get attachInternalsMemberName() { return "elementInternals"; }
+}
+//# sourceMappingURL=textarea.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.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 { v4 as uuidv4 } from 'uuid'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\nimport { CssClassMap } from '../../utils/interfaces'\n\nenum Density {\n  Small = 'small',\n  Medium = 'medium',\n  Large = 'large',\n}\n\nenum States {\n  Danger = 'danger',\n  Success = 'success',\n  Warning = 'warning',\n}\n\n/**\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/textarea?tab=designer).\n *\n * @slot default - Espaço de conteúdo do textarea. Geralmente usado para incluir texto adicional ou instruções para o usuário.\n */\n@Component({\n  tag: 'br-textarea',\n  styleUrl: 'textarea.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Textarea {\n  @Element() el: HTMLElement\n\n  /**\n   * Valor atual do textarea. Este valor pode ser alterado programaticamente.\n   */\n  @Prop({ mutable: true, reflect: true }) value: string = ''\n\n  /**\n   * Texto do rótulo associado ao textarea. Este rótulo é exibido acima do campo de entrada.\n   */\n  @Prop({ reflect: true }) label: string = ''\n\n  /**\n   * Texto exibido quando o textarea está vazio. Ajuda a guiar o usuário sobre o que deve ser inserido.\n   */\n  @Prop({ reflect: true }) placeholder: string = ''\n\n  /**\n   * Indica se o textarea está desabilitado. Quando verdadeiro, o usuário não pode interagir com o campo.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false\n\n  /**\n   * Número máximo de caracteres permitidos no textarea. Se definido como 0, não há limite.\n   */\n  @Prop({ reflect: true }) maxlength: number = 0\n\n  /**\n   * Define o estado visual do componente, podendo ser 'danger', 'success' ou 'warning'.\n   */\n  @Prop({ reflect: true }) states: string = null\n\n  /**\n   * Ajusta a densidade do componente, podendo ser 'small', 'medium' ou 'large'.\n   */\n  @Prop({ reflect: true }) density: string = Density.Medium\n\n  /**\n   * Ativa o modo escuro para o componente. Quando verdadeiro, o componente será exibido em um tema escuro.\n   */\n  @Prop({ reflect: true }) isDarkMode: boolean = false\n\n  /**\n   * Define se o rótulo deve ser exibido à esquerda do textarea. Quando verdadeiro, o rótulo é posicionado à esquerda.\n   */\n  @Prop({ reflect: true }) isLabelLeft: boolean = false\n\n  /**\n   * Comprimento atual do texto no textarea. É atualizado sempre que o valor do textarea muda.\n   */\n  @State() currentLength: number = 0\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Identificador único do textarea, gerado automaticamente.\n   * Este ID é utilizado para associar o textarea a outros elementos, como rótulos,\n   * e garantir que cada instância do componente tenha um identificador distinto.\n   */\n  @Prop({ reflect: true }) defaultId: string = `br-textarea-${uuidv4()}`\n\n  /**\n   * Emite um evento quando o componente é conectado ao DOM.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#connectedcallback) para mais detalhes.\n   */\n  @Event() brDidConnect: EventEmitter<void>\n  connectedCallback() {\n    this.brDidConnect.emit()\n  }\n\n  /**\n   * Emite um evento antes que o componente seja carregado pela primeira vez.\n   * Utilize este evento para realizar tarefas de inicialização antes do componente ser exibido.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillload) para mais detalhes.\n   */\n  @Event() brWillLoad: EventEmitter<void>\n  componentWillLoad() {\n    this.currentLength = this.value.length\n    this.brWillLoad.emit()\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\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 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.brDidLoad.emit()\n  }\n\n  /**\n   * Emite um evento antes do componente ser renderizado.\n   * Utilize este evento para preparar o componente antes de sua renderização.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillrender) para mais detalhes.\n   */\n  @Event() brWillRender: EventEmitter<void>\n  componentWillRender() {\n    this.brWillRender.emit()\n  }\n\n  /**\n   * Emite um evento após o componente ter sido renderizado.\n   * Utilize este evento para executar ações que devem ocorrer após a renderização do componente.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidrender) para mais detalhes.\n   */\n  @Event() brDidRender: EventEmitter<void>\n  componentDidRender() {\n    this.brDidRender.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() {\n    this.brShouldUpdate.emit()\n  }\n\n  /**\n   * Emite um evento antes de o componente ser atualizado.\n   * Utilize este evento para realizar ações preparatórias antes da atualização do componente.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillupdate) para mais detalhes.\n   */\n  @Event() brWillUpdate: EventEmitter<void>\n  componentWillUpdate() {\n    this.brWillUpdate.emit()\n  }\n\n  /**\n   * Emite um evento após o componente ter sido atualizado.\n   * Utilize este evento para realizar ações após a atualização do componente.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidupdate) para mais detalhes.\n   */\n  @Event() brDidUpdate: EventEmitter<void>\n  componentDidUpdate() {\n    this.brDidUpdate.emit()\n  }\n\n  /**\n   * Emite um evento quando o componente é desconectado do DOM.\n   * Utilize este evento para realizar a limpeza ou outras ações necessárias quando o componente é removido.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#disconnectedcallback) para mais detalhes.\n   */\n  @Event() brDidDisconnect: EventEmitter<void>\n  disconnectedCallback() {\n    this.brDidDisconnect.emit()\n  }\n\n  /**\n   * Emite um evento quando o formulário associado é enviado.\n   * Utilize este evento para realizar ações quando o formulário é enviado.\n   */\n  @Event() brFormAssociatedCallback: EventEmitter<FormData>\n  formAssociatedCallback(form: FormData) {\n    this.brFormAssociatedCallback.emit(form)\n  }\n\n  /**\n   * Emite um evento quando o estado do formulário é alterado para desabilitado.\n   * Utilize este evento para realizar ações quando o formulário é desabilitado.\n   */\n  @Event() brFormDisabledCallback: EventEmitter<boolean>\n  formDisabledCallback(disabled: boolean) {\n    this.brFormDisabledCallback.emit(disabled)\n  }\n\n  /**\n   * Emite um evento quando o formulário é redefinido.\n   * Utilize este evento para realizar ações quando o formulário é redefinido.\n   */\n  @Event() brFormResetCallback: EventEmitter<void>\n  formResetCallback() {\n    this.brFormResetCallback.emit()\n  }\n\n  /**\n   * Emite um evento para restaurar o estado do formulário.\n   * Utilize este evento para realizar ações quando o estado do formulário é restaurado.\n   */\n  @Event() brFormStateRestoreCallback: EventEmitter<[state: string, _mode: string]>\n  formStateRestoreCallback(state: string, _mode: string) {\n    this.brFormStateRestoreCallback.emit([state, _mode])\n  }\n\n  @Watch('value')\n  valueChanged() {\n    this.currentLength = this.value.length\n  }\n\n  /**\n   * Manipula a mudança de valor do textarea. Atualiza o valor e emite um evento de mudança.\n   * @param event - O evento de entrada do textarea.\n   */\n  handleChange(event: Event) {\n    const textarea = event.target as HTMLTextAreaElement\n    this.value = textarea.value\n    this.currentLength = this.value.length\n\n    this.emitValueChange()\n  }\n\n  /**\n   * Define um novo valor para o textarea.\n   * @param newValue - O novo valor a ser definido.\n   */\n  @Method()\n  async setValue(newValue: string) {\n    this.value = newValue\n    this.currentLength = this.value.length\n\n    this.emitValueChange()\n  }\n\n  private emitValueChange() {\n    const changeEvent = new CustomEvent('valueChange', {\n      detail: { value: this.value },\n      bubbles: true,\n      composed: true,\n    })\n    this.el.dispatchEvent(changeEvent)\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-textarea': true,\n      'dark-mode': this.isDarkMode,\n      small: this.density === Density.Small,\n      medium: this.density === Density.Medium,\n      large: this.density === Density.Large,\n      success: this.states === States.Success,\n      danger: this.states === States.Danger,\n      warning: this.states === States.Warning,\n    }\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  render() {\n    const caracteresRestantes = this.maxlength - this.currentLength\n    const mostrarLimite = this.currentLength === 0\n\n    return (\n      <Host>\n        <div class={this.getCssClassMap()} {...this.inheritedAttributes}>\n          <div class={this.isLabelLeft ? 'row' : ''}>\n            {this.isLabelLeft ? (\n              <div class=\"col-auto pt-half\">\n                <label htmlFor={this.defaultId}>{this.label}</label>\n              </div>\n            ) : (\n              <label htmlFor={this.defaultId}>{this.label}</label>\n            )}\n            <div class={this.isLabelLeft ? 'col' : ''}>\n              <textarea\n                id={this.defaultId}\n                value={this.value}\n                placeholder={this.placeholder}\n                disabled={this.disabled}\n                onInput={this.handleChange.bind(this)}\n                {...(this.maxlength > 0 ? { maxLength: this.maxlength } : {})}\n              ></textarea>\n              <div class=\"text-base mt-1\">\n                {this.maxlength > 0 && (\n                  <div>\n                    {mostrarLimite ? (\n                      <span class=\"limit\" aria-live=\"polite\">\n                        Limite máximo de <strong>{this.maxlength}</strong> caracteres\n                      </span>\n                    ) : (\n                      <span class=\"restantes\" aria-live=\"polite\" role=\"status\" id=\"limitmax\">\n                        Restam <strong>{caracteresRestantes}</strong> caracteres\n                      </span>\n                    )}\n                  </div>\n                )}\n              </div>\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    )\n  }\n}\n"]}

package/dist/collection/pages/textarea/textarea.js

@@ -0,0 +1,19 @@
+if (!window.elementsToListen && !window.eventsToListen) {
+  const elementsToListen = document.querySelectorAll("br-textarea");
+
+  const eventsToListen = ["click"];
+
+  elementsToListen.forEach((domElement) => {
+    eventsToListen.forEach((event) => {
+      domElement.addEventListener(event, function (event) {
+        console.log({
+          Elemento: domElement,
+          Evento: event,
+          Tipo: event.type,
+          'Detail(Custom Events)': event.detail,
+          'Data(Native Events)': event.data,
+        })
+      })
+    })
+  })
+}