@memberjunction/ng-entity-viewer 2.132.0 → 3.0.0

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

@@ -0,0 +1,3781 @@
+import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
+import { trigger, transition, style, animate } from '@angular/animations';
+import { Subject } from 'rxjs';
+import { debounceTime, takeUntil } from 'rxjs/operators';
+import { BaseEntity, RunView, RunViewParams, Metadata } from '@memberjunction/core';
+import { ViewInfo, UserViewEngine, UserInfoEngine } from '@memberjunction/core-entities';
+import { ModuleRegistry, AllCommunityModule, themeAlpine } from 'ag-grid-community';
+// Use the existing HighlightUtil from entity-viewer package
+import { HighlightUtil } from '../utils/highlight.util';
+import { DEFAULT_VISUAL_CONFIG } from './models/grid-types';
+import { BeforeRowSelectEventArgs, AfterRowSelectEventArgs, BeforeRowDeselectEventArgs, AfterRowDeselectEventArgs, BeforeRowClickEventArgs, AfterRowClickEventArgs, BeforeRowDoubleClickEventArgs, AfterRowDoubleClickEventArgs, BeforeDataLoadEventArgs, AfterDataLoadEventArgs, BeforeDataRefreshEventArgs, AfterDataRefreshEventArgs, BeforeSortEventArgs, AfterSortEventArgs } from './events/grid-events';
+import * as i0 from "@angular/core";
+import * as i1 from "@memberjunction/ng-export-service";
+import * as i2 from "@angular/common";
+import * as i3 from "ag-grid-angular";
+import * as i4 from "@memberjunction/ng-shared-generic";
+const _c0 = ["gridContainer"];
+function EntityDataGridComponent_div_2_div_2_button_3_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 36);
+    i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_div_2_button_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.FilterText = ""); });
+    i0.ɵɵelement(1, "i", 37);
+    i0.ɵɵelementEnd();
+} }
+function EntityDataGridComponent_div_2_div_2_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 32);
+    i0.ɵɵelement(1, "i", 33);
+    i0.ɵɵelementStart(2, "input", 34);
+    i0.ɵɵlistener("input", function EntityDataGridComponent_div_2_div_2_Template_input_input_2_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.FilterText = $event.target.value); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(3, EntityDataGridComponent_div_2_div_2_button_3_Template, 2, 0, "button", 35);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("placeholder", ctx_r2.ToolbarConfig.searchPlaceholder || "Search...")("value", ctx_r2.FilterText);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.FilterText);
+} }
+function EntityDataGridComponent_div_2_ng_container_3_button_1_i_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i");
+} if (rf & 2) {
+    const button_r6 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵclassMap(button_r6.icon);
+} }
+function EntityDataGridComponent_div_2_ng_container_3_button_1_span_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const button_r6 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(button_r6.text);
+} }
+function EntityDataGridComponent_div_2_ng_container_3_button_1_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 39);
+    i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_ng_container_3_button_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const button_r6 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onToolbarButtonClick(button_r6)); });
+    i0.ɵɵtemplate(1, EntityDataGridComponent_div_2_ng_container_3_button_1_i_1_Template, 1, 2, "i", 40)(2, EntityDataGridComponent_div_2_ng_container_3_button_1_span_2_Template, 2, 1, "span", 41);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const button_r6 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassMap(button_r6.cssClass);
+    i0.ɵɵproperty("disabled", ctx_r2.isButtonDisabled(button_r6))("title", button_r6.tooltip || "");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", button_r6.icon);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", button_r6.text);
+} }
+function EntityDataGridComponent_div_2_ng_container_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵtemplate(1, EntityDataGridComponent_div_2_ng_container_3_button_1_Template, 3, 6, "button", 38);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const button_r6 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", button_r6.position !== "right" && ctx_r2.isButtonVisible(button_r6));
+} }
+function EntityDataGridComponent_div_2_span_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 42);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2(" ", ctx_r2.totalRowCount, " ", ctx_r2.totalRowCount === 1 ? "row" : "rows", " ");
+} }
+function EntityDataGridComponent_div_2_span_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 43);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" (", ctx_r2.SelectedKeys.length, " selected) ");
+} }
+function EntityDataGridComponent_div_2_button_8_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 44);
+    i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_button_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onAddClick()); });
+    i0.ɵɵelement(1, "i", 45);
+    i0.ɵɵelementStart(2, "span", 46);
+    i0.ɵɵtext(3, "New");
+    i0.ɵɵelementEnd()();
+} }
+function EntityDataGridComponent_div_2_button_9_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 47);
+    i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_button_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onRefreshClick()); });
+    i0.ɵɵelement(1, "i", 48);
+    i0.ɵɵelementStart(2, "span", 46);
+    i0.ɵɵtext(3, "Refresh");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("disabled", ctx_r2.loading);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-spin", ctx_r2.loading);
+} }
+function EntityDataGridComponent_div_2_button_10_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 49);
+    i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_button_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onExportClick()); });
+    i0.ɵɵelement(1, "i", 50);
+    i0.ɵɵelementStart(2, "span", 46);
+    i0.ɵɵtext(3, "Export");
+    i0.ɵɵelementEnd()();
+} }
+function EntityDataGridComponent_div_2_button_11_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 51);
+    i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_button_11_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onDeleteClick()); });
+    i0.ɵɵelement(1, "i", 52);
+    i0.ɵɵelementStart(2, "span", 46);
+    i0.ɵɵtext(3, "Delete");
+    i0.ɵɵelementEnd()();
+} }
+function EntityDataGridComponent_div_2_button_12_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 53);
+    i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_button_12_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onCompareClick()); });
+    i0.ɵɵelement(1, "i", 54);
+    i0.ɵɵelementStart(2, "span", 46);
+    i0.ɵɵtext(3, "Compare");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("disabled", !ctx_r2.HasMultipleSelection);
+} }
+function EntityDataGridComponent_div_2_button_13_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 55);
+    i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_button_13_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onMergeClick()); });
+    i0.ɵɵelement(1, "i", 56);
+    i0.ɵɵelementStart(2, "span", 46);
+    i0.ɵɵtext(3, "Merge");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("disabled", !ctx_r2.HasMultipleSelection);
+} }
+function EntityDataGridComponent_div_2_button_14_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 57);
+    i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_button_14_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onAddToListClick()); });
+    i0.ɵɵelement(1, "i", 58);
+    i0.ɵɵelementStart(2, "span", 46);
+    i0.ɵɵtext(3, "Add to List");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("disabled", !ctx_r2.HasSelection);
+} }
+function EntityDataGridComponent_div_2_button_15_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 59);
+    i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_button_15_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onDuplicateSearchClick()); });
+    i0.ɵɵelement(1, "i", 60);
+    i0.ɵɵelementStart(2, "span", 46);
+    i0.ɵɵtext(3, "Find Duplicates");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("disabled", !ctx_r2.HasMultipleSelection);
+} }
+function EntityDataGridComponent_div_2_button_16_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 61);
+    i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_button_16_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onCommunicationClick()); });
+    i0.ɵɵelement(1, "i", 62);
+    i0.ɵɵelementStart(2, "span", 46);
+    i0.ɵɵtext(3, "Send Message");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("disabled", !ctx_r2.HasSelection);
+} }
+function EntityDataGridComponent_div_2_button_17_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 63);
+    i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_button_17_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onAddClick()); });
+    i0.ɵɵelement(1, "i", 45);
+    i0.ɵɵelementEnd();
+} }
+function EntityDataGridComponent_div_2_button_18_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 64);
+    i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_button_18_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onRefreshClick()); });
+    i0.ɵɵelement(1, "i", 65);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("disabled", ctx_r2.loading);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-spin", ctx_r2.loading);
+} }
+function EntityDataGridComponent_div_2_button_19_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 66);
+    i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_button_19_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onDeleteClick()); });
+    i0.ɵɵelement(1, "i", 52);
+    i0.ɵɵelementEnd();
+} }
+function EntityDataGridComponent_div_2_button_20_Template(rf, ctx) { if (rf & 1) {
+    const _r19 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 67);
+    i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_button_20_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r19); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onExportClick()); });
+    i0.ɵɵelement(1, "i", 68);
+    i0.ɵɵelementEnd();
+} }
+function EntityDataGridComponent_div_2_button_21_Template(rf, ctx) { if (rf & 1) {
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 69);
+    i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_button_21_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onColumnChooserClick()); });
+    i0.ɵɵelement(1, "i", 70);
+    i0.ɵɵelementEnd();
+} }
+function EntityDataGridComponent_div_2_ng_container_22_button_1_i_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i");
+} if (rf & 2) {
+    const button_r22 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵclassMap(button_r22.icon);
+} }
+function EntityDataGridComponent_div_2_ng_container_22_button_1_span_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const button_r22 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(button_r22.text);
+} }
+function EntityDataGridComponent_div_2_ng_container_22_button_1_Template(rf, ctx) { if (rf & 1) {
+    const _r21 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 39);
+    i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_ng_container_22_button_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r21); const button_r22 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onToolbarButtonClick(button_r22)); });
+    i0.ɵɵtemplate(1, EntityDataGridComponent_div_2_ng_container_22_button_1_i_1_Template, 1, 2, "i", 40)(2, EntityDataGridComponent_div_2_ng_container_22_button_1_span_2_Template, 2, 1, "span", 41);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const button_r22 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassMap(button_r22.cssClass);
+    i0.ɵɵproperty("disabled", ctx_r2.isButtonDisabled(button_r22))("title", button_r22.tooltip || "");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", button_r22.icon);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", button_r22.text);
+} }
+function EntityDataGridComponent_div_2_ng_container_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵtemplate(1, EntityDataGridComponent_div_2_ng_container_22_button_1_Template, 3, 6, "button", 38);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const button_r22 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", button_r22.position === "right" && ctx_r2.isButtonVisible(button_r22));
+} }
+function EntityDataGridComponent_div_2_div_23_div_3_button_1_Template(rf, ctx) { if (rf & 1) {
+    const _r24 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 78);
+    i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_div_23_div_3_button_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r24); const ctx_r2 = i0.ɵɵnextContext(4); ctx_r2.onExportClick(); return i0.ɵɵresetView(ctx_r2.closeOverflowMenu()); });
+    i0.ɵɵelement(1, "i", 50);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Export to Excel");
+    i0.ɵɵelementEnd()();
+} }
+function EntityDataGridComponent_div_2_div_23_div_3_ng_container_2_button_4_Template(rf, ctx) { if (rf & 1) {
+    const _r25 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 82);
+    i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_div_23_div_3_ng_container_2_button_4_Template_button_click_0_listener() { const action_r26 = i0.ɵɵrestoreView(_r25).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); ctx_r2.onEntityActionClick(action_r26); return i0.ɵɵresetView(ctx_r2.closeOverflowMenu()); });
+    i0.ɵɵelement(1, "i");
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const action_r26 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(5);
+    i0.ɵɵproperty("disabled", !ctx_r2.isEntityActionEnabled(action_r26));
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(action_r26.icon || "fa-solid fa-bolt");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(action_r26.name);
+} }
+function EntityDataGridComponent_div_2_div_23_div_3_ng_container_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelement(1, "div", 79);
+    i0.ɵɵelementStart(2, "div", 80);
+    i0.ɵɵtext(3, "Actions");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(4, EntityDataGridComponent_div_2_div_23_div_3_ng_container_2_button_4_Template, 4, 4, "button", 81);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("ngForOf", ctx_r2.EntityActions);
+} }
+function EntityDataGridComponent_div_2_div_23_div_3_div_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 79);
+} }
+function EntityDataGridComponent_div_2_div_23_div_3_button_4_Template(rf, ctx) { if (rf & 1) {
+    const _r27 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 78);
+    i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_div_23_div_3_button_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r27); const ctx_r2 = i0.ɵɵnextContext(4); ctx_r2.onColumnChooserClick(); return i0.ɵɵresetView(ctx_r2.closeOverflowMenu()); });
+    i0.ɵɵelement(1, "i", 70);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Manage Columns");
+    i0.ɵɵelementEnd()();
+} }
+function EntityDataGridComponent_div_2_div_23_div_3_ng_container_5_button_2_Template(rf, ctx) { if (rf & 1) {
+    const _r28 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 78);
+    i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_div_23_div_3_ng_container_5_button_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r28); const ctx_r2 = i0.ɵɵnextContext(5); ctx_r2.onCommunicationClick(); return i0.ɵɵresetView(ctx_r2.closeOverflowMenu()); });
+    i0.ɵɵelement(1, "i", 62);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Send Message");
+    i0.ɵɵelementEnd()();
+} }
+function EntityDataGridComponent_div_2_div_23_div_3_ng_container_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelement(1, "div", 79);
+    i0.ɵɵtemplate(2, EntityDataGridComponent_div_2_div_23_div_3_ng_container_5_button_2_Template, 4, 0, "button", 76);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r2.showCommunicationInOverflow);
+} }
+function EntityDataGridComponent_div_2_div_23_div_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 75);
+    i0.ɵɵtemplate(1, EntityDataGridComponent_div_2_div_23_div_3_button_1_Template, 4, 0, "button", 76)(2, EntityDataGridComponent_div_2_div_23_div_3_ng_container_2_Template, 5, 1, "ng-container", 41)(3, EntityDataGridComponent_div_2_div_23_div_3_div_3_Template, 1, 0, "div", 77)(4, EntityDataGridComponent_div_2_div_23_div_3_button_4_Template, 4, 0, "button", 76)(5, EntityDataGridComponent_div_2_div_23_div_3_ng_container_5_Template, 3, 1, "ng-container", 41);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("@fadeIn", undefined);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.showExportInOverflow);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.ShowEntityActionButtons && ctx_r2.EntityActions.length > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.showColumnChooserInOverflow);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.showColumnChooserInOverflow);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.HasSelection && ctx_r2.hasSelectionDependentOverflowActions);
+} }
+function EntityDataGridComponent_div_2_div_23_Template(rf, ctx) { if (rf & 1) {
+    const _r23 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 71);
+    i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_div_23_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r23); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(1, "button", 72);
+    i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_div_23_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r23); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleOverflowMenu()); });
+    i0.ɵɵelement(2, "i", 73);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(3, EntityDataGridComponent_div_2_div_23_div_3_Template, 6, 6, "div", 74);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngIf", ctx_r2.showOverflowMenu);
+} }
+function EntityDataGridComponent_div_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 9)(1, "div", 10);
+    i0.ɵɵtemplate(2, EntityDataGridComponent_div_2_div_2_Template, 4, 3, "div", 11)(3, EntityDataGridComponent_div_2_ng_container_3_Template, 2, 1, "ng-container", 12);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 13);
+    i0.ɵɵtemplate(5, EntityDataGridComponent_div_2_span_5_Template, 2, 2, "span", 14)(6, EntityDataGridComponent_div_2_span_6_Template, 2, 1, "span", 15);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "div", 16);
+    i0.ɵɵtemplate(8, EntityDataGridComponent_div_2_button_8_Template, 4, 0, "button", 17)(9, EntityDataGridComponent_div_2_button_9_Template, 4, 3, "button", 18)(10, EntityDataGridComponent_div_2_button_10_Template, 4, 0, "button", 19)(11, EntityDataGridComponent_div_2_button_11_Template, 4, 0, "button", 20)(12, EntityDataGridComponent_div_2_button_12_Template, 4, 1, "button", 21)(13, EntityDataGridComponent_div_2_button_13_Template, 4, 1, "button", 22)(14, EntityDataGridComponent_div_2_button_14_Template, 4, 1, "button", 23)(15, EntityDataGridComponent_div_2_button_15_Template, 4, 1, "button", 24)(16, EntityDataGridComponent_div_2_button_16_Template, 4, 1, "button", 25)(17, EntityDataGridComponent_div_2_button_17_Template, 2, 0, "button", 26)(18, EntityDataGridComponent_div_2_button_18_Template, 2, 3, "button", 27)(19, EntityDataGridComponent_div_2_button_19_Template, 2, 0, "button", 28)(20, EntityDataGridComponent_div_2_button_20_Template, 2, 0, "button", 29)(21, EntityDataGridComponent_div_2_button_21_Template, 2, 0, "button", 30)(22, EntityDataGridComponent_div_2_ng_container_22_Template, 2, 1, "ng-container", 12)(23, EntityDataGridComponent_div_2_div_23_Template, 4, 1, "div", 31);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r2.ShowSearch);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r2.ToolbarConfig.customButtons);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r2.ToolbarConfig.showRowCount !== false);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.ToolbarConfig.showSelectionCount && ctx_r2.SelectedKeys.length > 0);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r2.ShowNewButton);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.ShowRefreshButton);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.ShowExportButton);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.ShowDeleteButton && ctx_r2.HasSelection);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.ShowCompareButton);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.ShowMergeButton);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.ShowAddToListButton);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.ShowDuplicateSearchButton);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.ShowCommunicationButton);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.ToolbarConfig.showAdd && ctx_r2.AllowAdd && !ctx_r2.ShowNewButton);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.ToolbarConfig.showRefresh !== false && !ctx_r2.ShowRefreshButton);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.ToolbarConfig.showDelete && ctx_r2.AllowDelete && ctx_r2.HasSelection && !ctx_r2.ShowDeleteButton);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.ToolbarConfig.showExport && !ctx_r2.ShowExportButton);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.ToolbarConfig.showColumnChooser && ctx_r2.AllowColumnToggle);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r2.ToolbarConfig.customButtons);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.hasOverflowMenuItems);
+} }
+function EntityDataGridComponent_div_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 83);
+    i0.ɵɵelement(1, "mj-loading", 84);
+    i0.ɵɵelementEnd();
+} }
+function EntityDataGridComponent_div_5_Template(rf, ctx) { if (rf & 1) {
+    const _r29 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 85);
+    i0.ɵɵelement(1, "i", 86);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "button", 87);
+    i0.ɵɵlistener("click", function EntityDataGridComponent_div_5_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r29); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.Refresh()); });
+    i0.ɵɵtext(5, "Retry");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r2.errorMessage);
+} }
+function EntityDataGridComponent_div_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 88);
+    i0.ɵɵelement(1, "i", 89);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "No data to display");
+    i0.ɵɵelementEnd()();
+} }
+function EntityDataGridComponent_ag_grid_angular_7_Template(rf, ctx) { if (rf & 1) {
+    const _r30 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ag-grid-angular", 90);
+    i0.ɵɵlistener("gridReady", function EntityDataGridComponent_ag_grid_angular_7_Template_ag_grid_angular_gridReady_0_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onGridReady($event)); })("rowClicked", function EntityDataGridComponent_ag_grid_angular_7_Template_ag_grid_angular_rowClicked_0_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onAgRowClicked($event)); })("rowDoubleClicked", function EntityDataGridComponent_ag_grid_angular_7_Template_ag_grid_angular_rowDoubleClicked_0_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onAgRowDoubleClicked($event)); })("sortChanged", function EntityDataGridComponent_ag_grid_angular_7_Template_ag_grid_angular_sortChanged_0_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onAgSortChanged($event)); })("selectionChanged", function EntityDataGridComponent_ag_grid_angular_7_Template_ag_grid_angular_selectionChanged_0_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onAgSelectionChanged($event)); })("columnResized", function EntityDataGridComponent_ag_grid_angular_7_Template_ag_grid_angular_columnResized_0_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onAgColumnResized($event)); })("columnMoved", function EntityDataGridComponent_ag_grid_angular_7_Template_ag_grid_angular_columnMoved_0_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onAgColumnMoved($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("theme", ctx_r2.agGridTheme)("columnDefs", ctx_r2.agColumnDefs)("rowData", ctx_r2.rowData)("defaultColDef", ctx_r2.defaultColDef)("rowSelection", ctx_r2.agRowSelection)("getRowId", ctx_r2.getRowId)("suppressCellFocus", true)("rowHeight", ctx_r2.RowHeight)("headerHeight", ctx_r2.ShowHeader ? undefined : 0);
+} }
+function EntityDataGridComponent_ag_grid_angular_8_Template(rf, ctx) { if (rf & 1) {
+    const _r31 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ag-grid-angular", 91);
+    i0.ɵɵlistener("gridReady", function EntityDataGridComponent_ag_grid_angular_8_Template_ag_grid_angular_gridReady_0_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onGridReady($event)); })("rowClicked", function EntityDataGridComponent_ag_grid_angular_8_Template_ag_grid_angular_rowClicked_0_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onAgRowClicked($event)); })("rowDoubleClicked", function EntityDataGridComponent_ag_grid_angular_8_Template_ag_grid_angular_rowDoubleClicked_0_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onAgRowDoubleClicked($event)); })("sortChanged", function EntityDataGridComponent_ag_grid_angular_8_Template_ag_grid_angular_sortChanged_0_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onAgSortChanged($event)); })("selectionChanged", function EntityDataGridComponent_ag_grid_angular_8_Template_ag_grid_angular_selectionChanged_0_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onAgSelectionChanged($event)); })("columnResized", function EntityDataGridComponent_ag_grid_angular_8_Template_ag_grid_angular_columnResized_0_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onAgColumnResized($event)); })("columnMoved", function EntityDataGridComponent_ag_grid_angular_8_Template_ag_grid_angular_columnMoved_0_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onAgColumnMoved($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("theme", ctx_r2.agGridTheme)("columnDefs", ctx_r2.agColumnDefs)("defaultColDef", ctx_r2.defaultColDef)("rowSelection", ctx_r2.agRowSelection)("getRowId", ctx_r2.getRowId)("suppressCellFocus", true)("rowHeight", ctx_r2.RowHeight)("headerHeight", ctx_r2.ShowHeader ? undefined : 0)("rowModelType", "infinite")("cacheBlockSize", ctx_r2.CacheBlockSize)("maxBlocksInCache", ctx_r2.MaxBlocksInCache)("infiniteInitialRowCount", 1)("cacheOverflowSize", 2);
+} }
+// Register AG Grid modules (required for v34+)
+ModuleRegistry.registerModules([AllCommunityModule]);
+/**
+ * A modern, flexible data grid component for displaying and managing entity data.
+ * Built on AG Grid Community edition with a rich Before/After cancelable event system.
+ *
+ * Features:
+ * - RunView-based data loading with automatic refresh
+ * - AG Grid for high-performance rendering
+ * - Rich event system with Before/After cancelable patterns
+ * - Column configuration with type-aware formatters
+ * - Row selection (single, multiple, checkbox modes)
+ * - Inline cell and row editing
+ * - Column reordering, resizing, and visibility toggle
+ * - State persistence to User Settings
+ * - Compatible with ViewGridStateConfig from User Views
+ *
+ * @example
+ * ```html
+ * <mj-entity-data-grid
+ *   [entityName]="'Contacts'"
+ *   [showToolbar]="true"
+ *   [allowSorting]="true"
+ *   [selectionMode]="'multiple'"
+ *   (afterRowDoubleClick)="onRowDoubleClick($event)">
+ * </mj-entity-data-grid>
+ * ```
+ */
+export class EntityDataGridComponent {
+    cdr;
+    elementRef;
+    exportService;
+    // ========================================
+    // Data Source Inputs (RunViewParams-based)
+    // ========================================
+    _params = null;
+    /**
+     * RunViewParams for data loading - the primary way to specify data source.
+     * Supports stored views (ViewID, ViewName, ViewEntity) and dynamic views (EntityName + filters).
+     * Mutually exclusive with the legacy entityName/extraFilter inputs.
+     * When Params is provided, it takes precedence over legacy inputs.
+     */
+    set Params(value) {
+        const previousValue = this._params;
+        this._params = value;
+        // Use deep comparison to avoid triggering changes when the same params are passed
+        // as a new object reference (common with template bindings like BuildRelationshipViewParamsByEntityName)
+        if (!RunViewParams.Equals(value, previousValue)) {
+            this.onParamsChanged();
+        }
+    }
+    get Params() {
+        return this._params;
+    }
+    _allowLoad = true;
+    /**
+     * Controls whether data loading is allowed.
+     * Set to false to defer loading until ready (useful for complex forms where params may change multiple times).
+     * When set to true and Params is provided, triggers a data load.
+     */
+    set AllowLoad(value) {
+        const previousValue = this._allowLoad;
+        this._allowLoad = value;
+        if (value && !previousValue && this._params) {
+            // AllowLoad was just enabled and we have params - load now
+            this.loadData(false);
+        }
+    }
+    get AllowLoad() {
+        return this._allowLoad;
+    }
+    _autoRefreshOnParamsChange = true;
+    /**
+     * When true, automatically refreshes data when Params changes.
+     * When false, you must call Refresh() manually after changing Params.
+     */
+    set AutoRefreshOnParamsChange(value) {
+        this._autoRefreshOnParamsChange = value;
+    }
+    get AutoRefreshOnParamsChange() {
+        return this._autoRefreshOnParamsChange;
+    }
+    // ========================================
+    // Pagination Inputs
+    // ========================================
+    _paginationMode = 'client';
+    /**
+     * Pagination mode for the grid:
+     * - 'client': All data loaded upfront (default, legacy behavior)
+     * - 'infinite': Server-side pagination with infinite scroll (recommended for large datasets)
+     */
+    set PaginationMode(value) {
+        this._paginationMode = value;
+    }
+    get PaginationMode() {
+        return this._paginationMode;
+    }
+    _pageSize = 100;
+    /**
+     * Number of rows to fetch per page when using infinite pagination mode.
+     * Default is 100 rows per page.
+     */
+    set PageSize(value) {
+        this._pageSize = value;
+    }
+    get PageSize() {
+        return this._pageSize;
+    }
+    _cacheBlockSize = 100;
+    /**
+     * Size of each cache block in infinite scroll mode.
+     * Should match or be a multiple of PageSize for optimal performance.
+     */
+    set CacheBlockSize(value) {
+        this._cacheBlockSize = value;
+    }
+    get CacheBlockSize() {
+        return this._cacheBlockSize;
+    }
+    _maxBlocksInCache = 10;
+    /**
+     * Maximum number of blocks to keep in cache.
+     * When exceeded, oldest blocks are purged.
+     */
+    set MaxBlocksInCache(value) {
+        this._maxBlocksInCache = value;
+    }
+    get MaxBlocksInCache() {
+        return this._maxBlocksInCache;
+    }
+    // ========================================
+    // External Data Input
+    // ========================================
+    _data = [];
+    /**
+     * Pre-loaded data (bypass RunView, use provided data).
+     * When provided, the grid displays this data instead of loading via RunView.
+     * Parent component is responsible for data loading and passing results here.
+     */
+    set Data(value) {
+        const hadData = this._data.length > 0;
+        this._data = value || [];
+        this._useExternalData = this._data.length > 0;
+        if (this._useExternalData || hadData) {
+            this.processData();
+            // Reapply sort state to grid after data changes to maintain visual indicators
+            // Use microtask to ensure AG Grid has processed the new row data first
+            if (this.gridApi && this._sortState.length > 0) {
+                Promise.resolve().then(() => {
+                    this.applySortStateToGrid();
+                });
+            }
+        }
+    }
+    get Data() {
+        return this._data;
+    }
+    // ========================================
+    // Column Configuration Inputs
+    // ========================================
+    _columns = [];
+    /**
+     * Column definitions - if not provided, auto-generates from entity metadata
+     */
+    set Columns(value) {
+        this._columns = value || [];
+        if (this._columns.length > 0) {
+            this.initializeColumnStates();
+            this.buildAgColumnDefs();
+        }
+    }
+    get Columns() {
+        return this._columns;
+    }
+    _gridState = null;
+    /**
+     * Grid state from a User View - controls columns, widths, order, sort
+     * When provided, this takes precedence over auto-generated columns
+     */
+    set GridState(value) {
+        if (!!value) {
+            const previousValue = this._gridState;
+            this._gridState = value;
+            if (value !== previousValue) {
+                this.onGridStateChanged();
+            }
+        }
+    }
+    get GridState() {
+        return this._gridState;
+    }
+    _allowColumnReorder = true;
+    set AllowColumnReorder(value) {
+        this._allowColumnReorder = value;
+    }
+    get AllowColumnReorder() {
+        return this._allowColumnReorder;
+    }
+    _allowColumnResize = true;
+    set AllowColumnResize(value) {
+        this._allowColumnResize = value;
+    }
+    get AllowColumnResize() {
+        return this._allowColumnResize;
+    }
+    _allowColumnToggle = true;
+    set AllowColumnToggle(value) {
+        this._allowColumnToggle = value;
+    }
+    get AllowColumnToggle() {
+        return this._allowColumnToggle;
+    }
+    _showHeader = true;
+    set ShowHeader(value) {
+        this._showHeader = value;
+    }
+    get ShowHeader() {
+        return this._showHeader;
+    }
+    // ========================================
+    // Sorting & Filtering Inputs
+    // ========================================
+    _allowSorting = true;
+    set AllowSorting(value) {
+        this._allowSorting = value;
+    }
+    get AllowSorting() {
+        return this._allowSorting;
+    }
+    _allowMultiSort = true;
+    set AllowMultiSort(value) {
+        this._allowMultiSort = value;
+    }
+    get AllowMultiSort() {
+        return this._allowMultiSort;
+    }
+    _serverSideSorting = true;
+    /**
+     * Whether sorting is handled server-side
+     * When true, sort changes trigger a new data load
+     */
+    set ServerSideSorting(value) {
+        this._serverSideSorting = value;
+    }
+    get ServerSideSorting() {
+        return this._serverSideSorting;
+    }
+    _allowColumnFilters = false;
+    set AllowColumnFilters(value) {
+        this._allowColumnFilters = value;
+    }
+    get AllowColumnFilters() {
+        return this._allowColumnFilters;
+    }
+    _showSearch = true;
+    set ShowSearch(value) {
+        this._showSearch = value;
+    }
+    get ShowSearch() {
+        return this._showSearch;
+    }
+    // ========================================
+    // Selection Inputs
+    // ========================================
+    _selectionMode = 'single';
+    set SelectionMode(value) {
+        this._selectionMode = value;
+        this.updateAgRowSelection();
+        if (value === 'none') {
+            this.ClearSelection();
+        }
+    }
+    get SelectionMode() {
+        return this._selectionMode;
+    }
+    _selectedKeys = [];
+    set SelectedKeys(value) {
+        this._selectedKeys = value || [];
+        this.updateRowSelectionState();
+    }
+    get SelectedKeys() {
+        return this._selectedKeys;
+    }
+    _keyField = 'ID';
+    set KeyField(value) {
+        this._keyField = value || 'ID';
+    }
+    get KeyField() {
+        return this._keyField;
+    }
+    // ========================================
+    // Editing Inputs
+    // ========================================
+    _editMode = 'none';
+    set EditMode(value) {
+        this._editMode = value;
+    }
+    get EditMode() {
+        return this._editMode;
+    }
+    _allowAdd = false;
+    set AllowAdd(value) {
+        this._allowAdd = value;
+    }
+    get AllowAdd() {
+        return this._allowAdd;
+    }
+    _allowDelete = false;
+    set AllowDelete(value) {
+        this._allowDelete = value;
+    }
+    get AllowDelete() {
+        return this._allowDelete;
+    }
+    // ========================================
+    // Display Inputs
+    // ========================================
+    _height = 'auto';
+    set Height(value) {
+        this._height = value;
+    }
+    get Height() {
+        return this._height;
+    }
+    _rowHeight = 40;
+    set RowHeight(value) {
+        this._rowHeight = value;
+    }
+    get RowHeight() {
+        return this._rowHeight;
+    }
+    _virtualScroll = true;
+    set VirtualScroll(value) {
+        this._virtualScroll = value;
+    }
+    get VirtualScroll() {
+        return this._virtualScroll;
+    }
+    _showRowNumbers = false;
+    set ShowRowNumbers(value) {
+        this._showRowNumbers = value;
+        this.buildAgColumnDefs();
+    }
+    get ShowRowNumbers() {
+        return this._showRowNumbers;
+    }
+    _striped = true;
+    set Striped(value) {
+        this._striped = value;
+    }
+    get Striped() {
+        return this._striped;
+    }
+    _gridLines = 'horizontal';
+    set GridLines(value) {
+        this._gridLines = value;
+    }
+    get GridLines() {
+        return this._gridLines;
+    }
+    // ========================================
+    // Visual Customization Inputs
+    // ========================================
+    _visualConfig = {};
+    /**
+     * Visual configuration for the grid appearance.
+     * Allows customization of header styles, row colors, cell formatting, and more.
+     * All properties are optional - unset properties use attractive defaults.
+     */
+    set VisualConfig(value) {
+        this._visualConfig = value || {};
+        this.applyVisualConfig();
+    }
+    get VisualConfig() {
+        return this._visualConfig;
+    }
+    /**
+     * Get the effective visual config (user config merged with defaults)
+     */
+    get effectiveVisualConfig() {
+        return { ...DEFAULT_VISUAL_CONFIG, ...this._visualConfig };
+    }
+    // ========================================
+    // Toolbar Inputs
+    // ========================================
+    _showToolbar = true;
+    set ShowToolbar(value) {
+        this._showToolbar = value;
+    }
+    get ShowToolbar() {
+        return this._showToolbar;
+    }
+    _toolbarConfig = {};
+    set ToolbarConfig(value) {
+        this._toolbarConfig = value || {};
+    }
+    get ToolbarConfig() {
+        return this._toolbarConfig;
+    }
+    // ========================================
+    // State Inputs
+    // ========================================
+    _stateKey = '';
+    set StateKey(value) {
+        this._stateKey = value || '';
+        if (this._stateKey) {
+            this.loadPersistedState();
+        }
+    }
+    get StateKey() {
+        return this._stateKey;
+    }
+    _autoPersistState = true;
+    /**
+     * When true and using a stored view (ViewID/ViewName/ViewEntity in Params),
+     * automatically persists grid state changes (column widths, order, sort) to the UserView entity.
+     * Only saves if the user has edit permission on the view.
+     * For dynamic views, only emits the gridStateChanged event.
+     */
+    set AutoPersistState(value) {
+        this._autoPersistState = value;
+    }
+    get AutoPersistState() {
+        return this._autoPersistState;
+    }
+    _statePersistDebounce = 5000;
+    /**
+     * Debounce time in milliseconds before persisting state changes to the server.
+     * Default is 5000ms (5 seconds) to avoid excessive server calls during rapid column adjustments.
+     */
+    set StatePersistDebounce(value) {
+        this._statePersistDebounce = value;
+        // Re-setup the debounce subscription with new timing
+        this.setupStatePersistDebounce();
+    }
+    get StatePersistDebounce() {
+        return this._statePersistDebounce;
+    }
+    _refreshDebounce = 300;
+    set RefreshDebounce(value) {
+        this._refreshDebounce = value;
+    }
+    get RefreshDebounce() {
+        return this._refreshDebounce;
+    }
+    // ========================================
+    // Highlighting Input
+    // ========================================
+    _filterText = '';
+    /**
+     * Text to highlight in grid cells.
+     * Supports SQL-style % wildcards for pattern matching.
+     */
+    set FilterText(value) {
+        const previousValue = this._filterText;
+        this._filterText = value || '';
+        if (value !== previousValue) {
+            this.onFilterTextChanged();
+        }
+    }
+    get FilterText() {
+        return this._filterText;
+    }
+    // ========================================
+    // Predefined Toolbar Button Inputs
+    // ========================================
+    _showNewButton = true;
+    /**
+     * Show the "New" button in toolbar (creates new record)
+     */
+    set ShowNewButton(value) {
+        this._showNewButton = value;
+    }
+    get ShowNewButton() {
+        return this._showNewButton;
+    }
+    _showRefreshButton = true;
+    /**
+     * Show the "Refresh" button in toolbar
+     */
+    set ShowRefreshButton(value) {
+        this._showRefreshButton = value;
+    }
+    get ShowRefreshButton() {
+        return this._showRefreshButton;
+    }
+    _showExportButton = true;
+    /**
+     * Show the "Export to Excel" button in toolbar
+     */
+    set ShowExportButton(value) {
+        this._showExportButton = value;
+    }
+    get ShowExportButton() {
+        return this._showExportButton;
+    }
+    _showDeleteButton = false;
+    /**
+     * Show the "Delete" button in toolbar (deletes selected rows)
+     */
+    set ShowDeleteButton(value) {
+        this._showDeleteButton = value;
+    }
+    get ShowDeleteButton() {
+        return this._showDeleteButton;
+    }
+    _showCompareButton = false;
+    /**
+     * Show the "Compare" button in toolbar (compare selected records)
+     */
+    set ShowCompareButton(value) {
+        this._showCompareButton = value;
+    }
+    get ShowCompareButton() {
+        return this._showCompareButton;
+    }
+    _showMergeButton = false;
+    /**
+     * Show the "Merge" button in toolbar (merge selected records)
+     */
+    set ShowMergeButton(value) {
+        this._showMergeButton = value;
+    }
+    get ShowMergeButton() {
+        return this._showMergeButton;
+    }
+    _showAddToListButton = false;
+    /**
+     * Show the "Add to List" button in toolbar
+     */
+    set ShowAddToListButton(value) {
+        this._showAddToListButton = value;
+    }
+    get ShowAddToListButton() {
+        return this._showAddToListButton;
+    }
+    _showDuplicateSearchButton = false;
+    /**
+     * Show the "Search for Duplicates" button in toolbar
+     */
+    set ShowDuplicateSearchButton(value) {
+        this._showDuplicateSearchButton = value;
+    }
+    get ShowDuplicateSearchButton() {
+        return this._showDuplicateSearchButton;
+    }
+    _showCommunicationButton = false;
+    /**
+     * Show the "Send Message" button in toolbar (if entity supports communication)
+     */
+    set ShowCommunicationButton(value) {
+        this._showCommunicationButton = value;
+    }
+    get ShowCommunicationButton() {
+        return this._showCommunicationButton;
+    }
+    // ========================================
+    // Navigation Inputs
+    // ========================================
+    _autoNavigate = true;
+    /**
+     * When true, clicking or double-clicking a row will emit a navigation request.
+     * The parent component can handle the navigationRequested event to open the record.
+     */
+    set AutoNavigate(value) {
+        this._autoNavigate = value;
+    }
+    get AutoNavigate() {
+        return this._autoNavigate;
+    }
+    _navigateOnDoubleClick = true;
+    /**
+     * When true, navigation is triggered on double-click only.
+     * When false, navigation is triggered on single click.
+     * Only applies when AutoNavigate is true.
+     */
+    set NavigateOnDoubleClick(value) {
+        this._navigateOnDoubleClick = value;
+    }
+    get NavigateOnDoubleClick() {
+        return this._navigateOnDoubleClick;
+    }
+    _createRecordMode = 'Tab';
+    /**
+     * How to open new records when the "New" button is clicked:
+     * - 'Tab': Emit event to open in a new tab (default)
+     * - 'Dialog': Emit event to open in a dialog
+     */
+    set CreateRecordMode(value) {
+        this._createRecordMode = value;
+    }
+    get CreateRecordMode() {
+        return this._createRecordMode;
+    }
+    _newRecordValues = {};
+    /**
+     * Default values to set on new records.
+     * These values are passed with the newRecordDialogRequested event.
+     */
+    set NewRecordValues(value) {
+        this._newRecordValues = value || {};
+    }
+    get NewRecordValues() {
+        return this._newRecordValues;
+    }
+    // ========================================
+    // Entity Actions Inputs
+    // ========================================
+    _showEntityActionButtons = false;
+    /**
+     * When true, displays entity action buttons in the toolbar overflow menu.
+     * Entity actions are loaded dynamically based on the current entity.
+     * The entityActionsLoaded event is emitted when actions are ready.
+     */
+    set ShowEntityActionButtons(value) {
+        this._showEntityActionButtons = value;
+        if (value && this._entityInfo) {
+            this.LoadEntityActionsRequested.emit({ entityInfo: this._entityInfo });
+        }
+    }
+    get ShowEntityActionButtons() {
+        return this._showEntityActionButtons;
+    }
+    _entityActions = [];
+    /**
+     * Array of entity actions to display in the toolbar.
+     * Set this after receiving the entityActionsLoaded event.
+     */
+    set EntityActions(value) {
+        this._entityActions = value || [];
+    }
+    get EntityActions() {
+        return this._entityActions;
+    }
+    // ========================================
+    // Event Outputs
+    // ========================================
+    // Row Selection
+    BeforeRowSelect = new EventEmitter();
+    AfterRowSelect = new EventEmitter();
+    BeforeRowDeselect = new EventEmitter();
+    AfterRowDeselect = new EventEmitter();
+    SelectionChange = new EventEmitter();
+    // Row Click
+    BeforeRowClick = new EventEmitter();
+    AfterRowClick = new EventEmitter();
+    BeforeRowDoubleClick = new EventEmitter();
+    AfterRowDoubleClick = new EventEmitter();
+    // Editing
+    BeforeCellEdit = new EventEmitter();
+    AfterCellEditBegin = new EventEmitter();
+    BeforeCellEditCommit = new EventEmitter();
+    AfterCellEditCommit = new EventEmitter();
+    BeforeCellEditCancel = new EventEmitter();
+    AfterCellEditCancel = new EventEmitter();
+    BeforeRowSave = new EventEmitter();
+    AfterRowSave = new EventEmitter();
+    BeforeRowDelete = new EventEmitter();
+    AfterRowDelete = new EventEmitter();
+    // Data Loading
+    BeforeDataLoad = new EventEmitter();
+    AfterDataLoad = new EventEmitter();
+    BeforeDataRefresh = new EventEmitter();
+    AfterDataRefresh = new EventEmitter();
+    // Sorting
+    BeforeSort = new EventEmitter();
+    AfterSort = new EventEmitter();
+    // Column Management
+    BeforeColumnReorder = new EventEmitter();
+    AfterColumnReorder = new EventEmitter();
+    BeforeColumnResize = new EventEmitter();
+    AfterColumnResize = new EventEmitter();
+    BeforeColumnVisibilityChange = new EventEmitter();
+    AfterColumnVisibilityChange = new EventEmitter();
+    // Grid State
+    GridStateChanged = new EventEmitter();
+    // Toolbar Actions (legacy names)
+    AddRequested = new EventEmitter();
+    DeleteRequested = new EventEmitter();
+    ExportRequested = new EventEmitter();
+    // Predefined Toolbar Button Events
+    NewButtonClick = new EventEmitter();
+    RefreshButtonClick = new EventEmitter();
+    ExportButtonClick = new EventEmitter();
+    DeleteButtonClick = new EventEmitter();
+    CompareButtonClick = new EventEmitter();
+    MergeButtonClick = new EventEmitter();
+    AddToListButtonClick = new EventEmitter();
+    DuplicateSearchButtonClick = new EventEmitter();
+    CommunicationButtonClick = new EventEmitter();
+    // Navigation Events
+    /**
+     * Emitted when a row is clicked/double-clicked and AutoNavigate is enabled.
+     * Parent components should handle this to open the entity record.
+     */
+    NavigationRequested = new EventEmitter();
+    /**
+     * Emitted when the "New" button is clicked and CreateRecordMode is 'Dialog'.
+     * Parent components should handle this to show a new record dialog.
+     */
+    NewRecordDialogRequested = new EventEmitter();
+    /**
+     * Emitted when the "New" button is clicked and CreateRecordMode is 'Tab'.
+     * Parent components should handle this to open a new record in a tab.
+     */
+    NewRecordTabRequested = new EventEmitter();
+    // Dialog Request Events (for Explorer-specific dialogs)
+    /**
+     * Emitted when Compare Records functionality is requested.
+     * Parent components should handle this to show the compare dialog.
+     */
+    CompareRecordsRequested = new EventEmitter();
+    /**
+     * Emitted when Merge Records functionality is requested.
+     * Parent components should handle this to show the merge dialog.
+     */
+    MergeRecordsRequested = new EventEmitter();
+    /**
+     * Emitted when Communication/Send Message functionality is requested.
+     * Parent components should handle this to show the communication dialog.
+     */
+    CommunicationRequested = new EventEmitter();
+    /**
+     * Emitted when duplicate search functionality is requested.
+     * Parent components should handle this to show the duplicate search results.
+     */
+    DuplicateSearchRequested = new EventEmitter();
+    /**
+     * Emitted when the Add to List button is clicked.
+     * Parent components should handle this to show the list management dialog.
+     */
+    AddToListRequested = new EventEmitter();
+    // Entity Action Events
+    /**
+     * Emitted when entity actions need to be loaded.
+     * Parent components should load actions and set the EntityActions input.
+     */
+    LoadEntityActionsRequested = new EventEmitter();
+    /**
+     * Emitted when an entity action is selected for execution.
+     * Parent components should handle the action execution.
+     */
+    EntityActionRequested = new EventEmitter();
+    // ========================================
+    // View Children
+    // ========================================
+    gridContainer;
+    // ========================================
+    // AG Grid Properties
+    // ========================================
+    /** AG Grid column definitions */
+    agColumnDefs = [];
+    /** AG Grid row data */
+    rowData = [];
+    /** AG Grid API reference */
+    gridApi = null;
+    /** AG Grid theme (v34+) with custom selection colors */
+    agGridTheme = themeAlpine.withParams({
+        selectedRowBackgroundColor: '#fff3cd', // More visible mellow yellow selection
+        rowHoverColor: '#f5f5f5'
+    });
+    /** AG Grid row selection configuration */
+    agRowSelection = { mode: 'singleRow' };
+    /** Default column settings */
+    defaultColDef = {
+        sortable: true,
+        filter: false,
+        resizable: true,
+        minWidth: 80
+    };
+    /** Get row ID function for AG Grid */
+    getRowId = (params) => params.data['__pk'];
+    /** Suppress sort changed events during programmatic updates */
+    suppressSortEvents = false;
+    /** AG Grid options for infinite scroll mode */
+    gridOptions = {};
+    /** Datasource for infinite scroll mode */
+    infiniteDatasource = null;
+    // ========================================
+    // Internal State
+    // ========================================
+    _useExternalData = false;
+    _allData = [];
+    _rowDataMap = new Map();
+    _entityInfo = null;
+    _viewEntity = null;
+    _columnStates = [];
+    _sortState = [];
+    _filterState = [];
+    _editingRowKey = null;
+    _editingField = null;
+    _pendingChanges = [];
+    // ========================================
+    // Public Read-Only Properties
+    // ========================================
+    /**
+     * The loaded view entity if using a stored view (ViewID, ViewName, or ViewEntity in Params).
+     * Null for dynamic views or when using legacy entityName input.
+     */
+    get ViewEntity() {
+        return this._viewEntity;
+    }
+    /**
+     * The entity metadata for the current data source.
+     * Available after Params is set and data is loaded.
+     */
+    get EntityInfo() {
+        return this._entityInfo;
+    }
+    /**
+     * True if using a dynamic view (EntityName only) rather than a stored view.
+     * False if using ViewID, ViewName, ViewEntity in Params, or viewEntity input.
+     */
+    get IsDynamicView() {
+        // If we have a viewEntity (from either Params or input), it's a stored view
+        if (this._viewEntity)
+            return false;
+        // Check Params for stored view indicators
+        if (this._params) {
+            return !this._params.ViewID && !this._params.ViewName && !this._params.ViewEntity;
+        }
+        // Legacy mode without viewEntity is considered dynamic
+        return true;
+    }
+    // Loading state
+    loading = false;
+    errorMessage = '';
+    totalRowCount = 0;
+    _loadDataPromise = null;
+    // Cleanup
+    destroy$ = new Subject();
+    refreshSubject = new Subject();
+    statesSaveSubject = new Subject();
+    statePersistSubject = new Subject();
+    userDefaultsPersistSubject = new Subject();
+    // Persist state tracking
+    pendingStateToSave = null;
+    isSavingState = false;
+    /**
+     * Pending state waiting to be persisted (for flushing on destroy).
+     * Tracks state for both saved views and user defaults separately.
+     */
+    _pendingViewStateToPersist = null;
+    _pendingUserDefaultsToPersist = null;
+    /**
+     * Flag to suppress state persistence during view transitions.
+     * When true, emitGridStateChanged will not trigger persistence.
+     * This prevents the old view's column state from being saved to the new view.
+     */
+    _suppressPersist = false;
+    /**
+     * Dirty flag to track if grid state has actually been modified by user actions.
+     * Only set to true when: column resize, column move, or sort change.
+     * Reset to false: when view loads, after successful persistence.
+     * This prevents emitting gridStateChanged events when no real change occurred.
+     */
+    _isGridStateDirty = false;
+    /**
+     * Whether the current user can edit the view.
+     * For dynamic views, always true (persists to user settings).
+     * For saved views, depends on view ownership and permissions.
+     */
+    get canEditCurrentView() {
+        if (this.IsDynamicView) {
+            return true; // Dynamic views persist to user settings
+        }
+        return this._viewEntity?.UserCanEdit ?? false;
+    }
+    // Overflow menu state
+    showOverflowMenu = false;
+    // Export dialog state
+    showExportDialog = false;
+    exportDialogConfig = null;
+    constructor(cdr, elementRef, exportService) {
+        this.cdr = cdr;
+        this.elementRef = elementRef;
+        this.exportService = exportService;
+    }
+    // ========================================
+    // Lifecycle Hooks
+    // ========================================
+    async ngOnInit() {
+        this.setupRefreshDebounce();
+        this.setupStatePersistDebounce();
+        this.setupUserDefaultsPersistDebounce();
+        this.updateAgRowSelection();
+    }
+    ngOnDestroy() {
+        // Flush any pending state persistence immediately before destroying
+        this.EnsurePendingChangesSaved();
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    /**
+     * Immediately persists any pending state changes without waiting for debounce.
+     * Called on component destroy to ensure changes aren't lost.
+     * Also exposed publicly so parent components can flush before view/entity switches.
+     */
+    EnsurePendingChangesSaved() {
+        // Flush pending view state
+        if (this._pendingViewStateToPersist && this._viewEntity) {
+            this.persistGridStateToView(this._pendingViewStateToPersist);
+            this._pendingViewStateToPersist = null;
+        }
+        // Flush pending user defaults
+        if (this._pendingUserDefaultsToPersist && this._entityInfo) {
+            this.persistUserDefaultGridState(this._pendingUserDefaultsToPersist);
+            this._pendingUserDefaultsToPersist = null;
+        }
+    }
+    // ========================================
+    // Setup Methods
+    // ========================================
+    setupRefreshDebounce() {
+        this.refreshSubject.pipe(debounceTime(this._refreshDebounce), takeUntil(this.destroy$)).subscribe(() => {
+            this.loadData(true);
+        });
+    }
+    setupStatePersistDebounce() {
+        this.statePersistSubject.pipe(debounceTime(this._statePersistDebounce), takeUntil(this.destroy$)).subscribe((state) => {
+            this.persistGridStateToView(state);
+        });
+    }
+    setupUserDefaultsPersistDebounce() {
+        this.userDefaultsPersistSubject.pipe(debounceTime(this._statePersistDebounce), takeUntil(this.destroy$)).subscribe((state) => {
+            this.persistUserDefaultGridState(state);
+        });
+    }
+    /**
+     * Called when Params input changes. Handles loading view entity metadata
+     * and triggering data load if allowed.
+     */
+    async onParamsChanged() {
+        if (!this._params) {
+            // Params cleared - reset view entity
+            this._viewEntity = null;
+            return;
+        }
+        // Suppress persistence during view transition to prevent old view's state
+        // from being saved to the new view's storage
+        this._suppressPersist = true;
+        // Reset dirty flag - no changes have been made to the new view yet
+        this._isGridStateDirty = false;
+        // Reset internal grid state when params change - this ensures we don't
+        // carry over column/sort settings from a previous view when switching views
+        this._gridState = null;
+        this._sortState = [];
+        try {
+            // If using a stored view, load the view entity first
+            if (this._params.ViewEntity) {
+                // ViewEntity was provided directly
+                this._viewEntity = this._params.ViewEntity;
+                this._entityInfo = this._viewEntity.ViewEntityInfo;
+                this.applyViewEntitySettings();
+            }
+            else if (this._params.ViewID) {
+                // Load view entity by ID from engine
+                const cachedView = this.getViewFromEngine(this._params.ViewID);
+                if (cachedView) {
+                    this._viewEntity = cachedView;
+                }
+                else {
+                    // View not in cache - use ViewInfo (which also uses engine)
+                    this._viewEntity = await ViewInfo.GetViewEntity(this._params.ViewID);
+                }
+                this._entityInfo = this._viewEntity.ViewEntityInfo;
+                this.applyViewEntitySettings();
+            }
+            else if (this._params.ViewName) {
+                // Load view entity by name from engine
+                const cachedView = this.getViewFromEngineByName(this._params.ViewName);
+                if (cachedView) {
+                    this._viewEntity = cachedView;
+                }
+                else {
+                    // View not in cache - use ViewInfo (which also uses engine)
+                    this._viewEntity = await ViewInfo.GetViewEntityByName(this._params.ViewName);
+                }
+                this._entityInfo = this._viewEntity.ViewEntityInfo;
+                this.applyViewEntitySettings();
+            }
+            else if (this._params.EntityName) {
+                // Dynamic view - just get entity metadata
+                this._viewEntity = null;
+                const md = new Metadata();
+                this._entityInfo = md.Entities.find(e => e.Name === this._params.EntityName) || null;
+                // Reset columns to force regeneration from metadata when switching to dynamic view
+                // This ensures we don't carry over column config from a previous saved view
+                this._columns = [];
+                // For dynamic views, try to load user's saved defaults
+                if (this._entityInfo && this._autoPersistState) {
+                    this.loadUserDefaultGridState(this._entityInfo.Name);
+                }
+            }
+            // Generate columns if not already set
+            if (this._columns.length === 0 && this._entityInfo) {
+                this.generateColumnsFromMetadata();
+            }
+            // Rebuild AG Grid column definitions to reflect the new view's settings
+            this.buildAgColumnDefs();
+            // Load data if auto-refresh is enabled
+            if (this._autoRefreshOnParamsChange) {
+                await this.loadData(false);
+            }
+        }
+        catch (error) {
+            this.errorMessage = error instanceof Error ? error.message : 'Failed to load view';
+            this.cdr.detectChanges();
+        }
+        finally {
+            // Re-enable persistence now that the new view is fully loaded
+            this._suppressPersist = false;
+        }
+    }
+    /**
+     * Gets a view from the UserViewEngine cache by ID.
+     * Returns undefined if not found or engine not initialized.
+     */
+    getViewFromEngine(viewId) {
+        try {
+            return UserViewEngine.Instance.GetViewById(viewId);
+        }
+        catch {
+            // Engine may not be initialized yet
+            return undefined;
+        }
+    }
+    /**
+     * Gets a view from the UserViewEngine cache by name.
+     * Returns undefined if not found or engine not initialized.
+     */
+    getViewFromEngineByName(viewName) {
+        try {
+            return UserViewEngine.Instance.GetViewByName(viewName);
+        }
+        catch {
+            // Engine may not be initialized yet
+            return undefined;
+        }
+    }
+    /**
+     * Loads user's saved grid state defaults for a dynamic view.
+     * Uses UserInfoEngine to retrieve settings stored with key format: "default-view-setting/{entityName}"
+     */
+    loadUserDefaultGridState(entityName) {
+        try {
+            const settingKey = `default-view-setting/${entityName}`;
+            const savedState = UserInfoEngine.Instance.GetSetting(settingKey);
+            if (savedState) {
+                const gridState = JSON.parse(savedState);
+                // Only apply if not already set via props (props take precedence)
+                if (!this._gridState && gridState.columnSettings?.length) {
+                    this._gridState = {
+                        columnSettings: gridState.columnSettings,
+                        sortSettings: gridState.sortSettings || []
+                    };
+                }
+                // Apply sort state if not already set
+                if (this._sortState.length === 0 && gridState.sortSettings?.length) {
+                    this._sortState = gridState.sortSettings.map((s, index) => ({
+                        field: s.field,
+                        direction: s.dir,
+                        index
+                    }));
+                }
+            }
+        }
+        catch (error) {
+            console.error('[entity-data-grid] Failed to load user default grid state:', error);
+        }
+    }
+    /**
+     * Persists the current grid state as user defaults for a dynamic view.
+     * Uses UserInfoEngine to store settings with key format: "default-view-setting/{entityName}"
+     */
+    async persistUserDefaultGridState(state) {
+        if (!this._entityInfo) {
+            this._pendingUserDefaultsToPersist = null;
+            return;
+        }
+        try {
+            const settingKey = `default-view-setting/${this._entityInfo.Name}`;
+            const gridStateJson = {
+                columnSettings: state.columnSettings,
+                sortSettings: state.sortSettings
+            };
+            await UserInfoEngine.Instance.SetSetting(settingKey, JSON.stringify(gridStateJson));
+            // Clear pending state and reset dirty flag after successful save
+            this._pendingUserDefaultsToPersist = null;
+            this._isGridStateDirty = false;
+        }
+        catch (error) {
+            console.error('[entity-data-grid] Failed to persist user default grid state:', error);
+        }
+    }
+    /**
+     * Applies settings from a loaded ViewEntity (column configuration, sort state, etc.)
+     *
+     * Precedence rules (highest to lowest):
+     * 1. Props passed directly (gridState, orderBy, etc.) - always take precedence
+     * 2. Settings from ViewEntity.GridState (persisted column/sort configuration)
+     * 3. Settings from ViewEntity.SortInfo (legacy sort configuration)
+     * 4. Auto-generated defaults from entity metadata
+     */
+    applyViewEntitySettings() {
+        if (!this._viewEntity)
+            return;
+        // Only apply grid state from view entity if not already set via props
+        // (gridState input takes precedence)
+        if (!this._gridState && this._viewEntity.GridState) {
+            try {
+                const gridState = JSON.parse(this._viewEntity.GridState);
+                if (gridState.columnSettings?.length) {
+                    this._gridState = {
+                        columnSettings: gridState.columnSettings,
+                        sortSettings: gridState.sortSettings || []
+                    };
+                }
+            }
+            catch (e) {
+                console.warn('Failed to parse view GridState:', e);
+            }
+        }
+        // Only apply sort state if:
+        // 1. No explicit OrderBy in Params
+        // 2. No sort already set via gridState (either prop or from view)
+        const hasExplicitOrderBy = this._params?.OrderBy && this._params.OrderBy.trim().length > 0;
+        const hasSortFromGridState = this._gridState?.sortSettings && this._gridState.sortSettings.length > 0;
+        if (!hasExplicitOrderBy && !hasSortFromGridState && this._sortState.length === 0) {
+            const sortInfo = this._viewEntity.ViewSortInfo;
+            if (sortInfo?.length) {
+                this._sortState = sortInfo.map((s, index) => ({
+                    field: s.field,
+                    direction: s.direction?.toLowerCase() === 'desc' ? 'desc' : 'asc',
+                    index
+                }));
+            }
+        }
+    }
+    onGridStateChanged() {
+        if (this._gridState && this._entityInfo) {
+            this.buildAgColumnDefs();
+            // Update AG Grid with new column definitions to apply header styles
+            if (this.gridApi) {
+                this.gridApi.setGridOption('columnDefs', this.agColumnDefs);
+                // Refresh header to apply new header styles
+                this.gridApi.refreshHeader();
+            }
+            // Apply sort if present
+            if (this._gridState.sortSettings?.length && this.gridApi) {
+                const sortSetting = this._gridState.sortSettings[0];
+                this._sortState = [{
+                        field: sortSetting.field,
+                        direction: sortSetting.dir,
+                        index: 0
+                    }];
+                this.applySortStateToGrid();
+            }
+        }
+    }
+    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);
+            // Force refresh all cells to apply new highlighting
+            this.gridApi.refreshCells({ force: true });
+        }
+    }
+    generateColumnsFromMetadata() {
+        if (!this._entityInfo)
+            return;
+        this._columns = this._entityInfo.Fields
+            .filter(f => this.shouldShowField(f))
+            .map(field => ({
+            field: field.Name,
+            title: field.DisplayName || field.Name,
+            type: this.mapFieldTypeToGridType(field.Type),
+            sortable: true,
+            filterable: true,
+            visible: true,
+            width: this.estimateColumnWidth(field)
+        }));
+        this.initializeColumnStates();
+        this.buildAgColumnDefs();
+    }
+    shouldShowField(field) {
+        if (field.Name.startsWith('__mj_'))
+            return false;
+        if (field.IsPrimaryKey && field.SQLFullType?.toLowerCase() === 'uniqueidentifier') {
+            return false;
+        }
+        if (field.DefaultInView === true)
+            return true;
+        if (field.Length > 500)
+            return false;
+        return true;
+    }
+    estimateColumnWidth(field) {
+        const fieldNameLower = field.Name.toLowerCase();
+        const displayNameLower = (field.DisplayName || field.Name).toLowerCase();
+        // Fixed-width types
+        if (field.TSType === 'boolean')
+            return 80;
+        if (field.TSType === 'Date')
+            return 120;
+        // Numeric fields - compact
+        if (field.TSType === 'number') {
+            if (fieldNameLower.includes('year') || fieldNameLower.includes('age'))
+                return 80;
+            if (fieldNameLower.includes('amount') || fieldNameLower.includes('price') || fieldNameLower.includes('total'))
+                return 120;
+            return 100;
+        }
+        // ID fields - compact
+        if (fieldNameLower.endsWith('id') && field.Length <= 50)
+            return 80;
+        // Email - needs more space
+        if (fieldNameLower.includes('email'))
+            return 220;
+        // Phone numbers
+        if (fieldNameLower.includes('phone') || fieldNameLower.includes('mobile') || fieldNameLower.includes('fax'))
+            return 130;
+        // Name fields - medium width
+        if (fieldNameLower.includes('name') || fieldNameLower.includes('title')) {
+            if (fieldNameLower === 'firstname' || fieldNameLower === 'lastname' || fieldNameLower === 'first name' || fieldNameLower === 'last name')
+                return 120;
+            return 160;
+        }
+        // Location fields
+        if (fieldNameLower.includes('city'))
+            return 120;
+        if (fieldNameLower.includes('state') || fieldNameLower.includes('country'))
+            return 100;
+        if (fieldNameLower.includes('zip') || fieldNameLower.includes('postal'))
+            return 90;
+        if (fieldNameLower.includes('address'))
+            return 200;
+        // Date-like strings
+        if (fieldNameLower.includes('date') || fieldNameLower.includes('time'))
+            return 120;
+        // Status/Type fields - usually short values
+        if (fieldNameLower.includes('status') || fieldNameLower.includes('type') || fieldNameLower.includes('category'))
+            return 110;
+        // Code/abbreviation fields
+        if (fieldNameLower.includes('code') || fieldNameLower.includes('abbr'))
+            return 100;
+        // Long text fields - limit width, they'll truncate
+        if (field.Length > 500)
+            return 150;
+        if (field.Length > 200)
+            return 180;
+        // Default: estimate based on field length but with tighter bounds
+        const estimatedChars = Math.min(field.Length, 50);
+        const charWidth = 7;
+        const padding = 24;
+        return Math.min(Math.max(estimatedChars * charWidth / 2 + padding, 80), 200);
+    }
+    mapFieldTypeToGridType(fieldType) {
+        switch (fieldType.toLowerCase()) {
+            case 'int':
+            case 'bigint':
+            case 'smallint':
+            case 'tinyint':
+            case 'decimal':
+            case 'numeric':
+            case 'float':
+            case 'real':
+            case 'money':
+            case 'smallmoney':
+                return 'number';
+            case 'bit':
+                return 'boolean';
+            case 'date':
+                return 'date';
+            case 'datetime':
+            case 'datetime2':
+            case 'smalldatetime':
+            case 'datetimeoffset':
+                return 'datetime';
+            default:
+                return 'string';
+        }
+    }
+    initializeColumnStates() {
+        this._columnStates = this._columns.map((config, index) => ({
+            config,
+            computedWidth: typeof config.width === 'number' ? config.width : 150,
+            sortDirection: config.sortDirection || 'none',
+            sortIndex: config.sortIndex || 0,
+            filterValue: undefined,
+            visible: config.visible !== false,
+            order: index
+        }));
+    }
+    // ========================================
+    // AG Grid Column Building
+    // ========================================
+    buildAgColumnDefs() {
+        if (this._gridState?.columnSettings?.length && this._entityInfo) {
+            this.agColumnDefs = this.buildAgColumnDefsFromGridState(this._gridState.columnSettings);
+        }
+        else if (this._columns.length > 0) {
+            this.agColumnDefs = this._columns.map(col => this.mapColumnConfigToColDef(col));
+        }
+        else if (this._entityInfo) {
+            this.agColumnDefs = this.generateAgColumnDefs(this._entityInfo);
+        }
+        else {
+            this.agColumnDefs = [];
+        }
+        // Add row number column if enabled
+        if (this._showRowNumbers && this.agColumnDefs.length > 0) {
+            this.agColumnDefs.unshift({
+                headerName: '#',
+                field: '__rowNumber',
+                width: 60,
+                minWidth: 50,
+                maxWidth: 80,
+                sortable: false,
+                resizable: false,
+                valueGetter: (params) => params.node ? params.node.rowIndex + 1 : ''
+            });
+        }
+    }
+    buildAgColumnDefsFromGridState(columnSettings) {
+        if (!this._entityInfo)
+            return [];
+        const sortedColumns = [...columnSettings].sort((a, b) => (a.orderIndex ?? 0) - (b.orderIndex ?? 0));
+        const cols = [];
+        for (const colConfig of sortedColumns) {
+            if (colConfig.hidden)
+                continue;
+            const field = this._entityInfo.Fields.find(f => f.Name.toLowerCase() === colConfig.Name.toLowerCase());
+            if (!field)
+                continue;
+            const colDef = {
+                field: field.Name,
+                // Use userDisplayName if set, otherwise fall back to DisplayName or field name
+                headerName: colConfig.userDisplayName || colConfig.DisplayName || field.DisplayNameOrName,
+                width: colConfig.width || this.estimateColumnWidth(field),
+                sortable: this._allowSorting,
+                resizable: this._allowColumnResize
+            };
+            // Add type-specific formatters with optional custom format
+            this.applyFieldFormatter(colDef, field, colConfig.format);
+            cols.push(colDef);
+        }
+        return cols;
+    }
+    mapColumnConfigToColDef(col) {
+        const colDef = {
+            field: col.field,
+            headerName: col.title || col.field,
+            width: typeof col.width === 'number' ? col.width : undefined,
+            minWidth: col.minWidth,
+            maxWidth: col.maxWidth,
+            sortable: col.sortable !== false && this._allowSorting,
+            filter: false,
+            resizable: col.resizable !== false && this._allowColumnResize,
+            hide: col.visible === false
+        };
+        // Apply field formatter for highlighting and type-specific formatting
+        // if we have entity metadata for this field
+        if (this._entityInfo) {
+            const field = this._entityInfo.Fields.find(f => f.Name.toLowerCase() === col.field.toLowerCase());
+            if (field) {
+                this.applyFieldFormatter(colDef, field);
+            }
+        }
+        return colDef;
+    }
+    generateAgColumnDefs(entity) {
+        const cols = [];
+        const visibleFields = entity.Fields.filter(f => this.shouldShowField(f));
+        for (const field of visibleFields) {
+            const colDef = {
+                field: field.Name,
+                headerName: field.DisplayNameOrName,
+                width: this.estimateColumnWidth(field),
+                sortable: this._allowSorting,
+                resizable: this._allowColumnResize
+            };
+            this.applyFieldFormatter(colDef, field);
+            cols.push(colDef);
+        }
+        return cols;
+    }
+    applyFieldFormatter(colDef, field, customFormat) {
+        // Store type info for use in cell renderer
+        const fieldType = field.TSType;
+        const fieldNameLower = field.Name.toLowerCase();
+        const extendedType = field.ExtendedType?.toLowerCase() || '';
+        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') ||
+            fieldNameLower.includes('price') ||
+            fieldNameLower.includes('cost') ||
+            fieldNameLower.includes('total');
+        // Use ExtendedType='Email' from metadata, fallback to field name pattern
+        const isEmail = extendedType === 'email' ||
+            (!extendedType && fieldNameLower.includes('email'));
+        // Use ExtendedType='URL' from metadata, fallback to field name pattern
+        const isUrl = extendedType === 'url' ||
+            (!extendedType && (fieldNameLower.includes('url') ||
+                fieldNameLower.includes('website') ||
+                fieldNameLower.includes('link')));
+        // Use ExtendedType='Tel' from metadata, fallback to field name pattern
+        const isPhone = extendedType === 'tel' ||
+            (!extendedType && (fieldNameLower.includes('phone') ||
+                fieldNameLower.includes('mobile') ||
+                fieldNameLower.includes('fax')));
+        // Apply alignment - use custom format alignment if provided, otherwise default to right for numbers
+        const customAlign = customFormat?.align;
+        if (customAlign) {
+            colDef.cellClass = `cell-align-${customAlign}`;
+            colDef.headerClass = `header-align-${customAlign}`;
+        }
+        else if (vc.rightAlignNumbers && (fieldType === 'number' || isCurrency)) {
+            colDef.cellClass = 'cell-align-right';
+            colDef.headerClass = 'header-align-right';
+        }
+        // Apply custom header style if provided
+        if (customFormat?.headerStyle) {
+            const headerStyle = this.buildCssStyle(customFormat.headerStyle);
+            if (headerStyle) {
+                colDef.headerClass = (colDef.headerClass || '') + ' custom-header-style';
+                // AG Grid uses headerStyle for inline styles
+                colDef.headerStyle = this.buildStyleObject(customFormat.headerStyle);
+            }
+        }
+        // Use cellRenderer for highlighting support and enhanced formatting
+        colDef.cellRenderer = (params) => {
+            if (params.value === null || params.value === undefined) {
+                return '<span class="cell-empty">—</span>';
+            }
+            let displayValue = '';
+            let extraClass = '';
+            let inlineStyle = '';
+            let isHtmlContent = false; // Track if displayValue contains HTML (icons, links)
+            // Build inline style from custom cell style
+            if (customFormat?.cellStyle) {
+                inlineStyle = this.buildCssStyle(customFormat.cellStyle);
+            }
+            // Check if custom format is provided and has a non-auto type
+            const useCustomFormat = customFormat && customFormat.type && customFormat.type !== 'auto';
+            if (useCustomFormat) {
+                // Use custom formatting
+                displayValue = this.formatValueWithCustomFormat(params.value, customFormat);
+                // Check if formatCustomBoolean returned HTML (icon or checkbox)
+                if (customFormat.type === 'boolean' &&
+                    (customFormat.booleanDisplay === 'icon' || customFormat.booleanDisplay === 'checkbox')) {
+                    isHtmlContent = true;
+                }
+            }
+            else {
+                // Use default formatting based on field type
+                // Boolean formatting
+                if (fieldType === 'boolean') {
+                    if (vc.booleanIcons) {
+                        const iconClass = params.value
+                            ? 'fa-solid fa-check cell-boolean-true'
+                            : 'fa-solid fa-xmark cell-boolean-false';
+                        displayValue = `<i class="${iconClass}"></i>`;
+                        isHtmlContent = true;
+                    }
+                    else {
+                        displayValue = params.value ? 'Yes' : 'No';
+                    }
+                }
+                // 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];
+                    }
+                }
+                // Currency formatting
+                else if (fieldType === 'number' && isCurrency) {
+                    const num = Number(params.value);
+                    displayValue = isNaN(num) ? String(params.value) : `$${num.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+                }
+                // Regular number formatting
+                else if (fieldType === 'number') {
+                    const num = Number(params.value);
+                    displayValue = isNaN(num) ? String(params.value) : num.toLocaleString();
+                }
+                // Email formatting
+                else if (isEmail && vc.clickableEmails) {
+                    const email = String(params.value);
+                    const escapedEmail = HighlightUtil.escapeHtml(email);
+                    if (this._filterText) {
+                        const highlighted = HighlightUtil.highlight(email, this._filterText, true);
+                        return this.wrapWithStyle(`<a href="mailto:${escapedEmail}" class="cell-link cell-email" onclick="event.stopPropagation()">${highlighted}</a>`, inlineStyle);
+                    }
+                    return this.wrapWithStyle(`<a href="mailto:${escapedEmail}" class="cell-link cell-email" onclick="event.stopPropagation()">${escapedEmail}</a>`, inlineStyle);
+                }
+                // URL formatting
+                else if (isUrl && vc.clickableUrls) {
+                    let url = String(params.value);
+                    if (url && !url.startsWith('http')) {
+                        url = 'https://' + url;
+                    }
+                    const displayUrl = url.replace(/^https?:\/\//, '').replace(/\/$/, '');
+                    const escapedDisplay = HighlightUtil.escapeHtml(displayUrl);
+                    if (this._filterText) {
+                        const highlighted = HighlightUtil.highlight(displayUrl, this._filterText, true);
+                        return this.wrapWithStyle(`<a href="${HighlightUtil.escapeHtml(url)}" target="_blank" class="cell-link cell-url" onclick="event.stopPropagation()">${highlighted}</a>`, inlineStyle);
+                    }
+                    return this.wrapWithStyle(`<a href="${HighlightUtil.escapeHtml(url)}" target="_blank" class="cell-link cell-url" onclick="event.stopPropagation()">${escapedDisplay}</a>`, inlineStyle);
+                }
+                // Phone formatting
+                else if (isPhone) {
+                    displayValue = String(params.value);
+                    extraClass = 'cell-phone';
+                }
+                // Default string formatting
+                else {
+                    displayValue = String(params.value);
+                }
+            }
+            // Build the span with optional style and class
+            const styleAttr = inlineStyle ? ` style="${inlineStyle}"` : '';
+            const classAttr = extraClass ? ` class="${extraClass}"` : '';
+            // Handle content that's already HTML (icons, etc.)
+            if (isHtmlContent) {
+                if (inlineStyle) {
+                    return `<span${styleAttr}>${displayValue}</span>`;
+                }
+                return displayValue;
+            }
+            // Apply highlighting if filterText is set
+            if (this._filterText && displayValue) {
+                return `<span${classAttr}${styleAttr}>${HighlightUtil.highlight(displayValue, this._filterText, true)}</span>`;
+            }
+            return `<span${classAttr}${styleAttr}>${HighlightUtil.escapeHtml(displayValue)}</span>`;
+        };
+    }
+    /**
+     * Helper to wrap content with an inline style span
+     */
+    wrapWithStyle(content, style) {
+        if (!style)
+            return content;
+        return `<span style="${style}">${content}</span>`;
+    }
+    /**
+     * Build a CSS style string from a ColumnTextStyle object
+     */
+    buildCssStyle(style) {
+        const parts = [];
+        if (style.bold)
+            parts.push('font-weight: bold');
+        if (style.italic)
+            parts.push('font-style: italic');
+        if (style.underline)
+            parts.push('text-decoration: underline');
+        if (style.color)
+            parts.push(`color: ${style.color}`);
+        if (style.backgroundColor)
+            parts.push(`background-color: ${style.backgroundColor}`);
+        return parts.join('; ');
+    }
+    /**
+     * Build a style object for AG Grid from a ColumnTextStyle object
+     */
+    buildStyleObject(style) {
+        const obj = {};
+        if (style.bold)
+            obj['fontWeight'] = 'bold';
+        if (style.italic)
+            obj['fontStyle'] = 'italic';
+        if (style.underline)
+            obj['textDecoration'] = 'underline';
+        if (style.color)
+            obj['color'] = style.color;
+        if (style.backgroundColor)
+            obj['backgroundColor'] = style.backgroundColor;
+        return obj;
+    }
+    /**
+     * Format a value using custom ColumnFormat settings
+     */
+    formatValueWithCustomFormat(value, format) {
+        if (value == null)
+            return '—';
+        switch (format.type) {
+            case 'number':
+                return this.formatCustomNumber(value, format);
+            case 'currency':
+                return this.formatCustomCurrency(value, format);
+            case 'percent':
+                return this.formatCustomPercent(value, format);
+            case 'date':
+            case 'datetime':
+                return this.formatCustomDate(value, format);
+            case 'boolean':
+                return this.formatCustomBoolean(value, format);
+            default:
+                return String(value);
+        }
+    }
+    formatCustomNumber(value, format) {
+        const num = Number(value);
+        if (isNaN(num))
+            return String(value);
+        const options = {
+            minimumFractionDigits: format.decimals ?? 0,
+            maximumFractionDigits: format.decimals ?? 0,
+            useGrouping: format.thousandsSeparator ?? true
+        };
+        return new Intl.NumberFormat('en-US', options).format(num);
+    }
+    formatCustomCurrency(value, format) {
+        const num = Number(value);
+        if (isNaN(num))
+            return String(value);
+        const options = {
+            style: 'currency',
+            currency: format.currencyCode || 'USD',
+            minimumFractionDigits: format.decimals ?? 2,
+            maximumFractionDigits: format.decimals ?? 2
+        };
+        return new Intl.NumberFormat('en-US', options).format(num);
+    }
+    formatCustomPercent(value, format) {
+        const num = Number(value);
+        if (isNaN(num))
+            return String(value);
+        const options = {
+            style: 'percent',
+            minimumFractionDigits: format.decimals ?? 0,
+            maximumFractionDigits: format.decimals ?? 0
+        };
+        // 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) {
+        const date = value instanceof Date ? value : new Date(value);
+        if (isNaN(date.getTime()))
+            return String(value);
+        // Parse format string - check for weekday variants
+        const formatStr = format.dateFormat || 'medium';
+        const includeWeekday = formatStr.includes('-weekday');
+        const baseFormat = formatStr.replace('-weekday', '');
+        let options;
+        // Intl.DateTimeFormat doesn't allow combining dateStyle with weekday
+        // So we must use individual components when weekday is requested
+        if (includeWeekday) {
+            if (baseFormat === 'short') {
+                options = { weekday: 'short', month: 'numeric', day: 'numeric', year: '2-digit' };
+            }
+            else if (baseFormat === 'long') {
+                options = { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' };
+            }
+            else {
+                // medium
+                options = { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric' };
+            }
+            if (format.type === 'datetime') {
+                options.hour = 'numeric';
+                options.minute = '2-digit';
+            }
+        }
+        else {
+            // No weekday - can use dateStyle shorthand
+            options = {
+                dateStyle: baseFormat === 'short' ? 'short' : baseFormat === 'long' ? 'long' : 'medium'
+            };
+            if (format.type === 'datetime') {
+                options.timeStyle = 'short';
+            }
+        }
+        return new Intl.DateTimeFormat('en-US', options).format(date);
+    }
+    formatCustomBoolean(value, format) {
+        if (format.booleanDisplay === 'icon') {
+            const iconClass = value
+                ? 'fa-solid fa-check cell-boolean-true'
+                : 'fa-solid fa-xmark cell-boolean-false';
+            return `<i class="${iconClass}"></i>`;
+        }
+        if (format.booleanDisplay === 'checkbox') {
+            return value
+                ? '<i class="fa-regular fa-square-check cell-boolean-true"></i>'
+                : '<i class="fa-regular fa-square cell-boolean-false"></i>';
+        }
+        return value ? (format.trueLabel || 'Yes') : (format.falseLabel || 'No');
+    }
+    // ========================================
+    // AG Grid Row Selection Configuration
+    // ========================================
+    updateAgRowSelection() {
+        switch (this._selectionMode) {
+            case 'none':
+                this.agRowSelection = { mode: 'singleRow', enableClickSelection: false, checkboxes: false };
+                break;
+            case 'single':
+                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 };
+                break;
+            case 'checkbox':
+                this.agRowSelection = {
+                    mode: 'multiRow',
+                    enableClickSelection: true,
+                    checkboxes: true,
+                    headerCheckbox: true,
+                    enableSelectionWithoutKeys: true
+                };
+                break;
+        }
+        // Update the grid if it's already initialized
+        if (this.gridApi) {
+            this.gridApi.setGridOption('rowSelection', this.agRowSelection);
+        }
+    }
+    // ========================================
+    // Data Loading
+    // ========================================
+    async loadData(isAutoRefresh = false) {
+        if (this._useExternalData) {
+            this.processData();
+            return;
+        }
+        // Check if we have a valid data source via Params
+        const hasDataSource = this._params && (this._params.ViewID ||
+            this._params.ViewName ||
+            this._params.ViewEntity ||
+            this._params.EntityName);
+        if (!hasDataSource) {
+            return;
+        }
+        // Check AllowLoad for deferred loading
+        if (!this._allowLoad) {
+            return;
+        }
+        // For infinite scroll mode, setup or refresh the datasource
+        if (this._paginationMode === 'infinite') {
+            if (this.gridApi) {
+                if (!this.infiniteDatasource) {
+                    this.setupInfiniteScroll();
+                }
+                else {
+                    this.refreshInfiniteCache();
+                }
+            }
+            // In infinite mode, the datasource handles loading, so we're done
+            return;
+        }
+        // If a load is already in progress, return the existing promise
+        // This prevents redundant API calls when loadData is called multiple times
+        if (this._loadDataPromise) {
+            return this._loadDataPromise;
+        }
+        // Wrap the actual loading logic in a promise we can track
+        this._loadDataPromise = this.executeLoadData(isAutoRefresh);
+        try {
+            await this._loadDataPromise;
+        }
+        finally {
+            this._loadDataPromise = null;
+        }
+    }
+    /**
+     * Internal method that performs the actual data loading.
+     * Called by loadData() which handles promise deduplication.
+     */
+    async executeLoadData(isAutoRefresh) {
+        // Client-side mode - load all data upfront
+        const beforeRefreshEvent = new BeforeDataRefreshEventArgs(this, isAutoRefresh);
+        this.BeforeDataRefresh.emit(beforeRefreshEvent);
+        if (beforeRefreshEvent.cancel) {
+            return;
+        }
+        // Build the RunViewParams - prefer new Params input over legacy inputs
+        const runViewParams = this.buildRunViewParams();
+        // Create GridRunViewParams for events (backward compatibility)
+        const gridParams = {
+            entityName: runViewParams.EntityName || this._entityInfo?.Name || '',
+            extraFilter: runViewParams.ExtraFilter || '',
+            orderBy: runViewParams.OrderBy || '',
+            maxRows: runViewParams.MaxRows || 0,
+            fields: runViewParams.Fields,
+            searchString: runViewParams.UserSearchString || ''
+        };
+        const beforeLoadEvent = new BeforeDataLoadEventArgs(this, gridParams);
+        this.BeforeDataLoad.emit(beforeLoadEvent);
+        if (beforeLoadEvent.cancel) {
+            return;
+        }
+        // Apply any modifications from beforeLoadEvent
+        if (beforeLoadEvent.modifiedParams) {
+            if (beforeLoadEvent.modifiedParams.extraFilter) {
+                runViewParams.ExtraFilter = beforeLoadEvent.modifiedParams.extraFilter;
+            }
+            if (beforeLoadEvent.modifiedParams.orderBy) {
+                runViewParams.OrderBy = beforeLoadEvent.modifiedParams.orderBy;
+            }
+            if (beforeLoadEvent.modifiedParams.maxRows) {
+                runViewParams.MaxRows = beforeLoadEvent.modifiedParams.maxRows;
+            }
+            if (beforeLoadEvent.modifiedParams.fields) {
+                runViewParams.Fields = beforeLoadEvent.modifiedParams.fields;
+            }
+            if (beforeLoadEvent.modifiedParams.searchString) {
+                runViewParams.UserSearchString = beforeLoadEvent.modifiedParams.searchString;
+            }
+        }
+        this.loading = true;
+        this.errorMessage = '';
+        this.cdr.detectChanges();
+        const startTime = performance.now();
+        try {
+            const rv = new RunView();
+            const result = await rv.RunView({
+                ...runViewParams,
+                ResultType: 'entity_object'
+            });
+            const loadTimeMs = performance.now() - startTime;
+            if (result.Success) {
+                this._allData = result.Results || [];
+                this.totalRowCount = result.TotalRowCount || this._allData.length;
+                this.processData();
+                // Reapply sort state to grid after data load to maintain visual indicators
+                // Use Promise.resolve() to defer until after Angular's change detection cycle
+                // has completed and AG Grid has processed the new row data
+                if (this._sortState.length > 0) {
+                    Promise.resolve().then(() => {
+                        this.applySortStateToGrid();
+                    });
+                }
+                const afterLoadEvent = new AfterDataLoadEventArgs(this, gridParams, true, this.totalRowCount, this._allData.length, loadTimeMs);
+                this.AfterDataLoad.emit(afterLoadEvent);
+                const afterRefreshEvent = new AfterDataRefreshEventArgs(this, true, this.totalRowCount, loadTimeMs);
+                this.AfterDataRefresh.emit(afterRefreshEvent);
+            }
+            else {
+                this.errorMessage = result.ErrorMessage || 'Failed to load data';
+                const afterLoadEvent = new AfterDataLoadEventArgs(this, gridParams, false, 0, 0, loadTimeMs, this.errorMessage);
+                this.AfterDataLoad.emit(afterLoadEvent);
+            }
+        }
+        catch (error) {
+            const loadTimeMs = performance.now() - startTime;
+            this.errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
+            const afterLoadEvent = new AfterDataLoadEventArgs(this, gridParams, false, 0, 0, loadTimeMs, this.errorMessage);
+            this.AfterDataLoad.emit(afterLoadEvent);
+        }
+        finally {
+            this.loading = false;
+            this.cdr.detectChanges();
+        }
+    }
+    /**
+     * Builds RunViewParams from the Params input.
+     * Requires Params to be set - the grid needs a data source configured.
+     */
+    buildRunViewParams() {
+        if (!this._params) {
+            throw new Error('Params must be set before loading data');
+        }
+        const params = { ...this._params };
+        // Apply sort state (may be modified by user interactions)
+        const orderBy = this.buildOrderByClause();
+        if (orderBy) {
+            params.OrderBy = orderBy;
+        }
+        return params;
+    }
+    buildOrderByClause() {
+        if (this._sortState.length > 0) {
+            return this._sortState
+                .sort((a, b) => a.index - b.index)
+                .map(s => `${s.field} ${s.direction.toUpperCase()}`)
+                .join(', ');
+        }
+        // Fall back to OrderBy from Params if set
+        return this._params?.OrderBy || '';
+    }
+    // ========================================
+    // Infinite Scroll Data Source
+    // ========================================
+    /**
+     * Creates and returns an AG Grid IDatasource for infinite scroll mode.
+     * This datasource fetches data in pages from the server as the user scrolls.
+     */
+    createInfiniteDatasource() {
+        return {
+            getRows: async (params) => {
+                const startRow = params.startRow;
+                const endRow = params.endRow;
+                const blockSize = endRow - startRow;
+                try {
+                    // Build params with pagination
+                    const runViewParams = this.buildRunViewParams();
+                    runViewParams.StartRow = startRow;
+                    runViewParams.MaxRows = blockSize;
+                    const rv = new RunView();
+                    const result = await rv.RunView({
+                        ...runViewParams,
+                        ResultType: 'entity_object'
+                    });
+                    if (result.Success) {
+                        const entities = result.Results || [];
+                        // Process entities into row data
+                        const rowData = entities.map((entity, index) => {
+                            return this.entityToRowData(entity, startRow + index);
+                        });
+                        // Update total row count
+                        this.totalRowCount = result.TotalRowCount || 0;
+                        this.cdr.detectChanges();
+                        // Determine if we've reached the last row
+                        const lastRow = result.TotalRowCount != null && startRow + entities.length >= result.TotalRowCount
+                            ? result.TotalRowCount
+                            : undefined;
+                        params.successCallback(rowData, lastRow);
+                    }
+                    else {
+                        this.errorMessage = result.ErrorMessage || 'Failed to load data';
+                        this.cdr.detectChanges();
+                        params.failCallback();
+                    }
+                }
+                catch (error) {
+                    this.errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
+                    this.cdr.detectChanges();
+                    params.failCallback();
+                }
+            }
+        };
+    }
+    /**
+     * Converts a BaseEntity to AG Grid row data format.
+     * This is used by both client and infinite scroll modes for consistent data formatting.
+     */
+    entityToRowData(entity, index) {
+        const key = this.getRowKey(entity);
+        // Store in row data map for later retrieval
+        const rowData = {
+            key,
+            index,
+            entity,
+            selected: this._selectedKeys.includes(key),
+            editing: this._editingRowKey === key,
+            dirty: this._pendingChanges.some(c => c.rowKey === key),
+            cssClasses: this.computeRowClasses(index, entity)
+        };
+        this._rowDataMap.set(key, rowData);
+        // Build AG Grid row data
+        const row = {
+            __pk: key
+        };
+        if (this._entityInfo) {
+            for (const field of this._entityInfo.Fields) {
+                row[field.Name] = entity.Get(field.Name);
+            }
+        }
+        return row;
+    }
+    /**
+     * Sets up the grid for infinite scroll mode.
+     * Called when PaginationMode is 'infinite'.
+     */
+    setupInfiniteScroll() {
+        if (!this.gridApi)
+            return;
+        // Create datasource
+        this.infiniteDatasource = this.createInfiniteDatasource();
+        // Set datasource on grid
+        this.gridApi.setGridOption('datasource', this.infiniteDatasource);
+    }
+    /**
+     * Refreshes the infinite scroll cache.
+     * Call this when data source parameters change.
+     */
+    refreshInfiniteCache() {
+        if (!this.gridApi || this._paginationMode !== 'infinite')
+            return;
+        // Clear the row data map since we're refreshing
+        this._rowDataMap.clear();
+        // Purge cache and refresh
+        this.gridApi.refreshInfiniteCache();
+        // Reapply sort state to grid after refresh to maintain visual indicators
+        // Use Promise.resolve() to defer until after AG Grid has processed the cache refresh
+        if (this._sortState.length > 0) {
+            Promise.resolve().then(() => {
+                this.applySortStateToGrid();
+            });
+        }
+    }
+    processData() {
+        this._rowDataMap.clear();
+        const dataSource = this._useExternalData ? this._data : this._allData;
+        this.rowData = dataSource.map((entity, index) => {
+            const key = this.getRowKey(entity);
+            const rowData = {
+                key,
+                index,
+                entity,
+                selected: this._selectedKeys.includes(key),
+                editing: this._editingRowKey === key,
+                dirty: this._pendingChanges.some(c => c.rowKey === key),
+                cssClasses: this.computeRowClasses(index, entity)
+            };
+            this._rowDataMap.set(key, rowData);
+            // Build AG Grid row data
+            const row = {
+                __pk: key
+            };
+            if (this._entityInfo) {
+                for (const field of this._entityInfo.Fields) {
+                    row[field.Name] = entity.Get(field.Name);
+                }
+            }
+            return row;
+        });
+        this.cdr.detectChanges();
+    }
+    getRowKey(entity) {
+        // Use composite key if available
+        if (entity.PrimaryKey) {
+            return entity.PrimaryKey.ToConcatenatedString();
+        }
+        const keyValue = entity.Get(this._keyField);
+        return keyValue != null ? String(keyValue) : '';
+    }
+    computeRowClasses(index, _entity) {
+        const classes = [];
+        if (this._striped && index % 2 === 1) {
+            classes.push('grid-row-alt');
+        }
+        return classes;
+    }
+    // ========================================
+    // AG Grid Event Handlers
+    // ========================================
+    onGridReady(event) {
+        this.gridApi = event.api;
+        this.updateSelection();
+        if (this._sortState.length > 0) {
+            this.applySortStateToGrid();
+        }
+        // Smart column sizing: use our estimated widths but ensure grid fills available space
+        // without making columns excessively wide
+        this.autoSizeColumnsSmartly(event.api);
+        // Setup infinite scroll if in that mode and we have params
+        if (this._paginationMode === 'infinite' && this._allowLoad && this._params) {
+            this.setupInfiniteScroll();
+        }
+    }
+    /**
+     * Smart column auto-sizing that respects our width estimates
+     * while ensuring the grid fills available space appropriately
+     */
+    autoSizeColumnsSmartly(api) {
+        // Get total estimated width from our column definitions
+        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;
+        if (availableWidth > 0 && totalEstimatedWidth < availableWidth) {
+            // If our columns are narrower than available space, stretch proportionally
+            // but cap individual column growth to prevent excessive widths
+            const ratio = availableWidth / totalEstimatedWidth;
+            const maxRatio = 1.5; // Don't let columns grow more than 50%
+            if (ratio <= maxRatio) {
+                // Moderate stretch - use sizeColumnsToFit
+                api.sizeColumnsToFit();
+            }
+            else {
+                // Too much stretch - just use our estimated widths
+                // The grid will have some empty space on the right, which is fine
+            }
+        }
+        // If our columns are wider than available space, let the user scroll horizontally
+        // (AG Grid handles this automatically)
+    }
+    onAgRowClicked(event) {
+        if (!this._entityInfo || !event.data)
+            return;
+        const pkString = event.data['__pk'];
+        const rowData = this._rowDataMap.get(pkString);
+        if (!rowData)
+            return;
+        // Fire before click event
+        const mouseEvent = event.event;
+        const beforeEvent = new BeforeRowClickEventArgs(this, rowData.entity, rowData.index, pkString, mouseEvent, undefined, undefined);
+        this.BeforeRowClick.emit(beforeEvent);
+        if (beforeEvent.cancel)
+            return;
+        // Fire after click event
+        const afterEvent = new AfterRowClickEventArgs(this, rowData.entity, rowData.index, pkString, mouseEvent, undefined, undefined);
+        this.AfterRowClick.emit(afterEvent);
+        // Auto-navigate on single click (if enabled and not navigating on double-click only)
+        if (this._autoNavigate && !this._navigateOnDoubleClick && this._editMode === 'none') {
+            this.emitNavigationRequest(rowData.entity, pkString);
+        }
+    }
+    onAgRowDoubleClicked(event) {
+        if (!this._entityInfo || !event.data)
+            return;
+        const pkString = event.data['__pk'];
+        const rowData = this._rowDataMap.get(pkString);
+        if (!rowData)
+            return;
+        // Fire before double-click event
+        const mouseEvent = event.event;
+        const beforeEvent = new BeforeRowDoubleClickEventArgs(this, rowData.entity, rowData.index, pkString, mouseEvent, undefined, undefined);
+        this.BeforeRowDoubleClick.emit(beforeEvent);
+        if (beforeEvent.cancel)
+            return;
+        // Fire after double-click event
+        const afterEvent = new AfterRowDoubleClickEventArgs(this, rowData.entity, rowData.index, pkString, mouseEvent, undefined, undefined);
+        this.AfterRowDoubleClick.emit(afterEvent);
+        // Auto-navigate on double-click (if enabled)
+        if (this._autoNavigate && this._navigateOnDoubleClick && this._editMode === 'none') {
+            this.emitNavigationRequest(rowData.entity, pkString);
+        }
+    }
+    /**
+     * Emits a navigation request for the given entity record.
+     */
+    emitNavigationRequest(entity, compositeKey) {
+        if (!this._entityInfo)
+            return;
+        this.NavigationRequested.emit({
+            entityInfo: this._entityInfo,
+            record: entity,
+            compositeKey
+        });
+    }
+    onAgSortChanged(event) {
+        if (this.suppressSortEvents)
+            return;
+        const sortModel = event.api.getColumnState()
+            .filter(col => col.sort)
+            .map(col => ({
+            field: col.colId,
+            direction: col.sort,
+            index: col.sortIndex ?? 0
+        }));
+        if (sortModel.length > 0) {
+            // Find the column config
+            const column = this._columnStates.find(c => c.config.field === sortModel[0].field);
+            if (column) {
+                // Fire before sort event
+                const beforeEvent = new BeforeSortEventArgs(this, column.config, sortModel[0].direction, sortModel.length > 1, this._sortState);
+                this.BeforeSort.emit(beforeEvent);
+                if (beforeEvent.cancel) {
+                    // Revert to previous sort state
+                    this.applySortStateToGrid();
+                    return;
+                }
+            }
+            this._sortState = sortModel;
+            if (column) {
+                // Fire after sort event
+                const afterEvent = new AfterSortEventArgs(this, column.config, sortModel[0].direction, this._sortState);
+                this.AfterSort.emit(afterEvent);
+            }
+            // User changed sort - mark as dirty and emit grid state changed
+            this._isGridStateDirty = true;
+            this.emitGridStateChanged('sort');
+            // Determine if we need to reload data from server or can sort client-side
+            // Client-side sorting is only possible if we have ALL the data loaded
+            if (this._serverSideSorting && !this._useExternalData) {
+                this.loadData(true);
+            }
+            else if (this._useExternalData) {
+                // Using external data - check if we have all data or just a page
+                // If totalRowCount > current data length, we only have partial data and parent must handle sorting
+                // Parent receives afterSort event and can reload with new sort order
+                // If we have all data, AG Grid handles client-side sorting automatically
+            }
+        }
+        else {
+            this._sortState = [];
+            // User cleared sort - mark as dirty and emit grid state changed
+            this._isGridStateDirty = true;
+            this.emitGridStateChanged('sort');
+        }
+    }
+    onAgSelectionChanged(event) {
+        const selectedNodes = event.api.getSelectedNodes();
+        const previousSelection = [...this._selectedKeys];
+        const newSelection = selectedNodes.map(node => node.data['__pk']);
+        // Find newly selected rows
+        const addedKeys = newSelection.filter(k => !previousSelection.includes(k));
+        const removedKeys = previousSelection.filter(k => !newSelection.includes(k));
+        // Handle deselections
+        for (const key of removedKeys) {
+            const rowData = this._rowDataMap.get(key);
+            if (rowData) {
+                const beforeEvent = new BeforeRowDeselectEventArgs(this, rowData.entity, rowData.index, key, this._selectedKeys);
+                this.BeforeRowDeselect.emit(beforeEvent);
+                // Note: Can't cancel AG Grid's selection, but we emit the event
+            }
+        }
+        // Handle selections
+        for (const key of addedKeys) {
+            const rowData = this._rowDataMap.get(key);
+            if (rowData) {
+                const beforeEvent = new BeforeRowSelectEventArgs(this, rowData.entity, rowData.index, key, addedKeys.length > 1, this._selectedKeys);
+                this.BeforeRowSelect.emit(beforeEvent);
+                // Note: Can't cancel AG Grid's selection, but we emit the event
+            }
+        }
+        this._selectedKeys = newSelection;
+        this.updateRowSelectionState();
+        // Fire after events
+        for (const key of removedKeys) {
+            const rowData = this._rowDataMap.get(key);
+            if (rowData) {
+                const afterEvent = new AfterRowDeselectEventArgs(this, rowData.entity, rowData.index, key, this._selectedKeys, previousSelection);
+                this.AfterRowDeselect.emit(afterEvent);
+            }
+        }
+        for (const key of addedKeys) {
+            const rowData = this._rowDataMap.get(key);
+            if (rowData) {
+                const afterEvent = new AfterRowSelectEventArgs(this, rowData.entity, rowData.index, key, addedKeys.length > 1, this._selectedKeys, previousSelection);
+                this.AfterRowSelect.emit(afterEvent);
+            }
+        }
+        this.SelectionChange.emit(this._selectedKeys);
+    }
+    onAgColumnResized(event) {
+        if (event.finished && event.source !== 'api') {
+            // User manually resized a column - mark as dirty
+            this._isGridStateDirty = true;
+            this.emitGridStateChanged('columns');
+        }
+    }
+    onAgColumnMoved(event) {
+        if (event.finished && event.source !== 'api') {
+            // User manually moved a column - mark as dirty
+            this._isGridStateDirty = true;
+            this.emitGridStateChanged('columns');
+        }
+    }
+    // ========================================
+    // Grid State Management
+    // ========================================
+    emitGridStateChanged(changeType) {
+        if (!this.gridApi || !this._entityInfo)
+            return;
+        // Only emit and persist if we're dirty (user made actual changes)
+        // This prevents emitting stale state during view transitions
+        if (!this._isGridStateDirty) {
+            return;
+        }
+        const currentState = this.buildCurrentGridState();
+        // Emit the event for external consumers
+        this.GridStateChanged.emit({
+            gridState: currentState,
+            changeType
+        });
+        // 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.IsDynamicView && this._viewEntity) {
+                // Stored view - persist to UserView.GridState (debounced)
+                // Track pending state for flush on destroy
+                this._pendingViewStateToPersist = currentState;
+                this.statePersistSubject.next(currentState);
+            }
+            else if (this.IsDynamicView) {
+                // Dynamic view - persist to User Settings as defaults (debounced via same subject)
+                // Track pending state for flush on destroy
+                this._pendingUserDefaultsToPersist = currentState;
+                this.userDefaultsPersistSubject.next(currentState);
+            }
+        }
+    }
+    /**
+     * Persists the grid state to the UserView entity.
+     * Only saves if the user has edit permission on the view.
+     */
+    async persistGridStateToView(state) {
+        if (!this._viewEntity || this.isSavingState) {
+            return;
+        }
+        // Check permission before saving
+        if (!this._viewEntity.UserCanEdit) {
+            this._pendingViewStateToPersist = null; // Clear pending since we can't save anyway
+            return;
+        }
+        try {
+            this.isSavingState = true;
+            this.pendingStateToSave = state;
+            // Build the grid state JSON matching ViewGridState format
+            const gridStateJson = {
+                columnSettings: state.columnSettings,
+                sortSettings: state.sortSettings
+            };
+            // Update the view entity's GridState
+            this._viewEntity.GridState = JSON.stringify(gridStateJson);
+            // Update SortState separately if changed
+            if (state.sortSettings?.length) {
+                this._viewEntity.SortState = JSON.stringify(state.sortSettings.map(s => ({
+                    field: s.field,
+                    dir: s.dir
+                })));
+            }
+            // Save the view entity
+            const success = await this._viewEntity.Save();
+            if (!success) {
+                console.warn('[entity-data-grid] Failed to save view state:', this._viewEntity.LatestResult?.Message);
+            }
+            else {
+                // Clear pending state and reset dirty flag after successful save
+                this._pendingViewStateToPersist = null;
+                this._isGridStateDirty = false;
+            }
+        }
+        catch (error) {
+            console.error('[entity-data-grid] Error persisting grid state:', error);
+        }
+        finally {
+            this.isSavingState = false;
+            this.pendingStateToSave = null;
+        }
+    }
+    buildCurrentGridState() {
+        if (!this.gridApi || !this._entityInfo || !this._entityInfo.Fields) {
+            return { columnSettings: [], sortSettings: [] };
+        }
+        const columnState = this.gridApi.getColumnState();
+        if (!columnState) {
+            return { columnSettings: [], sortSettings: [] };
+        }
+        // Build lookup maps for existing custom properties to preserve them
+        // AG Grid's column state doesn't track our custom format/userDisplayName properties,
+        // so we need to carry them over from the current gridState
+        const existingFormatsByName = new Map();
+        const existingUserDisplayNames = new Map();
+        if (this._gridState?.columnSettings) {
+            for (const col of this._gridState.columnSettings) {
+                const keyLower = col.Name.toLowerCase();
+                if (col.format) {
+                    existingFormatsByName.set(keyLower, col.format);
+                }
+                if (col.userDisplayName) {
+                    existingUserDisplayNames.set(keyLower, col.userDisplayName);
+                }
+            }
+        }
+        const columnSettings = [];
+        const sortSettings = [];
+        for (let i = 0; i < columnState.length; i++) {
+            const col = columnState[i];
+            if (col.colId === '__rowNumber')
+                continue; // Skip row number column
+            const field = this._entityInfo.Fields.find(f => f.Name === col.colId);
+            if (field) {
+                const keyLower = field.Name.toLowerCase();
+                const colConfig = {
+                    ID: field.ID,
+                    Name: field.Name,
+                    DisplayName: field.DisplayNameOrName,
+                    hidden: col.hide ?? false,
+                    width: col.width ?? undefined,
+                    orderIndex: i
+                };
+                // Preserve format from existing gridState if present
+                const existingFormat = existingFormatsByName.get(keyLower);
+                if (existingFormat) {
+                    colConfig.format = existingFormat;
+                }
+                // Preserve userDisplayName from existing gridState if present
+                const existingUserDisplayName = existingUserDisplayNames.get(keyLower);
+                if (existingUserDisplayName) {
+                    colConfig.userDisplayName = existingUserDisplayName;
+                }
+                columnSettings.push(colConfig);
+            }
+            if (col.sort) {
+                sortSettings.push({
+                    field: col.colId,
+                    dir: col.sort
+                });
+            }
+        }
+        return { columnSettings, sortSettings };
+    }
+    applySortStateToGrid() {
+        if (!this.gridApi || this._sortState.length === 0)
+            return;
+        const currentColumnState = this.gridApi.getColumnState();
+        if (!currentColumnState)
+            return;
+        this.suppressSortEvents = true;
+        try {
+            const columnState = currentColumnState.map(col => {
+                const sort = this._sortState.find(s => s.field === col.colId);
+                return {
+                    ...col,
+                    sort: sort ? sort.direction : null,
+                    sortIndex: sort ? sort.index : null
+                };
+            });
+            this.gridApi.applyColumnState({ state: columnState });
+        }
+        finally {
+            this.suppressSortEvents = false;
+        }
+    }
+    updateSelection() {
+        if (!this.gridApi || this._selectedKeys.length === 0) {
+            this.gridApi?.deselectAll();
+            return;
+        }
+        for (const key of this._selectedKeys) {
+            const node = this.gridApi.getRowNode(key);
+            if (node) {
+                node.setSelected(true);
+            }
+        }
+    }
+    updateRowSelectionState() {
+        for (const rowData of this._rowDataMap.values()) {
+            rowData.selected = this._selectedKeys.includes(rowData.key);
+        }
+        this.cdr.detectChanges();
+    }
+    // ========================================
+    // Selection Public Methods
+    // ========================================
+    SelectRows(keys, additive = false) {
+        if (!this.gridApi)
+            return;
+        if (!additive) {
+            this.gridApi.deselectAll();
+        }
+        for (const key of keys) {
+            const node = this.gridApi.getRowNode(key);
+            if (node) {
+                node.setSelected(true, !additive);
+            }
+        }
+    }
+    DeselectRows(keys) {
+        if (!this.gridApi)
+            return;
+        for (const key of keys) {
+            const node = this.gridApi.getRowNode(key);
+            if (node) {
+                node.setSelected(false);
+            }
+        }
+    }
+    SelectAll() {
+        this.gridApi?.selectAll();
+    }
+    ClearSelection() {
+        this.gridApi?.deselectAll();
+    }
+    GetSelectedRows() {
+        return this._selectedKeys
+            .map(key => this._rowDataMap.get(key)?.entity)
+            .filter((e) => e !== undefined);
+    }
+    IsRowSelected(key) {
+        return this._selectedKeys.includes(key);
+    }
+    /**
+     * Scrolls the grid to make the specified row visible.
+     * @param key The primary key of the row to scroll to
+     * @param position Where to position the row: 'top', 'middle', or 'bottom'
+     */
+    EnsureRowVisible(key, position = 'middle') {
+        if (!this.gridApi)
+            return;
+        const node = this.gridApi.getRowNode(key);
+        if (node) {
+            this.gridApi.ensureNodeVisible(node, position);
+        }
+    }
+    // ========================================
+    // Public Methods
+    // ========================================
+    async Refresh() {
+        await this.loadData(false);
+    }
+    Clear() {
+        this._allData = [];
+        this._data = [];
+        this._rowDataMap.clear();
+        this._selectedKeys = [];
+        this.rowData = [];
+        this.totalRowCount = 0;
+        this.cdr.detectChanges();
+    }
+    GetData() {
+        return this._useExternalData ? [...this._data] : [...this._allData];
+    }
+    GetRowByKey(key) {
+        return this._rowDataMap.get(key)?.entity;
+    }
+    GetRowByIndex(index) {
+        const dataSource = this._useExternalData ? this._data : this._allData;
+        return dataSource[index];
+    }
+    GetState() {
+        return {
+            columns: this._columnStates.map(c => ({
+                field: c.config.field,
+                width: c.computedWidth,
+                visible: c.visible,
+                order: c.order
+            })),
+            sort: [...this._sortState],
+            filters: [...this._filterState],
+            selection: [...this._selectedKeys]
+        };
+    }
+    SetState(state) {
+        for (const colState of state.columns) {
+            const column = this._columnStates.find(c => c.config.field === colState.field);
+            if (column) {
+                column.computedWidth = colState.width;
+                column.visible = colState.visible;
+                column.order = colState.order;
+            }
+        }
+        this._sortState = [...state.sort];
+        for (const sort of this._sortState) {
+            const column = this._columnStates.find(c => c.config.field === sort.field);
+            if (column) {
+                column.sortDirection = sort.direction;
+                column.sortIndex = sort.index;
+            }
+        }
+        this._filterState = [...state.filters];
+        this._selectedKeys = [...state.selection];
+        this.updateRowSelectionState();
+        this.buildAgColumnDefs();
+        this.cdr.detectChanges();
+    }
+    ResetState() {
+        this.initializeColumnStates();
+        this._sortState = [];
+        this._filterState = [];
+        this.ClearSelection();
+        this.buildAgColumnDefs();
+        this.cdr.detectChanges();
+    }
+    // ========================================
+    // State Persistence
+    // ========================================
+    scheduleStateSave() {
+        if (!this._stateKey)
+            return;
+        this.statesSaveSubject.next();
+    }
+    async loadPersistedState() {
+        // TODO: Load state from User Settings entity
+    }
+    // ========================================
+    // Toolbar Click Handlers
+    // ========================================
+    onAddClick() {
+        // Emit legacy events for backward compatibility
+        this.AddRequested.emit();
+        this.NewButtonClick.emit();
+        // Emit navigation events based on CreateRecordMode
+        if (this._entityInfo) {
+            if (this._createRecordMode === 'Dialog') {
+                this.NewRecordDialogRequested.emit({
+                    entityInfo: this._entityInfo,
+                    defaultValues: this._newRecordValues
+                });
+            }
+            else {
+                this.NewRecordTabRequested.emit({
+                    entityInfo: this._entityInfo,
+                    defaultValues: this._newRecordValues
+                });
+            }
+        }
+    }
+    onDeleteClick() {
+        const selectedRows = this.GetSelectedRows();
+        if (selectedRows.length > 0) {
+            this.DeleteRequested.emit(selectedRows);
+            this.DeleteButtonClick.emit(selectedRows);
+        }
+    }
+    onExportClick() {
+        this.ExportRequested.emit();
+        this.ExportButtonClick.emit();
+        // Show the export dialog
+        this.showExportDialogForCurrentData();
+    }
+    /**
+     * Shows the export dialog for the current grid data
+     */
+    showExportDialogForCurrentData() {
+        const data = this.getExportData();
+        const columns = this.getExportColumns();
+        const fileName = this.getDefaultExportFileName();
+        this.exportDialogConfig = {
+            data,
+            columns,
+            defaultFileName: fileName,
+            availableFormats: ['excel', 'csv', 'json'],
+            defaultFormat: 'excel',
+            showSamplingOptions: true,
+            defaultSamplingMode: 'all',
+            dialogTitle: `Export ${this._entityInfo?.Name || 'Data'}`
+        };
+        this.showExportDialog = true;
+        this.cdr.detectChanges();
+    }
+    /**
+     * Handle export dialog close
+     */
+    onExportDialogClosed(result) {
+        this.showExportDialog = false;
+        this.exportDialogConfig = null;
+        this.cdr.detectChanges();
+    }
+    /**
+     * Export grid data directly without showing dialog.
+     * Use this for programmatic export with specific options.
+     * @param options Export options (format, sampling, etc.)
+     * @param download If true, automatically downloads the file. Default true.
+     * @returns Export result with data buffer and metadata
+     */
+    async Export(options, download = true) {
+        const data = this.getExportData();
+        const columns = this.getExportColumns();
+        const fileName = options?.fileName || this.getDefaultExportFileName();
+        const exportOptions = {
+            format: 'excel',
+            fileName,
+            columns,
+            includeHeaders: true,
+            ...options
+        };
+        const result = await this.exportService.export(data, exportOptions);
+        if (result.success && download) {
+            this.exportService.downloadResult(result);
+        }
+        return result;
+    }
+    /**
+     * Export to Excel format directly (convenience method)
+     * @param download If true, automatically downloads the file. Default true.
+     */
+    async ExportToExcel(download = true) {
+        return this.Export({ format: 'excel' }, download);
+    }
+    /**
+     * Export to CSV format directly (convenience method)
+     * @param download If true, automatically downloads the file. Default true.
+     */
+    async ExportToCSV(download = true) {
+        return this.Export({ format: 'csv' }, download);
+    }
+    /**
+     * Export to JSON format directly (convenience method)
+     * @param download If true, automatically downloads the file. Default true.
+     */
+    async ExportToJSON(download = true) {
+        return this.Export({ format: 'json' }, download);
+    }
+    /**
+     * Get the current grid data formatted for export
+     */
+    getExportData() {
+        // Convert BaseEntity[] to plain objects for export
+        return this.rowData.map(row => {
+            if (row instanceof BaseEntity) {
+                return row.GetAll();
+            }
+            return row;
+        });
+    }
+    /**
+     * Get column definitions for export based on current grid columns
+     */
+    getExportColumns() {
+        if (!this._entityInfo) {
+            // Fallback: use AG Grid column definitions
+            return this.agColumnDefs
+                .filter(col => col.field && !col.hide)
+                .map(col => ({
+                name: col.field,
+                displayName: (col.headerName || col.field)
+            }));
+        }
+        // Use entity field info for better column metadata
+        return this._columns
+            .filter(col => col.visible !== false)
+            .map(col => {
+            const field = this._entityInfo?.Fields.find(f => f.Name === col.field);
+            return {
+                name: col.field,
+                displayName: col.title || field?.DisplayName || col.field,
+                dataType: this.mapFieldTypeToExportType(field?.Type),
+                width: typeof col.width === 'number' ? col.width : undefined
+            };
+        });
+    }
+    /**
+     * Map MemberJunction field types to export column types
+     */
+    mapFieldTypeToExportType(fieldType) {
+        if (!fieldType)
+            return 'string';
+        const type = fieldType.toLowerCase();
+        if (type.includes('int') || type.includes('decimal') || type.includes('float') || type.includes('numeric')) {
+            return 'number';
+        }
+        if (type.includes('date') || type.includes('time')) {
+            return 'date';
+        }
+        if (type.includes('bit') || type.includes('bool')) {
+            return 'boolean';
+        }
+        if (type.includes('money') || type.includes('currency')) {
+            return 'currency';
+        }
+        return 'string';
+    }
+    /**
+     * Generate default file name for export
+     */
+    getDefaultExportFileName() {
+        const entityName = this._entityInfo?.Name || 'export';
+        const timestamp = new Date().toISOString().slice(0, 10);
+        return `${entityName}_${timestamp}`;
+    }
+    onRefreshClick() {
+        this.RefreshButtonClick.emit();
+        this.Refresh();
+    }
+    onCompareClick() {
+        const selectedRows = this.GetSelectedRows();
+        if (selectedRows.length >= 2) {
+            // Emit legacy event for backward compatibility
+            this.CompareButtonClick.emit(selectedRows);
+            // Emit new structured event for Explorer dialogs
+            if (this._entityInfo) {
+                this.CompareRecordsRequested.emit({
+                    entityInfo: this._entityInfo,
+                    records: selectedRows
+                });
+            }
+        }
+    }
+    onMergeClick() {
+        const selectedRows = this.GetSelectedRows();
+        if (selectedRows.length >= 2) {
+            // Emit legacy event for backward compatibility
+            this.MergeButtonClick.emit(selectedRows);
+            // Emit new structured event for Explorer dialogs
+            if (this._entityInfo) {
+                this.MergeRecordsRequested.emit({
+                    entityInfo: this._entityInfo,
+                    records: selectedRows
+                });
+            }
+        }
+    }
+    onAddToListClick() {
+        const selectedRows = this.GetSelectedRows();
+        if (selectedRows.length > 0) {
+            // Emit legacy event for backward compatibility
+            this.AddToListButtonClick.emit(selectedRows);
+            // Emit new structured event with record IDs for list management
+            if (this._entityInfo) {
+                const recordIds = selectedRows.map(r => {
+                    return r.PrimaryKey?.ToConcatenatedString() || String(r.Get(this._keyField));
+                });
+                this.AddToListRequested.emit({
+                    entityInfo: this._entityInfo,
+                    records: selectedRows,
+                    recordIds
+                });
+            }
+        }
+    }
+    onDuplicateSearchClick() {
+        const selectedRows = this.GetSelectedRows();
+        if (selectedRows.length >= 2) {
+            // Emit legacy event for backward compatibility
+            this.DuplicateSearchButtonClick.emit(selectedRows);
+            // Emit new structured event for Explorer dialogs
+            if (this._entityInfo) {
+                this.DuplicateSearchRequested.emit({
+                    entityInfo: this._entityInfo,
+                    records: selectedRows
+                });
+            }
+        }
+    }
+    onCommunicationClick() {
+        const selectedRows = this.GetSelectedRows();
+        if (selectedRows.length > 0) {
+            // Emit legacy event for backward compatibility
+            this.CommunicationButtonClick.emit(selectedRows);
+            // Emit new structured event for Explorer dialogs
+            if (this._entityInfo) {
+                this.CommunicationRequested.emit({
+                    entityInfo: this._entityInfo,
+                    records: selectedRows,
+                    viewParams: this._params
+                });
+            }
+        }
+    }
+    onColumnChooserClick() {
+        // TODO: Implement column chooser dialog
+    }
+    /**
+     * Handles entity action click from the overflow menu
+     */
+    onEntityActionClick(action) {
+        if (!this._entityInfo)
+            return;
+        this.EntityActionRequested.emit({
+            entityInfo: this._entityInfo,
+            action,
+            selectedRecords: this.GetSelectedRows()
+        });
+    }
+    /**
+     * Checks if an entity action is currently enabled based on selection requirements
+     */
+    isEntityActionEnabled(action) {
+        if (!action.requiresSelection)
+            return true;
+        const selectedCount = this._selectedKeys.length;
+        if (selectedCount === 0)
+            return false;
+        if (action.minSelectedRecords && selectedCount < action.minSelectedRecords)
+            return false;
+        if (action.maxSelectedRecords && selectedCount > action.maxSelectedRecords)
+            return false;
+        return true;
+    }
+    // ========================================
+    // Overflow Menu Methods
+    // ========================================
+    toggleOverflowMenu() {
+        this.showOverflowMenu = !this.showOverflowMenu;
+        this.cdr.detectChanges();
+        // Add click outside listener when menu is open
+        if (this.showOverflowMenu) {
+            setTimeout(() => {
+                document.addEventListener('click', this.handleOutsideClick);
+            }, 0);
+        }
+        else {
+            document.removeEventListener('click', this.handleOutsideClick);
+        }
+    }
+    closeOverflowMenu() {
+        this.showOverflowMenu = false;
+        document.removeEventListener('click', this.handleOutsideClick);
+        this.cdr.detectChanges();
+    }
+    handleOutsideClick = () => {
+        this.closeOverflowMenu();
+    };
+    // Overflow menu visibility helpers
+    get hasOverflowMenuItems() {
+        return this.showExportInOverflow ||
+            this.showColumnChooserInOverflow ||
+            (this._showEntityActionButtons && this._entityActions.length > 0) ||
+            this.hasSelectionDependentOverflowActions;
+    }
+    get showExportInOverflow() {
+        // Export is in overflow when it's not shown as a primary button
+        return !this.ShowExportButton && !!this.ToolbarConfig.showExport;
+    }
+    get showColumnChooserInOverflow() {
+        return this.AllowColumnToggle && !this.ToolbarConfig.showColumnChooser;
+    }
+    get hasSelectionDependentOverflowActions() {
+        return this.showCommunicationInOverflow;
+    }
+    get showCommunicationInOverflow() {
+        // Communication is in overflow when it's not shown as a primary button
+        return !this.ShowCommunicationButton && this.HasSelection;
+    }
+    // ========================================
+    // Toolbar Button State Helpers
+    // ========================================
+    get HasSelection() {
+        return this._selectedKeys.length > 0;
+    }
+    get HasMultipleSelection() {
+        return this._selectedKeys.length >= 2;
+    }
+    // ========================================
+    // CSS Helpers
+    // ========================================
+    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;
+        classes.push(`header-style-${vc.headerStyle}`);
+        if (vc.headerShadow)
+            classes.push('header-shadow');
+        if (vc.alternateRows)
+            classes.push(`alternate-rows-${vc.alternateRowContrast}`);
+        if (vc.hoverTransitions)
+            classes.push('hover-transitions');
+        classes.push(`cell-padding-${vc.cellPadding}`);
+        if (vc.checkboxStyle !== 'default')
+            classes.push(`checkbox-style-${vc.checkboxStyle}`);
+        return classes;
+    }
+    /**
+     * Apply visual configuration by setting CSS custom properties
+     */
+    applyVisualConfig() {
+        const vc = this.effectiveVisualConfig;
+        const el = this.elementRef.nativeElement;
+        // Set CSS custom properties for dynamic values
+        if (vc.headerBackground) {
+            el.style.setProperty('--grid-header-bg', vc.headerBackground);
+        }
+        if (vc.headerTextColor) {
+            el.style.setProperty('--grid-header-text', vc.headerTextColor);
+        }
+        if (vc.selectionIndicatorColor) {
+            el.style.setProperty('--grid-selection-indicator-color', vc.selectionIndicatorColor);
+        }
+        if (vc.selectionIndicatorWidth) {
+            el.style.setProperty('--grid-selection-indicator-width', `${vc.selectionIndicatorWidth}px`);
+        }
+        if (vc.selectionBackground) {
+            el.style.setProperty('--grid-row-selected-bg', vc.selectionBackground);
+        }
+        if (vc.checkboxColor) {
+            el.style.setProperty('--grid-checkbox-color', vc.checkboxColor);
+        }
+        if (vc.borderRadius !== undefined) {
+            el.style.setProperty('--grid-border-radius', `${vc.borderRadius}px`);
+        }
+        if (vc.accentColor) {
+            el.style.setProperty('--grid-accent-color', vc.accentColor);
+            el.style.setProperty('--grid-sort-indicator-color', vc.accentColor);
+        }
+        if (vc.hoverTransitionDuration) {
+            el.style.setProperty('--grid-hover-transition', `${vc.hoverTransitionDuration}ms`);
+        }
+        // Rebuild column defs if formatting options changed
+        if (this._entityInfo) {
+            this.buildAgColumnDefs();
+        }
+    }
+    get gridHeightStyle() {
+        if (typeof this._height === 'number') {
+            return `${this._height}px`;
+        }
+        return this._height === 'auto' ? '100%' : 'fit-content';
+    }
+    // ========================================
+    // Toolbar Button Helpers
+    // ========================================
+    isButtonVisible(button) {
+        if (button.visible === undefined)
+            return true;
+        if (typeof button.visible === 'boolean')
+            return button.visible;
+        if (typeof button.visible === 'function')
+            return button.visible();
+        return true;
+    }
+    isButtonDisabled(button) {
+        if (button.disabled === undefined)
+            return false;
+        if (typeof button.disabled === 'boolean')
+            return button.disabled;
+        if (typeof button.disabled === 'function')
+            return button.disabled();
+        return false;
+    }
+    onToolbarButtonClick(button) {
+        if (button.onClick) {
+            button.onClick();
+        }
+    }
+    // ========================================
+    // Public Getters
+    // ========================================
+    get VisibleRows() {
+        return Array.from(this._rowDataMap.values());
+    }
+    get VisibleColumnStates() {
+        return this._columnStates
+            .filter(c => c.visible)
+            .sort((a, b) => a.order - b.order);
+    }
+    static ɵfac = function EntityDataGridComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || EntityDataGridComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.ExportService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EntityDataGridComponent, selectors: [["mj-entity-data-grid"]], viewQuery: function EntityDataGridComponent_Query(rf, ctx) { if (rf & 1) {
+            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", 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", VirtualScroll: "VirtualScroll", ShowRowNumbers: "ShowRowNumbers", 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" }, outputs: { BeforeRowSelect: "BeforeRowSelect", AfterRowSelect: "AfterRowSelect", BeforeRowDeselect: "BeforeRowDeselect", AfterRowDeselect: "AfterRowDeselect", SelectionChange: "SelectionChange", BeforeRowClick: "BeforeRowClick", AfterRowClick: "AfterRowClick", BeforeRowDoubleClick: "BeforeRowDoubleClick", AfterRowDoubleClick: "AfterRowDoubleClick", 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", NavigationRequested: "NavigationRequested", NewRecordDialogRequested: "NewRecordDialogRequested", NewRecordTabRequested: "NewRecordTabRequested", CompareRecordsRequested: "CompareRecordsRequested", MergeRecordsRequested: "MergeRecordsRequested", CommunicationRequested: "CommunicationRequested", DuplicateSearchRequested: "DuplicateSearchRequested", AddToListRequested: "AddToListRequested", LoadEntityActionsRequested: "LoadEntityActionsRequested", EntityActionRequested: "EntityActionRequested" }, decls: 10, vars: 12, consts: [["gridContainer", ""], ["class", "mj-grid-toolbar", 4, "ngIf"], [1, "mj-grid-content"], ["class", "mj-grid-loading-overlay", 4, "ngIf"], ["class", "mj-grid-error", 4, "ngIf"], ["class", "mj-grid-empty", 4, "ngIf"], ["class", "mj-ag-grid ag-theme-alpine", 3, "theme", "columnDefs", "rowData", "defaultColDef", "rowSelection", "getRowId", "suppressCellFocus", "rowHeight", "headerHeight", "gridReady", "rowClicked", "rowDoubleClicked", "sortChanged", "selectionChanged", "columnResized", "columnMoved", 4, "ngIf"], ["class", "mj-ag-grid ag-theme-alpine", 3, "theme", "columnDefs", "defaultColDef", "rowSelection", "getRowId", "suppressCellFocus", "rowHeight", "headerHeight", "rowModelType", "cacheBlockSize", "maxBlocksInCache", "infiniteInitialRowCount", "cacheOverflowSize", "gridReady", "rowClicked", "rowDoubleClicked", "sortChanged", "selectionChanged", "columnResized", "columnMoved", 4, "ngIf"], [3, "closed", "visible", "config"], [1, "mj-grid-toolbar"], [1, "toolbar-left"], ["class", "toolbar-search", 4, "ngIf"], [4, "ngFor", "ngForOf"], [1, "toolbar-center"], ["class", "row-count", 4, "ngIf"], ["class", "selection-count", 4, "ngIf"], [1, "toolbar-right"], ["class", "toolbar-button", "title", "Create new record", 3, "click", 4, "ngIf"], ["class", "toolbar-button", "title", "Refresh data", 3, "disabled", "click", 4, "ngIf"], ["class", "toolbar-button", "title", "Export to Excel", 3, "click", 4, "ngIf"], ["class", "toolbar-button toolbar-button-danger", "title", "Delete selected records", 3, "click", 4, "ngIf"], ["class", "toolbar-button", "title", "Compare selected records", 3, "disabled", "click", 4, "ngIf"], ["class", "toolbar-button", "title", "Merge selected records", 3, "disabled", "click", 4, "ngIf"], ["class", "toolbar-button", "title", "Add selected records to a list", 3, "disabled", "click", 4, "ngIf"], ["class", "toolbar-button", "title", "Search for duplicate records", 3, "disabled", "click", 4, "ngIf"], ["class", "toolbar-button", "title", "Send message to selected records", 3, "disabled", "click", 4, "ngIf"], ["class", "toolbar-button", "title", "Add New", 3, "click", 4, "ngIf"], ["class", "toolbar-button", "title", "Refresh", 3, "disabled", "click", 4, "ngIf"], ["class", "toolbar-button toolbar-button-danger", "title", "Delete Selected", 3, "click", 4, "ngIf"], ["class", "toolbar-button", "title", "Export", 3, "click", 4, "ngIf"], ["class", "toolbar-button", "title", "Column Chooser", 3, "click", 4, "ngIf"], ["class", "toolbar-overflow", 3, "click", 4, "ngIf"], [1, "toolbar-search"], [1, "fa-solid", "fa-search", "search-icon"], ["type", "text", 1, "search-input", 3, "input", "placeholder", "value"], ["class", "search-clear", 3, "click", 4, "ngIf"], [1, "search-clear", 3, "click"], [1, "fa-solid", "fa-times"], ["class", "toolbar-button", 3, "class", "disabled", "title", "click", 4, "ngIf"], [1, "toolbar-button", 3, "click", "disabled", "title"], [3, "class", 4, "ngIf"], [4, "ngIf"], [1, "row-count"], [1, "selection-count"], ["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 to Excel", 1, "toolbar-button", 3, "click"], [1, "fa-solid", "fa-file-excel"], ["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"], ["title", "Add selected records to a list", 1, "toolbar-button", 3, "click", "disabled"], [1, "fa-solid", "fa-list-check"], ["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"], ["class", "overflow-menu", 4, "ngIf"], [1, "overflow-menu"], ["class", "overflow-item", 3, "click", 4, "ngIf"], ["class", "overflow-divider", 4, "ngIf"], [1, "overflow-item", 3, "click"], [1, "overflow-divider"], [1, "overflow-section-label"], ["class", "overflow-item", 3, "disabled", "click", 4, "ngFor", "ngForOf"], [1, "overflow-item", 3, "click", "disabled"], [1, "mj-grid-loading-overlay"], ["text", "Loading..."], [1, "mj-grid-error"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "error-retry", 3, "click"], [1, "mj-grid-empty"], [1, "fa-solid", "fa-inbox"], [1, "mj-ag-grid", "ag-theme-alpine", 3, "gridReady", "rowClicked", "rowDoubleClicked", "sortChanged", "selectionChanged", "columnResized", "columnMoved", "theme", "columnDefs", "rowData", "defaultColDef", "rowSelection", "getRowId", "suppressCellFocus", "rowHeight", "headerHeight"], [1, "mj-ag-grid", "ag-theme-alpine", 3, "gridReady", "rowClicked", "rowDoubleClicked", "sortChanged", "selectionChanged", "columnResized", "columnMoved", "theme", "columnDefs", "defaultColDef", "rowSelection", "getRowId", "suppressCellFocus", "rowHeight", "headerHeight", "rowModelType", "cacheBlockSize", "maxBlocksInCache", "infiniteInitialRowCount", "cacheOverflowSize"]], template: function EntityDataGridComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", null, 0);
+            i0.ɵɵtemplate(2, EntityDataGridComponent_div_2_Template, 24, 20, "div", 1);
+            i0.ɵɵelementStart(3, "div", 2);
+            i0.ɵɵtemplate(4, EntityDataGridComponent_div_4_Template, 2, 0, "div", 3)(5, EntityDataGridComponent_div_5_Template, 6, 1, "div", 4)(6, EntityDataGridComponent_div_6_Template, 4, 0, "div", 5)(7, EntityDataGridComponent_ag_grid_angular_7_Template, 1, 9, "ag-grid-angular", 6)(8, EntityDataGridComponent_ag_grid_angular_8_Template, 1, 13, "ag-grid-angular", 7);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(9, "mj-export-dialog", 8);
+            i0.ɵɵlistener("closed", function EntityDataGridComponent_Template_mj_export_dialog_closed_9_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onExportDialogClosed($event)); });
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵclassMap(ctx.gridContainerClasses.join(" "));
+            i0.ɵɵstyleProp("height", ctx.gridHeightStyle);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.ShowToolbar);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.loading && ctx.rowData.length === 0);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.errorMessage && !ctx.loading);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", !ctx.loading && !ctx.errorMessage && ctx.rowData.length === 0);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", !ctx.errorMessage && ctx.PaginationMode === "client" && (ctx.rowData.length > 0 || ctx.loading));
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", !ctx.errorMessage && ctx.PaginationMode === "infinite");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("visible", ctx.showExportDialog)("config", ctx.exportDialogConfig);
+        } }, dependencies: [i2.NgForOf, i2.NgIf, i3.AgGridAngular, i4.LoadingComponent, i1.ExportDialogComponent], styles: ["\n\n\n\n\n[_nghost-%COMP%] {\n  \n\n  --grid-border-color: #e0e0e0;\n  --grid-border-radius: 0px;\n  --grid-background: #ffffff;\n\n  \n\n  --grid-header-bg: #fafafa;\n  --grid-header-text: #333333;\n  --grid-header-font-weight: 600;\n  --grid-header-height: 40px;\n  --grid-header-border-color: #e0e0e0;\n\n  \n\n  --grid-row-height: 40px;\n  --grid-row-bg: #ffffff;\n  --grid-row-bg-alt: #fafafa;\n  --grid-row-hover-bg: #f5f5f5;\n  --grid-row-selected-bg: #fff9e6;\n  --grid-row-selected-hover-bg: #fff3cc;\n\n  \n\n  --grid-cell-padding: 8px 12px;\n  --grid-cell-text: #333333;\n  --grid-cell-border-color: #f0f0f0;\n\n  \n\n  --grid-checkbox-color: #2196F3;\n  --grid-selection-indicator-color: #f9a825;\n\n  \n\n  --grid-edit-cell-bg: #ffffff;\n  --grid-edit-cell-border: #2196F3;\n  --grid-edit-cell-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n\n  \n\n  --grid-sort-indicator-color: #2196F3;\n\n  \n\n  --grid-toolbar-bg: #ffffff;\n  --grid-toolbar-height: 48px;\n  --grid-toolbar-border-color: #e0e0e0;\n\n  \n\n  --grid-loading-overlay-bg: rgba(255, 255, 255, 0.8);\n\n  \n\n  --grid-empty-text-color: #999999;\n  --grid-empty-icon-color: #cccccc;\n\n  display: block;\n  height: 100%;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\n}\n\n\n\n\n\n\n.mj-grid-container[_ngcontent-%COMP%] {\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\n\n\n\n.mj-grid-toolbar[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%], \n.toolbar-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.toolbar-center[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #666;\n  font-size: 13px;\n}\n\n.toolbar-search[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n\n.search-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 10px;\n  color: #999;\n  font-size: 13px;\n}\n\n.search-input[_ngcontent-%COMP%] {\n  padding: 6px 30px 6px 32px;\n  border: 1px solid #ddd;\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[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--grid-selection-indicator-color);\n  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);\n}\n\n.search-clear[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 6px;\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 4px;\n  color: #999;\n  font-size: 12px;\n}\n\n.search-clear[_ngcontent-%COMP%]:hover {\n  color: #666;\n}\n\n.toolbar-button[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: #f5f5f5;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 13px;\n  color: #333;\n  transition: background-color 0.2s, border-color 0.2s;\n}\n\n.toolbar-button[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #eee;\n  border-color: #ccc;\n}\n\n.toolbar-button[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.toolbar-button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.toolbar-button-danger[_ngcontent-%COMP%] {\n  color: #d32f2f;\n}\n\n.toolbar-button-danger[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #ffebee;\n  border-color: #ffcdd2;\n}\n\n.row-count[_ngcontent-%COMP%], \n.selection-count[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n\n\n\n\n\n.mj-grid-content[_ngcontent-%COMP%] {\n  flex: 1;\n  position: relative;\n  overflow: hidden;\n}\n\n.mj-grid-scroll-container[_ngcontent-%COMP%] {\n  height: 100%;\n  overflow: auto;\n}\n\n\n\n\n\n\n.mj-grid-loading-overlay[_ngcontent-%COMP%] {\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\n\n\n\n.mj-grid-error[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  color: #d32f2f;\n  gap: 12px;\n}\n\n.mj-grid-error[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 32px;\n}\n\n.error-retry[_ngcontent-%COMP%] {\n  padding: 8px 16px;\n  background: #d32f2f;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 14px;\n}\n\n.error-retry[_ngcontent-%COMP%]:hover {\n  background: #c62828;\n}\n\n\n\n\n\n\n.mj-grid-empty[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 20px;\n  color: var(--grid-empty-text-color);\n  gap: 12px;\n}\n\n.mj-grid-empty[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 48px;\n  color: var(--grid-empty-icon-color);\n}\n\n\n\n\n\n\n.mj-grid-header[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:last-child {\n  border-right: none;\n}\n\n.mj-grid-header-cell.sortable[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n.mj-grid-header-cell.sortable[_ngcontent-%COMP%]:hover {\n  background: rgba(0, 0, 0, 0.04);\n}\n\n.header-text[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sort-indicator[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  margin-left: 6px;\n  color: var(--grid-sort-indicator-color);\n}\n\n.sort-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.sort-index[_ngcontent-%COMP%] {\n  font-size: 10px;\n  margin-left: 2px;\n  font-weight: normal;\n}\n\n\n\n\n\n\n.mj-grid-row[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  background: var(--grid-row-hover-bg);\n}\n\n.mj-grid-row.grid-row-alt[_ngcontent-%COMP%] {\n  background: var(--grid-row-bg-alt);\n}\n\n.mj-grid-row.grid-row-alt[_ngcontent-%COMP%]:hover {\n  background: var(--grid-row-hover-bg);\n}\n\n.mj-grid-row.grid-row-selected[_ngcontent-%COMP%] {\n  background: var(--grid-row-selected-bg);\n}\n\n.mj-grid-row.grid-row-selected[_ngcontent-%COMP%]:hover {\n  background: var(--grid-row-selected-hover-bg);\n}\n\n.mj-grid-row.grid-row-editing[_ngcontent-%COMP%] {\n  background: #fffde7;\n}\n\n.mj-grid-row.grid-row-dirty[_ngcontent-%COMP%] {\n  border-left: 3px solid #ff9800;\n}\n\n\n\n\n\n\n.mj-grid-cell[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:last-child {\n  border-right: none;\n}\n\n\n\n.grid-lines-horizontal[_ngcontent-%COMP%]   .mj-grid-row[_ngcontent-%COMP%] {\n  border-bottom: 1px solid var(--grid-cell-border-color);\n}\n\n.grid-lines-vertical[_ngcontent-%COMP%]   .mj-grid-cell[_ngcontent-%COMP%] {\n  border-right: 1px solid var(--grid-cell-border-color);\n}\n\n.grid-lines-both[_ngcontent-%COMP%]   .mj-grid-row[_ngcontent-%COMP%] {\n  border-bottom: 1px solid var(--grid-cell-border-color);\n}\n\n.grid-lines-both[_ngcontent-%COMP%]   .mj-grid-cell[_ngcontent-%COMP%] {\n  border-right: 1px solid var(--grid-cell-border-color);\n}\n\n\n\n.mj-grid-cell.align-left[_ngcontent-%COMP%] {\n  justify-content: flex-start;\n}\n\n.mj-grid-cell.align-center[_ngcontent-%COMP%] {\n  justify-content: center;\n}\n\n.mj-grid-cell.align-right[_ngcontent-%COMP%] {\n  justify-content: flex-end;\n}\n\n.cell-content[_ngcontent-%COMP%] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n\n\n.row-number-cell[_ngcontent-%COMP%] {\n  width: 50px;\n  min-width: 50px;\n  max-width: 50px;\n  justify-content: center;\n  color: #999;\n  font-size: 12px;\n  background: var(--grid-header-bg);\n}\n\n.checkbox-cell[_ngcontent-%COMP%] {\n  width: 40px;\n  min-width: 40px;\n  max-width: 40px;\n  justify-content: center;\n}\n\n.checkbox-cell[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n  accent-color: var(--grid-checkbox-color);\n}\n\n\n\n\n\n\n.mj-grid-virtual-spacer[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n}\n\n\n\n\n\n\n@media (max-width: 768px) {\n  .mj-grid-toolbar[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n    padding: 8px;\n  }\n\n  .toolbar-search[_ngcontent-%COMP%] {\n    order: 3;\n    width: 100%;\n    margin-top: 8px;\n  }\n\n  .search-input[_ngcontent-%COMP%] {\n    width: 100%;\n  }\n\n  .toolbar-center[_ngcontent-%COMP%] {\n    order: 2;\n  }\n\n  \n\n  .toolbar-button[_ngcontent-%COMP%]   .button-text[_ngcontent-%COMP%] {\n    display: none;\n  }\n}\n\n\n\n\n\n\n.toolbar-button[_ngcontent-%COMP%]   .button-text[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n\n\n\n\n\n.toolbar-overflow[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n.overflow-trigger[_ngcontent-%COMP%] {\n  padding: 6px 8px !important;\n}\n\n.overflow-trigger[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 16px;\n}\n\n.overflow-menu[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  margin-top: 4px;\n  min-width: 220px;\n  background: #ffffff;\n  border: 1px solid #e0e0e0;\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[_ngcontent-%COMP%] {\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: #333;\n  text-align: left;\n  gap: 12px;\n  transition: background-color 0.15s;\n}\n\n.overflow-item[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #f5f5f5;\n}\n\n.overflow-item[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.overflow-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 18px;\n  font-size: 14px;\n  color: #666;\n  text-align: center;\n}\n\n.overflow-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n.overflow-divider[_ngcontent-%COMP%] {\n  height: 1px;\n  background: #e0e0e0;\n  margin: 4px 0;\n}\n\n.overflow-section-label[_ngcontent-%COMP%] {\n  padding: 8px 16px 4px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  color: #999;\n  letter-spacing: 0.5px;\n}\n\n\n\n.overflow-item.action-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #2196F3;\n}\n\n\n\n\n\n\n  .highlight-match {\n  background-color: #fff176;\n  border-radius: 2px;\n  padding: 0 1px;\n}\n\n\n\n\n\n\n.mj-ag-grid[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n}\n\n  .ag-theme-alpine {\n  \n\n  --ag-row-hover-color: var(--grid-row-hover-bg);\n  --ag-selected-row-background-color: var(--grid-row-selected-bg);\n  --ag-header-background-color: var(--grid-header-bg);\n\n  \n\n  --ag-range-selection-background-color: rgba(249, 168, 37, 0.15);\n  --ag-range-selection-border-color: #f9a825;\n\n  \n\n  --ag-borders: none;\n  --ag-row-border-color: var(--grid-cell-border-color);\n}\n\n\n\n  .ag-row-selected {\n  box-shadow: inset 4px 0 0 0 #f9a825;\n}\n\n\n\n  .ag-theme-alpine .ag-checkbox-input-wrapper {\n  width: 18px;\n  height: 18px;\n}\n\n  .ag-theme-alpine .ag-checkbox-input-wrapper.ag-checked::after {\n  color: var(--grid-checkbox-color, #2196F3);\n}\n\n\n\n  .ag-theme-alpine .ag-row:hover:not(.ag-row-selected) {\n  background-color: var(--grid-row-hover-bg, #f0f7ff);\n}\n\n\n\n\n\n\n\n\n.header-style-flat[_ngcontent-%COMP%]     .ag-header {\n  background: var(--grid-header-bg, #fafafa);\n  border-bottom: 1px solid var(--grid-header-border-color, #e0e0e0);\n}\n\n\n\n.header-style-elevated[_ngcontent-%COMP%]     .ag-header {\n  background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);\n  border-bottom: 1px solid var(--grid-header-border-color, #e0e0e0);\n}\n\n.header-style-elevated.header-shadow[_ngcontent-%COMP%]     .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\n\n.header-style-gradient[_ngcontent-%COMP%]     .ag-header {\n  background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);\n  border-bottom: none;\n}\n\n.header-style-gradient.header-shadow[_ngcontent-%COMP%]     .ag-header {\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n\n\n.header-style-bold[_ngcontent-%COMP%]     .ag-header {\n  background: linear-gradient(180deg, #37474f 0%, #263238 100%);\n  border-bottom: none;\n}\n\n.header-style-bold[_ngcontent-%COMP%]     .ag-header-cell-text {\n  color: #ffffff;\n  font-weight: 600;\n}\n\n.header-style-bold[_ngcontent-%COMP%]     .ag-header-icon {\n  color: rgba(255, 255, 255, 0.7);\n}\n\n.header-style-bold[_ngcontent-%COMP%]     .ag-header-cell:hover {\n  background: rgba(255, 255, 255, 0.1);\n}\n\n\n\n  .ag-header-cell-sorted-asc .ag-icon-asc, \n  .ag-header-cell-sorted-desc .ag-icon-desc {\n  color: var(--grid-accent-color, var(--grid-sort-indicator-color, #2196F3));\n}\n\n\n\n\n\n\n\n\n.alternate-rows-subtle[_ngcontent-%COMP%]     .ag-row-odd {\n  background-color: rgba(0, 0, 0, 0.015);\n}\n\n.alternate-rows-subtle[_ngcontent-%COMP%]     .ag-row-odd:hover:not(.ag-row-selected) {\n  background-color: var(--grid-row-hover-bg, #f5f5f5);\n}\n\n\n\n.alternate-rows-medium[_ngcontent-%COMP%]     .ag-row-odd {\n  background-color: rgba(0, 0, 0, 0.025);\n}\n\n.alternate-rows-medium[_ngcontent-%COMP%]     .ag-row-odd:hover:not(.ag-row-selected) {\n  background-color: var(--grid-row-hover-bg, #f5f5f5);\n}\n\n\n\n.alternate-rows-strong[_ngcontent-%COMP%]     .ag-row-odd {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n\n.alternate-rows-strong[_ngcontent-%COMP%]     .ag-row-odd:hover:not(.ag-row-selected) {\n  background-color: var(--grid-row-hover-bg, #f5f5f5);\n}\n\n\n\n\n\n\n.hover-transitions[_ngcontent-%COMP%]     .ag-row {\n  transition: background-color var(--grid-hover-transition, 150ms) ease;\n}\n\n.hover-transitions[_ngcontent-%COMP%]     .ag-cell {\n  transition: background-color var(--grid-hover-transition, 150ms) ease;\n}\n\n\n\n\n\n\n.cell-padding-compact[_ngcontent-%COMP%]     .ag-cell {\n  padding-left: 8px;\n  padding-right: 8px;\n}\n\n.cell-padding-compact[_ngcontent-%COMP%]     .ag-header-cell {\n  padding-left: 8px;\n  padding-right: 8px;\n}\n\n.cell-padding-normal[_ngcontent-%COMP%]     .ag-cell {\n  padding-left: 12px;\n  padding-right: 12px;\n}\n\n.cell-padding-normal[_ngcontent-%COMP%]     .ag-header-cell {\n  padding-left: 12px;\n  padding-right: 12px;\n}\n\n.cell-padding-comfortable[_ngcontent-%COMP%]     .ag-cell {\n  padding-left: 16px;\n  padding-right: 16px;\n}\n\n.cell-padding-comfortable[_ngcontent-%COMP%]     .ag-header-cell {\n  padding-left: 16px;\n  padding-right: 16px;\n}\n\n\n\n\n\n\n\n\n.checkbox-style-rounded[_ngcontent-%COMP%]     .ag-checkbox-input-wrapper {\n  border-radius: 4px;\n}\n\n.checkbox-style-rounded[_ngcontent-%COMP%]     .ag-checkbox-input-wrapper::after {\n  border-radius: 3px;\n}\n\n\n\n.checkbox-style-filled[_ngcontent-%COMP%]     .ag-checkbox-input-wrapper.ag-checked {\n  background-color: var(--grid-checkbox-color, #2196F3);\n  border-color: var(--grid-checkbox-color, #2196F3);\n}\n\n.checkbox-style-filled[_ngcontent-%COMP%]     .ag-checkbox-input-wrapper.ag-checked::after {\n  color: #ffffff;\n}\n\n\n\n\n\n\n\n\n  .cell-align-right {\n  text-align: right;\n  justify-content: flex-end;\n}\n\n  .header-align-right .ag-header-cell-label {\n  justify-content: flex-end;\n}\n\n\n\n  .cell-empty {\n  color: #bdbdbd;\n  font-style: normal;\n}\n\n\n\n  .cell-boolean-true {\n  color: #43a047;\n  font-size: 14px;\n}\n\n  .cell-boolean-false {\n  color: #bdbdbd;\n  font-size: 14px;\n}\n\n\n\n  .cell-link {\n  color: var(--grid-accent-color, #2196F3);\n  text-decoration: none;\n  transition: color 0.15s;\n  font-size: inherit;\n  font-family: inherit;\n  line-height: inherit;\n}\n\n  .cell-link:hover {\n  color: #1976D2;\n  text-decoration: underline;\n}\n\n\n\n  .cell-email {\n  font-family: inherit;\n  font-size: 13px;\n}\n\n\n\n  .cell-url {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n  font-size: 13px;\n}\n\n\n\n  .cell-phone {\n  font-variant-numeric: tabular-nums;\n  letter-spacing: 0.3px;\n}\n\n\n\n\n\n\n@keyframes _ngcontent-%COMP%_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[_ngcontent-%COMP%] {\n  display: flex;\n  height: 40px;\n  align-items: center;\n  padding: 0 12px;\n  border-bottom: 1px solid var(--grid-cell-border-color, #f0f0f0);\n}\n\n.skeleton-cell[_ngcontent-%COMP%] {\n  height: 16px;\n  border-radius: 4px;\n  background: linear-gradient(\n    90deg,\n    #f0f0f0 0px,\n    #e8e8e8 40px,\n    #f0f0f0 80px\n  );\n  background-size: 200px 100%;\n  animation: _ngcontent-%COMP%_skeleton-shimmer 1.5s ease-in-out infinite;\n}\n\n.skeleton-cell-short[_ngcontent-%COMP%] {\n  width: 60px;\n}\n\n.skeleton-cell-medium[_ngcontent-%COMP%] {\n  width: 120px;\n}\n\n.skeleton-cell-long[_ngcontent-%COMP%] {\n  width: 180px;\n}\n\n\n\n  .ag-header-select-all {\n  margin-right: 0;\n}\n\n\n\n\n\n\n  .ag-theme-alpine .ag-row {\n  border-bottom: 1px solid var(--grid-cell-border-color, #f0f0f0);\n}\n\n  .ag-theme-alpine .ag-row:last-child {\n  border-bottom: none;\n}\n\n\n\n\n\n\n  .ag-theme-alpine .ag-cell-focus {\n  border: none !important;\n  outline: none !important;\n}\n\n  .ag-theme-alpine .ag-header-cell:focus {\n  outline: 2px solid var(--grid-accent-color, #2196F3);\n  outline-offset: -2px;\n}\n\n\n\n\n\n\n  .ag-body-viewport::-webkit-scrollbar {\n  width: 8px;\n  height: 8px;\n}\n\n  .ag-body-viewport::-webkit-scrollbar-track {\n  background: #f5f5f5;\n  border-radius: 4px;\n}\n\n  .ag-body-viewport::-webkit-scrollbar-thumb {\n  background: #c0c0c0;\n  border-radius: 4px;\n}\n\n  .ag-body-viewport::-webkit-scrollbar-thumb:hover {\n  background: #a0a0a0;\n}\n\n\n\n\n\n\n  .ag-theme-alpine .ag-pinned-left-cols-container {\n  border-right: 2px solid var(--grid-border-color, #e0e0e0);\n}\n\n  .ag-theme-alpine .ag-pinned-right-cols-container {\n  border-left: 2px solid var(--grid-border-color, #e0e0e0);\n}\n\n\n\n\n\n\n  .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: #546e7a;\n}\n\n  .ag-theme-alpine .ag-header-cell:hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n\n  .ag-theme-alpine .ag-header-cell-sortable:hover .ag-header-cell-label {\n  color: var(--grid-accent-color, #2196F3);\n}\n\n\n\n  .ag-theme-alpine .ag-sort-indicator-icon {\n  transition: transform 0.2s ease;\n}\n\n  .ag-theme-alpine .ag-header-cell:hover .ag-sort-indicator-icon {\n  transform: scale(1.1);\n}"], data: { animation: [
+                trigger('fadeIn', [
+                    transition(':enter', [
+                        style({ opacity: 0, transform: 'translateY(-8px)' }),
+                        animate('150ms ease-out', style({ opacity: 1, transform: 'translateY(0)' }))
+                    ]),
+                    transition(':leave', [
+                        animate('100ms ease-in', style({ opacity: 0, transform: 'translateY(-8px)' }))
+                    ])
+                ])
+            ] } });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EntityDataGridComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-entity-data-grid', animations: [
+                    trigger('fadeIn', [
+                        transition(':enter', [
+                            style({ opacity: 0, transform: 'translateY(-8px)' }),
+                            animate('150ms ease-out', style({ opacity: 1, transform: 'translateY(0)' }))
+                        ]),
+                        transition(':leave', [
+                            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  <div *ngIf=\"ShowToolbar\" class=\"mj-grid-toolbar\">\n    <div class=\"toolbar-left\">\n      <!-- Search -->\n      <div *ngIf=\"ShowSearch\" 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        <button\n          *ngIf=\"FilterText\"\n          class=\"search-clear\"\n          (click)=\"FilterText = ''\">\n          <i class=\"fa-solid fa-times\"></i>\n        </button>\n      </div>\n\n      <!-- Custom Left Buttons -->\n      <ng-container *ngFor=\"let button of ToolbarConfig.customButtons\">\n        <button\n          *ngIf=\"button.position !== 'right' && isButtonVisible(button)\"\n          class=\"toolbar-button\"\n          [class]=\"button.cssClass\"\n          [disabled]=\"isButtonDisabled(button)\"\n          [title]=\"button.tooltip || ''\"\n          (click)=\"onToolbarButtonClick(button)\">\n          <i *ngIf=\"button.icon\" [class]=\"button.icon\"></i>\n          <span *ngIf=\"button.text\">{{ button.text }}</span>\n        </button>\n      </ng-container>\n    </div>\n\n    <div class=\"toolbar-center\">\n      <!-- Row Count -->\n      <span *ngIf=\"ToolbarConfig.showRowCount !== false\" class=\"row-count\">\n        {{ totalRowCount }} {{ totalRowCount === 1 ? 'row' : 'rows' }}\n      </span>\n\n      <!-- Selection Count -->\n      <span *ngIf=\"ToolbarConfig.showSelectionCount && SelectedKeys.length > 0\" class=\"selection-count\">\n        ({{ SelectedKeys.length }} selected)\n      </span>\n    </div>\n\n    <div class=\"toolbar-right\">\n      <!-- New/Add Button (predefined) -->\n      <button\n        *ngIf=\"ShowNewButton\"\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      <button\n        *ngIf=\"ShowRefreshButton\"\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      <button\n        *ngIf=\"ShowExportButton\"\n        class=\"toolbar-button\"\n        title=\"Export to Excel\"\n        (click)=\"onExportClick()\">\n        <i class=\"fa-solid fa-file-excel\"></i>\n        <span class=\"button-text\">Export</span>\n      </button>\n\n      <!-- Delete Button (predefined) -->\n      <button\n        *ngIf=\"ShowDeleteButton && HasSelection\"\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      <button\n        *ngIf=\"ShowCompareButton\"\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      <button\n        *ngIf=\"ShowMergeButton\"\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      <button\n        *ngIf=\"ShowAddToListButton\"\n        class=\"toolbar-button\"\n        title=\"Add selected records to a list\"\n        [disabled]=\"!HasSelection\"\n        (click)=\"onAddToListClick()\">\n        <i class=\"fa-solid fa-list-check\"></i>\n        <span class=\"button-text\">Add to List</span>\n      </button>\n\n      <!-- Search for Duplicates Button (predefined) -->\n      <button\n        *ngIf=\"ShowDuplicateSearchButton\"\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      <button\n        *ngIf=\"ShowCommunicationButton\"\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      <button\n        *ngIf=\"ToolbarConfig.showAdd && AllowAdd && !ShowNewButton\"\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      <button\n        *ngIf=\"ToolbarConfig.showRefresh !== false && !ShowRefreshButton\"\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      <button\n        *ngIf=\"ToolbarConfig.showDelete && AllowDelete && HasSelection && !ShowDeleteButton\"\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      <button\n        *ngIf=\"ToolbarConfig.showExport && !ShowExportButton\"\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      <button\n        *ngIf=\"ToolbarConfig.showColumnChooser && AllowColumnToggle\"\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      <ng-container *ngFor=\"let button of ToolbarConfig.customButtons\">\n        <button\n          *ngIf=\"button.position === 'right' && isButtonVisible(button)\"\n          class=\"toolbar-button\"\n          [class]=\"button.cssClass\"\n          [disabled]=\"isButtonDisabled(button)\"\n          [title]=\"button.tooltip || ''\"\n          (click)=\"onToolbarButtonClick(button)\">\n          <i *ngIf=\"button.icon\" [class]=\"button.icon\"></i>\n          <span *ngIf=\"button.text\">{{ button.text }}</span>\n        </button>\n      </ng-container>\n\n      <!-- Overflow Menu -->\n      <div *ngIf=\"hasOverflowMenuItems\" 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\n        <div *ngIf=\"showOverflowMenu\" class=\"overflow-menu\" [@fadeIn]>\n          <!-- Export (if in overflow) -->\n          <button *ngIf=\"showExportInOverflow\" class=\"overflow-item\" (click)=\"onExportClick(); closeOverflowMenu()\">\n            <i class=\"fa-solid fa-file-excel\"></i>\n            <span>Export to Excel</span>\n          </button>\n\n          <!-- Entity Actions -->\n          <ng-container *ngIf=\"ShowEntityActionButtons && EntityActions.length > 0\">\n            <div class=\"overflow-divider\"></div>\n            <div class=\"overflow-section-label\">Actions</div>\n            <button\n              *ngFor=\"let action of EntityActions\"\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          </ng-container>\n\n          <!-- Column Chooser (if in overflow) -->\n          <div *ngIf=\"showColumnChooserInOverflow\" class=\"overflow-divider\"></div>\n          <button *ngIf=\"showColumnChooserInOverflow\" 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          <ng-container *ngIf=\"HasSelection && hasSelectionDependentOverflowActions\">\n            <div class=\"overflow-divider\"></div>\n            <button *ngIf=\"showCommunicationInOverflow\" class=\"overflow-item\" (click)=\"onCommunicationClick(); closeOverflowMenu()\">\n              <i class=\"fa-solid fa-envelope\"></i>\n              <span>Send Message</span>\n            </button>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Grid Content -->\n  <div class=\"mj-grid-content\">\n    <!-- Loading Overlay -->\n    <div *ngIf=\"loading && rowData.length === 0\" class=\"mj-grid-loading-overlay\">\n      <mj-loading text=\"Loading...\"></mj-loading>\n    </div>\n\n    <!-- Error State -->\n    <div *ngIf=\"errorMessage && !loading\" class=\"mj-grid-error\">\n      <i class=\"fa-solid fa-exclamation-triangle\"></i>\n      <span>{{ errorMessage }}</span>\n      <button class=\"error-retry\" (click)=\"Refresh()\">Retry</button>\n    </div>\n\n    <!-- Empty State -->\n    <div *ngIf=\"!loading && !errorMessage && rowData.length === 0\" class=\"mj-grid-empty\">\n      <i class=\"fa-solid fa-inbox\"></i>\n      <span>No data to display</span>\n    </div>\n\n    <!-- AG Grid (Client-side mode) -->\n    <ag-grid-angular\n      *ngIf=\"!errorMessage && PaginationMode === 'client' && (rowData.length > 0 || loading)\"\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      (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    <!-- AG Grid (Infinite Scroll mode) -->\n    <ag-grid-angular\n      *ngIf=\"!errorMessage && PaginationMode === 'infinite'\"\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      (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  </div>\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", styles: ["/* ========================================\n   CSS Custom Properties (Theme Variables)\n   ======================================== */\n\n:host {\n  /* Grid container */\n  --grid-border-color: #e0e0e0;\n  --grid-border-radius: 0px;\n  --grid-background: #ffffff;\n\n  /* Header */\n  --grid-header-bg: #fafafa;\n  --grid-header-text: #333333;\n  --grid-header-font-weight: 600;\n  --grid-header-height: 40px;\n  --grid-header-border-color: #e0e0e0;\n\n  /* Rows */\n  --grid-row-height: 40px;\n  --grid-row-bg: #ffffff;\n  --grid-row-bg-alt: #fafafa;\n  --grid-row-hover-bg: #f5f5f5;\n  --grid-row-selected-bg: #fff9e6;\n  --grid-row-selected-hover-bg: #fff3cc;\n\n  /* Cells */\n  --grid-cell-padding: 8px 12px;\n  --grid-cell-text: #333333;\n  --grid-cell-border-color: #f0f0f0;\n\n  /* Selection - mellow yellow to avoid conflict with blue hyperlinks */\n  --grid-checkbox-color: #2196F3;\n  --grid-selection-indicator-color: #f9a825;\n\n  /* Editing */\n  --grid-edit-cell-bg: #ffffff;\n  --grid-edit-cell-border: #2196F3;\n  --grid-edit-cell-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n\n  /* Sorting */\n  --grid-sort-indicator-color: #2196F3;\n\n  /* Toolbar */\n  --grid-toolbar-bg: #ffffff;\n  --grid-toolbar-height: 48px;\n  --grid-toolbar-border-color: #e0e0e0;\n\n  /* Loading */\n  --grid-loading-overlay-bg: rgba(255, 255, 255, 0.8);\n\n  /* Empty state */\n  --grid-empty-text-color: #999999;\n  --grid-empty-icon-color: #cccccc;\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: #666;\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: #999;\n  font-size: 13px;\n}\n\n.search-input {\n  padding: 6px 30px 6px 32px;\n  border: 1px solid #ddd;\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 rgba(33, 150, 243, 0.1);\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: #999;\n  font-size: 12px;\n}\n\n.search-clear:hover {\n  color: #666;\n}\n\n.toolbar-button {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: #f5f5f5;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 13px;\n  color: #333;\n  transition: background-color 0.2s, border-color 0.2s;\n}\n\n.toolbar-button:hover:not(:disabled) {\n  background: #eee;\n  border-color: #ccc;\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: #d32f2f;\n}\n\n.toolbar-button-danger:hover:not(:disabled) {\n  background: #ffebee;\n  border-color: #ffcdd2;\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.mj-grid-error {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  color: #d32f2f;\n  gap: 12px;\n}\n\n.mj-grid-error i {\n  font-size: 32px;\n}\n\n.error-retry {\n  padding: 8px 16px;\n  background: #d32f2f;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 14px;\n}\n\n.error-retry:hover {\n  background: #c62828;\n}\n\n/* ========================================\n   Empty State\n   ======================================== */\n\n.mj-grid-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 20px;\n  color: var(--grid-empty-text-color);\n  gap: 12px;\n}\n\n.mj-grid-empty i {\n  font-size: 48px;\n  color: var(--grid-empty-icon-color);\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: #fffde7;\n}\n\n.mj-grid-row.grid-row-dirty {\n  border-left: 3px solid #ff9800;\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: #999;\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: #ffffff;\n  border: 1px solid #e0e0e0;\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: #333;\n  text-align: left;\n  gap: 12px;\n  transition: background-color 0.15s;\n}\n\n.overflow-item:hover:not(:disabled) {\n  background: #f5f5f5;\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: #666;\n  text-align: center;\n}\n\n.overflow-item span {\n  flex: 1;\n}\n\n.overflow-divider {\n  height: 1px;\n  background: #e0e0e0;\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: #999;\n  letter-spacing: 0.5px;\n}\n\n/* Entity Actions submenu styling */\n.overflow-item.action-item i {\n  color: #2196F3;\n}\n\n/* ========================================\n   Highlight Matches\n   ======================================== */\n\n::ng-deep .highlight-match {\n  background-color: #fff176;\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::ng-deep .ag-theme-alpine {\n  /* Row colors */\n  --ag-row-hover-color: var(--grid-row-hover-bg);\n  --ag-selected-row-background-color: var(--grid-row-selected-bg);\n  --ag-header-background-color: var(--grid-header-bg);\n\n  /* Selection accent colors - mellow yellow */\n  --ag-range-selection-background-color: rgba(249, 168, 37, 0.15);\n  --ag-range-selection-border-color: #f9a825;\n\n  /* Ensure borders are visible */\n  --ag-borders: none;\n  --ag-row-border-color: var(--grid-cell-border-color);\n}\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 #f9a825;\n}\n\n/* Selection checkbox styling */\n::ng-deep .ag-theme-alpine .ag-checkbox-input-wrapper {\n  width: 18px;\n  height: 18px;\n}\n\n::ng-deep .ag-theme-alpine .ag-checkbox-input-wrapper.ag-checked::after {\n  color: var(--grid-checkbox-color, #2196F3);\n}\n\n/* Row hover effect */\n::ng-deep .ag-theme-alpine .ag-row:hover:not(.ag-row-selected) {\n  background-color: var(--grid-row-hover-bg, #f0f7ff);\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, #fafafa);\n  border-bottom: 1px solid var(--grid-header-border-color, #e0e0e0);\n}\n\n/* Elevated header (default - subtle shadow) */\n.header-style-elevated ::ng-deep .ag-header {\n  background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);\n  border-bottom: 1px solid var(--grid-header-border-color, #e0e0e0);\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: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);\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: linear-gradient(180deg, #37474f 0%, #263238 100%);\n  border-bottom: none;\n}\n\n.header-style-bold ::ng-deep .ag-header-cell-text {\n  color: #ffffff;\n  font-weight: 600;\n}\n\n.header-style-bold ::ng-deep .ag-header-icon {\n  color: rgba(255, 255, 255, 0.7);\n}\n\n.header-style-bold ::ng-deep .ag-header-cell:hover {\n  background: rgba(255, 255, 255, 0.1);\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, #2196F3));\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, #f5f5f5);\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, #f5f5f5);\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, #f5f5f5);\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, #2196F3);\n  border-color: var(--grid-checkbox-color, #2196F3);\n}\n\n.checkbox-style-filled ::ng-deep .ag-checkbox-input-wrapper.ag-checked::after {\n  color: #ffffff;\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: #bdbdbd;\n  font-style: normal;\n}\n\n/* Boolean icons */\n::ng-deep .cell-boolean-true {\n  color: #43a047;\n  font-size: 14px;\n}\n\n::ng-deep .cell-boolean-false {\n  color: #bdbdbd;\n  font-size: 14px;\n}\n\n/* Clickable links */\n::ng-deep .cell-link {\n  color: var(--grid-accent-color, #2196F3);\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: #1976D2;\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/* 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, #f0f0f0);\n}\n\n.skeleton-cell {\n  height: 16px;\n  border-radius: 4px;\n  background: linear-gradient(\n    90deg,\n    #f0f0f0 0px,\n    #e8e8e8 40px,\n    #f0f0f0 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, #f0f0f0);\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, #2196F3);\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: #f5f5f5;\n  border-radius: 4px;\n}\n\n::ng-deep .ag-body-viewport::-webkit-scrollbar-thumb {\n  background: #c0c0c0;\n  border-radius: 4px;\n}\n\n::ng-deep .ag-body-viewport::-webkit-scrollbar-thumb:hover {\n  background: #a0a0a0;\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, #e0e0e0);\n}\n\n::ng-deep .ag-theme-alpine .ag-pinned-right-cols-container {\n  border-left: 2px solid var(--grid-border-color, #e0e0e0);\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: #546e7a;\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, #2196F3);\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"] }]
+    }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.ExportService }], { Params: [{
+            type: Input
+        }], AllowLoad: [{
+            type: Input
+        }], AutoRefreshOnParamsChange: [{
+            type: Input
+        }], PaginationMode: [{
+            type: Input
+        }], PageSize: [{
+            type: Input
+        }], CacheBlockSize: [{
+            type: Input
+        }], MaxBlocksInCache: [{
+            type: Input
+        }], Data: [{
+            type: Input
+        }], Columns: [{
+            type: Input
+        }], GridState: [{
+            type: Input
+        }], AllowColumnReorder: [{
+            type: Input
+        }], AllowColumnResize: [{
+            type: Input
+        }], AllowColumnToggle: [{
+            type: Input
+        }], ShowHeader: [{
+            type: Input
+        }], AllowSorting: [{
+            type: Input
+        }], AllowMultiSort: [{
+            type: Input
+        }], ServerSideSorting: [{
+            type: Input
+        }], AllowColumnFilters: [{
+            type: Input
+        }], ShowSearch: [{
+            type: Input
+        }], SelectionMode: [{
+            type: Input
+        }], SelectedKeys: [{
+            type: Input
+        }], KeyField: [{
+            type: Input
+        }], EditMode: [{
+            type: Input
+        }], AllowAdd: [{
+            type: Input
+        }], AllowDelete: [{
+            type: Input
+        }], Height: [{
+            type: Input
+        }], RowHeight: [{
+            type: Input
+        }], VirtualScroll: [{
+            type: Input
+        }], ShowRowNumbers: [{
+            type: Input
+        }], Striped: [{
+            type: Input
+        }], GridLines: [{
+            type: Input
+        }], VisualConfig: [{
+            type: Input
+        }], ShowToolbar: [{
+            type: Input
+        }], ToolbarConfig: [{
+            type: Input
+        }], StateKey: [{
+            type: Input
+        }], AutoPersistState: [{
+            type: Input
+        }], StatePersistDebounce: [{
+            type: Input
+        }], RefreshDebounce: [{
+            type: Input
+        }], FilterText: [{
+            type: Input
+        }], ShowNewButton: [{
+            type: Input
+        }], ShowRefreshButton: [{
+            type: Input
+        }], ShowExportButton: [{
+            type: Input
+        }], ShowDeleteButton: [{
+            type: Input
+        }], ShowCompareButton: [{
+            type: Input
+        }], ShowMergeButton: [{
+            type: Input
+        }], ShowAddToListButton: [{
+            type: Input
+        }], ShowDuplicateSearchButton: [{
+            type: Input
+        }], ShowCommunicationButton: [{
+            type: Input
+        }], AutoNavigate: [{
+            type: Input
+        }], NavigateOnDoubleClick: [{
+            type: Input
+        }], CreateRecordMode: [{
+            type: Input
+        }], NewRecordValues: [{
+            type: Input
+        }], ShowEntityActionButtons: [{
+            type: Input
+        }], EntityActions: [{
+            type: Input
+        }], BeforeRowSelect: [{
+            type: Output
+        }], AfterRowSelect: [{
+            type: Output
+        }], BeforeRowDeselect: [{
+            type: Output
+        }], AfterRowDeselect: [{
+            type: Output
+        }], SelectionChange: [{
+            type: Output
+        }], BeforeRowClick: [{
+            type: Output
+        }], AfterRowClick: [{
+            type: Output
+        }], BeforeRowDoubleClick: [{
+            type: Output
+        }], AfterRowDoubleClick: [{
+            type: Output
+        }], BeforeCellEdit: [{
+            type: Output
+        }], AfterCellEditBegin: [{
+            type: Output
+        }], BeforeCellEditCommit: [{
+            type: Output
+        }], AfterCellEditCommit: [{
+            type: Output
+        }], BeforeCellEditCancel: [{
+            type: Output
+        }], AfterCellEditCancel: [{
+            type: Output
+        }], BeforeRowSave: [{
+            type: Output
+        }], AfterRowSave: [{
+            type: Output
+        }], BeforeRowDelete: [{
+            type: Output
+        }], AfterRowDelete: [{
+            type: Output
+        }], BeforeDataLoad: [{
+            type: Output
+        }], AfterDataLoad: [{
+            type: Output
+        }], BeforeDataRefresh: [{
+            type: Output
+        }], AfterDataRefresh: [{
+            type: Output
+        }], BeforeSort: [{
+            type: Output
+        }], AfterSort: [{
+            type: Output
+        }], BeforeColumnReorder: [{
+            type: Output
+        }], AfterColumnReorder: [{
+            type: Output
+        }], BeforeColumnResize: [{
+            type: Output
+        }], AfterColumnResize: [{
+            type: Output
+        }], BeforeColumnVisibilityChange: [{
+            type: Output
+        }], AfterColumnVisibilityChange: [{
+            type: Output
+        }], GridStateChanged: [{
+            type: Output
+        }], AddRequested: [{
+            type: Output
+        }], DeleteRequested: [{
+            type: Output
+        }], ExportRequested: [{
+            type: Output
+        }], NewButtonClick: [{
+            type: Output
+        }], RefreshButtonClick: [{
+            type: Output
+        }], ExportButtonClick: [{
+            type: Output
+        }], DeleteButtonClick: [{
+            type: Output
+        }], CompareButtonClick: [{
+            type: Output
+        }], MergeButtonClick: [{
+            type: Output
+        }], AddToListButtonClick: [{
+            type: Output
+        }], DuplicateSearchButtonClick: [{
+            type: Output
+        }], CommunicationButtonClick: [{
+            type: Output
+        }], NavigationRequested: [{
+            type: Output
+        }], NewRecordDialogRequested: [{
+            type: Output
+        }], NewRecordTabRequested: [{
+            type: Output
+        }], CompareRecordsRequested: [{
+            type: Output
+        }], MergeRecordsRequested: [{
+            type: Output
+        }], CommunicationRequested: [{
+            type: Output
+        }], DuplicateSearchRequested: [{
+            type: Output
+        }], AddToListRequested: [{
+            type: Output
+        }], LoadEntityActionsRequested: [{
+            type: Output
+        }], EntityActionRequested: [{
+            type: Output
+        }], gridContainer: [{
+            type: ViewChild,
+            args: ['gridContainer']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EntityDataGridComponent, { className: "EntityDataGridComponent" }); })();
+//# sourceMappingURL=entity-data-grid.component.js.map