@genesislcap/grid-pro 14.277.0 → 14.278.1

package/README.md

@@ -440,20 +440,44 @@ The Grid Pro component supports a comprehensive status bar system at the bottom
 
 ### 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.
+**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. If the Enterprise module is not available, the status bar will be silently disabled without affecting grid functionality.
 
 ### 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>
+```typescript
+const customStatusBarConfig = {
+  rows: false, // Disable row count component
+  maxRows: false, // Disable max rows label-value component
+  loadMore: false, // Disable load more button
+  reload: true // Enable reload button
+};
+
+const template = html`
+  <rapid-grid-pro pagination with-status-bar :statusBarConfig="${(x) => customStatusBarConfig}">
+    <grid-pro-client-side-datasource
+      resource-name="ALL_TRADES"
+    ></grid-pro-client-side-datasource>
+  </rapid-grid-pro>
+`;
+```
+
+### Default Status Bar Configuration
+
+When `with-status-bar` is enabled without providing a custom configuration, the following default configuration is applied:
+
+```typescript
+const DEFAULT_STATUS_BAR_CONFIG = {
+  rows: true,                                    // Row count component enabled by default
+  loadMore: {
+    tooltip: 'Load more rows from server'        // Load more button with default tooltip
+  },
+  reload: {
+    tooltip: 'Reload the datasource.'           // Reload button with default tooltip
+  }
+  // maxRows: false (disabled by default)
+};
 ```
 
 ### Status Bar Configuration Interface
@@ -464,20 +488,20 @@ The status bar can be configured using the `GridProStatusBarConfig` interface:
 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
+  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
-  appearance?: string;        // Button appearance: 'accent', 'lightweight', 'neutral', 'outline', 'stealth'
-  tooltip?: string;          // Custom tooltip text (default: 'Load More')
+  onLoadMore?: () => void;    // Custom callback function (defaults to datasource.loadMore())
+  appearance?: string;        // Button appearance: 'accent', 'lightweight', 'neutral', 'outline', 'stealth' (default: 'outline')
+  tooltip?: string;          // Custom tooltip text (default: 'Load more rows from server')
 }
 
 interface GridProStatusBarReloadConfig {
-  onReload?: () => void;     // Custom callback function
+  onReload?: () => void;     // Custom callback function (defaults to datasource restart/reload)
   icon?: string;            // Custom icon name (default: 'refresh')
-  tooltip?: string;         // Custom tooltip text (default: 'Reload')
+  tooltip?: string;         // Custom tooltip text (default: 'Reload the datasource.')
 }
 ```
 
@@ -486,12 +510,12 @@ interface GridProStatusBarReloadConfig {
 #### Basic Configuration
 
 ```typescript
-// Simple boolean configuration
+// Simple boolean configuration (uses default settings)
 const statusBarConfig = {
-  rows: true,
-  maxRows: true,
-  loadMore: true,
-  reload: true
+  rows: true,       // Show row count
+  maxRows: true,    // Show max rows limit
+  loadMore: true,   // Show load more button (client-side only, uses default tooltip)
+  reload: true      // Show reload button (uses default tooltip)
 };
 ```
 
@@ -587,9 +611,10 @@ export class MyGridComponent extends GenesisElement {
 
 **Important Notes:**
 
-- Load More button is **automatically disabled** for server-side datasources
-- Server-side row model handles data loading through infinite scroll or pagination
+- Load More button is **automatically disabled/hidden** for server-side datasources because the server-side datasource explicitly throws an error: `'loadMore() method is not supported for server-side datasource'`
+- Server-side row model handles data loading through infinite scroll or pagination instead
 - Row count component shows total rows (not filtered count due to server limitations)
+- Status bar components automatically update based on server responses (e.g., Load More button state changes based on `MORE_ROWS` flag)
 
 **Example:**
 
@@ -629,8 +654,9 @@ export class MyGridComponent extends GenesisElement {
 When pagination is enabled, Grid Pro automatically:
 
 - Adds pagination controls to the status bar
-- Suppresses the default AG Grid pagination panel
+- Suppresses the default AG Grid pagination panel (`suppressPaginationPanel: true`)
 - Positions pagination controls on the right side of the status bar
+- Adjusts Load More button alignment to the left when pagination is present
 
 ```html
 <rapid-grid-pro pagination="true" with-status-bar="true">
@@ -643,9 +669,14 @@ When pagination is enabled, Grid Pro automatically:
 
 **Default Status Bar Layout with Pagination:**
 
-- Left: Row count component (`agTotalAndFilteredRowCountComponent` for client-side, `agTotalRowCountComponent` for server-side)
+- Left: Row count component (`agTotalAndFilteredRowCountComponent` for client-side, `agTotalRowCountComponent` for server-side), Load More button (if enabled)
 - Right: Pagination controls with navigation buttons and page information
 
+**Default Status Bar Layout without Pagination:**
+
+- Left: Row count component, Max Rows component (if enabled)
+- Right: Load More button (if enabled), Reload button (if enabled)
+
 ### Built-in AG Grid Status Bar Panels
 
 Grid Pro supports all standard AG Grid status bar panels:
