@memberjunction/ng-entity-viewer 2.122.2 → 2.123.0

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

@@ -1,14 +1,18 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
-import { RunView } from '@memberjunction/core';
+import { EntityFieldTSType, RunView } from '@memberjunction/core';
+import { TimelineGroup } from '@memberjunction/ng-timeline';
 import { DEFAULT_VIEWER_CONFIG } from '../types';
 import * as i0 from "@angular/core";
-import * as i1 from "@memberjunction/ng-shared-generic";
-import * as i2 from "../entity-grid/entity-grid.component";
-import * as i3 from "../entity-cards/entity-cards.component";
-import * as i4 from "../pagination/pagination.component";
-import * as i5 from "@angular/common";
+import * as i1 from "@angular/forms";
+import * as i2 from "@memberjunction/ng-shared-generic";
+import * as i3 from "@memberjunction/ng-timeline";
+import * as i4 from "../entity-grid/entity-grid.component";
+import * as i5 from "../entity-cards/entity-cards.component";
+import * as i6 from "../pagination/pagination.component";
+import * as i7 from "@angular/common";
+const _forTrack0 = ($index, $item) => $item.Name;
 function EntityViewerComponent_Conditional_1_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 12);
@@ -62,6 +66,16 @@ function EntityViewerComponent_Conditional_1_Conditional_2_Template(rf, ctx) { i
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.filteredRecordCount !== ctx_r1.totalRecordCount ? 1 : 2);
 } }
+function EntityViewerComponent_Conditional_1_Conditional_3_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 19);
+    i0.ɵɵlistener("click", function EntityViewerComponent_Conditional_1_Conditional_3_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setViewMode("timeline")); });
+    i0.ɵɵelement(1, "i", 20);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("active", ctx_r1.effectiveViewMode === "timeline");
+} }
 function EntityViewerComponent_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 8)(1, "button", 14);
@@ -71,17 +85,79 @@ function EntityViewerComponent_Conditional_1_Conditional_3_Template(rf, ctx) { i
     i0.ɵɵelementStart(3, "button", 16);
     i0.ɵɵlistener("click", function EntityViewerComponent_Conditional_1_Conditional_3_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setViewMode("cards")); });
     i0.ɵɵelement(4, "i", 17);
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(5, EntityViewerComponent_Conditional_1_Conditional_3_Conditional_5_Template, 2, 2, "button", 18);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵclassProp("active", ctx_r1.effectiveViewMode === "grid");
     i0.ɵɵadvance(2);
     i0.ɵɵclassProp("active", ctx_r1.effectiveViewMode === "cards");
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.hasDateFields ? 5 : -1);
+} }
+function EntityViewerComponent_Conditional_1_Conditional_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 23);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.selectedDateFieldDisplayName);
+} }
+function EntityViewerComponent_Conditional_1_Conditional_4_Conditional_3_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 29);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const field_r8 = ctx.$implicit;
+    i0.ɵɵproperty("value", field_r8.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(field_r8.DisplayNameOrName);
+} }
+function EntityViewerComponent_Conditional_1_Conditional_4_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "select", 28);
+    i0.ɵɵlistener("change", function EntityViewerComponent_Conditional_1_Conditional_4_Conditional_3_Template_select_change_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setTimelineDateField($event.target.value)); });
+    i0.ɵɵrepeaterCreate(1, EntityViewerComponent_Conditional_1_Conditional_4_Conditional_3_For_2_Template, 2, 2, "option", 29, _forTrack0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("value", ctx_r1.selectedTimelineDateField);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.availableDateFields);
+} }
+function EntityViewerComponent_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 21);
+    i0.ɵɵelement(1, "i", 22);
+    i0.ɵɵtemplate(2, EntityViewerComponent_Conditional_1_Conditional_4_Conditional_2_Template, 2, 1, "span", 23)(3, EntityViewerComponent_Conditional_1_Conditional_4_Conditional_3_Template, 3, 1, "select", 24);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 25)(5, "button", 26);
+    i0.ɵɵlistener("click", function EntityViewerComponent_Conditional_1_Conditional_4_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleTimelineOrientation()); });
+    i0.ɵɵelement(6, "i");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 27)(8, "button", 26);
+    i0.ɵɵlistener("click", function EntityViewerComponent_Conditional_1_Conditional_4_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleTimelineSortOrder()); });
+    i0.ɵɵelement(9, "i");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.availableDateFields.length === 1 ? 2 : 3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("title", ctx_r1.timelineOrientation === "vertical" ? "Switch to Horizontal" : "Switch to Vertical");
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.timelineOrientation === "vertical" ? "fa-solid fa-ellipsis-vertical" : "fa-solid fa-ellipsis");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("title", ctx_r1.timelineSortOrder === "desc" ? "Showing Newest First (click for Oldest First)" : "Showing Oldest First (click for Newest First)");
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.timelineSortOrder === "desc" ? "fa-solid fa-arrow-down-wide-short" : "fa-solid fa-arrow-up-wide-short");
 } }
 function EntityViewerComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
-    i0.ɵɵtemplate(1, EntityViewerComponent_Conditional_1_Conditional_1_Template, 4, 3, "div", 6)(2, EntityViewerComponent_Conditional_1_Conditional_2_Template, 3, 1, "div", 7)(3, EntityViewerComponent_Conditional_1_Conditional_3_Template, 5, 4, "div", 8);
+    i0.ɵɵtemplate(1, EntityViewerComponent_Conditional_1_Conditional_1_Template, 4, 3, "div", 6)(2, EntityViewerComponent_Conditional_1_Conditional_2_Template, 3, 1, "div", 7)(3, EntityViewerComponent_Conditional_1_Conditional_3_Template, 6, 5, "div", 8)(4, EntityViewerComponent_Conditional_1_Conditional_4_Template, 10, 7);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -91,10 +167,12 @@ function EntityViewerComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditional(ctx_r1.effectiveConfig.showRecordCount && ctx_r1.entity ? 2 : -1);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.effectiveConfig.showViewModeToggle ? 3 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.effectiveViewMode === "timeline" && ctx_r1.hasDateFields ? 4 : -1);
 } }
 function EntityViewerComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 3);
-    i0.ɵɵelement(1, "mj-loading", 18);
+    i0.ɵɵelement(1, "mj-loading", 30);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -103,14 +181,14 @@ function EntityViewerComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
 } }
 function EntityViewerComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 4);
-    i0.ɵɵelement(1, "i", 19);
+    i0.ɵɵelement(1, "i", 31);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "Select an entity to view records");
     i0.ɵɵelementEnd()();
 } }
 function EntityViewerComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 4);
-    i0.ɵɵelement(1, "i", 20);
+    i0.ɵɵelement(1, "i", 32);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
@@ -119,34 +197,36 @@ function EntityViewerComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r1.debouncedFilterText ? "No matching records" : "No records found");
 } }
