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

package/dist/types/components/nv-calendar/partials/calendar-grid.d.ts

@@ -0,0 +1,46 @@
+import { FunctionalComponent } from '../../../stencil-public-runtime';
+/**
+ * Day data structure
+ */
+interface DayData {
+    /** Day of the month (1-31) */
+    dayOfMonth: number;
+    /** Complete date */
+    date: Date;
+    /** If the day belongs to the current month */
+    isCurrentMonth: boolean;
+    /** If the day is disabled */
+    isDisabled: boolean;
+}
+/**
+ * Props for the CalendarGrid component
+ */
+interface CalendarGridProps {
+    /** Array of day data for the month */
+    days: DayData[];
+    /** Array of localized day names */
+    dayNames: string[];
+    /** Current selection type */
+    selectionType: 'single' | 'range';
+    /** Selected date in single mode */
+    selectedDate: Date | null;
+    /** Start date in range mode */
+    startDate: Date | null;
+    /** End date in range mode */
+    endDate: Date | null;
+    /** Whether date format is in UTC mode */
+    isUTCMode: boolean;
+    /** Handler for day selection */
+    onDayClick: (date: Date) => void;
+    /** Function to check if date is in range */
+    isDateInRange: (date: Date) => boolean;
+    /** Function to check if date is today */
+    isToday: (date: Date) => boolean;
+}
+/**
+ * Renders the calendar grid with day headers and day cells
+ * @param {CalendarGridProps} props - Component properties
+ * @returns {JSX.Element} JSX element representing the calendar grid
+ */
+export declare const CalendarGrid: FunctionalComponent<CalendarGridProps>;
+export {};

package/dist/types/components/nv-calendar/partials/calendar-header.d.ts

@@ -0,0 +1,38 @@
+import { FunctionalComponent } from '../../../stencil-public-runtime';
+/**
+ * Month data structure
+ */
+interface MonthData {
+    /** Month value (0-11) */
+    value: number;
+    /** Month label */
+    label: string;
+}
+/**
+ * Props for the CalendarHeader component
+ */
+interface CalendarHeaderProps {
+    /** Current displayed date */
+    currentDate: Date;
+    /** Array of localized months */
+    months: MonthData[];
+    /** Total number of calendars being displayed */
+    numberOfCalendars: number;
+    /** Index of this calendar (0-based) */
+    calendarIndex: number;
+    /** Month offset for this calendar */
+    monthOffset: number;
+    /** Handler for month navigation */
+    onMonthChange: (direction: number) => void;
+    /** Handler for month selection from dropdown */
+    onMonthSelect: (event: Event, offset: number) => void;
+    /** Handler for year input change */
+    onYearChange: (event: Event, offset: number) => void;
+}
+/**
+ * Renders the calendar header with navigation and date controls
+ * @param {CalendarHeaderProps} props - Component properties
+ * @returns {JSX.Element} JSX element representing the calendar header
+ */
+export declare const CalendarHeader: FunctionalComponent<CalendarHeaderProps>;
+export {};

package/dist/types/components/nv-calendar/partials/calendar-shortcuts.d.ts

@@ -0,0 +1,35 @@
+import { FunctionalComponent } from '../../../stencil-public-runtime';
+/**
+ * Shortcut data structure
+ */
+interface ShortcutData {
+    /** Label of the shortcut */
+    label: string;
+    /** Selected date value for single selection mode */
+    singleValue?: string;
+    /** Date range values for range selection mode */
+    rangeValue?: {
+        /** ISO string for start date */
+        start: string;
+        /** ISO string for end date */
+        end: string;
+    };
+}
+/**
+ * Props for the CalendarShortcuts component
+ */
+interface CalendarShortcutsProps {
+    /** Array of shortcut configurations */
+    shortcuts: ShortcutData[];
+    /** Placement of shortcuts in the calendar */
+    placement: 'bottom' | 'left' | 'right';
+    /** Handler for shortcut selection */
+    onShortcutClick: (shortcut: ShortcutData) => void;
+}
+/**
+ * Renders the shortcuts for quick date selection
+ * @param {CalendarShortcutsProps} props - Component properties
+ * @returns {JSX.Element | null} JSX element representing the shortcuts or null if no shortcuts
+ */
+export declare const CalendarShortcuts: FunctionalComponent<CalendarShortcutsProps>;
+export {};

package/dist/types/components/nv-calendar/partials/day-cell.d.ts

