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

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;
 }

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.
+     * 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 maxHeight: string;
-    /**
-     * Text for the badge showing the number of selected items.
-     */
-    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,31 +128,11 @@ 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>
@@ -164,23 +143,31 @@ export declare class NvFieldmultiselect {
      * Allows the field to stretch and fill the entire width of its container.
      */
     readonly fluid: boolean;
-    /****************************************************************************/
     /**
-     * Subscribe to click outside event.
+     * Text for the badge showing the number of selected items.
      */
-    connectedCallback(): void;
+    readonly badgeLabel: string;
+    /****************************************************************************/
     /**
-     * Set the mode state and handle options change.
+     * The text entered by the user for filtering multiselect items.
      */
-    componentWillLoad(): void;
+    filterText: string;
     /**
-     * Force reorder if options mode in componentDidLoad because of the initial render not trigger @watch
+     * List of selected values in the multiselect.
      */
-    componentDidLoad(): void;
+    selectedValues: string[];
     /**
-     * Unsubscribe from click outside event.
+     * Sorted options for display.
      */
-    disconnectedCallback(): void;
+    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.
@@ -192,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.
@@ -207,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-fieldslider/nv-fieldslider.d.ts

@@ -0,0 +1,230 @@
+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.
+ */
+export declare class NvFieldslider {
+    el: HTMLNvFieldsliderElement;
+    /****************************************************************************/
+    /**
+     * Sets the ID for the start input element and the for attribute of the associated
+     * label. If no ID is provided, a random one will be automatically generated.
+     */
+    readonly startInputId: string;
+    /**
+     * Sets the ID for the end input element and the for attribute of the associated
+     * label. If no ID is provided, a random one will be automatically generated.
+     */
+    readonly endInputId: string;
+    /**
+     * Provides a textual description of the slider's function, helping users
+     * understand what the control adjusts. It also supports accessibility by
+     * serving as the accessible name for the component.
+     */
+    readonly label: string;
+    /**
+     * Keeps the interface clean by removing visible labels, but still announces
+     * the label to screen readers so users relying on assistive tech aren't left
+     * guessing.
+     */
+    readonly hideLabel: boolean;
+    /**
+     * 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.
+     */
+    readonly description: string;
+    /**
+     * Enables an optional numeric input field alongside the slider, allowing
+     * users to type a value directly instead of—or in addition to—using the
+     * slider handle.
+     */
+    readonly hasField: boolean;
+    /**
+     * 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.
+     */
+    readonly range: boolean;
+    /**
+     * Disables user interaction with the slider and its associated input fields.
+     */
+    readonly disabled: boolean;
+    /**
+     * Makes the slider and input non-editable while keeping them focusable and
+     * included in form submissions.
+     */
+    readonly readonly: boolean;
+    /**
+     * Alters the slider's appearance to indicate an error, helping users
+     * identify fields that need correction.
+     * @validator error
+     */
+    readonly error: boolean;
+    /**
+     * A description that appears when there is an error related to the slider.
+     * @validator message
+     */
+    readonly errorDescription: string;
+    /**
+     * Changes the slider's appearance to indicate successful input or validation.
+     */
+    readonly success: boolean;
+    /**
+     * Numeric value of the slider as a string, if range mode is on, the values
+     * will be a comma-separated string.
+     */
+    value: string;
+    /**
+     * Defines the interval between selectable values on the slider. Controls how
+     * much the value increases or decreases with each keyboard interaction, drag
+     * movement, or direct input.
+     */
+    readonly step: number;
+    /**
+     * Controls whether the slider handle should visually snap to step values
+     * during dragging. When false, the handle can be positioned at any point
+     * along the track while dragging, but the actual value will still snap to the
+     * nearest step value. When true, the handle will visually snap to the nearest
+     * step value during dragging.
+     */
+    readonly snap: boolean;
+    /**
+     * When true and custom ticks are provided, the slider will snap to the nearest
+     * tick value during dragging, instead of using the step value. This is useful
+     * when you have custom ticks at specific values that don't align with regular step intervals.
+     */
+    readonly snapTicks: boolean;
+    /**
+     * Name attribute for the form input element. Required for form submission.
+     * For range sliders, this will be used for the start value input and add -end
+     * to the end input name.
+     */
+    readonly name: string;
+    /**
+     * Name attribute for the end value input when using range mode.
+     * If not provided, the name attribute will be used with '-end' appended.
+     */
+    readonly endName: string;
+    /**
+     * Defines the minimum allowed value for the slider. The thumb cannot move
+     * below this value, and manual input is also constrained accordingly.
+     */
+    readonly min: number;
+    /**
+     * Defines the maximum allowed value for the slider. The thumb cannot move
+     * above this value, and manual input is also constrained accordingly.
+     */
+    readonly max: number;
+    /**
+     * Controls the visibility of tick marks on the slider. When enabled, all
+     * visual ticks that indicate step points along the track are shown. If custom
+     * ticks are provided, they are always shown regardless of this setting.
+     */
+    readonly showTicks: boolean;
+    /**
+     * Allows you to specify custom tick marks at specific values along the
+     * slider. Each tick can optionally display a label to provide additional
+     * context or guidance for users.
+     */
+    readonly ticks: {
+        /** The numeric value of the tick */
+        value: number;
+        /** The label of the tick */
+        label?: string;
+    }[];
+    /**
+     * Allows the field to stretch and fill the entire width of its container.
+     */
+    readonly fluid: boolean;
+    /**
+     * Use this to automatically show a label, like “~” for approximate values,
+     * before the slider’s value in the tooltip or input, giving users quick
+     * context about the number.
+     */
+    readonly labelBeforeValue: string;
+    /**
+     * Use this to automatically show a label, like “$” or “kg,” after the value
+     * on the slider’s tooltip or input, helping users better understand the
+     * number.
+     */
+    readonly labelAfterValue: string;
+    /****************************************************************************/
+    isDragging: boolean;
+    activeDragThumb: 'left' | 'right' | 'single';
+    internalTicks: typeof this.ticks;
+    rawPosition: number;
+    rawRangePosition: [number, number];
+    valueInternal: number;
+    rangeValueInternal: [number, number];
+    /****************************************************************************/
+    /**
+     * Ensures value is valid and within bounds.
+     * @param {number} val - The value to validate
+     * @returns {number} The validated and snapped value
+     */
+    private validateValue;
+    /**
+     * Parses the value string into a number or array of numbers for internal use.
+     */
+    private parseValue;
+    /**
+     * Handles value changes from slider interaction.
+     * @param {number | number[]} newValue - The new value or range values
+     */
+    private handleValueChange;
+    /**
+     * Generates the ticks to display based on props and state.
+     */
+    private generateDisplayTicks;
+    /**
+     * Handles pointer events on the track.
+     * @param {PointerEvent} event - The pointer event
+     */
+    private onTrackInteraction;
+    /**
+     * Handles pointer move events during drag.
+     * @param {PointerEvent} event - The pointer event
+     */
+    private onPointerMove;
+    /**
+     * Handles the end of a drag operation.
+     */
+    private onPointerUp;
+    /**
+     * Registers global events for tracking pointer movement.
+     */
+    private registerGlobalEvents;
+    /**
+     * Removes global events when tracking ends.
+     */
+    private removeGlobalEvents;
+    /**
+     * Handles keydown events for keyboard accessibility.
+     * @param {KeyboardEvent} event - The keyboard event
+     */
+    private onKeyDown;
+    /**
+     * Handles field input value changes.
+     * @param {Event} event - The input event
+     */
+    private handleFieldChange;
+    /****************************************************************************/
+    onValueChange(): void;
+    onConfigChange(): void;
+    onRangeChange(newValue: boolean): void;
+    /****************************************************************************/
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /****************************************************************************/
+    /**
+     * Emitted when the slider values change.
+     * @bind value
+     */
+    valueChanged: EventEmitter<string>;
+    /****************************************************************************/
+    render(): any;
+}

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

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

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

@@ -0,0 +1,46 @@
+/**
+ * Utility functions for nv-fieldslider.
+ */
+/**
+ * Clamp a value between min and max.
+ * @param {number} value - The value to clamp
+ * @param {number} min - The minimum boundary
+ * @param {number} max - The maximum boundary
+ * @returns {number} The clamped value
+ */
+export declare function clamp(value: number, min: number, max: number): number;
+/**
+ * Calculate the percentage position of a value within a range.
+ * @param {number} value - The value to convert to percentage
+ * @param {number} min - The minimum value of the range
+ * @param {number} max - The maximum value of the range
+ * @returns {number} The percentage (0-100)
+ */
+export declare function valueToPercent(value: number, min: number, max: number): number;
+/**
+ * Snap a value to the nearest step.
+ * @param {number} value - The value to snap
+ * @param {number} min - The minimum boundary
+ * @param {number} max - The maximum boundary
+ * @param {number} step - The step size
+ * @returns {number} The snapped value
+ */
+export declare function snapToStep(value: number, min: number, max: number, step: number): number;
+/**
+ * Generate tick values for the slider.
+ * @param {number} min - The minimum value
+ * @param {number} max - The maximum value
+ * @param {number} step - The step size
+ * @returns {number[]} Array of tick values
+ */
+export declare function generateTicks(min: number, max: number, step: number): number[];
+/**
+ * Snap a value to the nearest tick mark.
+ * @param {number} value - The value to snap
+ * @param {object[]} ticks - Array of tick objects
+ * @returns {number} The value of the closest tick
+ */
+export declare function snapToTicks(value: number, ticks: {
+    /** The value of the tick */
+    value: number;
+}[]): number;

package/dist/types/components/nv-fieldslider/partials/field-input.d.ts

@@ -0,0 +1,45 @@
+import { FunctionalComponent } from '../../../stencil-public-runtime';
+/**
+ * Props for the FieldInput component
+ */
+interface FieldInputProps {
+    /** Whether this is a range slider */
+    range: boolean;
+    /** Whether to show the input field */
+    hasField: boolean;
+    /** The value for single mode */
+    value: number;
+    /** The values for range mode [min, max] */
+    rangeValue: number[];
+    /** Index (0 or 1) for range mode, ignored in single mode */
+    index?: number;
+    /** ID for the input field */
+    inputId: string;
+    /** Minimum allowed value */
+    min: number;
+    /** Maximum allowed value */
+    max: number;
+    /** Step size */
+    step: number;
+    /** Whether the slider is disabled */
+    disabled: boolean;
+    /** Whether the slider is readonly */
+    readonly: boolean;
+    /** Handler for input changes */
+    onInput: (event: Event) => void;
+    /** Label to display before the value */
+    labelBeforeValue?: string;
+    /** Label to display after the value */
+    labelAfterValue?: string;
+    /** Name attribute for the input field (for form submission) */
+    name?: string;
+    /** Name attribute for the end input field (when in range mode) */
+    endName?: string;
+}
+/**
+ * Renders field input for direct value entry
+ * @param {FieldInputProps} props - Component properties
+ * @returns {JSX.Element} JSX element representing the field input
+ */
+export declare const FieldInput: FunctionalComponent<FieldInputProps>;
+export {};