@nova-design-system/nova-react 3.9.0 → 3.9.1

package/dist/cjs/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BPZo04LR.js');
+var index = require('./index-BtjpbnUr.js');
 require('react');
 
 

package/dist/cjs/{nv-accordion-item.entry-igHq6GcV.js → nv-accordion-item.entry-Dr_2iHhQ.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BPZo04LR.js');
+var index = require('./index-BtjpbnUr.js');
 var collapse_animation16e3af45 = require('./collapse.animation-16e3af45-CChx_tQJ.js');
 require('./stylefire.es-74da334a-y0piPjlz.js');
 require('react');

package/dist/cjs/{nv-accordion.entry-CjUtVUBZ.js → nv-accordion.entry-CYVpcwuY.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BPZo04LR.js');
+var index = require('./index-BtjpbnUr.js');
 require('react');
 
 const nvAccordionCss = "nv-accordion{display:block;border:var(--spacing-px) solid var(--color-content-low-border);border-radius:var(--radius-rounded-lg)}nv-accordion .nv-accordion__footer{padding:var(--spacing-3);background:var(--color-level-05-background);border-radius:0 0 var(--radius-rounded-lg) var(--radius-rounded-lg);margin-top:calc(var(--spacing-px) * -1);border-top:var(--spacing-px) solid var(--color-content-low-border)}nv-accordion .nv-accordion__footer:empty{display:none}";

package/dist/cjs/{nv-alert.entry-NETR8Q1I.js → nv-alert.entry-C_H-R9wb.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BPZo04LR.js');
+var index = require('./index-BtjpbnUr.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 var constants4faa1fae = require('./constants-4faa1fae-BzFAKCkR.js');
 var collapse_animation16e3af45 = require('./collapse.animation-16e3af45-CChx_tQJ.js');

package/dist/cjs/{nv-avatar.entry-B75vfd1u.js → nv-avatar.entry-BeSOqGvb.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BPZo04LR.js');
+var index = require('./index-BtjpbnUr.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 var constants4faa1fae = require('./constants-4faa1fae-BzFAKCkR.js');
 require('react');

package/dist/cjs/{nv-badge_2.entry-CAvYBnR-.js → nv-badge_2.entry-BGWUswPo.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BPZo04LR.js');
+var index = require('./index-BtjpbnUr.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 var collapse_animation16e3af45 = require('./collapse.animation-16e3af45-CChx_tQJ.js');
 var fade_animation71e8e34c = require('./fade.animation-71e8e34c-BAw_TYsB.js');

package/dist/cjs/{nv-breadcrumb.entry-21ZDbr-x.js → nv-breadcrumb.entry-yQozUTFi.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BPZo04LR.js');
+var index = require('./index-BtjpbnUr.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 require('react');
 

package/dist/cjs/{nv-breadcrumbs.entry-CrqqjIzx.js → nv-breadcrumbs.entry-Qar1fOI7.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BPZo04LR.js');
+var index = require('./index-BtjpbnUr.js');
 require('react');
 
 const nvBreadcrumbsCss = "nv-breadcrumbs{display:block}nv-breadcrumbs>ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--breadcrumb-padding-y)}nv-breadcrumbs nv-breadcrumb:last-child [data-scope=separator],nv-breadcrumbs nv-breadcrumb:last-child [slot=separator]{display:none}";

package/dist/cjs/{nv-button.entry-D-2Zt42f.js → nv-button.entry-M_c4r8PX.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BPZo04LR.js');
+var index = require('./index-BtjpbnUr.js');
 var constants4faa1fae = require('./constants-4faa1fae-BzFAKCkR.js');
 require('react');
 

package/dist/cjs/{nv-calendar.entry-BHT-inlG.js → nv-calendar.entry-DFE372aB.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BPZo04LR.js');
+var index = require('./index-BtjpbnUr.js');
 var constants4faa1fae = require('./constants-4faa1fae-BzFAKCkR.js');
 var _commonjsHelpers1789f0cf = require('./_commonjsHelpers-1789f0cf-BJu3ubxk.js');
 require('react');
@@ -498,6 +498,12 @@ const NvCalendar = class {
                 .split(',')
                 .map(v => v.trim())
                 .filter(Boolean);
+            if (this.selectionType === 'range' && values.length < 2) {
+                console.warn(`Invalid date range format: ${value}`);
+                this.startDate = null;
+                this.endDate = null;
+                return;
+            }
             if (this.selectionType === 'single' && values.length >= 1) {
                 const parsedDate = parseDate(values[0], this.dateFormat);
                 if (parsedDate) {
@@ -542,7 +548,7 @@ const NvCalendar = class {
                 }
                 else {
                     // Handle malformed dates gracefully - reset state
-                    console.warn(`Invalid date range format: ${values[0]}, ${values[1]}`);
+                    console.warn(`Invalid date range format: ${values === null || values === void 0 ? void 0 : values[0]}, ${values === null || values === void 0 ? void 0 : values[1]}`);
                     this.startDate = null;
                     this.endDate = null;
                     if (!this.showActions) {
@@ -1305,8 +1311,8 @@ const NvCalendar = class {
      * @slot default - Child content of the component.
      */
     render() {
-        return (index.h(index.Host, { key: '7abeb96312f2bcf26eed3a133ef59d5d3b5b528f' }, index.h("div", { key: 'e0b2db720853551e3b6445e92b39b418123cb83e', class: "datepicker-root" }, index.h("div", { key: '1a83c285278c440c4e33ae770a033974e4924830', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, index.h("div", { key: '3481fe780a3e1d8f0c1e22ffc82c3b7830721055', class: `datepicker-wrapper ${this.numberOfCalendars === 1 ? 'single' : ''}` }, this.shortcutsPlacement === 'left' && this.renderShortcuts(), Array.from({ length: this.numberOfCalendars }, (_, index) => this.renderCalendar(index, index)), this.shortcutsPlacement === 'right' && this.renderShortcuts()), ((this.hasShortcuts && this.shortcutsPlacement === 'bottom') ||
-            this.hasActions) && (index.h("div", { key: '3a644bdc993142c181c45173756e362025d4a23a', class: "datepicker-controls" }, this.shortcutsPlacement === 'bottom' && this.renderShortcuts(), this.hasActions && this.renderActions())))), index.h("slot", { key: '4a4290ccf63429a9a88cfd95a33b4fdc34c8ef74' })));
+        return (index.h(index.Host, { key: '492526a4a9ed114aba804db45f49847b1db58c9f' }, index.h("div", { key: '632759b4eb6c65c3b082b707fba75568ed351e49', class: "datepicker-root" }, index.h("div", { key: '8dc6160dec8ed46e2d2f70e3154cd73cbaeee586', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, index.h("div", { key: '55b1c7f8bcda0785ca63a1572bfebc628a3971d5', class: `datepicker-wrapper ${this.numberOfCalendars === 1 ? 'single' : ''}` }, this.shortcutsPlacement === 'left' && this.renderShortcuts(), Array.from({ length: this.numberOfCalendars }, (_, index) => this.renderCalendar(index, index)), this.shortcutsPlacement === 'right' && this.renderShortcuts()), ((this.hasShortcuts && this.shortcutsPlacement === 'bottom') ||
+            this.hasActions) && (index.h("div", { key: '7234a6d497fccdcab8923b5235f591f24061c92d', class: "datepicker-controls" }, this.shortcutsPlacement === 'bottom' && this.renderShortcuts(), this.hasActions && this.renderActions())))), index.h("slot", { key: '1a23c6e92ffbc8ca64b42ff41ed6d106a3697e7f' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-col.entry-AHfSMqc1.js → nv-col.entry-Bi8pH33J.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BPZo04LR.js');
+var index = require('./index-BtjpbnUr.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 require('react');
 

package/dist/cjs/{nv-datagrid.entry-BRT5wQGR.js → nv-datagrid.entry-B-blFDg-.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BPZo04LR.js');
+var index = require('./index-BtjpbnUr.js');
 var dom_utilsAc71e0ef = require('./dom.utils-ac71e0ef-CmIwRr6O.js');
 var constants4faa1fae = require('./constants-4faa1fae-BzFAKCkR.js');
 require('react');

package/dist/cjs/{nv-datagridcolumn.entry-BMDydM-l.js → nv-datagridcolumn.entry-CAzB7NtB.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BPZo04LR.js');
+var index = require('./index-BtjpbnUr.js');
 require('react');
 
 const NvDatagridcolumn = class {

package/dist/cjs/{nv-dialog.entry-NPDVQdjH.js → nv-dialog.entry-Bdw3O22w.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BPZo04LR.js');
+var index = require('./index-BtjpbnUr.js');
 var events_utilsFe1d907f = require('./events.utils-fe1d907f-01N__3wY.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 var constants4faa1fae = require('./constants-4faa1fae-BzFAKCkR.js');

package/dist/cjs/{nv-dialogfooter_2.entry-CyHKMRiZ.js → nv-dialogfooter_2.entry-BTUrxVzn.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BPZo04LR.js');
+var index = require('./index-BtjpbnUr.js');
 var constants4faa1fae = require('./constants-4faa1fae-BzFAKCkR.js');
 require('react');
 

package/dist/cjs/{nv-fieldcheckbox.entry-DyoNGs60.js → nv-fieldcheckbox.entry-DNzC8s-J.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BPZo04LR.js');
+var index = require('./index-BtjpbnUr.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');

package/dist/cjs/{nv-fielddate.entry-CgnVYTZx.js → nv-fielddate.entry-BI8REINj.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BPZo04LR.js');
+var index = require('./index-BtjpbnUr.js');
 var inputmaskEdcad3c1 = require('./inputmask-edcad3c1-B9Omti4z.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');
@@ -49,8 +49,6 @@ const NvFielddate = class {
          * The initial value of the input (date in string format).
          * @bind value
          */
-        // eslint-disable-next-line @stencil-community/own-props-must-be-private
-        // eslint-disable-next-line @stencil-community/strict-mutable
         this.value = '';
         /**
          * The current value of the input date in string format.
@@ -122,18 +120,10 @@ const NvFielddate = class {
                 return;
             }
             this.inputElement.focus();
-            // Select the first characters based on the date format
-            const format = this.dateFormat;
-            if (format.startsWith('DD') || format.startsWith('MM')) {
-                this.inputElement.setSelectionRange(0, 2);
-            }
-            else if (format.startsWith('YYYY')) {
-                this.inputElement.setSelectionRange(0, 4);
-            }
         };
         /**
          * Handles the input event on the input element.
-         * Updates the singleValue and emits the valueChanged event.
+         * Updates the singleValue and emits the valueChanged event if empty.
          * @param {Event} event - The input event.
          */
         this.handleInput = (event) => {
@@ -142,74 +132,10 @@ const NvFielddate = class {
                 return;
             }
             const input = event.target;
-            const previousValue = this.value;
             this.singleValue = input.value;
             this.value = input.value;
-            // Only emit valueChanged if the value actually changed
-            if (previousValue !== input.value) {
-                this.valueChanged.emit(input.value);
-            }
-        };
-        /**
-         * Initializes the input mask.
-         */
-        this.initializeInputMask = () => {
-            this.currentPlaceholder = '';
-            if (this.inputElement.inputmask) {
-                return;
-            }
-            const inputMask = new inputmaskEdcad3c1.Inputmask({
-                alias: 'datetime',
-                inputFormat: this.convertToInputmaskFormat(this.dateFormat),
-                placeholder: ' ',
-                prefillYear: false,
-                clearIncomplete: false,
-                showMaskOnHover: false,
-                showMaskOnFocus: false,
-                clearMaskOnLostFocus: false,
-                insertMode: true,
-                rightAlign: false,
-                oncomplete: function (e) {
-                    const input = e.target;
-                    const event = new CustomEvent('input', { bubbles: true });
-                    input.dispatchEvent(event);
-                },
-            });
-            inputMask.mask(this.inputElement);
-            // Set the value after applying the mask
-            if (this.inputElement.name === this.name && this.singleValue) {
-                requestAnimationFrame(() => {
-                    this.inputElement.value = this.singleValue;
-                    const event = new CustomEvent('input', { bubbles: true });
-                    this.inputElement.dispatchEvent(event);
-                });
-            }
-        };
-        /**
-         * Handles keydown events on the input before the mask is initialized.
-         * Initializes the mask on the first number input.
-         * @param {KeyboardEvent} event - The keyboard event.
-         */
-        this.handleKeydownBeforeMask = (event) => {
-            const allowedKeys = [
-                'Backspace',
-                'Delete',
-                'Tab',
-                'ArrowLeft',
-                'ArrowRight',
-                'ArrowUp',
-                'ArrowDown',
-                'Home',
-                'End',
-            ];
-            if (/\d/.test(event.key)) {
-                this.initializeInputMask();
-                this.inputElement.removeEventListener('keydown', this.handleKeydownBeforeMask);
-            }
-            else if (!allowedKeys.includes(event.key) &&
-                !event.metaKey &&
-                !event.ctrlKey) {
-                event.preventDefault();
+            if (this.value === '') {
+                this.valueChanged.emit('');
             }
         };
         /**
@@ -222,17 +148,8 @@ const NvFielddate = class {
                 event.target.blur();
                 return;
             }
-            if (!this.inputElement.inputmask) {
-                this.inputElement.addEventListener('keydown', this.handleKeydownBeforeMask);
-            }
             this.open = true;
         };
-        /**
-         * Handles blur events on the input element.
-         */
-        this.handleBlur = () => {
-            this.inputElement.removeEventListener('keydown', this.handleKeydownBeforeMask);
-        };
         /**
          * Prevents the valueChanged event from the calendar from propagating up.
          * @param {CustomEvent} event - The valueChanged event from nv-calendar.
@@ -307,6 +224,27 @@ const NvFielddate = class {
         // Close the popover if open
         this.open = false;
     }
+    updateMask() {
+        var _a, _b;
+        if (!this.inputElement)
+            return;
+        (_b = (_a = this.inputElement.inputmask) === null || _a === void 0 ? void 0 : _a.remove) === null || _b === void 0 ? void 0 : _b.call(_a);
+        const inputMask = new inputmaskEdcad3c1.Inputmask({
+            alias: 'datetime',
+            inputFormat: this.convertToInputmaskFormat(this.dateFormat),
+            placeholder: this.convertToInputmaskFormat(this.dateFormat),
+            clearIncomplete: false,
+            showMaskOnHover: false,
+            showMaskOnFocus: true,
+            clearMaskOnLostFocus: !this.open,
+            postValidation: true,
+            oncomplete: (e) => {
+                var _a;
+                this.valueChanged.emit((_a = e.target) === null || _a === void 0 ? void 0 : _a.value);
+            },
+        });
+        inputMask.mask(this.inputElement);
+    }
     //#endregion METHODS
     /****************************************************************************/
     //#region LIFECYCLE
@@ -317,10 +255,26 @@ const NvFielddate = class {
         if (this.value) {
             this.singleValue = this.value;
         }
-        this.currentPlaceholder = this.placeholder || this.dateFormat;
     }
     componentDidLoad() {
-        // Inputmask is now initialized on the first keypress
+        this.updateMask();
+        // Set the initial value after applying the mask
+        if (this.inputElement.name === this.name && this.singleValue) {
+            requestAnimationFrame(() => {
+                this.inputElement.value = this.singleValue;
+                const event = new CustomEvent('input', { bubbles: true });
+                this.inputElement.dispatchEvent(event);
+            });
+        }
+    }
+    componentDidRender() {
+        // Only set value on initial render when there's no existing value in the input
+        if (this.singleValue && this.inputElement && !this.inputElement.value) {
+            requestAnimationFrame(() => {
+                this.inputElement.value = this.singleValue;
+                this.inputElement.setAttribute('value', this.singleValue);
+            });
+        }
     }
     disconnectedCallback() {
         document.removeEventListener('click', this.handleClickOutside);
@@ -339,6 +293,10 @@ const NvFielddate = class {
         const previousValue = this.value;
         this.singleValue = value;
         this.value = value;
+        // Set the input value directly when calendar is used
+        if (this.inputElement) {
+            this.inputElement.value = value;
+        }
         // Only emit valueChanged if the value actually changed
         if (previousValue !== value) {
             this.valueChanged.emit(value);
@@ -367,21 +325,31 @@ const NvFielddate = class {
     }
     handleValueChange(newValue) {
         this.singleValue = newValue;
+        // Only set input value if it's different from current input value
+        // This prevents interfering with user typing
+        if (this.inputElement && this.inputElement.value !== newValue) {
+            this.inputElement.value = newValue;
+        }
+    }
+    handleOpenChange() {
+        this.updateMask();
     }
     //#endregion EVENTS
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '45af13d8290479c8ec171c0702d9d695c5047610' }, ((this.label && this.label.length > 0) ||
-            this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'd30403c879f8ca0449d8d25d22bb401ece876758', htmlFor: this.inputId }, index.h("slot", { key: 'aec155a914cff6b7ea8170dbd1f0d9ee4f35172e', name: "label" }, this.label))), index.h("nv-popover", { key: '522969535f2b8340f1a9b425c4ea6291fc65cb7e', ref: this.setPopoverRef, id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: 'eb1d5ab314fe654b3642afb22d9e3fbc340de969', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: '6c28354e914075c36db9bee659d140669a745cab', name: "before-input" }), index.h("div", { key: '68d3aa4a8afcec4042a8930678cea7046f3e31d7', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: 'ed7ada6913a6735af622369236b5f521f2e96aad', name: "leading-input" }), index.h("input", { key: '49607b25253233665544e8e85db3814734280fe0', id: this.inputId, ref: this.setInputRef, placeholder: this.currentPlaceholder, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.singleValue, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, "data-scope": "date" }), this.error && (index.h("nv-icon", { key: '35d06926d78f7c653fbf0424b59802fb4489004a', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '17ca631dca201fb412c921619223c1abc8777d2b', name: "circle-check", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: 'e08d735115cde3d22a657b986f4a7a5a0347d1af', class: "toggle-calendar-icon", name: "calendar" //{this.open ? 'chevron-top' : 'chevron-down'}
+        return (index.h(index.Host, { key: 'e72afd15f69aa6267cc9444e63fae12e4cfcf05b' }, ((this.label && this.label.length > 0) ||
+            this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'bc13c15f74ac4dbe4b326fe479dcd9a6fb20cf40', htmlFor: this.inputId }, index.h("slot", { key: '30ae9788e7768adc9da95e0b89a3f6f7027e625f', name: "label" }, this.label))), index.h("nv-popover", { key: 'e043d7b021d1d7ee206d231a1cfc7b4541091ae5', ref: this.setPopoverRef, id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '75682a712a8276bc24b285a48ef2312aae9f5097', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: '17593b316a870a5edbbc50eb4bb9441759309612', name: "before-input" }), index.h("div", { key: '0eb576fbe4a800ed7e1583810986e5f7f07e175a', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: 'c058ea07757486cf69621deba85ebbec3b075779', name: "leading-input" }), index.h("input", { key: '4c31a633358ff96f774a7862507c4c40301062cb', id: this.inputId, ref: this.setInputRef, placeholder: this.placeholder ||
+                this.convertToInputmaskFormat(this.dateFormat), name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, onInput: this.handleInput, onFocus: this.handleFocus, "data-scope": "date" }), this.error && (index.h("nv-icon", { key: '036392f177a0c10f609e7b555c3e7f256cd63962', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '5a74ecdd55177d8cda55e8afdb05978e23450346', name: "circle-check", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: 'e07f8b69d1810430cffff071d39ca7c72a15ccaf', class: "toggle-calendar-icon", name: "calendar" //{this.open ? 'chevron-top' : 'chevron-down'}
             ,
-            size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', "aria-pressed": this.open.toString(), onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: '75cf593c7b9f2078f055522d6e43440dbe0cc522', name: "after-input" })), index.h("div", { key: '0df8cd2360a17f5cc786e6b29c67ded308c18104', slot: "content" }, index.h("nv-calendar", { key: '045a02370ef9dfe31ae3d0b2f702fafb25c7da8f', dateFormat: this.dateFormat, singleValue: this.singleValue, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates, onValueChanged: this.handleCalendarValueChanged }))), ((this.description && this.description.length > 0) ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'ecedbfe16857d9976349f3f3875be13f9ffc4b53', class: "description" }, index.h("slot", { key: 'e848d9e03e169c9ac57ce2fb7cdb00466f658c61', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '028b4d496ba3ee5eefa0107da8a62c771709a3ed', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: 'd3b79a0ae56ec7eb444c28985b1ffcfd8a4e36a1' })));
+            size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', "aria-pressed": this.open.toString(), onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: 'a84e382a534735adb22741df1751d9c70c050b69', name: "after-input" })), index.h("div", { key: '29a3ca7ed69a772497590595fc82a78fddf0c32a', slot: "content" }, index.h("nv-calendar", { key: '6797dab38dba23f7396aadcbf5281aefdabd891f', dateFormat: this.dateFormat, singleValue: this.singleValue, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates, onValueChanged: this.handleCalendarValueChanged }))), ((this.description && this.description.length > 0) ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '1799cd4dc4f6ca4b520277c080574af089816a9b', class: "description" }, index.h("slot", { key: 'eb2d9ac73687786e589f5a90791763f4465d1d20', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '7c25fc8369b6bc948d7b233eb5b58451b02cbc62', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: '1499ea51b0e2d283037bf71aae6da242839c0e49' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
-        "value": ["handleValueChange"]
+        "value": ["handleValueChange"],
+        "open": ["handleOpenChange"]
     }; }
 };
 NvFielddate.style = NvFielddateStyle0;

package/dist/cjs/{nv-fielddaterange.entry-DVcNJ2nO.js → nv-fielddaterange.entry-B7mtEV97.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BPZo04LR.js');
+var index = require('./index-BtjpbnUr.js');
 var inputmaskEdcad3c1 = require('./inputmask-edcad3c1-B9Omti4z.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');
@@ -130,12 +130,6 @@ const NvFielddaterange = class {
                 this.startValue = values[0];
                 this.endValue = values[1];
             }
-            else {
-                // Handle malformed value gracefully
-                console.warn(`Invalid date range format: ${value}`);
-                this.startValue = '';
-                this.endValue = '';
-            }
         };
         /**
          * Closes the popover when a click is detected outside the component.
@@ -159,9 +153,6 @@ const NvFielddaterange = class {
             this.startValue = input.value;
             // Update unified value prop
             this.value = `${input.value},${this.endValue}`;
-            this.valueChanged.emit(this.value);
-            // Legacy support (deprecated)
-            this.dateRangeChange.emit({ start: input.value, end: this.endValue });
             // Temporarily enable navigation for keyboard input
             if (this.calendarElement) {
                 this.calendarElement.removeAttribute('data-prevent-navigation');
@@ -187,9 +178,6 @@ const NvFielddaterange = class {
             this.endValue = input.value;
             // Update unified value prop
             this.value = `${this.startValue},${input.value}`;
-            this.valueChanged.emit(this.value);
-            // Legacy support (deprecated)
-            this.dateRangeChange.emit({ start: this.startValue, end: input.value });
             // Temporarily enable navigation for keyboard input
             if (this.calendarElement) {
                 this.calendarElement.removeAttribute('data-prevent-navigation');
@@ -286,6 +274,50 @@ const NvFielddaterange = class {
             this.calendarElement.clear();
         }
     }
+    updateMask() {
+        const inputs = this.el.querySelectorAll('.input-wrapper input');
+        inputs.forEach((input) => {
+            var _a, _b;
+            (_b = (_a = input.inputmask) === null || _a === void 0 ? void 0 : _a.remove) === null || _b === void 0 ? void 0 : _b.call(_a);
+            const inputMask = new inputmaskEdcad3c1.Inputmask({
+                alias: 'datetime',
+                inputFormat: this.convertToInputmaskFormat(this.dateFormat),
+                placeholder: this.convertToInputmaskFormat(this.dateFormat),
+                clearIncomplete: false,
+                showMaskOnHover: false,
+                showMaskOnFocus: true,
+                clearMaskOnLostFocus: !this.open,
+                postValidation: true,
+                oncleared: (e) => {
+                    const input = e.target;
+                    if (input.id === this.startInputId) {
+                        this.startValue = '';
+                    }
+                    if (input.id === this.endInputId) {
+                        this.endValue = '';
+                    }
+                },
+                oncomplete: () => {
+                    if (/[a-zA-Z]/g.test(this.value))
+                        return;
+                    const values = this.value
+                        .split(',')
+                        .map(v => v.trim())
+                        .filter(Boolean);
+                    if (values.length < 2)
+                        return;
+                    // If valid emit change event
+                    this.valueChanged.emit(this.value);
+                    // Legacy support (deprecated)
+                    this.dateRangeChange.emit({
+                        start: this.startValue,
+                        end: input.value,
+                    });
+                },
+            });
+            inputMask.mask(input);
+        });
+    }
     //#endregion METHODS
     /****************************************************************************/
     //#region LIFECYCLE
@@ -299,25 +331,9 @@ const NvFielddaterange = class {
         }
     }
     componentDidLoad() {
+        this.updateMask();
         const inputs = this.el.querySelectorAll('.input-wrapper input');
         inputs.forEach((input) => {
-            const inputMask = new inputmaskEdcad3c1.Inputmask({
-                alias: 'datetime',
-                inputFormat: this.convertToInputmaskFormat(this.dateFormat),
-                placeholder: this.convertToInputmaskFormat(this.dateFormat),
-                clearIncomplete: false,
-                showMaskOnHover: false,
-                showMaskOnFocus: false,
-                clearMaskOnLostFocus: false,
-                insertMode: true,
-                rightAlign: false,
-                oncomplete: function (e) {
-                    const input = e.target;
-                    const event = new CustomEvent('input', { bubbles: true });
-                    input.dispatchEvent(event);
-                },
-            });
-            inputMask.mask(input);
             // Set the value after applying the mask
             if (input.name === this.startName && this.startValue) {
                 requestAnimationFrame(() => {
@@ -449,6 +465,7 @@ const NvFielddaterange = class {
         this.parseUnifiedValue(newValue);
     }
     onOpenChanged(newValue) {
+        this.updateMask();
         if (this.contentRef) {
             if (newValue) {
                 this.contentRef.style.transition = 'none';
@@ -474,10 +491,12 @@ const NvFielddaterange = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'e2d5ce2c864dbc8ba478a1ce1353aa8e51e13ec1' }, ((this.label && this.label.length > 0) ||
-            this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '6e171200b763f8e7a907d305475bb7d4faa27979', htmlFor: this.startInputId }, index.h("slot", { key: '9f8b94e7491d4cd73e17f41ba290acda1fe73f3b', name: "label" }, this.label))), index.h("nv-popover", { key: '9bf5539eeceadb960c3438ddc05fe986f800d33b', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '58f7625d27c2266429ddc4f653d61efefed5bc66', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: '206064a5c1be74082202849b96e46a8207377098', name: "before-input" }), index.h("div", { key: 'bd66fb676a5a749e17ede3f75c8a4404586c0c63', class: "input-container" }, index.h("slot", { key: '7c78a037f5189143ea32ca843e1c27b52d8f2d4b', name: "leading-input" }), index.h("div", { key: 'fbe89bc4502eca56e05029d65a45684484921433', class: "range-inputs" }, index.h("input", { key: '397e572e87dd7f01977008b44847469cabd06494', id: this.startInputId, type: "text", placeholder: this.startPlaceholder, name: this.startName, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.startValue, onInput: this.handleStartInput, onFocus: this.handleFocus, "data-scope": "date-range" }), index.h("div", { key: '378d2755919eafc9f4edd8ee451c01e49dc70cfe', class: "range-separator" }), index.h("input", { key: '2de8dcda3161667a543c04ae529a0f617f6598c6', id: this.endInputId, type: "text", placeholder: this.endPlaceholder, name: this.endName, disabled: this.disabled, readOnly: this.readonly, required: this.required, value: this.endValue, onInput: this.handleEndInput, onFocus: this.handleFocus, "data-scope": "date-range" })), this.error && (index.h("nv-icon", { key: '5880e135764a7f9f87d92a4f7a84eba9f56b7d46', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '5d764360d3dbfc306962cb9e4b67d7d3c4bc09ed', name: "circle-check", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: '1b09d57633f8e115cc3d92a82d35399c53be265b', class: "toggle-calendar-icon", name: "calendar", size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', "aria-pressed": this.open.toString(), onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: '7ec41f782b0343eeb427bee4d7f2ab1b549978b3', name: "after-input" })), index.h("div", { key: 'ea714333fe596af8a10c6f8a1e6c72935f8e5c91', slot: "content" }, index.h("nv-calendar", { key: 'ffaa70c5bc76c422396b233d3dc46fdeb2d06b10', ref: el => (this.calendarElement = el), dateFormat: this.dateFormat, value: this.value, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates, selectionType: "range", "data-prevent-navigation": "true" }))), ((this.description && this.description.length > 0) ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '7f4aa271c896234907d95cfe7660e1c41ab8ddf7', class: "description" }, index.h("slot", { key: 'fce93594f7af4d054f886ce3caf48cfffb6809aa', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'f5a19b5d4c90c4319dc4eb09d1067f202ab229c9', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: '1d494e4c192b38c26e8cfe5482516382cacc13c6' })));
+        return (index.h(index.Host, { key: '2f100d067fa3ca5917252ac2ce921eecac98791e' }, ((this.label && this.label.length > 0) ||
+            this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'd427e5fd307896971a798a61461a5545af107d95', htmlFor: this.startInputId }, index.h("slot", { key: 'b6735f19e0fa53528e0c088ee81eb54f7076a8b5', name: "label" }, this.label))), index.h("nv-popover", { key: '069225a1606c105b9370f6eb0b5268fbf3fc5d96', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: 'ec43cbd1c063f2e8c4de3e765b776982da607fbe', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: '6d6dc2263764bdd53674d9b62eb04904ceecf428', name: "before-input" }), index.h("div", { key: 'd465d4a360baf008977e9f9c23058980c7357668', class: "input-container" }, index.h("slot", { key: '52463fb16a84025f910ab5d34ad5f95e575a3999', name: "leading-input" }), index.h("div", { key: 'a432151dabdf6976f463d794b24b85cb7c784d3f', class: "range-inputs" }, index.h("input", { key: '98e48271dce40353ba577aedc1daca8398f9526a', id: this.startInputId, type: "text", placeholder: this.startPlaceholder ||
+                this.convertToInputmaskFormat(this.dateFormat), name: this.startName, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.startValue, onInput: this.handleStartInput, onFocus: this.handleFocus, "data-scope": "date-range" }), index.h("div", { key: 'daddef3bb169bcdf4baf4d5dd7c727d7fa66dd0f', class: "range-separator" }), index.h("input", { key: 'c498d3b8a82372606d315a3102ada5763bc4791e', id: this.endInputId, type: "text", placeholder: this.endPlaceholder ||
+                this.convertToInputmaskFormat(this.dateFormat), name: this.endName, disabled: this.disabled, readOnly: this.readonly, required: this.required, value: this.endValue, onInput: this.handleEndInput, onFocus: this.handleFocus, "data-scope": "date-range" })), this.error && (index.h("nv-icon", { key: 'c83a0f241b7eb2407117a5eb52caa1bee955c764', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: 'a96c7cd55a903e38f10453fe6bbea0f828573367', name: "circle-check", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: '39b92aa357457f0be9264335173f8335fdd84b26', class: "toggle-calendar-icon", name: "calendar", size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', "aria-pressed": this.open.toString(), onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: 'b739f98ecb80e73fd84b557a0165438beb3f16bd', name: "after-input" })), index.h("div", { key: '503406610a224a2b0173fcf6117b1b3a45d3d44d', slot: "content" }, index.h("nv-calendar", { key: 'ac97339bef8aa214da1317601a31af2c2555acaa', ref: el => (this.calendarElement = el), dateFormat: this.dateFormat, value: this.value, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates, selectionType: "range", "data-prevent-navigation": "true" }))), ((this.description && this.description.length > 0) ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '302bf932d36f484db34d7c94206697fb469faadc', class: "description" }, index.h("slot", { key: '133e4c69264dbb856f42dee40fbdfe2286caf87d', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '2cc57d57cb18cc7ac89135f5e128ffa9ee5487bc', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: '3ef1b28e2bd3879c33faefd20af8cf33360af56c' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-fielddropdown.entry-D1Gb5Lvr.js → nv-fielddropdown.entry-Cz7yuHTj.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BPZo04LR.js');
+var index = require('./index-BtjpbnUr.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');
 

package/dist/cjs/{nv-fielddropdownitem.entry-D1YDyF8i.js → nv-fielddropdownitem.entry-CH_C4Dr-.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BPZo04LR.js');
+var index = require('./index-BtjpbnUr.js');
 require('react');
 
 const nvFielddropdownitemCss = "nv-fielddropdownitem{display:flex;gap:var(--spacing-2);flex-wrap:wrap;align-items:center;width:100%;padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);font-weight:var(--menu-contextual-item-font-weight);font-size:var(--list-dropdown-font-size);line-height:var(--list-dropdown-line-height);color:var(--components-list-dropdown-item-label-default);border-radius:var(--list-dropdown-item-radius);transition:background-color 150ms ease-out, color 150ms ease-out;cursor:pointer}nv-fielddropdownitem:hover,nv-fielddropdownitem:focus,nv-fielddropdownitem:focus-within{background-color:var(--components-list-dropdown-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-fielddropdownitem[disabled]:not([disabled=false]){cursor:not-allowed;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}nv-fielddropdownitem .text-wrapper{display:flex;flex-grow:1;align-items:center;justify-content:space-between}nv-fielddropdownitem [data-scope=text]{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nv-fielddropdownitem nv-icon[data-scope=selected]{color:var(--components-list-dropdown-item-label-default);align-self:center;margin-left:auto}";

package/dist/cjs/{nv-fieldmultiselect.entry-eOD0Tk6H.js → nv-fieldmultiselect.entry-BqEdEUR0.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BPZo04LR.js');
+var index = require('./index-BtjpbnUr.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');
 

package/dist/cjs/{nv-fieldnumber.entry-C0S5sB8-.js → nv-fieldnumber.entry-BhRb8v1L.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BPZo04LR.js');
+var index = require('./index-BtjpbnUr.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');
 

package/dist/cjs/{nv-fieldpassword.entry-BwK_EseD.js → nv-fieldpassword.entry-BL4T90zr.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BPZo04LR.js');
+var index = require('./index-BtjpbnUr.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');