@nova-design-system/nova-react 3.0.0-beta.41 → 3.0.0-beta.42

package/dist/cjs/nv-fieldtextarea.entry-BwJCUiVW.js

@@ -0,0 +1,194 @@
+'use strict';
+
+var index = require('./index-CinzsZ8D.js');
+var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
+var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
+require('react');
+
+const nvFieldtextareaCss = "nv-fieldtextarea{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fieldtextarea[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldtextarea[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fieldtextarea[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldtextarea[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldtextarea label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldtextarea .textarea-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldtextarea .textarea-wrapper .textarea-container{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldtextarea .textarea-wrapper .textarea-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtextarea .textarea-wrapper .textarea-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldtextarea .textarea-wrapper .textarea-container:has(textarea:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtextarea .textarea-wrapper .textarea-container:has(textarea:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtextarea .textarea-wrapper .textarea-container textarea{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height)}nv-fieldtextarea .textarea-wrapper .textarea-container textarea:focus{outline:none}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldtextarea .textarea-wrapper .textarea-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldtextarea .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldtextarea .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
+const NvFieldtextareaStyle0 = nvFieldtextareaCss;
+
+const NvFieldtextarea = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.valueChanged = index.createEvent(this, "valueChanged");
+        //#endregion DEPRECATED
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Sets the ID for the input element and the for attribute of the associated
+         * label. If no ID is provided, a random one will be automatically generated
+         * to ensure unique identification, facilitating proper label association and
+         * accessibility.
+         */
+        this.inputId = v4A79185f4.v4();
+        /**
+         * The disabled prop lets you turn off the textarea field so that users can’t
+         * type in it. When disabled, the field is grayed out and won’t respond to#
+         * clicks or touches.
+         */
+        this.disabled = false;
+        /**
+         * Display the textarea field’s content without allowing users to change it.
+         * Users can still click on it, select, and copy the text, but they won’t be
+         * able to type or delete anything.
+         */
+        this.readonly = false;
+        /**
+         * Marks the textarea field as required, ensuring that the user must fill it out
+         * before submitting the form.
+         */
+        this.required = false;
+        /**
+         * Alters the textarea field’s appearance to indicate an error, helping users
+         * identify fields that need correction.
+         * @validator error
+         */
+        this.error = false;
+        /**
+         * Changes the textarea field’s appearance to indicate successful textarea or
+         * validation.
+         */
+        this.success = false;
+        /**
+         * The number of visible text lines for the control. The default is 3. This
+         * can be useful when you want to limit the size of the textarea field or when
+         * you want to make the textarea field smaller to fit a specific layout. The
+         * textarea field will expand vertically to fit the text as the user types.
+         */
+        this.rows = 3;
+        /**
+         * Controls the resize property of a textarea. It can be set to none, both,
+         * horizontal, or vertical. The default is vertical.
+         */
+        this.resize = 'vertical';
+        /**
+         * Enable this to make the textarea automatically resize as the user types,
+         * adjusting the height to fit the content. For the best experience, avoid
+         * vertical resizing, as it’s controlled by this feature. Horizontal resizing
+         * can still be allowed if desired.
+         */
+        this.autosize = false;
+        /**
+         * Applies focus to the input field as soon as the component is mounted. This
+         * is equivalent to setting the native autofocus attribute on a <textarea>
+         * element.
+         */
+        this.autofocus = false;
+        //#endregion WATCHERS
+        /****************************************************************************/
+        //#region METHODS
+        this.handleTextarea = (event) => {
+            const textarea = event.target;
+            this.value = textarea.value;
+            this.valueChanged.emit(textarea.value);
+        };
+        this.handleTextareaContainerClick = () => {
+            this.textareaElement.focus();
+        };
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region WATCHERS
+    /**
+     * If autosize is true, we need to make sure to update the min-height when
+     * the rows change.
+     */
+    rowsChanged() {
+        if (this.autosize) {
+            this.adjustTextareaHeight();
+        }
+    }
+    /**
+     * If autosize is true, we need to make sure to update the height and
+     * min-height, if false, we need to remove the height property.
+     */
+    autosizeChanged() {
+        var _a;
+        if (this.autosize) {
+            this.adjustTextareaHeight();
+        }
+        else {
+            (_a = this.textareaElement) === null || _a === void 0 ? void 0 : _a.style.removeProperty('height');
+        }
+    }
+    /**
+     * Make sure to adjust the height of the textarea when the value changes
+     * programmatically or by typing when autosize is on.
+     */
+    handleValueChange() {
+        if (this.autosize) {
+            this.adjustTextareaHeight();
+        }
+    }
+    adjustTextareaHeight() {
+        if (this.textareaElement && this.autosize) {
+            /**
+             * The first requestAnimationFrame ensures that the DOM has applied any
+             * pending changes (e.g., value updates or attribute changes) before
+             * proceeding to the next frame.
+             */
+            requestAnimationFrame(() => {
+                /**
+                 * The second requestAnimationFrame ensures that the browser has fully
+                 * recalculated layout and styles based on the updated DOM, such as
+                 * recalculating scrollHeight for the textarea after the new value is
+                 * rendered.
+                 */
+                requestAnimationFrame(() => {
+                    this.textareaElement.style.height = 'auto';
+                    const computedStyle = window.getComputedStyle(this.textareaElement);
+                    const lineHeight = parseFloat(computedStyle.lineHeight);
+                    const paddingTop = parseFloat(computedStyle.paddingTop);
+                    const paddingBottom = parseFloat(computedStyle.paddingBottom);
+                    const borderTopWidth = parseFloat(computedStyle.borderTopWidth);
+                    const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth);
+                    // Calculate min-height based on rows
+                    const minHeight = lineHeight * this.rows +
+                        paddingTop +
+                        paddingBottom +
+                        borderTopWidth +
+                        borderBottomWidth;
+                    this.textareaElement.style.minHeight = `${minHeight}px`;
+                    this.textareaElement.style.height =
+                        this.textareaElement.scrollHeight + 'px';
+                });
+            });
+        }
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillRender() {
+        if (this.message) {
+            this.description = this.message;
+        }
+        if (this.validation) {
+            this.errorDescription = this.validation;
+            this.error = true;
+        }
+    }
+    componentDidLoad() {
+        if (this.autosize) {
+            this.adjustTextareaHeight();
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '967dc1eda269d0e3df1351d3e34b8be14f9cb639' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '4337acb56fc6712eb0a3e509b2a551043b43eadf', htmlFor: this.inputId }, index.h("slot", { key: 'c7229aad2d78f79fad1f103908976efefe282b01', name: "label" }, this.label))), index.h("div", { key: 'a33155dbb4d6b5d481503225136435690eebf819', class: "textarea-wrapper" }, index.h("div", { key: '14dbd33038acef44773bcf925dcb1fa9531bb6e9', class: "textarea-container", onClick: this.handleTextareaContainerClick }, index.h("textarea", { key: 'eee274bac197d25f99114f95684996e1fa933b57', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, autofocus: this.autofocus, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, autocomplete: "off", value: this.value, onInput: this.handleTextarea, rows: this.rows, class: clsx297c1ffe.clsx(this.resize === 'none' && 'resize-none', this.resize === 'vertical' && 'resize-y', this.resize === 'horizontal' && 'resize-x', this.resize === 'both' && 'resize') }))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'f3f214c3a3e3ee03b3ac44d7dcf6224f3d58585d', class: "description" }, index.h("slot", { key: '803bf10aec909ab4c55098818df6bcd3e22a1957', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'aefd1d3ed4ed2535b06cd314ffe0b19506f7510d', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'e43344938bda4acb4523998e9d21f5b6d8300d1a', name: "error-description" }, this.errorDescription)))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "rows": ["rowsChanged"],
+        "autosize": ["autosizeChanged"],
+        "value": ["handleValueChange"]
+    }; }
+};
+NvFieldtextarea.style = NvFieldtextareaStyle0;
+
+exports.nv_fieldtextarea = NvFieldtextarea;

