@nova-design-system/nova-webcomponents 3.0.0-beta.36 → 3.0.0-beta.37

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

@@ -0,0 +1,20 @@
+/**
+ * @slot default - Custom content for the dialog header. When provided, the default header will not be rendered.
+ */
+export declare class NvDialogheader {
+    el: HTMLNvDialogheaderElement;
+    private hasSlot;
+    /****************************************************************************/
+    /**
+     * Sets the heading text for the dialog.
+     */
+    readonly heading: string;
+    /**
+     * Sets the subheading text for the dialog.
+     */
+    readonly subheading: string;
+    /****************************************************************************/
+    componentWillLoad(): void;
+    /****************************************************************************/
+    render(): any;
+}

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

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

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { type FieldLabelPlacement } from '../../utils/constants';
+import { type LabelPlacement } from '../../utils/constants';
 /**
  * @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.
@@ -17,7 +17,7 @@ export declare class NvFieldcheckbox {
     readonly message?: string;
     /**
      * The text for the validation message.
-     * @deprecated Use `errorDescription` instead.
+     * @deprecated Use `errorDescription` and set the error prop instead.
      * */
     readonly validation?: string;
     /**
@@ -25,7 +25,6 @@ export declare class NvFieldcheckbox {
      * @deprecated Use `labelPlacement = end` instead.
      * */
     readonly labelBefore?: boolean;
-    componentWillRender(): void;
     /****************************************************************************/
     /**
      * Sets the ID for the radio button’s input element and the for attribute of
@@ -53,7 +52,7 @@ export declare class NvFieldcheckbox {
      * Determines the position of the label relative to the checkbox, either
      * 'start' (before) or 'end' (after).
      */
-    labelPlacement: `${FieldLabelPlacement}`;
+    labelPlacement: `${LabelPlacement}`;
     /**
      * Hides the label visually while still keeping it available for screen
      * readers.
@@ -67,10 +66,12 @@ export declare class NvFieldcheckbox {
     /**
      * Signals that there is an error associated with the checkbox, which can
      * trigger visual cues.
+     * @validator error
      */
-    readonly error: boolean;
+    error: boolean;
     /**
      * A description that appears when there is an error related to the checkbox.
+     * @validator message
      */
     errorDescription?: string;
     /**
@@ -103,11 +104,6 @@ export declare class NvFieldcheckbox {
      */
     checkedChanged: EventEmitter<boolean>;
     /****************************************************************************/
-    /**
-     * Watches for changes to the checked state and emits the new value.
-     * @param {boolean} checked - The new value of the checked state.
-     */
-    onCheckedChanged(checked: boolean): void;
     /**
      * Listens for the change event on the checkbox input element and updates the
      * checked state.
@@ -115,5 +111,13 @@ export declare class NvFieldcheckbox {
      */
     handleChange(event: Event): void;
     /****************************************************************************/
+    /**
+     * Watches for changes to the checked state and emits the new value.
+     * @param {boolean} checked - The new value of the checked state.
+     */
+    onCheckedChanged(checked: boolean): void;
+    /****************************************************************************/
+    componentWillRender(): void;
+    /****************************************************************************/
     render(): any;
 }

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