@@ -683,6 +714,13 @@ statusBar: {
 },
 ```
 
+**Label Value Component Features:**
+- **Dynamic Updates**: Value updates automatically when parameters change
+- **Visibility Control**: Can be hidden/shown via `hide` parameter
+- **Accessibility**: Proper semantic HTML structure with descriptive text
+- **Flexible Content**: Supports any label/value combination with automatic formatting
+- **Consistent Styling**: Inherits status bar styling and spacing
+
 #### LoadMoreStatusBarComponent
 
 A button component that allows users to load additional rows (client-side only):
@@ -697,7 +735,7 @@ statusBar: {
       statusPanel: GridProStatusBarTypes.loadMore,
       statusPanelParams: {
         onLoadMore: () => console.log('Loading more data...'),
-        appearance: 'outline',
+        appearance: 'outline',  // Options: 'accent', 'lightweight', 'neutral', 'outline', 'stealth'
         tooltip: 'Load more rows from server'
       },
       align: 'right',
@@ -706,6 +744,16 @@ statusBar: {
 },
 ```
 
+**Load More Button Features:**
+- **State Management**: Multiple states (Available, Loading, No More Data) with automatic transitions
+- **Visual Feedback**: Shows progress ring during loading operation with 500ms minimum display time
+- **Accessibility**: Full ARIA labels, role attributes, and screen reader support with dynamic state announcements
+- **Keyboard Navigation**: Not applicable (button component handles this automatically)
+- **Dynamic Alignment**: Left-aligned when pagination is enabled, right-aligned otherwise
+- **Design System Integration**: Automatically detects design system prefix (`rapid` or `zero`) with graceful fallbacks
+- **Error Handling**: Graceful error recovery with loading state reset
+- **Responsive Sizing**: Consistent 120px minimum width with proper height and spacing
+
 #### ReloadStatusBarComponent
 
 A refresh button component that allows users to reload the grid data:
@@ -720,8 +768,8 @@ statusBar: {
       statusPanel: GridProStatusBarTypes.reload,
       statusPanelParams: {
         onReload: () => console.log('Reloading data...'),
-        icon: 'refresh',
-        tooltip: 'Reload the datasource'
+        icon: 'refresh',  // Custom icon name (default: 'refresh')
+        tooltip: 'Reload the datasource'  // Custom tooltip (default: 'Reload')
       },
       align: 'right',
     },
@@ -729,6 +777,12 @@ statusBar: {
 },
 ```
 
+**Reload Button Features:**
+- **Visual Feedback**: Shows progress ring during reload operation with 500ms minimum display time
+- **Accessibility**: Full keyboard navigation support (Enter/Space keys) and ARIA labels
+- **Hover Effects**: Visual feedback on mouse over/out
+- **Fallback Support**: Uses Unicode refresh symbol (↻) for systems without icon components
+
 #### PaginationStatusBarComponent
 
 A pagination control component that provides navigation buttons and page information:
@@ -745,6 +799,14 @@ statusBar: {
 },
 ```
 
+**Pagination Component Features:**
+- **Navigation Controls**: First, Previous, Next, Last page buttons with intelligent enable/disable states
+- **Page Information**: Current page, total pages, and row range display (e.g., "1 to 25 of 100")
+- **Accessibility**: Full ARIA navigation landmarks, button labels, and keyboard support
+- **Real-time Updates**: Automatically updates when pagination state changes
+- **Button State Management**: Disables first/previous on first page, next/last on last page
+- **Responsive Layout**: Flexible layout that adapts to available space
+
 ### Manual Status Bar Configuration
 
 You can also manually configure the status bar using direct grid options:
@@ -830,6 +892,24 @@ const gridOptions = {
 </rapid-grid-pro>
 ```
 
+### Progressive Enhancement and Design System Integration
+
+Status bar components are designed to work across different Genesis design systems:
+
+- **Automatic Detection**: Components automatically detect the current design system prefix (`rapid` or `zero`)
+- **Graceful Fallbacks**: Fallback implementations for systems without specific components (e.g., Unicode symbols for icons)
+- **Consistent Styling**: Components inherit design system styling and tokens automatically
+- **Enterprise Requirement**: All status bar functionality requires AG Grid Enterprise module
+
+### Dynamic Status Bar Updates
+
+The status bar components support real-time updates based on server responses:
+
+- **Load More Button**: Automatically updates state based on `MORE_ROWS` flag from server responses
+- **Row Count**: Updates in real-time as data changes (client-side shows filtered count, server-side shows total count)
+- **Max Rows**: Displays current maximum rows limit from datasource configuration
+- **State Persistence**: Button states persist across grid operations
+
 ### Accessibility Features
 
 All status bar components include comprehensive accessibility support:
@@ -839,6 +919,7 @@ All status bar components include comprehensive accessibility support:
 - **Focus management** and visual indicators
 - **Semantic HTML** structure with proper landmarks
 - **Tooltips** and **descriptions** for interactive elements
+- **Screen reader announcements** for state changes
 
 ### Performance Considerations
 
@@ -846,6 +927,7 @@ All status bar components include comprehensive accessibility support:
 - 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
+- Progressive enhancement ensures no performance impact when Enterprise module is unavailable
 
 ## License