@memberjunction/ng-dashboards 2.127.0 → 2.128.0

package/dist/DataExplorer/data-explorer-dashboard.component.js

@@ -16,539 +16,544 @@ import { EntityViewerComponent } from '@memberjunction/ng-entity-viewer';
 import { ViewSelectorComponent } from './components/view-selector/view-selector.component';
 import { ViewConfigPanelComponent } from './components/view-config-panel/view-config-panel.component';
 import { createEmptyFilter } from '@memberjunction/ng-filter-builder';
+import { ExcelExportComponent } from '@progress/kendo-angular-excel-export';
+import { MJEventType, MJGlobal } from '@memberjunction/global';
 import * as i0 from "@angular/core";
 import * as i1 from "./services/explorer-state.service";
 import * as i2 from "@angular/router";
 import * as i3 from "@memberjunction/ng-shared-generic";
 import * as i4 from "@memberjunction/ng-shared";
 import * as i5 from "@angular/forms";
-import * as i6 from "@memberjunction/ng-entity-viewer";
-import * as i7 from "./components/navigation-panel/navigation-panel.component";
-import * as i8 from "./components/view-selector/view-selector.component";
-import * as i9 from "./components/view-config-panel/view-config-panel.component";
-import * as i10 from "./components/filter-dialog/filter-dialog.component";
-import * as i11 from "@angular/common";
+import * as i6 from "@progress/kendo-angular-excel-export";
+import * as i7 from "@memberjunction/ng-entity-viewer";
+import * as i8 from "./components/navigation-panel/navigation-panel.component";
+import * as i9 from "./components/view-selector/view-selector.component";
+import * as i10 from "./components/view-config-panel/view-config-panel.component";
+import * as i11 from "./components/filter-dialog/filter-dialog.component";
+import * as i12 from "@angular/common";
 const _c0 = ["filterInput"];
-const _forTrack0 = ($index, $item) => $item.label;
-const _forTrack1 = ($index, $item) => $item.name;
-const _forTrack2 = ($index, $item) => $item.ID;
-const _forTrack3 = ($index, $item) => $item.entityId + "|" + $item.recordId;
-const _forTrack4 = ($index, $item) => $item.entityId;
-const _forTrack5 = ($index, $item) => $item.userFavoriteId;
+const _c1 = ["excelExport"];
+const _forTrack0 = ($index, $item) => $item.Name;
+const _forTrack1 = ($index, $item) => $item.label;
+const _forTrack2 = ($index, $item) => $item.name;
+const _forTrack3 = ($index, $item) => $item.ID;
+const _forTrack4 = ($index, $item) => $item.entityId + "|" + $item.recordId;
+const _forTrack5 = ($index, $item) => $item.entityId;
+const _forTrack6 = ($index, $item) => $item.userFavoriteId;
 function DataExplorerDashboardComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 16)(1, "mj-explorer-navigation-panel", 17);
-    i0.ɵɵlistener("entitySelected", function DataExplorerDashboardComponent_Conditional_1_Template_mj_explorer_navigation_panel_entitySelected_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onEntitySelected($event)); })("toggleCollapse", function DataExplorerDashboardComponent_Conditional_1_Template_mj_explorer_navigation_panel_toggleCollapse_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleNavigationPanel()); })("sectionToggled", function DataExplorerDashboardComponent_Conditional_1_Template_mj_explorer_navigation_panel_sectionToggled_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.stateService.toggleSection($event)); })("openRecord", function DataExplorerDashboardComponent_Conditional_1_Template_mj_explorer_navigation_panel_openRecord_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOpenRecordFromNav($event)); })("selectRecord", function DataExplorerDashboardComponent_Conditional_1_Template_mj_explorer_navigation_panel_selectRecord_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSelectRecordFromNav($event)); })("expandAndFocus", function DataExplorerDashboardComponent_Conditional_1_Template_mj_explorer_navigation_panel_expandAndFocus_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onExpandAndFocus($event)); });
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 19)(1, "mj-explorer-navigation-panel", 20);
+    i0.ɵɵlistener("entitySelected", function DataExplorerDashboardComponent_Conditional_1_Template_mj_explorer_navigation_panel_entitySelected_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onEntitySelected($event)); })("toggleCollapse", function DataExplorerDashboardComponent_Conditional_1_Template_mj_explorer_navigation_panel_toggleCollapse_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleNavigationPanel()); })("sectionToggled", function DataExplorerDashboardComponent_Conditional_1_Template_mj_explorer_navigation_panel_sectionToggled_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.stateService.toggleSection($event)); })("openRecord", function DataExplorerDashboardComponent_Conditional_1_Template_mj_explorer_navigation_panel_openRecord_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onOpenRecordFromNav($event)); })("selectRecord", function DataExplorerDashboardComponent_Conditional_1_Template_mj_explorer_navigation_panel_selectRecord_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onSelectRecordFromNav($event)); })("expandAndFocus", function DataExplorerDashboardComponent_Conditional_1_Template_mj_explorer_navigation_panel_expandAndFocus_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onExpandAndFocus($event)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵstyleProp("width", ctx_r1.state.navigationPanelCollapsed ? 48 : ctx_r1.state.navigationPanelWidth, "px");
-    i0.ɵɵclassProp("collapsed", ctx_r1.state.navigationPanelCollapsed);
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("width", ctx_r2.state.navigationPanelCollapsed ? 48 : ctx_r2.state.navigationPanelWidth, "px");
+    i0.ɵɵclassProp("collapsed", ctx_r2.state.navigationPanelCollapsed);
     i0.ɵɵproperty("@slideInLeft", undefined);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("entities", ctx_r1.entities)("selectedEntityName", ctx_r1.state.selectedEntityName)("favorites", ctx_r1.state.favorites)("recentItems", ctx_r1.state.recentItems)("collapsed", ctx_r1.state.navigationPanelCollapsed)("allowedEntityNames", ctx_r1.allowedEntityNames)("favoritesSectionExpanded", ctx_r1.state.favoritesSectionExpanded)("recentSectionExpanded", ctx_r1.state.recentSectionExpanded)("entitiesSectionExpanded", ctx_r1.state.entitiesSectionExpanded)("viewsSectionExpanded", ctx_r1.state.viewsSectionExpanded);
+    i0.ɵɵproperty("entities", ctx_r2.entities)("selectedEntityName", ctx_r2.state.selectedEntityName)("favorites", ctx_r2.state.favorites)("recentItems", ctx_r2.state.recentItems)("collapsed", ctx_r2.state.navigationPanelCollapsed)("allowedEntityNames", ctx_r2.allowedEntityNames)("favoritesSectionExpanded", ctx_r2.state.favoritesSectionExpanded)("recentSectionExpanded", ctx_r2.state.recentSectionExpanded)("entitiesSectionExpanded", ctx_r2.state.entitiesSectionExpanded)("viewsSectionExpanded", ctx_r2.state.viewsSectionExpanded);
 } }
 function DataExplorerDashboardComponent_Conditional_3_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 22);
+    i0.ɵɵelement(0, "i", 25);
 } if (rf & 2) {
-    const crumb_r5 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵclassMap(crumb_r5.icon);
+    const crumb_r6 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassMap(crumb_r6.icon);
 } }
 function DataExplorerDashboardComponent_Conditional_3_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 21);
+    i0.ɵɵelement(0, "i", 24);
 } }
 function DataExplorerDashboardComponent_Conditional_3_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 18);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_3_For_2_Template_span_click_0_listener() { const ctx_r3 = i0.ɵɵrestoreView(_r3); const crumb_r5 = ctx_r3.$implicit; const ɵ$index_13_r6 = ctx_r3.$index; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onBreadcrumbClick(crumb_r5, ɵ$index_13_r6)); });
-    i0.ɵɵtemplate(1, DataExplorerDashboardComponent_Conditional_3_For_2_Conditional_1_Template, 1, 2, "i", 19);
-    i0.ɵɵelementStart(2, "span", 20);
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 21);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_3_For_2_Template_span_click_0_listener() { const ctx_r4 = i0.ɵɵrestoreView(_r4); const crumb_r6 = ctx_r4.$implicit; const ɵ$index_13_r7 = ctx_r4.$index; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onBreadcrumbClick(crumb_r6, ɵ$index_13_r7)); });
+    i0.ɵɵtemplate(1, DataExplorerDashboardComponent_Conditional_3_For_2_Conditional_1_Template, 1, 2, "i", 22);
+    i0.ɵɵelementStart(2, "span", 23);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(4, DataExplorerDashboardComponent_Conditional_3_For_2_Conditional_4_Template, 1, 0, "i", 21);
+    i0.ɵɵtemplate(4, DataExplorerDashboardComponent_Conditional_3_For_2_Conditional_4_Template, 1, 0, "i", 24);
 } if (rf & 2) {
-    const crumb_r5 = ctx.$implicit;
-    const ɵ$index_13_r6 = ctx.$index;
-    const ɵ$count_13_r7 = ctx.$count;
-    i0.ɵɵclassProp("clickable", !(ɵ$index_13_r6 === ɵ$count_13_r7 - 1))("current", ɵ$index_13_r6 === ɵ$count_13_r7 - 1);
-    i0.ɵɵproperty("title", crumb_r5.label);
+    const crumb_r6 = ctx.$implicit;
+    const ɵ$index_13_r7 = ctx.$index;
+    const ɵ$count_13_r8 = ctx.$count;
+    i0.ɵɵclassProp("clickable", !(ɵ$index_13_r7 === ɵ$count_13_r8 - 1))("current", ɵ$index_13_r7 === ɵ$count_13_r8 - 1);
+    i0.ɵɵproperty("title", crumb_r6.label);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(crumb_r5.icon ? 1 : -1);
+    i0.ɵɵconditional(crumb_r6.icon ? 1 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(crumb_r5.label);
+    i0.ɵɵtextInterpolate(crumb_r6.label);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!(ɵ$index_13_r6 === ɵ$count_13_r7 - 1) ? 4 : -1);
+    i0.ɵɵconditional(!(ɵ$index_13_r7 === ɵ$count_13_r8 - 1) ? 4 : -1);
 } }
 function DataExplorerDashboardComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 4);
-    i0.ɵɵrepeaterCreate(1, DataExplorerDashboardComponent_Conditional_3_For_2_Template, 5, 8, null, null, _forTrack0);
+    i0.ɵɵelementStart(0, "div", 5);
+    i0.ɵɵrepeaterCreate(1, DataExplorerDashboardComponent_Conditional_3_For_2_Template, 5, 8, null, null, _forTrack1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r1.breadcrumbs);
+    i0.ɵɵrepeater(ctx_r2.breadcrumbs);
 } }
 function DataExplorerDashboardComponent_Conditional_6_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 25);
+    i0.ɵɵelementStart(0, "span", 28);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "number");
     i0.ɵɵpipe(3, "number");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate2("", i0.ɵɵpipeBind1(2, 2, ctx_r1.filteredRecordCount), " of ", i0.ɵɵpipeBind1(3, 4, ctx_r1.totalRecordCount), " records");
+    i0.ɵɵtextInterpolate2("", i0.ɵɵpipeBind1(2, 2, ctx_r2.filteredRecordCount), " of ", i0.ɵɵpipeBind1(3, 4, ctx_r2.totalRecordCount), " records");
 } }
 function DataExplorerDashboardComponent_Conditional_6_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 25);
+    i0.ɵɵelementStart(0, "span", 28);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "number");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(2, 1, ctx_r1.totalRecordCount), " records");
+    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(2, 1, ctx_r2.totalRecordCount), " records");
 } }
 function DataExplorerDashboardComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelement(0, "i", 23);
-    i0.ɵɵelementStart(1, "h2", 24);
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelement(0, "i", 26);
+    i0.ɵɵelementStart(1, "h2", 27);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(3, DataExplorerDashboardComponent_Conditional_6_Conditional_3_Template, 4, 6, "span", 25)(4, DataExplorerDashboardComponent_Conditional_6_Conditional_4_Template, 3, 3, "span", 25);
-    i0.ɵɵelementStart(5, "mj-view-selector", 26);
-    i0.ɵɵlistener("viewSelected", function DataExplorerDashboardComponent_Conditional_6_Template_mj_view_selector_viewSelected_5_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewSelected($event)); })("saveViewRequested", function DataExplorerDashboardComponent_Conditional_6_Template_mj_view_selector_saveViewRequested_5_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSaveViewRequested($event)); })("manageViewsRequested", function DataExplorerDashboardComponent_Conditional_6_Template_mj_view_selector_manageViewsRequested_5_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onManageViewsRequested()); })("openInTabRequested", function DataExplorerDashboardComponent_Conditional_6_Template_mj_view_selector_openInTabRequested_5_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOpenInTabRequested($event)); })("configureViewRequested", function DataExplorerDashboardComponent_Conditional_6_Template_mj_view_selector_configureViewRequested_5_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfigureViewRequested()); });
+    i0.ɵɵtemplate(3, DataExplorerDashboardComponent_Conditional_6_Conditional_3_Template, 4, 6, "span", 28)(4, DataExplorerDashboardComponent_Conditional_6_Conditional_4_Template, 3, 3, "span", 28);
+    i0.ɵɵelementStart(5, "mj-view-selector", 29);
+    i0.ɵɵlistener("viewSelected", function DataExplorerDashboardComponent_Conditional_6_Template_mj_view_selector_viewSelected_5_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onViewSelected($event)); })("saveViewRequested", function DataExplorerDashboardComponent_Conditional_6_Template_mj_view_selector_saveViewRequested_5_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onSaveViewRequested($event)); })("manageViewsRequested", function DataExplorerDashboardComponent_Conditional_6_Template_mj_view_selector_manageViewsRequested_5_listener() { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onManageViewsRequested()); })("openInTabRequested", function DataExplorerDashboardComponent_Conditional_6_Template_mj_view_selector_openInTabRequested_5_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onOpenInTabRequested($event)); })("configureViewRequested", function DataExplorerDashboardComponent_Conditional_6_Template_mj_view_selector_configureViewRequested_5_listener() { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onConfigureViewRequested()); })("createNewRecordRequested", function DataExplorerDashboardComponent_Conditional_6_Template_mj_view_selector_createNewRecordRequested_5_listener() { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onCreateNewRecord()); })("exportRequested", function DataExplorerDashboardComponent_Conditional_6_Template_mj_view_selector_exportRequested_5_listener() { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onExport()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵclassMap(ctx_r1.getEntityIcon(ctx_r1.selectedEntity));
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵclassMap(ctx_r2.getEntityIcon(ctx_r2.selectedEntity));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r1.selectedEntity.Name);
+    i0.ɵɵtextInterpolate(ctx_r2.selectedEntity.Name);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.debouncedFilterText && ctx_r1.filteredRecordCount !== ctx_r1.totalRecordCount ? 3 : 4);
+    i0.ɵɵconditional(ctx_r2.debouncedFilterText && ctx_r2.filteredRecordCount !== ctx_r2.totalRecordCount ? 3 : 4);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("entity", ctx_r1.selectedEntity)("selectedViewId", ctx_r1.state.selectedViewId)("viewModified", ctx_r1.state.viewModified);
+    i0.ɵɵproperty("entity", ctx_r2.selectedEntity)("selectedViewId", ctx_r2.state.selectedViewId)("viewModified", ctx_r2.state.viewModified);
 } }
 function DataExplorerDashboardComponent_Conditional_7_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 23);
+    i0.ɵɵelement(0, "i", 26);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassMap(ctx_r1.displayIcon);
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassMap(ctx_r2.displayIcon);
 } }
 function DataExplorerDashboardComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, DataExplorerDashboardComponent_Conditional_7_Conditional_0_Template, 1, 2, "i", 27);
-    i0.ɵɵelementStart(1, "h2", 24);
+    i0.ɵɵtemplate(0, DataExplorerDashboardComponent_Conditional_7_Conditional_0_Template, 1, 2, "i", 30);
+    i0.ɵɵelementStart(1, "h2", 27);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 25);
+    i0.ɵɵelementStart(3, "span", 28);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵconditional(ctx_r1.displayIcon ? 0 : -1);
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(ctx_r2.displayIcon ? 0 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r1.displayTitle);
+    i0.ɵɵtextInterpolate(ctx_r2.displayTitle);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("", ctx_r1.entities.length, " entities available");
+    i0.ɵɵtextInterpolate1("", ctx_r2.entities.length, " entities available");
 } }
 function DataExplorerDashboardComponent_Conditional_9_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 31);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_9_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onSmartFilterChanged("")); });
-    i0.ɵɵelement(1, "i", 32);
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 34);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_9_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onSmartFilterChanged("")); });
+    i0.ɵɵelement(1, "i", 35);
     i0.ɵɵelementEnd();
 } }
 function DataExplorerDashboardComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 8);
-    i0.ɵɵelement(1, "i", 28);
-    i0.ɵɵelementStart(2, "input", 29, 0);
-    i0.ɵɵlistener("ngModelChange", function DataExplorerDashboardComponent_Conditional_9_Template_input_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSmartFilterChanged($event)); });
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 9);
+    i0.ɵɵelement(1, "i", 31);
+    i0.ɵɵelementStart(2, "input", 32, 1);
+    i0.ɵɵlistener("ngModelChange", function DataExplorerDashboardComponent_Conditional_9_Template_input_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onSmartFilterChanged($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(4, DataExplorerDashboardComponent_Conditional_9_Conditional_4_Template, 2, 0, "button", 30);
+    i0.ɵɵtemplate(4, DataExplorerDashboardComponent_Conditional_9_Conditional_4_Template, 2, 0, "button", 33);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngModel", ctx_r1.state.smartFilterPrompt);
+    i0.ɵɵproperty("ngModel", ctx_r2.state.smartFilterPrompt);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.state.smartFilterPrompt ? 4 : -1);
+    i0.ɵɵconditional(ctx_r2.state.smartFilterPrompt ? 4 : -1);
 } }
 function DataExplorerDashboardComponent_Conditional_10_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 31);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_10_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.entityFilterText = ""); });
-    i0.ɵɵelement(1, "i", 32);
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 34);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_10_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.entityFilterText = ""); });
+    i0.ɵɵelement(1, "i", 35);
     i0.ɵɵelementEnd();
 } }
 function DataExplorerDashboardComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 8);
-    i0.ɵɵelement(1, "i", 28);
-    i0.ɵɵelementStart(2, "input", 33, 0);
-    i0.ɵɵtwoWayListener("ngModelChange", function DataExplorerDashboardComponent_Conditional_10_Template_input_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.entityFilterText, $event) || (ctx_r1.entityFilterText = $event); return i0.ɵɵresetView($event); });
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 9);
+    i0.ɵɵelement(1, "i", 31);
+    i0.ɵɵelementStart(2, "input", 36, 1);
+    i0.ɵɵtwoWayListener("ngModelChange", function DataExplorerDashboardComponent_Conditional_10_Template_input_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.entityFilterText, $event) || (ctx_r2.entityFilterText = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(4, DataExplorerDashboardComponent_Conditional_10_Conditional_4_Template, 2, 0, "button", 30);
+    i0.ɵɵtemplate(4, DataExplorerDashboardComponent_Conditional_10_Conditional_4_Template, 2, 0, "button", 33);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.entityFilterText);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.entityFilterText);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.entityFilterText ? 4 : -1);
+    i0.ɵɵconditional(ctx_r2.entityFilterText ? 4 : -1);
 } }
 function DataExplorerDashboardComponent_Conditional_12_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 40);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_12_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onViewModeChanged("timeline")); });
-    i0.ɵɵelement(1, "i", 41);
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 43);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_12_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onViewModeChanged("timeline")); });
+    i0.ɵɵelement(1, "i", 44);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("active", ctx_r1.state.viewMode === "timeline");
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("active", ctx_r2.state.viewMode === "timeline");
 } }
 function DataExplorerDashboardComponent_Conditional_12_Conditional_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 53);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_12_Conditional_6_Conditional_1_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.closeDateFieldDropdown()); });
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 56);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_12_Conditional_6_Conditional_1_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.closeDateFieldDropdown()); });
     i0.ɵɵelementEnd();
 } }
 function DataExplorerDashboardComponent_Conditional_12_Conditional_6_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 54);
+    i0.ɵɵelement(0, "i", 57);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassProp("rotated", ctx_r1.isDateFieldDropdownOpen);
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("rotated", ctx_r2.isDateFieldDropdownOpen);
 } }
 function DataExplorerDashboardComponent_Conditional_12_Conditional_6_Conditional_8_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 59);
+    i0.ɵɵelement(0, "i", 62);
 } }
 function DataExplorerDashboardComponent_Conditional_12_Conditional_6_Conditional_8_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 56);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_12_Conditional_6_Conditional_8_For_2_Template_div_click_0_listener() { const field_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.setTimelineDateField(field_r18.name)); });
-    i0.ɵɵelement(1, "i", 57);
-    i0.ɵɵelementStart(2, "span", 58);
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 59);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_12_Conditional_6_Conditional_8_For_2_Template_div_click_0_listener() { const field_r19 = i0.ɵɵrestoreView(_r18).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.setTimelineDateField(field_r19.name)); });
+    i0.ɵɵelement(1, "i", 60);
+    i0.ɵɵelementStart(2, "span", 61);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(4, DataExplorerDashboardComponent_Conditional_12_Conditional_6_Conditional_8_For_2_Conditional_4_Template, 1, 0, "i", 59);
+    i0.ɵɵtemplate(4, DataExplorerDashboardComponent_Conditional_12_Conditional_6_Conditional_8_For_2_Conditional_4_Template, 1, 0, "i", 62);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const field_r18 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵclassProp("selected", field_r18.name === ctx_r1.effectiveTimelineDateField);
+    const field_r19 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(4);
+    i0.ɵɵclassProp("selected", field_r19.name === ctx_r2.effectiveTimelineDateField);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(field_r18.displayName);
+    i0.ɵɵtextInterpolate(field_r19.displayName);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(field_r18.name === ctx_r1.effectiveTimelineDateField ? 4 : -1);
+    i0.ɵɵconditional(field_r19.name === ctx_r2.effectiveTimelineDateField ? 4 : -1);
 } }
 function DataExplorerDashboardComponent_Conditional_12_Conditional_6_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 49);
-    i0.ɵɵrepeaterCreate(1, DataExplorerDashboardComponent_Conditional_12_Conditional_6_Conditional_8_For_2_Template, 5, 4, "div", 55, _forTrack1);
+    i0.ɵɵelementStart(0, "div", 52);
+    i0.ɵɵrepeaterCreate(1, DataExplorerDashboardComponent_Conditional_12_Conditional_6_Conditional_8_For_2_Template, 5, 4, "div", 58, _forTrack2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
+    const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r1.availableDateFields);
+    i0.ɵɵrepeater(ctx_r2.availableDateFields);
 } }
 function DataExplorerDashboardComponent_Conditional_12_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 42);
-    i0.ɵɵtemplate(1, DataExplorerDashboardComponent_Conditional_12_Conditional_6_Conditional_1_Template, 1, 0, "div", 43);
-    i0.ɵɵelementStart(2, "div", 44)(3, "button", 45);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_12_Conditional_6_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleDateFieldDropdown()); });
-    i0.ɵɵelement(4, "i", 46);
-    i0.ɵɵelementStart(5, "span", 47);
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 45);
+    i0.ɵɵtemplate(1, DataExplorerDashboardComponent_Conditional_12_Conditional_6_Conditional_1_Template, 1, 0, "div", 46);
+    i0.ɵɵelementStart(2, "div", 47)(3, "button", 48);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_12_Conditional_6_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r16); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleDateFieldDropdown()); });
+    i0.ɵɵelement(4, "i", 49);
+    i0.ɵɵelementStart(5, "span", 50);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(7, DataExplorerDashboardComponent_Conditional_12_Conditional_6_Conditional_7_Template, 1, 2, "i", 48);
+    i0.ɵɵtemplate(7, DataExplorerDashboardComponent_Conditional_12_Conditional_6_Conditional_7_Template, 1, 2, "i", 51);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(8, DataExplorerDashboardComponent_Conditional_12_Conditional_6_Conditional_8_Template, 3, 0, "div", 49);
+    i0.ɵɵtemplate(8, DataExplorerDashboardComponent_Conditional_12_Conditional_6_Conditional_8_Template, 3, 0, "div", 52);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 50)(10, "button", 51);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_12_Conditional_6_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleTimelineOrientation()); });
+    i0.ɵɵelementStart(9, "div", 53)(10, "button", 54);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_12_Conditional_6_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r16); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleTimelineOrientation()); });
     i0.ɵɵelement(11, "i");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "div", 52)(13, "button", 51);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_12_Conditional_6_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleTimelineSortOrder()); });
+    i0.ɵɵelementStart(12, "div", 55)(13, "button", 54);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_12_Conditional_6_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r16); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleTimelineSortOrder()); });
     i0.ɵɵelement(14, "i");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.isDateFieldDropdownOpen ? 1 : -1);
