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

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-datagrid/nv-datagrid.d.ts

@@ -40,20 +40,6 @@ export declare class NvDatagrid {
      * @default []
      */
     readonly columns: Column[];
-    /**
-     * The data to display in the data grid.
-     * It can be passed directly as an array of objects or as a JSON string.
-     * If both `data` and `dataJson` are provided, `data` takes precedence.
-     * @example `[{ "name": "Alice", "age": 25 }, { "name": "Bob", "age": 30 }]`
-     */
-    readonly dataJson?: string;
-    /**
-     * The columns to display in the data grid.
-     * It can be passed directly as an array of objects or as a JSON string.
-     * If both `columns` and `columnsJson` are provided, `columns` takes precedence.
-     * @example `[{"header":"Name","accessor":"name"},{"header":"Age","accessor":"age"},{"header":"Email","accessor":"email"}]`
-     */
-    readonly columnsJson?: string;
     /**
      * Fallback value to be displayed when data is not available
      * @default 'N/A'
@@ -173,9 +159,7 @@ export declare class NvDatagrid {
     private getPagination;
     /****************************************************************************/
     parseColumns(newValue: Column[], oldValue?: Column[]): void;
-    parseJsonColumns(newValue: string | undefined, oldValue: Column[]): void;
     parseData(newValue: any[], oldValue?: any[]): void;
-    parseJsonData(newValue: string | undefined): void;
     handleParsedChange(): void;
     handleGlobalFilterSearchTerm(newValue: string): void;
     handlePaginationState(newValue: PaginationState, oldValue: PaginationState): void;

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

@@ -16,6 +16,10 @@ export declare class NvDatagridcolumn {
      * Whether the column need to be repeated with the template.
      */
     readonly repeatTemplate: boolean;
+    /**
+     * Defines the group header of the column.
+     */
+    readonly group?: string;
     /****************************************************************************/
     render(): any;
 }

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

@@ -11,6 +11,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
 export declare class NvFielddaterange {
     el: HTMLNvFielddaterangeElement;
     private popoverElement;
+    private calendarElement;
     private popoverId;
     /****************************************************************************/
     /**
@@ -78,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.
      */
@@ -144,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
@@ -166,7 +172,7 @@ export declare class NvFielddaterange {
      */
     private handleEndInput;
     /**
-     * Update the calendar's rangeValue property
+     * Update the calendar's rangeValue property without forcing month change
      */
     private updateCalendarValue;
     /**
@@ -186,16 +192,31 @@ 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;
+    /**
+     * Handles the reset event from the calendar's cancel button
+     * @param {CustomEvent} event - The event emitted by the calendar
+     */
+    handleDateReset(event: CustomEvent): void;
     /**
      * Handles keyboard events.
      * @param {KeyboardEvent} event - The keyboard event

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

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

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

@@ -13,6 +13,14 @@ export declare class NvFielddropdown {
     el: HTMLNvFielddropdownElement;
     private inputElement;
     private popoverElement;
+    /**
+     * Timer for debouncing input events.
+     * Private property preferred over @State as it:
+     * - Doesn't need to trigger re-renders
+     * - Is purely for internal logic
+     * - Improves performance by avoiding Stencil's reactivity system
+     */
+    private debounceTimer;
     /****************************************************************************/
     /**
      * Sets the ID for the input element and the for attribute of the associated
@@ -21,6 +29,13 @@ export declare class NvFielddropdown {
      * accessibility.
      */
     readonly inputId: string;
+    /**
+     * Defines the name attribute of the input field, which is crucial for form
+     * submission. This value is used as the key in the key-value pair sent to
+     * the server, representing the input's data in form submissions. It should be
+     * unique within the form to avoid conflicts.
+     */
+    readonly name: string;
     /**
      * Lets you define the text that explains what users should enter in the text
      * input field. It's a crucial element for making forms clear and
@@ -40,17 +55,6 @@ export declare class NvFielddropdown {
      * The placeholder is displayed only when the filterable option is enabled.
      */
     readonly placeholder: string;
-    /**
-     * Defines the name attribute of the input field, which is crucial for form
-     * submission. This value is used as the key in the key-value pair sent to
-     * the server, representing the input's data in form submissions. It should be
-     * unique within the form to avoid conflicts.
-     */
-    readonly name: string;
-    /**
-     * State of the dropdown popover.
-     */
-    open: boolean;
     /**
      * The autocomplete prop helps users fill out the input field faster by
      * suggesting entries they've used before, like their email or address.
@@ -69,6 +73,18 @@ export declare class NvFielddropdown {
      * before submitting the form.
      */
     readonly required: boolean;
+    /**
+     * Display the input field's content without allowing users to change it.
+     * Users can still click on it, select, and copy the text, but they won't be
+     * able to type or delete anything.
+     */
+    readonly readonly: boolean;
+    /**
+     * The disabled prop lets you turn off the input field so that users can't
+     * type in it. When disabled, the field is grayed out and won't respond to
+     * clicks or touches.
+     */
+    readonly disabled: boolean;
     /**
      * Alters the input field's appearance to indicate an error, helping users
      * identify fields that need correction.
@@ -82,17 +98,13 @@ export declare class NvFielddropdown {
      */
     readonly errorDescription: string;
     /**
-     * Display the input field's content without allowing users to change it.
-     * Users can still click on it, select, and copy the text, but they won't be
-     * able to type or delete anything.
+     * Defines the maximum height of the multiselect list when open.
      */
-    readonly readonly: boolean;
+    readonly maxHeight: string;
     /**
-     * The disabled prop lets you turn off the input field so that users can't
-     * type in it. When disabled, the field is grayed out and won't respond to
-     * clicks or touches.
+     * State of the dropdown popover.
      */
-    readonly disabled: boolean;
+    open: boolean;
     /**
      * The text to display when no items match the filter.
      */
@@ -126,6 +138,11 @@ export declare class NvFielddropdown {
         /** Whether this option is pre-selected */
         selected?: boolean;
     }[];
+    /**
+     * Delay in milliseconds before the search is triggered when typing in the filter input.
+     * @default 300
+     */
+    readonly debounceDelay: number;
     /**
      * Applies focus to the input field as soon as the component is mounted. This
      * is equivalent to setting the native autofocus attribute on an <input>
@@ -137,7 +154,9 @@ export declare class NvFielddropdown {
      */
     readonly fluid: boolean;
     /****************************************************************************/
-    /** The text entered by the user for filtering dropdown items. */
+    /**
+     * The text entered by the user for filtering dropdown items.
+     */
     filterText: string;
     selectedValues: Set<string>;
     /****************************************************************************/
@@ -150,13 +169,18 @@ export declare class NvFielddropdown {
      * Event emitted when an item is clicked.
      */
     dropdownItemSelected: EventEmitter<HTMLNvFielddropdownitemElementEventMap['dropdownItemSelected']>;
-    handleDropdownItemSelected(event: CustomEvent<HTMLNvFielddropdownitemElementEventMap['dropdownItemSelected']>): void;
-    handleOpenChanged(event: CustomEvent<boolean>): void;
-    watchValueHandler(newValue: typeof this.value): void;
+    /****************************************************************************/
     handleOptionsChange(newValue: typeof this.options): void;
+    watchValueHandler(newValue: typeof this.value): void;
+    /****************************************************************************/
+    handleOpenChanged(event: CustomEvent<boolean>): void;
+    handleDropdownItemSelected(event: CustomEvent<HTMLNvFielddropdownitemElementEventMap['dropdownItemSelected']>): void;
     handleBlur(event: FocusEvent): void;
     handleKeyDown(event: KeyboardEvent): void;
     /****************************************************************************/
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    /****************************************************************************/
     /**
      * Retrieves the current filter text entered by the user.
      * @returns {string} The filter text.
@@ -178,8 +202,5 @@ export declare class NvFielddropdown {
     private clearFilter;
     private updateSelectedItem;
     /****************************************************************************/
-    componentWillLoad(): void;
-    componentDidLoad(): void;
-    /****************************************************************************/
     render(): any;
 }