@nova-design-system/nova-webcomponents 3.0.0 → 3.2.0

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

@@ -1 +1 @@
-{"version":3,"file":"nv-fieldtextarea.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fieldtextarea/nv-fieldtextarea.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\nimport { faker } from '@faker-js/faker';\n\nconst NvFieldtextareaDocs: NovaDocs<Components.NvFieldtextarea> = {\n  component: 'nv-fieldtextarea',\n  subcomponents: ['nv-badge', 'nv-button'],\n  stories: [\n    {\n      name: 'Default',\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.label),\n      args: {\n        label: 'Textfield Label',\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.description),\n      args: {\n        label: 'Textfield Description',\n        description: 'Description will show here',\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.placeholder),\n      args: {\n        label: 'Textfield Placeholder',\n        placeholder: 'Type something...',\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.name),\n      args: {\n        label: 'Textfield Name',\n        name: 'name',\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.value),\n      args: {\n        label: 'Textfield Value',\n        value: 'value',\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.disabled),\n      args: {\n        label: 'Textfield Disabled',\n        disabled: true,\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.readonly),\n      args: {\n        label: 'Textfield Readonly',\n        readonly: true,\n        value: 'This textarea is readonly',\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.required),\n      args: {\n        label: 'Textfield Required',\n        required: true,\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.error),\n      args: {\n        label: 'Textfield Error',\n        error: true,\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.errorDescription),\n      args: {\n        label: 'Textfield Error Description',\n        description: 'Make sure to be valid.',\n        error: true,\n        errorDescription: 'This textarea has an error.',\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.success),\n      args: {\n        label: 'Textfield Success',\n        success: true,\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.maxlength),\n      args: {\n        label: 'Textfield Max Length',\n        maxlength: 10,\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.minlength),\n      args: {\n        label: 'Textfield Min Length',\n        minlength: 10,\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.rows),\n      args: {\n        label: 'Textarea Rows',\n        rows: 4,\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.resize),\n      args: {\n        label: 'Textarea Resize',\n        resize: 'horizontal',\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.autosize),\n      args: {\n        label: 'Textarea Autosize',\n        autosize: true,\n        rows: 4,\n        value: faker.lorem.paragraph(30),\n        resize: 'none',\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.autofocus),\n      args: {\n        label: 'Autofocus',\n        autofocus: true,\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: 'labelSlot',\n      description:\n        'Content to be placed as the label, will override the label prop.',\n      args: {\n        label: 'Original Label',\n      },\n      template: (\n        <nv-fieldtextarea data-storybook-args>\n          <span slot=\"label\">Label Slot</span>\n        </nv-fieldtextarea>\n      ),\n    },\n    {\n      name: 'descriptionSlot',\n      description:\n        'Content to be placed as the description, will override the description prop.',\n      args: {\n        label: 'Description Slot',\n        description: 'Original description',\n      },\n      template: (\n        <nv-fieldtextarea data-storybook-args>\n          <span slot=\"description\">Custom Description</span>\n        </nv-fieldtextarea>\n      ),\n    },\n    {\n      name: 'errorDescriptionSlot',\n      description:\n        'Content to be placed as the error description, will override the errorDescription prop.',\n      args: {\n        label: 'Error Description Slot',\n        errorDescription: 'Original error description',\n        error: true,\n      },\n      template: (\n        <nv-fieldtextarea data-storybook-args>\n          <span slot=\"error-description\">Custom Error Description</span>\n        </nv-fieldtextarea>\n      ),\n    },\n  ],\n};\n\nexport default NvFieldtextareaDocs;\n"]}
+{"version":3,"file":"nv-fieldtextarea.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fieldtextarea/nv-fieldtextarea.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\nimport { faker } from '@faker-js/faker';\n\nconst NvFieldtextareaDocs: NovaDocs<Components.NvFieldtextarea> = {\n  component: 'nv-fieldtextarea',\n  subcomponents: ['nv-badge', 'nv-button'],\n  stories: [\n    {\n      name: 'Default',\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.label),\n      args: {\n        label: 'Textfield Label',\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.description),\n      args: {\n        label: 'Textfield Description',\n        description: 'Description will show here',\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.placeholder),\n      args: {\n        label: 'Textfield Placeholder',\n        placeholder: 'Type something...',\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.name),\n      args: {\n        label: 'Textfield Name',\n        name: 'name',\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.value),\n      args: {\n        label: 'Textfield Value',\n        value: 'value',\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.disabled),\n      args: {\n        label: 'Textfield Disabled',\n        disabled: true,\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.readonly),\n      args: {\n        label: 'Textfield Readonly',\n        readonly: true,\n        value: 'This textarea is readonly',\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.required),\n      args: {\n        label: 'Textfield Required',\n        required: true,\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.error),\n      args: {\n        label: 'Textfield Error',\n        error: true,\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.errorDescription),\n      args: {\n        label: 'Textfield Error Description',\n        description: 'Make sure to be valid.',\n        error: true,\n        errorDescription: 'This textarea has an error.',\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.success),\n      args: {\n        label: 'Textfield Success',\n        success: true,\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.maxlength),\n      args: {\n        label: 'Textfield Max Length',\n        maxlength: 10,\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.minlength),\n      args: {\n        label: 'Textfield Min Length',\n        minlength: 10,\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.rows),\n      args: {\n        label: 'Textarea Rows',\n        rows: 4,\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.resize),\n      args: {\n        label: 'Textarea Resize',\n        resize: 'horizontal',\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.autosize),\n      args: {\n        label: 'Textarea Autosize',\n        autosize: true,\n        rows: 4,\n        value: faker.lorem.paragraph(30),\n        resize: 'none',\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.autofocus),\n      args: {\n        label: 'Autofocus',\n        autofocus: true,\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.fluid),\n      args: {\n        label: 'Fluid',\n        fluid: true,\n      },\n      template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n    },\n    {\n      name: 'labelSlot',\n      description:\n        'Content to be placed as the label, will override the label prop.',\n      args: {\n        label: 'Original Label',\n      },\n      template: (\n        <nv-fieldtextarea data-storybook-args>\n          <span slot=\"label\">Label Slot</span>\n        </nv-fieldtextarea>\n      ),\n    },\n    {\n      name: 'descriptionSlot',\n      description:\n        'Content to be placed as the description, will override the description prop.',\n      args: {\n        label: 'Description Slot',\n        description: 'Original description',\n      },\n      template: (\n        <nv-fieldtextarea data-storybook-args>\n          <span slot=\"description\">Custom Description</span>\n        </nv-fieldtextarea>\n      ),\n    },\n    {\n      name: 'errorDescriptionSlot',\n      description:\n        'Content to be placed as the error description, will override the errorDescription prop.',\n      args: {\n        label: 'Error Description Slot',\n        errorDescription: 'Original error description',\n        error: true,\n      },\n      template: (\n        <nv-fieldtextarea data-storybook-args>\n          <span slot=\"error-description\">Custom Error Description</span>\n        </nv-fieldtextarea>\n      ),\n    },\n  ],\n};\n\nexport default NvFieldtextareaDocs;\n"]}

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

