@memberjunction/ng-entity-viewer 5.23.0 → 5.25.0

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

@@ -11,25 +11,26 @@ 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-cards/entity-cards.component";
-import * as i5 from "../entity-data-grid/entity-data-grid.component";
-import * as i6 from "@angular/common";
+import * as i4 from "@memberjunction/ng-map-view";
+import * as i5 from "../entity-cards/entity-cards.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", 19);
+    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", 20);
+    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", 13);
-    i0.ɵɵelement(1, "i", 16);
-    i0.ɵɵelementStart(2, "input", 17);
+    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.ɵɵconditionalCreate(3, EntityViewerComponent_Conditional_1_Conditional_1_Conditional_3_Template, 2, 0, "button", 18);
+    i0.ɵɵconditionalCreate(3, EntityViewerComponent_Conditional_1_Conditional_1_Conditional_3_Template, 2, 0, "button", 19);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -60,7 +61,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", 14);
+    i0.ɵɵelementStart(0, "div", 15);
     i0.ɵɵconditionalCreate(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) {
@@ -70,9 +71,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", 26);
+    i0.ɵɵelementStart(0, "button", 29);
     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", 27);
+    i0.ɵɵelement(1, "i", 30);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -80,16 +81,19 @@ 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", 15)(1, "button", 21);
+    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", 22);
+    i0.ɵɵelement(2, "i", 23);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 23);
+    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", 24);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, EntityViewerComponent_Conditional_1_Conditional_3_Conditional_5_Template, 2, 2, "button", 25);
+    i0.ɵɵelement(4, "i", 25);
     i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(5, EntityViewerComponent_Conditional_1_Conditional_3_Conditional_5_Template, 2, 2, "button", 26);
+    i0.ɵɵelementStart(6, "button", 27);
+    i0.ɵɵlistener("click", function EntityViewerComponent_Conditional_1_Conditional_3_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setViewMode("map")); });
+    i0.ɵɵelement(7, "i", 28);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
@@ -98,9 +102,11 @@ function EntityViewerComponent_Conditional_1_Conditional_3_Template(rf, ctx) { i
     i0.ɵɵclassProp("active", ctx_r1.effectiveViewMode === "cards");
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.hasDateFields ? 5 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("active", ctx_r1.effectiveViewMode === "map")("geo-hidden", !ctx_r1.HasGeoCoding);
 } }
 function EntityViewerComponent_Conditional_1_Conditional_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 30);
+    i0.ɵɵelementStart(0, "span", 33);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -109,7 +115,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", 36);
+    i0.ɵɵelementStart(0, "option", 39);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -120,9 +126,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", 35);
+    i0.ɵɵelementStart(0, "select", 38);
     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", 36, _forTrack0);
+    i0.ɵɵrepeaterCreate(1, EntityViewerComponent_Conditional_1_Conditional_4_Conditional_3_For_2_Template, 2, 2, "option", 39, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -132,15 +138,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", 28);
-    i0.ɵɵelement(1, "i", 29);
-    i0.ɵɵconditionalCreate(2, EntityViewerComponent_Conditional_1_Conditional_4_Conditional_2_Template, 2, 1, "span", 30)(3, EntityViewerComponent_Conditional_1_Conditional_4_Conditional_3_Template, 3, 1, "select", 31);
+    i0.ɵɵelementStart(0, "div", 31);
+    i0.ɵɵelement(1, "i", 32);
+    i0.ɵɵconditionalCreate(2, EntityViewerComponent_Conditional_1_Conditional_4_Conditional_2_Template, 2, 1, "span", 33)(3, EntityViewerComponent_Conditional_1_Conditional_4_Conditional_3_Template, 3, 1, "select", 34);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 32)(5, "button", 33);
+    i0.ɵɵelementStart(4, "div", 35)(5, "button", 36);
     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", 34)(8, "button", 33);
+    i0.ɵɵelementStart(7, "div", 37)(8, "button", 36);
     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()();
