@memberjunction/ng-entity-viewer 2.132.0 → 3.0.0

package/dist/lib/entity-viewer/entity-viewer.component.js

@@ -1,33 +1,34 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
 import { Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
 import { EntityFieldTSType, RunView } from '@memberjunction/core';
 import { TimelineGroup } from '@memberjunction/ng-timeline';
 import { DEFAULT_VIEWER_CONFIG } from '../types';
+import { EntityDataGridComponent } from '../entity-data-grid/entity-data-grid.component';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/forms";
 import * as i2 from "@memberjunction/ng-shared-generic";
 import * as i3 from "@memberjunction/ng-timeline";
-import * as i4 from "../entity-grid/entity-grid.component";
-import * as i5 from "../entity-cards/entity-cards.component";
-import * as i6 from "../pagination/pagination.component";
+import * as i4 from "../entity-cards/entity-cards.component";
+import * as i5 from "../pagination/pagination.component";
+import * as i6 from "../entity-data-grid/entity-data-grid.component";
 import * as i7 from "@angular/common";
 const _forTrack0 = ($index, $item) => $item.Name;
 function EntityViewerComponent_Conditional_1_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 12);
+    i0.ɵɵelementStart(0, "button", 20);
     i0.ɵɵlistener("click", function EntityViewerComponent_Conditional_1_Conditional_1_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.clearFilter()); });
-    i0.ɵɵelement(1, "i", 13);
+    i0.ɵɵelement(1, "i", 21);
     i0.ɵɵelementEnd();
 } }
 function EntityViewerComponent_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 6);
-    i0.ɵɵelement(1, "i", 9);
-    i0.ɵɵelementStart(2, "input", 10);
+    i0.ɵɵelementStart(0, "div", 14);
+    i0.ɵɵelement(1, "i", 17);
+    i0.ɵɵelementStart(2, "input", 18);
     i0.ɵɵlistener("input", function EntityViewerComponent_Conditional_1_Conditional_1_Template_input_input_2_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onFilterChange($event.target.value)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(3, EntityViewerComponent_Conditional_1_Conditional_1_Conditional_3_Template, 2, 0, "button", 11);
+    i0.ɵɵtemplate(3, EntityViewerComponent_Conditional_1_Conditional_1_Conditional_3_Template, 2, 0, "button", 19);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -58,7 +59,7 @@ function EntityViewerComponent_Conditional_1_Conditional_2_Conditional_2_Templat
     i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(2, 1, ctx_r1.totalRecordCount), " records");
 } }
 function EntityViewerComponent_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 7);
+    i0.ɵɵelementStart(0, "div", 15);
     i0.ɵɵtemplate(1, EntityViewerComponent_Conditional_1_Conditional_2_Conditional_1_Template, 4, 6, "span")(2, EntityViewerComponent_Conditional_1_Conditional_2_Conditional_2_Template, 3, 3, "span");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -68,9 +69,9 @@ function EntityViewerComponent_Conditional_1_Conditional_2_Template(rf, ctx) { i
 } }
 function EntityViewerComponent_Conditional_1_Conditional_3_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 19);
+    i0.ɵɵelementStart(0, "button", 27);
     i0.ɵɵlistener("click", function EntityViewerComponent_Conditional_1_Conditional_3_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setViewMode("timeline")); });
-    i0.ɵɵelement(1, "i", 20);
+    i0.ɵɵelement(1, "i", 28);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -78,15 +79,15 @@ function EntityViewerComponent_Conditional_1_Conditional_3_Conditional_5_Templat
 } }
 function EntityViewerComponent_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 8)(1, "button", 14);
+    i0.ɵɵelementStart(0, "div", 16)(1, "button", 22);
     i0.ɵɵlistener("click", function EntityViewerComponent_Conditional_1_Conditional_3_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setViewMode("grid")); });
-    i0.ɵɵelement(2, "i", 15);
+    i0.ɵɵelement(2, "i", 23);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 16);
+    i0.ɵɵelementStart(3, "button", 24);
     i0.ɵɵlistener("click", function EntityViewerComponent_Conditional_1_Conditional_3_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setViewMode("cards")); });
-    i0.ɵɵelement(4, "i", 17);
+    i0.ɵɵelement(4, "i", 25);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(5, EntityViewerComponent_Conditional_1_Conditional_3_Conditional_5_Template, 2, 2, "button", 18);
+    i0.ɵɵtemplate(5, EntityViewerComponent_Conditional_1_Conditional_3_Conditional_5_Template, 2, 2, "button", 26);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -98,7 +99,7 @@ function EntityViewerComponent_Conditional_1_Conditional_3_Template(rf, ctx) { i
     i0.ɵɵconditional(ctx_r1.hasDateFields ? 5 : -1);
 } }
 function EntityViewerComponent_Conditional_1_Conditional_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 23);
+    i0.ɵɵelementStart(0, "span", 31);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -107,7 +108,7 @@ function EntityViewerComponent_Conditional_1_Conditional_4_Conditional_2_Templat
     i0.ɵɵtextInterpolate(ctx_r1.selectedDateFieldDisplayName);
 } }
 function EntityViewerComponent_Conditional_1_Conditional_4_Conditional_3_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 29);
+    i0.ɵɵelementStart(0, "option", 37);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -118,9 +119,9 @@ function EntityViewerComponent_Conditional_1_Conditional_4_Conditional_3_For_2_T
 } }
 function EntityViewerComponent_Conditional_1_Conditional_4_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "select", 28);
+    i0.ɵɵelementStart(0, "select", 36);
     i0.ɵɵlistener("change", function EntityViewerComponent_Conditional_1_Conditional_4_Conditional_3_Template_select_change_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setTimelineDateField($event.target.value)); });
-    i0.ɵɵrepeaterCreate(1, EntityViewerComponent_Conditional_1_Conditional_4_Conditional_3_For_2_Template, 2, 2, "option", 29, _forTrack0);
+    i0.ɵɵrepeaterCreate(1, EntityViewerComponent_Conditional_1_Conditional_4_Conditional_3_For_2_Template, 2, 2, "option", 37, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -130,15 +131,15 @@ function EntityViewerComponent_Conditional_1_Conditional_4_Conditional_3_Templat
 } }
 function EntityViewerComponent_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 21);
-    i0.ɵɵelement(1, "i", 22);
-    i0.ɵɵtemplate(2, EntityViewerComponent_Conditional_1_Conditional_4_Conditional_2_Template, 2, 1, "span", 23)(3, EntityViewerComponent_Conditional_1_Conditional_4_Conditional_3_Template, 3, 1, "select", 24);
+    i0.ɵɵelementStart(0, "div", 29);
+    i0.ɵɵelement(1, "i", 30);
+    i0.ɵɵtemplate(2, EntityViewerComponent_Conditional_1_Conditional_4_Conditional_2_Template, 2, 1, "span", 31)(3, EntityViewerComponent_Conditional_1_Conditional_4_Conditional_3_Template, 3, 1, "select", 32);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 25)(5, "button", 26);
+    i0.ɵɵelementStart(4, "div", 33)(5, "button", 34);
     i0.ɵɵlistener("click", function EntityViewerComponent_Conditional_1_Conditional_4_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleTimelineOrientation()); });
     i0.ɵɵelement(6, "i");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 27)(8, "button", 26);
+    i0.ɵɵelementStart(7, "div", 35)(8, "button", 34);
     i0.ɵɵlistener("click", function EntityViewerComponent_Conditional_1_Conditional_4_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleTimelineSortOrder()); });
     i0.ɵɵelement(9, "i");
     i0.ɵɵelementEnd()();
@@ -157,7 +158,7 @@ function EntityViewerComponent_Conditional_1_Conditional_4_Template(rf, ctx) { i
 } }
 function EntityViewerComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
-    i0.ɵɵtemplate(1, EntityViewerComponent_Conditional_1_Conditional_1_Template, 4, 3, "div", 6)(2, EntityViewerComponent_Conditional_1_Conditional_2_Template, 3, 1, "div", 7)(3, EntityViewerComponent_Conditional_1_Conditional_3_Template, 6, 5, "div", 8)(4, EntityViewerComponent_Conditional_1_Conditional_4_Template, 10, 7);
+    i0.ɵɵtemplate(1, EntityViewerComponent_Conditional_1_Conditional_1_Template, 4, 3, "div", 14)(2, EntityViewerComponent_Conditional_1_Conditional_2_Template, 3, 1, "div", 15)(3, EntityViewerComponent_Conditional_1_Conditional_3_Template, 6, 5, "div", 16)(4, EntityViewerComponent_Conditional_1_Conditional_4_Template, 10, 7);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -170,63 +171,10 @@ function EntityViewerComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.effectiveViewMode === "timeline" && ctx_r1.hasDateFields ? 4 : -1);
 } }
