@nova-design-system/nova-webcomponents 3.0.0-beta.17

package/dist/collection/components/nv-fieldtextarea/nv-fieldtextarea.js

@@ -0,0 +1,527 @@
+import { Host, h, } from "@stencil/core";
+import { v4 as uuidv4 } from "uuid";
+import clsx from "clsx";
+/**
+ * @slot label - Content to be placed as the label, will override the label prop.
+ * @slot description - Content to be placed as the description, will override the description prop.
+ * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.
+ */
+export class NvFieldtextarea {
+    constructor() {
+        //#endregion WATCHERS
+        /****************************************************************************/
+        //#region METHODS
+        this.handleTextarea = (event) => {
+            const textarea = event.target;
+            this.value = textarea.value;
+            this.valueChanged.emit(textarea.value);
+            if (this.autosize) {
+                this.adjustTextareaHeight();
+            }
+        };
+        this.handleTextareaContainerClick = () => {
+            this.textareaElement.focus();
+        };
+        this.message = undefined;
+        this.validation = undefined;
+        this.textareaId = uuidv4();
+        this.label = undefined;
+        this.description = undefined;
+        this.placeholder = undefined;
+        this.name = undefined;
+        this.value = undefined;
+        this.disabled = false;
+        this.readonly = false;
+        this.required = false;
+        this.error = false;
+        this.errorDescription = undefined;
+        this.success = false;
+        this.maxlength = undefined;
+        this.minlength = undefined;
+        this.rows = 3;
+        this.resize = 'vertical';
+        this.autosize = false;
+    }
+    componentWillRender() {
+        if (this.message) {
+            this.description = this.message;
+        }
+        if (this.validation) {
+            this.errorDescription = this.validation;
+            this.error = true;
+        }
+    }
+    //#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');
+        }
+    }
+    adjustTextareaHeight() {
+        if (this.textareaElement && this.autosize) {
+            this.textareaElement.style.height = 'auto';
+            // Get computed styles
+            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';
+        }
+    }
+    /**
+     * Class        Properties
+     * resize-none	resize: none;
+     * resize-y	    resize: vertical;
+     * resize-x	    resize: horizontal;
+     * resize	      resize: both;
+     * @returns {string} The resize class.
+     */
+    getResize() {
+        if (this.resize === 'none')
+            return 'resize-none';
+        if (this.resize === 'vertical')
+            return 'resize-y';
+        if (this.resize === 'horizontal')
+            return 'resize-x';
+        if (this.resize === 'both')
+            return 'resize';
+        return 'resize-none';
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentDidLoad() {
+        if (this.autosize) {
+            this.adjustTextareaHeight();
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: '05e5be100e389a0d604ef6c6a126a3992c4400d8' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'f0e8d865770ad7249748d76eafc520733a73df61', htmlFor: this.textareaId }, h("slot", { key: '88dc412644dd9ba26c1c4fd6495257071ea9355f', name: "label" }, this.label))), h("div", { key: 'ed27e42a150bacb526fad21c33167e5daa88fbdb', class: "textarea-wrapper" }, h("div", { key: '12afa52b296240e0b8cb7ee3dd68100619a0aaef', class: "textarea-container", onClick: this.handleTextareaContainerClick }, h("textarea", { key: '9269535072a3df3aff0f4d6093618ef3d0b9aed3', id: this.textareaId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, 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: clsx(this.getResize()) }))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'f4cbe287f58bcffa17f9175b5507ffd260652805', class: "description" }, h("slot", { key: 'b3df2bfd379089e489173b0c961ce9bc04080892', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'cb194709b15cbe0e4f243161bb34f5e487b2e073', hidden: !this.error, class: "error-description" }, h("slot", { key: 'de80cb7d6b1ad8e9f33bd17a407604df66b8eda1', name: "error-description" }, this.errorDescription)))));
+    }
+    static get is() { return "nv-fieldtextarea"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nv-fieldtextarea.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-fieldtextarea.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "use description instead."
+                        }],
+                    "text": "Message defines a 'hint ' message for the Text Field."
+                },
+                "attribute": "message",
+                "reflect": false
+            },
+            "validation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "use errorDescription and set the error prop instead."
+                        }],
+                    "text": "Add the message to the validation state."
+                },
+                "attribute": "validation",
+                "reflect": false
+            },
+            "textareaId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the ID for the textarea element and the for attribute of the associated\nlabel. If no ID is provided, a random one will be automatically generated\nto ensure unique identification, facilitating proper label association and\naccessibility."
+                },
+                "attribute": "textarea-id",
+                "reflect": true,
+                "defaultValue": "uuidv4()"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Lets you define the text that explains what users should enter in the text\ntextarea field. It\u2019s a crucial element for making forms clear and\nuser-friendly."
+                },
+                "attribute": "label",
+                "reflect": true
+            },
+            "description": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Add helpful hints or extra information under the text textarea field. This is\nwhere you can clarify what users should enter or provide additional\ninstructions, making the form easier to fill out correctly."
+                },
+                "attribute": "description",
+                "reflect": true
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display temporary text inside the textarea field to give users a hint about\nwhat to type. It\u2019s a great way to provide examples or suggestions directly\nin the field before they start typing."
+                },
+                "attribute": "placeholder",
+                "reflect": true
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the name attribute of the textarea field, which is crucial for form\nsubmission. This value is used as the key in the key-value pair sent to\nthe server, representing the textarea\u2019s data in form submissions. It should be\nunique within the form to avoid conflicts"
+                },
+                "attribute": "name",
+                "reflect": true
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the value of the textarea field, which determines the text displayed\nwithin the field. This prop is typically used in controlled components\nwhere the textarea\u2019s value is managed by the component\u2019s state."
+                },
+                "attribute": "value",
+                "reflect": true
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The disabled prop lets you turn off the textarea field so that users can\u2019t\ntype in it. When disabled, the field is grayed out and won\u2019t respond to#\nclicks or touches."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display the textarea field\u2019s content without allowing users to change it.\nUsers can still click on it, select, and copy the text, but they won\u2019t be\nable to type or delete anything."
+                },
+                "attribute": "readonly",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the textarea field as required, ensuring that the user must fill it out\nbefore submitting the form."
+                },
+                "attribute": "required",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "validator",
+                            "text": "error"
+                        }],
+                    "text": "Alters the textarea field\u2019s appearance to indicate an error, helping users\nidentify fields that need correction."
+                },
+                "attribute": "error",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "errorDescription": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "validator",
+                            "text": "message"
+                        }],
+                    "text": "Show a helpful message under the textarea field when there\u2019s a problem. It\nexplains what\u2019s wrong and how users can fix it, making the error easier to\nunderstand and resolve."
+                },
+                "attribute": "error-description",
+                "reflect": true
+            },
+            "success": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Changes the textarea field\u2019s appearance to indicate successful textarea or\nvalidation."
+                },
+                "attribute": "success",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "maxlength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Limits how many characters users can type into the textarea field. It\u2019s\nhelpful for making sure users don\u2019t enter too much information, keeping\ntheir textarea within the allowed limit."
+                },
+                "attribute": "maxlength",
+                "reflect": true
+            },
+            "minlength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Ensures that users type at least a certain number of characters into the\ntextarea field. It\u2019s a way to make sure users provide enough information\nbefore moving on."
+                },
+                "attribute": "minlength",
+                "reflect": true
+            },
+            "rows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The number of visible text lines for the control. The default is 3. This\ncan be useful when you want to limit the size of the textarea field or when\nyou want to make the textarea field smaller to fit a specific layout. The\ntextarea field will expand vertically to fit the text as the user types."
+                },
+                "attribute": "rows",
+                "reflect": true,
+                "defaultValue": "3"
+            },
+            "resize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'both' | 'horizontal' | 'vertical'",
+                    "resolved": "\"both\" | \"horizontal\" | \"none\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the resize property of a textarea. It can be set to none, both,\nhorizontal, or vertical. The default is vertical."
+                },
+                "attribute": "resize",
+                "reflect": true,
+                "defaultValue": "'vertical'"
+            },
+            "autosize": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable this to make the textarea automatically resize as the user types,\nadjusting the height to fit the content. For the best experience, avoid\nvertical resizing, as it\u2019s controlled by this feature. Horizontal resizing\ncan still be allowed if desired."
+                },
+                "attribute": "autosize",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChanged",
+                "name": "valueChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "bind",
+                            "text": "value"
+                        }],
+                    "text": "Emitted when the textarea value changes."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "rows",
+                "methodName": "rowsChanged"
+            }, {
+                "propName": "autosize",
+                "methodName": "autosizeChanged"
+            }];
+    }
+}
+//# sourceMappingURL=nv-fieldtextarea.js.map

