@memberjunction/ng-timeline 2.122.1 → 2.123.0

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

@@ -1,200 +1,2097 @@
-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, ViewEncapsulation } 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.ɵɵproperty("ngClass", 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, 1, "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.ɵɵproperty("ngClass", 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, 4, "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.ɵɵproperty("ngClass", 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, 1, "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.ɵɵproperty("ngClass", 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, 4, "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", 81);
+} if (rf & 2) {
+    const action_r28 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("ngClass", 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, 1, "i", 80);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const action_r28 = ctx.$implicit;
+    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("ngClass", action_r28.cssClass)("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, 13, "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.isEventSelected(event_r17, 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.ɵɵ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.ɵɵproperty("ngClass", ctx_r1.getEffectiveCardConfig(event_r17).cssClass);
+    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) {
+        const prevGroups = this._groups;
+        this._groups = value || [];
+        const hasGroups = this._groups.length > 0;
+        // Check if groups actually changed (different date field, label, or data)
+        const groupsChanged = this.didGroupsChange(prevGroups, this._groups);
+        if (this.allowLoad && hasGroups) {
+            if (!this._hasLoaded) {
+                // First load
+                this.refresh();
+            }
+            else if (groupsChanged) {
+                // Groups changed after initial load - force refresh
+                this.refresh(true);
+            }
+        }
+    }
+    _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).
+     * Check if timeline groups have meaningfully changed
      */
-    DataSourceType = 'entity';
+    didGroupsChange(prev, next) {
+        if (prev.length !== next.length)
+            return true;
+        for (let i = 0; i < prev.length; i++) {
+            const p = prev[i];
+            const n = next[i];
+            if (p.DateFieldName !== n.DateFieldName ||
+                p.GroupLabel !== n.GroupLabel ||
+                p.EntityObjects !== n.EntityObjects) {
+                return true;
+            }
+        }
+        return false;
+    }
     /**
-     * An optional filter that will be applied to the entity specified to reduce the number of records displayed
+     * Controls whether data loading is allowed.
+     * Set to false to defer loading until ready.
+     * @default true
      */
-    Filter;
+    get allowLoad() {
+        return this._allowLoad;
+    }
+    set allowLoad(value) {
+        const wasDisabled = !this._allowLoad;
+        this._allowLoad = value;
+        // When allowLoad becomes true and we have groups, trigger refresh
+        if (value && wasDisabled && this._groups.length > 0) {
+            this.refresh(this._hasLoaded);
+        }
+    }
+    _allowLoad = true;
+    // ============================================================================
+    // INPUTS - LAYOUT (using setters for reactive updates)
+    // ============================================================================
     /**
-     * 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.
+     * Timeline orientation.
+     * - `vertical`: Events displayed top-to-bottom
+     * - `horizontal`: Events displayed left-to-right
+     * @default 'vertical'
      */
-    EntityObjects = [];
+    get orientation() {
+        return this._orientation;
+    }
+    set orientation(value) {
+        if (this._orientation !== value) {
+            this._orientation = value;
+            this.cdr.markForCheck();
+        }
+    }
+    _orientation = 'vertical';
     /**
-     * The name of the field in the entity that contains the title of the record that will be displayed in the timeline
+     * Layout mode for vertical timeline.
+     * - `single`: All cards on one side
+     * - `alternating`: Cards alternate sides
+     * @default 'single'
      */
-    TitleFieldName;
+    get layout() {
+        return this._layout;
+    }
+    set layout(value) {
+        if (this._layout !== value) {
+            this._layout = value;
+            this.cdr.markForCheck();
+        }
+    }
+    _layout = 'single';
     /**
-     * The name of the field in the entity that contains the date that will be used for the ordering in the timeline
+     * Sort order for events.
+     * - `desc`: Newest first
+     * - `asc`: Oldest first
+     * @default 'desc'
      */
-    DateFieldName;
+    get sortOrder() {
+        return this._sortOrder;
+    }
+    set sortOrder(value) {
+        if (this._sortOrder !== value) {
+            this._sortOrder = value;
+            // Re-process events when sort order changes - force refresh since data already loaded
+            if (this._initialized) {
+                this.refresh(true);
+            }
+            this.cdr.markForCheck();
+        }
+    }
+    _sortOrder = 'desc';
     /**
-     * Use standard or custom icons, if custom is specified, the DisplayIcon property must be set
+     * How to group events into time segments.
+     * @default 'month'
      */
-    DisplayIconMode = 'standard';
+    get segmentGrouping() {
+        return this._segmentGrouping;
+    }
+    set segmentGrouping(value) {
+        if (this._segmentGrouping !== value) {
+            this._segmentGrouping = value;
+            // Re-segment events when grouping changes - force refresh since data already loaded
+            if (this._initialized) {
+                this.refresh(true);
+            }
+            this.cdr.markForCheck();
+        }
+    }
+    _segmentGrouping = 'month';
+    // ============================================================================
+    // INPUTS - CARD DEFAULTS
+    // ============================================================================
+    /**
+     * Default card configuration applied to all groups.
+     * Individual groups can override these settings.
+     */
+    defaultCardConfig = { ...DEFAULT_CARD_CONFIG };
+    // ============================================================================
+    // INPUTS - VIRTUAL SCROLLING
+    // ============================================================================
+    /**
+     * Virtual scrolling configuration.
+     */
+    virtualScroll = { ...DEFAULT_VIRTUAL_SCROLL_CONFIG };
+    // ============================================================================
+    // INPUTS - SEGMENTS
+    // ============================================================================
+    /**
+     * Whether time segments can be collapsed.
+     * @default true
+     */
+    segmentsCollapsible = true;
+    /**
+     * Whether segments start expanded.
+     * @default true
+     */
+    segmentsDefaultExpanded = true;
+    // ============================================================================
+    // INPUTS - EMPTY & LOADING STATES
+    // ============================================================================
     /**
-     * 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
+     * Message shown when no events exist.
+     * @default 'No events to display'
      */
-    DisplayIcon;
+    emptyMessage = 'No events to display';
     /**
-     * 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
+     * Icon shown with empty message.
+     * @default 'fa-regular fa-calendar-xmark'
      */
-    DisplayColorMode = 'auto';
+    emptyIcon = 'fa-regular fa-calendar-xmark';
     /**
-     * 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.
+     * Message shown while loading.
+     * @default 'Loading timeline...'
      */
-    DisplayColor;
+    loadingMessage = 'Loading timeline...';
+    // ============================================================================
+    // INPUTS - ACCESSIBILITY
+    // ============================================================================
     /**
-     * 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.
+     * ARIA label for the timeline container.
+     * @default 'Timeline'
      */
-    SummaryMode = 'field';
+    ariaLabel = 'Timeline';
     /**
-     * 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.
+     * Enable keyboard navigation.
+     * @default true
      */
-    SummaryFunction;
+    enableKeyboardNavigation = true;
     /**
-     * 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
+     * ID of the currently selected event.
+     * When set, the corresponding event will be highlighted with the focused style.
      */
-    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;
+    get selectedEventId() {
+        return this._selectedEventId;
+    }
+    set selectedEventId(value) {
+        const changed = this._selectedEventId !== value;
+        this._selectedEventId = value;
+        if (changed) {
+            this.cdr.markForCheck();
         }
-        return group;
     }
-}
-/**
- * Displays data on a timeline UI so that information can see a chronolgoical display of the provided data.
- */
-export class TimelineComponent {
-    _groups = [];
-    DisplayOrientation = 'vertical';
+    _selectedEventId = null;
+    // ============================================================================
+    // 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();
+        }
+        // Set up intersection observer for virtual scroll trigger
+        this.setupIntersectionObserver();
+    }
+    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(force = false) {
+        // Prevent concurrent refresh calls - if already refreshing, exit immediately
+        if (this.isLoading || (this._hasLoaded && !force)) {
+            return;
+        }
+        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();
+    }
+    /**
+     * Expands all time segments.
+     */
+    expandAllSegments() {
+        for (const segment of this.segments) {
+            if (!segment.isExpanded) {
+                this.setSegmentExpanded(segment, true);
+            }
+        }
+        this.cdr.markForCheck();
+    }
+    /**
+     * Collapses all time segments.
+     */
+    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();
+        }
+    }
+    /**
+     * Collapses a specific event by ID.
+     */
+    collapseEvent(eventId) {
+        const event = this.getEvent(eventId);
+        if (event && 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();
+    /**
+     * 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' });
+        }
     }
     /**
-     * This method refreshes the timeline with the data from the provided parameters.
+     * Scrolls to a specific date.
      */
-    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);
+    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' });
             }
         }
     }
     /**
-     * This method loads the data for a single group and adds it to the timelineGroupEvents array.
-     * @param group
+     * 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.
      */
