npm - @genesislcap/grid-pro - Versions diffs - 14.278.0 → 14.278.2 - Mend

@genesislcap/grid-pro 14.278.0 → 14.278.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/README.md +254 -442
package/package.json +13 -13

package/README.md CHANGED Viewed

@@ -60,7 +60,233 @@ import { rapidGridComponents } from '@genesislcap/rapid-grid-pro';
 provideDesignSystem().register(baseComponents, rapidGridComponents);
 ```
-### Attributes
+### Grid Pro Element Attributes
+The `<grid-pro>` element supports the following attributes and properties:
+#### Grid Attributes
+|Name|Type|Default|Description|
+|----|----|-------|-----------|
+| `:rowData` | `any[]` | - | **Manual data**: Array of row data for scenarios where you set data manually without using datasource components. |
+| `:gridComponents` | `{[componentName: string]: any}` | - | **Custom components**: Object containing custom AG Grid components (cell renderers, editors, filters). |
+| `:eventsAndCallbacks` | `GridProEventsAndCallbacks` | - | **AG Grid events**: Object containing AG Grid event handlers and callbacks. |
+| `:gridFontFace` | `string` | `defaultAgGridFontFace` | **Font configuration**: Font face configuration for AG Grid themes. |
+| `auto-cell-renderer-by-type` | `boolean` | `false` | **Genesis-specific**: Enable automatic cell renderer selection by data type. |
+| `only-template-col-defs` | `boolean` | `false` | **Genesis-specific**: Use only template-defined column definitions, ignore metadata. |
+| `grid-autosizing` | `boolean` | `false` | **Important**: Controls automatic column sizing on interaction. Disables manual column widths and local storage persistence of widths. |
+| `add-index` | `number` | `0` | Index position for new rows when using `applyTransaction` or `applyTransactionAsync`. |
+| `async-add` | `boolean` | `false` | Use `applyTransactionAsync` for add transactions (better performance for large datasets). |
+| `async-remove` | `boolean` | `false` | Use `applyTransactionAsync` for remove transactions (better performance for large datasets). |
+| `async-update` | `boolean` | `true` | Use `applyTransactionAsync` for update transactions (enabled by default for performance). |
+| `enable-cell-flashing` | `boolean` | `false` | Enable cell flashing animations when cell values change. |
+| `enable-row-flashing` | `boolean` | `false` | Enable row flashing animations for add transactions. |
+| `enabled-row-flashing` | `boolean` | `false` | **@deprecated** - Use `enable-row-flashing` instead. |
+| `persist-column-state-key` | `string` | - | **Key for persisting column state** in local browser or KV storage. Essential for maintaining user preferences. |
+| `persist-filter-model-key` | `string` | - | **Key for persisting filter model** in local browser or KV storage. Maintains filter state across sessions. |
+| `header-case-type` | `GridProCaseType` | `CONSTANT_CASE` | Transform header names: `camelCase`, `capitalCase`, `dotCase`, `headerCase`, `noCase`, `paramCase`, `pascalCase`, `pathCase`, `sentenceCase`, `snakeCase`. |
+| `column-component-name` | `string` | `grid-pro-column` | **Internal**: Name of the column component to use. |
+| `header-height` | `number` | - | Custom header height in pixels. Overrides theme defaults. |
+| `row-height` | `number` | - | Custom row height in pixels. Overrides theme defaults. |
+| `theme` | `string` | `alpine` | AG Grid theme name. Available: `alpine`, `alpine-dark`, `balham`, `balham-dark`, `material`. |
+| `pagination` | `boolean` | `false` | **Enables pagination**. Basic pagination works with AG Grid Community edition. **Enterprise features** like custom pagination components require AG Grid Enterprise. Works with both client-side and server-side datasources. |
+| `pagination-page-size` | `number` | `25` | Number of rows per page when pagination is enabled. |
+| `with-status-bar` | `boolean` | `false` | **Enterprise Feature**: Enables status bar at bottom of grid. **Requires AG Grid Enterprise module**. |
+| `:statusBarConfig` | `GridProStatusBarConfig` | `DEFAULT_STATUS_BAR_CONFIG` | **Enterprise Feature**: Configuration for status bar components. Must use binding syntax with observable property. |
+#### Status Bar Configuration
+**Enterprise License Required**: Status bar functionality requires the AG Grid Enterprise module. Status bar components will only be displayed if the Enterprise module is properly licensed and configured.
+**Important Datasource Behavior:**
+- **Client-side datasources**: All status bar components are available (`rows`, `maxRows`, `loadMore`, `reload`)
+- **Server-side datasources**: `loadMore` component is **automatically disabled** and will not be shown, even if configured
+```typescript
+interface GridProStatusBarConfig {
+  rows?: boolean;                                    // Enable row count component (default: true)
+  maxRows?: boolean;                                 // Enable max rows label-value component (default: false)
+  loadMore?: boolean | GridProStatusBarLoadMoreConfig; // Enable/configure load more button (CLIENT-SIDE ONLY)
+  reload?: boolean | GridProStatusBarReloadConfig;     // Enable/configure reload button
+}
+interface GridProStatusBarLoadMoreConfig {
+  onLoadMore?: () => void;    // Custom callback function (defaults to datasource.loadMore())
+  appearance?: string;        // Button appearance: 'accent', 'lightweight', 'neutral', 'outline', 'stealth'
+  tooltip?: string;          // Custom tooltip text
+}
+interface GridProStatusBarReloadConfig {
+  onReload?: () => void;     // Custom callback function (defaults to datasource restart/reload)
+  icon?: string;            // Custom icon name (default: 'refresh')
+  tooltip?: string;         // Custom tooltip text
+}
+```
+**Status Bar Component Availability by Datasource Type:**
+| Component | Client-Side Datasource | Server-Side Datasource | Description |
+|-----------|------------------------|-------------------------|-------------|
+| `rows` | Available | Available | Shows row count information |
+| `maxRows` | Available | Available | Shows maximum rows limit |
+| `loadMore` | Available | **Disabled** | Load more button (infinite scroll alternative) |
+| `reload` | Available | Available | Reload/refresh button |
+**Complete Usage Examples:**
+**1. Client-Side Grid with All Status Bar Components:**
+```typescript
+@customElement({
+  name: 'client-side-grid-example',
+  template: html`
+    <grid-pro
+      pagination
+      pagination-page-size="50"
+      with-status-bar
+      :statusBarConfig="${(x) => x.clientStatusBarConfig}"
+      persist-column-state-key="client-grid-columns"
+      persist-filter-model-key="client-grid-filters"
+      enable-row-flashing
+      enable-cell-flashing
+      header-case-type="headerCase"
+      theme="alpine-dark"
+      async-update
+      auto-cell-renderer-by-type>
+      <grid-pro-client-side-datasource
+        resource-name="ALL_TRADES"
+        max-rows="1000"
+      ></grid-pro-client-side-datasource>
+    </grid-pro>
+  `
+})
+export class ClientSideGridExample extends GenesisElement {
+  // Client-side datasource: ALL status bar components available
+  @observable clientStatusBarConfig: GridProStatusBarConfig = {
+    rows: true,              // Available
+    maxRows: true,           // Available
+    loadMore: {              // Available - shows load more button
+      appearance: 'accent',
+      tooltip: 'Load more trades from server'
+    },
+    reload: {                // Available
+      tooltip: 'Refresh all trade data'
+    }
+  };
+}
+```
+**2. Server-Side Grid (loadMore Automatically Disabled):**
+```typescript
+@customElement({
+  name: 'server-side-grid-example',
+  template: html`
+    <grid-pro
+      pagination
+      pagination-page-size="100"
+      with-status-bar
+      :statusBarConfig="${(x) => x.serverStatusBarConfig}"
+      persist-column-state-key="server-grid-columns"
+      enable-row-flashing
+      theme="balham">
+      <grid-pro-server-side-datasource
+        resource-name="ALL_TRADES"
+        max-rows="500"
+      ></grid-pro-server-side-datasource>
+    </grid-pro>
+  `
+})
+export class ServerSideGridExample extends GenesisElement {
+  // Server-side datasource: loadMore automatically disabled
+  @observable serverStatusBarConfig: GridProStatusBarConfig = {
+    rows: true,              // Available - shows row counts
+    maxRows: true,           // Available - shows max rows info
+    loadMore: true,          // DISABLED - even if true, will not show (by design when it is a server-side datasource)
+    reload: {                // Available - shows reload button
+      tooltip: 'Refresh trade data from server'
+    }
+  };
+}
+```
+**3. Manual Data Grid with Custom Components:**
+```typescript
+@customElement({
+  name: 'manual-data-grid',
+  template: html`
+    <grid-pro
+      :rowData="${(x) => x.rowData}"
+      :gridComponents="${(x) => x.gridComponents}"
+      :eventsAndCallbacks="${(x) => x.eventsAndCallbacks}"
+      theme="balham"
+      header-height="50"
+      persist-column-state-key="manual-grid-state"
+      enable-cell-flashing>
+    </grid-pro>
+  `
+})
+export class ManualDataGrid extends GenesisElement {
+  @observable rowData = [
+    { id: 1, name: 'John Doe', age: 30, department: 'Engineering' },
+    { id: 2, name: 'Jane Smith', age: 25, department: 'Marketing' },
+    // ... more data
+  ];
+  @observable gridComponents = {
+    customRenderer: CustomCellRenderer,
+    customEditor: CustomCellEditor,
+    customFilter: CustomFilter
+  };
+  @observable eventsAndCallbacks = {
+    onCellValueChanged: (event) => {
+      console.log('Cell value changed:', event);
+      // Handle cell value changes
+    },
+    onRowSelected: (event) => {
+      console.log('Row selected:', event);
+      // Handle row selection
+    },
+    onGridReady: (event) => {
+      console.log('Grid ready:', event);
+      // Grid initialization complete
+    }
+  };
+}
+```
+**4. Theme and Font Customization:**
+```typescript
+@customElement({
+  name: 'themed-grid',
+  template: html`
+    <grid-pro
+      theme="material"
+      :gridFontFace="${(x) => x.customFontFace}"
+      header-height="48"
+      row-height="42"
+      header-case-type="sentenceCase">
+      <grid-pro-server-side-datasource
+        resource-name="ALL_POSITIONS"
+      ></grid-pro-server-side-datasource>
+    </grid-pro>
+  `
+})
+export class ThemedGrid extends GenesisElement {
+  @observable customFontFace = `
+    @font-face {
+      font-family: 'CustomGridFont';
+      src: url('path/to/custom-font.woff2') format('woff2');
+    }
+  `;
+}
+```
+### Datasource Attributes
 There are many attributes that can be set on a datasource component.
@@ -112,7 +338,6 @@ There are additional attributes that can affect the behavior of a datasource com
 |Name|Type|Default|Description|
 |----|----|-------|-----------|
-| `pagination` | `boolean` | `false` | This option enables pagination if set to true, otherwise the behavior will be infinite-scroll.|
 | `zero-based-view-number` | `boolean` | `false` | This option, if set to true, will make the starting VIEW_NUMBER zero-based (starting from 0 instead of 1).|
 | `live-updates` | `boolean` | `false` | This option enables live updates for the grid if set to true.|
@@ -364,38 +589,38 @@ It's important to note that any client app can implement the other Row Models to
 | Feature | Client-Side | Server-Side | Notes |
 | --- | --- |--- | --- |
-| All Data in Client | ✓ | ✗ | Free |
-| Fetch Data as User Scrolls | ✗ | ✓ | Free |
+| All Data in Client | Yes | No | Free |
+| Fetch Data as User Scrolls | No | Yes | Free |
 | Row Sorting | (client) | (client OR server) our component is server-only | Free |
 | Row Filtering | (client) | (client OR server) our component is server-only | Free |
-| Quick Filter | ✓ | ✓ | Free |
-| Floating Filters | ✓ | ✓ | Free |
-| Dynamic Row Height | ✓ | ✓ | Free |
+| Quick Filter | Yes | Yes | Free |
+| Floating Filters | Yes | Yes | Free |
+| Dynamic Row Height | Yes | Yes | Free |
 | Row Grouping | (client) | (server) | Paid (Enterprise) |
 | Row Pivoting | (client) | (server) | Paid (Enterprise) |
-| Lazy Loading Row Groups | ✗ | ✓ | Paid (Enterprise) |
+| Lazy Loading Row Groups | No | Yes | Paid (Enterprise) |
 | Value Aggregation | (client) | (server) | Paid (Enterprise) |
-| Row Selection | ✓ | ✓ | Free |
-| Specify Selectable Rows | ✓ | ✓ | Free |
-| Header Checkbox Selection | ✓ | ✓ | Free |
-| Range Selection | ✓ | ✓ | Free |
-| Column Spanning | ✓ | ✓ | Free |
-| Column Pinning | ✓ | ✓ | Free |
-| Row Pinning | ✓ | ✓ | Free |
-| Pagination | ✓ | ✓ | Free |
-| Custom Filters | ✓ | ✓ | Free |
-| Cell Editors | ✓ | ✓ | Free |
-| Cell Renderers | ✓ | ✓ | Free |
-| Value Getter | ✓ | ✓ | Free |
-| Value Setter | ✓ | ✓ | Free |
-| Value Formatter | ✓ | ✓ | Free |
-| Value Parser | ✓ | ✓ | Free |
-| Full Width Rows | ✓ | ✓ | Free |
-| CSV Export | ✓ | (data on screen) | Free |
-| Excel Export | ✓ | (data on screen) | Paid (Enterprise) |
-| Clipboard Copy & Paste | ✓ | ✓ | Free |
-| Update via Transaction | ✓ | ✓ | Free |
-| Update via Async Transactions | ✓ | ✓ | Free |
+| Row Selection | Yes | Yes | Free |
+| Specify Selectable Rows | Yes | Yes | Free |
+| Header Checkbox Selection | Yes | Yes | Free |
+| Range Selection | Yes | Yes | Free |
+| Column Spanning | Yes | Yes | Free |
+| Column Pinning | Yes | Yes | Free |
+| Row Pinning | Yes | Yes | Free |
+| Pagination | Yes | Yes | Free |
+| Custom Filters | Yes | Yes | Free |
+| Cell Editors | Yes | Yes | Free |
+| Cell Renderers | Yes | Yes | Free |
+| Value Getter | Yes | Yes | Free |
+| Value Setter | Yes | Yes | Free |
+| Value Formatter | Yes | Yes | Free |
+| Value Parser | Yes | Yes | Free |
+| Full Width Rows | Yes | Yes | Free |
+| CSV Export | Yes | (data on screen) | Free |
+| Excel Export | Yes | (data on screen) | Paid (Enterprise) |
+| Clipboard Copy & Paste | Yes | Yes | Free |
+| Update via Transaction | Yes | Yes | Free |
+| Update via Async Transactions | Yes | Yes | Free |
 ### Summary
@@ -434,419 +659,6 @@ By leveraging both DOM Virtualisation and Pagination, our "grid components" can
 - **Scrolling**: As users scroll, DOM Virtualisation ensures only the visible rows and columns are rendered, maintaining performance.
 - **Page Navigation**: Users can navigate through pages to access the full dataset without overwhelming the client.
-## Status Bar and Pagination
-The Grid Pro component supports a comprehensive status bar system at the bottom of the grid, along with flexible pagination options. The status bar can be configured with various panels to display information like row counts, custom content, and action buttons.
-### Enterprise License Requirement
-**Important**: Status bar functionality requires the AG Grid Enterprise module to be available. Status bar components will only be displayed if the Enterprise module is properly licensed and configured.
-### Basic Status Bar Usage
-The status bar can be enabled using the datasource attributes and configured through the `status-bar-config` attribute:
-```html
-<rapid-grid-pro>
-  <grid-pro-client-side-datasource
-    resource-name="ALL_TRADES"
-    with-status-bar="true"
-    status-bar-config='{"rows": true, "reload": true, "loadMore": true}'
-  ></grid-pro-client-side-datasource>
-</rapid-grid-pro>
-```
-### Status Bar Configuration Interface
-The status bar can be configured using the `GridProStatusBarConfig` interface:
-```typescript
-interface GridProStatusBarConfig {
-  rows?: boolean;                                    // Enable row count component (default: true)
-  maxRows?: boolean;                                 // Enable max rows label-value component (default: false)
-  loadMore?: boolean | GridProStatusBarLoadMoreConfig; // Enable/configure load more button
-  reload?: boolean | GridProStatusBarReloadConfig;     // Enable/configure reload button
-}
-interface GridProStatusBarLoadMoreConfig {
-  onLoadMore?: () => void;    // Custom callback function
-  appearance?: string;        // Button appearance: 'accent', 'lightweight', 'neutral', 'outline', 'stealth'
-  tooltip?: string;          // Custom tooltip text (default: 'Load More')
-}
-interface GridProStatusBarReloadConfig {
-  onReload?: () => void;     // Custom callback function
-  icon?: string;            // Custom icon name (default: 'refresh')
-  tooltip?: string;         // Custom tooltip text (default: 'Reload')
-}
-```
-### Status Bar Configuration Examples
-#### Basic Configuration
-```typescript
-// Simple boolean configuration
-const statusBarConfig = {
-  rows: true,
-  maxRows: true,
-  loadMore: true,
-  reload: true
-};
-```
-#### Advanced Configuration with Custom Callbacks
-```typescript
-// Advanced configuration with custom callbacks and styling
-const statusBarConfig = {
-  rows: true,
-  maxRows: false,
-  loadMore: {
-    onLoadMore: () => {
-      console.log('Custom load more logic');
-      // Your custom load more implementation
-    },
-    appearance: 'accent',
-    tooltip: 'Load 50 more records from server'
-  },
-  reload: {
-    onReload: () => {
-      console.log('Custom reload logic');
-      // Your custom reload implementation
-    },
-    icon: 'refresh',
-    tooltip: 'Refresh all data from server'
-  }
-};
-```
-#### TypeScript Usage in Component
-```typescript
-import { GridProStatusBarConfig } from '@genesislcap/grid-pro';
-@customElement({
-  name: 'my-grid-component',
-  template: html`
-    <rapid-grid-pro with-status-bar>
-      <grid-pro-client-side-datasource
-        resource-name="ALL_TRADES"
-        :status-bar-config=${(x) => x.statusBarConfig}
-      ></grid-pro-client-side-datasource>
-    </rapid-grid-pro>
-  `
-})
-export class MyGridComponent extends GenesisElement {
-  @observable statusBarConfig: GridProStatusBarConfig = {
-    rows: true,
-    maxRows: true,
-    loadMore: {
-      appearance: 'outline',
-      tooltip: 'Load more trades from server'
-    },
-    reload: {
-      tooltip: 'Refresh trade data'
-    }
-  };
-}
-```
-### Client-Side vs Server-Side Datasource Differences
-#### Client-Side Datasource (`<grid-pro-client-side-datasource>`)
-**Available Status Bar Components:**
-- **Row Count**: Shows total and filtered row count (`agTotalAndFilteredRowCountComponent`)
-- **Max Rows**: Shows the maximum rows limit
-- **Load More**: Button to load additional rows from server
-- **Reload**: Button to reload/refresh the datasource
-- **Pagination**: Full pagination controls when pagination is enabled
-**Example:**
-```html
-<rapid-grid-pro with-status-bar>
-  <grid-pro-client-side-datasource
-    resource-name="ALL_TRADES"
-    status-bar-config='{"rows": true, "maxRows": true, "loadMore": true, "reload": true}'
-  ></grid-pro-client-side-datasource>
-</rapid-grid-pro>
-```
-#### Server-Side Datasource (`<grid-pro-server-side-datasource>`)
-**Available Status Bar Components:**
-- **Row Count**: Shows total row count only (`agTotalRowCountComponent`)
-- **Max Rows**: Shows the maximum rows limit
-- **Load More**: **NOT AVAILABLE** - Server-side uses infinite scroll or pagination instead
-- **Reload**: Button to reload/refresh the datasource
-- **Pagination**: Full pagination controls when pagination is enabled
-**Important Notes:**
-- Load More button is **automatically disabled** for server-side datasources
-- Server-side row model handles data loading through infinite scroll or pagination
-- Row count component shows total rows (not filtered count due to server limitations)
-**Example:**
-```html
-<rapid-grid-pro with-status-bar>
-  <grid-pro-server-side-datasource
-    resource-name="ALL_TRADES"
-    status-bar-config='{"rows": true, "maxRows": true, "reload": true}'
-    pagination="true"
-  ></grid-pro-server-side-datasource>
-</rapid-grid-pro>
-```
-### Pagination
-#### Basic Pagination Setup
-```html
-<!-- Client-side pagination -->
-<rapid-grid-pro pagination="true" pagination-page-size="25" with-status-bar="true">
-  <grid-pro-client-side-datasource
-    resource-name="ALL_TRADES"
-  ></grid-pro-client-side-datasource>
-</rapid-grid-pro>
-<!-- Server-side pagination -->
-<rapid-grid-pro pagination="true" with-status-bar="true">
-  <grid-pro-server-side-datasource
-    resource-name="ALL_TRADES"
-    max-rows="50"
-  ></grid-pro-server-side-datasource>
-</rapid-grid-pro>
-```
-#### Pagination with Custom Status Bar
-When pagination is enabled, Grid Pro automatically:
-- Adds pagination controls to the status bar
-- Suppresses the default AG Grid pagination panel
-- Positions pagination controls on the right side of the status bar
-```html
-<rapid-grid-pro pagination="true" with-status-bar="true">
-  <grid-pro-client-side-datasource
-    resource-name="ALL_TRADES"
-    status-bar-config='{"rows": true, "reload": true}'
-  ></grid-pro-client-side-datasource>
-</rapid-grid-pro>
-```
-**Default Status Bar Layout with Pagination:**
-- Left: Row count component (`agTotalAndFilteredRowCountComponent` for client-side, `agTotalRowCountComponent` for server-side)
-- Right: Pagination controls with navigation buttons and page information
-### Built-in AG Grid Status Bar Panels
-Grid Pro supports all standard AG Grid status bar panels:
-- `agTotalRowCountComponent`: Displays the total row count
-- `agTotalAndFilteredRowCountComponent`: Displays the total and filtered row count
-- `agFilteredRowCountComponent`: Displays the filtered row count
-- `agSelectedRowCountComponent`: Displays the selected row count
-- `agAggregationComponent`: Displays aggregations for the selected range
-### Custom Status Bar Components
-Grid Pro provides several custom status bar components accessible through the `GridProStatusBarTypes` enum:
-#### LabelValueStatusBarComponent
-A flexible component that displays a label and value pair:
-```typescript
-import { GridProStatusBarTypes } from '@genesislcap/grid-pro';
-// In your grid options:
-statusBar: {
-  statusPanels: [
-    {
-      statusPanel: GridProStatusBarTypes.labelValue,
-      statusPanelParams: {
-        label: 'Max Rows',
-        value: 250,
-        hide: false
-      },
-      align: 'left',
-    },
-  ],
-},
-```
-#### LoadMoreStatusBarComponent
-A button component that allows users to load additional rows (client-side only):
-```typescript
-import { GridProStatusBarTypes } from '@genesislcap/grid-pro';
-// In your grid options:
-statusBar: {
-  statusPanels: [
-    {
-      statusPanel: GridProStatusBarTypes.loadMore,
-      statusPanelParams: {
-        onLoadMore: () => console.log('Loading more data...'),
-        appearance: 'outline',
-        tooltip: 'Load more rows from server'
-      },
-      align: 'right',
-    },
-  ],
-},
-```
-#### ReloadStatusBarComponent
-A refresh button component that allows users to reload the grid data:
-```typescript
-import { GridProStatusBarTypes } from '@genesislcap/grid-pro';
-// In your grid options:
-statusBar: {
-  statusPanels: [
-    {
-      statusPanel: GridProStatusBarTypes.reload,
-      statusPanelParams: {
-        onReload: () => console.log('Reloading data...'),
-        icon: 'refresh',
-        tooltip: 'Reload the datasource'
-      },
-      align: 'right',
-    },
-  ],
-},
-```
-#### PaginationStatusBarComponent
-A pagination control component that provides navigation buttons and page information:
-```typescript
-import { GridProStatusBarTypes } from '@genesislcap/grid-pro';
-// In your grid options:
-statusBar: {
-  statusPanels: [
-    { statusPanel: 'agTotalAndFilteredRowCountComponent', align: 'left' },
-    { statusPanel: GridProStatusBarTypes.pagination, align: 'right' },
-  ],
-},
-```
-### Manual Status Bar Configuration
-You can also manually configure the status bar using direct grid options:
-```typescript
-import { GridProStatusBarTypes } from '@genesislcap/grid-pro';
-const gridOptions = {
-  statusBar: {
-    statusPanels: [
-      { statusPanel: 'agTotalAndFilteredRowCountComponent', align: 'left' },
-      {
-        statusPanel: GridProStatusBarTypes.labelValue,
-        statusPanelParams: { label: 'Active Records', value: 1250 },
-        align: 'center'
-      },
-      {
-        statusPanel: GridProStatusBarTypes.reload,
-        statusPanelParams: {
-          tooltip: 'Refresh all data'
-        },
-        align: 'right'
-      },
-    ],
-  },
-};
-```
-### Complete Usage Examples
-#### Client-Side with Full Status Bar
-```html
-<rapid-grid-pro
-  pagination="true"
-  pagination-page-size="50"
-  with-status-bar="true">
-  <grid-pro-client-side-datasource
-    resource-name="ALL_TRADES"
-    max-rows="500"
-    status-bar-config='{
-      "rows": true,
-      "maxRows": true,
-      "loadMore": {
-        "appearance": "accent",
-        "tooltip": "Load 50 more trades"
-      },
-      "reload": {
-        "tooltip": "Refresh trade data"
-      }
-    }'
-  ></grid-pro-client-side-datasource>
-</rapid-grid-pro>
-```
-#### Server-Side with Pagination
-```html
-<rapid-grid-pro
-  pagination="true"
-  with-status-bar="true">
-  <grid-pro-server-side-datasource
-    resource-name="ALL_TRADES"
-    max-rows="100"
-    status-bar-config='{
-      "rows": true,
-      "maxRows": true,
-      "reload": true
-    }'
-  ></grid-pro-server-side-datasource>
-</rapid-grid-pro>
-```
-#### Infinite Scroll with Minimal Status Bar
-```html
-<rapid-grid-pro with-status-bar="true">
-  <grid-pro-server-side-datasource
-    resource-name="ALL_TRADES"
-    max-rows="50"
-    status-bar-config='{"rows": true, "reload": true}'
-  ></grid-pro-server-side-datasource>
-</rapid-grid-pro>
-```
-### Accessibility Features
-All status bar components include comprehensive accessibility support:
-- **ARIA labels** and **roles** for screen readers
-- **Keyboard navigation** support (Tab, Enter, Space)
-- **Focus management** and visual indicators
-- **Semantic HTML** structure with proper landmarks
-- **Tooltips** and **descriptions** for interactive elements
-### Performance Considerations
-- Status bar components are lightweight and optimized for performance
-- Components are only rendered when enabled in configuration
-- Event listeners are properly cleaned up when components are destroyed
-- Status updates are debounced to prevent excessive re-renders
 ## License
 Note: this project provides front-end dependencies and uses licensed components listed in the next section; thus, licenses for those components are required during development. Contact [Genesis Global](https://genesis.global/contact-us/) for more details.

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/grid-pro",
   "description": "Genesis Foundation AG Grid",
-  "version": "14.278.0",
+  "version": "14.278.2",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -38,20 +38,20 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.278.0",
-    "@genesislcap/genx": "14.278.0",
-    "@genesislcap/rollup-builder": "14.278.0",
-    "@genesislcap/ts-builder": "14.278.0",
-    "@genesislcap/uvu-playwright-builder": "14.278.0",
-    "@genesislcap/vite-builder": "14.278.0",
-    "@genesislcap/webpack-builder": "14.278.0",
+    "@genesislcap/foundation-testing": "14.278.2",
+    "@genesislcap/genx": "14.278.2",
+    "@genesislcap/rollup-builder": "14.278.2",
+    "@genesislcap/ts-builder": "14.278.2",
+    "@genesislcap/uvu-playwright-builder": "14.278.2",
+    "@genesislcap/vite-builder": "14.278.2",
+    "@genesislcap/webpack-builder": "14.278.2",
     "rimraf": "^5.0.0"
   },
   "dependencies": {
-    "@genesislcap/foundation-comms": "14.278.0",
-    "@genesislcap/foundation-logger": "14.278.0",
-    "@genesislcap/foundation-ui": "14.278.0",
-    "@genesislcap/foundation-utils": "14.278.0",
+    "@genesislcap/foundation-comms": "14.278.2",
+    "@genesislcap/foundation-logger": "14.278.2",
+    "@genesislcap/foundation-ui": "14.278.2",
+    "@genesislcap/foundation-utils": "14.278.2",
     "@microsoft/fast-colors": "5.3.1",
     "@microsoft/fast-components": "2.30.6",
     "@microsoft/fast-element": "1.14.0",
@@ -77,5 +77,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "0721370b4e3d178f9619e6c032c0f94af778b09f"
+  "gitHead": "2c6ab52f798c70513a1638647e4be88fd4a91f10"
 }