@nova-design-system/nova-webcomponents 3.0.0-beta.46 → 3.0.0

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

@@ -102,21 +102,30 @@ export declare class NvFielddropdown {
      */
     readonly filterable: boolean;
     /**
-     * List of options available in the dropdown. The options are passed as a JSON
-     * string.
+     * List of options used to automatically generate dropdown items. This
+     * provides an alternative to using the slot manually.
      *
      * @example
      * options=[{
      *  "label": "Option 1",
      *  "value": "option1",
-     *  "selected": true
+     *  "selected": true,
      * },
      * {
      *  "label": "Option 2",
-     *  "value": "option2"
+     *  "value": "option2",
      * }]
      */
-    readonly options?: string;
+    readonly options?: {
+        /** 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;
+    }[];
     /**
      * 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>
@@ -127,19 +136,6 @@ export declare class NvFielddropdown {
     /** The text entered by the user for filtering dropdown items. */
     filterText: string;
     selectedValues: Set<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;
-    }>;
     /****************************************************************************/
     /**
      * Emitted when the input value changes.
@@ -152,8 +148,8 @@ export declare class NvFielddropdown {
     dropdownItemSelected: EventEmitter<HTMLNvFielddropdownitemElementEventMap['dropdownItemSelected']>;
     handleDropdownItemSelected(event: CustomEvent<HTMLNvFielddropdownitemElementEventMap['dropdownItemSelected']>): void;
     handleOpenChanged(event: CustomEvent<boolean>): void;
-    watchValueHandler(newValue: string): void;
-    handleOptionsChange(newValue: string): void;
+    watchValueHandler(newValue: typeof this.value): void;
+    handleOptionsChange(newValue: typeof this.options): void;
     handleBlur(event: FocusEvent): void;
     handleKeyDown(event: KeyboardEvent): void;
     /****************************************************************************/

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

@@ -102,15 +102,20 @@ export declare class NvFieldmultiselect {
      */
     open: boolean;
     /**
-     * List of options available in the multiselect.
-     * @description The options are passed as a JSON string.
-     * @example options='[{"label": "Option 1", "value": "option1"}, {"label": "Option 2", "value": "option2"}]'
-     */
-    readonly options?: string;
-    /**
-     * Options configuration for the multiselect items.
-     */
-    parsedOptions: Array<{
+     * List of options used to automatically generate dropdown items. This
+     * provides an alternative to using the slot manually.
+     *
+     * @example
+     * options=[{
+     *  "label": "Option 1",
+     *  "value": "option1",
+     * },
+     * {
+     *  "label": "Option 2",
+     *  "value": "option2",
+     * }]
+     */
+    options?: {
         /** Label to display for the option */
         label: string;
         /** Value associated with the option */
@@ -123,7 +128,7 @@ export declare class NvFieldmultiselect {
         description?: string;
         /** Whether this option is pre-checked */
         checked?: boolean;
-    }>;
+    }[];
     /**
      * List of selected values in the multiselect.
      */
@@ -148,12 +153,6 @@ export declare class NvFieldmultiselect {
      * @default 300
      */
     readonly debounceDelay: number;
-    /**
-     * State for the mode of the multiselect.
-     * @type {'options' | 'slots'}
-     * @default 'options'
-     */
-    modeState: 'options' | 'slots';
     private isHandlingEscape;
     /**
      * Applies focus to the input field as soon as the component is mounted. This
@@ -204,24 +203,7 @@ export declare class NvFieldmultiselect {
         /** Whether this option is checked */
         checked: boolean;
     }>): void;
-    /**
-     * Emitted when the options change.
-     * @param {string | Array<{label: string, value: string, isDivider?: boolean, disabled?: boolean, description?: string, checked?: boolean}>} newValue - The new value of the options.
-     */
-    handleOptionsChange(newValue: string | Array<{
-        /** Label to display for the option */
-        label: string;
-        /** Value associated with the option */
-        value: string;
-        /** Whether this option is a divider */
-        isDivider?: boolean;
-        /** Whether this option is disabled */
-        disabled?: boolean;
-        /** Additional description for the option */
-        description?: string;
-        /** Whether this option is pre-checked */
-        checked?: boolean;
-    }>): void;
+    handleOptionsChange(newValue: typeof this.options): void;
     /**
      * Emitted when the value changes.
      */

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

@@ -32,19 +32,53 @@ export declare class NvMenu {
      */
     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, ... }]
+     * List of items used to automatically generate dropdown items. This
+     * provides an alternative to using the slot manually.
+     *
+     * @example
+     * items = [{
+     *  "label": "Option 1",
+     *  "value": "option1",
+     * },
+     * {
+     *  "label": "Option 2",
+     *  "value": "option2",
+     * }]
      */
-    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;
+    readonly items?: {
+        /**
+         * The label of the menu item.
+         */
+        label: string;
+        /**
+         * The value of the menu item.
+         */
+        value?: string;
+        /**
+         * Whether the menu item is disabled.
+         */
+        disabled?: boolean;
+        /**
+         * Whether the menu item has a submenu.
+         */
+        hasSubmenu?: boolean;
+        /**
+         * The icon of the menu item.
+         */
+        icon?: string;
+        /**
+         * The shortcut of the menu item.
+         */
+        shortcut?: string;
+        /**
+         * Whether the menu item is nested.
+         */
+        nested?: boolean;
+        /**
+         * The submenu items of the menu item.
+         */
+        submenuItems?: InstanceType<typeof NvMenu>['items'];
+    }[];
     /****************************************************************************/
     /**
      * Opens the menu.

package/dist/types/components.d.ts

@@ -179,11 +179,6 @@ export namespace Components {
          */
         "prevent-auto-close"?: boolean;
     }