@@ -71,6 +71,10 @@ export class NvFieldtextarea {
          * element.
          */
         this.autofocus = false;
+        /**
+         * Allows the field to stretch and fill the entire width of its container.
+         */
+        this.fluid = false;
         //#endregion WATCHERS
         /****************************************************************************/
         //#region METHODS
@@ -173,9 +177,9 @@ export class NvFieldtextarea {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '606902cda67b3f523ab32d8e9c6fd11b6bc0f3a7' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '3167dfd5f17028ad20a82b5646ccfa788a5bbb86', htmlFor: this.inputId }, h("slot", { key: 'ae98d87f3e1b7cb2864b6b7e7183d3a37c1a7e14', name: "label" }, this.label))), h("div", { key: '8f25bdadd8f94938dc9b6c631b0586fc6bcbc37c', class: "textarea-wrapper" }, h("div", { key: '6568df9f332e8bca84445ba596d6eceaaed64b9e', class: "textarea-container", onClick: this.handleTextareaContainerClick }, h("textarea", { key: 'fca9ba5bd6925cc1a201625e5785ad451fc8849b', 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: 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"]')) && (h("div", { key: 'c5c8c1999105df446a603a3e02f431ad37de4c5e', class: "description" }, h("slot", { key: 'bbcea14c7585e1ff1c995eb4f21cb532a160ed40', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '2d43d92b5c9b93faeac45bdcfa142d4dfd70511a', hidden: !this.error, class: "error-description" }, h("slot", { key: '33514ea705969b353f11c49ca65090706e6aadf8', name: "error-description" }, this.errorDescription)))));
+        return (h(Host, { key: '405a8423bb391cc8c1e32d8d64ab587c71b355d1' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'dc5a90e0f9cde1946966cb5b2ad98050c6740869', htmlFor: this.inputId }, h("slot", { key: 'a2c78f23289fcdb742000fa949b98359441268dc', name: "label" }, this.label))), h("div", { key: 'be9840925f442ad964597e77d7c6b9b29b5bae0f', class: "textarea-wrapper" }, h("div", { key: '11b986940cfff801c6599f03850b1fc8c5cf2800', class: "textarea-container", onClick: this.handleTextareaContainerClick }, h("textarea", { key: 'b4d7bbec6ed6d38545935eef997fbc73499bdc15', 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: 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"]')) && (h("div", { key: 'fc2b00df7fccc60ee9ff1f04cd81e059839b29c0', class: "description" }, h("slot", { key: '9cfaf267dfec3412a5a09ee8fe64b244fda69c7b', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'a56439ef49efeffe303d13f56a0b00f648a7979d', hidden: !this.error, class: "error-description" }, h("slot", { key: '5337f43770894cf6898fcbdc3b77f8a337061597', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldtextarea"; }
     static get formAssociated() { return true; }
@@ -592,6 +596,26 @@ export class NvFieldtextarea {
                 "attribute": "autofocus",
                 "reflect": true,
                 "defaultValue": "false"
+            },
+            "fluid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows the field to stretch and fill the entire width of its container."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "fluid",
+                "reflect": true,
+                "defaultValue": "false"
             }
         };
     }

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

@@ -1 +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({ reflect: true })\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({ reflect: true })\n  readonly validation: string;\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the input 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 inputId: 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  /**\n   * Applies focus to the input field as soon as the component is mounted. This\n   * is equivalent to setting the native autofocus attribute on a <textarea>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: 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  /**\n   * Make sure to adjust the height of the textarea when the value changes\n   * programmatically or by typing when autosize is on.\n   */\n  @Watch('value')\n  handleValueChange() {\n    if (this.autosize) {\n      this.adjustTextareaHeight();\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\n  private handleTextareaContainerClick = () => {\n    this.textareaElement.focus();\n  };\n\n  private adjustTextareaHeight() {\n    if (this.textareaElement && this.autosize) {\n      /**\n       * The first requestAnimationFrame ensures that the DOM has applied any\n       * pending changes (e.g., value updates or attribute changes) before\n       * proceeding to the next frame.\n       */\n      requestAnimationFrame(() => {\n        /**\n         * The second requestAnimationFrame ensures that the browser has fully\n         * recalculated layout and styles based on the updated DOM, such as\n         * recalculating scrollHeight for the textarea after the new value is\n         * rendered.\n         */\n        requestAnimationFrame(() => {\n          this.textareaElement.style.height = 'auto';\n\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\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\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  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.inputId}>\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.inputId}\n              ref={e => (this.textareaElement = e)}\n              placeholder={this.placeholder}\n              autofocus={this.autofocus}\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(\n                this.resize === 'none' && 'resize-none',\n                this.resize === 'vertical' && 'resize-y',\n                this.resize === 'horizontal' && 'resize-x',\n                this.resize === 'both' && 'resize',\n              )}\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"]}
+{"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({ reflect: true })\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({ reflect: true })\n  readonly validation: string;\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the input 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 inputId: 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  /**\n   * Applies focus to the input field as soon as the component is mounted. This\n   * is equivalent to setting the native autofocus attribute on a <textarea>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  /**\n   * Allows the field to stretch and fill the entire width of its container.\n   */\n  @Prop({ reflect: true })\n  readonly fluid: 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  /**\n   * Make sure to adjust the height of the textarea when the value changes\n   * programmatically or by typing when autosize is on.\n   */\n  @Watch('value')\n  handleValueChange() {\n    if (this.autosize) {\n      this.adjustTextareaHeight();\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\n  private handleTextareaContainerClick = () => {\n    this.textareaElement.focus();\n  };\n\n  private adjustTextareaHeight() {\n    if (this.textareaElement && this.autosize) {\n      /**\n       * The first requestAnimationFrame ensures that the DOM has applied any\n       * pending changes (e.g., value updates or attribute changes) before\n       * proceeding to the next frame.\n       */\n      requestAnimationFrame(() => {\n        /**\n         * The second requestAnimationFrame ensures that the browser has fully\n         * recalculated layout and styles based on the updated DOM, such as\n         * recalculating scrollHeight for the textarea after the new value is\n         * rendered.\n         */\n        requestAnimationFrame(() => {\n          this.textareaElement.style.height = 'auto';\n\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\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\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  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.inputId}>\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.inputId}\n              ref={e => (this.textareaElement = e)}\n              placeholder={this.placeholder}\n              autofocus={this.autofocus}\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(\n                this.resize === 'none' && 'resize-none',\n                this.resize === 'vertical' && 'resize-y',\n                this.resize === 'horizontal' && 'resize-x',\n                this.resize === 'both' && 'resize',\n              )}\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-fieldtime/nv-fieldtime.js

@@ -88,7 +88,10 @@ export class NvFieldtime {
     /****************************************************************************/
     //#region LISTENERS
     handleOpenChanged(event) {
-        this.open = event.detail; // Update `open` based on the popover state
+        // Stop propagation to prevent the event from affecting parent components like dialogs
+        event.stopPropagation();
+        // Update `open` based on the popover state
+        this.open = event.detail;
     }
     handleKeyDown(event) {
         var _a, _b, _c, _d;
@@ -967,26 +970,26 @@ export class NvFieldtime {
             }, key: `${option}-${index}`, onClick: e => this.handleTimeOptionClick(e, type) }, option)))));
     }
     render() {
-        return (h(Host, { key: 'fb5bc4740731089bf81ab7b24e57f24f966c5f92', onclick: e => this.handleHostClick(e) }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'd9f44f4ab94a13a620df743979d95b1f59572bfe', htmlFor: this.inputId }, h("slot", { key: 'fbc8176ea3443511764b2993939d1110fd932a5a', name: "label" }, this.label))), h("nv-popover", { key: 'ea376ec38db428db158c998e8963e27048ef03b0', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: 'fa825918cea4a64db76324f953645f6db7cb81b9', class: "input-wrapper", slot: "trigger" }, h("slot", { key: '37d7fd2eae40e4f47e9b626c226d060cf5e350e2', name: "before-input" }), h("div", { key: '6b73d8c9598bfaf470b5c5a455db0b08397cc8c8', class: "input-container" }, h("slot", { key: '88f20151d7ccc1e3ad6f6aba4b5926cccc22c19c', name: "leading-input" }), startsWithIgnoreCase(this.format, 'HH') && [
-            h("input", { key: '292ee8c62fd248b28fb46275ba06846d69b3b602', ref: el => (this.inputElements[TimeType.Hours] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.hours, onInput: e => this.handleInputChange(e, TimeType.Hours), placeholder: this.format.includes('hh') ? 'hh' : 'HH', inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Hours), name: this.name
+        return (h(Host, { key: 'f2e316b464ef324043fca47a25d7511fed662fe9', onclick: e => this.handleHostClick(e) }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '738dd3f9ba307a21ad7f16f77eb09f4f9fed8ccb', htmlFor: this.inputId }, h("slot", { key: '8106132899c67bbc7e9ffb82caf575d599239b9a', name: "label" }, this.label))), h("nv-popover", { key: '8306d0204039862466d83c7e5e2f42b87ea331c4', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: '0355aee332a5c5cd2492f22b7d820625273c74e6', class: "input-wrapper", slot: "trigger" }, h("slot", { key: 'a6aaeaba4901b4fe0b0266796c84531d57fbb719', name: "before-input" }), h("div", { key: 'ae78ff8fc1a857a0da7be6e3c29464dbc0b80771', class: "input-container" }, h("slot", { key: '6455a51b2f1edf565ac754e61ac773a920f319d4', name: "leading-input" }), startsWithIgnoreCase(this.format, 'HH') && [
+            h("input", { key: '9a48b8ea04698b9443774a2e2bf41383144ba29a', ref: el => (this.inputElements[TimeType.Hours] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.hours, onInput: e => this.handleInputChange(e, TimeType.Hours), placeholder: this.format.includes('hh') ? 'hh' : 'HH', inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Hours), name: this.name
                     ? `${TimeType.Hours}-${this.name}`
                     : TimeType.Hours, id: this.inputId, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
         ], this.format.includes('mm') && [
-            h("span", { key: 'c7de2283771d60e1e9f756257e34da0eefcf27f3' }, ":"),
-            h("input", { key: '521fad8cc60c9ced2ba634441b789fba15340ae7', ref: el => (this.inputElements[TimeType.Minutes] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.minutes, onInput: e => this.handleInputChange(e, TimeType.Minutes), placeholder: "mm", inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Minutes), name: this.name
+            h("span", { key: '5f75d09a90c0a8f6f106eb3e24f4f342fcc36d67' }, ":"),
+            h("input", { key: 'b3cc508705147ea07218a037f21f425deb9b94af', ref: el => (this.inputElements[TimeType.Minutes] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.minutes, onInput: e => this.handleInputChange(e, TimeType.Minutes), placeholder: "mm", inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Minutes), name: this.name
                     ? `${TimeType.Minutes}-${this.name}`
                     : TimeType.Minutes, id: `${this.inputId}-minutes`, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
         ], this.format.includes('ss') && [
-            h("span", { key: 'ceef993e3efdc2fa01d466033522e09ee78683b1' }, ":"),
-            h("input", { key: '9c51f0fcecb86a913e9ae4cd3c5bcfbf34ac4ab8', ref: el => (this.inputElements[TimeType.Seconds] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.seconds, onInput: e => this.handleInputChange(e, TimeType.Seconds), placeholder: "ss", inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Seconds), name: this.name
+            h("span", { key: '00b9320c275b027f9b2fbbebc1f56431783c874e' }, ":"),
+            h("input", { key: '3421fb11a4c9d9ba58bbf6f809070ce35d3d1ad6', ref: el => (this.inputElements[TimeType.Seconds] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.seconds, onInput: e => this.handleInputChange(e, TimeType.Seconds), placeholder: "ss", inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Seconds), name: this.name
                     ? `${TimeType.Seconds}-${this.name}`
                     : TimeType.Seconds, id: `${this.inputId}-seconds`, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
-        ], h("nv-iconbutton", { key: '7a5516b7d91dc99f6963ee9daacee9305b16dfb0', name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', "aria-pressed": this.open.toString(), onClick: () => this.HandleDropdownIconClick() }), this.error && (h("nv-icon", { key: 'a9a9a02e312caf25a52b91e1d4db6b6ee9d850d6', name: "alert-circle", class: "validation", size: "sm" })), this.success && (h("nv-icon", { key: '93a69f343771dbdb8c6bd694ea9f5ddeeba39801', name: "circle-check", class: "validation", size: "sm" }))), h("slot", { key: '678d9af754b860ac99a50d70cb9b975e79f164c9', name: "after-input" })), h("div", { key: '2bd255e97d8b34b66fa0af2f209d5175e67b62a3', class: "time-dropdown", slot: "content" }, h("div", { key: '017b58a9a7ccb44918a408fb680fa1c18d8f5672', class: "time-columns" }, startsWithIgnoreCase(this.format, 'HH') &&
+        ], h("nv-iconbutton", { key: 'c61dc8780e1d668f2bf11ac2ace21b89ed460fdb', name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', "aria-pressed": this.open.toString(), onClick: () => this.HandleDropdownIconClick() }), this.error && (h("nv-icon", { key: '5963651793c9c1ec5d47be2a8cea9fed22490bb9', name: "alert-circle", class: "validation", size: "sm" })), this.success && (h("nv-icon", { key: '79953118d4206363f97ffb8d69dd76545795e419', name: "circle-check", class: "validation", size: "sm" }))), h("slot", { key: 'd0a8c104a671f997e6a9da223baa2a37dd3bf349', name: "after-input" })), h("div", { key: '7dec8335599d59e116065bdb0053a9096acaae88', class: "time-dropdown", slot: "content" }, h("div", { key: 'be7d3a3fa7b4def66a7ebdf2f29b489540fa5802', class: "time-columns" }, startsWithIgnoreCase(this.format, 'HH') &&
             this.RenderTimeOptionsColumn(TimeType.Hours), this.format.includes('mm') &&
             this.RenderTimeOptionsColumn(TimeType.Minutes), this.format.includes('ss') &&
             this.RenderTimeOptionsColumn(TimeType.Seconds)))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '35f5fb47bfeb9cde2c3551df391cf52ccaf10c72', class: "description" }, h("slot", { key: 'b450124765db5b2337f03a5f68c4a9466c80ca85', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '87d441f595f7ba8be04ca749235ec3918e9a80b0', hidden: !this.error, class: "error-description" }, h("slot", { key: '35717f533b4a4c310f4fb805c3989398f340b8b1', name: "error-description" }, this.errorDescription)))));
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'ec98cc31482efab33ace4e0bf62c6d5d82890df5', class: "description" }, h("slot", { key: '307b134933cca699d6f00d891a440281f2427d79', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '71763de75be4e9f14e1cd1788ca06f2265a46d7e', hidden: !this.error, class: "error-description" }, h("slot", { key: 'dbe05c00515a5ccf1b4ba4736b943cfd8cefaaa0', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldtime"; }
     static get formAssociated() { return true; }