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

package/dist/types/components/nv-fielddaterange/nv-fielddaterange.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 leading-input - Content to be placed before the input text, within the input container.
@@ -12,6 +11,7 @@ import { DateRange } from '../../interfaces/dateRange';
 export declare class NvFielddaterange {
     el: HTMLNvFielddaterangeElement;
     private popoverElement;
+    private calendarElement;
     private popoverId;
     /****************************************************************************/
     /**
@@ -75,7 +75,7 @@ export declare class NvFielddaterange {
     /**
      * Autofocus the start input when the component is mounted.
      */
-    readonly shouldAutoFocus: boolean;
+    readonly autofocus: boolean;
     /**
      * The initial value of the date range (in string format).
      */
@@ -92,6 +92,10 @@ 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
@@ -130,22 +134,20 @@ export declare class NvFielddaterange {
     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
      */
     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.
@@ -168,6 +170,10 @@ export declare class NvFielddaterange {
      * @param {Event} event - The input event
      */
     private handleEndInput;
+    /**
+     * Update the calendar's rangeValue property without forcing month change
+     */
+    private updateCalendarValue;
     /**
      * Handles focus events on the input elements.
      * @param {FocusEvent} event - The focus event
@@ -187,14 +193,19 @@ export declare class NvFielddaterange {
     /**
      * Emits an event when the date range changes.
      */
-    dateRangeChange: EventEmitter<DateRange>;
+    dateRangeChange: EventEmitter<HTMLNvCalendarElementEventMap['rangeDateChange']>;
     /**
      * Handles the range date selection event from nv-calendar.
      * @param {CustomEvent<DateRange>} event - The custom event
      */
-    handleRangeDateChange(event: CustomEvent<DateRange>): void;
+    handleRangeDateChange(event: CustomEvent<HTMLNvCalendarElementEventMap['rangeDateChange']>): 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-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,14 +138,25 @@ 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>
      * element.
      */
     readonly autofocus: boolean;
+    /**
+     * Allows the field to stretch and fill the entire width of its container.
+     */
+    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>;
     /****************************************************************************/
@@ -146,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.
@@ -174,8 +202,5 @@ export declare class NvFielddropdown {
     private clearFilter;
     private updateSelectedItem;
     /****************************************************************************/
-    componentWillLoad(): void;
-    componentDidLoad(): void;
-    /****************************************************************************/
     render(): any;
 }

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

@@ -50,21 +50,28 @@ export declare class NvFieldmultiselect {
      */
     readonly placeholder: string;
     /**
-     * Defines the maximum height of the multiselect list when open.
-     */
-    readonly maxHeight: string;
-    /**
-     * Text for the badge showing the number of selected items.
+     * The autocomplete prop helps users fill out the input field faster by
+     * suggesting entries they've used before, like their email or address.
+     * You can turn it on to make forms more convenient or off to ensure users
+     * always type in fresh data.
      */
-    readonly badgeLabel: string;
+    readonly autocomplete: `${TextInputAutocomplete}`;
     /**
-     * The text to display when no items match the filter.
+     * Specifies the value of the input field.
      */
-    readonly emptyResult: string;
+    value: string;
     /**
      * Marks the input field as required.
      */
     readonly required: boolean;
+    /**
+     * Display the input field's content without allowing users to change it.
+     */
+    readonly readonly: boolean;
+    /**
+     * Disables the input field.
+     */
+    readonly disabled: boolean;
     /**
      * Alters the input field's appearance to indicate an error, helping users
      * identify fields that need correction.
@@ -78,29 +85,21 @@ export declare class NvFieldmultiselect {
      */
     readonly errorDescription: string;
     /**
-     * Display the input field's content without allowing users to change it.
+     * Defines the maximum height of the multiselect list when open.
      */
-    readonly readonly: boolean;
+    readonly maxHeight: string;
     /**
-     * Disables the input field.
+     * State of the multiselect popover.
      */
-    readonly disabled: boolean;
+    open: boolean;
     /**
-     * The autocomplete prop for faster input filling.
+     * The text to display when no items match the filter.
      */
-    readonly autocomplete: `${TextInputAutocomplete}`;
+    readonly emptyResult: string;
     /**
      * Enables or disables the filtering feature for the multiselect items.
      */
     readonly filterable: boolean;
-    /**
-     * Specifies the value of the input field.
-     */
-    value: string;
-    /**
-     * State of the multiselect popover.
-     */
-    open: boolean;
     /**
      * List of options used to automatically generate dropdown items. This
      * provides an alternative to using the slot manually.
@@ -129,54 +128,46 @@ export declare class NvFieldmultiselect {
         /** Whether this option is pre-checked */
         checked?: boolean;
     }[];
-    /**
-     * List of selected values in the multiselect.
-     */
-    selectedValues: string[];
-    /**
-     * Sorted options for display.
-     */
-    sortedOptions: Array<{
-        /** Label to display for the option */
-        label: string;
-        /** Value associated with the option */
-        value: string;
-        /** Whether this option is a divider */
-        isDivider?: boolean;
-    }>;
-    /**
-     * The text entered by the user for filtering multiselect items.
-     */
-    filterText: string;
     /**
      * Delay in milliseconds before the search is triggered when typing in the filter input.
      * @default 300
      */
     readonly debounceDelay: number;
-    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.
+     * Allows the field to stretch and fill the entire width of its container.
      */
-    connectedCallback(): void;
+    readonly fluid: boolean;
     /**
-     * Set the mode state and handle options change.
+     * Text for the badge showing the number of selected items.
      */
-    componentWillLoad(): void;
+    readonly badgeLabel: string;
+    /****************************************************************************/
     /**
-     * Force reorder if options mode in componentDidLoad because of the initial render not trigger @watch
+     * The text entered by the user for filtering multiselect items.
      */
-    componentDidLoad(): void;
+    filterText: string;
     /**
-     * Unsubscribe from click outside event.
+     * List of selected values in the multiselect.
      */
-    disconnectedCallback(): void;
+    selectedValues: string[];
+    /**
+     * Sorted options for display.
+     */
+    sortedOptions: Array<{
+        /** Label to display for the option */
+        label: string;
+        /** Value associated with the option */
+        value: string;
+        /** Whether this option is a divider */
+        isDivider?: boolean;
+    }>;
+    private isHandlingEscape;
     /****************************************************************************/
     /**
      * Emitted when the input value changes.
@@ -188,6 +179,13 @@ export declare class NvFieldmultiselect {
      * Emits the current list of selected values.
      */
     multiselectChange: EventEmitter<string[]>;
+    /****************************************************************************/
+    handleOptionsChange(newValue: typeof this.options): void;
+    /**
+     * Emitted when the value changes.
+     */
+    watchValueHandler(): void;
+    /****************************************************************************/
     /**
      * Emitted when the input loses focus.
      * @param {CustomEvent<boolean>} event - The event object containing the focus state.
@@ -203,12 +201,24 @@ export declare class NvFieldmultiselect {
         /** Whether this option is checked */
         checked: boolean;
     }>): void;
-    handleOptionsChange(newValue: typeof this.options): void;
+    handleSlotChange(event: Event): void;
+    /****************************************************************************/
     /**
-     * Emitted when the value changes.
+     * Subscribe to click outside event.
      */
-    watchValueHandler(): void;
-    handleSlotChange(event: Event): void;
+    connectedCallback(): void;
+    /**
+     * Set the mode state and handle options change.
+     */
+    componentWillLoad(): void;
+    /**
+     * Force reorder if options mode in componentDidLoad because of the initial render not trigger @watch
+     */
+    componentDidLoad(): void;
+    /**
+     * Unsubscribe from click outside event.
+     */
+    disconnectedCallback(): void;
     /****************************************************************************/
     /**
      * Retrieves the current filter text entered by the user.

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

@@ -116,6 +116,10 @@ export declare class NvFieldnumber {
      * element.
      */
     readonly autofocus: boolean;
+    /**
+     * Allows the field to stretch and fill the entire width of its container.
+     */
+    readonly fluid: boolean;
     /****************************************************************************/
     /**
      * Emitted when the input value changes.

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

@@ -134,6 +134,10 @@ export declare class NvFieldpassword {
      * element.
      */
     readonly autofocus: boolean;
+    /**
+     * Allows the field to stretch and fill the entire width of its container.
+     */
+    readonly fluid: boolean;
     /****************************************************************************/
     /**
      * Emitted when the input value changes.

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

@@ -119,6 +119,10 @@ export declare class NvFieldselect {
      * element.
      */
     readonly autofocus: boolean;
+    /**
+     * Allows the field to stretch and fill the entire width of its container.
+     */
+    readonly fluid: boolean;
     /****************************************************************************/
     /**
      * Emitted when the selected value changes.