@@ -0,0 +1,35 @@
+import { FunctionalComponent } from '../../../stencil-public-runtime';
+/**
+ * Props for the DayCell component
+ */
+interface DayCellProps {
+    /** Date object for this cell */
+    date: Date;
+    /** Day number (1-31) */
+    dayOfMonth: number;
+    /** Whether this day belongs to the current month */
+    isCurrentMonth: boolean;
+    /** Whether this day is selected (single mode) */
+    isSelected: boolean;
+    /** Whether this day is in a selected range */
+    isInRange: boolean;
+    /** Whether this day is the start of a range */
+    isStart: boolean;
+    /** Whether this day is the end of a range */
+    isEnd: boolean;
+    /** Whether this day is today */
+    isToday: boolean;
+    /** Whether this day is disabled */
+    isDisabled: boolean;
+    /** Selection type for conditional styling */
+    selectionType: 'single' | 'range';
+    /** Click handler for day selection */
+    onClick?: (date: Date) => void;
+}
+/**
+ * Renders a single day cell in the calendar grid
+ * @param {DayCellProps} props - Component properties
+ * @returns {JSX.Element} JSX element representing a day cell
+ */
+export declare const DayCell: FunctionalComponent<DayCellProps>;
+export {};

package/dist/types/components/nv-calendar/partials/index.d.ts

@@ -0,0 +1,6 @@
+export { DayCell } from './day-cell';
+export { CalendarActions } from './calendar-actions';
+export { WeekNumbers } from './week-numbers';
+export { CalendarShortcuts } from './calendar-shortcuts';
+export { CalendarHeader } from './calendar-header';
+export { CalendarGrid } from './calendar-grid';

package/dist/types/components/nv-calendar/partials/week-numbers.d.ts

@@ -0,0 +1,30 @@
+import { FunctionalComponent } from '../../../stencil-public-runtime';
+/**
+ * Week data structure
+ */
+interface WeekData {
+    /** Date object for this day */
+    date: Date;
+}
+/**
+ * Props for the WeekNumbers component
+ */
+interface WeekNumbersProps {
+    /** Array of weeks with their days */
+    weeks: Array<Array<WeekData>>;
+    /** Localized text for "week" abbreviation */
+    localizedWeekText: string;
+    /** Current selection type */
+    selectionType: 'single' | 'range';
+    /** Handler for week selection in range mode */
+    onWeekSelect: (dates: Date[], calendarIndex: number) => void;
+    /** Calendar index for multi-calendar setups */
+    calendarIndex: number;
+}
+/**
+ * Renders the week numbers column for the calendar
+ * @param {WeekNumbersProps} props - Component properties
+ * @returns {JSX.Element} JSX element representing the week numbers
+ */
+export declare const WeekNumbers: FunctionalComponent<WeekNumbersProps>;
+export {};

package/dist/types/components/nv-calendar/test/partials/calendar-actions.logic.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/nv-calendar/test/partials/calendar-grid.logic.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/nv-calendar/test/partials/calendar-header.logic.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/nv-calendar/test/partials/calendar-shortcuts.logic.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/nv-calendar/test/partials/day-cell.logic.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/nv-calendar/test/partials/week-numbers.logic.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/nv-fielddate/nv-fielddate.d.ts