+    i0.ɵɵconditional(ctx_r2.isDateFieldDropdownOpen ? 1 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("open", ctx_r1.isDateFieldDropdownOpen);
-    i0.ɵɵproperty("disabled", ctx_r1.availableDateFields.length <= 1);
+    i0.ɵɵclassProp("open", ctx_r2.isDateFieldDropdownOpen);
+    i0.ɵɵproperty("disabled", ctx_r2.availableDateFields.length <= 1);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r1.effectiveTimelineDateFieldDisplayName);
+    i0.ɵɵtextInterpolate(ctx_r2.effectiveTimelineDateFieldDisplayName);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.availableDateFields.length > 1 ? 7 : -1);
+    i0.ɵɵconditional(ctx_r2.availableDateFields.length > 1 ? 7 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.isDateFieldDropdownOpen && ctx_r1.availableDateFields.length > 1 ? 8 : -1);
+    i0.ɵɵconditional(ctx_r2.isDateFieldDropdownOpen && ctx_r2.availableDateFields.length > 1 ? 8 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("title", ctx_r1.state.timelineOrientation === "vertical" ? "Switch to Horizontal" : "Switch to Vertical");
+    i0.ɵɵproperty("title", ctx_r2.state.timelineOrientation === "vertical" ? "Switch to Horizontal" : "Switch to Vertical");
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r1.state.timelineOrientation === "vertical" ? "fa-solid fa-ellipsis-vertical" : "fa-solid fa-ellipsis");
+    i0.ɵɵclassMap(ctx_r2.state.timelineOrientation === "vertical" ? "fa-solid fa-ellipsis-vertical" : "fa-solid fa-ellipsis");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("title", ctx_r1.state.timelineSortOrder === "desc" ? "Showing Newest First (click for Oldest First)" : "Showing Oldest First (click for Newest First)");
+    i0.ɵɵproperty("title", ctx_r2.state.timelineSortOrder === "desc" ? "Showing Newest First (click for Oldest First)" : "Showing Oldest First (click for Newest First)");
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r1.state.timelineSortOrder === "desc" ? "fa-solid fa-arrow-down-wide-short" : "fa-solid fa-arrow-up-wide-short");
+    i0.ɵɵclassMap(ctx_r2.state.timelineSortOrder === "desc" ? "fa-solid fa-arrow-down-wide-short" : "fa-solid fa-arrow-up-wide-short");
 } }
 function DataExplorerDashboardComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 34)(1, "button", 35);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_12_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewModeChanged("grid")); });
-    i0.ɵɵelement(2, "i", 36);
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 37)(1, "button", 38);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_12_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onViewModeChanged("grid")); });
+    i0.ɵɵelement(2, "i", 39);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 37);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_12_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewModeChanged("cards")); });
-    i0.ɵɵelement(4, "i", 38);
+    i0.ɵɵelementStart(3, "button", 40);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_12_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onViewModeChanged("cards")); });
+    i0.ɵɵelement(4, "i", 41);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(5, DataExplorerDashboardComponent_Conditional_12_Conditional_5_Template, 2, 2, "button", 39);
+    i0.ɵɵtemplate(5, DataExplorerDashboardComponent_Conditional_12_Conditional_5_Template, 2, 2, "button", 42);
     i0.ɵɵelementEnd();
     i0.ɵɵtemplate(6, DataExplorerDashboardComponent_Conditional_12_Conditional_6_Template, 15, 13);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("active", ctx_r1.state.viewMode === "grid");
+    i0.ɵɵclassProp("active", ctx_r2.state.viewMode === "grid");
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("active", ctx_r1.state.viewMode === "cards");
+    i0.ɵɵclassProp("active", ctx_r2.state.viewMode === "cards");
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.entityHasDateFields ? 5 : -1);
+    i0.ɵɵconditional(ctx_r2.entityHasDateFields ? 5 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.state.viewMode === "timeline" && ctx_r1.entityHasDateFields ? 6 : -1);
+    i0.ɵɵconditional(ctx_r2.state.viewMode === "timeline" && ctx_r2.entityHasDateFields ? 6 : -1);
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 60);
-    i0.ɵɵelement(1, "mj-loading", 62);
+    i0.ɵɵelementStart(0, "div", 63);
+    i0.ɵɵelement(1, "mj-loading", 65);
     i0.ɵɵelementEnd();
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_1_Conditional_1_Conditional_5_For_4_Template(rf, ctx) { if (rf & 1) {
-    const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 84);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_1_Conditional_1_Conditional_5_For_4_Template_button_click_0_listener() { const entity_r21 = i0.ɵɵrestoreView(_r20).$implicit; const ctx_r1 = i0.ɵɵnextContext(7); return i0.ɵɵresetView(ctx_r1.setRecentRecordsEntityFilter(entity_r21.entityId)); });
+    const _r21 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 87);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_1_Conditional_1_Conditional_5_For_4_Template_button_click_0_listener() { const entity_r22 = i0.ɵɵrestoreView(_r21).$implicit; const ctx_r2 = i0.ɵɵnextContext(7); return i0.ɵɵresetView(ctx_r2.setRecentRecordsEntityFilter(entity_r22.entityId)); });
     i0.ɵɵelement(1, "i");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const entity_r21 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(7);
-    i0.ɵɵclassProp("active", ctx_r1.recentRecordsEntityFilter === entity_r21.entityId);
-    i0.ɵɵproperty("title", entity_r21.entityName);
+    const entity_r22 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(7);
+    i0.ɵɵclassProp("active", ctx_r2.recentRecordsEntityFilter === entity_r22.entityId);
+    i0.ɵɵproperty("title", entity_r22.entityName);
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(entity_r21.icon);
+    i0.ɵɵclassMap(entity_r22.icon);
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_1_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 78)(1, "button", 81);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_1_Conditional_1_Conditional_5_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.setRecentRecordsEntityFilter(null)); });
-    i0.ɵɵelement(2, "i", 82);
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 81)(1, "button", 84);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_1_Conditional_1_Conditional_5_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r20); const ctx_r2 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r2.setRecentRecordsEntityFilter(null)); });
+    i0.ɵɵelement(2, "i", 85);
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(3, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_1_Conditional_1_Conditional_5_For_4_Template, 2, 5, "button", 83, _forTrack4);
+    i0.ɵɵrepeaterCreate(3, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_1_Conditional_1_Conditional_5_For_4_Template, 2, 5, "button", 86, _forTrack5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(6);
+    const ctx_r2 = i0.ɵɵnextContext(6);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("active", ctx_r1.recentRecordsEntityFilter === null);
+    i0.ɵɵclassProp("active", ctx_r2.recentRecordsEntityFilter === null);
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(ctx_r1.uniqueRecentRecordEntities);
+    i0.ɵɵrepeater(ctx_r2.uniqueRecentRecordEntities);
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_1_Conditional_1_For_8_Template(rf, ctx) { if (rf & 1) {
-    const _r22 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 85);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_1_Conditional_1_For_8_Template_div_click_0_listener() { const record_r23 = i0.ɵɵrestoreView(_r22).$implicit; const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.onRecentRecordClick(record_r23)); });
-    i0.ɵɵelementStart(1, "div", 86);
+    const _r23 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 88);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_1_Conditional_1_For_8_Template_div_click_0_listener() { const record_r24 = i0.ɵɵrestoreView(_r23).$implicit; const ctx_r2 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r2.onRecentRecordClick(record_r24)); });
+    i0.ɵɵelementStart(1, "div", 89);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 87)(4, "span", 88);
+    i0.ɵɵelementStart(3, "div", 90)(4, "span", 91);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 89);
+    i0.ɵɵelementStart(6, "span", 92);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "span", 90);
+    i0.ɵɵelementStart(8, "span", 93);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const record_r23 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(6);
-    i0.ɵɵproperty("title", record_r23.entityName + " - " + record_r23.recordId);
+    const record_r24 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(6);
+    i0.ɵɵproperty("title", record_r24.entityName + " - " + record_r24.recordId);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(ctx_r1.getEntityIconById(record_r23.entityId));
+    i0.ɵɵclassMap(ctx_r2.getEntityIconById(record_r24.entityId));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(record_r23.recordName || record_r23.recordId);
+    i0.ɵɵtextInterpolate(record_r24.recordName || record_r24.recordId);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(record_r23.entityName);
+    i0.ɵɵtextInterpolate(record_r24.entityName);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r1.formatRelativeTime(record_r23.latestAt));
+    i0.ɵɵtextInterpolate(ctx_r2.formatRelativeTime(record_r24.latestAt));
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 61)(1, "div", 76);
-    i0.ɵɵelement(2, "i", 77);
-    i0.ɵɵelementStart(3, "h3", 67);
+    i0.ɵɵelementStart(0, "div", 64)(1, "div", 79);
+    i0.ɵɵelement(2, "i", 80);
+    i0.ɵɵelementStart(3, "h3", 70);
     i0.ɵɵtext(4, "Recent Records");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(5, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_1_Conditional_1_Conditional_5_Template, 5, 2, "div", 78);
+    i0.ɵɵtemplate(5, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_1_Conditional_1_Conditional_5_Template, 5, 2, "div", 81);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 79);
-    i0.ɵɵrepeaterCreate(7, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_1_Conditional_1_For_8_Template, 10, 6, "div", 80, _forTrack3);
+    i0.ɵɵelementStart(6, "div", 82);
+    i0.ɵɵrepeaterCreate(7, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_1_Conditional_1_For_8_Template, 10, 6, "div", 83, _forTrack4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(5);
+    const ctx_r2 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(5);
-    i0.ɵɵconditional(ctx_r1.showRecentRecordsEntityFilter ? 5 : -1);
+    i0.ɵɵconditional(ctx_r2.showRecentRecordsEntityFilter ? 5 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(ctx_r1.filteredRecentRecords);
+    i0.ɵɵrepeater(ctx_r2.filteredRecentRecords);
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_1_Conditional_2_For_7_Template(rf, ctx) { if (rf & 1) {
-    const _r24 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 85);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_1_Conditional_2_For_7_Template_div_click_0_listener() { const record_r25 = i0.ɵɵrestoreView(_r24).$implicit; const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.onFavoriteRecordClick(record_r25)); });
-    i0.ɵɵelementStart(1, "div", 86);
+    const _r25 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 88);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_1_Conditional_2_For_7_Template_div_click_0_listener() { const record_r26 = i0.ɵɵrestoreView(_r25).$implicit; const ctx_r2 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r2.onFavoriteRecordClick(record_r26)); });
+    i0.ɵɵelementStart(1, "div", 89);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 87)(4, "span", 88);
+    i0.ɵɵelementStart(3, "div", 90)(4, "span", 91);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 89);
+    i0.ɵɵelementStart(6, "span", 92);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const record_r25 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(6);
-    i0.ɵɵproperty("title", record_r25.entityName + " - " + record_r25.recordId);
+    const record_r26 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(6);
+    i0.ɵɵproperty("title", record_r26.entityName + " - " + record_r26.recordId);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(ctx_r1.getEntityIconById(record_r25.entityId));
+    i0.ɵɵclassMap(ctx_r2.getEntityIconById(record_r26.entityId));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(record_r25.recordName || record_r25.recordId);
+    i0.ɵɵtextInterpolate(record_r26.recordName || record_r26.recordId);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(record_r25.entityName);
+    i0.ɵɵtextInterpolate(record_r26.entityName);
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 61)(1, "div", 76);
-    i0.ɵɵelement(2, "i", 91);
-    i0.ɵɵelementStart(3, "h3", 67);
+    i0.ɵɵelementStart(0, "div", 64)(1, "div", 79);
+    i0.ɵɵelement(2, "i", 94);
+    i0.ɵɵelementStart(3, "h3", 70);
     i0.ɵɵtext(4, "Favorite Records");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "div", 79);
-    i0.ɵɵrepeaterCreate(6, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_1_Conditional_2_For_7_Template, 8, 5, "div", 80, _forTrack5);
+    i0.ɵɵelementStart(5, "div", 82);
+    i0.ɵɵrepeaterCreate(6, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_1_Conditional_2_For_7_Template, 8, 5, "div", 83, _forTrack6);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(5);
+    const ctx_r2 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(6);
-    i0.ɵɵrepeater(ctx_r1.favoriteRecords);
+    i0.ɵɵrepeater(ctx_r2.favoriteRecords);
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 75);
-    i0.ɵɵtemplate(1, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_1_Conditional_1_Template, 9, 1, "div", 61)(2, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_1_Conditional_2_Template, 8, 0, "div", 61);
+    i0.ɵɵelementStart(0, "div", 78);
+    i0.ɵɵtemplate(1, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_1_Conditional_1_Template, 9, 1, "div", 64)(2, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_1_Conditional_2_Template, 8, 0, "div", 64);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(4);
+    const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.recentRecords.length > 0 ? 1 : -1);
+    i0.ɵɵconditional(ctx_r2.recentRecords.length > 0 ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.favoriteRecords.length > 0 ? 2 : -1);
+    i0.ɵɵconditional(ctx_r2.favoriteRecords.length > 0 ? 2 : -1);
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_2_Conditional_1_For_7_Template(rf, ctx) { if (rf & 1) {
-    const _r26 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 95);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_2_Conditional_1_For_7_Template_div_click_0_listener() { const entity_r27 = i0.ɵɵrestoreView(_r26).$implicit; const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.onEntitySelected(entity_r27)); });
-    i0.ɵɵelementStart(1, "div", 96);
+    const _r27 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 98);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_2_Conditional_1_For_7_Template_div_click_0_listener() { const entity_r28 = i0.ɵɵrestoreView(_r27).$implicit; const ctx_r2 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r2.onEntitySelected(entity_r28)); });
+    i0.ɵɵelementStart(1, "div", 99);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 97)(4, "span", 98);
+    i0.ɵɵelementStart(3, "div", 100)(4, "span", 101);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "button", 99);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_2_Conditional_1_For_7_Template_button_click_6_listener($event) { const entity_r27 = i0.ɵɵrestoreView(_r26).$implicit; const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.toggleEntityFavorite(entity_r27, $event)); });
+    i0.ɵɵelementStart(6, "button", 102);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_2_Conditional_1_For_7_Template_button_click_6_listener($event) { const entity_r28 = i0.ɵɵrestoreView(_r27).$implicit; const ctx_r2 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r2.toggleEntityFavorite(entity_r28, $event)); });
     i0.ɵɵelement(7, "i");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const entity_r27 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(6);
-    i0.ɵɵproperty("title", entity_r27.Description || entity_r27.Name);
+    const entity_r28 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(6);
+    i0.ɵɵproperty("title", entity_r28.Description || entity_r28.Name);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(ctx_r1.getEntityIcon(entity_r27));
+    i0.ɵɵclassMap(ctx_r2.getEntityIcon(entity_r28));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(entity_r27.Name);
+    i0.ɵɵtextInterpolate(entity_r28.Name);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("favorited", ctx_r1.isEntityFavorited(entity_r27));
-    i0.ɵɵproperty("title", ctx_r1.isEntityFavorited(entity_r27) ? "Remove from favorites" : "Add to favorites");
+    i0.ɵɵclassProp("favorited", ctx_r2.isEntityFavorited(entity_r28));
+    i0.ɵɵproperty("title", ctx_r2.isEntityFavorited(entity_r28) ? "Remove from favorites" : "Add to favorites");
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r1.isEntityFavorited(entity_r27) ? "fa-solid fa-star" : "fa-regular fa-star");
+    i0.ɵɵclassMap(ctx_r2.isEntityFavorited(entity_r28) ? "fa-solid fa-star" : "fa-regular fa-star");
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 61)(1, "div", 76);
-    i0.ɵɵelement(2, "i", 92);
-    i0.ɵɵelementStart(3, "h3", 67);
+    i0.ɵɵelementStart(0, "div", 64)(1, "div", 79);
+    i0.ɵɵelement(2, "i", 95);
+    i0.ɵɵelementStart(3, "h3", 70);
     i0.ɵɵtext(4, "Recent Entities");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "div", 93);
-    i0.ɵɵrepeaterCreate(6, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_2_Conditional_1_For_7_Template, 8, 9, "div", 94, _forTrack2);
+    i0.ɵɵelementStart(5, "div", 96);
+    i0.ɵɵrepeaterCreate(6, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_2_Conditional_1_For_7_Template, 8, 9, "div", 97, _forTrack3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(5);
+    const ctx_r2 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(6);
-    i0.ɵɵrepeater(ctx_r1.recentEntities);
+    i0.ɵɵrepeater(ctx_r2.recentEntities);
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_2_Conditional_2_For_7_Template(rf, ctx) { if (rf & 1) {
-    const _r28 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 95);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_2_Conditional_2_For_7_Template_div_click_0_listener() { const entity_r29 = i0.ɵɵrestoreView(_r28).$implicit; const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.onEntitySelected(entity_r29)); });
-    i0.ɵɵelementStart(1, "div", 96);
+    const _r29 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 98);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_2_Conditional_2_For_7_Template_div_click_0_listener() { const entity_r30 = i0.ɵɵrestoreView(_r29).$implicit; const ctx_r2 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r2.onEntitySelected(entity_r30)); });
+    i0.ɵɵelementStart(1, "div", 99);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 97)(4, "span", 98);
+    i0.ɵɵelementStart(3, "div", 100)(4, "span", 101);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "button", 100);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_2_Conditional_2_For_7_Template_button_click_6_listener($event) { const entity_r29 = i0.ɵɵrestoreView(_r28).$implicit; const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.toggleEntityFavorite(entity_r29, $event)); });
-    i0.ɵɵelement(7, "i", 101);
+    i0.ɵɵelementStart(6, "button", 103);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_2_Conditional_2_For_7_Template_button_click_6_listener($event) { const entity_r30 = i0.ɵɵrestoreView(_r29).$implicit; const ctx_r2 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r2.toggleEntityFavorite(entity_r30, $event)); });
+    i0.ɵɵelement(7, "i", 104);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const entity_r29 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(6);
-    i0.ɵɵproperty("title", entity_r29.Description || entity_r29.Name);
+    const entity_r30 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(6);
+    i0.ɵɵproperty("title", entity_r30.Description || entity_r30.Name);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(ctx_r1.getEntityIcon(entity_r29));
+    i0.ɵɵclassMap(ctx_r2.getEntityIcon(entity_r30));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(entity_r29.Name);
+    i0.ɵɵtextInterpolate(entity_r30.Name);
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 61)(1, "div", 76);
-    i0.ɵɵelement(2, "i", 91);
-    i0.ɵɵelementStart(3, "h3", 67);
+    i0.ɵɵelementStart(0, "div", 64)(1, "div", 79);
+    i0.ɵɵelement(2, "i", 94);
+    i0.ɵɵelementStart(3, "h3", 70);
     i0.ɵɵtext(4, "Favorite Entities");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "div", 93);
-    i0.ɵɵrepeaterCreate(6, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_2_Conditional_2_For_7_Template, 8, 4, "div", 94, _forTrack2);
+    i0.ɵɵelementStart(5, "div", 96);
+    i0.ɵɵrepeaterCreate(6, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_2_Conditional_2_For_7_Template, 8, 4, "div", 97, _forTrack3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(5);
+    const ctx_r2 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(6);
-    i0.ɵɵrepeater(ctx_r1.favoriteEntities);
+    i0.ɵɵrepeater(ctx_r2.favoriteEntities);
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 75);
-    i0.ɵɵtemplate(1, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_2_Conditional_1_Template, 8, 0, "div", 61)(2, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_2_Conditional_2_Template, 8, 0, "div", 61);
+    i0.ɵɵelementStart(0, "div", 78);
+    i0.ɵɵtemplate(1, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_2_Conditional_1_Template, 8, 0, "div", 64)(2, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_2_Conditional_2_Template, 8, 0, "div", 64);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(4);
+    const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.recentEntities.length > 0 ? 1 : -1);
+    i0.ɵɵconditional(ctx_r2.recentEntities.length > 0 ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.favoriteEntities.length > 0 ? 2 : -1);
+    i0.ɵɵconditional(ctx_r2.favoriteEntities.length > 0 ? 2 : -1);
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 74);
-    i0.ɵɵtemplate(1, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_1_Template, 3, 2, "div", 75)(2, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_2_Template, 3, 2, "div", 75);
+    i0.ɵɵelementStart(0, "div", 77);
+    i0.ɵɵtemplate(1, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_1_Template, 3, 2, "div", 78)(2, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_2_Template, 3, 2, "div", 78);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassProp("single-column", !ctx_r1.hasRecordsColumnContent || !ctx_r1.hasEntitiesColumnContent);
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("single-column", !ctx_r2.hasRecordsColumnContent || !ctx_r2.hasEntitiesColumnContent);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.hasRecordsColumnContent ? 1 : -1);
+    i0.ɵɵconditional(ctx_r2.hasRecordsColumnContent ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.hasEntitiesColumnContent ? 2 : -1);
+    i0.ɵɵconditional(ctx_r2.hasEntitiesColumnContent ? 2 : -1);
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " All Entities ");
@@ -557,77 +562,77 @@ function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional
     i0.ɵɵtext(0, " Common Entities ");
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 68);
+    i0.ɵɵelementStart(0, "span", 71);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
+    const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1("", ctx_r1.filteredEntities.length, " matching");
+    i0.ɵɵtextInterpolate1("", ctx_r2.filteredEntities.length, " matching");
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    const _r30 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 69)(1, "button", 51);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_9_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r30); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleShowAllEntities()); });
+    const _r31 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 72)(1, "button", 54);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_9_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.toggleShowAllEntities()); });
     i0.ɵɵtext(2, " Common ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 51);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_9_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r30); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleShowAllEntities()); });
+    i0.ɵɵelementStart(3, "button", 54);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_9_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.toggleShowAllEntities()); });
     i0.ɵɵtext(4, " All ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
+    const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("active", !ctx_r1.state.showAllEntities);
-    i0.ɵɵpropertyInterpolate1("title", "Show common entities (", ctx_r1.commonEntitiesCount, ")");
+    i0.ɵɵclassProp("active", !ctx_r2.state.showAllEntities);
+    i0.ɵɵpropertyInterpolate1("title", "Show common entities (", ctx_r2.commonEntitiesCount, ")");
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("active", ctx_r1.state.showAllEntities);
-    i0.ɵɵpropertyInterpolate1("title", "Show all entities (", ctx_r1.allEntitiesCount, ")");
+    i0.ɵɵclassProp("active", ctx_r2.state.showAllEntities);
+    i0.ɵɵpropertyInterpolate1("title", "Show all entities (", ctx_r2.allEntitiesCount, ")");
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_For_12_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 106);
+    i0.ɵɵelementStart(0, "p", 109);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const entity_r32 = i0.ɵɵnextContext().$implicit;
+    const entity_r33 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(entity_r32.Description);
+    i0.ɵɵtextInterpolate(entity_r33.Description);
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_For_12_Template(rf, ctx) { if (rf & 1) {
-    const _r31 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 102);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_For_12_Template_div_click_0_listener() { const entity_r32 = i0.ɵɵrestoreView(_r31).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onEntitySelected(entity_r32)); });
-    i0.ɵɵelementStart(1, "div", 103);
+    const _r32 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 105);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_For_12_Template_div_click_0_listener() { const entity_r33 = i0.ɵɵrestoreView(_r32).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onEntitySelected(entity_r33)); });
+    i0.ɵɵelementStart(1, "div", 106);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 104)(4, "h4", 105);
+    i0.ɵɵelementStart(3, "div", 107)(4, "h4", 108);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, DataExplorerDashboardComponent_Conditional_14_Conditional_2_For_12_Conditional_6_Template, 2, 1, "p", 106);
+    i0.ɵɵtemplate(6, DataExplorerDashboardComponent_Conditional_14_Conditional_2_For_12_Conditional_6_Template, 2, 1, "p", 109);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 99);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_For_12_Template_button_click_7_listener($event) { const entity_r32 = i0.ɵɵrestoreView(_r31).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleEntityFavorite(entity_r32, $event)); });
+    i0.ɵɵelementStart(7, "button", 102);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_For_12_Template_button_click_7_listener($event) { const entity_r33 = i0.ɵɵrestoreView(_r32).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.toggleEntityFavorite(entity_r33, $event)); });
     i0.ɵɵelement(8, "i");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const entity_r32 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("title", entity_r32.Description || entity_r32.Name);
