wabtec-internal-volt-basic-components 1.2.0 → 1.4.0

package/dist/collection/components/textarea/vds-basic-textarea.js

@@ -1,62 +1,258 @@
 import { Host, h } from "@stencil/core";
 import { toggleFocusClass, setTouchedClass, setDirtyClass, maskInput, setInputStyles } from "../input/vds-basic-input.utils";
 import { combineClasses } from "../../utils/combine-classes";
-import { cloneAttributes } from "../../utils/clone-attributes";
 import spacingVars from "../../constants/spacing-vars";
 import { emitInputEvent } from "../../utils/form";
+import { setupAttributeSync } from "../../utils/attribute-sync";
+/**
+ * @component vds-basic-textarea
+ * @description A multi-line text input component with auto-grow functionality, character formatting, custom styling, and form integration. Supports different sizes, validation states, and accessibility features.
+ *
+ * @example
+ * <!-- Basic textarea -->
+ * <vds-basic-textarea
+ *   placeholder="Enter your message">
+ * </vds-basic-textarea>
+ *
+ * @example
+ * <!-- Textarea with value -->
+ * <vds-basic-textarea
+ *   value="Initial content"
+ *   placeholder="Description">
+ * </vds-basic-textarea>
+ *
+ * @example
+ * <!-- Small size textarea -->
+ * <vds-basic-textarea
+ *   size="small"
+ *   placeholder="Brief comment">
+ * </vds-basic-textarea>
+ *
+ * @example
+ * <!-- Large size textarea -->
+ * <vds-basic-textarea
+ *   size="large"
+ *   placeholder="Detailed description">
+ * </vds-basic-textarea>
+ *
+ * @example
+ * <!-- Required textarea with error state -->
+ * <vds-basic-textarea
+ *   is-required="true"
+ *   error="true"
+ *   placeholder="Required field">
+ * </vds-basic-textarea>
+ *
+ * @example
+ * <!-- Disabled textarea -->
+ * <vds-basic-textarea
+ *   disabled="true"
+ *   value="Cannot edit this content">
+ * </vds-basic-textarea>
+ *
+ * @example
+ * <!-- Readonly textarea -->
+ * <vds-basic-textarea
+ *   is-readonly="true"
+ *   value="Read-only content for display">
+ * </vds-basic-textarea>
+ *
+ * @example
+ * <!-- Fixed height textarea (autogrow disabled) -->
+ * <vds-basic-textarea
+ *   autogrow="false"
+ *   height="200px"
+ *   placeholder="Fixed height area">
+ * </vds-basic-textarea>
+ *
+ * @example
+ * <!-- Textarea with custom min/max height -->
+ * <vds-basic-textarea
+ *   autogrow="true"
+ *   min-height="100px"
+ *   max-height="300px"
+ *   placeholder="Auto-growing textarea">
+ * </vds-basic-textarea>
+ *
+ * @example
+ * <!-- Textarea with custom width -->
+ * <vds-basic-textarea
+ *   width="500px"
+ *   placeholder="Custom width textarea">
+ * </vds-basic-textarea>
+ *
+ * @example
+ * <!-- Textarea with action icons -->
+ * <vds-basic-textarea placeholder="Message">
+ *   <vds-icon-button
+ *     slot="primaryActionIcon"
+ *     icon="share"
+ *     aria-label="Send">
+ *   </vds-icon-button>
+ *   <vds-icon-button
+ *     slot="secondaryActionIcon"
+ *     icon="paperclip"
+ *     aria-label="Attach file">
+ *   </vds-icon-button>
+ * </vds-basic-textarea>
+ *
+ * @example
+ * <!-- Textarea with custom text styles -->
+ * <vds-basic-textarea
+ *   placeholder="Styled text">
+ * </vds-basic-textarea>
+ * <script>
+ *   const textarea = document.querySelector('vds-basic-textarea');
+ *   textarea.allowedStyles = [
+ *     { 'text-align': 'center' },
+ *     { 'text-transform': 'uppercase' }
+ *   ];
+ * </script>
+ *
+ * @example
+ * <!-- Complete form example -->
+ * <form id="feedback-form">
+ *   <vds-field label="Feedback" is-required="true">
+ *     <vds-basic-textarea
+ *       id="feedback"
+ *       name="feedback"
+ *       is-required="true"
+ *       placeholder="Please share your feedback"
+ *       min-height="120px"
+ *       max-height="400px">
+ *     </vds-basic-textarea>
+ *   </vds-field>
+ *   <button type="submit">Submit</button>
+ * </form>
+ *
+ * @example
+ * <!-- Textarea with programmatic control -->
+ * <vds-basic-textarea id="my-textarea" placeholder="Enter text"></vds-basic-textarea>
+ * <button id="clear-btn">Clear</button>
+ * <button id="focus-btn">Focus</button>
+ * <button id="get-value-btn">Get Value</button>
+ * <script>
+ *   const textarea = document.getElementById('my-textarea');
+ *
+ *   document.getElementById('clear-btn').addEventListener('click', async () => {
+ *     await textarea.clear();
+ *   });
+ *
+ *   document.getElementById('focus-btn').addEventListener('click', async () => {
+ *     await textarea.setFocus();
+ *   });
+ *
+ *   document.getElementById('get-value-btn').addEventListener('click', async () => {
+ *     const value = await textarea.getValue();
+ *     console.log('Current value:', value);
+ *   });
+ *
+ *   // Overwrite the textarea value programmatically
+ *   await textarea.setValue('New content set programmatically');
+ *
+ *   textarea.addEventListener('changeInput', (e) => {
+ *     console.log('Value changed:', e.detail);
+ *   });
+ * </script>
+ */
 export class VdsBasicTextarea {
     constructor() {
-        /** Sets the textarea's size. */
+        /**
+         * Sets the textarea's size
+         * @type {"small" | "medium" | "large"}
+         * @default "medium"
+         */
         this.size = "medium";
-        /** Sets the textarea's value. */
+        /**
+         * Sets the textarea's value
+         * @type {string}
+         * @default ""
+         */
         this.value = "";
-        /** Toggles the required sign in the field */
+        /**
+         * Toggles the required sign in the field
+         * @type {boolean}
+         * @default false
+         */
         this.isRequired = false;
-        /** Sets custom allowed styles to textarea (text-align, text-transform, unicode-bidi, direction) */
+        /**
+         * Sets custom allowed styles to textarea (text-align, text-transform, unicode-bidi, direction)
+         * @type {Array<{[key: string]: string}>}
+         * @default []
+         */
         this.allowedStyles = [];
-        /** Sets the min-height for the textarea. This property works combining with autogrow=true only.
-         * - Default for medium: '4.5rem'
-         * - Default for large: '6rem'
-         *
+        /**
+         * Sets the min-height for the textarea. This property works when autogrow is enabled.
+         * Default values: small='3rem', medium='4.5rem', large='6rem'
          * This value is automatically adjusted according to the 'size' property.
-         * @default '4.5rem' (when size is 'medium')
-        */
+         * @type {string}
+         * @default "4.5rem" (when size is 'medium')
+         */
         this.minHeight = this.size === "large" ? "6rem" : this.size === "small" ? "3rem" : "4.5rem";
-        /** Sets the max-height for the textarea. This property works combining with autogrow=true only.
-         * - Default for medium: '12.15rem'
-         * - Default for large: '18rem'
-         *
+        /**
+         * Sets the max-height for the textarea. This property works when autogrow is enabled.
+         * Default values: small/medium='12.15rem', large='18rem'
          * This value is automatically adjusted according to the 'size' property.
-         * @default '12.15rem' (when size is 'medium')
-        */
+         * @type {string}
+         * @default "12.15rem" (when size is 'medium')
+         */
         this.maxHeight = this.size === "large" ? "18rem" : "12.15rem";
-        /** Makes the textarea grows with its content. This property works combining with maxHeight and minHeight. This prop not works combining with property height defined. */
+        /**
+         * Makes the textarea grow with its content. Works with maxHeight and minHeight. Does not work when height is defined.
+         * @type {boolean}
+         * @default true
+         */
         this.autogrow = true;
     }
-    componentDidLoad() {
+    /**
+     * Lifecycle method that runs after component loads
+     * @private
+     */ componentDidLoad() {
         this.setFormValue();
+        this.cleanupAttributeSync = setupAttributeSync(this.hostEl, () => this.textAreaEl, ["width", "height", "min-height", "max-height", "autogrow"]);
+    }
+    /**
+     * Lifecycle method that runs when component is removed from DOM
+     * @private
+     */
+    disconnectedCallback() {
+        if (this.cleanupAttributeSync) {
+            this.cleanupAttributeSync();
+        }
     }
+    /**
+     * Watches value changes and updates form value
+     * @private
+     */
     setFormValue() {
-        emitInputEvent(this.hostEl, this.value);
+        const safeValue = this.getSafeValue();
+        emitInputEvent(this.hostEl, safeValue);
         if (this.internals && !!this.internals.setFormValue) {
-            this.internals.setFormValue(this.value);
+            this.internals.setFormValue(safeValue);
         }
     }
     /**
-     * Toggle class vds__textarea__container--focus in focus/blur textarea's event
-     *
-     * @returns void
+     * Returns a safe value (empty string if undefined)
+     * @private
+     * @returns {string} The safe value
+     */
+    getSafeValue() {
+        var _a;
+        return (_a = this.value) !== null && _a !== void 0 ? _a : "";
+    }
+    /**
+     * Toggles the focus class on the textarea container
+     * @private
+     * @returns {void}
      */
     toggleFocusClass() {
         this.textareaContainerRef && toggleFocusClass(this.textareaContainerRef, "textarea");
     }
     /**
-     * Sets value from textarea's event target.
-     * Emits change, input and changeInput events.
-     * Sets textarea as dirty when textarea's event is triggered.
-     * Executes formatter prop function on every inputed value.
-     *
-     * @returns void
+     * Handles input events on the textarea. Sets value, emits events, applies formatting, and sets dirty state.
+     * @private
+     * @param {InputEvent} evt - The input event
+     * @returns {void}
      */
     handleInput(evt) {
         evt.stopPropagation();
@@ -74,10 +270,10 @@ export class VdsBasicTextarea {
         this.hostEl.dispatchEvent(inputEvent);
     }
     /**
-     * Sets textarea inline styles for the allowedStyle, height and width
-     * [direction, text-align, textAlign, text-transform, textTransform, unicode-bidi, unicodeBidi]
-     *
-     * @returns { [key: string]: string }
+     * Sets textarea inline styles for allowed styles, height, and width.
+     * Supports: direction, text-align, textAlign, text-transform, textTransform, unicode-bidi, unicodeBidi
+     * @private
+     * @returns {{[key: string]: string}} Object containing CSS styles
      */
     setTextareaStyles() {
         const inputedStyles = Object.assign({}, setInputStyles(this.allowedStyles));
@@ -98,9 +294,10 @@ export class VdsBasicTextarea {
         return styles;
     }
     /**
-     * Sets textarea inline styles for the height and width
-     *
-     * @returns { [key: string]: string }
+     * Sets textarea inline styles for height and width properties
+     * @private
+     * @param {{[key: string]: string}} styles - Initial styles object
+     * @returns {{[key: string]: string}} Updated styles object
      */
     setSizesStyles(styles = {}) {
         if (this.width) {
@@ -118,18 +315,18 @@ export class VdsBasicTextarea {
         return styles;
     }
     /**
-       * Executes method when vds-textarea gets focus.
-       *
-       * @returns void
-       */
+     * Handles focus event on the textarea element
+     * @private
+     * @returns {void}
+     */
     handleFocus() {
         setTouchedClass(this.hostEl);
     }
     /**
-       * Sets focus on the vds-textarea element.
-       *
-       * @returns Promise<void>
-       */
+     * Sets focus on the textarea element
+     * @public
+     * @returns {Promise<void>} Promise that resolves when focus is set
+     */
     setFocus() {
         return new Promise((resolve) => {
             this.textAreaEl.focus();
@@ -137,19 +334,19 @@ export class VdsBasicTextarea {
         });
     }
     /**
-       * Gets value prop from the vds-textarea element.
-       *
-       * @returns Promise<string>
-       */
+     * Gets the current value from the textarea element
+     * @public
+     * @returns {Promise<string>} Promise that resolves with the current value
+     */
     getValue() {
         return new Promise((resolve) => {
-            resolve(this.value);
+            resolve(this.getSafeValue());
         });
     }
     /**
-     * Clears value prop from the vds-basic-textarea element.
-     *
-     * @returns Promise<void>
+     * Clears the value from the textarea element
+     * @public
+     * @returns {Promise<void>} Promise that resolves when value is cleared
      */
     clear() {
         return new Promise((resolve) => {
@@ -158,14 +355,31 @@ export class VdsBasicTextarea {
             resolve();
         });
     }
+    /**
+     * Sets a new value in the textarea element, overwriting the current one
+     * @public
+     * @param {string} newValue - The new value to set in the textarea
+     * @returns {Promise<void>} Promise that resolves when the value is set
+     */
+    setValue(newValue) {
+        return new Promise((resolve) => {
+            this.value = newValue;
+            this.textAreaEl.value = newValue;
+            resolve();
+        });
+    }
+    /**
+     * Renders the textarea component
+     * @returns {HTMLStencilElement} The rendered textarea element
+     */
     render() {
-        return (h(Host, { key: 'ce0880d208505fd7ce98188e0b42710c3fd0d901', class: this.disabled ? "vds-basic-textarea--disabled" : "" }, h("div", { key: '691447f20944dba91cde04da18c1700f5577dacc', ref: (el) => {
+        return (h(Host, { key: '198d2f3dbb113779f2abd3763d8214d0f8d382ca', class: this.disabled ? "vds-basic-textarea--disabled" : "", style: this.setSizesStyles() }, h("div", { key: 'c64e770a14231c22bd9f5161acbf517510cc6130', ref: (el) => {
                 if (el)
                     this.textareaContainerRef = el;
-            }, class: combineClasses("vds__textarea__container", `vds__textarea--size-${this.size}`, this.error && "vds__textarea__container--error", this.isReadonly && "vds__textarea__container--readonly", this.disabled && "vds__textarea__container--disabled"), style: this.setSizesStyles() }, h("textarea", Object.assign({ key: '2231289858287d7fa6ed08490b98d70e1e385a65', ref: (el) => {
+            }, class: combineClasses("vds__textarea__container", `vds__textarea--size-${this.size}`, this.error && "vds__textarea__container--error", this.isReadonly && "vds__textarea__container--readonly", this.disabled && "vds__textarea__container--disabled") }, h("textarea", { key: '46d86c351a9129e2b33da7d14d8230400e58040a', ref: (el) => {
                 if (el)
                     this.textAreaEl = el;
-            }, class: "vds__textarea", value: this.value, placeholder: this.placeholder, disabled: this.disabled, required: this.isRequired, readOnly: this.isReadonly, style: this.setTextareaStyles(), onInput: (evt) => this.handleInput(evt), onFocus: () => this.toggleFocusClass(), onBlur: () => this.toggleFocusClass() }, cloneAttributes(this.hostEl, "class", "value", "disabled", "placeholder", "label", "style"))), h("slot", { key: 'ba2ed5615fadab6c503c7a43b49dd90dcb18d40c', name: "secondaryActionIcon" }), h("slot", { key: '6b28d89f56daeb3260e05ec4bd4cb9af4f700e7a', name: "primaryActionIcon" }))));
+            }, class: "vds__textarea", value: this.getSafeValue(), placeholder: this.placeholder, disabled: this.disabled, required: this.isRequired, readOnly: this.isReadonly, style: this.setTextareaStyles(), onInput: (evt) => this.handleInput(evt), onFocus: () => this.toggleFocusClass(), onBlur: () => this.toggleFocusClass() }), h("slot", { key: '7a1e2dcbf0e27733f2a8037025982ac16e300373', name: "secondaryActionIcon" }), h("slot", { key: '429c3af35fadf1add40d28d01b2d70e3d0735a49', name: "primaryActionIcon" }))));
     }
     static get is() { return "vds-basic-textarea"; }
     static get encapsulation() { return "shadow"; }
@@ -193,8 +407,14 @@ export class VdsBasicTextarea {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the textarea's size."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{\"small\" | \"medium\" | \"large\"}"
+                        }, {
+                            "name": "default",
+                            "text": "\"medium\""
+                        }],
+                    "text": "Sets the textarea's size"
                 },
                 "getter": false,
                 "setter": false,
@@ -213,12 +433,18 @@ export class VdsBasicTextarea {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the textarea's value."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "\"\""
+                        }],
+                    "text": "Sets the textarea's value"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "value",
                 "defaultValue": "\"\""
             },
@@ -233,12 +459,15 @@ export class VdsBasicTextarea {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the textarea's placeholder."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
+                    "text": "Sets the textarea's placeholder text"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "placeholder"
             },
             "disabled": {
@@ -252,12 +481,15 @@ export class VdsBasicTextarea {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the textarea in disabled state."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }],
+                    "text": "Sets the textarea in disabled state"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "disabled"
             },
             "isReadonly": {
@@ -271,12 +503,15 @@ export class VdsBasicTextarea {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the textarea in readonly state."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }],
+                    "text": "Sets the textarea in readonly state"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "is-readonly"
             },
             "error": {
@@ -290,12 +525,15 @@ export class VdsBasicTextarea {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the textarea in error state."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }],
+                    "text": "Sets the textarea in error state"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
+                "reflect": false,
                 "attribute": "error"
             },
             "isRequired": {
@@ -309,7 +547,13 @@ export class VdsBasicTextarea {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "Toggles the required sign in the field"
                 },
                 "getter": false,
@@ -334,7 +578,10 @@ export class VdsBasicTextarea {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{Function}"
+                        }],
                     "text": "Sets character formatting for user inputs. Useful for adding a mask to the textarea."
                 },
                 "getter": false,
@@ -351,7 +598,13 @@ export class VdsBasicTextarea {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{Array<{[key: string]: string}>}"
+                        }, {
+                            "name": "default",
+                            "text": "[]"
+                        }],
                     "text": "Sets custom allowed styles to textarea (text-align, text-transform, unicode-bidi, direction)"
                 },
                 "getter": false,
@@ -369,8 +622,11 @@ export class VdsBasicTextarea {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the width of the textarea."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
+                    "text": "Sets the width of the textarea"
                 },
                 "getter": false,
                 "setter": false,
@@ -388,8 +644,11 @@ export class VdsBasicTextarea {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the height of the textarea. This prop not works combining with autogrow=true."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
+                    "text": "Sets the height of the textarea. This prop does not work when autogrow is enabled."
                 },
                 "getter": false,
                 "setter": false,
@@ -408,10 +667,13 @@ export class VdsBasicTextarea {
                 "optional": false,
                 "docs": {
                     "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
                             "name": "default",
-                            "text": "'4.5rem' (when size is 'medium')"
+                            "text": "\"4.5rem\" (when size is 'medium')"
                         }],
-                    "text": "Sets the min-height for the textarea. This property works combining with autogrow=true only. \n- Default for medium: '4.5rem'\n- Default for large: '6rem'\n\nThis value is automatically adjusted according to the 'size' property."
+                    "text": "Sets the min-height for the textarea. This property works when autogrow is enabled.\nDefault values: small='3rem', medium='4.5rem', large='6rem'\nThis value is automatically adjusted according to the 'size' property."
                 },
                 "getter": false,
                 "setter": false,
@@ -431,10 +693,13 @@ export class VdsBasicTextarea {
                 "optional": false,
                 "docs": {
                     "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
                             "name": "default",
-                            "text": "'12.15rem' (when size is 'medium')"
+                            "text": "\"12.15rem\" (when size is 'medium')"
                         }],
-                    "text": "Sets the max-height for the textarea. This property works combining with autogrow=true only. \n- Default for medium: '12.15rem'\n- Default for large: '18rem'\n\nThis value is automatically adjusted according to the 'size' property."
+                    "text": "Sets the max-height for the textarea. This property works when autogrow is enabled.\nDefault values: small/medium='12.15rem', large='18rem'\nThis value is automatically adjusted according to the 'size' property."
                 },
                 "getter": false,
                 "setter": false,
@@ -453,8 +718,14 @@ export class VdsBasicTextarea {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Makes the textarea grows with its content. This property works combining with maxHeight and minHeight. This prop not works combining with property height defined."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Makes the textarea grow with its content. Works with maxHeight and minHeight. Does not work when height is defined."
                 },
                 "getter": false,
                 "setter": false,
@@ -472,7 +743,13 @@ export class VdsBasicTextarea {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "event",
+                            "text": "changeInput"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<string>}"
+                        }],
                     "text": "Emits updated textarea value"
                 },
                 "complexType": {
@@ -497,10 +774,13 @@ export class VdsBasicTextarea {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Sets focus on the vds-textarea element.",
+                    "text": "Sets focus on the textarea element",
                     "tags": [{
+                            "name": "public",
+                            "text": undefined
+                        }, {
                             "name": "returns",
-                            "text": "Promise<void>"
+                            "text": "Promise that resolves when focus is set"
                         }]
                 }
             },