@@ -65,8 +65,9 @@ export declare class NvFielddate {
     readonly autofocus: boolean;
     /**
      * The initial value of the input (date in string format).
+     * @bind value
      */
-    readonly value: string;
+    value: string;
     /**
      * The current value of the input date in string format.
      */
@@ -149,7 +150,7 @@ export declare class NvFielddate {
     private handleInputContainerClick;
     /**
      * Handles the input event on the input element.
-     * Updates the singleValue and emits the dateChange event.
+     * Updates the singleValue and emits the valueChanged event.
      * @param {Event} event - The input event.
      */
     private handleInput;
@@ -162,6 +163,21 @@ export declare class NvFielddate {
      * @param {FocusEvent} event - The focus event.
      */
     private handleFocus;
+    /**
+     * Prevents the valueChanged event from the calendar from propagating up.
+     * @param {CustomEvent} event - The valueChanged event from nv-calendar.
+     */
+    private handleCalendarValueChanged;
+    /**
+     * Sets the reference to the popover element.
+     * @param {HTMLNvPopoverElement} el - The popover element.
+     */
+    private setPopoverRef;
+    /**
+     * Sets the reference to the input element.
+     * @param {HTMLInputElement} el - The input element.
+     */
+    private setInputRef;
     /****************************************************************************/
     connectedCallback(): void;
     componentWillLoad(): void;
@@ -169,14 +185,10 @@ export declare class NvFielddate {
     disconnectedCallback(): void;
     /****************************************************************************/
     /**
-     * Emits an event when the date changes.
+     * Emitted when the value changes (unified value binding).
+     * @bind value
      */
-    dateChange: EventEmitter<{
-        /**
-         * The date value.
-         */
-        value: string;
-    }>;
+    valueChanged: EventEmitter<string>;
     /**
      * Handles the single date selection event from nv-calendar.
      * Updates the input value and closes the popover.

package/dist/types/components/nv-fielddate/test/nv-fielddate.logic.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/nv-fielddaterange/nv-fielddaterange.d.ts

@@ -79,7 +79,7 @@ export declare class NvFielddaterange {
     /**
      * The initial value of the date range (in string format).
      */
-    readonly value: string;
+    value: string;
     /**
      * The current value of the start date in string format.
      */
@@ -92,10 +92,6 @@ export declare class NvFielddaterange {
      * Controls the opening of the popover.
      */
     open: boolean;
-    /**
-     * Current calendar state to prevent unwanted navigation
-     */
-    private calendarState;
     /**
      * First day of the week 0 = Sunday, 1 = Monday, etc.
      * @default 1
@@ -149,6 +145,11 @@ export declare class NvFielddaterange {
      */
     readonly fluid: boolean;
     /****************************************************************************/
+    /**
+     * Parses the unified value prop and synchronizes with internal state
+     * @param {string} value - Value to parse
+     */
+    private parseUnifiedValue;
     /**
      * Converts the nv-calendar date format to the format expected by Inputmask.
      * @param {string} format - The date format to convert
@@ -191,14 +192,24 @@ export declare class NvFielddaterange {
     disconnectedCallback(): void;
     /****************************************************************************/
     /**
-     * Emits an event when the date range changes.
+     * Emitted when the date range changes.
      */
     dateRangeChange: EventEmitter<HTMLNvCalendarElementEventMap['rangeDateChange']>;
+    /**
+     * Emitted when the unified value changes
+     * @bind value
+     */
+    valueChanged: EventEmitter<string>;
     /**
      * Handles the range date selection event from nv-calendar.
      * @param {CustomEvent<DateRange>} event - The custom event
      */
     handleRangeDateChange(event: CustomEvent<HTMLNvCalendarElementEventMap['rangeDateChange']>): void;
+    /**
+     * Handles the unified value change event from nv-calendar
+     * @param {CustomEvent<string>} event - The custom event
+     */
+    handleCalendarValueChanged(event: CustomEvent<string>): void;
     handleClosePopover(): void;
     handleApplyDateRange(): void;
     /**

package/dist/types/components/nv-fielddaterange/test/nv-fielddaterange.logic.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/nv-fieldslider/nv-fieldslider.d.ts

@@ -1,7 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 /**
- * @deprecated [EXPERIMENTAL]
- * @experimental This component is still in development and subject to change in future releases.
  * @slot label - Content to be placed as the label, will override the label prop.
  * @slot description - Content to be placed as the description, will override the description prop.
  * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.
@@ -74,10 +72,11 @@ export declare class NvFieldslider {
      */
     readonly success: boolean;
     /**
-     * Numeric value of the slider as a string, if range mode is on, the values
-     * will be a comma-separated string.
+     * Numeric value of the slider as an array of numbers. When in single mode,
+     * the value should be a an array of one number. When in range mode, the value
+     * should be an array of two numbers.
      */
-    value: string;
+    value: number[];
     /**
      * Defines the interval between selectable values on the slider. Controls how
      * much the value increases or decreases with each keyboard interaction, drag
@@ -224,7 +223,7 @@ export declare class NvFieldslider {
      * Emitted when the slider values change.
      * @bind value
      */
-    valueChanged: EventEmitter<string>;
+    valueChanged: EventEmitter<number[]>;
     /****************************************************************************/
     render(): any;
 }

package/dist/types/components.d.ts

@@ -255,7 +255,7 @@ export namespace Components {
         "disabledDates": Array<string>;
         /**
           * First day of the week (0 = Sunday, 1 = Monday, etc.)
-          * @default 0
+          * @default 1
          */
         "firstDayOfWeek": number;
         /**
@@ -346,6 +346,11 @@ export namespace Components {
          * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
          */
         "single-value"?: string;
+        /**
+          * Selected date value. For single mode: ISO date string. For range mode: comma-separated ISO date strings. Examples: - Single: "2025-03-15" - Range: "2025-03-15,2025-03-20"
+          * @default ""
+         */
+        "value": string;
     }
     interface NvCol {
         /**
@@ -829,6 +834,7 @@ export namespace Components {
         "success": boolean;
         /**
           * The initial value of the input (date in string format).
+          * @bind value
          */
         "value": string;
     }
@@ -1668,10 +1674,6 @@ export namespace Components {
          */
         "value": string;
     }
-    /**
-     * @deprecated [EXPERIMENTAL]
-     * @experimental This component is still in development and subject to change in future releases.
-     */
     interface NvFieldslider {
         /**
           * Add helpful hints or extra information under the slider. This is where you can clarify what users should enter or provide additional instructions, making the form easier to fill out correctly.
@@ -1817,9 +1819,9 @@ export namespace Components {
     label?: string;
   }[];
         /**
-          * Numeric value of the slider as a string, if range mode is on, the values will be a comma-separated string.
+          * Numeric value of the slider as an array of numbers. When in single mode, the value should be a an array of one number. When in range mode, the value should be an array of two numbers.
          */
-        "value": string;
+        "value": number[];
     }
     interface NvFieldtext {
         /**
@@ -2707,6 +2709,7 @@ declare global {
     interface HTMLNvCalendarElementEventMap {
         "singleDateChange": string;
         "rangeDateChange": HTMLNvCalendarElement['rangeValue'];
+        "valueChanged": string;
     }
     interface HTMLNvCalendarElement extends Components.NvCalendar, HTMLStencilElement {
         addEventListener<K extends keyof HTMLNvCalendarElementEventMap>(type: K, listener: (this: HTMLNvCalendarElement, ev: NvCalendarCustomEvent<HTMLNvCalendarElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2824,12 +2827,7 @@ declare global {
         new (): HTMLNvFieldcheckboxElement;
     };
     interface HTMLNvFielddateElementEventMap {
-        "dateChange": {
-    /**
-     * The date value.
-     */
-    value: string;
-  };
+        "valueChanged": string;
     }
     interface HTMLNvFielddateElement extends Components.NvFielddate, HTMLStencilElement {
         addEventListener<K extends keyof HTMLNvFielddateElementEventMap>(type: K, listener: (this: HTMLNvFielddateElement, ev: NvFielddateCustomEvent<HTMLNvFielddateElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2847,6 +2845,7 @@ declare global {
     };
     interface HTMLNvFielddaterangeElementEventMap {
         "dateRangeChange": HTMLNvCalendarElementEventMap['rangeDateChange'];
+        "valueChanged": string;
     }
     interface HTMLNvFielddaterangeElement extends Components.NvFielddaterange, HTMLStencilElement {
         addEventListener<K extends keyof HTMLNvFielddaterangeElementEventMap>(type: K, listener: (this: HTMLNvFielddaterangeElement, ev: NvFielddaterangeCustomEvent<HTMLNvFielddaterangeElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3019,12 +3018,8 @@ declare global {
         new (): HTMLNvFieldselectElement;
     };
     interface HTMLNvFieldsliderElementEventMap {
-        "valueChanged": string;
+        "valueChanged": number[];
     }
-    /**
-     * @deprecated [EXPERIMENTAL]
-     * @experimental This component is still in development and subject to change in future releases.
-     */
     interface HTMLNvFieldsliderElement extends Components.NvFieldslider, HTMLStencilElement {
         addEventListener<K extends keyof HTMLNvFieldsliderElementEventMap>(type: K, listener: (this: HTMLNvFieldsliderElement, ev: NvFieldsliderCustomEvent<HTMLNvFieldsliderElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3553,7 +3548,7 @@ declare namespace LocalJSX {
         "disabledDates"?: Array<string>;
         /**
           * First day of the week (0 = Sunday, 1 = Monday, etc.)
-          * @default 0
+          * @default 1
          */
         "firstDayOfWeek"?: number;
         /**
@@ -3590,6 +3585,11 @@ declare namespace LocalJSX {
           * Emitted when a single date is selected
          */
         "onSingleDateChange"?: (event: NvCalendarCustomEvent<string>) => void;
+        /**
+          * Emitted when the unified value changes
+          * @bind value
+         */
+        "onValueChanged"?: (event: NvCalendarCustomEvent<string>) => void;
         /**
           * Selected date range format: { start: ISO string, end: ISO string } ex: { start: "2025-03-15", end: "2025-03-20" }
          */
@@ -3652,6 +3652,11 @@ declare namespace LocalJSX {
          * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
          */
         "single-value"?: string;
+        /**
+          * Selected date value. For single mode: ISO date string. For range mode: comma-separated ISO date strings. Examples: - Single: "2025-03-15" - Range: "2025-03-15,2025-03-20"
+          * @default ""
+         */
+        "value"?: string;
     }
     interface NvCol {
         /**
@@ -4112,14 +4117,10 @@ declare namespace LocalJSX {
          */
         "number-of-calendars"?: number;
         /**
-          * Emits an event when the date changes.
+          * Emitted when the value changes (unified value binding).
+          * @bind value
          */
-        "onDateChange"?: (event: NvFielddateCustomEvent<{
-    /**
-     * The date value.
-     */
-    value: string;
-  }>) => void;
+        "onValueChanged"?: (event: NvFielddateCustomEvent<string>) => void;
         /**
           * Placeholder for the input field.
          */
@@ -4169,6 +4170,7 @@ declare namespace LocalJSX {
         "success"?: boolean;
         /**
           * The initial value of the input (date in string format).
+          * @bind value
          */
         "value"?: string;
     }
@@ -4274,9 +4276,14 @@ declare namespace LocalJSX {
          */
         "number-of-calendars"?: number;
         /**
-          * Emits an event when the date range changes.
+          * Emitted when the date range changes.
          */
         "onDateRangeChange"?: (event: NvFielddaterangeCustomEvent<HTMLNvCalendarElementEventMap['rangeDateChange']>) => void;
+        /**
+          * Emitted when the unified value changes
+          * @bind value
+         */
+        "onValueChanged"?: (event: NvFielddaterangeCustomEvent<string>) => void;
         /**
           * Sets both input fields as read-only.
          */
@@ -5057,10 +5064,6 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
-    /**
-     * @deprecated [EXPERIMENTAL]
-     * @experimental This component is still in development and subject to change in future releases.
-     */
     interface NvFieldslider {
         /**
           * Add helpful hints or extra information under the slider. This is where you can clarify what users should enter or provide additional instructions, making the form easier to fill out correctly.
@@ -5156,7 +5159,7 @@ declare namespace LocalJSX {
           * Emitted when the slider values change.
           * @bind value
          */
-        "onValueChanged"?: (event: NvFieldsliderCustomEvent<string>) => void;
+        "onValueChanged"?: (event: NvFieldsliderCustomEvent<number[]>) => void;
         /**
           * Allows the slider to display two thumbs, enabling users to select a continuous range between a minimum and maximum value. Ideal for use cases like filtering by price or time.
          */
@@ -5211,9 +5214,9 @@ declare namespace LocalJSX {
     label?: string;
   }[];
         /**
-          * Numeric value of the slider as a string, if range mode is on, the values will be a comma-separated string.
+          * Numeric value of the slider as an array of numbers. When in single mode, the value should be a an array of one number. When in range mode, the value should be an array of two numbers.
          */
-        "value"?: string;
+        "value"?: number[];
     }
     interface NvFieldtext {
         /**
@@ -6041,10 +6044,6 @@ declare module "@stencil/core" {
             "nv-fieldpassword": LocalJSX.NvFieldpassword & JSXBase.HTMLAttributes<HTMLNvFieldpasswordElement>;
             "nv-fieldradio": LocalJSX.NvFieldradio & JSXBase.HTMLAttributes<HTMLNvFieldradioElement>;
             "nv-fieldselect": LocalJSX.NvFieldselect & JSXBase.HTMLAttributes<HTMLNvFieldselectElement>;
-            /**
-             * @deprecated [EXPERIMENTAL]
-             * @experimental This component is still in development and subject to change in future releases.
-             */
             "nv-fieldslider": LocalJSX.NvFieldslider & JSXBase.HTMLAttributes<HTMLNvFieldsliderElement>;
             "nv-fieldtext": LocalJSX.NvFieldtext & JSXBase.HTMLAttributes<HTMLNvFieldtextElement>;
             "nv-fieldtextarea": LocalJSX.NvFieldtextarea & JSXBase.HTMLAttributes<HTMLNvFieldtextareaElement>;

package/dist/vscode-data.json

@@ -401,6 +401,10 @@
         {
           "name": "single-value",
           "description": "Selected date (ISO string format)\nex: \"2025-03-15\""
+        },
+        {
+          "name": "value",
+          "description": "Selected date value. For single mode: ISO date string. For range mode: comma-separated ISO date strings.\nExamples:\n- Single: \"2025-03-15\"\n- Range: \"2025-03-15,2025-03-20\""
         }
       ]
     },
@@ -2177,10 +2181,6 @@
         {
           "name": "success",
           "description": "Changes the slider's appearance to indicate successful input or validation."
-        },
-        {
-          "name": "value",
-          "description": "Numeric value of the slider as a string, if range mode is on, the values\nwill be a comma-separated string."
         }
       ]
     },