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

package/dist/collection/components/nv-fielddate/styles/nv-fielddate.css

@@ -1,3 +1,41 @@
+/* TODO: integrate this logic in the proper structure */
+nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range {
+  background: var(--components-slider-track-filled-hover);
+}
+nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb {
+  border-color: var(--components-slider-track-filled-hover);
+}
+nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range {
+  background: var(--components-slider-track-filled-focus);
+}
+nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb {
+  border-color: var(--components-slider-track-filled-focus);
+}
+nv-fieldslider[error] .slider-container .track-container .track .track-range {
+  background: var(--components-slider-track-filled-error);
+}
+nv-fieldslider[error] .slider-container .track-container .track .thumb {
+  border-color: var(--components-slider-track-filled-error);
+}
+nv-fieldslider[error] .slider-container .track-container .track .thumb:hover {
+  border-color: var(--components-slider-track-filled-error);
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
+  background-color: var(--components-slider-handler-background-error);
+}
+nv-fieldslider[error] .slider-container .track-container .track .thumb:focus {
+  border-color: var(--components-slider-track-filled-error);
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
+  background-color: var(--components-slider-track-filled-error);
+}
+nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range {
+  background: var(--components-slider-track-filled-error);
+}
+nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb {
+  border-color: var(--components-slider-track-filled-error);
+}
+
 nv-fielddate {
   --nv-field-border-default: var(--components-form-field-border-default);
   --nv-field-border-hover: var(--components-form-field-border-hover);
@@ -128,6 +166,7 @@ nv-fielddate .input-wrapper .input-container input {
   font-weight: 500;
   line-height: var(--form-field-line-height);
   width: 100%;
+  /* Hide Edge built-in password reveal and clear icons */
 }
 nv-fielddate .input-wrapper .input-container input:focus {
   outline: none;
@@ -142,6 +181,11 @@ nv-fielddate .input-wrapper .input-container input::placeholder {
   font-weight: 400;
   line-height: var(--form-field-line-height);
 }
+nv-fielddate .input-wrapper .input-container input[type=password]::-ms-clear, nv-fielddate .input-wrapper .input-container input[type=password]::-ms-reveal {
+  display: none;
+  width: 0;
+  height: 0;
+}
 nv-fielddate .input-wrapper .input-container > nv-iconbutton {
   border: 0px;
   border-radius: 0px;

package/dist/collection/components/nv-fielddate/test/nv-fielddate.logic.test.js

@@ -0,0 +1,196 @@
+/* eslint-disable jsdoc/require-jsdoc */
+import { describe, it, expect } from "vitest";
+/**
+ * Logic tests for nv-fielddate basic functionality
+ *
+ * These tests validate basic utility functions and logic
+ * without testing the full component implementation.
+ */
+/**
+ * Utility function to convert date format to inputmask format
+ * @param {string} format - The date format
+ * @returns {string} Format adapted for Inputmask
+ */
+function convertToInputmaskFormat(format) {
+    switch (format) {
+        case 'DD/MM/YYYY':
+            return 'dd/mm/yyyy';
+        case 'MM/DD/YYYY':
+            return 'mm/dd/yyyy';
+        case 'YYYY-MM-DD':
+            return 'yyyy-mm-dd';
+        case 'DD.MM.YYYY':
+            return 'dd.mm.yyyy';
+        case 'YYYYMMDD':
+            return 'yyyymmdd';
+        default:
+            return format;
+    }
+}
+/**
+ * Utility function to validate date format
+ * @param {string} dateString - Date string to validate
+ * @param {string} format - Expected format
+ * @returns {boolean} Whether the date matches the format
+ */
+function isValidDateFormat(dateString, format) {
+    if (!dateString || !format)
+        return false;
+    const formatMap = {
+        'DD/MM/YYYY': /^\d{2}\/\d{2}\/\d{4}$/,
+        'MM/DD/YYYY': /^\d{2}\/\d{2}\/\d{4}$/,
+        'YYYY-MM-DD': /^\d{4}-\d{2}-\d{2}$/,
+        'DD.MM.YYYY': /^\d{2}\.\d{2}\.\d{4}$/,
+        'YYYYMMDD': /^\d{8}$/,
+    };
+    const regex = formatMap[format];
+    return regex ? regex.test(dateString) : false;
+}
+/**
+ * Utility function to check if a value has changed
+ * @param {string} oldValue - Previous value
+ * @param {string} newValue - New value
+ * @returns {boolean} Whether the value has changed
+ */
+function hasValueChanged(oldValue, newValue) {
+    return oldValue !== newValue;
+}
+/**
+ * Utility function to normalize empty values
+ * @param {string | null | undefined} value - Value to normalize
+ * @returns {string} Normalized value
+ */
+function normalizeValue(value) {
+    return value || '';
+}
+/**
+ * Utility function to determine selection range based on date format
+ * @param {string} format - Date format
+ * @returns {object} Selection range with start and end
+ */
+function getSelectionRange(format) {
+    if (format.startsWith('DD') || format.startsWith('MM')) {
+        return { start: 0, end: 2 };
+    }
+    else if (format.startsWith('YYYY')) {
+        return { start: 0, end: 4 };
+    }
+    return { start: 0, end: 0 };
+}
+describe('nv-fielddate - Logic Tests', () => {
+    describe('Input Mask Format Conversion', () => {
+        it('should convert DD/MM/YYYY format correctly', () => {
+            expect(convertToInputmaskFormat('DD/MM/YYYY')).toBe('dd/mm/yyyy');
+        });
+        it('should convert MM/DD/YYYY format correctly', () => {
+            expect(convertToInputmaskFormat('MM/DD/YYYY')).toBe('mm/dd/yyyy');
+        });
+        it('should convert YYYY-MM-DD format correctly', () => {
+            expect(convertToInputmaskFormat('YYYY-MM-DD')).toBe('yyyy-mm-dd');
+        });
+        it('should convert DD.MM.YYYY format correctly', () => {
+            expect(convertToInputmaskFormat('DD.MM.YYYY')).toBe('dd.mm.yyyy');
+        });
+        it('should convert YYYYMMDD format correctly', () => {
+            expect(convertToInputmaskFormat('YYYYMMDD')).toBe('yyyymmdd');
+        });
+        it('should return original format for unknown formats', () => {
+            const unknownFormat = 'CUSTOM-FORMAT';
+            expect(convertToInputmaskFormat(unknownFormat)).toBe(unknownFormat);
+        });
+        it('should handle empty string', () => {
+            expect(convertToInputmaskFormat('')).toBe('');
+        });
+    });
+    describe('Date Format Validation', () => {
+        it('should validate DD/MM/YYYY format correctly', () => {
+            expect(isValidDateFormat('15/03/2024', 'DD/MM/YYYY')).toBe(true);
+            expect(isValidDateFormat('1/3/2024', 'DD/MM/YYYY')).toBe(false);
+            expect(isValidDateFormat('15-03-2024', 'DD/MM/YYYY')).toBe(false);
+            expect(isValidDateFormat('', 'DD/MM/YYYY')).toBe(false);
+        });
+        it('should validate MM/DD/YYYY format correctly', () => {
+            expect(isValidDateFormat('03/15/2024', 'MM/DD/YYYY')).toBe(true);
+            expect(isValidDateFormat('3/15/2024', 'MM/DD/YYYY')).toBe(false);
+            expect(isValidDateFormat('03-15-2024', 'MM/DD/YYYY')).toBe(false);
+        });
+        it('should validate YYYY-MM-DD format correctly', () => {
+            expect(isValidDateFormat('2024-03-15', 'YYYY-MM-DD')).toBe(true);
+            expect(isValidDateFormat('24-3-15', 'YYYY-MM-DD')).toBe(false);
+            expect(isValidDateFormat('2024/03/15', 'YYYY-MM-DD')).toBe(false);
+        });
+        it('should validate DD.MM.YYYY format correctly', () => {
+            expect(isValidDateFormat('15.03.2024', 'DD.MM.YYYY')).toBe(true);
+            expect(isValidDateFormat('15/03/2024', 'DD.MM.YYYY')).toBe(false);
+        });
+        it('should validate YYYYMMDD format correctly', () => {
+            expect(isValidDateFormat('20240315', 'YYYYMMDD')).toBe(true);
+            expect(isValidDateFormat('2024-03-15', 'YYYYMMDD')).toBe(false);
+        });
+        it('should handle invalid inputs gracefully', () => {
+            expect(isValidDateFormat('invalid', 'DD/MM/YYYY')).toBe(false);
+            expect(isValidDateFormat('15/03/2024', 'UNKNOWN_FORMAT')).toBe(false);
+            expect(isValidDateFormat('', '')).toBe(false);
+        });
+    });
+    describe('Value Change Detection', () => {
+        it('should detect when value changes', () => {
+            expect(hasValueChanged('', '2024-03-15')).toBe(true);
+            expect(hasValueChanged('2024-03-15', '2024-03-16')).toBe(true);
+            expect(hasValueChanged('2024-03-15', '2024-03-15')).toBe(false);
+        });
+        it('should handle empty values correctly', () => {
+            expect(hasValueChanged('', '')).toBe(false);
+            expect(hasValueChanged('value', '')).toBe(true);
+            expect(hasValueChanged('', 'value')).toBe(true);
+        });
+    });
+    describe('Value Normalization', () => {
+        it('should normalize empty values correctly', () => {
+            expect(normalizeValue('')).toBe('');
+            expect(normalizeValue('2024-03-15')).toBe('2024-03-15');
+            expect(normalizeValue(null)).toBe('');
+            expect(normalizeValue(undefined)).toBe('');
+        });
+        it('should preserve valid values', () => {
+            const validValue = '15/03/2024';
+            expect(normalizeValue(validValue)).toBe(validValue);
+        });
+    });
+    describe('Selection Range Logic', () => {
+        it('should return correct range for DD format', () => {
+            expect(getSelectionRange('DD/MM/YYYY')).toEqual({ start: 0, end: 2 });
+            expect(getSelectionRange('DD.MM.YYYY')).toEqual({ start: 0, end: 2 });
+        });
+        it('should return correct range for MM format', () => {
+            expect(getSelectionRange('MM/DD/YYYY')).toEqual({ start: 0, end: 2 });
+        });
+        it('should return correct range for YYYY format', () => {
+            expect(getSelectionRange('YYYY-MM-DD')).toEqual({ start: 0, end: 4 });
+            expect(getSelectionRange('YYYYMMDD')).toEqual({ start: 0, end: 4 });
+        });
+        it('should handle unknown formats', () => {
+            expect(getSelectionRange('UNKNOWN')).toEqual({ start: 0, end: 0 });
+            expect(getSelectionRange('')).toEqual({ start: 0, end: 0 });
+        });
+    });
+    describe('Edge Cases', () => {
+        it('should handle leap year dates in validation', () => {
+            expect(isValidDateFormat('29/02/2024', 'DD/MM/YYYY')).toBe(true);
+            expect(isValidDateFormat('2024-02-29', 'YYYY-MM-DD')).toBe(true);
+        });
+        it('should handle year boundaries', () => {
+            expect(isValidDateFormat('31/12/2024', 'DD/MM/YYYY')).toBe(true);
+            expect(isValidDateFormat('01/01/2025', 'DD/MM/YYYY')).toBe(true);
+        });
+        it('should handle format conversion edge cases', () => {
+            expect(convertToInputmaskFormat(null)).toBe(null);
+            expect(convertToInputmaskFormat(undefined)).toBe(undefined);
+        });
+        it('should handle value change detection with special characters', () => {
+            expect(hasValueChanged('15/03/2024', '15/03/2024')).toBe(false);
+            expect(hasValueChanged('15/03/2024', '15-03-2024')).toBe(true);
+        });
+    });
+});
+//# sourceMappingURL=nv-fielddate.logic.test.js.map

package/dist/collection/components/nv-fielddate/test/nv-fielddate.logic.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-fielddate.logic.test.js","sourceRoot":"","sources":["../../../../src/components/nv-fielddate/test/nv-fielddate.logic.test.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable jsdoc/require-jsdoc */\nimport { describe, it, expect } from 'vitest';\n\n/**\n * Logic tests for nv-fielddate basic functionality\n *\n * These tests validate basic utility functions and logic\n * without testing the full component implementation.\n */\n\n/**\n * Utility function to convert date format to inputmask format\n * @param {string} format - The date format\n * @returns {string} Format adapted for Inputmask\n */\nfunction convertToInputmaskFormat(format: string): string {\n  switch (format) {\n    case 'DD/MM/YYYY':\n      return 'dd/mm/yyyy';\n    case 'MM/DD/YYYY':\n      return 'mm/dd/yyyy';\n    case 'YYYY-MM-DD':\n      return 'yyyy-mm-dd';\n    case 'DD.MM.YYYY':\n      return 'dd.mm.yyyy';\n    case 'YYYYMMDD':\n      return 'yyyymmdd';\n    default:\n      return format;\n  }\n}\n\n/**\n * Utility function to validate date format\n * @param {string} dateString - Date string to validate\n * @param {string} format - Expected format\n * @returns {boolean} Whether the date matches the format\n */\nfunction isValidDateFormat(dateString: string, format: string): boolean {\n  if (!dateString || !format) return false;\n\n  const formatMap = {\n    'DD/MM/YYYY': /^\\d{2}\\/\\d{2}\\/\\d{4}$/,\n    'MM/DD/YYYY': /^\\d{2}\\/\\d{2}\\/\\d{4}$/,\n    'YYYY-MM-DD': /^\\d{4}-\\d{2}-\\d{2}$/,\n    'DD.MM.YYYY': /^\\d{2}\\.\\d{2}\\.\\d{4}$/,\n    'YYYYMMDD': /^\\d{8}$/,\n  };\n\n  const regex = formatMap[format as keyof typeof formatMap];\n  return regex ? regex.test(dateString) : false;\n}\n\n/**\n * Utility function to check if a value has changed\n * @param {string} oldValue - Previous value\n * @param {string} newValue - New value\n * @returns {boolean} Whether the value has changed\n */\nfunction hasValueChanged(oldValue: string, newValue: string): boolean {\n  return oldValue !== newValue;\n}\n\n/**\n * Utility function to normalize empty values\n * @param {string | null | undefined} value - Value to normalize\n * @returns {string} Normalized value\n */\nfunction normalizeValue(value: string | null | undefined): string {\n  return value || '';\n}\n\n/**\n * Utility function to determine selection range based on date format\n * @param {string} format - Date format\n * @returns {object} Selection range with start and end\n */\nfunction getSelectionRange(format: string): { start: number; end: number } {\n  if (format.startsWith('DD') || format.startsWith('MM')) {\n    return { start: 0, end: 2 };\n  } else if (format.startsWith('YYYY')) {\n    return { start: 0, end: 4 };\n  }\n  return { start: 0, end: 0 };\n}\n\ndescribe('nv-fielddate - Logic Tests', () => {\n  describe('Input Mask Format Conversion', () => {\n    it('should convert DD/MM/YYYY format correctly', () => {\n      expect(convertToInputmaskFormat('DD/MM/YYYY')).toBe('dd/mm/yyyy');\n    });\n\n    it('should convert MM/DD/YYYY format correctly', () => {\n      expect(convertToInputmaskFormat('MM/DD/YYYY')).toBe('mm/dd/yyyy');\n    });\n\n    it('should convert YYYY-MM-DD format correctly', () => {\n      expect(convertToInputmaskFormat('YYYY-MM-DD')).toBe('yyyy-mm-dd');\n    });\n\n    it('should convert DD.MM.YYYY format correctly', () => {\n      expect(convertToInputmaskFormat('DD.MM.YYYY')).toBe('dd.mm.yyyy');\n    });\n\n    it('should convert YYYYMMDD format correctly', () => {\n      expect(convertToInputmaskFormat('YYYYMMDD')).toBe('yyyymmdd');\n    });\n\n    it('should return original format for unknown formats', () => {\n      const unknownFormat = 'CUSTOM-FORMAT';\n      expect(convertToInputmaskFormat(unknownFormat)).toBe(unknownFormat);\n    });\n\n    it('should handle empty string', () => {\n      expect(convertToInputmaskFormat('')).toBe('');\n    });\n  });\n\n  describe('Date Format Validation', () => {\n    it('should validate DD/MM/YYYY format correctly', () => {\n      expect(isValidDateFormat('15/03/2024', 'DD/MM/YYYY')).toBe(true);\n      expect(isValidDateFormat('1/3/2024', 'DD/MM/YYYY')).toBe(false);\n      expect(isValidDateFormat('15-03-2024', 'DD/MM/YYYY')).toBe(false);\n      expect(isValidDateFormat('', 'DD/MM/YYYY')).toBe(false);\n    });\n\n    it('should validate MM/DD/YYYY format correctly', () => {\n      expect(isValidDateFormat('03/15/2024', 'MM/DD/YYYY')).toBe(true);\n      expect(isValidDateFormat('3/15/2024', 'MM/DD/YYYY')).toBe(false);\n      expect(isValidDateFormat('03-15-2024', 'MM/DD/YYYY')).toBe(false);\n    });\n\n    it('should validate YYYY-MM-DD format correctly', () => {\n      expect(isValidDateFormat('2024-03-15', 'YYYY-MM-DD')).toBe(true);\n      expect(isValidDateFormat('24-3-15', 'YYYY-MM-DD')).toBe(false);\n      expect(isValidDateFormat('2024/03/15', 'YYYY-MM-DD')).toBe(false);\n    });\n\n    it('should validate DD.MM.YYYY format correctly', () => {\n      expect(isValidDateFormat('15.03.2024', 'DD.MM.YYYY')).toBe(true);\n      expect(isValidDateFormat('15/03/2024', 'DD.MM.YYYY')).toBe(false);\n    });\n\n    it('should validate YYYYMMDD format correctly', () => {\n      expect(isValidDateFormat('20240315', 'YYYYMMDD')).toBe(true);\n      expect(isValidDateFormat('2024-03-15', 'YYYYMMDD')).toBe(false);\n    });\n\n    it('should handle invalid inputs gracefully', () => {\n      expect(isValidDateFormat('invalid', 'DD/MM/YYYY')).toBe(false);\n      expect(isValidDateFormat('15/03/2024', 'UNKNOWN_FORMAT')).toBe(false);\n      expect(isValidDateFormat('', '')).toBe(false);\n    });\n  });\n\n  describe('Value Change Detection', () => {\n    it('should detect when value changes', () => {\n      expect(hasValueChanged('', '2024-03-15')).toBe(true);\n      expect(hasValueChanged('2024-03-15', '2024-03-16')).toBe(true);\n      expect(hasValueChanged('2024-03-15', '2024-03-15')).toBe(false);\n    });\n\n    it('should handle empty values correctly', () => {\n      expect(hasValueChanged('', '')).toBe(false);\n      expect(hasValueChanged('value', '')).toBe(true);\n      expect(hasValueChanged('', 'value')).toBe(true);\n    });\n  });\n\n  describe('Value Normalization', () => {\n    it('should normalize empty values correctly', () => {\n      expect(normalizeValue('')).toBe('');\n      expect(normalizeValue('2024-03-15')).toBe('2024-03-15');\n      expect(normalizeValue(null)).toBe('');\n      expect(normalizeValue(undefined)).toBe('');\n    });\n\n    it('should preserve valid values', () => {\n      const validValue = '15/03/2024';\n      expect(normalizeValue(validValue)).toBe(validValue);\n    });\n  });\n\n  describe('Selection Range Logic', () => {\n    it('should return correct range for DD format', () => {\n      expect(getSelectionRange('DD/MM/YYYY')).toEqual({ start: 0, end: 2 });\n      expect(getSelectionRange('DD.MM.YYYY')).toEqual({ start: 0, end: 2 });\n    });\n\n    it('should return correct range for MM format', () => {\n      expect(getSelectionRange('MM/DD/YYYY')).toEqual({ start: 0, end: 2 });\n    });\n\n    it('should return correct range for YYYY format', () => {\n      expect(getSelectionRange('YYYY-MM-DD')).toEqual({ start: 0, end: 4 });\n      expect(getSelectionRange('YYYYMMDD')).toEqual({ start: 0, end: 4 });\n    });\n\n    it('should handle unknown formats', () => {\n      expect(getSelectionRange('UNKNOWN')).toEqual({ start: 0, end: 0 });\n      expect(getSelectionRange('')).toEqual({ start: 0, end: 0 });\n    });\n  });\n\n  describe('Edge Cases', () => {\n    it('should handle leap year dates in validation', () => {\n      expect(isValidDateFormat('29/02/2024', 'DD/MM/YYYY')).toBe(true);\n      expect(isValidDateFormat('2024-02-29', 'YYYY-MM-DD')).toBe(true);\n    });\n\n    it('should handle year boundaries', () => {\n      expect(isValidDateFormat('31/12/2024', 'DD/MM/YYYY')).toBe(true);\n      expect(isValidDateFormat('01/01/2025', 'DD/MM/YYYY')).toBe(true);\n    });\n\n    it('should handle format conversion edge cases', () => {\n      expect(convertToInputmaskFormat(null as unknown as string)).toBe(null);\n      expect(convertToInputmaskFormat(undefined as unknown as string)).toBe(\n        undefined,\n      );\n    });\n\n    it('should handle value change detection with special characters', () => {\n      expect(hasValueChanged('15/03/2024', '15/03/2024')).toBe(false);\n      expect(hasValueChanged('15/03/2024', '15-03-2024')).toBe(true);\n    });\n  });\n});\n"]}

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

@@ -52,6 +52,7 @@ export class NvFielddaterange {
         /**
          * The initial value of the date range (in string format).
          */
+        // eslint-disable-next-line @stencil-community/strict-mutable
         this.value = '';
         /**
          * The current value of the start date in string format.
@@ -65,10 +66,6 @@ export class NvFielddaterange {
          * Controls the opening of the popover.
          */
         this.open = false;
-        /**
-         * Current calendar state to prevent unwanted navigation
-         */
-        this.calendarState = null;
         /**
          * First day of the week 0 = Sunday, 1 = Monday, etc.
          * @default 1
@@ -109,6 +106,35 @@ export class NvFielddaterange {
          * Allows the field to stretch and fill the entire width of its container.
          */
         this.fluid = false;
+        //#endregion PROPERTIES
+        /****************************************************************************/
+        //#region METHODS
+        /**
+         * Parses the unified value prop and synchronizes with internal state
+         * @param {string} value - Value to parse
+         */
+        this.parseUnifiedValue = (value) => {
+            if (!value) {
+                // Reset all selections
+                this.startValue = '';
+                this.endValue = '';
+                return;
+            }
+            const values = value
+                .split(',')
+                .map(v => v.trim())
+                .filter(Boolean);
+            if (values.length >= 2) {
+                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.
          * @param {MouseEvent} event - The mouse event
@@ -129,6 +155,10 @@ export class NvFielddaterange {
             }
             const input = event.target;
             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) {
@@ -153,6 +183,10 @@ export class NvFielddaterange {
             }
             const input = event.target;
             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) {
@@ -198,9 +232,6 @@ export class NvFielddaterange {
             this.open = !this.open;
         };
     }
-    //#endregion PROPERTIES
-    /****************************************************************************/
-    //#region METHODS
     /**
      * Converts the nv-calendar date format to the format expected by Inputmask.
      * @param {string} format - The date format to convert
@@ -226,10 +257,6 @@ export class NvFielddaterange {
     updateCalendarValue() {
         if (this.calendarElement && this.startValue && this.endValue) {
             // Store the current calendar state
-            this.calendarState = {
-                start: this.startValue,
-                end: this.endValue,
-            };
         }
     }
     //#endregion METHODS
@@ -240,21 +267,8 @@ export class NvFielddaterange {
     }
     componentWillLoad() {
         if (this.value) {
-            try {
-                const range = JSON.parse(this.value);
-                this.startValue = range.start || '';
-                this.endValue = range.end || '';
-                if (range.start && range.end) {
-                    this.calendarState = {
-                        start: range.start,
-                        end: range.end,
-                    };
-                }
-            }
-            catch (error) {
-                console.error('Invalid JSON for value:');
-                console.error(error);
-            }
+            // Use the unified parsing method
+            this.parseUnifiedValue(this.value);
         }
     }
     componentDidLoad() {
@@ -324,7 +338,10 @@ export class NvFielddaterange {
         if (start && end) {
             this.startValue = start;
             this.endValue = end;
-            this.calendarState = { start, end };
+            // Update unified value prop (like nv-calendar)
+            this.value = `${start},${end}`;
+            this.valueChanged.emit(this.value);
+            // Legacy support (deprecated)
             this.dateRangeChange.emit({
                 start: this.startValue,
                 end: this.endValue,
@@ -334,6 +351,24 @@ export class NvFielddaterange {
             }
         }
     }
+    /**
+     * Handles the unified value change event from nv-calendar
+     * @param {CustomEvent<string>} event - The custom event
+     */
+    handleCalendarValueChanged(event) {
+        const newValue = event.detail || '';
+        if (newValue !== this.value) {
+            this.value = newValue;
+            this.valueChanged.emit(newValue);
+            // Parse and update internal state
+            this.parseUnifiedValue(newValue);
+            // Legacy support - emit dateRangeChange
+            this.dateRangeChange.emit({
+                start: this.startValue,
+                end: this.endValue,
+            });
+        }
+    }
     handleClosePopover() {
         this.open = false;
     }
@@ -353,10 +388,14 @@ export class NvFielddaterange {
         if (isResetSingle || isResetRange) {
             this.startValue = '';
             this.endValue = '';
+            // Update unified value prop
+            this.value = '';
+            this.valueChanged.emit('');
             const inputs = this.el.querySelectorAll('.input-wrapper input');
             inputs.forEach((input) => {
                 input.value = '';
             });
+            // Legacy support (deprecated)
             this.dateRangeChange.emit({ start: '', end: '' });
         }
     }
@@ -379,23 +418,17 @@ export class NvFielddaterange {
         }
     }
     handleValueChange(newValue) {
-        try {
-            const range = JSON.parse(newValue);
-            this.startValue = range.start || '';
-            this.endValue = range.end || '';
-        }
-        catch (error) {
-            console.error('Invalid JSON for value:', error);
-        }
+        // Use the unified parsing method instead of JSON.parse
+        this.parseUnifiedValue(newValue);
     }
     //#endregion EVENTS
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '152a588b815a0f3846c5b0c8b9da8d3dbc8f4768' }, ((this.label && this.label.length > 0) ||
-            this.el.querySelector('[slot="label"]')) && (h("label", { key: '786269a2bd4a50559cfad72c61f80797e4afc902', htmlFor: this.startInputId }, h("slot", { key: 'e1c6ed7d288d21889e1ebdfdf0595d4f43e551f7', name: "label" }, this.label))), h("nv-popover", { key: '228966569f5670f1b283c2e45f1c1057811e699d', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: 'ee39e8da7367bceb1fdcaf7f008d780652471e8e', slot: "trigger", class: "input-wrapper" }, h("slot", { key: '0555695d16ae919327771c586a291dc1767ed98f', name: "before-input" }), h("div", { key: '106aec6a9be06a03497f66407ea8038d5e4be899', class: "input-container" }, h("slot", { key: 'e448f8bacd3b383944f862b9dc1b7ea64feb565e', name: "leading-input" }), h("div", { key: '52ef48b4d76f063c65daa43865da607273ba6410', class: "range-inputs" }, h("input", { key: '899e309f7e100b7b6d12603b229aa4c429ddc1d2', 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" }), h("svg", { key: '083bef93159b08aaf5c9f7637fbe459c2017e82f', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "icon icon-tabler icons-tabler-outline icon-tabler-arrows-move-horizontal" }, h("path", { key: '2946dbfae81e0b3cdd62f77bb928617d182ae5c1', stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), h("path", { key: 'afcf53514d22c9f8bb5d7d09294808f3ca053cc9', d: "M18 9l3 3l-3 3" }), h("path", { key: '53fe61cf1c1a5206f22d4c065292680f28fa3c59', d: "M15 12h6" }), h("path", { key: '1e138be2146498fa127922dcba9646e2e960a7e3', d: "M6 9l-3 3l3 3" }), h("path", { key: '3e324bf333bd69374fccac278386f6cc966fc3bd', d: "M3 12h6" })), h("input", { key: 'b7eeab7a9e0071c862528e8fa47c543d0295d331', 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 && (h("nv-icon", { key: 'f2ab540736820a8fcf7f4dbb973bc3a16b14fa8d', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '91e75c515c4a44a3e499240e4d3c45b7a736429a', name: "circle-check", class: "validation", size: "md" })), h("nv-iconbutton", { key: 'a471cb1db59673f07ce493bae59e54ee8ecd8968', 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 })), h("slot", { key: '375a0c1848445652c2ef5f20ded877223774f792', name: "after-input" })), h("div", { key: '7427c51a78cf38a979b9f7eb4e9a7f49a36279d5', slot: "content" }, h("nv-calendar", { key: '1f9ad9bed53d9496f17544c6381824490431c342', ref: el => (this.calendarElement = el), dateFormat: this.dateFormat, rangeValue: this.calendarState, 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"]')) && (h("div", { key: 'c964928de34f26fc82619601d0964079b061048f', class: "description" }, h("slot", { key: 'f409a5286e1c0ba16f36f062df3df5531dad6296', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '5e8a1b48da516f801372a59e379c5ade77f9761a', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (h("slot", { name: "error-description" })) : (this.errorDescription))), h("slot", { key: '68f37bddcd3208217a26eb230d1f8afdd3552eff' })));
+        return (h(Host, { key: 'a451ea256b0149d8c49676f764832a2fb0f751e1' }, ((this.label && this.label.length > 0) ||
+            this.el.querySelector('[slot="label"]')) && (h("label", { key: '8b5dfcffa03da62b728b121705213a5dbc61dc6c', htmlFor: this.startInputId }, h("slot", { key: 'f55bf5e98ac77ab4781956ed98f2e327f0806df6', name: "label" }, this.label))), h("nv-popover", { key: 'c818788df088dd87bce8e0f3f7dfadf282675981', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: '2208b4f6033232fde9c149bd7ec7096a7b5bf36c', slot: "trigger", class: "input-wrapper" }, h("slot", { key: 'c32096e78b3b1846e8aac664770310f3e2a658c7', name: "before-input" }), h("div", { key: '478355cdb09432c84c44811f048ff832a58b7c21', class: "input-container" }, h("slot", { key: '4703b43ce78daec5c249cb64e2d5c6ea239e9682', name: "leading-input" }), h("div", { key: '02e39ceb5d680fe73b4e701162b12fdf6d351128', class: "range-inputs" }, h("input", { key: '54548154537b4f9661b2bc07cfa1e8fbdc587788', 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" }), h("svg", { key: 'b32d842470237bdb1d846b61ed165d2d1587a491', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "icon icon-tabler icons-tabler-outline icon-tabler-arrows-move-horizontal" }, h("path", { key: '7281b2de95391d3dc04ffdbfbc5da81a4b3f2fc3', stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), h("path", { key: '13f2cfe57b9eaadc9317bd489f6abfc472addd0e', d: "M18 9l3 3l-3 3" }), h("path", { key: '646dbf9fe81981c93a4ad70a7cf75d485b573e42', d: "M15 12h6" }), h("path", { key: '753699e6aa5325cd91b27af5ede8d316adaa7727', d: "M6 9l-3 3l3 3" }), h("path", { key: 'aab52481a7846a400bd0274f197b5c29c71fa15c', d: "M3 12h6" })), h("input", { key: '9c441f448382dd4f5c73c94d7ebaff80c6bcec2a', 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 && (h("nv-icon", { key: 'f16264bdc82de90a1c8e7b5acf25687ed31a0a49', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '9b1a0f81dc60bbcf68e53bc1c6ff33be515d3689', name: "circle-check", class: "validation", size: "md" })), h("nv-iconbutton", { key: '5e898f106896aa5496b9f243c8e4896d007dea65', 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 })), h("slot", { key: 'f1ab4a033654907143750a47ab44acf0b5293def', name: "after-input" })), h("div", { key: '55d69c575b8630b08a90334c7b65190d398ebec8', slot: "content" }, h("nv-calendar", { key: 'a3f9d43a961d7a8c38ffc7d7bd8fcbe7e0b544f8', 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"]')) && (h("div", { key: 'b58241fe9c321b2c55aab00235e07627d4aae5a8', class: "description" }, h("slot", { key: '4450872685fbb82838f5bc920fd0fd1b867347c5', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '947701fd9a14ef6e564460cd73bafb510883692a', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (h("slot", { name: "error-description" })) : (this.errorDescription))), h("slot", { key: '95dc7827c626e92a74067ffb7759dcca63cc4102' })));
     }
     static get is() { return "nv-fielddaterange"; }
     static get originalStyleUrls() {
@@ -705,7 +738,7 @@ export class NvFielddaterange {
             },
             "value": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -990,8 +1023,7 @@ export class NvFielddaterange {
         return {
             "startValue": {},
             "endValue": {},
-            "open": {},
-            "calendarState": {}
+            "open": {}
         };
     }
     static get events() {
@@ -1003,7 +1035,7 @@ export class NvFielddaterange {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emits an event when the date range changes."
+                    "text": "Emitted when the date range changes."
                 },
                 "complexType": {
                     "original": "HTMLNvCalendarElementEventMap['rangeDateChange']",
@@ -1015,6 +1047,24 @@ export class NvFielddaterange {
                         }
                     }
                 }
+            }, {
+                "method": "valueChanged",
+                "name": "valueChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "bind",
+                            "text": "value"
+                        }],
+                    "text": "Emitted when the unified value changes"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
             }];
     }
     static get elementRef() { return "el"; }
@@ -1031,6 +1081,12 @@ export class NvFielddaterange {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "valueChanged",
+                "method": "handleCalendarValueChanged",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }, {
                 "name": "closePopover",
                 "method": "handleClosePopover",