-    /**
-     * @deprecated This is only to help with the migration from v2 to v3. It will be removed in the next major release.
-     */
-    interface NvBase {
-    }
     interface NvBreadcrumb {
         /**
           * Use this to highlight the breadcrumb as the current page in your navigation. It also makes the page clearer to screen readers with aria-current="location".
@@ -408,6 +403,15 @@ export namespace Components {
          * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
          */
         "enable-global-filter"?: boolean;
+        /**
+          * Whether to enable pagination for the data grid.
+          * @default false
+         */
+        "enablePagination": boolean;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "enable-pagination"?: boolean;
         /**
           * Fallback value to be displayed when data is not available
           * @default 'N/A'
@@ -435,6 +439,20 @@ export namespace Components {
          * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
          */
         "no-data-message"?: string;
+        /**
+          * The number of rows to display per page.
+          * @default 10
+         */
+        "pageSize": number;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "page-size"?: number;
+        /**
+          * The array of page sizes to display in the pagination dropdown.
+          * @default [10, 20, 30, 40, 50]
+         */
+        "pageSizes": number[];
     }
     interface NvDatagridcolumn {
         /**
@@ -1051,10 +1069,19 @@ export namespace Components {
          */
         "open": boolean;
         /**
-          * 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" }]
+          * List of options used to automatically generate dropdown items. This provides an alternative to using the slot manually.
+          * @example options=[{  "label": "Option 1",  "value": "option1",  "selected": true, }, {  "label": "Option 2",  "value": "option2", }]
          */
-        "options"?: string;
+        "options"?: {
+    /** 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;
+  }[];
         /**
           * 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 in the field before they start typing. The placeholder is displayed only when the filterable option is enabled.
          */
@@ -1215,11 +1242,23 @@ export namespace Components {
          */
         "open": boolean;
         /**
-          * List of options available in the multiselect.
-          * @description The options are passed as a JSON string.
-          * @example options='[{"label": "Option 1", "value": "option1"}, {"label": "Option 2", "value": "option2"}]'
+          * List of options used to automatically generate dropdown items. This provides an alternative to using the slot manually.
+          * @example options=[{  "label": "Option 1",  "value": "option1", }, {  "label": "Option 2",  "value": "option2", }]
          */
-        "options"?: string;
+        "options"?: {
+    /** Label to display for the option */
+    label: string;
+    /** Value associated with the option */
+    value: string;
+    /** Whether this option is a divider */
+    isDivider?: boolean;
+    /** Whether this option is disabled */
+    disabled?: boolean;
+    /** Additional description for the option */
+    description?: string;
+    /** Whether this option is pre-checked */
+    checked?: boolean;
+  }[];
         /**
           * Display temporary text inside the input field.
          */
@@ -1967,9 +2006,43 @@ export namespace Components {
          */
         "disable-close-on-select"?: boolean;
         /**
-          * (New feature) Items to display in the menu, provided as a JSON string. Format: [{ label: string, value?: string, disabled?: boolean, hasSubmenu?: boolean, ... }]
+          * List of items used to automatically generate dropdown items. This provides an alternative to using the slot manually.
+          * @example items = [{  "label": "Option 1",  "value": "option1", }, {  "label": "Option 2",  "value": "option2", }]
          */
-        "items"?: string;
+        "items"?: {
+    /**
+     * The label of the menu item.
+     */
+    label: string;
+    /**
+     * The value of the menu item.
+     */
+    value?: string;
+    /**
+     * Whether the menu item is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the menu item has a submenu.
+     */
+    hasSubmenu?: boolean;
+    /**
+     * The icon of the menu item.
+     */
+    icon?: string;
+    /**
+     * The shortcut of the menu item.
+     */
+    shortcut?: string;
+    /**
+     * Whether the menu item is nested.
+     */
+    nested?: boolean;
+    /**
+     * The submenu items of the menu item.
+     */
+    submenuItems?: InstanceType<typeof NvMenu>['items'];
+  }[];
         /**
           * Use this if the menu is nested inside another menu. This will prevent the parent menu from closing when the child menu is opened.
          */
@@ -2403,15 +2476,6 @@ declare global {
         prototype: HTMLNvBadgeElement;
         new (): HTMLNvBadgeElement;
     };
-    /**
-     * @deprecated This is only to help with the migration from v2 to v3. It will be removed in the next major release.
-     */
-    interface HTMLNvBaseElement extends Components.NvBase, HTMLStencilElement {
-    }
-    var HTMLNvBaseElement: {
-        prototype: HTMLNvBaseElement;
-        new (): HTMLNvBaseElement;
-    };
     interface HTMLNvBreadcrumbElement extends Components.NvBreadcrumb, HTMLStencilElement {
     }
     var HTMLNvBreadcrumbElement: {
@@ -2933,7 +2997,6 @@ declare global {
         "nv-alert": HTMLNvAlertElement;
         "nv-avatar": HTMLNvAvatarElement;
         "nv-badge": HTMLNvBadgeElement;
-        "nv-base": HTMLNvBaseElement;
         "nv-breadcrumb": HTMLNvBreadcrumbElement;
         "nv-breadcrumbs": HTMLNvBreadcrumbsElement;
         "nv-button": HTMLNvButtonElement;
@@ -3155,11 +3218,6 @@ declare namespace LocalJSX {
          */
         "prevent-auto-close"?: boolean;
     }
-    /**
-     * @deprecated This is only to help with the migration from v2 to v3. It will be removed in the next major release.
-     */
-    interface NvBase {
-    }
     interface NvBreadcrumb {
         /**
           * Use this to highlight the breadcrumb as the current page in your navigation. It also makes the page clearer to screen readers with aria-current="location".
@@ -3392,6 +3450,15 @@ declare namespace LocalJSX {
          * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
          */
         "enable-global-filter"?: boolean;
+        /**
+          * Whether to enable pagination for the data grid.
+          * @default false
+         */
+        "enablePagination"?: boolean;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "enable-pagination"?: boolean;
         /**
           * Fallback value to be displayed when data is not available
           * @default 'N/A'
@@ -3423,6 +3490,20 @@ declare namespace LocalJSX {
           * Emitted when an action is triggered on a cell.
          */
         "onAction"?: (event: NvDatagridCustomEvent<ActionEvent>) => void;
+        /**
+          * The number of rows to display per page.
+          * @default 10
+         */
+        "pageSize"?: number;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "page-size"?: number;
+        /**
+          * The array of page sizes to display in the pagination dropdown.
+          * @default [10, 20, 30, 40, 50]
+         */
+        "pageSizes"?: number[];
     }
     interface NvDatagridcolumn {
         /**
@@ -4063,10 +4144,19 @@ declare namespace LocalJSX {
          */
         "open"?: boolean;
         /**
-          * 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" }]
+          * List of options used to automatically generate dropdown items. This provides an alternative to using the slot manually.
+          * @example options=[{  "label": "Option 1",  "value": "option1",  "selected": true, }, {  "label": "Option 2",  "value": "option2", }]
          */
-        "options"?: string;
+        "options"?: {
+    /** 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;
+  }[];
         /**
           * 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 in the field before they start typing. The placeholder is displayed only when the filterable option is enabled.
          */
@@ -4252,11 +4342,23 @@ declare namespace LocalJSX {
          */
         "open"?: boolean;
         /**
-          * List of options available in the multiselect.
-          * @description The options are passed as a JSON string.
-          * @example options='[{"label": "Option 1", "value": "option1"}, {"label": "Option 2", "value": "option2"}]'
+          * List of options used to automatically generate dropdown items. This provides an alternative to using the slot manually.
+          * @example options=[{  "label": "Option 1",  "value": "option1", }, {  "label": "Option 2",  "value": "option2", }]
          */
-        "options"?: string;
+        "options"?: {
+    /** Label to display for the option */
+    label: string;
+    /** Value associated with the option */
+    value: string;
+    /** Whether this option is a divider */
+    isDivider?: boolean;
+    /** Whether this option is disabled */
+    disabled?: boolean;
+    /** Additional description for the option */
+    description?: string;
+    /** Whether this option is pre-checked */
+    checked?: boolean;
+  }[];
         /**
           * Display temporary text inside the input field.
          */
@@ -5030,9 +5132,43 @@ declare namespace LocalJSX {
          */
         "disable-close-on-select"?: boolean;
         /**
-          * (New feature) Items to display in the menu, provided as a JSON string. Format: [{ label: string, value?: string, disabled?: boolean, hasSubmenu?: boolean, ... }]
+          * List of items used to automatically generate dropdown items. This provides an alternative to using the slot manually.
+          * @example items = [{  "label": "Option 1",  "value": "option1", }, {  "label": "Option 2",  "value": "option2", }]
          */
-        "items"?: string;
+        "items"?: {
+    /**
+     * The label of the menu item.
+     */
+    label: string;
+    /**
+     * The value of the menu item.
+     */
+    value?: string;
+    /**
+     * Whether the menu item is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the menu item has a submenu.
+     */
+    hasSubmenu?: boolean;
+    /**
+     * The icon of the menu item.
+     */
+    icon?: string;
+    /**
+     * The shortcut of the menu item.
+     */
+    shortcut?: string;
+    /**
+     * Whether the menu item is nested.
+     */
+    nested?: boolean;
+    /**
+     * The submenu items of the menu item.
+     */
+    submenuItems?: InstanceType<typeof NvMenu>['items'];
+  }[];
         /**
           * Use this if the menu is nested inside another menu. This will prevent the parent menu from closing when the child menu is opened.
          */
@@ -5341,7 +5477,6 @@ declare namespace LocalJSX {
         "nv-alert": NvAlert;
         "nv-avatar": NvAvatar;
         "nv-badge": NvBadge;
-        "nv-base": NvBase;
         "nv-breadcrumb": NvBreadcrumb;
         "nv-breadcrumbs": NvBreadcrumbs;
         "nv-button": NvButton;
@@ -5387,10 +5522,6 @@ declare module "@stencil/core" {
             "nv-alert": LocalJSX.NvAlert & JSXBase.HTMLAttributes<HTMLNvAlertElement>;
             "nv-avatar": LocalJSX.NvAvatar & JSXBase.HTMLAttributes<HTMLNvAvatarElement>;
             "nv-badge": LocalJSX.NvBadge & JSXBase.HTMLAttributes<HTMLNvBadgeElement>;
-            /**
-             * @deprecated This is only to help with the migration from v2 to v3. It will be removed in the next major release.
-             */
-            "nv-base": LocalJSX.NvBase & JSXBase.HTMLAttributes<HTMLNvBaseElement>;
             "nv-breadcrumb": LocalJSX.NvBreadcrumb & JSXBase.HTMLAttributes<HTMLNvBreadcrumbElement>;
             "nv-breadcrumbs": LocalJSX.NvBreadcrumbs & JSXBase.HTMLAttributes<HTMLNvBreadcrumbsElement>;
             "nv-button": LocalJSX.NvButton & JSXBase.HTMLAttributes<HTMLNvButtonElement>;

package/dist/vscode-data.json

@@ -207,14 +207,6 @@
         }
       ]
     },
-    {
-      "name": "nv-base",
-      "description": {
-        "kind": "markdown",
-        "value": "This is the base component for v2 and serves as the foundational component for all Nova components. It provides the basic structure for Nova components and should be used as the base for creating other components. This component should not be used directly in the application."
-      },
-      "attributes": []
-    },
     {
       "name": "nv-breadcrumb",
       "description": {
@@ -456,6 +448,10 @@
           "name": "enable-global-filter",
           "description": "Whether to enable global filtering for the data grid.\nThis allows users to search across all columns for a specific value.\nThe search is case-insensitive and supports partial matches.\nIt use string.includes() to match the search term."
         },
+        {
+          "name": "enable-pagination",
+          "description": "Whether to enable pagination for the data grid."
+        },
         {
           "name": "fallback-value",
           "description": "Fallback value to be displayed when data is not available"
@@ -467,6 +463,10 @@
         {
           "name": "no-data-message",
           "description": "The message to display when there is no data available."
+        },
+        {
+          "name": "page-size",
+          "description": "The number of rows to display per page."
         }
       ]
     },
@@ -1175,10 +1175,6 @@
           "name": "open",
           "description": "State of the dropdown popover."
         },
-        {
-          "name": "options",
-          "description": "List of options available in the dropdown. The options are passed as a JSON\nstring."
-        },
         {
           "name": "placeholder",
           "description": "Display temporary text inside the input field to give users a hint about\nwhat to type. It's a great way to provide examples or suggestions directly\nin the field before they start typing.\nThe placeholder is displayed only when the filterable option is enabled."
@@ -1516,10 +1512,6 @@
           "name": "open",
           "description": "State of the multiselect popover."
         },
-        {
-          "name": "options",
-          "description": "List of options available in the multiselect."
-        },
         {
           "name": "placeholder",
           "description": "Display temporary text inside the input field."
@@ -2785,10 +2777,6 @@
           "name": "disable-close-on-select",
           "description": "Use this to disable the menu from closing automatically when a menu item is\nselected."
         },
-        {
-          "name": "items",
-          "description": "(New feature) Items to display in the menu, provided as a JSON string.\nFormat: [{ label: string, value?: string, disabled?: boolean, hasSubmenu?: boolean, ... }]"
-        },
         {
           "name": "nested",
           "description": "Use this if the menu is nested inside another menu. This will prevent the\nparent menu from closing when the child menu is opened."