@memberjunction/ng-timeline 2.122.1 → 2.122.2

package/dist/lib/component/timeline.component.js

@@ -1,200 +1,1972 @@
-import { Component, Input } from '@angular/core';
-import { RunView } from '@memberjunction/core';
+/**
+ * @fileoverview MJ Timeline Component - A flexible, responsive timeline for Angular.
+ *
+ * This component displays chronological data in a timeline format with support for:
+ * - Multiple data sources (MemberJunction entities or plain objects)
+ * - Virtual scrolling for large datasets
+ * - Collapsible time segments
+ * - Rich event system with BeforeX/AfterX pattern
+ * - Full keyboard navigation and accessibility
+ * - Responsive design for all screen sizes
+ *
+ * @module @memberjunction/ng-timeline
+ */
+import { Component, Input, Output, EventEmitter, ViewChild, ContentChild, ChangeDetectionStrategy } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil, debounceTime } from 'rxjs/operators';
+import { DEFAULT_CARD_CONFIG, DEFAULT_VIRTUAL_SCROLL_CONFIG, DEFAULT_VIRTUAL_SCROLL_STATE } from '../types';
+import { getFieldValue } from '../timeline-group';
 import * as i0 from "@angular/core";
-import * as i1 from "@progress/kendo-angular-layout";
+import * as i1 from "@angular/common";
+const _c0 = ["cardTemplate"];
+const _c1 = ["headerTemplate"];
+const _c2 = ["bodyTemplate"];
+const _c3 = ["actionsTemplate"];
+const _c4 = ["segmentHeaderTemplate"];
+const _c5 = ["emptyTemplate"];
+const _c6 = ["loadingTemplate"];
+const _c7 = ["scrollContainer"];
+const _c8 = a0 => ({ segment: a0 });
+const _c9 = (a0, a1, a2, a3) => ({ event: a0, index: a1, isOdd: a2, globalIndex: a3 });
+const _c10 = (a0, a1) => ({ event: a0, group: a1 });
+const _c11 = a0 => ({ event: a0 });
+const _c12 = (a0, a1) => ({ event: a0, actions: a1 });
+function TimelineComponent_ng_container_2_ng_container_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function TimelineComponent_ng_container_2_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵtemplate(1, TimelineComponent_ng_container_2_ng_container_1_ng_container_1_Template, 1, 0, "ng-container", 15);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.loadingTemplate);
+} }
+function TimelineComponent_ng_container_2_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 16);
+    i0.ɵɵelement(1, "div", 17);
+    i0.ɵɵelementStart(2, "span", 18);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.loadingMessage);
+} }
+function TimelineComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵtemplate(1, TimelineComponent_ng_container_2_ng_container_1_Template, 2, 1, "ng-container", 14)(2, TimelineComponent_ng_container_2_ng_template_2_Template, 4, 1, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const defaultLoading_r3 = i0.ɵɵreference(3);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.loadingTemplate)("ngIfElse", defaultLoading_r3);
+} }
+function TimelineComponent_ng_container_3_ng_container_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function TimelineComponent_ng_container_3_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵtemplate(1, TimelineComponent_ng_container_3_ng_container_1_ng_container_1_Template, 1, 0, "ng-container", 15);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.emptyTemplate);
+} }
+function TimelineComponent_ng_container_3_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 19);
+    i0.ɵɵelement(1, "i", 20);
+    i0.ɵɵelementStart(2, "span", 21);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.emptyIcon);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.emptyMessage);
+} }
+function TimelineComponent_ng_container_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵtemplate(1, TimelineComponent_ng_container_3_ng_container_1_Template, 2, 1, "ng-container", 14)(2, TimelineComponent_ng_container_3_ng_template_2_Template, 4, 3, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const defaultEmpty_r4 = i0.ɵɵreference(3);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.emptyTemplate)("ngIfElse", defaultEmpty_r4);
+} }
+function TimelineComponent_ng_container_4_ng_container_1_div_1_ng_container_2_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function TimelineComponent_ng_container_4_ng_container_1_div_1_ng_container_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵtemplate(1, TimelineComponent_ng_container_4_ng_container_1_div_1_ng_container_2_ng_container_1_Template, 1, 0, "ng-container", 28);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const segment_r6 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.segmentHeaderTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c8, segment_r6));
+} }
+function TimelineComponent_ng_container_4_ng_container_1_div_1_ng_template_3_span_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 33);
+    i0.ɵɵelement(1, "i");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const segment_r6 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(segment_r6.isExpanded ? "fa-solid fa-chevron-down" : "fa-solid fa-chevron-right");
+} }
+function TimelineComponent_ng_container_4_ng_container_1_div_1_ng_template_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, TimelineComponent_ng_container_4_ng_container_1_div_1_ng_template_3_span_0_Template, 2, 2, "span", 29);
+    i0.ɵɵelementStart(1, "span", 30);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 31);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(5, "span", 32);
+} if (rf & 2) {
+    const segment_r6 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngIf", ctx_r1.segmentsCollapsible);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(segment_r6.label);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate2("(", segment_r6.eventCount, " ", segment_r6.eventCount === 1 ? "event" : "events", ")");
+} }
+function TimelineComponent_ng_container_4_ng_container_1_div_1_ng_container_7_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function TimelineComponent_ng_container_4_ng_container_1_div_1_ng_container_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵtemplate(1, TimelineComponent_ng_container_4_ng_container_1_div_1_ng_container_7_ng_container_1_Template, 1, 0, "ng-container", 28);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const event_r7 = ctx.$implicit;
+    const eventIndex_r8 = ctx.index;
+    const isOdd_r9 = ctx.odd;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    const eventCard_r10 = i0.ɵɵreference(8);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngTemplateOutlet", eventCard_r10)("ngTemplateOutletContext", i0.ɵɵpureFunction4(2, _c9, event_r7, eventIndex_r8, isOdd_r9, ctx_r1.getGlobalIndex(event_r7)));
+} }
+function TimelineComponent_ng_container_4_ng_container_1_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 23)(1, "div", 24);
+    i0.ɵɵlistener("click", function TimelineComponent_ng_container_4_ng_container_1_div_1_Template_div_click_1_listener() { const segment_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onSegmentClick(segment_r6)); });
+    i0.ɵɵtemplate(2, TimelineComponent_ng_container_4_ng_container_1_div_1_ng_container_2_Template, 2, 4, "ng-container", 14)(3, TimelineComponent_ng_container_4_ng_container_1_div_1_ng_template_3_Template, 6, 4, "ng-template", null, 4, i0.ɵɵtemplateRefExtractor);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 25)(6, "div", 26);
+    i0.ɵɵtemplate(7, TimelineComponent_ng_container_4_ng_container_1_div_1_ng_container_7_Template, 2, 7, "ng-container", 27);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const segment_r6 = ctx.$implicit;
+    const segmentIndex_r11 = ctx.index;
+    const defaultSegmentHeader_r12 = i0.ɵɵreference(4);
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("mj-timeline__segment--collapsed", !segment_r6.isExpanded);
+    i0.ɵɵattribute("data-segment-label", segment_r6.label);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("mj-timeline__segment-header--clickable", ctx_r1.segmentsCollapsible);
+    i0.ɵɵattribute("aria-expanded", segment_r6.isExpanded)("aria-controls", "segment-content-" + segmentIndex_r11);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.segmentHeaderTemplate)("ngIfElse", defaultSegmentHeader_r12);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("mj-timeline__segment-content--hidden", !segment_r6.isExpanded);
+    i0.ɵɵproperty("id", "segment-content-" + segmentIndex_r11);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngForOf", segment_r6.events)("ngForTrackBy", ctx_r1.trackByEventId);
+} }
+function TimelineComponent_ng_container_4_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵtemplate(1, TimelineComponent_ng_container_4_ng_container_1_div_1_Template, 8, 14, "div", 22);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r1.segments)("ngForTrackBy", ctx_r1.trackBySegmentLabel);
+} }
+function TimelineComponent_ng_container_4_ng_container_2_ng_container_2_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function TimelineComponent_ng_container_4_ng_container_2_ng_container_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵtemplate(1, TimelineComponent_ng_container_4_ng_container_2_ng_container_2_ng_container_1_Template, 1, 0, "ng-container", 28);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const event_r13 = ctx.$implicit;
+    const eventIndex_r14 = ctx.index;
+    const isOdd_r15 = ctx.odd;
+    i0.ɵɵnextContext(3);
+    const eventCard_r10 = i0.ɵɵreference(8);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngTemplateOutlet", eventCard_r10)("ngTemplateOutletContext", i0.ɵɵpureFunction4(2, _c9, event_r13, eventIndex_r14, isOdd_r15, eventIndex_r14));
+} }
+function TimelineComponent_ng_container_4_ng_container_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "div", 26);
+    i0.ɵɵtemplate(2, TimelineComponent_ng_container_4_ng_container_2_ng_container_2_Template, 2, 7, "ng-container", 27);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngForOf", ctx_r1.allEvents)("ngForTrackBy", ctx_r1.trackByEventId);
+} }
+function TimelineComponent_ng_container_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵtemplate(1, TimelineComponent_ng_container_4_ng_container_1_Template, 2, 2, "ng-container", 11)(2, TimelineComponent_ng_container_4_ng_container_2_Template, 3, 2, "ng-container", 11);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.segmentGrouping !== "none");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.segmentGrouping === "none");
+} }
+function TimelineComponent_div_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 34);
+} }
+function TimelineComponent_div_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 35);
+    i0.ɵɵelement(1, "div", 36);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.virtualScroll.loadingMessage);
+} }
+function TimelineComponent_ng_template_7_div_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 43);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const event_r17 = i0.ɵɵnextContext().event;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatDate(event_r17.date), " ");
+} }
+function TimelineComponent_ng_template_7_ng_container_6_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function TimelineComponent_ng_template_7_ng_container_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵtemplate(1, TimelineComponent_ng_template_7_ng_container_6_ng_container_1_Template, 1, 0, "ng-container", 28);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const event_r17 = i0.ɵɵnextContext().event;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.cardTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c10, event_r17, ctx_r1.groups[event_r17.groupIndex]));
+} }
+function TimelineComponent_ng_template_7_ng_template_7_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 50);
+    i0.ɵɵelement(1, "img", 51);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const event_r17 = i0.ɵɵnextContext(2).event;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("mj-timeline__card-image--small", ctx_r1.getEffectiveCardConfig(event_r17).imageSize === "small")("mj-timeline__card-image--medium", ctx_r1.getEffectiveCardConfig(event_r17).imageSize === "medium")("mj-timeline__card-image--large", ctx_r1.getEffectiveCardConfig(event_r17).imageSize === "large");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("src", event_r17.imageUrl, i0.ɵɵsanitizeUrl)("alt", event_r17.title);
+} }
+function TimelineComponent_ng_template_7_ng_template_7_ng_container_3_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function TimelineComponent_ng_template_7_ng_template_7_ng_container_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵtemplate(1, TimelineComponent_ng_template_7_ng_template_7_ng_container_3_ng_container_1_Template, 1, 0, "ng-container", 28);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const event_r17 = i0.ɵɵnextContext(2).event;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.headerTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c11, event_r17));
+} }
+function TimelineComponent_ng_template_7_ng_template_7_ng_template_4_span_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 58);
+    i0.ɵɵelement(1, "i");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const event_r17 = i0.ɵɵnextContext(3).event;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("color", ctx_r1.getColor(event_r17));
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.getIcon(event_r17));
+} }
+function TimelineComponent_ng_template_7_ng_template_7_ng_template_4_span_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 59);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const event_r17 = i0.ɵɵnextContext(3).event;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", event_r17.subtitle, " ");
+} }
+function TimelineComponent_ng_template_7_ng_template_7_ng_template_4_span_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 60);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const event_r17 = i0.ɵɵnextContext(3).event;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatDate(event_r17.date, ctx_r1.getEffectiveCardConfig(event_r17).dateFormat), " ");
+} }
+function TimelineComponent_ng_template_7_ng_template_7_ng_template_4_button_6_Template(rf, ctx) { if (rf & 1) {
+    const _r22 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 61);
+    i0.ɵɵlistener("click", function TimelineComponent_ng_template_7_ng_template_7_ng_template_4_button_6_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r22 = i0.ɵɵnextContext(3); const event_r17 = ctx_r22.event; const globalIndex_r19 = ctx_r22.globalIndex; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onToggleExpand(event_r17, globalIndex_r19, $event)); });
+    i0.ɵɵelement(1, "i");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const event_r17 = i0.ɵɵnextContext(3).event;
+    i0.ɵɵattribute("aria-label", event_r17.isExpanded ? "Collapse" : "Expand");
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(event_r17.isExpanded ? "fa-solid fa-chevron-up" : "fa-solid fa-chevron-down");
+} }
+function TimelineComponent_ng_template_7_ng_template_7_ng_template_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, TimelineComponent_ng_template_7_ng_template_7_ng_template_4_span_0_Template, 2, 4, "span", 52);
+    i0.ɵɵelementStart(1, "div", 53)(2, "h4", 54);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(4, TimelineComponent_ng_template_7_ng_template_7_ng_template_4_span_4_Template, 2, 1, "span", 55)(5, TimelineComponent_ng_template_7_ng_template_7_ng_template_4_span_5_Template, 2, 1, "span", 56);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(6, TimelineComponent_ng_template_7_ng_template_7_ng_template_4_button_6_Template, 2, 3, "button", 57);
+} if (rf & 2) {
+    const event_r17 = i0.ɵɵnextContext(2).event;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngIf", ctx_r1.getEffectiveCardConfig(event_r17).showIcon);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(event_r17.title);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", event_r17.subtitle && ctx_r1.getEffectiveCardConfig(event_r17).showSubtitle);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.getEffectiveCardConfig(event_r17).showDate && ctx_r1.layout !== "alternating");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.getEffectiveCardConfig(event_r17).collapsible);
+} }
+function TimelineComponent_ng_template_7_ng_template_7_div_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 62);
+    i0.ɵɵelement(1, "img", 51);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const event_r17 = i0.ɵɵnextContext(2).event;
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("src", event_r17.imageUrl, i0.ɵɵsanitizeUrl)("alt", event_r17.title);
+} }
+function TimelineComponent_ng_template_7_ng_template_7_ng_container_8_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function TimelineComponent_ng_template_7_ng_template_7_ng_container_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵtemplate(1, TimelineComponent_ng_template_7_ng_template_7_ng_container_8_ng_container_1_Template, 1, 0, "ng-container", 28);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const event_r17 = i0.ɵɵnextContext(2).event;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.bodyTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c11, event_r17));
+} }
+function TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_0_ng_container_1_i_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 72);
+} if (rf & 2) {
+    const field_r24 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassMap(field_r24.icon);
+} }
+function TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_0_ng_container_1_span_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 73);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const field_r24 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("", field_r24.label, ":");
+} }
+function TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_0_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "div", 68);
+    i0.ɵɵtemplate(2, TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_0_ng_container_1_i_2_Template, 1, 2, "i", 69)(3, TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_0_ng_container_1_span_3_Template, 2, 1, "span", 70);
+    i0.ɵɵelementStart(4, "span", 71);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const field_r24 = ctx.$implicit;
+    const event_r17 = i0.ɵɵnextContext(4).event;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(field_r24.cssClass);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", field_r24.icon);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !field_r24.hideLabel && field_r24.label);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.getFieldValue(event_r17, field_r24));
+} }
+function TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 66);
+    i0.ɵɵtemplate(1, TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_0_ng_container_1_Template, 6, 5, "ng-container", 67);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const event_r17 = i0.ɵɵnextContext(3).event;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r1.getEffectiveCardConfig(event_r17).summaryFields);
+} }
+function TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelement(1, "div", 75);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const event_r17 = i0.ɵɵnextContext(4).event;
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("innerHTML", event_r17.description, i0.ɵɵsanitizeHtml);
+} }
+function TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_1_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const event_r17 = i0.ɵɵnextContext(4).event;
+    i0.ɵɵtextInterpolate1(" ", event_r17.description, " ");
+} }
+function TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 74);
+    i0.ɵɵtemplate(1, TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_1_ng_container_1_Template, 2, 1, "ng-container", 14)(2, TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_1_ng_template_2_Template, 1, 1, "ng-template", null, 8, i0.ɵɵtemplateRefExtractor);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    let tmp_15_0;
+    const plainDescription_r25 = i0.ɵɵreference(3);
+    const event_r17 = i0.ɵɵnextContext(3).event;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("-webkit-line-clamp", ctx_r1.getEffectiveCardConfig(event_r17).descriptionMaxLines || null);
+    i0.ɵɵclassProp("mj-timeline__card-description--clamped", ((tmp_15_0 = ctx_r1.getEffectiveCardConfig(event_r17).descriptionMaxLines) !== null && tmp_15_0 !== undefined ? tmp_15_0 : 0) > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.getEffectiveCardConfig(event_r17).allowHtmlDescription)("ngIfElse", plainDescription_r25);
+} }
+function TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_2_ng_container_1_i_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 72);
+} if (rf & 2) {
+    const field_r26 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassMap(field_r26.icon);
+} }
+function TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_2_ng_container_1_span_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 73);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const field_r26 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("", field_r26.label || field_r26.fieldName, ":");
+} }
+function TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_2_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "div", 68);
+    i0.ɵɵtemplate(2, TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_2_ng_container_1_i_2_Template, 1, 2, "i", 69)(3, TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_2_ng_container_1_span_3_Template, 2, 1, "span", 70);
+    i0.ɵɵelementStart(4, "span", 71);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const field_r26 = ctx.$implicit;
+    const event_r17 = i0.ɵɵnextContext(4).event;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(field_r26.cssClass);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", field_r26.icon);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !field_r26.hideLabel);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.getFieldValue(event_r17, field_r26));
+} }
+function TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 76);
+    i0.ɵɵtemplate(1, TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_2_ng_container_1_Template, 6, 5, "ng-container", 67);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const event_r17 = i0.ɵɵnextContext(3).event;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r1.getEffectiveCardConfig(event_r17).expandedFields);
+} }
+function TimelineComponent_ng_template_7_ng_template_7_ng_template_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_0_Template, 2, 1, "div", 63)(1, TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_1_Template, 4, 6, "div", 64)(2, TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_2_Template, 2, 1, "div", 65);
+} if (rf & 2) {
+    let tmp_12_0;
+    let tmp_14_0;
+    const event_r17 = i0.ɵɵnextContext(2).event;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngIf", (tmp_12_0 = ctx_r1.getEffectiveCardConfig(event_r17).summaryFields) == null ? null : tmp_12_0.length);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", event_r17.description && event_r17.isExpanded);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", event_r17.isExpanded && ((tmp_14_0 = ctx_r1.getEffectiveCardConfig(event_r17).expandedFields) == null ? null : tmp_14_0.length));
+} }
+function TimelineComponent_ng_template_7_ng_template_7_div_11_ng_container_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function TimelineComponent_ng_template_7_ng_template_7_div_11_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵtemplate(1, TimelineComponent_ng_template_7_ng_template_7_div_11_ng_container_1_ng_container_1_Template, 1, 0, "ng-container", 28);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const event_r17 = i0.ɵɵnextContext(3).event;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.actionsTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c12, event_r17, ctx_r1.getActions(event_r17)));
+} }
+function TimelineComponent_ng_template_7_ng_template_7_div_11_ng_template_2_button_0_i_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i");
+} if (rf & 2) {
+    const action_r28 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassMap(action_r28.icon);
+} }
+function TimelineComponent_ng_template_7_ng_template_7_div_11_ng_template_2_button_0_Template(rf, ctx) { if (rf & 1) {
+    const _r27 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 79);
+    i0.ɵɵlistener("click", function TimelineComponent_ng_template_7_ng_template_7_div_11_ng_template_2_button_0_Template_button_click_0_listener($event) { const action_r28 = i0.ɵɵrestoreView(_r27).$implicit; const ctx_r22 = i0.ɵɵnextContext(4); const event_r17 = ctx_r22.event; const globalIndex_r19 = ctx_r22.globalIndex; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onActionClick(event_r17, action_r28, globalIndex_r19, $event)); });
+    i0.ɵɵtemplate(1, TimelineComponent_ng_template_7_ng_template_7_div_11_ng_template_2_button_0_i_1_Template, 1, 2, "i", 80);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const action_r28 = ctx.$implicit;
+    i0.ɵɵclassMap(action_r28.cssClass);
+    i0.ɵɵclassProp("mj-timeline__action--primary", action_r28.variant === "primary")("mj-timeline__action--secondary", action_r28.variant === "secondary" || !action_r28.variant)("mj-timeline__action--danger", action_r28.variant === "danger")("mj-timeline__action--link", action_r28.variant === "link");
+    i0.ɵɵproperty("disabled", action_r28.disabled)("title", action_r28.tooltip || "");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", action_r28.icon);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(action_r28.label);
+} }
+function TimelineComponent_ng_template_7_ng_template_7_div_11_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, TimelineComponent_ng_template_7_ng_template_7_div_11_ng_template_2_button_0_Template, 4, 14, "button", 78);
+} if (rf & 2) {
+    const event_r17 = i0.ɵɵnextContext(3).event;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngForOf", ctx_r1.getActions(event_r17));
+} }
+function TimelineComponent_ng_template_7_ng_template_7_div_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 77);
+    i0.ɵɵtemplate(1, TimelineComponent_ng_template_7_ng_template_7_div_11_ng_container_1_Template, 2, 5, "ng-container", 14)(2, TimelineComponent_ng_template_7_ng_template_7_div_11_ng_template_2_Template, 1, 1, "ng-template", null, 9, i0.ɵɵtemplateRefExtractor);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const defaultActions_r29 = i0.ɵɵreference(3);
+    const event_r17 = i0.ɵɵnextContext(2).event;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("mj-timeline__card-actions--hover-only", ctx_r1.getEffectiveCardConfig(event_r17).actionsOnHover);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.actionsTemplate)("ngIfElse", defaultActions_r29);
+} }
+function TimelineComponent_ng_template_7_ng_template_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 44);
+    i0.ɵɵtemplate(1, TimelineComponent_ng_template_7_ng_template_7_div_1_Template, 2, 8, "div", 45);
+    i0.ɵɵelementStart(2, "div", 46);
+    i0.ɵɵtemplate(3, TimelineComponent_ng_template_7_ng_template_7_ng_container_3_Template, 2, 4, "ng-container", 14)(4, TimelineComponent_ng_template_7_ng_template_7_ng_template_4_Template, 7, 5, "ng-template", null, 6, i0.ɵɵtemplateRefExtractor);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(6, TimelineComponent_ng_template_7_ng_template_7_div_6_Template, 2, 2, "div", 47);
+    i0.ɵɵelementStart(7, "div", 48);
+    i0.ɵɵtemplate(8, TimelineComponent_ng_template_7_ng_template_7_ng_container_8_Template, 2, 4, "ng-container", 14)(9, TimelineComponent_ng_template_7_ng_template_7_ng_template_9_Template, 3, 3, "ng-template", null, 7, i0.ɵɵtemplateRefExtractor);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(11, TimelineComponent_ng_template_7_ng_template_7_div_11_Template, 4, 4, "div", 49);
+} if (rf & 2) {
+    const defaultHeader_r30 = i0.ɵɵreference(5);
+    const defaultBody_r31 = i0.ɵɵreference(10);
+    const event_r17 = i0.ɵɵnextContext().event;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", event_r17.imageUrl && ctx_r1.getEffectiveCardConfig(event_r17).imagePosition === "left");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r1.headerTemplate)("ngIfElse", defaultHeader_r30);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngIf", event_r17.imageUrl && ctx_r1.getEffectiveCardConfig(event_r17).imagePosition === "top");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("mj-timeline__card-body--collapsed", !event_r17.isExpanded && ctx_r1.getEffectiveCardConfig(event_r17).collapsible);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.bodyTemplate)("ngIfElse", defaultBody_r31);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngIf", ctx_r1.getActions(event_r17).length > 0);
+} }
+function TimelineComponent_ng_template_7_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 37)(1, "div", 38);
+    i0.ɵɵelement(2, "i", 39);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(3, "div", 40);
+    i0.ɵɵtemplate(4, TimelineComponent_ng_template_7_div_4_Template, 2, 1, "div", 41);
+    i0.ɵɵelementStart(5, "div", 42);
+    i0.ɵɵlistener("click", function TimelineComponent_ng_template_7_Template_div_click_5_listener($event) { const ctx_r17 = i0.ɵɵrestoreView(_r16); const event_r17 = ctx_r17.event; const globalIndex_r19 = ctx_r17.globalIndex; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onEventClick(event_r17, globalIndex_r19, $event)); })("mouseenter", function TimelineComponent_ng_template_7_Template_div_mouseenter_5_listener($event) { const ctx_r19 = i0.ɵɵrestoreView(_r16); const event_r17 = ctx_r19.event; const globalIndex_r19 = ctx_r19.globalIndex; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onEventMouseEnter(event_r17, globalIndex_r19, $event)); })("mouseleave", function TimelineComponent_ng_template_7_Template_div_mouseleave_5_listener($event) { const ctx_r20 = i0.ɵɵrestoreView(_r16); const event_r17 = ctx_r20.event; const globalIndex_r19 = ctx_r20.globalIndex; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onEventMouseLeave(event_r17, globalIndex_r19, $event)); });
+    i0.ɵɵtemplate(6, TimelineComponent_ng_template_7_ng_container_6_Template, 2, 5, "ng-container", 14)(7, TimelineComponent_ng_template_7_ng_template_7_Template, 12, 9, "ng-template", null, 5, i0.ɵɵtemplateRefExtractor);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const event_r17 = ctx.event;
+    const isOdd_r32 = ctx.isOdd;
+    const globalIndex_r19 = ctx.globalIndex;
+    const defaultCard_r33 = i0.ɵɵreference(8);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("mj-timeline__event--odd", isOdd_r32 && ctx_r1.layout === "alternating")("mj-timeline__event--even", !isOdd_r32 && ctx_r1.layout === "alternating")("mj-timeline__event--expanded", event_r17.isExpanded)("mj-timeline__event--focused", ctx_r1.focusedEventIndex === globalIndex_r19);
+    i0.ɵɵattribute("data-event-id", event_r17.id)("aria-expanded", event_r17.isExpanded);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("background-color", ctx_r1.getColor(event_r17));
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.getIcon(event_r17));
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("background-color", ctx_r1.getColor(event_r17));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.layout === "alternating");
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.getEffectiveCardConfig(event_r17).cssClass);
+    i0.ɵɵstyleProp("max-width", ctx_r1.getEffectiveCardConfig(event_r17).maxWidth)("min-width", ctx_r1.getEffectiveCardConfig(event_r17).minWidth)("border-left-color", ctx_r1.getColor(event_r17));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.cardTemplate)("ngIfElse", defaultCard_r33);
+} }
+// ============================================================================
+// AUTO-ASSIGNED COLORS FOR GROUPS
+// ============================================================================
+const AUTO_COLORS = [
+    '#1976d2', // Blue
+    '#388e3c', // Green
+    '#f57c00', // Orange
+    '#7b1fa2', // Purple
+    '#c2185b', // Pink
+    '#00796b', // Teal
+    '#5d4037', // Brown
+    '#455a64', // Blue Grey
+    '#d32f2f', // Red
+    '#0097a7' // Cyan
+];
+const DEFAULT_ICONS = [
+    'fa-solid fa-circle',
+    'fa-solid fa-square',
+    'fa-solid fa-diamond',
+    'fa-solid fa-star',
+    'fa-solid fa-heart'
+];
+// ============================================================================
+// TIMELINE COMPONENT
+// ============================================================================
 /**
+ * MJ Timeline Component - Displays chronological data in a rich, interactive timeline.
+ *
+ * The timeline component supports multiple data groups, virtual scrolling for large
+ * datasets, collapsible time segments, and a comprehensive event system that allows
+ * container components to intercept and modify behavior.
  *
+ * @example Basic usage
+ * ```html
+ * <mj-timeline [groups]="myGroups"></mj-timeline>
+ * ```
+ *
+ * @example Full configuration
+ * ```html
+ * <mj-timeline
+ *   [groups]="groups"
+ *   orientation="vertical"
+ *   layout="alternating"
+ *   sortOrder="desc"
+ *   segmentGrouping="month"
+ *   [segmentsCollapsible]="true"
+ *   [virtualScroll]="{ enabled: true, batchSize: 25 }"
+ *   (beforeEventClick)="onBeforeClick($event)"
+ *   (afterActionClick)="onAction($event)">
+ *
+ *   <ng-template #emptyTemplate>
+ *     <div class="custom-empty">No events found</div>
+ *   </ng-template>
+ *
+ * </mj-timeline>
+ * ```
  */
