@toolbox-web/grid 0.0.7 → 0.1.0

package/custom-elements.json

@@ -276,6 +276,14 @@
               },
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "#resizeCleanup",
+              "privacy": "private",
+              "type": {
+                "text": "() => void | undefined"
+              }
+            },
             {
               "kind": "field",
               "name": "_rows",
@@ -284,6 +292,15 @@
               },
               "default": "[]"
             },
+            {
+              "kind": "field",
+              "name": "#baseColumns",
+              "privacy": "private",
+              "type": {
+                "text": "ColumnInternal<T>[]"
+              },
+              "default": "[]"
+            },
             {
               "kind": "field",
               "name": "_columns",
@@ -1451,6 +1468,15 @@
               },
               "description": "Reset column state to initial configuration.\nClears all user modifications (order, width, visibility, sort)."
             },
+            {
+              "kind": "field",
+              "name": "isToolPanelOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Check if the tool panel is currently open.",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "activeToolPanel",
@@ -1458,6 +1484,16 @@
                 "text": "string | null"
               },
               "description": "Get the currently active tool panel ID, or null if none is open.",
+              "deprecated": "Use isToolPanelOpen and expandedToolPanelSections instead.",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "expandedToolPanelSections",
+              "type": {
+                "text": "string[]"
+              },
+              "description": "Get the IDs of expanded accordion sections.",
               "readonly": true
             },
             {
@@ -1468,29 +1504,75 @@
                   "text": "void"
                 }
               },
+              "description": "Open the tool panel (accordion view with all registered panels)."
+            },
+            {
+              "kind": "method",
+              "name": "closeToolPanel",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Close the tool panel."
+            },
+            {
+              "kind": "method",
+              "name": "toggleToolPanel",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Toggle the tool panel open/closed."
+            },
+            {
+              "kind": "method",
+              "name": "toggleToolPanelSection",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
               "parameters": [
                 {
-                  "name": "panelId",
+                  "name": "sectionId",
                   "type": {
                     "text": "string"
                   }
                 }
               ],
-              "description": "Open a tool panel by ID.\nCloses any currently open panel first."
+              "description": "Toggle an accordion section expanded/collapsed.\nOnly one section can be expanded at a time (exclusive accordion).\nWhen there's only one panel, toggling is disabled (always expanded)."
             },
             {
               "kind": "method",
-              "name": "closeToolPanel",
+              "name": "#updateAccordionSectionState",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
               },
