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

package/dist/native/{p-244f56ac.entry.js → p-fc3bea07.entry.js}

@@ -1,2 +1,2 @@
-import{r as c,h as l,a}from"./p-ab002252.js";import{c as t}from"./p-8a1a6e56.js";const d="nv-col{display:block;flex:1 1 0%;padding-left:calc(var(--spacing-4) / 2);padding-right:calc(var(--spacing-4) / 2)}nv-col[class*=w-]{flex:none}nv-col.w-1\\/12{width:calc(100% * 1 / 12)}nv-col.w-2\\/12{width:calc(100% * 2 / 12)}nv-col.w-3\\/12{width:calc(100% * 3 / 12)}nv-col.w-4\\/12{width:calc(100% * 4 / 12)}nv-col.w-5\\/12{width:calc(100% * 5 / 12)}nv-col.w-6\\/12{width:calc(100% * 6 / 12)}nv-col.w-7\\/12{width:calc(100% * 7 / 12)}nv-col.w-8\\/12{width:calc(100% * 8 / 12)}nv-col.w-9\\/12{width:calc(100% * 9 / 12)}nv-col.w-10\\/12{width:calc(100% * 10 / 12)}nv-col.w-11\\/12{width:calc(100% * 11 / 12)}nv-col.w-12\\/12{width:calc(100% * 12 / 12)}";const i=d;const n=class{constructor(l){c(this,l)}getColSize(){if(this.size){if(this.size<1||this.size>12)return;return`w-${this.size}/12`}}render(){return l(a,{key:"8f7112dc8ce8896d9e7265741f06b7449dd508df",class:t(this.getColSize())},l("slot",{key:"3bedff11752d04db2615a5f26d4d910d95dee76c"}))}};n.style=i;export{n as nv_col};
-//# sourceMappingURL=p-244f56ac.entry.js.map
+import{r as c,h as l,a}from"./p-711a7778.js";import{c as t}from"./p-8a1a6e56.js";const d="nv-col{display:block;flex:1 1 0%;padding-left:calc(var(--spacing-4) / 2);padding-right:calc(var(--spacing-4) / 2)}nv-col[class*=w-]{flex:none}nv-col.w-1\\/12{width:calc(100% * 1 / 12)}nv-col.w-2\\/12{width:calc(100% * 2 / 12)}nv-col.w-3\\/12{width:calc(100% * 3 / 12)}nv-col.w-4\\/12{width:calc(100% * 4 / 12)}nv-col.w-5\\/12{width:calc(100% * 5 / 12)}nv-col.w-6\\/12{width:calc(100% * 6 / 12)}nv-col.w-7\\/12{width:calc(100% * 7 / 12)}nv-col.w-8\\/12{width:calc(100% * 8 / 12)}nv-col.w-9\\/12{width:calc(100% * 9 / 12)}nv-col.w-10\\/12{width:calc(100% * 10 / 12)}nv-col.w-11\\/12{width:calc(100% * 11 / 12)}nv-col.w-12\\/12{width:calc(100% * 12 / 12)}";const i=d;const n=class{constructor(l){c(this,l)}getColSize(){if(this.size){if(this.size<1||this.size>12)return;return`w-${this.size}/12`}}render(){return l(a,{key:"8f7112dc8ce8896d9e7265741f06b7449dd508df",class:t(this.getColSize())},l("slot",{key:"3bedff11752d04db2615a5f26d4d910d95dee76c"}))}};n.style=i;export{n as nv_col};
+//# sourceMappingURL=p-fc3bea07.entry.js.map

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