-    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);
+    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;
         }
-        this.events.push(...newItems);
     }
-    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);
+    // ============================================================================
+    // 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;
+        }
+        const group = this._groups[event.groupIndex];
+        if (group?.DisplayColorMode === 'manual' && group.DisplayColor) {
+            return group.DisplayColor;
+        }
+        return AUTO_COLORS[event.groupIndex % AUTO_COLORS.length];
+    }
+    /**
+     * 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);
+    }
+    /**
+     * Checks if an event is currently selected/focused.
+     * An event is selected if either:
+     * - Its ID matches the selectedEventId input
+     * - Its global index matches the focusedEventIndex (keyboard navigation)
+     */
+    isEventSelected(event, globalIndex) {
+        // Check selectedEventId from parent first (takes priority)
+        if (this.selectedEventId && event.id === this.selectedEventId) {
+            return true;
+        }
+        // Fall back to keyboard navigation focus
+        return this.focusedEventIndex === globalIndex;
+    }
+    // ============================================================================
+    // 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;
+        });
+    }
+    /**
+     * 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);
         });
-        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);
+    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).
+     * Uses placeholder tokens to avoid replacement conflicts.
+     */
+    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();
+        // Use placeholder tokens to avoid conflicts (e.g., 'May' containing 'M')
+        // Replace longer patterns first with placeholders, then substitute values
+        let result = format;
+        // Replace patterns with unique placeholders first
+        result = result.replace(/yyyy/g, '{{YEAR}}');
+        result = result.replace(/MMMM/g, '{{MONTH_FULL}}');
+        result = result.replace(/MMM/g, '{{MONTH_SHORT}}');
+        result = result.replace(/MM/g, '{{MONTH_PAD}}');
+        result = result.replace(/dd/g, '{{DAY_PAD}}');
+        result = result.replace(/d/g, '{{DAY}}');
+        result = result.replace(/HH/g, '{{HOUR_24}}');
+        result = result.replace(/hh/g, '{{HOUR_12_PAD}}');
+        result = result.replace(/h/g, '{{HOUR_12}}');
+        result = result.replace(/mm/g, '{{MIN}}');
+        result = result.replace(/a/g, '{{AMPM}}');
+        // Now substitute the actual values
+        result = result.replace(/\{\{YEAR\}\}/g, String(year));
+        result = result.replace(/\{\{MONTH_FULL\}\}/g, months[month]);
+        result = result.replace(/\{\{MONTH_SHORT\}\}/g, monthsShort[month]);
+        result = result.replace(/\{\{MONTH_PAD\}\}/g, String(month + 1).padStart(2, '0'));
+        result = result.replace(/\{\{DAY_PAD\}\}/g, String(day).padStart(2, '0'));
+        result = result.replace(/\{\{DAY\}\}/g, String(day));
+        result = result.replace(/\{\{HOUR_24\}\}/g, String(hours).padStart(2, '0'));
+        result = result.replace(/\{\{HOUR_12_PAD\}\}/g, String(hours % 12 || 12).padStart(2, '0'));
+        result = result.replace(/\{\{HOUR_12\}\}/g, String(hours % 12 || 12));
+        result = result.replace(/\{\{MIN\}\}/g, String(minutes).padStart(2, '0'));
+        result = result.replace(/\{\{AMPM\}\}/g, hours >= 12 ? 'PM' : 'AM');
+        return result;
+    }
+    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", selectedEventId: "selectedEventId" }, 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", "ngClass"], [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", 3, "ngClass"], ["class", "mj-timeline__card-field-icon", 3, "ngClass", 4, "ngIf"], ["class", "mj-timeline__card-field-label", 4, "ngIf"], [1, "mj-timeline__card-field-value"], [1, "mj-timeline__card-field-icon", 3, "ngClass"], [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", "ngClass", "disabled", "title", "click", 4, "ngFor", "ngForOf"], ["type", "button", 1, "mj-timeline__action", 3, "click", "ngClass", "disabled", "title"], [3, "ngClass", 4, "ngIf"], [3, "ngClass"]], 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, 26, "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.NgClass, i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet], styles: ["/**\n * MJ Timeline Component Styles\n * Kendo-inspired design with vertical alternating and horizontal layouts\n */\n\n/* ============================================================================\n   CSS VARIABLES (Theming)\n   ============================================================================ */\n\nmj-timeline {\n  /* Colors */\n  --mj-timeline-bg: transparent;\n  --mj-timeline-line-color: #d0d7de;\n  --mj-timeline-marker-bg: #ffffff;\n  --mj-timeline-marker-border: #4678a8;\n  --mj-timeline-marker-fill: #4678a8;\n  --mj-timeline-card-bg: #ffffff;\n  --mj-timeline-card-border: #d0d7de;\n  --mj-timeline-card-shadow: 0 1px 3px rgba(31, 35, 40, 0.08);\n  --mj-timeline-card-shadow-hover: 0 4px 12px rgba(31, 35, 40, 0.12);\n  --mj-timeline-card-radius: 6px;\n  --mj-timeline-text-primary: #1f2328;\n  --mj-timeline-text-secondary: #656d76;\n  --mj-timeline-text-muted: #8c959f;\n  --mj-timeline-accent: #4678a8;\n  --mj-timeline-accent-light: rgba(70, 120, 168, 0.08);\n  --mj-timeline-segment-bg: #4678a8;\n  --mj-timeline-segment-text: #ffffff;\n  --mj-timeline-focus-ring: 0 0 0 2px rgba(70, 120, 168, 0.3);\n\n  /* Sizing */\n  --mj-timeline-line-width: 2px;\n  --mj-timeline-marker-size: 14px;\n  --mj-timeline-card-padding: 16px;\n  --mj-timeline-card-max-width: 400px;\n  --mj-timeline-card-min-width: 200px;\n  --mj-timeline-gap: 24px;\n  --mj-timeline-segment-gap: 16px;\n  --mj-timeline-axis-offset: 50%;\n\n  /* Animation */\n  --mj-timeline-transition: 0.15s ease;\n\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n/* Dark mode */\n.dark-theme mj-timeline,\n[data-theme=\"dark\"] mj-timeline {\n  --mj-timeline-line-color: #3d444d;\n  --mj-timeline-card-bg: #161b22;\n  --mj-timeline-card-border: #3d444d;\n  --mj-timeline-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\n  --mj-timeline-text-primary: #e6edf3;\n  --mj-timeline-text-secondary: #8b949e;\n  --mj-timeline-text-muted: #6e7681;\n  --mj-timeline-accent: #58a6ff;\n  --mj-timeline-accent-light: rgba(88, 166, 255, 0.1);\n  --mj-timeline-marker-border: #58a6ff;\n  --mj-timeline-marker-fill: #58a6ff;\n  --mj-timeline-segment-bg: #58a6ff;\n}\n\n/* ============================================================================\n   MAIN CONTAINER\n   ============================================================================ */\n\n.mj-timeline {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  padding: 0;\n  background: var(--mj-timeline-bg);\n  outline: none;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n/* Subtle scrollbar */\n.mj-timeline::-webkit-scrollbar {\n  width: 6px;\n}\n\n.mj-timeline::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.mj-timeline::-webkit-scrollbar-thumb {\n  background: rgba(0, 0, 0, 0.15);\n  border-radius: 3px;\n}\n\n.mj-timeline::-webkit-scrollbar-thumb:hover {\n  background: rgba(0, 0, 0, 0.25);\n}\n\n.mj-timeline:focus-visible {\n  box-shadow: inset var(--mj-timeline-focus-ring);\n}\n\n/* ============================================================================\n   LOADING & EMPTY STATES\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: 12px;\n}\n\n.mj-timeline__loading-spinner {\n  width: 24px;\n  height: 24px;\n  border: 2px solid var(--mj-timeline-line-color);\n  border-top-color: var(--mj-timeline-accent);\n  border-radius: 50%;\n  animation: mj-timeline-spin 0.6s linear infinite;\n}\n\n.mj-timeline__loading-spinner--small {\n  width: 14px;\n  height: 14px;\n}\n\n.mj-timeline__loading-text {\n  color: var(--mj-timeline-text-muted);\n  font-size: 13px;\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-muted);\n  font-size: 12px;\n}\n\n@keyframes mj-timeline-spin {\n  to { transform: rotate(360deg); }\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: 8px;\n  text-align: center;\n}\n\n.mj-timeline__empty-icon {\n  font-size: 32px;\n  color: var(--mj-timeline-text-muted);\n  opacity: 0.4;\n}\n\n.mj-timeline__empty-text {\n  color: var(--mj-timeline-text-secondary);\n  font-size: 13px;\n}\n\n/* ============================================================================\n   TIME SEGMENTS - Year/Month badges on the axis\n   ============================================================================ */\n\n.mj-timeline__segment {\n  margin-bottom: var(--mj-timeline-segment-gap);\n  position: relative;\n}\n\n.mj-timeline__segment:last-child {\n  margin-bottom: 0;\n}\n\n.mj-timeline__segment-header {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 16px;\n  margin-bottom: var(--mj-timeline-gap);\n  background: var(--mj-timeline-segment-bg);\n  border-radius: 4px;\n  font-weight: 600;\n  font-size: 13px;\n  color: var(--mj-timeline-segment-text);\n  user-select: none;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n  position: relative;\n  z-index: 10;\n}\n\n.mj-timeline__segment-header--clickable {\n  cursor: pointer;\n  transition: all var(--mj-timeline-transition);\n}\n\n.mj-timeline__segment-header--clickable:hover {\n  filter: brightness(1.1);\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);\n}\n\n.mj-timeline__segment-toggle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  color: inherit;\n  font-size: 10px;\n  opacity: 0.9;\n  transition: transform var(--mj-timeline-transition);\n}\n\n.mj-timeline__segment--collapsed .mj-timeline__segment-toggle {\n  transform: rotate(-90deg);\n}\n\n.mj-timeline__segment-label {\n  font-size: inherit;\n  font-weight: inherit;\n  color: inherit;\n}\n\n.mj-timeline__segment-count {\n  display: none;\n}\n\n.mj-timeline__segment-line {\n  display: none;\n}\n\n.mj-timeline__segment-content {\n  overflow: visible;\n  transition: max-height 0.25s ease, opacity 0.2s ease;\n  padding-top: 8px;\n}\n\n.mj-timeline__segment-content--hidden {\n  max-height: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n\n/* ============================================================================\n   TIMELINE AXIS - Vertical line in center\n   ============================================================================ */\n\n.mj-timeline__axis {\n  position: relative;\n  padding-left: 0;\n}\n\n/* Vertical center line */\n.mj-timeline__axis::before {\n  content: '';\n  position: absolute;\n  left: 50%;\n  top: 0;\n  bottom: 0;\n  width: var(--mj-timeline-line-width);\n  background: var(--mj-timeline-line-color);\n  transform: translateX(-50%);\n}\n\n/* ============================================================================\n   TIMELINE EVENT - Alternating left/right by default\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  width: 100%;\n}\n\n/* Even events (0, 2, 4...) - card on LEFT, date on RIGHT */\n.mj-timeline__event {\n  padding-right: calc(50% + 32px);\n  justify-content: flex-end;\n}\n\n/* Odd events (1, 3, 5...) - card on RIGHT, date on LEFT */\n.mj-timeline__event--odd {\n  padding-right: 0;\n  padding-left: calc(50% + 32px);\n  justify-content: flex-start;\n  flex-direction: row;\n}\n\n.mj-timeline__event:last-child {\n  margin-bottom: 0;\n}\n\n/* ============================================================================\n   MARKER - Circular dot on the axis\n   ============================================================================ */\n\n.mj-timeline__marker {\n  position: absolute;\n  left: 50%;\n  top: 12px;\n  transform: translateX(-50%);\n  width: var(--mj-timeline-marker-size);\n  height: var(--mj-timeline-marker-size);\n  background: var(--mj-timeline-marker-fill);\n  border: 2px solid var(--mj-timeline-marker-bg);\n  border-radius: 50%;\n  box-shadow: 0 0 0 2px var(--mj-timeline-marker-fill);\n  z-index: 5;\n  transition: transform var(--mj-timeline-transition);\n}\n\n.mj-timeline__marker-icon {\n  display: none;\n}\n\n.mj-timeline__event:hover .mj-timeline__marker {\n  transform: translateX(-50%) scale(1.2);\n}\n\n.mj-timeline__connector {\n  display: none;\n}\n\n/* ============================================================================\n   DATE LABEL - Positioned opposite the card\n   ============================================================================ */\n\n.mj-timeline__date-label {\n  position: absolute;\n  top: 10px;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-timeline-text-secondary);\n  white-space: nowrap;\n}\n\n/* Even events - date on RIGHT side of axis */\n.mj-timeline__event:not(.mj-timeline__event--odd) .mj-timeline__date-label {\n  left: calc(50% + 24px);\n  text-align: left;\n}\n\n/* Odd events - date on LEFT side of axis */\n.mj-timeline__event--odd .mj-timeline__date-label {\n  right: calc(50% + 24px);\n  text-align: right;\n}\n\n/* ============================================================================\n   EVENT CARD - Clean design matching Kendo\n   ============================================================================ */\n\n.mj-timeline__card {\n  background: var(--mj-timeline-card-bg);\n  border: 1px solid var(--mj-timeline-card-border);\n  border-radius: var(--mj-timeline-card-radius);\n  box-shadow: var(--mj-timeline-card-shadow);\n  overflow: hidden;\n  transition: all 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  width: 100%;\n}\n\n/* Card arrow/pointer toward the axis */\n.mj-timeline__card::before {\n  content: '';\n  position: absolute;\n  top: 14px;\n  width: 10px;\n  height: 10px;\n  background: var(--mj-timeline-card-bg);\n  border: 1px solid var(--mj-timeline-card-border);\n  transform: rotate(45deg);\n}\n\n/* Even events - arrow points RIGHT toward axis */\n.mj-timeline__event:not(.mj-timeline__event--odd) .mj-timeline__card::before {\n  right: -6px;\n  border-left: none;\n  border-bottom: none;\n}\n\n/* Odd events - arrow points LEFT toward axis */\n.mj-timeline__event--odd .mj-timeline__card::before {\n  left: -6px;\n  border-right: none;\n  border-top: none;\n}\n\n/* Hover state */\n.mj-timeline__card:hover {\n  box-shadow: var(--mj-timeline-card-shadow-hover);\n  border-color: var(--mj-timeline-accent);\n}\n\n/* Selected/Focused state - prominent highlight with animation */\n.mj-timeline__event--focused .mj-timeline__card {\n  background: var(--mj-timeline-accent-light);\n  border-color: var(--mj-timeline-accent);\n  box-shadow:\n    0 0 0 3px var(--mj-timeline-accent),\n    0 8px 24px rgba(70, 120, 168, 0.25);\n  transform: scale(1.02);\n}\n\n/* Selected marker - larger and more prominent */\n.mj-timeline__event--focused .mj-timeline__marker {\n  transform: translateX(-50%) scale(1.4);\n  box-shadow:\n    0 0 0 3px var(--mj-timeline-marker-fill),\n    0 0 12px rgba(70, 120, 168, 0.5);\n}\n\n/* Pulse animation for selected marker */\n.mj-timeline__event--focused .mj-timeline__marker::after {\n  content: '';\n  position: absolute;\n  top: -4px;\n  left: -4px;\n  right: -4px;\n  bottom: -4px;\n  border-radius: 50%;\n  border: 2px solid var(--mj-timeline-accent);\n  animation: mj-timeline-pulse 1.5s ease-out infinite;\n}\n\n@keyframes mj-timeline-pulse {\n  0% {\n    transform: scale(1);\n    opacity: 0.8;\n  }\n  100% {\n    transform: scale(1.8);\n    opacity: 0;\n  }\n}\n\n/* Selected date label - bolder */\n.mj-timeline__event--focused .mj-timeline__date-label {\n  color: var(--mj-timeline-accent);\n  font-weight: 600;\n}\n\n/* Card arrow gets accent color when selected */\n.mj-timeline__event--focused .mj-timeline__card::before {\n  border-color: var(--mj-timeline-accent);\n  background: var(--mj-timeline-accent-light);\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: 10px;\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;\n}\n\n.mj-timeline__card-icon {\n  display: none;\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.35;\n}\n\n.mj-timeline__card-subtitle {\n  display: block;\n  font-size: 13px;\n  color: var(--mj-timeline-text-secondary);\n  margin-top: 4px;\n}\n\n.mj-timeline__card-date {\n  display: block;\n  font-size: 12px;\n  color: var(--mj-timeline-text-muted);\n  margin-top: 6px;\n}\n\n.mj-timeline__card-date::before {\n  display: none;\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-muted);\n  border-radius: 4px;\n  cursor: pointer;\n  transition: all var(--mj-timeline-transition);\n  font-size: 14px;\n}\n\n.mj-timeline__card-toggle:hover {\n  background: var(--mj-timeline-accent-light);\n  color: var(--mj-timeline-accent);\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\n.mj-timeline__card-image img {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.mj-timeline__card-image--left.mj-timeline__card-image--small {\n  width: 48px;\n  height: 48px;\n}\n\n.mj-timeline__card-image--left.mj-timeline__card-image--medium {\n  width: 72px;\n  height: 72px;\n}\n\n.mj-timeline__card-image--left.mj-timeline__card-image--large {\n  width: 96px;\n  height: 96px;\n}\n\n.mj-timeline__card-image--top {\n  width: calc(100% - 32px);\n  max-height: 180px;\n  margin: 0 16px 12px;\n}\n\n/* ============================================================================\n   CARD BODY\n   ============================================================================ */\n\n.mj-timeline__card-body {\n  padding: 0 var(--mj-timeline-card-padding) var(--mj-timeline-card-padding);\n}\n\n.mj-timeline__card-body--collapsed {\n  display: none;\n}\n\n.mj-timeline__card-description {\n  font-size: 13px;\n  line-height: 1.6;\n  color: var(--mj-timeline-text-secondary);\n  margin-bottom: 12px;\n}\n\n.mj-timeline__card-description--clamped {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.mj-timeline__card-description:last-child {\n  margin-bottom: 0;\n}\n\n/* ============================================================================\n   CARD FIELDS\n   ============================================================================ */\n\n.mj-timeline__card-fields {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px 12px;\n}\n\n.mj-timeline__card-fields--summary {\n  padding-top: 12px;\n  border-top: 1px solid var(--mj-timeline-line-color);\n  margin-top: 12px;\n}\n\n.mj-timeline__card-fields--expanded {\n  margin-top: 12px;\n  padding-top: 12px;\n  border-top: 1px solid var(--mj-timeline-line-color);\n}\n\n.mj-timeline__card-field {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  font-size: 12px;\n}\n\n.mj-timeline__card-field-icon {\n  color: var(--mj-timeline-text-muted);\n  font-size: 10px;\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: 6px;\n  padding: 0 var(--mj-timeline-card-padding) var(--mj-timeline-card-padding);\n  justify-content: flex-end;\n}\n\n.mj-timeline__card-actions--hover-only {\n  opacity: 0;\n  transition: opacity var(--mj-timeline-transition);\n}\n\n.mj-timeline__card:hover .mj-timeline__card-actions--hover-only,\n.mj-timeline__card:focus-within .mj-timeline__card-actions--hover-only {\n  opacity: 1;\n}\n\n.mj-timeline__action {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 6px 12px;\n  font-size: 12px;\n  font-weight: 500;\n  border: 1px solid;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: all var(--mj-timeline-transition);\n}\n\n.mj-timeline__action:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.mj-timeline__action i {\n  font-size: 10px;\n}\n\n.mj-timeline__action--primary {\n  background: var(--mj-timeline-accent);\n  border-color: var(--mj-timeline-accent);\n  color: #ffffff;\n}\n\n.mj-timeline__action--primary:hover:not(:disabled) {\n  filter: brightness(1.1);\n}\n\n.mj-timeline__action--secondary {\n  background: transparent;\n  border-color: var(--mj-timeline-card-border);\n  color: var(--mj-timeline-text-primary);\n}\n\n.mj-timeline__action--secondary:hover:not(:disabled) {\n  background: var(--mj-timeline-accent-light);\n  border-color: var(--mj-timeline-accent);\n  color: var(--mj-timeline-accent);\n}\n\n.mj-timeline__action--danger {\n  background: #cf222e;\n  border-color: #cf222e;\n  color: #ffffff;\n}\n\n.mj-timeline__action--link {\n  background: transparent;\n  border-color: transparent;\n  color: var(--mj-timeline-accent);\n}\n\n.mj-timeline__action--link:hover:not(:disabled) {\n  text-decoration: underline;\n}\n\n/* ============================================================================\n   VIRTUAL SCROLL\n   ============================================================================ */\n\n.mj-timeline-scroll-sentinel {\n  height: 1px;\n  width: 100%;\n  visibility: hidden;\n}\n\n/* ============================================================================\n   SINGLE LAYOUT - Cards only on right side\n   ============================================================================ */\n\n.mj-timeline--single .mj-timeline__axis::before {\n  left: 24px;\n  transform: none;\n}\n\n.mj-timeline--single .mj-timeline__segment-header {\n  margin-left: 12px;\n}\n\n.mj-timeline--single .mj-timeline__event {\n  padding-right: 0;\n  padding-left: 56px;\n  justify-content: flex-start;\n}\n\n.mj-timeline--single .mj-timeline__event--odd {\n  padding-left: 56px;\n  flex-direction: row;\n}\n\n.mj-timeline--single .mj-timeline__marker {\n  left: 24px;\n  transform: translateX(-50%);\n}\n\n.mj-timeline--single .mj-timeline__date-label {\n  display: none;\n}\n\n.mj-timeline--single .mj-timeline__card::before {\n  left: -6px;\n  right: auto;\n  border-right: none;\n  border-top: none;\n  border-left: 1px solid var(--mj-timeline-card-border);\n  border-bottom: 1px solid var(--mj-timeline-card-border);\n}\n\n.mj-timeline--single .mj-timeline__card {\n  max-width: none;\n}\n\n/* ============================================================================\n   ALTERNATING LAYOUT - Explicit class (same as default vertical)\n   ============================================================================ */\n\n.mj-timeline--alternating .mj-timeline__segment-header {\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n/* ============================================================================\n   HORIZONTAL LAYOUT\n   ============================================================================ */\n\n.mj-timeline--horizontal {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: flex-start;\n  overflow-x: auto;\n  overflow-y: hidden;\n  padding: 80px 40px 24px;\n  min-width: 100%;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment {\n  flex: 0 0 auto;\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 0;\n  margin-right: 40px;\n  position: relative;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment:last-child {\n  margin-right: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment-header {\n  position: absolute;\n  top: -56px;\n  left: 0;\n  margin-bottom: 0;\n  white-space: nowrap;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment-content {\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n}\n\n.mj-timeline--horizontal .mj-timeline__axis {\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  padding-left: 0;\n  min-width: max-content;\n  gap: 0;\n}\n\n/* Horizontal axis line */\n.mj-timeline--horizontal .mj-timeline__axis::before {\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: auto;\n  width: 100%;\n  height: var(--mj-timeline-line-width);\n  transform: none;\n}\n\n.mj-timeline--horizontal .mj-timeline__event {\n  flex-direction: column;\n  align-items: center;\n  margin-bottom: 0;\n  margin-right: 48px;\n  padding: 0;\n  padding-top: 32px;\n  min-width: 180px;\n  max-width: 280px;\n  width: auto;\n}\n\n.mj-timeline--horizontal .mj-timeline__event--odd {\n  padding-left: 0;\n  flex-direction: column;\n}\n\n.mj-timeline--horizontal .mj-timeline__event:last-child {\n  margin-right: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__marker {\n  position: absolute;\n  left: 50%;\n  /* Position so marker is centered on the axis line (top: 0 of axis) */\n  /* Event has padding-top: 32px, marker is 14px, so top: -(32 + 7) = -39px for center */\n  top: calc(-32px - var(--mj-timeline-marker-size) / 2);\n  transform: translateX(-50%);\n  margin: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__event:hover .mj-timeline__marker {\n  transform: translateX(-50%) scale(1.2);\n}\n\n.mj-timeline--horizontal .mj-timeline__date-label {\n  position: absolute;\n  top: -40px;\n  left: 50%;\n  right: auto;\n  transform: translateX(-50%);\n  text-align: center;\n  font-size: 12px;\n}\n\n.mj-timeline--horizontal .mj-timeline__card {\n  max-width: none;\n  width: 100%;\n  min-width: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__card::before {\n  display: none;\n}\n\n/* Horizontal focused marker override */\n.mj-timeline--horizontal .mj-timeline__event--focused .mj-timeline__marker {\n  transform: translateX(-50%) scale(1.4);\n}\n\n/* Horizontal collapsed segment - rotate 90\u00B0 CCW and compress */\n.mj-timeline--horizontal .mj-timeline__segment--collapsed {\n  flex: 0 0 auto;\n  width: 32px;\n  min-width: 32px;\n  margin-right: 4px;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment--collapsed .mj-timeline__segment-header {\n  writing-mode: vertical-rl;\n  text-orientation: mixed;\n  transform: rotate(180deg);\n  white-space: nowrap;\n  padding: 8px 4px;\n  margin: 0;\n  top: 0;\n  position: relative;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment--collapsed .mj-timeline__segment-content {\n  display: none;\n}\n\n/* ============================================================================\n   RESPONSIVE\n   ============================================================================ */\n\n@media (max-width: 900px) {\n  /* Force single layout on smaller screens */\n  .mj-timeline--alternating .mj-timeline__axis::before {\n    left: 24px;\n    transform: none;\n  }\n\n  .mj-timeline--alternating .mj-timeline__segment-header {\n    left: auto;\n    transform: none;\n    margin-left: 12px;\n  }\n\n  .mj-timeline--alternating .mj-timeline__event {\n    padding-right: 0;\n    padding-left: 56px;\n    justify-content: flex-start;\n  }\n\n  .mj-timeline--alternating .mj-timeline__event--odd {\n    padding-left: 56px;\n    padding-right: 0;\n    flex-direction: row;\n  }\n\n  .mj-timeline--alternating .mj-timeline__marker {\n    left: 24px;\n    transform: translateX(-50%);\n  }\n\n  .mj-timeline--alternating .mj-timeline__event:hover .mj-timeline__marker {\n    transform: translateX(-50%) scale(1.2);\n  }\n\n  .mj-timeline--alternating .mj-timeline__date-label {\n    display: none;\n  }\n\n  .mj-timeline--alternating .mj-timeline__card::before {\n    left: -6px;\n    right: auto;\n    border-right: none;\n    border-top: none;\n    border-left: 1px solid var(--mj-timeline-card-border);\n    border-bottom: 1px solid var(--mj-timeline-card-border);\n  }\n\n  .mj-timeline--alternating .mj-timeline__card {\n    max-width: none;\n  }\n}\n\n@media (max-width: 600px) {\n  mj-timeline {\n    --mj-timeline-card-padding: 12px;\n    --mj-timeline-gap: 16px;\n    --mj-timeline-marker-size: 12px;\n  }\n\n  .mj-timeline {\n    padding: 16px 12px;\n  }\n\n  .mj-timeline__card-title {\n    font-size: 14px;\n  }\n\n  .mj-timeline--horizontal .mj-timeline__event {\n    min-width: 160px;\n    max-width: 220px;\n    margin-right: 32px;\n  }\n}\n\n/* Touch devices */\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: 40px;\n  }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .mj-timeline__card,\n  .mj-timeline__marker,\n  .mj-timeline__segment-toggle {\n    transition: none;\n  }\n}\n"], encapsulation: 2, 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, encapsulation: ViewEncapsulation.None, 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]=\"isEventSelected(event, 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      [ngClass]=\"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\" [ngClass]=\"field.cssClass\">\n                  <i *ngIf=\"field.icon\" [ngClass]=\"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\" [ngClass]=\"field.cssClass\">\n                  <i *ngIf=\"field.icon\" [ngClass]=\"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              [ngClass]=\"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\" [ngClass]=\"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 * Kendo-inspired design with vertical alternating and horizontal layouts\n */\n\n/* ============================================================================\n   CSS VARIABLES (Theming)\n   ============================================================================ */\n\nmj-timeline {\n  /* Colors */\n  --mj-timeline-bg: transparent;\n  --mj-timeline-line-color: #d0d7de;\n  --mj-timeline-marker-bg: #ffffff;\n  --mj-timeline-marker-border: #4678a8;\n  --mj-timeline-marker-fill: #4678a8;\n  --mj-timeline-card-bg: #ffffff;\n  --mj-timeline-card-border: #d0d7de;\n  --mj-timeline-card-shadow: 0 1px 3px rgba(31, 35, 40, 0.08);\n  --mj-timeline-card-shadow-hover: 0 4px 12px rgba(31, 35, 40, 0.12);\n  --mj-timeline-card-radius: 6px;\n  --mj-timeline-text-primary: #1f2328;\n  --mj-timeline-text-secondary: #656d76;\n  --mj-timeline-text-muted: #8c959f;\n  --mj-timeline-accent: #4678a8;\n  --mj-timeline-accent-light: rgba(70, 120, 168, 0.08);\n  --mj-timeline-segment-bg: #4678a8;\n  --mj-timeline-segment-text: #ffffff;\n  --mj-timeline-focus-ring: 0 0 0 2px rgba(70, 120, 168, 0.3);\n\n  /* Sizing */\n  --mj-timeline-line-width: 2px;\n  --mj-timeline-marker-size: 14px;\n  --mj-timeline-card-padding: 16px;\n  --mj-timeline-card-max-width: 400px;\n  --mj-timeline-card-min-width: 200px;\n  --mj-timeline-gap: 24px;\n  --mj-timeline-segment-gap: 16px;\n  --mj-timeline-axis-offset: 50%;\n\n  /* Animation */\n  --mj-timeline-transition: 0.15s ease;\n\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n/* Dark mode */\n.dark-theme mj-timeline,\n[data-theme=\"dark\"] mj-timeline {\n  --mj-timeline-line-color: #3d444d;\n  --mj-timeline-card-bg: #161b22;\n  --mj-timeline-card-border: #3d444d;\n  --mj-timeline-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\n  --mj-timeline-text-primary: #e6edf3;\n  --mj-timeline-text-secondary: #8b949e;\n  --mj-timeline-text-muted: #6e7681;\n  --mj-timeline-accent: #58a6ff;\n  --mj-timeline-accent-light: rgba(88, 166, 255, 0.1);\n  --mj-timeline-marker-border: #58a6ff;\n  --mj-timeline-marker-fill: #58a6ff;\n  --mj-timeline-segment-bg: #58a6ff;\n}\n\n/* ============================================================================\n   MAIN CONTAINER\n   ============================================================================ */\n\n.mj-timeline {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  padding: 0;\n  background: var(--mj-timeline-bg);\n  outline: none;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n/* Subtle scrollbar */\n.mj-timeline::-webkit-scrollbar {\n  width: 6px;\n}\n\n.mj-timeline::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.mj-timeline::-webkit-scrollbar-thumb {\n  background: rgba(0, 0, 0, 0.15);\n  border-radius: 3px;\n}\n\n.mj-timeline::-webkit-scrollbar-thumb:hover {\n  background: rgba(0, 0, 0, 0.25);\n}\n\n.mj-timeline:focus-visible {\n  box-shadow: inset var(--mj-timeline-focus-ring);\n}\n\n/* ============================================================================\n   LOADING & EMPTY STATES\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: 12px;\n}\n\n.mj-timeline__loading-spinner {\n  width: 24px;\n  height: 24px;\n  border: 2px solid var(--mj-timeline-line-color);\n  border-top-color: var(--mj-timeline-accent);\n  border-radius: 50%;\n  animation: mj-timeline-spin 0.6s linear infinite;\n}\n\n.mj-timeline__loading-spinner--small {\n  width: 14px;\n  height: 14px;\n}\n\n.mj-timeline__loading-text {\n  color: var(--mj-timeline-text-muted);\n  font-size: 13px;\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-muted);\n  font-size: 12px;\n}\n\n@keyframes mj-timeline-spin {\n  to { transform: rotate(360deg); }\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: 8px;\n  text-align: center;\n}\n\n.mj-timeline__empty-icon {\n  font-size: 32px;\n  color: var(--mj-timeline-text-muted);\n  opacity: 0.4;\n}\n\n.mj-timeline__empty-text {\n  color: var(--mj-timeline-text-secondary);\n  font-size: 13px;\n}\n\n/* ============================================================================\n   TIME SEGMENTS - Year/Month badges on the axis\n   ============================================================================ */\n\n.mj-timeline__segment {\n  margin-bottom: var(--mj-timeline-segment-gap);\n  position: relative;\n}\n\n.mj-timeline__segment:last-child {\n  margin-bottom: 0;\n}\n\n.mj-timeline__segment-header {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 16px;\n  margin-bottom: var(--mj-timeline-gap);\n  background: var(--mj-timeline-segment-bg);\n  border-radius: 4px;\n  font-weight: 600;\n  font-size: 13px;\n  color: var(--mj-timeline-segment-text);\n  user-select: none;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n  position: relative;\n  z-index: 10;\n}\n\n.mj-timeline__segment-header--clickable {\n  cursor: pointer;\n  transition: all var(--mj-timeline-transition);\n}\n\n.mj-timeline__segment-header--clickable:hover {\n  filter: brightness(1.1);\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);\n}\n\n.mj-timeline__segment-toggle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  color: inherit;\n  font-size: 10px;\n  opacity: 0.9;\n  transition: transform var(--mj-timeline-transition);\n}\n\n.mj-timeline__segment--collapsed .mj-timeline__segment-toggle {\n  transform: rotate(-90deg);\n}\n\n.mj-timeline__segment-label {\n  font-size: inherit;\n  font-weight: inherit;\n  color: inherit;\n}\n\n.mj-timeline__segment-count {\n  display: none;\n}\n\n.mj-timeline__segment-line {\n  display: none;\n}\n\n.mj-timeline__segment-content {\n  overflow: visible;\n  transition: max-height 0.25s ease, opacity 0.2s ease;\n  padding-top: 8px;\n}\n\n.mj-timeline__segment-content--hidden {\n  max-height: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n\n/* ============================================================================\n   TIMELINE AXIS - Vertical line in center\n   ============================================================================ */\n\n.mj-timeline__axis {\n  position: relative;\n  padding-left: 0;\n}\n\n/* Vertical center line */\n.mj-timeline__axis::before {\n  content: '';\n  position: absolute;\n  left: 50%;\n  top: 0;\n  bottom: 0;\n  width: var(--mj-timeline-line-width);\n  background: var(--mj-timeline-line-color);\n  transform: translateX(-50%);\n}\n\n/* ============================================================================\n   TIMELINE EVENT - Alternating left/right by default\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  width: 100%;\n}\n\n/* Even events (0, 2, 4...) - card on LEFT, date on RIGHT */\n.mj-timeline__event {\n  padding-right: calc(50% + 32px);\n  justify-content: flex-end;\n}\n\n/* Odd events (1, 3, 5...) - card on RIGHT, date on LEFT */\n.mj-timeline__event--odd {\n  padding-right: 0;\n  padding-left: calc(50% + 32px);\n  justify-content: flex-start;\n  flex-direction: row;\n}\n\n.mj-timeline__event:last-child {\n  margin-bottom: 0;\n}\n\n/* ============================================================================\n   MARKER - Circular dot on the axis\n   ============================================================================ */\n\n.mj-timeline__marker {\n  position: absolute;\n  left: 50%;\n  top: 12px;\n  transform: translateX(-50%);\n  width: var(--mj-timeline-marker-size);\n  height: var(--mj-timeline-marker-size);\n  background: var(--mj-timeline-marker-fill);\n  border: 2px solid var(--mj-timeline-marker-bg);\n  border-radius: 50%;\n  box-shadow: 0 0 0 2px var(--mj-timeline-marker-fill);\n  z-index: 5;\n  transition: transform var(--mj-timeline-transition);\n}\n\n.mj-timeline__marker-icon {\n  display: none;\n}\n\n.mj-timeline__event:hover .mj-timeline__marker {\n  transform: translateX(-50%) scale(1.2);\n}\n\n.mj-timeline__connector {\n  display: none;\n}\n\n/* ============================================================================\n   DATE LABEL - Positioned opposite the card\n   ============================================================================ */\n\n.mj-timeline__date-label {\n  position: absolute;\n  top: 10px;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-timeline-text-secondary);\n  white-space: nowrap;\n}\n\n/* Even events - date on RIGHT side of axis */\n.mj-timeline__event:not(.mj-timeline__event--odd) .mj-timeline__date-label {\n  left: calc(50% + 24px);\n  text-align: left;\n}\n\n/* Odd events - date on LEFT side of axis */\n.mj-timeline__event--odd .mj-timeline__date-label {\n  right: calc(50% + 24px);\n  text-align: right;\n}\n\n/* ============================================================================\n   EVENT CARD - Clean design matching Kendo\n   ============================================================================ */\n\n.mj-timeline__card {\n  background: var(--mj-timeline-card-bg);\n  border: 1px solid var(--mj-timeline-card-border);\n  border-radius: var(--mj-timeline-card-radius);\n  box-shadow: var(--mj-timeline-card-shadow);\n  overflow: hidden;\n  transition: all 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  width: 100%;\n}\n\n/* Card arrow/pointer toward the axis */\n.mj-timeline__card::before {\n  content: '';\n  position: absolute;\n  top: 14px;\n  width: 10px;\n  height: 10px;\n  background: var(--mj-timeline-card-bg);\n  border: 1px solid var(--mj-timeline-card-border);\n  transform: rotate(45deg);\n}\n\n/* Even events - arrow points RIGHT toward axis */\n.mj-timeline__event:not(.mj-timeline__event--odd) .mj-timeline__card::before {\n  right: -6px;\n  border-left: none;\n  border-bottom: none;\n}\n\n/* Odd events - arrow points LEFT toward axis */\n.mj-timeline__event--odd .mj-timeline__card::before {\n  left: -6px;\n  border-right: none;\n  border-top: none;\n}\n\n/* Hover state */\n.mj-timeline__card:hover {\n  box-shadow: var(--mj-timeline-card-shadow-hover);\n  border-color: var(--mj-timeline-accent);\n}\n\n/* Selected/Focused state - prominent highlight with animation */\n.mj-timeline__event--focused .mj-timeline__card {\n  background: var(--mj-timeline-accent-light);\n  border-color: var(--mj-timeline-accent);\n  box-shadow:\n    0 0 0 3px var(--mj-timeline-accent),\n    0 8px 24px rgba(70, 120, 168, 0.25);\n  transform: scale(1.02);\n}\n\n/* Selected marker - larger and more prominent */\n.mj-timeline__event--focused .mj-timeline__marker {\n  transform: translateX(-50%) scale(1.4);\n  box-shadow:\n    0 0 0 3px var(--mj-timeline-marker-fill),\n    0 0 12px rgba(70, 120, 168, 0.5);\n}\n\n/* Pulse animation for selected marker */\n.mj-timeline__event--focused .mj-timeline__marker::after {\n  content: '';\n  position: absolute;\n  top: -4px;\n  left: -4px;\n  right: -4px;\n  bottom: -4px;\n  border-radius: 50%;\n  border: 2px solid var(--mj-timeline-accent);\n  animation: mj-timeline-pulse 1.5s ease-out infinite;\n}\n\n@keyframes mj-timeline-pulse {\n  0% {\n    transform: scale(1);\n    opacity: 0.8;\n  }\n  100% {\n    transform: scale(1.8);\n    opacity: 0;\n  }\n}\n\n/* Selected date label - bolder */\n.mj-timeline__event--focused .mj-timeline__date-label {\n  color: var(--mj-timeline-accent);\n  font-weight: 600;\n}\n\n/* Card arrow gets accent color when selected */\n.mj-timeline__event--focused .mj-timeline__card::before {\n  border-color: var(--mj-timeline-accent);\n  background: var(--mj-timeline-accent-light);\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: 10px;\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;\n}\n\n.mj-timeline__card-icon {\n  display: none;\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.35;\n}\n\n.mj-timeline__card-subtitle {\n  display: block;\n  font-size: 13px;\n  color: var(--mj-timeline-text-secondary);\n  margin-top: 4px;\n}\n\n.mj-timeline__card-date {\n  display: block;\n  font-size: 12px;\n  color: var(--mj-timeline-text-muted);\n  margin-top: 6px;\n}\n\n.mj-timeline__card-date::before {\n  display: none;\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-muted);\n  border-radius: 4px;\n  cursor: pointer;\n  transition: all var(--mj-timeline-transition);\n  font-size: 14px;\n}\n\n.mj-timeline__card-toggle:hover {\n  background: var(--mj-timeline-accent-light);\n  color: var(--mj-timeline-accent);\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\n.mj-timeline__card-image img {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.mj-timeline__card-image--left.mj-timeline__card-image--small {\n  width: 48px;\n  height: 48px;\n}\n\n.mj-timeline__card-image--left.mj-timeline__card-image--medium {\n  width: 72px;\n  height: 72px;\n}\n\n.mj-timeline__card-image--left.mj-timeline__card-image--large {\n  width: 96px;\n  height: 96px;\n}\n\n.mj-timeline__card-image--top {\n  width: calc(100% - 32px);\n  max-height: 180px;\n  margin: 0 16px 12px;\n}\n\n/* ============================================================================\n   CARD BODY\n   ============================================================================ */\n\n.mj-timeline__card-body {\n  padding: 0 var(--mj-timeline-card-padding) var(--mj-timeline-card-padding);\n}\n\n.mj-timeline__card-body--collapsed {\n  display: none;\n}\n\n.mj-timeline__card-description {\n  font-size: 13px;\n  line-height: 1.6;\n  color: var(--mj-timeline-text-secondary);\n  margin-bottom: 12px;\n}\n\n.mj-timeline__card-description--clamped {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.mj-timeline__card-description:last-child {\n  margin-bottom: 0;\n}\n\n/* ============================================================================\n   CARD FIELDS\n   ============================================================================ */\n\n.mj-timeline__card-fields {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px 12px;\n}\n\n.mj-timeline__card-fields--summary {\n  padding-top: 12px;\n  border-top: 1px solid var(--mj-timeline-line-color);\n  margin-top: 12px;\n}\n\n.mj-timeline__card-fields--expanded {\n  margin-top: 12px;\n  padding-top: 12px;\n  border-top: 1px solid var(--mj-timeline-line-color);\n}\n\n.mj-timeline__card-field {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  font-size: 12px;\n}\n\n.mj-timeline__card-field-icon {\n  color: var(--mj-timeline-text-muted);\n  font-size: 10px;\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: 6px;\n  padding: 0 var(--mj-timeline-card-padding) var(--mj-timeline-card-padding);\n  justify-content: flex-end;\n}\n\n.mj-timeline__card-actions--hover-only {\n  opacity: 0;\n  transition: opacity var(--mj-timeline-transition);\n}\n\n.mj-timeline__card:hover .mj-timeline__card-actions--hover-only,\n.mj-timeline__card:focus-within .mj-timeline__card-actions--hover-only {\n  opacity: 1;\n}\n\n.mj-timeline__action {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 6px 12px;\n  font-size: 12px;\n  font-weight: 500;\n  border: 1px solid;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: all var(--mj-timeline-transition);\n}\n\n.mj-timeline__action:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.mj-timeline__action i {\n  font-size: 10px;\n}\n\n.mj-timeline__action--primary {\n  background: var(--mj-timeline-accent);\n  border-color: var(--mj-timeline-accent);\n  color: #ffffff;\n}\n\n.mj-timeline__action--primary:hover:not(:disabled) {\n  filter: brightness(1.1);\n}\n\n.mj-timeline__action--secondary {\n  background: transparent;\n  border-color: var(--mj-timeline-card-border);\n  color: var(--mj-timeline-text-primary);\n}\n\n.mj-timeline__action--secondary:hover:not(:disabled) {\n  background: var(--mj-timeline-accent-light);\n  border-color: var(--mj-timeline-accent);\n  color: var(--mj-timeline-accent);\n}\n\n.mj-timeline__action--danger {\n  background: #cf222e;\n  border-color: #cf222e;\n  color: #ffffff;\n}\n\n.mj-timeline__action--link {\n  background: transparent;\n  border-color: transparent;\n  color: var(--mj-timeline-accent);\n}\n\n.mj-timeline__action--link:hover:not(:disabled) {\n  text-decoration: underline;\n}\n\n/* ============================================================================\n   VIRTUAL SCROLL\n   ============================================================================ */\n\n.mj-timeline-scroll-sentinel {\n  height: 1px;\n  width: 100%;\n  visibility: hidden;\n}\n\n/* ============================================================================\n   SINGLE LAYOUT - Cards only on right side\n   ============================================================================ */\n\n.mj-timeline--single .mj-timeline__axis::before {\n  left: 24px;\n  transform: none;\n}\n\n.mj-timeline--single .mj-timeline__segment-header {\n  margin-left: 12px;\n}\n\n.mj-timeline--single .mj-timeline__event {\n  padding-right: 0;\n  padding-left: 56px;\n  justify-content: flex-start;\n}\n\n.mj-timeline--single .mj-timeline__event--odd {\n  padding-left: 56px;\n  flex-direction: row;\n}\n\n.mj-timeline--single .mj-timeline__marker {\n  left: 24px;\n  transform: translateX(-50%);\n}\n\n.mj-timeline--single .mj-timeline__date-label {\n  display: none;\n}\n\n.mj-timeline--single .mj-timeline__card::before {\n  left: -6px;\n  right: auto;\n  border-right: none;\n  border-top: none;\n  border-left: 1px solid var(--mj-timeline-card-border);\n  border-bottom: 1px solid var(--mj-timeline-card-border);\n}\n\n.mj-timeline--single .mj-timeline__card {\n  max-width: none;\n}\n\n/* ============================================================================\n   ALTERNATING LAYOUT - Explicit class (same as default vertical)\n   ============================================================================ */\n\n.mj-timeline--alternating .mj-timeline__segment-header {\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n/* ============================================================================\n   HORIZONTAL LAYOUT\n   ============================================================================ */\n\n.mj-timeline--horizontal {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: flex-start;\n  overflow-x: auto;\n  overflow-y: hidden;\n  padding: 80px 40px 24px;\n  min-width: 100%;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment {\n  flex: 0 0 auto;\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 0;\n  margin-right: 40px;\n  position: relative;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment:last-child {\n  margin-right: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment-header {\n  position: absolute;\n  top: -56px;\n  left: 0;\n  margin-bottom: 0;\n  white-space: nowrap;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment-content {\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n}\n\n.mj-timeline--horizontal .mj-timeline__axis {\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  padding-left: 0;\n  min-width: max-content;\n  gap: 0;\n}\n\n/* Horizontal axis line */\n.mj-timeline--horizontal .mj-timeline__axis::before {\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: auto;\n  width: 100%;\n  height: var(--mj-timeline-line-width);\n  transform: none;\n}\n\n.mj-timeline--horizontal .mj-timeline__event {\n  flex-direction: column;\n  align-items: center;\n  margin-bottom: 0;\n  margin-right: 48px;\n  padding: 0;\n  padding-top: 32px;\n  min-width: 180px;\n  max-width: 280px;\n  width: auto;\n}\n\n.mj-timeline--horizontal .mj-timeline__event--odd {\n  padding-left: 0;\n  flex-direction: column;\n}\n\n.mj-timeline--horizontal .mj-timeline__event:last-child {\n  margin-right: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__marker {\n  position: absolute;\n  left: 50%;\n  /* Position so marker is centered on the axis line (top: 0 of axis) */\n  /* Event has padding-top: 32px, marker is 14px, so top: -(32 + 7) = -39px for center */\n  top: calc(-32px - var(--mj-timeline-marker-size) / 2);\n  transform: translateX(-50%);\n  margin: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__event:hover .mj-timeline__marker {\n  transform: translateX(-50%) scale(1.2);\n}\n\n.mj-timeline--horizontal .mj-timeline__date-label {\n  position: absolute;\n  top: -40px;\n  left: 50%;\n  right: auto;\n  transform: translateX(-50%);\n  text-align: center;\n  font-size: 12px;\n}\n\n.mj-timeline--horizontal .mj-timeline__card {\n  max-width: none;\n  width: 100%;\n  min-width: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__card::before {\n  display: none;\n}\n\n/* Horizontal focused marker override */\n.mj-timeline--horizontal .mj-timeline__event--focused .mj-timeline__marker {\n  transform: translateX(-50%) scale(1.4);\n}\n\n/* Horizontal collapsed segment - rotate 90\u00B0 CCW and compress */\n.mj-timeline--horizontal .mj-timeline__segment--collapsed {\n  flex: 0 0 auto;\n  width: 32px;\n  min-width: 32px;\n  margin-right: 4px;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment--collapsed .mj-timeline__segment-header {\n  writing-mode: vertical-rl;\n  text-orientation: mixed;\n  transform: rotate(180deg);\n  white-space: nowrap;\n  padding: 8px 4px;\n  margin: 0;\n  top: 0;\n  position: relative;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment--collapsed .mj-timeline__segment-content {\n  display: none;\n}\n\n/* ============================================================================\n   RESPONSIVE\n   ============================================================================ */\n\n@media (max-width: 900px) {\n  /* Force single layout on smaller screens */\n  .mj-timeline--alternating .mj-timeline__axis::before {\n    left: 24px;\n    transform: none;\n  }\n\n  .mj-timeline--alternating .mj-timeline__segment-header {\n    left: auto;\n    transform: none;\n    margin-left: 12px;\n  }\n\n  .mj-timeline--alternating .mj-timeline__event {\n    padding-right: 0;\n    padding-left: 56px;\n    justify-content: flex-start;\n  }\n\n  .mj-timeline--alternating .mj-timeline__event--odd {\n    padding-left: 56px;\n    padding-right: 0;\n    flex-direction: row;\n  }\n\n  .mj-timeline--alternating .mj-timeline__marker {\n    left: 24px;\n    transform: translateX(-50%);\n  }\n\n  .mj-timeline--alternating .mj-timeline__event:hover .mj-timeline__marker {\n    transform: translateX(-50%) scale(1.2);\n  }\n\n  .mj-timeline--alternating .mj-timeline__date-label {\n    display: none;\n  }\n\n  .mj-timeline--alternating .mj-timeline__card::before {\n    left: -6px;\n    right: auto;\n    border-right: none;\n    border-top: none;\n    border-left: 1px solid var(--mj-timeline-card-border);\n    border-bottom: 1px solid var(--mj-timeline-card-border);\n  }\n\n  .mj-timeline--alternating .mj-timeline__card {\n    max-width: none;\n  }\n}\n\n@media (max-width: 600px) {\n  mj-timeline {\n    --mj-timeline-card-padding: 12px;\n    --mj-timeline-gap: 16px;\n    --mj-timeline-marker-size: 12px;\n  }\n\n  .mj-timeline {\n    padding: 16px 12px;\n  }\n\n  .mj-timeline__card-title {\n    font-size: 14px;\n  }\n\n  .mj-timeline--horizontal .mj-timeline__event {\n    min-width: 160px;\n    max-width: 220px;\n    margin-right: 32px;\n  }\n}\n\n/* Touch devices */\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: 40px;\n  }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .mj-timeline__card,\n  .mj-timeline__marker,\n  .mj-timeline__segment-toggle {\n    transition: none;\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
+        }], ariaLabel: [{
             type: Input
-        }], Groups: [{
+        }], enableKeyboardNavigation: [{
             type: Input
-        }], AllowLoad: [{
+        }], selectedEventId: [{
             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: 143 }); })();
 //# sourceMappingURL=timeline.component.js.map