@govbr-ds/webcomponents 2.1.0 → 2.1.2

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

@@ -0,0 +1,985 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+import { Host, h, } from "@stencil/core";
+import { redispatchNativeFormEvent } from "../../shared/utils/event";
+import { getFormValidationState, isFormControlDisabled, safeSetFormValue, syncNativeFormValidity, } from "../../shared/utils/form";
+import { generateUniqueId } from "../../shared/utils/id";
+import { hasAssignedSlotContent, hasDefaultLightDomContent } from "../../shared/utils/slot";
+import { resolveFormValidator } from "../../shared/utils/validator";
+/**
+ * ## Design System
+ *
+ * Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/textarea?tab=designer).
+ *
+ * @category Formulários
+ * @status stable
+ * @slot default - Slot para texto adicional ou instruções a serem exibidos junto ao textarea.
+ * @slot feedback - Mensagem de validação, normalmente um `br-message`.
+ * @slot validation-loading - Indicador exibido durante validação assíncrona.
+ *
+ * @part container - Contêiner visual principal.
+ * @part label - Rótulo do textarea.
+ * @part textarea - Elemento textarea nativo.
+ * @part counter - Contêiner do contador.
+ * @part counter-text - Texto do contador.
+ * @part helper - Contêiner do conteúdo auxiliar do slot default.
+ * @part feedback - Contêiner da mensagem de validação.
+ */
+export class Textarea {
+    constructor() {
+        this.formDisabled = false;
+        /**
+         * Indica se o slot padrão possui conteúdo.
+         */
+        this.hasDefaultSlot = false;
+        this.hasFeedbackSlot = false;
+        this.hasValidationLoadingSlot = false;
+        this.isValidating = false;
+        this.validatorMessage = null;
+        /**
+         * Valor exibido no textarea.
+         * Pode ser alterado pelo usuário se a propriedade `readonly` não estiver ativa.
+         */
+        this.value = '';
+        /**
+         * Identificador único.
+         * Caso não seja fornecido, um ID gerado automaticamente será usado.
+         */
+        this.customId = generateUniqueId();
+        /**
+         * Indica se o textarea está desabilitado. Quando verdadeiro, o usuário não pode interagir com o campo.
+         */
+        this.disabled = false;
+        /**
+         * Se verdadeiro, o input é obrigatório e deve ser preenchido antes que o formulário possa ser enviado.
+         */
+        this.required = false;
+        /** Impede edição sem remover o campo do envio do formulário. */
+        this.readonly = false;
+        /** Número mínimo de caracteres necessário para o valor ser válido. */
+        this.minlength = 0;
+        /**
+         * Número máximo de caracteres permitidos no textarea. Se definido como 0, não há limite.
+         */
+        this.maxlength = 0;
+        /**
+         * Mostra o contador com a quantidade máxima de caracteres.
+         */
+        this.showCounter = false;
+        /**
+         * Ajusta a densidade do componente, podendo ser 'small', 'medium' ou 'large'.
+         */
+        this.density = 'medium';
+        /**
+         * Se verdadeiro, o rótulo e o input estarão na mesma linha (layout inline).
+         * @deprecated Use `inline`.
+         */
+        this.isInline = false;
+        this.initialValue = '';
+        this.manualValidationMessage = '';
+        this.validationRunId = 0;
+        this.handleInput = (event) => {
+            this.value = event.target.value;
+            this.valueChange.emit(this.value);
+            redispatchNativeFormEvent(this.el, event, 'input');
+        };
+        this.handleChange = (event) => {
+            redispatchNativeFormEvent(this.el, event, 'change');
+            void this.validate();
+        };
+    }
+    formDisabledCallback(disabled) {
+        this.formDisabled = disabled;
+        this.updateValidity();
+    }
+    formResetCallback() {
+        this.validationRunId++;
+        this.validatorMessage = null;
+        this.isValidating = false;
+        this.manualValidationMessage = '';
+        this.value = this.initialValue;
+        if (this.nativeTextarea) {
+            this.nativeTextarea.value = this.initialValue;
+            this.nativeTextarea.setCustomValidity('');
+        }
+        this.syncFormState(this.initialValue);
+    }
+    formStateRestoreCallback(state) {
+        const restoredValue = typeof state === 'string' ? state : '';
+        this.value = restoredValue;
+        if (this.nativeTextarea) {
+            this.nativeTextarea.value = restoredValue;
+        }
+        this.syncFormState(restoredValue);
+    }
+    /** Comprimento atual derivado do valor do textarea. */
+    get currentLength() {
+        return this.value?.length ?? 0;
+    }
+    valueChanged() {
+        this.validationRunId++;
+        this.validatorMessage = null;
+        this.syncFormState(this.value ?? '');
+        this.updateValidity();
+    }
+    componentWillLoad() {
+        this.initialValue = this.value ?? '';
+        this.checkSlotContent();
+        this.hasValidationLoadingSlot = this.el.querySelector('[slot="validation-loading"]') !== null;
+        this.syncFormState(this.value ?? '');
+    }
+    componentDidLoad() {
+        this.updateValidity();
+        if (this.el.hasAttribute('autofocus')) {
+            this.nativeTextarea?.focus();
+        }
+    }
+    /**
+     * Retorna `true` se o valor do textarea for válido, caso contrário `false`.
+     * Se o textarea for inválido, dispara um evento 'invalid'.
+     */
+    async checkValidity() {
+        return this.elementInternals?.checkValidity?.() ?? true;
+    }
+    /**
+     * Retorna `true` se o valor do textarea for válido, caso contrário `false`.
+     * Se for inválido, exibe a mensagem de erro padrão do navegador.
+     */
+    async reportValidity() {
+        return this.elementInternals?.reportValidity?.() ?? true;
+    }
+    /**
+     * Define uma mensagem de validação customizada para o textarea.
+     * Se a mensagem for uma string vazia, o erro customizado é limpo.
+     */
+    async setCustomValidity(message) {
+        this.manualValidationMessage = message;
+        this.updateValidity();
+    }
+    /** Executa o validator customizado e retorna se o textarea está válido. */
+    async validate() {
+        const validator = this.resolveValidator();
+        if (!validator || this.isDisabled())
+            return this.checkValidity();
+        const runId = ++this.validationRunId;
+        this.isValidating = true;
+        this.validatorMessage = null;
+        this.updateValidity();
+        this.brTextareaValidationChange.emit({ validating: true, valid: null, message: null });
+        let message = null;
+        try {
+            message = (await validator(this.value ?? '')) || null;
+        }
+        catch {
+            message = 'Não foi possível validar o campo.';
+        }
+        if (runId !== this.validationRunId)
+            return false;
+        this.validatorMessage = message;
+        this.isValidating = false;
+        this.updateValidity();
+        const valid = message === null && (await this.checkValidity());
+        this.brTextareaValidationChange.emit({ validating: false, valid, message });
+        return valid;
+    }
+    /** Retorna um snapshot serializável da Constraint Validation API. */
+    async getValidationState() {
+        return getFormValidationState(this.elementInternals);
+    }
+    /** Seleciona todo o texto do controle nativo, conforme HTMLTextAreaElement.select(). */
+    async select() {
+        this.nativeTextarea?.select();
+    }
+    /** Substitui um intervalo de texto usando a API nativa do textarea. */
+    async setRangeText(replacement, start, end, selectionMode) {
+        if (!this.nativeTextarea)
+            return;
+        if (start === undefined || end === undefined) {
+            this.nativeTextarea.setRangeText(replacement);
+            this.syncProgrammaticValue();
+            return;
+        }
+        this.nativeTextarea.setRangeText(replacement, start, end, selectionMode);
+        this.syncProgrammaticValue();
+    }
+    /** Define o intervalo selecionado no controle nativo. */
+    async setSelectionRange(start, end, direction) {
+        this.nativeTextarea?.setSelectionRange(start, end, direction);
+    }
+    /**
+     * Define um novo valor para o textarea.
+     * @param newValue - O novo valor a ser definido.
+     */
+    async setValue(newValue) {
+        this.value = newValue;
+    }
+    syncProgrammaticValue() {
+        if (!this.nativeTextarea || this.value === this.nativeTextarea.value)
+            return;
+        this.value = this.nativeTextarea.value;
+        this.syncFormState(this.value);
+        this.updateValidity();
+    }
+    syncFormState(value = this.value ?? '') {
+        safeSetFormValue(this.elementInternals, value);
+    }
+    isDisabled() {
+        return isFormControlDisabled(this.disabled, this.formDisabled);
+    }
+    updateValidity() {
+        if (this.nativeTextarea) {
+            this.nativeTextarea.setCustomValidity(this.manualValidationMessage || this.validatorMessage || '');
+        }
+        syncNativeFormValidity(this.elementInternals, this.nativeTextarea);
+    }
+    resolveValidator() {
+        return resolveFormValidator(this.validator);
+    }
+    checkSlotContent() {
+        this.hasDefaultSlot = hasDefaultLightDomContent(this.el);
+        this.hasFeedbackSlot = this.el.querySelector('[slot="feedback"]') !== null;
+    }
+    /**
+     * Retorna os ids para o atributo aria-describedby do textarea
+     */
+    getDescribedBy() {
+        return [
+            this.showCounter ? `${this.customId}-limitMax` : null,
+            `${this.customId}-slotInfo`,
+            this.hasFeedbackSlot || this.validatorMessage ? `${this.customId}-feedback` : null,
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    renderFeedback() {
+        return (h("div", { id: `${this.customId}-feedback`, part: "feedback", hidden: !this.hasFeedbackSlot && !this.validatorMessage }, h("slot", { name: "feedback", onSlotchange: (event) => (this.hasFeedbackSlot = hasAssignedSlotContent(event.currentTarget)) }), !this.hasFeedbackSlot && this.validatorMessage ? (h("br-message", { state: "danger", message: this.validatorMessage })) : null));
+    }
+    renderValidationLoading() {
+        if (!this.isValidating)
+            return null;
+        return this.hasValidationLoadingSlot ? (h("slot", { name: "validation-loading" })) : (h("br-loading", { size: "small", label: "Validando" }));
+    }
+    /**
+     * Determina o texto a ser usado para acessibilidade quando não há label
+     * Ordem de prioridade:
+     *  - aria-label do elemento host
+     *  - propriedade ariaLabel do componente
+     *  - placeholder
+     *  - texto padrão ("Campo de texto")
+     */
+    getAccessibilityLabel() {
+        const hostAriaLabel = this.el.getAttribute('aria-label');
+        return hostAriaLabel && hostAriaLabel.trim() !== ''
+            ? hostAriaLabel
+            : this.ariaLabel && this.ariaLabel.trim() !== ''
+                ? this.ariaLabel
+                : this.placeholder && this.placeholder.trim() !== ''
+                    ? this.placeholder
+                    : 'Campo de texto';
+    }
+    getCssClassMap() {
+        return {
+            'br-textarea': true,
+            small: this.density === 'small',
+            medium: this.density === 'medium',
+            large: this.density === 'large',
+            success: (this.feedbackState ?? this.state) === 'success',
+            danger: (this.feedbackState ?? this.state) === 'danger',
+            warning: (this.feedbackState ?? this.state) === 'warning',
+        };
+    }
+    // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: render combina estados de validação, slot auxiliar e contador acessível.
+    render() {
+        const caracteresRestantes = this.maxlength - this.currentLength;
+        const mostrarLimite = this.currentLength > 0;
+        const hasLabel = !!this.label;
+        return (h(Host, { key: 'af0a356f9f203ee6e01091dd5991a45c136ebdab' }, h("div", { key: 'a53b151c9adeca2d00ba8a07e3e0382e13888d2c', class: this.getCssClassMap(), part: "container" }, (this.inline ?? this.isInline) ? (h("div", { class: "row" }, h("div", { class: "col-auto pt-half" }, h("label", { part: "label", htmlFor: this.customId }, this.label)), h("div", { class: "col" }, h("textarea", { part: "textarea", ref: (el) => (this.nativeTextarea = el), id: this.customId, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.isDisabled(), required: this.required, readOnly: this.readonly, onInput: this.handleInput, onChange: this.handleChange, rows: this.rows > 0 ? this.rows : undefined, cols: this.cols > 0 ? this.cols : undefined, maxLength: this.maxlength > 0 ? this.maxlength : undefined, minLength: this.minlength > 0 ? this.minlength : undefined, "aria-describedby": this.getDescribedBy(), "aria-busy": this.isValidating ? 'true' : null, ...(!hasLabel ? { 'aria-label': this.getAccessibilityLabel() } : {}) }), this.renderFeedback(), this.renderValidationLoading(), h("div", { class: "mt-1 text-base", part: "counter" }, this.showCounter && (h("div", null, mostrarLimite ? (h("span", { class: "restantes", "aria-live": "polite", role: "status", id: `${this.customId}-limitMax`, part: "counter-text" }, "Restam ", h("strong", null, caracteresRestantes), " caracteres")) : (h("span", { class: "limit", "aria-live": "polite", id: `${this.customId}-limitMax`, part: "counter-text" }, "Limite m\u00E1ximo de ", h("strong", null, this.maxlength), " caracteres")))), this.hasDefaultSlot && (h("div", { id: `${this.customId}-slotInfo`, "aria-live": "polite", part: "helper" }, h("slot", null))))))) : (h("div", null, hasLabel ? (h("label", { part: "label", htmlFor: this.customId }, this.label)) : null, h("textarea", { part: "textarea", ref: (el) => (this.nativeTextarea = el), id: this.customId, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.isDisabled(), required: this.required, readOnly: this.readonly, onInput: this.handleInput, onChange: this.handleChange, rows: this.rows > 0 ? this.rows : undefined, cols: this.cols > 0 ? this.cols : undefined, maxLength: this.maxlength > 0 ? this.maxlength : undefined, minLength: this.minlength > 0 ? this.minlength : undefined, "aria-describedby": this.getDescribedBy(), "aria-busy": this.isValidating ? 'true' : null, ...(!hasLabel ? { 'aria-label': this.getAccessibilityLabel() } : {}) }), this.renderFeedback(), this.renderValidationLoading(), this.showCounter ? (h("div", { part: "counter" }, mostrarLimite ? (h("span", { class: "restantes", "aria-live": "polite", role: "status", id: `${this.customId}-limitMax`, part: "counter-text" }, "Restam ", h("strong", null, caracteresRestantes), " caracteres")) : (h("span", { class: "limit", "aria-live": "polite", id: `${this.customId}-limitMax`, part: "counter-text" }, "Limite m\u00E1ximo de ", h("strong", null, this.maxlength), " caracteres")))) : null, this.hasDefaultSlot ? (h("div", { id: `${this.customId}-slotInfo`, "aria-live": "polite", part: "helper" }, h("slot", null))) : null)))));
+    }
+    static get is() { return "br-textarea"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    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 exibido no textarea.\nPode ser alterado pelo usu\u00E1rio se a propriedade `readonly` n\u00E3o estiver ativa."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto exibido como r\u00F3tulo do input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "label"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto exibido dentro do input quando est\u00E1 vazio, fornecendo uma dica ou sugest\u00E3o ao usu\u00E1rio."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "placeholder"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto alternativo para acessibilidade quando n\u00E3o h\u00E1 label vis\u00EDvel.\nFornece um r\u00F3tulo para tecnologias assistivas sem exibir visualmente."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "aria-label"
+            },
+            "customId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identificador \u00FAnico.\nCaso n\u00E3o seja fornecido, um ID gerado automaticamente ser\u00E1 usado."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "custom-id",
+                "defaultValue": "generateUniqueId()"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Nome do campo para identifica\u00E7\u00E3o no formul\u00E1rio.\nNecess\u00E1rio para participa\u00E7\u00E3o correta no envio de formul\u00E1rios e integra\u00E7\u00E3o com frameworks."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name"
+            },
+            "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."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Se verdadeiro, o input \u00E9 obrigat\u00F3rio e deve ser preenchido antes que o formul\u00E1rio possa ser enviado."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Impede edi\u00E7\u00E3o sem remover o campo do envio do formul\u00E1rio."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "minlength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "N\u00FAmero m\u00EDnimo de caracteres necess\u00E1rio para o valor ser v\u00E1lido."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "minlength",
+                "defaultValue": "0"
+            },
+            "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."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "maxlength",
+                "defaultValue": "0"
+            },
+            "showCounter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mostra o contador com a quantidade m\u00E1xima de caracteres."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "show-counter",
+                "defaultValue": "false"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'danger' | 'success' | 'warning'",
+                    "resolved": "\"danger\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o estado visual do componente, podendo ser 'danger', 'success' ou 'warning'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "state"
+            },
+            "feedbackState": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'danger' | 'success' | 'warning'",
+                    "resolved": "\"danger\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Estado de feedback can\u00F4nico. Quando informado, tem preced\u00EAncia sobre `state`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "feedback-state"
+            },
+            "validator": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputValidator | string",
+                    "resolved": "((value: string) => string | Promise<string>) | string",
+                    "references": {
+                        "InputValidator": {
+                            "location": "import",
+                            "path": "../input/input.types",
+                            "id": "src/components/input/input.types.ts::InputValidator",
+                            "referenceLocation": "InputValidator"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Regra s\u00EDncrona ou ass\u00EDncrona executada no `change` ou por `validate()`.\nPode consultar um servi\u00E7o remoto; o componente controla apenas loading,\nvalidade e a preced\u00EAncia do resultado mais recente."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "validator"
+            },
+            "density": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Ajusta a densidade do componente, podendo ser 'small', 'medium' ou 'large'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "density",
+                "defaultValue": "'medium'"
+            },
+            "isInline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `inline`."
+                        }],
+                    "text": "Se verdadeiro, o r\u00F3tulo e o input estar\u00E3o na mesma linha (layout inline)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "is-inline",
+                "defaultValue": "false"
+            },
+            "inline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Exibe r\u00F3tulo e controle em linha. Quando informada, tem preced\u00EAncia sobre `isInline`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "inline"
+            },
+            "rows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "N\u00FAmero de linhas vis\u00EDveis no textarea.\nDefine a altura do componente em rela\u00E7\u00E3o ao n\u00FAmero de linhas de texto exibidas."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "rows"
+            },
+            "cols": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "N\u00FAmero de colunas (caracteres) vis\u00EDveis no textarea.\nDefine a largura do componente em rela\u00E7\u00E3o ao n\u00FAmero de caracteres por linha."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "cols"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "formDisabled": {},
+            "hasDefaultSlot": {},
+            "hasFeedbackSlot": {},
+            "hasValidationLoadingSlot": {},
+            "isValidating": {},
+            "validatorMessage": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use o evento nativo `input` e leia `event.target.value`."
+                        }],
+                    "text": "Valor atualizado do textarea"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "brTextareaValidationChange",
+                "name": "brTextareaValidationChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Informa o in\u00EDcio e o resultado do validator; o `detail` cont\u00E9m\n`validating`, `valid` e `message`."
+                },
+                "complexType": {
+                    "original": "InputValidationChangeDetail",
+                    "resolved": "InputValidationChangeDetail",
+                    "references": {
+                        "InputValidationChangeDetail": {
+                            "location": "import",
+                            "path": "../input/input.types",
+                            "id": "src/components/input/input.types.ts::InputValidationChangeDetail",
+                            "referenceLocation": "InputValidationChangeDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "checkValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Retorna `true` se o valor do textarea for v\u00E1lido, caso contr\u00E1rio `false`.\nSe o textarea for inv\u00E1lido, dispara um evento 'invalid'.",
+                    "tags": []
+                }
+            },
+            "reportValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Retorna `true` se o valor do textarea for v\u00E1lido, caso contr\u00E1rio `false`.\nSe for inv\u00E1lido, exibe a mensagem de erro padr\u00E3o do navegador.",
+                    "tags": []
+                }
+            },
+            "setCustomValidity": {
+                "complexType": {
+                    "signature": "(message: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "message",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Define uma mensagem de valida\u00E7\u00E3o customizada para o textarea.\nSe a mensagem for uma string vazia, o erro customizado \u00E9 limpo.",
+                    "tags": []
+                }
+            },
+            "validate": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Executa o validator customizado e retorna se o textarea est\u00E1 v\u00E1lido.",
+                    "tags": []
+                }
+            },
+            "getValidationState": {
+                "complexType": {
+                    "signature": "() => Promise<FormValidationState>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FormValidationState": {
+                            "location": "import",
+                            "path": "../../shared/utils/form",
+                            "id": "src/shared/utils/form.ts::FormValidationState",
+                            "referenceLocation": "FormValidationState"
+                        }
+                    },
+                    "return": "Promise<FormValidationState>"
+                },
+                "docs": {
+                    "text": "Retorna um snapshot serializ\u00E1vel da Constraint Validation API.",
+                    "tags": []
+                }
+            },
+            "select": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Seleciona todo o texto do controle nativo, conforme HTMLTextAreaElement.select().",
+                    "tags": []
+                }
+            },
+            "setRangeText": {
+                "complexType": {
+                    "signature": "(replacement: string, start?: number, end?: number, selectionMode?: SelectionMode) => Promise<void>",
+                    "parameters": [{
+                            "name": "replacement",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "start",
+                            "type": "number",
+                            "docs": ""
+                        }, {
+                            "name": "end",
+                            "type": "number",
+                            "docs": ""
+                        }, {
+                            "name": "selectionMode",
+                            "type": "\"start\" | \"end\" | \"select\" | \"preserve\"",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "SelectionMode": {
+                            "location": "global",
+                            "id": "global::SelectionMode"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Substitui um intervalo de texto usando a API nativa do textarea.",
+                    "tags": []
+                }
+            },
+            "setSelectionRange": {
+                "complexType": {
+                    "signature": "(start: number, end: number, direction?: \"forward\" | \"backward\" | \"none\") => Promise<void>",
+                    "parameters": [{
+                            "name": "start",
+                            "type": "number",
+                            "docs": ""
+                        }, {
+                            "name": "end",
+                            "type": "number",
+                            "docs": ""
+                        }, {
+                            "name": "direction",
+                            "type": "\"none\" | \"forward\" | \"backward\"",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Define o intervalo selecionado no controle nativo.",
+                    "tags": []
+                }
+            },
+            "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"; }
+}