@@ -62,7 +62,7 @@ export declare class NvAlert {
     /**
      * Emitted when the close button is clicked.
      */
-    closeClicked: EventEmitter<MouseEvent>;
+    closeClicked: EventEmitter<void>;
     /****************************************************************************/
     /**
      * Used for 2 way binding with the hidden property.

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

@@ -23,7 +23,11 @@ export declare class NvBadge {
     readonly iconLocation: 'left' | 'right';
     /****************************************************************************/
     /**
-     * The color of the badge. Use a string between 1 to 10
+     * The color of the badge.
+     * deprecated Use status values or named colors instead.
+     * Use a string between 1 to 10
+     * or one of the status values: error, information, neutral, success, warning
+     * or one of the color names: amber, orange, turquoise, crimson, lime
      */
     readonly color?: string;
     /**
@@ -48,11 +52,16 @@ export declare class NvBadge {
      * Useful for externally controlled component behavior.
      */
     readonly preventAutoClose: boolean;
+    /**
+     * When true, the badge will only display an icon without label.
+     * The label will be visually hidden but still accessible for screen readers.
+     */
+    readonly isIconOnly?: boolean;
     /****************************************************************************/
     /**
      * Emitted when the badge is dismissed.
      */
-    closeClicked: EventEmitter<MouseEvent>;
+    closeClicked: EventEmitter<void>;
     /**
      * Emits when the 'hidden' prop changes, reflecting a change in visibility.
      * Passes hidden value to the detail.
@@ -86,7 +95,6 @@ export declare class NvBadge {
     /****************************************************************************/
     /**
      * Handles the close button click.
-     * @param {MouseEvent} originalEvent - The original event.
      */
     private readonly handleClose;
     /****************************************************************************/

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

@@ -1,5 +1,4 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { DateRange } from '../../interfaces/dateRange';
 /**
  * @slot default - Child content of the component.
  * @slot actions - Child content of the component.
@@ -27,7 +26,12 @@ export declare class NvCalendar {
      * format: { start: ISO string, end: ISO string }
      * ex: { start: "2025-03-15", end: "2025-03-20" }
      */
-    rangeValue: string;
+    rangeValue: {
+        /** ISO string for start date */
+        start: string;
+        /** ISO string for end date */
+        end: string;
+    };
     /**
      * Minimum date for selection (ISO string format, ex: "2025-01-01")
      */
@@ -36,15 +40,17 @@ export declare class NvCalendar {
      * Maximum date for selection (ISO string format, ex: "2025-12-31")
      */
     readonly max?: string;
-    /** Disabled dates (ISO string array)
-     * @default '[]'
+    /**
+     * Disabled dates (ISO string array)
      */
-    readonly disabledDates: string;
-    /** Locale for date formatting
+    readonly disabledDates: Array<string>;
+    /**
+     * Locale for date formatting
      * @default 'en-BE'
      */
     readonly locale: string;
-    /** Date format (ex: 'YYYY-MM-DD', 'DD-MM-YYYY', etc.)
+    /**
+     * Date format (ex: 'YYYY-MM-DD', 'DD-MM-YYYY', etc.)
      * @default 'YYYY-MM-DD'
      * @note If the date format is in UTC mode, the date will be displayed in UTC time.
      * @note If the date format is not in UTC mode, the date will be displayed in the local time.
@@ -62,32 +68,29 @@ export declare class NvCalendar {
     readonly selectionType: 'single' | 'range';
     /**
      * Show action buttons
-     * @default false
      */
     readonly showActions: boolean;
     /**
      * Custom actions to display in the footer
-     * JSON array of objects with the following properties:
-     * - label: string
-     * - onClick: function
-     * @default '[]'
      */
-    readonly shortcuts: string;
+    readonly shortcuts: {
+        /** Label of the shortcut */
+        label: string;
+        /** Selected date value for single selection mode */
+        singleValue?: string;
+        /** Date range values for range selection mode */
+        rangeValue?: HTMLNvCalendarElement['rangeValue'];
+    }[];
     /**
      * Show week numbers
-     * @default true
      */
     readonly showWeekNumbers: boolean;
     /** Cache for parsed disabled dates */
     private parsedDisabledDates;
     /****************************************************************************/
-    /** Current date */
-    currentDate: Date;
-    /** Selected date */
+    currentDate: Date | null;
     selectedDate: Date | null;
-    /** Start date */
     startDate: Date | null;
-    /** End date */
     endDate: Date | null;
     /** List of formatted months for the selector */
     private months;
@@ -99,10 +102,56 @@ export declare class NvCalendar {
     /**
      * Emitted when a date range is selected
      */
-    rangeDateChange: EventEmitter<DateRange>;
+    rangeDateChange: EventEmitter<HTMLNvCalendarElement['rangeValue']>;
+    /****************************************************************************/
+    /**
+     * Watches the changes of the number of calendars
+     * @param {number} newValue - New number of calendars
+     */
+    validateNumberOfCalendars(newValue: number): void;
+    /**
+     * Watches the changes of the selected date range
+     * @param {Object} newValue - New rangeValue value
+     * @param {string} newValue.start - Start date
+     * @param {string} newValue.end - End date
+     */
+    onRangeValueChange(newValue: typeof this.rangeValue): void;
+    /**
+     * Watches the changes of the disabled dates
+     * @description Watches the changes of the disabled dates
+     */
+    handleDisabledDatesChange(): void;
+    /**
+     * Watches the changes of the single value
+     * @param {string} newValue - New single value
+     * @param {string} oldValue - Old single value
+     */
+    onSingleValueChange(newValue: string, oldValue: string): void;
     /****************************************************************************/
     componentWillLoad(): void;
     /****************************************************************************/
+    /**
+     * Checks if shortcuts are visible
+     * @returns {boolean} true if shortcuts are visible
+     */
+    private get hasShortcuts();
+    /**
+     * Checks if actions are visible
+     * @returns {boolean} true if actions are visible
+     */
+    private get hasActions();
+    /**
+     * Checks if the date format is in UTC mode
+     * @returns {boolean} true if the date format is in UTC mode
+     */
+    private get isUTCMode();
+    /**
+     * Validates and processes a date range, warning if start is after end
+     * @param {string} startDateStr - Start date in ISO string format
+     * @param {string} endDateStr - End date in ISO string format
+     * @returns {object} Object containing the validated start and end dates
+     */
+    private validateDateRange;
     /**
      * Change the displayed month
      * @param {number} offset - Month offset (-1 for previous, 1 for next)
@@ -123,12 +172,6 @@ export declare class NvCalendar {
      * @param {Date} date - Selected date
      */
     private handleRangeSelection;
-    /**
-     * Calculates the ISO week number
-     * @param {Date} date - Date to calculate
-     * @returns {number} Week number
-     */
-    private getWeekNumber;
     /**
      * Checks if a date is disabled.
      * Disabled if:
@@ -188,81 +231,11 @@ export declare class NvCalendar {
      * @returns {boolean} true if the date is today
      */
     private isToday;
-    /**
-     * Watches the changes of the number of calendars
-     * @watch numberOfCalendars
-     * @param {number} newValue - New number of calendars
-     */
-    validateNumberOfCalendars(newValue: number): void;
-    /**
-     * Watches the changes of the selected date range
-     * @watch rangeValue
-     * @param {Object} newValue - New rangeValue value
-     * @param {string} newValue.start - Start date
-     * @param {string} newValue.end - End date
-     */
-    onRangeValueChange(newValue: string): void;
-    /**
-     * Watches the changes of the disabled dates
-     * @watch disabledDates
-     * @description Watches the changes of the disabled dates
-     */
-    handleDisabledDatesChange(): void;
-    /**
-     * Watches the changes of the single value
-     * @watch singleValue
-     * @param {string} newValue - New single value
-     * @param {string} oldValue - Old single value
-     */
-    onSingleValueChange(newValue: string, oldValue: string): void;
-    /**
-     * Convert a date string/Date to a Date without timezone offset
-     * @param {string | Date} dateInput - Date under string or Date object form
-     * @returns {Date} Date in Date form without timezone offset
-     */
-    private parseDate;
-    /**
-     * Checks if the date format is in UTC mode
-     * @returns {boolean} true if the date format is in UTC mode
-     */
-    private get isUTCMode();
-    /**
-     * Checks if the date format is ISO 8601
-     * @returns {boolean} true if the format is ISO 8601
-     */
-    private get isISO8601Format();
-    /**
-     * Formats a date to a string according to the format
-     * @param {Date} date - Date to format
-     * @returns {string} Formatted date
-     */
-    private formatDate;
     /**
      * Parse and cache the disabled dates
      * @description Parse and cache the disabled dates
      */
     private parseDisabledDates;
-    /**
-     * Checks if two dates are identical
-     * @param {Date | null} date1 - First date
-     * @param {Date | null} date2 - Second date
-     * @returns {boolean} true if the dates are identical
-     */
-    private isSameDate;
-    /**
-     * Checks if a date is identical or after another date
-     * @param {Date} date - Date to check
-     * @param {Date} compareDate - Reference date
-     * @returns {boolean} true if `date` >= `compareDate`
-     */
-    private isSameOrAfter;
-    /**
-     * Checks if a date is identical or before another date
-     * @param {Date} date - Date to check
-     * @param {Date} compareDate - Reference date
-     * @returns {boolean} true if `date` <= `compareDate`
-     */
-    private isSameOrBefore;
     /**
      * Applies a shortcut selection
      * @param {Object} shortcut - Shortcut to apply
@@ -274,14 +247,10 @@ export declare class NvCalendar {
      */
     private applyShortcut;
     /**
-     * Method to force the complete calendar update (and fix the persistent hover problem)
+     * Method to force the complete calendar update
      * @param {Date} newDate - Date to force
      */
     private forceCalendarUpdate;
-    /**
-     * Function to reset the touch effect (Mobile fix)
-     */
-    private clearTouchState;
     /**
      * Handles month change with an offset
      * @param {number} direction - Direction (-1 for previous, 1 for next)
@@ -325,17 +294,6 @@ export declare class NvCalendar {
      * @returns {Function} Week selection handler
      */
     private getWeekSelectionHandler;
-    private parsedShortcuts;
-    /**
-     * Checks if shortcuts are visible
-     * @returns {boolean} true if shortcuts are visible
-     */
-    private get hasShortcuts();
-    /**
-     * Checks if actions are visible
-     * @returns {boolean} true if actions are visible
-     */
-    private get hasActions();
     /**
      * Resets the current selection
      */

package/dist/types/components/nv-calendar/nv-calendar.utils.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Formats a date to a string according to the format
+ * @param {Date} date - Date to format
+ * @returns {string} Formatted date
+ * @param {Object} options - Additional options
+ * @param {string} options.dateFormat - Date format (ex: 'YYYY-MM-DD', 'DD-MM-YYYY', etc.)
+ */
+export declare function formatDate(date: Date, options: {
+    /** Date format (ex: 'YYYY-MM-DD', 'DD-MM-YYYY', etc.) */
+    dateFormat: string;
+}): string;
+/**
+ * Checks if two dates are identical
+ * @param {Date | null} date - First date
+ * @param {Date | null} compareDate - Second date
+ * @param {Object} options - Additional options
+ * @param {boolean} options.isUTCMode - Whether the dates are in UTC mode
+ * @returns {boolean} true if the dates are identical
+ */
+export declare function isSameDate(date: Date | null, compareDate: Date | null, options: {
+    /** Whether the dates are in UTC mode */
+    isUTCMode: boolean;
+}): boolean;
+/**
+ * Checks if a date is identical or before another date
+ * @param {Date} date - Date to check
+ * @param {Date} compareDate - Reference date
+ * @param {Object} options - Additional options
+ * @param {boolean} options.isUTCMode - Whether the dates are in UTC mode
+ * @returns {boolean} true if `date` <= `compareDate`
+ */
+export declare function isSameOrBefore(date: Date, compareDate: Date, options: {
+    /** Whether the dates are in UTC mode */
+    isUTCMode: boolean;
+}): boolean;
+/**
+ * Checks if a date is identical or after another date
+ * @param {Date} date - Date to check
+ * @param {Date} compareDate - Reference date
+ * @param {Object} options - Additional options
+ * @param {boolean} options.isUTCMode - Whether the dates are in UTC mode
+ * @returns {boolean} true if `date` >= `compareDate`
+ */
+export declare function isSameOrAfter(date: Date, compareDate: Date, options: {
+    /** Whether the dates are in UTC mode */
+    isUTCMode: boolean;
+}): boolean;
+/**
+ * Calculates the ISO week number
+ * @param {Date} date - Date to calculate
+ * @returns {number} Week number
+ */
+export declare function getWeekNumber(date: Date): number;
+/**
+ * Convert a date string/Date to a Date without timezone offset
+ * @param {string | Date} dateInput - Date under string or Date object form
+ * @param {string} dateFormat - Date format (ex: 'YYYY-MM-DD', 'DD-MM-YYYY', etc.)
+ * @returns {Date} Date in Date form without timezone offset
+ */
+export declare function parseDate(dateInput: string | Date, dateFormat: string): Date | null;

package/dist/types/components/nv-calendar/test/nv-calendar.utils.test.d.ts

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

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

@@ -1,15 +1,12 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { PaginationState } from '@tanstack/table-core';
+import { PaginationState, SortingState, RowSelectionState } from '@tanstack/table-core';
 import { Column } from '../../interfaces/Column';
-import { ActionEvent } from '../../interfaces/actionEvent';
+import { GlobalFilterPosition } from '../../utils/constants';
 /**
  * A flexible data grid component powered by `@tanstack/table-core`.
  * @slot default - Use this slot to insert HTML into the data grid content.
  * @slot before - Use this slot to insert HTML before the data grid.
  * @slot after - Use this slot to insert HTML after the data grid.
- *
- * @deprecated [EXPERIMENTAL]
- * @experimental - This component is still under development and is not ready for use.
  */
 export declare class NvDatagrid {
     el: HTMLNvDatagridElement;
@@ -23,6 +20,8 @@ export declare class NvDatagrid {
     private globalFilterSearchTerm;
     private columnData;
     private paginationState;
+    private sorting;
+    private rowSelectionState;
     /****************************************************************************/
     /**
      * The data to display in the data grid.
@@ -41,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'
@@ -70,6 +55,12 @@ export declare class NvDatagrid {
      * @default 'No data or columns available to display.'
      */
     readonly noColumnsNoDataMessage: string;
+    /**
+     * Whether to automatically generate columns if none are provided.
+     * If columns are explicitly set, this property is ignored.
+     * @default false
+     */
+    readonly autoGenerateColumns: boolean;
     /**
      * Whether to enable global filtering for the data grid.
      * This allows users to search across all columns for a specific value.
@@ -79,11 +70,9 @@ export declare class NvDatagrid {
      */
     readonly enableGlobalFilter: boolean;
     /**
-     * Whether to automatically generate columns if none are provided.
-     * If columns are explicitly set, this property is ignored.
-     * @default false
+     * Position the global filter input field
      */
-    readonly autoGenerateColumns: boolean;
+    readonly globalFilterPosition: `${GlobalFilterPosition}`;
     /**
      * Whether to enable pagination for the data grid.
      * @default false
@@ -91,6 +80,7 @@ export declare class NvDatagrid {
     readonly enablePagination: boolean;
     /**
      * The number of rows to display per page.
+     * If the number is not present in the property pageSizes it takes the first of the list.
      * @default 10
      */
     readonly pageSize: number;
@@ -99,6 +89,15 @@ export declare class NvDatagrid {
      * @default [10, 20, 30, 40, 50]
      */
     readonly pageSizes: number[];
+    /**
+     * Whether to enable sorting for the data grid.
+     * @default false
+     */
+    readonly enableSorting: boolean;
+    /**
+     * Whether to enable row selection for the data grid.
+     */
+    readonly enableRowSelection: boolean;
     /****************************************************************************/
     /**
      * Caches templates for cells and headers upfront to improve performance.
@@ -132,6 +131,8 @@ export declare class NvDatagrid {
      *                     If the filter value is empty, all rows are included.
      */
     private globalFilterFn;
+    private createIconSpan;
+    private createIndeterminateCheckbox;
     private generateColumns;
     private getTableData;
     private renderTemplate;
@@ -150,21 +151,41 @@ export declare class NvDatagrid {
     private readonly flexRender;
     private readonly handlePageIndexChange;
     private readonly handlePageSizeChange;
+    private readonly handleSortingClick;
+    private readonly getSortTitle;
+    private getArrowSorting;
+    private getHeaderCell;
+    private createSortingClickHandler;
+    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;
+    handleSorting(newValue: SortingState): void;
+    handlePageSize(newValue: number): void;
+    handleRowSelectionState(newValue: RowSelectionState, oldValue: RowSelectionState): void;
     /****************************************************************************/
     componentWillLoad(): void;
     /****************************************************************************/
     /**
      * Emitted when an action is triggered on a cell.
      */
-    action: EventEmitter<ActionEvent>;
+    action: EventEmitter<{
+        /**
+         * Key action to be performed
+         */
+        keyAction: string;
+        /**
+         * Details of the action to be performed
+         */
+        details: any;
+    }>;
+    /**
+     * Emitted when the selection of the rows are changed.
+     */
+    selectedRows: EventEmitter<any[]>;
     /****************************************************************************/
     render(): any;
 }

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

@@ -84,6 +84,10 @@ export declare class NvDialog {
      */
     private allowScroll;
     private ensureFormId;
+    /**
+     * Checks for and sets up form ID if a form is present
+     */
+    private checkForForm;
     /****************************************************************************/
     /**
      * Emitted when the dialog is closing in order to allow for cleanup, data-capture, etc.

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

@@ -115,12 +115,8 @@ export declare class NvFielddate {
     readonly showActions: boolean;
     /**
      * Custom actions to display in the footer
-     * JSON array of objects with the following properties:
-     * - label: string
-     * - onClick: function
-     * @default '[]'
      */
-    readonly shortcuts: string;
+    readonly shortcuts: HTMLNvCalendarElement['shortcuts'];
     /**
      * Show week numbers
      * @default true
@@ -128,9 +124,12 @@ export declare class NvFielddate {
     readonly showWeekNumbers: boolean;
     /**
      * Disabled dates ISO string array
-     * @default '[]'
      */
-    readonly disabledDates: string;
+    readonly disabledDates: Array<string>;
+    /**
+     * Allows the field to stretch and fill the entire width of its container.
+     */
+    readonly fluid: boolean;
     /****************************************************************************/
     /**
      * Converts the nv-calendar date format to the format expected by Inputmask.