@govbr-ds/webcomponents 2.0.0-next.2 → 2.0.0-next.21

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

@@ -0,0 +1,298 @@
+/*!
+ * 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";
+/**
+ * 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() {
+        /**
+         * 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 = undefined;
+        this.label = undefined;
+        this.placeholder = undefined;
+        this.disabled = false;
+        this.maxlength = 0;
+        this.state = undefined;
+        this.density = 'medium';
+        this.isInline = false;
+        this.currentLength = undefined;
+        this.customId = `br-textarea-${uuidv4()}`;
+    }
+    componentWillLoad() {
+        var _a;
+        this.currentLength = (_a = this.value) === null || _a === void 0 ? void 0 : _a.length;
+        this.inheritedAttributes = inheritAriaAttributes(this.el);
+    }
+    valueChanged() {
+        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 = (_a = this.value) === null || _a === void 0 ? void 0 : _a.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,
+            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: '175b5dfe33b9624b32700683a6939aa36f56c556' }, h("div", Object.assign({ key: '554c285ab7f21c8bed90e4280f45709c7abb5ecc', class: this.getCssClassMap() }, this.inheritedAttributes), h("div", { key: 'ef72baa9ce047ec87fa40b9410ba96e7797f1dc6', 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: '5a8c6c414089d046d05d1c4d60d833c81898b612', class: this.isInline ? 'col' : '' }, h("textarea", Object.assign({ key: '74e7ba7ea95c3fd184e9152a061e252eed9fc40a', id: this.customId, value: this.value, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleChange }, (this.maxlength > 0 ? { maxLength: this.maxlength } : {}))), h("div", { key: '3a13875598faa7a2eb05a9d67f3fdbd692a22291', class: "text-base mt-1" }, this.maxlength > 0 && (h("div", { key: 'b39abedd24e3727ce85b531eb7c8e9ea58268954' }, 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: '9965aeddd085909184d974c5829ee21e0651e390' }))))));
+    }
+    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
+            },
+            "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
+            },
+            "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
+            },
+            "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"
+            },
+            "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'."
+                },
+                "attribute": "state",
+                "reflect": true
+            },
+            "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'."
+                },
+                "attribute": "density",
+                "reflect": true,
+                "defaultValue": "'medium'"
+            },
+            "isInline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Se verdadeiro, o r\u00F3tulo e o input estar\u00E3o na mesma linha (layout inline)."
+                },
+                "attribute": "is-inline",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "customId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identificador \u00FAnico do textarea.\nCaso n\u00E3o seja fornecido, um ID gerado automaticamente ser\u00E1 usado."
+                },
+                "attribute": "id",
+                "reflect": true,
+                "defaultValue": "`br-textarea-${uuidv4()}`"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currentLength": {}
+        };
+    }
+    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 { 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"]}