@memberjunction/ng-entity-viewer 3.0.0 → 3.1.0

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

@@ -1,7 +1,7 @@
 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 { EntityFieldTSType, RunView, Metadata } 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';
@@ -165,7 +165,7 @@ function EntityViewerComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.effectiveConfig.showFilter ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.effectiveConfig.showRecordCount && ctx_r1.entity ? 2 : -1);
+    i0.ɵɵconditional(ctx_r1.effectiveConfig.showRecordCount && ctx_r1.effectiveEntity ? 2 : -1);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.effectiveConfig.showViewModeToggle ? 3 : -1);
     i0.ɵɵadvance();
@@ -216,20 +216,70 @@ function EntityViewerComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
 export class EntityViewerComponent {
     cdr;
     // ========================================
-    // INPUTS
+    // INPUTS (using getter/setter pattern)
     // ========================================
+    _entity = null;
+    _records = null;
+    _config = {};
+    _viewMode = null;
+    _filterText = null;
+    _sortState = null;
+    _viewEntity = null;
+    _timelineConfig = null;
+    _initialized = false;
     /**
      * The entity to display records for
      */
-    entity = null;
+    get entity() {
+        return this._entity;
+    }
+    set entity(value) {
+        this._entity = value;
+        // Detect date fields for timeline support
+        this.detectDateFields();
+        if (this._initialized) {
+            if (value && !this._records) {
+                // Reset state for new entity - synchronously clear all data and force change detection
+                // before starting the async load to prevent stale data display
+                this.resetPaginationState();
+                this.cdr.detectChanges();
+                this.loadData();
+            }
+            else if (!value) {
+                this.internalRecords = [];
+                this.totalRecordCount = 0;
+                this.filteredRecordCount = 0;
+                this.resetPaginationState();
+                this.cdr.detectChanges();
+            }
+        }
+    }
     /**
      * Pre-loaded records (optional - if not provided, component loads data)
      */
-    records = null;
+    get records() {
+        return this._records;
+    }
+    set records(value) {
+        this._records = value;
+        if (value) {
+            this.internalRecords = value;
+            this.totalRecordCount = value.length;
+            this.filteredRecordCount = value.length;
+            // Update timeline with new records
+            this.updateTimelineGroups();
+        }
+    }
     /**
      * Configuration options for the viewer
      */
-    config = {};
+    get config() {
+        return this._config;
+    }
+    set config(value) {
+        this._config = value;
+        this.applyConfig();
+    }
     /**
      * Currently selected record ID (primary key string)
      */
@@ -238,16 +288,67 @@ export class EntityViewerComponent {
      * External view mode - allows parent to control view mode
      * Supports two-way binding: [(viewMode)]="state.viewMode"
      */
-    viewMode = null;
+    get viewMode() {
+        return this._viewMode;
+    }
+    set viewMode(value) {
+        this._viewMode = value;
+        if (value !== null) {
+            this.internalViewMode = value;
+        }
+    }
     /**
      * External filter text - allows parent to control filter
      * Supports two-way binding: [(filterText)]="state.filterText"
      */
-    filterText = null;
+    get filterText() {
+        return this._filterText;
+    }
+    set filterText(value) {
+        const oldFilter = this.debouncedFilterText;
+        this._filterText = value;
+        const newFilter = value ?? '';
+        this.internalFilterText = newFilter;
+        this.debouncedFilterText = newFilter;
+        if (this._initialized) {
+            // If server-side filtering and filter changed, reload from page 1
+            // Keep existing records visible during refresh for better UX
+            if (this.effectiveConfig.serverSideFiltering && newFilter !== oldFilter && !this._records) {
+                this.resetPaginationState(false);
+                this.loadData();
+            }
+            else {
+                this.updateFilteredCount();
+            }
+            this.cdr.detectChanges();
+        }
+    }
     /**
      * External sort state - allows parent to control sorting
      */
-    sortState = null;
+    get sortState() {
+        return this._sortState;
+    }
+    set sortState(value) {
+        const oldSort = this.internalSortState;
+        this._sortState = value;
+        if (value !== null) {
+            this.internalSortState = value;
+            if (this._initialized) {
+                // If sort changed and using server-side sorting, reload
+                // Keep existing records visible during refresh for better UX
+                if (this.effectiveConfig.serverSideSorting && !this._records) {
+                    const sortChanged = !oldSort || !value ||
+                        oldSort.field !== value.field ||
+                        oldSort.direction !== value.direction;
+                    if (sortChanged) {
+                        this.resetPaginationState(false);
+                        this.loadData();
+                    }
+                }
+            }
+        }
+    }
     /**
      * Custom grid column definitions
      */
@@ -261,7 +362,26 @@ export class EntityViewerComponent {
      * When provided, the component will use the view's WhereClause, GridState, SortState, etc.
      * The view's filter is additive - UserSearchString is applied ON TOP of the view's WhereClause
      */
-    viewEntity = null;
+    get viewEntity() {
+        return this._viewEntity;
+    }
+    set viewEntity(value) {
+        this._viewEntity = value;
+        if (this._initialized && this._entity && !this._records) {
+            // Apply view's sort state if available
+            if (value) {
+                const viewSortInfo = value.ViewSortInfo;
+                if (viewSortInfo && viewSortInfo.length > 0) {
+                    this.internalSortState = {
+                        field: viewSortInfo[0].field,
+                        direction: viewSortInfo[0].direction === 'Desc' ? 'desc' : 'asc'
+                    };
+                }
+            }
+            this.resetPaginationState();
+            this.loadData();
+        }
+    }
     /**
      * Grid state configuration from a User View
      * Controls column visibility, widths, order, and sort settings
@@ -285,13 +405,12 @@ export class EntityViewerComponent {
                 prev.segmentGrouping === value.segmentGrouping);
         if (!isEqual) {
             this._timelineConfig = value;
-            if (value && this.entity) {
+            if (value && this._entity) {
                 this.configureTimeline();
                 this.cdr.markForCheck();
             }
         }
     }
-    _timelineConfig = null;
     /**
      * Whether to show the grid toolbar.
      * When false, the grid is displayed without its own toolbar - useful when
@@ -463,6 +582,51 @@ export class EntityViewerComponent {
     // ========================================
     // COMPUTED PROPERTIES
     // ========================================
+    /**
+     * Get the effective entity - uses entity input if provided, otherwise derives from viewEntity
+     * This allows callers to provide just a viewEntity without explicitly setting the entity input.
+     * Uses fallback resolution when ViewEntityInfo is not available.
+     */
+    get effectiveEntity() {
+        if (this.entity) {
+            return this.entity;
+        }
+        // Auto-derive from viewEntity if available
+        if (this.viewEntity) {
+            return this.getEntityInfoFromViewEntity(this.viewEntity);
+        }
+        return null;
+    }
+    /**
+     * Gets EntityInfo from a ViewEntity with multiple fallback strategies.
+     * Priority: 1) ViewEntityInfo property (set by Load)
+     *           2) Entity name lookup (virtual field)
+     *           3) EntityID lookup
+     * Returns null if entity cannot be determined.
+     */
+    getEntityInfoFromViewEntity(viewEntity) {
+        // First try: ViewEntityInfo is the preferred source (set by UserViewEntityExtended.Load)
+        if (viewEntity.ViewEntityInfo) {
+            return viewEntity.ViewEntityInfo;
+        }
+        const md = new Metadata();
+        // Second try: Look up by Entity name (virtual field that returns entity name)
+        if (viewEntity.Entity) {
+            const entityByName = md.Entities.find(e => e.Name === viewEntity.Entity);
+            if (entityByName) {
+                return entityByName;
+            }
+        }
+        // Third try: Look up by EntityID
+        if (viewEntity.EntityID) {
+            const entityById = md.Entities.find(e => e.ID === viewEntity.EntityID);
+            if (entityById) {
+                return entityById;
+            }
+        }
+        console.warn(`[EntityViewer] Could not determine entity for view "${viewEntity.Name}" (ID: ${viewEntity.ID})`);
+        return null;
+    }
     /**
      * Get the effective view mode (external or internal)
      */
@@ -524,17 +688,18 @@ export class EntityViewerComponent {
      * which would cause the grid to reinitialize
      */
     get gridParams() {
-        if (!this.entity) {
+        const entity = this.effectiveEntity;
+        if (!entity) {
             return null;
         }
         // Check if we need to recreate the params object
-        const entityChanged = this._lastGridParamsEntity !== this.entity.Name;
+        const entityChanged = this._lastGridParamsEntity !== entity.Name;
         const viewEntityChanged = this._lastGridParamsViewEntity !== this.viewEntity;
         if (entityChanged || viewEntityChanged || !this._cachedGridParams) {
-            this._lastGridParamsEntity = this.entity.Name;
+            this._lastGridParamsEntity = entity.Name;
             this._lastGridParamsViewEntity = this.viewEntity ?? null;
             this._cachedGridParams = {
-                EntityName: this.entity.Name,
+                EntityName: entity.Name,
                 ViewEntity: this.viewEntity || undefined
             };
         }
@@ -701,91 +866,11 @@ export class EntityViewerComponent {
                 direction: this.effectiveConfig.defaultSortDirection ?? 'asc'
             };
         }
-        // Note: We don't call loadData() here because ngOnChanges runs before ngOnInit
-        // and already handles the initial entity binding. Calling loadData() here would
-        // result in duplicate data loading (200 records instead of 100).
-    }
-    ngOnChanges(changes) {
-        if (changes['config']) {
-            this.applyConfig();
-        }
-        if (changes['entity']) {
-            // Detect date fields for timeline support
-            this.detectDateFields();
-            if (this.entity && !this.records) {
-                // Reset state for new entity - synchronously clear all data and force change detection
-                // before starting the async load to prevent stale data display
-                this.resetPaginationState();
-                this.cdr.detectChanges();
-                this.loadData();
-            }
-            else if (!this.entity) {
-                this.internalRecords = [];
-                this.totalRecordCount = 0;
-                this.filteredRecordCount = 0;
-                this.resetPaginationState();
-                this.cdr.detectChanges();
-            }
-        }
-        if (changes['records'] && this.records) {
-            this.internalRecords = this.records;
-            this.totalRecordCount = this.records.length;
-            this.filteredRecordCount = this.records.length;
-            // Update timeline with new records
-            this.updateTimelineGroups();
-        }
-        // Timeline config is now handled by setter - no ngOnChanges handling needed
-        // Handle external filter text changes (from parent component)
-        if (changes['filterText']) {
-            const newFilter = this.filterText ?? '';
-            const oldFilter = this.debouncedFilterText;
-            this.internalFilterText = newFilter;
-            this.debouncedFilterText = newFilter;
-            // If server-side filtering and filter changed, reload from page 1
-            if (this.effectiveConfig.serverSideFiltering && newFilter !== oldFilter && !this.records) {
-                this.resetPaginationState();
-                this.loadData();
-            }
-            else {
-                this.updateFilteredCount();
-            }
-            this.cdr.detectChanges();
-        }
-        // Handle external view mode changes
-        if (changes['viewMode'] && this.viewMode !== null) {
-            this.internalViewMode = this.viewMode;
-        }
-        // Handle external sort state changes
-        if (changes['sortState'] && this.sortState !== null) {
-            const oldSort = this.internalSortState;
-            this.internalSortState = this.sortState;
-            // If sort changed and using server-side sorting, reload
-            if (this.effectiveConfig.serverSideSorting && !this.records) {
-                const sortChanged = !oldSort || !this.sortState ||
-                    oldSort.field !== this.sortState.field ||
-                    oldSort.direction !== this.sortState.direction;
-                if (sortChanged) {
-                    this.resetPaginationState();
-                    this.loadData();
-                }
-            }
-        }
-        // Handle viewEntity changes - reload data when view changes
-        if (changes['viewEntity']) {
-            if (this.entity && !this.records) {
-                // Apply view's sort state if available
-                if (this.viewEntity) {
-                    const viewSortInfo = this.viewEntity.ViewSortInfo;
-                    if (viewSortInfo && viewSortInfo.length > 0) {
-                        this.internalSortState = {
-                            field: viewSortInfo[0].field,
-                            direction: viewSortInfo[0].direction === 'Desc' ? 'desc' : 'asc'
-                        };
-                    }
-                }
-                this.resetPaginationState();
-                this.loadData();
-            }
+        // Mark as initialized - setters will now trigger data loading
+        this._initialized = true;
+        // If entity was set before initialization, load data now
+        if (this._entity && !this._records) {
+            this.loadData();
         }
     }
     ngOnDestroy() {
@@ -810,8 +895,9 @@ export class EntityViewerComponent {
             this.debouncedFilterText = filterText;
             this.filterTextChange.emit(filterText);
             // If server-side filtering and filter changed, reload from page 1
+            // Keep existing records visible during refresh for better UX
             if (this.effectiveConfig.serverSideFiltering && filterText !== oldFilter && !this.records) {
-                this.resetPaginationState();
+                this.resetPaginationState(false);
                 this.loadData();
             }
             else {
@@ -835,42 +921,54 @@ export class EntityViewerComponent {
     }
     /**
      * Reset pagination state for a fresh load.
-     * Clears all record data and counts to prevent stale data display during entity switches.
+     * When clearRecords is true (default), clears all record data - use for entity switches.
+     * When clearRecords is false, keeps existing records visible during refresh - use for sort/filter changes.
      */
-    resetPaginationState() {
+    resetPaginationState(clearRecords = true) {
         this.pagination = {
             currentPage: 0,
             pageSize: this.effectiveConfig.pageSize,
-            totalRecords: 0,
+            totalRecords: clearRecords ? 0 : this.pagination.totalRecords,
             hasMore: false,
             isLoading: false
         };
-        this.internalRecords = [];
-        this.totalRecordCount = 0;
-        this.filteredRecordCount = 0;
+        if (clearRecords) {
+            this.internalRecords = [];
+            this.totalRecordCount = 0;
+            this.filteredRecordCount = 0;
+        }
         this.isInitialLoad = true;
     }
     // ========================================
     // DATA LOADING
     // ========================================
+    // Sequence counter for tracking load requests and detecting stale responses
+    _loadSequence = 0;
+    // Flag to indicate a reload is pending (requested while another load was in progress)
+    _pendingReload = false;
     /**
      * Load data for the current entity with server-side filtering/sorting/pagination
      */
     async loadData() {
-        if (!this.entity) {
+        const entity = this.effectiveEntity;
+        if (!entity) {
             this.internalRecords = [];
             this.totalRecordCount = 0;
             this.filteredRecordCount = 0;
             return;
         }
-        // Prevent concurrent loads which can cause duplicate records
+        // Increment sequence to track this load request
+        const loadId = ++this._loadSequence;
+        // If a load is already in progress, mark that we need to reload when it completes
+        // This handles the case where view/filter changes occur during an active load
         if (this.isLoading) {
+            this._pendingReload = true;
             return;
         }
         this.isLoading = true;
         this.pagination.isLoading = true;
         this.loadingMessage = this.isInitialLoad
-            ? `Loading ${this.entity.Name}...`
+            ? `Loading ${entity.Name}...`
             : 'Loading more records...';
         this.cdr.detectChanges();
         const startTime = Date.now();
@@ -893,14 +991,22 @@ export class EntityViewerComponent {
             // The view's WhereClause is the "business filter" - UserSearchString is additive
             const extraFilter = this.viewEntity?.WhereClause || undefined;
             const result = await rv.RunView({
-                EntityName: this.entity.Name,
+                EntityName: entity.Name,
                 ResultType: 'entity_object',
                 MaxRows: config.pageSize,
                 StartRow: startRow,
                 OrderBy: orderBy,
                 ExtraFilter: extraFilter,
-                UserSearchString: config.serverSideFiltering ? this.debouncedFilterText || undefined : undefined
+                // Only use UserSearchString for regular text search, NOT for smart filters
+                // Smart filters generate WhereClause via AI on the server, so the prompt text should not be passed as UserSearchString
+                UserSearchString: config.serverSideFiltering && !this.viewEntity?.SmartFilterEnabled
+                    ? this.debouncedFilterText || undefined
+                    : undefined
             });
+            // Check if this load is still the current one (detect stale responses)
+            if (loadId !== this._loadSequence) {
+                return;
+            }
             if (result.Success) {
                 // Append or replace records based on whether this is initial load
                 if (this.isInitialLoad) {
@@ -928,7 +1034,6 @@ export class EntityViewerComponent {
                 this.updateTimelineGroups();
             }
             else {
-                console.error('Failed to load records:', result.ErrorMessage);
                 if (this.isInitialLoad) {
                     this.internalRecords = [];
                 }
@@ -937,7 +1042,6 @@ export class EntityViewerComponent {
             }
         }
         catch (error) {
-            console.error('Error loading records:', error);
             if (this.isInitialLoad) {
                 this.internalRecords = [];
             }
@@ -949,6 +1053,13 @@ export class EntityViewerComponent {
             this.pagination.isLoading = false;
             this.isInitialLoad = false;
             this.cdr.detectChanges();
+            // If a reload was requested while we were loading, trigger it now
+            if (this._pendingReload) {
+                this._pendingReload = false;
+                this.resetPaginationState();
+                // Use setTimeout to break the call stack and allow Angular to process
+                setTimeout(() => this.loadData(), 0);
+            }
         }
     }
     /**
@@ -963,10 +1074,11 @@ export class EntityViewerComponent {
     }
     /**
      * Refresh data (re-load from server, starting at page 1)
+     * Keeps existing records visible during refresh for better UX
      */
     refresh() {
         if (!this.records) {
-            this.resetPaginationState();
+            this.resetPaginationState(false);
             this.loadData();
         }
     }
@@ -1012,12 +1124,13 @@ export class EntityViewerComponent {
         this.internalSortState = event.sort;
         this.sortChanged.emit(event);
         // If server-side sorting, reload from page 1
+        // Keep existing records visible during refresh for better UX
         if (this.effectiveConfig.serverSideSorting && !this.records) {
             const sortChanged = !oldSort || !event.sort ||
                 oldSort.field !== event.sort?.field ||
                 oldSort.direction !== event.sort?.direction;
             if (sortChanged) {
-                this.resetPaginationState();
+                this.resetPaginationState(false);
                 this.loadData();
             }
         }
@@ -1057,11 +1170,12 @@ export class EntityViewerComponent {
      * Maps to recordSelected event for parent components
      */
     onDataGridRowClick(event) {
-        if (!this.entity || !event.row)
+        const entity = this.effectiveEntity;
+        if (!entity || !event.row)
             return;
         this.recordSelected.emit({
             record: event.row,
-            entity: this.entity,
+            entity: entity,
             compositeKey: event.row.PrimaryKey
         });
     }
@@ -1070,11 +1184,12 @@ export class EntityViewerComponent {
      * Maps to recordOpened event for parent components
      */
     onDataGridRowDoubleClick(event) {
-        if (!this.entity || !event.row)
+        const entity = this.effectiveEntity;
+        if (!entity || !event.row)
             return;
         this.recordOpened.emit({
             record: event.row,
-            entity: this.entity,
+            entity: entity,
             compositeKey: event.row.PrimaryKey
         });
     }
@@ -1093,8 +1208,9 @@ export class EntityViewerComponent {
         this.internalSortState = newSort;
         this.sortChanged.emit({ sort: newSort });
         // If server-side sorting, reload from page 1
+        // Keep existing records visible during refresh for better UX
         if (this.effectiveConfig.serverSideSorting && !this.records) {
-            this.resetPaginationState();
+            this.resetPaginationState(false);
             this.loadData();
         }
     }
@@ -1153,10 +1269,11 @@ export class EntityViewerComponent {
      */
     onTimelineEventClick(event) {
         const record = event.event.entity;
-        if (record && this.entity) {
+        const entity = this.effectiveEntity;
+        if (record && entity) {
             this.recordSelected.emit({
                 record,
-                entity: this.entity,
+                entity: entity,
                 compositeKey: record.PrimaryKey
             });
         }
@@ -1395,7 +1512,7 @@ export class EntityViewerComponent {
         } 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) {
+        } }, 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" }, 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)(3, "div", 3);
@@ -1438,26 +1555,26 @@ export class EntityViewerComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("text", ctx.loadingMessage);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("hidden", !!ctx.entity);
+            i0.ɵɵproperty("hidden", !!ctx.effectiveEntity);
             i0.ɵɵadvance(4);
-            i0.ɵɵproperty("hidden", !ctx.entity || ctx.filteredRecords.length > 0 || ctx.isLoading);
+            i0.ɵɵproperty("hidden", !ctx.effectiveEntity || 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.ɵɵproperty("hidden", ctx.effectiveViewMode !== "grid" || !ctx.effectiveEntity)("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.ɵɵproperty("hidden", ctx.effectiveViewMode !== "cards" || !ctx.effectiveEntity)("entity", ctx.effectiveEntity)("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}"] });
+            i0.ɵɵconditional(ctx.effectiveConfig.showPagination && ctx.effectiveEntity && (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.loading-container[hidden][_ngcontent-%COMP%], \n.loading-overlay[hidden][_ngcontent-%COMP%] {\n  display: none !important;\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    <!-- 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"] }]
+                }, 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 && effectiveEntity) {\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]=\"!!effectiveEntity\">\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]=\"!effectiveEntity || 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' || !effectiveEntity\"\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' || !effectiveEntity\"\n      [entity]=\"effectiveEntity\"\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 && effectiveEntity && (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 - full-page centered loading for initial load when no data exists */\n.loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\n/* Loading overlay - semi-transparent overlay on top of existing content during refresh */\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/* Ensure [hidden] attribute works properly on loading elements */\n.loading-container[hidden],\n.loading-overlay[hidden] {\n  display: none !important;\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: [{
@@ -1524,5 +1641,5 @@ export class EntityViewerComponent {
             type: ViewChild,
             args: [EntityDataGridComponent]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EntityViewerComponent, { className: "EntityViewerComponent" }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EntityViewerComponent, { className: "EntityViewerComponent", filePath: "src/lib/entity-viewer/entity-viewer.component.ts", lineNumber: 76 }); })();
 //# sourceMappingURL=entity-viewer.component.js.map