package/dist/cjs/nv-fieldtextarea.entry-Dc_TGlmI.js

@@ -0,0 +1,194 @@
+'use strict';
+
+var index = require('./index-C8UfzrMI.js');
+var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
+var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
+require('react');
+
+const nvFieldtextareaCss = "nv-fieldtextarea{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fieldtextarea[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldtextarea[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fieldtextarea[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldtextarea[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldtextarea label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldtextarea .textarea-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldtextarea .textarea-wrapper .textarea-container{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldtextarea .textarea-wrapper .textarea-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtextarea .textarea-wrapper .textarea-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldtextarea .textarea-wrapper .textarea-container:has(textarea:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtextarea .textarea-wrapper .textarea-container:has(textarea:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtextarea .textarea-wrapper .textarea-container textarea{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height)}nv-fieldtextarea .textarea-wrapper .textarea-container textarea:focus{outline:none}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldtextarea .textarea-wrapper .textarea-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldtextarea .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldtextarea .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
+const NvFieldtextareaStyle0 = nvFieldtextareaCss;
+
+const NvFieldtextarea = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.valueChanged = index.createEvent(this, "valueChanged");
+        //#endregion DEPRECATED
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Sets the ID for the input element and the for attribute of the associated
+         * label. If no ID is provided, a random one will be automatically generated
+         * to ensure unique identification, facilitating proper label association and
+         * accessibility.
+         */
+        this.inputId = v4A79185f4.v4();
+        /**
+         * The disabled prop lets you turn off the textarea field so that users can’t
+         * type in it. When disabled, the field is grayed out and won’t respond to#
+         * clicks or touches.
+         */
+        this.disabled = false;
+        /**
+         * Display the textarea field’s content without allowing users to change it.
+         * Users can still click on it, select, and copy the text, but they won’t be
+         * able to type or delete anything.
+         */
+        this.readonly = false;
+        /**
+         * Marks the textarea field as required, ensuring that the user must fill it out
+         * before submitting the form.
+         */
+        this.required = false;
+        /**
+         * Alters the textarea field’s appearance to indicate an error, helping users
+         * identify fields that need correction.
+         * @validator error
+         */
+        this.error = false;
+        /**
+         * Changes the textarea field’s appearance to indicate successful textarea or
+         * validation.
+         */
+        this.success = false;
+        /**
+         * The number of visible text lines for the control. The default is 3. This
+         * can be useful when you want to limit the size of the textarea field or when
+         * you want to make the textarea field smaller to fit a specific layout. The
+         * textarea field will expand vertically to fit the text as the user types.
+         */
+        this.rows = 3;
+        /**
+         * Controls the resize property of a textarea. It can be set to none, both,
+         * horizontal, or vertical. The default is vertical.
+         */
+        this.resize = 'vertical';
+        /**
+         * Enable this to make the textarea automatically resize as the user types,
+         * adjusting the height to fit the content. For the best experience, avoid
+         * vertical resizing, as it’s controlled by this feature. Horizontal resizing
+         * can still be allowed if desired.
+         */
+        this.autosize = false;
+        /**
+         * Applies focus to the input field as soon as the component is mounted. This
+         * is equivalent to setting the native autofocus attribute on a <textarea>
+         * element.
+         */
+        this.autofocus = false;
+        //#endregion WATCHERS
+        /****************************************************************************/
+        //#region METHODS
+        this.handleTextarea = (event) => {
+            const textarea = event.target;
+            this.value = textarea.value;
+            this.valueChanged.emit(textarea.value);
+        };
+        this.handleTextareaContainerClick = () => {
+            this.textareaElement.focus();
+        };
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region WATCHERS
+    /**
+     * If autosize is true, we need to make sure to update the min-height when
+     * the rows change.
+     */
+    rowsChanged() {
+        if (this.autosize) {
+            this.adjustTextareaHeight();
+        }
+    }
+    /**
+     * If autosize is true, we need to make sure to update the height and
+     * min-height, if false, we need to remove the height property.
+     */
+    autosizeChanged() {
+        var _a;
+        if (this.autosize) {
+            this.adjustTextareaHeight();
+        }
+        else {
+            (_a = this.textareaElement) === null || _a === void 0 ? void 0 : _a.style.removeProperty('height');
+        }
+    }
+    /**
+     * Make sure to adjust the height of the textarea when the value changes
+     * programmatically or by typing when autosize is on.
+     */
+    handleValueChange() {
+        if (this.autosize) {
+            this.adjustTextareaHeight();
+        }
+    }
+    adjustTextareaHeight() {
+        if (this.textareaElement && this.autosize) {
+            /**
+             * The first requestAnimationFrame ensures that the DOM has applied any
+             * pending changes (e.g., value updates or attribute changes) before
+             * proceeding to the next frame.
+             */
+            requestAnimationFrame(() => {
+                /**
+                 * The second requestAnimationFrame ensures that the browser has fully
+                 * recalculated layout and styles based on the updated DOM, such as
+                 * recalculating scrollHeight for the textarea after the new value is
+                 * rendered.
+                 */
+                requestAnimationFrame(() => {
+                    this.textareaElement.style.height = 'auto';
+                    const computedStyle = window.getComputedStyle(this.textareaElement);
+                    const lineHeight = parseFloat(computedStyle.lineHeight);
+                    const paddingTop = parseFloat(computedStyle.paddingTop);
+                    const paddingBottom = parseFloat(computedStyle.paddingBottom);
+                    const borderTopWidth = parseFloat(computedStyle.borderTopWidth);
+                    const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth);
+                    // Calculate min-height based on rows
+                    const minHeight = lineHeight * this.rows +
+                        paddingTop +
+                        paddingBottom +
+                        borderTopWidth +
+                        borderBottomWidth;
+                    this.textareaElement.style.minHeight = `${minHeight}px`;
+                    this.textareaElement.style.height =
+                        this.textareaElement.scrollHeight + 'px';
+                });
+            });
+        }
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillRender() {
+        if (this.message) {
+            this.description = this.message;
+        }
+        if (this.validation) {
+            this.errorDescription = this.validation;
+            this.error = true;
+        }
+    }
+    componentDidLoad() {
+        if (this.autosize) {
+            this.adjustTextareaHeight();
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '4167c4cdd03726b439429616faa39b63881bb019' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '6c533d08a24e989f85421e76b33828e32f4c61dc', htmlFor: this.inputId }, index.h("slot", { key: '49224679ecabbc78da7e83025e024e4510b7646b', name: "label" }, this.label))), index.h("div", { key: '1688bae5f38d7fff8709f84774d8e758d57bc464', class: "textarea-wrapper" }, index.h("div", { key: 'b2c338e20f44e9de7f2fde4a19f4650add0a0bc3', class: "textarea-container", onClick: this.handleTextareaContainerClick }, index.h("textarea", { key: '4f8be0bba0ff3c1bca0ef8dfea368b288cf8f621', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, autofocus: this.autofocus, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, autocomplete: "off", value: this.value, onInput: this.handleTextarea, rows: this.rows, class: clsx297c1ffe.clsx(this.resize === 'none' && 'resize-none', this.resize === 'vertical' && 'resize-y', this.resize === 'horizontal' && 'resize-x', this.resize === 'both' && 'resize') }))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '7a5a3bef54b5682b0bc47c0431c40032ce27bf9d', class: "description" }, index.h("slot", { key: 'cc61f8f2b146f1776aceb3efde29e4409083d908', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '5a97f4acfcc6c0b372f99a27aa9ad9bdd8caddd2', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '2857c340bf29495cb49927ea220f2a3e8f0c161c', name: "error-description" }, this.errorDescription)))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "rows": ["rowsChanged"],
+        "autosize": ["autosizeChanged"],
+        "value": ["handleValueChange"]
+    }; }
+};
+NvFieldtextarea.style = NvFieldtextareaStyle0;
+
+exports.nv_fieldtextarea = NvFieldtextarea;