@memberjunction/ng-entity-viewer 6.1.4 → 6.2.0-edge.1

package/dist/lib/entity-data-grid/entity-data-grid.component.js

@@ -3,11 +3,12 @@ import { trigger, transition, style, animate } from '@angular/animations';
 import { BaseAngularComponent } from '@memberjunction/ng-base-types';
 import { Subject } from 'rxjs';
 import { debounceTime, takeUntil } from 'rxjs/operators';
-import { LogError, RunView, RunViewParams, CoerceImageSrc, ParseCssHexColor, CompositeKey } from '@memberjunction/core';
+import { LogError, RunView, RunViewParams, CoerceImageSrc, ParseCssHexColor, CompositeKey, IsDateOnlySQLType, FormatDateOnly, EntityFieldTSType } from '@memberjunction/core';
 import { UUIDsEqual } from '@memberjunction/global';
 import { EntityActionEngineBase } from '@memberjunction/actions-base';
 import { CommunicationEngineBase } from '@memberjunction/communication-types';
-import { buildPkString, canonicalizeColumnFields, computeFieldsList } from '../utils/record.util';
+import { BuildPkString, CanonicalizeColumnFields, ComputeFieldsList } from '../utils/record.util';
+import { AggregateField } from '../utils/aggregate-field.util';
 import { ViewInfo, UserViewEngine, UserInfoEngine } from '@memberjunction/core-entities';
 import { ModuleRegistry, AllCommunityModule, themeAlpine } from 'ag-grid-community';
 // Use the existing HighlightUtil from entity-viewer package
@@ -535,7 +536,7 @@ function EntityDataGridComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "mj-empty-state", 6);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("Size", ctx_r1.EmptyStateSize);
+    i0.ɵɵproperty("Size", ctx_r1.EmptyStateSize)("Title", ctx_r1.EntityInfo ? "No " + ctx_r1.EntityInfo.DisplayNamePlural + " to display" : "No data to display");
 } }
 function EntityDataGridComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r30 = i0.ɵɵgetCurrentView();