+    const entity_r33 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("title", entity_r33.Description || entity_r33.Name);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(ctx_r1.getEntityIcon(entity_r32));
+    i0.ɵɵclassMap(ctx_r2.getEntityIcon(entity_r33));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(entity_r32.Name);
+    i0.ɵɵtextInterpolate(entity_r33.Name);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(entity_r32.Description ? 6 : -1);
+    i0.ɵɵconditional(entity_r33.Description ? 6 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("favorited", ctx_r1.isEntityFavorited(entity_r32));
-    i0.ɵɵproperty("title", ctx_r1.isEntityFavorited(entity_r32) ? "Remove from favorites" : "Add to favorites");
+    i0.ɵɵclassProp("favorited", ctx_r2.isEntityFavorited(entity_r33));
+    i0.ɵɵproperty("title", ctx_r2.isEntityFavorited(entity_r33) ? "Remove from favorites" : "Add to favorites");
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r1.isEntityFavorited(entity_r32) ? "fa-solid fa-star" : "fa-regular fa-star");
+    i0.ɵɵclassMap(ctx_r2.isEntityFavorited(entity_r33) ? "fa-solid fa-star" : "fa-regular fa-star");
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 72);
-    i0.ɵɵelement(1, "i", 107);
+    i0.ɵɵelementStart(0, "div", 75);
+    i0.ɵɵelement(1, "i", 110);
     i0.ɵɵelementStart(2, "h3");
     i0.ɵɵtext(3, "No Matching Entities");
     i0.ɵɵelementEnd();
@@ -635,13 +640,13 @@ function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
+    const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate1("No entities match \"", ctx_r1.entityFilterText, "\"");
+    i0.ɵɵtextInterpolate1("No entities match \"", ctx_r2.entityFilterText, "\"");
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 73);
-    i0.ɵɵelement(1, "i", 108);
+    i0.ɵɵelementStart(0, "div", 76);
+    i0.ɵɵelement(1, "i", 111);
     i0.ɵɵelementStart(2, "h3");
     i0.ɵɵtext(3, "No Entities Available");
     i0.ɵɵelementEnd();
@@ -650,65 +655,71 @@ function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional
     i0.ɵɵelementEnd()();
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Template, 3, 4, "div", 63);
-    i0.ɵɵelementStart(1, "div", 61)(2, "div", 64)(3, "div", 65);
-    i0.ɵɵelement(4, "i", 66);
-    i0.ɵɵelementStart(5, "h3", 67);
+    i0.ɵɵtemplate(0, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Template, 3, 4, "div", 66);
+    i0.ɵɵelementStart(1, "div", 64)(2, "div", 67)(3, "div", 68);
+    i0.ɵɵelement(4, "i", 69);
+    i0.ɵɵelementStart(5, "h3", 70);
     i0.ɵɵtemplate(6, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_6_Template, 1, 0)(7, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_7_Template, 1, 0);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(8, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_8_Template, 2, 1, "span", 68);
+    i0.ɵɵtemplate(8, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_8_Template, 2, 1, "span", 71);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(9, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_9_Template, 5, 8, "div", 69);
+    i0.ɵɵtemplate(9, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_9_Template, 5, 8, "div", 72);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 70);
-    i0.ɵɵrepeaterCreate(11, DataExplorerDashboardComponent_Conditional_14_Conditional_2_For_12_Template, 9, 10, "div", 71, _forTrack2);
+    i0.ɵɵelementStart(10, "div", 73);
+    i0.ɵɵrepeaterCreate(11, DataExplorerDashboardComponent_Conditional_14_Conditional_2_For_12_Template, 9, 10, "div", 74, _forTrack3);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(13, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_13_Template, 6, 1, "div", 72)(14, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_14_Template, 6, 0, "div", 73);
+    i0.ɵɵtemplate(13, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_13_Template, 6, 1, "div", 75)(14, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_14_Template, 6, 0, "div", 76);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r1.hasTopSectionContent ? 0 : -1);
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r2.hasTopSectionContent ? 0 : -1);
     i0.ɵɵadvance(6);
-    i0.ɵɵconditional(ctx_r1.state.showAllEntities || !ctx_r1.showCommonAllToggle ? 6 : 7);
+    i0.ɵɵconditional(ctx_r2.state.showAllEntities || !ctx_r2.showCommonAllToggle ? 6 : 7);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.entityFilterText && ctx_r1.filteredEntities.length !== ctx_r1.entities.length ? 8 : -1);
+    i0.ɵɵconditional(ctx_r2.entityFilterText && ctx_r2.filteredEntities.length !== ctx_r2.entities.length ? 8 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.showCommonAllToggle ? 9 : -1);
+    i0.ɵɵconditional(ctx_r2.showCommonAllToggle ? 9 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(ctx_r1.filteredEntities);
+    i0.ɵɵrepeater(ctx_r2.filteredEntities);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.filteredEntities.length === 0 && ctx_r1.entities.length > 0 ? 13 : -1);
+    i0.ɵɵconditional(ctx_r2.filteredEntities.length === 0 && ctx_r2.entities.length > 0 ? 13 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.entities.length === 0 ? 14 : -1);
+    i0.ɵɵconditional(ctx_r2.entities.length === 0 ? 14 : -1);
 } }
 function DataExplorerDashboardComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 11);
-    i0.ɵɵtemplate(1, DataExplorerDashboardComponent_Conditional_14_Conditional_1_Template, 2, 0, "div", 60)(2, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Template, 15, 6, "div", 61);
+    i0.ɵɵelementStart(0, "div", 12);
+    i0.ɵɵtemplate(1, DataExplorerDashboardComponent_Conditional_14_Conditional_1_Template, 2, 0, "div", 63)(2, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Template, 15, 6, "div", 64);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.isLoadingEntities ? 1 : 2);
+    i0.ɵɵconditional(ctx_r2.isLoadingEntities ? 1 : 2);
 } }
 function DataExplorerDashboardComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    const _r33 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-entity-viewer", 109);
-    i0.ɵɵlistener("viewModeChange", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_viewModeChange_0_listener($event) { i0.ɵɵrestoreView(_r33); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewModeChanged($event)); })("filterTextChange", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_filterTextChange_0_listener($event) { i0.ɵɵrestoreView(_r33); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onFilterTextChanged($event)); })("recordSelected", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_recordSelected_0_listener($event) { i0.ɵɵrestoreView(_r33); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewerRecordSelected($event)); })("recordOpened", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_recordOpened_0_listener($event) { i0.ɵɵrestoreView(_r33); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewerRecordOpened($event)); })("dataLoaded", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_dataLoaded_0_listener($event) { i0.ɵɵrestoreView(_r33); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onDataLoaded($event)); })("filteredCountChanged", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_filteredCountChanged_0_listener($event) { i0.ɵɵrestoreView(_r33); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onFilteredCountChanged($event)); })("gridStateChanged", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_gridStateChanged_0_listener($event) { i0.ɵɵrestoreView(_r33); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onGridStateChanged($event)); });
+    const _r34 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-entity-viewer", 112);
+    i0.ɵɵlistener("viewModeChange", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_viewModeChange_0_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onViewModeChanged($event)); })("filterTextChange", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_filterTextChange_0_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onFilterTextChanged($event)); })("recordSelected", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_recordSelected_0_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onViewerRecordSelected($event)); })("recordOpened", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_recordOpened_0_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onViewerRecordOpened($event)); })("dataLoaded", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_dataLoaded_0_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDataLoaded($event)); })("filteredCountChanged", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_filteredCountChanged_0_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onFilteredCountChanged($event)); })("gridStateChanged", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_gridStateChanged_0_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onGridStateChanged($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("entity", ctx_r1.selectedEntity)("viewEntity", ctx_r1.selectedViewEntity)("viewMode", ctx_r1.state.viewMode)("filterText", ctx_r1.debouncedFilterText)("selectedRecordId", ctx_r1.state.selectedRecordId)("config", ctx_r1.viewerConfig)("gridState", ctx_r1.currentGridState)("timelineConfig", ctx_r1.currentTimelineConfig);
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("entity", ctx_r2.selectedEntity)("viewEntity", ctx_r2.selectedViewEntity)("viewMode", ctx_r2.state.viewMode)("filterText", ctx_r2.debouncedFilterText)("selectedRecordId", ctx_r2.state.selectedRecordId)("config", ctx_r2.viewerConfig)("gridState", ctx_r2.currentGridState)("timelineConfig", ctx_r2.currentTimelineConfig);
 } }
 function DataExplorerDashboardComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    const _r34 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 110)(1, "mj-entity-record-detail-panel", 111);
-    i0.ɵɵlistener("close", function DataExplorerDashboardComponent_Conditional_16_Template_mj_entity_record_detail_panel_close_1_listener() { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onDetailPanelClosed()); })("openRecord", function DataExplorerDashboardComponent_Conditional_16_Template_mj_entity_record_detail_panel_openRecord_1_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOpenRecord($event)); })("navigateToRelated", function DataExplorerDashboardComponent_Conditional_16_Template_mj_entity_record_detail_panel_navigateToRelated_1_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onNavigateToRelated($event)); })("openRelatedRecord", function DataExplorerDashboardComponent_Conditional_16_Template_mj_entity_record_detail_panel_openRelatedRecord_1_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOpenRelatedRecord($event)); })("openForeignKeyRecord", function DataExplorerDashboardComponent_Conditional_16_Template_mj_entity_record_detail_panel_openForeignKeyRecord_1_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOpenForeignKeyRecord($event)); });
+    const _r35 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 113)(1, "mj-entity-record-detail-panel", 114);
+    i0.ɵɵlistener("close", function DataExplorerDashboardComponent_Conditional_16_Template_mj_entity_record_detail_panel_close_1_listener() { i0.ɵɵrestoreView(_r35); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDetailPanelClosed()); })("openRecord", function DataExplorerDashboardComponent_Conditional_16_Template_mj_entity_record_detail_panel_openRecord_1_listener($event) { i0.ɵɵrestoreView(_r35); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onOpenRecord($event)); })("navigateToRelated", function DataExplorerDashboardComponent_Conditional_16_Template_mj_entity_record_detail_panel_navigateToRelated_1_listener($event) { i0.ɵɵrestoreView(_r35); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onNavigateToRelated($event)); })("openRelatedRecord", function DataExplorerDashboardComponent_Conditional_16_Template_mj_entity_record_detail_panel_openRelatedRecord_1_listener($event) { i0.ɵɵrestoreView(_r35); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onOpenRelatedRecord($event)); })("openForeignKeyRecord", function DataExplorerDashboardComponent_Conditional_16_Template_mj_entity_record_detail_panel_openForeignKeyRecord_1_listener($event) { i0.ɵɵrestoreView(_r35); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onOpenForeignKeyRecord($event)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵstyleProp("width", ctx_r1.state.detailPanelWidth, "px");
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("width", ctx_r2.state.detailPanelWidth, "px");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("entity", ctx_r1.detailPanelEntity)("record", ctx_r1.selectedRecord);
+    i0.ɵɵproperty("entity", ctx_r2.detailPanelEntity)("record", ctx_r2.selectedRecord);
+} }
+function DataExplorerDashboardComponent_For_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kendo-excelexport-column", 18);
+} if (rf & 2) {
+    const col_r36 = ctx.$implicit;
+    i0.ɵɵproperty("field", col_r36.Name)("title", col_r36.DisplayName);
 } }
 /**
  * Data Explorer Dashboard - Power user interface for exploring data across entities
@@ -733,6 +744,8 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
     entityViewerRef;
     /** Reference to the view config panel for passing filter state */
     viewConfigPanelRef;
