@nova-design-system/nova-webcomponents 3.15.0 → 3.16.0

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

@@ -0,0 +1,129 @@
+/**
+ * Table utility functions and constants for nv-table component
+ *
+ * This module contains pure utility functions for table column resizing logic,
+ * pointer event handling calculations, and related helper functions.
+ */
+/**
+ * Constants for table column resizing behavior
+ */
+export declare const TABLE_CONSTANTS: Readonly<{
+    /** Handle width for fine pointers (mouse) in pixels */
+    readonly HANDLE_W: 12;
+    /** Handle width for coarse pointers (touch) in pixels */
+    readonly HANDLE_W_TOUCH: 24;
+    /** Minimum column width in pixels */
+    readonly MIN_W: 40;
+}>;
+/**
+ * Determines the appropriate handle width based on the current pointer type
+ * @returns {number} Handle width in pixels (10px for fine pointers, 24px for coarse/touch)
+ */
+export declare function getHandleWidthForCurrentPointer(): number;
+/**
+ * Calculates the pointer's horizontal offset within a table cell
+ * @param {PointerEvent} event - The pointer event
+ * @param {HTMLTableCellElement} cell - The table cell element
+ * @returns {number} The horizontal offset from the left edge of the cell
+ */
+export declare function getPointerOffsetInCell(event: PointerEvent, cell: HTMLTableCellElement): number;
+/**
+ * Determines if the pointer is within the resize handle area of a table cell
+ * @param {number} offsetX - Horizontal offset within the cell
+ * @param {number} cellWidth - Total width of the cell
+ * @param {number} handleWidth - Width of the resize handle area
+ * @returns {boolean} True if the pointer is in the resize handle area
+ */
+export declare function isInResizeHandle(offsetX: number, cellWidth: number, handleWidth: number): boolean;
+/**
+ * Calculates the new column width based on resize delta and constraints
+ * @param {number} startWidth - Original width of the column
+ * @param {number} delta - Change in pixels from the start position
+ * @param {number} minWidth - Minimum allowed width for the column
+ * @returns {number} The calculated new width, constrained by minimum
+ */
+export declare function calculateNewWidth(startWidth: number, delta: number, minWidth?: number): number;
+/**
+ * Validates that a table cell element is suitable for resizing
+ * @param {HTMLElement | null} element - The element to check
+ * @returns {element is HTMLTableCellElement} Type guard for table cell elements
+ */
+export declare function isValidTableCell(element: HTMLElement | null): element is HTMLTableCellElement;
+/**
+ * Finds the closest table cell element from an event target
+ * @param {EventTarget | null} target - The event target
+ * @returns {HTMLTableCellElement | null} The closest table cell or null
+ */
+export declare function getClosestTableCell(target: EventTarget | null): HTMLTableCellElement | null;
+/**
+ * Sets up pointer capture for consistent drag behavior across browsers
+ * @param {HTMLTableCellElement} cell - The table cell element
+ * @param {number} pointerId - The pointer ID from the pointer event
+ * @returns {boolean} True if capture was successfully set
+ */
+export declare function setPointerCapture(cell: HTMLTableCellElement, pointerId: number): boolean;
+/**
+ * Releases pointer capture
+ * @param {HTMLTableCellElement} cell - The table cell element
+ * @param {number} pointerId - The pointer ID from the pointer event
+ * @returns {boolean} True if release was successful
+ */
+export declare function releasePointerCapture(cell: HTMLTableCellElement, pointerId: number): boolean;
+/**
+ * Prevents text selection during drag operations
+ * @param {boolean} prevent - Whether to prevent selection
+ */
+export declare function setUserSelectPrevention(prevent: boolean): void;
+/**
+ * Gets the current width of a table cell element
+ * @param {HTMLTableCellElement} cell - The table cell element
+ * @returns {number} The current width in pixels
+ */
+export declare function getCellWidth(cell: HTMLTableCellElement): number;
+/**
+ * Applies a width to a table cell element
+ * @param {HTMLTableCellElement} cell - The table cell element
+ * @param {number} width - The width to apply in pixels
+ */
+export declare function setCellWidth(cell: HTMLTableCellElement, width: number): void;
+/**
+ * Calculates the delta (change) in horizontal position between two pointer events
+ * @param {number} currentX - Current clientX position
+ * @param {number} startX - Starting clientX position
+ * @returns {number} The horizontal delta
+ */
+export declare function calculatePointerDelta(currentX: number, startX: number): number;
+/**
+ * Interface for resize operation state
+ */
+export interface ResizeState {
+    /** The table cell being resized */
+    resizingCell: HTMLTableCellElement;
+    /** The pointer ID for this resize operation */
+    pointerId: number;
+    /** Starting X coordinate */
+    startX: number;
+    /** Starting width of the cell */
+    startWidth: number;
+}
+/**
+ * Creates a new resize state object
+ * @param {HTMLTableCellElement} cell - The cell being resized
+ * @param {PointerEvent} event - The initiating pointer event
+ * @returns {ResizeState} A new resize state object
+ */
+export declare function createResizeState(cell: HTMLTableCellElement, event: PointerEvent): ResizeState;
+/**
+ * Validates that a resize state is active and matches the given pointer event
+ * @param {ResizeState | null} state - The current resize state
+ * @param {PointerEvent} event - The pointer event to validate against
+ * @returns {boolean} True if the state is valid for this event
+ */
+export declare function isValidResizeState(state: ResizeState | null, event: PointerEvent): boolean;
+/**
+ * Updates the width of a cell during a resize operation
+ * @param {ResizeState} state - The current resize state
+ * @param {PointerEvent} event - The current pointer event
+ * @param {number} minWidth - Minimum width constraint
+ */
+export declare function updateCellWidthFromResize(state: ResizeState, event: PointerEvent, minWidth?: number): void;

