@nova-design-system/nova-webcomponents 3.0.0-beta.38 → 3.0.0-beta.39

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

@@ -0,0 +1,383 @@
+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.
+ */
+export declare class NvCalendar {
+    el: HTMLNvCalendarElement;
+    /****************************************************************************/
+    /**
+     * First day of the week (0 = Sunday, 1 = Monday, etc.)
+     * @default 0
+     */
+    readonly firstDayOfWeek: number;
+    /**
+     * Number of calendars to display
+     * @default 1
+     */
+    numberOfCalendars: number;
+    /**
+     * Selected date (ISO string format)
+     * ex: "2025-03-15"
+     */
+    singleValue: string;
+    /**
+     * Selected date range
+     * format: { start: ISO string, end: ISO string }
+     * ex: { start: "2025-03-15", end: "2025-03-20" }
+     */
+    rangeValue: string;
+    /**
+     * Minimum date for selection (ISO string format, ex: "2025-01-01")
+     */
+    readonly min?: string;
+    /**
+     * Maximum date for selection (ISO string format, ex: "2025-12-31")
+     */
+    readonly max?: string;
+    /** Disabled dates (ISO string array)
+     * @default '[]'
+     */
+    readonly disabledDates: string;
+    /** Locale for date formatting
+     * @default 'en-BE'
+     */
+    readonly locale: string;
+    /** 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.
+     */
+    readonly dateFormat: string;
+    /**
+     * Footer placement
+     * @default 'bottom'
+     */
+    readonly shortcutsPlacement: 'bottom' | 'left' | 'right';
+    /**
+     * Selection type (single date or date range)
+     * @default 'single'
+     */
+    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;
+    /**
+     * Show week numbers
+     * @default true
+     */
+    readonly showWeekNumbers: boolean;
+    /** Cache for parsed disabled dates */
+    private parsedDisabledDates;
+    /****************************************************************************/
+    /** Current date */
+    currentDate: Date;
+    /** Selected date */
+    selectedDate: Date | null;
+    /** Start date */
+    startDate: Date | null;
+    /** End date */
+    endDate: Date | null;
+    /** List of formatted months for the selector */
+    private months;
+    /****************************************************************************/
+    /**
+     * Emitted when a single date is selected
+     */
+    singleDateChange: EventEmitter<string>;
+    /**
+     * Emitted when a date range is selected
+     */
+    rangeDateChange: EventEmitter<DateRange>;
+    /****************************************************************************/
+    componentWillLoad(): void;
+    /****************************************************************************/
+    /**
+     * Change the displayed month
+     * @param {number} offset - Month offset (-1 for previous, 1 for next)
+     * @param {number} calendarOffset - Month offset for the calendar (0 by default)
+     */
+    private changeMonth;
+    /**
+     * Handles date selection based on the mode
+     * @param {Date} date - Selected date
+     */
+    private handleDateSelection;
+    /**
+     * Handles single date selection
+     * @param {Date} date - Selected date
+     */
+    private handleSingleSelection;
+    /**
+     * Handles range date selection
+     * @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:
+     * - The date is before min (if defined)
+     * - The date is after max (if defined)
+     * - The date is in the disabledDates array
+     * @param {Date} date - Date to check
+     * @returns {boolean} true if the date is disabled
+     */
+    private isDateDisabled;
+    /**
+     * Checks if a date is in the selected range
+     * @param {Date} date - Date to check
+     * @returns {boolean} true if the date is in the range
+     */
+    private isDateInRange;
+    /**
+     * Retrieves the localized day names
+     * @returns {string[]} Array of short day names
+     */
+    private getDayNames;
+    /**
+     * Generates the days of the current month
+     * @param {number} offset - Month offset (0 by default)
+     * @param {number} totalCalendars - Number of calendars to display (1 by default)
+     * @returns {Array<{ dayOfMonth: number | null, date: Date | null, isSelected: boolean, isDisabled: boolean }>} Array of formatted days
+     */
+    private getDaysInMonth;
+    /** Initializes the list of formatted months according to the locale */
+    private initializeMonths;
+    /**
+     * Retrieves the localized abbreviation for "week"
+     * @returns {string} Localized abbreviation for "week"
+     */
+    private getLocalizedWeekText;
+    /**
+     * Handles month change in the selector
+     * @param {Event} event - Month change event
+     * @param {number} calendarOffset - Calendar offset (0 by default)
+     */
+    private handleMonthChange;
+    /**
+     * Handles year change in the numeric entry
+     * @param {Event} event - Year change event
+     * @param {number} calendarOffset - Calendar offset (0 by default)
+     */
+    private handleYearChange;
+    /**
+     * Handles week selection
+     * @param {Date[]} weekDays - Selected week days
+     * @param {number} calendarIndex - Calendar index from which the selection is made
+     */
+    private handleWeekSelection;
+    /**
+     * Checks if a date corresponds to today
+     * @param {Date} date - Date to check
+     * @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;
+    /**
+     * 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;
+    /**
+     * 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
+     * @param {string | Date} shortcut.singleValue - Selected date value
+     * @param {Object} shortcut.rangeValue - Start and end date values
+     * @param {string | Date} shortcut.rangeValue.start - Start date value
+     * @param {string | Date} shortcut.rangeValue.end - End date value
+     * @param {string} shortcut.label - Label
+     */
+    private applyShortcut;
+    /**
+     * Method to force the complete calendar update (and fix the persistent hover problem)
+     * @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)
+     * @param {number} offset - Month offset (0 by default)
+     * @returns {Function} Change month handler
+     */
+    private getChangeMonthHandler;
+    /**
+     * Handles month change from an event (ex: dropdown)
+     * @param {number} offset - Month offset (0 by default)
+     * @returns {Function} Change month handler
+     */
+    private getHandleMonthChange;
+    /**
+     * Handles year change from an event (ex: dropdown)
+     * @param {number} offset - Year offset (0 by default)
+     * @returns {Function} Change year handler
+     */
+    private getHandleYearChange;
+    /**
+     * Handles day click
+     * @param {Date} date - Date to handle
+     * @param {boolean} isDisabled - Whether the date is disabled
+     * @returns {Function} Day click handler
+     */
+    private getDayClickHandler;
+    /**
+     * Handles shortcut selection
+     * @param {Object} shortcut - Shortcut to handle
+     * @param {string | Date} shortcut.singleValue - Selected date value
+     * @param {Object} shortcut.rangeValue - Start and end date values
+     * @param {string | Date} shortcut.rangeValue.start - Start date value
+     * @param {string | Date} shortcut.rangeValue.end - End date value
+     * @param {string} shortcut.label - Label
+     * @returns {Function} Shortcut selection handler
+     */
+    private getShortcutHandler;
+    /**
+     * Handles week selection
+     * @param {Date[]} dates - Dates to handle
+     * @param {number} index - Calendar index
+     * @returns {Function} Week selection handler
+     */
+    private getWeekSelectionHandler;
+    private parsedShortcuts;
+    /**
+     * 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 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
+     */
+    private resetSelection;
+    /**
+     * Confirms the current selection
+     */
+    private confirmSelection;
+    /****************************************************************************/
+    /**
+     * Renders the header
+     * @param {number} offset - Month offset
+     * @param {number} index - Calendar index
+     * @returns {JSX.Element} Header
+     * @description Renders the header of the calendar
+     */
+    private renderHeader;
+    /**
+     * Renders the week numbers
+     * @param {Array<{date: Date}>} weeks - Weeks to render
+     * @param {number} index - Calendar index
+     * @returns {JSX.Element} Week numbers
+     * @description Renders the week numbers of the calendar
+     */
+    private renderWeekNumbers;
+    private renderDaysGrid;
+    /**
+     * Renders the calendar
+     * @param {number} index - Calendar index
+     * @param {number} offset - Month offset
+     * @returns {JSX.Element} Calendar
+     * @description Renders the calendar of the calendar
+     */
+    private renderCalendar;
+    /**
+     * Renders the shortcuts
+     * @returns {JSX.Element} Shortcuts
+     * @description Renders the shortcuts of the calendar
+     */
+    private renderShortcuts;
+    /**
+     * Renders the actions
+     * @returns {JSX.Element} Actions
+     * @description Renders the actions of the calendar
+     * @slot actions - Child content of the component.
+     */
+    private renderActions;
+    /**
+     * Renders the datepicker
+     * @returns {JSX.Element} Datepicker
+     * @description Renders the datepicker of the calendar
+     * @slot default - Child content of the component.
+     */
+    render(): any;
+}

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