+    /** Reference to the Excel export component */
+    excelExportRef;
     /**
      * Optional filter to constrain which entities are shown in the explorer.
      * Can filter by applicationId, schemaNames, or explicit entityNames.
@@ -796,6 +809,10 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
     isLoadingRecentRecords = true;
     // Entity filter for recent records (null = show all, string = filter by entityId)
     recentRecordsEntityFilter = null;
+    // Export functionality
+    exportData = [];
+    exportColumns = [];
+    exportFileName = 'export.xlsx';
     /**
      * Filtered entities based on entityFilterText (for home screen)
      * Excludes entities shown in recent or favorites sections
@@ -1080,6 +1097,8 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
     filterDialogFields = [];
     filterDialogState = createEmptyFilter();
     filterDialogDisabled = false;
+    // View save state
+    isSavingView = false;
     constructor(stateService, cdr, router, recentAccessService, navigationService) {
         super();
         this.stateService = stateService;
@@ -1492,6 +1511,8 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
     async onSaveView(event) {
         if (!this.selectedEntity)
             return;
+        this.isSavingView = true;
+        this.cdr.detectChanges();
         try {
             const md = new Metadata();
             // Build GridState in Kendo-compatible format
@@ -1580,6 +1601,10 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
         catch (error) {
             console.error('[DataExplorer] Error saving view:', error);
         }
+        finally {
+            this.isSavingView = false;
+            this.cdr.detectChanges();
+        }
     }
     /**
      * Build GridState in Kendo-compatible format
@@ -1784,6 +1809,147 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
             RecordPKey: record.PrimaryKey
         });
     }
+    /**
+     * Handle creating a new record for the current entity
+     */
+    onCreateNewRecord() {
+        if (!this.selectedEntity)
+            return;
+        // Use NavigationService to open a new record form
+        this.navigationService.OpenNewEntityRecord(this.selectedEntity.Name);
+    }
+    /**
+     * Handle export to Excel request
+     */
+    async onExport() {
+        if (!this.excelExportRef || !this.selectedEntity) {
+            console.error('Cannot export: Excel export component or entity not available');
+            return;
+        }
+        try {
+            this.showNotification('Working on the export, will notify you when it is complete...', 'info', 2000);
+            const data = await this.getExportData();
+            // Get visible columns in priority order:
+            // 1. Current grid state (reflects actual displayed columns including user modifications)
+            // 2. View's column configuration (if a view is selected)
+            // 3. All non-virtual fields (fallback for default view)
+            if (this.currentGridState?.columnSettings && this.currentGridState.columnSettings.length > 0) {
+                // Use current grid state - only export visible columns in grid order
+                const visibleColumns = this.currentGridState.columnSettings.filter(col => col.hidden !== true);
+                this.exportColumns = visibleColumns.map(col => ({
+                    Name: col.Name,
+                    DisplayName: col.DisplayName || col.Name
+                }));
+            }
+            else if (this.selectedViewEntity?.Columns) {
+                // Use view's column configuration - only export visible columns in view order
+                const visibleColumns = this.selectedViewEntity.Columns.filter(col => !col.hidden);
+                this.exportColumns = visibleColumns.map(col => ({
+                    Name: col.Name,
+                    DisplayName: col.DisplayName || col.Name
+                }));
+            }
+            else {
+                // Fall back to all non-virtual fields if no view is selected
+                const visibleFields = this.selectedEntity.Fields.filter(f => !f.IsVirtual);
+                this.exportColumns = visibleFields.map(f => ({
+                    Name: f.Name,
+                    DisplayName: f.DisplayNameOrName
+                }));
+            }
+            this.exportData = data;
+            // Set the export filename
+            const viewName = this.selectedViewEntity?.Name || 'Data';
+            this.exportFileName = `${this.selectedEntity.Name}_${viewName}_${new Date().toISOString().split('T')[0]}.xlsx`;
+            // Wait for Angular to update the DOM with the new data before triggering save
+            setTimeout(() => {
+                this.excelExportRef.save();
+                this.showNotification('Excel Export Complete', 'success', 2000);
+            }, 100);
+        }
+        catch (e) {
+            this.showNotification('Error exporting data', 'error', 5000);
+            console.error('Export error:', e);
+        }
+    }
+    /**
+     * Get the data for export - loads all records for the current view/entity
+     */
+    async getExportData() {
+        if (!this.selectedEntity) {
+            throw new Error('No entity selected for export');
+        }
+        const md = new Metadata();
+        const rv = new RunView();
+        // Build the run view params based on current state
+        const baseParams = {
+            EntityName: this.selectedEntity.Name,
+            ExtraFilter: this.buildExtraFilter(),
+            OrderBy: this.buildOrderBy(),
+            IgnoreMaxRows: true,
+            ForceAuditLog: true,
+            AuditLogDescription: `Export of Data From ${this.selectedViewEntity ? '"' + this.selectedViewEntity.Name + '"' : this.selectedEntity.Name} View for User ${md.CurrentUser.Email}`
+        };
+        // Add smart filter if present
+        const params = this.debouncedFilterText
+            ? { ...baseParams, UserSearchString: this.debouncedFilterText }
+            : baseParams;
+        const result = await rv.RunView(params);
+        if (result && result.Success) {
+            return result.Results;
+        }
+        else {
+            throw new Error('Unable to get export data: ' + (result?.ErrorMessage || 'Unknown error'));
+        }
+    }
+    /**
+     * Build the ExtraFilter string based on current view and filter state
+     */
+    buildExtraFilter() {
+        const filters = [];
+        // Add view filter if a view is selected
+        if (this.selectedViewEntity?.WhereClause) {
+            filters.push(`(${this.selectedViewEntity.WhereClause})`);
+        }
+        // Add smart filter if present
+        if (this.debouncedFilterText) {
+            // Smart filter is applied via UserSearchString in RunView, not ExtraFilter
+            // So we don't need to add it here
+        }
+        return filters.join(' AND ');
+    }
+    /**
+     * Build the OrderBy string based on current view state
+     */
+    buildOrderBy() {
+        // Use view's OrderByClause if available
+        if (this.selectedViewEntity?.OrderByClause) {
+            return this.selectedViewEntity.OrderByClause;
+        }
+        // Use grid state sort if available
+        if (this.currentGridState?.sortSettings && this.currentGridState.sortSettings.length > 0) {
+            const sorts = this.currentGridState.sortSettings.map(s => `${s.field} ${s.dir.toUpperCase()}`);
+            return sorts.join(', ');
+        }
+        // Default sort by primary key
+        return this.selectedEntity.FirstPrimaryKey.Name;
+    }
+    /**
+     * Show a notification to the user
+     */
+    showNotification(message, type, duration) {
+        const data = {
+            message: message,
+            style: type,
+            DisplayDuration: duration
+        };
+        MJGlobal.Instance.RaiseEvent({
+            component: this,
+            event: MJEventType.DisplaySimpleNotificationRequest,
+            eventCode: "",
+            args: data
+        });
+    }
     /**
      * Handle navigation to a related entity from detail panel.
      * Navigates within the explorer and applies filter to show related records.
@@ -2319,37 +2485,43 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
             i0.ɵɵviewQuery(ViewSelectorComponent, 5);
             i0.ɵɵviewQuery(EntityViewerComponent, 5);
             i0.ɵɵviewQuery(ViewConfigPanelComponent, 5);
+            i0.ɵɵviewQuery(_c1, 5, ExcelExportComponent);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filterInputRef = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.viewSelectorRef = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.entityViewerRef = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.viewConfigPanelRef = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.excelExportRef = _t.first);
         } }, hostBindings: function DataExplorerDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown", function DataExplorerDashboardComponent_keydown_HostBindingHandler($event) { return ctx.handleKeyboardShortcut($event); }, false, i0.ɵɵresolveDocument);
-        } }, inputs: { entityFilter: "entityFilter", deepLink: "deepLink", contextName: "contextName", contextIcon: "contextIcon" }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 19, vars: 20, consts: [["filterInput", ""], [1, "data-explorer-container"], [1, "navigation-panel", 3, "collapsed", "width"], [1, "content-area"], [1, "breadcrumb-bar"], [1, "content-header"], [1, "header-left"], [1, "header-center"], [1, "smart-filter-container"], [1, "header-right"], [1, "content-body"], [1, "entity-home-view"], [3, "entity", "viewEntity", "viewMode", "filterText", "selectedRecordId", "config", "gridState", "timelineConfig"], [1, "detail-panel", 3, "width"], [3, "close", "save", "delete", "openFilterDialogRequest", "entity", "viewEntity", "isOpen", "currentGridState", "externalFilterState"], [3, "close", "apply", "isOpen", "fields", "filter", "disabled"], [1, "navigation-panel"], [3, "entitySelected", "toggleCollapse", "sectionToggled", "openRecord", "selectRecord", "expandAndFocus", "entities", "selectedEntityName", "favorites", "recentItems", "collapsed", "allowedEntityNames", "favoritesSectionExpanded", "recentSectionExpanded", "entitiesSectionExpanded", "viewsSectionExpanded"], [1, "breadcrumb-item", 3, "click", "title"], [1, "breadcrumb-icon", 3, "class"], [1, "breadcrumb-label"], [1, "fa-solid", "fa-chevron-right", "breadcrumb-separator"], [1, "breadcrumb-icon"], [1, "entity-icon"], [1, "entity-title"], [1, "record-count"], [3, "viewSelected", "saveViewRequested", "manageViewsRequested", "openInTabRequested", "configureViewRequested", "entity", "selectedViewId", "viewModified"], [1, "entity-icon", 3, "class"], [1, "fa-solid", "fa-search", "filter-icon"], ["type", "text", "placeholder", "Filter records... (press / to focus)", 1, "smart-filter-input", 3, "ngModelChange", "ngModel"], [1, "clear-filter-btn"], [1, "clear-filter-btn", 3, "click"], [1, "fa-solid", "fa-times"], ["type", "text", "placeholder", "Filter entities... (press / to focus)", 1, "smart-filter-input", 3, "ngModelChange", "ngModel"], [1, "view-mode-toggle"], ["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, "date-field-selector-container"], [1, "date-field-backdrop"], [1, "date-field-selector-wrapper"], [1, "date-field-selector-button", 3, "click", "disabled"], [1, "fa-solid", "fa-calendar-days", "date-field-icon"], [1, "date-field-name"], [1, "fa-solid", "fa-chevron-down", "date-field-arrow", 3, "rotated"], [1, "date-field-dropdown-panel"], [1, "timeline-orientation-toggle"], [1, "toggle-btn", 3, "click", "title"], [1, "timeline-sort-toggle"], [1, "date-field-backdrop", 3, "click"], [1, "fa-solid", "fa-chevron-down", "date-field-arrow"], [1, "date-field-dropdown-item", 3, "selected"], [1, "date-field-dropdown-item", 3, "click"], [1, "fa-regular", "fa-calendar", "item-icon"], [1, "item-name"], [1, "fa-solid", "fa-check", "selected-check"], [1, "loading-state"], [1, "home-section"], ["text", "Loading entities...", "size", "medium"], [1, "home-two-column-layout", 3, "single-column"], [1, "section-header-with-toggle"], [1, "section-header-left"], [1, "fa-solid", "fa-database", "section-icon"], [1, "section-title"], [1, "section-count"], [1, "inline-toggle"], [1, "entity-card-grid"], [1, "entity-card", 3, "title"], [1, "empty-state", "small"], [1, "empty-state"], [1, "home-two-column-layout"], [1, "home-column"], [1, "section-header"], [1, "fa-solid", "fa-history", "section-icon"], [1, "entity-filter-strip"], [1, "recent-records-list"], [1, "recent-record-item", 3, "title"], ["title", "Show all entities", 1, "entity-filter-btn", 3, "click"], [1, "fa-solid", "fa-layer-group"], [1, "entity-filter-btn", 3, "active", "title"], [1, "entity-filter-btn", 3, "click", "title"], [1, "recent-record-item", 3, "click", "title"], [1, "recent-record-icon"], [1, "recent-record-content"], [1, "recent-record-name"], [1, "recent-record-entity"], [1, "recent-record-time"], [1, "fa-solid", "fa-star", "section-icon"], [1, "fa-solid", "fa-clock", "section-icon"], [1, "entity-list"], [1, "entity-list-item", 3, "title"], [1, "entity-list-item", 3, "click", "title"], [1, "entity-list-icon"], [1, "entity-list-content"], [1, "entity-list-name"], [1, "favorite-btn", 3, "click", "title"], ["title", "Remove from favorites", 1, "favorite-btn", "favorited", 3, "click"], [1, "fa-solid", "fa-star"], [1, "entity-card", 3, "click", "title"], [1, "entity-card-icon"], [1, "entity-card-content"], [1, "entity-card-title"], [1, "entity-card-description"], [1, "fa-solid", "fa-search", "empty-icon"], [1, "fa-solid", "fa-database", "empty-icon"], [3, "viewModeChange", "filterTextChange", "recordSelected", "recordOpened", "dataLoaded", "filteredCountChanged", "gridStateChanged", "entity", "viewEntity", "viewMode", "filterText", "selectedRecordId", "config", "gridState", "timelineConfig"], [1, "detail-panel"], [3, "close", "openRecord", "navigateToRelated", "openRelatedRecord", "openForeignKeyRecord", "entity", "record"]], template: function DataExplorerDashboardComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 1);
-            i0.ɵɵtemplate(1, DataExplorerDashboardComponent_Conditional_1_Template, 2, 15, "div", 2);
-            i0.ɵɵelementStart(2, "div", 3);
-            i0.ɵɵtemplate(3, DataExplorerDashboardComponent_Conditional_3_Template, 3, 0, "div", 4);
-            i0.ɵɵelementStart(4, "div", 5)(5, "div", 6);
+        } }, inputs: { entityFilter: "entityFilter", deepLink: "deepLink", contextName: "contextName", contextIcon: "contextIcon" }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 23, vars: 23, consts: [["excelExport", ""], ["filterInput", ""], [1, "data-explorer-container"], [1, "navigation-panel", 3, "collapsed", "width"], [1, "content-area"], [1, "breadcrumb-bar"], [1, "content-header"], [1, "header-left"], [1, "header-center"], [1, "smart-filter-container"], [1, "header-right"], [1, "content-body"], [1, "entity-home-view"], [3, "entity", "viewEntity", "viewMode", "filterText", "selectedRecordId", "config", "gridState", "timelineConfig"], [1, "detail-panel", 3, "width"], [3, "close", "save", "delete", "openFilterDialogRequest", "entity", "viewEntity", "isOpen", "currentGridState", "externalFilterState", "isSaving"], [3, "close", "apply", "isOpen", "fields", "filter", "disabled"], [3, "data", "fileName"], [3, "field", "title"], [1, "navigation-panel"], [3, "entitySelected", "toggleCollapse", "sectionToggled", "openRecord", "selectRecord", "expandAndFocus", "entities", "selectedEntityName", "favorites", "recentItems", "collapsed", "allowedEntityNames", "favoritesSectionExpanded", "recentSectionExpanded", "entitiesSectionExpanded", "viewsSectionExpanded"], [1, "breadcrumb-item", 3, "click", "title"], [1, "breadcrumb-icon", 3, "class"], [1, "breadcrumb-label"], [1, "fa-solid", "fa-chevron-right", "breadcrumb-separator"], [1, "breadcrumb-icon"], [1, "entity-icon"], [1, "entity-title"], [1, "record-count"], [3, "viewSelected", "saveViewRequested", "manageViewsRequested", "openInTabRequested", "configureViewRequested", "createNewRecordRequested", "exportRequested", "entity", "selectedViewId", "viewModified"], [1, "entity-icon", 3, "class"], [1, "fa-solid", "fa-search", "filter-icon"], ["type", "text", "placeholder", "Filter records... (press / to focus)", 1, "smart-filter-input", 3, "ngModelChange", "ngModel"], [1, "clear-filter-btn"], [1, "clear-filter-btn", 3, "click"], [1, "fa-solid", "fa-times"], ["type", "text", "placeholder", "Filter entities... (press / to focus)", 1, "smart-filter-input", 3, "ngModelChange", "ngModel"], [1, "view-mode-toggle"], ["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, "date-field-selector-container"], [1, "date-field-backdrop"], [1, "date-field-selector-wrapper"], [1, "date-field-selector-button", 3, "click", "disabled"], [1, "fa-solid", "fa-calendar-days", "date-field-icon"], [1, "date-field-name"], [1, "fa-solid", "fa-chevron-down", "date-field-arrow", 3, "rotated"], [1, "date-field-dropdown-panel"], [1, "timeline-orientation-toggle"], [1, "toggle-btn", 3, "click", "title"], [1, "timeline-sort-toggle"], [1, "date-field-backdrop", 3, "click"], [1, "fa-solid", "fa-chevron-down", "date-field-arrow"], [1, "date-field-dropdown-item", 3, "selected"], [1, "date-field-dropdown-item", 3, "click"], [1, "fa-regular", "fa-calendar", "item-icon"], [1, "item-name"], [1, "fa-solid", "fa-check", "selected-check"], [1, "loading-state"], [1, "home-section"], ["text", "Loading entities...", "size", "medium"], [1, "home-two-column-layout", 3, "single-column"], [1, "section-header-with-toggle"], [1, "section-header-left"], [1, "fa-solid", "fa-database", "section-icon"], [1, "section-title"], [1, "section-count"], [1, "inline-toggle"], [1, "entity-card-grid"], [1, "entity-card", 3, "title"], [1, "empty-state", "small"], [1, "empty-state"], [1, "home-two-column-layout"], [1, "home-column"], [1, "section-header"], [1, "fa-solid", "fa-history", "section-icon"], [1, "entity-filter-strip"], [1, "recent-records-list"], [1, "recent-record-item", 3, "title"], ["title", "Show all entities", 1, "entity-filter-btn", 3, "click"], [1, "fa-solid", "fa-layer-group"], [1, "entity-filter-btn", 3, "active", "title"], [1, "entity-filter-btn", 3, "click", "title"], [1, "recent-record-item", 3, "click", "title"], [1, "recent-record-icon"], [1, "recent-record-content"], [1, "recent-record-name"], [1, "recent-record-entity"], [1, "recent-record-time"], [1, "fa-solid", "fa-star", "section-icon"], [1, "fa-solid", "fa-clock", "section-icon"], [1, "entity-list"], [1, "entity-list-item", 3, "title"], [1, "entity-list-item", 3, "click", "title"], [1, "entity-list-icon"], [1, "entity-list-content"], [1, "entity-list-name"], [1, "favorite-btn", 3, "click", "title"], ["title", "Remove from favorites", 1, "favorite-btn", "favorited", 3, "click"], [1, "fa-solid", "fa-star"], [1, "entity-card", 3, "click", "title"], [1, "entity-card-icon"], [1, "entity-card-content"], [1, "entity-card-title"], [1, "entity-card-description"], [1, "fa-solid", "fa-search", "empty-icon"], [1, "fa-solid", "fa-database", "empty-icon"], [3, "viewModeChange", "filterTextChange", "recordSelected", "recordOpened", "dataLoaded", "filteredCountChanged", "gridStateChanged", "entity", "viewEntity", "viewMode", "filterText", "selectedRecordId", "config", "gridState", "timelineConfig"], [1, "detail-panel"], [3, "close", "openRecord", "navigateToRelated", "openRelatedRecord", "openForeignKeyRecord", "entity", "record"]], template: function DataExplorerDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 2);
+            i0.ɵɵtemplate(1, DataExplorerDashboardComponent_Conditional_1_Template, 2, 15, "div", 3);
+            i0.ɵɵelementStart(2, "div", 4);
+            i0.ɵɵtemplate(3, DataExplorerDashboardComponent_Conditional_3_Template, 3, 0, "div", 5);
+            i0.ɵɵelementStart(4, "div", 6)(5, "div", 7);
             i0.ɵɵtemplate(6, DataExplorerDashboardComponent_Conditional_6_Template, 6, 7)(7, DataExplorerDashboardComponent_Conditional_7_Template, 5, 3);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(8, "div", 7);
-            i0.ɵɵtemplate(9, DataExplorerDashboardComponent_Conditional_9_Template, 5, 2, "div", 8)(10, DataExplorerDashboardComponent_Conditional_10_Template, 5, 2, "div", 8);
+            i0.ɵɵelementStart(8, "div", 8);
+            i0.ɵɵtemplate(9, DataExplorerDashboardComponent_Conditional_9_Template, 5, 2, "div", 9)(10, DataExplorerDashboardComponent_Conditional_10_Template, 5, 2, "div", 9);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(11, "div", 9);
+            i0.ɵɵelementStart(11, "div", 10);
             i0.ɵɵtemplate(12, DataExplorerDashboardComponent_Conditional_12_Template, 7, 6);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(13, "div", 10);
-            i0.ɵɵtemplate(14, DataExplorerDashboardComponent_Conditional_14_Template, 3, 1, "div", 11)(15, DataExplorerDashboardComponent_Conditional_15_Template, 1, 8, "mj-entity-viewer", 12);
+            i0.ɵɵelementStart(13, "div", 11);
+            i0.ɵɵtemplate(14, DataExplorerDashboardComponent_Conditional_14_Template, 3, 1, "div", 12)(15, DataExplorerDashboardComponent_Conditional_15_Template, 1, 8, "mj-entity-viewer", 13);
             i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(16, DataExplorerDashboardComponent_Conditional_16_Template, 2, 4, "div", 13);
-            i0.ɵɵelementStart(17, "mj-view-config-panel", 14);
-            i0.ɵɵlistener("close", function DataExplorerDashboardComponent_Template_mj_view_config_panel_close_17_listener() { return ctx.onCloseViewConfigPanel(); })("save", function DataExplorerDashboardComponent_Template_mj_view_config_panel_save_17_listener($event) { return ctx.onSaveView($event); })("delete", function DataExplorerDashboardComponent_Template_mj_view_config_panel_delete_17_listener() { return ctx.onDeleteView(); })("openFilterDialogRequest", function DataExplorerDashboardComponent_Template_mj_view_config_panel_openFilterDialogRequest_17_listener($event) { return ctx.onOpenFilterDialogRequest($event); });
+            i0.ɵɵtemplate(16, DataExplorerDashboardComponent_Conditional_16_Template, 2, 4, "div", 14);
+            i0.ɵɵelementStart(17, "mj-view-config-panel", 15);
+            i0.ɵɵlistener("close", function DataExplorerDashboardComponent_Template_mj_view_config_panel_close_17_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onCloseViewConfigPanel()); })("save", function DataExplorerDashboardComponent_Template_mj_view_config_panel_save_17_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSaveView($event)); })("delete", function DataExplorerDashboardComponent_Template_mj_view_config_panel_delete_17_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDeleteView()); })("openFilterDialogRequest", function DataExplorerDashboardComponent_Template_mj_view_config_panel_openFilterDialogRequest_17_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onOpenFilterDialogRequest($event)); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(18, "mj-filter-dialog", 16);
+            i0.ɵɵlistener("close", function DataExplorerDashboardComponent_Template_mj_filter_dialog_close_18_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onCloseFilterDialog()); })("apply", function DataExplorerDashboardComponent_Template_mj_filter_dialog_apply_18_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onFilterApplied($event)); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(18, "mj-filter-dialog", 15);
-            i0.ɵɵlistener("close", function DataExplorerDashboardComponent_Template_mj_filter_dialog_close_18_listener() { return ctx.onCloseFilterDialog(); })("apply", function DataExplorerDashboardComponent_Template_mj_filter_dialog_apply_18_listener($event) { return ctx.onFilterApplied($event); });
+            i0.ɵɵelementStart(19, "kendo-excelexport", 17, 0);
+            i0.ɵɵrepeaterCreate(21, DataExplorerDashboardComponent_For_22_Template, 1, 2, "kendo-excelexport-column", 18, _forTrack0);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance();
@@ -2371,10 +2543,14 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.state.detailPanelOpen && ctx.selectedRecord ? 16 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("entity", ctx.selectedEntity)("viewEntity", ctx.selectedViewEntity)("isOpen", ctx.state.viewConfigPanelOpen)("currentGridState", ctx.currentGridState)("externalFilterState", ctx.filterDialogState);
+            i0.ɵɵproperty("entity", ctx.selectedEntity)("viewEntity", ctx.selectedViewEntity)("isOpen", ctx.state.viewConfigPanelOpen)("currentGridState", ctx.currentGridState)("externalFilterState", ctx.filterDialogState)("isSaving", ctx.isSavingView);
             i0.ɵɵadvance();
             i0.ɵɵproperty("isOpen", ctx.isFilterDialogOpen)("fields", ctx.filterDialogFields)("filter", ctx.filterDialogState)("disabled", ctx.filterDialogDisabled);
-        } }, dependencies: [i5.DefaultValueAccessor, i5.NgControlStatus, i5.NgModel, i6.EntityViewerComponent, i6.EntityRecordDetailPanelComponent, i3.LoadingComponent, i7.NavigationPanelComponent, i8.ViewSelectorComponent, i9.ViewConfigPanelComponent, i10.FilterDialogComponent, i11.DecimalPipe], styles: [".data-explorer-container[_ngcontent-%COMP%] {\n  display: flex;\n  height: 100%;\n  width: 100%;\n  background: #f5f7fa;\n  overflow: hidden;\n}\n\n.navigation-panel[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  height: 100%;\n  background: white;\n  border-right: 1px solid #e0e0e0;\n  transition: width 0.2s ease-in-out;\n  overflow: hidden;\n  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);\n}\n.navigation-panel.collapsed[_ngcontent-%COMP%] {\n  width: 48px;\n}\n\n.content-area[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 0;\n  overflow: hidden;\n  background: #f5f7fa;\n}\n\n\n\n.breadcrumb-bar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 24px;\n  background: white;\n  border-bottom: 1px solid #eee;\n  flex-shrink: 0;\n  font-size: 13px;\n  min-height: 40px;\n}\n\n.breadcrumb-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  color: #666;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.15s ease;\n  max-width: 200px;\n}\n\n.breadcrumb-item.clickable[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n.breadcrumb-item.clickable[_ngcontent-%COMP%]:hover {\n  background: #f0f0f0;\n  color: #1976d2;\n}\n\n.breadcrumb-item.current[_ngcontent-%COMP%] {\n  color: #1a1a1a;\n  font-weight: 500;\n  cursor: default;\n}\n\n.breadcrumb-icon[_ngcontent-%COMP%] {\n  font-size: 12px;\n  flex-shrink: 0;\n}\n\n.breadcrumb-label[_ngcontent-%COMP%] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.breadcrumb-separator[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: #ccc;\n  flex-shrink: 0;\n}\n\n.content-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 24px;\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\n  flex-shrink: 0;\n  gap: 24px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);\n}\n\n.header-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-shrink: 0;\n  flex-wrap: wrap;\n}\n\n\n\n.header-left[_ngcontent-%COMP%]     mj-view-selector {\n  margin-left: 8px;\n}\n\n.entity-icon[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: #1976d2;\n}\n\n.entity-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 20px;\n  font-weight: 600;\n  color: #1a1a1a;\n}\n\n.record-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #666;\n  font-weight: 500;\n}\n\n.header-center[_ngcontent-%COMP%] {\n  flex: 1;\n  max-width: 600px;\n}\n\n.smart-filter-container[_ngcontent-%COMP%] {\n  position: relative;\n  width: 100%;\n}\n\n.smart-filter-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 10px 40px 10px 16px;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  font-size: 14px;\n  background: #fafafa;\n  transition: all 0.15s ease;\n}\n.smart-filter-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #1976d2;\n  background: white;\n  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);\n}\n.smart-filter-input[_ngcontent-%COMP%]::placeholder {\n  color: #999;\n}\n\n.clear-filter-btn[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 8px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 28px;\n  height: 28px;\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: #757575;\n  transition: all 0.15s ease;\n}\n.clear-filter-btn[_ngcontent-%COMP%]:hover {\n  background: #e0e0e0;\n  color: #424242;\n}\n\n.header-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  flex-shrink: 0;\n}\n\n.view-mode-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: #f0f0f0;\n  border-radius: 8px;\n  padding: 3px;\n}\n\n.toggle-btn[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #666;\n  transition: all 0.15s ease;\n}\n.toggle-btn[_ngcontent-%COMP%]:hover {\n  color: #333;\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.date-field-selector-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n\n.date-field-backdrop[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 999;\n  background: transparent;\n}\n\n.date-field-selector-wrapper[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n.date-field-selector-button[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 12px;\n  background: var(--background-alt, #f5f5f5);\n  border: 1px solid var(--border-color, #e0e0e0);\n  border-radius: 6px;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--text-primary, #333);\n  transition: all 0.15s ease;\n  min-width: 120px;\n  max-width: 200px;\n}\n\n.date-field-selector-button[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--background-hover, #e8e8e8);\n  border-color: var(--border-color-hover, #ccc);\n}\n\n.date-field-selector-button[_ngcontent-%COMP%]:disabled {\n  cursor: default;\n  opacity: 0.8;\n}\n\n.date-field-selector-button.open[_ngcontent-%COMP%] {\n  background: var(--background-active, #e0e0e0);\n  border-color: var(--primary-color, #007bff);\n}\n\n.date-field-icon[_ngcontent-%COMP%] {\n  color: var(--text-secondary, #666);\n  font-size: 12px;\n}\n\n.date-field-name[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: left;\n}\n\n.date-field-arrow[_ngcontent-%COMP%] {\n  color: var(--text-secondary, #666);\n  font-size: 10px;\n  transition: transform 0.2s ease;\n}\n\n.date-field-arrow.rotated[_ngcontent-%COMP%] {\n  transform: rotate(180deg);\n}\n\n.date-field-dropdown-panel[_ngcontent-%COMP%] {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  min-width: 180px;\n  max-width: 280px;\n  max-height: 300px;\n  overflow-y: auto;\n  background: var(--background-panel, #fff);\n  border: 1px solid var(--border-color, #e0e0e0);\n  border-radius: 8px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n  z-index: 1000;\n}\n\n.date-field-dropdown-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 14px;\n  cursor: pointer;\n  transition: background 0.1s ease;\n  font-size: 13px;\n}\n\n.date-field-dropdown-item[_ngcontent-%COMP%]:hover {\n  background: var(--background-hover, #f5f5f5);\n}\n\n.date-field-dropdown-item.selected[_ngcontent-%COMP%] {\n  background: var(--primary-light, #e6f0ff);\n}\n\n.date-field-dropdown-item.selected[_ngcontent-%COMP%]:hover {\n  background: var(--primary-light-hover, #d6e4f9);\n}\n\n.date-field-dropdown-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n  color: var(--text-secondary, #666);\n  font-size: 13px;\n  width: 16px;\n  text-align: center;\n}\n\n.date-field-dropdown-item[_ngcontent-%COMP%]   .item-name[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.date-field-dropdown-item[_ngcontent-%COMP%]   .selected-check[_ngcontent-%COMP%] {\n  color: var(--primary-color, #007bff);\n  font-size: 12px;\n}\n\n\n\n.timeline-orientation-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: #f0f0f0;\n  border-radius: 8px;\n  padding: 3px;\n}\n\n.content-body[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  padding: 20px 24px;\n  display: flex;\n  flex-direction: column;\n}\n\n.loading-container[_ngcontent-%COMP%], \n.loading-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  gap: 16px;\n  background: white;\n  border-radius: 8px;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n  font-size: 32px;\n  color: #1976d2;\n}\n\n.loading-message[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  color: #666;\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  text-align: center;\n  color: #757575;\n  background: white;\n  border-radius: 8px;\n  padding: 40px;\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n  font-size: 64px;\n  color: #e0e0e0;\n  margin-bottom: 24px;\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  font-size: 20px;\n  font-weight: 600;\n  color: #333;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  max-width: 400px;\n  color: #666;\n}\n\n\n\n.entity-home-view[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  padding: 4px;\n}\n\n.entity-card-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n  gap: 16px;\n  padding: 0;\n}\n\n.entity-card[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 16px;\n  padding: 20px;\n  background: white;\n  border-radius: 10px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  border: 1px solid #e8e8e8;\n}\n\n.entity-card[_ngcontent-%COMP%]:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);\n  border-color: #1976d2;\n}\n\n.entity-card[_ngcontent-%COMP%]:active {\n  transform: translateY(0);\n}\n\n.entity-card-icon[_ngcontent-%COMP%] {\n  width: 48px;\n  height: 48px;\n  border-radius: 10px;\n  background: linear-gradient(135deg, #e3f2fd, #bbdefb);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.entity-card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: #1976d2;\n}\n\n.entity-card[_ngcontent-%COMP%]:hover   .entity-card-icon[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #1976d2, #1565c0);\n}\n\n.entity-card[_ngcontent-%COMP%]:hover   .entity-card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: white;\n}\n\n.entity-card-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.entity-card-title[_ngcontent-%COMP%] {\n  margin: 0 0 6px 0;\n  font-size: 15px;\n  font-weight: 600;\n  color: #1a1a1a;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.entity-card-description[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 13px;\n  color: #666;\n  line-height: 1.4;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.detail-panel[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  height: 100%;\n  background: white;\n  border-left: 1px solid #e0e0e0;\n  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);\n  overflow: hidden;\n  animation: _ngcontent-%COMP%_slideIn 0.2s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_slideIn {\n  from {\n    transform: translateX(100%);\n    opacity: 0;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n[_nghost-%COMP%]     mj-explorer-grid-view, \n[_nghost-%COMP%]     mj-explorer-cards-view {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n\n\n\n\n\n\n\n\n.content-header.home-header[_ngcontent-%COMP%] {\n  border-bottom: none;\n  background: transparent;\n  box-shadow: none;\n  padding: 24px 24px 16px;\n}\n\n.content-body.home-content[_ngcontent-%COMP%] {\n  padding-top: 0;\n}\n\n\n\n.filter-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 14px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: #999;\n  font-size: 14px;\n  pointer-events: none;\n}\n\n.smart-filter-container[_ngcontent-%COMP%]   .smart-filter-input[_ngcontent-%COMP%] {\n  padding-left: 40px;\n}\n\n\n\n\n\n\n.home-section[_ngcontent-%COMP%] {\n  margin-bottom: 28px;\n}\n\n.section-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 14px;\n  padding-left: 4px;\n}\n\n.section-icon[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #1976d2;\n  width: 20px;\n  text-align: center;\n}\n\n.section-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #333;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.section-count[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #888;\n  font-weight: 500;\n  margin-left: 8px;\n}\n\n\n\n\n\n\n.home-two-column-layout[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 24px;\n  margin-bottom: 28px;\n}\n\n\n\n.home-two-column-layout.single-column[_ngcontent-%COMP%] {\n  grid-template-columns: 1fr;\n}\n\n.home-column[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n\n\n\n.section-header-with-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 14px;\n  padding-left: 4px;\n}\n\n.section-header-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n\n\n.inline-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: #f0f0f0;\n  border-radius: 6px;\n  padding: 2px;\n}\n\n.inline-toggle[_ngcontent-%COMP%]   .toggle-btn[_ngcontent-%COMP%] {\n  width: auto;\n  height: 26px;\n  padding: 0 10px;\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: #666;\n  font-size: 11px;\n  font-weight: 500;\n  transition: all 0.15s ease;\n}\n\n.inline-toggle[_ngcontent-%COMP%]   .toggle-btn[_ngcontent-%COMP%]:hover {\n  color: #333;\n}\n\n.inline-toggle[_ngcontent-%COMP%]   .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\n\n\n.entity-card-row[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n  padding: 0;\n}\n\n.entity-card.compact[_ngcontent-%COMP%] {\n  flex: 0 0 auto;\n  width: auto;\n  min-width: 180px;\n  max-width: 280px;\n  padding: 12px 16px;\n  gap: 12px;\n}\n\n.entity-card.compact[_ngcontent-%COMP%]   .entity-card-icon[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n}\n\n.entity-card.compact[_ngcontent-%COMP%]   .entity-card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 16px;\n}\n\n.entity-card.compact[_ngcontent-%COMP%]   .entity-card-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n}\n\n.entity-card.compact[_ngcontent-%COMP%]   .entity-card-content[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n}\n\n\n\n\n\n\n.favorite-btn[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\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: #ccc;\n  transition: all 0.15s ease;\n  margin-left: auto;\n}\n\n.favorite-btn[_ngcontent-%COMP%]:hover {\n  background: rgba(255, 193, 7, 0.1);\n  color: #ffc107;\n  transform: scale(1.1);\n}\n\n.favorite-btn.favorited[_ngcontent-%COMP%] {\n  color: #ffc107;\n}\n\n.favorite-btn.favorited[_ngcontent-%COMP%]:hover {\n  background: rgba(255, 193, 7, 0.15);\n  color: #ffb300;\n}\n\n.entity-card[_ngcontent-%COMP%]   .favorite-btn[_ngcontent-%COMP%] {\n  opacity: 0;\n  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;\n}\n\n.entity-card[_ngcontent-%COMP%]:hover   .favorite-btn[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n\n.entity-card[_ngcontent-%COMP%]   .favorite-btn.favorited[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n\n\n\n\n\n\n.recent-records-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  background: white;\n  border-radius: 10px;\n  padding: 8px;\n  border: 1px solid #e8e8e8;\n}\n\n.recent-record-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.recent-record-item[_ngcontent-%COMP%]:hover {\n  background: #f5f7fa;\n}\n\n.recent-record-icon[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.recent-record-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #4caf50;\n}\n\n.recent-record-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.recent-record-name[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 500;\n  color: #1a1a1a;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.recent-record-entity[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #888;\n}\n\n.recent-record-time[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: #aaa;\n  flex-shrink: 0;\n}\n\n\n\n\n\n\n.entity-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  background: white;\n  border-radius: 10px;\n  padding: 8px;\n  border: 1px solid #e8e8e8;\n}\n\n.entity-list-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.entity-list-item[_ngcontent-%COMP%]:hover {\n  background: #f5f7fa;\n}\n\n.entity-list-icon[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  background: linear-gradient(135deg, #e3f2fd, #bbdefb);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.entity-list-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #1976d2;\n}\n\n.entity-list-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.entity-list-name[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 500;\n  color: #1a1a1a;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.entity-list-item[_ngcontent-%COMP%]   .favorite-btn[_ngcontent-%COMP%] {\n  opacity: 0;\n  transition: opacity 0.15s ease;\n}\n\n.entity-list-item[_ngcontent-%COMP%]:hover   .favorite-btn[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n\n.entity-list-item[_ngcontent-%COMP%]   .favorite-btn.favorited[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n\n\n\n\n\n\n.entity-filter-strip[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n  margin-left: auto;\n  background: #f0f0f0;\n  border-radius: 6px;\n  padding: 3px;\n}\n\n.entity-filter-btn[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 26px;\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: #666;\n  font-size: 12px;\n  transition: all 0.15s ease;\n}\n\n.entity-filter-btn[_ngcontent-%COMP%]:hover {\n  color: #333;\n  background: rgba(0, 0, 0, 0.05);\n}\n\n.entity-filter-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\n\n\n.view-mode-toggle[_ngcontent-%COMP%]   .toggle-btn[_ngcontent-%COMP%] {\n  width: auto;\n  padding: 0 12px;\n  gap: 6px;\n}\n\n.toggle-label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 500;\n}\n\n\n\n\n\n\n.empty-state.small[_ngcontent-%COMP%] {\n  height: auto;\n  padding: 32px;\n  background: #fafafa;\n}\n\n.empty-state.small[_ngcontent-%COMP%]   .empty-icon[_ngcontent-%COMP%] {\n  font-size: 40px;\n  margin-bottom: 16px;\n}\n\n.empty-state.small[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  font-size: 16px;\n}\n\n.empty-state.small[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n\n\n\n\n\n@media (max-width: 1200px) {\n  .entity-card-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n  }\n}\n\n@media (max-width: 900px) {\n  .content-header[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n    gap: 12px;\n  }\n\n  .header-center[_ngcontent-%COMP%] {\n    order: 3;\n    flex-basis: 100%;\n    max-width: 100%;\n  }\n\n  .entity-card.compact[_ngcontent-%COMP%] {\n    min-width: 160px;\n  }\n\n  \n\n  .home-two-column-layout[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n    gap: 20px;\n  }\n}\n\n@media (max-width: 600px) {\n  .data-explorer-container[_ngcontent-%COMP%] {\n    flex-direction: column;\n  }\n\n  .navigation-panel[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .content-header[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n  }\n\n  .content-body[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n  }\n\n  .entity-card-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n    gap: 12px;\n  }\n\n  .entity-card[_ngcontent-%COMP%] {\n    padding: 16px;\n  }\n\n  .entity-card.compact[_ngcontent-%COMP%] {\n    min-width: 100%;\n    max-width: 100%;\n  }\n\n  .entity-card-row[_ngcontent-%COMP%] {\n    flex-direction: column;\n  }\n\n  .view-mode-toggle[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .section-title[_ngcontent-%COMP%] {\n    font-size: 13px;\n  }\n\n  .home-section[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n  }\n}"], data: { animation: [
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("data", ctx.exportData)("fileName", ctx.exportFileName);
+            i0.ɵɵadvance(2);
+            i0.ɵɵrepeater(ctx.exportColumns);
+        } }, dependencies: [i5.DefaultValueAccessor, i5.NgControlStatus, i5.NgModel, i6.ExcelExportComponent, i6.ColumnComponent, i7.EntityViewerComponent, i7.EntityRecordDetailPanelComponent, i3.LoadingComponent, i8.NavigationPanelComponent, i9.ViewSelectorComponent, i10.ViewConfigPanelComponent, i11.FilterDialogComponent, i12.DecimalPipe], styles: [".data-explorer-container[_ngcontent-%COMP%] {\n  display: flex;\n  height: 100%;\n  width: 100%;\n  background: #f5f7fa;\n  overflow: hidden;\n}\n\n.navigation-panel[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  height: 100%;\n  background: white;\n  border-right: 1px solid #e0e0e0;\n  transition: width 0.2s ease-in-out;\n  overflow: hidden;\n  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);\n}\n.navigation-panel.collapsed[_ngcontent-%COMP%] {\n  width: 48px;\n}\n\n.content-area[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 0;\n  overflow: hidden;\n  background: #f5f7fa;\n}\n\n\n\n.breadcrumb-bar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 24px;\n  background: white;\n  border-bottom: 1px solid #eee;\n  flex-shrink: 0;\n  font-size: 13px;\n  min-height: 40px;\n}\n\n.breadcrumb-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  color: #666;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.15s ease;\n  max-width: 200px;\n}\n\n.breadcrumb-item.clickable[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n.breadcrumb-item.clickable[_ngcontent-%COMP%]:hover {\n  background: #f0f0f0;\n  color: #1976d2;\n}\n\n.breadcrumb-item.current[_ngcontent-%COMP%] {\n  color: #1a1a1a;\n  font-weight: 500;\n  cursor: default;\n}\n\n.breadcrumb-icon[_ngcontent-%COMP%] {\n  font-size: 12px;\n  flex-shrink: 0;\n}\n\n.breadcrumb-label[_ngcontent-%COMP%] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.breadcrumb-separator[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: #ccc;\n  flex-shrink: 0;\n}\n\n.content-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 24px;\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\n  flex-shrink: 0;\n  gap: 24px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);\n}\n\n.header-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-shrink: 0;\n  flex-wrap: wrap;\n}\n\n\n\n.header-left[_ngcontent-%COMP%]     mj-view-selector {\n  margin-left: 8px;\n}\n\n.entity-icon[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: #1976d2;\n}\n\n.entity-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 20px;\n  font-weight: 600;\n  color: #1a1a1a;\n}\n\n.record-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #666;\n  font-weight: 500;\n}\n\n.header-center[_ngcontent-%COMP%] {\n  flex: 1;\n  max-width: 600px;\n}\n\n.smart-filter-container[_ngcontent-%COMP%] {\n  position: relative;\n  width: 100%;\n}\n\n.smart-filter-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 10px 40px 10px 16px;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  font-size: 14px;\n  background: #fafafa;\n  transition: all 0.15s ease;\n}\n.smart-filter-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #1976d2;\n  background: white;\n  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);\n}\n.smart-filter-input[_ngcontent-%COMP%]::placeholder {\n  color: #999;\n}\n\n.clear-filter-btn[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 8px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 28px;\n  height: 28px;\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: #757575;\n  transition: all 0.15s ease;\n}\n.clear-filter-btn[_ngcontent-%COMP%]:hover {\n  background: #e0e0e0;\n  color: #424242;\n}\n\n.header-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  flex-shrink: 0;\n}\n\n.view-mode-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: #f0f0f0;\n  border-radius: 8px;\n  padding: 3px;\n}\n\n.toggle-btn[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #666;\n  transition: all 0.15s ease;\n}\n.toggle-btn[_ngcontent-%COMP%]:hover {\n  color: #333;\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.date-field-selector-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n\n.date-field-backdrop[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 999;\n  background: transparent;\n}\n\n.date-field-selector-wrapper[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n.date-field-selector-button[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 12px;\n  background: var(--background-alt, #f5f5f5);\n  border: 1px solid var(--border-color, #e0e0e0);\n  border-radius: 6px;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--text-primary, #333);\n  transition: all 0.15s ease;\n  min-width: 120px;\n  max-width: 200px;\n}\n\n.date-field-selector-button[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--background-hover, #e8e8e8);\n  border-color: var(--border-color-hover, #ccc);\n}\n\n.date-field-selector-button[_ngcontent-%COMP%]:disabled {\n  cursor: default;\n  opacity: 0.8;\n}\n\n.date-field-selector-button.open[_ngcontent-%COMP%] {\n  background: var(--background-active, #e0e0e0);\n  border-color: var(--primary-color, #007bff);\n}\n\n.date-field-icon[_ngcontent-%COMP%] {\n  color: var(--text-secondary, #666);\n  font-size: 12px;\n}\n\n.date-field-name[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: left;\n}\n\n.date-field-arrow[_ngcontent-%COMP%] {\n  color: var(--text-secondary, #666);\n  font-size: 10px;\n  transition: transform 0.2s ease;\n}\n\n.date-field-arrow.rotated[_ngcontent-%COMP%] {\n  transform: rotate(180deg);\n}\n\n.date-field-dropdown-panel[_ngcontent-%COMP%] {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  min-width: 180px;\n  max-width: 280px;\n  max-height: 300px;\n  overflow-y: auto;\n  background: var(--background-panel, #fff);\n  border: 1px solid var(--border-color, #e0e0e0);\n  border-radius: 8px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n  z-index: 1000;\n}\n\n.date-field-dropdown-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 14px;\n  cursor: pointer;\n  transition: background 0.1s ease;\n  font-size: 13px;\n}\n\n.date-field-dropdown-item[_ngcontent-%COMP%]:hover {\n  background: var(--background-hover, #f5f5f5);\n}\n\n.date-field-dropdown-item.selected[_ngcontent-%COMP%] {\n  background: var(--primary-light, #e6f0ff);\n}\n\n.date-field-dropdown-item.selected[_ngcontent-%COMP%]:hover {\n  background: var(--primary-light-hover, #d6e4f9);\n}\n\n.date-field-dropdown-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n  color: var(--text-secondary, #666);\n  font-size: 13px;\n  width: 16px;\n  text-align: center;\n}\n\n.date-field-dropdown-item[_ngcontent-%COMP%]   .item-name[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.date-field-dropdown-item[_ngcontent-%COMP%]   .selected-check[_ngcontent-%COMP%] {\n  color: var(--primary-color, #007bff);\n  font-size: 12px;\n}\n\n\n\n.timeline-orientation-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: #f0f0f0;\n  border-radius: 8px;\n  padding: 3px;\n}\n\n.content-body[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  padding: 20px 24px;\n  display: flex;\n  flex-direction: column;\n}\n\n.loading-container[_ngcontent-%COMP%], \n.loading-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  gap: 16px;\n  background: white;\n  border-radius: 8px;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n  font-size: 32px;\n  color: #1976d2;\n}\n\n.loading-message[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  color: #666;\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  text-align: center;\n  color: #757575;\n  background: white;\n  border-radius: 8px;\n  padding: 40px;\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n  font-size: 64px;\n  color: #e0e0e0;\n  margin-bottom: 24px;\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  font-size: 20px;\n  font-weight: 600;\n  color: #333;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  max-width: 400px;\n  color: #666;\n}\n\n\n\n.entity-home-view[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  padding: 4px;\n}\n\n.entity-card-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n  gap: 16px;\n  padding: 0;\n}\n\n.entity-card[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 16px;\n  padding: 20px;\n  background: white;\n  border-radius: 10px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  border: 1px solid #e8e8e8;\n}\n\n.entity-card[_ngcontent-%COMP%]:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);\n  border-color: #1976d2;\n}\n\n.entity-card[_ngcontent-%COMP%]:active {\n  transform: translateY(0);\n}\n\n.entity-card-icon[_ngcontent-%COMP%] {\n  width: 48px;\n  height: 48px;\n  border-radius: 10px;\n  background: linear-gradient(135deg, #e3f2fd, #bbdefb);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.entity-card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: #1976d2;\n}\n\n.entity-card[_ngcontent-%COMP%]:hover   .entity-card-icon[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #1976d2, #1565c0);\n}\n\n.entity-card[_ngcontent-%COMP%]:hover   .entity-card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: white;\n}\n\n.entity-card-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.entity-card-title[_ngcontent-%COMP%] {\n  margin: 0 0 6px 0;\n  font-size: 15px;\n  font-weight: 600;\n  color: #1a1a1a;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.entity-card-description[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 13px;\n  color: #666;\n  line-height: 1.4;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.detail-panel[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  height: 100%;\n  background: white;\n  border-left: 1px solid #e0e0e0;\n  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);\n  overflow: hidden;\n  animation: _ngcontent-%COMP%_slideIn 0.2s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_slideIn {\n  from {\n    transform: translateX(100%);\n    opacity: 0;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n[_nghost-%COMP%]     mj-explorer-grid-view, \n[_nghost-%COMP%]     mj-explorer-cards-view {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n\n\n\n\n\n\n\n\n.content-header.home-header[_ngcontent-%COMP%] {\n  border-bottom: none;\n  background: transparent;\n  box-shadow: none;\n  padding: 24px 24px 16px;\n}\n\n.content-body.home-content[_ngcontent-%COMP%] {\n  padding-top: 0;\n}\n\n\n\n.filter-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 14px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: #999;\n  font-size: 14px;\n  pointer-events: none;\n}\n\n.smart-filter-container[_ngcontent-%COMP%]   .smart-filter-input[_ngcontent-%COMP%] {\n  padding-left: 40px;\n}\n\n\n\n\n\n\n.home-section[_ngcontent-%COMP%] {\n  margin-bottom: 28px;\n}\n\n.section-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 14px;\n  padding-left: 4px;\n}\n\n.section-icon[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #1976d2;\n  width: 20px;\n  text-align: center;\n}\n\n.section-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #333;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.section-count[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #888;\n  font-weight: 500;\n  margin-left: 8px;\n}\n\n\n\n\n\n\n.home-two-column-layout[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 24px;\n  margin-bottom: 28px;\n}\n\n\n\n.home-two-column-layout.single-column[_ngcontent-%COMP%] {\n  grid-template-columns: 1fr;\n}\n\n.home-column[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n\n\n\n.section-header-with-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 14px;\n  padding-left: 4px;\n}\n\n.section-header-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n\n\n.inline-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: #f0f0f0;\n  border-radius: 6px;\n  padding: 2px;\n}\n\n.inline-toggle[_ngcontent-%COMP%]   .toggle-btn[_ngcontent-%COMP%] {\n  width: auto;\n  height: 26px;\n  padding: 0 10px;\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: #666;\n  font-size: 11px;\n  font-weight: 500;\n  transition: all 0.15s ease;\n}\n\n.inline-toggle[_ngcontent-%COMP%]   .toggle-btn[_ngcontent-%COMP%]:hover {\n  color: #333;\n}\n\n.inline-toggle[_ngcontent-%COMP%]   .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\n\n\n.entity-card-row[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n  padding: 0;\n}\n\n.entity-card.compact[_ngcontent-%COMP%] {\n  flex: 0 0 auto;\n  width: auto;\n  min-width: 180px;\n  max-width: 280px;\n  padding: 12px 16px;\n  gap: 12px;\n}\n\n.entity-card.compact[_ngcontent-%COMP%]   .entity-card-icon[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n}\n\n.entity-card.compact[_ngcontent-%COMP%]   .entity-card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 16px;\n}\n\n.entity-card.compact[_ngcontent-%COMP%]   .entity-card-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n}\n\n.entity-card.compact[_ngcontent-%COMP%]   .entity-card-content[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n}\n\n\n\n\n\n\n.favorite-btn[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\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: #ccc;\n  transition: all 0.15s ease;\n  margin-left: auto;\n}\n\n.favorite-btn[_ngcontent-%COMP%]:hover {\n  background: rgba(255, 193, 7, 0.1);\n  color: #ffc107;\n  transform: scale(1.1);\n}\n\n.favorite-btn.favorited[_ngcontent-%COMP%] {\n  color: #ffc107;\n}\n\n.favorite-btn.favorited[_ngcontent-%COMP%]:hover {\n  background: rgba(255, 193, 7, 0.15);\n  color: #ffb300;\n}\n\n.entity-card[_ngcontent-%COMP%]   .favorite-btn[_ngcontent-%COMP%] {\n  opacity: 0;\n  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;\n}\n\n.entity-card[_ngcontent-%COMP%]:hover   .favorite-btn[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n\n.entity-card[_ngcontent-%COMP%]   .favorite-btn.favorited[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n\n\n\n\n\n\n.recent-records-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  background: white;\n  border-radius: 10px;\n  padding: 8px;\n  border: 1px solid #e8e8e8;\n}\n\n.recent-record-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.recent-record-item[_ngcontent-%COMP%]:hover {\n  background: #f5f7fa;\n}\n\n.recent-record-icon[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.recent-record-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #4caf50;\n}\n\n.recent-record-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.recent-record-name[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 500;\n  color: #1a1a1a;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.recent-record-entity[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #888;\n}\n\n.recent-record-time[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: #aaa;\n  flex-shrink: 0;\n}\n\n\n\n\n\n\n.entity-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  background: white;\n  border-radius: 10px;\n  padding: 8px;\n  border: 1px solid #e8e8e8;\n}\n\n.entity-list-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.entity-list-item[_ngcontent-%COMP%]:hover {\n  background: #f5f7fa;\n}\n\n.entity-list-icon[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  background: linear-gradient(135deg, #e3f2fd, #bbdefb);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.entity-list-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #1976d2;\n}\n\n.entity-list-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.entity-list-name[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 500;\n  color: #1a1a1a;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.entity-list-item[_ngcontent-%COMP%]   .favorite-btn[_ngcontent-%COMP%] {\n  opacity: 0;\n  transition: opacity 0.15s ease;\n}\n\n.entity-list-item[_ngcontent-%COMP%]:hover   .favorite-btn[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n\n.entity-list-item[_ngcontent-%COMP%]   .favorite-btn.favorited[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n\n\n\n\n\n\n.entity-filter-strip[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n  margin-left: auto;\n  background: #f0f0f0;\n  border-radius: 6px;\n  padding: 3px;\n}\n\n.entity-filter-btn[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 26px;\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: #666;\n  font-size: 12px;\n  transition: all 0.15s ease;\n}\n\n.entity-filter-btn[_ngcontent-%COMP%]:hover {\n  color: #333;\n  background: rgba(0, 0, 0, 0.05);\n}\n\n.entity-filter-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\n\n\n.view-mode-toggle[_ngcontent-%COMP%]   .toggle-btn[_ngcontent-%COMP%] {\n  width: auto;\n  padding: 0 12px;\n  gap: 6px;\n}\n\n.toggle-label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 500;\n}\n\n\n\n\n\n\n.empty-state.small[_ngcontent-%COMP%] {\n  height: auto;\n  padding: 32px;\n  background: #fafafa;\n}\n\n.empty-state.small[_ngcontent-%COMP%]   .empty-icon[_ngcontent-%COMP%] {\n  font-size: 40px;\n  margin-bottom: 16px;\n}\n\n.empty-state.small[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  font-size: 16px;\n}\n\n.empty-state.small[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n\n\n\n\n\n@media (max-width: 1200px) {\n  .entity-card-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n  }\n}\n\n@media (max-width: 900px) {\n  .content-header[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n    gap: 12px;\n  }\n\n  .header-center[_ngcontent-%COMP%] {\n    order: 3;\n    flex-basis: 100%;\n    max-width: 100%;\n  }\n\n  .entity-card.compact[_ngcontent-%COMP%] {\n    min-width: 160px;\n  }\n\n  \n\n  .home-two-column-layout[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n    gap: 20px;\n  }\n}\n\n@media (max-width: 600px) {\n  .data-explorer-container[_ngcontent-%COMP%] {\n    flex-direction: column;\n  }\n\n  .navigation-panel[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .content-header[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n  }\n\n  .content-body[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n  }\n\n  .entity-card-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n    gap: 12px;\n  }\n\n  .entity-card[_ngcontent-%COMP%] {\n    padding: 16px;\n  }\n\n  .entity-card.compact[_ngcontent-%COMP%] {\n    min-width: 100%;\n    max-width: 100%;\n  }\n\n  .entity-card-row[_ngcontent-%COMP%] {\n    flex-direction: column;\n  }\n\n  .view-mode-toggle[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .section-title[_ngcontent-%COMP%] {\n    font-size: 13px;\n  }\n\n  .home-section[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n  }\n}"], data: { animation: [
                 trigger('slideInLeft', [
                     transition(':enter', [
                         style({ transform: 'translateX(-100%)', opacity: 0 }),
@@ -2402,7 +2578,7 @@ export { DataExplorerDashboardComponent };
                             animate('200ms ease-in', style({ transform: 'translateX(-100%)', opacity: 0 }))
                         ])
                     ])
-                ], template: "<div class=\"data-explorer-container\">\n  <!-- Navigation Panel (Left) - Hidden at home level, animated -->\n  @if (!isAtHomeLevel) {\n    <div\n      class=\"navigation-panel\"\n      [class.collapsed]=\"state.navigationPanelCollapsed\"\n      [style.width.px]=\"state.navigationPanelCollapsed ? 48 : state.navigationPanelWidth\"\n      [@slideInLeft]>\n\n      <mj-explorer-navigation-panel\n        [entities]=\"entities\"\n        [selectedEntityName]=\"state.selectedEntityName\"\n        [favorites]=\"state.favorites\"\n        [recentItems]=\"state.recentItems\"\n        [collapsed]=\"state.navigationPanelCollapsed\"\n        [allowedEntityNames]=\"allowedEntityNames\"\n        [favoritesSectionExpanded]=\"state.favoritesSectionExpanded\"\n        [recentSectionExpanded]=\"state.recentSectionExpanded\"\n        [entitiesSectionExpanded]=\"state.entitiesSectionExpanded\"\n        [viewsSectionExpanded]=\"state.viewsSectionExpanded\"\n        (entitySelected)=\"onEntitySelected($event)\"\n        (toggleCollapse)=\"toggleNavigationPanel()\"\n        (sectionToggled)=\"stateService.toggleSection($event)\"\n        (openRecord)=\"onOpenRecordFromNav($event)\"\n        (selectRecord)=\"onSelectRecordFromNav($event)\"\n        (expandAndFocus)=\"onExpandAndFocus($event)\">\n      </mj-explorer-navigation-panel>\n    </div>\n  }\n\n  <!-- Main Content Area -->\n  <div class=\"content-area\">\n    <!-- Breadcrumb Bar - Hidden at home level -->\n    @if (!isAtHomeLevel && breadcrumbs.length > 0) {\n      <div class=\"breadcrumb-bar\">\n        @for (crumb of breadcrumbs; track crumb.label; let i = $index; let last = $last) {\n          <span\n            class=\"breadcrumb-item\"\n            [class.clickable]=\"!last\"\n            [class.current]=\"last\"\n            (click)=\"onBreadcrumbClick(crumb, i)\"\n            [title]=\"crumb.label\">\n            @if (crumb.icon) {\n              <i [class]=\"crumb.icon\" class=\"breadcrumb-icon\"></i>\n            }\n            <span class=\"breadcrumb-label\">{{ crumb.label }}</span>\n          </span>\n          @if (!last) {\n            <i class=\"fa-solid fa-chevron-right breadcrumb-separator\"></i>\n          }\n        }\n      </div>\n    }\n\n    <!-- Header -->\n    <div class=\"content-header\" [class.home-header]=\"isAtHomeLevel\">\n      <div class=\"header-left\">\n        @if (selectedEntity) {\n          <i [class]=\"getEntityIcon(selectedEntity)\" class=\"entity-icon\"></i>\n          <h2 class=\"entity-title\">{{ selectedEntity.Name }}</h2>\n          @if (debouncedFilterText && filteredRecordCount !== totalRecordCount) {\n            <span class=\"record-count\">{{ filteredRecordCount | number }} of {{ totalRecordCount | number }} records</span>\n          } @else {\n            <span class=\"record-count\">{{ totalRecordCount | number }} records</span>\n          }\n\n          <!-- View Selector -->\n          <mj-view-selector\n            [entity]=\"selectedEntity\"\n            [selectedViewId]=\"state.selectedViewId\"\n            [viewModified]=\"state.viewModified\"\n            (viewSelected)=\"onViewSelected($event)\"\n            (saveViewRequested)=\"onSaveViewRequested($event)\"\n            (manageViewsRequested)=\"onManageViewsRequested()\"\n            (openInTabRequested)=\"onOpenInTabRequested($event)\"\n            (configureViewRequested)=\"onConfigureViewRequested()\">\n          </mj-view-selector>\n        } @else {\n          @if (displayIcon) {\n            <i [class]=\"displayIcon\" class=\"entity-icon\"></i>\n          }\n          <h2 class=\"entity-title\">{{ displayTitle }}</h2>\n          <span class=\"record-count\">{{ entities.length }} entities available</span>\n        }\n      </div>\n\n      <div class=\"header-center\">\n        @if (selectedEntity) {\n          <div class=\"smart-filter-container\">\n            <i class=\"fa-solid fa-search filter-icon\"></i>\n            <input\n              #filterInput\n              type=\"text\"\n              class=\"smart-filter-input\"\n              placeholder=\"Filter records... (press / to focus)\"\n              [ngModel]=\"state.smartFilterPrompt\"\n              (ngModelChange)=\"onSmartFilterChanged($event)\"\n            />\n            @if (state.smartFilterPrompt) {\n              <button class=\"clear-filter-btn\" (click)=\"onSmartFilterChanged('')\">\n                <i class=\"fa-solid fa-times\"></i>\n              </button>\n            }\n          </div>\n        } @else {\n          <!-- Entity filter for home screen -->\n          <div class=\"smart-filter-container\">\n            <i class=\"fa-solid fa-search filter-icon\"></i>\n            <input\n              #filterInput\n              type=\"text\"\n              class=\"smart-filter-input\"\n              placeholder=\"Filter entities... (press / to focus)\"\n              [(ngModel)]=\"entityFilterText\"\n            />\n            @if (entityFilterText) {\n              <button class=\"clear-filter-btn\" (click)=\"entityFilterText = ''\">\n                <i class=\"fa-solid fa-times\"></i>\n              </button>\n            }\n          </div>\n        }\n      </div>\n\n      <div class=\"header-right\">\n        @if (selectedEntity) {\n          <!-- View Mode Toggle -->\n          <div class=\"view-mode-toggle\">\n            <button\n              class=\"toggle-btn\"\n              [class.active]=\"state.viewMode === 'grid'\"\n              (click)=\"onViewModeChanged('grid')\"\n              title=\"Grid View\">\n              <i class=\"fa-solid fa-list\"></i>\n            </button>\n            <button\n              class=\"toggle-btn\"\n              [class.active]=\"state.viewMode === 'cards'\"\n              (click)=\"onViewModeChanged('cards')\"\n              title=\"Cards View\">\n              <i class=\"fa-solid fa-grip\"></i>\n            </button>\n            @if (entityHasDateFields) {\n              <button\n                class=\"toggle-btn\"\n                [class.active]=\"state.viewMode === 'timeline'\"\n                (click)=\"onViewModeChanged('timeline')\"\n                title=\"Timeline View\">\n                <i class=\"fa-solid fa-timeline\"></i>\n              </button>\n            }\n          </div>\n\n          <!-- Timeline Controls (only shown when timeline view is active) -->\n          @if (state.viewMode === 'timeline' && entityHasDateFields) {\n            <!-- Date Field Selector -->\n            <div class=\"date-field-selector-container\">\n              <!-- Backdrop for closing dropdown -->\n              @if (isDateFieldDropdownOpen) {\n                <div class=\"date-field-backdrop\" (click)=\"closeDateFieldDropdown()\"></div>\n              }\n\n              <div class=\"date-field-selector-wrapper\">\n                <button\n                  class=\"date-field-selector-button\"\n                  [class.open]=\"isDateFieldDropdownOpen\"\n                  [disabled]=\"availableDateFields.length <= 1\"\n                  (click)=\"toggleDateFieldDropdown()\">\n                  <i class=\"fa-solid fa-calendar-days date-field-icon\"></i>\n                  <span class=\"date-field-name\">{{ effectiveTimelineDateFieldDisplayName }}</span>\n                  @if (availableDateFields.length > 1) {\n                    <i class=\"fa-solid fa-chevron-down date-field-arrow\" [class.rotated]=\"isDateFieldDropdownOpen\"></i>\n                  }\n                </button>\n\n                @if (isDateFieldDropdownOpen && availableDateFields.length > 1) {\n                  <div class=\"date-field-dropdown-panel\">\n                    @for (field of availableDateFields; track field.name) {\n                      <div\n                        class=\"date-field-dropdown-item\"\n                        [class.selected]=\"field.name === effectiveTimelineDateField\"\n                        (click)=\"setTimelineDateField(field.name)\">\n                        <i class=\"fa-regular fa-calendar item-icon\"></i>\n                        <span class=\"item-name\">{{ field.displayName }}</span>\n                        @if (field.name === effectiveTimelineDateField) {\n                          <i class=\"fa-solid fa-check selected-check\"></i>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            </div>\n\n            <!-- Orientation Toggle -->\n            <div class=\"timeline-orientation-toggle\">\n              <button\n                class=\"toggle-btn\"\n                (click)=\"toggleTimelineOrientation()\"\n                [title]=\"state.timelineOrientation === 'vertical' ? 'Switch to Horizontal' : 'Switch to Vertical'\">\n                <i [class]=\"state.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]=\"state.timelineSortOrder === 'desc' ? 'Showing Newest First (click for Oldest First)' : 'Showing Oldest First (click for Newest First)'\">\n                <i [class]=\"state.timelineSortOrder === 'desc' ? 'fa-solid fa-arrow-down-wide-short' : 'fa-solid fa-arrow-up-wide-short'\"></i>\n              </button>\n            </div>\n          }\n        }\n        <!-- Common/All toggle moved to inline with All Entities section header -->\n      </div>\n    </div>\n\n    <!-- Content Body - Using mj-entity-viewer composite -->\n    <div class=\"content-body\" [class.home-content]=\"isAtHomeLevel\">\n      @if (!selectedEntity) {\n        <!-- Entity Home View - Two-Column Layout -->\n        <div class=\"entity-home-view\">\n          @if (isLoadingEntities) {\n            <div class=\"loading-state\">\n              <mj-loading text=\"Loading entities...\" size=\"medium\"></mj-loading>\n            </div>\n          } @else {\n            <!-- Two-Column Layout: Records (left) | Entities (right) -->\n            @if (hasTopSectionContent) {\n              <div class=\"home-two-column-layout\" [class.single-column]=\"!hasRecordsColumnContent || !hasEntitiesColumnContent\">\n                <!-- Left Column: Recent & Favorite Records (most actionable) -->\n                @if (hasRecordsColumnContent) {\n                <div class=\"home-column\">\n                  <!-- Recent Records Section -->\n                  @if (recentRecords.length > 0) {\n                    <div class=\"home-section\">\n                      <div class=\"section-header\">\n                        <i class=\"fa-solid fa-history section-icon\"></i>\n                        <h3 class=\"section-title\">Recent Records</h3>\n                        <!-- Entity filter strip - only show with 2+ entities -->\n                        @if (showRecentRecordsEntityFilter) {\n                          <div class=\"entity-filter-strip\">\n                            <button\n                              class=\"entity-filter-btn\"\n                              [class.active]=\"recentRecordsEntityFilter === null\"\n                              (click)=\"setRecentRecordsEntityFilter(null)\"\n                              title=\"Show all entities\">\n                              <i class=\"fa-solid fa-layer-group\"></i>\n                            </button>\n                            @for (entity of uniqueRecentRecordEntities; track entity.entityId) {\n                              <button\n                                class=\"entity-filter-btn\"\n                                [class.active]=\"recentRecordsEntityFilter === entity.entityId\"\n                                (click)=\"setRecentRecordsEntityFilter(entity.entityId)\"\n                                [title]=\"entity.entityName\">\n                                <i [class]=\"entity.icon\"></i>\n                              </button>\n                            }\n                          </div>\n                        }\n                      </div>\n                      <div class=\"recent-records-list\">\n                        @for (record of filteredRecentRecords; track record.entityId + '|' + record.recordId) {\n                          <div\n                            class=\"recent-record-item\"\n                            (click)=\"onRecentRecordClick(record)\"\n                            [title]=\"record.entityName + ' - ' + record.recordId\">\n                            <div class=\"recent-record-icon\">\n                              <i [class]=\"getEntityIconById(record.entityId)\"></i>\n                            </div>\n                            <div class=\"recent-record-content\">\n                              <span class=\"recent-record-name\">{{ record.recordName || record.recordId }}</span>\n                              <span class=\"recent-record-entity\">{{ record.entityName }}</span>\n                            </div>\n                            <span class=\"recent-record-time\">{{ formatRelativeTime(record.latestAt) }}</span>\n                          </div>\n                        }\n                      </div>\n                    </div>\n                  }\n\n                  <!-- Favorite Records Section -->\n                  @if (favoriteRecords.length > 0) {\n                    <div class=\"home-section\">\n                      <div class=\"section-header\">\n                        <i class=\"fa-solid fa-star section-icon\"></i>\n                        <h3 class=\"section-title\">Favorite Records</h3>\n                      </div>\n                      <div class=\"recent-records-list\">\n                        @for (record of favoriteRecords; track record.userFavoriteId) {\n                          <div\n                            class=\"recent-record-item\"\n                            (click)=\"onFavoriteRecordClick(record)\"\n                            [title]=\"record.entityName + ' - ' + record.recordId\">\n                            <div class=\"recent-record-icon\">\n                              <i [class]=\"getEntityIconById(record.entityId)\"></i>\n                            </div>\n                            <div class=\"recent-record-content\">\n                              <span class=\"recent-record-name\">{{ record.recordName || record.recordId }}</span>\n                              <span class=\"recent-record-entity\">{{ record.entityName }}</span>\n                            </div>\n                          </div>\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n                }\n\n                <!-- Right Column: Recent & Favorite Entities -->\n                @if (hasEntitiesColumnContent) {\n                <div class=\"home-column\">\n                  <!-- Recent Entities Section (list format) -->\n                  @if (recentEntities.length > 0) {\n                    <div class=\"home-section\">\n                      <div class=\"section-header\">\n                        <i class=\"fa-solid fa-clock section-icon\"></i>\n                        <h3 class=\"section-title\">Recent Entities</h3>\n                      </div>\n                      <div class=\"entity-list\">\n                        @for (entity of recentEntities; track entity.ID) {\n                          <div\n                            class=\"entity-list-item\"\n                            (click)=\"onEntitySelected(entity)\"\n                            [title]=\"entity.Description || entity.Name\">\n                            <div class=\"entity-list-icon\">\n                              <i [class]=\"getEntityIcon(entity)\"></i>\n                            </div>\n                            <div class=\"entity-list-content\">\n                              <span class=\"entity-list-name\">{{ entity.Name }}</span>\n                            </div>\n                            <button\n                              class=\"favorite-btn\"\n                              [class.favorited]=\"isEntityFavorited(entity)\"\n                              (click)=\"toggleEntityFavorite(entity, $event)\"\n                              [title]=\"isEntityFavorited(entity) ? 'Remove from favorites' : 'Add to favorites'\">\n                              <i [class]=\"isEntityFavorited(entity) ? 'fa-solid fa-star' : 'fa-regular fa-star'\"></i>\n                            </button>\n                          </div>\n                        }\n                      </div>\n                    </div>\n                  }\n\n                  <!-- Favorite Entities Section (list format) -->\n                  @if (favoriteEntities.length > 0) {\n                    <div class=\"home-section\">\n                      <div class=\"section-header\">\n                        <i class=\"fa-solid fa-star section-icon\"></i>\n                        <h3 class=\"section-title\">Favorite Entities</h3>\n                      </div>\n                      <div class=\"entity-list\">\n                        @for (entity of favoriteEntities; track entity.ID) {\n                          <div\n                            class=\"entity-list-item\"\n                            (click)=\"onEntitySelected(entity)\"\n                            [title]=\"entity.Description || entity.Name\">\n                            <div class=\"entity-list-icon\">\n                              <i [class]=\"getEntityIcon(entity)\"></i>\n                            </div>\n                            <div class=\"entity-list-content\">\n                              <span class=\"entity-list-name\">{{ entity.Name }}</span>\n                            </div>\n                            <button\n                              class=\"favorite-btn favorited\"\n                              (click)=\"toggleEntityFavorite(entity, $event)\"\n                              title=\"Remove from favorites\">\n                              <i class=\"fa-solid fa-star\"></i>\n                            </button>\n                          </div>\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n                }\n              </div>\n            }\n\n            <!-- All/Common Entities Section - Full Width -->\n            <div class=\"home-section\">\n              <div class=\"section-header-with-toggle\">\n                <div class=\"section-header-left\">\n                  <i class=\"fa-solid fa-database section-icon\"></i>\n                  <h3 class=\"section-title\">\n                    @if (state.showAllEntities || !showCommonAllToggle) {\n                      All Entities\n                    } @else {\n                      Common Entities\n                    }\n                  </h3>\n                  @if (entityFilterText && filteredEntities.length !== entities.length) {\n                    <span class=\"section-count\">{{ filteredEntities.length }} matching</span>\n                  }\n                </div>\n                @if (showCommonAllToggle) {\n                  <div class=\"inline-toggle\">\n                    <button\n                      class=\"toggle-btn\"\n                      [class.active]=\"!state.showAllEntities\"\n                      (click)=\"toggleShowAllEntities()\"\n                      title=\"Show common entities ({{ commonEntitiesCount }})\">\n                      Common\n                    </button>\n                    <button\n                      class=\"toggle-btn\"\n                      [class.active]=\"state.showAllEntities\"\n                      (click)=\"toggleShowAllEntities()\"\n                      title=\"Show all entities ({{ allEntitiesCount }})\">\n                      All\n                    </button>\n                  </div>\n                }\n              </div>\n              <div class=\"entity-card-grid\">\n                @for (entity of filteredEntities; track entity.ID) {\n                  <div\n                    class=\"entity-card\"\n                    (click)=\"onEntitySelected(entity)\"\n                    [title]=\"entity.Description || entity.Name\">\n                    <div class=\"entity-card-icon\">\n                      <i [class]=\"getEntityIcon(entity)\"></i>\n                    </div>\n                    <div class=\"entity-card-content\">\n                      <h4 class=\"entity-card-title\">{{ entity.Name }}</h4>\n                      @if (entity.Description) {\n                        <p class=\"entity-card-description\">{{ entity.Description }}</p>\n                      }\n                    </div>\n                    <button\n                      class=\"favorite-btn\"\n                      [class.favorited]=\"isEntityFavorited(entity)\"\n                      (click)=\"toggleEntityFavorite(entity, $event)\"\n                      [title]=\"isEntityFavorited(entity) ? 'Remove from favorites' : 'Add to favorites'\">\n                      <i [class]=\"isEntityFavorited(entity) ? 'fa-solid fa-star' : 'fa-regular fa-star'\"></i>\n                    </button>\n                  </div>\n                }\n              </div>\n              @if (filteredEntities.length === 0 && entities.length > 0) {\n                <div class=\"empty-state small\">\n                  <i class=\"fa-solid fa-search empty-icon\"></i>\n                  <h3>No Matching Entities</h3>\n                  <p>No entities match \"{{ entityFilterText }}\"</p>\n                </div>\n              }\n              @if (entities.length === 0) {\n                <div class=\"empty-state\">\n                  <i class=\"fa-solid fa-database empty-icon\"></i>\n                  <h3>No Entities Available</h3>\n                  <p>There are no entities configured for this application.</p>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      } @else {\n        <mj-entity-viewer\n          [entity]=\"selectedEntity\"\n          [viewEntity]=\"selectedViewEntity\"\n          [viewMode]=\"state.viewMode\"\n          [filterText]=\"debouncedFilterText\"\n          [selectedRecordId]=\"state.selectedRecordId\"\n          [config]=\"viewerConfig\"\n          [gridState]=\"currentGridState\"\n          [timelineConfig]=\"currentTimelineConfig\"\n          (viewModeChange)=\"onViewModeChanged($event)\"\n          (filterTextChange)=\"onFilterTextChanged($event)\"\n          (recordSelected)=\"onViewerRecordSelected($event)\"\n          (recordOpened)=\"onViewerRecordOpened($event)\"\n          (dataLoaded)=\"onDataLoaded($event)\"\n          (filteredCountChanged)=\"onFilteredCountChanged($event)\"\n          (gridStateChanged)=\"onGridStateChanged($event)\">\n        </mj-entity-viewer>\n      }\n    </div>\n  </div>\n\n  <!-- Detail Panel (Right - Slide In) -->\n  @if (state.detailPanelOpen && selectedRecord) {\n    <div class=\"detail-panel\" [style.width.px]=\"state.detailPanelWidth\">\n      <mj-entity-record-detail-panel\n        [entity]=\"detailPanelEntity\"\n        [record]=\"selectedRecord\"\n        (close)=\"onDetailPanelClosed()\"\n        (openRecord)=\"onOpenRecord($event)\"\n        (navigateToRelated)=\"onNavigateToRelated($event)\"\n        (openRelatedRecord)=\"onOpenRelatedRecord($event)\"\n        (openForeignKeyRecord)=\"onOpenForeignKeyRecord($event)\">\n      </mj-entity-record-detail-panel>\n    </div>\n  }\n\n  <!-- View Configuration Panel -->\n  <mj-view-config-panel\n    [entity]=\"selectedEntity\"\n    [viewEntity]=\"selectedViewEntity\"\n    [isOpen]=\"state.viewConfigPanelOpen\"\n    [currentGridState]=\"currentGridState\"\n    [externalFilterState]=\"filterDialogState\"\n    (close)=\"onCloseViewConfigPanel()\"\n    (save)=\"onSaveView($event)\"\n    (delete)=\"onDeleteView()\"\n    (openFilterDialogRequest)=\"onOpenFilterDialogRequest($event)\">\n  </mj-view-config-panel>\n\n  <!-- Filter Dialog (rendered at dashboard level for full viewport width) -->\n  <mj-filter-dialog\n    [isOpen]=\"isFilterDialogOpen\"\n    [fields]=\"filterDialogFields\"\n    [filter]=\"filterDialogState\"\n    [disabled]=\"filterDialogDisabled\"\n    (close)=\"onCloseFilterDialog()\"\n    (apply)=\"onFilterApplied($event)\">\n  </mj-filter-dialog>\n</div>\n", styles: [".data-explorer-container {\n  display: flex;\n  height: 100%;\n  width: 100%;\n  background: #f5f7fa;\n  overflow: hidden;\n}\n\n.navigation-panel {\n  flex-shrink: 0;\n  height: 100%;\n  background: white;\n  border-right: 1px solid #e0e0e0;\n  transition: width 0.2s ease-in-out;\n  overflow: hidden;\n  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);\n}\n.navigation-panel.collapsed {\n  width: 48px;\n}\n\n.content-area {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 0;\n  overflow: hidden;\n  background: #f5f7fa;\n}\n\n/* Breadcrumb Bar */\n.breadcrumb-bar {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 24px;\n  background: white;\n  border-bottom: 1px solid #eee;\n  flex-shrink: 0;\n  font-size: 13px;\n  min-height: 40px;\n}\n\n.breadcrumb-item {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  color: #666;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.15s ease;\n  max-width: 200px;\n}\n\n.breadcrumb-item.clickable {\n  cursor: pointer;\n}\n\n.breadcrumb-item.clickable:hover {\n  background: #f0f0f0;\n  color: #1976d2;\n}\n\n.breadcrumb-item.current {\n  color: #1a1a1a;\n  font-weight: 500;\n  cursor: default;\n}\n\n.breadcrumb-icon {\n  font-size: 12px;\n  flex-shrink: 0;\n}\n\n.breadcrumb-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.breadcrumb-separator {\n  font-size: 10px;\n  color: #ccc;\n  flex-shrink: 0;\n}\n\n.content-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 24px;\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\n  flex-shrink: 0;\n  gap: 24px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);\n}\n\n.header-left {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-shrink: 0;\n  flex-wrap: wrap;\n}\n\n/* View Selector within header */\n.header-left ::ng-deep mj-view-selector {\n  margin-left: 8px;\n}\n\n.entity-icon {\n  font-size: 20px;\n  color: #1976d2;\n}\n\n.entity-title {\n  margin: 0;\n  font-size: 20px;\n  font-weight: 600;\n  color: #1a1a1a;\n}\n\n.record-count {\n  font-size: 13px;\n  color: #666;\n  font-weight: 500;\n}\n\n.header-center {\n  flex: 1;\n  max-width: 600px;\n}\n\n.smart-filter-container {\n  position: relative;\n  width: 100%;\n}\n\n.smart-filter-input {\n  width: 100%;\n  padding: 10px 40px 10px 16px;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  font-size: 14px;\n  background: #fafafa;\n  transition: all 0.15s ease;\n}\n.smart-filter-input:focus {\n  outline: none;\n  border-color: #1976d2;\n  background: white;\n  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);\n}\n.smart-filter-input::placeholder {\n  color: #999;\n}\n\n.clear-filter-btn {\n  position: absolute;\n  right: 8px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 28px;\n  height: 28px;\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: #757575;\n  transition: all 0.15s ease;\n}\n.clear-filter-btn:hover {\n  background: #e0e0e0;\n  color: #424242;\n}\n\n.header-right {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  flex-shrink: 0;\n}\n\n.view-mode-toggle {\n  display: flex;\n  background: #f0f0f0;\n  border-radius: 8px;\n  padding: 3px;\n}\n\n.toggle-btn {\n  width: 36px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #666;\n  transition: all 0.15s ease;\n}\n.toggle-btn:hover {\n  color: #333;\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 - Styled Dropdown */\n.date-field-selector-container {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n\n.date-field-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 999;\n  background: transparent;\n}\n\n.date-field-selector-wrapper {\n  position: relative;\n}\n\n.date-field-selector-button {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 12px;\n  background: var(--background-alt, #f5f5f5);\n  border: 1px solid var(--border-color, #e0e0e0);\n  border-radius: 6px;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--text-primary, #333);\n  transition: all 0.15s ease;\n  min-width: 120px;\n  max-width: 200px;\n}\n\n.date-field-selector-button:hover:not(:disabled) {\n  background: var(--background-hover, #e8e8e8);\n  border-color: var(--border-color-hover, #ccc);\n}\n\n.date-field-selector-button:disabled {\n  cursor: default;\n  opacity: 0.8;\n}\n\n.date-field-selector-button.open {\n  background: var(--background-active, #e0e0e0);\n  border-color: var(--primary-color, #007bff);\n}\n\n.date-field-icon {\n  color: var(--text-secondary, #666);\n  font-size: 12px;\n}\n\n.date-field-name {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: left;\n}\n\n.date-field-arrow {\n  color: var(--text-secondary, #666);\n  font-size: 10px;\n  transition: transform 0.2s ease;\n}\n\n.date-field-arrow.rotated {\n  transform: rotate(180deg);\n}\n\n.date-field-dropdown-panel {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  min-width: 180px;\n  max-width: 280px;\n  max-height: 300px;\n  overflow-y: auto;\n  background: var(--background-panel, #fff);\n  border: 1px solid var(--border-color, #e0e0e0);\n  border-radius: 8px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n  z-index: 1000;\n}\n\n.date-field-dropdown-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 14px;\n  cursor: pointer;\n  transition: background 0.1s ease;\n  font-size: 13px;\n}\n\n.date-field-dropdown-item:hover {\n  background: var(--background-hover, #f5f5f5);\n}\n\n.date-field-dropdown-item.selected {\n  background: var(--primary-light, #e6f0ff);\n}\n\n.date-field-dropdown-item.selected:hover {\n  background: var(--primary-light-hover, #d6e4f9);\n}\n\n.date-field-dropdown-item .item-icon {\n  color: var(--text-secondary, #666);\n  font-size: 13px;\n  width: 16px;\n  text-align: center;\n}\n\n.date-field-dropdown-item .item-name {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.date-field-dropdown-item .selected-check {\n  color: var(--primary-color, #007bff);\n  font-size: 12px;\n}\n\n/* Timeline Orientation Toggle */\n.timeline-orientation-toggle {\n  display: flex;\n  background: #f0f0f0;\n  border-radius: 8px;\n  padding: 3px;\n}\n\n.content-body {\n  flex: 1;\n  overflow: hidden;\n  padding: 20px 24px;\n  display: flex;\n  flex-direction: column;\n}\n\n.loading-container,\n.loading-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  gap: 16px;\n  background: white;\n  border-radius: 8px;\n}\n\n.loading-spinner {\n  font-size: 32px;\n  color: #1976d2;\n}\n\n.loading-message {\n  margin: 0;\n  font-size: 14px;\n  color: #666;\n}\n\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  text-align: center;\n  color: #757575;\n  background: white;\n  border-radius: 8px;\n  padding: 40px;\n}\n\n.empty-icon {\n  font-size: 64px;\n  color: #e0e0e0;\n  margin-bottom: 24px;\n}\n\n.empty-state h3 {\n  margin: 0 0 8px 0;\n  font-size: 20px;\n  font-weight: 600;\n  color: #333;\n}\n\n.empty-state p {\n  margin: 0;\n  font-size: 14px;\n  max-width: 400px;\n  color: #666;\n}\n\n/* Entity Home View - Card Grid */\n.entity-home-view {\n  flex: 1;\n  overflow: auto;\n  padding: 4px;\n}\n\n.entity-card-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n  gap: 16px;\n  padding: 0;\n}\n\n.entity-card {\n  display: flex;\n  align-items: flex-start;\n  gap: 16px;\n  padding: 20px;\n  background: white;\n  border-radius: 10px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  border: 1px solid #e8e8e8;\n}\n\n.entity-card:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);\n  border-color: #1976d2;\n}\n\n.entity-card:active {\n  transform: translateY(0);\n}\n\n.entity-card-icon {\n  width: 48px;\n  height: 48px;\n  border-radius: 10px;\n  background: linear-gradient(135deg, #e3f2fd, #bbdefb);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.entity-card-icon i {\n  font-size: 20px;\n  color: #1976d2;\n}\n\n.entity-card:hover .entity-card-icon {\n  background: linear-gradient(135deg, #1976d2, #1565c0);\n}\n\n.entity-card:hover .entity-card-icon i {\n  color: white;\n}\n\n.entity-card-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.entity-card-title {\n  margin: 0 0 6px 0;\n  font-size: 15px;\n  font-weight: 600;\n  color: #1a1a1a;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.entity-card-description {\n  margin: 0;\n  font-size: 13px;\n  color: #666;\n  line-height: 1.4;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.detail-panel {\n  flex-shrink: 0;\n  height: 100%;\n  background: white;\n  border-left: 1px solid #e0e0e0;\n  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);\n  overflow: hidden;\n  animation: slideIn 0.2s ease-out;\n}\n\n@keyframes slideIn {\n  from {\n    transform: translateX(100%);\n    opacity: 0;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n:host ::ng-deep mj-explorer-grid-view,\n:host ::ng-deep mj-explorer-cards-view {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n\n/* ============================================\n   HOME SCREEN STYLES\n   ============================================ */\n\n/* Home-level header adjustments */\n.content-header.home-header {\n  border-bottom: none;\n  background: transparent;\n  box-shadow: none;\n  padding: 24px 24px 16px;\n}\n\n.content-body.home-content {\n  padding-top: 0;\n}\n\n/* Smart filter with search icon */\n.filter-icon {\n  position: absolute;\n  left: 14px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: #999;\n  font-size: 14px;\n  pointer-events: none;\n}\n\n.smart-filter-container .smart-filter-input {\n  padding-left: 40px;\n}\n\n/* ============================================\n   HOME SECTIONS\n   ============================================ */\n\n.home-section {\n  margin-bottom: 28px;\n}\n\n.section-header {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 14px;\n  padding-left: 4px;\n}\n\n.section-icon {\n  font-size: 14px;\n  color: #1976d2;\n  width: 20px;\n  text-align: center;\n}\n\n.section-title {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #333;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.section-count {\n  font-size: 12px;\n  color: #888;\n  font-weight: 500;\n  margin-left: 8px;\n}\n\n/* ============================================\n   TWO-COLUMN LAYOUT (Entities left, Records right)\n   ============================================ */\n\n.home-two-column-layout {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 24px;\n  margin-bottom: 28px;\n}\n\n/* When only one column has content, let it take full width */\n.home-two-column-layout.single-column {\n  grid-template-columns: 1fr;\n}\n\n.home-column {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n\n/* Section header with inline toggle */\n.section-header-with-toggle {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 14px;\n  padding-left: 4px;\n}\n\n.section-header-left {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n/* Inline Common/All toggle (compact) */\n.inline-toggle {\n  display: flex;\n  background: #f0f0f0;\n  border-radius: 6px;\n  padding: 2px;\n}\n\n.inline-toggle .toggle-btn {\n  width: auto;\n  height: 26px;\n  padding: 0 10px;\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: #666;\n  font-size: 11px;\n  font-weight: 500;\n  transition: all 0.15s ease;\n}\n\n.inline-toggle .toggle-btn:hover {\n  color: #333;\n}\n\n.inline-toggle .toggle-btn.active {\n  background: white;\n  color: #1976d2;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n/* ============================================\n   COMPACT ENTITY CARDS (Recent/Favorites rows)\n   ============================================ */\n\n.entity-card-row {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n  padding: 0;\n}\n\n.entity-card.compact {\n  flex: 0 0 auto;\n  width: auto;\n  min-width: 180px;\n  max-width: 280px;\n  padding: 12px 16px;\n  gap: 12px;\n}\n\n.entity-card.compact .entity-card-icon {\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n}\n\n.entity-card.compact .entity-card-icon i {\n  font-size: 16px;\n}\n\n.entity-card.compact .entity-card-title {\n  margin: 0;\n  font-size: 14px;\n}\n\n.entity-card.compact .entity-card-content {\n  display: flex;\n  align-items: center;\n}\n\n/* ============================================\n   FAVORITE BUTTON\n   ============================================ */\n\n.favorite-btn {\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\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: #ccc;\n  transition: all 0.15s ease;\n  margin-left: auto;\n}\n\n.favorite-btn:hover {\n  background: rgba(255, 193, 7, 0.1);\n  color: #ffc107;\n  transform: scale(1.1);\n}\n\n.favorite-btn.favorited {\n  color: #ffc107;\n}\n\n.favorite-btn.favorited:hover {\n  background: rgba(255, 193, 7, 0.15);\n  color: #ffb300;\n}\n\n.entity-card .favorite-btn {\n  opacity: 0;\n  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;\n}\n\n.entity-card:hover .favorite-btn {\n  opacity: 1;\n}\n\n.entity-card .favorite-btn.favorited {\n  opacity: 1;\n}\n\n/* ============================================\n   RECENT RECORDS LIST\n   ============================================ */\n\n.recent-records-list {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  background: white;\n  border-radius: 10px;\n  padding: 8px;\n  border: 1px solid #e8e8e8;\n}\n\n.recent-record-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.recent-record-item:hover {\n  background: #f5f7fa;\n}\n\n.recent-record-icon {\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.recent-record-icon i {\n  font-size: 14px;\n  color: #4caf50;\n}\n\n.recent-record-content {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.recent-record-name {\n  font-size: 14px;\n  font-weight: 500;\n  color: #1a1a1a;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.recent-record-entity {\n  font-size: 12px;\n  color: #888;\n}\n\n.recent-record-time {\n  font-size: 11px;\n  color: #aaa;\n  flex-shrink: 0;\n}\n\n/* ============================================\n   ENTITY LIST (for Recent/Favorite Entities)\n   ============================================ */\n\n.entity-list {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  background: white;\n  border-radius: 10px;\n  padding: 8px;\n  border: 1px solid #e8e8e8;\n}\n\n.entity-list-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.entity-list-item:hover {\n  background: #f5f7fa;\n}\n\n.entity-list-icon {\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  background: linear-gradient(135deg, #e3f2fd, #bbdefb);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.entity-list-icon i {\n  font-size: 14px;\n  color: #1976d2;\n}\n\n.entity-list-content {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.entity-list-name {\n  font-size: 14px;\n  font-weight: 500;\n  color: #1a1a1a;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.entity-list-item .favorite-btn {\n  opacity: 0;\n  transition: opacity 0.15s ease;\n}\n\n.entity-list-item:hover .favorite-btn {\n  opacity: 1;\n}\n\n.entity-list-item .favorite-btn.favorited {\n  opacity: 1;\n}\n\n/* ============================================\n   ENTITY FILTER STRIP (for Recent Records)\n   ============================================ */\n\n.entity-filter-strip {\n  display: flex;\n  gap: 4px;\n  margin-left: auto;\n  background: #f0f0f0;\n  border-radius: 6px;\n  padding: 3px;\n}\n\n.entity-filter-btn {\n  width: 28px;\n  height: 26px;\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: #666;\n  font-size: 12px;\n  transition: all 0.15s ease;\n}\n\n.entity-filter-btn:hover {\n  color: #333;\n  background: rgba(0, 0, 0, 0.05);\n}\n\n.entity-filter-btn.active {\n  background: white;\n  color: #1976d2;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n/* ============================================\n   COMMON/ALL TOGGLE WITH LABELS\n   ============================================ */\n\n.view-mode-toggle .toggle-btn {\n  width: auto;\n  padding: 0 12px;\n  gap: 6px;\n}\n\n.toggle-label {\n  font-size: 12px;\n  font-weight: 500;\n}\n\n/* ============================================\n   EMPTY STATE VARIANTS\n   ============================================ */\n\n.empty-state.small {\n  height: auto;\n  padding: 32px;\n  background: #fafafa;\n}\n\n.empty-state.small .empty-icon {\n  font-size: 40px;\n  margin-bottom: 16px;\n}\n\n.empty-state.small h3 {\n  font-size: 16px;\n}\n\n.empty-state.small p {\n  font-size: 13px;\n}\n\n/* ============================================\n   RESPONSIVE STYLES\n   ============================================ */\n\n@media (max-width: 1200px) {\n  .entity-card-grid {\n    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n  }\n}\n\n@media (max-width: 900px) {\n  .content-header {\n    flex-wrap: wrap;\n    gap: 12px;\n  }\n\n  .header-center {\n    order: 3;\n    flex-basis: 100%;\n    max-width: 100%;\n  }\n\n  .entity-card.compact {\n    min-width: 160px;\n  }\n\n  /* Stack two-column layout on smaller screens */\n  .home-two-column-layout {\n    grid-template-columns: 1fr;\n    gap: 20px;\n  }\n}\n\n@media (max-width: 600px) {\n  .data-explorer-container {\n    flex-direction: column;\n  }\n\n  .navigation-panel {\n    display: none;\n  }\n\n  .content-header {\n    padding: 12px 16px;\n  }\n\n  .content-body {\n    padding: 12px 16px;\n  }\n\n  .entity-card-grid {\n    grid-template-columns: 1fr;\n    gap: 12px;\n  }\n\n  .entity-card {\n    padding: 16px;\n  }\n\n  .entity-card.compact {\n    min-width: 100%;\n    max-width: 100%;\n  }\n\n  .entity-card-row {\n    flex-direction: column;\n  }\n\n  .view-mode-toggle {\n    display: none;\n  }\n\n  .section-title {\n    font-size: 13px;\n  }\n\n  .home-section {\n    margin-bottom: 20px;\n  }\n}\n"] }]
+                ], template: "<div class=\"data-explorer-container\">\n  <!-- Navigation Panel (Left) - Hidden at home level, animated -->\n  @if (!isAtHomeLevel) {\n    <div\n      class=\"navigation-panel\"\n      [class.collapsed]=\"state.navigationPanelCollapsed\"\n      [style.width.px]=\"state.navigationPanelCollapsed ? 48 : state.navigationPanelWidth\"\n      [@slideInLeft]>\n\n      <mj-explorer-navigation-panel\n        [entities]=\"entities\"\n        [selectedEntityName]=\"state.selectedEntityName\"\n        [favorites]=\"state.favorites\"\n        [recentItems]=\"state.recentItems\"\n        [collapsed]=\"state.navigationPanelCollapsed\"\n        [allowedEntityNames]=\"allowedEntityNames\"\n        [favoritesSectionExpanded]=\"state.favoritesSectionExpanded\"\n        [recentSectionExpanded]=\"state.recentSectionExpanded\"\n        [entitiesSectionExpanded]=\"state.entitiesSectionExpanded\"\n        [viewsSectionExpanded]=\"state.viewsSectionExpanded\"\n        (entitySelected)=\"onEntitySelected($event)\"\n        (toggleCollapse)=\"toggleNavigationPanel()\"\n        (sectionToggled)=\"stateService.toggleSection($event)\"\n        (openRecord)=\"onOpenRecordFromNav($event)\"\n        (selectRecord)=\"onSelectRecordFromNav($event)\"\n        (expandAndFocus)=\"onExpandAndFocus($event)\">\n      </mj-explorer-navigation-panel>\n    </div>\n  }\n\n  <!-- Main Content Area -->\n  <div class=\"content-area\">\n    <!-- Breadcrumb Bar - Hidden at home level -->\n    @if (!isAtHomeLevel && breadcrumbs.length > 0) {\n      <div class=\"breadcrumb-bar\">\n        @for (crumb of breadcrumbs; track crumb.label; let i = $index; let last = $last) {\n          <span\n            class=\"breadcrumb-item\"\n            [class.clickable]=\"!last\"\n            [class.current]=\"last\"\n            (click)=\"onBreadcrumbClick(crumb, i)\"\n            [title]=\"crumb.label\">\n            @if (crumb.icon) {\n              <i [class]=\"crumb.icon\" class=\"breadcrumb-icon\"></i>\n            }\n            <span class=\"breadcrumb-label\">{{ crumb.label }}</span>\n          </span>\n          @if (!last) {\n            <i class=\"fa-solid fa-chevron-right breadcrumb-separator\"></i>\n          }\n        }\n      </div>\n    }\n\n    <!-- Header -->\n    <div class=\"content-header\" [class.home-header]=\"isAtHomeLevel\">\n      <div class=\"header-left\">\n        @if (selectedEntity) {\n          <i [class]=\"getEntityIcon(selectedEntity)\" class=\"entity-icon\"></i>\n          <h2 class=\"entity-title\">{{ selectedEntity.Name }}</h2>\n          @if (debouncedFilterText && filteredRecordCount !== totalRecordCount) {\n            <span class=\"record-count\">{{ filteredRecordCount | number }} of {{ totalRecordCount | number }} records</span>\n          } @else {\n            <span class=\"record-count\">{{ totalRecordCount | number }} records</span>\n          }\n\n          <!-- View Selector -->\n          <mj-view-selector\n            [entity]=\"selectedEntity\"\n            [selectedViewId]=\"state.selectedViewId\"\n            [viewModified]=\"state.viewModified\"\n            (viewSelected)=\"onViewSelected($event)\"\n            (saveViewRequested)=\"onSaveViewRequested($event)\"\n            (manageViewsRequested)=\"onManageViewsRequested()\"\n            (openInTabRequested)=\"onOpenInTabRequested($event)\"\n            (configureViewRequested)=\"onConfigureViewRequested()\"\n            (createNewRecordRequested)=\"onCreateNewRecord()\"\n            (exportRequested)=\"onExport()\">\n          </mj-view-selector>\n        } @else {\n          @if (displayIcon) {\n            <i [class]=\"displayIcon\" class=\"entity-icon\"></i>\n          }\n          <h2 class=\"entity-title\">{{ displayTitle }}</h2>\n          <span class=\"record-count\">{{ entities.length }} entities available</span>\n        }\n      </div>\n\n      <div class=\"header-center\">\n        @if (selectedEntity) {\n          <div class=\"smart-filter-container\">\n            <i class=\"fa-solid fa-search filter-icon\"></i>\n            <input\n              #filterInput\n              type=\"text\"\n              class=\"smart-filter-input\"\n              placeholder=\"Filter records... (press / to focus)\"\n              [ngModel]=\"state.smartFilterPrompt\"\n              (ngModelChange)=\"onSmartFilterChanged($event)\"\n            />\n            @if (state.smartFilterPrompt) {\n              <button class=\"clear-filter-btn\" (click)=\"onSmartFilterChanged('')\">\n                <i class=\"fa-solid fa-times\"></i>\n              </button>\n            }\n          </div>\n        } @else {\n          <!-- Entity filter for home screen -->\n          <div class=\"smart-filter-container\">\n            <i class=\"fa-solid fa-search filter-icon\"></i>\n            <input\n              #filterInput\n              type=\"text\"\n              class=\"smart-filter-input\"\n              placeholder=\"Filter entities... (press / to focus)\"\n              [(ngModel)]=\"entityFilterText\"\n            />\n            @if (entityFilterText) {\n              <button class=\"clear-filter-btn\" (click)=\"entityFilterText = ''\">\n                <i class=\"fa-solid fa-times\"></i>\n              </button>\n            }\n          </div>\n        }\n      </div>\n\n      <div class=\"header-right\">\n        @if (selectedEntity) {\n          <!-- View Mode Toggle -->\n          <div class=\"view-mode-toggle\">\n            <button\n              class=\"toggle-btn\"\n              [class.active]=\"state.viewMode === 'grid'\"\n              (click)=\"onViewModeChanged('grid')\"\n              title=\"Grid View\">\n              <i class=\"fa-solid fa-list\"></i>\n            </button>\n            <button\n              class=\"toggle-btn\"\n              [class.active]=\"state.viewMode === 'cards'\"\n              (click)=\"onViewModeChanged('cards')\"\n              title=\"Cards View\">\n              <i class=\"fa-solid fa-grip\"></i>\n            </button>\n            @if (entityHasDateFields) {\n              <button\n                class=\"toggle-btn\"\n                [class.active]=\"state.viewMode === 'timeline'\"\n                (click)=\"onViewModeChanged('timeline')\"\n                title=\"Timeline View\">\n                <i class=\"fa-solid fa-timeline\"></i>\n              </button>\n            }\n          </div>\n\n          <!-- Timeline Controls (only shown when timeline view is active) -->\n          @if (state.viewMode === 'timeline' && entityHasDateFields) {\n            <!-- Date Field Selector -->\n            <div class=\"date-field-selector-container\">\n              <!-- Backdrop for closing dropdown -->\n              @if (isDateFieldDropdownOpen) {\n                <div class=\"date-field-backdrop\" (click)=\"closeDateFieldDropdown()\"></div>\n              }\n\n              <div class=\"date-field-selector-wrapper\">\n                <button\n                  class=\"date-field-selector-button\"\n                  [class.open]=\"isDateFieldDropdownOpen\"\n                  [disabled]=\"availableDateFields.length <= 1\"\n                  (click)=\"toggleDateFieldDropdown()\">\n                  <i class=\"fa-solid fa-calendar-days date-field-icon\"></i>\n                  <span class=\"date-field-name\">{{ effectiveTimelineDateFieldDisplayName }}</span>\n                  @if (availableDateFields.length > 1) {\n                    <i class=\"fa-solid fa-chevron-down date-field-arrow\" [class.rotated]=\"isDateFieldDropdownOpen\"></i>\n                  }\n                </button>\n\n                @if (isDateFieldDropdownOpen && availableDateFields.length > 1) {\n                  <div class=\"date-field-dropdown-panel\">\n                    @for (field of availableDateFields; track field.name) {\n                      <div\n                        class=\"date-field-dropdown-item\"\n                        [class.selected]=\"field.name === effectiveTimelineDateField\"\n                        (click)=\"setTimelineDateField(field.name)\">\n                        <i class=\"fa-regular fa-calendar item-icon\"></i>\n                        <span class=\"item-name\">{{ field.displayName }}</span>\n                        @if (field.name === effectiveTimelineDateField) {\n                          <i class=\"fa-solid fa-check selected-check\"></i>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            </div>\n\n            <!-- Orientation Toggle -->\n            <div class=\"timeline-orientation-toggle\">\n              <button\n                class=\"toggle-btn\"\n                (click)=\"toggleTimelineOrientation()\"\n                [title]=\"state.timelineOrientation === 'vertical' ? 'Switch to Horizontal' : 'Switch to Vertical'\">\n                <i [class]=\"state.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]=\"state.timelineSortOrder === 'desc' ? 'Showing Newest First (click for Oldest First)' : 'Showing Oldest First (click for Newest First)'\">\n                <i [class]=\"state.timelineSortOrder === 'desc' ? 'fa-solid fa-arrow-down-wide-short' : 'fa-solid fa-arrow-up-wide-short'\"></i>\n              </button>\n            </div>\n          }\n        }\n        <!-- Common/All toggle moved to inline with All Entities section header -->\n      </div>\n    </div>\n\n    <!-- Content Body - Using mj-entity-viewer composite -->\n    <div class=\"content-body\" [class.home-content]=\"isAtHomeLevel\">\n      @if (!selectedEntity) {\n        <!-- Entity Home View - Two-Column Layout -->\n        <div class=\"entity-home-view\">\n          @if (isLoadingEntities) {\n            <div class=\"loading-state\">\n              <mj-loading text=\"Loading entities...\" size=\"medium\"></mj-loading>\n            </div>\n          } @else {\n            <!-- Two-Column Layout: Records (left) | Entities (right) -->\n            @if (hasTopSectionContent) {\n              <div class=\"home-two-column-layout\" [class.single-column]=\"!hasRecordsColumnContent || !hasEntitiesColumnContent\">\n                <!-- Left Column: Recent & Favorite Records (most actionable) -->\n                @if (hasRecordsColumnContent) {\n                <div class=\"home-column\">\n                  <!-- Recent Records Section -->\n                  @if (recentRecords.length > 0) {\n                    <div class=\"home-section\">\n                      <div class=\"section-header\">\n                        <i class=\"fa-solid fa-history section-icon\"></i>\n                        <h3 class=\"section-title\">Recent Records</h3>\n                        <!-- Entity filter strip - only show with 2+ entities -->\n                        @if (showRecentRecordsEntityFilter) {\n                          <div class=\"entity-filter-strip\">\n                            <button\n                              class=\"entity-filter-btn\"\n                              [class.active]=\"recentRecordsEntityFilter === null\"\n                              (click)=\"setRecentRecordsEntityFilter(null)\"\n                              title=\"Show all entities\">\n                              <i class=\"fa-solid fa-layer-group\"></i>\n                            </button>\n                            @for (entity of uniqueRecentRecordEntities; track entity.entityId) {\n                              <button\n                                class=\"entity-filter-btn\"\n                                [class.active]=\"recentRecordsEntityFilter === entity.entityId\"\n                                (click)=\"setRecentRecordsEntityFilter(entity.entityId)\"\n                                [title]=\"entity.entityName\">\n                                <i [class]=\"entity.icon\"></i>\n                              </button>\n                            }\n                          </div>\n                        }\n                      </div>\n                      <div class=\"recent-records-list\">\n                        @for (record of filteredRecentRecords; track record.entityId + '|' + record.recordId) {\n                          <div\n                            class=\"recent-record-item\"\n                            (click)=\"onRecentRecordClick(record)\"\n                            [title]=\"record.entityName + ' - ' + record.recordId\">\n                            <div class=\"recent-record-icon\">\n                              <i [class]=\"getEntityIconById(record.entityId)\"></i>\n                            </div>\n                            <div class=\"recent-record-content\">\n                              <span class=\"recent-record-name\">{{ record.recordName || record.recordId }}</span>\n                              <span class=\"recent-record-entity\">{{ record.entityName }}</span>\n                            </div>\n                            <span class=\"recent-record-time\">{{ formatRelativeTime(record.latestAt) }}</span>\n                          </div>\n                        }\n                      </div>\n                    </div>\n                  }\n\n                  <!-- Favorite Records Section -->\n                  @if (favoriteRecords.length > 0) {\n                    <div class=\"home-section\">\n                      <div class=\"section-header\">\n                        <i class=\"fa-solid fa-star section-icon\"></i>\n                        <h3 class=\"section-title\">Favorite Records</h3>\n                      </div>\n                      <div class=\"recent-records-list\">\n                        @for (record of favoriteRecords; track record.userFavoriteId) {\n                          <div\n                            class=\"recent-record-item\"\n                            (click)=\"onFavoriteRecordClick(record)\"\n                            [title]=\"record.entityName + ' - ' + record.recordId\">\n                            <div class=\"recent-record-icon\">\n                              <i [class]=\"getEntityIconById(record.entityId)\"></i>\n                            </div>\n                            <div class=\"recent-record-content\">\n                              <span class=\"recent-record-name\">{{ record.recordName || record.recordId }}</span>\n                              <span class=\"recent-record-entity\">{{ record.entityName }}</span>\n                            </div>\n                          </div>\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n                }\n\n                <!-- Right Column: Recent & Favorite Entities -->\n                @if (hasEntitiesColumnContent) {\n                <div class=\"home-column\">\n                  <!-- Recent Entities Section (list format) -->\n                  @if (recentEntities.length > 0) {\n                    <div class=\"home-section\">\n                      <div class=\"section-header\">\n                        <i class=\"fa-solid fa-clock section-icon\"></i>\n                        <h3 class=\"section-title\">Recent Entities</h3>\n                      </div>\n                      <div class=\"entity-list\">\n                        @for (entity of recentEntities; track entity.ID) {\n                          <div\n                            class=\"entity-list-item\"\n                            (click)=\"onEntitySelected(entity)\"\n                            [title]=\"entity.Description || entity.Name\">\n                            <div class=\"entity-list-icon\">\n                              <i [class]=\"getEntityIcon(entity)\"></i>\n                            </div>\n                            <div class=\"entity-list-content\">\n                              <span class=\"entity-list-name\">{{ entity.Name }}</span>\n                            </div>\n                            <button\n                              class=\"favorite-btn\"\n                              [class.favorited]=\"isEntityFavorited(entity)\"\n                              (click)=\"toggleEntityFavorite(entity, $event)\"\n                              [title]=\"isEntityFavorited(entity) ? 'Remove from favorites' : 'Add to favorites'\">\n                              <i [class]=\"isEntityFavorited(entity) ? 'fa-solid fa-star' : 'fa-regular fa-star'\"></i>\n                            </button>\n                          </div>\n                        }\n                      </div>\n                    </div>\n                  }\n\n                  <!-- Favorite Entities Section (list format) -->\n                  @if (favoriteEntities.length > 0) {\n                    <div class=\"home-section\">\n                      <div class=\"section-header\">\n                        <i class=\"fa-solid fa-star section-icon\"></i>\n                        <h3 class=\"section-title\">Favorite Entities</h3>\n                      </div>\n                      <div class=\"entity-list\">\n                        @for (entity of favoriteEntities; track entity.ID) {\n                          <div\n                            class=\"entity-list-item\"\n                            (click)=\"onEntitySelected(entity)\"\n                            [title]=\"entity.Description || entity.Name\">\n                            <div class=\"entity-list-icon\">\n                              <i [class]=\"getEntityIcon(entity)\"></i>\n                            </div>\n                            <div class=\"entity-list-content\">\n                              <span class=\"entity-list-name\">{{ entity.Name }}</span>\n                            </div>\n                            <button\n                              class=\"favorite-btn favorited\"\n                              (click)=\"toggleEntityFavorite(entity, $event)\"\n                              title=\"Remove from favorites\">\n                              <i class=\"fa-solid fa-star\"></i>\n                            </button>\n                          </div>\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n                }\n              </div>\n            }\n\n            <!-- All/Common Entities Section - Full Width -->\n            <div class=\"home-section\">\n              <div class=\"section-header-with-toggle\">\n                <div class=\"section-header-left\">\n                  <i class=\"fa-solid fa-database section-icon\"></i>\n                  <h3 class=\"section-title\">\n                    @if (state.showAllEntities || !showCommonAllToggle) {\n                      All Entities\n                    } @else {\n                      Common Entities\n                    }\n                  </h3>\n                  @if (entityFilterText && filteredEntities.length !== entities.length) {\n                    <span class=\"section-count\">{{ filteredEntities.length }} matching</span>\n                  }\n                </div>\n                @if (showCommonAllToggle) {\n                  <div class=\"inline-toggle\">\n                    <button\n                      class=\"toggle-btn\"\n                      [class.active]=\"!state.showAllEntities\"\n                      (click)=\"toggleShowAllEntities()\"\n                      title=\"Show common entities ({{ commonEntitiesCount }})\">\n                      Common\n                    </button>\n                    <button\n                      class=\"toggle-btn\"\n                      [class.active]=\"state.showAllEntities\"\n                      (click)=\"toggleShowAllEntities()\"\n                      title=\"Show all entities ({{ allEntitiesCount }})\">\n                      All\n                    </button>\n                  </div>\n                }\n              </div>\n              <div class=\"entity-card-grid\">\n                @for (entity of filteredEntities; track entity.ID) {\n                  <div\n                    class=\"entity-card\"\n                    (click)=\"onEntitySelected(entity)\"\n                    [title]=\"entity.Description || entity.Name\">\n                    <div class=\"entity-card-icon\">\n                      <i [class]=\"getEntityIcon(entity)\"></i>\n                    </div>\n                    <div class=\"entity-card-content\">\n                      <h4 class=\"entity-card-title\">{{ entity.Name }}</h4>\n                      @if (entity.Description) {\n                        <p class=\"entity-card-description\">{{ entity.Description }}</p>\n                      }\n                    </div>\n                    <button\n                      class=\"favorite-btn\"\n                      [class.favorited]=\"isEntityFavorited(entity)\"\n                      (click)=\"toggleEntityFavorite(entity, $event)\"\n                      [title]=\"isEntityFavorited(entity) ? 'Remove from favorites' : 'Add to favorites'\">\n                      <i [class]=\"isEntityFavorited(entity) ? 'fa-solid fa-star' : 'fa-regular fa-star'\"></i>\n                    </button>\n                  </div>\n                }\n              </div>\n              @if (filteredEntities.length === 0 && entities.length > 0) {\n                <div class=\"empty-state small\">\n                  <i class=\"fa-solid fa-search empty-icon\"></i>\n                  <h3>No Matching Entities</h3>\n                  <p>No entities match \"{{ entityFilterText }}\"</p>\n                </div>\n              }\n              @if (entities.length === 0) {\n                <div class=\"empty-state\">\n                  <i class=\"fa-solid fa-database empty-icon\"></i>\n                  <h3>No Entities Available</h3>\n                  <p>There are no entities configured for this application.</p>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      } @else {\n        <mj-entity-viewer\n          [entity]=\"selectedEntity\"\n          [viewEntity]=\"selectedViewEntity\"\n          [viewMode]=\"state.viewMode\"\n          [filterText]=\"debouncedFilterText\"\n          [selectedRecordId]=\"state.selectedRecordId\"\n          [config]=\"viewerConfig\"\n          [gridState]=\"currentGridState\"\n          [timelineConfig]=\"currentTimelineConfig\"\n          (viewModeChange)=\"onViewModeChanged($event)\"\n          (filterTextChange)=\"onFilterTextChanged($event)\"\n          (recordSelected)=\"onViewerRecordSelected($event)\"\n          (recordOpened)=\"onViewerRecordOpened($event)\"\n          (dataLoaded)=\"onDataLoaded($event)\"\n          (filteredCountChanged)=\"onFilteredCountChanged($event)\"\n          (gridStateChanged)=\"onGridStateChanged($event)\">\n        </mj-entity-viewer>\n      }\n    </div>\n  </div>\n\n  <!-- Detail Panel (Right - Slide In) -->\n  @if (state.detailPanelOpen && selectedRecord) {\n    <div class=\"detail-panel\" [style.width.px]=\"state.detailPanelWidth\">\n      <mj-entity-record-detail-panel\n        [entity]=\"detailPanelEntity\"\n        [record]=\"selectedRecord\"\n        (close)=\"onDetailPanelClosed()\"\n        (openRecord)=\"onOpenRecord($event)\"\n        (navigateToRelated)=\"onNavigateToRelated($event)\"\n        (openRelatedRecord)=\"onOpenRelatedRecord($event)\"\n        (openForeignKeyRecord)=\"onOpenForeignKeyRecord($event)\">\n      </mj-entity-record-detail-panel>\n    </div>\n  }\n\n  <!-- View Configuration Panel -->\n  <mj-view-config-panel\n    [entity]=\"selectedEntity\"\n    [viewEntity]=\"selectedViewEntity\"\n    [isOpen]=\"state.viewConfigPanelOpen\"\n    [currentGridState]=\"currentGridState\"\n    [externalFilterState]=\"filterDialogState\"\n    [isSaving]=\"isSavingView\"\n    (close)=\"onCloseViewConfigPanel()\"\n    (save)=\"onSaveView($event)\"\n    (delete)=\"onDeleteView()\"\n    (openFilterDialogRequest)=\"onOpenFilterDialogRequest($event)\">\n  </mj-view-config-panel>\n\n  <!-- Filter Dialog (rendered at dashboard level for full viewport width) -->\n  <mj-filter-dialog\n    [isOpen]=\"isFilterDialogOpen\"\n    [fields]=\"filterDialogFields\"\n    [filter]=\"filterDialogState\"\n    [disabled]=\"filterDialogDisabled\"\n    (close)=\"onCloseFilterDialog()\"\n    (apply)=\"onFilterApplied($event)\">\n  </mj-filter-dialog>\n\n  <!-- Excel Export Component (hidden, used for export functionality) -->\n  <kendo-excelexport #excelExport [data]=\"exportData\" [fileName]=\"exportFileName\">\n    @for (col of exportColumns; track col.Name) {\n      <kendo-excelexport-column [field]=\"col.Name\" [title]=\"col.DisplayName\"></kendo-excelexport-column>\n    }\n  </kendo-excelexport>\n</div>\n", styles: [".data-explorer-container {\n  display: flex;\n  height: 100%;\n  width: 100%;\n  background: #f5f7fa;\n  overflow: hidden;\n}\n\n.navigation-panel {\n  flex-shrink: 0;\n  height: 100%;\n  background: white;\n  border-right: 1px solid #e0e0e0;\n  transition: width 0.2s ease-in-out;\n  overflow: hidden;\n  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);\n}\n.navigation-panel.collapsed {\n  width: 48px;\n}\n\n.content-area {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 0;\n  overflow: hidden;\n  background: #f5f7fa;\n}\n\n/* Breadcrumb Bar */\n.breadcrumb-bar {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 24px;\n  background: white;\n  border-bottom: 1px solid #eee;\n  flex-shrink: 0;\n  font-size: 13px;\n  min-height: 40px;\n}\n\n.breadcrumb-item {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  color: #666;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.15s ease;\n  max-width: 200px;\n}\n\n.breadcrumb-item.clickable {\n  cursor: pointer;\n}\n\n.breadcrumb-item.clickable:hover {\n  background: #f0f0f0;\n  color: #1976d2;\n}\n\n.breadcrumb-item.current {\n  color: #1a1a1a;\n  font-weight: 500;\n  cursor: default;\n}\n\n.breadcrumb-icon {\n  font-size: 12px;\n  flex-shrink: 0;\n}\n\n.breadcrumb-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.breadcrumb-separator {\n  font-size: 10px;\n  color: #ccc;\n  flex-shrink: 0;\n}\n\n.content-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 24px;\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\n  flex-shrink: 0;\n  gap: 24px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);\n}\n\n.header-left {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-shrink: 0;\n  flex-wrap: wrap;\n}\n\n/* View Selector within header */\n.header-left ::ng-deep mj-view-selector {\n  margin-left: 8px;\n}\n\n.entity-icon {\n  font-size: 20px;\n  color: #1976d2;\n}\n\n.entity-title {\n  margin: 0;\n  font-size: 20px;\n  font-weight: 600;\n  color: #1a1a1a;\n}\n\n.record-count {\n  font-size: 13px;\n  color: #666;\n  font-weight: 500;\n}\n\n.header-center {\n  flex: 1;\n  max-width: 600px;\n}\n\n.smart-filter-container {\n  position: relative;\n  width: 100%;\n}\n\n.smart-filter-input {\n  width: 100%;\n  padding: 10px 40px 10px 16px;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  font-size: 14px;\n  background: #fafafa;\n  transition: all 0.15s ease;\n}\n.smart-filter-input:focus {\n  outline: none;\n  border-color: #1976d2;\n  background: white;\n  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);\n}\n.smart-filter-input::placeholder {\n  color: #999;\n}\n\n.clear-filter-btn {\n  position: absolute;\n  right: 8px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 28px;\n  height: 28px;\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: #757575;\n  transition: all 0.15s ease;\n}\n.clear-filter-btn:hover {\n  background: #e0e0e0;\n  color: #424242;\n}\n\n.header-right {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  flex-shrink: 0;\n}\n\n.view-mode-toggle {\n  display: flex;\n  background: #f0f0f0;\n  border-radius: 8px;\n  padding: 3px;\n}\n\n.toggle-btn {\n  width: 36px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #666;\n  transition: all 0.15s ease;\n}\n.toggle-btn:hover {\n  color: #333;\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 - Styled Dropdown */\n.date-field-selector-container {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n\n.date-field-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 999;\n  background: transparent;\n}\n\n.date-field-selector-wrapper {\n  position: relative;\n}\n\n.date-field-selector-button {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 12px;\n  background: var(--background-alt, #f5f5f5);\n  border: 1px solid var(--border-color, #e0e0e0);\n  border-radius: 6px;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--text-primary, #333);\n  transition: all 0.15s ease;\n  min-width: 120px;\n  max-width: 200px;\n}\n\n.date-field-selector-button:hover:not(:disabled) {\n  background: var(--background-hover, #e8e8e8);\n  border-color: var(--border-color-hover, #ccc);\n}\n\n.date-field-selector-button:disabled {\n  cursor: default;\n  opacity: 0.8;\n}\n\n.date-field-selector-button.open {\n  background: var(--background-active, #e0e0e0);\n  border-color: var(--primary-color, #007bff);\n}\n\n.date-field-icon {\n  color: var(--text-secondary, #666);\n  font-size: 12px;\n}\n\n.date-field-name {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: left;\n}\n\n.date-field-arrow {\n  color: var(--text-secondary, #666);\n  font-size: 10px;\n  transition: transform 0.2s ease;\n}\n\n.date-field-arrow.rotated {\n  transform: rotate(180deg);\n}\n\n.date-field-dropdown-panel {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  min-width: 180px;\n  max-width: 280px;\n  max-height: 300px;\n  overflow-y: auto;\n  background: var(--background-panel, #fff);\n  border: 1px solid var(--border-color, #e0e0e0);\n  border-radius: 8px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n  z-index: 1000;\n}\n\n.date-field-dropdown-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 14px;\n  cursor: pointer;\n  transition: background 0.1s ease;\n  font-size: 13px;\n}\n\n.date-field-dropdown-item:hover {\n  background: var(--background-hover, #f5f5f5);\n}\n\n.date-field-dropdown-item.selected {\n  background: var(--primary-light, #e6f0ff);\n}\n\n.date-field-dropdown-item.selected:hover {\n  background: var(--primary-light-hover, #d6e4f9);\n}\n\n.date-field-dropdown-item .item-icon {\n  color: var(--text-secondary, #666);\n  font-size: 13px;\n  width: 16px;\n  text-align: center;\n}\n\n.date-field-dropdown-item .item-name {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.date-field-dropdown-item .selected-check {\n  color: var(--primary-color, #007bff);\n  font-size: 12px;\n}\n\n/* Timeline Orientation Toggle */\n.timeline-orientation-toggle {\n  display: flex;\n  background: #f0f0f0;\n  border-radius: 8px;\n  padding: 3px;\n}\n\n.content-body {\n  flex: 1;\n  overflow: hidden;\n  padding: 20px 24px;\n  display: flex;\n  flex-direction: column;\n}\n\n.loading-container,\n.loading-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  gap: 16px;\n  background: white;\n  border-radius: 8px;\n}\n\n.loading-spinner {\n  font-size: 32px;\n  color: #1976d2;\n}\n\n.loading-message {\n  margin: 0;\n  font-size: 14px;\n  color: #666;\n}\n\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  text-align: center;\n  color: #757575;\n  background: white;\n  border-radius: 8px;\n  padding: 40px;\n}\n\n.empty-icon {\n  font-size: 64px;\n  color: #e0e0e0;\n  margin-bottom: 24px;\n}\n\n.empty-state h3 {\n  margin: 0 0 8px 0;\n  font-size: 20px;\n  font-weight: 600;\n  color: #333;\n}\n\n.empty-state p {\n  margin: 0;\n  font-size: 14px;\n  max-width: 400px;\n  color: #666;\n}\n\n/* Entity Home View - Card Grid */\n.entity-home-view {\n  flex: 1;\n  overflow: auto;\n  padding: 4px;\n}\n\n.entity-card-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n  gap: 16px;\n  padding: 0;\n}\n\n.entity-card {\n  display: flex;\n  align-items: flex-start;\n  gap: 16px;\n  padding: 20px;\n  background: white;\n  border-radius: 10px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  border: 1px solid #e8e8e8;\n}\n\n.entity-card:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);\n  border-color: #1976d2;\n}\n\n.entity-card:active {\n  transform: translateY(0);\n}\n\n.entity-card-icon {\n  width: 48px;\n  height: 48px;\n  border-radius: 10px;\n  background: linear-gradient(135deg, #e3f2fd, #bbdefb);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.entity-card-icon i {\n  font-size: 20px;\n  color: #1976d2;\n}\n\n.entity-card:hover .entity-card-icon {\n  background: linear-gradient(135deg, #1976d2, #1565c0);\n}\n\n.entity-card:hover .entity-card-icon i {\n  color: white;\n}\n\n.entity-card-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.entity-card-title {\n  margin: 0 0 6px 0;\n  font-size: 15px;\n  font-weight: 600;\n  color: #1a1a1a;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.entity-card-description {\n  margin: 0;\n  font-size: 13px;\n  color: #666;\n  line-height: 1.4;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.detail-panel {\n  flex-shrink: 0;\n  height: 100%;\n  background: white;\n  border-left: 1px solid #e0e0e0;\n  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);\n  overflow: hidden;\n  animation: slideIn 0.2s ease-out;\n}\n\n@keyframes slideIn {\n  from {\n    transform: translateX(100%);\n    opacity: 0;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n:host ::ng-deep mj-explorer-grid-view,\n:host ::ng-deep mj-explorer-cards-view {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n\n/* ============================================\n   HOME SCREEN STYLES\n   ============================================ */\n\n/* Home-level header adjustments */\n.content-header.home-header {\n  border-bottom: none;\n  background: transparent;\n  box-shadow: none;\n  padding: 24px 24px 16px;\n}\n\n.content-body.home-content {\n  padding-top: 0;\n}\n\n/* Smart filter with search icon */\n.filter-icon {\n  position: absolute;\n  left: 14px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: #999;\n  font-size: 14px;\n  pointer-events: none;\n}\n\n.smart-filter-container .smart-filter-input {\n  padding-left: 40px;\n}\n\n/* ============================================\n   HOME SECTIONS\n   ============================================ */\n\n.home-section {\n  margin-bottom: 28px;\n}\n\n.section-header {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 14px;\n  padding-left: 4px;\n}\n\n.section-icon {\n  font-size: 14px;\n  color: #1976d2;\n  width: 20px;\n  text-align: center;\n}\n\n.section-title {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #333;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.section-count {\n  font-size: 12px;\n  color: #888;\n  font-weight: 500;\n  margin-left: 8px;\n}\n\n/* ============================================\n   TWO-COLUMN LAYOUT (Entities left, Records right)\n   ============================================ */\n\n.home-two-column-layout {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 24px;\n  margin-bottom: 28px;\n}\n\n/* When only one column has content, let it take full width */\n.home-two-column-layout.single-column {\n  grid-template-columns: 1fr;\n}\n\n.home-column {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n\n/* Section header with inline toggle */\n.section-header-with-toggle {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 14px;\n  padding-left: 4px;\n}\n\n.section-header-left {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n/* Inline Common/All toggle (compact) */\n.inline-toggle {\n  display: flex;\n  background: #f0f0f0;\n  border-radius: 6px;\n  padding: 2px;\n}\n\n.inline-toggle .toggle-btn {\n  width: auto;\n  height: 26px;\n  padding: 0 10px;\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: #666;\n  font-size: 11px;\n  font-weight: 500;\n  transition: all 0.15s ease;\n}\n\n.inline-toggle .toggle-btn:hover {\n  color: #333;\n}\n\n.inline-toggle .toggle-btn.active {\n  background: white;\n  color: #1976d2;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n/* ============================================\n   COMPACT ENTITY CARDS (Recent/Favorites rows)\n   ============================================ */\n\n.entity-card-row {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n  padding: 0;\n}\n\n.entity-card.compact {\n  flex: 0 0 auto;\n  width: auto;\n  min-width: 180px;\n  max-width: 280px;\n  padding: 12px 16px;\n  gap: 12px;\n}\n\n.entity-card.compact .entity-card-icon {\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n}\n\n.entity-card.compact .entity-card-icon i {\n  font-size: 16px;\n}\n\n.entity-card.compact .entity-card-title {\n  margin: 0;\n  font-size: 14px;\n}\n\n.entity-card.compact .entity-card-content {\n  display: flex;\n  align-items: center;\n}\n\n/* ============================================\n   FAVORITE BUTTON\n   ============================================ */\n\n.favorite-btn {\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\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: #ccc;\n  transition: all 0.15s ease;\n  margin-left: auto;\n}\n\n.favorite-btn:hover {\n  background: rgba(255, 193, 7, 0.1);\n  color: #ffc107;\n  transform: scale(1.1);\n}\n\n.favorite-btn.favorited {\n  color: #ffc107;\n}\n\n.favorite-btn.favorited:hover {\n  background: rgba(255, 193, 7, 0.15);\n  color: #ffb300;\n}\n\n.entity-card .favorite-btn {\n  opacity: 0;\n  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;\n}\n\n.entity-card:hover .favorite-btn {\n  opacity: 1;\n}\n\n.entity-card .favorite-btn.favorited {\n  opacity: 1;\n}\n\n/* ============================================\n   RECENT RECORDS LIST\n   ============================================ */\n\n.recent-records-list {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  background: white;\n  border-radius: 10px;\n  padding: 8px;\n  border: 1px solid #e8e8e8;\n}\n\n.recent-record-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.recent-record-item:hover {\n  background: #f5f7fa;\n}\n\n.recent-record-icon {\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.recent-record-icon i {\n  font-size: 14px;\n  color: #4caf50;\n}\n\n.recent-record-content {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.recent-record-name {\n  font-size: 14px;\n  font-weight: 500;\n  color: #1a1a1a;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.recent-record-entity {\n  font-size: 12px;\n  color: #888;\n}\n\n.recent-record-time {\n  font-size: 11px;\n  color: #aaa;\n  flex-shrink: 0;\n}\n\n/* ============================================\n   ENTITY LIST (for Recent/Favorite Entities)\n   ============================================ */\n\n.entity-list {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  background: white;\n  border-radius: 10px;\n  padding: 8px;\n  border: 1px solid #e8e8e8;\n}\n\n.entity-list-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.entity-list-item:hover {\n  background: #f5f7fa;\n}\n\n.entity-list-icon {\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  background: linear-gradient(135deg, #e3f2fd, #bbdefb);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.entity-list-icon i {\n  font-size: 14px;\n  color: #1976d2;\n}\n\n.entity-list-content {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.entity-list-name {\n  font-size: 14px;\n  font-weight: 500;\n  color: #1a1a1a;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.entity-list-item .favorite-btn {\n  opacity: 0;\n  transition: opacity 0.15s ease;\n}\n\n.entity-list-item:hover .favorite-btn {\n  opacity: 1;\n}\n\n.entity-list-item .favorite-btn.favorited {\n  opacity: 1;\n}\n\n/* ============================================\n   ENTITY FILTER STRIP (for Recent Records)\n   ============================================ */\n\n.entity-filter-strip {\n  display: flex;\n  gap: 4px;\n  margin-left: auto;\n  background: #f0f0f0;\n  border-radius: 6px;\n  padding: 3px;\n}\n\n.entity-filter-btn {\n  width: 28px;\n  height: 26px;\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: #666;\n  font-size: 12px;\n  transition: all 0.15s ease;\n}\n\n.entity-filter-btn:hover {\n  color: #333;\n  background: rgba(0, 0, 0, 0.05);\n}\n\n.entity-filter-btn.active {\n  background: white;\n  color: #1976d2;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n/* ============================================\n   COMMON/ALL TOGGLE WITH LABELS\n   ============================================ */\n\n.view-mode-toggle .toggle-btn {\n  width: auto;\n  padding: 0 12px;\n  gap: 6px;\n}\n\n.toggle-label {\n  font-size: 12px;\n  font-weight: 500;\n}\n\n/* ============================================\n   EMPTY STATE VARIANTS\n   ============================================ */\n\n.empty-state.small {\n  height: auto;\n  padding: 32px;\n  background: #fafafa;\n}\n\n.empty-state.small .empty-icon {\n  font-size: 40px;\n  margin-bottom: 16px;\n}\n\n.empty-state.small h3 {\n  font-size: 16px;\n}\n\n.empty-state.small p {\n  font-size: 13px;\n}\n\n/* ============================================\n   RESPONSIVE STYLES\n   ============================================ */\n\n@media (max-width: 1200px) {\n  .entity-card-grid {\n    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n  }\n}\n\n@media (max-width: 900px) {\n  .content-header {\n    flex-wrap: wrap;\n    gap: 12px;\n  }\n\n  .header-center {\n    order: 3;\n    flex-basis: 100%;\n    max-width: 100%;\n  }\n\n  .entity-card.compact {\n    min-width: 160px;\n  }\n\n  /* Stack two-column layout on smaller screens */\n  .home-two-column-layout {\n    grid-template-columns: 1fr;\n    gap: 20px;\n  }\n}\n\n@media (max-width: 600px) {\n  .data-explorer-container {\n    flex-direction: column;\n  }\n\n  .navigation-panel {\n    display: none;\n  }\n\n  .content-header {\n    padding: 12px 16px;\n  }\n\n  .content-body {\n    padding: 12px 16px;\n  }\n\n  .entity-card-grid {\n    grid-template-columns: 1fr;\n    gap: 12px;\n  }\n\n  .entity-card {\n    padding: 16px;\n  }\n\n  .entity-card.compact {\n    min-width: 100%;\n    max-width: 100%;\n  }\n\n  .entity-card-row {\n    flex-direction: column;\n  }\n\n  .view-mode-toggle {\n    display: none;\n  }\n\n  .section-title {\n    font-size: 13px;\n  }\n\n  .home-section {\n    margin-bottom: 20px;\n  }\n}\n"] }]
     }], () => [{ type: i1.ExplorerStateService }, { type: i0.ChangeDetectorRef }, { type: i2.Router }, { type: i3.RecentAccessService }, { type: i4.NavigationService }], { filterInputRef: [{
             type: ViewChild,
             args: ['filterInput']
@@ -2415,6 +2591,9 @@ export { DataExplorerDashboardComponent };
         }], viewConfigPanelRef: [{
             type: ViewChild,
             args: [ViewConfigPanelComponent]
+        }], excelExportRef: [{
+            type: ViewChild,
+            args: ['excelExport', { read: ExcelExportComponent }]
         }], entityFilter: [{
             type: Input
         }], deepLink: [{
@@ -2427,7 +2606,7 @@ export { DataExplorerDashboardComponent };
             type: HostListener,
             args: ['document:keydown', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DataExplorerDashboardComponent, { className: "DataExplorerDashboardComponent", filePath: "src/DataExplorer/data-explorer-dashboard.component.ts", lineNumber: 56 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DataExplorerDashboardComponent, { className: "DataExplorerDashboardComponent", filePath: "src/DataExplorer/data-explorer-dashboard.component.ts", lineNumber: 58 }); })();
 /**
  * Tree-shaking prevention
  */