-function EntityViewerComponent_Conditional_6_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-entity-grid", 23);
-    i0.ɵɵlistener("recordSelected", function EntityViewerComponent_Conditional_6_Conditional_0_Template_mj_entity_grid_recordSelected_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onRecordSelected($event)); })("recordOpened", function EntityViewerComponent_Conditional_6_Conditional_0_Template_mj_entity_grid_recordOpened_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onRecordOpened($event)); })("sortChanged", function EntityViewerComponent_Conditional_6_Conditional_0_Template_mj_entity_grid_sortChanged_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onSortChanged($event)); })("gridStateChanged", function EntityViewerComponent_Conditional_6_Conditional_0_Template_mj_entity_grid_gridStateChanged_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onGridStateChanged($event)); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("entity", ctx_r1.entity)("records", ctx_r1.filteredRecords)("selectedRecordId", ctx_r1.selectedRecordId)("columns", ctx_r1.gridColumns)("height", "100%")("filterText", ctx_r1.debouncedFilterText)("sortState", ctx_r1.effectiveSortState)("serverSideSorting", ctx_r1.effectiveConfig.serverSideSorting)("gridState", ctx_r1.gridState);
-} }
-function EntityViewerComponent_Conditional_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-entity-cards", 24);
-    i0.ɵɵlistener("recordSelected", function EntityViewerComponent_Conditional_6_Conditional_1_Template_mj_entity_cards_recordSelected_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onRecordSelected($event)); })("recordOpened", function EntityViewerComponent_Conditional_6_Conditional_1_Template_mj_entity_cards_recordOpened_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onRecordOpened($event)); });
+function EntityViewerComponent_Conditional_6_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-timeline", 36);
+    i0.ɵɵlistener("afterEventClick", function EntityViewerComponent_Conditional_6_Conditional_2_Template_mj_timeline_afterEventClick_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onTimelineEventClick($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("entity", ctx_r1.entity)("records", ctx_r1.filteredRecords)("selectedRecordId", ctx_r1.selectedRecordId)("cardTemplate", ctx_r1.cardTemplate)("hiddenFieldMatches", ctx_r1.hiddenFieldMatches)("filterText", ctx_r1.debouncedFilterText);
+    i0.ɵɵproperty("groups", ctx_r1.timelineGroups)("orientation", ctx_r1.timelineOrientation)("layout", ctx_r1.timelineOrientation === "vertical" ? "alternating" : "single")("sortOrder", ctx_r1.timelineSortOrder)("segmentGrouping", ctx_r1.timelineSegmentGrouping)("segmentsCollapsible", true)("segmentsDefaultExpanded", true)("selectedEventId", ctx_r1.timelineSelectedEventId);
 } }
 function EntityViewerComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, EntityViewerComponent_Conditional_6_Conditional_0_Template, 1, 9, "mj-entity-grid", 21)(1, EntityViewerComponent_Conditional_6_Conditional_1_Template, 1, 6, "mj-entity-cards", 22);
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-entity-grid", 33);
+    i0.ɵɵlistener("recordSelected", function EntityViewerComponent_Conditional_6_Template_mj_entity_grid_recordSelected_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onRecordSelected($event)); })("recordOpened", function EntityViewerComponent_Conditional_6_Template_mj_entity_grid_recordOpened_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onRecordOpened($event)); })("sortChanged", function EntityViewerComponent_Conditional_6_Template_mj_entity_grid_sortChanged_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSortChanged($event)); })("gridStateChanged", function EntityViewerComponent_Conditional_6_Template_mj_entity_grid_gridStateChanged_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onGridStateChanged($event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(1, "mj-entity-cards", 34);
+    i0.ɵɵlistener("recordSelected", function EntityViewerComponent_Conditional_6_Template_mj_entity_cards_recordSelected_1_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onRecordSelected($event)); })("recordOpened", function EntityViewerComponent_Conditional_6_Template_mj_entity_cards_recordOpened_1_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onRecordOpened($event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(2, EntityViewerComponent_Conditional_6_Conditional_2_Template, 1, 8, "mj-timeline", 35);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵconditional(ctx_r1.effectiveViewMode === "grid" ? 0 : 1);
+    i0.ɵɵproperty("hidden", ctx_r1.effectiveViewMode !== "grid")("entity", ctx_r1.entity)("records", ctx_r1.filteredRecords)("selectedRecordId", ctx_r1.selectedRecordId)("columns", ctx_r1.gridColumns)("height", "100%")("filterText", ctx_r1.debouncedFilterText)("sortState", ctx_r1.effectiveSortState)("serverSideSorting", ctx_r1.effectiveConfig.serverSideSorting)("gridState", ctx_r1.gridState);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("hidden", ctx_r1.effectiveViewMode !== "cards")("entity", ctx_r1.entity)("records", ctx_r1.filteredRecords)("selectedRecordId", ctx_r1.selectedRecordId)("cardTemplate", ctx_r1.cardTemplate)("hiddenFieldMatches", ctx_r1.hiddenFieldMatches)("filterText", ctx_r1.debouncedFilterText);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.hasDateFields && ctx_r1.effectiveViewMode === "timeline" ? 2 : -1);
 } }
 function EntityViewerComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-pagination", 25);