@@ -24,7 +24,7 @@ export declare class NVFieldDropDown {
     readonly inputId: 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
+     * input field. It's a crucial element for making forms clear and
      * user-friendly.
      */
     readonly label: string;
@@ -36,7 +36,7 @@ export declare class NVFieldDropDown {
     readonly description: string;
     /**
      * Display temporary text inside the input field to give users a hint about
-     * what to type. It’s a great way to provide examples or suggestions directly
+     * what to type. It's a great way to provide examples or suggestions directly
      * in the field before they start typing.
      * The placeholder is displayed only when the filterable option is enabled.
      */
@@ -44,7 +44,7 @@ export declare class NVFieldDropDown {
     /**
      * 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
+     * the server, representing the input's data in form submissions. It should be
      * unique within the form to avoid conflicts.
      */
     readonly name: string;
@@ -54,7 +54,7 @@ export declare class NVFieldDropDown {
     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.
+     * 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.
      */
@@ -62,7 +62,7 @@ export declare class NVFieldDropDown {
     /**
      * Specifies the value of the input field, which determines the text displayed
      * within the field. This prop is typically used in controlled components
-     * where the input’s value is managed by the component’s state.
+     * where the input's value is managed by the component's state.
      */
     value: string;
     /**
@@ -71,7 +71,7 @@ export declare class NVFieldDropDown {
      */
     readonly required: boolean;
     /**
-     * Alters the input field’s appearance to indicate an error, helping users
+     * Alters the input field's appearance to indicate an error, helping users
      * identify fields that need correction.
      * @validator error
      */
@@ -83,14 +83,14 @@ 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
+     * 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
+     * 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;
@@ -108,6 +108,25 @@ export declare class NVFieldDropDown {
     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"}]'
+     */
+    readonly options?: string;
+    /**
+     * Options configuration for the dropdown items.
+     */
+    parsedOptions: Array<{
+        /** Label to display for the option */
+        label: string;
+        /** Value associated with the option */
+        value: string;
+        /** Whether this option is disabled */
+        disabled?: boolean;
+        /** Whether this option is pre-selected */
+        selected?: boolean;
+    }>;
     /****************************************************************************/
     /**
      * Event emitted when an item is selected.
@@ -122,6 +141,11 @@ export declare class NVFieldDropDown {
     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;
     /****************************************************************************/
     componentWillLoad(): void;
     componentDidLoad(): void;

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

@@ -67,11 +67,15 @@ export declare class NvFieldmultiselect {
      */
     readonly required: boolean;
     /**
-     * Alters the input field's appearance to indicate an error.
+     * Alters the input field'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.
+     * A description that appears when there is an error related to the multiselect
+     * field.
+     * @validator message
      */
     readonly errorDescription: string;
     /**

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

@@ -13,12 +13,12 @@ export declare class NvFieldnumber {
     /****************************************************************************/
     /**
      * Message defines a 'hint ' message for the number field.
-     * @deprecated use description instead.
+     * @deprecated Use `description` instead.
      */
     readonly message: string;
     /**
      * Add the message to the validation state.
-     * @deprecated use errorDescription and set the error prop instead.
+     * @deprecated Use `errorDescription` and set the error prop instead.
      */
     readonly validation: string;
     /****************************************************************************/
@@ -111,8 +111,6 @@ export declare class NvFieldnumber {
      */
     value: number;
     /****************************************************************************/
-    componentWillRender(): void;
-    /****************************************************************************/
     /**
      * Emitted when the input value changes.
      * @bind value
@@ -128,5 +126,7 @@ export declare class NvFieldnumber {
     private isMinValueReached;
     private isMaxValueReached;
     /****************************************************************************/
+    componentWillRender(): void;
+    /****************************************************************************/
     render(): any;
 }

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { type FieldLabelPlacement } from '../../utils/constants';
+import { type LabelPlacement } from '../../utils/constants';
 /**
  * @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.
@@ -50,7 +50,7 @@ export declare class NvFieldradio {
     /**
      * Defines the position of the label relative to the radio button.
      */
-    labelPlacement: `${FieldLabelPlacement}`;
+    labelPlacement: `${LabelPlacement}`;
     /**
      * Adds a helpful hint message below the label. This description provides
      * extra information or context about the radio button option, assisting users

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

@@ -13,20 +13,28 @@ export declare class NvFieldselect {
     private selectElement;
     private internals;
     /****************************************************************************/
-    private computedDisplayValue;
-    private internalReadonly;
-    /****************************************************************************/
     /**
      * Message defines a 'hint ' message for the Select Field.
-     * @deprecated use description instead.
+     * @deprecated Use `description` instead.
      */
     readonly message: string;
     /**
      * Add the message to the validation state.
-     * @deprecated use errorDescription and set the error prop instead.
+     * @deprecated Use `errorDescription` and set the error prop instead.
      */
     readonly validation: string;
-    componentWillRender(): void;
+    /****************************************************************************/
+    private computedDisplayValue;
+    private internalReadonly;
+    /**
+     * Options to display in the select. Can be passed as a JSON string.
+     * Format: [{ label: string, value: string, selected?: boolean, disabled?: boolean }]
+     */
+    readonly options?: string;
+    /**
+     * Parsed options stored internally
+     */
+    private parsedOptions;
     /****************************************************************************/
     /**
      * Sets the ID for the select element and the for attribute of the associated
@@ -130,6 +138,11 @@ export declare class NvFieldselect {
      * @param {boolean} newValue - The new value of readonly.
      */
     handleReadonlyChange(newValue: boolean): void;
+    /**
+     * Parse options and update the internal state
+     * @param {string} newValue - The new value of options
+     */
+    handleOptionsChange(newValue: string): void;
     /****************************************************************************/
     /**
      * Handles the change event on the select element. This method is used to
@@ -172,6 +185,7 @@ export declare class NvFieldselect {
      */
     private ensureSelectElement;
     /****************************************************************************/
+    componentWillRender(): void;
     /**
      * Lifecycle method that is called before the component is rendered. This is
      * where the internal state is set up before rendering occurs.

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

@@ -14,12 +14,12 @@ export declare class NvFieldtext {
     /****************************************************************************/
     /**
      * Message defines a 'hint ' message for the Text Field.
-     * @deprecated use description instead.
+     * @deprecated Use `description` instead.
      */
     readonly message: string;
     /**
      * Add the message to the validation state.
-     * @deprecated use errorDescription and set the error prop instead.
+     * @deprecated Use `errorDescription` and set the error prop instead.
      */
     readonly validation: string;
     /**
@@ -27,7 +27,6 @@ export declare class NvFieldtext {
      * @deprecated use type instead.
      */
     readonly textInputType: 'text' | 'tel' | 'email';
-    componentWillRender(): void;
     /****************************************************************************/
     /**
      * Sets the ID for the input element and the for attribute of the associated
@@ -102,7 +101,7 @@ export declare class NvFieldtext {
      * field.
      * @validator message
      */
-    errorDescription: string;
+    errorDescription?: string;
     /**
      * Changes the input field’s appearance to indicate successful input or
      * validation.
@@ -158,5 +157,7 @@ export declare class NvFieldtext {
      */
     private handleInputContainerClick;
     /****************************************************************************/
+    componentWillRender(): void;
+    /****************************************************************************/
     render(): any;
 }

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

@@ -10,15 +10,14 @@ export declare class NvFieldtextarea {
     /****************************************************************************/
     /**
      * Message defines a 'hint ' message for the Text Field.
-     * @deprecated use description instead.
+     * @deprecated Use `description` instead.
      */
     readonly message: string;
     /**
      * Add the message to the validation state.
-     * @deprecated use errorDescription and set the error prop instead.
+     * @deprecated Use `errorDescription` and set the error prop instead.
      */
     readonly validation: string;
-    componentWillRender(): void;
     /****************************************************************************/
     /**
      * Sets the ID for the input element and the for attribute of the associated
@@ -151,6 +150,7 @@ export declare class NvFieldtextarea {
     private handleTextareaContainerClick;
     private adjustTextareaHeight;
     /****************************************************************************/
+    componentWillRender(): void;
     componentDidLoad(): void;
     /****************************************************************************/
     render(): any;

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

@@ -0,0 +1,156 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @slot label - Content to be placed as the label, will override the label prop.
+ * @slot before-input - Content to be placed before the input text, outside the input container.
+ * @slot after-input - Content to be placed after the input text, outside the input container.
+ * @slot leading-input - Content to be placed before the input text, within the input container.
+ * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.
+ * @slot description - Content to be placed as the description, will override the description prop.
+ */
+export declare class NvFieldtime {
+    el: HTMLNvFieldtimeElement;
+    private inputElements;
+    private inputZeroAdded;
+    private popoverElement;
+    private typeFocused;
+    /****************************************************************************/
+    hours: string;
+    minutes: string;
+    seconds: string;
+    /****************************************************************************/
+    /**
+     * The current value of the time input in the specified format.
+     */
+    value: string;
+    /**
+     * Lets you define the text that explains what users should enter in the time
+     * input field. It's a crucial element for making forms clear and
+     * user-friendly.
+     */
+    readonly label: string;
+    /**
+     * Sets the ID for the input element and the for attribute of the associated
+     * label. If no ID is provided, a random one will be automatically generated
+     * to ensure unique identification, facilitating proper label association and
+     * accessibility.
+     */
+    readonly inputId: 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.
+     */
+    readonly readonly: boolean;
+    /**
+     * The disabled prop lets you turn off the input field so that users can't
+     * interact with it. When disabled, the field is grayed out and won't respond to
+     * clicks or touches.
+     */
+    readonly disabled: boolean;
+    /**
+     * Marks the input field as required, ensuring that the user must fill it out
+     * before submitting the form.
+     */
+    readonly required: boolean;
+    /**
+     * 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.
+     */
+    readonly name: string;
+    /**
+     * Changes the input field’s appearance to indicate successful input or
+     * validation.
+     */
+    readonly success: boolean;
+    /**
+     * Alters the input field'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 time
+     * field.
+     * @validator message
+     */
+    readonly errorDescription: string;
+    /**
+     * Specifies the time format to be used.
+     * Available formats:
+     * - HH: 24-hour format (00-23)
+     * - HH:mm: 24-hour format with minutes (00:00-23:59)
+     * - HH:mm:ss: 24-hour format with minutes and seconds (00:00:00-23:59:59)
+     * - hh: 12-hour format (01-12)
+     * - hh:mm: 12-hour format with minutes (01:00-12:59)
+     * - hh:mm:ss: 12-hour format with minutes and seconds (01:00:00-12:59:59)
+     */
+    readonly format: 'HH' | 'HH:mm' | 'HH:mm:ss' | 'hh' | 'hh:mm' | 'hh:mm:ss';
+    /**
+     * Add helpful hints or extra information under the time input field. This is
+     * where you can clarify what users should enter or provide additional
+     * instructions.
+     */
+    readonly description: string;
+    /**
+     * State of the time picker popover.
+     */
+    open: boolean;
+    /**
+     * The step interval in milliseconds for time increments/decrements.
+     * This affects how the time changes when using arrow keys or spinners.
+     */
+    readonly step: number;
+    /**
+     * The maximum time value that can be selected.
+     */
+    readonly max: string;
+    /**
+     * The minimum time value that can be selected.
+     */
+    readonly min: string;
+    /****************************************************************************/
+    /**
+     * Emit an event when the time value changes.
+     * The event detail contains the new time value (HH, HH:mm or HH:mm:ss).
+     */
+    valueChanged: EventEmitter<string>;
+    /****************************************************************************/
+    handleOpenChanged(event: CustomEvent<boolean>): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    /****************************************************************************/
+    handleValueChange(newValue: string): void;
+    /****************************************************************************/
+    private handleInputChange;
+    private handleHoursChange;
+    private handleMinutesChange;
+    private handleSecondsChange;
+    private parseTime;
+    private reconstructTime;
+    private handleFocus;
+    private HandleDropdownIconClick;
+    private updateHighlightedItem;
+    private handleTimeOptionClick;
+    private handleInputBlur;
+    private handleClickOutside;
+    private handleScroll;
+    private generateTimeOptions;
+    private generateHourOptions;
+    private parseHour;
+    private generateMinuteOptions;
+    private parseMinute;
+    private generateSecondOptions;
+    private parseSecond;
+    private generateInfiniteTimeOptions;
+    private getCurrentTime;
+    private updateColumnHighlight;
+    private handleHostClick;
+    /****************************************************************************/
+    componentWillLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentDidLoad(): void;
+    /****************************************************************************/
+    private RenderTimeOptionsColumn;
+    render(): any;
+}

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

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

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

@@ -32,6 +32,20 @@ export declare class NvMenu {
      * position on the axis to fit on the screen, so users can always see it.
      */
     readonly placement: Placement;
+    /**
+     * (New feature) Items to display in the menu, provided as a JSON string.
+     * Format: [{ label: string, value?: string, disabled?: boolean, hasSubmenu?: boolean, ... }]
+     */
+    readonly items?: string;
+    /**
+     * Parsed items stored in state.
+     */
+    private parsedItems;
+    /**
+     * Watcher to parse the items when the `items` property changes.
+     * @param {string} newValue - The new value of the `items` property.
+     */
+    handleItemsChange(newValue: string): void;
     /****************************************************************************/
     /**
      * Opens the menu.
@@ -55,5 +69,11 @@ export declare class NvMenu {
     /****************************************************************************/
     componentWillLoad(): void;
     /****************************************************************************/
+    /**
+     * Generates menu items from the `items` property.
+     * @param {MenuItem[]} items - The items to display in the menu.
+     * @returns {HTMLElement[]} The rendered items.
+     */
+    private renderMenuItems;
     render(): any;
 }

package/dist/types/components/{nv-fieldtoggle/nv-fieldtoggle.d.ts → nv-toggle/nv-toggle.d.ts}

@@ -1,11 +1,11 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { type FieldLabelPlacement } from '../../utils/constants';
+import { type LabelPlacement } from '../../utils/constants';
 /**
  * @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.
  */
-export declare class NvFieldtoggle {
-    el: HTMLNvFieldtoggleElement;
+export declare class NvToggle {
+    el: HTMLNvToggleElement;
     /****************************************************************************/
     /**
      * Sets the ID for the radio button’s input element and the for attribute of
@@ -30,7 +30,7 @@ export declare class NvFieldtoggle {
      * Determines the position of the label relative to the toggle, either
      * 'start' (before) or 'end' (after).
      */
-    readonly labelPlacement: `${FieldLabelPlacement}`;
+    readonly labelPlacement: `${LabelPlacement}`;
     /**
      * Hides the label visually while still keeping it available for screen
      * readers.

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

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