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

package/dist/cjs/nv-fieldtext.entry-IeIHa3jf.js

@@ -0,0 +1,119 @@
+'use strict';
+
+var index = require('./index-CDe7nrrW.js');
+var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
+require('react');
+
+const nvFieldtextCss = "nv-fieldtext{--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-fieldtext[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-fieldtext[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-fieldtext[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-fieldtext[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldtext>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-fieldtext>.input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldtext>.input-wrapper .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;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, 1);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldtext>.input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtext>.input-wrapper .input-container:focus-within,nv-fieldtext>.input-wrapper .input-container:focus-within:hover,nv-fieldtext>.input-wrapper .input-container:focus,nv-fieldtext>.input-wrapper .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldtext>.input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtext>.input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtext>.input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height)}nv-fieldtext>.input-wrapper .input-container input:focus{outline:none}nv-fieldtext>.input-wrapper .input-container input::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-fieldtext>.input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default);margin-right:var(--form-gap-x)}nv-fieldtext>.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-fieldtext>.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 NvFieldtextStyle0 = nvFieldtextCss;
+
+const NvFieldtext = 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 type prop lets you specify what kind of information the input field
+         * should accept. Choose 'text' for general words or sentences, 'tel' for
+         * phone numbers, or 'email' for email addresses. This makes sure users get
+         * the right keyboard and validation for what they need to enter.
+         */
+        this.type = 'text';
+        /**
+         * The disabled prop lets you turn off the input 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 input 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 input field as required, ensuring that the user must fill it out
+         * before submitting the form.
+         */
+        this.required = false;
+        /**
+         * Alters the input field’s appearance to indicate an error, helping users
+         * identify fields that need correction.
+         * @validator error
+         */
+        this.error = false;
+        /**
+         * Changes the input field’s appearance to indicate successful input or
+         * validation.
+         */
+        this.success = false;
+        /**
+         * When used with the email input type, this prop enables the field to accept
+         * multiple email addresses. Users can enter several addresses, separating
+         * each one with a comma, allowing the form to handle multiple recipients.
+         */
+        this.multiple = false;
+        /**
+         * Applies focus to the input field as soon as the component is mounted. This
+         * is equivalent to setting the native autofocus attribute on an <input>
+         * element.
+         */
+        this.autofocus = false;
+        //#endregion EVENTS
+        /****************************************************************************/
+        //#region METHODS
+        /**
+         * Handles the input event on the input element.
+         * Emits the inputChanged event with the new value.
+         * @param {Event} event - Event object of the input event.
+         */
+        this.handleInput = (event) => {
+            const input = event.target;
+            this.value = input.value;
+            this.valueChanged.emit(input.value);
+        };
+        /**
+         * Handles focus when the input container is clicked.
+         */
+        this.handleInputContainerClick = () => {
+            this.inputElement.focus();
+        };
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillRender() {
+        if (this.textInputType) {
+            this.type = this.textInputType;
+        }
+        if (this.message) {
+            this.description = this.message;
+        }
+        if (this.validation) {
+            this.errorDescription = this.validation;
+            this.error = true;
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: 'ffcbe1c8f14257f6380d28f2c50fe8b77ae73027' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '3b84598a05eedc7625312def01ca726dc68fa247', htmlFor: this.inputId }, index.h("slot", { key: '8c8f0d2f86742dd0699b8b309cbea0dca1d294ce', name: "label" }, this.label))), index.h("div", { key: 'c2adf3acc7780a7eba5d4762b7275d1c63304bf5', class: "input-wrapper" }, index.h("slot", { key: 'c49756d1daaba476222ebda2df4854b1094655b3', name: "before-input" }), index.h("div", { key: '723c34f09e6c073bdef2db799246da72ffd52703', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '4e94bcac72ac2e5147a8d5e33396a13359820009', name: "leading-input" }), index.h("input", { key: '96cbf022912735445467320600e372fba03de4e4', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), this.error && (index.h("nv-icon", { key: '39a55c42a49006d316e5dcc5389793c6264d2b09', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: 'bf1b6040dbb392b5c46b3b9af665d7cdc7389d29', name: "circle-check", class: "validation", size: "md" }))), index.h("slot", { key: 'bb2256bf3fc5165e61f162fe89dd7be564a989c0', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '3d2c5a89247042184b3a110ca7982b793b0bd86a', class: "description" }, index.h("slot", { key: '2358cc5217d6ba65b4d4baa927b397dbe62982e8', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'cdef4117d71b8a6bdde19fea1a0f4070ba02ab2e', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '66a2b100ab641aa9c2e22fdfc9a987bb86cd44a0', name: "error-description" }, this.errorDescription)))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+};
+NvFieldtext.style = NvFieldtextStyle0;
+
+exports.nv_fieldtext = NvFieldtext;

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

@@ -0,0 +1,194 @@
+'use strict';
+
+var index = require('./index-CEWbQ5nh.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: 'b5d6707fa7ebbd64f3b1616c9f61746f394e347d' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '6fd76411b08da2d22d86d0a4ef81ce99534d0112', htmlFor: this.inputId }, index.h("slot", { key: '634339fa1bd5ccb2627dab03117535b2bc09b9cc', name: "label" }, this.label))), index.h("div", { key: '6a521f191ebae60a874c4d48a1872b7a61181c54', class: "textarea-wrapper" }, index.h("div", { key: 'ecca606c8775282c5b21b8f8e12a9c98df7aa410', class: "textarea-container", onClick: this.handleTextareaContainerClick }, index.h("textarea", { key: '7547d01134c155c9f76e1978f08075d1e8ff50fd', 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: 'fc436e3cc4dbdf8730920173a74f4da249678e39', class: "description" }, index.h("slot", { key: '27aa71e73818742bc92f3860dd0071eef182474a', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'cc3733783b2f5985358d1c21e502845f7bab8406', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '1db584479ed23d616d88dc9fc28fe1e0acd7a463', 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-DlFdCv_d.js

@@ -0,0 +1,194 @@
+'use strict';
+
+var index = require('./index-BZCQTWfv.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: '9edf7962ccdff743da72152b98f03d27c8f14f1f' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'c3f365dc9d7b27464ead7b80d2bf29ab830cc8df', htmlFor: this.inputId }, index.h("slot", { key: 'bcfc6ada8c84894be98adcc58c5d5dbc19da5693', name: "label" }, this.label))), index.h("div", { key: 'e6341cf7d87d9e0d2534ddb0401b595970beabfb', class: "textarea-wrapper" }, index.h("div", { key: '80e0b0bc0cb7ec4b237b032e0a4c00a3d6a2e16a', class: "textarea-container", onClick: this.handleTextareaContainerClick }, index.h("textarea", { key: '20bcce08c32dddaa9fcd54b5fca5724318f31010', 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: 'd3f26d3a2f81d5009e55e532ce8079433bbe60bb', class: "description" }, index.h("slot", { key: 'd9f16157d8ea355d57d8935aec45aa1fcaba2b68', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'c4b838a46fc477530dcb6101f8d8758d99466f65', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '3370a1b2d89a1d24a9e3ed93aebf04751aaa1e86', 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;