-    i0.ɵɵlistener("loadMore", function EntityViewerComponent_Conditional_7_Template_mj_pagination_loadMore_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onLoadMore()); });
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-pagination", 37);
+    i0.ɵɵlistener("loadMore", function EntityViewerComponent_Conditional_7_Template_mj_pagination_loadMore_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onLoadMore()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -239,6 +319,31 @@ export class EntityViewerComponent {
      * Controls column visibility, widths, order, and sort settings
      */
     gridState = null;
+    /**
+     * Timeline configuration state
+     * Controls which date field is used and segment grouping
+     */
+    get timelineConfig() {
+        return this._timelineConfig;
+    }
+    set timelineConfig(value) {
+        const prev = this._timelineConfig;
+        // Compare by value, not reference
+        const isEqual = (prev === null && value === null) ||
+            (prev !== null && value !== null &&
+                prev.dateFieldName === value.dateFieldName &&
+                prev.sortOrder === value.sortOrder &&
+                prev.orientation === value.orientation &&
+                prev.segmentGrouping === value.segmentGrouping);
+        if (!isEqual) {
+            this._timelineConfig = value;
+            if (value && this.entity) {
+                this.configureTimeline();
+                this.cdr.markForCheck();
+            }
+        }
+    }
+    _timelineConfig = null;
     // ========================================
     // OUTPUTS
     // ========================================
@@ -274,6 +379,10 @@ export class EntityViewerComponent {
      * Emitted when grid state changes (column resize, reorder, etc.)
      */
     gridStateChanged = new EventEmitter();
+    /**
+     * Emitted when timeline configuration changes (date field, grouping, etc.)
+     */
+    timelineConfigChange = new EventEmitter();
     // ========================================
     // INTERNAL STATE
     // ========================================
@@ -297,6 +406,39 @@ export class EntityViewerComponent {
         hasMore: false,
         isLoading: false
     };
+    // ========================================
+    // TIMELINE STATE
+    // ========================================
+    /** Whether the current entity has date fields available for timeline view */
+    hasDateFields = false;
+    /** Available date fields from the entity (sorted by priority) */
+    availableDateFields = [];
+    /** Timeline groups configuration for the timeline component */
+    get timelineGroups() {
+        return this._timelineGroups;
+    }
+    set timelineGroups(value) {
+        const prev = this._timelineGroups;
+        this._timelineGroups = value;
+        // Detect meaningful changes to trigger refresh in child timeline component
+        const hasChanged = prev !== value ||
+            (prev.length > 0 && value.length > 0 &&
+                (prev[0].EntityObjects !== value[0]?.EntityObjects ||
+                    prev[0].DateFieldName !== value[0]?.DateFieldName));
+        if (hasChanged) {
+            // Force change detection to propagate to child timeline component
+            this.cdr.markForCheck();
+        }
+    }
+    _timelineGroups = [];
+    /** Timeline sort order */
+    timelineSortOrder = 'desc';
+    /** Timeline segment grouping */
+    timelineSegmentGrouping = 'month';
+    /** Timeline orientation (vertical or horizontal) */
+    timelineOrientation = 'vertical';
+    /** Currently selected date field for timeline */
+    selectedTimelineDateField = null;
     destroy$ = new Subject();
     filterInput$ = new Subject();
     /** Track if this is the first load (vs. load more) */
@@ -319,6 +461,27 @@ export class EntityViewerComponent {
     get effectiveFilterText() {
         return this.filterText ?? this.internalFilterText;
     }
+    /**
+     * Get the raw ID value from selectedRecordId for timeline selection.
+     * The selectedRecordId is in composite key format (e.g., "ID|abc-123" or "ID=abc-123"),
+     * but the timeline stores just the raw ID value.
+     */
+    get timelineSelectedEventId() {
+        if (!this.selectedRecordId)
+            return null;
+        // Handle "ID|value" format (pipe separator)
+        if (this.selectedRecordId.includes('|')) {
+            const parts = this.selectedRecordId.split('|');
+            return parts.length > 1 ? parts[1] : this.selectedRecordId;
+        }
+        // Handle "ID=value" format (equals separator)
+        if (this.selectedRecordId.includes('=')) {
+            const parts = this.selectedRecordId.split('=');
+            return parts.length > 1 ? parts[1] : this.selectedRecordId;
+        }
+        // Return as-is if no separator found
+        return this.selectedRecordId;
+    }
     /**
      * Get the effective sort state (external or internal)
      */
@@ -484,6 +647,8 @@ export class EntityViewerComponent {
             this.applyConfig();
         }
         if (changes['entity']) {
+            // Detect date fields for timeline support
+            this.detectDateFields();
             if (this.entity && !this.records) {
                 // Reset state for new entity - synchronously clear all data and force change detection
                 // before starting the async load to prevent stale data display
@@ -503,7 +668,10 @@ export class EntityViewerComponent {
             this.internalRecords = this.records;
             this.totalRecordCount = this.records.length;
             this.filteredRecordCount = this.records.length;
+            // Update timeline with new records
+            this.updateTimelineGroups();
         }
+        // Timeline config is now handled by setter - no ngOnChanges handling needed
         // Handle external filter text changes (from parent component)
         if (changes['filterText']) {
             const newFilter = this.filterText ?? '';
@@ -693,6 +861,8 @@ export class EntityViewerComponent {
                     filteredCount: this.internalRecords.length,
                     totalCount: result.TotalRowCount
                 });
+                // Update timeline groups with new data
+                this.updateTimelineGroups();
             }
             else {
                 console.error('Failed to load records:', result.ErrorMessage);
@@ -816,12 +986,256 @@ export class EntityViewerComponent {
     onLoadMore() {
         this.loadMore();
     }
+    // ========================================
+    // TIMELINE METHODS
+    // ========================================
+    /**
+     * Handle timeline event click - emit as record selection
+     */
+    onTimelineEventClick(event) {
+        const record = event.event.entity;
+        if (record && this.entity) {
+            this.recordSelected.emit({
+                record,
+                entity: this.entity,
+                compositeKey: record.PrimaryKey
+            });
+        }
+    }
+    /**
+     * Toggle timeline orientation between vertical and horizontal
+     */
+    toggleTimelineOrientation() {
+        this.timelineOrientation = this.timelineOrientation === 'vertical' ? 'horizontal' : 'vertical';
+        // Emit config change so parent can persist the preference
+        this.emitTimelineConfigChange();
+        this.cdr.detectChanges();
+    }
+    /**
+     * Toggle timeline sort order between newest first (desc) and oldest first (asc)
+     */
+    toggleTimelineSortOrder() {
+        this.timelineSortOrder = this.timelineSortOrder === 'desc' ? 'asc' : 'desc';
+        // Emit config change so parent can persist the preference
+        this.emitTimelineConfigChange();
+        this.cdr.detectChanges();
+    }
+    /**
+     * Change the date field used for the timeline
+     */
+    setTimelineDateField(fieldName) {
+        if (this.availableDateFields.some(f => f.Name === fieldName)) {
+            this.selectedTimelineDateField = fieldName;
+            this.updateTimelineGroups();
+            this.emitTimelineConfigChange();
+            this.cdr.detectChanges();
+        }
+    }
+    /**
+     * Get the display name of the currently selected timeline date field
+     */
+    get selectedDateFieldDisplayName() {
+        if (!this.selectedTimelineDateField)
+            return '';
+        const field = this.availableDateFields.find(f => f.Name === this.selectedTimelineDateField);
+        return field?.DisplayNameOrName || this.selectedTimelineDateField;
+    }
+    /**
+     * Emit the current timeline configuration for persistence
+     */
+    emitTimelineConfigChange() {
+        if (this.selectedTimelineDateField) {
+            this.timelineConfigChange.emit({
+                dateFieldName: this.selectedTimelineDateField,
+                sortOrder: this.timelineSortOrder,
+                segmentGrouping: this.timelineSegmentGrouping,
+                orientation: this.timelineOrientation
+            });
+        }
+    }
+    /**
+     * Detect and configure timeline based on entity's date fields
+     * Called when entity changes
+     */
+    detectDateFields() {
+        if (!this.entity) {
+            this.hasDateFields = false;
+            this.availableDateFields = [];
+            this.timelineGroups = [];
+            this.fallbackFromTimelineIfNeeded();
+            return;
+        }
+        // Find all date fields - include __mj_CreatedAt and __mj_UpdatedAt as they're useful for timelines
+        const dateFields = this.entity.Fields.filter(f => f.TSType === EntityFieldTSType.Date);
+        if (dateFields.length === 0) {
+            this.hasDateFields = false;
+            this.availableDateFields = [];
+            this.timelineGroups = [];
+            this.fallbackFromTimelineIfNeeded();
+            return;
+        }
+        // Sort by priority: DefaultInView date fields first (by Sequence), then others (by Sequence)
+        this.availableDateFields = this.sortDateFieldsByPriority(dateFields);
+        this.hasDateFields = true;
+        // Configure timeline with the best date field
+        this.configureTimeline();
+    }
+    /**
+     * If currently on timeline view but timeline is no longer available,
+     * fall back to grid view
+     */
+    fallbackFromTimelineIfNeeded() {
+        if (this.effectiveViewMode === 'timeline' && !this.hasDateFields) {
+            this.setViewMode('grid');
+        }
+    }
+    /**
+     * Sort date fields by priority:
+     * 1. DefaultInView=true fields, sorted by Sequence (lowest first)
+     * 2. Other date fields, sorted by Sequence (lowest first)
+     */
+    sortDateFieldsByPriority(dateFields) {
+        const defaultInView = dateFields.filter(f => f.DefaultInView).sort((a, b) => a.Sequence - b.Sequence);
+        const others = dateFields.filter(f => !f.DefaultInView).sort((a, b) => a.Sequence - b.Sequence);
+        return [...defaultInView, ...others];
+    }
+    /**
+     * Configure the timeline with the current date field and records
+     */
+    configureTimeline() {
+        if (!this.entity || !this.hasDateFields || this.availableDateFields.length === 0) {
+            this.timelineGroups = [];
+            return;
+        }
+        // Determine which date field to use
+        const dateFieldName = this.getEffectiveTimelineDateField();
+        this.selectedTimelineDateField = dateFieldName;
+        // Apply timeline config if provided
+        if (this.timelineConfig) {
+            this.timelineSortOrder = (this.timelineConfig.sortOrder || 'desc');
+            this.timelineSegmentGrouping = (this.timelineConfig.segmentGrouping || 'month');
+            this.timelineOrientation = this.timelineConfig.orientation || 'vertical';
+        }
+        // Create a timeline group for the current entity's data
+        this.updateTimelineGroups();
+    }
+    /**
+     * Get the effective date field to use for timeline
+     * Priority: timelineConfig > first available date field
+     */
+    getEffectiveTimelineDateField() {
+        // If we have a config with a specific date field, use it if valid
+        if (this.timelineConfig?.dateFieldName) {
+            const configField = this.availableDateFields.find(f => f.Name === this.timelineConfig.dateFieldName);
+            if (configField) {
+                return configField.Name;
+            }
+        }
+        // Otherwise use the first available date field (already sorted by priority)
+        return this.availableDateFields[0].Name;
+    }
+    /**
+     * Update timeline groups with current records
+     * Called when records change
+     */
+    updateTimelineGroups() {
+        if (!this.entity || !this.selectedTimelineDateField) {
+            this.timelineGroups = [];
+            return;
+        }
+        // Find title field - prefer NameField, then first string field with DefaultInView
+        const titleField = this.findTitleField();
+        // Create a single group for the current data
+        const group = new TimelineGroup();
+        group.DataSourceType = 'array';
+        group.EntityObjects = this.filteredRecords;
+        group.TitleFieldName = titleField;
+        group.DateFieldName = this.selectedTimelineDateField;
+        group.IdFieldName = 'ID';
+        group.GroupLabel = this.entity.Name;
+        // Find a suitable description field
+        const descField = this.findDescriptionField();
+        if (descField) {
+            group.DescriptionFieldName = descField;
+        }
+        // Find a suitable subtitle field
+        const subtitleField = this.findSubtitleField(titleField);
+        if (subtitleField) {
+            group.SubtitleFieldName = subtitleField;
+        }
+        // Configure card display
+        group.CardConfig = {
+            collapsible: true,
+            defaultExpanded: false,
+            showDate: true,
+            dateFormat: 'MMM d, yyyy h:mm a'
+        };
+        this.timelineGroups = [group];
+    }
+    /**
+     * Find the best field to use as the title
+     */
+    findTitleField() {
+        if (!this.entity)
+            return 'ID';
+        // Prefer the entity's NameField
+        if (this.entity.NameField) {
+            return this.entity.NameField.Name;
+        }
+        // Look for common name patterns in DefaultInView string fields
+        const stringFields = this.entity.Fields.filter(f => f.TSType === EntityFieldTSType.String && f.DefaultInView && !f.Name.startsWith('__mj_')).sort((a, b) => a.Sequence - b.Sequence);
+        const namePatterns = ['name', 'title', 'subject', 'label'];
+        for (const pattern of namePatterns) {
+            const match = stringFields.find(f => f.Name.toLowerCase().includes(pattern));
+            if (match)
+                return match.Name;
+        }
+        // Fall back to first string field
+        return stringFields.length > 0 ? stringFields[0].Name : 'ID';
+    }
+    /**
+     * Find a suitable description field
+     */
+    findDescriptionField() {
+        if (!this.entity)
+            return null;
+        // Look for common description patterns
+        const descPatterns = ['description', 'notes', 'summary', 'content', 'body', 'details'];
+        const textFields = this.entity.Fields.filter(f => (f.TSType === EntityFieldTSType.String) && !f.Name.startsWith('__mj_'));
+        for (const pattern of descPatterns) {
+            const match = textFields.find(f => f.Name.toLowerCase().includes(pattern));
+            if (match)
+                return match.Name;
+        }
+        return null;
+    }
+    /**
+     * Find a suitable subtitle field (different from title)
+     */
+    findSubtitleField(excludeField) {
+        if (!this.entity)
+            return null;
+        // Look for status, type, category, or other short classification fields
+        const patterns = ['status', 'type', 'category', 'state', 'priority'];
+        const fields = this.entity.Fields.filter(f => f.TSType === EntityFieldTSType.String &&
+            f.DefaultInView &&
+            f.Name !== excludeField &&
+            !f.Name.startsWith('__mj_')).sort((a, b) => a.Sequence - b.Sequence);
+        for (const pattern of patterns) {
+            const match = fields.find(f => f.Name.toLowerCase().includes(pattern));
+            if (match)
+                return match.Name;
+        }
+        // Use the first string field that's not the title field
+        const firstOther = fields.find(f => f.Name !== excludeField);
+        return firstOther?.Name || null;
+    }
     static ɵfac = function EntityViewerComponent_Factory(t) { return new (t || EntityViewerComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EntityViewerComponent, selectors: [["mj-entity-viewer"]], hostAttrs: [2, "display", "block", "height", "100%"], inputs: { entity: "entity", records: "records", config: "config", selectedRecordId: "selectedRecordId", viewMode: "viewMode", filterText: "filterText", sortState: "sortState", gridColumns: "gridColumns", cardTemplate: "cardTemplate", viewEntity: "viewEntity", gridState: "gridState" }, outputs: { recordSelected: "recordSelected", recordOpened: "recordOpened", dataLoaded: "dataLoaded", viewModeChange: "viewModeChange", filterTextChange: "filterTextChange", filteredCountChanged: "filteredCountChanged", sortChanged: "sortChanged", gridStateChanged: "gridStateChanged" }, features: [i0.ɵɵNgOnChangesFeature], decls: 8, vars: 5, consts: [[1, "entity-viewer-container"], [1, "viewer-header"], [1, "viewer-content"], [1, "loading-container"], [1, "empty-state"], [3, "pagination", "loadedRecordCount"], [1, "filter-container"], [1, "record-count"], [1, "view-mode-toggle"], [1, "fa-solid", "fa-search", "filter-icon"], ["type", "text", 1, "filter-input", 3, "input", "placeholder", "value"], ["title", "Clear filter", 1, "clear-filter-btn"], ["title", "Clear filter", 1, "clear-filter-btn", 3, "click"], [1, "fa-solid", "fa-times"], ["title", "Grid View", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-list"], ["title", "Cards View", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-grip"], ["size", "medium", 3, "text"], [1, "fa-solid", "fa-database"], [1, "fa-solid", "fa-inbox"], [3, "entity", "records", "selectedRecordId", "columns", "height", "filterText", "sortState", "serverSideSorting", "gridState"], [3, "entity", "records", "selectedRecordId", "cardTemplate", "hiddenFieldMatches", "filterText"], [3, "recordSelected", "recordOpened", "sortChanged", "gridStateChanged", "entity", "records", "selectedRecordId", "columns", "height", "filterText", "sortState", "serverSideSorting", "gridState"], [3, "recordSelected", "recordOpened", "entity", "records", "selectedRecordId", "cardTemplate", "hiddenFieldMatches", "filterText"], [3, "loadMore", "pagination", "loadedRecordCount"]], template: function EntityViewerComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EntityViewerComponent, selectors: [["mj-entity-viewer"]], hostAttrs: [2, "display", "block", "height", "100%"], inputs: { entity: "entity", records: "records", config: "config", selectedRecordId: "selectedRecordId", viewMode: "viewMode", filterText: "filterText", sortState: "sortState", gridColumns: "gridColumns", cardTemplate: "cardTemplate", viewEntity: "viewEntity", gridState: "gridState", timelineConfig: "timelineConfig" }, outputs: { recordSelected: "recordSelected", recordOpened: "recordOpened", dataLoaded: "dataLoaded", viewModeChange: "viewModeChange", filterTextChange: "filterTextChange", filteredCountChanged: "filteredCountChanged", sortChanged: "sortChanged", gridStateChanged: "gridStateChanged", timelineConfigChange: "timelineConfigChange" }, features: [i0.ɵɵNgOnChangesFeature], decls: 8, vars: 5, consts: [[1, "entity-viewer-container"], [1, "viewer-header"], [1, "viewer-content"], [1, "loading-container"], [1, "empty-state"], [3, "pagination", "loadedRecordCount"], [1, "filter-container"], [1, "record-count"], [1, "view-mode-toggle"], [1, "fa-solid", "fa-search", "filter-icon"], ["type", "text", 1, "filter-input", 3, "input", "placeholder", "value"], ["title", "Clear filter", 1, "clear-filter-btn"], ["title", "Clear filter", 1, "clear-filter-btn", 3, "click"], [1, "fa-solid", "fa-times"], ["title", "Grid View", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-list"], ["title", "Cards View", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-grip"], ["title", "Timeline View", 1, "toggle-btn", 3, "active"], ["title", "Timeline View", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-timeline"], [1, "timeline-date-selector"], [1, "fa-solid", "fa-calendar-days"], [1, "date-field-label"], [1, "date-field-select", 3, "value"], [1, "timeline-orientation-toggle"], [1, "toggle-btn", 3, "click", "title"], [1, "timeline-sort-toggle"], [1, "date-field-select", 3, "change", "value"], [3, "value"], ["size", "medium", 3, "text"], [1, "fa-solid", "fa-database"], [1, "fa-solid", "fa-inbox"], [3, "recordSelected", "recordOpened", "sortChanged", "gridStateChanged", "hidden", "entity", "records", "selectedRecordId", "columns", "height", "filterText", "sortState", "serverSideSorting", "gridState"], [3, "recordSelected", "recordOpened", "hidden", "entity", "records", "selectedRecordId", "cardTemplate", "hiddenFieldMatches", "filterText"], [3, "groups", "orientation", "layout", "sortOrder", "segmentGrouping", "segmentsCollapsible", "segmentsDefaultExpanded", "selectedEventId"], [3, "afterEventClick", "groups", "orientation", "layout", "sortOrder", "segmentGrouping", "segmentsCollapsible", "segmentsDefaultExpanded", "selectedEventId"], [3, "loadMore", "pagination", "loadedRecordCount"]], template: function EntityViewerComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵtemplate(1, EntityViewerComponent_Conditional_1_Template, 4, 3, "div", 1);
+            i0.ɵɵtemplate(1, EntityViewerComponent_Conditional_1_Template, 5, 4, "div", 1);
             i0.ɵɵelementStart(2, "div", 2);
-            i0.ɵɵtemplate(3, EntityViewerComponent_Conditional_3_Template, 2, 1, "div", 3)(4, EntityViewerComponent_Conditional_4_Template, 4, 0, "div", 4)(5, EntityViewerComponent_Conditional_5_Template, 4, 1, "div", 4)(6, EntityViewerComponent_Conditional_6_Template, 2, 1);
+            i0.ɵɵtemplate(3, EntityViewerComponent_Conditional_3_Template, 2, 1, "div", 3)(4, EntityViewerComponent_Conditional_4_Template, 4, 0, "div", 4)(5, EntityViewerComponent_Conditional_5_Template, 4, 1, "div", 4)(6, EntityViewerComponent_Conditional_6_Template, 3, 18);
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(7, EntityViewerComponent_Conditional_7_Template, 1, 2, "mj-pagination", 5);
             i0.ɵɵelementEnd();
@@ -833,13 +1247,13 @@ export class EntityViewerComponent {
             i0.ɵɵconditional(ctx.isLoading && ctx.filteredRecords.length === 0 ? 3 : !ctx.entity ? 4 : ctx.filteredRecords.length === 0 && !ctx.isLoading ? 5 : 6);
             i0.ɵɵadvance(4);
             i0.ɵɵconditional(ctx.effectiveConfig.showPagination && ctx.entity && (ctx.pagination.hasMore || ctx.pagination.totalRecords > ctx.effectiveConfig.pageSize) ? 7 : -1);
-        } }, dependencies: [i1.LoadingComponent, i2.EntityGridComponent, i3.EntityCardsComponent, i4.PaginationComponent, i5.DecimalPipe], styles: [".entity-viewer-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  background: #fafafa;\n}\n\n\n\n.viewer-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  padding: 12px 16px;\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\n  flex-shrink: 0;\n}\n\n\n\n.filter-container[_ngcontent-%COMP%] {\n  flex: 1;\n  max-width: 400px;\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.filter-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 12px;\n  color: #9e9e9e;\n  font-size: 14px;\n  pointer-events: none;\n}\n\n.filter-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 8px 36px 8px 36px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  font-size: 14px;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n\n.filter-input[_ngcontent-%COMP%]:focus {\n  border-color: #1976d2;\n}\n\n.filter-input[_ngcontent-%COMP%]::placeholder {\n  color: #9e9e9e;\n}\n\n.clear-filter-btn[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 8px;\n  width: 20px;\n  height: 20px;\n  border: none;\n  background: transparent;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #9e9e9e;\n  transition: all 0.15s ease;\n}\n\n.clear-filter-btn[_ngcontent-%COMP%]:hover {\n  background: #f5f5f5;\n  color: #616161;\n}\n\n\n\n.record-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #757575;\n  white-space: nowrap;\n}\n\n\n\n.view-mode-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: #f5f5f5;\n  border-radius: 6px;\n  padding: 2px;\n}\n\n.toggle-btn[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #757575;\n  transition: all 0.15s ease;\n}\n\n.toggle-btn[_ngcontent-%COMP%]:hover {\n  color: #424242;\n}\n\n.toggle-btn.active[_ngcontent-%COMP%] {\n  background: white;\n  color: #1976d2;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n\n\n.viewer-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  position: relative;\n}\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  color: #9e9e9e;\n  text-align: center;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 48px;\n  margin-bottom: 16px;\n  opacity: 0.5;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n}"] });
+        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i2.LoadingComponent, i3.TimelineComponent, i4.EntityGridComponent, i5.EntityCardsComponent, i6.PaginationComponent, i7.DecimalPipe], styles: [".entity-viewer-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  background: #fafafa;\n}\n\n\n\n.viewer-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  padding: 12px 16px;\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\n  flex-shrink: 0;\n}\n\n\n\n.filter-container[_ngcontent-%COMP%] {\n  flex: 1;\n  max-width: 400px;\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.filter-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 12px;\n  color: #9e9e9e;\n  font-size: 14px;\n  pointer-events: none;\n}\n\n.filter-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 8px 36px 8px 36px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  font-size: 14px;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n\n.filter-input[_ngcontent-%COMP%]:focus {\n  border-color: #1976d2;\n}\n\n.filter-input[_ngcontent-%COMP%]::placeholder {\n  color: #9e9e9e;\n}\n\n.clear-filter-btn[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 8px;\n  width: 20px;\n  height: 20px;\n  border: none;\n  background: transparent;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #9e9e9e;\n  transition: all 0.15s ease;\n}\n\n.clear-filter-btn[_ngcontent-%COMP%]:hover {\n  background: #f5f5f5;\n  color: #616161;\n}\n\n\n\n.record-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #757575;\n  white-space: nowrap;\n}\n\n\n\n.view-mode-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: #f5f5f5;\n  border-radius: 6px;\n  padding: 2px;\n}\n\n.toggle-btn[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #757575;\n  transition: all 0.15s ease;\n}\n\n.toggle-btn[_ngcontent-%COMP%]:hover {\n  color: #424242;\n}\n\n.toggle-btn.active[_ngcontent-%COMP%] {\n  background: white;\n  color: #1976d2;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n\n\n.timeline-date-selector[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 13px;\n  color: #616161;\n}\n\n.timeline-date-selector[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #9e9e9e;\n}\n\n.date-field-label[_ngcontent-%COMP%] {\n  color: #424242;\n  font-weight: 500;\n}\n\n.date-field-select[_ngcontent-%COMP%] {\n  padding: 4px 8px;\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  font-size: 13px;\n  background: white;\n  color: #424242;\n  cursor: pointer;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n\n.date-field-select[_ngcontent-%COMP%]:hover {\n  border-color: #bdbdbd;\n}\n\n.date-field-select[_ngcontent-%COMP%]:focus {\n  border-color: #1976d2;\n}\n\n\n\n.timeline-orientation-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: #f5f5f5;\n  border-radius: 6px;\n  padding: 2px;\n}\n\n\n\n.viewer-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  position: relative;\n  background: white;\n}\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  color: #9e9e9e;\n  text-align: center;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 48px;\n  margin-bottom: 16px;\n  opacity: 0.5;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n}\n\n\n\nmj-entity-grid[hidden][_ngcontent-%COMP%], \nmj-entity-cards[hidden][_ngcontent-%COMP%], \nmj-timeline[hidden][_ngcontent-%COMP%] {\n  display: none !important;\n}\n\n\n\nmj-entity-grid[_ngcontent-%COMP%]:not([hidden]), \nmj-entity-cards[_ngcontent-%COMP%]:not([hidden]), \nmj-timeline[_ngcontent-%COMP%]:not([hidden]) {\n  display: block;\n  height: 100%;\n  width: 100%;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EntityViewerComponent, [{
         type: Component,
         args: [{ selector: 'mj-entity-viewer', host: {
                     'style': 'display: block; height: 100%;'
-                }, template: "<div class=\"entity-viewer-container\" [style.height]=\"effectiveConfig.height\">\n  <!-- Header -->\n  @if (effectiveConfig.showFilter || effectiveConfig.showViewModeToggle || effectiveConfig.showRecordCount) {\n    <div class=\"viewer-header\">\n      <!-- Filter Input -->\n      @if (effectiveConfig.showFilter) {\n        <div class=\"filter-container\">\n          <i class=\"fa-solid fa-search filter-icon\"></i>\n          <input\n            type=\"text\"\n            class=\"filter-input\"\n            [placeholder]=\"effectiveConfig.filterPlaceholder\"\n            [value]=\"effectiveFilterText\"\n            (input)=\"onFilterChange($any($event.target).value)\"\n          />\n          @if (effectiveFilterText) {\n            <button class=\"clear-filter-btn\" (click)=\"clearFilter()\" title=\"Clear filter\">\n              <i class=\"fa-solid fa-times\"></i>\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Record Count -->\n      @if (effectiveConfig.showRecordCount && entity) {\n        <div class=\"record-count\">\n          @if (filteredRecordCount !== totalRecordCount) {\n            <span>{{ filteredRecordCount | number }} of {{ totalRecordCount | number }} records</span>\n          } @else {\n            <span>{{ totalRecordCount | number }} records</span>\n          }\n        </div>\n      }\n\n      <!-- View Mode Toggle -->\n      @if (effectiveConfig.showViewModeToggle) {\n        <div class=\"view-mode-toggle\">\n          <button\n            class=\"toggle-btn\"\n            [class.active]=\"effectiveViewMode === 'grid'\"\n            (click)=\"setViewMode('grid')\"\n            title=\"Grid View\">\n            <i class=\"fa-solid fa-list\"></i>\n          </button>\n          <button\n            class=\"toggle-btn\"\n            [class.active]=\"effectiveViewMode === 'cards'\"\n            (click)=\"setViewMode('cards')\"\n            title=\"Cards View\">\n            <i class=\"fa-solid fa-grip\"></i>\n          </button>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Content -->\n  <div class=\"viewer-content\">\n    @if (isLoading && filteredRecords.length === 0) {\n      <!-- Initial loading state -->\n      <div class=\"loading-container\">\n        <mj-loading [text]=\"loadingMessage\" size=\"medium\"></mj-loading>\n      </div>\n    } @else if (!entity) {\n      <div class=\"empty-state\">\n        <i class=\"fa-solid fa-database\"></i>\n        <p>Select an entity to view records</p>\n      </div>\n    } @else if (filteredRecords.length === 0 && !isLoading) {\n      <div class=\"empty-state\">\n        <i class=\"fa-solid fa-inbox\"></i>\n        <p>{{ debouncedFilterText ? 'No matching records' : 'No records found' }}</p>\n      </div>\n    } @else {\n      @if (effectiveViewMode === 'grid') {\n        <mj-entity-grid\n          [entity]=\"entity\"\n          [records]=\"filteredRecords\"\n          [selectedRecordId]=\"selectedRecordId\"\n          [columns]=\"gridColumns\"\n          [height]=\"'100%'\"\n          [filterText]=\"debouncedFilterText\"\n          [sortState]=\"effectiveSortState\"\n          [serverSideSorting]=\"effectiveConfig.serverSideSorting\"\n          [gridState]=\"gridState\"\n          (recordSelected)=\"onRecordSelected($event)\"\n          (recordOpened)=\"onRecordOpened($event)\"\n          (sortChanged)=\"onSortChanged($event)\"\n          (gridStateChanged)=\"onGridStateChanged($event)\">\n        </mj-entity-grid>\n      } @else {\n        <mj-entity-cards\n          [entity]=\"entity\"\n          [records]=\"filteredRecords\"\n          [selectedRecordId]=\"selectedRecordId\"\n          [cardTemplate]=\"cardTemplate\"\n          [hiddenFieldMatches]=\"hiddenFieldMatches\"\n          [filterText]=\"debouncedFilterText\"\n          (recordSelected)=\"onRecordSelected($event)\"\n          (recordOpened)=\"onRecordOpened($event)\">\n        </mj-entity-cards>\n      }\n    }\n  </div>\n\n  <!-- Pagination - only show when there's more data to load OR we've loaded more than one page -->\n  @if (effectiveConfig.showPagination && entity && (pagination.hasMore || pagination.totalRecords > effectiveConfig.pageSize)) {\n    <mj-pagination\n      [pagination]=\"pagination\"\n      [loadedRecordCount]=\"filteredRecords.length\"\n      (loadMore)=\"onLoadMore()\">\n    </mj-pagination>\n  }\n</div>\n", styles: [".entity-viewer-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  background: #fafafa;\n}\n\n/* Header */\n.viewer-header {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  padding: 12px 16px;\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\n  flex-shrink: 0;\n}\n\n/* Filter */\n.filter-container {\n  flex: 1;\n  max-width: 400px;\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.filter-icon {\n  position: absolute;\n  left: 12px;\n  color: #9e9e9e;\n  font-size: 14px;\n  pointer-events: none;\n}\n\n.filter-input {\n  width: 100%;\n  padding: 8px 36px 8px 36px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  font-size: 14px;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n\n.filter-input:focus {\n  border-color: #1976d2;\n}\n\n.filter-input::placeholder {\n  color: #9e9e9e;\n}\n\n.clear-filter-btn {\n  position: absolute;\n  right: 8px;\n  width: 20px;\n  height: 20px;\n  border: none;\n  background: transparent;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #9e9e9e;\n  transition: all 0.15s ease;\n}\n\n.clear-filter-btn:hover {\n  background: #f5f5f5;\n  color: #616161;\n}\n\n/* Record Count */\n.record-count {\n  font-size: 13px;\n  color: #757575;\n  white-space: nowrap;\n}\n\n/* View Mode Toggle */\n.view-mode-toggle {\n  display: flex;\n  background: #f5f5f5;\n  border-radius: 6px;\n  padding: 2px;\n}\n\n.toggle-btn {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #757575;\n  transition: all 0.15s ease;\n}\n\n.toggle-btn:hover {\n  color: #424242;\n}\n\n.toggle-btn.active {\n  background: white;\n  color: #1976d2;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n/* Content */\n.viewer-content {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  position: relative;\n}\n\n/* Loading State */\n.loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\n/* Empty State */\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  color: #9e9e9e;\n  text-align: center;\n}\n\n.empty-state i {\n  font-size: 48px;\n  margin-bottom: 16px;\n  opacity: 0.5;\n}\n\n.empty-state p {\n  margin: 0;\n  font-size: 14px;\n}\n"] }]
+                }, template: "<div class=\"entity-viewer-container\" [style.height]=\"effectiveConfig.height\">\n  <!-- Header -->\n  @if (effectiveConfig.showFilter || effectiveConfig.showViewModeToggle || effectiveConfig.showRecordCount) {\n    <div class=\"viewer-header\">\n      <!-- Filter Input -->\n      @if (effectiveConfig.showFilter) {\n        <div class=\"filter-container\">\n          <i class=\"fa-solid fa-search filter-icon\"></i>\n          <input\n            type=\"text\"\n            class=\"filter-input\"\n            [placeholder]=\"effectiveConfig.filterPlaceholder\"\n            [value]=\"effectiveFilterText\"\n            (input)=\"onFilterChange($any($event.target).value)\"\n          />\n          @if (effectiveFilterText) {\n            <button class=\"clear-filter-btn\" (click)=\"clearFilter()\" title=\"Clear filter\">\n              <i class=\"fa-solid fa-times\"></i>\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Record Count -->\n      @if (effectiveConfig.showRecordCount && entity) {\n        <div class=\"record-count\">\n          @if (filteredRecordCount !== totalRecordCount) {\n            <span>{{ filteredRecordCount | number }} of {{ totalRecordCount | number }} records</span>\n          } @else {\n            <span>{{ totalRecordCount | number }} records</span>\n          }\n        </div>\n      }\n\n      <!-- View Mode Toggle -->\n      @if (effectiveConfig.showViewModeToggle) {\n        <div class=\"view-mode-toggle\">\n          <button\n            class=\"toggle-btn\"\n            [class.active]=\"effectiveViewMode === 'grid'\"\n            (click)=\"setViewMode('grid')\"\n            title=\"Grid View\">\n            <i class=\"fa-solid fa-list\"></i>\n          </button>\n          <button\n            class=\"toggle-btn\"\n            [class.active]=\"effectiveViewMode === 'cards'\"\n            (click)=\"setViewMode('cards')\"\n            title=\"Cards View\">\n            <i class=\"fa-solid fa-grip\"></i>\n          </button>\n          @if (hasDateFields) {\n            <button\n              class=\"toggle-btn\"\n              [class.active]=\"effectiveViewMode === 'timeline'\"\n              (click)=\"setViewMode('timeline')\"\n              title=\"Timeline View\">\n              <i class=\"fa-solid fa-timeline\"></i>\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Timeline Controls (only shown when timeline is active) -->\n      @if (effectiveViewMode === 'timeline' && hasDateFields) {\n        <!-- Date Field Selector -->\n        <div class=\"timeline-date-selector\">\n          <i class=\"fa-solid fa-calendar-days\"></i>\n          @if (availableDateFields.length === 1) {\n            <span class=\"date-field-label\">{{ selectedDateFieldDisplayName }}</span>\n          } @else {\n            <select\n              class=\"date-field-select\"\n              [value]=\"selectedTimelineDateField\"\n              (change)=\"setTimelineDateField($any($event.target).value)\">\n              @for (field of availableDateFields; track field.Name) {\n                <option [value]=\"field.Name\">{{ field.DisplayNameOrName }}</option>\n              }\n            </select>\n          }\n        </div>\n\n        <!-- Orientation Toggle -->\n        <div class=\"timeline-orientation-toggle\">\n          <button\n            class=\"toggle-btn\"\n            (click)=\"toggleTimelineOrientation()\"\n            [title]=\"timelineOrientation === 'vertical' ? 'Switch to Horizontal' : 'Switch to Vertical'\">\n            <i [class]=\"timelineOrientation === 'vertical' ? 'fa-solid fa-ellipsis-vertical' : 'fa-solid fa-ellipsis'\"></i>\n          </button>\n        </div>\n\n        <!-- Sort Order Toggle -->\n        <div class=\"timeline-sort-toggle\">\n          <button\n            class=\"toggle-btn\"\n            (click)=\"toggleTimelineSortOrder()\"\n            [title]=\"timelineSortOrder === 'desc' ? 'Showing Newest First (click for Oldest First)' : 'Showing Oldest First (click for Newest First)'\">\n            <i [class]=\"timelineSortOrder === 'desc' ? 'fa-solid fa-arrow-down-wide-short' : 'fa-solid fa-arrow-up-wide-short'\"></i>\n          </button>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Content -->\n  <div class=\"viewer-content\">\n    @if (isLoading && filteredRecords.length === 0) {\n      <!-- Initial loading state -->\n      <div class=\"loading-container\">\n        <mj-loading [text]=\"loadingMessage\" size=\"medium\"></mj-loading>\n      </div>\n    } @else if (!entity) {\n      <div class=\"empty-state\">\n        <i class=\"fa-solid fa-database\"></i>\n        <p>Select an entity to view records</p>\n      </div>\n    } @else if (filteredRecords.length === 0 && !isLoading) {\n      <div class=\"empty-state\">\n        <i class=\"fa-solid fa-inbox\"></i>\n        <p>{{ debouncedFilterText ? 'No matching records' : 'No records found' }}</p>\n      </div>\n    } @else {\n      <!-- Grid View - always rendered but hidden when not active to preserve state -->\n      <mj-entity-grid\n        [hidden]=\"effectiveViewMode !== 'grid'\"\n        [entity]=\"entity\"\n        [records]=\"filteredRecords\"\n        [selectedRecordId]=\"selectedRecordId\"\n        [columns]=\"gridColumns\"\n        [height]=\"'100%'\"\n        [filterText]=\"debouncedFilterText\"\n        [sortState]=\"effectiveSortState\"\n        [serverSideSorting]=\"effectiveConfig.serverSideSorting\"\n        [gridState]=\"gridState\"\n        (recordSelected)=\"onRecordSelected($event)\"\n        (recordOpened)=\"onRecordOpened($event)\"\n        (sortChanged)=\"onSortChanged($event)\"\n        (gridStateChanged)=\"onGridStateChanged($event)\">\n      </mj-entity-grid>\n\n      <!-- Cards View - always rendered but hidden when not active to preserve state -->\n      <mj-entity-cards\n        [hidden]=\"effectiveViewMode !== 'cards'\"\n        [entity]=\"entity\"\n        [records]=\"filteredRecords\"\n        [selectedRecordId]=\"selectedRecordId\"\n        [cardTemplate]=\"cardTemplate\"\n        [hiddenFieldMatches]=\"hiddenFieldMatches\"\n        [filterText]=\"debouncedFilterText\"\n        (recordSelected)=\"onRecordSelected($event)\"\n        (recordOpened)=\"onRecordOpened($event)\">\n      </mj-entity-cards>\n\n      <!-- Timeline View - only created when timeline mode is active -->\n      @if (hasDateFields && effectiveViewMode === 'timeline') {\n        <mj-timeline\n          [groups]=\"timelineGroups\"\n          [orientation]=\"timelineOrientation\"\n          [layout]=\"timelineOrientation === 'vertical' ? 'alternating' : 'single'\"\n          [sortOrder]=\"timelineSortOrder\"\n          [segmentGrouping]=\"timelineSegmentGrouping\"\n          [segmentsCollapsible]=\"true\"\n          [segmentsDefaultExpanded]=\"true\"\n          [selectedEventId]=\"timelineSelectedEventId\"\n          (afterEventClick)=\"onTimelineEventClick($event)\">\n        </mj-timeline>\n      }\n    }\n  </div>\n\n  <!-- Pagination - only show when there's more data to load OR we've loaded more than one page -->\n  @if (effectiveConfig.showPagination && entity && (pagination.hasMore || pagination.totalRecords > effectiveConfig.pageSize)) {\n    <mj-pagination\n      [pagination]=\"pagination\"\n      [loadedRecordCount]=\"filteredRecords.length\"\n      (loadMore)=\"onLoadMore()\">\n    </mj-pagination>\n  }\n</div>\n", styles: [".entity-viewer-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  background: #fafafa;\n}\n\n/* Header */\n.viewer-header {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  padding: 12px 16px;\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\n  flex-shrink: 0;\n}\n\n/* Filter */\n.filter-container {\n  flex: 1;\n  max-width: 400px;\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.filter-icon {\n  position: absolute;\n  left: 12px;\n  color: #9e9e9e;\n  font-size: 14px;\n  pointer-events: none;\n}\n\n.filter-input {\n  width: 100%;\n  padding: 8px 36px 8px 36px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  font-size: 14px;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n\n.filter-input:focus {\n  border-color: #1976d2;\n}\n\n.filter-input::placeholder {\n  color: #9e9e9e;\n}\n\n.clear-filter-btn {\n  position: absolute;\n  right: 8px;\n  width: 20px;\n  height: 20px;\n  border: none;\n  background: transparent;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #9e9e9e;\n  transition: all 0.15s ease;\n}\n\n.clear-filter-btn:hover {\n  background: #f5f5f5;\n  color: #616161;\n}\n\n/* Record Count */\n.record-count {\n  font-size: 13px;\n  color: #757575;\n  white-space: nowrap;\n}\n\n/* View Mode Toggle */\n.view-mode-toggle {\n  display: flex;\n  background: #f5f5f5;\n  border-radius: 6px;\n  padding: 2px;\n}\n\n.toggle-btn {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #757575;\n  transition: all 0.15s ease;\n}\n\n.toggle-btn:hover {\n  color: #424242;\n}\n\n.toggle-btn.active {\n  background: white;\n  color: #1976d2;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n/* Timeline Date Field Selector */\n.timeline-date-selector {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 13px;\n  color: #616161;\n}\n\n.timeline-date-selector i {\n  color: #9e9e9e;\n}\n\n.date-field-label {\n  color: #424242;\n  font-weight: 500;\n}\n\n.date-field-select {\n  padding: 4px 8px;\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  font-size: 13px;\n  background: white;\n  color: #424242;\n  cursor: pointer;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n\n.date-field-select:hover {\n  border-color: #bdbdbd;\n}\n\n.date-field-select:focus {\n  border-color: #1976d2;\n}\n\n/* Timeline Orientation Toggle */\n.timeline-orientation-toggle {\n  display: flex;\n  background: #f5f5f5;\n  border-radius: 6px;\n  padding: 2px;\n}\n\n/* Content */\n.viewer-content {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  position: relative;\n  background: white;\n}\n\n/* Loading State */\n.loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\n/* Empty State */\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  color: #9e9e9e;\n  text-align: center;\n}\n\n.empty-state i {\n  font-size: 48px;\n  margin-bottom: 16px;\n  opacity: 0.5;\n}\n\n.empty-state p {\n  margin: 0;\n  font-size: 14px;\n}\n\n/* Hidden components should not display - ensure [hidden] attribute works properly */\nmj-entity-grid[hidden],\nmj-entity-cards[hidden],\nmj-timeline[hidden] {\n  display: none !important;\n}\n\n/* Visible view components should fill available space */\nmj-entity-grid:not([hidden]),\nmj-entity-cards:not([hidden]),\nmj-timeline:not([hidden]) {\n  display: block;\n  height: 100%;\n  width: 100%;\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }], { entity: [{
             type: Input
         }], records: [{
@@ -862,6 +1276,8 @@ export class EntityViewerComponent {
             type: Input
         }], gridState: [{
             type: Input
+        }], timelineConfig: [{
+            type: Input
         }], recordSelected: [{
             type: Output
         }], recordOpened: [{
@@ -878,6 +1294,8 @@ export class EntityViewerComponent {
             type: Output
         }], gridStateChanged: [{
             type: Output
+        }], timelineConfigChange: [{
+            type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EntityViewerComponent, { className: "EntityViewerComponent", filePath: "src/lib/entity-viewer/entity-viewer.component.ts", lineNumber: 65 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EntityViewerComponent, { className: "EntityViewerComponent", filePath: "src/lib/entity-viewer/entity-viewer.component.ts", lineNumber: 69 }); })();
 //# sourceMappingURL=entity-viewer.component.js.map