package/dist/collection/components/nv-fieldtextarea/nv-fieldtextarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-fieldtextarea.js","sourceRoot":"","sources":["../../../src/components/nv-fieldtextarea/nv-fieldtextarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Watch,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\nimport clsx from 'clsx';\n\n/**\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fieldtextarea',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'nv-fieldtextarea.scss',\n})\nexport class NvFieldtextarea {\n  @Element() el: HTMLNvFieldtextareaElement;\n  private textareaElement!: HTMLTextAreaElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message defines a 'hint ' message for the Text Field.\n   * @deprecated use description instead.\n   */\n  @Prop()\n  readonly message: string;\n\n  /**\n   * Add the message to the validation state.\n   * @deprecated use errorDescription and set the error prop instead.\n   */\n  @Prop()\n  readonly validation: string;\n\n  componentWillRender() {\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.validation) {\n      this.errorDescription = this.validation;\n      this.error = true;\n    }\n  }\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the textarea element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated\n   * to ensure unique identification, facilitating proper label association and\n   * accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly textareaId: string = uuidv4();\n\n  /**\n   * Lets you define the text that explains what users should enter in the text\n   * textarea field. It’s a crucial element for making forms clear and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Add helpful hints or extra information under the text textarea field. This is\n   * where you can clarify what users should enter or provide additional\n   * instructions, making the form easier to fill out correctly.\n   */\n  @Prop({ reflect: true, mutable: true })\n  description: string;\n\n  /**\n   * Display temporary text inside the textarea field to give users a hint about\n   * what to type. It’s a great way to provide examples or suggestions directly\n   * in the field before they start typing.\n   */\n  @Prop({ reflect: true })\n  readonly placeholder: string;\n\n  /**\n   * Defines the name attribute of the textarea field, which is crucial for form\n   * submission. This value is used as the key in the key-value pair sent to\n   * the server, representing the textarea’s data in form submissions. It should be\n   * unique within the form to avoid conflicts\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * Specifies the value of the textarea field, which determines the text displayed\n   * within the field. This prop is typically used in controlled components\n   * where the textarea’s value is managed by the component’s state.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: string;\n\n  /**\n   * The disabled prop lets you turn off the textarea field so that users can’t\n   * type in it. When disabled, the field is grayed out and won’t respond to#\n   * clicks or touches.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Display the textarea field’s content without allowing users to change it.\n   * Users can still click on it, select, and copy the text, but they won’t be\n   * able to type or delete anything.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the textarea field as required, ensuring that the user must fill it out\n   * before submitting the form.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Alters the textarea field’s appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true, mutable: true })\n  error: boolean = false;\n\n  /**\n   * Show a helpful message under the textarea field when there’s a problem. It\n   * explains what’s wrong and how users can fix it, making the error easier to\n   * understand and resolve.\n   * @validator message\n   */\n  @Prop({ reflect: true, mutable: true })\n  errorDescription: string;\n\n  /**\n   * Changes the textarea field’s appearance to indicate successful textarea or\n   * validation.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * Limits how many characters users can type into the textarea field. It’s\n   * helpful for making sure users don’t enter too much information, keeping\n   * their textarea within the allowed limit.\n   */\n  @Prop({ reflect: true })\n  readonly maxlength: number;\n\n  /**\n   * Ensures that users type at least a certain number of characters into the\n   * textarea field. It’s a way to make sure users provide enough information\n   * before moving on.\n   */\n  @Prop({ reflect: true })\n  readonly minlength: number;\n\n  /**\n   * The number of visible text lines for the control. The default is 3. This\n   * can be useful when you want to limit the size of the textarea field or when\n   * you want to make the textarea field smaller to fit a specific layout. The\n   * textarea field will expand vertically to fit the text as the user types.\n   */\n  @Prop({ reflect: true })\n  readonly rows: number = 3;\n\n  /**\n   * Controls the resize property of a textarea. It can be set to none, both,\n   * horizontal, or vertical. The default is vertical.\n   */\n  @Prop({ reflect: true })\n  readonly resize: 'none' | 'both' | 'horizontal' | 'vertical' = 'vertical';\n\n  /**\n   * Enable this to make the textarea automatically resize as the user types,\n   * adjusting the height to fit the content. For the best experience, avoid\n   * vertical resizing, as it’s controlled by this feature. Horizontal resizing\n   * can still be allowed if desired.\n   */\n  @Prop({ reflect: true })\n  readonly autosize: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the textarea value changes.\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<string>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * If autosize is true, we need to make sure to update the min-height when\n   * the rows change.\n   */\n  @Watch('rows')\n  rowsChanged() {\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    }\n  }\n\n  /**\n   * If autosize is true, we need to make sure to update the height and\n   * min-height, if false, we need to remove the height property.\n   */\n  @Watch('autosize')\n  autosizeChanged() {\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    } else {\n      this.textareaElement?.style.removeProperty('height');\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  private handleTextarea = (event: Event) => {\n    const textarea = event.target as HTMLTextAreaElement;\n    this.value = textarea.value;\n    this.valueChanged.emit(textarea.value);\n\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    }\n  };\n\n  private handleTextareaContainerClick = () => {\n    this.textareaElement.focus();\n  };\n\n  private adjustTextareaHeight() {\n    if (this.textareaElement && this.autosize) {\n      this.textareaElement.style.height = 'auto';\n\n      // Get computed styles\n      const computedStyle = window.getComputedStyle(this.textareaElement);\n      const lineHeight = parseFloat(computedStyle.lineHeight);\n      const paddingTop = parseFloat(computedStyle.paddingTop);\n      const paddingBottom = parseFloat(computedStyle.paddingBottom);\n      const borderTopWidth = parseFloat(computedStyle.borderTopWidth);\n      const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth);\n\n      // Calculate min-height based on rows\n      const minHeight =\n        lineHeight * this.rows +\n        paddingTop +\n        paddingBottom +\n        borderTopWidth +\n        borderBottomWidth;\n\n      this.textareaElement.style.minHeight = `${minHeight}px`;\n      this.textareaElement.style.height =\n        this.textareaElement.scrollHeight + 'px';\n    }\n  }\n\n  /**\n   * Class        Properties\n   * resize-none\tresize: none;\n   * resize-y\t    resize: vertical;\n   * resize-x\t    resize: horizontal;\n   * resize\t      resize: both;\n   * @returns {string} The resize class.\n   */\n  private getResize() {\n    if (this.resize === 'none') return 'resize-none';\n    if (this.resize === 'vertical') return 'resize-y';\n    if (this.resize === 'horizontal') return 'resize-x';\n    if (this.resize === 'both') return 'resize';\n    return 'resize-none';\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentDidLoad() {\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.textareaId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <div class=\"textarea-wrapper\">\n          <div\n            class=\"textarea-container\"\n            onClick={this.handleTextareaContainerClick}\n          >\n            <textarea\n              id={this.textareaId}\n              ref={e => (this.textareaElement = e)}\n              placeholder={this.placeholder}\n              name={this.name}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              required={this.required}\n              maxlength={this.maxlength}\n              minlength={this.minlength}\n              autocomplete=\"off\"\n              value={this.value}\n              onInput={this.handleTextarea}\n              rows={this.rows}\n              class={clsx(this.getResize())}\n            />\n          </div>\n        </div>\n\n        {(this.description ||\n          this.el.querySelector('[slot=\"description\"]')) && (\n          <div class=\"description\">\n            <slot name=\"description\">{this.description}</slot>\n          </div>\n        )}\n\n        {(this.errorDescription ||\n          this.el.querySelector('[slot=\"error-description\"]')) && (\n          <div hidden={!this.error} class=\"error-description\">\n            <slot name=\"error-description\">{this.errorDescription}</slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}

package/dist/collection/components/nv-fieldtoggle/nv-fieldtoggle.css

@@ -0,0 +1,114 @@
+nv-fieldtoggle {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--form-gap-x);
+  position: relative;
+}
+nv-fieldtoggle:not([disabled], [readonly]) input,
+nv-fieldtoggle:not([disabled], [readonly]) label {
+  cursor: pointer;
+}
+nv-fieldtoggle.label-placement-before {
+  flex-direction: row-reverse;
+}
+nv-fieldtoggle[disabled] {
+  opacity: 0.5;
+}
+nv-fieldtoggle label {
+  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-fieldtoggle .input-container {
+  position: relative;
+  color: var(--components-form-shape-foreground-default);
+}
+nv-fieldtoggle .input-container:has(input[type=checkbox]:disabled:not([readonly])) {
+  color: var(--components-form-shape-foreground-disabled);
+}
+nv-fieldtoggle .input-container input[type=checkbox] {
+  appearance: none;
+  position: relative;
+  display: flex;
+  width: var(--form-toggle-width);
+  height: var(--form-toggle-height);
+  flex-direction: column;
+  align-items: flex-start;
+  border-radius: var(--form-toggle-radius);
+  border-width: var(--form-toggle-border-width);
+  border-style: solid;
+  border-color: var(--components-form-field-border-default);
+  background: var(--components-form-field-background-default);
+}
+nv-fieldtoggle .input-container input[type=checkbox]::after {
+  content: "";
+  display: block;
+  width: var(--form-toggle-switch-dot-default);
+  height: var(--form-toggle-switch-dot-default);
+  background-color: var(--components-form-shape-foreground-switch-dot);
+  border-radius: var(--radius-rounded-full);
+  position: absolute;
+  top: 50%;
+  left: 25%;
+  transform: translate(-50%, -50%);
+}
+nv-fieldtoggle .input-container input[type=checkbox]:hover {
+  border-color: var(--components-form-field-border-hover);
+}
+nv-fieldtoggle .input-container input[type=checkbox]:focus {
+  border-color: var(--components-form-field-border-default);
+}
+nv-fieldtoggle .input-container input[type=checkbox]:focus, nv-fieldtoggle .input-container input[type=checkbox]:focus-within {
+  outline: none;
+}
+nv-fieldtoggle .input-container input[type=checkbox]:focus-visible, nv-fieldtoggle .input-container input[type=checkbox]:has(:focus-visible) {
+  outline: var(--focus-outline-stroke) solid var(--color-focus-brand);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
+}
+nv-fieldtoggle .input-container input[type=checkbox]:checked {
+  background: var(--components-form-field-background-checked);
+  border-color: var(--components-form-field-background-checked);
+}
+nv-fieldtoggle .input-container input[type=checkbox]:checked::after {
+  content: "";
+  display: block;
+  width: var(--form-toggle-switch-dot-default);
+  height: var(--form-toggle-switch-dot-default);
+  background-color: var(--components-form-shape-foreground-default);
+  border-radius: var(--radius-rounded-full);
+  position: absolute;
+  top: 50%;
+  left: 75%;
+  transform: translate(-50%, -50%);
+}
+nv-fieldtoggle .input-container input[type=checkbox]:checked:focus {
+  background: var(--components-form-field-background-checked);
+  border-color: var(--components-form-field-border-focus);
+}
+nv-fieldtoggle .input-container input[type=checkbox]:disabled:not([readonly]) {
+  box-shadow: unset;
+  background: var(--components-form-field-background-disabled);
+  border-color: var(--components-form-field-border-default);
+}
+nv-fieldtoggle .input-container input[type=checkbox]:disabled:not([readonly]):checked::after {
+  background-color: var(--components-form-shape-foreground-disabled);
+}
+nv-fieldtoggle .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;
+  font-weight: 450;
+  line-height: var(--form-description-line-height);
+}
+nv-fieldtoggle .text-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+}