@govbr-ds/webcomponents 2.0.0-next.17 → 2.0.0-next.19

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

@@ -1,18 +1,10 @@
-import { h, Host, } from "@stencil/core";
+/*!
+ * Construído com @govbr-ds/webcomponents
+ * Padrão Digital de Governo.
+ */
+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).
  *
@@ -20,80 +12,46 @@ var States;
  */
 export class Textarea {
     constructor() {
+        /**
+         * 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.
+         */
+        this.handleChange = (event) => {
+            var _a;
+            const textarea = event.target;
+            this.value = textarea.value;
+            this.currentLength = (_a = this.value) === null || _a === void 0 ? void 0 : _a.length;
+            this.emitValueChange();
+        };
         this.inheritedAttributes = {};
-        this.value = '';
-        this.label = '';
-        this.placeholder = '';
+        this.value = undefined;
+        this.label = undefined;
+        this.placeholder = undefined;
         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();
+        this.state = undefined;
+        this.density = 'medium';
+        this.isInline = false;
+        this.currentLength = undefined;
+        this.customId = `br-textarea-${uuidv4()}`;
     }
     componentWillLoad() {
-        this.currentLength = this.value.length;
-        this.brWillLoad.emit();
+        var _a;
+        this.currentLength = (_a = this.value) === null || _a === void 0 ? void 0 : _a.length;
         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();
+        var _a;
+        this.currentLength = (_a = this.value) === null || _a === void 0 ? void 0 : _a.length;
     }
     /**
      * Define um novo valor para o textarea.
      * @param newValue - O novo valor a ser definido.
      */
     async setValue(newValue) {
+        var _a;
         this.value = newValue;
-        this.currentLength = this.value.length;
+        this.currentLength = (_a = this.value) === null || _a === void 0 ? void 0 : _a.length;
         this.emitValueChange();
     }
     emitValueChange() {
@@ -107,19 +65,18 @@ export class Textarea {
     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,
+            small: this.density === 'small',
+            medium: this.density === 'medium',
+            large: this.density === 'large',
+            success: this.state === 'success',
+            danger: this.state === 'danger',
+            warning: this.state === 'warning',
         };
     }
     render() {
         const caracteresRestantes = this.maxlength - this.currentLength;
-        const mostrarLimite = this.currentLength === 0;
-        return (h(Host, { key: '25a8d99b601bbd44f1058d89de4c8c683defe797' }, h("div", Object.assign({ key: 'e1c917d6f46b8f416f44ec2e6725a0ab0b0317ef', class: this.getCssClassMap() }, this.inheritedAttributes), h("div", { key: 'b83093202871a78d7b8d965d12be0c035852d626', 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: '6ea04b8adf07c33b9c417a2d3ae0aa0a9aaf8c29', class: this.isLabelLeft ? 'col' : '' }, h("textarea", Object.assign({ key: 'c60aef3d50689757cc9d81b669fe2126146b574c', 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: 'f8f18f3525d711e54f92526f308b3d4bf8d10c31', class: "text-base mt-1" }, this.maxlength > 0 && (h("div", { key: 'f8c062d5fca8d1e14aa9e340bdb397951b78ff06' }, 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: 'cba00d317f4d7717dc3475d433ebc9a2e3483529' }))))));
+        const mostrarLimite = this.currentLength > 0;
+        return (h(Host, { key: 'defc8132cc310b1fdce9555584503b1091381f1a' }, h("div", Object.assign({ key: 'cb6c15fda32b51936b72e3841f0902c62dfb1b2b', class: this.getCssClassMap() }, this.inheritedAttributes), h("div", { key: '7f6c1f253f9ff2925cdd03979f2d59c094d33764', class: this.isInline ? 'row' : '' }, this.isInline ? (h("div", { class: "col-auto pt-half" }, h("label", { htmlFor: this.customId }, this.label))) : (h("label", { htmlFor: this.customId }, this.label)), h("div", { key: '3fdb79978863ec3748395a25f3314b70bc9e2c70', class: this.isInline ? 'col' : '' }, h("textarea", Object.assign({ key: '8fb3b0cfeb66e6a41ca043280848beca7a48b831', id: this.customId, value: this.value, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleChange }, (this.maxlength > 0 ? { maxLength: this.maxlength } : {}))), h("div", { key: '15886ef7f481fa9f68dd57d4765283fae22e82a4', class: "text-base mt-1" }, this.maxlength > 0 && (h("div", { key: '793a5a2d1e8b5fb76c0ed96fc713544094c18809' }, mostrarLimite ? (h("span", { class: "restantes", "aria-live": "polite", role: "status", id: "limitmax" }, "Restam ", h("strong", null, caracteresRestantes), " caracteres")) : (h("span", { class: "limit", "aria-live": "polite" }, "Limite m\u00E1ximo de ", h("strong", null, this.maxlength), " caracteres"))))), h("slot", { key: '0b6052b895a5b960bff7c3eb879e949ad4846cfa' }))))));
     }
     static get is() { return "br-textarea"; }
     static get encapsulation() { return "shadow"; }
@@ -151,8 +108,7 @@ export class Textarea {
                     "text": "Valor atual do textarea. Este valor pode ser alterado programaticamente."
                 },
                 "attribute": "value",
-                "reflect": true,
-                "defaultValue": "''"
+                "reflect": true
             },
             "label": {
                 "type": "string",
@@ -169,8 +125,7 @@ export class Textarea {
                     "text": "Texto do r\u00F3tulo associado ao textarea. Este r\u00F3tulo \u00E9 exibido acima do campo de entrada."
                 },
                 "attribute": "label",
-                "reflect": true,
-                "defaultValue": "''"
+                "reflect": true
             },
             "placeholder": {
                 "type": "string",
@@ -187,8 +142,7 @@ export class Textarea {
                     "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": "''"
+                "reflect": true
             },
             "disabled": {
                 "type": "boolean",
@@ -226,12 +180,12 @@ export class Textarea {
                 "reflect": true,
                 "defaultValue": "0"
             },
-            "states": {
+            "state": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "'danger' | 'success' | 'warning'",
+                    "resolved": "\"danger\" | \"success\" | \"warning\"",
                     "references": {}
                 },
                 "required": false,
@@ -240,16 +194,15 @@ export class Textarea {
                     "tags": [],
                     "text": "Define o estado visual do componente, podendo ser 'danger', 'success' ou 'warning'."
                 },
-                "attribute": "states",
-                "reflect": true,
-                "defaultValue": "null"
+                "attribute": "state",
+                "reflect": true
             },
             "density": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
                     "references": {}
                 },
                 "required": false,
@@ -260,9 +213,9 @@ export class Textarea {
                 },
                 "attribute": "density",
                 "reflect": true,
-                "defaultValue": "Density.Medium"
+                "defaultValue": "'medium'"
             },