@@ -159,9 +165,9 @@ 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.ɵɵconditionalCreate(1, EntityViewerComponent_Conditional_1_Conditional_1_Template, 4, 3, "div", 13);
-    i0.ɵɵconditionalCreate(2, EntityViewerComponent_Conditional_1_Conditional_2_Template, 3, 1, "div", 14);
-    i0.ɵɵconditionalCreate(3, EntityViewerComponent_Conditional_1_Conditional_3_Template, 6, 5, "div", 15);
+    i0.ɵɵconditionalCreate(1, EntityViewerComponent_Conditional_1_Conditional_1_Template, 4, 3, "div", 14);
+    i0.ɵɵconditionalCreate(2, EntityViewerComponent_Conditional_1_Conditional_2_Template, 3, 1, "div", 15);
+    i0.ɵɵconditionalCreate(3, EntityViewerComponent_Conditional_1_Conditional_3_Template, 8, 9, "div", 16);
     i0.ɵɵconditionalCreate(4, EntityViewerComponent_Conditional_1_Conditional_4_Template, 10, 7);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -175,6 +181,15 @@ 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_18_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-map-view", 40);
+    i0.ɵɵlistener("MarkerClick", function EntityViewerComponent_Conditional_18_Template_mj_map_view_MarkerClick_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onMapMarkerClick($event)); })("RenderModeChange", function EntityViewerComponent_Conditional_18_Template_mj_map_view_RenderModeChange_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onMapRenderModeChange($event)); })("DisplayStateChange", function EntityViewerComponent_Conditional_18_Template_mj_map_view_DisplayStateChange_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onMapDisplayStateChange($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("hidden", ctx_r1.effectiveViewMode !== "map")("Entity", ctx_r1.effectiveEntity)("Records", ctx_r1.filteredRecords)("TotalRecordCount", ctx_r1.totalRecordCount)("RenderMode", ctx_r1.mapRenderMode)("DisplayState", ctx_r1.mapDisplayState);
+} }
 /**
  * EntityViewerComponent - Full-featured composite component for viewing entity data
  *
@@ -211,6 +226,12 @@ function EntityViewerComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
 export class EntityViewerComponent {
     cdr;
     ngZone;
+    /**
+     * Maximum records to load in map mode. Map view needs all records for
+     * geographic visualization — paging doesn't make sense for maps. This cap
+     * prevents unbounded queries on very large entities.
+     */
+    static MAP_MAX_RECORDS = 10000;
     // ========================================
     // INPUTS (using getter/setter pattern)
     // ========================================
