npm - @nova-design-system/nova-webcomponents - Versions diffs - 3.18.0 → 3.20.0 - Mend

@nova-design-system/nova-webcomponents 3.18.0 → 3.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (301) hide show

package/dist/collection/components/nv-fieldnumber/nv-fieldnumber.js CHANGED Viewed

@@ -69,7 +69,15 @@ export class NvFieldnumber {
         //#region METHODS
         this.handleInput = (event) => {
             const input = event.target;
-            this.value = input.valueAsNumber;
+            if (input.value === '') {
+                this.value = null;
+                return;
+            }
+            const nextValue = input.valueAsNumber;
+            if (Number.isNaN(nextValue)) {
+                return;
+            }
+            this.value = nextValue;
         };
         this.handleInputContainerClick = () => {
             this.inputElement.focus();
@@ -87,17 +95,26 @@ export class NvFieldnumber {
             event.preventDefault();
         };
         this.isMinValueReached = () => {
-            return this.min !== undefined && this.value <= this.min;
+            return (this.min !== undefined &&
+                typeof this.value === 'number' &&
+                this.value <= this.min);
         };
         this.isMaxValueReached = () => {
-            return this.max !== undefined && this.value >= this.max;
+            return (this.max !== undefined &&
+                typeof this.value === 'number' &&
+                this.value >= this.max);
         };
     }
     //#endregion EVENTS
     /****************************************************************************/
     //#region WATCHERS
     watchValueHandler(newValue) {
-        this.valueChanged.emit(newValue);
+        const normalized = typeof newValue === 'number' && !Number.isNaN(newValue) ? newValue : null;
+        if (this.lastEmittedValue === normalized) {
+            return;
+        }
+        this.lastEmittedValue = normalized;
+        this.valueChanged.emit(normalized);
     }
     //#endregion METHODS
     /****************************************************************************/
@@ -115,9 +132,9 @@ export class NvFieldnumber {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '1bbe4506220df2ebb5723e916edcf49b3c0295e4' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '56ed85a58e669e9c6aec04ed9ea7bc9664c478f8', htmlFor: this.inputId }, h("slot", { key: 'b4cf04b6bca34f0ff158fd9e7b14c56df7ea3e8a', name: "label" }, this.label))), h("div", { key: '9c9432645591952acff5b1f73c5be8d8f1dae7fb', class: "input-wrapper" }, h("slot", { key: '05bacf384b22fce12a66109864ec95fab403f8d7', name: "before-input" }), h("div", { key: '66f0c59c38b7309834ba22bbd767e94a04964781', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '7e2a7c766484b8c4c4caabab311ea635f95eb4fd', name: "leading-input" }), h("input", { key: '808f4f16b3a73d0b07efa7cff18dd5dd3f94bda4', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", autofocus: this.autofocus, required: this.required, max: this.max, min: this.min, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), h("slot", { key: '65a7f356f2a9f650df9e78f53b98b43c7e179802', name: "trailing-input" }), this.error && (h("nv-icon", { key: '5eed73e177092188387abd35ccab6085a1bdb2cf', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '74edadb953f9668e49a1b3ecd328bfd2999065ea', name: "circle-check", class: "validation", size: "md" })), h("div", { key: 'e886fe1df175d5c4dcd9a4704ad47820e0af2474', class: "stepper" }, h("nv-iconbutton", { key: 'ff6247b57693f2a45c26e1eae67c9d86c473e0e3', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }), h("nv-iconbutton", { key: 'aa12c105d159e08e874bdd37f56ab1837ba01c4f', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }))), h("slot", { key: 'c485ac2e1ca388b6e0998bdb1c5ca5876cd9e392', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '88d80f2f5b0061b0f8dab4bcc88bf2d196427800', class: "description" }, h("slot", { key: '0380af6af9986d000ad58328e6c4b8250f86c22a', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'a2233d218f58376b6c7958efabe96a3e08c6e1f6', hidden: !this.error, class: "error-description" }, h("slot", { key: 'd90bc8abdcecc9711b271472a8da60b207aa04af', name: "error-description" }, this.errorDescription)))));
+        return (h(Host, { key: '9b3239f09e6aace03f79f07399723fdbf557f070' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '322478abbaf477a33debcd828387402299ce6762', htmlFor: this.inputId }, h("slot", { key: '75b791ca0fb7eec55faaf966a32733e37b87fb90', name: "label" }, this.label))), h("div", { key: '5ce6c27db2b6b0ba8618ed2eac1f61abf8177793', class: "input-wrapper" }, h("slot", { key: '3a4a86e358d575fc312d27ee5ffba68474904bd4', name: "before-input" }), h("div", { key: '8e07c3c37ea4869aa309fba913663e1d225e21fd', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '91e7c82e46d3268493669e6dd121f643be86a6be', name: "leading-input" }), h("input", { key: '3dcbd9d10e4425ebb29b16b1157845ea4ee7bdef', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", autofocus: this.autofocus, required: this.required, max: this.max, min: this.min, step: this.step, value: typeof this.value === 'number' ? this.value : undefined, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), h("slot", { key: '7d0d4a77d121433f4feb8aa2139be8e94f8e57a5', name: "trailing-input" }), this.error && (h("nv-icon", { key: '2a3969e56de0fc3911901c9540e300caf2b6d681', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '8964d7ffaa2cc2a70caf781a37e66383234c6895', name: "circle-check", class: "validation", size: "md" })), h("div", { key: '1ca2fd7095afbc12a1a54c8b09551f28fe5a3579', class: "stepper" }, h("nv-iconbutton", { key: '1c3f9200c5409bc05fab9061dff3847a92298d45', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }), h("nv-iconbutton", { key: 'eb65687b3c31d2ac8bdb534f5ca300a1ada9cd64', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }))), h("slot", { key: '01006c0c2487bce4f908104d263acb0231cdb701', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '9db93a8aa6bb002a3286763909118e9c7a1661c0', class: "description" }, h("slot", { key: '13b0f797bace74e641cdd658bb798bccbfec70dc', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '4ca240bc22fb83a283637e60384e59d687d67e9e', hidden: !this.error, class: "error-description" }, h("slot", { key: '145b68572a38e91559431ff51ec38a64027d4978', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldnumber"; }
     static get formAssociated() { return true; }
@@ -460,7 +477,7 @@ export class NvFieldnumber {
                 "type": "number",
                 "mutable": true,
                 "complexType": {
-                    "original": "number",
+                    "original": "number | null",
                     "resolved": "number",
                     "references": {}
                 },
@@ -532,7 +549,7 @@ export class NvFieldnumber {
                     "text": "Emitted when the input value changes."
                 },
                 "complexType": {
-                    "original": "number",
+                    "original": "number | null",
                     "resolved": "number",
                     "references": {}
                 }

package/dist/collection/components/nv-fieldnumber/nv-fieldnumber.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-fieldnumber.js","sourceRoot":"","sources":["../../../src/components/nv-fieldnumber/nv-fieldnumber.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Watch,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\n/*\n @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot trailing-input - Content to be placed after the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\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-fieldnumber',\n styleUrl: 'nv-fieldnumber.scss',\n shadow: false,\n formAssociated: true,\n})\nexport class NvFieldnumber {\n @Element() el: HTMLNvFieldnumberElement;\n private inputElement!: HTMLInputElement;\n\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Message defines a 'hint ' message for the number 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 * input 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 input 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 input 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 input 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 input’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 The disabled prop lets you turn off the input 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 input 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 input 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 input 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 input 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 input field’s appearance to indicate successful input or\n * validation.\n /\n @Prop({ reflect: true })\n readonly success: boolean = false;\n\n /\n The maximum value that the input field can accept. Use this in combination\n * with min to create a range of valid values.\n /\n @Prop({ reflect: true })\n readonly max: number;\n\n /\n The minimum value that the input field can accept. Use this in combination\n * with max to create a range of valid values.\n /\n @Prop({ reflect: true })\n readonly min: number;\n\n /\n Define the increment value for the input field. It determines how much the\n * value will increase or decrease when the user clicks the stepper buttons.\n /\n @Prop({ reflect: true })\n readonly step: number = 1;\n\n /\n The value of the input field. It’s the text that users type in or the value\n * that you set programmatically. This is the main way to interact with the\n * input field, and it’s essential for creating forms that users can fill out.\n /\n @Prop({ reflect: true, mutable: true })\n value: number;\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 an <input>\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 input value changes.\n * @bind value\n /\n @Event()\n valueChanged: EventEmitter<number>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n @Watch('value')\n watchValueHandler(newValue: number) {\n this.valueChanged.emit(newValue);\n }\n\n //#endregion WATCHERS\n /************************************************************************/\n //#region METHODS\n\n private handleInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.value = input.valueAsNumber;\n };\n\n private handleInputContainerClick = () => {\n this.inputElement.focus();\n };\n\n private handlePlus = () => {\n this.inputElement.stepUp();\n this.value = Number(this.inputElement.value);\n };\n\n private handleMinus = () => {\n this.inputElement.stepDown();\n this.value = Number(this.inputElement.value);\n };\n\n // prevents text selection when clicking the buttons multiple times\n private preventSelection = (event: Event) => {\n event.preventDefault();\n };\n\n private isMinValueReached = (): boolean => {\n return this.min !== undefined && this.value <= this.min;\n };\n\n private isMaxValueReached = (): boolean => {\n return this.max !== undefined && this.value >= this.max;\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 //#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=\"input-wrapper\">\n <slot name=\"before-input\"></slot>\n\n <div class=\"input-container\" onClick={this.handleInputContainerClick}>\n <slot name=\"leading-input\"></slot>\n\n <input\n id={this.inputId}\n ref={e => (this.inputElement = e)}\n placeholder={this.placeholder}\n name={this.name}\n type=\"number\"\n autofocus={this.autofocus}\n required={this.required}\n max={this.max}\n min={this.min}\n step={this.step}\n value={this.value}\n disabled={this.disabled}\n readOnly={this.readonly}\n onInput={this.handleInput}\n />\n\n <slot name=\"trailing-input\"></slot>\n\n {this.error && (\n <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n )}\n {this.success && (\n <nv-icon name=\"circle-check\" class=\"validation\" size=\"md\" />\n )}\n\n <div class=\"stepper\">\n <nv-iconbutton\n size=\"md\"\n name=\"minus\"\n emphasis=\"lower\"\n onClick={this.handleMinus}\n disabled={this.isMinValueReached()}\n onMouseDown={this.preventSelection}\n tabindex=\"-1\"\n ></nv-iconbutton>\n <nv-iconbutton\n size=\"md\"\n name=\"plus\"\n emphasis=\"lower\"\n onClick={this.handlePlus}\n disabled={this.isMaxValueReached()}\n onMouseDown={this.preventSelection}\n tabindex=\"-1\"\n />\n </div>\n </div>\n\n <slot name=\"after-input\"></slot>\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"]}
1	+ {"version":3,"file":"nv-fieldnumber.js","sourceRoot":"","sources":["../../../src/components/nv-fieldnumber/nv-fieldnumber.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Watch,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\n/*\n @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot trailing-input - Content to be placed after the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\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-fieldnumber',\n styleUrl: 'nv-fieldnumber.scss',\n shadow: false,\n formAssociated: true,\n})\nexport class NvFieldnumber {\n @Element() el: HTMLNvFieldnumberElement;\n private inputElement!: HTMLInputElement;\n\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Message defines a 'hint ' message for the number 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 * input 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 input 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 input 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 input 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 input’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 The disabled prop lets you turn off the input 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 input 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 input 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 input 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 input 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 input field’s appearance to indicate successful input or\n * validation.\n /\n @Prop({ reflect: true })\n readonly success: boolean = false;\n\n /\n The maximum value that the input field can accept. Use this in combination\n * with min to create a range of valid values.\n /\n @Prop({ reflect: true })\n readonly max: number;\n\n /\n The minimum value that the input field can accept. Use this in combination\n * with max to create a range of valid values.\n /\n @Prop({ reflect: true })\n readonly min: number;\n\n /\n Define the increment value for the input field. It determines how much the\n * value will increase or decrease when the user clicks the stepper buttons.\n /\n @Prop({ reflect: true })\n readonly step: number = 1;\n\n /\n The value of the input field. It’s the text that users type in or the value\n * that you set programmatically. This is the main way to interact with the\n * input field, and it’s essential for creating forms that users can fill out.\n /\n @Prop({ reflect: true, mutable: true })\n value: number \| null;\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 an <input>\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 input value changes.\n * @bind value\n /\n // eslint-disable-next-line nova/bind-event-naming, nova/event-inline-interfaces\n @Event()\n valueChanged: EventEmitter<number \| null>; // eslint-disable-line nova/event-inline-interfaces\n\n /\n Tracks the last emitted value to avoid double firing for normalized nulls.\n /\n private lastEmittedValue?: number \| null;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n @Watch('value')\n watchValueHandler(newValue: number \| null \| undefined) {\n const normalized =\n typeof newValue === 'number' && !Number.isNaN(newValue) ? newValue : null;\n\n if (this.lastEmittedValue === normalized) {\n return;\n }\n\n this.lastEmittedValue = normalized;\n this.valueChanged.emit(normalized);\n }\n\n //#endregion WATCHERS\n /************************************************************************/\n //#region METHODS\n\n private handleInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n if (input.value === '') {\n this.value = null;\n return;\n }\n\n const nextValue = input.valueAsNumber;\n\n if (Number.isNaN(nextValue)) {\n return;\n }\n\n this.value = nextValue;\n };\n\n private handleInputContainerClick = () => {\n this.inputElement.focus();\n };\n\n private handlePlus = () => {\n this.inputElement.stepUp();\n this.value = Number(this.inputElement.value);\n };\n\n private handleMinus = () => {\n this.inputElement.stepDown();\n this.value = Number(this.inputElement.value);\n };\n\n // prevents text selection when clicking the buttons multiple times\n private preventSelection = (event: Event) => {\n event.preventDefault();\n };\n\n private isMinValueReached = (): boolean => {\n return (\n this.min !== undefined &&\n typeof this.value === 'number' &&\n this.value <= this.min\n );\n };\n\n private isMaxValueReached = (): boolean => {\n return (\n this.max !== undefined &&\n typeof this.value === 'number' &&\n this.value >= this.max\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 //#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=\"input-wrapper\">\n <slot name=\"before-input\"></slot>\n\n <div class=\"input-container\" onClick={this.handleInputContainerClick}>\n <slot name=\"leading-input\"></slot>\n\n <input\n id={this.inputId}\n ref={e => (this.inputElement = e)}\n placeholder={this.placeholder}\n name={this.name}\n type=\"number\"\n autofocus={this.autofocus}\n required={this.required}\n max={this.max}\n min={this.min}\n step={this.step}\n value={typeof this.value === 'number' ? this.value : undefined}\n disabled={this.disabled}\n readOnly={this.readonly}\n onInput={this.handleInput}\n />\n\n <slot name=\"trailing-input\"></slot>\n\n {this.error && (\n <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n )}\n {this.success && (\n <nv-icon name=\"circle-check\" class=\"validation\" size=\"md\" />\n )}\n\n <div class=\"stepper\">\n <nv-iconbutton\n size=\"md\"\n name=\"minus\"\n emphasis=\"lower\"\n onClick={this.handleMinus}\n disabled={this.isMinValueReached()}\n onMouseDown={this.preventSelection}\n tabindex=\"-1\"\n ></nv-iconbutton>\n <nv-iconbutton\n size=\"md\"\n name=\"plus\"\n emphasis=\"lower\"\n onClick={this.handlePlus}\n disabled={this.isMaxValueReached()}\n onMouseDown={this.preventSelection}\n tabindex=\"-1\"\n />\n </div>\n </div>\n\n <slot name=\"after-input\"></slot>\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-fieldpassword/nv-fieldpassword.js CHANGED Viewed

@@ -105,9 +105,9 @@ export class NvFieldpassword {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'f6c3db1036f210ed45d9175f86536fefcec49aee' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '3f90294e9d136887c77765dff60f84a2feeba0af', htmlFor: this.inputId }, h("slot", { key: '6406a7f607430ffd4751b1eeda3c169e1e510795', name: "label" }, this.label))), h("div", { key: '2316eabf4abfe0ed740a078b4fde0d744f98f793', class: "input-wrapper" }, h("slot", { key: '00987dffa4d6e3666891ebf3cee4e36cc0534481', name: "before-input" }), h("div", { key: 'e6974c392b1a44dc1f631e85bdf4b45a1d1a5eee', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '05b9ced4358271f96c0e1051fa8dee06fdc1fcd7', name: "leading-input" }), h("input", { key: '0996fa9815a09da1b66dad9d9e1bd4f37842ab9f', id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, type: this.showPasswordState ? 'text' : 'password', inputMode: this.mode, value: this.value, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), (this.success || this.error) && (h("nv-icon", { key: '065dbf76c1d1d6afee787e9b2becb8a4499bcfd7', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" })), !this.hidePasswordIcon && (h("nv-iconbutton", { key: 'eea65c55d64e58e621c9f8d7ad403eb985584afb', name: this.showPasswordState ? 'eye' : 'eye-off', size: "md", emphasis: "lower", onClick: this.togglePasswordVisibility, "aria-label": this.showPasswordState ? 'Hide password' : 'Show password', "aria-pressed": this.showPasswordState.toString() }))), h("slot", { key: '17b613bb7b55fd13d445507d8b5182e3107811e8', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '5d99b2fb2e460febe5b93148d277cee9a73ee180', class: "description" }, h("slot", { key: 'd196e0641080bf455b02e0a92cf95f2d167eb8f9', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '0f96208e27909dca72aea61a6c7fee2a37aaba5f', hidden: !this.error, class: "error-description" }, h("slot", { key: '86d51c3d0244d7536b1818f28420b8d1a11e63b7', name: "error-description" }, this.errorDescription)))));
+        return (h(Host, { key: '3fd88ed71cb3c34fbd4a35cb861617687add3c76' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'b08c3c1d7ca6f196c547fdb42c2289f4fbacd461', htmlFor: this.inputId }, h("slot", { key: '2469c277ea25d8c9ea521cc05da068cf63465637', name: "label" }, this.label))), h("div", { key: '606a09205e3caa2490c3db48411eebc5bddbb786', class: "input-wrapper" }, h("slot", { key: '843cf4814cf84c9d6ca5fec7a13c30820dd0075a', name: "before-input" }), h("div", { key: '4b06bdf556442e8ccb4f28a450bcb5f432740b8a', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: 'c07a3575a5b831e5f803558607fbf677e5b2ffac', name: "leading-input" }), h("input", { key: 'c9536d50ff4ed09cffd13ba06d4599492f77feac', id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, type: this.showPasswordState ? 'text' : 'password', inputMode: this.mode, value: this.value, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), (this.success || this.error) && (h("nv-icon", { key: 'df7f3b45b0dec7dabfdea7496ff6576413101cf5', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" })), !this.hidePasswordIcon && (h("nv-iconbutton", { key: 'ef3bc855fe5f70ed537d9b564b7f8b990998da48', name: this.showPasswordState ? 'eye' : 'eye-off', size: "md", emphasis: "lower", onClick: this.togglePasswordVisibility, "aria-label": this.showPasswordState ? 'Hide password' : 'Show password', "aria-pressed": this.showPasswordState.toString() }))), h("slot", { key: 'd7e892c362bcab7724c0250a8e097bdd3a7f28a2', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '5933be1bda9a32ceabcae5144e6a6a131203f9d6', class: "description" }, h("slot", { key: '31671c862c3e5988ef4939d21a75f721b47eacf6', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'a38ff2519ae8da933b5884c0e576d91b8825dec7', hidden: !this.error, class: "error-description" }, h("slot", { key: 'ec242e6f6cf28b7e34bfcec658874067019ba540', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldpassword"; }
     static get formAssociated() { return true; }

package/dist/collection/components/nv-fieldradio/nv-fieldradio.js CHANGED Viewed

@@ -83,9 +83,9 @@ export class NvFieldradio {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'df74694648d4d6ca117d5766871d032b0ec0fa85', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, h("input", { key: 'cf30fb745aba5943414e1572a8f7a42af1bf0e3d', type: "radio", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), h("div", { key: 'ff593d4187158ca803f5e49be365f701dc4d618d', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '25120e7e90ce5fb99f90ddca35edc54c1d73f760', htmlFor: this.inputId }, h("slot", { key: '557bc3204927f58c0c809870f766fdf36c701c7d', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '9ded425c581cd60f8ef33a830b594589d83fec71', class: "description" }, h("slot", { key: '9554607229576afbd33da6bb95d08c7a0b354ee0', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '4435f0d7258e3ea0124d06763ffa6a8f17e8ba15', hidden: !this.error, class: "error-description" }, h("slot", { key: 'd4a80a4b4ddca790a4cb65d79d5d898da4140a07', name: "error-description" }, this.errorDescription))))));
+        return (h(Host, { key: '18cad87f89d7532fab554e1ad74fcc615ddd8026', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, h("input", { key: '347c33c2ff2b6377d009c108739e4016f97da16b', type: "radio", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), h("div", { key: '067cebdaf42e94c0b447a91b852a44fa7d5f58cf', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '9c90d0c9e27125576e8194113412795243492c9d', htmlFor: this.inputId }, h("slot", { key: 'c5da5d8f8715635ec0adfd46ee704b7c0d940bdd', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'f5e00078f008ab49bbac08c3d3614cae05b783a7', class: "description" }, h("slot", { key: 'b70921bbe8acda5c9b7c8e7d81e2d696bc2e4613', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'a6ccddfb948ba5db46f355bb3afd73873fcfe8e6', hidden: !this.error, class: "error-description" }, h("slot", { key: '896448579ceee1ba50672e58e8a70e21d5d9fc64', name: "error-description" }, this.errorDescription))))));
     }
     static get is() { return "nv-fieldradio"; }
     static get formAssociated() { return true; }

package/dist/collection/components/nv-fieldselect/nv-fieldselect.js CHANGED Viewed

@@ -335,13 +335,13 @@ export class NvFieldselect {
      * @returns {HTMLStencilElement} The HTML element to render.
      */
     render() {
-        return (h(Host, { key: '8db3dc06b44e4db7e2a0742e601c12e18e758ce4' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'ba4f797c94d2e8155758caf61ac58ad81ec76e9c', htmlFor: this.inputId }, h("slot", { key: '066e33d824ae5cf44e3c7e0ca63784d945a89fff', name: "label" }, this.label))), h("div", { key: '0c07cf2f4628ef816e6d1e927fef0da2f822ca54', class: "select-wrapper" }, h("slot", { key: '53dbbfa9adc491c47896c3898a3e2004a3ee7e54', name: "before-input" }), h("div", { key: 'c31b867bd77008caca565d81805964da23f8330c', class: "select-container", onClick: this.handleSelectContainerClick }, h("slot", { key: '7be8d229d57c77ec4c02761ae8c7e8bb7238a185', name: "leading-input" }), this.internalReadonly && (h("input", { key: '282485f65b1a7bc5b85623d5f892cb1d83a9e99c', id: this.inputId + '-readonly', type: "text", value: this.computedDisplayValue, readonly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
+        return (h(Host, { key: 'a1a4eb304e38fb1b058b66af5d3c86edcb05610f' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '8aa279dba4e264b17ebd3b33dcff4480ce6c5d57', htmlFor: this.inputId }, h("slot", { key: 'a7cd14d0efc0f22739ee5496d64aad0930000a6e', name: "label" }, this.label))), h("div", { key: '3929ad8d896250574d437d94ab35c72e55884e04', class: "select-wrapper" }, h("slot", { key: 'c92b18f7639b33ebfcf2f3a4b1c24ab4b5a54fa5', name: "before-input" }), h("div", { key: '8554dc402e570dd48ca5031f5e6e4d48f84e9a7d', class: "select-container", onClick: this.handleSelectContainerClick }, h("slot", { key: 'b76cd121460e53f5f0a1e4e7ca0e96f5e733f6f3', name: "leading-input" }), this.internalReadonly && (h("input", { key: 'f0600651b33c5768bab22f27109de445bdb70fff', id: this.inputId + '-readonly', type: "text", value: this.computedDisplayValue, readonly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
                 ? `${this.inputId}-error`
-                : `${this.inputId}-description` })), h("select", { key: '1170c1fc05941662434a7720cf00de136969621b', id: this.inputId, ref: el => (this.selectElement = el), name: this.name, autofocus: this.autofocus, disabled: this.disabled, required: this.required, multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
+                : `${this.inputId}-description` })), h("select", { key: 'e1f9211919f9eef80c50c21536ee98e6dba71cb6', id: this.inputId, ref: el => (this.selectElement = el), name: this.name, autofocus: this.autofocus, disabled: this.disabled, required: this.required, multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
                 ? `${this.inputId}-error`
-                : `${this.inputId}-description` }, this.options && this.options.length > 0 ? (this.options.map(option => (h("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (h("slot", null))), h("div", { key: '349a41292a5e2c20783884b04295f3fdfd40df42', class: "select-icons" }, this.error && (h("nv-icon", { key: '586c197ccb0797b6e051c52e4734d06ae9fdff15', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '506fbbb4c0248ce93b9c240b0db6f7714f285e09', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (h("nv-iconbutton", { key: '848c3638af8d84eeb2a6b884c8e3c5aa549a053f', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), h("slot", { key: '77e8ed090caf243296918a2916d5964090783a10', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '3b6f24dc66bbca05210bc77f64ef47524d6d4460', class: "description", id: `${this.inputId}-description` }, h("slot", { key: '1e23487e1008b2c2c9c9208e315509be2a46eba3', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '8073f26e95848f831b210e3a8d730458d2b62e89', class: "error-description", id: `${this.inputId}-error` }, h("slot", { key: '8980e5890052257fef11e0fe0b932ef933d34316', name: "error-description" }, this.errorDescription)))));
+                : `${this.inputId}-description` }, this.options && this.options.length > 0 ? (this.options.map(option => (h("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (h("slot", null))), h("div", { key: '4e17199de9ac55f30ab27f37ad0f69526a96a53b', class: "select-icons" }, this.error && (h("nv-icon", { key: '6e02a15e6a72cd54910b44dcc3445bc0a875d301', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '2c936e0fe3070fdb1540e50196850531c1a186f3', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (h("nv-iconbutton", { key: '55ff8a3ad2908c9380041b684274ebb275197605', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), h("slot", { key: 'd32c4fa7b22a705dcb89224de06c1f5f0a965f34', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '1a8ba7867fa31618ae6d9149ce03ee63b0c958a1', class: "description", id: `${this.inputId}-description` }, h("slot", { key: '527ee48037f1d76e6478b90de86b5e4f0b819677', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '5279561b8a6a20101447a05b4f99d4aea4e6994b', class: "error-description", id: `${this.inputId}-error` }, h("slot", { key: '101f92f3d2bba8c4c9502542fada0a1363ab5ad1', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldselect"; }
     static get formAssociated() { return true; }

package/dist/collection/components/nv-fieldslider/nv-fieldslider.js CHANGED Viewed

@@ -464,11 +464,11 @@ export class NvFieldslider {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '5256401116f099a480f35552c3a38072c60d74ed' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'ae1c59b2561f0b007d3f6da3ef379a32fe2ff449', htmlFor: this.startInputId }, h("slot", { key: '6d0b7e287276082ea680fc7fdfaabe428648df03', name: "label" }, this.label))), h("div", { key: '3c09727930e4d7bbde1f1ad578fb87e18f04c8dc', class: "slider-container" }, this.range ? (h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 0, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : null, h("div", { key: 'db7e57716f9fc13e9ecd2e81c4126ccd8ceade9f', class: "track-container" }, h("div", { key: '8b5cc8d661b8179fa71c6729291e72bc743dcb13', class: "track", onPointerDown: this.onTrackInteraction }, this.range ? (h(RangeThumb, { rangeValue: this.rangeValueInternal, rawRangePosition: this.rawRangePosition, activeDragThumb: this.activeDragThumb, isDragging: this.isDragging, snap: this.snap, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue })) : (h(SingleThumb, { value: this.valueInternal, min: this.min, max: this.max, step: this.step, rawPosition: this.rawPosition, isDragging: this.isDragging, snap: this.snap, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue }))), h(TickMarks, { key: '4f7ee0f6eccff4a2539b9f33c9f1dd68e0e8afa1', ticks: this.internalTicks, min: this.min, max: this.max })), this.range ? (h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 1, inputId: this.endInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : (h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name }))), (this.success ||
+        return (h(Host, { key: 'e4d4719682957f858468c3df97c82d5be29e87b8' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'a6d84550e4b91a4f23252e31ebbd3680b5a81aad', htmlFor: this.startInputId }, h("slot", { key: '44ce936f4b50ae5be5c3b8769b990fda82ff9b27', name: "label" }, this.label))), h("div", { key: '578a9673356506f87d906ff34254f93c0f724ebb', class: "slider-container" }, this.range ? (h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 0, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : null, h("div", { key: '1dd30a5e703309993e8d61dc44bf1ad0adbc11e0', class: "track-container" }, h("div", { key: '870f688ec85678ac490cfc1542cc8d1802a43ec7', class: "track", onPointerDown: this.onTrackInteraction }, this.range ? (h(RangeThumb, { rangeValue: this.rangeValueInternal, rawRangePosition: this.rawRangePosition, activeDragThumb: this.activeDragThumb, isDragging: this.isDragging, snap: this.snap, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue })) : (h(SingleThumb, { value: this.valueInternal, min: this.min, max: this.max, step: this.step, rawPosition: this.rawPosition, isDragging: this.isDragging, snap: this.snap, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue }))), h(TickMarks, { key: '75fb4d22e84ea569928e475e35d0031130f6c6ed', ticks: this.internalTicks, min: this.min, max: this.max })), this.range ? (h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 1, inputId: this.endInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : (h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name }))), (this.success ||
             this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '40b921d84578b1d7ae18fa5f1ebcc34cc1678df2', class: "description" }, this.success && (h("nv-icon", { key: 'c0c7e52eb9118154f18280fdcb09ca4a5db63c74', name: "circle-check", class: "validation", size: "md" })), h("slot", { key: '2d764e1dabf08abb3271de1f8c2cf6f8418d9d5d', name: "description" }, this.description))), (this.error ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'b88410b4d04254b66c146b39dc4215f92c42b9b8', class: "description" }, this.success && (h("nv-icon", { key: '4b3886cd627e8243d899399c60b85c47ce823170', name: "circle-check", class: "validation", size: "md" })), h("slot", { key: 'b262880c747c3f6d1e51b1d4214761d7aecc9f9c', name: "description" }, this.description))), (this.error ||
             this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '96f9424431a2adcca98f4619350e6d34c2037bc2', class: "error-description", hidden: !this.error }, this.error && (h("nv-icon", { key: 'b77e2b14a5f4e9cdf49c173f5fbf24d6a3f081ff', name: "alert-circle", class: "validation", size: "md" })), h("slot", { key: 'f04a20c146d54c405669109436b28bf9ad99ebd8', name: "error-description" }, this.errorDescription)))));
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'ad5d61a003680c4ff53217bf594dcb4e5fa1b053', class: "error-description", hidden: !this.error }, this.error && (h("nv-icon", { key: '3898c1781b38497b3bd797587980ed9fd32c8afc', name: "alert-circle", class: "validation", size: "md" })), h("slot", { key: '7fa0cf391cdb113eba7dbcd76a66044fc4d60281', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldslider"; }
     static get formAssociated() { return true; }

package/dist/collection/components/nv-fieldslider/partials/field-input.js CHANGED Viewed

@@ -28,7 +28,9 @@ export const FieldInput = props => {
     const handleValueChanged = (event) => {
         event.stopPropagation();
         const newValue = event.detail;
-        if (isNaN(newValue)) {
+        // Accept null as a valid value (when field is cleared)
+        // Only reject NaN numbers
+        if (typeof newValue === 'number' && Number.isNaN(newValue)) {
             return;
         }
         onInput({

package/dist/collection/components/nv-fieldslider/partials/field-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"field-input.js","sourceRoot":"","sources":["../../../../src/components/nv-fieldslider/partials/field-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,IAAI,MAAM,MAAM,CAAC;AA6CxB;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAyC,KAAK,CAAC,EAAE;IACtE,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,UAAU,EACV,KAAK,EACL,OAAO,EACP,GAAG,EACH,GAAG,EACH,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,gBAAgB,EAChB,eAAe,EACf,IAAI,EACJ,OAAO,GACR,GAAG,KAAK,CAAC;IAEV,0DAA0D;IAC1D,MAAM,UAAU,GAAG,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAErD,uDAAuD;IACvD,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAElE,yDAAyD;IACzD,IAAI,SAAiB,CAAC;IACtB,IAAI,KAAK,EAAE,CAAC;QACV,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;YAChB,SAAS,GAAG,IAAI,IAAI,EAAE,CAAC;QACzB,CAAC;aAAM,CAAC;YACN,+DAA+D;YAC/D,SAAS,GAAG,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QACrD,CAAC;IACH,CAAC;SAAM,CAAC;QACN,SAAS,GAAG,IAAI,IAAI,EAAE,CAAC;IACzB,CAAC;IAED,MAAM,kBAAkB,GAAG,CACzB,KAAoE,EAC9D,EAAE;QACR,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC;QAE9B,IAAI,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;~~YACpB~~,OAAO;QACT,CAAC;QAED,OAAO,CAAC;YACN,KAAK,EAAE,QAAQ;YACf,KAAK;SACN,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,WAAK,KAAK,EAAE,IAAI,CAAC,CAAC,QAAQ,IAAI,cAAc,CAAC;QAC3C,oCACE,EAAE,EAAE,OAAO,EACX,KAAK,EAAE,UAAU,EACjB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,SAAS,IACX,SAAS,IACb,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EACjC,cAAc,EAAE,kBAAkB;YAEjC,gBAAgB,IAAI,CACnB,YAAM,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,eAAe,IAC5C,gBAAgB,CACZ,CACR;YACA,eAAe,IAAI,CAClB,YAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,gBAAgB,IAC5C,eAAe,CACX,CACR,CACc,CACb,CACP,CAAC,CAAC,CAAC,CACF,aACE,EAAE,EAAE,OAAO,EACX,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,SAAS,GACf,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport clsx from 'clsx';\n\n/*\n Props for the FieldInput component\n /\nexport interface FieldInputProps {\n /* Whether this is a range slider /\n range: boolean;\n /* Whether to show the input field /\n hasField: boolean;\n /* The value for single mode /\n value: number;\n /* The values for range mode [min, max] /\n rangeValue: number[];\n /* Index (0 or 1) for range mode, ignored in single mode /\n index?: number;\n /* ID for the input field /\n inputId: string;\n /* Minimum allowed value /\n min: number;\n /* Maximum allowed value /\n max: number;\n /* Step size /\n step: number;\n /* Whether the slider is disabled /\n disabled: boolean;\n /* Whether the slider is readonly /\n readonly: boolean;\n /* Handler for input changes /\n onInput: (details: {\n /* Parsed value /\n value: number;\n /* Index (0 or 1) for range mode, ignored in single mode /\n index?: number;\n }) => void;\n /* Label to display before the value /\n labelBeforeValue?: string;\n /* Label to display after the value /\n labelAfterValue?: string;\n /* Name attribute for the input field (for form submission) /\n name?: string;\n /* Name attribute for the end input field (when in range mode) /\n endName?: string;\n}\n\n/\n Renders field input for direct value entry\n * @param {FieldInputProps} props - Component properties\n * @returns {JSX.Element} JSX element representing the field input\n */\nexport const FieldInput: FunctionalComponent<FieldInputProps> = props => {\n const {\n range,\n hasField,\n value,\n rangeValue,\n index,\n inputId,\n min,\n max,\n step,\n disabled,\n readonly,\n onInput,\n labelBeforeValue,\n labelAfterValue,\n name,\n endName,\n } = props;\n\n // Determine the appropriate value based on mode and index\n const fieldValue = range ? rangeValue[index] : value;\n\n // In range mode, we need data-index for event handling\n const dataAttrs = range ? { 'data-index': index.toString() } : {};\n\n // Determine the appropriate name based on mode and index\n let inputName: string;\n if (range) {\n if (index === 0) {\n inputName = name \|\| '';\n } else {\n // Use endName if provided, otherwise append \"-end\" to the name\n inputName = endName \|\| (name ? `${name}-end` : '');\n }\n } else {\n inputName = name \|\| '';\n }\n\n const handleValueChanged = (\n event: CustomEvent<HTMLNvFieldnumberElementEventMap['valueChanged']>,\n ): void => {\n event.stopPropagation();\n const newValue = event.detail;\n\n if (isNaN(newValue)) {\n return;\n }\n\n onInput({\n value: newValue,\n index,\n });\n };\n\n return hasField ? (\n <div class={clsx(!hasField && 'hidden-input')}>\n <nv-fieldnumber\n id={inputId}\n value={fieldValue}\n min={min}\n max={max}\n step={step}\n disabled={disabled}\n readonly={readonly}\n name={inputName}\n {...dataAttrs}\n onInput={e => e.stopPropagation()}\n onValueChanged={handleValueChanged}\n >\n {labelBeforeValue && (\n <span class=\"label-before\" slot=\"leading-input\">\n {labelBeforeValue}\n </span>\n )}\n {labelAfterValue && (\n <span class=\"label-after\" slot=\"trailing-input\">\n {labelAfterValue}\n </span>\n )}\n </nv-fieldnumber>\n </div>\n ) : (\n <input\n id={inputId}\n type=\"hidden\"\n value={fieldValue}\n disabled={disabled}\n readonly={readonly}\n name={inputName}\n />\n );\n};\n"]}
1	+ {"version":3,"file":"field-input.js","sourceRoot":"","sources":["../../../../src/components/nv-fieldslider/partials/field-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,IAAI,MAAM,MAAM,CAAC;AA6CxB;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAyC,KAAK,CAAC,EAAE;IACtE,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,UAAU,EACV,KAAK,EACL,OAAO,EACP,GAAG,EACH,GAAG,EACH,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,gBAAgB,EAChB,eAAe,EACf,IAAI,EACJ,OAAO,GACR,GAAG,KAAK,CAAC;IAEV,0DAA0D;IAC1D,MAAM,UAAU,GAAG,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAErD,uDAAuD;IACvD,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAElE,yDAAyD;IACzD,IAAI,SAAiB,CAAC;IACtB,IAAI,KAAK,EAAE,CAAC;QACV,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;YAChB,SAAS,GAAG,IAAI,IAAI,EAAE,CAAC;QACzB,CAAC;aAAM,CAAC;YACN,+DAA+D;YAC/D,SAAS,GAAG,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QACrD,CAAC;IACH,CAAC;SAAM,CAAC;QACN,SAAS,GAAG,IAAI,IAAI,EAAE,CAAC;IACzB,CAAC;IAED,MAAM,kBAAkB,GAAG,CACzB,KAAoE,EAC9D,EAAE;QACR,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC;QAE9B,uDAAuD;QACvD,0BAA0B;QAC1B,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC3D,OAAO;QACT,CAAC;QAED,OAAO,CAAC;YACN,KAAK,EAAE,QAAQ;YACf,KAAK;SACN,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,WAAK,KAAK,EAAE,IAAI,CAAC,CAAC,QAAQ,IAAI,cAAc,CAAC;QAC3C,oCACE,EAAE,EAAE,OAAO,EACX,KAAK,EAAE,UAAU,EACjB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,SAAS,IACX,SAAS,IACb,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EACjC,cAAc,EAAE,kBAAkB;YAEjC,gBAAgB,IAAI,CACnB,YAAM,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,eAAe,IAC5C,gBAAgB,CACZ,CACR;YACA,eAAe,IAAI,CAClB,YAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,gBAAgB,IAC5C,eAAe,CACX,CACR,CACc,CACb,CACP,CAAC,CAAC,CAAC,CACF,aACE,EAAE,EAAE,OAAO,EACX,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,SAAS,GACf,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport clsx from 'clsx';\n\n/*\n Props for the FieldInput component\n /\nexport interface FieldInputProps {\n /* Whether this is a range slider /\n range: boolean;\n /* Whether to show the input field /\n hasField: boolean;\n /* The value for single mode /\n value: number;\n /* The values for range mode [min, max] /\n rangeValue: number[];\n /* Index (0 or 1) for range mode, ignored in single mode /\n index?: number;\n /* ID for the input field /\n inputId: string;\n /* Minimum allowed value /\n min: number;\n /* Maximum allowed value /\n max: number;\n /* Step size /\n step: number;\n /* Whether the slider is disabled /\n disabled: boolean;\n /* Whether the slider is readonly /\n readonly: boolean;\n /* Handler for input changes /\n onInput: (details: {\n /* Parsed value /\n value: number \| null;\n /* Index (0 or 1) for range mode, ignored in single mode /\n index?: number;\n }) => void;\n /* Label to display before the value /\n labelBeforeValue?: string;\n /* Label to display after the value /\n labelAfterValue?: string;\n /* Name attribute for the input field (for form submission) /\n name?: string;\n /* Name attribute for the end input field (when in range mode) /\n endName?: string;\n}\n\n/\n Renders field input for direct value entry\n * @param {FieldInputProps} props - Component properties\n * @returns {JSX.Element} JSX element representing the field input\n */\nexport const FieldInput: FunctionalComponent<FieldInputProps> = props => {\n const {\n range,\n hasField,\n value,\n rangeValue,\n index,\n inputId,\n min,\n max,\n step,\n disabled,\n readonly,\n onInput,\n labelBeforeValue,\n labelAfterValue,\n name,\n endName,\n } = props;\n\n // Determine the appropriate value based on mode and index\n const fieldValue = range ? rangeValue[index] : value;\n\n // In range mode, we need data-index for event handling\n const dataAttrs = range ? { 'data-index': index.toString() } : {};\n\n // Determine the appropriate name based on mode and index\n let inputName: string;\n if (range) {\n if (index === 0) {\n inputName = name \|\| '';\n } else {\n // Use endName if provided, otherwise append \"-end\" to the name\n inputName = endName \|\| (name ? `${name}-end` : '');\n }\n } else {\n inputName = name \|\| '';\n }\n\n const handleValueChanged = (\n event: CustomEvent<HTMLNvFieldnumberElementEventMap['valueChanged']>,\n ): void => {\n event.stopPropagation();\n const newValue = event.detail;\n\n // Accept null as a valid value (when field is cleared)\n // Only reject NaN numbers\n if (typeof newValue === 'number' && Number.isNaN(newValue)) {\n return;\n }\n\n onInput({\n value: newValue,\n index,\n });\n };\n\n return hasField ? (\n <div class={clsx(!hasField && 'hidden-input')}>\n <nv-fieldnumber\n id={inputId}\n value={fieldValue}\n min={min}\n max={max}\n step={step}\n disabled={disabled}\n readonly={readonly}\n name={inputName}\n {...dataAttrs}\n onInput={e => e.stopPropagation()}\n onValueChanged={handleValueChanged}\n >\n {labelBeforeValue && (\n <span class=\"label-before\" slot=\"leading-input\">\n {labelBeforeValue}\n </span>\n )}\n {labelAfterValue && (\n <span class=\"label-after\" slot=\"trailing-input\">\n {labelAfterValue}\n </span>\n )}\n </nv-fieldnumber>\n </div>\n ) : (\n <input\n id={inputId}\n type=\"hidden\"\n value={fieldValue}\n disabled={disabled}\n readonly={readonly}\n name={inputName}\n />\n );\n};\n"]}

package/dist/collection/components/nv-fieldtext/nv-fieldtext.js CHANGED Viewed

@@ -111,9 +111,9 @@ export class NvFieldtext {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'c807258b41bcaada1a02abf56171f84a4dadc981' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '9ba74a42aaddc54af913d8e9a76ad596f0b0ca02', htmlFor: this.inputId }, h("slot", { key: '7b0c763c5034807aceaf883dc8a7097cc5d21586', name: "label" }, this.label))), h("div", { key: '89396cfa77b11ea2499292448f43303ec1419432', class: "input-wrapper" }, h("slot", { key: '0574e6280a9f8575a555ed71cb380f8d622019a3', name: "before-input" }), h("div", { key: 'a7822f74ded6e21992ebf15afbbcaea449195c6a', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: 'af6789b67cea21c9445bd1000fa582c092daccf6', name: "leading-input" }), h("input", { key: '00118f95a1555d601cf5de2b4703e064dc31250a', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), h("slot", { key: '67e4fecbfd6c938e77b98416d0d6229993ec4592', name: "trailing-input" }), this.error && (h("nv-icon", { key: '5f11f64460e003859fefffa904c70719ebf87a26', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '161fec1690c7672be64684c0121a802406b1d30b', name: "circle-check", class: "validation", size: "md" }))), h("slot", { key: '05d808bc7c372d5c911d03c074c89a829e42083b', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '07818a5aec0540a8758ccdfc32dbc15129adf5e9', class: "description" }, h("slot", { key: 'cc7b3a9086b4afae71c25964a92ea2ed5f07813a', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'a313507b2c8f88c5d7304513b84f9bb360886961', hidden: !this.error, class: "error-description" }, h("slot", { key: '796a5b0c0df37196a4c71bef6a35814fff1eae47', name: "error-description" }, this.errorDescription)))));
+        return (h(Host, { key: '59c03a594971eab5cb8ae4bf7b5342899bba4336' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'a36f03b76cee03be0fe2608fd40a88455818a83b', htmlFor: this.inputId }, h("slot", { key: '284a3f6f9efaed1ee7a40675fd377bdbe3d08d9e', name: "label" }, this.label))), h("div", { key: '963b853f5de42058d1cdced00c7bdc38f4583000', class: "input-wrapper" }, h("slot", { key: 'dce7ea85a9ae76c923ea3dc732d93614b94ba391', name: "before-input" }), h("div", { key: 'eac7b8e1d85f9623287f839cdc7ef3133c9c75d8', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: 'db3ab29c4a0767ffc8f8c1368085052769bdc4cc', name: "leading-input" }), h("input", { key: 'd4759f1dd7bab6da0a4486cf326cb55c61fcb750', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), h("slot", { key: 'e8950b2b41ce5e350e39084c3d6936a1a11960e4', name: "trailing-input" }), this.error && (h("nv-icon", { key: '83eb974690dfd69858877ba434e4dd30802208c8', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '2b8e37bd41e2b98ae17a249379528dd6e1773e6e', name: "circle-check", class: "validation", size: "md" }))), h("slot", { key: '72e5ae030d15c61409095f4067436ee890d21a1e', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '54a353743334cf7d96597a543d0e2a7c52833a31', class: "description" }, h("slot", { key: '70dd9595b638f0dc56db6ecb24a93fcca629a2d3', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '47a26240ae8875cedb50b95d0ad41dab762af6d3', hidden: !this.error, class: "error-description" }, h("slot", { key: '0c84a7c46128a5c0960b5e2ecfda94f76ef9d7d7', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldtext"; }
     static get formAssociated() { return true; }

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

@@ -177,9 +177,9 @@ export class NvFieldtextarea {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '8f7f14974b855a44e88a951ff0795e11e3ab7d61' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '9b438132196d7bc75cc4efdae736451bd7a23cdc', htmlFor: this.inputId }, h("slot", { key: 'f64e341eccefed72152326fadd9287f056842634', name: "label" }, this.label))), h("div", { key: '454213728d3b455d602a21653c1fc784bc411477', class: "textarea-wrapper" }, h("div", { key: '9ab87f44cf9622ca7c389d797a7e777eda7621d9', class: "textarea-container", onClick: this.handleTextareaContainerClick }, h("textarea", { key: 'd8c66568fa9c581063e2b9f531f3442020d07b70', 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: '92700f5775053107569d2a2a0857c939a882debb', class: "description" }, h("slot", { key: 'd38ebd52d5d08ffe286acbee11e8733023c45824', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '872008326796f477c7c48ee2e8eec60ca51135ba', hidden: !this.error, class: "error-description" }, h("slot", { key: 'eae9c837562d2b39bbe5813390c9bf63d86dcf36', name: "error-description" }, this.errorDescription)))));
+        return (h(Host, { key: '3011ab5796ff80bef57fa31f8c0c3862ea8b2ec9' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '5ce143e110d23ae0812d8e3282c7cfd7013dbf8c', htmlFor: this.inputId }, h("slot", { key: 'd2aec99e424f7acef8b6831ce88a094e7b97d5a2', name: "label" }, this.label))), h("div", { key: 'd7ca0f0a7002649b62c90a0f414ce951a45fb36f', class: "textarea-wrapper" }, h("div", { key: '7052a545876c11736cc851099aeca3d827e23e94', class: "textarea-container", onClick: this.handleTextareaContainerClick }, h("textarea", { key: 'efd08cdc7604f7394beb6040c4a4e85fffdd01a5', 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: '03c0ac2d2a63ac5836ec45b64fa368d7e6462e41', class: "description" }, h("slot", { key: 'afe544101550988895f12598adbc13e25d5f221f', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '45f08a76bf8abfc53a231d4e8977bbe6ed80b64d', hidden: !this.error, class: "error-description" }, h("slot", { key: '4f37c2099badf5ccf9b58bb5ce71292c3b2baae5', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldtextarea"; }
     static get formAssociated() { return true; }

package/dist/collection/components/nv-fieldtime/nv-fieldtime.js CHANGED Viewed

@@ -153,6 +153,7 @@ export class NvFieldtime {
             if (firstVisibleType && this.inputElements[firstVisibleType]) {
                 this.inputElements[firstVisibleType].blur();
             }
+            this.open = false;
         }
     }
     //#endregion LISTENERS
@@ -827,9 +828,9 @@ export class NvFieldtime {
             }, key: `${option}-${index}`, onClick: e => this.handleTimeOptionClick(e, type) }, option)))));
     }
     render() {
-        return (h(Host, { key: '315b0a732c1ef8bee7aaa0141ce533ec265e35ab', onclick: (e) => this.handleHostClick(e), "aria-expanded": this.open ? 'true' : 'false' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '100b75accd50c277e3ddd13c007e55dad8c6f8b7', htmlFor: this.inputId }, h("slot", { key: 'cec67688f98fc7976299a2f55ba8ba859e4ecacc', name: "label" }, this.label))), h("nv-popover", { key: 'feaaefb107251368db809babb02b8f8c7cb7baf0', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: 'c539917597eebdd92bb2e832d1fd9d6afceb5c04', class: "input-wrapper", slot: "trigger" }, h("slot", { key: '5a869349e9fd7a422d596f5bd05402d5559a6f2b', name: "before-input" }), h("div", { key: '27dac6987b28d08bb54b9ffc70ddade28f527a9c', class: "input-container" }, h("slot", { key: '9df638bb3d58df138a360966925b04092f1d4b9a', name: "leading-input" }), this.renderTimeInputFields(), h("nv-iconbutton", { key: '8d6796d9fc57ef2a934bfe79621ff76def8e9507', name: 'clock', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', onClick: () => this.HandleDropdownIconClick() }), this.error && (h("nv-icon", { key: '15b593ce4e850d18a5f5f93120ae84e84054cffe', name: "alert-circle", class: "validation", size: "sm" })), this.success && (h("nv-icon", { key: '85e4a38c3ef64552fc7a47448471d4276ee5cc46', name: "circle-check", class: "validation", size: "sm" }))), h("slot", { key: '45cc1c26bc40425df62382a371ab658dd18aefa8', name: "after-input" })), h("div", { key: '23432dd354491420e42400d9eeb22bc23e36623e', class: "time-dropdown", slot: "content" }, h("div", { key: 'efb53556077c85ee94a8fe345a03d67a3e36cdc1', class: "time-columns" }, this.renderTimeDropdownColumns()))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '735447b328a8264739d3185ce6c65d48a01ec801', class: "description" }, h("slot", { key: '86387e48804b2ac1842c64b4cf4f5ca9f34a6719', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'b6cc406c6a872b5ebb83a35a84852e143781e12f', hidden: !this.error, class: "error-description" }, h("slot", { key: 'c9dc284e202b081a61346796d21e73c8647c7daa', name: "error-description" }, this.errorDescription)))));
+        return (h(Host, { key: 'f66fe2a29f23a0bc967821a0c9bca4347b622286', onclick: (e) => this.handleHostClick(e), "aria-expanded": this.open ? 'true' : 'false' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'f01ce1b034b1b547cbdde5814db9357ee1913e04', htmlFor: this.inputId }, h("slot", { key: 'd81dcb20883b93280db6e76e0299f679f1f9ed84', name: "label" }, this.label))), h("nv-popover", { key: '8c9e83002edcfba89ca4ca282fc82db714ed2f43', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: '3a5b26e4be67f277ead2a9fe2f04e5d12a4bd596', class: "input-wrapper", slot: "trigger" }, h("slot", { key: '2ea5f8269c6f0892c53a002a298ca3ceed8f8a00', name: "before-input" }), h("div", { key: 'ab97bbbf183118d7b510f82c800b4a3fa1fefda3', class: "input-container" }, h("slot", { key: 'a80d2f68b24d4226c18bf0df18ebf13ac6e0873e', name: "leading-input" }), this.renderTimeInputFields(), h("nv-iconbutton", { key: '1f7aacf1ab073c0c6ef10b50e948a7ecbca4dd75', name: 'clock', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', onClick: () => this.HandleDropdownIconClick() }), this.error && (h("nv-icon", { key: '8f414a3b3daae6f0625b3c62b920621bf8698db3', name: "alert-circle", class: "validation", size: "sm" })), this.success && (h("nv-icon", { key: '13b5671664466b6bb50f2561b5cffb96517a1068', name: "circle-check", class: "validation", size: "sm" }))), h("slot", { key: 'b5d6085a9864ef84d4113062a0b1cb8a807ab241', name: "after-input" })), h("div", { key: '2950c5fac3a0f219e5db2e3a7e9f605d86e50aa2', class: "time-dropdown", slot: "content" }, h("div", { key: 'c5b7ff3818a05e1f6d7ca76657f57b85bb595345', class: "time-columns" }, this.renderTimeDropdownColumns()))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'c8cb90fad74721a9b5eb0ab50980f3fd7c587e62', class: "description" }, h("slot", { key: '641d1a6a9dbf580267664831d5b371a601afb039', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '5721b81d7a16b626bfa7c3af20897f33b7c37080', hidden: !this.error, class: "error-description" }, h("slot", { key: '84cef1043666ab6dd86f70d4ba0054d7f33ca589', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldtime"; }
     static get formAssociated() { return true; }