-function EntityViewerComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 3);
-    i0.ɵɵelement(1, "mj-loading", 30);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("text", ctx_r1.loadingMessage);
-} }
-function EntityViewerComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 4);
-    i0.ɵɵelement(1, "i", 31);
-    i0.ɵɵelementStart(2, "p");
-    i0.ɵɵtext(3, "Select an entity to view records");
-    i0.ɵɵelementEnd()();
-} }
-function EntityViewerComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 4);
-    i0.ɵɵelement(1, "i", 32);
-    i0.ɵɵelementStart(2, "p");
-    i0.ɵɵtext(3);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r1.debouncedFilterText ? "No matching records" : "No records found");
-} }
-function EntityViewerComponent_Conditional_6_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-timeline", 36);
-    i0.ɵɵlistener("afterEventClick", function EntityViewerComponent_Conditional_6_Conditional_2_Template_mj_timeline_afterEventClick_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onTimelineEventClick($event)); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("groups", ctx_r1.timelineGroups)("orientation", ctx_r1.timelineOrientation)("layout", ctx_r1.timelineOrientation === "vertical" ? "alternating" : "single")("sortOrder", ctx_r1.timelineSortOrder)("segmentGrouping", ctx_r1.timelineSegmentGrouping)("segmentsCollapsible", true)("segmentsDefaultExpanded", true)("selectedEventId", ctx_r1.timelineSelectedEventId);
-} }
-function EntityViewerComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function EntityViewerComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-entity-grid", 33);
-    i0.ɵɵlistener("recordSelected", function EntityViewerComponent_Conditional_6_Template_mj_entity_grid_recordSelected_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onRecordSelected($event)); })("recordOpened", function EntityViewerComponent_Conditional_6_Template_mj_entity_grid_recordOpened_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onRecordOpened($event)); })("sortChanged", function EntityViewerComponent_Conditional_6_Template_mj_entity_grid_sortChanged_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSortChanged($event)); })("gridStateChanged", function EntityViewerComponent_Conditional_6_Template_mj_entity_grid_gridStateChanged_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onGridStateChanged($event)); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(1, "mj-entity-cards", 34);
-    i0.ɵɵlistener("recordSelected", function EntityViewerComponent_Conditional_6_Template_mj_entity_cards_recordSelected_1_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onRecordSelected($event)); })("recordOpened", function EntityViewerComponent_Conditional_6_Template_mj_entity_cards_recordOpened_1_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onRecordOpened($event)); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(2, EntityViewerComponent_Conditional_6_Conditional_2_Template, 1, 8, "mj-timeline", 35);
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("hidden", ctx_r1.effectiveViewMode !== "grid")("entity", ctx_r1.entity)("records", ctx_r1.filteredRecords)("selectedRecordId", ctx_r1.selectedRecordId)("columns", ctx_r1.gridColumns)("height", "100%")("filterText", ctx_r1.debouncedFilterText)("sortState", ctx_r1.effectiveSortState)("serverSideSorting", ctx_r1.effectiveConfig.serverSideSorting)("gridState", ctx_r1.gridState);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("hidden", ctx_r1.effectiveViewMode !== "cards")("entity", ctx_r1.entity)("records", ctx_r1.filteredRecords)("selectedRecordId", ctx_r1.selectedRecordId)("cardTemplate", ctx_r1.cardTemplate)("hiddenFieldMatches", ctx_r1.hiddenFieldMatches)("filterText", ctx_r1.debouncedFilterText);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.hasDateFields && ctx_r1.effectiveViewMode === "timeline" ? 2 : -1);
-} }
-function EntityViewerComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-pagination", 37);
-    i0.ɵɵlistener("loadMore", function EntityViewerComponent_Conditional_7_Template_mj_pagination_loadMore_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onLoadMore()); });
+    i0.ɵɵelementStart(0, "mj-pagination", 38);
+    i0.ɵɵlistener("loadMore", function EntityViewerComponent_Conditional_18_Template_mj_pagination_loadMore_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onLoadMore()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -344,6 +292,29 @@ export class EntityViewerComponent {
         }
     }
     _timelineConfig = null;
+    /**
+     * Whether to show the grid toolbar.
+     * When false, the grid is displayed without its own toolbar - useful when
+     * entity-viewer provides its own filter/actions in the header.
+     * @default false
+     */
+    showGridToolbar = false;
+    /**
+     * Grid toolbar configuration - controls which buttons are shown and their behavior
+     * When not provided, uses sensible defaults
+     */
+    gridToolbarConfig = null;
+    /**
+     * Grid selection mode
+     * @default 'single'
+     */
+    gridSelectionMode = 'single';
+    /**
+     * Show the "Add to List" button in the grid toolbar.
+     * Requires gridSelectionMode to be 'multiple' for best UX.
+     * @default false
+     */
+    showAddToListButton = false;
     // ========================================
     // OUTPUTS
     // ========================================