package/dist/types/components/nv-table/test/nv-table.utils.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -1,8 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { ToggleButtonEmphasis, ToggleButtonSize } from '../../utils/constants';
 /**
- * @deprecated [EXPERIMENTAL]
- * @experimental This component is still in development and subject to change in future releases.
  * @slot default - Child content of the component, pass the nv-togglebutton components here.
  */
 export declare class NvTogglebuttongroup {

package/dist/types/components.d.ts

@@ -10,13 +10,11 @@ import { Column } from "./interfaces/Column";
 import { Element } from "./stencil-public-runtime";
 import { IconName } from "./components/nv-icon/nv-icons";
 import { Placement, Strategy } from "@floating-ui/dom";
-import { ColumnConfig } from "./interfaces/ColumnConfig";
 export { ButtonEmphasis, ButtonSize, ButtonType, DeprecatedSemanticColors, FeedbackColors, GlobalFilterPosition, IconButtonShape, LabelPlacement, LoaderColors, NotificationEmphasis, NotificationPosition, SemanticSizes, TextInputAutocomplete, ToggleButtonEmphasis, ToggleButtonSize } from "./utils/constants";
 export { Column } from "./interfaces/Column";
 export { Element } from "./stencil-public-runtime";
 export { IconName } from "./components/nv-icon/nv-icons";
 export { Placement, Strategy } from "@floating-ui/dom";
-export { ColumnConfig } from "./interfaces/ColumnConfig";
 export namespace Components {
     interface NvAccordion {
         /**
@@ -2694,70 +2692,7 @@ export namespace Components {
          */
         "vertical": boolean;
     }
-    /**
-     * @deprecated [EXPERIMENTAL]
-     * @experimental - This component is used as a base for the nv-datagrid component. Do not use it directly.
-     */
     interface NvTable {
-        /**
-          * Configuration of the columns of the table
-         */
-        "columnsConfig": ColumnConfig[];
-        /**
-          * Configuration of the columns of the table
-         */
-        "columnsConfigJson"?: string;
-        /**
-         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
-         */
-        "columns-config-json"?: string;
-        /**
-          * Data to be displayed in the table
-         */
-        "data": any[];
-        /**
-          * Data to be displayed in the table
-         */
-        "dataJson"?: string;
-        /**
-         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
-         */
-        "data-json"?: string;
-        /**
-          * Fallback value to be displayed when data is not available
-         */
-        "fallbackValue": string;
-        /**
-         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
-         */
-        "fallback-value"?: string;
-        /**
-          * The message to display when there are no columns or data available.
-          * @default 'No data or columns available to display.'
-         */
-        "noColumnsNoDataMessage": string;
-        /**
-         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
-         */
-        "no-columns-no-data-message"?: string;
-        /**
-          * Message to be displayed when no data is available
-         */
-        "noDataMessage": string;
-        /**
-         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
-         */
-        "no-data-message"?: string;
-    }
-    interface NvTablecolumn {
-        /**
-          * Header of the column to be displayed
-         */
-        "header"?: string;
-        /**
-          * Name of the column and data accessor
-         */
-        "name": string;
     }
     interface NvToggle {
         /**
@@ -2835,10 +2770,6 @@ export namespace Components {
          */
         "value": string;
     }
-    /**
-     * @deprecated [EXPERIMENTAL]
-     * @experimental This component is still in development and subject to change in future releases.
-     */
     interface NvTogglebuttongroup {
         /**
           * Make it more or less visually prominent to users.
@@ -2997,10 +2928,6 @@ export interface NvPopoverCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNvPopoverElement;
 }
-export interface NvTableCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLNvTableElement;
-}
 export interface NvToggleCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNvToggleElement;
@@ -3019,10 +2946,7 @@ export interface NvTooltipCustomEvent<T> extends CustomEvent<T> {
 }
 declare global {
     interface HTMLNvAccordionElementEventMap {
-        "openChanged": {
-    /** Index of open items */
-    openIndexes: number[];
-  };
+        "openIndexesChanged": number[];
     }
     interface HTMLNvAccordionElement extends Components.NvAccordion, HTMLStencilElement {
         addEventListener<K extends keyof HTMLNvAccordionElementEventMap>(type: K, listener: (this: HTMLNvAccordionElement, ev: NvAccordionCustomEvent<HTMLNvAccordionElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3664,43 +3588,12 @@ declare global {
         prototype: HTMLNvStackElement;
         new (): HTMLNvStackElement;
     };
-    interface HTMLNvTableElementEventMap {
-        "action": {
-    /**
-     * Key action to be performed
-     */
-    keyAction: string;
-
-    /**
-     * Details of the action to be performed
-     */
-    details: any;
-  };
-    }
-    /**
-     * @deprecated [EXPERIMENTAL]
-     * @experimental - This component is used as a base for the nv-datagrid component. Do not use it directly.
-     */
     interface HTMLNvTableElement extends Components.NvTable, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLNvTableElementEventMap>(type: K, listener: (this: HTMLNvTableElement, ev: NvTableCustomEvent<HTMLNvTableElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLNvTableElementEventMap>(type: K, listener: (this: HTMLNvTableElement, ev: NvTableCustomEvent<HTMLNvTableElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLNvTableElement: {
         prototype: HTMLNvTableElement;
         new (): HTMLNvTableElement;
     };
-    interface HTMLNvTablecolumnElement extends Components.NvTablecolumn, HTMLStencilElement {
-    }
-    var HTMLNvTablecolumnElement: {
-        prototype: HTMLNvTablecolumnElement;
-        new (): HTMLNvTablecolumnElement;
-    };
     interface HTMLNvToggleElementEventMap {
         "checkedChanged": boolean;
     }
@@ -3743,10 +3636,6 @@ declare global {
     interface HTMLNvTogglebuttongroupElementEventMap {
         "valueChanged": string[];
     }
-    /**
-     * @deprecated [EXPERIMENTAL]
-     * @experimental This component is still in development and subject to change in future releases.
-     */
     interface HTMLNvTogglebuttongroupElement extends Components.NvTogglebuttongroup, HTMLStencilElement {
         addEventListener<K extends keyof HTMLNvTogglebuttongroupElementEventMap>(type: K, listener: (this: HTMLNvTogglebuttongroupElement, ev: NvTogglebuttongroupCustomEvent<HTMLNvTogglebuttongroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3821,7 +3710,6 @@ declare global {
         "nv-row": HTMLNvRowElement;
         "nv-stack": HTMLNvStackElement;
         "nv-table": HTMLNvTableElement;
-        "nv-tablecolumn": HTMLNvTablecolumnElement;
         "nv-toggle": HTMLNvToggleElement;
         "nv-togglebutton": HTMLNvTogglebuttonElement;
         "nv-togglebuttongroup": HTMLNvTogglebuttongroupElement;
@@ -3853,11 +3741,9 @@ declare namespace LocalJSX {
         "mode"?: 'accordion' | 'multi';
         /**
           * Event emitted when an item's open state changes
+          * @bind openIndexes
          */
-        "onOpenChanged"?: (event: NvAccordionCustomEvent<{
-    /** Index of open items */
-    openIndexes: number[];
-  }>) => void;
+        "onOpenIndexesChanged"?: (event: NvAccordionCustomEvent<number[]>) => void;
         /**
           * Index of open items (external control possible)
          */
@@ -6654,84 +6540,7 @@ declare namespace LocalJSX {
          */
         "vertical"?: boolean;
     }
-    /**
-     * @deprecated [EXPERIMENTAL]
-     * @experimental - This component is used as a base for the nv-datagrid component. Do not use it directly.
-     */
     interface NvTable {
-        /**
-          * Configuration of the columns of the table
-         */
-        "columnsConfig"?: ColumnConfig[];
-        /**
-          * Configuration of the columns of the table
-         */
-        "columnsConfigJson"?: string;
-        /**
-         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
-         */
-        "columns-config-json"?: string;
-        /**
-          * Data to be displayed in the table
-         */
-        "data"?: any[];
-        /**
-          * Data to be displayed in the table
-         */
-        "dataJson"?: string;
-        /**
-         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
-         */
-        "data-json"?: string;
-        /**
-          * Fallback value to be displayed when data is not available
-         */
-        "fallbackValue"?: string;
-        /**
-         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
-         */
-        "fallback-value"?: string;
-        /**
-          * The message to display when there are no columns or data available.
-          * @default 'No data or columns available to display.'
-         */
-        "noColumnsNoDataMessage"?: string;
-        /**
-         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
-         */
-        "no-columns-no-data-message"?: string;
-        /**
-          * Message to be displayed when no data is available
-         */
-        "noDataMessage"?: string;
-        /**
-         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
-         */
-        "no-data-message"?: string;
-        /**
-          * *************************************************************************
-         */
-        "onAction"?: (event: NvTableCustomEvent<{
-    /**
-     * Key action to be performed
-     */
-    keyAction: string;
-
-    /**
-     * Details of the action to be performed
-     */
-    details: any;
-  }>) => void;
-    }
-    interface NvTablecolumn {
-        /**
-          * Header of the column to be displayed
-         */
-        "header"?: string;
-        /**
-          * Name of the column and data accessor
-         */
-        "name": string;
     }
     interface NvToggle {
         /**
@@ -6823,10 +6632,6 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
-    /**
-     * @deprecated [EXPERIMENTAL]
-     * @experimental This component is still in development and subject to change in future releases.
-     */
     interface NvTogglebuttongroup {
         /**
           * Make it more or less visually prominent to users.
@@ -6927,7 +6732,6 @@ declare namespace LocalJSX {
         "nv-row": NvRow;
         "nv-stack": NvStack;
         "nv-table": NvTable;
-        "nv-tablecolumn": NvTablecolumn;
         "nv-toggle": NvToggle;
         "nv-togglebutton": NvTogglebutton;
         "nv-togglebuttongroup": NvTogglebuttongroup;
@@ -6995,18 +6799,9 @@ declare module "@stencil/core" {
              * @deprecated Please use tailwind classes instead
              */
             "nv-stack": LocalJSX.NvStack & JSXBase.HTMLAttributes<HTMLNvStackElement>;
-            /**
-             * @deprecated [EXPERIMENTAL]
-             * @experimental - This component is used as a base for the nv-datagrid component. Do not use it directly.
-             */
             "nv-table": LocalJSX.NvTable & JSXBase.HTMLAttributes<HTMLNvTableElement>;
-            "nv-tablecolumn": LocalJSX.NvTablecolumn & JSXBase.HTMLAttributes<HTMLNvTablecolumnElement>;
             "nv-toggle": LocalJSX.NvToggle & JSXBase.HTMLAttributes<HTMLNvToggleElement>;
             "nv-togglebutton": LocalJSX.NvTogglebutton & JSXBase.HTMLAttributes<HTMLNvTogglebuttonElement>;
-            /**
-             * @deprecated [EXPERIMENTAL]
-             * @experimental This component is still in development and subject to change in future releases.
-             */
             "nv-togglebuttongroup": LocalJSX.NvTogglebuttongroup & JSXBase.HTMLAttributes<HTMLNvTogglebuttongroupElement>;
             "nv-tooltip": LocalJSX.NvTooltip & JSXBase.HTMLAttributes<HTMLNvTooltipElement>;
         }

package/dist/vscode-data.json

@@ -3888,6 +3888,9 @@
             {
               "name": "git-branch"
             },
+            {
+              "name": "git-compare"
+            },
             {
               "name": "gps"
             },
@@ -4056,6 +4059,9 @@
             {
               "name": "map"
             },
+            {
+              "name": "master-data"
+            },
             {
               "name": "menu"
             },
@@ -4236,6 +4242,12 @@
             {
               "name": "qrcode"
             },
+            {
+              "name": "quotes-open"
+            },
+            {
+              "name": "quotes"
+            },
             {
               "name": "radar"
             },
@@ -4425,6 +4437,9 @@
             {
               "name": "spacing-vertical"
             },
+            {
+              "name": "sparkles"
+            },
             {
               "name": "speakerphone"
             },
@@ -4582,7 +4597,7 @@
               "name": "volume-3"
             },
             {
-              "name": "volume"
+              "name": "wallet"
             },
             {
               "name": "wand"
@@ -4896,47 +4911,9 @@
       "name": "nv-table",
       "description": {
         "kind": "markdown",
-        "value": "The nv-table is an example component that only show a simple table.\n\nThe `<table>` HTML element represents tabular data�that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data."
+        "value": "A semantic table container component that wraps around a native HTML table element, and enhances it with Nova styles and additional functionality. This component provides an advanced foundation for data tables with features like sticky positioning, column resizing, and row selection. If you are looking for a more complex table solution by passing in data to build the markup with additional features, check out the **datatable component**.\n\n**Key Features**\n\n- **Native Table Structure**: Uses standard HTML table elements (thead, tbody, tfoot, tr, th, td) as children\n- **Column Resizing**: Columns are resizable by default, with option to disable per column\n- **Sticky Positioning**: Headers and columns can stick during scrolling\n- **Row Selection**: Visual indication for selected rows\n- **Responsive Design**: Works seamlessly across different screen sizes\n- **Width Classes**: Support for Tailwind width classes to control column sizing\n\n**Data Attributes**\n\nThe nv-table component supports several data attributes to enhance functionality:\n\n**Sticky Positioning**\n- `data-sticky-top`: Apply to `<thead>` to make header stick to top during vertical scroll\n- `data-sticky-left`: Apply to `<th>` and `<td>` to make column stick to left during horizontal scroll\n- `data-sticky-right`: Apply to `<th>` and `<td>` to make column stick to right during horizontal scroll\n\n**Column Behavior**\n- `data-no-resize`: Apply to `<th>` to prevent column from being resizable\n- Width classes (e.g., `w-10`, `w-20`): Set initial column widths; columns without fixed widths grow to fill available space\n\n**Row Selection**\n- `data-selected`: Apply to `<tr>` to indicate the selected row with appropriate styling\n\n**Usage Notes**\n\n- For horizontal sticky columns, wrap the table in a container with `overflow-x: auto`\n- Sticky columns require the same data attribute on both header (`<th>`) and data cells (`<td>`)\n- Columns without width classes or `data-no-resize` will automatically grow to fill available space\n- Works with all standard table accessibility features and semantic markup"
       },
-      "attributes": [
-        {
-          "name": "columns-config-json",
-          "description": "Configuration of the columns of the table"
-        },
-        {
-          "name": "data-json",
-          "description": "Data to be displayed in the table"
-        },
-        {
-          "name": "fallback-value",
-          "description": "Fallback value to be displayed when data is not available"
-        },
-        {
-          "name": "no-columns-no-data-message",
-          "description": "The message to display when there are no columns or data available."
-        },
-        {
-          "name": "no-data-message",
-          "description": "Message to be displayed when no data is available"
-        }
-      ]
-    },
-    {
-      "name": "nv-tablecolumn",
-      "description": {
-        "kind": "markdown",
-        "value": "Helper Component for nv-table"
-      },
-      "attributes": [
-        {
-          "name": "header",
-          "description": "Header of the column to be displayed"
-        },
-        {
-          "name": "name",
-          "description": "Name of the column and data accessor"
-        }
-      ]
+      "attributes": []
     },
     {
       "name": "nv-toggle",