@@ -236,6 +257,8 @@ export class EntityViewerComponent {
         this._entity = value;
         // Detect date fields for timeline support
         this.detectDateFields();
+        // Detect geocoding support for map view
+        this.updateGeoCodingSupport();
         if (this._initialized) {
             // If entity changed to a different entity, clear all stale state from the old entity
             if (value && previousEntity && !UUIDsEqual(value.ID, previousEntity.ID)) {
@@ -539,6 +562,8 @@ export class EntityViewerComponent {
     // ========================================
     /** Whether the current entity has date fields available for timeline view */
     hasDateFields = false;
+    /** Whether the current entity supports geocoding (has SupportsGeoCoding = 1) */
+    HasGeoCoding = false;
     /** Available date fields from the entity (sorted by priority) */
     availableDateFields = [];
     /** Timeline groups configuration for the timeline component */
@@ -940,19 +965,14 @@ export class EntityViewerComponent {
         }
         // Priority 2: GridState.sortSettings (sort may only be stored here)
         if (view.GridState) {
-            try {
-                const gridState = JSON.parse(view.GridState);
-                if (gridState.sortSettings && gridState.sortSettings.length > 0) {
-                    const firstSort = gridState.sortSettings[0];
-                    this.internalSortState = {
-                        field: firstSort.field,
-                        direction: firstSort.dir === 'desc' ? 'desc' : 'asc'
-                    };
-                    return;
-                }
-            }
-            catch {
-                // Invalid GridState JSON — ignore
+            const gridState = view.GridStateObject;
+            if (gridState?.sortSettings && gridState.sortSettings.length > 0) {
+                const firstSort = gridState.sortSettings[0];
+                this.internalSortState = {
+                    field: firstSort.field,
+                    direction: firstSort.dir === 'desc' ? 'desc' : 'asc'
+                };
+                return;
             }
         }
         // No sort defined — reset to prevent stale sort from previous view
@@ -1068,8 +1088,12 @@ export class EntityViewerComponent {
                     .map(s => `${s.field} ${(s.dir || 'asc').toUpperCase()}`)
                     .join(', ');
             }
-            // Calculate StartRow for pagination
-            const startRow = this.pagination.currentPage * config.pageSize;
+            // Map mode loads all records (up to MAP_MAX_RECORDS) since paging
+            // doesn't make sense for geographic visualization. Other modes use
+            // standard page-based pagination.
+            const isMapMode = this.effectiveViewMode === 'map';
+            const maxRows = isMapMode ? EntityViewerComponent.MAP_MAX_RECORDS : config.pageSize;
+            const startRow = isMapMode ? 0 : this.pagination.currentPage * config.pageSize;
             // Build ExtraFilter from view's WhereClause if available
             // The view's WhereClause is the "business filter" - UserSearchString is additive
             const extraFilter = this.viewEntity?.WhereClause || undefined;
@@ -1077,7 +1101,7 @@ export class EntityViewerComponent {
                 EntityName: entity.Name,
                 ResultType: 'simple',
                 Fields: computeFieldsList(entity, this.gridState),
-                MaxRows: config.pageSize,
+                MaxRows: maxRows,
                 StartRow: startRow,
                 OrderBy: orderBy,
                 ExtraFilter: extraFilter,
@@ -1099,6 +1123,8 @@ export class EntityViewerComponent {
                 // Update pagination state
                 this.pagination.totalRecords = result.TotalRowCount;
                 this.pagination.hasMore = false; // No longer used with page-based paging
+                // Re-check geo support after data loads (effectiveEntity may have resolved via viewEntity)
+                this.updateGeoCodingSupport();
                 this.dataLoaded.emit({
                     totalRowCount: result.TotalRowCount,
                     loadedRowCount: this.internalRecords.length,
@@ -1171,10 +1197,21 @@ export class EntityViewerComponent {
      * Set the view mode and emit change event
      */
     setViewMode(mode) {
-        if (this.effectiveViewMode !== mode) {
+        const previousMode = this.effectiveViewMode;
+        if (previousMode !== mode) {
             this.internalViewMode = mode;
             this.viewModeChange.emit(mode);
-            this.cdr.detectChanges();
+            // Reload data when switching to/from map mode because map loads all
+            // records (up to MAP_MAX_RECORDS) while other modes use page-based pagination.
+            const switchingToMap = mode === 'map' && previousMode !== 'map';
+            const switchingFromMap = mode !== 'map' && previousMode === 'map';
+            if (switchingToMap || switchingFromMap) {
+                this.resetPaginationState();
+                this.loadData();
+            }
+            else {
+                this.cdr.detectChanges();
+            }
         }
     }
     // ========================================
@@ -1393,6 +1430,56 @@ export class EntityViewerComponent {
             });
         }
     }
+    /**
+     * Update HasGeoCoding based on the current effectiveEntity.
+     * Called from entity setter and after data loads (when effectiveEntity may resolve via viewEntity).
+     */
+    updateGeoCodingSupport() {
+        const entity = this.effectiveEntity;
+        const newValue = !!(entity && entity.SupportsGeoCoding);
+        if (newValue !== this.HasGeoCoding) {
+            this.HasGeoCoding = newValue;
+            this.fallbackFromMapIfNeeded();
+            this.cdr.detectChanges();
+        }
+    }
+    /**
+     * Handle map marker click — emit the record for the parent to handle (open record, etc.)
+     */
+    onMapMarkerClick(event) {
+        const entity = this.effectiveEntity;
+        if (event.Record && entity) {
+            const compositeKey = buildCompositeKey(event.Record, entity);
+            // Emit both recordSelected (for detail panels) and recordOpened (for navigation)
+            this.recordSelected.emit({
+                record: event.Record,
+                entity: entity,
+                compositeKey
+            });
+            this.recordOpened.emit({
+                record: event.Record,
+                entity: entity,
+                compositeKey
+            });
+        }
+    }
+    /** Map display state (zoom, center) — passed from parent for persistence across reloads. */
+    mapDisplayState = null;
+    /** Map render mode — separate from DisplayState for clear single-source-of-truth. */
+    mapRenderMode = 'point';
+    /** Emitted when the map's display state changes (zoom, center). */
+    mapDisplayStateChange = new EventEmitter();
+    /** Emitted when the map's render mode changes (user clicks mode buttons). */
+    mapRenderModeChange = new EventEmitter();
+    /**
+     * Handle map display state changes — bubble up to parent for persistence.
+     */
+    onMapDisplayStateChange(state) {
+        this.mapDisplayStateChange.emit(state);
+    }
+    onMapRenderModeChange(mode) {
+        this.mapRenderModeChange.emit(mode);
+    }
     /**
      * Toggle timeline orientation between vertical and horizontal
      */
@@ -1480,6 +1567,15 @@ export class EntityViewerComponent {
             this.setViewMode('grid');
         }
     }
+    /**
+     * If currently on map view but geocoding is no longer available,
+     * fall back to grid view
+     */
+    fallbackFromMapIfNeeded() {
+        if (this.effectiveViewMode === 'map' && !this.HasGeoCoding) {
+            this.setViewMode('grid');
+        }
+    }
     /**
      * Sort date fields by priority:
      * 1. DefaultInView=true fields, sorted by Sequence (lowest first)
@@ -1627,7 +1723,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" }, standalone: false, decls: 18, vars: 41, 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", "ForeignKeyClick", "PageChange", "hidden", "Data", "Params", "FilterText", "GridState", "Height", "ShowToolbar", "ToolbarConfig", "SelectionMode", "ShowAddToListButton", "AllowLoad", "ShowPager", "PageSize", "TotalRowCount", "PagerPageNumber"], [3, "recordSelected", "recordOpened", "hidden", "entity", "records", "selectedRecordId", "cardTemplate", "hiddenFieldMatches", "filterText"], [3, "afterEventClick", "hidden", "groups", "orientation", "layout", "sortOrder", "segmentGrouping", "segmentsCollapsible", "segmentsDefaultExpanded", "selectedEventId"], [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"]], 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", mapDisplayState: "mapDisplayState", mapRenderMode: "mapRenderMode" }, 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", mapDisplayStateChange: "mapDisplayStateChange", mapRenderModeChange: "mapRenderModeChange" }, standalone: false, decls: 19, vars: 42, 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", "ForeignKeyClick", "PageChange", "hidden", "Data", "Params", "FilterText", "GridState", "Height", "ShowToolbar", "ToolbarConfig", "SelectionMode", "ShowAddToListButton", "AllowLoad", "ShowPager", "PageSize", "TotalRowCount", "PagerPageNumber"], [3, "recordSelected", "recordOpened", "hidden", "entity", "records", "selectedRecordId", "cardTemplate", "hiddenFieldMatches", "filterText"], [3, "afterEventClick", "hidden", "groups", "orientation", "layout", "sortOrder", "segmentGrouping", "segmentsCollapsible", "segmentsDefaultExpanded", "selectedEventId"], [3, "hidden", "Entity", "Records", "TotalRecordCount", "RenderMode", "DisplayState"], [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", "Map View", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-map-location-dot"], ["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, "MarkerClick", "RenderModeChange", "DisplayStateChange", "hidden", "Entity", "Records", "TotalRecordCount", "RenderMode", "DisplayState"]], template: function EntityViewerComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵconditionalCreate(1, EntityViewerComponent_Conditional_1_Template, 5, 4, "div", 1);
             i0.ɵɵelementStart(2, "div", 2)(3, "div", 3);
@@ -1654,7 +1750,9 @@ export class EntityViewerComponent {
             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.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(18, EntityViewerComponent_Conditional_18_Template, 1, 6, "mj-map-view", 13);
+            i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵstyleProp("height", ctx.effectiveConfig.height);
             i0.ɵɵadvance();
@@ -1679,13 +1777,15 @@ export class EntityViewerComponent {
             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);
-        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i2.LoadingComponent, i3.TimelineComponent, i4.EntityCardsComponent, i5.EntityDataGridComponent, i6.DecimalPipe], styles: [".entity-viewer-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background: var(--mj-bg-surface-card);\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: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\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: var(--mj-text-disabled);\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 var(--mj-border-default);\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: var(--mj-brand-primary);\n}\n\n.filter-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-disabled);\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: var(--mj-text-disabled);\n  transition: all 0.15s ease;\n}\n\n.clear-filter-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n}\n\n\n\n.record-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n}\n\n\n\n.view-mode-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: var(--mj-bg-surface-card);\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: var(--mj-text-muted);\n  transition: all 0.15s ease;\n}\n\n.toggle-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-secondary);\n}\n\n.toggle-btn.active[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\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: var(--mj-text-secondary);\n}\n\n.timeline-date-selector[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-disabled);\n}\n\n.date-field-label[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n}\n\n.date-field-select[_ngcontent-%COMP%] {\n  padding: 4px 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  font-size: 13px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\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: var(--mj-border-strong);\n}\n\n.date-field-select[_ngcontent-%COMP%]:focus {\n  border-color: var(--mj-brand-primary);\n}\n\n\n\n.timeline-orientation-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: var(--mj-bg-surface-card);\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: var(--mj-bg-surface);\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: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\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: var(--mj-text-disabled);\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.ɵɵadvance();
+            i0.ɵɵconditional(ctx.HasGeoCoding ? 18 : -1);
+        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i2.LoadingComponent, i3.TimelineComponent, i4.MapViewComponent, i5.EntityCardsComponent, 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: var(--mj-bg-surface-card);\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: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\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: var(--mj-text-disabled);\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 var(--mj-border-default);\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: var(--mj-brand-primary);\n}\n\n.filter-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-disabled);\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: var(--mj-text-disabled);\n  transition: all 0.15s ease;\n}\n\n.clear-filter-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n}\n\n\n\n.record-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n}\n\n\n\n.view-mode-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: var(--mj-bg-surface-card);\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: var(--mj-text-muted);\n  transition: all 0.15s ease;\n}\n\n.toggle-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-secondary);\n}\n\n.toggle-btn.active[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\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: var(--mj-text-secondary);\n}\n\n.timeline-date-selector[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-disabled);\n}\n\n.date-field-label[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n}\n\n.date-field-select[_ngcontent-%COMP%] {\n  padding: 4px 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  font-size: 13px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\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: var(--mj-border-strong);\n}\n\n.date-field-select[_ngcontent-%COMP%]:focus {\n  border-color: var(--mj-brand-primary);\n}\n\n\n\n.timeline-orientation-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: var(--mj-bg-surface-card);\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: var(--mj-bg-surface);\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: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\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: var(--mj-text-disabled);\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%], \nmj-map-view[hidden][_ngcontent-%COMP%] {\n  display: none !important;\n}\n\n\n\nmj-entity-cards[_ngcontent-%COMP%]:not([hidden]), \nmj-timeline[_ngcontent-%COMP%]:not([hidden]), \nmj-map-view[_ngcontent-%COMP%]:not([hidden]) {\n  display: block;\n  height: 100%;\n  width: 100%;\n}\n\n\n\n.toggle-btn.geo-hidden[_ngcontent-%COMP%] {\n  display: none !important;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EntityViewerComponent, [{
         type: Component,
         args: [{ standalone: false, 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 && 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      [ShowPager]=\"effectiveConfig.showPagination\"\n      [PageSize]=\"effectiveConfig.pageSize\"\n      [TotalRowCount]=\"pagination.totalRecords\"\n      [PagerPageNumber]=\"pagination.currentPage + 1\"\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      (ForeignKeyClick)=\"onForeignKeyClick($event)\"\n      (PageChange)=\"onGridPageChange($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</div>\n", styles: [".entity-viewer-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background: var(--mj-bg-surface-card);\n}\n\n/* Header */\n.viewer-header {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\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: var(--mj-text-disabled);\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 var(--mj-border-default);\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: var(--mj-brand-primary);\n}\n\n.filter-input::placeholder {\n  color: var(--mj-text-disabled);\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: var(--mj-text-disabled);\n  transition: all 0.15s ease;\n}\n\n.clear-filter-btn:hover {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n}\n\n/* Record Count */\n.record-count {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n}\n\n/* View Mode Toggle */\n.view-mode-toggle {\n  display: flex;\n  background: var(--mj-bg-surface-card);\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: var(--mj-text-muted);\n  transition: all 0.15s ease;\n}\n\n.toggle-btn:hover {\n  color: var(--mj-text-secondary);\n}\n\n.toggle-btn.active {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\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: var(--mj-text-secondary);\n}\n\n.timeline-date-selector i {\n  color: var(--mj-text-disabled);\n}\n\n.date-field-label {\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n}\n\n.date-field-select {\n  padding: 4px 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  font-size: 13px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n\n.date-field-select:hover {\n  border-color: var(--mj-border-strong);\n}\n\n.date-field-select:focus {\n  border-color: var(--mj-brand-primary);\n}\n\n/* Timeline Orientation Toggle */\n.timeline-orientation-toggle {\n  display: flex;\n  background: var(--mj-bg-surface-card);\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: var(--mj-bg-surface);\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: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\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: var(--mj-text-disabled);\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          <button\n            class=\"toggle-btn\"\n            [class.active]=\"effectiveViewMode === 'map'\"\n            [class.geo-hidden]=\"!HasGeoCoding\"\n            (click)=\"setViewMode('map')\"\n            title=\"Map View\">\n            <i class=\"fa-solid fa-map-location-dot\"></i>\n          </button>\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      [ShowPager]=\"effectiveConfig.showPagination\"\n      [PageSize]=\"effectiveConfig.pageSize\"\n      [TotalRowCount]=\"pagination.totalRecords\"\n      [PagerPageNumber]=\"pagination.currentPage + 1\"\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      (ForeignKeyClick)=\"onForeignKeyClick($event)\"\n      (PageChange)=\"onGridPageChange($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\n    <!-- Map View - rendered when geocoding supported, visibility controlled by hidden -->\n    @if (HasGeoCoding) {\n      <mj-map-view\n        [hidden]=\"effectiveViewMode !== 'map'\"\n        [Entity]=\"effectiveEntity!\"\n        [Records]=\"filteredRecords\"\n        [TotalRecordCount]=\"totalRecordCount\"\n        [RenderMode]=\"mapRenderMode\"\n        [DisplayState]=\"mapDisplayState\"\n        (MarkerClick)=\"onMapMarkerClick($event)\"\n        (RenderModeChange)=\"onMapRenderModeChange($event)\"\n        (DisplayStateChange)=\"onMapDisplayStateChange($event)\">\n      </mj-map-view>\n    }\n  </div>\n\n</div>\n", styles: [".entity-viewer-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background: var(--mj-bg-surface-card);\n}\n\n/* Header */\n.viewer-header {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\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: var(--mj-text-disabled);\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 var(--mj-border-default);\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: var(--mj-brand-primary);\n}\n\n.filter-input::placeholder {\n  color: var(--mj-text-disabled);\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: var(--mj-text-disabled);\n  transition: all 0.15s ease;\n}\n\n.clear-filter-btn:hover {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n}\n\n/* Record Count */\n.record-count {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n}\n\n/* View Mode Toggle */\n.view-mode-toggle {\n  display: flex;\n  background: var(--mj-bg-surface-card);\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: var(--mj-text-muted);\n  transition: all 0.15s ease;\n}\n\n.toggle-btn:hover {\n  color: var(--mj-text-secondary);\n}\n\n.toggle-btn.active {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\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: var(--mj-text-secondary);\n}\n\n.timeline-date-selector i {\n  color: var(--mj-text-disabled);\n}\n\n.date-field-label {\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n}\n\n.date-field-select {\n  padding: 4px 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  font-size: 13px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n\n.date-field-select:hover {\n  border-color: var(--mj-border-strong);\n}\n\n.date-field-select:focus {\n  border-color: var(--mj-brand-primary);\n}\n\n/* Timeline Orientation Toggle */\n.timeline-orientation-toggle {\n  display: flex;\n  background: var(--mj-bg-surface-card);\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: var(--mj-bg-surface);\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: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\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: var(--mj-text-disabled);\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],\nmj-map-view[hidden] {\n  display: none !important;\n}\n\n/* Visible view components should fill available space */\nmj-entity-cards:not([hidden]),\nmj-timeline:not([hidden]),\nmj-map-view:not([hidden]) {\n  display: block;\n  height: 100%;\n  width: 100%;\n}\n\n/* Hide map toggle when entity does not support geocoding */\n.toggle-btn.geo-hidden {\n  display: none !important;\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], { entity: [{
             type: Input
         }], records: [{
@@ -1751,6 +1851,14 @@ export class EntityViewerComponent {
         }], dataGridRef: [{
             type: ViewChild,
             args: [EntityDataGridComponent]
+        }], mapDisplayState: [{
+            type: Input
+        }], mapRenderMode: [{
+            type: Input
+        }], mapDisplayStateChange: [{
+            type: Output
+        }], mapRenderModeChange: [{
+            type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EntityViewerComponent, { className: "EntityViewerComponent", filePath: "src/lib/entity-viewer/entity-viewer.component.ts", lineNumber: 79 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EntityViewerComponent, { className: "EntityViewerComponent", filePath: "src/lib/entity-viewer/entity-viewer.component.ts", lineNumber: 80 }); })();
 //# sourceMappingURL=entity-viewer.component.js.map