voa-ds-core 1.0.3

package/dist/collection/components/voa-text-area/voa-text-area.js

@@ -0,0 +1,519 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Componente de área de texto para entrada de textos longos
+ * @part base - The root host element
+ * @part container - The resizable wrapper
+ * @part textarea - The native textarea
+ */
+export class VoaTextArea {
+    constructor() {
+        this.info = false;
+        this.infoText = 'Identificador único';
+        this.value = '';
+        this.disabled = false;
+        this.readonly = false;
+        this.required = false;
+        this.rows = 4;
+        this.cols = 20;
+        this.hasError = false;
+        this.internalValue = '';
+        this.isFocused = false;
+        this.characterCount = 0;
+        this.handleInput = (event) => {
+            const textarea = event.target;
+            this.internalValue = textarea.value;
+            this.characterCount = this.internalValue.length;
+            this.updateFormInternals();
+            this.voaInput.emit(this.internalValue);
+        };
+        this.handleChange = (event) => {
+            event.stopPropagation(); // Stop native change, emit ours
+            this.voaChange.emit(this.internalValue);
+        };
+        this.handleFocus = (event) => {
+            this.isFocused = true;
+            this.voaFocus.emit(event);
+        };
+        this.handleBlur = (event) => {
+            this.isFocused = false;
+            this.voaBlur.emit(event);
+        };
+        // --- RESIZE LOGIC FIXED ---
+        // We resize the CONTAINER, not the textarea.
+        this.startResize = (event) => {
+            event.preventDefault();
+            if (this.disabled || this.readonly || !this.containerRef)
+                return;
+            const startX = event.clientX;
+            const startY = event.clientY;
+            // Get current dimensions of the container
+            const startWidth = this.containerRef.offsetWidth;
+            const startHeight = this.containerRef.offsetHeight;
+            const doDrag = (e) => {
+                // Apply style to CONTAINER
+                // Using requestAnimationFrame for performance is better, but this is simple enough for now
+                this.containerRef.style.width = `${Math.max(100, startWidth + e.clientX - startX)}px`;
+                this.containerRef.style.height = `${Math.max(60, startHeight + e.clientY - startY)}px`;
+            };
+            const stopDrag = () => {
+                document.removeEventListener('mousemove', doDrag);
+                document.removeEventListener('mouseup', stopDrag);
+            };
+            document.addEventListener('mousemove', doDrag);
+            document.addEventListener('mouseup', stopDrag);
+        };
+        this.renderInfoIcon = () => (h("svg", { part: "label-info-icon", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "aria-hidden": "true" }, h("circle", { cx: "12", cy: "12", r: "10" }), h("line", { x1: "12", y1: "16", x2: "12", y2: "12" }), h("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })));
+        this.renderResizeIcon = () => (h("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.05113 0.603577L0.603577 8.05113M8.60358 4.87979L4.8798 8.60356", stroke: "#9F9FA8", "stroke-width": "1.20716", "stroke-linecap": "round" })));
+    }
+    componentWillLoad() {
+        this.uniqueId = this.textareaId || `voa-textarea-${Math.random().toString(36).substr(2, 9)}`;
+        this.internalValue = this.value || '';
+        this.characterCount = this.internalValue.length;
+        this.updateFormInternals();
+    }
+    valueChanged(newValue) {
+        this.internalValue = newValue || '';
+        this.characterCount = this.internalValue.length;
+        this.updateFormInternals();
+    }
+    updateFormInternals() {
+        this.internals.setFormValue(this.internalValue);
+        // Aria-invalid is handled on the element in render, but could be done here too if delegating to host
+    }
+    async setFocus() {
+        // Delegates focus handles this mostly, but good for imperative usage
+        this.host.focus();
+    }
+    render() {
+        return (h(Host, { key: '4863d0e217fc5c37d0275ca3476b7239452d7310', part: "base" }, this.label && (h("div", { key: '2294cb8fec9ac4d69a3338433446b4a7af8cba37', part: "label-wrapper", class: "label-wrapper" }, h("label", { key: 'f2dd830852ee8a25cfb2df554152d52e531a16aa', part: "label", htmlFor: this.uniqueId, class: "label-text" }, this.label, this.required && h("span", { key: '6a07b71db5dc48a8fda14eeb552c50efba749910', part: "required-indicator", class: "required-indicator", "aria-hidden": "true" }, "*")), this.info && (h("div", { key: '6554c892f4ad12767ce0e277ce549e122bbc2344', part: "label-info", class: "label-info" }, h("span", { key: 'd64319dc7d829755d9dba7f2d7cfff951f4dbc06', part: "label-info-text" }, this.infoText), this.renderInfoIcon())))), h("div", { key: '847bdb142109d2d2d194fdd245ee814bd3f04a01', part: "container", ref: el => this.containerRef = el, class: {
+                'textarea-container': true,
+                'is-focused': this.isFocused,
+                'has-error': this.hasError,
+                'is-disabled': this.disabled,
+                'is-readonly': this.readonly
+            } }, h("textarea", { key: 'a33fa897e0f5968ff30dbb9e70fe447f9b3cf85d', part: "textarea", id: this.uniqueId, name: this.name, placeholder: this.placeholder, value: this.internalValue, maxlength: this.maxLength, disabled: this.disabled, readonly: this.readonly, required: this.required, rows: this.rows, cols: this.cols, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, "aria-invalid": this.hasError ? 'true' : undefined, "aria-describedby": this.hasError && this.errorMessage ? `${this.uniqueId}-error` : undefined }), !this.disabled && !this.readonly && (h("div", { key: '76e74755cbfb891e5f0a49cbbdacab279a13af1b', part: "resize-handle", class: "resize-handle", onMouseDown: this.startResize, role: "presentation" // Simplified for now
+        }, this.renderResizeIcon()))), h("div", { key: 'b35e24d979f5e81e0c8c18923a42f4ab2e2eb60b', part: "footer", class: "footer" }, this.hasError && this.errorMessage ? (h("div", { part: "error-message", class: "error-message", id: `${this.uniqueId}-error`, role: "alert" }, this.errorMessage)) : (h("span", null)), h("div", { key: 'acb48ce620a7c5c5874c1031ab546dd9743e0368', part: "character-counter", class: "character-counter" }, h("span", { key: '62fa045a61394dd4aa768f3df03de8064a947f49' }, this.characterCount), this.maxLength && h("span", { key: '9382b64570176e88773c8a7117d5677bcb9ab44c' }, "/ ", this.maxLength)))));
+    }
+    static get is() { return "voa-text-area"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["voa-text-area.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["voa-text-area.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "textareaId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "textarea-id"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "info": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "info",
+                "defaultValue": "false"
+            },
+            "infoText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "info-text",
+                "defaultValue": "'Identificador \u00FAnico'"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "maxLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-length"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "rows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rows",
+                "defaultValue": "4"
+            },
+            "cols": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cols",
+                "defaultValue": "20"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message"
+            },
+            "hasError": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "has-error",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalValue": {},
+            "isFocused": {},
+            "characterCount": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "voaChange",
+                "name": "voaChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "voaInput",
+                "name": "voaInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "voaFocus",
+                "name": "voaFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "voaBlur",
+                "name": "voaBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=voa-text-area.js.map

package/dist/collection/components/voa-text-area/voa-text-area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"voa-text-area.js","sourceRoot":"","sources":["../../../src/components/voa-text-area/voa-text-area.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, EventEmitter, Method, Element, h, Host, Watch, AttachInternals } from '@stencil/core';\r\n\r\n/**\r\n * Componente de área de texto para entrada de textos longos\r\n * @part base - The root host element\r\n * @part container - The resizable wrapper\r\n * @part textarea - The native textarea\r\n */\r\n@Component({\r\n  tag: 'voa-text-area',\r\n  styleUrl: 'voa-text-area.css',\r\n  shadow: {\r\n    delegatesFocus: true\r\n  },\r\n  formAssociated: true\r\n})\r\nexport class VoaTextArea {\r\n  @Element() host: HTMLVoaTextAreaElement;\r\n  @AttachInternals() internals: ElementInternals;\r\n\r\n  @Prop() textareaId?: string;\r\n  @Prop() name?: string;\r\n  @Prop() label?: string;\r\n  @Prop() info?: boolean = false;\r\n  @Prop() infoText?: string = 'Identificador único';\r\n  @Prop() placeholder?: string;\r\n  @Prop() value?: string = '';\r\n  @Prop() maxLength?: number;\r\n  @Prop({ reflect: true }) disabled?: boolean = false;\r\n  @Prop({ reflect: true }) readonly?: boolean = false;\r\n  @Prop() required?: boolean = false;\r\n  @Prop() rows?: number = 4;\r\n  @Prop() cols?: number = 20;\r\n  @Prop() errorMessage?: string;\r\n  @Prop({ reflect: true }) hasError?: boolean = false;\r\n\r\n  @State() internalValue: string = '';\r\n  @State() isFocused: boolean = false;\r\n  @State() characterCount: number = 0;\r\n\r\n  // Stable ID for ARIA\r\n  private uniqueId: string;\r\n  private containerRef?: HTMLDivElement;\r\n\r\n  @Event() voaChange: EventEmitter<string>;\r\n  @Event() voaInput: EventEmitter<string>;\r\n  @Event() voaFocus: EventEmitter<FocusEvent>;\r\n  @Event() voaBlur: EventEmitter<FocusEvent>;\r\n\r\n  componentWillLoad() {\r\n    this.uniqueId = this.textareaId || `voa-textarea-${Math.random().toString(36).substr(2, 9)}`;\r\n    this.internalValue = this.value || '';\r\n    this.characterCount = this.internalValue.length;\r\n    this.updateFormInternals();\r\n  }\r\n\r\n  @Watch('value')\r\n  valueChanged(newValue: string) {\r\n    this.internalValue = newValue || '';\r\n    this.characterCount = this.internalValue.length;\r\n    this.updateFormInternals();\r\n  }\r\n\r\n  private updateFormInternals() {\r\n    this.internals.setFormValue(this.internalValue);\r\n    // Aria-invalid is handled on the element in render, but could be done here too if delegating to host\r\n  }\r\n\r\n  private handleInput = (event: Event) => {\r\n    const textarea = event.target as HTMLTextAreaElement;\r\n    this.internalValue = textarea.value;\r\n    this.characterCount = this.internalValue.length;\r\n\r\n    this.updateFormInternals();\r\n    this.voaInput.emit(this.internalValue);\r\n  };\r\n\r\n  private handleChange = (event: Event) => {\r\n    event.stopPropagation(); // Stop native change, emit ours\r\n    this.voaChange.emit(this.internalValue);\r\n  };\r\n\r\n  private handleFocus = (event: FocusEvent) => {\r\n    this.isFocused = true;\r\n    this.voaFocus.emit(event);\r\n  };\r\n\r\n  private handleBlur = (event: FocusEvent) => {\r\n    this.isFocused = false;\r\n    this.voaBlur.emit(event);\r\n  };\r\n\r\n  @Method()\r\n  async setFocus(): Promise<void> {\r\n    // Delegates focus handles this mostly, but good for imperative usage\r\n    this.host.focus();\r\n  }\r\n\r\n  // --- RESIZE LOGIC FIXED ---\r\n  // We resize the CONTAINER, not the textarea.\r\n  private startResize = (event: MouseEvent) => {\r\n    event.preventDefault();\r\n    if (this.disabled || this.readonly || !this.containerRef) return;\r\n\r\n    const startX = event.clientX;\r\n    const startY = event.clientY;\r\n\r\n    // Get current dimensions of the container\r\n    const startWidth = this.containerRef.offsetWidth;\r\n    const startHeight = this.containerRef.offsetHeight;\r\n\r\n    const doDrag = (e: MouseEvent) => {\r\n      // Apply style to CONTAINER\r\n      // Using requestAnimationFrame for performance is better, but this is simple enough for now\r\n      this.containerRef.style.width = `${Math.max(100, startWidth + e.clientX - startX)}px`;\r\n      this.containerRef.style.height = `${Math.max(60, startHeight + e.clientY - startY)}px`;\r\n    };\r\n\r\n    const stopDrag = () => {\r\n      document.removeEventListener('mousemove', doDrag);\r\n      document.removeEventListener('mouseup', stopDrag);\r\n    };\r\n\r\n    document.addEventListener('mousemove', doDrag);\r\n    document.addEventListener('mouseup', stopDrag);\r\n  };\r\n\r\n  private renderInfoIcon = () => (\r\n    <svg part=\"label-info-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\r\n      <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\r\n      <line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"></line>\r\n      <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"></line>\r\n    </svg>\r\n  );\r\n\r\n  private renderResizeIcon = () => (\r\n    <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path d=\"M8.05113 0.603577L0.603577 8.05113M8.60358 4.87979L4.8798 8.60356\" stroke=\"#9F9FA8\" stroke-width=\"1.20716\" stroke-linecap=\"round\" />\r\n    </svg>\r\n  );\r\n\r\n  render() {\r\n    return (\r\n      <Host part=\"base\">\r\n        {this.label && (\r\n          <div part=\"label-wrapper\" class=\"label-wrapper\">\r\n            <label part=\"label\" htmlFor={this.uniqueId} class=\"label-text\">\r\n              {this.label}\r\n              {this.required && <span part=\"required-indicator\" class=\"required-indicator\" aria-hidden=\"true\">*</span>}\r\n            </label>\r\n            {this.info && (\r\n              <div part=\"label-info\" class=\"label-info\">\r\n                <span part=\"label-info-text\">{this.infoText}</span>\r\n                {this.renderInfoIcon()}\r\n              </div>\r\n            )}\r\n          </div>\r\n        )}\r\n\r\n        <div\r\n          part=\"container\"\r\n          ref={el => this.containerRef = el}\r\n          class={{\r\n            'textarea-container': true,\r\n            'is-focused': this.isFocused,\r\n            'has-error': this.hasError,\r\n            'is-disabled': this.disabled,\r\n            'is-readonly': this.readonly\r\n          }}\r\n        >\r\n          <textarea\r\n            part=\"textarea\"\r\n            id={this.uniqueId}\r\n            name={this.name}\r\n            placeholder={this.placeholder}\r\n            value={this.internalValue}\r\n            maxlength={this.maxLength}\r\n            disabled={this.disabled}\r\n            readonly={this.readonly}\r\n            required={this.required}\r\n            rows={this.rows}\r\n            cols={this.cols}\r\n            onInput={this.handleInput}\r\n            onChange={this.handleChange}\r\n            onFocus={this.handleFocus}\r\n            onBlur={this.handleBlur}\r\n            aria-invalid={this.hasError ? 'true' : undefined}\r\n            aria-describedby={this.hasError && this.errorMessage ? `${this.uniqueId}-error` : undefined}\r\n          />\r\n\r\n          {/* Resize Handle - Visual Only, Mouse only for this simple implementation. \r\n              Native resize is disabled via CSS. */}\r\n          {!this.disabled && !this.readonly && (\r\n            <div\r\n              part=\"resize-handle\"\r\n              class=\"resize-handle\"\r\n              onMouseDown={this.startResize}\r\n              role=\"presentation\" // Simplified for now\r\n            >\r\n              {this.renderResizeIcon()}\r\n            </div>\r\n          )}\r\n        </div>\r\n\r\n        <div part=\"footer\" class=\"footer\">\r\n          {this.hasError && this.errorMessage ? (\r\n            <div part=\"error-message\" class=\"error-message\" id={`${this.uniqueId}-error`} role=\"alert\">\r\n              {this.errorMessage}\r\n            </div>\r\n          ) : (<span></span>)}\r\n\r\n          <div part=\"character-counter\" class=\"character-counter\">\r\n            <span>{this.characterCount}</span>\r\n            {this.maxLength && <span>/ {this.maxLength}</span>}\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}"]}