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

package/dist/cjs/nv-fieldtextarea.entry-TI-bucN-.js

@@ -1,194 +0,0 @@
-'use strict';
-
-var index = require('./index-CIcUUomJ.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-qMX2O8cX.js

@@ -1,194 +0,0 @@
-'use strict';
-
-var index = require('./index-B_VOAJzk.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;

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

@@ -1,194 +0,0 @@
-'use strict';
-
-var index = require('./index-CDe7nrrW.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;