@@ -383,6 +354,33 @@ export class EntityViewerComponent {
      * Emitted when timeline configuration changes (date field, grouping, etc.)
      */
     timelineConfigChange = new EventEmitter();
+    /**
+     * Emitted when the Add/New button is clicked in the grid toolbar
+     */
+    addRequested = new EventEmitter();
+    /**
+     * Emitted when the Delete button is clicked in the grid toolbar
+     * Includes the selected records to be deleted
+     */
+    deleteRequested = new EventEmitter();
+    /**
+     * Emitted when the Refresh button is clicked in the grid toolbar
+     */
+    refreshRequested = new EventEmitter();
+    /**
+     * Emitted when the Export button is clicked in the grid toolbar
+     */
+    exportRequested = new EventEmitter();
+    /**
+     * Emitted when the Add to List button is clicked in the grid toolbar.
+     * Parent components should handle this to show the list management dialog.
+     */
+    addToListRequested = new EventEmitter();
+    /**
+     * Emitted when grid selection changes.
+     * Parent components can use this to track selected records for their own toolbar buttons.
+     */
+    selectionChanged = new EventEmitter();
     // ========================================
     // INTERNAL STATE
     // ========================================
@@ -398,6 +396,10 @@ export class EntityViewerComponent {
     hiddenFieldMatches = new Map();
     /** Current sort state */
     internalSortState = null;
+    /** Cached grid params to avoid recreating object on every change detection */
+    _cachedGridParams = null;
+    _lastGridParamsEntity = null;
+    _lastGridParamsViewEntity = null;
     /** Pagination state */
     pagination = {
         currentPage: 0,
@@ -443,10 +445,22 @@ export class EntityViewerComponent {
     filterInput$ = new Subject();
     /** Track if this is the first load (vs. load more) */
     isInitialLoad = true;
+    /** Reference to the data grid component for flushing pending changes */
+    dataGridRef;
     constructor(cdr) {
         this.cdr = cdr;
     }
     // ========================================
+    // PUBLIC METHODS
+    // ========================================
+    /**
+     * Ensures any pending grid state changes are saved immediately without waiting for debounce.
+     * Call this before switching views or entities to ensure changes are saved.
+     */
+    EnsurePendingChangesSaved() {
+        this.dataGridRef?.EnsurePendingChangesSaved();
+    }
+    // ========================================
     // COMPUTED PROPERTIES
     // ========================================
     /**
@@ -488,12 +502,61 @@ export class EntityViewerComponent {
     get effectiveSortState() {
         return this.sortState ?? this.internalSortState;
     }
+    /**
+     * Get the OrderBy string for mj-entity-data-grid from the effective sort state
+     */
+    get effectiveSortOrderBy() {
+        const sortState = this.effectiveSortState;
+        if (!sortState?.field || !sortState.direction) {
+            return '';
+        }
+        return `${sortState.field} ${sortState.direction.toUpperCase()}`;
+    }
     /**
      * Get merged configuration with defaults
      */
     get effectiveConfig() {
         return { ...DEFAULT_VIEWER_CONFIG, ...this.config };
     }
+    /**
+     * Get cached grid params - only recreates object when entity or viewEntity changes
+     * This prevents Angular from seeing a new object reference on every change detection
+     * which would cause the grid to reinitialize
+     */
+    get gridParams() {
+        if (!this.entity) {
+            return null;
+        }
+        // Check if we need to recreate the params object
+        const entityChanged = this._lastGridParamsEntity !== this.entity.Name;
+        const viewEntityChanged = this._lastGridParamsViewEntity !== this.viewEntity;
+        if (entityChanged || viewEntityChanged || !this._cachedGridParams) {
+            this._lastGridParamsEntity = this.entity.Name;
+            this._lastGridParamsViewEntity = this.viewEntity ?? null;
+            this._cachedGridParams = {
+                EntityName: this.entity.Name,
+                ViewEntity: this.viewEntity || undefined
+            };
+        }
+        return this._cachedGridParams;
+    }
+    /**
+     * Get the effective grid toolbar configuration
+     * Merges user-provided config with defaults appropriate for entity-viewer context
+     */
+    get effectiveGridToolbarConfig() {
+        const defaults = {
+            showSearch: false, // Entity-viewer has its own filter
+            showRefresh: true,
+            showAdd: true,
+            showDelete: true,
+            showExport: true,
+            showColumnChooser: true,
+            showRowCount: true,
+            showSelectionCount: true
+        };
+        return { ...defaults, ...this.gridToolbarConfig };
+    }
     /**
      * Get the records to display (external or internal)
      */
@@ -987,6 +1050,102 @@ export class EntityViewerComponent {
         this.loadMore();
     }
     // ========================================
+    // DATA GRID EVENT HANDLERS
+    // ========================================
+    /**
+     * Handle row click from mj-entity-data-grid
+     * Maps to recordSelected event for parent components
+     */
+    onDataGridRowClick(event) {
+        if (!this.entity || !event.row)
+            return;
+        this.recordSelected.emit({
+            record: event.row,
+            entity: this.entity,
+            compositeKey: event.row.PrimaryKey
+        });
+    }
+    /**
+     * Handle row double-click from mj-entity-data-grid
+     * Maps to recordOpened event for parent components
+     */
+    onDataGridRowDoubleClick(event) {
+        if (!this.entity || !event.row)
+            return;
+        this.recordOpened.emit({
+            record: event.row,
+            entity: this.entity,
+            compositeKey: event.row.PrimaryKey
+        });
+    }
+    /**
+     * Handle sort changed from mj-entity-data-grid
+     * Maps to sortChanged event for parent components
+     */
+    onDataGridSortChanged(event) {
+        // Convert the data grid's sort state to our SortState format
+        const newSort = event.newSortState && event.newSortState.length > 0
+            ? {
+                field: event.newSortState[0].field,
+                direction: event.newSortState[0].direction
+            }
+            : null;
+        this.internalSortState = newSort;
+        this.sortChanged.emit({ sort: newSort });
+        // If server-side sorting, reload from page 1
+        if (this.effectiveConfig.serverSideSorting && !this.records) {
+            this.resetPaginationState();
+            this.loadData();
+        }
+    }
+    /**
+     * Handle Add/New button click from data grid toolbar
+     */
+    onGridAddRequested() {
+        this.addRequested.emit();
+    }
+    /**
+     * Handle Refresh button click from data grid toolbar
+     */
+    onGridRefreshRequested() {
+        this.refreshRequested.emit();
+        // Also trigger an internal refresh
+        this.refresh();
+    }
+    /**
+     * Handle Delete button click from data grid toolbar
+     */
+    onGridDeleteRequested(records) {
+        this.deleteRequested.emit({ records });
+    }
+    /**
+     * Handle Export button click from data grid toolbar
+     */
+    onGridExportRequested() {
+        this.exportRequested.emit({ format: 'excel' });
+    }
+    /**
+     * Handle Add to List button click from data grid toolbar.
+     * Forwards the event to parent components for list management.
+     */
+    onGridAddToListRequested(event) {
+        this.addToListRequested.emit(event);
+    }
+    /**
+     * Handle selection change from data grid.
+     * Converts selected keys to records and forwards to parent components.
+     */
+    onGridSelectionChange(selectedKeys) {
+        // Find the actual records from our filtered records
+        const records = this.filteredRecords.filter(record => {
+            const key = record.PrimaryKey?.ToConcatenatedString() || String(record.Get('ID'));
+            return selectedKeys.includes(key);
+        });
+        // Get the raw primary key values for list management
+        const recordIds = records.map(record => String(record.PrimaryKey.KeyValuePairs[0].Value));
+        this.selectionChanged.emit({ records, recordIds });
+    }
+    // ========================================
     // TIMELINE METHODS
     // ========================================
     /**
@@ -1230,30 +1389,75 @@ export class EntityViewerComponent {
         const firstOther = fields.find(f => f.Name !== excludeField);
         return firstOther?.Name || null;
     }
-    static ɵfac = function EntityViewerComponent_Factory(t) { return new (t || EntityViewerComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EntityViewerComponent, selectors: [["mj-entity-viewer"]], hostAttrs: [2, "display", "block", "height", "100%"], inputs: { entity: "entity", records: "records", config: "config", selectedRecordId: "selectedRecordId", viewMode: "viewMode", filterText: "filterText", sortState: "sortState", gridColumns: "gridColumns", cardTemplate: "cardTemplate", viewEntity: "viewEntity", gridState: "gridState", timelineConfig: "timelineConfig" }, outputs: { recordSelected: "recordSelected", recordOpened: "recordOpened", dataLoaded: "dataLoaded", viewModeChange: "viewModeChange", filterTextChange: "filterTextChange", filteredCountChanged: "filteredCountChanged", sortChanged: "sortChanged", gridStateChanged: "gridStateChanged", timelineConfigChange: "timelineConfigChange" }, features: [i0.ɵɵNgOnChangesFeature], decls: 8, vars: 5, consts: [[1, "entity-viewer-container"], [1, "viewer-header"], [1, "viewer-content"], [1, "loading-container"], [1, "empty-state"], [3, "pagination", "loadedRecordCount"], [1, "filter-container"], [1, "record-count"], [1, "view-mode-toggle"], [1, "fa-solid", "fa-search", "filter-icon"], ["type", "text", 1, "filter-input", 3, "input", "placeholder", "value"], ["title", "Clear filter", 1, "clear-filter-btn"], ["title", "Clear filter", 1, "clear-filter-btn", 3, "click"], [1, "fa-solid", "fa-times"], ["title", "Grid View", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-list"], ["title", "Cards View", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-grip"], ["title", "Timeline View", 1, "toggle-btn", 3, "active"], ["title", "Timeline View", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-timeline"], [1, "timeline-date-selector"], [1, "fa-solid", "fa-calendar-days"], [1, "date-field-label"], [1, "date-field-select", 3, "value"], [1, "timeline-orientation-toggle"], [1, "toggle-btn", 3, "click", "title"], [1, "timeline-sort-toggle"], [1, "date-field-select", 3, "change", "value"], [3, "value"], ["size", "medium", 3, "text"], [1, "fa-solid", "fa-database"], [1, "fa-solid", "fa-inbox"], [3, "recordSelected", "recordOpened", "sortChanged", "gridStateChanged", "hidden", "entity", "records", "selectedRecordId", "columns", "height", "filterText", "sortState", "serverSideSorting", "gridState"], [3, "recordSelected", "recordOpened", "hidden", "entity", "records", "selectedRecordId", "cardTemplate", "hiddenFieldMatches", "filterText"], [3, "groups", "orientation", "layout", "sortOrder", "segmentGrouping", "segmentsCollapsible", "segmentsDefaultExpanded", "selectedEventId"], [3, "afterEventClick", "groups", "orientation", "layout", "sortOrder", "segmentGrouping", "segmentsCollapsible", "segmentsDefaultExpanded", "selectedEventId"], [3, "loadMore", "pagination", "loadedRecordCount"]], template: function EntityViewerComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵfac = function EntityViewerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || EntityViewerComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EntityViewerComponent, selectors: [["mj-entity-viewer"]], viewQuery: function EntityViewerComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(EntityDataGridComponent, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dataGridRef = _t.first);
+        } }, hostAttrs: [2, "display", "block", "height", "100%"], inputs: { entity: "entity", records: "records", config: "config", selectedRecordId: "selectedRecordId", viewMode: "viewMode", filterText: "filterText", sortState: "sortState", gridColumns: "gridColumns", cardTemplate: "cardTemplate", viewEntity: "viewEntity", gridState: "gridState", timelineConfig: "timelineConfig", showGridToolbar: "showGridToolbar", gridToolbarConfig: "gridToolbarConfig", gridSelectionMode: "gridSelectionMode", showAddToListButton: "showAddToListButton" }, outputs: { recordSelected: "recordSelected", recordOpened: "recordOpened", dataLoaded: "dataLoaded", viewModeChange: "viewModeChange", filterTextChange: "filterTextChange", filteredCountChanged: "filteredCountChanged", sortChanged: "sortChanged", gridStateChanged: "gridStateChanged", timelineConfigChange: "timelineConfigChange", addRequested: "addRequested", deleteRequested: "deleteRequested", refreshRequested: "refreshRequested", exportRequested: "exportRequested", addToListRequested: "addToListRequested", selectionChanged: "selectionChanged" }, features: [i0.ɵɵNgOnChangesFeature], decls: 19, vars: 38, consts: [[1, "entity-viewer-container"], [1, "viewer-header"], [1, "viewer-content"], [1, "loading-container", 3, "hidden"], ["size", "medium", 3, "text"], [1, "loading-overlay", 3, "hidden"], ["size", "small", 3, "text"], [1, "empty-state", 3, "hidden"], [1, "fa-solid", "fa-database"], [1, "fa-solid", "fa-inbox"], [3, "AfterRowClick", "AfterRowDoubleClick", "AfterSort", "GridStateChanged", "SelectionChange", "NewButtonClick", "RefreshButtonClick", "DeleteButtonClick", "ExportButtonClick", "AddToListRequested", "hidden", "Data", "Params", "FilterText", "GridState", "Height", "ShowToolbar", "ToolbarConfig", "SelectionMode", "ShowAddToListButton", "AllowLoad"], [3, "recordSelected", "recordOpened", "hidden", "entity", "records", "selectedRecordId", "cardTemplate", "hiddenFieldMatches", "filterText"], [3, "afterEventClick", "hidden", "groups", "orientation", "layout", "sortOrder", "segmentGrouping", "segmentsCollapsible", "segmentsDefaultExpanded", "selectedEventId"], [3, "pagination", "loadedRecordCount"], [1, "filter-container"], [1, "record-count"], [1, "view-mode-toggle"], [1, "fa-solid", "fa-search", "filter-icon"], ["type", "text", 1, "filter-input", 3, "input", "placeholder", "value"], ["title", "Clear filter", 1, "clear-filter-btn"], ["title", "Clear filter", 1, "clear-filter-btn", 3, "click"], [1, "fa-solid", "fa-times"], ["title", "Grid View", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-list"], ["title", "Cards View", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-grip"], ["title", "Timeline View", 1, "toggle-btn", 3, "active"], ["title", "Timeline View", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-timeline"], [1, "timeline-date-selector"], [1, "fa-solid", "fa-calendar-days"], [1, "date-field-label"], [1, "date-field-select", 3, "value"], [1, "timeline-orientation-toggle"], [1, "toggle-btn", 3, "click", "title"], [1, "timeline-sort-toggle"], [1, "date-field-select", 3, "change", "value"], [3, "value"], [3, "loadMore", "pagination", "loadedRecordCount"]], template: function EntityViewerComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵtemplate(1, EntityViewerComponent_Conditional_1_Template, 5, 4, "div", 1);
-            i0.ɵɵelementStart(2, "div", 2);
-            i0.ɵɵtemplate(3, EntityViewerComponent_Conditional_3_Template, 2, 1, "div", 3)(4, EntityViewerComponent_Conditional_4_Template, 4, 0, "div", 4)(5, EntityViewerComponent_Conditional_5_Template, 4, 1, "div", 4)(6, EntityViewerComponent_Conditional_6_Template, 3, 18);
+            i0.ɵɵelementStart(2, "div", 2)(3, "div", 3);
+            i0.ɵɵelement(4, "mj-loading", 4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "div", 5);
+            i0.ɵɵelement(6, "mj-loading", 6);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(7, EntityViewerComponent_Conditional_7_Template, 1, 2, "mj-pagination", 5);
+            i0.ɵɵelementStart(7, "div", 7);
+            i0.ɵɵelement(8, "i", 8);
+            i0.ɵɵelementStart(9, "p");
+            i0.ɵɵtext(10, "Select an entity to view records");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(11, "div", 7);
+            i0.ɵɵelement(12, "i", 9);
+            i0.ɵɵelementStart(13, "p");
+            i0.ɵɵtext(14);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(15, "mj-entity-data-grid", 10);
+            i0.ɵɵlistener("AfterRowClick", function EntityViewerComponent_Template_mj_entity_data_grid_AfterRowClick_15_listener($event) { return ctx.onDataGridRowClick($event); })("AfterRowDoubleClick", function EntityViewerComponent_Template_mj_entity_data_grid_AfterRowDoubleClick_15_listener($event) { return ctx.onDataGridRowDoubleClick($event); })("AfterSort", function EntityViewerComponent_Template_mj_entity_data_grid_AfterSort_15_listener($event) { return ctx.onDataGridSortChanged($event); })("GridStateChanged", function EntityViewerComponent_Template_mj_entity_data_grid_GridStateChanged_15_listener($event) { return ctx.onGridStateChanged($event); })("SelectionChange", function EntityViewerComponent_Template_mj_entity_data_grid_SelectionChange_15_listener($event) { return ctx.onGridSelectionChange($event); })("NewButtonClick", function EntityViewerComponent_Template_mj_entity_data_grid_NewButtonClick_15_listener() { return ctx.onGridAddRequested(); })("RefreshButtonClick", function EntityViewerComponent_Template_mj_entity_data_grid_RefreshButtonClick_15_listener() { return ctx.onGridRefreshRequested(); })("DeleteButtonClick", function EntityViewerComponent_Template_mj_entity_data_grid_DeleteButtonClick_15_listener($event) { return ctx.onGridDeleteRequested($event); })("ExportButtonClick", function EntityViewerComponent_Template_mj_entity_data_grid_ExportButtonClick_15_listener() { return ctx.onGridExportRequested(); })("AddToListRequested", function EntityViewerComponent_Template_mj_entity_data_grid_AddToListRequested_15_listener($event) { return ctx.onGridAddToListRequested($event); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(16, "mj-entity-cards", 11);
+            i0.ɵɵlistener("recordSelected", function EntityViewerComponent_Template_mj_entity_cards_recordSelected_16_listener($event) { return ctx.onRecordSelected($event); })("recordOpened", function EntityViewerComponent_Template_mj_entity_cards_recordOpened_16_listener($event) { return ctx.onRecordOpened($event); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(17, "mj-timeline", 12);
+            i0.ɵɵlistener("afterEventClick", function EntityViewerComponent_Template_mj_timeline_afterEventClick_17_listener($event) { return ctx.onTimelineEventClick($event); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(18, EntityViewerComponent_Conditional_18_Template, 1, 2, "mj-pagination", 13);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵstyleProp("height", ctx.effectiveConfig.height);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.effectiveConfig.showFilter || ctx.effectiveConfig.showViewModeToggle || ctx.effectiveConfig.showRecordCount ? 1 : -1);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.isLoading && ctx.filteredRecords.length === 0 ? 3 : !ctx.entity ? 4 : ctx.filteredRecords.length === 0 && !ctx.isLoading ? 5 : 6);
+            i0.ɵɵproperty("hidden", !(ctx.isLoading && ctx.filteredRecords.length === 0));
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("text", ctx.loadingMessage);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("hidden", !(ctx.isLoading && ctx.filteredRecords.length > 0));
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("text", ctx.loadingMessage);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("hidden", !!ctx.entity);
             i0.ɵɵadvance(4);
-            i0.ɵɵconditional(ctx.effectiveConfig.showPagination && ctx.entity && (ctx.pagination.hasMore || ctx.pagination.totalRecords > ctx.effectiveConfig.pageSize) ? 7 : -1);
-        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i2.LoadingComponent, i3.TimelineComponent, i4.EntityGridComponent, i5.EntityCardsComponent, i6.PaginationComponent, i7.DecimalPipe], styles: [".entity-viewer-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  background: #fafafa;\n}\n\n\n\n.viewer-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  padding: 12px 16px;\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\n  flex-shrink: 0;\n}\n\n\n\n.filter-container[_ngcontent-%COMP%] {\n  flex: 1;\n  max-width: 400px;\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.filter-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 12px;\n  color: #9e9e9e;\n  font-size: 14px;\n  pointer-events: none;\n}\n\n.filter-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 8px 36px 8px 36px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  font-size: 14px;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n\n.filter-input[_ngcontent-%COMP%]:focus {\n  border-color: #1976d2;\n}\n\n.filter-input[_ngcontent-%COMP%]::placeholder {\n  color: #9e9e9e;\n}\n\n.clear-filter-btn[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 8px;\n  width: 20px;\n  height: 20px;\n  border: none;\n  background: transparent;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #9e9e9e;\n  transition: all 0.15s ease;\n}\n\n.clear-filter-btn[_ngcontent-%COMP%]:hover {\n  background: #f5f5f5;\n  color: #616161;\n}\n\n\n\n.record-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #757575;\n  white-space: nowrap;\n}\n\n\n\n.view-mode-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: #f5f5f5;\n  border-radius: 6px;\n  padding: 2px;\n}\n\n.toggle-btn[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #757575;\n  transition: all 0.15s ease;\n}\n\n.toggle-btn[_ngcontent-%COMP%]:hover {\n  color: #424242;\n}\n\n.toggle-btn.active[_ngcontent-%COMP%] {\n  background: white;\n  color: #1976d2;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n\n\n.timeline-date-selector[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 13px;\n  color: #616161;\n}\n\n.timeline-date-selector[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #9e9e9e;\n}\n\n.date-field-label[_ngcontent-%COMP%] {\n  color: #424242;\n  font-weight: 500;\n}\n\n.date-field-select[_ngcontent-%COMP%] {\n  padding: 4px 8px;\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  font-size: 13px;\n  background: white;\n  color: #424242;\n  cursor: pointer;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n\n.date-field-select[_ngcontent-%COMP%]:hover {\n  border-color: #bdbdbd;\n}\n\n.date-field-select[_ngcontent-%COMP%]:focus {\n  border-color: #1976d2;\n}\n\n\n\n.timeline-orientation-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: #f5f5f5;\n  border-radius: 6px;\n  padding: 2px;\n}\n\n\n\n.viewer-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  position: relative;\n  background: white;\n}\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  color: #9e9e9e;\n  text-align: center;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 48px;\n  margin-bottom: 16px;\n  opacity: 0.5;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n}\n\n\n\nmj-entity-grid[hidden][_ngcontent-%COMP%], \nmj-entity-cards[hidden][_ngcontent-%COMP%], \nmj-timeline[hidden][_ngcontent-%COMP%] {\n  display: none !important;\n}\n\n\n\nmj-entity-grid[_ngcontent-%COMP%]:not([hidden]), \nmj-entity-cards[_ngcontent-%COMP%]:not([hidden]), \nmj-timeline[_ngcontent-%COMP%]:not([hidden]) {\n  display: block;\n  height: 100%;\n  width: 100%;\n}"] });
+            i0.ɵɵproperty("hidden", !ctx.entity || ctx.filteredRecords.length > 0 || ctx.isLoading);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate(ctx.debouncedFilterText ? "No matching records" : "No records found");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("hidden", ctx.effectiveViewMode !== "grid" || !ctx.entity)("Data", ctx.filteredRecords)("Params", ctx.gridParams)("FilterText", ctx.debouncedFilterText)("GridState", ctx.gridState)("Height", "auto")("ShowToolbar", ctx.showGridToolbar)("ToolbarConfig", ctx.effectiveGridToolbarConfig)("SelectionMode", ctx.gridSelectionMode)("ShowAddToListButton", ctx.showAddToListButton)("AllowLoad", false);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("hidden", ctx.effectiveViewMode !== "cards" || !ctx.entity)("entity", ctx.entity)("records", ctx.filteredRecords)("selectedRecordId", ctx.selectedRecordId)("cardTemplate", ctx.cardTemplate)("hiddenFieldMatches", ctx.hiddenFieldMatches)("filterText", ctx.debouncedFilterText);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("hidden", ctx.effectiveViewMode !== "timeline" || !ctx.hasDateFields)("groups", ctx.timelineGroups)("orientation", ctx.timelineOrientation)("layout", ctx.timelineOrientation === "vertical" ? "alternating" : "single")("sortOrder", ctx.timelineSortOrder)("segmentGrouping", ctx.timelineSegmentGrouping)("segmentsCollapsible", true)("segmentsDefaultExpanded", true)("selectedEventId", ctx.timelineSelectedEventId);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.effectiveConfig.showPagination && ctx.entity && (ctx.pagination.hasMore || ctx.pagination.totalRecords > ctx.effectiveConfig.pageSize) ? 18 : -1);
+        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i2.LoadingComponent, i3.TimelineComponent, i4.EntityCardsComponent, i5.PaginationComponent, i6.EntityDataGridComponent, i7.DecimalPipe], styles: [".entity-viewer-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background: #fafafa;\n}\n\n\n\nmj-pagination[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n}\n\n\n\n.viewer-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  padding: 12px 16px;\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\n  flex-shrink: 0;\n}\n\n\n\n.filter-container[_ngcontent-%COMP%] {\n  flex: 1;\n  max-width: 400px;\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.filter-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 12px;\n  color: #9e9e9e;\n  font-size: 14px;\n  pointer-events: none;\n}\n\n.filter-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 8px 36px 8px 36px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  font-size: 14px;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n\n.filter-input[_ngcontent-%COMP%]:focus {\n  border-color: #1976d2;\n}\n\n.filter-input[_ngcontent-%COMP%]::placeholder {\n  color: #9e9e9e;\n}\n\n.clear-filter-btn[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 8px;\n  width: 20px;\n  height: 20px;\n  border: none;\n  background: transparent;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #9e9e9e;\n  transition: all 0.15s ease;\n}\n\n.clear-filter-btn[_ngcontent-%COMP%]:hover {\n  background: #f5f5f5;\n  color: #616161;\n}\n\n\n\n.record-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #757575;\n  white-space: nowrap;\n}\n\n\n\n.view-mode-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: #f5f5f5;\n  border-radius: 6px;\n  padding: 2px;\n}\n\n.toggle-btn[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #757575;\n  transition: all 0.15s ease;\n}\n\n.toggle-btn[_ngcontent-%COMP%]:hover {\n  color: #424242;\n}\n\n.toggle-btn.active[_ngcontent-%COMP%] {\n  background: white;\n  color: #1976d2;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n\n\n.timeline-date-selector[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 13px;\n  color: #616161;\n}\n\n.timeline-date-selector[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #9e9e9e;\n}\n\n.date-field-label[_ngcontent-%COMP%] {\n  color: #424242;\n  font-weight: 500;\n}\n\n.date-field-select[_ngcontent-%COMP%] {\n  padding: 4px 8px;\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  font-size: 13px;\n  background: white;\n  color: #424242;\n  cursor: pointer;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n\n.date-field-select[_ngcontent-%COMP%]:hover {\n  border-color: #bdbdbd;\n}\n\n.date-field-select[_ngcontent-%COMP%]:focus {\n  border-color: #1976d2;\n}\n\n\n\n.timeline-orientation-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: #f5f5f5;\n  border-radius: 6px;\n  padding: 2px;\n}\n\n\n\n.viewer-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  position: relative;\n  background: white;\n}\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\n\n\n.loading-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(255, 255, 255, 0.8);\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  color: #9e9e9e;\n  text-align: center;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 48px;\n  margin-bottom: 16px;\n  opacity: 0.5;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n}\n\n\n\nmj-entity-cards[hidden][_ngcontent-%COMP%], \nmj-timeline[hidden][_ngcontent-%COMP%] {\n  display: none !important;\n}\n\n\n\nmj-entity-cards[_ngcontent-%COMP%]:not([hidden]), \nmj-timeline[_ngcontent-%COMP%]:not([hidden]) {\n  display: block;\n  height: 100%;\n  width: 100%;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EntityViewerComponent, [{
         type: Component,
         args: [{ selector: 'mj-entity-viewer', host: {
                     'style': 'display: block; height: 100%;'
-                }, template: "<div class=\"entity-viewer-container\" [style.height]=\"effectiveConfig.height\">\n  <!-- Header -->\n  @if (effectiveConfig.showFilter || effectiveConfig.showViewModeToggle || effectiveConfig.showRecordCount) {\n    <div class=\"viewer-header\">\n      <!-- Filter Input -->\n      @if (effectiveConfig.showFilter) {\n        <div class=\"filter-container\">\n          <i class=\"fa-solid fa-search filter-icon\"></i>\n          <input\n            type=\"text\"\n            class=\"filter-input\"\n            [placeholder]=\"effectiveConfig.filterPlaceholder\"\n            [value]=\"effectiveFilterText\"\n            (input)=\"onFilterChange($any($event.target).value)\"\n          />\n          @if (effectiveFilterText) {\n            <button class=\"clear-filter-btn\" (click)=\"clearFilter()\" title=\"Clear filter\">\n              <i class=\"fa-solid fa-times\"></i>\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Record Count -->\n      @if (effectiveConfig.showRecordCount && entity) {\n        <div class=\"record-count\">\n          @if (filteredRecordCount !== totalRecordCount) {\n            <span>{{ filteredRecordCount | number }} of {{ totalRecordCount | number }} records</span>\n          } @else {\n            <span>{{ totalRecordCount | number }} records</span>\n          }\n        </div>\n      }\n\n      <!-- View Mode Toggle -->\n      @if (effectiveConfig.showViewModeToggle) {\n        <div class=\"view-mode-toggle\">\n          <button\n            class=\"toggle-btn\"\n            [class.active]=\"effectiveViewMode === 'grid'\"\n            (click)=\"setViewMode('grid')\"\n            title=\"Grid View\">\n            <i class=\"fa-solid fa-list\"></i>\n          </button>\n          <button\n            class=\"toggle-btn\"\n            [class.active]=\"effectiveViewMode === 'cards'\"\n            (click)=\"setViewMode('cards')\"\n            title=\"Cards View\">\n            <i class=\"fa-solid fa-grip\"></i>\n          </button>\n          @if (hasDateFields) {\n            <button\n              class=\"toggle-btn\"\n              [class.active]=\"effectiveViewMode === 'timeline'\"\n              (click)=\"setViewMode('timeline')\"\n              title=\"Timeline View\">\n              <i class=\"fa-solid fa-timeline\"></i>\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Timeline Controls (only shown when timeline is active) -->\n      @if (effectiveViewMode === 'timeline' && hasDateFields) {\n        <!-- Date Field Selector -->\n        <div class=\"timeline-date-selector\">\n          <i class=\"fa-solid fa-calendar-days\"></i>\n          @if (availableDateFields.length === 1) {\n            <span class=\"date-field-label\">{{ selectedDateFieldDisplayName }}</span>\n          } @else {\n            <select\n              class=\"date-field-select\"\n              [value]=\"selectedTimelineDateField\"\n              (change)=\"setTimelineDateField($any($event.target).value)\">\n              @for (field of availableDateFields; track field.Name) {\n                <option [value]=\"field.Name\">{{ field.DisplayNameOrName }}</option>\n              }\n            </select>\n          }\n        </div>\n\n        <!-- Orientation Toggle -->\n        <div class=\"timeline-orientation-toggle\">\n          <button\n            class=\"toggle-btn\"\n            (click)=\"toggleTimelineOrientation()\"\n            [title]=\"timelineOrientation === 'vertical' ? 'Switch to Horizontal' : 'Switch to Vertical'\">\n            <i [class]=\"timelineOrientation === 'vertical' ? 'fa-solid fa-ellipsis-vertical' : 'fa-solid fa-ellipsis'\"></i>\n          </button>\n        </div>\n\n        <!-- Sort Order Toggle -->\n        <div class=\"timeline-sort-toggle\">\n          <button\n            class=\"toggle-btn\"\n            (click)=\"toggleTimelineSortOrder()\"\n            [title]=\"timelineSortOrder === 'desc' ? 'Showing Newest First (click for Oldest First)' : 'Showing Oldest First (click for Newest First)'\">\n            <i [class]=\"timelineSortOrder === 'desc' ? 'fa-solid fa-arrow-down-wide-short' : 'fa-solid fa-arrow-up-wide-short'\"></i>\n          </button>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Content -->\n  <div class=\"viewer-content\">\n    @if (isLoading && filteredRecords.length === 0) {\n      <!-- Initial loading state -->\n      <div class=\"loading-container\">\n        <mj-loading [text]=\"loadingMessage\" size=\"medium\"></mj-loading>\n      </div>\n    } @else if (!entity) {\n      <div class=\"empty-state\">\n        <i class=\"fa-solid fa-database\"></i>\n        <p>Select an entity to view records</p>\n      </div>\n    } @else if (filteredRecords.length === 0 && !isLoading) {\n      <div class=\"empty-state\">\n        <i class=\"fa-solid fa-inbox\"></i>\n        <p>{{ debouncedFilterText ? 'No matching records' : 'No records found' }}</p>\n      </div>\n    } @else {\n      <!-- Grid View - always rendered but hidden when not active to preserve state -->\n      <mj-entity-grid\n        [hidden]=\"effectiveViewMode !== 'grid'\"\n        [entity]=\"entity\"\n        [records]=\"filteredRecords\"\n        [selectedRecordId]=\"selectedRecordId\"\n        [columns]=\"gridColumns\"\n        [height]=\"'100%'\"\n        [filterText]=\"debouncedFilterText\"\n        [sortState]=\"effectiveSortState\"\n        [serverSideSorting]=\"effectiveConfig.serverSideSorting\"\n        [gridState]=\"gridState\"\n        (recordSelected)=\"onRecordSelected($event)\"\n        (recordOpened)=\"onRecordOpened($event)\"\n        (sortChanged)=\"onSortChanged($event)\"\n        (gridStateChanged)=\"onGridStateChanged($event)\">\n      </mj-entity-grid>\n\n      <!-- Cards View - always rendered but hidden when not active to preserve state -->\n      <mj-entity-cards\n        [hidden]=\"effectiveViewMode !== 'cards'\"\n        [entity]=\"entity\"\n        [records]=\"filteredRecords\"\n        [selectedRecordId]=\"selectedRecordId\"\n        [cardTemplate]=\"cardTemplate\"\n        [hiddenFieldMatches]=\"hiddenFieldMatches\"\n        [filterText]=\"debouncedFilterText\"\n        (recordSelected)=\"onRecordSelected($event)\"\n        (recordOpened)=\"onRecordOpened($event)\">\n      </mj-entity-cards>\n\n      <!-- Timeline View - only created when timeline mode is active -->\n      @if (hasDateFields && effectiveViewMode === 'timeline') {\n        <mj-timeline\n          [groups]=\"timelineGroups\"\n          [orientation]=\"timelineOrientation\"\n          [layout]=\"timelineOrientation === 'vertical' ? 'alternating' : 'single'\"\n          [sortOrder]=\"timelineSortOrder\"\n          [segmentGrouping]=\"timelineSegmentGrouping\"\n          [segmentsCollapsible]=\"true\"\n          [segmentsDefaultExpanded]=\"true\"\n          [selectedEventId]=\"timelineSelectedEventId\"\n          (afterEventClick)=\"onTimelineEventClick($event)\">\n        </mj-timeline>\n      }\n    }\n  </div>\n\n  <!-- Pagination - only show when there's more data to load OR we've loaded more than one page -->\n  @if (effectiveConfig.showPagination && entity && (pagination.hasMore || pagination.totalRecords > effectiveConfig.pageSize)) {\n    <mj-pagination\n      [pagination]=\"pagination\"\n      [loadedRecordCount]=\"filteredRecords.length\"\n      (loadMore)=\"onLoadMore()\">\n    </mj-pagination>\n  }\n</div>\n", styles: [".entity-viewer-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  background: #fafafa;\n}\n\n/* Header */\n.viewer-header {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  padding: 12px 16px;\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\n  flex-shrink: 0;\n}\n\n/* Filter */\n.filter-container {\n  flex: 1;\n  max-width: 400px;\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.filter-icon {\n  position: absolute;\n  left: 12px;\n  color: #9e9e9e;\n  font-size: 14px;\n  pointer-events: none;\n}\n\n.filter-input {\n  width: 100%;\n  padding: 8px 36px 8px 36px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  font-size: 14px;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n\n.filter-input:focus {\n  border-color: #1976d2;\n}\n\n.filter-input::placeholder {\n  color: #9e9e9e;\n}\n\n.clear-filter-btn {\n  position: absolute;\n  right: 8px;\n  width: 20px;\n  height: 20px;\n  border: none;\n  background: transparent;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #9e9e9e;\n  transition: all 0.15s ease;\n}\n\n.clear-filter-btn:hover {\n  background: #f5f5f5;\n  color: #616161;\n}\n\n/* Record Count */\n.record-count {\n  font-size: 13px;\n  color: #757575;\n  white-space: nowrap;\n}\n\n/* View Mode Toggle */\n.view-mode-toggle {\n  display: flex;\n  background: #f5f5f5;\n  border-radius: 6px;\n  padding: 2px;\n}\n\n.toggle-btn {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #757575;\n  transition: all 0.15s ease;\n}\n\n.toggle-btn:hover {\n  color: #424242;\n}\n\n.toggle-btn.active {\n  background: white;\n  color: #1976d2;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n/* Timeline Date Field Selector */\n.timeline-date-selector {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 13px;\n  color: #616161;\n}\n\n.timeline-date-selector i {\n  color: #9e9e9e;\n}\n\n.date-field-label {\n  color: #424242;\n  font-weight: 500;\n}\n\n.date-field-select {\n  padding: 4px 8px;\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  font-size: 13px;\n  background: white;\n  color: #424242;\n  cursor: pointer;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n\n.date-field-select:hover {\n  border-color: #bdbdbd;\n}\n\n.date-field-select:focus {\n  border-color: #1976d2;\n}\n\n/* Timeline Orientation Toggle */\n.timeline-orientation-toggle {\n  display: flex;\n  background: #f5f5f5;\n  border-radius: 6px;\n  padding: 2px;\n}\n\n/* Content */\n.viewer-content {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  position: relative;\n  background: white;\n}\n\n/* Loading State */\n.loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\n/* Empty State */\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  color: #9e9e9e;\n  text-align: center;\n}\n\n.empty-state i {\n  font-size: 48px;\n  margin-bottom: 16px;\n  opacity: 0.5;\n}\n\n.empty-state p {\n  margin: 0;\n  font-size: 14px;\n}\n\n/* Hidden components should not display - ensure [hidden] attribute works properly */\nmj-entity-grid[hidden],\nmj-entity-cards[hidden],\nmj-timeline[hidden] {\n  display: none !important;\n}\n\n/* Visible view components should fill available space */\nmj-entity-grid:not([hidden]),\nmj-entity-cards:not([hidden]),\nmj-timeline:not([hidden]) {\n  display: block;\n  height: 100%;\n  width: 100%;\n}\n"] }]
+                }, template: "<div class=\"entity-viewer-container\" [style.height]=\"effectiveConfig.height\">\n  <!-- Header -->\n  @if (effectiveConfig.showFilter || effectiveConfig.showViewModeToggle || effectiveConfig.showRecordCount) {\n    <div class=\"viewer-header\">\n      <!-- Filter Input -->\n      @if (effectiveConfig.showFilter) {\n        <div class=\"filter-container\">\n          <i class=\"fa-solid fa-search filter-icon\"></i>\n          <input\n            type=\"text\"\n            class=\"filter-input\"\n            [placeholder]=\"effectiveConfig.filterPlaceholder\"\n            [value]=\"effectiveFilterText\"\n            (input)=\"onFilterChange($any($event.target).value)\"\n          />\n          @if (effectiveFilterText) {\n            <button class=\"clear-filter-btn\" (click)=\"clearFilter()\" title=\"Clear filter\">\n              <i class=\"fa-solid fa-times\"></i>\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Record Count -->\n      @if (effectiveConfig.showRecordCount && entity) {\n        <div class=\"record-count\">\n          @if (filteredRecordCount !== totalRecordCount) {\n            <span>{{ filteredRecordCount | number }} of {{ totalRecordCount | number }} records</span>\n          } @else {\n            <span>{{ totalRecordCount | number }} records</span>\n          }\n        </div>\n      }\n\n      <!-- View Mode Toggle -->\n      @if (effectiveConfig.showViewModeToggle) {\n        <div class=\"view-mode-toggle\">\n          <button\n            class=\"toggle-btn\"\n            [class.active]=\"effectiveViewMode === 'grid'\"\n            (click)=\"setViewMode('grid')\"\n            title=\"Grid View\">\n            <i class=\"fa-solid fa-list\"></i>\n          </button>\n          <button\n            class=\"toggle-btn\"\n            [class.active]=\"effectiveViewMode === 'cards'\"\n            (click)=\"setViewMode('cards')\"\n            title=\"Cards View\">\n            <i class=\"fa-solid fa-grip\"></i>\n          </button>\n          @if (hasDateFields) {\n            <button\n              class=\"toggle-btn\"\n              [class.active]=\"effectiveViewMode === 'timeline'\"\n              (click)=\"setViewMode('timeline')\"\n              title=\"Timeline View\">\n              <i class=\"fa-solid fa-timeline\"></i>\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Timeline Controls (only shown when timeline is active) -->\n      @if (effectiveViewMode === 'timeline' && hasDateFields) {\n        <!-- Date Field Selector -->\n        <div class=\"timeline-date-selector\">\n          <i class=\"fa-solid fa-calendar-days\"></i>\n          @if (availableDateFields.length === 1) {\n            <span class=\"date-field-label\">{{ selectedDateFieldDisplayName }}</span>\n          } @else {\n            <select\n              class=\"date-field-select\"\n              [value]=\"selectedTimelineDateField\"\n              (change)=\"setTimelineDateField($any($event.target).value)\">\n              @for (field of availableDateFields; track field.Name) {\n                <option [value]=\"field.Name\">{{ field.DisplayNameOrName }}</option>\n              }\n            </select>\n          }\n        </div>\n\n        <!-- Orientation Toggle -->\n        <div class=\"timeline-orientation-toggle\">\n          <button\n            class=\"toggle-btn\"\n            (click)=\"toggleTimelineOrientation()\"\n            [title]=\"timelineOrientation === 'vertical' ? 'Switch to Horizontal' : 'Switch to Vertical'\">\n            <i [class]=\"timelineOrientation === 'vertical' ? 'fa-solid fa-ellipsis-vertical' : 'fa-solid fa-ellipsis'\"></i>\n          </button>\n        </div>\n\n        <!-- Sort Order Toggle -->\n        <div class=\"timeline-sort-toggle\">\n          <button\n            class=\"toggle-btn\"\n            (click)=\"toggleTimelineSortOrder()\"\n            [title]=\"timelineSortOrder === 'desc' ? 'Showing Newest First (click for Oldest First)' : 'Showing Oldest First (click for Newest First)'\">\n            <i [class]=\"timelineSortOrder === 'desc' ? 'fa-solid fa-arrow-down-wide-short' : 'fa-solid fa-arrow-up-wide-short'\"></i>\n          </button>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Content -->\n  <div class=\"viewer-content\">\n    <!-- Loading container - full page when no data exists -->\n    <div class=\"loading-container\" [hidden]=\"!(isLoading && filteredRecords.length === 0)\">\n      <mj-loading [text]=\"loadingMessage\" size=\"medium\"></mj-loading>\n    </div>\n\n    <!-- Loading overlay - shown on top of content when loading with existing data -->\n    <div class=\"loading-overlay\" [hidden]=\"!(isLoading && filteredRecords.length > 0)\">\n      <mj-loading [text]=\"loadingMessage\" size=\"small\"></mj-loading>\n    </div>\n\n    <!-- Empty state: no entity selected -->\n    <div class=\"empty-state\" [hidden]=\"!!entity\">\n      <i class=\"fa-solid fa-database\"></i>\n      <p>Select an entity to view records</p>\n    </div>\n\n    <!-- Empty state: no records found -->\n    <div class=\"empty-state\" [hidden]=\"!entity || filteredRecords.length > 0 || isLoading\">\n      <i class=\"fa-solid fa-inbox\"></i>\n      <p>{{ debouncedFilterText ? 'No matching records' : 'No records found' }}</p>\n    </div>\n\n    <!-- Grid View - always rendered, visibility controlled by hidden -->\n    <mj-entity-data-grid\n      [hidden]=\"effectiveViewMode !== 'grid' || !entity\"\n      [Data]=\"filteredRecords\"\n      [Params]=\"gridParams\"\n      [FilterText]=\"debouncedFilterText\"\n      [GridState]=\"gridState\"\n      [Height]=\"'auto'\"\n      [ShowToolbar]=\"showGridToolbar\"\n      [ToolbarConfig]=\"effectiveGridToolbarConfig\"\n      [SelectionMode]=\"gridSelectionMode\"\n      [ShowAddToListButton]=\"showAddToListButton\"\n      [AllowLoad]=\"false\"\n      (AfterRowClick)=\"onDataGridRowClick($event)\"\n      (AfterRowDoubleClick)=\"onDataGridRowDoubleClick($event)\"\n      (AfterSort)=\"onDataGridSortChanged($event)\"\n      (GridStateChanged)=\"onGridStateChanged($event)\"\n      (SelectionChange)=\"onGridSelectionChange($event)\"\n      (NewButtonClick)=\"onGridAddRequested()\"\n      (RefreshButtonClick)=\"onGridRefreshRequested()\"\n      (DeleteButtonClick)=\"onGridDeleteRequested($event)\"\n      (ExportButtonClick)=\"onGridExportRequested()\"\n      (AddToListRequested)=\"onGridAddToListRequested($event)\">\n    </mj-entity-data-grid>\n\n    <!-- Cards View - always rendered, visibility controlled by hidden -->\n    <mj-entity-cards\n      [hidden]=\"effectiveViewMode !== 'cards' || !entity\"\n      [entity]=\"entity\"\n      [records]=\"filteredRecords\"\n      [selectedRecordId]=\"selectedRecordId\"\n      [cardTemplate]=\"cardTemplate\"\n      [hiddenFieldMatches]=\"hiddenFieldMatches\"\n      [filterText]=\"debouncedFilterText\"\n      (recordSelected)=\"onRecordSelected($event)\"\n      (recordOpened)=\"onRecordOpened($event)\">\n    </mj-entity-cards>\n\n    <!-- Timeline View - always rendered when date fields exist, visibility controlled by hidden -->\n    <mj-timeline\n      [hidden]=\"effectiveViewMode !== 'timeline' || !hasDateFields\"\n      [groups]=\"timelineGroups\"\n      [orientation]=\"timelineOrientation\"\n      [layout]=\"timelineOrientation === 'vertical' ? 'alternating' : 'single'\"\n      [sortOrder]=\"timelineSortOrder\"\n      [segmentGrouping]=\"timelineSegmentGrouping\"\n      [segmentsCollapsible]=\"true\"\n      [segmentsDefaultExpanded]=\"true\"\n      [selectedEventId]=\"timelineSelectedEventId\"\n      (afterEventClick)=\"onTimelineEventClick($event)\">\n    </mj-timeline>\n  </div>\n\n  <!-- Pagination - only show when there's more data to load OR we've loaded more than one page -->\n  @if (effectiveConfig.showPagination && entity && (pagination.hasMore || pagination.totalRecords > effectiveConfig.pageSize)) {\n    <mj-pagination\n      [pagination]=\"pagination\"\n      [loadedRecordCount]=\"filteredRecords.length\"\n      (loadMore)=\"onLoadMore()\">\n    </mj-pagination>\n  }\n</div>\n", styles: [".entity-viewer-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background: #fafafa;\n}\n\n/* Pagination footer - always visible at bottom */\nmj-pagination {\n  flex-shrink: 0;\n}\n\n/* Header */\n.viewer-header {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  padding: 12px 16px;\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\n  flex-shrink: 0;\n}\n\n/* Filter */\n.filter-container {\n  flex: 1;\n  max-width: 400px;\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.filter-icon {\n  position: absolute;\n  left: 12px;\n  color: #9e9e9e;\n  font-size: 14px;\n  pointer-events: none;\n}\n\n.filter-input {\n  width: 100%;\n  padding: 8px 36px 8px 36px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  font-size: 14px;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n\n.filter-input:focus {\n  border-color: #1976d2;\n}\n\n.filter-input::placeholder {\n  color: #9e9e9e;\n}\n\n.clear-filter-btn {\n  position: absolute;\n  right: 8px;\n  width: 20px;\n  height: 20px;\n  border: none;\n  background: transparent;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #9e9e9e;\n  transition: all 0.15s ease;\n}\n\n.clear-filter-btn:hover {\n  background: #f5f5f5;\n  color: #616161;\n}\n\n/* Record Count */\n.record-count {\n  font-size: 13px;\n  color: #757575;\n  white-space: nowrap;\n}\n\n/* View Mode Toggle */\n.view-mode-toggle {\n  display: flex;\n  background: #f5f5f5;\n  border-radius: 6px;\n  padding: 2px;\n}\n\n.toggle-btn {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #757575;\n  transition: all 0.15s ease;\n}\n\n.toggle-btn:hover {\n  color: #424242;\n}\n\n.toggle-btn.active {\n  background: white;\n  color: #1976d2;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n/* Timeline Date Field Selector */\n.timeline-date-selector {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 13px;\n  color: #616161;\n}\n\n.timeline-date-selector i {\n  color: #9e9e9e;\n}\n\n.date-field-label {\n  color: #424242;\n  font-weight: 500;\n}\n\n.date-field-select {\n  padding: 4px 8px;\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  font-size: 13px;\n  background: white;\n  color: #424242;\n  cursor: pointer;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n\n.date-field-select:hover {\n  border-color: #bdbdbd;\n}\n\n.date-field-select:focus {\n  border-color: #1976d2;\n}\n\n/* Timeline Orientation Toggle */\n.timeline-orientation-toggle {\n  display: flex;\n  background: #f5f5f5;\n  border-radius: 6px;\n  padding: 2px;\n}\n\n/* Content */\n.viewer-content {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  position: relative;\n  background: white;\n}\n\n/* Loading State - positioned as overlay when data exists */\n.loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\n/* Loading overlay when shown on top of content */\n.loading-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(255, 255, 255, 0.8);\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Empty State */\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  color: #9e9e9e;\n  text-align: center;\n}\n\n.empty-state i {\n  font-size: 48px;\n  margin-bottom: 16px;\n  opacity: 0.5;\n}\n\n.empty-state p {\n  margin: 0;\n  font-size: 14px;\n}\n\n/* Hidden components should not display - ensure [hidden] attribute works properly */\nmj-entity-cards[hidden],\nmj-timeline[hidden] {\n  display: none !important;\n}\n\n/* Visible view components should fill available space */\nmj-entity-cards:not([hidden]),\nmj-timeline:not([hidden]) {\n  display: block;\n  height: 100%;\n  width: 100%;\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }], { entity: [{
             type: Input
         }], records: [{
@@ -1278,6 +1482,14 @@ export class EntityViewerComponent {
             type: Input
         }], timelineConfig: [{
             type: Input
+        }], showGridToolbar: [{
+            type: Input
+        }], gridToolbarConfig: [{
+            type: Input
+        }], gridSelectionMode: [{
+            type: Input
+        }], showAddToListButton: [{
+            type: Input
         }], recordSelected: [{
             type: Output
         }], recordOpened: [{
@@ -1296,6 +1508,21 @@ export class EntityViewerComponent {
             type: Output
         }], timelineConfigChange: [{
             type: Output
+        }], addRequested: [{
+            type: Output
+        }], deleteRequested: [{
+            type: Output
+        }], refreshRequested: [{
+            type: Output
+        }], exportRequested: [{
+            type: Output
+        }], addToListRequested: [{
+            type: Output
+        }], selectionChanged: [{
+            type: Output
+        }], dataGridRef: [{
+            type: ViewChild,
+            args: [EntityDataGridComponent]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EntityViewerComponent, { className: "EntityViewerComponent", filePath: "src/lib/entity-viewer/entity-viewer.component.ts", lineNumber: 69 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EntityViewerComponent, { className: "EntityViewerComponent" }); })();
 //# sourceMappingURL=entity-viewer.component.js.map