@riverty/web-components 6.3.0 → 6.3.1

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

@@ -0,0 +1,1055 @@
+import { Host, h } from "@stencil/core";
+import { appendControlToFormData } from "../../utils/formData";
+export class RTextarea {
+    constructor() {
+        /** Represents the current value of the `<textarea>`, reflecting the content entered
+         * by the user or provided programmatically. */
+        this.value = this.textareaSlotValue;
+        /** Specifies a short hint that describes the expected value of the `<textarea>`,
+         * displayed when it is empty. */
+        this.placeholder = 'Provide an input';
+        /** Controls the resizability of the `<textarea>`, allowing
+         * or preventing the user from resizing it. */
+        this.resize = 'none';
+        /** Custom message when the character limit is reached to alert screen reader users. */
+        this.characterLimitReachedMessage = "You've reached the character limit.";
+        /** Custom validity state */
+        this.validityState = null;
+        /** Custom validity message */
+        this.validityMessage = '';
+        /**
+         * Initial attributes state
+         * */
+        this.initial = {};
+        /** Unique id */
+        this.uniqueId = `r-textarea-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
+        this.onInput = event => {
+            if (this.readonly)
+                return;
+            this.value = event.target.value;
+            this.validateFormElement(this.nativeElement);
+            const { host, value } = this;
+            this.rInput.emit({ element: host, value });
+            if (value.length === this.maxlength && this.characterLimitReachedAlert) {
+                this.characterLimitReachedAlert.innerText = this.characterLimitReachedMessage;
+                setTimeout(() => {
+                    this.characterLimitReachedAlert.innerText = '';
+                }, 2000);
+            }
+        };
+        this.onChange = event => {
+            if (this.readonly)
+                return;
+            this.value = event.target.value;
+            this.validateFormElement(this.nativeElement);
+            const { host, value } = this;
+            this.rChange.emit({ element: host, value });
+        };
+        this.onSubmitForm = (event) => {
+            if (this.isNoValidate)
+                return;
+            this.validateFormElement(this.nativeElement);
+            if (this.invalid) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+        this.onResetForm = () => {
+            if (this.readonly)
+                return;
+            // Return to initial state
+            this.validityState = null;
+            this.validityMessage = null;
+            this.value = this.initial['value'];
+            this.invalid = this.initial['invalid'];
+            this.valid = !this.invalid;
+            const { host, value } = this;
+            this.rReset.emit({ element: host, value });
+        };
+        this.getValidityStateData = (element) => {
+            let validityState = '';
+            let validityMessage = '';
+            for (const state in element.validity) {
+                if (element.validity[state]) {
+                    validityState = state;
+                    if (this[state + 'Message']) {
+                        validityMessage = this[state + 'Message'];
+                        return { validityState, validityMessage };
+                    }
+                    validityMessage = element.validationMessage;
+                }
+            }
+            return { validityState, validityMessage };
+        };
+        this.validateFormElement = (element = null) => {
+            if (element === null)
+                return;
+            if (this.isNoValidate)
+                return;
+            if (this.error)
+                return;
+            const { validityState, validityMessage } = this.getValidityStateData(element);
+            this.validityState = validityState;
+            this.validityMessage = validityMessage;
+            const isValid = this.validityState === 'valid';
+            this.valid = isValid;
+            this.invalid = !isValid;
+            this.rValidate.emit({
+                state: this.validityState,
+                message: this.validityMessage
+            });
+        };
+        this.contributeToFormData = (event) => {
+            appendControlToFormData(this.nativeElement || this.host, event.formData);
+        };
+    }
+    /** Sets the value of the element. */
+    async setValue(value) {
+        if (this.readonly)
+            return;
+        this.value = value;
+    }
+    /** Gets the value of the element. */
+    async getValue() {
+        return this.value;
+    }
+    /** Resets value and validity state to initial. */
+    async reset() {
+        if (this.readonly)
+            return;
+        this.validityState = null;
+        this.validityMessage = null;
+        this.value = this.initial['value'];
+        this.invalid = this.initial['invalid'];
+        this.valid = !this.invalid;
+    }
+    /** Sets focus on the element. */
+    async setFocus() {
+        this.nativeElement.focus();
+    }
+    /** Removes focus from the element. */
+    async setBlur() {
+        this.nativeElement.blur();
+    }
+    /** Sets the start and end positions of the text selection. */
+    async setSelectionRange(start, end, direction) {
+        this.nativeElement.setSelectionRange(start, end, direction);
+    }
+    /** Replaces the current text selection with a new string. */
+    async setRangeText(replacement, start, end, selectionMode) {
+        this.nativeElement.setRangeText(replacement, start, end, selectionMode);
+    }
+    /** Validates an element, displays provided message in case value is invalid. */
+    async setCustomValidity(message) {
+        this.customErrorMessage = message;
+        this.validateFormElement(this.nativeElement);
+    }
+    /**
+     * Validates the textarea without triggering UI and returns a boolean indicating its validity.
+     * @returns A boolean indicating whether the textarea is valid.
+     */
+    async checkValidity() {
+        const { validityState } = this.getValidityStateData(this.nativeElement);
+        return validityState === 'valid';
+    }
+    /** Validates an element and displays validity state. */
+    async reportValidity() {
+        this.validateFormElement(this.nativeElement);
+    }
+    /** Identify wrapping form element. */
+    get parentFormEl() {
+        return this.host.closest('form') || document.querySelector(`#${this.form}`) || null;
+    }
+    get ariaDescribedBy() {
+        const describedBy = `${this.uniqueId}-message`;
+        return this.hint ? `${this.uniqueId}-hint ${describedBy}` : describedBy;
+    }
+    get hasError() {
+        var _a;
+        return this.invalid && !!((_a = this.error) === null || _a === void 0 ? void 0 : _a.length);
+    }
+    get hasValidationError() {
+        if (!this.validityState)
+            return false;
+        const isInvalid = this.validityState !== 'valid';
+        const hasMessage = !!(this.customErrorMessage || this.validityMessage);
+        return isInvalid && hasMessage;
+    }
+    get hasMessage() {
+        return this.hasError || this.hasValidationError;
+    }
+    /**
+     * Determine whether this element should be ignored
+     * during Constraint Validation API validation.
+     * */
+    get isNoValidate() {
+        var _a;
+        return (((_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.hasAttribute('novalidate')) ||
+            this.novalidate ||
+            false);
+    }
+    get hasTrailingSlot() {
+        return !!this.host.querySelector('[slot="trailing"]');
+    }
+    get textareaSlotValue() {
+        return this.host.textContent;
+    }
+    connectFormEventListeners() {
+        var _a, _b, _c;
+        (_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.addEventListener('formdata', this.contributeToFormData);
+        (_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.addEventListener('submit', this.onSubmitForm, { capture: true });
+        (_c = this.parentFormEl) === null || _c === void 0 ? void 0 : _c.addEventListener('reset', this.onResetForm);
+    }
+    disconnectFormEventListeners() {
+        var _a, _b, _c;
+        (_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('formdata', this.contributeToFormData);
+        (_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('submit', this.onSubmitForm);
+        (_c = this.parentFormEl) === null || _c === void 0 ? void 0 : _c.removeEventListener('reset', this.onResetForm);
+    }
+    componentWillLoad() {
+        this.initial['value'] = this.value;
+        this.initial['invalid'] = this.invalid;
+    }
+    connectedCallback() {
+        this.connectFormEventListeners();
+    }
+    disconnectedCallback() {
+        this.disconnectFormEventListeners();
+    }
+    render() {
+        const { name, rows, cols, placeholder, required, showCounter, maxlength, minlength, form, value, disabled, resize, hint, invalid, label, uniqueId, fieldIndicator, readonly } = this;
+        const textareaAttrs = {
+            name,
+            rows,
+            cols,
+            placeholder,
+            required,
+            maxlength,
+            minlength,
+            form,
+            value,
+            disabled,
+            resize,
+            readonly,
+            id: uniqueId,
+            'aria-describedby': this.ariaDescribedBy,
+            'aria-invalid': `${!!invalid}`,
+            'aria-required': `${!!required}`
+        };
+        const labelAttr = label ? {
+            label,
+            fieldIndicator
+        } : {};
+        // Filter out event listener properties based on naming convention.
+        // Pass them to native element.
+        const eventListeners = Object.entries(this).reduce((acc, [key, value]) => {
+            if (typeof value === 'function' && key.startsWith('on')) {
+                acc[key] = value;
+            }
+            return acc;
+        }, {});
+        return (h(Host, null, h("div", { class: "r-textarea--label-container" }, h("label", { htmlFor: uniqueId }, label &&
+            h("r-label", Object.assign({ id: `${uniqueId}-label` }, labelAttr), label)), h("slot", { name: "popover" })), hint &&
+            h("r-hint", { id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { class: "r-textarea--container", "data-disabled": `${!!disabled}`, "data-readonly": `${!!readonly}` }, h("textarea", Object.assign({ class: "r-textarea--input" }, textareaAttrs, eventListeners, { ref: el => this.nativeElement = el, onChange: this.onChange, onInput: this.onInput })), h("div", { class: "r-textarea--trailing" }, this.readonly && h("r-icon", { class: "r-textarea--readonly-icon", name: "pen-disabled", size: "s" }), this.hasTrailingSlot && h("slot", { name: "trailing" }))), h("div", { class: "r-textarea--messages" }, h("r-hint", { "aria-live": "polite", "aria-atomic": "true", id: `${uniqueId}-message`, class: !this.hasMessage && 'visually-hidden', variant: invalid ? 'error' : 'success' }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage)), showCounter && h("r-hint", { "aria-hidden": true, class: "r-textarea--messages--counter" }, `${value.length}${maxlength ? '/' : ''}${maxlength}`), maxlength &&
+            h("div", { class: "visually-hidden", ref: el => this.characterLimitReachedAlert = el, "aria-live": "assertive" }))));
+    }
+    static get is() { return "r-textarea"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["textarea.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["textarea.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "form": {
+                "type": "string",
+                "attribute": "form",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the `id` of the `<form>` to which the element belongs"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "novalidate": {
+                "type": "boolean",
+                "attribute": "novalidate",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies if element must be ignored during validation of the form elements"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "attribute": "name",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the `name` attribute on the underlying `<textarea>`, allowing the control \nto be identified during form submission."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Represents the current value of the `<textarea>`, reflecting the content entered \nby the user or provided programmatically."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "this.textareaSlotValue"
+            },
+            "placeholder": {
+                "type": "string",
+                "attribute": "placeholder",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies a short hint that describes the expected value of the `<textarea>`, \ndisplayed when it is empty."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Provide an input'"
+            },
+            "rows": {
+                "type": "number",
+                "attribute": "rows",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the number of visible text lines in the `<textarea>`, \ncontrolling its vertical size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "cols": {
+                "type": "number",
+                "attribute": "cols",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the visible width of the `<textarea>` in terms \nof the number of characters."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "resize": {
+                "type": "string",
+                "attribute": "resize",
+                "mutable": false,
+                "complexType": {
+                    "original": "TextareaResize",
+                    "resolved": "\"both\" | \"horizontal\" | \"inherit\" | \"initial\" | \"none\" | \"vertical\"",
+                    "references": {
+                        "TextareaResize": {
+                            "location": "import",
+                            "path": "./exports",
+                            "id": "src/components/textarea/exports.ts::TextareaResize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the resizability of the `<textarea>`, allowing \nor preventing the user from resizing it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "'none'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether the `<textarea>` is disabled, preventing \nuser interaction and input when set to true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether the `<textarea>` is read-only, allowing focus and text selection\nwhile preventing the user from modifying its value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "hint": {
+                "type": "string",
+                "attribute": "hint",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional text displayed below the `<textarea>`, providing \nadditional context or guidance to the user."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "required": {
+                "type": "boolean",
+                "attribute": "required",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates that the `<textarea>` must be filled out \nbefore submitting the form."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "valueMissingMessage": {
+                "type": "string",
+                "attribute": "value-missing-message",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom message for `valueMissing` property of a ValidityState \nobject (set by `required`) within Constrain Validation API."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "maxlength": {
+                "type": "number",
+                "attribute": "maxlength",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the maximum number of characters allowed in the `<textarea>`,\nenforcing input length limits."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "showCounter": {
+                "type": "boolean",
+                "attribute": "show-counter",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies if the character counter should be visible.\n\nNote: The counter will only be rendered when a `maxlength` value is provided."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "characterLimitReachedMessage": {
+                "type": "string",
+                "attribute": "character-limit-reached-message",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom message when the character limit is reached to alert screen reader users."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"You've reached the character limit.\""
+            },
+            "tooLongMessage": {
+                "type": "string",
+                "attribute": "too-long-message",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom message for `tooLong` property of a ValidityState \nobject (set by `maxlength`) within Constrain Validation API."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "minlength": {
+                "type": "number",
+                "attribute": "minlength",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the minimum number of characters required in the `<textarea>`, \nenforcing input length constraints."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "tooShortMessage": {
+                "type": "string",
+                "attribute": "too-short-message",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set custom message for `tooShort` property of a ValidityState object \n(set by `minlength`) within Constrain Validation API"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "customErrorMessage": {
+                "type": "string",
+                "attribute": "custom-error-message",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom error message displayed for any validation failures in the `<textarea>`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "valid": {
+                "type": "boolean",
+                "attribute": "valid",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether the value of the `<textarea>` \nis valid based on validation rules."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "invalid": {
+                "type": "boolean",
+                "attribute": "invalid",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether the value of the `<textarea>` \nis invalid based on validation rules."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "error": {
+                "type": "string",
+                "attribute": "error",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom error message provided independently of the \nConstraint Validation API for the `<textarea>`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text displayed as the label above the `<textarea>`, \nindicating its purpose to the user."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "fieldIndicator": {
+                "type": "string",
+                "attribute": "field-indicator",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text of an additional marker in the label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "validityState": {},
+            "validityMessage": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rChange",
+                "name": "rChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits `rChange` when component's value has been changed"
+                },
+                "complexType": {
+                    "original": "{\n    element: HTMLRTextareaElement,\n    value: any\n  }",
+                    "resolved": "{ element: HTMLRTextareaElement; value: any; }",
+                    "references": {
+                        "HTMLRTextareaElement": {
+                            "location": "global",
+                            "id": "global::HTMLRTextareaElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "rInput",
+                "name": "rInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits `rInput` when component's value is changing"
+                },
+                "complexType": {
+                    "original": "{\n    element: HTMLRTextareaElement,\n    value: any\n  }",
+                    "resolved": "{ element: HTMLRTextareaElement; value: any; }",
+                    "references": {
+                        "HTMLRTextareaElement": {
+                            "location": "global",
+                            "id": "global::HTMLRTextareaElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "rReset",
+                "name": "rReset",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits `rReset` when component was reset to initial state by form reset"
+                },
+                "complexType": {
+                    "original": "{\n    element: HTMLRTextareaElement,\n    value: any\n  }",
+                    "resolved": "{ element: HTMLRTextareaElement; value: any; }",
+                    "references": {
+                        "HTMLRTextareaElement": {
+                            "location": "global",
+                            "id": "global::HTMLRTextareaElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "rValidate",
+                "name": "rValidate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits event after each validation"
+                },
+                "complexType": {
+                    "original": "{\n    state: string,\n    message: string\n  }",
+                    "resolved": "{ state: string; message: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setValue": {
+                "complexType": {
+                    "signature": "(value: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets the value of the element.",
+                    "tags": []
+                }
+            },
+            "getValue": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Gets the value of the element.",
+                    "tags": []
+                }
+            },
+            "reset": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Resets value and validity state to initial.",
+                    "tags": []
+                }
+            },
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the element.",
+                    "tags": []
+                }
+            },
+            "setBlur": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Removes focus from the element.",
+                    "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": "Sets the start and end positions of the text selection.",
+                    "tags": []
+                }
+            },
+            "setRangeText": {
+                "complexType": {
+                    "signature": "(replacement: string, start: number, end: number, selectionMode?: \"select\" | \"start\" | \"end\" | \"preserve\") => Promise<void>",
+                    "parameters": [{
+                            "name": "replacement",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "start",
+                            "type": "number",
+                            "docs": ""
+                        }, {
+                            "name": "end",
+                            "type": "number",
+                            "docs": ""
+                        }, {
+                            "name": "selectionMode",
+                            "type": "\"select\" | \"start\" | \"end\" | \"preserve\"",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Replaces the current text selection with a new string.",
+                    "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": "Validates an element, displays provided message in case value is invalid.",
+                    "tags": []
+                }
+            },
+            "checkValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Validates the textarea without triggering UI and returns a boolean indicating its validity.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "A boolean indicating whether the textarea is valid."
+                        }]
+                }
+            },
+            "reportValidity": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Validates an element and displays validity state.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}