@@ -795,9 +796,13 @@ export class EntityDataGridComponent extends BaseAngularComponent {
      * Convenience accessor for the resolved entity name. Returns null when
      * the entity hasn't been resolved yet (e.g., before data loads).
      */
-    get entityInfoName() {
+    get EntityInfoName() {
         return this._entityInfo?.Name ?? null;
     }
+    /** @deprecated Use {@link EntityInfoName}. */
+    get entityInfoName() {
+        return this.EntityInfoName;
+    }
     /**
      * Current page number for the shared pager (1-based).
      * Set by parent when using external data with server-side paging.
@@ -1150,9 +1155,13 @@ export class EntityDataGridComponent extends BaseAngularComponent {
     /**
      * Get the effective visual config (user config merged with defaults)
      */
-    get effectiveVisualConfig() {
+    get EffectiveVisualConfig() {
         return { ...DEFAULT_VISUAL_CONFIG, ...this._visualConfig };
     }
+    /** @deprecated Use {@link EffectiveVisualConfig}. */
+    get effectiveVisualConfig() {
+        return this.EffectiveVisualConfig;
+    }
     // ========================================
     // Toolbar Inputs
     // ========================================
@@ -1481,7 +1490,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
             this._entityActionsAutoLoaded = false;
         }
     }
-    /** Maps the entity's active EntityActions to grid configs, carrying the driver key + RecordProcessID. */
+    /** The EntityAction engine for this grid's provider, so a multi-provider client reads the right server's actions. */
     entityActionEngine() {
         return EntityActionEngineBase.GetProviderInstance(this.ProviderToUse, EntityActionEngineBase);
     }
@@ -1540,14 +1549,14 @@ export class EntityDataGridComponent extends BaseAngularComponent {
      * Returns the effective aggregates config, preferring _aggregatesConfig but falling back to _gridState.aggregates.
      * This ensures aggregates work regardless of whether they came from explicit config or from view's GridState.
      */
-    get EffectiveAggregatesConfig() {
+    get effectiveAggregatesConfig() {
         return this._aggregatesConfig || this._gridState?.aggregates;
     }
     /**
      * Returns enabled aggregates configured for card display.
      */
     get CardAggregates() {
-        const config = this.EffectiveAggregatesConfig;
+        const config = this.effectiveAggregatesConfig;
         if (!config?.expressions)
             return [];
         return config.expressions
@@ -1558,7 +1567,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
      * Returns enabled aggregates configured for column footer display.
      */
     get ColumnAggregates() {
-        const config = this.EffectiveAggregatesConfig;
+        const config = this.effectiveAggregatesConfig;
         if (!config?.expressions)
             return [];
         return config.expressions
@@ -1582,7 +1591,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
     /**
      * Get formatted aggregate value for display
      */
-    getAggregateValue(agg) {
+    GetAggregateValue(agg) {
         const key = agg.id || agg.expression;
         const value = this._aggregateValues.get(key);
         if (value == null)
@@ -1594,11 +1603,37 @@ export class EntityDataGridComponent extends BaseAngularComponent {
                 minimumFractionDigits: 0
             });
         }
+        // A date aggregate reaches the browser as an ISO string: the server JSON-stringifies the value
+        // and the client parses it back, which turns a Date into text. Resolve the column's type first
+        // so a `date` column renders as its stored day whether the value is a Date or that string.
+        if (typeof value !== 'boolean' && this.aggregateIsDateOnly(agg)) {
+            return FormatDateOnly(value);
+        }
         if (value instanceof Date) {
             return value.toLocaleDateString();
         }
+        // A timestamp aggregate arrives as the same ISO string. It names an instant, so it is rendered
+        // in local time, as a Date instance would be — not printed as the wire text.
+        if (typeof value === 'string' && AggregateField(agg, this._entityInfo)?.TSType === EntityFieldTSType.Date) {
+            const date = new Date(value);
+            if (!isNaN(date.getTime()))
+                return date.toLocaleDateString();
+        }
         return String(value);
     }
+    /** @deprecated Use {@link GetAggregateValue}. */
+    getAggregateValue(agg) {
+        return this.GetAggregateValue(agg);
+    }
+    /**
+     * Whether an aggregate summarises a date-only column. An aggregate carries no field metadata of
+     * its own, so the column is read from a single-field expression such as `MIN(IntakeDate)` or
+     * from the column the aggregate is pinned under. A `date` column is a calendar day and must not
+     * be shifted into the reader's zone (MJ#4210).
+     */
+    aggregateIsDateOnly(agg) {
+        return IsDateOnlySQLType(AggregateField(agg, this._entityInfo)?.Type);
+    }
     // ========================================
     // Event Outputs
     // ========================================
@@ -1725,18 +1760,42 @@ export class EntityDataGridComponent extends BaseAngularComponent {
     // ========================================
     // View Children
     // ========================================
-    gridContainer;
+    GridContainer;
+    /** @deprecated Use {@link GridContainer}. */
+    get gridContainer() {
+        return this.GridContainer;
+    }
+    /** @deprecated Use {@link GridContainer}. */
+    set gridContainer(value) {
+        this.GridContainer = value;
+    }
     // ========================================
     // AG Grid Properties
     // ========================================
     /** AG Grid column definitions */
-    agColumnDefs = [];
+    AgColumnDefs = [];
+    /** @deprecated Use {@link AgColumnDefs}. */
+    get agColumnDefs() {
+        return this.AgColumnDefs;
+    }
+    /** @deprecated Use {@link AgColumnDefs}. */
+    set agColumnDefs(value) {
+        this.AgColumnDefs = value;
+    }
     /** AG Grid row data */
-    rowData = [];
+    RowData = [];
+    /** @deprecated Use {@link RowData}. */
+    get rowData() {
+        return this.RowData;
+    }
+    /** @deprecated Use {@link RowData}. */
+    set rowData(value) {
+        this.RowData = value;
+    }
     /** AG Grid API reference */
     gridApi = null;
     /** AG Grid theme (v34+) with custom selection colors */
-    agGridTheme = themeAlpine.withParams({
+    AgGridTheme = themeAlpine.withParams({
         backgroundColor: 'var(--mj-bg-surface)',
         foregroundColor: 'var(--mj-text-primary)',
         textColor: 'var(--mj-text-primary)',
@@ -1754,23 +1813,47 @@ export class EntityDataGridComponent extends BaseAngularComponent {
         borderRadius: 'var(--mj-radius-sm)',
         browserColorScheme: 'inherit',
     });
+    /** @deprecated Use {@link AgGridTheme}. */
+    get agGridTheme() {
+        return this.AgGridTheme;
+    }
+    /** @deprecated Use {@link AgGridTheme}. */
+    set agGridTheme(value) {
+        this.AgGridTheme = value;
+    }
     /** AG Grid row selection configuration */
-    agRowSelection = { mode: 'singleRow' };
+    AgRowSelection = { mode: 'singleRow' };
+    /** @deprecated Use {@link AgRowSelection}. */
+    get agRowSelection() {
+        return this.AgRowSelection;
+    }
+    /** @deprecated Use {@link AgRowSelection}. */
+    set agRowSelection(value) {
+        this.AgRowSelection = value;
+    }
     /** Default column settings */
-    defaultColDef = {
+    DefaultColDef = {
         sortable: true,
         filter: false,
         resizable: true,
         minWidth: 80
     };
+    /** @deprecated Use {@link DefaultColDef}. */
+    get defaultColDef() {
+        return this.DefaultColDef;
+    }
+    /** @deprecated Use {@link DefaultColDef}. */
+    set defaultColDef(value) {
+        this.DefaultColDef = value;
+    }
     /**
      * Update defaultColDef when text wrapping setting changes
      * Enables/disables auto row height and cell text wrapping
      */
     updateDefaultColDefForWrapping() {
         if (this._wrapText) {
-            this.defaultColDef = {
-                ...this.defaultColDef,
+            this.DefaultColDef = {
+                ...this.DefaultColDef,
                 wrapText: true,
                 autoHeight: true,
                 cellClass: 'cell-wrap-text'
@@ -1778,21 +1861,37 @@ export class EntityDataGridComponent extends BaseAngularComponent {
         }
         else {
             // Remove wrapping properties
-            const { wrapText, autoHeight, cellClass, ...rest } = this.defaultColDef;
-            this.defaultColDef = rest;
+            const { wrapText, autoHeight, cellClass, ...rest } = this.DefaultColDef;
+            this.DefaultColDef = rest;
         }
         // Refresh the grid to apply changes
         if (this.gridApi) {
-            this.gridApi.setGridOption('defaultColDef', this.defaultColDef);
+            this.gridApi.setGridOption('defaultColDef', this.DefaultColDef);
             this.gridApi.refreshCells({ force: true });
         }
     }
     /** Get row ID function for AG Grid */
-    getRowId = (params) => params.data['__pk'];
+    GetRowId = (params) => params.data['__pk'];
+    /** @deprecated Use {@link GetRowId}. */
+    get getRowId() {
+        return this.GetRowId;
+    }
+    /** @deprecated Use {@link GetRowId}. */
+    set getRowId(value) {
+        this.GetRowId = value;
+    }
     /** Suppress sort changed events during programmatic updates */
     suppressSortEvents = false;
     /** AG Grid options for infinite scroll mode */
-    gridOptions = {};
+    GridOptions = {};
+    /** @deprecated Use {@link GridOptions}. */
+    get gridOptions() {
+        return this.GridOptions;
+    }
+    /** @deprecated Use {@link GridOptions}. */
+    set gridOptions(value) {
+        this.GridOptions = value;
+    }
     /** Datasource for infinite scroll mode */
     infiniteDatasource = null;
     // ========================================
@@ -1847,7 +1946,15 @@ export class EntityDataGridComponent extends BaseAngularComponent {
         return true;
     }
     // Loading state
-    loading = false;
+    Loading = false;
+    /** @deprecated Use {@link Loading}. */
+    get loading() {
+        return this.Loading;
+    }
+    /** @deprecated Use {@link Loading}. */
+    set loading(value) {
+        this.Loading = value;
+    }
     _errorMessage = '';
     /**
      * Raw technical error from the last failed load. Kept for callers and the
@@ -1872,7 +1979,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
         const friendly = 'The server may be busy or briefly unreachable — retrying usually fixes this.';
         return this._errorMessage ? `${friendly} (Detail: ${this._errorMessage})` : friendly;
     }
-    totalRowCount = 0;
+    totalRowCount = 0; // case-violation-ok-legacy-back-compat: the PascalCase name is already taken in this scope
     _loadDataPromise = null;
     // Cleanup
     destroy$ = new Subject();
@@ -1907,17 +2014,45 @@ export class EntityDataGridComponent extends BaseAngularComponent {
      * For dynamic views, always true (persists to user settings).
      * For saved views, depends on view ownership and permissions.
      */
-    get canEditCurrentView() {
+    get CanEditCurrentView() {
         if (this.IsDynamicView) {
             return true; // Dynamic views persist to user settings
         }
         return this._viewEntity?.UserCanEdit ?? false;
     }
+    /** @deprecated Use {@link CanEditCurrentView}. */
+    get canEditCurrentView() {
+        return this.CanEditCurrentView;
+    }
     // Overflow menu state
-    showOverflowMenu = false;
+    ShowOverflowMenu = false;
+    /** @deprecated Use {@link ShowOverflowMenu}. */
+    get showOverflowMenu() {
+        return this.ShowOverflowMenu;
+    }
+    /** @deprecated Use {@link ShowOverflowMenu}. */
+    set showOverflowMenu(value) {
+        this.ShowOverflowMenu = value;
+    }
     // Export dialog state
-    showExportDialog = false;
-    exportDialogConfig = null;
+    ShowExportDialog = false;
+    /** @deprecated Use {@link ShowExportDialog}. */
+    get showExportDialog() {
+        return this.ShowExportDialog;
+    }
+    /** @deprecated Use {@link ShowExportDialog}. */
+    set showExportDialog(value) {
+        this.ShowExportDialog = value;
+    }
+    ExportDialogConfig = null;
+    /** @deprecated Use {@link ExportDialogConfig}. */
+    get exportDialogConfig() {
+        return this.ExportDialogConfig;
+    }
+    /** @deprecated Use {@link ExportDialogConfig}. */
+    set exportDialogConfig(value) {
+        this.ExportDialogConfig = value;
+    }
     constructor(cdr, elementRef, exportService, ngZone) {
         super();
         this.cdr = cdr;
@@ -2318,7 +2453,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
             this.buildAgColumnDefs();
             // Update AG Grid with new column definitions to apply header styles
             if (this.gridApi && !this.gridApi.isDestroyed()) {
-                this.gridApi.setGridOption('columnDefs', this.agColumnDefs);
+                this.gridApi.setGridOption('columnDefs', this.AgColumnDefs);
                 // Refresh header to apply new header styles
                 this.gridApi.refreshHeader();
             }
@@ -2351,7 +2486,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
             if (this._gridState.aggregates) {
                 this._aggregatesConfig = this._gridState.aggregates;
                 // Fetch aggregate values when gridState aggregates change
-                this.refreshAggregates();
+                this.RefreshAggregates();
             }
             // Clear suppression after AG Grid's async events have been processed.
             // setTimeout(0) fires after microtasks and rAF, catching all async sort events.
@@ -2363,8 +2498,8 @@ export class EntityDataGridComponent extends BaseAngularComponent {
      * Used when gridState changes and includes new aggregate config.
      * This runs a RunView with MaxRows=0 to get only aggregate results.
      */
-    async refreshAggregates() {
-        const effectiveAggConfig = this.EffectiveAggregatesConfig;
+    async RefreshAggregates() {
+        const effectiveAggConfig = this.effectiveAggregatesConfig;
         if (!effectiveAggConfig?.expressions?.length) {
             this._aggregateResults = [];
             this._aggregateValues.clear();
@@ -2428,13 +2563,17 @@ export class EntityDataGridComponent extends BaseAngularComponent {
             });
         }
     }
+    /** @deprecated Use {@link RefreshAggregates}. */
+    async refreshAggregates() {
+        return this.RefreshAggregates();
+    }
     onFilterTextChanged() {
         // Rebuild column defs to update cell renderers with new filter text
         this.buildAgColumnDefs();
         // Update AG Grid with new column definitions and refresh cells
         if (this.gridApi) {
             // Update the column definitions in AG Grid
-            this.gridApi.setGridOption('columnDefs', this.agColumnDefs);
+            this.gridApi.setGridOption('columnDefs', this.AgColumnDefs);
             // Force refresh all cells to apply new highlighting
             this.gridApi.refreshCells({ force: true });
             // Apply AG Grid quick filter to actually filter rows client-side
@@ -2668,17 +2807,33 @@ export class EntityDataGridComponent extends BaseAngularComponent {
     // AG Grid Column Building
     // ========================================
     buildAgColumnDefs() {
-        if (this._gridState?.columnSettings?.length && this._entityInfo) {
-            this.agColumnDefs = this.buildAgColumnDefsFromGridState(this._gridState.columnSettings);
+        // A grid state whose settings name NONE of this entity's fields is not a column preference —
+        // it is evidence the state belongs to a different entity. `_gridState` outlives an entity
+        // change when one viewer is rebound from entity A to entity B (`EntityName` is a rebindable
+        // input), every setting is then dropped for naming a field B does not have, and taking that
+        // empty array as the answer rendered a grid with no header and no cells while the rows loaded
+        // and the row count read correctly — no error, no warning. So treat an empty result as NO
+        // usable state and fall through to the sources that describe the entity actually in hand.
+        // This is the floor `generateAgColumnDefs()` already has for an entity with no DefaultInView
+        // fields; the grid-state branch was the one path without one.
+        //
+        // Only a TOTAL miss is treated this way. One surviving setting is a real preference — a saved
+        // view whose entity has since lost a field — and discarding it would throw away the user's
+        // columns to guess at state that is legitimately theirs.
+        const fromGridState = (this._gridState?.columnSettings?.length && this._entityInfo)
+            ? this.buildAgColumnDefsFromGridState(this._gridState.columnSettings)
+            : [];
+        if (fromGridState.length > 0) {
+            this.AgColumnDefs = fromGridState;
         }
         else if (this._columns.length > 0) {
-            this.agColumnDefs = this._columns.map(col => this.mapColumnConfigToColDef(col));
+            this.AgColumnDefs = this._columns.map(col => this.mapColumnConfigToColDef(col));
         }
         else if (this._entityInfo) {
-            this.agColumnDefs = this.generateAgColumnDefs(this._entityInfo);
+            this.AgColumnDefs = this.generateAgColumnDefs(this._entityInfo);
         }
         else {
-            this.agColumnDefs = [];
+            this.AgColumnDefs = [];
         }
         // Field security, applied to EVERY branch above rather than inside each one. This is the
         // only point all three column sources meet: a saved view's `columnSettings` (the usual path
@@ -2688,11 +2843,11 @@ export class EntityDataGridComponent extends BaseAngularComponent {
         // appended — those are synthetic and have no entity field to check.
         const deniedReadFields = this.deniedReadFieldsFor(this._entityInfo);
         if (deniedReadFields.size > 0) {
-            this.agColumnDefs = this.agColumnDefs.filter(c => !c.field || !deniedReadFields.has(c.field.trim().toLowerCase()));
+            this.AgColumnDefs = this.AgColumnDefs.filter(c => !c.field || !deniedReadFields.has(c.field.trim().toLowerCase()));
         }
         // Add row number column if enabled
-        if (this._showRowNumbers && this.agColumnDefs.length > 0) {
-            this.agColumnDefs.unshift({
+        if (this._showRowNumbers && this.AgColumnDefs.length > 0) {
+            this.AgColumnDefs.unshift({
                 headerName: '#',
                 field: ROW_NUMBER_FIELD,
                 width: 60,
@@ -2703,8 +2858,8 @@ export class EntityDataGridComponent extends BaseAngularComponent {
                 valueGetter: (params) => params.node ? params.node.rowIndex + 1 : ''
             });
         }
-        if (this._fillWidth && this.agColumnDefs.length > 0) {
-            this.agColumnDefs.push(this.buildFillerColumnDef());
+        if (this._fillWidth && this.AgColumnDefs.length > 0) {
+            this.AgColumnDefs.push(this.buildFillerColumnDef());
         }
     }
     /**
@@ -2773,7 +2928,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
         if (!this._columnsFromHost || !this._entityInfo || this._columns.length === 0) {
             return false;
         }
-        const next = canonicalizeColumnFields(this._entityInfo, this._columns);
+        const next = CanonicalizeColumnFields(this._entityInfo, this._columns);
         const changed = next.some((col, i) => col !== this._columns[i]);
         if (changed) {
             this._columns = next;
@@ -2994,7 +3149,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
         const fieldType = field.TSType;
         const fieldNameLower = field.Name.toLowerCase();
         const extendedType = field.ExtendedType?.toLowerCase() || '';
-        const vc = this.effectiveVisualConfig;
+        const vc = this.EffectiveVisualConfig;
         // Determine special field types using ExtendedType metadata first, then field name patterns as fallback
         const isCurrency = customFormat?.type === 'currency' ||
             fieldNameLower.includes('amount') ||
@@ -3135,7 +3290,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
             const useCustomFormat = customFormat && customFormat.type && customFormat.type !== 'auto';
             if (useCustomFormat) {
                 // Use custom formatting
-                displayValue = this.formatValueWithCustomFormat(params.value, customFormat);
+                displayValue = this.formatValueWithCustomFormat(params.value, customFormat, field);
                 // Check if formatCustomBoolean returned HTML (icon or checkbox)
                 if (customFormat.type === 'boolean' &&
                     (customFormat.booleanDisplay === 'icon' || customFormat.booleanDisplay === 'checkbox')) {
@@ -3159,20 +3314,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
                 }
                 // Date formatting
                 else if (fieldType === 'Date') {
-                    const date = params.value instanceof Date ? params.value : new Date(params.value);
-                    if (isNaN(date.getTime())) {
-                        displayValue = String(params.value);
-                    }
-                    else if (vc.friendlyDates) {
-                        displayValue = date.toLocaleDateString(undefined, {
-                            month: 'short',
-                            day: 'numeric',
-                            year: 'numeric'
-                        });
-                    }
-                    else {
-                        displayValue = date.toISOString().split('T')[0];
-                    }
+                    displayValue = this.formatDefaultDate(params.value, field, !!vc.friendlyDates);
                 }
                 // Currency formatting
                 else if (fieldType === 'number' && isCurrency) {
@@ -3290,7 +3432,21 @@ export class EntityDataGridComponent extends BaseAngularComponent {
     /**
      * Format a value using custom ColumnFormat settings
      */
-    formatValueWithCustomFormat(value, format) {
+    /**
+     * Default rendering of a date-family cell. A `date` column is a calendar day that arrives as UTC
+     * midnight; a local-zone formatter would land on the previous day for every reader west of
+     * Greenwich (MJ#4210). A timestamp names an instant and stays in local time.
+     */
+    formatDefaultDate(value, field, friendlyDates) {
+        const date = value instanceof Date ? value : new Date(value);
+        if (isNaN(date.getTime()))
+            return String(value);
+        if (!friendlyDates)
+            return date.toISOString().split('T')[0];
+        const options = { month: 'short', day: 'numeric', year: 'numeric' };
+        return IsDateOnlySQLType(field.Type) ? FormatDateOnly(date, options) : date.toLocaleDateString(undefined, options);
+    }
+    formatValueWithCustomFormat(value, format, field) {
         if (value == null)
             return '—';
         switch (format.type) {
@@ -3302,7 +3458,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
                 return this.formatCustomPercent(value, format);
             case 'date':
             case 'datetime':
-                return this.formatCustomDate(value, format);
+                return this.formatCustomDate(value, format, IsDateOnlySQLType(field.Type));
             case 'boolean':
                 return this.formatCustomBoolean(value, format);
             default:
@@ -3344,7 +3500,12 @@ export class EntityDataGridComponent extends BaseAngularComponent {
         // Assume value is already a percentage (e.g., 50 = 50%), divide by 100
         return new Intl.NumberFormat('en-US', options).format(num / 100);
     }
-    formatCustomDate(value, format) {
+    /**
+     * @param dateOnly The column is a SQL `date`: a calendar day at UTC midnight with no time to show.
+     * It is rendered in UTC so the day does not shift west of Greenwich, and a `datetime` column
+     * format cannot add a time of day to it (MJ#4210). A timestamp column keeps local rendering.
+     */
+    formatCustomDate(value, format, dateOnly) {
         const date = value instanceof Date ? value : new Date(value);
         if (isNaN(date.getTime()))
             return String(value);
@@ -3352,6 +3513,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
         const formatStr = format.dateFormat || 'medium';
         const includeWeekday = formatStr.includes('-weekday');
         const baseFormat = formatStr.replace('-weekday', '');
+        const withTime = format.type === 'datetime' && !dateOnly;
         let options;
         // Intl.DateTimeFormat doesn't allow combining dateStyle with weekday
         // So we must use individual components when weekday is requested
@@ -3366,7 +3528,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
                 // medium
                 options = { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric' };
             }
-            if (format.type === 'datetime') {
+            if (withTime) {
                 options.hour = 'numeric';
                 options.minute = '2-digit';
             }
@@ -3376,11 +3538,11 @@ export class EntityDataGridComponent extends BaseAngularComponent {
             options = {
                 dateStyle: baseFormat === 'short' ? 'short' : baseFormat === 'long' ? 'long' : 'medium'
             };
-            if (format.type === 'datetime') {
+            if (withTime) {
                 options.timeStyle = 'short';
             }
         }
-        return new Intl.DateTimeFormat('en-US', options).format(date);
+        return dateOnly ? FormatDateOnly(date, options, 'en-US') : new Intl.DateTimeFormat('en-US', options).format(date);
     }
     formatCustomBoolean(value, format) {
         if (format.booleanDisplay === 'icon') {
@@ -3402,17 +3564,17 @@ export class EntityDataGridComponent extends BaseAngularComponent {
     updateAgRowSelection() {
         switch (this._selectionMode) {
             case 'none':
-                this.agRowSelection = { mode: 'singleRow', enableClickSelection: false, checkboxes: false };
+                this.AgRowSelection = { mode: 'singleRow', enableClickSelection: false, checkboxes: false };
                 break;
             case 'single':
-                this.agRowSelection = { mode: 'singleRow', enableClickSelection: true, checkboxes: false };
+                this.AgRowSelection = { mode: 'singleRow', enableClickSelection: true, checkboxes: false };
                 break;
             case 'multiple':
                 // enableSelectionWithoutKeys replaces deprecated rowMultiSelectWithClick (as of AG Grid v32.2)
-                this.agRowSelection = { mode: 'multiRow', enableClickSelection: true, checkboxes: false, enableSelectionWithoutKeys: true };
+                this.AgRowSelection = { mode: 'multiRow', enableClickSelection: true, checkboxes: false, enableSelectionWithoutKeys: true };
                 break;
             case 'checkbox':
-                this.agRowSelection = {
+                this.AgRowSelection = {
                     mode: 'multiRow',
                     enableClickSelection: true,
                     checkboxes: true,
@@ -3423,7 +3585,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
         }
         // Update the grid if it's already initialized
         if (this.gridApi) {
-            this.gridApi.setGridOption('rowSelection', this.agRowSelection);
+            this.gridApi.setGridOption('rowSelection', this.AgRowSelection);
         }
     }
     // ========================================
@@ -3522,7 +3684,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
                 runViewParams.UserSearchString = beforeLoadEvent.modifiedParams.searchString;
             }
         }
-        this.loading = true;
+        this.Loading = true;
         this._aggregatesLoading = true;
         this.errorMessage = '';
         this.cdr.detectChanges();
@@ -3530,7 +3692,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
         try {
             // Build aggregate expressions from config if present
             // Use EffectiveAggregatesConfig to check both _aggregatesConfig and _gridState.aggregates
-            const effectiveAggConfig = this.EffectiveAggregatesConfig;
+            const effectiveAggConfig = this.effectiveAggregatesConfig;
             let aggregateExpressions;
             if (effectiveAggConfig?.expressions?.length) {
                 aggregateExpressions = effectiveAggConfig.expressions
@@ -3544,7 +3706,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
             const result = await rv.RunView({
                 ...runViewParams,
                 ResultType: 'simple',
-                Fields: this._entityInfo ? computeFieldsList(this._entityInfo, this._gridState, this.hostColumnFieldNames()) : undefined,
+                Fields: this._entityInfo ? ComputeFieldsList(this._entityInfo, this._gridState, this.hostColumnFieldNames()) : undefined,
                 Aggregates: aggregateExpressions
             });
             const loadTimeMs = performance.now() - startTime;
@@ -3581,7 +3743,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
         }
         finally {
             this.ngZone.run(() => {
-                this.loading = false;
+                this.Loading = false;
                 this.cdr.detectChanges();
             });
         }
@@ -3637,7 +3799,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
                     const result = await rv.RunView({
                         ...runViewParams,
                         ResultType: 'simple',
-                        Fields: this._entityInfo ? computeFieldsList(this._entityInfo, this._gridState, this.hostColumnFieldNames()) : undefined
+                        Fields: this._entityInfo ? ComputeFieldsList(this._entityInfo, this._gridState, this.hostColumnFieldNames()) : undefined
                     });
                     if (result.Success) {
                         const entities = result.Results || [];
@@ -3730,7 +3892,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
     processData() {
         this._rowDataMap.clear();
         const dataSource = this._useExternalData ? this._data : this._allData;
-        this.rowData = dataSource.map((entity, index) => {
+        this.RowData = dataSource.map((entity, index) => {
             const key = this.getRowKey(entity);
             const rowData = {
                 key,
@@ -3791,7 +3953,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
     getRowKey(entity) {
         // Build key from EntityInfo PK fields when available
         if (this._entityInfo) {
-            return buildPkString(entity, this._entityInfo);
+            return BuildPkString(entity, this._entityInfo);
         }
         // Fallback to configured key field via direct property access
         const keyValue = entity[this._keyField];
@@ -3807,7 +3969,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
     // ========================================
     // AG Grid Event Handlers
     // ========================================
-    onGridReady(event) {
+    OnGridReady(event) {
         this.gridApi = event.api;
         // Let the quick filter (search box) match values in HIDDEN columns too (bug C2). AG Grid
         // defaults `includeHiddenColumnsInQuickFilter` to false, so without this a search term that
@@ -3826,6 +3988,10 @@ export class EntityDataGridComponent extends BaseAngularComponent {
             this.setupInfiniteScroll();
         }
     }
+    /** @deprecated Use {@link OnGridReady}. */
+    onGridReady(event) {
+        return this.OnGridReady(event);
+    }
     /**
      * Smart column auto-sizing that respects our width estimates
      * while ensuring the grid fills available space appropriately
@@ -3835,10 +4001,10 @@ export class EntityDataGridComponent extends BaseAngularComponent {
         // The proportional stretch below would fight that: sizeColumnsToFit() assigns explicit widths to
         // every column, which clears the filler's flex and re-introduces the stretching of real columns
         // that the filler exists to avoid.
-        if (this.agColumnDefs.some(col => col.flex))
+        if (this.AgColumnDefs.some(col => col.flex))
             return;
         // Get total estimated width from our column definitions
-        const totalEstimatedWidth = this.agColumnDefs.reduce((sum, col) => sum + (col.width || 150), 0);
+        const totalEstimatedWidth = this.AgColumnDefs.reduce((sum, col) => sum + (col.width || 150), 0);
         // Get available width from the grid container
         const gridElement = this.elementRef.nativeElement.querySelector('.mj-ag-grid');
         const availableWidth = gridElement?.clientWidth || 0;
@@ -3859,7 +4025,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
         // If our columns are wider than available space, let the user scroll horizontally
         // (AG Grid handles this automatically)
     }
-    onAgRowClicked(event) {
+    OnAgRowClicked(event) {
         if (!this._entityInfo || !event.data)
             return;
         const pkString = event.data['__pk'];
@@ -3880,7 +4046,11 @@ export class EntityDataGridComponent extends BaseAngularComponent {
             this.emitNavigationRequest(rowData.entity, pkString);
         }
     }
-    onAgRowDoubleClicked(event) {
+    /** @deprecated Use {@link OnAgRowClicked}. */
+    onAgRowClicked(event) {
+        return this.OnAgRowClicked(event);
+    }
+    OnAgRowDoubleClicked(event) {
         if (!this._entityInfo || !event.data)
             return;
         const pkString = event.data['__pk'];
@@ -3901,12 +4071,16 @@ export class EntityDataGridComponent extends BaseAngularComponent {
             this.emitNavigationRequest(rowData.entity, pkString);
         }
     }
+    /** @deprecated Use {@link OnAgRowDoubleClicked}. */
+    onAgRowDoubleClicked(event) {
+        return this.OnAgRowDoubleClicked(event);
+    }
     /**
      * Handles cell click events to detect FK link clicks.
      * When a user clicks on a foreign key link, emits ForeignKeyClick event
      * for the parent component to handle navigation.
      */
-    onAgCellClicked(event) {
+    OnAgCellClicked(event) {
         // Check if the click was on an FK link
         const target = event.event?.target;
         if (!target) {
@@ -3936,6 +4110,10 @@ export class EntityDataGridComponent extends BaseAngularComponent {
             //console.log('[FK Debug] Missing required data attributes, not emitting');
         }
     }
+    /** @deprecated Use {@link OnAgCellClicked}. */
+    onAgCellClicked(event) {
+        return this.OnAgCellClicked(event);
+    }
     /**
      * Emits a navigation request for the given entity record.
      */
@@ -3948,7 +4126,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
             compositeKey
         });
     }
-    onAgSortChanged(event) {
+    OnAgSortChanged(event) {
         if (this.suppressSortEvents) {
             return;
         }
@@ -3996,7 +4174,11 @@ export class EntityDataGridComponent extends BaseAngularComponent {
             this.emitGridStateChanged('sort');
         }
     }
-    onAgSelectionChanged(event) {
+    /** @deprecated Use {@link OnAgSortChanged}. */
+    onAgSortChanged(event) {
+        return this.OnAgSortChanged(event);
+    }
+    OnAgSelectionChanged(event) {
         const selectedNodes = event.api.getSelectedNodes();
         const previousSelection = [...this._selectedKeys];
         const newSelection = selectedNodes.map(node => node.data['__pk']);
@@ -4040,20 +4222,32 @@ export class EntityDataGridComponent extends BaseAngularComponent {
         }
         this.SelectionChange.emit(this._selectedKeys);
     }
-    onAgColumnResized(event) {
+    /** @deprecated Use {@link OnAgSelectionChanged}. */
+    onAgSelectionChanged(event) {
+        return this.OnAgSelectionChanged(event);
+    }
+    OnAgColumnResized(event) {
         if (event.finished && event.source !== 'api') {
             // User manually resized a column - mark as dirty
             this._isGridStateDirty = true;
             this.emitGridStateChanged('columns');
         }
     }
-    onAgColumnMoved(event) {
+    /** @deprecated Use {@link OnAgColumnResized}. */
+    onAgColumnResized(event) {
+        return this.OnAgColumnResized(event);
+    }
+    OnAgColumnMoved(event) {
         if (event.finished && event.source !== 'api') {
             // User manually moved a column - mark as dirty
             this._isGridStateDirty = true;
             this.emitGridStateChanged('columns');
         }
     }
+    /** @deprecated Use {@link OnAgColumnMoved}. */
+    onAgColumnMoved(event) {
+        return this.OnAgColumnMoved(event);
+    }
     // ========================================
     // Grid State Management
     // ========================================
@@ -4073,7 +4267,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
         });
         // Schedule auto-persist if enabled, but NOT during view transitions
         // (suppressPersist prevents old view's state from being saved to new view)
-        if (this._autoPersistState && !this._suppressPersist && this.canEditCurrentView) {
+        if (this._autoPersistState && !this._suppressPersist && this.CanEditCurrentView) {
             if (!this.IsDynamicView && this._viewEntity) {
                 // Stored view - persist to UserView.GridState (debounced)
                 // Track pending state for flush on destroy
@@ -4385,7 +4579,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
         this._data = [];
         this._rowDataMap.clear();
         this._selectedKeys = [];
-        this.rowData = [];
+        this.RowData = [];
         this.totalRowCount = 0;
         this.cdr.detectChanges();
     }
@@ -4457,7 +4651,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
     // ========================================
     // Toolbar Click Handlers
     // ========================================
-    onAddClick() {
+    OnAddClick() {
         // Emit legacy events for backward compatibility
         this.AddRequested.emit();
         this.NewButtonClick.emit();
@@ -4477,19 +4671,31 @@ export class EntityDataGridComponent extends BaseAngularComponent {
             }
         }
     }
-    onDeleteClick() {
+    /** @deprecated Use {@link OnAddClick}. */
+    onAddClick() {
+        return this.OnAddClick();
+    }
+    OnDeleteClick() {
         const selectedRows = this.GetSelectedRows();
         if (selectedRows.length > 0) {
             this.DeleteRequested.emit(selectedRows);
             this.DeleteButtonClick.emit(selectedRows);
         }
     }
-    onExportClick() {
+    /** @deprecated Use {@link OnDeleteClick}. */
+    onDeleteClick() {
+        return this.OnDeleteClick();
+    }
+    OnExportClick() {
         this.ExportRequested.emit();
         this.ExportButtonClick.emit();
         // Show the export dialog
         void this.showExportDialogForCurrentData();
     }
+    /** @deprecated Use {@link OnExportClick}. */
+    onExportClick() {
+        return this.OnExportClick();
+    }
     /**
      * Shows the export dialog for the full result set (falling back to the loaded page when no
      * ExportDataProvider is supplied).
@@ -4506,7 +4712,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
         }
         const columns = this.GetExportColumns();
         const fileName = this.getDefaultExportFileName();
-        this.exportDialogConfig = {
+        this.ExportDialogConfig = {
             data,
             columns,
             defaultFileName: fileName,
@@ -4516,17 +4722,21 @@ export class EntityDataGridComponent extends BaseAngularComponent {
             defaultSamplingMode: 'all',
             dialogTitle: `Export ${this._entityInfo?.Name || 'Data'}`
         };
-        this.showExportDialog = true;
+        this.ShowExportDialog = true;
         this.cdr.detectChanges();
     }
     /**
      * Handle export dialog close
      */
-    onExportDialogClosed(result) {
-        this.showExportDialog = false;
-        this.exportDialogConfig = null;
+    OnExportDialogClosed(result) {
+        this.ShowExportDialog = false;
+        this.ExportDialogConfig = null;
         this.cdr.detectChanges();
     }
+    /** @deprecated Use {@link OnExportDialogClosed}. */
+    onExportDialogClosed(result) {
+        return this.OnExportDialogClosed(result);
+    }
     /**
      * Export grid data directly without showing dialog.
      * Use this for programmatic export with specific options.
@@ -4596,7 +4806,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
             }
         }
         // rowData is already plain Record<string, unknown>[] objects - return directly
-        return this.rowData.map(row => row);
+        return this.RowData.map(row => row);
     }
     /**
      * The columns the grid is showing, in the order it shows them, with the headers it shows. This is the
@@ -4610,7 +4820,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
         const displayed = this.gridApi?.getAllDisplayedColumns() ?? [];
         const defs = displayed.length > 0
             ? displayed.map(c => c.getColDef())
-            : this.agColumnDefs.filter(d => !d.hide);
+            : this.AgColumnDefs.filter(d => !d.hide);
         // No `width`: ExportColumn.width is in characters, while grid widths are pixels, so passing them
         // made a 150px column 150 characters wide. Left unset, the Excel exporter auto-fits each column.
         return defs
@@ -4662,11 +4872,15 @@ export class EntityDataGridComponent extends BaseAngularComponent {
         const timestamp = new Date().toISOString().slice(0, 10);
         return `${entityName}_${timestamp}`;
     }
-    onRefreshClick() {
+    OnRefreshClick() {
         this.RefreshButtonClick.emit();
         this.Refresh();
     }
-    onCompareClick() {
+    /** @deprecated Use {@link OnRefreshClick}. */
+    onRefreshClick() {
+        return this.OnRefreshClick();
+    }
+    OnCompareClick() {
         const selectedRows = this.GetSelectedRows();
         if (selectedRows.length >= 2) {
             // Emit legacy event for backward compatibility
@@ -4680,7 +4894,11 @@ export class EntityDataGridComponent extends BaseAngularComponent {
             }
         }
     }
-    onMergeClick() {
+    /** @deprecated Use {@link OnCompareClick}. */
+    onCompareClick() {
+        return this.OnCompareClick();
+    }
+    OnMergeClick() {
         const selectedRows = this.GetSelectedRows();
         if (selectedRows.length >= 2) {
             // Emit legacy event for backward compatibility
@@ -4694,7 +4912,11 @@ export class EntityDataGridComponent extends BaseAngularComponent {
             }
         }
     }
-    async onAddToListClick() {
+    /** @deprecated Use {@link OnMergeClick}. */
+    onMergeClick() {
+        return this.OnMergeClick();
+    }
+    async OnAddToListClick() {
         let rows = this.GetSelectedRows();
         // No explicit selection → add EVERY matching record, not just the loaded page. Without this,
         // building a list from a sizeable view meant selecting-all page by page (bug E3). We fetch the
@@ -4720,7 +4942,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
             // Emit new structured event with record IDs for list management
             if (this._entityInfo) {
                 const recordIds = rows.map(r => {
-                    return buildPkString(r, this._entityInfo);
+                    return BuildPkString(r, this._entityInfo);
                 });
                 this.AddToListRequested.emit({
                     entityInfo: this._entityInfo,
@@ -4730,7 +4952,11 @@ export class EntityDataGridComponent extends BaseAngularComponent {
             }
         }
     }
-    onDuplicateSearchClick() {
+    /** @deprecated Use {@link OnAddToListClick}. */
+    async onAddToListClick() {
+        return this.OnAddToListClick();
+    }
+    OnDuplicateSearchClick() {
         const selectedRows = this.GetSelectedRows();
         if (selectedRows.length >= 2) {
             // Emit legacy event for backward compatibility
@@ -4744,7 +4970,11 @@ export class EntityDataGridComponent extends BaseAngularComponent {
             }
         }
     }
-    onCommunicationClick() {
+    /** @deprecated Use {@link OnDuplicateSearchClick}. */
+    onDuplicateSearchClick() {
+        return this.OnDuplicateSearchClick();
+    }
+    OnCommunicationClick() {
         const selectedRows = this.GetSelectedRows();
         if (selectedRows.length > 0) {
             // Emit legacy event for backward compatibility
@@ -4759,6 +4989,10 @@ export class EntityDataGridComponent extends BaseAngularComponent {
             }
         }
     }
+    /** @deprecated Use {@link OnCommunicationClick}. */
+    onCommunicationClick() {
+        return this.OnCommunicationClick();
+    }
     /**
      * "Manage Columns" / column-chooser toolbar affordance. The grid is generic and doesn't own a
      * column-management UI, so it raises {@link ManageColumnsRequested} for its host to handle —
@@ -4766,9 +5000,13 @@ export class EntityDataGridComponent extends BaseAngularComponent {
      * column editor backed by `UserView.GridState`. Hosts that embed the grid standalone can handle
      * this to surface their own column UI.
      */
-    onColumnChooserClick() {
+    OnColumnChooserClick() {
         this.ManageColumnsRequested.emit();
     }
+    /** @deprecated Use {@link OnColumnChooserClick}. */
+    onColumnChooserClick() {
+        return this.OnColumnChooserClick();
+    }
     /**
      * The runtime-UX driver currently mounted over the grid (e.g. the Record Process bulk-update runner),
      * or null when none. Set when an action whose invocation names a `RuntimeUXDriverClass` is clicked.
@@ -4779,7 +5017,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
      * grid mounts that interactive driver in-place (no parent wiring required); otherwise it emits
      * `EntityActionRequested` for the host to invoke the action the classic way.
      */
-    onEntityActionClick(action) {
+    OnEntityActionClick(action) {
         if (!this._entityInfo)
             return;
         if (action.runtimeUXDriverClass) {
@@ -4792,6 +5030,10 @@ export class EntityDataGridComponent extends BaseAngularComponent {
             selectedRecords: this.GetSelectedRows()
         });
     }
+    /** @deprecated Use {@link OnEntityActionClick}. */
+    onEntityActionClick(action) {
+        return this.OnEntityActionClick(action);
+    }
     /** Builds the driver context from the current entity + selection and mounts the named driver. */
     mountRuntimeDriver(action) {
         const entity = this._entityInfo;
@@ -4828,7 +5070,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
     /**
      * Checks if an entity action is currently enabled based on selection requirements
      */
-    isEntityActionEnabled(action) {
+    IsEntityActionEnabled(action) {
         if (!action.requiresSelection)
             return true;
         const selectedCount = this._selectedKeys.length;
@@ -4840,14 +5082,18 @@ export class EntityDataGridComponent extends BaseAngularComponent {
             return false;
         return true;
     }
+    /** @deprecated Use {@link IsEntityActionEnabled}. */
+    isEntityActionEnabled(action) {
+        return this.IsEntityActionEnabled(action);
+    }
     // ========================================
     // Overflow Menu Methods
     // ========================================
-    toggleOverflowMenu() {
-        this.showOverflowMenu = !this.showOverflowMenu;
+    ToggleOverflowMenu() {
+        this.ShowOverflowMenu = !this.ShowOverflowMenu;
         this.cdr.detectChanges();
         // Add click outside listener when menu is open
-        if (this.showOverflowMenu) {
+        if (this.ShowOverflowMenu) {
             setTimeout(() => {
                 document.addEventListener('click', this.handleOutsideClick);
             }, 0);
@@ -4856,35 +5102,63 @@ export class EntityDataGridComponent extends BaseAngularComponent {
             document.removeEventListener('click', this.handleOutsideClick);
         }
     }
-    closeOverflowMenu() {
-        this.showOverflowMenu = false;
+    /** @deprecated Use {@link ToggleOverflowMenu}. */
+    toggleOverflowMenu() {
+        return this.ToggleOverflowMenu();
+    }
+    CloseOverflowMenu() {
+        this.ShowOverflowMenu = false;
         document.removeEventListener('click', this.handleOutsideClick);
         this.cdr.detectChanges();
     }
+    /** @deprecated Use {@link CloseOverflowMenu}. */
+    closeOverflowMenu() {
+        return this.CloseOverflowMenu();
+    }
     handleOutsideClick = () => {
-        this.closeOverflowMenu();
+        this.CloseOverflowMenu();
     };
     // Overflow menu visibility helpers
-    get hasOverflowMenuItems() {
-        return this.showExportInOverflow ||
-            this.showColumnChooserInOverflow ||
+    get HasOverflowMenuItems() {
+        return this.ShowExportInOverflow ||
+            this.ShowColumnChooserInOverflow ||
             (this._showEntityActionButtons && this._entityActions.length > 0) ||
-            this.hasSelectionDependentOverflowActions;
+            this.HasSelectionDependentOverflowActions;
     }
-    get showExportInOverflow() {
+    /** @deprecated Use {@link HasOverflowMenuItems}. */
+    get hasOverflowMenuItems() {
+        return this.HasOverflowMenuItems;
+    }
+    get ShowExportInOverflow() {
         // Export is in overflow when it's not shown as a primary button
         return !this.ShowExportButton && !!this.ToolbarConfig.showExport;
     }
-    get showColumnChooserInOverflow() {
+    /** @deprecated Use {@link ShowExportInOverflow}. */
+    get showExportInOverflow() {
+        return this.ShowExportInOverflow;
+    }
+    get ShowColumnChooserInOverflow() {
         return this.AllowColumnToggle && !this.ToolbarConfig.showColumnChooser;
     }
+    /** @deprecated Use {@link ShowColumnChooserInOverflow}. */
+    get showColumnChooserInOverflow() {
+        return this.ShowColumnChooserInOverflow;
+    }
+    get HasSelectionDependentOverflowActions() {
+        return this.ShowCommunicationInOverflow;
+    }
+    /** @deprecated Use {@link HasSelectionDependentOverflowActions}. */
     get hasSelectionDependentOverflowActions() {
-        return this.showCommunicationInOverflow;
+        return this.HasSelectionDependentOverflowActions;
     }
-    get showCommunicationInOverflow() {
+    get ShowCommunicationInOverflow() {
         // Communication is in overflow when it's not shown as a primary button
         return !this.ShowCommunicationButton && this.HasSelection && this.EntitySupportsCommunication;
     }
+    /** @deprecated Use {@link ShowCommunicationInOverflow}. */
+    get showCommunicationInOverflow() {
+        return this.ShowCommunicationInOverflow;
+    }
     // ========================================
     // Toolbar Button State Helpers
     // ========================================
@@ -4897,13 +5171,13 @@ export class EntityDataGridComponent extends BaseAngularComponent {
     // ========================================
     // CSS Helpers
     // ========================================
-    get gridContainerClasses() {
+    get GridContainerClasses() {
         const classes = ['mj-grid-container'];
         classes.push(`grid-lines-${this._gridLines}`);
         if (this._striped)
             classes.push('grid-striped');
         // Add visual config classes
-        const vc = this.effectiveVisualConfig;
+        const vc = this.EffectiveVisualConfig;
         classes.push(`header-style-${vc.headerStyle}`);
         if (vc.headerShadow)
             classes.push('header-shadow');
@@ -4916,11 +5190,15 @@ export class EntityDataGridComponent extends BaseAngularComponent {
             classes.push(`checkbox-style-${vc.checkboxStyle}`);
         return classes;
     }
+    /** @deprecated Use {@link GridContainerClasses}. */
+    get gridContainerClasses() {
+        return this.GridContainerClasses;
+    }
     /**
      * Apply visual configuration by setting CSS custom properties
      */
     applyVisualConfig() {
-        const vc = this.effectiveVisualConfig;
+        const vc = this.EffectiveVisualConfig;
         const el = this.elementRef.nativeElement;
         // Set CSS custom properties for dynamic values
         if (vc.headerBackground) {
@@ -4956,16 +5234,20 @@ export class EntityDataGridComponent extends BaseAngularComponent {
             this.buildAgColumnDefs();
         }
     }
-    get gridHeightStyle() {
+    get GridHeightStyle() {
         if (typeof this._height === 'number') {
             return `${this._height}px`;
         }
         return this._height === 'auto' ? '100%' : 'fit-content';
     }
+    /** @deprecated Use {@link GridHeightStyle}. */
+    get gridHeightStyle() {
+        return this.GridHeightStyle;
+    }
     // ========================================
     // Toolbar Button Helpers
     // ========================================
-    isButtonVisible(button) {
+    IsButtonVisible(button) {
         if (button.visible === undefined)
             return true;
         if (typeof button.visible === 'boolean')
@@ -4974,7 +5256,11 @@ export class EntityDataGridComponent extends BaseAngularComponent {
             return button.visible();
         return true;
     }
-    isButtonDisabled(button) {
+    /** @deprecated Use {@link IsButtonVisible}. */
+    isButtonVisible(button) {
+        return this.IsButtonVisible(button);
+    }
+    IsButtonDisabled(button) {
         if (button.disabled === undefined)
             return false;
         if (typeof button.disabled === 'boolean')
@@ -4983,11 +5269,19 @@ export class EntityDataGridComponent extends BaseAngularComponent {
             return button.disabled();
         return false;
     }
-    onToolbarButtonClick(button) {
+    /** @deprecated Use {@link IsButtonDisabled}. */
+    isButtonDisabled(button) {
+        return this.IsButtonDisabled(button);
+    }
+    OnToolbarButtonClick(button) {
         if (button.onClick) {
             button.onClick();
         }
     }
+    /** @deprecated Use {@link OnToolbarButtonClick}. */
+    onToolbarButtonClick(button) {
+        return this.OnToolbarButtonClick(button);
+    }
     // ========================================
     // Public Getters
     // ========================================
@@ -5004,15 +5298,15 @@ export class EntityDataGridComponent extends BaseAngularComponent {
             i0.ɵɵviewQuery(_c0, 5);
         } if (rf & 2) {
             let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.gridContainer = _t.first);
-        } }, inputs: { Params: "Params", AllowLoad: "AllowLoad", AutoRefreshOnParamsChange: "AutoRefreshOnParamsChange", PaginationMode: "PaginationMode", PageSize: "PageSize", CacheBlockSize: "CacheBlockSize", MaxBlocksInCache: "MaxBlocksInCache", ShowPager: "ShowPager", ExportDataProvider: "ExportDataProvider", ShowRecycleBin: "ShowRecycleBin", PagerPageNumber: "PagerPageNumber", TotalRowCount: "TotalRowCount", Data: "Data", Columns: "Columns", GridState: "GridState", AllowColumnReorder: "AllowColumnReorder", AllowColumnResize: "AllowColumnResize", AllowColumnToggle: "AllowColumnToggle", ShowHeader: "ShowHeader", AllowSorting: "AllowSorting", AllowMultiSort: "AllowMultiSort", ServerSideSorting: "ServerSideSorting", AllowColumnFilters: "AllowColumnFilters", ShowSearch: "ShowSearch", SelectionMode: "SelectionMode", SelectedKeys: "SelectedKeys", KeyField: "KeyField", EditMode: "EditMode", AllowAdd: "AllowAdd", AllowDelete: "AllowDelete", Height: "Height", RowHeight: "RowHeight", WrapText: "WrapText", VirtualScroll: "VirtualScroll", ShowRowNumbers: "ShowRowNumbers", FillWidth: "FillWidth", Striped: "Striped", GridLines: "GridLines", VisualConfig: "VisualConfig", ShowToolbar: "ShowToolbar", ToolbarConfig: "ToolbarConfig", StateKey: "StateKey", AutoPersistState: "AutoPersistState", StatePersistDebounce: "StatePersistDebounce", RefreshDebounce: "RefreshDebounce", FilterText: "FilterText", ShowNewButton: "ShowNewButton", ShowRefreshButton: "ShowRefreshButton", ShowExportButton: "ShowExportButton", ShowDeleteButton: "ShowDeleteButton", ShowCompareButton: "ShowCompareButton", ShowMergeButton: "ShowMergeButton", ShowAddToListButton: "ShowAddToListButton", ShowDuplicateSearchButton: "ShowDuplicateSearchButton", ShowCommunicationButton: "ShowCommunicationButton", AutoNavigate: "AutoNavigate", NavigateOnDoubleClick: "NavigateOnDoubleClick", CreateRecordMode: "CreateRecordMode", NewRecordValues: "NewRecordValues", ShowEntityActionButtons: "ShowEntityActionButtons", EntityActions: "EntityActions", AutoLoadEntityActions: "AutoLoadEntityActions", AggregatesConfig: "AggregatesConfig" }, outputs: { PageChange: "PageChange", AggregatesLoaded: "AggregatesLoaded", BeforeRowSelect: "BeforeRowSelect", AfterRowSelect: "AfterRowSelect", BeforeRowDeselect: "BeforeRowDeselect", AfterRowDeselect: "AfterRowDeselect", SelectionChange: "SelectionChange", BeforeRowClick: "BeforeRowClick", AfterRowClick: "AfterRowClick", BeforeRowDoubleClick: "BeforeRowDoubleClick", AfterRowDoubleClick: "AfterRowDoubleClick", ForeignKeyClick: "ForeignKeyClick", BeforeCellEdit: "BeforeCellEdit", AfterCellEditBegin: "AfterCellEditBegin", BeforeCellEditCommit: "BeforeCellEditCommit", AfterCellEditCommit: "AfterCellEditCommit", BeforeCellEditCancel: "BeforeCellEditCancel", AfterCellEditCancel: "AfterCellEditCancel", BeforeRowSave: "BeforeRowSave", AfterRowSave: "AfterRowSave", BeforeRowDelete: "BeforeRowDelete", AfterRowDelete: "AfterRowDelete", BeforeDataLoad: "BeforeDataLoad", AfterDataLoad: "AfterDataLoad", BeforeDataRefresh: "BeforeDataRefresh", AfterDataRefresh: "AfterDataRefresh", BeforeSort: "BeforeSort", AfterSort: "AfterSort", BeforeColumnReorder: "BeforeColumnReorder", AfterColumnReorder: "AfterColumnReorder", BeforeColumnResize: "BeforeColumnResize", AfterColumnResize: "AfterColumnResize", BeforeColumnVisibilityChange: "BeforeColumnVisibilityChange", AfterColumnVisibilityChange: "AfterColumnVisibilityChange", GridStateChanged: "GridStateChanged", AddRequested: "AddRequested", DeleteRequested: "DeleteRequested", ExportRequested: "ExportRequested", NewButtonClick: "NewButtonClick", RefreshButtonClick: "RefreshButtonClick", ExportButtonClick: "ExportButtonClick", DeleteButtonClick: "DeleteButtonClick", CompareButtonClick: "CompareButtonClick", MergeButtonClick: "MergeButtonClick", AddToListButtonClick: "AddToListButtonClick", DuplicateSearchButtonClick: "DuplicateSearchButtonClick", CommunicationButtonClick: "CommunicationButtonClick", ManageColumnsRequested: "ManageColumnsRequested", NavigationRequested: "NavigationRequested", NewRecordDialogRequested: "NewRecordDialogRequested", NewRecordTabRequested: "NewRecordTabRequested", CompareRecordsRequested: "CompareRecordsRequested", MergeRecordsRequested: "MergeRecordsRequested", CommunicationRequested: "CommunicationRequested", DuplicateSearchRequested: "DuplicateSearchRequested", AddToListRequested: "AddToListRequested", LoadEntityActionsRequested: "LoadEntityActionsRequested", EntityActionRequested: "EntityActionRequested" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 14, vars: 16, consts: [["gridContainer", ""], [1, "mj-grid-toolbar"], [1, "mj-aggregate-cards"], [1, "mj-grid-content"], [1, "mj-grid-loading-overlay"], ["Variant", "error", "Icon", "fa-solid fa-triangle-exclamation", "Title", "Couldn't load this data", "ActionText", "Retry", "ActionIcon", "fa-solid fa-arrows-rotate", 1, "mj-grid-state-fill", 3, "Size", "Message"], ["Icon", "fa-solid fa-inbox", "Title", "No data to display", 1, "mj-grid-state-fill", 3, "Size"], [1, "mj-ag-grid", "ag-theme-alpine", 3, "theme", "columnDefs", "rowData", "defaultColDef", "rowSelection", "getRowId", "suppressCellFocus", "rowHeight", "headerHeight"], [1, "mj-ag-grid", "ag-theme-alpine", 3, "theme", "columnDefs", "defaultColDef", "rowSelection", "getRowId", "suppressCellFocus", "rowHeight", "headerHeight", "rowModelType", "cacheBlockSize", "maxBlocksInCache", "infiniteInitialRowCount", "cacheOverflowSize"], [3, "TotalRowCount", "PageNumber", "PageSize", "IsLoading"], [1, "mj-aggregate-summary"], [3, "closed", "visible", "config"], [3, "DriverClass", "Context"], [1, "toolbar-left"], [1, "toolbar-search"], [1, "toolbar-center"], [1, "row-count"], [1, "selection-count"], [1, "toolbar-right"], [3, "EntityName"], ["title", "Create new record", 1, "toolbar-button"], ["title", "Refresh data", 1, "toolbar-button", 3, "disabled"], ["title", "Export", 1, "toolbar-button", 3, "disabled"], ["title", "Delete selected records", 1, "toolbar-button", "toolbar-button-danger"], ["title", "Compare selected records", 1, "toolbar-button", 3, "disabled"], ["title", "Merge selected records", 1, "toolbar-button", 3, "disabled"], [1, "toolbar-button", 3, "title", "disabled"], ["title", "Search for duplicate records", 1, "toolbar-button", 3, "disabled"], ["title", "Send message to selected records", 1, "toolbar-button", 3, "disabled"], ["title", "Add New", 1, "toolbar-button"], ["title", "Refresh", 1, "toolbar-button", 3, "disabled"], ["title", "Delete Selected", 1, "toolbar-button", "toolbar-button-danger"], ["title", "Export", 1, "toolbar-button"], ["title", "Column Chooser", 1, "toolbar-button"], [1, "toolbar-overflow"], [1, "fa-solid", "fa-search", "search-icon"], ["type", "text", 1, "search-input", 3, "input", "placeholder", "value"], ["aria-label", "Clear search", 1, "search-clear"], ["aria-label", "Clear search", 1, "search-clear", 3, "click"], [1, "fa-solid", "fa-times"], [1, "toolbar-button", 3, "class", "disabled", "title"], [1, "toolbar-button", 3, "click", "disabled", "title"], [3, "class"], ["title", "Create new record", 1, "toolbar-button", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "button-text"], ["title", "Refresh data", 1, "toolbar-button", 3, "click", "disabled"], [1, "fa-solid", "fa-arrows-rotate"], ["title", "Export", 1, "toolbar-button", 3, "click", "disabled"], [1, "fa-solid"], ["title", "Delete selected records", 1, "toolbar-button", "toolbar-button-danger", 3, "click"], [1, "fa-solid", "fa-trash"], ["title", "Compare selected records", 1, "toolbar-button", 3, "click", "disabled"], [1, "fa-solid", "fa-code-compare"], ["title", "Merge selected records", 1, "toolbar-button", 3, "click", "disabled"], [1, "fa-solid", "fa-code-merge"], [1, "toolbar-button", 3, "click", "title", "disabled"], ["title", "Search for duplicate records", 1, "toolbar-button", 3, "click", "disabled"], [1, "fa-solid", "fa-magnifying-glass-plus"], ["title", "Send message to selected records", 1, "toolbar-button", 3, "click", "disabled"], [1, "fa-solid", "fa-envelope"], ["title", "Add New", 1, "toolbar-button", 3, "click"], ["title", "Refresh", 1, "toolbar-button", 3, "click", "disabled"], [1, "fa-solid", "fa-refresh"], ["title", "Delete Selected", 1, "toolbar-button", "toolbar-button-danger", 3, "click"], ["title", "Export", 1, "toolbar-button", 3, "click"], [1, "fa-solid", "fa-download"], ["title", "Column Chooser", 1, "toolbar-button", 3, "click"], [1, "fa-solid", "fa-columns"], [1, "toolbar-overflow", 3, "click"], ["title", "More actions", 1, "toolbar-button", "overflow-trigger", 3, "click"], [1, "fa-solid", "fa-ellipsis-vertical"], [1, "overflow-menu"], [1, "overflow-item"], [1, "overflow-divider"], [1, "overflow-item", 3, "click"], [1, "fa-solid", "fa-file-excel"], [1, "overflow-section-label"], [1, "overflow-item", 3, "disabled"], [1, "overflow-item", 3, "click", "disabled"], [1, "aggregate-card"], [1, "aggregate-card-loading"], [1, "aggregate-card-icon"], [1, "aggregate-card-content"], [1, "aggregate-card-label"], [1, "aggregate-card-value"], [1, "fa-solid", "fa-spinner", "fa-spin"], ["text", "Loading..."], ["Variant", "error", "Icon", "fa-solid fa-triangle-exclamation", "Title", "Couldn't load this data", "ActionText", "Retry", "ActionIcon", "fa-solid fa-arrows-rotate", 1, "mj-grid-state-fill", 3, "Action", "Size", "Message"], [1, "mj-ag-grid", "ag-theme-alpine", 3, "gridReady", "cellClicked", "rowClicked", "rowDoubleClicked", "sortChanged", "selectionChanged", "columnResized", "columnMoved", "theme", "columnDefs", "rowData", "defaultColDef", "rowSelection", "getRowId", "suppressCellFocus", "rowHeight", "headerHeight"], [1, "mj-ag-grid", "ag-theme-alpine", 3, "gridReady", "cellClicked", "rowClicked", "rowDoubleClicked", "sortChanged", "selectionChanged", "columnResized", "columnMoved", "theme", "columnDefs", "defaultColDef", "rowSelection", "getRowId", "suppressCellFocus", "rowHeight", "headerHeight", "rowModelType", "cacheBlockSize", "maxBlocksInCache", "infiniteInitialRowCount", "cacheOverflowSize"], [3, "PageChange", "TotalRowCount", "PageNumber", "PageSize", "IsLoading"], [1, "aggregate-summary-content"], [1, "aggregate-summary-item"], [1, "aggregate-loading"], [1, "agg-summary-label"], [1, "agg-summary-value"], [3, "Completed", "Cancelled", "DriverClass", "Context"]], template: function EntityDataGridComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.GridContainer = _t.first);
+        } }, inputs: { Params: "Params", AllowLoad: "AllowLoad", AutoRefreshOnParamsChange: "AutoRefreshOnParamsChange", PaginationMode: "PaginationMode", PageSize: "PageSize", CacheBlockSize: "CacheBlockSize", MaxBlocksInCache: "MaxBlocksInCache", ShowPager: "ShowPager", ExportDataProvider: "ExportDataProvider", ShowRecycleBin: "ShowRecycleBin", PagerPageNumber: "PagerPageNumber", TotalRowCount: "TotalRowCount", Data: "Data", Columns: "Columns", GridState: "GridState", AllowColumnReorder: "AllowColumnReorder", AllowColumnResize: "AllowColumnResize", AllowColumnToggle: "AllowColumnToggle", ShowHeader: "ShowHeader", AllowSorting: "AllowSorting", AllowMultiSort: "AllowMultiSort", ServerSideSorting: "ServerSideSorting", AllowColumnFilters: "AllowColumnFilters", ShowSearch: "ShowSearch", SelectionMode: "SelectionMode", SelectedKeys: "SelectedKeys", KeyField: "KeyField", EditMode: "EditMode", AllowAdd: "AllowAdd", AllowDelete: "AllowDelete", Height: "Height", RowHeight: "RowHeight", WrapText: "WrapText", VirtualScroll: "VirtualScroll", ShowRowNumbers: "ShowRowNumbers", FillWidth: "FillWidth", Striped: "Striped", GridLines: "GridLines", VisualConfig: "VisualConfig", ShowToolbar: "ShowToolbar", ToolbarConfig: "ToolbarConfig", StateKey: "StateKey", AutoPersistState: "AutoPersistState", StatePersistDebounce: "StatePersistDebounce", RefreshDebounce: "RefreshDebounce", FilterText: "FilterText", ShowNewButton: "ShowNewButton", ShowRefreshButton: "ShowRefreshButton", ShowExportButton: "ShowExportButton", ShowDeleteButton: "ShowDeleteButton", ShowCompareButton: "ShowCompareButton", ShowMergeButton: "ShowMergeButton", ShowAddToListButton: "ShowAddToListButton", ShowDuplicateSearchButton: "ShowDuplicateSearchButton", ShowCommunicationButton: "ShowCommunicationButton", AutoNavigate: "AutoNavigate", NavigateOnDoubleClick: "NavigateOnDoubleClick", CreateRecordMode: "CreateRecordMode", NewRecordValues: "NewRecordValues", ShowEntityActionButtons: "ShowEntityActionButtons", EntityActions: "EntityActions", AutoLoadEntityActions: "AutoLoadEntityActions", AggregatesConfig: "AggregatesConfig" }, outputs: { PageChange: "PageChange", AggregatesLoaded: "AggregatesLoaded", BeforeRowSelect: "BeforeRowSelect", AfterRowSelect: "AfterRowSelect", BeforeRowDeselect: "BeforeRowDeselect", AfterRowDeselect: "AfterRowDeselect", SelectionChange: "SelectionChange", BeforeRowClick: "BeforeRowClick", AfterRowClick: "AfterRowClick", BeforeRowDoubleClick: "BeforeRowDoubleClick", AfterRowDoubleClick: "AfterRowDoubleClick", ForeignKeyClick: "ForeignKeyClick", BeforeCellEdit: "BeforeCellEdit", AfterCellEditBegin: "AfterCellEditBegin", BeforeCellEditCommit: "BeforeCellEditCommit", AfterCellEditCommit: "AfterCellEditCommit", BeforeCellEditCancel: "BeforeCellEditCancel", AfterCellEditCancel: "AfterCellEditCancel", BeforeRowSave: "BeforeRowSave", AfterRowSave: "AfterRowSave", BeforeRowDelete: "BeforeRowDelete", AfterRowDelete: "AfterRowDelete", BeforeDataLoad: "BeforeDataLoad", AfterDataLoad: "AfterDataLoad", BeforeDataRefresh: "BeforeDataRefresh", AfterDataRefresh: "AfterDataRefresh", BeforeSort: "BeforeSort", AfterSort: "AfterSort", BeforeColumnReorder: "BeforeColumnReorder", AfterColumnReorder: "AfterColumnReorder", BeforeColumnResize: "BeforeColumnResize", AfterColumnResize: "AfterColumnResize", BeforeColumnVisibilityChange: "BeforeColumnVisibilityChange", AfterColumnVisibilityChange: "AfterColumnVisibilityChange", GridStateChanged: "GridStateChanged", AddRequested: "AddRequested", DeleteRequested: "DeleteRequested", ExportRequested: "ExportRequested", NewButtonClick: "NewButtonClick", RefreshButtonClick: "RefreshButtonClick", ExportButtonClick: "ExportButtonClick", DeleteButtonClick: "DeleteButtonClick", CompareButtonClick: "CompareButtonClick", MergeButtonClick: "MergeButtonClick", AddToListButtonClick: "AddToListButtonClick", DuplicateSearchButtonClick: "DuplicateSearchButtonClick", CommunicationButtonClick: "CommunicationButtonClick", ManageColumnsRequested: "ManageColumnsRequested", NavigationRequested: "NavigationRequested", NewRecordDialogRequested: "NewRecordDialogRequested", NewRecordTabRequested: "NewRecordTabRequested", CompareRecordsRequested: "CompareRecordsRequested", MergeRecordsRequested: "MergeRecordsRequested", CommunicationRequested: "CommunicationRequested", DuplicateSearchRequested: "DuplicateSearchRequested", AddToListRequested: "AddToListRequested", LoadEntityActionsRequested: "LoadEntityActionsRequested", EntityActionRequested: "EntityActionRequested" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 14, vars: 16, consts: [["gridContainer", ""], [1, "mj-grid-toolbar"], [1, "mj-aggregate-cards"], [1, "mj-grid-content"], [1, "mj-grid-loading-overlay"], ["Variant", "error", "Icon", "fa-solid fa-triangle-exclamation", "Title", "Couldn't load this data", "ActionText", "Retry", "ActionIcon", "fa-solid fa-arrows-rotate", 1, "mj-grid-state-fill", 3, "Size", "Message"], ["Icon", "fa-solid fa-inbox", 1, "mj-grid-state-fill", 3, "Size", "Title"], [1, "mj-ag-grid", "ag-theme-alpine", 3, "theme", "columnDefs", "rowData", "defaultColDef", "rowSelection", "getRowId", "suppressCellFocus", "rowHeight", "headerHeight"], [1, "mj-ag-grid", "ag-theme-alpine", 3, "theme", "columnDefs", "defaultColDef", "rowSelection", "getRowId", "suppressCellFocus", "rowHeight", "headerHeight", "rowModelType", "cacheBlockSize", "maxBlocksInCache", "infiniteInitialRowCount", "cacheOverflowSize"], [3, "TotalRowCount", "PageNumber", "PageSize", "IsLoading"], [1, "mj-aggregate-summary"], [3, "closed", "visible", "config"], [3, "DriverClass", "Context"], [1, "toolbar-left"], [1, "toolbar-search"], [1, "toolbar-center"], [1, "row-count"], [1, "selection-count"], [1, "toolbar-right"], [3, "EntityName"], ["title", "Create new record", 1, "toolbar-button"], ["title", "Refresh data", 1, "toolbar-button", 3, "disabled"], ["title", "Export", 1, "toolbar-button", 3, "disabled"], ["title", "Delete selected records", 1, "toolbar-button", "toolbar-button-danger"], ["title", "Compare selected records", 1, "toolbar-button", 3, "disabled"], ["title", "Merge selected records", 1, "toolbar-button", 3, "disabled"], [1, "toolbar-button", 3, "title", "disabled"], ["title", "Search for duplicate records", 1, "toolbar-button", 3, "disabled"], ["title", "Send message to selected records", 1, "toolbar-button", 3, "disabled"], ["title", "Add New", 1, "toolbar-button"], ["title", "Refresh", 1, "toolbar-button", 3, "disabled"], ["title", "Delete Selected", 1, "toolbar-button", "toolbar-button-danger"], ["title", "Export", 1, "toolbar-button"], ["title", "Column Chooser", 1, "toolbar-button"], [1, "toolbar-overflow"], [1, "fa-solid", "fa-search", "search-icon"], ["type", "text", 1, "search-input", 3, "input", "placeholder", "value"], ["aria-label", "Clear search", 1, "search-clear"], ["aria-label", "Clear search", 1, "search-clear", 3, "click"], [1, "fa-solid", "fa-times"], [1, "toolbar-button", 3, "class", "disabled", "title"], [1, "toolbar-button", 3, "click", "disabled", "title"], [3, "class"], ["title", "Create new record", 1, "toolbar-button", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "button-text"], ["title", "Refresh data", 1, "toolbar-button", 3, "click", "disabled"], [1, "fa-solid", "fa-arrows-rotate"], ["title", "Export", 1, "toolbar-button", 3, "click", "disabled"], [1, "fa-solid"], ["title", "Delete selected records", 1, "toolbar-button", "toolbar-button-danger", 3, "click"], [1, "fa-solid", "fa-trash"], ["title", "Compare selected records", 1, "toolbar-button", 3, "click", "disabled"], [1, "fa-solid", "fa-code-compare"], ["title", "Merge selected records", 1, "toolbar-button", 3, "click", "disabled"], [1, "fa-solid", "fa-code-merge"], [1, "toolbar-button", 3, "click", "title", "disabled"], ["title", "Search for duplicate records", 1, "toolbar-button", 3, "click", "disabled"], [1, "fa-solid", "fa-magnifying-glass-plus"], ["title", "Send message to selected records", 1, "toolbar-button", 3, "click", "disabled"], [1, "fa-solid", "fa-envelope"], ["title", "Add New", 1, "toolbar-button", 3, "click"], ["title", "Refresh", 1, "toolbar-button", 3, "click", "disabled"], [1, "fa-solid", "fa-refresh"], ["title", "Delete Selected", 1, "toolbar-button", "toolbar-button-danger", 3, "click"], ["title", "Export", 1, "toolbar-button", 3, "click"], [1, "fa-solid", "fa-download"], ["title", "Column Chooser", 1, "toolbar-button", 3, "click"], [1, "fa-solid", "fa-columns"], [1, "toolbar-overflow", 3, "click"], ["title", "More actions", 1, "toolbar-button", "overflow-trigger", 3, "click"], [1, "fa-solid", "fa-ellipsis-vertical"], [1, "overflow-menu"], [1, "overflow-item"], [1, "overflow-divider"], [1, "overflow-item", 3, "click"], [1, "fa-solid", "fa-file-excel"], [1, "overflow-section-label"], [1, "overflow-item", 3, "disabled"], [1, "overflow-item", 3, "click", "disabled"], [1, "aggregate-card"], [1, "aggregate-card-loading"], [1, "aggregate-card-icon"], [1, "aggregate-card-content"], [1, "aggregate-card-label"], [1, "aggregate-card-value"], [1, "fa-solid", "fa-spinner", "fa-spin"], ["text", "Loading..."], ["Variant", "error", "Icon", "fa-solid fa-triangle-exclamation", "Title", "Couldn't load this data", "ActionText", "Retry", "ActionIcon", "fa-solid fa-arrows-rotate", 1, "mj-grid-state-fill", 3, "Action", "Size", "Message"], [1, "mj-ag-grid", "ag-theme-alpine", 3, "gridReady", "cellClicked", "rowClicked", "rowDoubleClicked", "sortChanged", "selectionChanged", "columnResized", "columnMoved", "theme", "columnDefs", "rowData", "defaultColDef", "rowSelection", "getRowId", "suppressCellFocus", "rowHeight", "headerHeight"], [1, "mj-ag-grid", "ag-theme-alpine", 3, "gridReady", "cellClicked", "rowClicked", "rowDoubleClicked", "sortChanged", "selectionChanged", "columnResized", "columnMoved", "theme", "columnDefs", "defaultColDef", "rowSelection", "getRowId", "suppressCellFocus", "rowHeight", "headerHeight", "rowModelType", "cacheBlockSize", "maxBlocksInCache", "infiniteInitialRowCount", "cacheOverflowSize"], [3, "PageChange", "TotalRowCount", "PageNumber", "PageSize", "IsLoading"], [1, "aggregate-summary-content"], [1, "aggregate-summary-item"], [1, "aggregate-loading"], [1, "agg-summary-label"], [1, "agg-summary-value"], [3, "Completed", "Cancelled", "DriverClass", "Context"]], template: function EntityDataGridComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", null, 0);
             i0.ɵɵconditionalCreate(2, EntityDataGridComponent_Conditional_2_Template, 27, 19, "div", 1);
             i0.ɵɵconditionalCreate(3, EntityDataGridComponent_Conditional_3_Template, 4, 1, "div", 2);
             i0.ɵɵelementStart(4, "div", 3);
             i0.ɵɵconditionalCreate(5, EntityDataGridComponent_Conditional_5_Template, 2, 0, "div", 4);
             i0.ɵɵconditionalCreate(6, EntityDataGridComponent_Conditional_6_Template, 1, 2, "mj-empty-state", 5);
-            i0.ɵɵconditionalCreate(7, EntityDataGridComponent_Conditional_7_Template, 1, 1, "mj-empty-state", 6);
+            i0.ɵɵconditionalCreate(7, EntityDataGridComponent_Conditional_7_Template, 1, 2, "mj-empty-state", 6);
             i0.ɵɵconditionalCreate(8, EntityDataGridComponent_Conditional_8_Template, 1, 9, "ag-grid-angular", 7);
             i0.ɵɵconditionalCreate(9, EntityDataGridComponent_Conditional_9_Template, 1, 13, "ag-grid-angular", 8);
             i0.ɵɵelementEnd();
@@ -5072,7 +5366,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
                             animate('100ms ease-in', style({ opacity: 0, transform: 'translateY(-8px)' }))
                         ])
                     ])
-                ], template: "<!-- Grid Container -->\n<div\n  #gridContainer\n  [class]=\"gridContainerClasses.join(' ')\"\n  [style.height]=\"gridHeightStyle\">\n\n  <!-- Toolbar -->\n  @if (ShowToolbar) {\n    <div class=\"mj-grid-toolbar\">\n      <div class=\"toolbar-left\">\n        <!-- Search -->\n        @if (ShowSearch) {\n          <div class=\"toolbar-search\">\n            <i class=\"fa-solid fa-search search-icon\"></i>\n            <input\n              type=\"text\"\n              class=\"search-input\"\n              [placeholder]=\"ToolbarConfig.searchPlaceholder || 'Search...'\"\n              [value]=\"FilterText\"\n              (input)=\"FilterText = $any($event.target).value\" />\n            @if (FilterText) {\n              <button\n                class=\"search-clear\"\n                (click)=\"FilterText = ''\"\n                aria-label=\"Clear search\">\n                <i class=\"fa-solid fa-times\"></i>\n              </button>\n            }\n          </div>\n        }\n        <!-- Custom Left Buttons -->\n        @for (button of ToolbarConfig.customButtons; track button) {\n          @if (button.position !== 'right' && isButtonVisible(button)) {\n            <button\n              class=\"toolbar-button\"\n              [class]=\"button.cssClass\"\n              [disabled]=\"isButtonDisabled(button)\"\n              [title]=\"button.tooltip || ''\"\n              (click)=\"onToolbarButtonClick(button)\">\n              @if (button.icon) {\n                <i [class]=\"button.icon\"></i>\n              }\n              @if (button.text) {\n                <span>{{ button.text }}</span>\n              }\n            </button>\n          }\n        }\n      </div>\n      <div class=\"toolbar-center\">\n        <!-- Row Count -->\n        @if (ToolbarConfig.showRowCount !== false) {\n          <span class=\"row-count\">\n            {{ totalRowCount }} {{ totalRowCount === 1 ? 'row' : 'rows' }}\n          </span>\n        }\n        <!-- Selection Count -->\n        @if (ToolbarConfig.showSelectionCount && SelectedKeys.length > 0) {\n          <span class=\"selection-count\">\n            ({{ SelectedKeys.length }} selected)\n          </span>\n        }\n      </div>\n      <div class=\"toolbar-right\">\n        <!-- Recycle Bin chip \u2014 auto-hides when no deleted records, no tracking,\n             or user lacks Delete permission. -->\n        @if (ShowRecycleBin) {\n          <mj-recycle-bin-chip [EntityName]=\"entityInfoName\"></mj-recycle-bin-chip>\n        }\n        <!-- New/Add Button (predefined) -->\n        @if (ShowNewButton) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Create new record\"\n            (click)=\"onAddClick()\">\n            <i class=\"fa-solid fa-plus\"></i>\n            <span class=\"button-text\">New</span>\n          </button>\n        }\n        <!-- Refresh Button (predefined) -->\n        @if (ShowRefreshButton) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Refresh data\"\n            [disabled]=\"loading\"\n            (click)=\"onRefreshClick()\">\n            <i class=\"fa-solid fa-arrows-rotate\" [class.fa-spin]=\"loading\"></i>\n            <span class=\"button-text\">Refresh</span>\n          </button>\n        }\n        <!-- Export Button (predefined) -->\n        @if (ShowExportButton) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Export\"\n            [disabled]=\"IsPreparingExport\"\n            (click)=\"onExportClick()\">\n            <i class=\"fa-solid\" [class.fa-file-excel]=\"!IsPreparingExport\" [class.fa-spinner]=\"IsPreparingExport\" [class.fa-spin]=\"IsPreparingExport\"></i>\n            <span class=\"button-text\">Export</span>\n          </button>\n        }\n        <!-- Delete Button (predefined) -->\n        @if (ShowDeleteButton && HasSelection) {\n          <button\n            class=\"toolbar-button toolbar-button-danger\"\n            title=\"Delete selected records\"\n            (click)=\"onDeleteClick()\">\n            <i class=\"fa-solid fa-trash\"></i>\n            <span class=\"button-text\">Delete</span>\n          </button>\n        }\n        <!-- Compare Button (predefined) -->\n        @if (ShowCompareButton) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Compare selected records\"\n            [disabled]=\"!HasMultipleSelection\"\n            (click)=\"onCompareClick()\">\n            <i class=\"fa-solid fa-code-compare\"></i>\n            <span class=\"button-text\">Compare</span>\n          </button>\n        }\n        <!-- Merge Button (predefined) -->\n        @if (ShowMergeButton) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Merge selected records\"\n            [disabled]=\"!HasMultipleSelection\"\n            (click)=\"onMergeClick()\">\n            <i class=\"fa-solid fa-code-merge\"></i>\n            <span class=\"button-text\">Merge</span>\n          </button>\n        }\n        <!-- Add to List Button (predefined) -->\n        @if (ShowAddToListButton) {\n          <button\n            class=\"toolbar-button\"\n            [title]=\"HasSelection ? 'Add selected records to a list' : 'Add all matching records to a list'\"\n            [disabled]=\"(!HasSelection && !ExportDataProvider) || IsPreparingAddToList\"\n            (click)=\"onAddToListClick()\">\n            <i class=\"fa-solid\" [class.fa-list-check]=\"!IsPreparingAddToList\" [class.fa-spinner]=\"IsPreparingAddToList\" [class.fa-spin]=\"IsPreparingAddToList\"></i>\n            <span class=\"button-text\">Add to List</span>\n          </button>\n        }\n        <!-- Search for Duplicates Button (predefined) -->\n        @if (ShowDuplicateSearchButton) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Search for duplicate records\"\n            [disabled]=\"!HasMultipleSelection\"\n            (click)=\"onDuplicateSearchClick()\">\n            <i class=\"fa-solid fa-magnifying-glass-plus\"></i>\n            <span class=\"button-text\">Find Duplicates</span>\n          </button>\n        }\n        <!-- Communication Button (predefined) -->\n        @if (ShowCommunicationButton && EntitySupportsCommunication) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Send message to selected records\"\n            [disabled]=\"!HasSelection\"\n            (click)=\"onCommunicationClick()\">\n            <i class=\"fa-solid fa-envelope\"></i>\n            <span class=\"button-text\">Send Message</span>\n          </button>\n        }\n        <!-- Legacy ToolbarConfig buttons -->\n        <!-- Add Button (legacy) -->\n        @if (ToolbarConfig.showAdd && AllowAdd && !ShowNewButton) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Add New\"\n            (click)=\"onAddClick()\">\n            <i class=\"fa-solid fa-plus\"></i>\n          </button>\n        }\n        <!-- Refresh Button (legacy) -->\n        @if (ToolbarConfig.showRefresh !== false && !ShowRefreshButton) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Refresh\"\n            [disabled]=\"loading\"\n            (click)=\"onRefreshClick()\">\n            <i class=\"fa-solid fa-refresh\" [class.fa-spin]=\"loading\"></i>\n          </button>\n        }\n        <!-- Delete Button (legacy) -->\n        @if (ToolbarConfig.showDelete && AllowDelete && HasSelection && !ShowDeleteButton) {\n          <button\n            class=\"toolbar-button toolbar-button-danger\"\n            title=\"Delete Selected\"\n            (click)=\"onDeleteClick()\">\n            <i class=\"fa-solid fa-trash\"></i>\n          </button>\n        }\n        <!-- Export Button (legacy) -->\n        @if (ToolbarConfig.showExport && !ShowExportButton) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Export\"\n            (click)=\"onExportClick()\">\n            <i class=\"fa-solid fa-download\"></i>\n          </button>\n        }\n        <!-- Column Chooser Button -->\n        @if (ToolbarConfig.showColumnChooser && AllowColumnToggle) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Column Chooser\"\n            (click)=\"onColumnChooserClick()\">\n            <i class=\"fa-solid fa-columns\"></i>\n          </button>\n        }\n        <!-- Custom Right Buttons -->\n        @for (button of ToolbarConfig.customButtons; track button) {\n          @if (button.position === 'right' && isButtonVisible(button)) {\n            <button\n              class=\"toolbar-button\"\n              [class]=\"button.cssClass\"\n              [disabled]=\"isButtonDisabled(button)\"\n              [title]=\"button.tooltip || ''\"\n              (click)=\"onToolbarButtonClick(button)\">\n              @if (button.icon) {\n                <i [class]=\"button.icon\"></i>\n              }\n              @if (button.text) {\n                <span>{{ button.text }}</span>\n              }\n            </button>\n          }\n        }\n        <!-- Overflow Menu -->\n        @if (hasOverflowMenuItems) {\n          <div class=\"toolbar-overflow\" (click)=\"$event.stopPropagation()\">\n            <button\n              class=\"toolbar-button overflow-trigger\"\n              title=\"More actions\"\n              (click)=\"toggleOverflowMenu()\">\n              <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n            </button>\n            @if (showOverflowMenu) {\n              <div class=\"overflow-menu\" [@fadeIn]>\n                <!-- Export (if in overflow) -->\n                @if (showExportInOverflow) {\n                  <button class=\"overflow-item\" (click)=\"onExportClick(); closeOverflowMenu()\">\n                    <i class=\"fa-solid fa-file-excel\"></i>\n                    <span>Export</span>\n                  </button>\n                }\n                <!-- Entity Actions -->\n                @if (ShowEntityActionButtons && EntityActions.length > 0) {\n                  <div class=\"overflow-divider\"></div>\n                  <div class=\"overflow-section-label\">Actions</div>\n                  @for (action of EntityActions; track action) {\n                    <button\n                      class=\"overflow-item\"\n                      [disabled]=\"!isEntityActionEnabled(action)\"\n                      (click)=\"onEntityActionClick(action); closeOverflowMenu()\">\n                      <i [class]=\"action.icon || 'fa-solid fa-bolt'\"></i>\n                      <span>{{ action.name }}</span>\n                    </button>\n                  }\n                }\n                <!-- Column Chooser (if in overflow) -->\n                @if (showColumnChooserInOverflow) {\n                  <div class=\"overflow-divider\"></div>\n                }\n                @if (showColumnChooserInOverflow) {\n                  <button class=\"overflow-item\" (click)=\"onColumnChooserClick(); closeOverflowMenu()\">\n                    <i class=\"fa-solid fa-columns\"></i>\n                    <span>Manage Columns</span>\n                  </button>\n                }\n                <!-- Selection-dependent actions in overflow -->\n                @if (HasSelection && hasSelectionDependentOverflowActions) {\n                  <div class=\"overflow-divider\"></div>\n                  @if (showCommunicationInOverflow) {\n                    <button class=\"overflow-item\" (click)=\"onCommunicationClick(); closeOverflowMenu()\">\n                      <i class=\"fa-solid fa-envelope\"></i>\n                      <span>Send Message</span>\n                    </button>\n                  }\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Aggregate Cards (displayed as summary cards above the grid) -->\n  @if (ShowAggregatePanel) {\n    <div class=\"mj-aggregate-cards\">\n      @for (agg of CardAggregates; track agg) {\n        <div class=\"aggregate-card\">\n          @if (agg.icon) {\n            <div class=\"aggregate-card-icon\">\n              <i [class]=\"agg.icon\"></i>\n            </div>\n          }\n          <div class=\"aggregate-card-content\">\n            <span class=\"aggregate-card-label\">{{ agg.label }}</span>\n            <span class=\"aggregate-card-value\">{{ getAggregateValue(agg) }}</span>\n          </div>\n        </div>\n      }\n      @if (AggregatesLoading) {\n        <div class=\"aggregate-card-loading\">\n          <i class=\"fa-solid fa-spinner fa-spin\"></i>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Grid Content -->\n  <div class=\"mj-grid-content\">\n    <!-- Loading Overlay -->\n    @if (loading && rowData.length === 0) {\n      <div class=\"mj-grid-loading-overlay\">\n        <mj-loading text=\"Loading...\"></mj-loading>\n      </div>\n    }\n\n    <!-- Error State -->\n    @if (errorMessage && !loading) {\n      <mj-empty-state\n        class=\"mj-grid-state-fill\"\n        [Size]=\"EmptyStateSize\"\n        Variant=\"error\"\n        Icon=\"fa-solid fa-triangle-exclamation\"\n        Title=\"Couldn't load this data\"\n        [Message]=\"FriendlyErrorMessage\"\n        ActionText=\"Retry\"\n        ActionIcon=\"fa-solid fa-arrows-rotate\"\n        (Action)=\"Refresh()\" />\n    }\n\n    <!-- Empty State -->\n    @if (!loading && !errorMessage && rowData.length === 0) {\n      <mj-empty-state\n        class=\"mj-grid-state-fill\"\n        [Size]=\"EmptyStateSize\"\n        Icon=\"fa-solid fa-inbox\"\n        Title=\"No data to display\" />\n    }\n\n    <!-- AG Grid (Client-side mode) -->\n    @if (!errorMessage && PaginationMode === 'client' && (rowData.length > 0 || loading)) {\n      <ag-grid-angular\n        class=\"mj-ag-grid ag-theme-alpine\"\n        [theme]=\"agGridTheme\"\n        [columnDefs]=\"agColumnDefs\"\n        [rowData]=\"rowData\"\n        [defaultColDef]=\"defaultColDef\"\n        [rowSelection]=\"agRowSelection\"\n        [getRowId]=\"getRowId\"\n        [suppressCellFocus]=\"true\"\n        [rowHeight]=\"RowHeight\"\n        [headerHeight]=\"ShowHeader ? undefined : 0\"\n        (gridReady)=\"onGridReady($event)\"\n        (cellClicked)=\"onAgCellClicked($event)\"\n        (rowClicked)=\"onAgRowClicked($event)\"\n        (rowDoubleClicked)=\"onAgRowDoubleClicked($event)\"\n        (sortChanged)=\"onAgSortChanged($event)\"\n        (selectionChanged)=\"onAgSelectionChanged($event)\"\n        (columnResized)=\"onAgColumnResized($event)\"\n        (columnMoved)=\"onAgColumnMoved($event)\">\n      </ag-grid-angular>\n    }\n\n    <!-- AG Grid (Infinite Scroll mode) -->\n    @if (!errorMessage && PaginationMode === 'infinite') {\n      <ag-grid-angular\n        class=\"mj-ag-grid ag-theme-alpine\"\n        [theme]=\"agGridTheme\"\n        [columnDefs]=\"agColumnDefs\"\n        [defaultColDef]=\"defaultColDef\"\n        [rowSelection]=\"agRowSelection\"\n        [getRowId]=\"getRowId\"\n        [suppressCellFocus]=\"true\"\n        [rowHeight]=\"RowHeight\"\n        [headerHeight]=\"ShowHeader ? undefined : 0\"\n        [rowModelType]=\"'infinite'\"\n        [cacheBlockSize]=\"CacheBlockSize\"\n        [maxBlocksInCache]=\"MaxBlocksInCache\"\n        [infiniteInitialRowCount]=\"1\"\n        [cacheOverflowSize]=\"2\"\n        (gridReady)=\"onGridReady($event)\"\n        (cellClicked)=\"onAgCellClicked($event)\"\n        (rowClicked)=\"onAgRowClicked($event)\"\n        (rowDoubleClicked)=\"onAgRowDoubleClicked($event)\"\n        (sortChanged)=\"onAgSortChanged($event)\"\n        (selectionChanged)=\"onAgSelectionChanged($event)\"\n        (columnResized)=\"onAgColumnResized($event)\"\n        (columnMoved)=\"onAgColumnMoved($event)\">\n      </ag-grid-angular>\n    }\n\n  </div>\n\n  <!-- Pagination (opt-in via ShowPager input) -->\n  @if (ShowPager) {\n    <mj-pagination\n      [TotalRowCount]=\"totalRowCount\"\n      [PageNumber]=\"PagerPageNumber\"\n      [PageSize]=\"PageSize\"\n      [IsLoading]=\"loading\"\n      (PageChange)=\"PageChange.emit($event)\">\n    </mj-pagination>\n  }\n\n  <!-- Aggregate Summary Row (outside mj-grid-content so it's always visible) -->\n  @if (ShowAggregateSummary) {\n    <div class=\"mj-aggregate-summary\">\n      <div class=\"aggregate-summary-content\">\n        @for (agg of ColumnAggregates; track agg) {\n          <div class=\"aggregate-summary-item\">\n            @if (agg.icon) {\n              <i [class]=\"agg.icon\"></i>\n            }\n            <span class=\"agg-summary-label\">{{ agg.label }}:</span>\n            <span class=\"agg-summary-value\">{{ getAggregateValue(agg) }}</span>\n          </div>\n        }\n      </div>\n      @if (AggregatesLoading) {\n        <div class=\"aggregate-loading\">\n          <i class=\"fa-solid fa-spinner fa-spin\"></i>\n        </div>\n      }\n    </div>\n  }\n</div>\n\n<!-- Export Dialog -->\n<mj-export-dialog\n  [visible]=\"showExportDialog\"\n  [config]=\"exportDialogConfig\"\n  (closed)=\"onExportDialogClosed($event)\">\n</mj-export-dialog>\n\n<!-- Runtime-UX driver for an entity action that names a RuntimeUXDriverClass (e.g. the Record Process\n     bulk-update runner). Mounted in-place over the grid \u2014 no parent wiring required. -->\n@if (ActiveRuntimeDriver) {\n  <mj-entity-action-ux-host\n    [DriverClass]=\"ActiveRuntimeDriver.DriverClass\"\n    [Context]=\"ActiveRuntimeDriver.Context\"\n    (Completed)=\"OnRuntimeDriverCompleted($event)\"\n    (Cancelled)=\"OnRuntimeDriverCancelled()\">\n  </mj-entity-action-ux-host>\n}\n", styles: ["/* ========================================\n   CSS Custom Properties (Theme Variables)\n   ======================================== */\n\n:host {\n  /* Grid container */\n  --grid-border-color: var(--mj-border-default);\n  --grid-border-radius: 0px;\n  --grid-background: var(--mj-bg-surface);\n\n  /* Header */\n  --grid-header-bg: var(--mj-bg-surface-card);\n  --grid-header-text: var(--mj-text-primary);\n  --grid-header-font-weight: 600;\n  --grid-header-height: 40px;\n  --grid-header-border-color: var(--mj-border-default);\n\n  /* Rows */\n  --grid-row-height: 40px;\n  --grid-row-bg: var(--mj-bg-surface);\n  --grid-row-bg-alt: var(--mj-bg-surface-card);\n  --grid-row-hover-bg: var(--mj-bg-surface-hover);\n  --grid-row-selected-bg: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n  --grid-row-selected-hover-bg: color-mix(in srgb, var(--mj-status-warning) 18%, var(--mj-bg-surface));\n\n  /* Cells */\n  --grid-cell-padding: 8px 12px;\n  --grid-cell-text: var(--mj-text-primary);\n  --grid-cell-border-color: var(--mj-border-subtle);\n\n  /* Selection - mellow yellow to avoid conflict with blue hyperlinks */\n  --grid-checkbox-color: var(--mj-brand-primary);\n  --grid-selection-indicator-color: var(--mj-status-warning);\n\n  /* Editing */\n  --grid-edit-cell-bg: var(--mj-bg-surface);\n  --grid-edit-cell-border: var(--mj-brand-primary);\n  --grid-edit-cell-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n\n  /* Sorting */\n  --grid-sort-indicator-color: var(--mj-brand-primary);\n\n  /* Toolbar */\n  --grid-toolbar-bg: var(--mj-bg-surface);\n  --grid-toolbar-height: 48px;\n  --grid-toolbar-border-color: var(--mj-border-default);\n\n  /* Loading */\n  --grid-loading-overlay-bg: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n\n  /* Empty state */\n  --grid-empty-text-color: var(--mj-text-disabled);\n  --grid-empty-icon-color: var(--mj-border-strong);\n\n  display: block;\n  height: 100%;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\n}\n\n/* ========================================\n   Grid Container\n   ======================================== */\n\n.mj-grid-container {\n  display: flex;\n  flex-direction: column;\n  border: 1px solid var(--grid-border-color);\n  border-radius: var(--grid-border-radius);\n  background: var(--grid-background);\n  overflow: hidden;\n}\n\n/* ========================================\n   Toolbar\n   ======================================== */\n\n.mj-grid-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: var(--grid-toolbar-height);\n  padding: 0 12px;\n  background: var(--grid-toolbar-bg);\n  border-bottom: 1px solid var(--grid-toolbar-border-color);\n  gap: 12px;\n}\n\n.toolbar-left,\n.toolbar-right {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.toolbar-center {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--mj-text-secondary);\n  font-size: 13px;\n}\n\n.toolbar-search {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n\n.search-icon {\n  position: absolute;\n  left: 10px;\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n}\n\n.search-input {\n  padding: 6px 30px 6px 32px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  font-size: 13px;\n  width: 200px;\n  transition: border-color 0.2s, box-shadow 0.2s;\n}\n\n.search-input:focus {\n  outline: none;\n  border-color: var(--grid-selection-indicator-color);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.search-clear {\n  position: absolute;\n  right: 6px;\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 4px;\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n}\n\n.search-clear:hover {\n  color: var(--mj-text-secondary);\n}\n\n.toolbar-button {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  transition: background-color 0.2s, border-color 0.2s;\n}\n\n.toolbar-button:hover:not(:disabled) {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n}\n\n.toolbar-button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.toolbar-button i {\n  font-size: 14px;\n}\n\n.toolbar-button-danger {\n  color: var(--mj-status-error);\n}\n\n.toolbar-button-danger:hover:not(:disabled) {\n  background: var(--mj-status-error-bg);\n  border-color: var(--mj-status-error);\n}\n\n.row-count,\n.selection-count {\n  font-weight: 500;\n}\n\n/* ========================================\n   Grid Content\n   ======================================== */\n\n.mj-grid-content {\n  flex: 1;\n  position: relative;\n  overflow: hidden;\n}\n\n.mj-grid-scroll-container {\n  height: 100%;\n  overflow: auto;\n}\n\n/* ========================================\n   Loading Overlay\n   ======================================== */\n\n.mj-grid-loading-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--grid-loading-overlay-bg);\n  z-index: 10;\n}\n\n/* ========================================\n   Error State\n   ======================================== */\n\n/* ========================================\n   Empty / Error State\n   ======================================== */\n\n/* Flex-fill so <mj-empty-state> placeholders occupy the grid content area\n   (the host centers its content but does not grow to fill the parent). */\n.mj-grid-state-fill {\n  flex: 1 1 auto;\n}\n\n/* ========================================\n   Header Row\n   ======================================== */\n\n.mj-grid-header {\n  display: flex;\n  min-height: var(--grid-header-height);\n  background: var(--grid-header-bg);\n  border-bottom: 2px solid var(--grid-header-border-color);\n  position: sticky;\n  top: 0;\n  z-index: 5;\n}\n\n.mj-grid-header-cell {\n  display: flex;\n  align-items: center;\n  padding: var(--grid-cell-padding);\n  font-weight: var(--grid-header-font-weight);\n  color: var(--grid-header-text);\n  font-size: 13px;\n  user-select: none;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  border-right: 1px solid var(--grid-cell-border-color);\n  flex-shrink: 0;\n}\n\n.mj-grid-header-cell:last-child {\n  border-right: none;\n}\n\n.mj-grid-header-cell.sortable {\n  cursor: pointer;\n}\n\n.mj-grid-header-cell.sortable:hover {\n  background: rgba(0, 0, 0, 0.04);\n}\n\n.header-text {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sort-indicator {\n  display: flex;\n  align-items: center;\n  margin-left: 6px;\n  color: var(--grid-sort-indicator-color);\n}\n\n.sort-indicator i {\n  font-size: 12px;\n}\n\n.sort-index {\n  font-size: 10px;\n  margin-left: 2px;\n  font-weight: normal;\n}\n\n/* ========================================\n   Data Rows\n   ======================================== */\n\n.mj-grid-row {\n  display: flex;\n  align-items: stretch;\n  background: var(--grid-row-bg);\n  transition: background-color 0.15s;\n  cursor: default;\n}\n\n.mj-grid-row:hover {\n  background: var(--grid-row-hover-bg);\n}\n\n.mj-grid-row.grid-row-alt {\n  background: var(--grid-row-bg-alt);\n}\n\n.mj-grid-row.grid-row-alt:hover {\n  background: var(--grid-row-hover-bg);\n}\n\n.mj-grid-row.grid-row-selected {\n  background: var(--grid-row-selected-bg);\n}\n\n.mj-grid-row.grid-row-selected:hover {\n  background: var(--grid-row-selected-hover-bg);\n}\n\n.mj-grid-row.grid-row-editing {\n  background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface));\n}\n\n.mj-grid-row.grid-row-dirty {\n  border-left: 3px solid var(--mj-status-warning);\n}\n\n/* ========================================\n   Data Cells\n   ======================================== */\n\n.mj-grid-cell {\n  display: flex;\n  align-items: center;\n  padding: var(--grid-cell-padding);\n  color: var(--grid-cell-text);\n  font-size: 13px;\n  overflow: hidden;\n  border-right: 1px solid transparent;\n  flex-shrink: 0;\n}\n\n.mj-grid-cell:last-child {\n  border-right: none;\n}\n\n/* Grid lines modes */\n.grid-lines-horizontal .mj-grid-row {\n  border-bottom: 1px solid var(--grid-cell-border-color);\n}\n\n.grid-lines-vertical .mj-grid-cell {\n  border-right: 1px solid var(--grid-cell-border-color);\n}\n\n.grid-lines-both .mj-grid-row {\n  border-bottom: 1px solid var(--grid-cell-border-color);\n}\n\n.grid-lines-both .mj-grid-cell {\n  border-right: 1px solid var(--grid-cell-border-color);\n}\n\n/* Cell alignment */\n.mj-grid-cell.align-left {\n  justify-content: flex-start;\n}\n\n.mj-grid-cell.align-center {\n  justify-content: center;\n}\n\n.mj-grid-cell.align-right {\n  justify-content: flex-end;\n}\n\n.cell-content {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Special cells */\n.row-number-cell {\n  width: 50px;\n  min-width: 50px;\n  max-width: 50px;\n  justify-content: center;\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n  background: var(--grid-header-bg);\n}\n\n.checkbox-cell {\n  width: 40px;\n  min-width: 40px;\n  max-width: 40px;\n  justify-content: center;\n}\n\n.checkbox-cell input[type=\"checkbox\"] {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n  accent-color: var(--grid-checkbox-color);\n}\n\n/* ========================================\n   Virtual Scrolling\n   ======================================== */\n\n.mj-grid-virtual-spacer {\n  flex-shrink: 0;\n}\n\n/* ========================================\n   Responsive Adjustments\n   ======================================== */\n\n@media (max-width: 768px) {\n  .mj-grid-toolbar {\n    flex-wrap: wrap;\n    padding: 8px;\n  }\n\n  .toolbar-search {\n    order: 3;\n    width: 100%;\n    margin-top: 8px;\n  }\n\n  .search-input {\n    width: 100%;\n  }\n\n  .toolbar-center {\n    order: 2;\n  }\n\n  /* Hide button text on mobile */\n  .toolbar-button .button-text {\n    display: none;\n  }\n}\n\n/* ========================================\n   Toolbar Button Text\n   ======================================== */\n\n.toolbar-button .button-text {\n  font-size: 13px;\n}\n\n/* ========================================\n   Overflow Menu\n   ======================================== */\n\n.toolbar-overflow {\n  position: relative;\n}\n\n.overflow-trigger {\n  padding: 6px 8px !important;\n}\n\n.overflow-trigger i {\n  font-size: 16px;\n}\n\n.overflow-menu {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  margin-top: 4px;\n  min-width: 220px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);\n  z-index: 1000;\n  overflow: hidden;\n}\n\n.overflow-item {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  padding: 10px 16px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  text-align: left;\n  gap: 12px;\n  transition: background-color 0.15s;\n}\n\n.overflow-item:hover:not(:disabled) {\n  background: var(--mj-bg-surface-card);\n}\n\n.overflow-item:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.overflow-item i {\n  width: 18px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  text-align: center;\n}\n\n.overflow-item span {\n  flex: 1;\n}\n\n.overflow-divider {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 4px 0;\n}\n\n.overflow-section-label {\n  padding: 8px 16px 4px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  color: var(--mj-text-disabled);\n  letter-spacing: 0.5px;\n}\n\n/* Entity Actions submenu styling */\n.overflow-item.action-item i {\n  color: var(--mj-brand-primary);\n}\n\n/* ========================================\n   Highlight Matches\n   ======================================== */\n\n::ng-deep .highlight-match {\n  background-color: color-mix(in srgb, var(--mj-status-warning) 40%, var(--mj-bg-surface));\n  border-radius: 2px;\n  padding: 0 1px;\n}\n\n/* ========================================\n   AG Grid Customizations\n   ======================================== */\n\n.mj-ag-grid {\n  width: 100%;\n  height: 100%;\n}\n\n/* AG Grid v35 uses JS-based theming (colorSchemeVariable) \u2014 no CSS variable overrides needed */\n\n/* Selected row styling - left indicator bar only, background handled by AG Grid theme */\n::ng-deep .ag-row-selected {\n  box-shadow: inset 4px 0 0 0 var(--mj-status-warning);\n}\n\n/* Selection checkbox styling */\n::ng-deep .ag-checkbox-input-wrapper {\n  width: 18px;\n  height: 18px;\n}\n\n::ng-deep .ag-checkbox-input-wrapper.ag-checked::after {\n  color: var(--grid-checkbox-color, var(--mj-brand-primary));\n}\n\n/* ========================================\n   Visual Config: Header Styles\n   ======================================== */\n\n/* Flat header (minimal) */\n.header-style-flat ::ng-deep .ag-header {\n  background: var(--grid-header-bg, var(--mj-bg-surface-card));\n  border-bottom: 1px solid var(--grid-header-border-color, var(--mj-border-default));\n}\n\n/* Elevated header (default - subtle shadow) */\n.header-style-elevated ::ng-deep .ag-header {\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--grid-header-border-color, var(--mj-border-default));\n}\n\n.header-style-elevated.header-shadow ::ng-deep .ag-header {\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);\n}\n\n/* Gradient header (more prominent) */\n.header-style-gradient ::ng-deep .ag-header {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: none;\n}\n\n.header-style-gradient.header-shadow ::ng-deep .ag-header {\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n/* Bold header (high contrast) */\n.header-style-bold ::ng-deep .ag-header {\n  background: var(--mj-text-secondary);\n  border-bottom: none;\n}\n\n.header-style-bold ::ng-deep .ag-header-cell-text {\n  color: var(--mj-text-inverse);\n  font-weight: 600;\n}\n\n.header-style-bold ::ng-deep .ag-header-icon {\n  color: color-mix(in srgb, var(--mj-text-inverse) 70%, transparent);\n}\n\n.header-style-bold ::ng-deep .ag-header-cell:hover {\n  background: color-mix(in srgb, var(--mj-text-inverse) 10%, transparent);\n}\n\n/* Header sort icons enhancement */\n::ng-deep .ag-header-cell-sorted-asc .ag-icon-asc,\n::ng-deep .ag-header-cell-sorted-desc .ag-icon-desc {\n  color: var(--grid-accent-color, var(--grid-sort-indicator-color, var(--mj-brand-primary)));\n}\n\n/* ========================================\n   Visual Config: Zebra Striping\n   ======================================== */\n\n/* Subtle contrast */\n.alternate-rows-subtle ::ng-deep .ag-row-odd {\n  background-color: rgba(0, 0, 0, 0.015);\n}\n\n.alternate-rows-subtle ::ng-deep .ag-row-odd:hover:not(.ag-row-selected) {\n  background-color: var(--grid-row-hover-bg, var(--mj-bg-surface-hover));\n}\n\n/* Medium contrast (default) */\n.alternate-rows-medium ::ng-deep .ag-row-odd {\n  background-color: rgba(0, 0, 0, 0.025);\n}\n\n.alternate-rows-medium ::ng-deep .ag-row-odd:hover:not(.ag-row-selected) {\n  background-color: var(--grid-row-hover-bg, var(--mj-bg-surface-hover));\n}\n\n/* Strong contrast */\n.alternate-rows-strong ::ng-deep .ag-row-odd {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n\n.alternate-rows-strong ::ng-deep .ag-row-odd:hover:not(.ag-row-selected) {\n  background-color: var(--grid-row-hover-bg, var(--mj-bg-surface-hover));\n}\n\n/* ========================================\n   Visual Config: Hover Transitions\n   ======================================== */\n\n.hover-transitions ::ng-deep .ag-row {\n  transition: background-color var(--grid-hover-transition, 150ms) ease;\n}\n\n.hover-transitions ::ng-deep .ag-cell {\n  transition: background-color var(--grid-hover-transition, 150ms) ease;\n}\n\n/* ========================================\n   Visual Config: Cell Padding\n   ======================================== */\n\n.cell-padding-compact ::ng-deep .ag-cell {\n  padding-left: 8px;\n  padding-right: 8px;\n}\n\n.cell-padding-compact ::ng-deep .ag-header-cell {\n  padding-left: 8px;\n  padding-right: 8px;\n}\n\n.cell-padding-normal ::ng-deep .ag-cell {\n  padding-left: 12px;\n  padding-right: 12px;\n}\n\n.cell-padding-normal ::ng-deep .ag-header-cell {\n  padding-left: 12px;\n  padding-right: 12px;\n}\n\n.cell-padding-comfortable ::ng-deep .ag-cell {\n  padding-left: 16px;\n  padding-right: 16px;\n}\n\n.cell-padding-comfortable ::ng-deep .ag-header-cell {\n  padding-left: 16px;\n  padding-right: 16px;\n}\n\n/* ========================================\n   Visual Config: Checkbox Styles\n   ======================================== */\n\n/* Rounded checkbox */\n.checkbox-style-rounded ::ng-deep .ag-checkbox-input-wrapper {\n  border-radius: 4px;\n}\n\n.checkbox-style-rounded ::ng-deep .ag-checkbox-input-wrapper::after {\n  border-radius: 3px;\n}\n\n/* Filled checkbox */\n.checkbox-style-filled ::ng-deep .ag-checkbox-input-wrapper.ag-checked {\n  background-color: var(--grid-checkbox-color, var(--mj-brand-primary));\n  border-color: var(--grid-checkbox-color, var(--mj-brand-primary));\n}\n\n.checkbox-style-filled ::ng-deep .ag-checkbox-input-wrapper.ag-checked::after {\n  color: var(--mj-text-inverse);\n}\n\n/* ========================================\n   Cell Content Formatting\n   ======================================== */\n\n/* Right-aligned cells (numbers) */\n::ng-deep .cell-align-right {\n  text-align: right;\n  justify-content: flex-end;\n}\n\n::ng-deep .header-align-right .ag-header-cell-label {\n  justify-content: flex-end;\n}\n\n/* Empty cell placeholder */\n::ng-deep .cell-empty {\n  color: var(--mj-text-disabled);\n  font-style: normal;\n}\n\n/* Boolean icons */\n::ng-deep .cell-boolean-true {\n  color: var(--mj-status-success);\n  font-size: 14px;\n}\n\n::ng-deep .cell-boolean-false {\n  color: var(--mj-text-disabled);\n  font-size: 14px;\n}\n\n/* Clickable links */\n::ng-deep .cell-link {\n  color: var(--grid-accent-color, var(--mj-brand-primary));\n  text-decoration: none;\n  transition: color 0.15s;\n  font-size: inherit;\n  font-family: inherit;\n  line-height: inherit;\n}\n\n::ng-deep .cell-link:hover {\n  color: var(--mj-brand-primary);\n  text-decoration: underline;\n}\n\n/* Email cells */\n::ng-deep .cell-email {\n  font-family: inherit;\n  font-size: 13px;\n}\n\n/* Foreign key link cells */\n::ng-deep .cell-fk-link {\n  color: var(--grid-accent-color, var(--mj-brand-primary));\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.15s, text-decoration 0.15s;\n}\n\n::ng-deep .cell-fk-link:hover {\n  color: var(--mj-brand-primary-hover);\n  text-decoration: underline;\n}\n\n::ng-deep .cell-fk-link:active {\n  color: var(--mj-brand-primary-active);\n}\n\n/* URL cells */\n::ng-deep .cell-url {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n  font-size: 13px;\n}\n\n/* Phone cells */\n::ng-deep .cell-phone {\n  font-variant-numeric: tabular-nums;\n  letter-spacing: 0.3px;\n}\n\n/* ========================================\n   Skeleton Loading Animation\n   ======================================== */\n\n@keyframes skeleton-shimmer {\n  0% {\n    background-position: -200px 0;\n  }\n  100% {\n    background-position: calc(200px + 100%) 0;\n  }\n}\n\n.skeleton-row {\n  display: flex;\n  height: 40px;\n  align-items: center;\n  padding: 0 12px;\n  border-bottom: 1px solid var(--grid-cell-border-color, var(--mj-border-subtle));\n}\n\n.skeleton-cell {\n  height: 16px;\n  border-radius: 4px;\n  background: linear-gradient(\n    90deg,\n    var(--mj-bg-surface-sunken) 0px,\n    var(--mj-bg-surface-hover) 40px,\n    var(--mj-bg-surface-sunken) 80px\n  );\n  background-size: 200px 100%;\n  animation: skeleton-shimmer 1.5s ease-in-out infinite;\n}\n\n.skeleton-cell-short {\n  width: 60px;\n}\n\n.skeleton-cell-medium {\n  width: 120px;\n}\n\n.skeleton-cell-long {\n  width: 180px;\n}\n\n/* Selection checkbox column header */\n::ng-deep .ag-header-select-all {\n  margin-right: 0;\n}\n\n/* ========================================\n   Row Border Enhancement\n   ======================================== */\n\n::ng-deep .ag-theme-alpine .ag-row {\n  border-bottom: 1px solid var(--grid-cell-border-color, var(--mj-border-subtle));\n}\n\n::ng-deep .ag-theme-alpine .ag-row:last-child {\n  border-bottom: none;\n}\n\n/* ========================================\n   Focus States\n   ======================================== */\n\n::ng-deep .ag-theme-alpine .ag-cell-focus {\n  border: none !important;\n  outline: none !important;\n}\n\n::ng-deep .ag-theme-alpine .ag-header-cell:focus {\n  outline: 2px solid var(--grid-accent-color, var(--mj-brand-primary));\n  outline-offset: -2px;\n}\n\n/* ========================================\n   Scrollbar Styling\n   ======================================== */\n\n::ng-deep .ag-body-viewport::-webkit-scrollbar {\n  width: 8px;\n  height: 8px;\n}\n\n::ng-deep .ag-body-viewport::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-card);\n  border-radius: 4px;\n}\n\n::ng-deep .ag-body-viewport::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border-radius: 4px;\n}\n\n::ng-deep .ag-body-viewport::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-disabled);\n}\n\n/* ========================================\n   Pinned Column Styling\n   ======================================== */\n\n::ng-deep .ag-theme-alpine .ag-pinned-left-cols-container {\n  border-right: 2px solid var(--grid-border-color, var(--mj-border-default));\n}\n\n::ng-deep .ag-theme-alpine .ag-pinned-right-cols-container {\n  border-left: 2px solid var(--grid-border-color, var(--mj-border-default));\n}\n\n/* ========================================\n   Header Cell Enhancements\n   ======================================== */\n\n::ng-deep .ag-theme-alpine .ag-header-cell {\n  font-weight: 600;\n  font-size: 12px;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  color: var(--mj-text-secondary);\n}\n\n::ng-deep .ag-theme-alpine .ag-header-cell:hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n\n::ng-deep .ag-theme-alpine .ag-header-cell-sortable:hover .ag-header-cell-label {\n  color: var(--grid-accent-color, var(--mj-brand-primary));\n}\n\n/* Sort icon animation */\n::ng-deep .ag-theme-alpine .ag-sort-indicator-icon {\n  transition: transform 0.2s ease;\n}\n\n::ng-deep .ag-theme-alpine .ag-header-cell:hover .ag-sort-indicator-icon {\n  transform: scale(1.1);\n}\n\n/* ========================================\n   Enhanced Multi-Sort Indicators\n   These styles use :host to ensure they're scoped to this component\n   and !important to override AG Grid's built-in styles\n   ======================================== */\n\n/* Highlight sorted column headers with eye-catching background */\n/* Ascending = blue tint */\n:host ::ng-deep .ag-header-cell-sorted-asc {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface)) !important;\n  position: relative;\n}\n\n/* Descending = pink tint */\n:host ::ng-deep .ag-header-cell-sorted-desc {\n  background: color-mix(in srgb, var(--mj-status-error) 12%, var(--mj-bg-surface)) !important;\n  position: relative;\n}\n\n/* Bottom border accent for sorted columns - ascending = blue */\n:host ::ng-deep .ag-header-cell-sorted-asc::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 3px;\n  background: var(--mj-brand-primary);\n}\n\n/* Bottom border accent for sorted columns - descending = pink */\n:host ::ng-deep .ag-header-cell-sorted-desc::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 3px;\n  background: var(--mj-status-error);\n}\n\n/* Sorted column header text - ascending = blue, bold */\n:host ::ng-deep .ag-header-cell-sorted-asc .ag-header-cell-text {\n  color: var(--mj-brand-primary) !important;\n  font-weight: 700 !important;\n}\n\n/* Sorted column header text - descending = pink, bold */\n:host ::ng-deep .ag-header-cell-sorted-desc .ag-header-cell-text {\n  color: var(--mj-status-error) !important;\n  font-weight: 700 !important;\n}\n\n/* Sort icons - larger and more prominent */\n/* Ascending = blue */\n:host ::ng-deep .ag-sort-ascending-icon {\n  color: var(--mj-brand-primary) !important;\n}\n\n/* Descending = pink/magenta */\n:host ::ng-deep .ag-sort-descending-icon {\n  color: var(--mj-status-error) !important;\n}\n\n:host ::ng-deep .ag-sort-ascending-icon .ag-icon,\n:host ::ng-deep .ag-sort-descending-icon .ag-icon {\n  font-size: 14px !important;\n}\n\n/* Sort order number (1, 2, 3) - show as plain number, no bubble */\n/* This avoids AG Grid bug where .ag-sort-order is always present but empty when unsorted */\n/* The number is only visible when AG Grid populates it (i.e., when column is sorted) */\n/* Default blue for ascending */\n:host ::ng-deep .ag-sort-order {\n  margin-left: 4px;\n  font-size: 11px !important;\n  font-weight: 700 !important;\n  color: var(--mj-brand-primary) !important;\n}\n\n/* Sort order number - pink for descending */\n:host ::ng-deep .ag-header-cell-sorted-desc .ag-sort-order {\n  color: var(--mj-status-error) !important;\n}\n\n/* Hover state for sortable headers */\n:host ::ng-deep .ag-header-cell-sortable:hover {\n  background: rgba(0, 0, 0, 0.04);\n}\n\n:host ::ng-deep .ag-header-cell-sortable:hover .ag-header-cell-text {\n  color: var(--mj-brand-primary);\n}\n\n/* ========================================\n   Aggregate Summary Row\n   ======================================== */\n\n.mj-aggregate-summary {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  font-size: 13px;\n  min-height: 44px;\n}\n\n.aggregate-summary-content {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 20px;\n  align-items: center;\n}\n\n.aggregate-summary-item {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 12px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);\n}\n\n.aggregate-summary-item i {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.agg-summary-label {\n  color: var(--mj-text-muted);\n  font-weight: 500;\n}\n\n.agg-summary-value {\n  color: var(--mj-text-primary);\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n}\n\n.aggregate-loading {\n  display: flex;\n  align-items: center;\n  color: var(--mj-text-disabled);\n}\n\n.aggregate-loading i {\n  font-size: 14px;\n}\n\n/* ========================================\n   AGGREGATE CARDS (displayed above grid)\n   ======================================== */\n\n.mj-aggregate-cards {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.aggregate-card {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);\n  min-width: 140px;\n  transition: all 0.15s ease;\n}\n\n.aggregate-card:hover {\n  border-color: var(--mj-border-strong);\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);\n}\n\n.aggregate-card-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  border-radius: 10px;\n  color: var(--mj-brand-primary);\n  font-size: 16px;\n  flex-shrink: 0;\n}\n\n.aggregate-card-content {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.aggregate-card-label {\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.aggregate-card-value {\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n\n.aggregate-card-loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 12px;\n  color: var(--mj-text-disabled);\n}\n\n.aggregate-card-loading i {\n  font-size: 16px;\n}\n\n/* ========================================\n   Text Wrapping Styles\n   ======================================== */\n\n/* Cell class for wrapped text */\n::ng-deep .cell-wrap-text {\n  white-space: normal !important;\n  word-wrap: break-word;\n  line-height: 1.4;\n  padding-top: 8px !important;\n  padding-bottom: 8px !important;\n}\n\n/* Ensure AG Grid cells allow wrapping */\n::ng-deep .ag-cell.cell-wrap-text {\n  overflow: visible;\n  text-overflow: clip;\n}\n\n/* Maintain minimum row height when wrapping */\n::ng-deep .ag-row[style*=\"auto-height\"] {\n  min-height: 40px;\n}\n\n/* ========================================\n   Width filler column ([FillWidth])\n   ========================================\n   The trailing filler exists so row banding and horizontal rules reach the container's right edge\n   instead of stopping wherever the last real column ends. For that to read as \"the table extends\"\n   rather than \"there is an empty column here\", it must lose every affordance that makes a column\n   look like a column: its own vertical rule, the header hover/menu, and the resize handle. What is\n   left is bare row background \u2014 which is exactly the point. */\n::ng-deep .ag-header-cell.mj-grid-filler-header,\n::ng-deep .ag-cell.mj-grid-filler-cell {\n  border-left: none !important;\n  border-right: none !important;\n  cursor: default;\n}\n\n/* The hover tint is OURS (see \".ag-theme-alpine .ag-header-cell:hover\" above), not AG Grid's, so it\n   has to be switched off here or the filler lights up as though it were interactive. Everything else\n   the filler needs suppressed \u2014 resize grip, header menu, moving, tool-panel entry \u2014 is handled by\n   native colDef flags on the column itself, not by CSS. */\n::ng-deep .ag-header-cell.mj-grid-filler-header:hover {\n  background-color: transparent !important;\n}\n\n/* AG Grid injects cellRenderer HTML without Angular attributes, so these\n   must pierce encapsulation or the image renders at intrinsic SVG size. */\n::ng-deep .ag-cell.mj-grid-image-cell {\n  display: flex !important;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  padding: 4px !important;\n}\n::ng-deep .ag-header-cell.mj-grid-image-header .ag-header-cell-label {\n  justify-content: center;\n}\n::ng-deep .cell-image-link {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  overflow: hidden;\n  border-radius: 50%;\n  background: var(--mj-bg-surface-sunken);\n  flex-shrink: 0;\n}\n::ng-deep .cell-image {\n  width: 100%;\n  height: 100%;\n  max-width: 28px;\n  max-height: 28px;\n  object-fit: cover;\n  object-position: center;\n  display: block;\n}\n"] }]
+                ], template: "<!-- Grid Container -->\n<div\n  #gridContainer\n  [class]=\"gridContainerClasses.join(' ')\"\n  [style.height]=\"gridHeightStyle\">\n\n  <!-- Toolbar -->\n  @if (ShowToolbar) {\n    <div class=\"mj-grid-toolbar\">\n      <div class=\"toolbar-left\">\n        <!-- Search -->\n        @if (ShowSearch) {\n          <div class=\"toolbar-search\">\n            <i class=\"fa-solid fa-search search-icon\"></i>\n            <input\n              type=\"text\"\n              class=\"search-input\"\n              [placeholder]=\"ToolbarConfig.searchPlaceholder || 'Search...'\"\n              [value]=\"FilterText\"\n              (input)=\"FilterText = $any($event.target).value\" />\n            @if (FilterText) {\n              <button\n                class=\"search-clear\"\n                (click)=\"FilterText = ''\"\n                aria-label=\"Clear search\">\n                <i class=\"fa-solid fa-times\"></i>\n              </button>\n            }\n          </div>\n        }\n        <!-- Custom Left Buttons -->\n        @for (button of ToolbarConfig.customButtons; track button) {\n          @if (button.position !== 'right' && isButtonVisible(button)) {\n            <button\n              class=\"toolbar-button\"\n              [class]=\"button.cssClass\"\n              [disabled]=\"isButtonDisabled(button)\"\n              [title]=\"button.tooltip || ''\"\n              (click)=\"onToolbarButtonClick(button)\">\n              @if (button.icon) {\n                <i [class]=\"button.icon\"></i>\n              }\n              @if (button.text) {\n                <span>{{ button.text }}</span>\n              }\n            </button>\n          }\n        }\n      </div>\n      <div class=\"toolbar-center\">\n        <!-- Row Count -->\n        @if (ToolbarConfig.showRowCount !== false) {\n          <span class=\"row-count\">\n            {{ totalRowCount }} {{ totalRowCount === 1 ? 'row' : 'rows' }}\n          </span>\n        }\n        <!-- Selection Count -->\n        @if (ToolbarConfig.showSelectionCount && SelectedKeys.length > 0) {\n          <span class=\"selection-count\">\n            ({{ SelectedKeys.length }} selected)\n          </span>\n        }\n      </div>\n      <div class=\"toolbar-right\">\n        <!-- Recycle Bin chip \u2014 auto-hides when no deleted records, no tracking,\n             or user lacks Delete permission. -->\n        @if (ShowRecycleBin) {\n          <mj-recycle-bin-chip [EntityName]=\"entityInfoName\"></mj-recycle-bin-chip>\n        }\n        <!-- New/Add Button (predefined) -->\n        @if (ShowNewButton) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Create new record\"\n            (click)=\"onAddClick()\">\n            <i class=\"fa-solid fa-plus\"></i>\n            <span class=\"button-text\">New</span>\n          </button>\n        }\n        <!-- Refresh Button (predefined) -->\n        @if (ShowRefreshButton) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Refresh data\"\n            [disabled]=\"loading\"\n            (click)=\"onRefreshClick()\">\n            <i class=\"fa-solid fa-arrows-rotate\" [class.fa-spin]=\"loading\"></i>\n            <span class=\"button-text\">Refresh</span>\n          </button>\n        }\n        <!-- Export Button (predefined) -->\n        @if (ShowExportButton) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Export\"\n            [disabled]=\"IsPreparingExport\"\n            (click)=\"onExportClick()\">\n            <i class=\"fa-solid\" [class.fa-file-excel]=\"!IsPreparingExport\" [class.fa-spinner]=\"IsPreparingExport\" [class.fa-spin]=\"IsPreparingExport\"></i>\n            <span class=\"button-text\">Export</span>\n          </button>\n        }\n        <!-- Delete Button (predefined) -->\n        @if (ShowDeleteButton && HasSelection) {\n          <button\n            class=\"toolbar-button toolbar-button-danger\"\n            title=\"Delete selected records\"\n            (click)=\"onDeleteClick()\">\n            <i class=\"fa-solid fa-trash\"></i>\n            <span class=\"button-text\">Delete</span>\n          </button>\n        }\n        <!-- Compare Button (predefined) -->\n        @if (ShowCompareButton) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Compare selected records\"\n            [disabled]=\"!HasMultipleSelection\"\n            (click)=\"onCompareClick()\">\n            <i class=\"fa-solid fa-code-compare\"></i>\n            <span class=\"button-text\">Compare</span>\n          </button>\n        }\n        <!-- Merge Button (predefined) -->\n        @if (ShowMergeButton) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Merge selected records\"\n            [disabled]=\"!HasMultipleSelection\"\n            (click)=\"onMergeClick()\">\n            <i class=\"fa-solid fa-code-merge\"></i>\n            <span class=\"button-text\">Merge</span>\n          </button>\n        }\n        <!-- Add to List Button (predefined) -->\n        @if (ShowAddToListButton) {\n          <button\n            class=\"toolbar-button\"\n            [title]=\"HasSelection ? 'Add selected records to a list' : 'Add all matching records to a list'\"\n            [disabled]=\"(!HasSelection && !ExportDataProvider) || IsPreparingAddToList\"\n            (click)=\"onAddToListClick()\">\n            <i class=\"fa-solid\" [class.fa-list-check]=\"!IsPreparingAddToList\" [class.fa-spinner]=\"IsPreparingAddToList\" [class.fa-spin]=\"IsPreparingAddToList\"></i>\n            <span class=\"button-text\">Add to List</span>\n          </button>\n        }\n        <!-- Search for Duplicates Button (predefined) -->\n        @if (ShowDuplicateSearchButton) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Search for duplicate records\"\n            [disabled]=\"!HasMultipleSelection\"\n            (click)=\"onDuplicateSearchClick()\">\n            <i class=\"fa-solid fa-magnifying-glass-plus\"></i>\n            <span class=\"button-text\">Find Duplicates</span>\n          </button>\n        }\n        <!-- Communication Button (predefined) -->\n        @if (ShowCommunicationButton && EntitySupportsCommunication) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Send message to selected records\"\n            [disabled]=\"!HasSelection\"\n            (click)=\"onCommunicationClick()\">\n            <i class=\"fa-solid fa-envelope\"></i>\n            <span class=\"button-text\">Send Message</span>\n          </button>\n        }\n        <!-- Legacy ToolbarConfig buttons -->\n        <!-- Add Button (legacy) -->\n        @if (ToolbarConfig.showAdd && AllowAdd && !ShowNewButton) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Add New\"\n            (click)=\"onAddClick()\">\n            <i class=\"fa-solid fa-plus\"></i>\n          </button>\n        }\n        <!-- Refresh Button (legacy) -->\n        @if (ToolbarConfig.showRefresh !== false && !ShowRefreshButton) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Refresh\"\n            [disabled]=\"loading\"\n            (click)=\"onRefreshClick()\">\n            <i class=\"fa-solid fa-refresh\" [class.fa-spin]=\"loading\"></i>\n          </button>\n        }\n        <!-- Delete Button (legacy) -->\n        @if (ToolbarConfig.showDelete && AllowDelete && HasSelection && !ShowDeleteButton) {\n          <button\n            class=\"toolbar-button toolbar-button-danger\"\n            title=\"Delete Selected\"\n            (click)=\"onDeleteClick()\">\n            <i class=\"fa-solid fa-trash\"></i>\n          </button>\n        }\n        <!-- Export Button (legacy) -->\n        @if (ToolbarConfig.showExport && !ShowExportButton) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Export\"\n            (click)=\"onExportClick()\">\n            <i class=\"fa-solid fa-download\"></i>\n          </button>\n        }\n        <!-- Column Chooser Button -->\n        @if (ToolbarConfig.showColumnChooser && AllowColumnToggle) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Column Chooser\"\n            (click)=\"onColumnChooserClick()\">\n            <i class=\"fa-solid fa-columns\"></i>\n          </button>\n        }\n        <!-- Custom Right Buttons -->\n        @for (button of ToolbarConfig.customButtons; track button) {\n          @if (button.position === 'right' && isButtonVisible(button)) {\n            <button\n              class=\"toolbar-button\"\n              [class]=\"button.cssClass\"\n              [disabled]=\"isButtonDisabled(button)\"\n              [title]=\"button.tooltip || ''\"\n              (click)=\"onToolbarButtonClick(button)\">\n              @if (button.icon) {\n                <i [class]=\"button.icon\"></i>\n              }\n              @if (button.text) {\n                <span>{{ button.text }}</span>\n              }\n            </button>\n          }\n        }\n        <!-- Overflow Menu -->\n        @if (hasOverflowMenuItems) {\n          <div class=\"toolbar-overflow\" (click)=\"$event.stopPropagation()\">\n            <button\n              class=\"toolbar-button overflow-trigger\"\n              title=\"More actions\"\n              (click)=\"toggleOverflowMenu()\">\n              <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n            </button>\n            @if (showOverflowMenu) {\n              <div class=\"overflow-menu\" [@fadeIn]>\n                <!-- Export (if in overflow) -->\n                @if (showExportInOverflow) {\n                  <button class=\"overflow-item\" (click)=\"onExportClick(); closeOverflowMenu()\">\n                    <i class=\"fa-solid fa-file-excel\"></i>\n                    <span>Export</span>\n                  </button>\n                }\n                <!-- Entity Actions -->\n                @if (ShowEntityActionButtons && EntityActions.length > 0) {\n                  <div class=\"overflow-divider\"></div>\n                  <div class=\"overflow-section-label\">Actions</div>\n                  @for (action of EntityActions; track action) {\n                    <button\n                      class=\"overflow-item\"\n                      [disabled]=\"!isEntityActionEnabled(action)\"\n                      (click)=\"onEntityActionClick(action); closeOverflowMenu()\">\n                      <i [class]=\"action.icon || 'fa-solid fa-bolt'\"></i>\n                      <span>{{ action.name }}</span>\n                    </button>\n                  }\n                }\n                <!-- Column Chooser (if in overflow) -->\n                @if (showColumnChooserInOverflow) {\n                  <div class=\"overflow-divider\"></div>\n                }\n                @if (showColumnChooserInOverflow) {\n                  <button class=\"overflow-item\" (click)=\"onColumnChooserClick(); closeOverflowMenu()\">\n                    <i class=\"fa-solid fa-columns\"></i>\n                    <span>Manage Columns</span>\n                  </button>\n                }\n                <!-- Selection-dependent actions in overflow -->\n                @if (HasSelection && hasSelectionDependentOverflowActions) {\n                  <div class=\"overflow-divider\"></div>\n                  @if (showCommunicationInOverflow) {\n                    <button class=\"overflow-item\" (click)=\"onCommunicationClick(); closeOverflowMenu()\">\n                      <i class=\"fa-solid fa-envelope\"></i>\n                      <span>Send Message</span>\n                    </button>\n                  }\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Aggregate Cards (displayed as summary cards above the grid) -->\n  @if (ShowAggregatePanel) {\n    <div class=\"mj-aggregate-cards\">\n      @for (agg of CardAggregates; track agg) {\n        <div class=\"aggregate-card\">\n          @if (agg.icon) {\n            <div class=\"aggregate-card-icon\">\n              <i [class]=\"agg.icon\"></i>\n            </div>\n          }\n          <div class=\"aggregate-card-content\">\n            <span class=\"aggregate-card-label\">{{ agg.label }}</span>\n            <span class=\"aggregate-card-value\">{{ getAggregateValue(agg) }}</span>\n          </div>\n        </div>\n      }\n      @if (AggregatesLoading) {\n        <div class=\"aggregate-card-loading\">\n          <i class=\"fa-solid fa-spinner fa-spin\"></i>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Grid Content -->\n  <div class=\"mj-grid-content\">\n    <!-- Loading Overlay -->\n    @if (loading && rowData.length === 0) {\n      <div class=\"mj-grid-loading-overlay\">\n        <mj-loading text=\"Loading...\"></mj-loading>\n      </div>\n    }\n\n    <!-- Error State -->\n    @if (errorMessage && !loading) {\n      <mj-empty-state\n        class=\"mj-grid-state-fill\"\n        [Size]=\"EmptyStateSize\"\n        Variant=\"error\"\n        Icon=\"fa-solid fa-triangle-exclamation\"\n        Title=\"Couldn't load this data\"\n        [Message]=\"FriendlyErrorMessage\"\n        ActionText=\"Retry\"\n        ActionIcon=\"fa-solid fa-arrows-rotate\"\n        (Action)=\"Refresh()\" />\n    }\n\n    <!-- Empty State -->\n    @if (!loading && !errorMessage && rowData.length === 0) {\n      <mj-empty-state\n        class=\"mj-grid-state-fill\"\n        [Size]=\"EmptyStateSize\"\n        Icon=\"fa-solid fa-inbox\"\n        [Title]=\"EntityInfo ? 'No ' + EntityInfo.DisplayNamePlural + ' to display' : 'No data to display'\" />\n    }\n\n    <!-- AG Grid (Client-side mode) -->\n    @if (!errorMessage && PaginationMode === 'client' && (rowData.length > 0 || loading)) {\n      <ag-grid-angular\n        class=\"mj-ag-grid ag-theme-alpine\"\n        [theme]=\"agGridTheme\"\n        [columnDefs]=\"agColumnDefs\"\n        [rowData]=\"rowData\"\n        [defaultColDef]=\"defaultColDef\"\n        [rowSelection]=\"agRowSelection\"\n        [getRowId]=\"getRowId\"\n        [suppressCellFocus]=\"true\"\n        [rowHeight]=\"RowHeight\"\n        [headerHeight]=\"ShowHeader ? undefined : 0\"\n        (gridReady)=\"onGridReady($event)\"\n        (cellClicked)=\"onAgCellClicked($event)\"\n        (rowClicked)=\"onAgRowClicked($event)\"\n        (rowDoubleClicked)=\"onAgRowDoubleClicked($event)\"\n        (sortChanged)=\"onAgSortChanged($event)\"\n        (selectionChanged)=\"onAgSelectionChanged($event)\"\n        (columnResized)=\"onAgColumnResized($event)\"\n        (columnMoved)=\"onAgColumnMoved($event)\">\n      </ag-grid-angular>\n    }\n\n    <!-- AG Grid (Infinite Scroll mode) -->\n    @if (!errorMessage && PaginationMode === 'infinite') {\n      <ag-grid-angular\n        class=\"mj-ag-grid ag-theme-alpine\"\n        [theme]=\"agGridTheme\"\n        [columnDefs]=\"agColumnDefs\"\n        [defaultColDef]=\"defaultColDef\"\n        [rowSelection]=\"agRowSelection\"\n        [getRowId]=\"getRowId\"\n        [suppressCellFocus]=\"true\"\n        [rowHeight]=\"RowHeight\"\n        [headerHeight]=\"ShowHeader ? undefined : 0\"\n        [rowModelType]=\"'infinite'\"\n        [cacheBlockSize]=\"CacheBlockSize\"\n        [maxBlocksInCache]=\"MaxBlocksInCache\"\n        [infiniteInitialRowCount]=\"1\"\n        [cacheOverflowSize]=\"2\"\n        (gridReady)=\"onGridReady($event)\"\n        (cellClicked)=\"onAgCellClicked($event)\"\n        (rowClicked)=\"onAgRowClicked($event)\"\n        (rowDoubleClicked)=\"onAgRowDoubleClicked($event)\"\n        (sortChanged)=\"onAgSortChanged($event)\"\n        (selectionChanged)=\"onAgSelectionChanged($event)\"\n        (columnResized)=\"onAgColumnResized($event)\"\n        (columnMoved)=\"onAgColumnMoved($event)\">\n      </ag-grid-angular>\n    }\n\n  </div>\n\n  <!-- Pagination (opt-in via ShowPager input) -->\n  @if (ShowPager) {\n    <mj-pagination\n      [TotalRowCount]=\"totalRowCount\"\n      [PageNumber]=\"PagerPageNumber\"\n      [PageSize]=\"PageSize\"\n      [IsLoading]=\"loading\"\n      (PageChange)=\"PageChange.emit($event)\">\n    </mj-pagination>\n  }\n\n  <!-- Aggregate Summary Row (outside mj-grid-content so it's always visible) -->\n  @if (ShowAggregateSummary) {\n    <div class=\"mj-aggregate-summary\">\n      <div class=\"aggregate-summary-content\">\n        @for (agg of ColumnAggregates; track agg) {\n          <div class=\"aggregate-summary-item\">\n            @if (agg.icon) {\n              <i [class]=\"agg.icon\"></i>\n            }\n            <span class=\"agg-summary-label\">{{ agg.label }}:</span>\n            <span class=\"agg-summary-value\">{{ getAggregateValue(agg) }}</span>\n          </div>\n        }\n      </div>\n      @if (AggregatesLoading) {\n        <div class=\"aggregate-loading\">\n          <i class=\"fa-solid fa-spinner fa-spin\"></i>\n        </div>\n      }\n    </div>\n  }\n</div>\n\n<!-- Export Dialog -->\n<mj-export-dialog\n  [visible]=\"showExportDialog\"\n  [config]=\"exportDialogConfig\"\n  (closed)=\"onExportDialogClosed($event)\">\n</mj-export-dialog>\n\n<!-- Runtime-UX driver for an entity action that names a RuntimeUXDriverClass (e.g. the Record Process\n     bulk-update runner). Mounted in-place over the grid \u2014 no parent wiring required. -->\n@if (ActiveRuntimeDriver) {\n  <mj-entity-action-ux-host\n    [DriverClass]=\"ActiveRuntimeDriver.DriverClass\"\n    [Context]=\"ActiveRuntimeDriver.Context\"\n    (Completed)=\"OnRuntimeDriverCompleted($event)\"\n    (Cancelled)=\"OnRuntimeDriverCancelled()\">\n  </mj-entity-action-ux-host>\n}\n", styles: ["/* ========================================\n   CSS Custom Properties (Theme Variables)\n   ======================================== */\n\n:host {\n  /* Grid container */\n  --grid-border-color: var(--mj-border-default);\n  --grid-border-radius: 0px;\n  --grid-background: var(--mj-bg-surface);\n\n  /* Header */\n  --grid-header-bg: var(--mj-bg-surface-card);\n  --grid-header-text: var(--mj-text-primary);\n  --grid-header-font-weight: 600;\n  --grid-header-height: 40px;\n  --grid-header-border-color: var(--mj-border-default);\n\n  /* Rows */\n  --grid-row-height: 40px;\n  --grid-row-bg: var(--mj-bg-surface);\n  --grid-row-bg-alt: var(--mj-bg-surface-card);\n  --grid-row-hover-bg: var(--mj-bg-surface-hover);\n  --grid-row-selected-bg: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n  --grid-row-selected-hover-bg: color-mix(in srgb, var(--mj-status-warning) 18%, var(--mj-bg-surface));\n\n  /* Cells */\n  --grid-cell-padding: 8px 12px;\n  --grid-cell-text: var(--mj-text-primary);\n  --grid-cell-border-color: var(--mj-border-subtle);\n\n  /* Selection - mellow yellow to avoid conflict with blue hyperlinks */\n  --grid-checkbox-color: var(--mj-brand-primary);\n  --grid-selection-indicator-color: var(--mj-status-warning);\n\n  /* Editing */\n  --grid-edit-cell-bg: var(--mj-bg-surface);\n  --grid-edit-cell-border: var(--mj-brand-primary);\n  --grid-edit-cell-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n\n  /* Sorting */\n  --grid-sort-indicator-color: var(--mj-brand-primary);\n\n  /* Toolbar */\n  --grid-toolbar-bg: var(--mj-bg-surface);\n  --grid-toolbar-height: 48px;\n  --grid-toolbar-border-color: var(--mj-border-default);\n\n  /* Loading */\n  --grid-loading-overlay-bg: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n\n  /* Empty state */\n  --grid-empty-text-color: var(--mj-text-disabled);\n  --grid-empty-icon-color: var(--mj-border-strong);\n\n  display: block;\n  height: 100%;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\n}\n\n/* ========================================\n   Grid Container\n   ======================================== */\n\n.mj-grid-container {\n  display: flex;\n  flex-direction: column;\n  border: 1px solid var(--grid-border-color);\n  border-radius: var(--grid-border-radius);\n  background: var(--grid-background);\n  overflow: hidden;\n}\n\n/* ========================================\n   Toolbar\n   ======================================== */\n\n.mj-grid-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: var(--grid-toolbar-height);\n  padding: 0 12px;\n  background: var(--grid-toolbar-bg);\n  border-bottom: 1px solid var(--grid-toolbar-border-color);\n  gap: 12px;\n}\n\n.toolbar-left,\n.toolbar-right {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.toolbar-center {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--mj-text-secondary);\n  font-size: 13px;\n}\n\n.toolbar-search {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n\n.search-icon {\n  position: absolute;\n  left: 10px;\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n}\n\n.search-input {\n  padding: 6px 30px 6px 32px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  font-size: 13px;\n  width: 200px;\n  transition: border-color 0.2s, box-shadow 0.2s;\n}\n\n.search-input:focus {\n  outline: none;\n  border-color: var(--grid-selection-indicator-color);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.search-clear {\n  position: absolute;\n  right: 6px;\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 4px;\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n}\n\n.search-clear:hover {\n  color: var(--mj-text-secondary);\n}\n\n.toolbar-button {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  transition: background-color 0.2s, border-color 0.2s;\n}\n\n.toolbar-button:hover:not(:disabled) {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n}\n\n.toolbar-button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.toolbar-button i {\n  font-size: 14px;\n}\n\n.toolbar-button-danger {\n  color: var(--mj-status-error);\n}\n\n.toolbar-button-danger:hover:not(:disabled) {\n  background: var(--mj-status-error-bg);\n  border-color: var(--mj-status-error);\n}\n\n.row-count,\n.selection-count {\n  font-weight: 500;\n}\n\n/* ========================================\n   Grid Content\n   ======================================== */\n\n.mj-grid-content {\n  flex: 1;\n  position: relative;\n  overflow: hidden;\n}\n\n.mj-grid-scroll-container {\n  height: 100%;\n  overflow: auto;\n}\n\n/* ========================================\n   Loading Overlay\n   ======================================== */\n\n.mj-grid-loading-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--grid-loading-overlay-bg);\n  z-index: 10;\n}\n\n/* ========================================\n   Error State\n   ======================================== */\n\n/* ========================================\n   Empty / Error State\n   ======================================== */\n\n/* Flex-fill so <mj-empty-state> placeholders occupy the grid content area\n   (the host centers its content but does not grow to fill the parent). */\n.mj-grid-state-fill {\n  flex: 1 1 auto;\n}\n\n/* ========================================\n   Header Row\n   ======================================== */\n\n.mj-grid-header {\n  display: flex;\n  min-height: var(--grid-header-height);\n  background: var(--grid-header-bg);\n  border-bottom: 2px solid var(--grid-header-border-color);\n  position: sticky;\n  top: 0;\n  z-index: 5;\n}\n\n.mj-grid-header-cell {\n  display: flex;\n  align-items: center;\n  padding: var(--grid-cell-padding);\n  font-weight: var(--grid-header-font-weight);\n  color: var(--grid-header-text);\n  font-size: 13px;\n  user-select: none;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  border-right: 1px solid var(--grid-cell-border-color);\n  flex-shrink: 0;\n}\n\n.mj-grid-header-cell:last-child {\n  border-right: none;\n}\n\n.mj-grid-header-cell.sortable {\n  cursor: pointer;\n}\n\n.mj-grid-header-cell.sortable:hover {\n  background: rgba(0, 0, 0, 0.04);\n}\n\n.header-text {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sort-indicator {\n  display: flex;\n  align-items: center;\n  margin-left: 6px;\n  color: var(--grid-sort-indicator-color);\n}\n\n.sort-indicator i {\n  font-size: 12px;\n}\n\n.sort-index {\n  font-size: 10px;\n  margin-left: 2px;\n  font-weight: normal;\n}\n\n/* ========================================\n   Data Rows\n   ======================================== */\n\n.mj-grid-row {\n  display: flex;\n  align-items: stretch;\n  background: var(--grid-row-bg);\n  transition: background-color 0.15s;\n  cursor: default;\n}\n\n.mj-grid-row:hover {\n  background: var(--grid-row-hover-bg);\n}\n\n.mj-grid-row.grid-row-alt {\n  background: var(--grid-row-bg-alt);\n}\n\n.mj-grid-row.grid-row-alt:hover {\n  background: var(--grid-row-hover-bg);\n}\n\n.mj-grid-row.grid-row-selected {\n  background: var(--grid-row-selected-bg);\n}\n\n.mj-grid-row.grid-row-selected:hover {\n  background: var(--grid-row-selected-hover-bg);\n}\n\n.mj-grid-row.grid-row-editing {\n  background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface));\n}\n\n.mj-grid-row.grid-row-dirty {\n  border-left: 3px solid var(--mj-status-warning);\n}\n\n/* ========================================\n   Data Cells\n   ======================================== */\n\n.mj-grid-cell {\n  display: flex;\n  align-items: center;\n  padding: var(--grid-cell-padding);\n  color: var(--grid-cell-text);\n  font-size: 13px;\n  overflow: hidden;\n  border-right: 1px solid transparent;\n  flex-shrink: 0;\n}\n\n.mj-grid-cell:last-child {\n  border-right: none;\n}\n\n/* Grid lines modes */\n.grid-lines-horizontal .mj-grid-row {\n  border-bottom: 1px solid var(--grid-cell-border-color);\n}\n\n.grid-lines-vertical .mj-grid-cell {\n  border-right: 1px solid var(--grid-cell-border-color);\n}\n\n.grid-lines-both .mj-grid-row {\n  border-bottom: 1px solid var(--grid-cell-border-color);\n}\n\n.grid-lines-both .mj-grid-cell {\n  border-right: 1px solid var(--grid-cell-border-color);\n}\n\n/* Cell alignment */\n.mj-grid-cell.align-left {\n  justify-content: flex-start;\n}\n\n.mj-grid-cell.align-center {\n  justify-content: center;\n}\n\n.mj-grid-cell.align-right {\n  justify-content: flex-end;\n}\n\n.cell-content {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Special cells */\n.row-number-cell {\n  width: 50px;\n  min-width: 50px;\n  max-width: 50px;\n  justify-content: center;\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n  background: var(--grid-header-bg);\n}\n\n.checkbox-cell {\n  width: 40px;\n  min-width: 40px;\n  max-width: 40px;\n  justify-content: center;\n}\n\n.checkbox-cell input[type=\"checkbox\"] {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n  accent-color: var(--grid-checkbox-color);\n}\n\n/* ========================================\n   Virtual Scrolling\n   ======================================== */\n\n.mj-grid-virtual-spacer {\n  flex-shrink: 0;\n}\n\n/* ========================================\n   Responsive Adjustments\n   ======================================== */\n\n@media (max-width: 768px) {\n  .mj-grid-toolbar {\n    flex-wrap: wrap;\n    padding: 8px;\n  }\n\n  .toolbar-search {\n    order: 3;\n    width: 100%;\n    margin-top: 8px;\n  }\n\n  .search-input {\n    width: 100%;\n  }\n\n  .toolbar-center {\n    order: 2;\n  }\n\n  /* Hide button text on mobile */\n  .toolbar-button .button-text {\n    display: none;\n  }\n}\n\n/* ========================================\n   Toolbar Button Text\n   ======================================== */\n\n.toolbar-button .button-text {\n  font-size: 13px;\n}\n\n/* ========================================\n   Overflow Menu\n   ======================================== */\n\n.toolbar-overflow {\n  position: relative;\n}\n\n.overflow-trigger {\n  padding: 6px 8px !important;\n}\n\n.overflow-trigger i {\n  font-size: 16px;\n}\n\n.overflow-menu {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  margin-top: 4px;\n  min-width: 220px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);\n  z-index: 1000;\n  overflow: hidden;\n}\n\n.overflow-item {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  padding: 10px 16px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  text-align: left;\n  gap: 12px;\n  transition: background-color 0.15s;\n}\n\n.overflow-item:hover:not(:disabled) {\n  background: var(--mj-bg-surface-card);\n}\n\n.overflow-item:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.overflow-item i {\n  width: 18px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  text-align: center;\n}\n\n.overflow-item span {\n  flex: 1;\n}\n\n.overflow-divider {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 4px 0;\n}\n\n.overflow-section-label {\n  padding: 8px 16px 4px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  color: var(--mj-text-disabled);\n  letter-spacing: 0.5px;\n}\n\n/* Entity Actions submenu styling */\n.overflow-item.action-item i {\n  color: var(--mj-brand-primary);\n}\n\n/* ========================================\n   Highlight Matches\n   ======================================== */\n\n::ng-deep .highlight-match {\n  background-color: color-mix(in srgb, var(--mj-status-warning) 40%, var(--mj-bg-surface));\n  border-radius: 2px;\n  padding: 0 1px;\n}\n\n/* ========================================\n   AG Grid Customizations\n   ======================================== */\n\n.mj-ag-grid {\n  width: 100%;\n  height: 100%;\n}\n\n/* AG Grid v35 uses JS-based theming (colorSchemeVariable) \u2014 no CSS variable overrides needed */\n\n/* Selected row styling - left indicator bar only, background handled by AG Grid theme */\n::ng-deep .ag-row-selected {\n  box-shadow: inset 4px 0 0 0 var(--mj-status-warning);\n}\n\n/* Selection checkbox styling */\n::ng-deep .ag-checkbox-input-wrapper {\n  width: 18px;\n  height: 18px;\n}\n\n::ng-deep .ag-checkbox-input-wrapper.ag-checked::after {\n  color: var(--grid-checkbox-color, var(--mj-brand-primary));\n}\n\n/* ========================================\n   Visual Config: Header Styles\n   ======================================== */\n\n/* Flat header (minimal) */\n.header-style-flat ::ng-deep .ag-header {\n  background: var(--grid-header-bg, var(--mj-bg-surface-card));\n  border-bottom: 1px solid var(--grid-header-border-color, var(--mj-border-default));\n}\n\n/* Elevated header (default - subtle shadow) */\n.header-style-elevated ::ng-deep .ag-header {\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--grid-header-border-color, var(--mj-border-default));\n}\n\n.header-style-elevated.header-shadow ::ng-deep .ag-header {\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);\n}\n\n/* Gradient header (more prominent) */\n.header-style-gradient ::ng-deep .ag-header {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: none;\n}\n\n.header-style-gradient.header-shadow ::ng-deep .ag-header {\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n/* Bold header (high contrast) */\n.header-style-bold ::ng-deep .ag-header {\n  background: var(--mj-text-secondary);\n  border-bottom: none;\n}\n\n.header-style-bold ::ng-deep .ag-header-cell-text {\n  color: var(--mj-text-inverse);\n  font-weight: 600;\n}\n\n.header-style-bold ::ng-deep .ag-header-icon {\n  color: color-mix(in srgb, var(--mj-text-inverse) 70%, transparent);\n}\n\n.header-style-bold ::ng-deep .ag-header-cell:hover {\n  background: color-mix(in srgb, var(--mj-text-inverse) 10%, transparent);\n}\n\n/* Header sort icons enhancement */\n::ng-deep .ag-header-cell-sorted-asc .ag-icon-asc,\n::ng-deep .ag-header-cell-sorted-desc .ag-icon-desc {\n  color: var(--grid-accent-color, var(--grid-sort-indicator-color, var(--mj-brand-primary)));\n}\n\n/* ========================================\n   Visual Config: Zebra Striping\n   ======================================== */\n\n/* Subtle contrast */\n.alternate-rows-subtle ::ng-deep .ag-row-odd {\n  background-color: rgba(0, 0, 0, 0.015);\n}\n\n.alternate-rows-subtle ::ng-deep .ag-row-odd:hover:not(.ag-row-selected) {\n  background-color: var(--grid-row-hover-bg, var(--mj-bg-surface-hover));\n}\n\n/* Medium contrast (default) */\n.alternate-rows-medium ::ng-deep .ag-row-odd {\n  background-color: rgba(0, 0, 0, 0.025);\n}\n\n.alternate-rows-medium ::ng-deep .ag-row-odd:hover:not(.ag-row-selected) {\n  background-color: var(--grid-row-hover-bg, var(--mj-bg-surface-hover));\n}\n\n/* Strong contrast */\n.alternate-rows-strong ::ng-deep .ag-row-odd {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n\n.alternate-rows-strong ::ng-deep .ag-row-odd:hover:not(.ag-row-selected) {\n  background-color: var(--grid-row-hover-bg, var(--mj-bg-surface-hover));\n}\n\n/* ========================================\n   Visual Config: Hover Transitions\n   ======================================== */\n\n.hover-transitions ::ng-deep .ag-row {\n  transition: background-color var(--grid-hover-transition, 150ms) ease;\n}\n\n.hover-transitions ::ng-deep .ag-cell {\n  transition: background-color var(--grid-hover-transition, 150ms) ease;\n}\n\n/* ========================================\n   Visual Config: Cell Padding\n   ======================================== */\n\n.cell-padding-compact ::ng-deep .ag-cell {\n  padding-left: 8px;\n  padding-right: 8px;\n}\n\n.cell-padding-compact ::ng-deep .ag-header-cell {\n  padding-left: 8px;\n  padding-right: 8px;\n}\n\n.cell-padding-normal ::ng-deep .ag-cell {\n  padding-left: 12px;\n  padding-right: 12px;\n}\n\n.cell-padding-normal ::ng-deep .ag-header-cell {\n  padding-left: 12px;\n  padding-right: 12px;\n}\n\n.cell-padding-comfortable ::ng-deep .ag-cell {\n  padding-left: 16px;\n  padding-right: 16px;\n}\n\n.cell-padding-comfortable ::ng-deep .ag-header-cell {\n  padding-left: 16px;\n  padding-right: 16px;\n}\n\n/* ========================================\n   Visual Config: Checkbox Styles\n   ======================================== */\n\n/* Rounded checkbox */\n.checkbox-style-rounded ::ng-deep .ag-checkbox-input-wrapper {\n  border-radius: 4px;\n}\n\n.checkbox-style-rounded ::ng-deep .ag-checkbox-input-wrapper::after {\n  border-radius: 3px;\n}\n\n/* Filled checkbox */\n.checkbox-style-filled ::ng-deep .ag-checkbox-input-wrapper.ag-checked {\n  background-color: var(--grid-checkbox-color, var(--mj-brand-primary));\n  border-color: var(--grid-checkbox-color, var(--mj-brand-primary));\n}\n\n.checkbox-style-filled ::ng-deep .ag-checkbox-input-wrapper.ag-checked::after {\n  color: var(--mj-text-inverse);\n}\n\n/* ========================================\n   Cell Content Formatting\n   ======================================== */\n\n/* Right-aligned cells (numbers) */\n::ng-deep .cell-align-right {\n  text-align: right;\n  justify-content: flex-end;\n}\n\n::ng-deep .header-align-right .ag-header-cell-label {\n  justify-content: flex-end;\n}\n\n/* Empty cell placeholder */\n::ng-deep .cell-empty {\n  color: var(--mj-text-disabled);\n  font-style: normal;\n}\n\n/* Boolean icons */\n::ng-deep .cell-boolean-true {\n  color: var(--mj-status-success);\n  font-size: 14px;\n}\n\n::ng-deep .cell-boolean-false {\n  color: var(--mj-text-disabled);\n  font-size: 14px;\n}\n\n/* Clickable links */\n::ng-deep .cell-link {\n  color: var(--grid-accent-color, var(--mj-brand-primary));\n  text-decoration: none;\n  transition: color 0.15s;\n  font-size: inherit;\n  font-family: inherit;\n  line-height: inherit;\n}\n\n::ng-deep .cell-link:hover {\n  color: var(--mj-brand-primary);\n  text-decoration: underline;\n}\n\n/* Email cells */\n::ng-deep .cell-email {\n  font-family: inherit;\n  font-size: 13px;\n}\n\n/* Foreign key link cells */\n::ng-deep .cell-fk-link {\n  color: var(--grid-accent-color, var(--mj-brand-primary));\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.15s, text-decoration 0.15s;\n}\n\n::ng-deep .cell-fk-link:hover {\n  color: var(--mj-brand-primary-hover);\n  text-decoration: underline;\n}\n\n::ng-deep .cell-fk-link:active {\n  color: var(--mj-brand-primary-active);\n}\n\n/* URL cells */\n::ng-deep .cell-url {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n  font-size: 13px;\n}\n\n/* Phone cells */\n::ng-deep .cell-phone {\n  font-variant-numeric: tabular-nums;\n  letter-spacing: 0.3px;\n}\n\n/* ========================================\n   Skeleton Loading Animation\n   ======================================== */\n\n@keyframes skeleton-shimmer {\n  0% {\n    background-position: -200px 0;\n  }\n  100% {\n    background-position: calc(200px + 100%) 0;\n  }\n}\n\n.skeleton-row {\n  display: flex;\n  height: 40px;\n  align-items: center;\n  padding: 0 12px;\n  border-bottom: 1px solid var(--grid-cell-border-color, var(--mj-border-subtle));\n}\n\n.skeleton-cell {\n  height: 16px;\n  border-radius: 4px;\n  background: linear-gradient(\n    90deg,\n    var(--mj-bg-surface-sunken) 0px,\n    var(--mj-bg-surface-hover) 40px,\n    var(--mj-bg-surface-sunken) 80px\n  );\n  background-size: 200px 100%;\n  animation: skeleton-shimmer 1.5s ease-in-out infinite;\n}\n\n.skeleton-cell-short {\n  width: 60px;\n}\n\n.skeleton-cell-medium {\n  width: 120px;\n}\n\n.skeleton-cell-long {\n  width: 180px;\n}\n\n/* Selection checkbox column header */\n::ng-deep .ag-header-select-all {\n  margin-right: 0;\n}\n\n/* ========================================\n   Row Border Enhancement\n   ======================================== */\n\n::ng-deep .ag-theme-alpine .ag-row {\n  border-bottom: 1px solid var(--grid-cell-border-color, var(--mj-border-subtle));\n}\n\n::ng-deep .ag-theme-alpine .ag-row:last-child {\n  border-bottom: none;\n}\n\n/* ========================================\n   Focus States\n   ======================================== */\n\n::ng-deep .ag-theme-alpine .ag-cell-focus {\n  border: none !important;\n  outline: none !important;\n}\n\n::ng-deep .ag-theme-alpine .ag-header-cell:focus {\n  outline: 2px solid var(--grid-accent-color, var(--mj-brand-primary));\n  outline-offset: -2px;\n}\n\n/* ========================================\n   Scrollbar Styling\n   ======================================== */\n\n::ng-deep .ag-body-viewport::-webkit-scrollbar {\n  width: 8px;\n  height: 8px;\n}\n\n::ng-deep .ag-body-viewport::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-card);\n  border-radius: 4px;\n}\n\n::ng-deep .ag-body-viewport::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border-radius: 4px;\n}\n\n::ng-deep .ag-body-viewport::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-disabled);\n}\n\n/* ========================================\n   Pinned Column Styling\n   ======================================== */\n\n::ng-deep .ag-theme-alpine .ag-pinned-left-cols-container {\n  border-right: 2px solid var(--grid-border-color, var(--mj-border-default));\n}\n\n::ng-deep .ag-theme-alpine .ag-pinned-right-cols-container {\n  border-left: 2px solid var(--grid-border-color, var(--mj-border-default));\n}\n\n/* ========================================\n   Header Cell Enhancements\n   ======================================== */\n\n::ng-deep .ag-theme-alpine .ag-header-cell {\n  font-weight: 600;\n  font-size: 12px;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  color: var(--mj-text-secondary);\n}\n\n::ng-deep .ag-theme-alpine .ag-header-cell:hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n\n::ng-deep .ag-theme-alpine .ag-header-cell-sortable:hover .ag-header-cell-label {\n  color: var(--grid-accent-color, var(--mj-brand-primary));\n}\n\n/* Sort icon animation */\n::ng-deep .ag-theme-alpine .ag-sort-indicator-icon {\n  transition: transform 0.2s ease;\n}\n\n::ng-deep .ag-theme-alpine .ag-header-cell:hover .ag-sort-indicator-icon {\n  transform: scale(1.1);\n}\n\n/* ========================================\n   Enhanced Multi-Sort Indicators\n   These styles use :host to ensure they're scoped to this component\n   and !important to override AG Grid's built-in styles\n   ======================================== */\n\n/* Highlight sorted column headers with eye-catching background */\n/* Ascending = blue tint */\n:host ::ng-deep .ag-header-cell-sorted-asc {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface)) !important;\n  position: relative;\n}\n\n/* Descending = pink tint */\n:host ::ng-deep .ag-header-cell-sorted-desc {\n  background: color-mix(in srgb, var(--mj-status-error) 12%, var(--mj-bg-surface)) !important;\n  position: relative;\n}\n\n/* Bottom border accent for sorted columns - ascending = blue */\n:host ::ng-deep .ag-header-cell-sorted-asc::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 3px;\n  background: var(--mj-brand-primary);\n}\n\n/* Bottom border accent for sorted columns - descending = pink */\n:host ::ng-deep .ag-header-cell-sorted-desc::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 3px;\n  background: var(--mj-status-error);\n}\n\n/* Sorted column header text - ascending = blue, bold */\n:host ::ng-deep .ag-header-cell-sorted-asc .ag-header-cell-text {\n  color: var(--mj-brand-primary) !important;\n  font-weight: 700 !important;\n}\n\n/* Sorted column header text - descending = pink, bold */\n:host ::ng-deep .ag-header-cell-sorted-desc .ag-header-cell-text {\n  color: var(--mj-status-error) !important;\n  font-weight: 700 !important;\n}\n\n/* Sort icons - larger and more prominent */\n/* Ascending = blue */\n:host ::ng-deep .ag-sort-ascending-icon {\n  color: var(--mj-brand-primary) !important;\n}\n\n/* Descending = pink/magenta */\n:host ::ng-deep .ag-sort-descending-icon {\n  color: var(--mj-status-error) !important;\n}\n\n:host ::ng-deep .ag-sort-ascending-icon .ag-icon,\n:host ::ng-deep .ag-sort-descending-icon .ag-icon {\n  font-size: 14px !important;\n}\n\n/* Sort order number (1, 2, 3) - show as plain number, no bubble */\n/* This avoids AG Grid bug where .ag-sort-order is always present but empty when unsorted */\n/* The number is only visible when AG Grid populates it (i.e., when column is sorted) */\n/* Default blue for ascending */\n:host ::ng-deep .ag-sort-order {\n  margin-left: 4px;\n  font-size: 11px !important;\n  font-weight: 700 !important;\n  color: var(--mj-brand-primary) !important;\n}\n\n/* Sort order number - pink for descending */\n:host ::ng-deep .ag-header-cell-sorted-desc .ag-sort-order {\n  color: var(--mj-status-error) !important;\n}\n\n/* Hover state for sortable headers */\n:host ::ng-deep .ag-header-cell-sortable:hover {\n  background: rgba(0, 0, 0, 0.04);\n}\n\n:host ::ng-deep .ag-header-cell-sortable:hover .ag-header-cell-text {\n  color: var(--mj-brand-primary);\n}\n\n/* ========================================\n   Aggregate Summary Row\n   ======================================== */\n\n.mj-aggregate-summary {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  font-size: 13px;\n  min-height: 44px;\n}\n\n.aggregate-summary-content {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 20px;\n  align-items: center;\n}\n\n.aggregate-summary-item {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 12px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);\n}\n\n.aggregate-summary-item i {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.agg-summary-label {\n  color: var(--mj-text-muted);\n  font-weight: 500;\n}\n\n.agg-summary-value {\n  color: var(--mj-text-primary);\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n}\n\n.aggregate-loading {\n  display: flex;\n  align-items: center;\n  color: var(--mj-text-disabled);\n}\n\n.aggregate-loading i {\n  font-size: 14px;\n}\n\n/* ========================================\n   AGGREGATE CARDS (displayed above grid)\n   ======================================== */\n\n.mj-aggregate-cards {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.aggregate-card {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);\n  min-width: 140px;\n  transition: all 0.15s ease;\n}\n\n.aggregate-card:hover {\n  border-color: var(--mj-border-strong);\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);\n}\n\n.aggregate-card-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  border-radius: 10px;\n  color: var(--mj-brand-primary);\n  font-size: 16px;\n  flex-shrink: 0;\n}\n\n.aggregate-card-content {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.aggregate-card-label {\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.aggregate-card-value {\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n\n.aggregate-card-loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 12px;\n  color: var(--mj-text-disabled);\n}\n\n.aggregate-card-loading i {\n  font-size: 16px;\n}\n\n/* ========================================\n   Text Wrapping Styles\n   ======================================== */\n\n/* Cell class for wrapped text */\n::ng-deep .cell-wrap-text {\n  white-space: normal !important;\n  word-wrap: break-word;\n  line-height: 1.4;\n  padding-top: 8px !important;\n  padding-bottom: 8px !important;\n}\n\n/* Ensure AG Grid cells allow wrapping */\n::ng-deep .ag-cell.cell-wrap-text {\n  overflow: visible;\n  text-overflow: clip;\n}\n\n/* Maintain minimum row height when wrapping */\n::ng-deep .ag-row[style*=\"auto-height\"] {\n  min-height: 40px;\n}\n\n/* ========================================\n   Width filler column ([FillWidth])\n   ========================================\n   The trailing filler exists so row banding and horizontal rules reach the container's right edge\n   instead of stopping wherever the last real column ends. For that to read as \"the table extends\"\n   rather than \"there is an empty column here\", it must lose every affordance that makes a column\n   look like a column: its own vertical rule, the header hover/menu, and the resize handle. What is\n   left is bare row background \u2014 which is exactly the point. */\n::ng-deep .ag-header-cell.mj-grid-filler-header,\n::ng-deep .ag-cell.mj-grid-filler-cell {\n  border-left: none !important;\n  border-right: none !important;\n  cursor: default;\n}\n\n/* The hover tint is OURS (see \".ag-theme-alpine .ag-header-cell:hover\" above), not AG Grid's, so it\n   has to be switched off here or the filler lights up as though it were interactive. Everything else\n   the filler needs suppressed \u2014 resize grip, header menu, moving, tool-panel entry \u2014 is handled by\n   native colDef flags on the column itself, not by CSS. */\n::ng-deep .ag-header-cell.mj-grid-filler-header:hover {\n  background-color: transparent !important;\n}\n\n/* AG Grid injects cellRenderer HTML without Angular attributes, so these\n   must pierce encapsulation or the image renders at intrinsic SVG size. */\n::ng-deep .ag-cell.mj-grid-image-cell {\n  display: flex !important;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  padding: 4px !important;\n}\n::ng-deep .ag-header-cell.mj-grid-image-header .ag-header-cell-label {\n  justify-content: center;\n}\n::ng-deep .cell-image-link {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  overflow: hidden;\n  border-radius: 50%;\n  background: var(--mj-bg-surface-sunken);\n  flex-shrink: 0;\n}\n::ng-deep .cell-image {\n  width: 100%;\n  height: 100%;\n  max-width: 28px;\n  max-height: 28px;\n  object-fit: cover;\n  object-position: center;\n  display: block;\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.ExportService }, { type: i0.NgZone }], { Params: [{
             type: Input
         }], AllowLoad: [{
@@ -5315,9 +5609,9 @@ export class EntityDataGridComponent extends BaseAngularComponent {
             type: Output
         }], EntityActionRequested: [{
             type: Output
-        }], gridContainer: [{
+        }], GridContainer: [{
             type: ViewChild,
             args: ['gridContainer']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EntityDataGridComponent, { className: "EntityDataGridComponent", filePath: "src/lib/entity-data-grid/entity-data-grid.component.ts", lineNumber: 193 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EntityDataGridComponent, { className: "EntityDataGridComponent", filePath: "src/lib/entity-data-grid/entity-data-grid.component.ts", lineNumber: 194 }); })();
 //# sourceMappingURL=entity-data-grid.component.js.map