-              "description": "Close the currently open tool panel."
+              "parameters": [
+                {
+                  "name": "sectionId",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "expanded",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "description": "Update accordion section visual state."
             },
             {
               "kind": "method",
-              "name": "toggleToolPanel",
+              "name": "#renderAccordionSectionContent",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
@@ -1498,13 +1580,13 @@
               },
               "parameters": [
                 {
-                  "name": "panelId",
+                  "name": "sectionId",
                   "type": {
                     "text": "string"
                   }
                 }
               ],
-              "description": "Toggle a tool panel open/closed."
+              "description": "Render content for a single accordion section."
             },
             {
               "kind": "method",

package/index.d.ts

@@ -6,6 +6,9 @@ export declare interface ActivateCellDetail {
     col: number;
 }
 
+/** Available aggregation function types */
+declare type AggFunc = 'sum' | 'avg' | 'count' | 'min' | 'max' | 'first' | 'last';
+
 /**
  * Aggregators Core Registry
  *
@@ -1165,23 +1168,37 @@ export declare class DataGridElement<T = any> extends HTMLElement implements Int
      * Clears all user modifications (order, width, visibility, sort).
      */
     resetColumnState(): void;
+    /**
+     * Check if the tool panel is currently open.
+     */
+    get isToolPanelOpen(): boolean;
     /**
      * Get the currently active tool panel ID, or null if none is open.
+     * @deprecated Use isToolPanelOpen and expandedToolPanelSections instead.
      */
     get activeToolPanel(): string | null;
     /**
-     * Open a tool panel by ID.
-     * Closes any currently open panel first.
+     * Get the IDs of expanded accordion sections.
+     */
+    get expandedToolPanelSections(): string[];
+    /**
+     * Open the tool panel (accordion view with all registered panels).
      */
-    openToolPanel(panelId: string): void;
+    openToolPanel(): void;
     /**
-     * Close the currently open tool panel.
+     * Close the tool panel.
      */
     closeToolPanel(): void;
     /**
-     * Toggle a tool panel open/closed.
+     * Toggle the tool panel open/closed.
      */
-    toggleToolPanel(panelId: string): void;
+    toggleToolPanel(): void;
+    /**
+     * Toggle an accordion section expanded/collapsed.
+     * Only one section can be expanded at a time (exclusive accordion).
+     * When there's only one panel, toggling is disabled (always expanded).
+     */
+    toggleToolPanelSection(sectionId: string): void;
     /**
      * Get registered tool panel definitions.
      */
@@ -1346,8 +1363,6 @@ export declare interface ExternalMountViewDetail<TRow = any> {
 
 /** Configuration options for the filtering plugin */
 export declare interface FilterConfig {
-    /** Whether filtering is enabled (default: true) */
-    enabled?: boolean;
     /** Debounce delay in ms for filter input (default: 300) */
     debounceMs?: number;
     /** Whether text filtering is case sensitive (default: false) */
@@ -1446,6 +1461,15 @@ export declare interface GetRowsResult {
     lastRow?: number;
 }
 
+/**
+ * Get a value-based aggregator function.
+ * Used by Pivot plugin and other features that aggregate pre-extracted values.
+ *
+ * @param aggFunc - Aggregation function name ('sum', 'avg', 'count', 'min', 'max', 'first', 'last')
+ * @returns Aggregator function that takes number[] and returns number
+ */
+export declare function getValueAggregator(aggFunc: string): ValueAggregatorFn;
+
 /**
  * CSS class names used in the grid's shadow DOM.
  * Use these when adding/removing classes or querying elements.
@@ -1641,6 +1665,8 @@ export declare interface GridIcons {
     submenuArrow?: IconValue;
     /** Drag handle icon for reordering. Default: '⋮⋮' */
     dragHandle?: IconValue;
+    /** Tool panel toggle icon in toolbar. Default: '☰' */
+    toolPanel?: IconValue;
 }
 
 /**
@@ -1666,8 +1692,6 @@ export declare const GridSelectors: {
 
 /** Configuration options for the row grouping plugin */
 export declare interface GroupingRowsConfig {
-    /** Whether the plugin is enabled (default: true) */
-    enabled?: boolean;
     /**
      * Callback to determine group path for a row.
      * Return an array of group keys, a single key, null/false to skip grouping.
@@ -1806,8 +1830,6 @@ export declare const listAggregators: () => string[];
 
 /** Configuration options for the multi-sort plugin */
 export declare interface MultiSortConfig {
-    /** Whether multi-sort is enabled (default: true) */
-    enabled?: boolean;
     /** Maximum number of columns to sort by (default: 3) */
     maxSortColumns?: number;
     /** Whether to show sort order badges (1, 2, 3) on headers (default: true) */
@@ -1841,12 +1863,17 @@ export declare interface PinnedRowsPanel {
 }
 
 export declare interface PivotConfig {
-    enabled?: boolean;
+    /** Whether pivot view is active on load (default: true when fields are configured) */
+    active?: boolean;
     rowGroupFields?: string[];
     columnGroupFields?: string[];
     valueFields?: PivotValueField[];
     showTotals?: boolean;
     showGrandTotal?: boolean;
+    /** Whether groups are expanded by default (default: true) */
+    defaultExpanded?: boolean;
+    /** Indent width per depth level in pixels (default: 20) */
+    indentWidth?: number;
 }
 
 export declare interface PivotResult {
@@ -1857,18 +1884,27 @@ export declare interface PivotResult {
 }
 
 declare interface PivotRow {
+    /** Unique key for this row (hierarchical path) */
     rowKey: string;
+    /** Display label for this row */
     rowLabel: string;
+    /** Depth level (0 = top level) */
     depth: number;
+    /** Aggregated values by column key */
     values: Record<string, number | null>;
+    /** Row total across all columns */
     total?: number;
+    /** Whether this row has children (is a group header) */
     isGroup: boolean;
+    /** Child rows (for hierarchical grouping) */
     children?: PivotRow[];
+    /** Number of data rows in this group */
+    rowCount?: number;
 }
 
 export declare interface PivotValueField {
     field: string;
-    aggFunc: 'sum' | 'avg' | 'count' | 'min' | 'max' | 'first' | 'last';
+    aggFunc: AggFunc;
     header?: string;
 }
 
@@ -2183,6 +2219,15 @@ export declare interface RowGroupRenderConfig {
 
 export declare const runAggregator: (ref: AggregatorRef_2 | undefined, rows: any[], field: string, column?: any) => any;
 
+/**
+ * Run a value-based aggregator on a set of values.
+ *
+ * @param aggFunc - Aggregation function name
+ * @param values - Array of numbers to aggregate
+ * @returns Aggregated result
+ */
+export declare function runValueAggregator(aggFunc: string, values: number[]): number;
+
 /**
  * Scroll event
  */
@@ -2297,7 +2342,7 @@ export declare class SelectionPlugin extends BaseGridPlugin<SelectionConfig> {
      * Set selected ranges programmatically.
      */
     setRanges(ranges: CellRange[]): void;
-    readonly styles = "\n    /* Prevent text selection during range drag */\n    :host .selecting .data-grid-row > .cell {\n      user-select: none;\n    }\n\n    /* Row selection - use accent color for row focus */\n    :host .data-grid-row.row-focus {\n      background-color: var(--tbw-focus-background, rgba(from var(--tbw-color-accent) r g b / 12%));\n    }\n\n    /* Disable cell-focus outline in row mode - row is the focus unit */\n    :host([data-selection-mode=\"row\"]) .cell-focus {\n      outline: none;\n    }\n\n    /* Selection cell styles - for range mode */\n    :host .data-grid-row > .cell.selected {\n      background-color: var(--tbw-range-selection-bg);\n    }\n    :host .data-grid-row > .cell.selected.top {\n      border-top: 2px solid var(--tbw-range-border-color);\n    }\n    :host .data-grid-row > .cell.selected.bottom {\n      border-bottom: 2px solid var(--tbw-range-border-color);\n    }\n    :host .data-grid-row > .cell.selected.first {\n      border-left: 2px solid var(--tbw-range-border-color);\n    }\n    :host .data-grid-row > .cell.selected.last {\n      border-right: 2px solid var(--tbw-range-border-color);\n    }\n  ";
+    readonly styles: string;
 }
 
 export declare interface ServerSideDataSource {
@@ -2411,13 +2456,13 @@ export declare interface ToolPanelConfig {
 export declare interface ToolPanelDefinition {
     /** Unique panel ID */
     id: string;
-    /** Panel title shown in header */
+    /** Panel title shown in accordion header */
     title: string;
-    /** Icon for toolbar button (SVG string or emoji) */
-    icon: string;
-    /** Toolbar button tooltip */
+    /** Icon for accordion section header (optional, emoji or SVG) */
+    icon?: string;
+    /** Tooltip for accordion section header */
     tooltip?: string;
-    /** Panel content factory - called when panel opens */
+    /** Panel content factory - called when panel section opens */
     render: (container: HTMLElement) => void | (() => void);
     /** Called when panel closes (for cleanup) */
     onClose?: () => void;
@@ -2432,8 +2477,6 @@ export declare interface ToolPanelDefinition {
  */
 /** Configuration options for the tree plugin */
 export declare interface TreeConfig {
-    /** Whether tree functionality is enabled (default: true) */
-    enabled?: boolean;
     /** Field name containing child rows (default: 'children') */
     childrenField?: string;
     /** Auto-detect tree structure from data (default: true) */
@@ -2529,11 +2572,13 @@ export declare class TreePlugin extends BaseGridPlugin<TreeConfig> {
      * Expand all ancestors of a node to make it visible.
      */
     expandToKey(key: string): void;
-    readonly styles = "\n    .tree-toggle {\n      cursor: pointer;\n      user-select: none;\n      transition: transform 0.2s;\n    }\n    .tree-toggle:hover {\n      color: var(--tbw-tree-accent, var(--tbw-color-accent));\n    }\n  ";
+    readonly styles: string;
 }
 
 export declare const unregisterAggregator: (name: string) => void;
 
+export declare type ValueAggregatorFn = (values: number[]) => number;
+
 /** Virtual window bookkeeping; modified in-place as scroll position changes. */
 declare interface VirtualState {
     enabled: boolean;