-export class TimelineGroup {
+export class TimelineComponent {
+    cdr;
+    elementRef;
+    ngZone;
+    // ============================================================================
+    // INPUTS - DATA
+    // ============================================================================
     /**
-     * Entity name for the type of records to be displayed in this group
+     * Array of timeline groups to display.
+     * Each group defines a data source and display configuration.
      */
-    EntityName;
+    get groups() {
+        return this._groups;
+    }
+    set groups(value) {
+        this._groups = value || [];
+        if (this._initialized && this.allowLoad) {
+            this.refresh();
+        }
+    }
+    _groups = [];
     /**
-     * Specifies if the data will come from a provided array of BaseEntity objects - the EntityObjects array, or alternatively, from this object running its own view against the provided EntityName, optionally with a provided Filter (or without).
+     * Controls whether data loading is allowed.
+     * Set to false to defer loading until ready.
+     * @default true
      */
-    DataSourceType = 'entity';
+    get allowLoad() {
+        return this._allowLoad;
+    }
+    set allowLoad(value) {
+        const wasDisabled = !this._allowLoad;
+        this._allowLoad = value;
+        if (value && wasDisabled && this._initialized && !this._hasLoaded) {
+            this.refresh();
+        }
+    }
+    _allowLoad = true;
+    // ============================================================================
+    // INPUTS - LAYOUT
+    // ============================================================================
+    /**
+     * Timeline orientation.
+     * - `vertical`: Events displayed top-to-bottom
+     * - `horizontal`: Events displayed left-to-right
+     * @default 'vertical'
+     */
+    orientation = 'vertical';
+    /**
+     * Layout mode for vertical timeline.
+     * - `single`: All cards on one side
+     * - `alternating`: Cards alternate sides
+     * @default 'single'
+     */
+    layout = 'single';
     /**
-     * An optional filter that will be applied to the entity specified to reduce the number of records displayed
+     * Sort order for events.
+     * - `desc`: Newest first
+     * - `asc`: Oldest first
+     * @default 'desc'
      */
-    Filter;
+    sortOrder = 'desc';
     /**
-     * The actual data you want displayed in this group. This is an array of BaseEntity objects that will be displayed in the timeline. You can populate this array from a view or any other source.
+     * How to group events into time segments.
+     * @default 'month'
      */
-    EntityObjects = [];
+    segmentGrouping = 'month';
+    // ============================================================================
+    // INPUTS - CARD DEFAULTS
+    // ============================================================================
     /**
-     * The name of the field in the entity that contains the title of the record that will be displayed in the timeline
+     * Default card configuration applied to all groups.
+     * Individual groups can override these settings.
      */
-    TitleFieldName;
+    defaultCardConfig = { ...DEFAULT_CARD_CONFIG };
+    // ============================================================================
+    // INPUTS - VIRTUAL SCROLLING
+    // ============================================================================
     /**
-     * The name of the field in the entity that contains the date that will be used for the ordering in the timeline
+     * Virtual scrolling configuration.
      */
-    DateFieldName;
+    virtualScroll = { ...DEFAULT_VIRTUAL_SCROLL_CONFIG };
+    // ============================================================================
+    // INPUTS - SEGMENTS
+    // ============================================================================
     /**
-     * Use standard or custom icons, if custom is specified, the DisplayIcon property must be set
+     * Whether time segments can be collapsed.
+     * @default true
      */
-    DisplayIconMode = 'standard';
+    segmentsCollapsible = true;
     /**
-     * Only used if DisplayIconMode is set to custom, the CSS class name to use from Font Awesome (or any other library that has styles pre-loaded), for the span that will be shown
+     * Whether segments start expanded.
+     * @default true
      */
-    DisplayIcon;
+    segmentsDefaultExpanded = true;
+    // ============================================================================
+    // INPUTS - EMPTY & LOADING STATES
+    // ============================================================================
     /**
-     * Color mode for items in this group, defaults to auto-selected in which case the color will be determined by the system automatically based on the # of groups
+     * Message shown when no events exist.
+     * @default 'No events to display'
      */
-    DisplayColorMode = 'auto';
+    emptyMessage = 'No events to display';
     /**
-     * Only used if DisplayColorMode is set to manual, the color to use for the items in this group. Any valid color string that can be set into the element style via CSS is valid here.
+     * Icon shown with empty message.
+     * @default 'fa-regular fa-calendar-xmark'
      */
-    DisplayColor;
+    emptyIcon = 'fa-regular fa-calendar-xmark';
     /**
-     * When set to field, the SummaryFieldName will be used to display detailed information about the record in the timeline. If set to custom, you need to provide
-     * a function for the SummaryFunction property. If set to none, no summary will be displayed.
+     * Message shown while loading.
+     * @default 'Loading timeline...'
      */
-    SummaryMode = 'field';
+    loadingMessage = 'Loading timeline...';
+    // ============================================================================
+    // INPUTS - ACCESSIBILITY
+    // ============================================================================
     /**
-     * When SummaryMode is set to 'custom', this function will be used to generate the summary for the record. The function should take a single parameter, the BaseEntity object and will return a string.
-     * The string returned can be plain text or HTML and will be displayed in the timeline.
+     * ARIA label for the timeline container.
+     * @default 'Timeline'
      */
-    SummaryFunction;
+    ariaLabel = 'Timeline';
     /**
-     * Creates a new instance of the TimelineGroup class using the information from the RunViewParams provided.
-     * After receiving back the new object, you can set other properties of the new instance as appropriate.
-     * @param params
-     * @returns
+     * Enable keyboard navigation.
+     * @default true
      */
-    static async FromView(params) {
-        const group = new TimelineGroup();
-        const rv = new RunView();
-        params.ResultType = 'entity_object'; // this might be already set but we want to make sure of it
-        const result = await rv.RunView(params);
-        if (result && result.Success) {
-            group.EntityName = await RunView.GetEntityNameFromRunViewParams(params);
-            group.EntityObjects = result.Results;
+    enableKeyboardNavigation = true;
+    // ============================================================================
+    // OUTPUTS - BEFORE EVENTS (with cancel support)
+    // ============================================================================
+    /** Emitted before an event card is clicked. Set `cancel = true` to prevent. */
+    beforeEventClick = new EventEmitter();
+    /** Emitted before an event card expands. Set `cancel = true` to prevent. */
+    beforeEventExpand = new EventEmitter();
+    /** Emitted before an event card collapses. Set `cancel = true` to prevent. */
+    beforeEventCollapse = new EventEmitter();
+    /** Emitted before hover state changes. Set `cancel = true` to prevent. */
+    beforeEventHover = new EventEmitter();
+    /** Emitted before an action button is clicked. Set `cancel = true` to prevent. */
+    beforeActionClick = new EventEmitter();
+    /** Emitted before a time segment expands. Set `cancel = true` to prevent. */
+    beforeSegmentExpand = new EventEmitter();
+    /** Emitted before a time segment collapses. Set `cancel = true` to prevent. */
+    beforeSegmentCollapse = new EventEmitter();
+    /** Emitted before data loading begins. Set `cancel = true` to prevent. */
+    beforeLoad = new EventEmitter();
+    // ============================================================================
+    // OUTPUTS - AFTER EVENTS
+    // ============================================================================
+    /** Emitted after an event card is clicked. */
+    afterEventClick = new EventEmitter();
+    /** Emitted after an event card expands. */
+    afterEventExpand = new EventEmitter();
+    /** Emitted after an event card collapses. */
+    afterEventCollapse = new EventEmitter();
+    /** Emitted after hover state changes. */
+    afterEventHover = new EventEmitter();
+    /** Emitted after an action button is clicked. */
+    afterActionClick = new EventEmitter();
+    /** Emitted after a time segment expands. */
+    afterSegmentExpand = new EventEmitter();
+    /** Emitted after a time segment collapses. */
+    afterSegmentCollapse = new EventEmitter();
+    /** Emitted after data loading completes. */
+    afterLoad = new EventEmitter();
+    // ============================================================================
+    // CONTENT CHILDREN - OPTIONAL TEMPLATES
+    // ============================================================================
+    /** Custom template for entire card. Context: { event, group } */
+    cardTemplate;
+    /** Custom template for card header. Context: { event } */
+    headerTemplate;
+    /** Custom template for card body. Context: { event } */
+    bodyTemplate;
+    /** Custom template for card actions. Context: { event, actions } */
+    actionsTemplate;
+    /** Custom template for segment header. Context: { segment } */
+    segmentHeaderTemplate;
+    /** Custom template for empty state. */
+    emptyTemplate;
+    /** Custom template for loading state. */
+    loadingTemplate;
+    // ============================================================================
+    // VIEW CHILDREN
+    // ============================================================================
+    scrollContainer;
+    // ============================================================================
+    // PUBLIC PROPERTIES
+    // ============================================================================
+    /** Current time segments with events. */
+    segments = [];
+    /** All flattened events (for non-segmented display). */
+    allEvents = [];
+    /** Virtual scroll state. */
+    scrollState = { ...DEFAULT_VIRTUAL_SCROLL_STATE };
+    /** Whether initial load is complete. */
+    isInitialized = false;
+    /** Whether currently loading data. */
+    isLoading = false;
+    /** Index of currently focused event (for keyboard navigation). */
+    focusedEventIndex = -1;
+    // ============================================================================
+    // PRIVATE PROPERTIES
+    // ============================================================================
+    _initialized = false;
+    _hasLoaded = false;
+    _destroy$ = new Subject();
+    _scroll$ = new Subject();
+    _intersectionObserver;
+    // ============================================================================
+    // CONSTRUCTOR
+    // ============================================================================
+    constructor(cdr, elementRef, ngZone) {
+        this.cdr = cdr;
+        this.elementRef = elementRef;
+        this.ngZone = ngZone;
+    }
+    // ============================================================================
+    // LIFECYCLE HOOKS
+    // ============================================================================
+    ngOnInit() {
+        this._initialized = true;
+        // Set up scroll listener for virtual scrolling
+        this._scroll$
+            .pipe(debounceTime(100), takeUntil(this._destroy$))
+            .subscribe(() => this.onScrollCheck());
+    }
+    ngAfterViewInit() {
+        if (this.allowLoad && !this._hasLoaded) {
+            this.refresh();
         }
-        return group;
+        // Set up intersection observer for virtual scroll trigger
+        this.setupIntersectionObserver();
     }
-}
-/**
- * Displays data on a timeline UI so that information can see a chronolgoical display of the provided data.
- */
-export class TimelineComponent {
-    _groups = [];
-    DisplayOrientation = 'vertical';
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+        if (this._intersectionObserver) {
+            this._intersectionObserver.disconnect();
+        }
+    }
+    // ============================================================================
+    // PUBLIC METHODS
+    // ============================================================================
     /**
-     * Provide an array of one or more TimelineGroup objects to display the data in the timeline. Each group will be displayed in a different color and icon.
+     * Refreshes all data from the configured groups.
+     * Clears existing data and reloads from sources.
      */
-    get Groups() {
-        return this._groups;
+    async refresh() {
+        const startTime = Date.now();
+        // Emit before event
+        const beforeArgs = {
+            cancel: false,
+            groups: this._groups,
+            isIncremental: false
+        };
+        this.beforeLoad.emit(beforeArgs);
+        if (beforeArgs.cancel) {
+            return;
+        }
+        this.isLoading = true;
+        this.cdr.markForCheck();
+        try {
+            // Clear existing data
+            this.allEvents = [];
+            this.segments = [];
+            this.scrollState = { ...DEFAULT_VIRTUAL_SCROLL_STATE };
+            // Load data from all groups
+            await this.loadAllGroups();
+            // Group into segments
+            this.buildSegments();
+            this._hasLoaded = true;
+            this.isInitialized = true;
+            // Emit after event
+            const afterArgs = {
+                success: true,
+                eventsLoaded: this.allEvents.length,
+                totalEvents: this.allEvents.length,
+                loadTimeMs: Date.now() - startTime,
+                hasMore: this.scrollState.hasMore
+            };
+            this.afterLoad.emit(afterArgs);
+        }
+        catch (error) {
+            console.error('Timeline: Error loading data', error);
+            const afterArgs = {
+                success: false,
+                errorMessage: error instanceof Error ? error.message : 'Unknown error',
+                eventsLoaded: 0,
+                totalEvents: 0,
+                loadTimeMs: Date.now() - startTime,
+                hasMore: false
+            };
+            this.afterLoad.emit(afterArgs);
+        }
+        finally {
+            this.isLoading = false;
+            this.cdr.markForCheck();
+        }
     }
-    set Groups(value) {
-        this._groups = value;
-        if (this.AllowLoad)
-            this.Refresh();
+    /**
+     * Loads more events (for virtual scrolling).
+     */
+    async loadMore() {
+        if (!this.virtualScroll.enabled || this.scrollState.isLoading || !this.scrollState.hasMore) {
+            return;
+        }
+        const startTime = Date.now();
+        // Emit before event
+        const beforeArgs = {
+            cancel: false,
+            groups: this._groups,
+            isIncremental: true,
+            offset: this.scrollState.loadedCount,
+            batchSize: this.virtualScroll.batchSize
+        };
+        this.beforeLoad.emit(beforeArgs);
+        if (beforeArgs.cancel) {
+            return;
+        }
+        this.scrollState.isLoading = true;
+        this.cdr.markForCheck();
+        try {
+            const previousCount = this.allEvents.length;
+            // Load next batch from all groups
+            await this.loadNextBatch();
+            // Rebuild segments with new data
+            this.buildSegments();
+            const newCount = this.allEvents.length - previousCount;
+            // Emit after event
+            const afterArgs = {
+                success: true,
+                eventsLoaded: newCount,
+                totalEvents: this.allEvents.length,
+                loadTimeMs: Date.now() - startTime,
+                hasMore: this.scrollState.hasMore
+            };
+            this.afterLoad.emit(afterArgs);
+        }
+        catch (error) {
+            console.error('Timeline: Error loading more data', error);
+        }
+        finally {
+            this.scrollState.isLoading = false;
+            this.cdr.markForCheck();
+        }
     }
-    _deferLoadCount = 0;
-    _allowLoad = true;
     /**
-     * Set this property to false to prevent the timeline from loading the data. This is useful when you want to load the data yourself and then set this property to true to display the data.
+     * Expands all event cards.
      */
-    get AllowLoad() {
-        return this._allowLoad;
+    expandAllEvents() {
+        for (const event of this.allEvents) {
+            if (!event.isExpanded) {
+                this.setEventExpanded(event, true);
+            }
+        }
+        this.cdr.markForCheck();
     }
-    set AllowLoad(value) {
-        this._allowLoad = value;
-        if (value === true && this._deferLoadCount === 0) {
-            this._deferLoadCount++; // only do this one time 
-            this.Refresh();
+    /**
+     * Collapses all event cards.
+     */
+    collapseAllEvents() {
+        for (const event of this.allEvents) {
+            if (event.isExpanded) {
+                this.setEventExpanded(event, false);
+            }
         }
+        this.cdr.markForCheck();
     }
-    /*
-    * events is the array of timeline events that gets updated on each call of LoadSingleGroup.
-    * timelineGroupEvents is the array of total timeline events that will get called used by the timeline component.
-    */
-    events = [];
-    async ngAfterViewInit() {
-        if (this.AllowLoad)
-            await this.Refresh();
+    /**
+     * Expands all time segments.
+     */
+    expandAllSegments() {
+        for (const segment of this.segments) {
+            if (!segment.isExpanded) {
+                this.setSegmentExpanded(segment, true);
+            }
+        }
+        this.cdr.markForCheck();
     }
     /**
-     * This method refreshes the timeline with the data from the provided parameters.
+     * Collapses all time segments.
      */
-    async Refresh() {
-        this.events.splice(0, this.events.length); // clear out what we have
-        if (this.Groups && this.Groups.length > 0) {
-            for (const g of this.Groups) {
-                await this.LoadSingleGroup(g);
+    collapseAllSegments() {
+        for (const segment of this.segments) {
+            if (segment.isExpanded) {
+                this.setSegmentExpanded(segment, false);
             }
         }
+        this.cdr.markForCheck();
+    }
+    /**
+     * Expands a specific event by ID.
+     */
+    expandEvent(eventId) {
+        const event = this.getEvent(eventId);
+        if (event && !event.isExpanded) {
+            this.setEventExpanded(event, true);
+            this.cdr.markForCheck();
+        }
     }
     /**
-     * This method loads the data for a single group and adds it to the timelineGroupEvents array.
-     * @param group
+     * Collapses a specific event by ID.
      */
-    async LoadSingleGroup(group) {
-        // load up the events for the specified group into the events array
-        let newItems = [];
-        switch (group.DataSourceType) {
-            case 'array':
-                // use the provided array
-                if (!group.EntityObjects)
-                    throw new Error("No EntityObjects provided for group");
-                newItems = this.mapEntityObjectsToEvents(group, group.EntityObjects);
+    collapseEvent(eventId) {
+        const event = this.getEvent(eventId);
+        if (event && event.isExpanded) {
+            this.setEventExpanded(event, false);
+            this.cdr.markForCheck();
+        }
+    }
+    /**
+     * Scrolls to a specific event.
+     */
+    scrollToEvent(eventId, behavior = 'smooth') {
+        const element = this.elementRef.nativeElement.querySelector(`[data-event-id="${eventId}"]`);
+        if (element) {
+            element.scrollIntoView({ behavior, block: 'center' });
+        }
+    }
+    /**
+     * Scrolls to a specific date.
+     */
+    scrollToDate(date, behavior = 'smooth') {
+        // Find the segment containing this date
+        const segment = this.segments.find(s => date >= s.startDate && date < s.endDate);
+        if (segment) {
+            const element = this.elementRef.nativeElement.querySelector(`[data-segment-label="${segment.label}"]`);
+            if (element) {
+                element.scrollIntoView({ behavior, block: 'start' });
+            }
+        }
+    }
+    /**
+     * Gets an event by ID.
+     */
+    getEvent(eventId) {
+        return this.allEvents.find(e => e.id === eventId);
+    }
+    /**
+     * Gets all events (flattened).
+     */
+    getAllEvents() {
+        return [...this.allEvents];
+    }
+    // ============================================================================
+    // EVENT HANDLERS (Template bindings)
+    // ============================================================================
+    /**
+     * Handles click on an event card.
+     */
+    onEventClick(event, index, domEvent) {
+        const group = this._groups[event.groupIndex];
+        // Emit before event
+        const beforeArgs = {
+            cancel: false,
+            event,
+            group,
+            index,
+            domEvent
+        };
+        this.beforeEventClick.emit(beforeArgs);
+        if (beforeArgs.cancel) {
+            return;
+        }
+        // Default behavior: toggle expand/collapse if collapsible
+        const cardConfig = this.getEffectiveCardConfig(event);
+        if (cardConfig.collapsible) {
+            this.toggleEventExpanded(event, index, domEvent);
+        }
+        // Emit after event
+        const afterArgs = {
+            success: true,
+            event,
+            group,
+            index,
+            domEvent
+        };
+        this.afterEventClick.emit(afterArgs);
+    }
+    /**
+     * Handles expand/collapse toggle on an event.
+     */
+    onToggleExpand(event, index, domEvent) {
+        domEvent.stopPropagation();
+        this.toggleEventExpanded(event, index, domEvent);
+    }
+    /**
+     * Handles mouse enter on an event card.
+     */
+    onEventMouseEnter(event, index, domEvent) {
+        const group = this._groups[event.groupIndex];
+        const beforeArgs = {
+            cancel: false,
+            event,
+            group,
+            index,
+            domEvent,
+            hoverState: 'enter'
+        };
+        this.beforeEventHover.emit(beforeArgs);
+        if (!beforeArgs.cancel) {
+            const afterArgs = {
+                success: true,
+                event,
+                group,
+                index,
+                domEvent,
+                hoverState: 'enter'
+            };
+            this.afterEventHover.emit(afterArgs);
+        }
+    }
+    /**
+     * Handles mouse leave on an event card.
+     */
+    onEventMouseLeave(event, index, domEvent) {
+        const group = this._groups[event.groupIndex];
+        const beforeArgs = {
+            cancel: false,
+            event,
+            group,
+            index,
+            domEvent,
+            hoverState: 'leave'
+        };
+        this.beforeEventHover.emit(beforeArgs);
+        if (!beforeArgs.cancel) {
+            const afterArgs = {
+                success: true,
+                event,
+                group,
+                index,
+                domEvent,
+                hoverState: 'leave'
+            };
+            this.afterEventHover.emit(afterArgs);
+        }
+    }
+    /**
+     * Handles action button click.
+     */
+    onActionClick(event, action, index, domEvent) {
+        domEvent.stopPropagation();
+        if (action.disabled) {
+            return;
+        }
+        const group = this._groups[event.groupIndex];
+        const beforeArgs = {
+            cancel: false,
+            event,
+            group,
+            index,
+            domEvent,
+            action
+        };
+        this.beforeActionClick.emit(beforeArgs);
+        if (!beforeArgs.cancel) {
+            const afterArgs = {
+                success: true,
+                event,
+                group,
+                index,
+                domEvent,
+                action
+            };
+            this.afterActionClick.emit(afterArgs);
+        }
+    }
+    /**
+     * Handles segment header click.
+     */
+    onSegmentClick(segment) {
+        if (!this.segmentsCollapsible) {
+            return;
+        }
+        if (segment.isExpanded) {
+            this.collapseSegment(segment);
+        }
+        else {
+            this.expandSegment(segment);
+        }
+    }
+    /**
+     * Handles scroll events for virtual scrolling.
+     */
+    onScroll(event) {
+        this._scroll$.next(event);
+    }
+    /**
+     * Handles keyboard navigation.
+     */
+    onKeyDown(event) {
+        if (!this.enableKeyboardNavigation) {
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'ArrowRight':
+                event.preventDefault();
+                this.focusNextEvent();
                 break;
-            case 'entity':
-                // use run view
-                const rv = new RunView();
-                const result = await rv.RunView({
-                    EntityName: group.EntityName,
-                    ExtraFilter: group.Filter,
-                    ResultType: 'entity_object'
-                });
-                if (result && result.Success)
-                    newItems = this.mapEntityObjectsToEvents(group, result.Results);
+            case 'ArrowUp':
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.focusPreviousEvent();
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.activateFocusedEvent();
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.collapseFocusedEvent();
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.focusFirstEvent();
                 break;
+            case 'End':
+                event.preventDefault();
+                this.focusLastEvent();
+                break;
+        }
+    }
+    // ============================================================================
+    // TEMPLATE HELPERS
+    // ============================================================================
+    /**
+     * Gets the effective card config for an event.
+     */
+    getEffectiveCardConfig(event) {
+        const group = this._groups[event.groupIndex];
+        return {
+            ...this.defaultCardConfig,
+            ...group?.CardConfig,
+            ...this.mapEventConfigToCardConfig(event.config)
+        };
+    }
+    /**
+     * Gets the color for a group/event.
+     */
+    getColor(event) {
+        if (event.config?.color) {
+            return event.config.color;
         }
-        this.events.push(...newItems);
+        const group = this._groups[event.groupIndex];
+        if (group?.DisplayColorMode === 'manual' && group.DisplayColor) {
+            return group.DisplayColor;
+        }
+        return AUTO_COLORS[event.groupIndex % AUTO_COLORS.length];
     }
-    mapEntityObjectsToEvents(group, entityObjects) {
-        const ret = entityObjects.map(e => {
-            let date = new Date(e.Get(group.DateFieldName));
-            let title = e.Get(group.TitleFieldName);
-            let summary = "";
-            if (group.SummaryMode == 'field') {
-                summary = e.Get(group.TitleFieldName);
+    /**
+     * Gets the icon for a group/event.
+     */
+    getIcon(event) {
+        if (event.config?.icon) {
+            return event.config.icon;
+        }
+        const group = this._groups[event.groupIndex];
+        if (group?.DisplayIconMode === 'custom' && group.DisplayIcon) {
+            return group.DisplayIcon;
+        }
+        return DEFAULT_ICONS[event.groupIndex % DEFAULT_ICONS.length];
+    }
+    /**
+     * Gets the actions for an event.
+     */
+    getActions(event) {
+        if (event.config?.actions) {
+            return event.config.actions;
+        }
+        const cardConfig = this.getEffectiveCardConfig(event);
+        return cardConfig.actions || [];
+    }
+    /**
+     * Formats a date for display.
+     */
+    formatDate(date, format) {
+        const fmt = format || this.defaultCardConfig.dateFormat || 'MMM d, yyyy';
+        return this.formatDateInternal(date, fmt);
+    }
+    /**
+     * Gets the value of a display field from an event.
+     */
+    getFieldValue(event, field) {
+        const value = getFieldValue(event.entity, field.fieldName);
+        if (field.formatter) {
+            return field.formatter(value);
+        }
+        if (value == null) {
+            return '';
+        }
+        if (field.format && value instanceof Date) {
+            return this.formatDateInternal(value, field.format);
+        }
+        return String(value);
+    }
+    /**
+     * Track by function for ngFor.
+     */
+    trackByEventId(_index, event) {
+        return event.id;
+    }
+    /**
+     * Track by function for segments.
+     */
+    trackBySegmentLabel(_index, segment) {
+        return segment.label;
+    }
+    /**
+     * Gets the global index of an event in the allEvents array.
+     */
+    getGlobalIndex(event) {
+        return this.allEvents.indexOf(event);
+    }
+    // ============================================================================
+    // PRIVATE METHODS - DATA LOADING
+    // ============================================================================
+    /**
+     * Loads data from all groups.
+     */
+    async loadAllGroups() {
+        for (let groupIndex = 0; groupIndex < this._groups.length; groupIndex++) {
+            const group = this._groups[groupIndex];
+            await this.loadGroup(group, groupIndex);
+        }
+        // Sort all events by date
+        this.sortEvents();
+        // Update scroll state
+        this.scrollState.loadedCount = this.allEvents.length;
+        this.scrollState.hasMore = false; // TODO: Implement proper pagination detection
+    }
+    /**
+     * Loads data from a single group.
+     */
+    async loadGroup(group, groupIndex) {
+        let records = [];
+        if (group.DataSourceType === 'array') {
+            records = group.EntityObjects || [];
+        }
+        else if (group.DataSourceType === 'entity' && group.EntityName) {
+            records = await this.loadFromEntity(group);
+        }
+        // Convert records to timeline events
+        for (const record of records) {
+            const event = this.createTimelineEvent(record, group, groupIndex);
+            this.allEvents.push(event);
+        }
+    }
+    /**
+     * Loads data from MemberJunction entity.
+     */
+    async loadFromEntity(group) {
+        try {
+            const { RunView } = await import('@memberjunction/core');
+            const rv = new RunView();
+            const result = await rv.RunView({
+                EntityName: group.EntityName,
+                ExtraFilter: group.Filter,
+                OrderBy: group.OrderBy,
+                MaxRows: group.MaxRecords,
+                ResultType: 'entity_object'
+            });
+            if (result?.Success) {
+                return result.Results;
             }
-            else if (group.SummaryMode == 'custom') {
-                summary = group.SummaryFunction ? group.SummaryFunction(e) : "";
+        }
+        catch (error) {
+            console.warn('Timeline: Could not load from entity. Is @memberjunction/core available?', error);
+        }
+        return [];
+    }
+    /**
+     * Loads the next batch for virtual scrolling.
+     */
+    async loadNextBatch() {
+        // TODO: Implement proper batch loading with offset/limit
+        // For now, this is a placeholder
+    }
+    /**
+     * Creates a timeline event from a source record.
+     */
+    createTimelineEvent(record, group, groupIndex) {
+        const cardConfig = group.getEffectiveCardConfig();
+        return {
+            id: group.getId(record),
+            entity: record,
+            title: group.getTitle(record),
+            date: group.getDate(record),
+            subtitle: group.getSubtitle(record),
+            description: group.getDescription(record),
+            imageUrl: group.getImageUrl(record),
+            config: group.getEventConfig(record),
+            groupIndex,
+            isExpanded: cardConfig.defaultExpanded ?? false
+        };
+    }
+    /**
+     * Sorts events by date according to sortOrder.
+     */
+    sortEvents() {
+        this.allEvents.sort((a, b) => {
+            const diff = a.date.getTime() - b.date.getTime();
+            return this.sortOrder === 'asc' ? diff : -diff;
+        });
+    }
+    // ============================================================================
+    // PRIVATE METHODS - SEGMENTATION
+    // ============================================================================
+    /**
+     * Builds time segments from events.
+     */
+    buildSegments() {
+        if (this.segmentGrouping === 'none') {
+            this.segments = [];
+            return;
+        }
+        const segmentMap = new Map();
+        for (const event of this.allEvents) {
+            const { label, startDate, endDate } = this.getSegmentInfo(event.date);
+            if (!segmentMap.has(label)) {
+                segmentMap.set(label, {
+                    label,
+                    startDate,
+                    endDate,
+                    events: [],
+                    isExpanded: this.segmentsDefaultExpanded,
+                    eventCount: 0
+                });
             }
-            return {
-                description: summary,
-                date: date,
-                title: title,
-                subtitle: date.toDateString(),
-                images: [],
-                actions: [],
-            };
+            const segment = segmentMap.get(label);
+            segment.events.push(event);
+            segment.eventCount++;
+        }
+        // Convert to array and sort
+        this.segments = Array.from(segmentMap.values());
+        this.segments.sort((a, b) => {
+            const diff = a.startDate.getTime() - b.startDate.getTime();
+            return this.sortOrder === 'asc' ? diff : -diff;
         });
-        return ret;
     }
-    static ɵfac = function TimelineComponent_Factory(t) { return new (t || TimelineComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TimelineComponent, selectors: [["mj-timeline"]], inputs: { DisplayOrientation: "DisplayOrientation", Groups: "Groups", AllowLoad: "AllowLoad" }, decls: 2, vars: 4, consts: [[1, "wrapper"], [3, "events", "orientation", "collapsibleEvents", "alterMode"]], template: function TimelineComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵelement(1, "kendo-timeline", 1);
+    /**
+     * Gets segment information for a date.
+     */
+    getSegmentInfo(date) {
+        const year = date.getFullYear();
+        const month = date.getMonth();
+        const day = date.getDate();
+        switch (this.segmentGrouping) {
+            case 'day':
+                return {
+                    label: this.formatDateInternal(date, 'MMMM d, yyyy'),
+                    startDate: new Date(year, month, day),
+                    endDate: new Date(year, month, day + 1)
+                };
+            case 'week':
+                const weekStart = new Date(date);
+                weekStart.setDate(day - date.getDay());
+                const weekEnd = new Date(weekStart);
+                weekEnd.setDate(weekStart.getDate() + 7);
+                return {
+                    label: `Week of ${this.formatDateInternal(weekStart, 'MMM d, yyyy')}`,
+                    startDate: weekStart,
+                    endDate: weekEnd
+                };
+            case 'month':
+                return {
+                    label: this.formatDateInternal(new Date(year, month, 1), 'MMMM yyyy'),
+                    startDate: new Date(year, month, 1),
+                    endDate: new Date(year, month + 1, 1)
+                };
+            case 'quarter':
+                const quarter = Math.floor(month / 3);
+                return {
+                    label: `Q${quarter + 1} ${year}`,
+                    startDate: new Date(year, quarter * 3, 1),
+                    endDate: new Date(year, (quarter + 1) * 3, 1)
+                };
+            case 'year':
+                return {
+                    label: String(year),
+                    startDate: new Date(year, 0, 1),
+                    endDate: new Date(year + 1, 0, 1)
+                };
+            default:
+                return {
+                    label: this.formatDateInternal(date, 'MMMM yyyy'),
+                    startDate: new Date(year, month, 1),
+                    endDate: new Date(year, month + 1, 1)
+                };
+        }
+    }
+    // ============================================================================
+    // PRIVATE METHODS - EXPAND/COLLAPSE
+    // ============================================================================
+    /**
+     * Toggles event expanded state.
+     */
+    toggleEventExpanded(event, index, domEvent) {
+        if (event.isExpanded) {
+            this.collapseEventInternal(event, index, domEvent);
+        }
+        else {
+            this.expandEventInternal(event, index, domEvent);
+        }
+    }
+    /**
+     * Sets event expanded state.
+     */
+    setEventExpanded(event, expanded) {
+        event.isExpanded = expanded;
+    }
+    /**
+     * Expands an event with events.
+     */
+    expandEventInternal(event, index, domEvent) {
+        const group = this._groups[event.groupIndex];
+        const beforeArgs = {
+            cancel: false,
+            event,
+            group,
+            index,
+            domEvent
+        };
+        this.beforeEventExpand.emit(beforeArgs);
+        if (beforeArgs.cancel) {
+            return;
+        }
+        event.isExpanded = true;
+        this.cdr.markForCheck();
+        const afterArgs = {
+            success: true,
+            event,
+            group,
+            index,
+            domEvent
+        };
+        this.afterEventExpand.emit(afterArgs);
+    }
+    /**
+     * Collapses an event with events.
+     */
+    collapseEventInternal(event, index, domEvent) {
+        const group = this._groups[event.groupIndex];
+        const beforeArgs = {
+            cancel: false,
+            event,
+            group,
+            index,
+            domEvent
+        };
+        this.beforeEventCollapse.emit(beforeArgs);
+        if (beforeArgs.cancel) {
+            return;
+        }
+        event.isExpanded = false;
+        this.cdr.markForCheck();
+        const afterArgs = {
+            success: true,
+            event,
+            group,
+            index,
+            domEvent
+        };
+        this.afterEventCollapse.emit(afterArgs);
+    }
+    /**
+     * Expands a segment.
+     */
+    expandSegment(segment) {
+        const beforeArgs = {
+            cancel: false,
+            segment,
+            label: segment.label,
+            startDate: segment.startDate,
+            endDate: segment.endDate,
+            eventCount: segment.eventCount
+        };
+        this.beforeSegmentExpand.emit(beforeArgs);
+        if (beforeArgs.cancel) {
+            return;
+        }
+        segment.isExpanded = true;
+        this.cdr.markForCheck();
+        const afterArgs = {
+            success: true,
+            segment,
+            label: segment.label,
+            startDate: segment.startDate,
+            endDate: segment.endDate,
+            eventCount: segment.eventCount
+        };
+        this.afterSegmentExpand.emit(afterArgs);
+    }
+    /**
+     * Collapses a segment.
+     */
+    collapseSegment(segment) {
+        const beforeArgs = {
+            cancel: false,
+            segment,
+            label: segment.label,
+            startDate: segment.startDate,
+            endDate: segment.endDate,
+            eventCount: segment.eventCount
+        };
+        this.beforeSegmentCollapse.emit(beforeArgs);
+        if (beforeArgs.cancel) {
+            return;
+        }
+        segment.isExpanded = false;
+        this.cdr.markForCheck();
+        const afterArgs = {
+            success: true,
+            segment,
+            label: segment.label,
+            startDate: segment.startDate,
+            endDate: segment.endDate,
+            eventCount: segment.eventCount
+        };
+        this.afterSegmentCollapse.emit(afterArgs);
+    }
+    /**
+     * Sets segment expanded state without events.
+     */
+    setSegmentExpanded(segment, expanded) {
+        segment.isExpanded = expanded;
+    }
+    // ============================================================================
+    // PRIVATE METHODS - KEYBOARD NAVIGATION
+    // ============================================================================
+    focusNextEvent() {
+        if (this.allEvents.length === 0)
+            return;
+        this.focusedEventIndex = Math.min(this.focusedEventIndex + 1, this.allEvents.length - 1);
+        this.scrollToFocusedEvent();
+    }
+    focusPreviousEvent() {
+        if (this.allEvents.length === 0)
+            return;
+        this.focusedEventIndex = Math.max(this.focusedEventIndex - 1, 0);
+        this.scrollToFocusedEvent();
+    }
+    focusFirstEvent() {
+        if (this.allEvents.length === 0)
+            return;
+        this.focusedEventIndex = 0;
+        this.scrollToFocusedEvent();
+    }
+    focusLastEvent() {
+        if (this.allEvents.length === 0)
+            return;
+        this.focusedEventIndex = this.allEvents.length - 1;
+        this.scrollToFocusedEvent();
+    }
+    activateFocusedEvent() {
+        if (this.focusedEventIndex >= 0 && this.focusedEventIndex < this.allEvents.length) {
+            const event = this.allEvents[this.focusedEventIndex];
+            this.toggleEventExpanded(event, this.focusedEventIndex);
+        }
+    }
+    collapseFocusedEvent() {
+        if (this.focusedEventIndex >= 0 && this.focusedEventIndex < this.allEvents.length) {
+            const event = this.allEvents[this.focusedEventIndex];
+            if (event.isExpanded) {
+                this.collapseEventInternal(event, this.focusedEventIndex);
+            }
+        }
+    }
+    scrollToFocusedEvent() {
+        if (this.focusedEventIndex >= 0 && this.focusedEventIndex < this.allEvents.length) {
+            const event = this.allEvents[this.focusedEventIndex];
+            this.scrollToEvent(event.id, 'smooth');
+        }
+        this.cdr.markForCheck();
+    }
+    // ============================================================================
+    // PRIVATE METHODS - VIRTUAL SCROLLING
+    // ============================================================================
+    setupIntersectionObserver() {
+        if (!this.virtualScroll.enabled)
+            return;
+        // Use requestAnimationFrame to ensure DOM is ready
+        requestAnimationFrame(() => {
+            const sentinel = this.elementRef.nativeElement.querySelector('.mj-timeline-scroll-sentinel');
+            if (!sentinel)
+                return;
+            this._intersectionObserver = new IntersectionObserver((entries) => {
+                const entry = entries[0];
+                if (entry?.isIntersecting && !this.scrollState.isLoading && this.scrollState.hasMore) {
+                    this.ngZone.run(() => this.loadMore());
+                }
+            }, {
+                root: this.scrollContainer?.nativeElement,
+                threshold: 0,
+                rootMargin: `${this.virtualScroll.loadThreshold}px`
+            });
+            this._intersectionObserver.observe(sentinel);
+        });
+    }
+    onScrollCheck() {
+        if (!this.scrollContainer?.nativeElement || !this.virtualScroll.enabled) {
+            return;
+        }
+        const el = this.scrollContainer.nativeElement;
+        this.scrollState.scrollOffset = el.scrollTop;
+        const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+        if (distanceFromBottom < this.virtualScroll.loadThreshold && this.scrollState.hasMore) {
+            this.loadMore();
+        }
+    }
+    // ============================================================================
+    // PRIVATE METHODS - UTILITIES
+    // ============================================================================
+    /**
+     * Maps event config to card config properties.
+     */
+    mapEventConfigToCardConfig(config = {}) {
+        return {
+            collapsible: config.collapsible,
+            defaultExpanded: config.defaultExpanded,
+            actions: config.actions
+        };
+    }
+    /**
+     * Simple date formatter (replaces Angular DatePipe for standalone use).
+     */
+    formatDateInternal(date, format) {
+        const months = ['January', 'February', 'March', 'April', 'May', 'June',
+            'July', 'August', 'September', 'October', 'November', 'December'];
+        const monthsShort = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+        const year = date.getFullYear();
+        const month = date.getMonth();
+        const day = date.getDate();
+        const hours = date.getHours();
+        const minutes = date.getMinutes();
+        return format
+            .replace('yyyy', String(year))
+            .replace('MMMM', months[month])
+            .replace('MMM', monthsShort[month])
+            .replace('MM', String(month + 1).padStart(2, '0'))
+            .replace('dd', String(day).padStart(2, '0'))
+            .replace('d', String(day))
+            .replace('HH', String(hours).padStart(2, '0'))
+            .replace('h', String(hours % 12 || 12))
+            .replace('mm', String(minutes).padStart(2, '0'))
+            .replace('a', hours >= 12 ? 'PM' : 'AM');
+    }
+    static ɵfac = function TimelineComponent_Factory(t) { return new (t || TimelineComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.NgZone)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TimelineComponent, selectors: [["mj-timeline"]], contentQueries: function TimelineComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
+            i0.ɵɵcontentQuery(dirIndex, _c0, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c1, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c2, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c3, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c4, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c5, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c6, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.cardTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.headerTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.bodyTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.actionsTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.segmentHeaderTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.emptyTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.loadingTemplate = _t.first);
+        } }, viewQuery: function TimelineComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c7, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.scrollContainer = _t.first);
+        } }, inputs: { groups: "groups", allowLoad: "allowLoad", orientation: "orientation", layout: "layout", sortOrder: "sortOrder", segmentGrouping: "segmentGrouping", defaultCardConfig: "defaultCardConfig", virtualScroll: "virtualScroll", segmentsCollapsible: "segmentsCollapsible", segmentsDefaultExpanded: "segmentsDefaultExpanded", emptyMessage: "emptyMessage", emptyIcon: "emptyIcon", loadingMessage: "loadingMessage", ariaLabel: "ariaLabel", enableKeyboardNavigation: "enableKeyboardNavigation" }, outputs: { beforeEventClick: "beforeEventClick", beforeEventExpand: "beforeEventExpand", beforeEventCollapse: "beforeEventCollapse", beforeEventHover: "beforeEventHover", beforeActionClick: "beforeActionClick", beforeSegmentExpand: "beforeSegmentExpand", beforeSegmentCollapse: "beforeSegmentCollapse", beforeLoad: "beforeLoad", afterEventClick: "afterEventClick", afterEventExpand: "afterEventExpand", afterEventCollapse: "afterEventCollapse", afterEventHover: "afterEventHover", afterActionClick: "afterActionClick", afterSegmentExpand: "afterSegmentExpand", afterSegmentCollapse: "afterSegmentCollapse", afterLoad: "afterLoad" }, decls: 9, vars: 14, consts: [["scrollContainer", ""], ["eventCard", ""], ["defaultLoading", ""], ["defaultEmpty", ""], ["defaultSegmentHeader", ""], ["defaultCard", ""], ["defaultHeader", ""], ["defaultBody", ""], ["plainDescription", ""], ["defaultActions", ""], ["role", "list", "tabindex", "0", 1, "mj-timeline", 3, "keydown", "scroll"], [4, "ngIf"], ["class", "mj-timeline-scroll-sentinel", 4, "ngIf"], ["class", "mj-timeline__loading-more", 4, "ngIf"], [4, "ngIf", "ngIfElse"], [4, "ngTemplateOutlet"], [1, "mj-timeline__loading"], [1, "mj-timeline__loading-spinner"], [1, "mj-timeline__loading-text"], [1, "mj-timeline__empty"], [1, "mj-timeline__empty-icon"], [1, "mj-timeline__empty-text"], ["class", "mj-timeline__segment", 3, "mj-timeline__segment--collapsed", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "mj-timeline__segment"], ["role", "button", 1, "mj-timeline__segment-header", 3, "click"], [1, "mj-timeline__segment-content", 3, "id"], [1, "mj-timeline__axis"], [4, "ngFor", "ngForOf", "ngForTrackBy"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["class", "mj-timeline__segment-toggle", 4, "ngIf"], [1, "mj-timeline__segment-label"], [1, "mj-timeline__segment-count"], [1, "mj-timeline__segment-line"], [1, "mj-timeline__segment-toggle"], [1, "mj-timeline-scroll-sentinel"], [1, "mj-timeline__loading-more"], [1, "mj-timeline__loading-spinner", "mj-timeline__loading-spinner--small"], ["role", "listitem", 1, "mj-timeline__event"], [1, "mj-timeline__marker"], [1, "mj-timeline__marker-icon"], [1, "mj-timeline__connector"], ["class", "mj-timeline__date-label", 4, "ngIf"], [1, "mj-timeline__card", 3, "click", "mouseenter", "mouseleave"], [1, "mj-timeline__date-label"], [1, "mj-timeline__card-header"], ["class", "mj-timeline__card-image mj-timeline__card-image--left", 3, "mj-timeline__card-image--small", "mj-timeline__card-image--medium", "mj-timeline__card-image--large", 4, "ngIf"], [1, "mj-timeline__card-header-content"], ["class", "mj-timeline__card-image mj-timeline__card-image--top", 4, "ngIf"], [1, "mj-timeline__card-body"], ["class", "mj-timeline__card-actions", 3, "mj-timeline__card-actions--hover-only", 4, "ngIf"], [1, "mj-timeline__card-image", "mj-timeline__card-image--left"], [3, "src", "alt"], ["class", "mj-timeline__card-icon", 3, "color", 4, "ngIf"], [1, "mj-timeline__card-titles"], [1, "mj-timeline__card-title"], ["class", "mj-timeline__card-subtitle", 4, "ngIf"], ["class", "mj-timeline__card-date", 4, "ngIf"], ["class", "mj-timeline__card-toggle", "type", "button", 3, "click", 4, "ngIf"], [1, "mj-timeline__card-icon"], [1, "mj-timeline__card-subtitle"], [1, "mj-timeline__card-date"], ["type", "button", 1, "mj-timeline__card-toggle", 3, "click"], [1, "mj-timeline__card-image", "mj-timeline__card-image--top"], ["class", "mj-timeline__card-fields mj-timeline__card-fields--summary", 4, "ngIf"], ["class", "mj-timeline__card-description", 3, "mj-timeline__card-description--clamped", "-webkit-line-clamp", 4, "ngIf"], ["class", "mj-timeline__card-fields mj-timeline__card-fields--expanded", 4, "ngIf"], [1, "mj-timeline__card-fields", "mj-timeline__card-fields--summary"], [4, "ngFor", "ngForOf"], [1, "mj-timeline__card-field"], ["class", "mj-timeline__card-field-icon", 3, "class", 4, "ngIf"], ["class", "mj-timeline__card-field-label", 4, "ngIf"], [1, "mj-timeline__card-field-value"], [1, "mj-timeline__card-field-icon"], [1, "mj-timeline__card-field-label"], [1, "mj-timeline__card-description"], [3, "innerHTML"], [1, "mj-timeline__card-fields", "mj-timeline__card-fields--expanded"], [1, "mj-timeline__card-actions"], ["class", "mj-timeline__action", "type", "button", 3, "mj-timeline__action--primary", "mj-timeline__action--secondary", "mj-timeline__action--danger", "mj-timeline__action--link", "class", "disabled", "title", "click", 4, "ngFor", "ngForOf"], ["type", "button", 1, "mj-timeline__action", 3, "click", "disabled", "title"], [3, "class", 4, "ngIf"]], template: function TimelineComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 10, 0);
+            i0.ɵɵlistener("keydown", function TimelineComponent_Template_div_keydown_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onKeyDown($event)); })("scroll", function TimelineComponent_Template_div_scroll_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onScroll($event)); });
+            i0.ɵɵtemplate(2, TimelineComponent_ng_container_2_Template, 4, 2, "ng-container", 11)(3, TimelineComponent_ng_container_3_Template, 4, 2, "ng-container", 11)(4, TimelineComponent_ng_container_4_Template, 3, 2, "ng-container", 11)(5, TimelineComponent_div_5_Template, 1, 0, "div", 12)(6, TimelineComponent_div_6_Template, 4, 1, "div", 13);
             i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(7, TimelineComponent_ng_template_7_Template, 9, 27, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
+            i0.ɵɵclassProp("mj-timeline--vertical", ctx.orientation === "vertical")("mj-timeline--horizontal", ctx.orientation === "horizontal")("mj-timeline--single", ctx.layout === "single")("mj-timeline--alternating", ctx.layout === "alternating");
+            i0.ɵɵattribute("aria-label", ctx.ariaLabel);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.isLoading && !ctx.isInitialized);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.isInitialized && ctx.allEvents.length === 0 && !ctx.isLoading);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.isInitialized && ctx.allEvents.length > 0);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.virtualScroll.enabled && ctx.scrollState.hasMore);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("events", ctx.events)("orientation", ctx.DisplayOrientation)("collapsibleEvents", true)("alterMode", true);
-        } }, dependencies: [i1.TimelineComponent] });
+            i0.ɵɵproperty("ngIf", ctx.scrollState.isLoading && ctx.virtualScroll.showLoadingIndicator);
+        } }, dependencies: [i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet], styles: ["\n\n\n\n\n\n\n\n\n//   ============================================================================\n//   CSS   VARIABLES   (Theming)\n//   ============================================================================\n\n[_nghost-%COMP%] {\n  // Colors\n  --mj-timeline-bg: transparent;\n  --mj-timeline-line-color: #e0e0e0;\n  --mj-timeline-marker-bg: #1976d2;\n  --mj-timeline-marker-border: #ffffff;\n  --mj-timeline-card-bg: #ffffff;\n  --mj-timeline-card-border: #e0e0e0;\n  --mj-timeline-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n  --mj-timeline-card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.15);\n  --mj-timeline-card-radius: 8px;\n  --mj-timeline-text-primary: #212121;\n  --mj-timeline-text-secondary: #757575;\n  --mj-timeline-text-muted: #9e9e9e;\n  --mj-timeline-accent: #1976d2;\n  --mj-timeline-segment-bg: #f5f5f5;\n  --mj-timeline-focus-ring: 0 0 0 3px rgba(25, 118, 210, 0.3);\n\n  // Sizing\n  --mj-timeline-line-width: 2px;\n  --mj-timeline-marker-size: 14px;\n  --mj-timeline-marker-icon-size: 8px;\n  --mj-timeline-card-padding: 16px;\n  --mj-timeline-card-max-width: 400px;\n  --mj-timeline-card-min-width: 250px;\n  --mj-timeline-gap: 16px;\n  --mj-timeline-segment-gap: 24px;\n  --mj-timeline-axis-offset: 60px;\n\n  // Animation\n  --mj-timeline-transition: 0.25s ease;\n\n  display: block;\n  width: 100%;\n}\n\n//   Dark   mode   support\n.dark-theme[_nghost-%COMP%], .dark-theme   [_nghost-%COMP%], \n[data-theme=\"dark\"][_nghost-%COMP%], [data-theme=\"dark\"]   [_nghost-%COMP%] {\n  --mj-timeline-line-color: #424242;\n  --mj-timeline-card-bg: #1e1e1e;\n  --mj-timeline-card-border: #424242;\n  --mj-timeline-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n  --mj-timeline-text-primary: #ffffff;\n  --mj-timeline-text-secondary: #b0b0b0;\n  --mj-timeline-text-muted: #757575;\n  --mj-timeline-segment-bg: #2d2d2d;\n}\n\n//[_ngcontent-%COMP%]   ============================================================================\n//[_ngcontent-%COMP%]   MAIN[_ngcontent-%COMP%]   CONTAINER\n//[_ngcontent-%COMP%]   ============================================================================\n\n.mj-timeline[_ngcontent-%COMP%] {\n  position: relative;\n  width: 100%;\n  padding: var(--mj-timeline-gap);\n  background: var(--mj-timeline-bg);\n  outline: none;\n\n  &:focus-visible {\n    box-shadow: var(--mj-timeline-focus-ring);\n    border-radius: 4px;\n  }\n}\n\n//[_ngcontent-%COMP%]   ============================================================================\n//[_ngcontent-%COMP%]   LOADING[_ngcontent-%COMP%]   STATE\n//[_ngcontent-%COMP%]   ============================================================================\n\n.mj-timeline__loading[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 48px 24px;\n  gap: 16px;\n}\n\n.mj-timeline__loading-spinner[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  border: 3px solid var(--mj-timeline-line-color);\n  border-top-color: var(--mj-timeline-accent);\n  border-radius: 50%;\n  animation: _ngcontent-%COMP%_mj-timeline-spin 0.8s linear infinite;\n\n  &--small {\n    width: 20px;\n    height: 20px;\n    border-width: 2px;\n  }\n}\n\n.mj-timeline__loading-text[_ngcontent-%COMP%] {\n  color: var(--mj-timeline-text-secondary);\n  font-size: 14px;\n}\n\n.mj-timeline__loading-more[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 16px;\n  gap: 8px;\n  color: var(--mj-timeline-text-secondary);\n  font-size: 13px;\n}\n\n@keyframes _ngcontent-%COMP%_mj-timeline-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n//[_ngcontent-%COMP%]   ============================================================================\n//[_ngcontent-%COMP%]   EMPTY[_ngcontent-%COMP%]   STATE\n//[_ngcontent-%COMP%]   ============================================================================\n\n.mj-timeline__empty[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 64px 24px;\n  gap: 16px;\n  text-align: center;\n}\n\n.mj-timeline__empty-icon[_ngcontent-%COMP%] {\n  font-size: 48px;\n  color: var(--mj-timeline-text-muted);\n}\n\n.mj-timeline__empty-text[_ngcontent-%COMP%] {\n  color: var(--mj-timeline-text-secondary);\n  font-size: 16px;\n}\n\n//[_ngcontent-%COMP%]   ============================================================================\n//[_ngcontent-%COMP%]   TIME[_ngcontent-%COMP%]   SEGMENTS\n//[_ngcontent-%COMP%]   ============================================================================\n\n.mj-timeline__segment[_ngcontent-%COMP%] {\n  margin-bottom: var(--mj-timeline-segment-gap);\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n}\n\n.mj-timeline__segment-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  margin-bottom: var(--mj-timeline-gap);\n  background: var(--mj-timeline-segment-bg);\n  border-radius: 6px;\n  font-weight: 600;\n  color: var(--mj-timeline-text-primary);\n  user-select: none;\n\n  &--clickable {\n    cursor: pointer;\n    transition: background-color var(--mj-timeline-transition);\n\n    &:hover {\n      background: darken(#f5f5f5, 5%);\n    }\n\n    .dark-theme-shadowcsshost-no-combinator &:hover, .dark-theme -shadowcsshost-no-combinator &:hover,\n    [data-theme=\"dark\"]-shadowcsshost-no-combinator &:hover , [data-theme=\"dark\"] -shadowcsshost-no-combinator &:hover {\n      background: lighten(#2d2d2d, 5%);\n    }\n  }\n}\n\n.mj-timeline__segment-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  color: var(--mj-timeline-text-secondary);\n  font-size: 12px;\n  transition: transform var(--mj-timeline-transition);\n}\n\n.mj-timeline__segment-label[_ngcontent-%COMP%] {\n  font-size: 15px;\n}\n\n.mj-timeline__segment-count[_ngcontent-%COMP%] {\n  color: var(--mj-timeline-text-secondary);\n  font-size: 13px;\n  font-weight: 400;\n}\n\n.mj-timeline__segment-line[_ngcontent-%COMP%] {\n  flex: 1;\n  height: 1px;\n  background: var(--mj-timeline-line-color);\n  margin-left: 8px;\n}\n\n.mj-timeline__segment-content[_ngcontent-%COMP%] {\n  overflow: hidden;\n  transition: max-height var(--mj-timeline-transition), opacity var(--mj-timeline-transition);\n\n  &--hidden {\n    max-height: 0;\n    opacity: 0;\n    pointer-events: none;\n  }\n}\n\n//[_ngcontent-%COMP%]   ============================================================================\n//[_ngcontent-%COMP%]   TIMELINE[_ngcontent-%COMP%]   AXIS\n//[_ngcontent-%COMP%]   ============================================================================\n\n.mj-timeline__axis[_ngcontent-%COMP%] {\n  position: relative;\n  padding-left: var(--mj-timeline-axis-offset);\n\n  // Vertical line\n  &::before {\n    content: '';\n    position: absolute;\n    left: calc(var(--mj-timeline-marker-size) / 2);\n    top: 0;\n    bottom: 0;\n    width: var(--mj-timeline-line-width);\n    background: var(--mj-timeline-line-color);\n  }\n}\n\n//[_ngcontent-%COMP%]   ============================================================================\n//[_ngcontent-%COMP%]   TIMELINE[_ngcontent-%COMP%]   EVENT\n//[_ngcontent-%COMP%]   ============================================================================\n\n.mj-timeline__event[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  margin-bottom: var(--mj-timeline-gap);\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n}\n\n//[_ngcontent-%COMP%]   ============================================================================\n//[_ngcontent-%COMP%]   MARKER\n//[_ngcontent-%COMP%]   ============================================================================\n\n.mj-timeline__marker[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 0;\n  top: 16px;\n  width: var(--mj-timeline-marker-size);\n  height: var(--mj-timeline-marker-size);\n  border-radius: 50%;\n  background: var(--mj-timeline-marker-bg);\n  border: 2px solid var(--mj-timeline-marker-border);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n}\n\n.mj-timeline__marker-icon[_ngcontent-%COMP%] {\n  font-size: var(--mj-timeline-marker-icon-size);\n  color: var(--mj-timeline-marker-border);\n  display: none; // Hidden by default, shown in larger markers\n}\n\n.mj-timeline__connector[_ngcontent-%COMP%] {\n  display: none; // Hidden by default, used in horizontal mode\n}\n\n//[_ngcontent-%COMP%]   ============================================================================\n//[_ngcontent-%COMP%]   DATE[_ngcontent-%COMP%]   LABEL[_ngcontent-%COMP%]   (Alternating[_ngcontent-%COMP%]   Layout)\n//[_ngcontent-%COMP%]   ============================================================================\n\n.mj-timeline__date-label[_ngcontent-%COMP%] {\n  display: none; // Hidden by default\n}\n\n//[_ngcontent-%COMP%]   ============================================================================\n//[_ngcontent-%COMP%]   EVENT[_ngcontent-%COMP%]   CARD\n//[_ngcontent-%COMP%]   ============================================================================\n\n.mj-timeline__card[_ngcontent-%COMP%] {\n  flex: 1;\n  background: var(--mj-timeline-card-bg);\n  border: 1px solid var(--mj-timeline-card-border);\n  border-left-width: 4px;\n  border-radius: var(--mj-timeline-card-radius);\n  box-shadow: var(--mj-timeline-card-shadow);\n  overflow: hidden;\n  transition: box-shadow var(--mj-timeline-transition), transform var(--mj-timeline-transition);\n  cursor: pointer;\n  max-width: var(--mj-timeline-card-max-width);\n  min-width: var(--mj-timeline-card-min-width);\n\n  &:hover {\n    box-shadow: var(--mj-timeline-card-shadow-hover);\n    transform: translateY(-1px);\n  }\n\n  .mj-timeline__event--focused & {\n    box-shadow: var(--mj-timeline-focus-ring), var(--mj-timeline-card-shadow);\n  }\n}\n\n//[_ngcontent-%COMP%]   ============================================================================\n//[_ngcontent-%COMP%]   CARD[_ngcontent-%COMP%]   HEADER\n//[_ngcontent-%COMP%]   ============================================================================\n\n.mj-timeline__card-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  padding: var(--mj-timeline-card-padding);\n  gap: 12px;\n}\n\n.mj-timeline__card-header-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  min-width: 0; // Enable text truncation\n}\n\n.mj-timeline__card-icon[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  font-size: 18px;\n  line-height: 1;\n  margin-top: 2px;\n}\n\n.mj-timeline__card-titles[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.mj-timeline__card-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--mj-timeline-text-primary);\n  line-height: 1.4;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mj-timeline__card-subtitle[_ngcontent-%COMP%] {\n  display: block;\n  font-size: 13px;\n  color: var(--mj-timeline-text-secondary);\n  margin-top: 2px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mj-timeline__card-date[_ngcontent-%COMP%] {\n  display: block;\n  font-size: 12px;\n  color: var(--mj-timeline-text-muted);\n  margin-top: 4px;\n}\n\n.mj-timeline__card-toggle[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  color: var(--mj-timeline-text-secondary);\n  border-radius: 4px;\n  cursor: pointer;\n  transition: background-color var(--mj-timeline-transition), color var(--mj-timeline-transition);\n\n  &:hover {\n    background: var(--mj-timeline-segment-bg);\n    color: var(--mj-timeline-text-primary);\n  }\n\n  &:focus-visible {\n    box-shadow: var(--mj-timeline-focus-ring);\n    outline: none;\n  }\n}\n\n//[_ngcontent-%COMP%]   ============================================================================\n//[_ngcontent-%COMP%]   CARD[_ngcontent-%COMP%]   IMAGE\n//[_ngcontent-%COMP%]   ============================================================================\n\n.mj-timeline__card-image[_ngcontent-%COMP%] {\n  overflow: hidden;\n  border-radius: 4px;\n  flex-shrink: 0;\n\n  img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  &--left {\n    &.mj-timeline__card-image--small {\n      width: 48px;\n      height: 48px;\n    }\n\n    &.mj-timeline__card-image--medium {\n      width: 80px;\n      height: 80px;\n    }\n\n    &.mj-timeline__card-image--large {\n      width: 120px;\n      height: 120px;\n    }\n  }\n\n  &--top {\n    width: 100%;\n    max-height: 200px;\n    margin: 0 var(--mj-timeline-card-padding);\n    margin-top: 0;\n    border-radius: 4px;\n\n    img {\n      width: calc(100% - 2 * var(--mj-timeline-card-padding));\n      height: auto;\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   ============================================================================\n//[_ngcontent-%COMP%]   CARD[_ngcontent-%COMP%]   BODY\n//[_ngcontent-%COMP%]   ============================================================================\n\n.mj-timeline__card-body[_ngcontent-%COMP%] {\n  padding: 0 var(--mj-timeline-card-padding);\n  padding-bottom: var(--mj-timeline-card-padding);\n\n  &--collapsed {\n    display: none;\n  }\n}\n\n.mj-timeline__card-description[_ngcontent-%COMP%] {\n  font-size: 14px;\n  line-height: 1.6;\n  color: var(--mj-timeline-text-secondary);\n  margin-bottom: 12px;\n\n  &--clamped {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n  }\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n}\n\n//[_ngcontent-%COMP%]   ============================================================================\n//[_ngcontent-%COMP%]   CARD[_ngcontent-%COMP%]   FIELDS\n//[_ngcontent-%COMP%]   ============================================================================\n\n.mj-timeline__card-fields[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px 16px;\n\n  &--summary {\n    padding-top: 8px;\n    border-top: 1px solid var(--mj-timeline-line-color);\n    margin-top: 8px;\n  }\n\n  &--expanded {\n    margin-top: 12px;\n    padding-top: 12px;\n    border-top: 1px solid var(--mj-timeline-line-color);\n  }\n}\n\n.mj-timeline__card-field[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 13px;\n}\n\n.mj-timeline__card-field-icon[_ngcontent-%COMP%] {\n  color: var(--mj-timeline-text-muted);\n  font-size: 12px;\n}\n\n.mj-timeline__card-field-label[_ngcontent-%COMP%] {\n  color: var(--mj-timeline-text-muted);\n}\n\n.mj-timeline__card-field-value[_ngcontent-%COMP%] {\n  color: var(--mj-timeline-text-secondary);\n  font-weight: 500;\n}\n\n//[_ngcontent-%COMP%]   ============================================================================\n//[_ngcontent-%COMP%]   CARD[_ngcontent-%COMP%]   ACTIONS\n//[_ngcontent-%COMP%]   ============================================================================\n\n.mj-timeline__card-actions[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  padding: var(--mj-timeline-card-padding);\n  padding-top: 0;\n  justify-content: flex-end;\n\n  &--hover-only {\n    opacity: 0;\n    transition: opacity var(--mj-timeline-transition);\n\n    .mj-timeline__card:hover &,\n    .mj-timeline__card:focus-within & {\n      opacity: 1;\n    }\n  }\n}\n\n.mj-timeline__action[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  font-size: 13px;\n  font-weight: 500;\n  border: 1px solid;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: all var(--mj-timeline-transition);\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  &:focus-visible {\n    box-shadow: var(--mj-timeline-focus-ring);\n    outline: none;\n  }\n\n  i {\n    font-size: 12px;\n  }\n\n  // Variants\n  &--primary {\n    background: var(--mj-timeline-accent);\n    border-color: var(--mj-timeline-accent);\n    color: #ffffff;\n\n    &:hover:not(:disabled) {\n      background: darken(#1976d2, 8%);\n      border-color: darken(#1976d2, 8%);\n    }\n  }\n\n  &--secondary {\n    background: transparent;\n    border-color: var(--mj-timeline-card-border);\n    color: var(--mj-timeline-text-primary);\n\n    &:hover:not(:disabled) {\n      background: var(--mj-timeline-segment-bg);\n    }\n  }\n\n  &--danger {\n    background: #f44336;\n    border-color: #f44336;\n    color: #ffffff;\n\n    &:hover:not(:disabled) {\n      background: darken(#f44336, 8%);\n      border-color: darken(#f44336, 8%);\n    }\n  }\n\n  &--link {\n    background: transparent;\n    border-color: transparent;\n    color: var(--mj-timeline-accent);\n    padding: 6px 8px;\n\n    &:hover:not(:disabled) {\n      background: rgba(25, 118, 210, 0.08);\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   ============================================================================\n//[_ngcontent-%COMP%]   VIRTUAL[_ngcontent-%COMP%]   SCROLL[_ngcontent-%COMP%]   SENTINEL\n//[_ngcontent-%COMP%]   ============================================================================\n\n.mj-timeline-scroll-sentinel[_ngcontent-%COMP%] {\n  height: 1px;\n  width: 100%;\n  visibility: hidden;\n}\n\n//[_ngcontent-%COMP%]   ============================================================================\n//[_ngcontent-%COMP%]   ALTERNATING[_ngcontent-%COMP%]   LAYOUT\n//[_ngcontent-%COMP%]   ============================================================================\n\n.mj-timeline--alternating[_ngcontent-%COMP%] {\n  .mj-timeline__axis {\n    padding-left: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    &::before {\n      left: 50%;\n      transform: translateX(-50%);\n    }\n  }\n\n  .mj-timeline__event {\n    width: 100%;\n    justify-content: flex-start;\n    padding-right: calc(50% + var(--mj-timeline-gap));\n\n    &--odd {\n      justify-content: flex-end;\n      padding-right: 0;\n      padding-left: calc(50% + var(--mj-timeline-gap));\n      flex-direction: row-reverse;\n    }\n  }\n\n  .mj-timeline__marker {\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  .mj-timeline__date-label {\n    display: block;\n    position: absolute;\n    top: 12px;\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--mj-timeline-accent);\n    white-space: nowrap;\n\n    .mj-timeline__event:not(.mj-timeline__event--odd) & {\n      right: calc(50% + var(--mj-timeline-gap) + var(--mj-timeline-marker-size));\n      text-align: right;\n    }\n\n    .mj-timeline__event--odd & {\n      left: calc(50% + var(--mj-timeline-gap) + var(--mj-timeline-marker-size));\n      text-align: left;\n    }\n  }\n\n  .mj-timeline__card {\n    max-width: calc(50% - var(--mj-timeline-gap) - var(--mj-timeline-marker-size));\n  }\n}\n\n//[_ngcontent-%COMP%]   ============================================================================\n//[_ngcontent-%COMP%]   HORIZONTAL[_ngcontent-%COMP%]   LAYOUT\n//[_ngcontent-%COMP%]   ============================================================================\n\n.mj-timeline--horizontal[_ngcontent-%COMP%] {\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n\n  .mj-timeline__axis {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    padding-left: 0;\n    padding-top: var(--mj-timeline-gap);\n    min-width: max-content;\n\n    &::before {\n      left: 0;\n      right: 0;\n      top: calc(var(--mj-timeline-marker-size) / 2 + var(--mj-timeline-gap));\n      bottom: auto;\n      width: auto;\n      height: var(--mj-timeline-line-width);\n    }\n  }\n\n  .mj-timeline__segment-content {\n    .mj-timeline__axis {\n      flex-direction: row;\n    }\n  }\n\n  .mj-timeline__event {\n    flex-direction: column;\n    align-items: center;\n    margin-bottom: 0;\n    margin-right: var(--mj-timeline-gap);\n    min-width: 280px;\n    max-width: 320px;\n\n    &:last-child {\n      margin-right: 0;\n    }\n  }\n\n  .mj-timeline__marker {\n    position: relative;\n    left: auto;\n    top: auto;\n    margin-bottom: var(--mj-timeline-gap);\n  }\n\n  .mj-timeline__card {\n    max-width: none;\n    width: 100%;\n  }\n\n  .mj-timeline__date-label {\n    display: block;\n    margin-bottom: 8px;\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--mj-timeline-accent);\n  }\n}\n\n//[_ngcontent-%COMP%]   ============================================================================\n//[_ngcontent-%COMP%]   RESPONSIVE[_ngcontent-%COMP%]   STYLES\n//[_ngcontent-%COMP%]   ============================================================================\n\n//[_ngcontent-%COMP%]   Tablet\n@media[_ngcontent-%COMP%]   (max-width[_ngcontent-%COMP%]:   1024px)[_ngcontent-%COMP%] {\n  -shadowcsshost-no-combinator {\n    --mj-timeline-card-max-width: 350px;\n    --mj-timeline-axis-offset: 50px;\n  }\n\n  // Force single layout on tablet\n  .mj-timeline--alternating {\n    .mj-timeline__axis {\n      align-items: flex-start;\n      padding-left: var(--mj-timeline-axis-offset);\n\n      &::before {\n        left: calc(var(--mj-timeline-marker-size) / 2);\n        transform: none;\n      }\n    }\n\n    .mj-timeline__event {\n      padding-right: 0;\n      padding-left: 0;\n      justify-content: flex-start;\n      flex-direction: row;\n\n      &--odd {\n        padding-left: 0;\n        justify-content: flex-start;\n        flex-direction: row;\n      }\n    }\n\n    .mj-timeline__marker {\n      left: 0;\n      transform: none;\n    }\n\n    .mj-timeline__date-label {\n      display: none;\n    }\n\n    .mj-timeline__card {\n      max-width: var(--mj-timeline-card-max-width);\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   Mobile\n@media[_ngcontent-%COMP%]   (max-width[_ngcontent-%COMP%]:   767px)[_ngcontent-%COMP%] {\n  -shadowcsshost-no-combinator {\n    --mj-timeline-card-max-width: 100%;\n    --mj-timeline-card-min-width: 0;\n    --mj-timeline-axis-offset: 40px;\n    --mj-timeline-marker-size: 12px;\n    --mj-timeline-card-padding: 12px;\n    --mj-timeline-gap: 12px;\n  }\n\n  .mj-timeline {\n    padding: var(--mj-timeline-gap);\n  }\n\n  .mj-timeline__segment-header {\n    padding: 10px 12px;\n    font-size: 14px;\n  }\n\n  .mj-timeline__segment-line {\n    display: none;\n  }\n\n  .mj-timeline__card {\n    max-width: none;\n    min-width: 0;\n  }\n\n  .mj-timeline__card-title {\n    font-size: 14px;\n    white-space: normal;\n  }\n\n  .mj-timeline__card-actions {\n    flex-direction: column;\n\n    .mj-timeline__action {\n      width: 100%;\n      justify-content: center;\n    }\n  }\n\n  // Horizontal mode on mobile\n  .mj-timeline--horizontal {\n    .mj-timeline__event {\n      min-width: 240px;\n      max-width: 280px;\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   Touch[_ngcontent-%COMP%]   device[_ngcontent-%COMP%]   optimizations\n@media[_ngcontent-%COMP%]   (hover[_ngcontent-%COMP%]:   none)[_ngcontent-%COMP%]   and[_ngcontent-%COMP%]   (pointer[_ngcontent-%COMP%]:   coarse)[_ngcontent-%COMP%] {\n  .mj-timeline__card-actions--hover-only {\n    opacity: 1;\n  }\n\n  .mj-timeline__action {\n    min-height: 44px;\n    min-width: 44px;\n  }\n}"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimelineComponent, [{
         type: Component,
-        args: [{ selector: 'mj-timeline', template: "<div  class=\"wrapper\"> \n  <kendo-timeline\n    [events]=\"events\"\n    [orientation]=\"DisplayOrientation\"\n    [collapsibleEvents]=\"true\"\n    [alterMode]=\"true\"\n  >\n  </kendo-timeline>\n</div> " }]
-    }], null, { DisplayOrientation: [{
+        args: [{ selector: 'mj-timeline', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  MJ Timeline Component Template\n\n  Structure:\n  - Loading state\n  - Empty state\n  - Timeline container (vertical/horizontal)\n    - Time segments (collapsible)\n      - Segment header\n      - Event cards within segment\n    - Or flat list of events (when segmentGrouping='none')\n  - Virtual scroll sentinel\n-->\n\n<div\n  class=\"mj-timeline\"\n  [class.mj-timeline--vertical]=\"orientation === 'vertical'\"\n  [class.mj-timeline--horizontal]=\"orientation === 'horizontal'\"\n  [class.mj-timeline--single]=\"layout === 'single'\"\n  [class.mj-timeline--alternating]=\"layout === 'alternating'\"\n  [attr.aria-label]=\"ariaLabel\"\n  role=\"list\"\n  tabindex=\"0\"\n  (keydown)=\"onKeyDown($event)\"\n  #scrollContainer\n  (scroll)=\"onScroll($event)\">\n\n  <!-- Loading State -->\n  <ng-container *ngIf=\"isLoading && !isInitialized\">\n    <ng-container *ngIf=\"loadingTemplate; else defaultLoading\">\n      <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n    </ng-container>\n    <ng-template #defaultLoading>\n      <div class=\"mj-timeline__loading\">\n        <div class=\"mj-timeline__loading-spinner\"></div>\n        <span class=\"mj-timeline__loading-text\">{{ loadingMessage }}</span>\n      </div>\n    </ng-template>\n  </ng-container>\n\n  <!-- Empty State -->\n  <ng-container *ngIf=\"isInitialized && allEvents.length === 0 && !isLoading\">\n    <ng-container *ngIf=\"emptyTemplate; else defaultEmpty\">\n      <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n    </ng-container>\n    <ng-template #defaultEmpty>\n      <div class=\"mj-timeline__empty\">\n        <i [class]=\"emptyIcon\" class=\"mj-timeline__empty-icon\"></i>\n        <span class=\"mj-timeline__empty-text\">{{ emptyMessage }}</span>\n      </div>\n    </ng-template>\n  </ng-container>\n\n  <!-- Timeline Content -->\n  <ng-container *ngIf=\"isInitialized && allEvents.length > 0\">\n\n    <!-- Segmented View -->\n    <ng-container *ngIf=\"segmentGrouping !== 'none'\">\n      <div\n        *ngFor=\"let segment of segments; trackBy: trackBySegmentLabel; let segmentIndex = index\"\n        class=\"mj-timeline__segment\"\n        [class.mj-timeline__segment--collapsed]=\"!segment.isExpanded\"\n        [attr.data-segment-label]=\"segment.label\">\n\n        <!-- Segment Header -->\n        <div\n          class=\"mj-timeline__segment-header\"\n          [class.mj-timeline__segment-header--clickable]=\"segmentsCollapsible\"\n          (click)=\"onSegmentClick(segment)\"\n          role=\"button\"\n          [attr.aria-expanded]=\"segment.isExpanded\"\n          [attr.aria-controls]=\"'segment-content-' + segmentIndex\">\n\n          <ng-container *ngIf=\"segmentHeaderTemplate; else defaultSegmentHeader\">\n            <ng-container *ngTemplateOutlet=\"segmentHeaderTemplate; context: { segment: segment }\"></ng-container>\n          </ng-container>\n\n          <ng-template #defaultSegmentHeader>\n            <span class=\"mj-timeline__segment-toggle\" *ngIf=\"segmentsCollapsible\">\n              <i [class]=\"segment.isExpanded ? 'fa-solid fa-chevron-down' : 'fa-solid fa-chevron-right'\"></i>\n            </span>\n            <span class=\"mj-timeline__segment-label\">{{ segment.label }}</span>\n            <span class=\"mj-timeline__segment-count\">({{ segment.eventCount }} {{ segment.eventCount === 1 ? 'event' : 'events' }})</span>\n            <span class=\"mj-timeline__segment-line\"></span>\n          </ng-template>\n        </div>\n\n        <!-- Segment Content -->\n        <div\n          class=\"mj-timeline__segment-content\"\n          [id]=\"'segment-content-' + segmentIndex\"\n          [class.mj-timeline__segment-content--hidden]=\"!segment.isExpanded\">\n\n          <div class=\"mj-timeline__axis\">\n            <!-- Events in Segment -->\n            <ng-container *ngFor=\"let event of segment.events; trackBy: trackByEventId; let eventIndex = index; let isOdd = odd\">\n              <ng-container *ngTemplateOutlet=\"eventCard; context: {\n                event: event,\n                index: eventIndex,\n                isOdd: isOdd,\n                globalIndex: getGlobalIndex(event)\n              }\"></ng-container>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Flat View (no segments) -->\n    <ng-container *ngIf=\"segmentGrouping === 'none'\">\n      <div class=\"mj-timeline__axis\">\n        <ng-container *ngFor=\"let event of allEvents; trackBy: trackByEventId; let eventIndex = index; let isOdd = odd\">\n          <ng-container *ngTemplateOutlet=\"eventCard; context: {\n            event: event,\n            index: eventIndex,\n            isOdd: isOdd,\n            globalIndex: eventIndex\n          }\"></ng-container>\n        </ng-container>\n      </div>\n    </ng-container>\n\n  </ng-container>\n\n  <!-- Virtual Scroll Sentinel -->\n  <div\n    class=\"mj-timeline-scroll-sentinel\"\n    *ngIf=\"virtualScroll.enabled && scrollState.hasMore\">\n  </div>\n\n  <!-- Loading More Indicator -->\n  <div\n    class=\"mj-timeline__loading-more\"\n    *ngIf=\"scrollState.isLoading && virtualScroll.showLoadingIndicator\">\n    <div class=\"mj-timeline__loading-spinner mj-timeline__loading-spinner--small\"></div>\n    <span>{{ virtualScroll.loadingMessage }}</span>\n  </div>\n\n</div>\n\n<!-- Event Card Template -->\n<ng-template #eventCard let-event=\"event\" let-index=\"index\" let-isOdd=\"isOdd\" let-globalIndex=\"globalIndex\">\n  <div\n    class=\"mj-timeline__event\"\n    [class.mj-timeline__event--odd]=\"isOdd && layout === 'alternating'\"\n    [class.mj-timeline__event--even]=\"!isOdd && layout === 'alternating'\"\n    [class.mj-timeline__event--expanded]=\"event.isExpanded\"\n    [class.mj-timeline__event--focused]=\"focusedEventIndex === globalIndex\"\n    [attr.data-event-id]=\"event.id\"\n    role=\"listitem\"\n    [attr.aria-expanded]=\"event.isExpanded\">\n\n    <!-- Timeline Marker -->\n    <div class=\"mj-timeline__marker\" [style.background-color]=\"getColor(event)\">\n      <i [class]=\"getIcon(event)\" class=\"mj-timeline__marker-icon\"></i>\n    </div>\n\n    <!-- Connector Line -->\n    <div class=\"mj-timeline__connector\" [style.background-color]=\"getColor(event)\"></div>\n\n    <!-- Date Label (for alternating layout) -->\n    <div class=\"mj-timeline__date-label\" *ngIf=\"layout === 'alternating'\">\n      {{ formatDate(event.date) }}\n    </div>\n\n    <!-- Event Card -->\n    <div\n      class=\"mj-timeline__card\"\n      [class]=\"getEffectiveCardConfig(event).cssClass\"\n      [style.max-width]=\"getEffectiveCardConfig(event).maxWidth\"\n      [style.min-width]=\"getEffectiveCardConfig(event).minWidth\"\n      [style.border-left-color]=\"getColor(event)\"\n      (click)=\"onEventClick(event, globalIndex, $event)\"\n      (mouseenter)=\"onEventMouseEnter(event, globalIndex, $event)\"\n      (mouseleave)=\"onEventMouseLeave(event, globalIndex, $event)\">\n\n      <!-- Custom Card Template -->\n      <ng-container *ngIf=\"cardTemplate; else defaultCard\">\n        <ng-container *ngTemplateOutlet=\"cardTemplate; context: {\n          event: event,\n          group: groups[event.groupIndex]\n        }\"></ng-container>\n      </ng-container>\n\n      <!-- Default Card Template -->\n      <ng-template #defaultCard>\n        <!-- Card Header -->\n        <div class=\"mj-timeline__card-header\">\n          <!-- Image (left position) -->\n          <div\n            class=\"mj-timeline__card-image mj-timeline__card-image--left\"\n            *ngIf=\"event.imageUrl && getEffectiveCardConfig(event).imagePosition === 'left'\"\n            [class.mj-timeline__card-image--small]=\"getEffectiveCardConfig(event).imageSize === 'small'\"\n            [class.mj-timeline__card-image--medium]=\"getEffectiveCardConfig(event).imageSize === 'medium'\"\n            [class.mj-timeline__card-image--large]=\"getEffectiveCardConfig(event).imageSize === 'large'\">\n            <img [src]=\"event.imageUrl\" [alt]=\"event.title\" />\n          </div>\n\n          <div class=\"mj-timeline__card-header-content\">\n            <!-- Custom Header Template -->\n            <ng-container *ngIf=\"headerTemplate; else defaultHeader\">\n              <ng-container *ngTemplateOutlet=\"headerTemplate; context: { event: event }\"></ng-container>\n            </ng-container>\n\n            <ng-template #defaultHeader>\n              <!-- Icon -->\n              <span\n                class=\"mj-timeline__card-icon\"\n                *ngIf=\"getEffectiveCardConfig(event).showIcon\"\n                [style.color]=\"getColor(event)\">\n                <i [class]=\"getIcon(event)\"></i>\n              </span>\n\n              <!-- Title & Subtitle -->\n              <div class=\"mj-timeline__card-titles\">\n                <h4 class=\"mj-timeline__card-title\">{{ event.title }}</h4>\n                <span\n                  class=\"mj-timeline__card-subtitle\"\n                  *ngIf=\"event.subtitle && getEffectiveCardConfig(event).showSubtitle\">\n                  {{ event.subtitle }}\n                </span>\n                <span\n                  class=\"mj-timeline__card-date\"\n                  *ngIf=\"getEffectiveCardConfig(event).showDate && layout !== 'alternating'\">\n                  {{ formatDate(event.date, getEffectiveCardConfig(event).dateFormat) }}\n                </span>\n              </div>\n\n              <!-- Expand/Collapse Toggle -->\n              <button\n                class=\"mj-timeline__card-toggle\"\n                *ngIf=\"getEffectiveCardConfig(event).collapsible\"\n                (click)=\"onToggleExpand(event, globalIndex, $event)\"\n                [attr.aria-label]=\"event.isExpanded ? 'Collapse' : 'Expand'\"\n                type=\"button\">\n                <i [class]=\"event.isExpanded ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'\"></i>\n              </button>\n            </ng-template>\n          </div>\n        </div>\n\n        <!-- Image (top position) -->\n        <div\n          class=\"mj-timeline__card-image mj-timeline__card-image--top\"\n          *ngIf=\"event.imageUrl && getEffectiveCardConfig(event).imagePosition === 'top'\">\n          <img [src]=\"event.imageUrl\" [alt]=\"event.title\" />\n        </div>\n\n        <!-- Card Body -->\n        <div\n          class=\"mj-timeline__card-body\"\n          [class.mj-timeline__card-body--collapsed]=\"!event.isExpanded && getEffectiveCardConfig(event).collapsible\">\n\n          <!-- Custom Body Template -->\n          <ng-container *ngIf=\"bodyTemplate; else defaultBody\">\n            <ng-container *ngTemplateOutlet=\"bodyTemplate; context: { event: event }\"></ng-container>\n          </ng-container>\n\n          <ng-template #defaultBody>\n            <!-- Summary Fields (always visible) -->\n            <div\n              class=\"mj-timeline__card-fields mj-timeline__card-fields--summary\"\n              *ngIf=\"getEffectiveCardConfig(event).summaryFields?.length\">\n              <ng-container *ngFor=\"let field of getEffectiveCardConfig(event).summaryFields\">\n                <div class=\"mj-timeline__card-field\" [class]=\"field.cssClass\">\n                  <i *ngIf=\"field.icon\" [class]=\"field.icon\" class=\"mj-timeline__card-field-icon\"></i>\n                  <span *ngIf=\"!field.hideLabel && field.label\" class=\"mj-timeline__card-field-label\">{{ field.label }}:</span>\n                  <span class=\"mj-timeline__card-field-value\">{{ getFieldValue(event, field) }}</span>\n                </div>\n              </ng-container>\n            </div>\n\n            <!-- Description (expanded view) -->\n            <div\n              class=\"mj-timeline__card-description\"\n              *ngIf=\"event.description && event.isExpanded\"\n              [class.mj-timeline__card-description--clamped]=\"(getEffectiveCardConfig(event).descriptionMaxLines ?? 0) > 0\"\n              [style.-webkit-line-clamp]=\"getEffectiveCardConfig(event).descriptionMaxLines || null\">\n              <ng-container *ngIf=\"getEffectiveCardConfig(event).allowHtmlDescription; else plainDescription\">\n                <div [innerHTML]=\"event.description\"></div>\n              </ng-container>\n              <ng-template #plainDescription>\n                {{ event.description }}\n              </ng-template>\n            </div>\n\n            <!-- Expanded Fields -->\n            <div\n              class=\"mj-timeline__card-fields mj-timeline__card-fields--expanded\"\n              *ngIf=\"event.isExpanded && getEffectiveCardConfig(event).expandedFields?.length\">\n              <ng-container *ngFor=\"let field of getEffectiveCardConfig(event).expandedFields\">\n                <div class=\"mj-timeline__card-field\" [class]=\"field.cssClass\">\n                  <i *ngIf=\"field.icon\" [class]=\"field.icon\" class=\"mj-timeline__card-field-icon\"></i>\n                  <span *ngIf=\"!field.hideLabel\" class=\"mj-timeline__card-field-label\">{{ field.label || field.fieldName }}:</span>\n                  <span class=\"mj-timeline__card-field-value\">{{ getFieldValue(event, field) }}</span>\n                </div>\n              </ng-container>\n            </div>\n          </ng-template>\n        </div>\n\n        <!-- Card Actions -->\n        <div\n          class=\"mj-timeline__card-actions\"\n          [class.mj-timeline__card-actions--hover-only]=\"getEffectiveCardConfig(event).actionsOnHover\"\n          *ngIf=\"getActions(event).length > 0\">\n\n          <!-- Custom Actions Template -->\n          <ng-container *ngIf=\"actionsTemplate; else defaultActions\">\n            <ng-container *ngTemplateOutlet=\"actionsTemplate; context: {\n              event: event,\n              actions: getActions(event)\n            }\"></ng-container>\n          </ng-container>\n\n          <ng-template #defaultActions>\n            <button\n              *ngFor=\"let action of getActions(event)\"\n              class=\"mj-timeline__action\"\n              [class.mj-timeline__action--primary]=\"action.variant === 'primary'\"\n              [class.mj-timeline__action--secondary]=\"action.variant === 'secondary' || !action.variant\"\n              [class.mj-timeline__action--danger]=\"action.variant === 'danger'\"\n              [class.mj-timeline__action--link]=\"action.variant === 'link'\"\n              [class]=\"action.cssClass\"\n              [disabled]=\"action.disabled\"\n              [title]=\"action.tooltip || ''\"\n              (click)=\"onActionClick(event, action, globalIndex, $event)\"\n              type=\"button\">\n              <i *ngIf=\"action.icon\" [class]=\"action.icon\"></i>\n              <span>{{ action.label }}</span>\n            </button>\n          </ng-template>\n        </div>\n      </ng-template>\n    </div>\n  </div>\n</ng-template>\n", styles: ["/**\n * MJ Timeline Component Styles\n *\n * A responsive, themeable timeline component using CSS variables.\n * Supports vertical/horizontal orientations, single/alternating layouts,\n * and fully responsive mobile design.\n */\n\n// ============================================================================\n// CSS VARIABLES (Theming)\n// ============================================================================\n\n:host {\n  // Colors\n  --mj-timeline-bg: transparent;\n  --mj-timeline-line-color: #e0e0e0;\n  --mj-timeline-marker-bg: #1976d2;\n  --mj-timeline-marker-border: #ffffff;\n  --mj-timeline-card-bg: #ffffff;\n  --mj-timeline-card-border: #e0e0e0;\n  --mj-timeline-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n  --mj-timeline-card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.15);\n  --mj-timeline-card-radius: 8px;\n  --mj-timeline-text-primary: #212121;\n  --mj-timeline-text-secondary: #757575;\n  --mj-timeline-text-muted: #9e9e9e;\n  --mj-timeline-accent: #1976d2;\n  --mj-timeline-segment-bg: #f5f5f5;\n  --mj-timeline-focus-ring: 0 0 0 3px rgba(25, 118, 210, 0.3);\n\n  // Sizing\n  --mj-timeline-line-width: 2px;\n  --mj-timeline-marker-size: 14px;\n  --mj-timeline-marker-icon-size: 8px;\n  --mj-timeline-card-padding: 16px;\n  --mj-timeline-card-max-width: 400px;\n  --mj-timeline-card-min-width: 250px;\n  --mj-timeline-gap: 16px;\n  --mj-timeline-segment-gap: 24px;\n  --mj-timeline-axis-offset: 60px;\n\n  // Animation\n  --mj-timeline-transition: 0.25s ease;\n\n  display: block;\n  width: 100%;\n}\n\n// Dark mode support\n:host-context(.dark-theme),\n:host-context([data-theme=\"dark\"]) {\n  --mj-timeline-line-color: #424242;\n  --mj-timeline-card-bg: #1e1e1e;\n  --mj-timeline-card-border: #424242;\n  --mj-timeline-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n  --mj-timeline-text-primary: #ffffff;\n  --mj-timeline-text-secondary: #b0b0b0;\n  --mj-timeline-text-muted: #757575;\n  --mj-timeline-segment-bg: #2d2d2d;\n}\n\n// ============================================================================\n// MAIN CONTAINER\n// ============================================================================\n\n.mj-timeline {\n  position: relative;\n  width: 100%;\n  padding: var(--mj-timeline-gap);\n  background: var(--mj-timeline-bg);\n  outline: none;\n\n  &:focus-visible {\n    box-shadow: var(--mj-timeline-focus-ring);\n    border-radius: 4px;\n  }\n}\n\n// ============================================================================\n// LOADING STATE\n// ============================================================================\n\n.mj-timeline__loading {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 48px 24px;\n  gap: 16px;\n}\n\n.mj-timeline__loading-spinner {\n  width: 40px;\n  height: 40px;\n  border: 3px solid var(--mj-timeline-line-color);\n  border-top-color: var(--mj-timeline-accent);\n  border-radius: 50%;\n  animation: mj-timeline-spin 0.8s linear infinite;\n\n  &--small {\n    width: 20px;\n    height: 20px;\n    border-width: 2px;\n  }\n}\n\n.mj-timeline__loading-text {\n  color: var(--mj-timeline-text-secondary);\n  font-size: 14px;\n}\n\n.mj-timeline__loading-more {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 16px;\n  gap: 8px;\n  color: var(--mj-timeline-text-secondary);\n  font-size: 13px;\n}\n\n@keyframes mj-timeline-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n// ============================================================================\n// EMPTY STATE\n// ============================================================================\n\n.mj-timeline__empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 64px 24px;\n  gap: 16px;\n  text-align: center;\n}\n\n.mj-timeline__empty-icon {\n  font-size: 48px;\n  color: var(--mj-timeline-text-muted);\n}\n\n.mj-timeline__empty-text {\n  color: var(--mj-timeline-text-secondary);\n  font-size: 16px;\n}\n\n// ============================================================================\n// TIME SEGMENTS\n// ============================================================================\n\n.mj-timeline__segment {\n  margin-bottom: var(--mj-timeline-segment-gap);\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n}\n\n.mj-timeline__segment-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  margin-bottom: var(--mj-timeline-gap);\n  background: var(--mj-timeline-segment-bg);\n  border-radius: 6px;\n  font-weight: 600;\n  color: var(--mj-timeline-text-primary);\n  user-select: none;\n\n  &--clickable {\n    cursor: pointer;\n    transition: background-color var(--mj-timeline-transition);\n\n    &:hover {\n      background: darken(#f5f5f5, 5%);\n    }\n\n    :host-context(.dark-theme) &:hover,\n    :host-context([data-theme=\"dark\"]) &:hover {\n      background: lighten(#2d2d2d, 5%);\n    }\n  }\n}\n\n.mj-timeline__segment-toggle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  color: var(--mj-timeline-text-secondary);\n  font-size: 12px;\n  transition: transform var(--mj-timeline-transition);\n}\n\n.mj-timeline__segment-label {\n  font-size: 15px;\n}\n\n.mj-timeline__segment-count {\n  color: var(--mj-timeline-text-secondary);\n  font-size: 13px;\n  font-weight: 400;\n}\n\n.mj-timeline__segment-line {\n  flex: 1;\n  height: 1px;\n  background: var(--mj-timeline-line-color);\n  margin-left: 8px;\n}\n\n.mj-timeline__segment-content {\n  overflow: hidden;\n  transition: max-height var(--mj-timeline-transition), opacity var(--mj-timeline-transition);\n\n  &--hidden {\n    max-height: 0;\n    opacity: 0;\n    pointer-events: none;\n  }\n}\n\n// ============================================================================\n// TIMELINE AXIS\n// ============================================================================\n\n.mj-timeline__axis {\n  position: relative;\n  padding-left: var(--mj-timeline-axis-offset);\n\n  // Vertical line\n  &::before {\n    content: '';\n    position: absolute;\n    left: calc(var(--mj-timeline-marker-size) / 2);\n    top: 0;\n    bottom: 0;\n    width: var(--mj-timeline-line-width);\n    background: var(--mj-timeline-line-color);\n  }\n}\n\n// ============================================================================\n// TIMELINE EVENT\n// ============================================================================\n\n.mj-timeline__event {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  margin-bottom: var(--mj-timeline-gap);\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n}\n\n// ============================================================================\n// MARKER\n// ============================================================================\n\n.mj-timeline__marker {\n  position: absolute;\n  left: 0;\n  top: 16px;\n  width: var(--mj-timeline-marker-size);\n  height: var(--mj-timeline-marker-size);\n  border-radius: 50%;\n  background: var(--mj-timeline-marker-bg);\n  border: 2px solid var(--mj-timeline-marker-border);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n}\n\n.mj-timeline__marker-icon {\n  font-size: var(--mj-timeline-marker-icon-size);\n  color: var(--mj-timeline-marker-border);\n  display: none; // Hidden by default, shown in larger markers\n}\n\n.mj-timeline__connector {\n  display: none; // Hidden by default, used in horizontal mode\n}\n\n// ============================================================================\n// DATE LABEL (Alternating Layout)\n// ============================================================================\n\n.mj-timeline__date-label {\n  display: none; // Hidden by default\n}\n\n// ============================================================================\n// EVENT CARD\n// ============================================================================\n\n.mj-timeline__card {\n  flex: 1;\n  background: var(--mj-timeline-card-bg);\n  border: 1px solid var(--mj-timeline-card-border);\n  border-left-width: 4px;\n  border-radius: var(--mj-timeline-card-radius);\n  box-shadow: var(--mj-timeline-card-shadow);\n  overflow: hidden;\n  transition: box-shadow var(--mj-timeline-transition), transform var(--mj-timeline-transition);\n  cursor: pointer;\n  max-width: var(--mj-timeline-card-max-width);\n  min-width: var(--mj-timeline-card-min-width);\n\n  &:hover {\n    box-shadow: var(--mj-timeline-card-shadow-hover);\n    transform: translateY(-1px);\n  }\n\n  .mj-timeline__event--focused & {\n    box-shadow: var(--mj-timeline-focus-ring), var(--mj-timeline-card-shadow);\n  }\n}\n\n// ============================================================================\n// CARD HEADER\n// ============================================================================\n\n.mj-timeline__card-header {\n  display: flex;\n  align-items: flex-start;\n  padding: var(--mj-timeline-card-padding);\n  gap: 12px;\n}\n\n.mj-timeline__card-header-content {\n  flex: 1;\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  min-width: 0; // Enable text truncation\n}\n\n.mj-timeline__card-icon {\n  flex-shrink: 0;\n  font-size: 18px;\n  line-height: 1;\n  margin-top: 2px;\n}\n\n.mj-timeline__card-titles {\n  flex: 1;\n  min-width: 0;\n}\n\n.mj-timeline__card-title {\n  margin: 0;\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--mj-timeline-text-primary);\n  line-height: 1.4;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mj-timeline__card-subtitle {\n  display: block;\n  font-size: 13px;\n  color: var(--mj-timeline-text-secondary);\n  margin-top: 2px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mj-timeline__card-date {\n  display: block;\n  font-size: 12px;\n  color: var(--mj-timeline-text-muted);\n  margin-top: 4px;\n}\n\n.mj-timeline__card-toggle {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  color: var(--mj-timeline-text-secondary);\n  border-radius: 4px;\n  cursor: pointer;\n  transition: background-color var(--mj-timeline-transition), color var(--mj-timeline-transition);\n\n  &:hover {\n    background: var(--mj-timeline-segment-bg);\n    color: var(--mj-timeline-text-primary);\n  }\n\n  &:focus-visible {\n    box-shadow: var(--mj-timeline-focus-ring);\n    outline: none;\n  }\n}\n\n// ============================================================================\n// CARD IMAGE\n// ============================================================================\n\n.mj-timeline__card-image {\n  overflow: hidden;\n  border-radius: 4px;\n  flex-shrink: 0;\n\n  img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  &--left {\n    &.mj-timeline__card-image--small {\n      width: 48px;\n      height: 48px;\n    }\n\n    &.mj-timeline__card-image--medium {\n      width: 80px;\n      height: 80px;\n    }\n\n    &.mj-timeline__card-image--large {\n      width: 120px;\n      height: 120px;\n    }\n  }\n\n  &--top {\n    width: 100%;\n    max-height: 200px;\n    margin: 0 var(--mj-timeline-card-padding);\n    margin-top: 0;\n    border-radius: 4px;\n\n    img {\n      width: calc(100% - 2 * var(--mj-timeline-card-padding));\n      height: auto;\n    }\n  }\n}\n\n// ============================================================================\n// CARD BODY\n// ============================================================================\n\n.mj-timeline__card-body {\n  padding: 0 var(--mj-timeline-card-padding);\n  padding-bottom: var(--mj-timeline-card-padding);\n\n  &--collapsed {\n    display: none;\n  }\n}\n\n.mj-timeline__card-description {\n  font-size: 14px;\n  line-height: 1.6;\n  color: var(--mj-timeline-text-secondary);\n  margin-bottom: 12px;\n\n  &--clamped {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n  }\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n}\n\n// ============================================================================\n// CARD FIELDS\n// ============================================================================\n\n.mj-timeline__card-fields {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px 16px;\n\n  &--summary {\n    padding-top: 8px;\n    border-top: 1px solid var(--mj-timeline-line-color);\n    margin-top: 8px;\n  }\n\n  &--expanded {\n    margin-top: 12px;\n    padding-top: 12px;\n    border-top: 1px solid var(--mj-timeline-line-color);\n  }\n}\n\n.mj-timeline__card-field {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 13px;\n}\n\n.mj-timeline__card-field-icon {\n  color: var(--mj-timeline-text-muted);\n  font-size: 12px;\n}\n\n.mj-timeline__card-field-label {\n  color: var(--mj-timeline-text-muted);\n}\n\n.mj-timeline__card-field-value {\n  color: var(--mj-timeline-text-secondary);\n  font-weight: 500;\n}\n\n// ============================================================================\n// CARD ACTIONS\n// ============================================================================\n\n.mj-timeline__card-actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  padding: var(--mj-timeline-card-padding);\n  padding-top: 0;\n  justify-content: flex-end;\n\n  &--hover-only {\n    opacity: 0;\n    transition: opacity var(--mj-timeline-transition);\n\n    .mj-timeline__card:hover &,\n    .mj-timeline__card:focus-within & {\n      opacity: 1;\n    }\n  }\n}\n\n.mj-timeline__action {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  font-size: 13px;\n  font-weight: 500;\n  border: 1px solid;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: all var(--mj-timeline-transition);\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  &:focus-visible {\n    box-shadow: var(--mj-timeline-focus-ring);\n    outline: none;\n  }\n\n  i {\n    font-size: 12px;\n  }\n\n  // Variants\n  &--primary {\n    background: var(--mj-timeline-accent);\n    border-color: var(--mj-timeline-accent);\n    color: #ffffff;\n\n    &:hover:not(:disabled) {\n      background: darken(#1976d2, 8%);\n      border-color: darken(#1976d2, 8%);\n    }\n  }\n\n  &--secondary {\n    background: transparent;\n    border-color: var(--mj-timeline-card-border);\n    color: var(--mj-timeline-text-primary);\n\n    &:hover:not(:disabled) {\n      background: var(--mj-timeline-segment-bg);\n    }\n  }\n\n  &--danger {\n    background: #f44336;\n    border-color: #f44336;\n    color: #ffffff;\n\n    &:hover:not(:disabled) {\n      background: darken(#f44336, 8%);\n      border-color: darken(#f44336, 8%);\n    }\n  }\n\n  &--link {\n    background: transparent;\n    border-color: transparent;\n    color: var(--mj-timeline-accent);\n    padding: 6px 8px;\n\n    &:hover:not(:disabled) {\n      background: rgba(25, 118, 210, 0.08);\n    }\n  }\n}\n\n// ============================================================================\n// VIRTUAL SCROLL SENTINEL\n// ============================================================================\n\n.mj-timeline-scroll-sentinel {\n  height: 1px;\n  width: 100%;\n  visibility: hidden;\n}\n\n// ============================================================================\n// ALTERNATING LAYOUT\n// ============================================================================\n\n.mj-timeline--alternating {\n  .mj-timeline__axis {\n    padding-left: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    &::before {\n      left: 50%;\n      transform: translateX(-50%);\n    }\n  }\n\n  .mj-timeline__event {\n    width: 100%;\n    justify-content: flex-start;\n    padding-right: calc(50% + var(--mj-timeline-gap));\n\n    &--odd {\n      justify-content: flex-end;\n      padding-right: 0;\n      padding-left: calc(50% + var(--mj-timeline-gap));\n      flex-direction: row-reverse;\n    }\n  }\n\n  .mj-timeline__marker {\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  .mj-timeline__date-label {\n    display: block;\n    position: absolute;\n    top: 12px;\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--mj-timeline-accent);\n    white-space: nowrap;\n\n    .mj-timeline__event:not(.mj-timeline__event--odd) & {\n      right: calc(50% + var(--mj-timeline-gap) + var(--mj-timeline-marker-size));\n      text-align: right;\n    }\n\n    .mj-timeline__event--odd & {\n      left: calc(50% + var(--mj-timeline-gap) + var(--mj-timeline-marker-size));\n      text-align: left;\n    }\n  }\n\n  .mj-timeline__card {\n    max-width: calc(50% - var(--mj-timeline-gap) - var(--mj-timeline-marker-size));\n  }\n}\n\n// ============================================================================\n// HORIZONTAL LAYOUT\n// ============================================================================\n\n.mj-timeline--horizontal {\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n\n  .mj-timeline__axis {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    padding-left: 0;\n    padding-top: var(--mj-timeline-gap);\n    min-width: max-content;\n\n    &::before {\n      left: 0;\n      right: 0;\n      top: calc(var(--mj-timeline-marker-size) / 2 + var(--mj-timeline-gap));\n      bottom: auto;\n      width: auto;\n      height: var(--mj-timeline-line-width);\n    }\n  }\n\n  .mj-timeline__segment-content {\n    .mj-timeline__axis {\n      flex-direction: row;\n    }\n  }\n\n  .mj-timeline__event {\n    flex-direction: column;\n    align-items: center;\n    margin-bottom: 0;\n    margin-right: var(--mj-timeline-gap);\n    min-width: 280px;\n    max-width: 320px;\n\n    &:last-child {\n      margin-right: 0;\n    }\n  }\n\n  .mj-timeline__marker {\n    position: relative;\n    left: auto;\n    top: auto;\n    margin-bottom: var(--mj-timeline-gap);\n  }\n\n  .mj-timeline__card {\n    max-width: none;\n    width: 100%;\n  }\n\n  .mj-timeline__date-label {\n    display: block;\n    margin-bottom: 8px;\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--mj-timeline-accent);\n  }\n}\n\n// ============================================================================\n// RESPONSIVE STYLES\n// ============================================================================\n\n// Tablet\n@media (max-width: 1024px) {\n  :host {\n    --mj-timeline-card-max-width: 350px;\n    --mj-timeline-axis-offset: 50px;\n  }\n\n  // Force single layout on tablet\n  .mj-timeline--alternating {\n    .mj-timeline__axis {\n      align-items: flex-start;\n      padding-left: var(--mj-timeline-axis-offset);\n\n      &::before {\n        left: calc(var(--mj-timeline-marker-size) / 2);\n        transform: none;\n      }\n    }\n\n    .mj-timeline__event {\n      padding-right: 0;\n      padding-left: 0;\n      justify-content: flex-start;\n      flex-direction: row;\n\n      &--odd {\n        padding-left: 0;\n        justify-content: flex-start;\n        flex-direction: row;\n      }\n    }\n\n    .mj-timeline__marker {\n      left: 0;\n      transform: none;\n    }\n\n    .mj-timeline__date-label {\n      display: none;\n    }\n\n    .mj-timeline__card {\n      max-width: var(--mj-timeline-card-max-width);\n    }\n  }\n}\n\n// Mobile\n@media (max-width: 767px) {\n  :host {\n    --mj-timeline-card-max-width: 100%;\n    --mj-timeline-card-min-width: 0;\n    --mj-timeline-axis-offset: 40px;\n    --mj-timeline-marker-size: 12px;\n    --mj-timeline-card-padding: 12px;\n    --mj-timeline-gap: 12px;\n  }\n\n  .mj-timeline {\n    padding: var(--mj-timeline-gap);\n  }\n\n  .mj-timeline__segment-header {\n    padding: 10px 12px;\n    font-size: 14px;\n  }\n\n  .mj-timeline__segment-line {\n    display: none;\n  }\n\n  .mj-timeline__card {\n    max-width: none;\n    min-width: 0;\n  }\n\n  .mj-timeline__card-title {\n    font-size: 14px;\n    white-space: normal;\n  }\n\n  .mj-timeline__card-actions {\n    flex-direction: column;\n\n    .mj-timeline__action {\n      width: 100%;\n      justify-content: center;\n    }\n  }\n\n  // Horizontal mode on mobile\n  .mj-timeline--horizontal {\n    .mj-timeline__event {\n      min-width: 240px;\n      max-width: 280px;\n    }\n  }\n}\n\n// Touch device optimizations\n@media (hover: none) and (pointer: coarse) {\n  .mj-timeline__card-actions--hover-only {\n    opacity: 1;\n  }\n\n  .mj-timeline__action {\n    min-height: 44px;\n    min-width: 44px;\n  }\n}\n"] }]
+    }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], { groups: [{
+            type: Input
+        }], allowLoad: [{
+            type: Input
+        }], orientation: [{
+            type: Input
+        }], layout: [{
+            type: Input
+        }], sortOrder: [{
+            type: Input
+        }], segmentGrouping: [{
+            type: Input
+        }], defaultCardConfig: [{
+            type: Input
+        }], virtualScroll: [{
+            type: Input
+        }], segmentsCollapsible: [{
+            type: Input
+        }], segmentsDefaultExpanded: [{
+            type: Input
+        }], emptyMessage: [{
+            type: Input
+        }], emptyIcon: [{
+            type: Input
+        }], loadingMessage: [{
             type: Input
-        }], Groups: [{
+        }], ariaLabel: [{
             type: Input
-        }], AllowLoad: [{
+        }], enableKeyboardNavigation: [{
             type: Input
+        }], beforeEventClick: [{
+            type: Output
+        }], beforeEventExpand: [{
+            type: Output
+        }], beforeEventCollapse: [{
+            type: Output
+        }], beforeEventHover: [{
+            type: Output
+        }], beforeActionClick: [{
+            type: Output
+        }], beforeSegmentExpand: [{
+            type: Output
+        }], beforeSegmentCollapse: [{
+            type: Output
+        }], beforeLoad: [{
+            type: Output
+        }], afterEventClick: [{
+            type: Output
+        }], afterEventExpand: [{
+            type: Output
+        }], afterEventCollapse: [{
+            type: Output
+        }], afterEventHover: [{
+            type: Output
+        }], afterActionClick: [{
+            type: Output
+        }], afterSegmentExpand: [{
+            type: Output
+        }], afterSegmentCollapse: [{
+            type: Output
+        }], afterLoad: [{
+            type: Output
+        }], cardTemplate: [{
+            type: ContentChild,
+            args: ['cardTemplate']
+        }], headerTemplate: [{
+            type: ContentChild,
+            args: ['headerTemplate']
+        }], bodyTemplate: [{
+            type: ContentChild,
+            args: ['bodyTemplate']
+        }], actionsTemplate: [{
+            type: ContentChild,
+            args: ['actionsTemplate']
+        }], segmentHeaderTemplate: [{
+            type: ContentChild,
+            args: ['segmentHeaderTemplate']
+        }], emptyTemplate: [{
+            type: ContentChild,
+            args: ['emptyTemplate']
+        }], loadingTemplate: [{
+            type: ContentChild,
+            args: ['loadingTemplate']
+        }], scrollContainer: [{
+            type: ViewChild,
+            args: ['scrollContainer']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TimelineComponent, { className: "TimelineComponent", filePath: "src/lib/component/timeline.component.ts", lineNumber: 90 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TimelineComponent, { className: "TimelineComponent", filePath: "src/lib/component/timeline.component.ts", lineNumber: 141 }); })();
 //# sourceMappingURL=timeline.component.js.map