-            "isDarkMode": {
+            "isInline": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -274,31 +227,13 @@ export class Textarea {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Ativa o modo escuro para o componente. Quando verdadeiro, o componente ser\u00E1 exibido em um tema escuro."
+                    "text": "Se verdadeiro, o r\u00F3tulo e o input estar\u00E3o na mesma linha (layout inline)."
                 },
-                "attribute": "is-dark-mode",
+                "attribute": "is-inline",
                 "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": {
+            "customId": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -310,9 +245,9 @@ export class Textarea {
                 "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."
+                    "text": "Identificador \u00FAnico do textarea.\nCaso n\u00E3o seja fornecido, um ID gerado automaticamente ser\u00E1 usado."
                 },
-                "attribute": "default-id",
+                "attribute": "id",
                 "reflect": true,
                 "defaultValue": "`br-textarea-${uuidv4()}`"
             }
@@ -323,209 +258,6 @@ export class Textarea {
             "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": {

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

@@ -1 +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: HTMLBrTextareaElement\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  private 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"]}
+{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../../src/components/textarea/textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core'\n\nimport { v4 as uuidv4 } from 'uuid'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\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/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: HTMLBrTextareaElement\n\n  @AttachInternals() elementInternals: ElementInternals\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 }) state: 'danger' | 'success' | 'warning'\n  /**\n   * Ajusta a densidade do componente, podendo ser 'small', 'medium' ou 'large'.\n   */\n  @Prop({ reflect: true }) density: 'small' | 'medium' | 'large' = 'medium'\n\n  /**\n   * Se verdadeiro, o rótulo e o input estarão na mesma linha (layout inline).\n   */\n  @Prop({ reflect: true }) isInline: boolean = false\n\n  /**\n   * Comprimento atual do texto no textarea. É atualizado sempre que o valor do textarea muda.\n   */\n  @State() currentLength: number\n\n  /**\n   * Identificador único do textarea.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true, attribute: 'id' }) customId: string = `br-textarea-${uuidv4()}`\n\n  componentWillLoad() {\n    this.currentLength = this.value?.length\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\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  private readonly handleChange = (event: Event) => {\n    const textarea = event.target as HTMLTextAreaElement\n    this.value = textarea.value\n    this.currentLength = this.value?.length\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    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      small: this.density === 'small',\n      medium: this.density === 'medium',\n      large: this.density === 'large',\n      success: this.state === 'success',\n      danger: this.state === 'danger',\n      warning: this.state === 'warning',\n    }\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  render() {\n    const caracteresRestantes: number = 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.isInline ? 'row' : ''}>\n            {this.isInline ? (\n              <div class=\"col-auto pt-half\">\n                <label htmlFor={this.customId}>{this.label}</label>\n              </div>\n            ) : (\n              <label htmlFor={this.customId}>{this.label}</label>\n            )}\n            <div class={this.isInline ? 'col' : ''}>\n              <textarea\n                id={this.customId}\n                value={this.value}\n                placeholder={this.placeholder}\n                disabled={this.disabled}\n                onInput={this.handleChange}\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=\"restantes\" aria-live=\"polite\" role=\"status\" id=\"limitmax\">\n                        Restam <strong>{caracteresRestantes}</strong> caracteres\n                      </span>\n                    ) : (\n                      <span class=\"limit\" aria-live=\"polite\">\n                        Limite máximo de <strong>{this.maxlength}</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"]}