@@ -517,10 +797,13 @@ export class VdsBasicTextarea {
                     "return": "Promise<string>"
                 },
                 "docs": {
-                    "text": "Gets value prop from the vds-textarea element.",
+                    "text": "Gets the current value from the textarea element",
                     "tags": [{
+                            "name": "public",
+                            "text": undefined
+                        }, {
                             "name": "returns",
-                            "text": "Promise<string>"
+                            "text": "Promise that resolves with the current value"
                         }]
                 }
             },
@@ -537,10 +820,43 @@ export class VdsBasicTextarea {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Clears value prop from the vds-basic-textarea element.",
+                    "text": "Clears the value from the textarea element",
+                    "tags": [{
+                            "name": "public",
+                            "text": undefined
+                        }, {
+                            "name": "returns",
+                            "text": "Promise that resolves when value is cleared"
+                        }]
+                }
+            },
+            "setValue": {
+                "complexType": {
+                    "signature": "(newValue: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "newValue",
+                            "type": "string",
+                            "docs": "- The new value to set in the textarea"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets a new value in the textarea element, overwriting the current one",
                     "tags": [{
+                            "name": "public",
+                            "text": undefined
+                        }, {
+                            "name": "param",
+                            "text": "newValue - The new value to set in the textarea"
+                        }, {
                             "name": "returns",
-                            "text": "Promise<void>"
+                            "text": "Promise that resolves when the value is set"
                         }]
                 }
             }
@@ -564,4 +880,3 @@ export class VdsBasicTextarea {
     }
     static get attachInternalsMemberName() { return "internals"; }
 }
-//# sourceMappingURL=vds-basic-textarea.js.map