@@ -0,0 +1,4 @@
+import type { NovaDocs } from '../../nova-docs';
+import { Components } from '../../components';
+declare const NvCalendarDocs: NovaDocs<Components.NvCalendar>;
+export default NvCalendarDocs;

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

@@ -97,6 +97,12 @@ export declare class NvFieldcheckbox {
      * form submission.
      */
     readonly required: boolean;
+    /**
+     * 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>
+     * element.
+     */
+    readonly autofocus: boolean;
     /****************************************************************************/
     /**
      * Emits when the checked state changes.

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

@@ -1,6 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { TextInputAutocomplete } from '../../utils/constants';
-import { DropdownItemSelectedEventDetail } from '../nv-fielddropdownitem/DropdownItemSelectedEventDetail';
 /**
  * @slot content - Use a <ul></ul> tag for the slot, and place <nv-dropdownitem> elements inside.
  * @slot leading-input - Content to be placed before the input text, within the input container.
@@ -10,7 +9,7 @@ import { DropdownItemSelectedEventDetail } from '../nv-fielddropdownitem/Dropdow
  * @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.
  */
-export declare class NVFieldDropDown {
+export declare class NvFielddropdown {
     el: HTMLNvFielddropdownElement;
     private inputElement;
     private popoverElement;
@@ -97,23 +96,38 @@ export declare class NVFieldDropDown {
     /**
      * The text to display when no items match the filter.
      */
-    readonly emptyresult: string;
-    /**
-     * The text entered by the user for filtering dropdown items.
-     */
-    filterText: string;
+    readonly emptyResult: string;
     /**
      * Enables or disables the filtering feature for the dropdown items.
      */
     filterable: boolean;
-    isFilterable: boolean;
-    selectedValues: Set<string>;
     /**
-     * List of options available in the dropdown.
-     * @description The options are passed as a JSON string.
-     * @example options='[{"label": "Option 1", "value": "option1", "selected": true}, {"label": "Option 2", "value": "option2"}]'
+     * List of options available in the dropdown. The options are passed as a JSON
+     * string.
+     *
+     * @example
+     * options=[{
+     *  "label": "Option 1",
+     *  "value": "option1",
+     *  "selected": true
+     * },
+     * {
+     *  "label": "Option 2",
+     *  "value": "option2"
+     * }]
      */
     readonly options?: string;
+    /**
+     * 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>
+     * element.
+     */
+    readonly autofocus: boolean;
+    /****************************************************************************/
+    /** The text entered by the user for filtering dropdown items. */
+    filterText: string;
+    isFilterable: boolean;
+    selectedValues: Set<string>;
     /**
      * Options configuration for the dropdown items.
      */
@@ -128,85 +142,54 @@ export declare class NVFieldDropDown {
         selected?: boolean;
     }>;
     /****************************************************************************/
-    /**
-     * Event emitted when an item is selected.
-     */
-    dropdownItemSelected: EventEmitter<DropdownItemSelectedEventDetail>;
-    handleItemSelected(event: CustomEvent<DropdownItemSelectedEventDetail>): void;
     /**
      * Emitted when the input value changes.
      * @bind value
      */
     valueChanged: EventEmitter<string>;
+    /**
+     * Event emitted when an item is clicked.
+     */
+    dropdownItemSelected: EventEmitter<HTMLNvFielddropdownitemElementEventMap['dropdownItemSelected']>;
+    handleDropdownItemSelected(event: CustomEvent<HTMLNvFielddropdownitemElementEventMap['dropdownItemSelected']>): void;
     handleOpenChanged(event: CustomEvent<boolean>): void;
     watchFilterableHandler(newValue: boolean): void;
     watchValueHandler(newValue: string): void;
-    /**
-     * Watch for changes in the options prop
-     * @param {string} newValue - The new value of the options prop
-     */
     handleOptionsChange(newValue: string): void;
+    handleBlur(event: FocusEvent): void;
+    handleKeyDown(event: KeyboardEvent): void;
     /****************************************************************************/
-    componentWillLoad(): void;
-    componentDidLoad(): void;
     /**
-     * Subscribe to click outside event.
+     * Retrieves the current filter text entered by the user.
+     * @returns {string} The filter text.
      */
-    connectedCallback(): void;
+    getFilterText(): Promise<string>;
     /**
-     * Set the initial selection based on the current value and update the inputElement value.
+     * Set the initial selection based on the current value and update the
+     * inputElement value.
      */
     private setInitialSelection;
-    /**
-     * Unsubscribe from click outside event.
-     */
-    disconnectedCallback(): void;
-    /**
-     * Handle click on the input container.
-     * @param {MouseEvent} event - The click event.
-     */
     private handleInputContainerClick;
-    /**
-     * Handle input change.
-     * @param {Event} event - The input event.
-     */
     private handleInput;
     /**
      * Filter dropdown items based on the text entered by the user.
      * If no items are found, display a message indicating no results.
      */
     private filterItems;
-    /**
-     * Reset the filter and make all items visible.
-     */
+    /** Reset the filter and make all items visible. */
     private resetFilter;
-    /**
-     * Retrieves the current filter text entered by the user.
-     * @returns {string} The filter text.
-     */
-    getFilterText(): Promise<string>;
-    /**
-     * Handle click outside the component.
-     * @param {MouseEvent} event - The click event.
-     */
     private handleClickOutside;
-    /**
-     * Handle input focus.
-     */
     private handleInputFocus;
-    /**
-     * Handle input blur.
-     */
-    private handleInputBlur;
-    /**
-     * Toggle the dropdown popover.
-     * @returns {void}
-     */
     private togglePopover;
-    handleKeyDown(event: KeyboardEvent): void;
     private updateHighlightedItem;
     private focusFirstItem;
     private updateSelectedItem;
+    private getSelectedLabel;
+    /****************************************************************************/
+    connectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
     /****************************************************************************/
     render(): any;
 }

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

@@ -1,10 +1,10 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { DropdownItemSelectedEventDetail } from './DropdownItemSelectedEventDetail';
 /**
  * @slot default - The content to be displayed inside the dropdown item.
  */
 export declare class NvFielddropdownitem {
     el: HTMLNvFielddropdownitemElement;
+    private composed;
     /****************************************************************************/
     /**
      * Disables the item, preventing any user interaction.
@@ -15,26 +15,40 @@ export declare class NvFielddropdownitem {
      */
     selected: boolean;
     /**
-     * Value associated with the item.
+     * Value associated with the item. This is recommended and required for proper
+     * form management.
      */
-    readonly value?: string;
+    value?: string;
     /**
-     * Label used as the value for the default layout.
+     * Specifies the text label for the dropdown item.
+     *
+     * When no default slot is provided, this label is rendered as the item's
+     * visible text. If the default slot is supplied, the label isn’t directly
+     * displayed but is used as the selected text (on the dropdown trigger). If
+     * no label is explicitly set, the component will automatically derive the
+     * label from the text content of the default slot.
      */
     readonly label?: string;
     /****************************************************************************/
     /**
-     * Event emitted when an item is clicked.
+     * Event emitted when the dropdown item is selected.
      */
-    itemSelected: EventEmitter<DropdownItemSelectedEventDetail>;
-    private handleClick;
+    dropdownItemSelected: EventEmitter<{
+        /** The value associated with the item. */
+        label?: string;
+        /** The value associated with the item. */
+        value: string;
+        /** Indicates if the item is selected. */
+        selected: boolean;
+        /** Disables the item, preventing any user interaction. */
+        disabled: boolean;
+    }>;
+    handleKeyDown(event: KeyboardEvent): void;
     /****************************************************************************/
-    /**
-     * Utility function to check if a string is null, empty, or contains only whitespace.
-     * @param {string | null | undefined} input - The string to check.
-     * @returns {boolean} - Returns true if the string is null, empty, or contains only whitespace; otherwise, false.
-     */
-    private isNullOrEmptyOrWhitespace;
+    private handleSelected;
+    /****************************************************************************/
+    componentWillLoad(): void;
+    componentDidLoad(): void;
     /****************************************************************************/
     render(): any;
 }

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

@@ -1,6 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { TextInputAutocomplete } from '../../utils/constants';
-import { DropdownItemSelectedEventDetail } from '../nv-fielddropdownitem/DropdownItemSelectedEventDetail';
 /**
  * @slot content - The content of the list.
  * @slot leading-input - Content to be placed before the input text, within the input container.
@@ -61,7 +60,7 @@ export declare class NvFieldmultiselect {
     /**
      * The text to display when no items match the filter.
      */
-    readonly emptyresult: string;
+    readonly emptyResult: string;
     /**
      * Marks the input field as required.
      */
@@ -165,6 +164,12 @@ export declare class NvFieldmultiselect {
      */
     modeState: 'options' | 'slots';
     private isHandlingEscape;
+    /**
+     * 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>
+     * element.
+     */
+    readonly autofocus: boolean;
     /****************************************************************************/
     /**
      * Subscribe to click outside event.
@@ -183,10 +188,6 @@ export declare class NvFieldmultiselect {
      */
     disconnectedCallback(): void;
     /****************************************************************************/
-    /**
-     * Event emitted when an item is selected.
-     */
-    dropdownItemSelected: EventEmitter<DropdownItemSelectedEventDetail>;
     /**
      * Emitted when the input value changes.
      * @bind value
@@ -305,10 +306,6 @@ export declare class NvFieldmultiselect {
      * @see {@link https://en.wikipedia.org/wiki/Unicode_equivalence#Normal_forms} - More info about Unicode normalization forms
      */
     private normalizeText;
-    /**
-     * Handle click outside the component.
-     * @param {MouseEvent} event - The click event.
-     */
     private handleClickOutside;
     /**
      * Handle popover close