@memberjunction/ng-timeline 6.1.0-edge.5 → 6.1.0-edge.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/lib/component/timeline.component.js +179 -180
  2. package/dist/lib/component/timeline.component.js.map +1 -1
  3. package/package.json +9 -9
package/dist/lib/component/timeline.component.js CHANGED
@@ -39,8 +39,8 @@ function TimelineComponent_Conditional_2_Conditional_0_ng_container_0_Template(r
39
39
  function TimelineComponent_Conditional_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
40
40
  i0.ɵɵtemplate(0, TimelineComponent_Conditional_2_Conditional_0_ng_container_0_Template, 1, 0, "ng-container", 6);
41
41
  } if (rf & 2) {
42
- const ctx_r1 = i0.ɵɵnextContext(2);
43
- i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.loadingTemplate);
42
+ const ctx_r0 = i0.ɵɵnextContext(2);
43
+ i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.loadingTemplate);
44
44
  } }
45
45
  function TimelineComponent_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
46
46
  i0.ɵɵelementStart(0, "div", 5);
@@ -49,15 +49,15 @@ function TimelineComponent_Conditional_2_Conditional_1_Template(rf, ctx) { if (r
49
49
  i0.ɵɵtext(3);
50
50
  i0.ɵɵelementEnd()();
51
51
  } if (rf & 2) {
52
- const ctx_r1 = i0.ɵɵnextContext(2);
52
+ const ctx_r0 = i0.ɵɵnextContext(2);
53
53
  i0.ɵɵadvance(3);
54
- i0.ɵɵtextInterpolate(ctx_r1.loadingMessage);
54
+ i0.ɵɵtextInterpolate(ctx_r0.loadingMessage);
55
55
  } }
56
56
  function TimelineComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
57
57
  i0.ɵɵconditionalCreate(0, TimelineComponent_Conditional_2_Conditional_0_Template, 1, 1, "ng-container")(1, TimelineComponent_Conditional_2_Conditional_1_Template, 4, 1, "div", 5);
58
58
  } if (rf & 2) {
59
- const ctx_r1 = i0.ɵɵnextContext();
60
- i0.ɵɵconditional(ctx_r1.loadingTemplate ? 0 : 1);
59
+ const ctx_r0 = i0.ɵɵnextContext();
60
+ i0.ɵɵconditional(ctx_r0.loadingTemplate ? 0 : 1);
61
61
  } }
62
62
  function TimelineComponent_Conditional_3_Conditional_0_ng_container_0_Template(rf, ctx) { if (rf & 1) {
63
63
  i0.ɵɵelementContainer(0);
@@ -65,20 +65,20 @@ function TimelineComponent_Conditional_3_Conditional_0_ng_container_0_Template(r
65
65
  function TimelineComponent_Conditional_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
66
66
  i0.ɵɵtemplate(0, TimelineComponent_Conditional_3_Conditional_0_ng_container_0_Template, 1, 0, "ng-container", 6);
67
67
  } if (rf & 2) {
68
- const ctx_r1 = i0.ɵɵnextContext(2);
69
- i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.emptyTemplate);
68
+ const ctx_r0 = i0.ɵɵnextContext(2);
69
+ i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.emptyTemplate);
70
70
  } }
71
71
  function TimelineComponent_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
72
72
  i0.ɵɵelement(0, "mj-empty-state", 9);
73
73
  } if (rf & 2) {
74
- const ctx_r1 = i0.ɵɵnextContext(2);
75
- i0.ɵɵproperty("Icon", ctx_r1.emptyIcon)("Title", ctx_r1.emptyMessage);
74
+ const ctx_r0 = i0.ɵɵnextContext(2);
75
+ i0.ɵɵproperty("Icon", ctx_r0.emptyIcon)("Title", ctx_r0.emptyMessage);
76
76
  } }
77
77
  function TimelineComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
78
78
  i0.ɵɵconditionalCreate(0, TimelineComponent_Conditional_3_Conditional_0_Template, 1, 1, "ng-container")(1, TimelineComponent_Conditional_3_Conditional_1_Template, 1, 2, "mj-empty-state", 9);
79
79
  } if (rf & 2) {
80
- const ctx_r1 = i0.ɵɵnextContext();
81
- i0.ɵɵconditional(ctx_r1.emptyTemplate ? 0 : 1);
80
+ const ctx_r0 = i0.ɵɵnextContext();
81
+ i0.ɵɵconditional(ctx_r0.emptyTemplate ? 0 : 1);
82
82
  } }
83
83
  function TimelineComponent_Conditional_4_Conditional_0_For_1_Conditional_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
84
84
  i0.ɵɵelementContainer(0);
@@ -86,18 +86,18 @@ function TimelineComponent_Conditional_4_Conditional_0_For_1_Conditional_2_ng_co
86
86
  function TimelineComponent_Conditional_4_Conditional_0_For_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
87
87
  i0.ɵɵtemplate(0, TimelineComponent_Conditional_4_Conditional_0_For_1_Conditional_2_ng_container_0_Template, 1, 0, "ng-container", 15);
88
88
  } if (rf & 2) {
89
- const segment_r4 = i0.ɵɵnextContext().$implicit;
90
- const ctx_r1 = i0.ɵɵnextContext(3);
91
- i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.segmentHeaderTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c8, segment_r4));
89
+ const segment_r3 = i0.ɵɵnextContext().$implicit;
90
+ const ctx_r0 = i0.ɵɵnextContext(3);
91
+ i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.segmentHeaderTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c8, segment_r3));
92
92
  } }
93
93
  function TimelineComponent_Conditional_4_Conditional_0_For_1_Conditional_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
94
94
  i0.ɵɵelementStart(0, "span", 16);
95
95
  i0.ɵɵelement(1, "i");
96
96
  i0.ɵɵelementEnd();
97
97
  } if (rf & 2) {
98
- const segment_r4 = i0.ɵɵnextContext(2).$implicit;
98
+ const segment_r3 = i0.ɵɵnextContext(2).$implicit;
99
99
  i0.ɵɵadvance();
100
- i0.ɵɵclassMap(segment_r4.isExpanded ? "fa-solid fa-chevron-down" : "fa-solid fa-chevron-right");
100
+ i0.ɵɵclassMap(segment_r3.isExpanded ? "fa-solid fa-chevron-down" : "fa-solid fa-chevron-right");
101
101
  } }
102
102
  function TimelineComponent_Conditional_4_Conditional_0_For_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
103
103
  i0.ɵɵconditionalCreate(0, TimelineComponent_Conditional_4_Conditional_0_For_1_Conditional_3_Conditional_0_Template, 2, 2, "span", 16);
@@ -109,13 +109,13 @@ function TimelineComponent_Conditional_4_Conditional_0_For_1_Conditional_3_Templ
109
109
  i0.ɵɵelementEnd();
110
110
  i0.ɵɵelement(5, "span", 19);
111
111
  } if (rf & 2) {
112
- const segment_r4 = i0.ɵɵnextContext().$implicit;
113
- const ctx_r1 = i0.ɵɵnextContext(3);
114
- i0.ɵɵconditional(ctx_r1.segmentsCollapsible ? 0 : -1);
112
+ const segment_r3 = i0.ɵɵnextContext().$implicit;
113
+ const ctx_r0 = i0.ɵɵnextContext(3);
114
+ i0.ɵɵconditional(ctx_r0.segmentsCollapsible ? 0 : -1);
115
115
  i0.ɵɵadvance(2);
116
- i0.ɵɵtextInterpolate(segment_r4.label);
116
+ i0.ɵɵtextInterpolate(segment_r3.label);
117
117
  i0.ɵɵadvance(2);
118
- i0.ɵɵtextInterpolate2("(", segment_r4.eventCount, " ", segment_r4.eventCount === 1 ? "event" : "events", ")");
118
+ i0.ɵɵtextInterpolate2("(", segment_r3.eventCount, " ", segment_r3.eventCount === 1 ? "event" : "events", ")");
119
119
  } }
120
120
  function TimelineComponent_Conditional_4_Conditional_0_For_1_For_7_ng_container_0_Template(rf, ctx) { if (rf & 1) {
121
121
  i0.ɵɵelementContainer(0);
@@ -123,43 +123,43 @@ function TimelineComponent_Conditional_4_Conditional_0_For_1_For_7_ng_container_
123
123
  function TimelineComponent_Conditional_4_Conditional_0_For_1_For_7_Template(rf, ctx) { if (rf & 1) {
124
124
  i0.ɵɵtemplate(0, TimelineComponent_Conditional_4_Conditional_0_For_1_For_7_ng_container_0_Template, 1, 0, "ng-container", 15);
125
125
  } if (rf & 2) {
126
- const event_r5 = ctx.$implicit;
127
- const ɵ$index_56_r6 = ctx.$index;
128
- const ctx_r1 = i0.ɵɵnextContext(4);
129
- const eventCard_r7 = i0.ɵɵreference(8);
130
- i0.ɵɵproperty("ngTemplateOutlet", eventCard_r7)("ngTemplateOutletContext", i0.ɵɵpureFunction4(2, _c9, event_r5, ɵ$index_56_r6, ɵ$index_56_r6 % 2 !== 0, ctx_r1.getGlobalIndex(event_r5)));
126
+ const event_r4 = ctx.$implicit;
127
+ const ɵ$index_56_r5 = ctx.$index;
128
+ const ctx_r0 = i0.ɵɵnextContext(4);
129
+ const eventCard_r6 = i0.ɵɵreference(8);
130
+ i0.ɵɵproperty("ngTemplateOutlet", eventCard_r6)("ngTemplateOutletContext", i0.ɵɵpureFunction4(2, _c9, event_r4, ɵ$index_56_r5, ɵ$index_56_r5 % 2 !== 0, ctx_r0.getGlobalIndex(event_r4)));
131
131
  } }
132
132
  function TimelineComponent_Conditional_4_Conditional_0_For_1_Template(rf, ctx) { if (rf & 1) {
133
- const _r3 = i0.ɵɵgetCurrentView();
133
+ const _r2 = i0.ɵɵgetCurrentView();
134
134
  i0.ɵɵelementStart(0, "div", 12)(1, "div", 13);
135
- i0.ɵɵlistener("click", function TimelineComponent_Conditional_4_Conditional_0_For_1_Template_div_click_1_listener() { const segment_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onSegmentClick(segment_r4)); });
135
+ i0.ɵɵlistener("click", function TimelineComponent_Conditional_4_Conditional_0_For_1_Template_div_click_1_listener() { const segment_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onSegmentClick(segment_r3)); });
136
136
  i0.ɵɵconditionalCreate(2, TimelineComponent_Conditional_4_Conditional_0_For_1_Conditional_2_Template, 1, 4, "ng-container")(3, TimelineComponent_Conditional_4_Conditional_0_For_1_Conditional_3_Template, 6, 4);
137
137
  i0.ɵɵelementEnd();
138
138
  i0.ɵɵelementStart(4, "div", 14)(5, "div", 10);
139
139
  i0.ɵɵrepeaterCreate(6, TimelineComponent_Conditional_4_Conditional_0_For_1_For_7_Template, 1, 7, "ng-container", null, i0.ɵɵcomponentInstance().trackByEventId, true);
140
140
  i0.ɵɵelementEnd()()();
141
141
  } if (rf & 2) {
142
- const segment_r4 = ctx.$implicit;
143
- const ɵ$index_28_r8 = ctx.$index;
144
- const ctx_r1 = i0.ɵɵnextContext(3);
145
- i0.ɵɵclassProp("mj-timeline__segment--collapsed", !segment_r4.isExpanded);
146
- i0.ɵɵattribute("data-segment-label", segment_r4.label);
142
+ const segment_r3 = ctx.$implicit;
143
+ const ɵ$index_28_r7 = ctx.$index;
144
+ const ctx_r0 = i0.ɵɵnextContext(3);
145
+ i0.ɵɵclassProp("mj-timeline__segment--collapsed", !segment_r3.isExpanded);
146
+ i0.ɵɵattribute("data-segment-label", segment_r3.label);
147
147
  i0.ɵɵadvance();
148
- i0.ɵɵclassProp("mj-timeline__segment-header--clickable", ctx_r1.segmentsCollapsible);
149
- i0.ɵɵattribute("aria-expanded", segment_r4.isExpanded)("aria-controls", "segment-content-" + ɵ$index_28_r8);
148
+ i0.ɵɵclassProp("mj-timeline__segment-header--clickable", ctx_r0.segmentsCollapsible);
149
+ i0.ɵɵattribute("aria-expanded", segment_r3.isExpanded)("aria-controls", "segment-content-" + ɵ$index_28_r7);
150
150
  i0.ɵɵadvance();
151
- i0.ɵɵconditional(ctx_r1.segmentHeaderTemplate ? 2 : 3);
151
+ i0.ɵɵconditional(ctx_r0.segmentHeaderTemplate ? 2 : 3);
152
152
  i0.ɵɵadvance(2);
153
- i0.ɵɵclassProp("mj-timeline__segment-content--hidden", !segment_r4.isExpanded);
154
- i0.ɵɵproperty("id", "segment-content-" + ɵ$index_28_r8);
153
+ i0.ɵɵclassProp("mj-timeline__segment-content--hidden", !segment_r3.isExpanded);
154
+ i0.ɵɵproperty("id", "segment-content-" + ɵ$index_28_r7);
155
155
  i0.ɵɵadvance(2);
156
- i0.ɵɵrepeater(segment_r4.events);
156
+ i0.ɵɵrepeater(segment_r3.events);
157
157
  } }
158
158
  function TimelineComponent_Conditional_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
159
159
  i0.ɵɵrepeaterCreate(0, TimelineComponent_Conditional_4_Conditional_0_For_1_Template, 8, 11, "div", 11, i0.ɵɵcomponentInstance().trackBySegmentLabel, true);
160
160
  } if (rf & 2) {
161
- const ctx_r1 = i0.ɵɵnextContext(2);
162
- i0.ɵɵrepeater(ctx_r1.segments);
161
+ const ctx_r0 = i0.ɵɵnextContext(2);
162
+ i0.ɵɵrepeater(ctx_r0.segments);
163
163
  } }
164
164
  function TimelineComponent_Conditional_4_Conditional_1_For_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
165
165
  i0.ɵɵelementContainer(0);
@@ -167,29 +167,29 @@ function TimelineComponent_Conditional_4_Conditional_1_For_2_ng_container_0_Temp
167
167
  function TimelineComponent_Conditional_4_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
168
168
  i0.ɵɵtemplate(0, TimelineComponent_Conditional_4_Conditional_1_For_2_ng_container_0_Template, 1, 0, "ng-container", 15);
169
169
  } if (rf & 2) {
170
- const event_r9 = ctx.$implicit;
171
- const ɵ$index_64_r10 = ctx.$index;
170
+ const event_r8 = ctx.$implicit;
171
+ const ɵ$index_64_r9 = ctx.$index;
172
172
  i0.ɵɵnextContext(3);
173
- const eventCard_r7 = i0.ɵɵreference(8);
174
- i0.ɵɵproperty("ngTemplateOutlet", eventCard_r7)("ngTemplateOutletContext", i0.ɵɵpureFunction4(2, _c9, event_r9, ɵ$index_64_r10, ɵ$index_64_r10 % 2 !== 0, ɵ$index_64_r10));
173
+ const eventCard_r6 = i0.ɵɵreference(8);
174
+ i0.ɵɵproperty("ngTemplateOutlet", eventCard_r6)("ngTemplateOutletContext", i0.ɵɵpureFunction4(2, _c9, event_r8, ɵ$index_64_r9, ɵ$index_64_r9 % 2 !== 0, ɵ$index_64_r9));
175
175
  } }
176
176
  function TimelineComponent_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
177
177
  i0.ɵɵelementStart(0, "div", 10);
178
178
  i0.ɵɵrepeaterCreate(1, TimelineComponent_Conditional_4_Conditional_1_For_2_Template, 1, 7, "ng-container", null, i0.ɵɵcomponentInstance().trackByEventId, true);
179
179
  i0.ɵɵelementEnd();
180
180
  } if (rf & 2) {
181
- const ctx_r1 = i0.ɵɵnextContext(2);
181
+ const ctx_r0 = i0.ɵɵnextContext(2);
182
182
  i0.ɵɵadvance();
183
- i0.ɵɵrepeater(ctx_r1.allEvents);
183
+ i0.ɵɵrepeater(ctx_r0.allEvents);
184
184
  } }
185
185
  function TimelineComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
186
186
  i0.ɵɵconditionalCreate(0, TimelineComponent_Conditional_4_Conditional_0_Template, 2, 0);
187
187
  i0.ɵɵconditionalCreate(1, TimelineComponent_Conditional_4_Conditional_1_Template, 3, 0, "div", 10);
188
188
  } if (rf & 2) {
189
- const ctx_r1 = i0.ɵɵnextContext();
190
- i0.ɵɵconditional(ctx_r1.segmentGrouping !== "none" ? 0 : -1);
189
+ const ctx_r0 = i0.ɵɵnextContext();
190
+ i0.ɵɵconditional(ctx_r0.segmentGrouping !== "none" ? 0 : -1);
191
191
  i0.ɵɵadvance();
192
- i0.ɵɵconditional(ctx_r1.segmentGrouping === "none" ? 1 : -1);
192
+ i0.ɵɵconditional(ctx_r0.segmentGrouping === "none" ? 1 : -1);
193
193
  } }
194
194
  function TimelineComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
195
195
  i0.ɵɵelement(0, "div", 3);
@@ -201,19 +201,19 @@ function TimelineComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
201
201
  i0.ɵɵtext(3);
202
202
  i0.ɵɵelementEnd()();
203
203
  } if (rf & 2) {
204
- const ctx_r1 = i0.ɵɵnextContext();
204
+ const ctx_r0 = i0.ɵɵnextContext();
205
205
  i0.ɵɵadvance(3);
206
- i0.ɵɵtextInterpolate(ctx_r1.virtualScroll.loadingMessage);
206
+ i0.ɵɵtextInterpolate(ctx_r0.virtualScroll.loadingMessage);
207
207
  } }
208
208
  function TimelineComponent_ng_template_7_Conditional_4_Template(rf, ctx) { if (rf & 1) {
209
209
  i0.ɵɵelementStart(0, "div", 25);
210
210
  i0.ɵɵtext(1);
211
211
  i0.ɵɵelementEnd();
212
212
  } if (rf & 2) {
213
- const event_r12 = i0.ɵɵnextContext().event;
214
- const ctx_r1 = i0.ɵɵnextContext();
213
+ const event_r11 = i0.ɵɵnextContext().event;
214
+ const ctx_r0 = i0.ɵɵnextContext();
215
215
  i0.ɵɵadvance();
216
- i0.ɵɵtextInterpolate1(" ", ctx_r1.formatDate(event_r12.date), " ");
216
+ i0.ɵɵtextInterpolate1(" ", ctx_r0.formatDate(event_r11.date), " ");
217
217
  } }
218
218
  function TimelineComponent_ng_template_7_Conditional_6_ng_container_0_Template(rf, ctx) { if (rf & 1) {
219
219
  i0.ɵɵelementContainer(0);
@@ -221,20 +221,20 @@ function TimelineComponent_ng_template_7_Conditional_6_ng_container_0_Template(r
221
221
  function TimelineComponent_ng_template_7_Conditional_6_Template(rf, ctx) { if (rf & 1) {
222
222
  i0.ɵɵtemplate(0, TimelineComponent_ng_template_7_Conditional_6_ng_container_0_Template, 1, 0, "ng-container", 15);
223
223
  } if (rf & 2) {
224
- const event_r12 = i0.ɵɵnextContext().event;
225
- const ctx_r1 = i0.ɵɵnextContext();
226
- i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.cardTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c10, event_r12, ctx_r1.groups[event_r12.groupIndex]));
224
+ const event_r11 = i0.ɵɵnextContext().event;
225
+ const ctx_r0 = i0.ɵɵnextContext();
226
+ i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.cardTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c10, event_r11, ctx_r0.groups[event_r11.groupIndex]));
227
227
  } }
228
228
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_1_Template(rf, ctx) { if (rf & 1) {
229
229
  i0.ɵɵelementStart(0, "div", 33);
230
230
  i0.ɵɵelement(1, "img", 34);
231
231
  i0.ɵɵelementEnd();
232
232
  } if (rf & 2) {
233
- const event_r12 = i0.ɵɵnextContext(2).event;
234
- const ctx_r1 = i0.ɵɵnextContext();
235
- i0.ɵɵclassProp("mj-timeline__card-image--small", ctx_r1.getEffectiveCardConfig(event_r12).imageSize === "small")("mj-timeline__card-image--medium", ctx_r1.getEffectiveCardConfig(event_r12).imageSize === "medium")("mj-timeline__card-image--large", ctx_r1.getEffectiveCardConfig(event_r12).imageSize === "large");
233
+ const event_r11 = i0.ɵɵnextContext(2).event;
234
+ const ctx_r0 = i0.ɵɵnextContext();
235
+ i0.ɵɵclassProp("mj-timeline__card-image--small", ctx_r0.getEffectiveCardConfig(event_r11).imageSize === "small")("mj-timeline__card-image--medium", ctx_r0.getEffectiveCardConfig(event_r11).imageSize === "medium")("mj-timeline__card-image--large", ctx_r0.getEffectiveCardConfig(event_r11).imageSize === "large");
236
236
  i0.ɵɵadvance();
237
- i0.ɵɵproperty("src", event_r12.imageUrl, i0.ɵɵsanitizeUrl)("alt", event_r12.title);
237
+ i0.ɵɵproperty("src", event_r11.imageUrl, i0.ɵɵsanitizeUrl)("alt", event_r11.title);
238
238
  } }
239
239
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_3_ng_container_0_Template(rf, ctx) { if (rf & 1) {
240
240
  i0.ɵɵelementContainer(0);
@@ -242,51 +242,51 @@ function TimelineComponent_ng_template_7_Conditional_7_Conditional_3_ng_containe
242
242
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_3_Template(rf, ctx) { if (rf & 1) {
243
243
  i0.ɵɵtemplate(0, TimelineComponent_ng_template_7_Conditional_7_Conditional_3_ng_container_0_Template, 1, 0, "ng-container", 15);
244
244
  } if (rf & 2) {
245
- const event_r12 = i0.ɵɵnextContext(2).event;
246
- const ctx_r1 = i0.ɵɵnextContext();
247
- i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.headerTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c11, event_r12));
245
+ const event_r11 = i0.ɵɵnextContext(2).event;
246
+ const ctx_r0 = i0.ɵɵnextContext();
247
+ i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.headerTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c11, event_r11));
248
248
  } }
249
249
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
250
250
  i0.ɵɵelementStart(0, "span", 41);
251
251
  i0.ɵɵelement(1, "i");
252
252
  i0.ɵɵelementEnd();
253
253
  } if (rf & 2) {
254
- const event_r12 = i0.ɵɵnextContext(3).event;
255
- const ctx_r1 = i0.ɵɵnextContext();
256
- i0.ɵɵstyleProp("color", ctx_r1.getColor(event_r12));
254
+ const event_r11 = i0.ɵɵnextContext(3).event;
255
+ const ctx_r0 = i0.ɵɵnextContext();
256
+ i0.ɵɵstyleProp("color", ctx_r0.getColor(event_r11));
257
257
  i0.ɵɵadvance();
258
- i0.ɵɵclassMap(ctx_r1.getIcon(event_r12));
258
+ i0.ɵɵclassMap(ctx_r0.getIcon(event_r11));
259
259
  } }
260
260
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_4_Conditional_4_Template(rf, ctx) { if (rf & 1) {
261
261
  i0.ɵɵelementStart(0, "span", 38);
262
262
  i0.ɵɵtext(1);
263
263
  i0.ɵɵelementEnd();
264
264
  } if (rf & 2) {
265
- const event_r12 = i0.ɵɵnextContext(3).event;
265
+ const event_r11 = i0.ɵɵnextContext(3).event;
266
266
  i0.ɵɵadvance();
267
- i0.ɵɵtextInterpolate1(" ", event_r12.subtitle, " ");
267
+ i0.ɵɵtextInterpolate1(" ", event_r11.subtitle, " ");
268
268
  } }
269
269
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_4_Conditional_5_Template(rf, ctx) { if (rf & 1) {
270
270
  i0.ɵɵelementStart(0, "span", 39);
271
271
  i0.ɵɵtext(1);
272
272
  i0.ɵɵelementEnd();
273
273
  } if (rf & 2) {
274
- const event_r12 = i0.ɵɵnextContext(3).event;
275
- const ctx_r1 = i0.ɵɵnextContext();
274
+ const event_r11 = i0.ɵɵnextContext(3).event;
275
+ const ctx_r0 = i0.ɵɵnextContext();
276
276
  i0.ɵɵadvance();
277
- i0.ɵɵtextInterpolate1(" ", ctx_r1.formatDate(event_r12.date, ctx_r1.getEffectiveCardConfig(event_r12).dateFormat), " ");
277
+ i0.ɵɵtextInterpolate1(" ", ctx_r0.formatDate(event_r11.date, ctx_r0.getEffectiveCardConfig(event_r11).dateFormat), " ");
278
278
  } }
279
279
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_4_Conditional_6_Template(rf, ctx) { if (rf & 1) {
280
- const _r17 = i0.ɵɵgetCurrentView();
280
+ const _r16 = i0.ɵɵgetCurrentView();
281
281
  i0.ɵɵelementStart(0, "button", 42);
282
- i0.ɵɵlistener("click", function TimelineComponent_ng_template_7_Conditional_7_Conditional_4_Conditional_6_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r17 = i0.ɵɵnextContext(3); const event_r12 = ctx_r17.event; const globalIndex_r14 = ctx_r17.globalIndex; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onToggleExpand(event_r12, globalIndex_r14, $event)); });
282
+ i0.ɵɵlistener("click", function TimelineComponent_ng_template_7_Conditional_7_Conditional_4_Conditional_6_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r16 = i0.ɵɵnextContext(3); const event_r11 = ctx_r16.event; const globalIndex_r13 = ctx_r16.globalIndex; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onToggleExpand(event_r11, globalIndex_r13, $event)); });
283
283
  i0.ɵɵelement(1, "i");
284
284
  i0.ɵɵelementEnd();
285
285
  } if (rf & 2) {
286
- const event_r12 = i0.ɵɵnextContext(3).event;
287
- i0.ɵɵattribute("aria-label", event_r12.isExpanded ? "Collapse" : "Expand");
286
+ const event_r11 = i0.ɵɵnextContext(3).event;
287
+ i0.ɵɵattribute("aria-label", event_r11.isExpanded ? "Collapse" : "Expand");
288
288
  i0.ɵɵadvance();
289
- i0.ɵɵclassMap(event_r12.isExpanded ? "fa-solid fa-chevron-up" : "fa-solid fa-chevron-down");
289
+ i0.ɵɵclassMap(event_r11.isExpanded ? "fa-solid fa-chevron-up" : "fa-solid fa-chevron-down");
290
290
  } }
291
291
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_4_Template(rf, ctx) { if (rf & 1) {
292
292
  i0.ɵɵconditionalCreate(0, TimelineComponent_ng_template_7_Conditional_7_Conditional_4_Conditional_0_Template, 2, 4, "span", 35);
@@ -298,26 +298,26 @@ function TimelineComponent_ng_template_7_Conditional_7_Conditional_4_Template(rf
298
298
  i0.ɵɵelementEnd();
299
299
  i0.ɵɵconditionalCreate(6, TimelineComponent_ng_template_7_Conditional_7_Conditional_4_Conditional_6_Template, 2, 3, "button", 40);
300
300
  } if (rf & 2) {
301
- const event_r12 = i0.ɵɵnextContext(2).event;
302
- const ctx_r1 = i0.ɵɵnextContext();
303
- i0.ɵɵconditional(ctx_r1.getEffectiveCardConfig(event_r12).showIcon ? 0 : -1);
301
+ const event_r11 = i0.ɵɵnextContext(2).event;
302
+ const ctx_r0 = i0.ɵɵnextContext();
303
+ i0.ɵɵconditional(ctx_r0.getEffectiveCardConfig(event_r11).showIcon ? 0 : -1);
304
304
  i0.ɵɵadvance(3);
305
- i0.ɵɵtextInterpolate(event_r12.title);
305
+ i0.ɵɵtextInterpolate(event_r11.title);
306
306
  i0.ɵɵadvance();
307
- i0.ɵɵconditional(event_r12.subtitle && ctx_r1.getEffectiveCardConfig(event_r12).showSubtitle ? 4 : -1);
307
+ i0.ɵɵconditional(event_r11.subtitle && ctx_r0.getEffectiveCardConfig(event_r11).showSubtitle ? 4 : -1);
308
308
  i0.ɵɵadvance();
309
- i0.ɵɵconditional(ctx_r1.getEffectiveCardConfig(event_r12).showDate && ctx_r1.layout !== "alternating" ? 5 : -1);
309
+ i0.ɵɵconditional(ctx_r0.getEffectiveCardConfig(event_r11).showDate && ctx_r0.layout !== "alternating" ? 5 : -1);
310
310
  i0.ɵɵadvance();
311
- i0.ɵɵconditional(ctx_r1.getEffectiveCardConfig(event_r12).collapsible ? 6 : -1);
311
+ i0.ɵɵconditional(ctx_r0.getEffectiveCardConfig(event_r11).collapsible ? 6 : -1);
312
312
  } }
313
313
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_5_Template(rf, ctx) { if (rf & 1) {
314
314
  i0.ɵɵelementStart(0, "div", 30);
315
315
  i0.ɵɵelement(1, "img", 34);
316
316
  i0.ɵɵelementEnd();
317
317
  } if (rf & 2) {
318
- const event_r12 = i0.ɵɵnextContext(2).event;
318
+ const event_r11 = i0.ɵɵnextContext(2).event;
319
319
  i0.ɵɵadvance();
320
- i0.ɵɵproperty("src", event_r12.imageUrl, i0.ɵɵsanitizeUrl)("alt", event_r12.title);
320
+ i0.ɵɵproperty("src", event_r11.imageUrl, i0.ɵɵsanitizeUrl)("alt", event_r11.title);
321
321
  } }
322
322
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_7_ng_container_0_Template(rf, ctx) { if (rf & 1) {
323
323
  i0.ɵɵelementContainer(0);
@@ -325,24 +325,24 @@ function TimelineComponent_ng_template_7_Conditional_7_Conditional_7_ng_containe
325
325
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_7_Template(rf, ctx) { if (rf & 1) {
326
326
  i0.ɵɵtemplate(0, TimelineComponent_ng_template_7_Conditional_7_Conditional_7_ng_container_0_Template, 1, 0, "ng-container", 15);
327
327
  } if (rf & 2) {
328
- const event_r12 = i0.ɵɵnextContext(2).event;
329
- const ctx_r1 = i0.ɵɵnextContext();
330
- i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.bodyTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c11, event_r12));
328
+ const event_r11 = i0.ɵɵnextContext(2).event;
329
+ const ctx_r0 = i0.ɵɵnextContext();
330
+ i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.bodyTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c11, event_r11));
331
331
  } }
332
332
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_0_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
333
333
  i0.ɵɵelement(0, "i", 47);
334
334
  } if (rf & 2) {
335
- const field_r19 = i0.ɵɵnextContext().$implicit;
336
- i0.ɵɵproperty("ngClass", field_r19.icon);
335
+ const field_r18 = i0.ɵɵnextContext().$implicit;
336
+ i0.ɵɵproperty("ngClass", field_r18.icon);
337
337
  } }
338
338
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_0_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
339
339
  i0.ɵɵelementStart(0, "span", 48);
340
340
  i0.ɵɵtext(1);
341
341
  i0.ɵɵelementEnd();
342
342
  } if (rf & 2) {
343
- const field_r19 = i0.ɵɵnextContext().$implicit;
343
+ const field_r18 = i0.ɵɵnextContext().$implicit;
344
344
  i0.ɵɵadvance();
345
- i0.ɵɵtextInterpolate1("", field_r19.label, ":");
345
+ i0.ɵɵtextInterpolate1("", field_r18.label, ":");
346
346
  } }
347
347
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
348
348
  i0.ɵɵelementStart(0, "div", 46);
@@ -352,65 +352,65 @@ function TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional
352
352
  i0.ɵɵtext(4);
353
353
  i0.ɵɵelementEnd()();
354
354
  } if (rf & 2) {
355
- const field_r19 = ctx.$implicit;
356
- const event_r12 = i0.ɵɵnextContext(4).event;
357
- const ctx_r1 = i0.ɵɵnextContext();
358
- i0.ɵɵproperty("ngClass", field_r19.cssClass);
355
+ const field_r18 = ctx.$implicit;
356
+ const event_r11 = i0.ɵɵnextContext(4).event;
357
+ const ctx_r0 = i0.ɵɵnextContext();
358
+ i0.ɵɵproperty("ngClass", field_r18.cssClass);
359
359
  i0.ɵɵadvance();
360
- i0.ɵɵconditional(field_r19.icon ? 1 : -1);
360
+ i0.ɵɵconditional(field_r18.icon ? 1 : -1);
361
361
  i0.ɵɵadvance();
362
- i0.ɵɵconditional(!field_r19.hideLabel && field_r19.label ? 2 : -1);
362
+ i0.ɵɵconditional(!field_r18.hideLabel && field_r18.label ? 2 : -1);
363
363
  i0.ɵɵadvance(2);
364
- i0.ɵɵtextInterpolate(ctx_r1.getFieldValue(event_r12, field_r19));
364
+ i0.ɵɵtextInterpolate(ctx_r0.getFieldValue(event_r11, field_r18));
365
365
  } }
366
366
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_0_Template(rf, ctx) { if (rf & 1) {
367
367
  i0.ɵɵelementStart(0, "div", 43);
368
368
  i0.ɵɵrepeaterCreate(1, TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_0_For_2_Template, 5, 4, "div", 46, i0.ɵɵrepeaterTrackByIdentity);
369
369
  i0.ɵɵelementEnd();
370
370
  } if (rf & 2) {
371
- const event_r12 = i0.ɵɵnextContext(3).event;
372
- const ctx_r1 = i0.ɵɵnextContext();
371
+ const event_r11 = i0.ɵɵnextContext(3).event;
372
+ const ctx_r0 = i0.ɵɵnextContext();
373
373
  i0.ɵɵadvance();
374
- i0.ɵɵrepeater(ctx_r1.getEffectiveCardConfig(event_r12).summaryFields);
374
+ i0.ɵɵrepeater(ctx_r0.getEffectiveCardConfig(event_r11).summaryFields);
375
375
  } }
376
376
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
377
377
  i0.ɵɵelement(0, "div", 51);
378
378
  } if (rf & 2) {
379
- const event_r12 = i0.ɵɵnextContext(4).event;
380
- i0.ɵɵproperty("innerHTML", event_r12.description, i0.ɵɵsanitizeHtml);
379
+ const event_r11 = i0.ɵɵnextContext(4).event;
380
+ i0.ɵɵproperty("innerHTML", event_r11.description, i0.ɵɵsanitizeHtml);
381
381
  } }
382
382
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
383
383
  i0.ɵɵtext(0);
384
384
  } if (rf & 2) {
385
- const event_r12 = i0.ɵɵnextContext(4).event;
386
- i0.ɵɵtextInterpolate1(" ", event_r12.description, " ");
385
+ const event_r11 = i0.ɵɵnextContext(4).event;
386
+ i0.ɵɵtextInterpolate1(" ", event_r11.description, " ");
387
387
  } }
388
388
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_1_Template(rf, ctx) { if (rf & 1) {
389
389
  i0.ɵɵelementStart(0, "div", 50);
390
390
  i0.ɵɵconditionalCreate(1, TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_1_Conditional_1_Template, 1, 1, "div", 51)(2, TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_1_Conditional_2_Template, 1, 1);
391
391
  i0.ɵɵelementEnd();
392
392
  } if (rf & 2) {
393
- const event_r12 = i0.ɵɵnextContext(3).event;
394
- const ctx_r1 = i0.ɵɵnextContext();
395
- i0.ɵɵstyleProp("-webkit-line-clamp", ctx_r1.getEffectiveCardConfig(event_r12).descriptionMaxLines || null);
396
- i0.ɵɵclassProp("mj-timeline__card-description--clamped", (ctx_r1.getEffectiveCardConfig(event_r12).descriptionMaxLines ?? 0) > 0);
393
+ const event_r11 = i0.ɵɵnextContext(3).event;
394
+ const ctx_r0 = i0.ɵɵnextContext();
395
+ i0.ɵɵstyleProp("-webkit-line-clamp", ctx_r0.getEffectiveCardConfig(event_r11).descriptionMaxLines || null);
396
+ i0.ɵɵclassProp("mj-timeline__card-description--clamped", (ctx_r0.getEffectiveCardConfig(event_r11).descriptionMaxLines ?? 0) > 0);
397
397
  i0.ɵɵadvance();
398
- i0.ɵɵconditional(ctx_r1.getEffectiveCardConfig(event_r12).allowHtmlDescription ? 1 : 2);
398
+ i0.ɵɵconditional(ctx_r0.getEffectiveCardConfig(event_r11).allowHtmlDescription ? 1 : 2);
399
399
  } }
400
400
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_2_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
401
401
  i0.ɵɵelement(0, "i", 47);
402
402
  } if (rf & 2) {
403
- const field_r20 = i0.ɵɵnextContext().$implicit;
404
- i0.ɵɵproperty("ngClass", field_r20.icon);
403
+ const field_r19 = i0.ɵɵnextContext().$implicit;
404
+ i0.ɵɵproperty("ngClass", field_r19.icon);
405
405
  } }
406
406
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_2_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
407
407
  i0.ɵɵelementStart(0, "span", 48);
408
408
  i0.ɵɵtext(1);
409
409
  i0.ɵɵelementEnd();
410
410
  } if (rf & 2) {
411
- const field_r20 = i0.ɵɵnextContext().$implicit;
411
+ const field_r19 = i0.ɵɵnextContext().$implicit;
412
412
  i0.ɵɵadvance();
413
- i0.ɵɵtextInterpolate1("", field_r20.label || field_r20.fieldName, ":");
413
+ i0.ɵɵtextInterpolate1("", field_r19.label || field_r19.fieldName, ":");
414
414
  } }
415
415
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
416
416
  i0.ɵɵelementStart(0, "div", 46);
@@ -420,26 +420,26 @@ function TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional
420
420
  i0.ɵɵtext(4);
421
421
  i0.ɵɵelementEnd()();
422
422
  } if (rf & 2) {
423
- const field_r20 = ctx.$implicit;
424
- const event_r12 = i0.ɵɵnextContext(4).event;
425
- const ctx_r1 = i0.ɵɵnextContext();
426
- i0.ɵɵproperty("ngClass", field_r20.cssClass);
423
+ const field_r19 = ctx.$implicit;
424
+ const event_r11 = i0.ɵɵnextContext(4).event;
425
+ const ctx_r0 = i0.ɵɵnextContext();
426
+ i0.ɵɵproperty("ngClass", field_r19.cssClass);
427
427
  i0.ɵɵadvance();
428
- i0.ɵɵconditional(field_r20.icon ? 1 : -1);
428
+ i0.ɵɵconditional(field_r19.icon ? 1 : -1);
429
429
  i0.ɵɵadvance();
430
- i0.ɵɵconditional(!field_r20.hideLabel ? 2 : -1);
430
+ i0.ɵɵconditional(!field_r19.hideLabel ? 2 : -1);
431
431
  i0.ɵɵadvance(2);
432
- i0.ɵɵtextInterpolate(ctx_r1.getFieldValue(event_r12, field_r20));
432
+ i0.ɵɵtextInterpolate(ctx_r0.getFieldValue(event_r11, field_r19));
433
433
  } }
434
434
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_2_Template(rf, ctx) { if (rf & 1) {
435
435
  i0.ɵɵelementStart(0, "div", 45);
436
436
  i0.ɵɵrepeaterCreate(1, TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_2_For_2_Template, 5, 4, "div", 46, i0.ɵɵrepeaterTrackByIdentity);
437
437
  i0.ɵɵelementEnd();
438
438
  } if (rf & 2) {
439
- const event_r12 = i0.ɵɵnextContext(3).event;
440
- const ctx_r1 = i0.ɵɵnextContext();
439
+ const event_r11 = i0.ɵɵnextContext(3).event;
440
+ const ctx_r0 = i0.ɵɵnextContext();
441
441
  i0.ɵɵadvance();
442
- i0.ɵɵrepeater(ctx_r1.getEffectiveCardConfig(event_r12).expandedFields);
442
+ i0.ɵɵrepeater(ctx_r0.getEffectiveCardConfig(event_r11).expandedFields);
443
443
  } }
444
444
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Template(rf, ctx) { if (rf & 1) {
445
445
  i0.ɵɵconditionalCreate(0, TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_0_Template, 3, 0, "div", 43);
@@ -448,13 +448,13 @@ function TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Template(rf
448
448
  } if (rf & 2) {
449
449
  let tmp_9_0;
450
450
  let tmp_11_0;
451
- const event_r12 = i0.ɵɵnextContext(2).event;
452
- const ctx_r1 = i0.ɵɵnextContext();
453
- i0.ɵɵconditional(((tmp_9_0 = ctx_r1.getEffectiveCardConfig(event_r12).summaryFields) == null ? null : tmp_9_0.length) ? 0 : -1);
451
+ const event_r11 = i0.ɵɵnextContext(2).event;
452
+ const ctx_r0 = i0.ɵɵnextContext();
453
+ i0.ɵɵconditional(((tmp_9_0 = ctx_r0.getEffectiveCardConfig(event_r11).summaryFields) == null ? null : tmp_9_0.length) ? 0 : -1);
454
454
  i0.ɵɵadvance();
455
- i0.ɵɵconditional(event_r12.description && event_r12.isExpanded ? 1 : -1);
455
+ i0.ɵɵconditional(event_r11.description && event_r11.isExpanded ? 1 : -1);
456
456
  i0.ɵɵadvance();
457
- i0.ɵɵconditional(event_r12.isExpanded && ((tmp_11_0 = ctx_r1.getEffectiveCardConfig(event_r12).expandedFields) == null ? null : tmp_11_0.length) ? 2 : -1);
457
+ i0.ɵɵconditional(event_r11.isExpanded && ((tmp_11_0 = ctx_r0.getEffectiveCardConfig(event_r11).expandedFields) == null ? null : tmp_11_0.length) ? 2 : -1);
458
458
  } }
459
459
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_9_Conditional_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
460
460
  i0.ɵɵelementContainer(0);
@@ -462,50 +462,50 @@ function TimelineComponent_ng_template_7_Conditional_7_Conditional_9_Conditional
462
462
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_9_Conditional_1_Template(rf, ctx) { if (rf & 1) {
463
463
  i0.ɵɵtemplate(0, TimelineComponent_ng_template_7_Conditional_7_Conditional_9_Conditional_1_ng_container_0_Template, 1, 0, "ng-container", 15);
464
464
  } if (rf & 2) {
465
- const event_r12 = i0.ɵɵnextContext(3).event;
466
- const ctx_r1 = i0.ɵɵnextContext();
467
- i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.actionsTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c12, event_r12, ctx_r1.getActions(event_r12)));
465
+ const event_r11 = i0.ɵɵnextContext(3).event;
466
+ const ctx_r0 = i0.ɵɵnextContext();
467
+ i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.actionsTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c12, event_r11, ctx_r0.getActions(event_r11)));
468
468
  } }
469
469
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_9_Conditional_2_For_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
470
470
  i0.ɵɵelement(0, "i", 55);
471
471
  } if (rf & 2) {
472
- const action_r22 = i0.ɵɵnextContext().$implicit;
473
- i0.ɵɵproperty("ngClass", action_r22.icon);
472
+ const action_r21 = i0.ɵɵnextContext().$implicit;
473
+ i0.ɵɵproperty("ngClass", action_r21.icon);
474
474
  } }
475
475
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_9_Conditional_2_For_1_Template(rf, ctx) { if (rf & 1) {
476
- const _r21 = i0.ɵɵgetCurrentView();
476
+ const _r20 = i0.ɵɵgetCurrentView();
477
477
  i0.ɵɵelementStart(0, "button", 54);
478
- i0.ɵɵlistener("click", function TimelineComponent_ng_template_7_Conditional_7_Conditional_9_Conditional_2_For_1_Template_button_click_0_listener($event) { const action_r22 = i0.ɵɵrestoreView(_r21).$implicit; const ctx_r17 = i0.ɵɵnextContext(4); const event_r12 = ctx_r17.event; const globalIndex_r14 = ctx_r17.globalIndex; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onActionClick(event_r12, action_r22, globalIndex_r14, $event)); });
478
+ i0.ɵɵlistener("click", function TimelineComponent_ng_template_7_Conditional_7_Conditional_9_Conditional_2_For_1_Template_button_click_0_listener($event) { const action_r21 = i0.ɵɵrestoreView(_r20).$implicit; const ctx_r16 = i0.ɵɵnextContext(4); const event_r11 = ctx_r16.event; const globalIndex_r13 = ctx_r16.globalIndex; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onActionClick(event_r11, action_r21, globalIndex_r13, $event)); });
479
479
  i0.ɵɵconditionalCreate(1, TimelineComponent_ng_template_7_Conditional_7_Conditional_9_Conditional_2_For_1_Conditional_1_Template, 1, 1, "i", 55);
480
480
  i0.ɵɵelementStart(2, "span");
481
481
  i0.ɵɵtext(3);
482
482
  i0.ɵɵelementEnd()();
483
483
  } if (rf & 2) {
484
- const action_r22 = ctx.$implicit;
485
- i0.ɵɵclassProp("mj-timeline__action--primary", action_r22.variant === "primary")("mj-timeline__action--secondary", action_r22.variant === "secondary" || !action_r22.variant)("mj-timeline__action--danger", action_r22.variant === "danger")("mj-timeline__action--link", action_r22.variant === "link");
486
- i0.ɵɵproperty("ngClass", action_r22.cssClass)("disabled", action_r22.disabled)("title", action_r22.tooltip || "");
484
+ const action_r21 = ctx.$implicit;
485
+ i0.ɵɵclassProp("mj-timeline__action--primary", action_r21.variant === "primary")("mj-timeline__action--secondary", action_r21.variant === "secondary" || !action_r21.variant)("mj-timeline__action--danger", action_r21.variant === "danger")("mj-timeline__action--link", action_r21.variant === "link");
486
+ i0.ɵɵproperty("ngClass", action_r21.cssClass)("disabled", action_r21.disabled)("title", action_r21.tooltip || "");
487
487
  i0.ɵɵadvance();
488
- i0.ɵɵconditional(action_r22.icon ? 1 : -1);
488
+ i0.ɵɵconditional(action_r21.icon ? 1 : -1);
489
489
  i0.ɵɵadvance(2);
490
- i0.ɵɵtextInterpolate(action_r22.label);
490
+ i0.ɵɵtextInterpolate(action_r21.label);
491
491
  } }
492
492
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_9_Conditional_2_Template(rf, ctx) { if (rf & 1) {
493
493
  i0.ɵɵrepeaterCreate(0, TimelineComponent_ng_template_7_Conditional_7_Conditional_9_Conditional_2_For_1_Template, 4, 13, "button", 53, i0.ɵɵrepeaterTrackByIdentity);
494
494
  } if (rf & 2) {
495
- const event_r12 = i0.ɵɵnextContext(3).event;
496
- const ctx_r1 = i0.ɵɵnextContext();
497
- i0.ɵɵrepeater(ctx_r1.getActions(event_r12));
495
+ const event_r11 = i0.ɵɵnextContext(3).event;
496
+ const ctx_r0 = i0.ɵɵnextContext();
497
+ i0.ɵɵrepeater(ctx_r0.getActions(event_r11));
498
498
  } }
499
499
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_9_Template(rf, ctx) { if (rf & 1) {
500
500
  i0.ɵɵelementStart(0, "div", 52);
501
501
  i0.ɵɵconditionalCreate(1, TimelineComponent_ng_template_7_Conditional_7_Conditional_9_Conditional_1_Template, 1, 5, "ng-container")(2, TimelineComponent_ng_template_7_Conditional_7_Conditional_9_Conditional_2_Template, 2, 0);
502
502
  i0.ɵɵelementEnd();
503
503
  } if (rf & 2) {
504
- const event_r12 = i0.ɵɵnextContext(2).event;
505
- const ctx_r1 = i0.ɵɵnextContext();
506
- i0.ɵɵclassProp("mj-timeline__card-actions--hover-only", ctx_r1.getEffectiveCardConfig(event_r12).actionsOnHover);
504
+ const event_r11 = i0.ɵɵnextContext(2).event;
505
+ const ctx_r0 = i0.ɵɵnextContext();
506
+ i0.ɵɵclassProp("mj-timeline__card-actions--hover-only", ctx_r0.getEffectiveCardConfig(event_r11).actionsOnHover);
507
507
  i0.ɵɵadvance();
508
- i0.ɵɵconditional(ctx_r1.actionsTemplate ? 1 : 2);
508
+ i0.ɵɵconditional(ctx_r0.actionsTemplate ? 1 : 2);
509
509
  } }
510
510
  function TimelineComponent_ng_template_7_Conditional_7_Template(rf, ctx) { if (rf & 1) {
511
511
  i0.ɵɵelementStart(0, "div", 27);
@@ -519,52 +519,52 @@ function TimelineComponent_ng_template_7_Conditional_7_Template(rf, ctx) { if (r
519
519
  i0.ɵɵelementEnd();
520
520
  i0.ɵɵconditionalCreate(9, TimelineComponent_ng_template_7_Conditional_7_Conditional_9_Template, 3, 3, "div", 32);
521
521
  } if (rf & 2) {
522
- const event_r12 = i0.ɵɵnextContext().event;
523
- const ctx_r1 = i0.ɵɵnextContext();
522
+ const event_r11 = i0.ɵɵnextContext().event;
523
+ const ctx_r0 = i0.ɵɵnextContext();
524
524
  i0.ɵɵadvance();
525
- i0.ɵɵconditional(event_r12.imageUrl && ctx_r1.getEffectiveCardConfig(event_r12).imagePosition === "left" ? 1 : -1);
525
+ i0.ɵɵconditional(event_r11.imageUrl && ctx_r0.getEffectiveCardConfig(event_r11).imagePosition === "left" ? 1 : -1);
526
526
  i0.ɵɵadvance(2);
527
- i0.ɵɵconditional(ctx_r1.headerTemplate ? 3 : 4);
527
+ i0.ɵɵconditional(ctx_r0.headerTemplate ? 3 : 4);
528
528
  i0.ɵɵadvance(2);
529
- i0.ɵɵconditional(event_r12.imageUrl && ctx_r1.getEffectiveCardConfig(event_r12).imagePosition === "top" ? 5 : -1);
529
+ i0.ɵɵconditional(event_r11.imageUrl && ctx_r0.getEffectiveCardConfig(event_r11).imagePosition === "top" ? 5 : -1);
530
530
  i0.ɵɵadvance();
531
- i0.ɵɵclassProp("mj-timeline__card-body--collapsed", !event_r12.isExpanded && ctx_r1.getEffectiveCardConfig(event_r12).collapsible);
531
+ i0.ɵɵclassProp("mj-timeline__card-body--collapsed", !event_r11.isExpanded && ctx_r0.getEffectiveCardConfig(event_r11).collapsible);
532
532
  i0.ɵɵadvance();
533
- i0.ɵɵconditional(ctx_r1.bodyTemplate ? 7 : 8);
533
+ i0.ɵɵconditional(ctx_r0.bodyTemplate ? 7 : 8);
534
534
  i0.ɵɵadvance(2);
535
- i0.ɵɵconditional(ctx_r1.getActions(event_r12).length > 0 ? 9 : -1);
535
+ i0.ɵɵconditional(ctx_r0.getActions(event_r11).length > 0 ? 9 : -1);
536
536
  } }
537
537
  function TimelineComponent_ng_template_7_Template(rf, ctx) { if (rf & 1) {
538
- const _r11 = i0.ɵɵgetCurrentView();
538
+ const _r10 = i0.ɵɵgetCurrentView();
539
539
  i0.ɵɵelementStart(0, "div", 21)(1, "div", 22);
540
540
  i0.ɵɵelement(2, "i", 23);
541
541
  i0.ɵɵelementEnd();
542
542
  i0.ɵɵelement(3, "div", 24);
543
543
  i0.ɵɵconditionalCreate(4, TimelineComponent_ng_template_7_Conditional_4_Template, 2, 1, "div", 25);
544
544
  i0.ɵɵelementStart(5, "div", 26);
545
- i0.ɵɵlistener("click", function TimelineComponent_ng_template_7_Template_div_click_5_listener($event) { const ctx_r12 = i0.ɵɵrestoreView(_r11); const event_r12 = ctx_r12.event; const globalIndex_r14 = ctx_r12.globalIndex; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onEventClick(event_r12, globalIndex_r14, $event)); })("mouseenter", function TimelineComponent_ng_template_7_Template_div_mouseenter_5_listener($event) { const ctx_r14 = i0.ɵɵrestoreView(_r11); const event_r12 = ctx_r14.event; const globalIndex_r14 = ctx_r14.globalIndex; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onEventMouseEnter(event_r12, globalIndex_r14, $event)); })("mouseleave", function TimelineComponent_ng_template_7_Template_div_mouseleave_5_listener($event) { const ctx_r15 = i0.ɵɵrestoreView(_r11); const event_r12 = ctx_r15.event; const globalIndex_r14 = ctx_r15.globalIndex; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onEventMouseLeave(event_r12, globalIndex_r14, $event)); });
545
+ i0.ɵɵlistener("click", function TimelineComponent_ng_template_7_Template_div_click_5_listener($event) { const ctx_r11 = i0.ɵɵrestoreView(_r10); const event_r11 = ctx_r11.event; const globalIndex_r13 = ctx_r11.globalIndex; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onEventClick(event_r11, globalIndex_r13, $event)); })("mouseenter", function TimelineComponent_ng_template_7_Template_div_mouseenter_5_listener($event) { const ctx_r13 = i0.ɵɵrestoreView(_r10); const event_r11 = ctx_r13.event; const globalIndex_r13 = ctx_r13.globalIndex; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onEventMouseEnter(event_r11, globalIndex_r13, $event)); })("mouseleave", function TimelineComponent_ng_template_7_Template_div_mouseleave_5_listener($event) { const ctx_r14 = i0.ɵɵrestoreView(_r10); const event_r11 = ctx_r14.event; const globalIndex_r13 = ctx_r14.globalIndex; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onEventMouseLeave(event_r11, globalIndex_r13, $event)); });
546
546
  i0.ɵɵconditionalCreate(6, TimelineComponent_ng_template_7_Conditional_6_Template, 1, 5, "ng-container")(7, TimelineComponent_ng_template_7_Conditional_7_Template, 10, 7);
547
547
  i0.ɵɵelementEnd()();
548
548
  } if (rf & 2) {
549
- const event_r12 = ctx.event;
550
- const isOdd_r23 = ctx.isOdd;
551
- const globalIndex_r14 = ctx.globalIndex;
552
- const ctx_r1 = i0.ɵɵnextContext();
553
- i0.ɵɵclassProp("mj-timeline__event--odd", isOdd_r23 && ctx_r1.layout === "alternating")("mj-timeline__event--even", !isOdd_r23 && ctx_r1.layout === "alternating")("mj-timeline__event--expanded", event_r12.isExpanded)("mj-timeline__event--focused", ctx_r1.isEventSelected(event_r12, globalIndex_r14));
554
- i0.ɵɵattribute("data-event-id", event_r12.id)("aria-expanded", event_r12.isExpanded);
549
+ const event_r11 = ctx.event;
550
+ const isOdd_r22 = ctx.isOdd;
551
+ const globalIndex_r13 = ctx.globalIndex;
552
+ const ctx_r0 = i0.ɵɵnextContext();
553
+ i0.ɵɵclassProp("mj-timeline__event--odd", isOdd_r22 && ctx_r0.layout === "alternating")("mj-timeline__event--even", !isOdd_r22 && ctx_r0.layout === "alternating")("mj-timeline__event--expanded", event_r11.isExpanded)("mj-timeline__event--focused", ctx_r0.isEventSelected(event_r11, globalIndex_r13));
554
+ i0.ɵɵattribute("data-event-id", event_r11.id)("aria-expanded", event_r11.isExpanded);
555
555
  i0.ɵɵadvance();
556
- i0.ɵɵstyleProp("background-color", ctx_r1.getColor(event_r12));
556
+ i0.ɵɵstyleProp("background-color", ctx_r0.getColor(event_r11));
557
557
  i0.ɵɵadvance();
558
- i0.ɵɵclassMap(ctx_r1.getIcon(event_r12));
558
+ i0.ɵɵclassMap(ctx_r0.getIcon(event_r11));
559
559
  i0.ɵɵadvance();
560
- i0.ɵɵstyleProp("background-color", ctx_r1.getColor(event_r12));
560
+ i0.ɵɵstyleProp("background-color", ctx_r0.getColor(event_r11));
561
561
  i0.ɵɵadvance();
562
- i0.ɵɵconditional(ctx_r1.layout === "alternating" ? 4 : -1);
562
+ i0.ɵɵconditional(ctx_r0.layout === "alternating" ? 4 : -1);
563
563
  i0.ɵɵadvance();
564
- i0.ɵɵstyleProp("max-width", ctx_r1.getEffectiveCardConfig(event_r12).maxWidth)("min-width", ctx_r1.getEffectiveCardConfig(event_r12).minWidth)("border-left-color", ctx_r1.getColor(event_r12));
565
- i0.ɵɵproperty("ngClass", ctx_r1.getEffectiveCardConfig(event_r12).cssClass);
564
+ i0.ɵɵstyleProp("max-width", ctx_r0.getEffectiveCardConfig(event_r11).maxWidth)("min-width", ctx_r0.getEffectiveCardConfig(event_r11).minWidth)("border-left-color", ctx_r0.getColor(event_r11));
565
+ i0.ɵɵproperty("ngClass", ctx_r0.getEffectiveCardConfig(event_r11).cssClass);
566
566
  i0.ɵɵadvance();
567
- i0.ɵɵconditional(ctx_r1.cardTemplate ? 6 : 7);
567
+ i0.ɵɵconditional(ctx_r0.cardTemplate ? 6 : 7);
568
568
  } }
569
569
  // ============================================================================
570
570
  // AUTO-ASSIGNED COLORS FOR GROUPS
@@ -1926,9 +1926,8 @@ export class TimelineComponent extends BaseAngularComponent {
1926
1926
  let _t;
1927
1927
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.scrollContainer = _t.first);
1928
1928
  } }, 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" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 9, vars: 14, consts: [["scrollContainer", ""], ["eventCard", ""], ["role", "list", "tabindex", "0", 1, "mj-timeline", 3, "keydown", "scroll"], [1, "mj-timeline-scroll-sentinel"], [1, "mj-timeline__loading-more"], [1, "mj-timeline__loading"], [4, "ngTemplateOutlet"], [1, "mj-timeline__loading-spinner"], [1, "mj-timeline__loading-text"], [3, "Icon", "Title"], [1, "mj-timeline__axis"], [1, "mj-timeline__segment", 3, "mj-timeline__segment--collapsed"], [1, "mj-timeline__segment"], ["role", "button", 1, "mj-timeline__segment-header", 3, "click"], [1, "mj-timeline__segment-content", 3, "id"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "mj-timeline__segment-toggle"], [1, "mj-timeline__segment-label"], [1, "mj-timeline__segment-count"], [1, "mj-timeline__segment-line"], [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"], [1, "mj-timeline__date-label"], [1, "mj-timeline__card", 3, "click", "mouseenter", "mouseleave", "ngClass"], [1, "mj-timeline__card-header"], [1, "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"], [1, "mj-timeline__card-header-content"], [1, "mj-timeline__card-image", "mj-timeline__card-image--top"], [1, "mj-timeline__card-body"], [1, "mj-timeline__card-actions", 3, "mj-timeline__card-actions--hover-only"], [1, "mj-timeline__card-image", "mj-timeline__card-image--left"], [3, "src", "alt"], [1, "mj-timeline__card-icon", 3, "color"], [1, "mj-timeline__card-titles"], [1, "mj-timeline__card-title"], [1, "mj-timeline__card-subtitle"], [1, "mj-timeline__card-date"], ["type", "button", 1, "mj-timeline__card-toggle"], [1, "mj-timeline__card-icon"], ["type", "button", 1, "mj-timeline__card-toggle", 3, "click"], [1, "mj-timeline__card-fields", "mj-timeline__card-fields--summary"], [1, "mj-timeline__card-description", 3, "mj-timeline__card-description--clamped", "-webkit-line-clamp"], [1, "mj-timeline__card-fields", "mj-timeline__card-fields--expanded"], [1, "mj-timeline__card-field", 3, "ngClass"], [1, "mj-timeline__card-field-icon", 3, "ngClass"], [1, "mj-timeline__card-field-label"], [1, "mj-timeline__card-field-value"], [1, "mj-timeline__card-description"], [3, "innerHTML"], [1, "mj-timeline__card-actions"], ["type", "button", 1, "mj-timeline__action", 3, "mj-timeline__action--primary", "mj-timeline__action--secondary", "mj-timeline__action--danger", "mj-timeline__action--link", "ngClass", "disabled", "title"], ["type", "button", 1, "mj-timeline__action", 3, "click", "ngClass", "disabled", "title"], [3, "ngClass"]], template: function TimelineComponent_Template(rf, ctx) { if (rf & 1) {
1929
- const _r1 = i0.ɵɵgetCurrentView();
1930
1929
  i0.ɵɵelementStart(0, "div", 2, 0);
1931
- 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)); });
1930
+ i0.ɵɵlistener("keydown", function TimelineComponent_Template_div_keydown_0_listener($event) { return ctx.onKeyDown($event); })("scroll", function TimelineComponent_Template_div_scroll_0_listener($event) { return ctx.onScroll($event); });
1932
1931
  i0.ɵɵconditionalCreate(2, TimelineComponent_Conditional_2_Template, 2, 1);
1933
1932
  i0.ɵɵconditionalCreate(3, TimelineComponent_Conditional_3_Template, 2, 1);
1934
1933
  i0.ɵɵconditionalCreate(4, TimelineComponent_Conditional_4_Template, 2, 2);
@@ -1949,11 +1948,11 @@ export class TimelineComponent extends BaseAngularComponent {
1949
1948
  i0.ɵɵconditional(ctx.virtualScroll.enabled && ctx.scrollState.hasMore ? 5 : -1);
1950
1949
  i0.ɵɵadvance();
1951
1950
  i0.ɵɵconditional(ctx.scrollState.isLoading && ctx.virtualScroll.showLoadingIndicator ? 6 : -1);
1952
- } }, dependencies: [i1.NgClass, i1.NgTemplateOutlet, i2.MJEmptyStateComponent], 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: var(--mj-border-default);\n --mj-timeline-marker-bg: var(--mj-bg-surface);\n --mj-timeline-marker-border: var(--mj-brand-primary);\n --mj-timeline-marker-fill: var(--mj-brand-primary);\n --mj-timeline-card-bg: var(--mj-bg-surface);\n --mj-timeline-card-border: var(--mj-border-default);\n --mj-timeline-card-shadow: var(--mj-shadow-sm);\n --mj-timeline-card-shadow-hover: var(--mj-shadow-md);\n --mj-timeline-card-radius: var(--mj-radius-md);\n --mj-timeline-text-primary: var(--mj-text-primary);\n --mj-timeline-text-secondary: var(--mj-text-muted);\n --mj-timeline-text-muted: var(--mj-text-disabled);\n --mj-timeline-accent: var(--mj-brand-primary);\n --mj-timeline-accent-light: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n --mj-timeline-segment-bg: var(--mj-brand-primary);\n --mj-timeline-segment-text: var(--mj-text-inverse);\n --mj-timeline-focus-ring: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\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 handled automatically by --mj-* semantic tokens */\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: var(--mj-radius-full);\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: var(--mj-text-sm);\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: var(--mj-text-xs);\n}\n\n@keyframes mj-timeline-spin {\n to { transform: rotate(360deg); }\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: var(--mj-radius-sm);\n font-weight: 600;\n font-size: var(--mj-text-sm);\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: var(--mj-text-xs);\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: var(--mj-radius-full);\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: var(--mj-text-sm);\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 color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\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 color-mix(in srgb, var(--mj-brand-primary) 50%, transparent);\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: var(--mj-radius-full);\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: var(--mj-text-base);\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: var(--mj-text-sm);\n color: var(--mj-timeline-text-secondary);\n margin-top: 4px;\n}\n\n.mj-timeline__card-date {\n display: block;\n font-size: var(--mj-text-xs);\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: var(--mj-text-sm);\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: var(--mj-radius-sm);\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: var(--mj-text-sm);\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: var(--mj-text-xs);\n}\n\n.mj-timeline__card-field-icon {\n color: var(--mj-timeline-text-muted);\n font-size: var(--mj-text-xs);\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: var(--mj-text-xs);\n font-weight: 500;\n border: 1px solid;\n border-radius: var(--mj-radius-sm);\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: var(--mj-text-xs);\n}\n\n.mj-timeline__action--primary {\n background: var(--mj-timeline-accent);\n border-color: var(--mj-timeline-accent);\n color: var(--mj-text-inverse);\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: var(--mj-status-error);\n border-color: var(--mj-status-error);\n color: var(--mj-text-inverse);\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: var(--mj-text-xs);\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: var(--mj-text-sm);\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 });
1951
+ } }, dependencies: [i1.NgClass, i1.NgTemplateOutlet, i2.MJEmptyStateComponent], 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: var(--mj-border-default);\n --mj-timeline-marker-bg: var(--mj-bg-surface);\n --mj-timeline-marker-border: var(--mj-brand-primary);\n --mj-timeline-marker-fill: var(--mj-brand-primary);\n --mj-timeline-card-bg: var(--mj-bg-surface);\n --mj-timeline-card-border: var(--mj-border-default);\n --mj-timeline-card-shadow: var(--mj-shadow-sm);\n --mj-timeline-card-shadow-hover: var(--mj-shadow-md);\n --mj-timeline-card-radius: var(--mj-radius-md);\n --mj-timeline-text-primary: var(--mj-text-primary);\n --mj-timeline-text-secondary: var(--mj-text-muted);\n --mj-timeline-text-muted: var(--mj-text-disabled);\n --mj-timeline-accent: var(--mj-brand-primary);\n --mj-timeline-accent-light: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n --mj-timeline-segment-bg: var(--mj-brand-primary);\n --mj-timeline-segment-text: var(--mj-text-inverse);\n --mj-timeline-focus-ring: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\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 handled automatically by --mj-* semantic tokens */\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: var(--mj-radius-full);\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: var(--mj-text-sm);\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: var(--mj-text-xs);\n}\n\n@keyframes mj-timeline-spin {\n to { transform: rotate(360deg); }\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: var(--mj-radius-sm);\n font-weight: 600;\n font-size: var(--mj-text-sm);\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: var(--mj-text-xs);\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: var(--mj-radius-full);\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: var(--mj-text-sm);\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 color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\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 color-mix(in srgb, var(--mj-brand-primary) 50%, transparent);\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: var(--mj-radius-full);\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: var(--mj-text-base);\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: var(--mj-text-sm);\n color: var(--mj-timeline-text-secondary);\n margin-top: 4px;\n}\n\n.mj-timeline__card-date {\n display: block;\n font-size: var(--mj-text-xs);\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: var(--mj-text-sm);\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: var(--mj-radius-sm);\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 object-position: center;\n}\n\n.mj-timeline__card-image--left.mj-timeline__card-image--small {\n width: 40px;\n height: 40px;\n border-radius: 50%;\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: var(--mj-text-sm);\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: var(--mj-text-xs);\n}\n\n.mj-timeline__card-field-icon {\n color: var(--mj-timeline-text-muted);\n font-size: var(--mj-text-xs);\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: var(--mj-text-xs);\n font-weight: 500;\n border: 1px solid;\n border-radius: var(--mj-radius-sm);\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: var(--mj-text-xs);\n}\n\n.mj-timeline__action--primary {\n background: var(--mj-timeline-accent);\n border-color: var(--mj-timeline-accent);\n color: var(--mj-text-inverse);\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: var(--mj-status-error);\n border-color: var(--mj-status-error);\n color: var(--mj-text-inverse);\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: var(--mj-text-xs);\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: var(--mj-text-sm);\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 });
1953
1952
  }
1954
1953
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimelineComponent, [{
1955
1954
  type: Component,
1956
- args: [{ standalone: false, selector: 'mj-timeline', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!--\nMJ Timeline Component Template\n\nStructure:\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 @if (isLoading && !isInitialized) {\n @if (loadingTemplate) {\n <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n } @else {\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 }\n }\n\n <!-- Empty State -->\n @if (isInitialized && allEvents.length === 0 && !isLoading) {\n @if (emptyTemplate) {\n <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n } @else {\n <mj-empty-state\n [Icon]=\"emptyIcon\"\n [Title]=\"emptyMessage\" />\n }\n }\n\n <!-- Timeline Content -->\n @if (isInitialized && allEvents.length > 0) {\n <!-- Segmented View -->\n @if (segmentGrouping !== 'none') {\n @for (segment of segments; track trackBySegmentLabel(segmentIndex, segment); let segmentIndex = $index) {\n <div\n class=\"mj-timeline__segment\"\n [class.mj-timeline__segment--collapsed]=\"!segment.isExpanded\"\n [attr.data-segment-label]=\"segment.label\">\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 @if (segmentHeaderTemplate) {\n <ng-container *ngTemplateOutlet=\"segmentHeaderTemplate; context: { segment: segment }\"></ng-container>\n } @else {\n @if (segmentsCollapsible) {\n <span class=\"mj-timeline__segment-toggle\">\n <i [class]=\"segment.isExpanded ? 'fa-solid fa-chevron-down' : 'fa-solid fa-chevron-right'\"></i>\n </span>\n }\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 }\n </div>\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 <div class=\"mj-timeline__axis\">\n <!-- Events in Segment -->\n @for (event of segment.events; track trackByEventId(eventIndex, event); 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 }\n </div>\n </div>\n </div>\n }\n }\n <!-- Flat View (no segments) -->\n @if (segmentGrouping === 'none') {\n <div class=\"mj-timeline__axis\">\n @for (event of allEvents; track trackByEventId(eventIndex, event); 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 }\n </div>\n }\n }\n\n <!-- Virtual Scroll Sentinel -->\n @if (virtualScroll.enabled && scrollState.hasMore) {\n <div\n class=\"mj-timeline-scroll-sentinel\"\n >\n </div>\n }\n\n <!-- Loading More Indicator -->\n @if (scrollState.isLoading && virtualScroll.showLoadingIndicator) {\n <div\n class=\"mj-timeline__loading-more\"\n >\n <div class=\"mj-timeline__loading-spinner mj-timeline__loading-spinner--small\"></div>\n <span>{{ virtualScroll.loadingMessage }}</span>\n </div>\n }\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 @if (layout === 'alternating') {\n <div class=\"mj-timeline__date-label\">\n {{ formatDate(event.date) }}\n </div>\n }\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 @if (cardTemplate) {\n <ng-container *ngTemplateOutlet=\"cardTemplate; context: {\n event: event,\n group: groups[event.groupIndex]\n }\"></ng-container>\n } @else {\n <!-- Card Header -->\n <div class=\"mj-timeline__card-header\">\n <!-- Image (left position) -->\n @if (event.imageUrl && getEffectiveCardConfig(event).imagePosition === 'left') {\n <div\n class=\"mj-timeline__card-image mj-timeline__card-image--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 @if (headerTemplate) {\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { event: event }\"></ng-container>\n } @else {\n <!-- Icon -->\n @if (getEffectiveCardConfig(event).showIcon) {\n <span\n class=\"mj-timeline__card-icon\"\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 @if (event.subtitle && getEffectiveCardConfig(event).showSubtitle) {\n <span\n class=\"mj-timeline__card-subtitle\"\n >\n {{ event.subtitle }}\n </span>\n }\n @if (getEffectiveCardConfig(event).showDate && layout !== 'alternating') {\n <span\n class=\"mj-timeline__card-date\"\n >\n {{ formatDate(event.date, getEffectiveCardConfig(event).dateFormat) }}\n </span>\n }\n </div>\n <!-- Expand/Collapse Toggle -->\n @if (getEffectiveCardConfig(event).collapsible) {\n <button\n class=\"mj-timeline__card-toggle\"\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 }\n }\n </div>\n </div>\n <!-- Image (top position) -->\n @if (event.imageUrl && getEffectiveCardConfig(event).imagePosition === 'top') {\n <div\n class=\"mj-timeline__card-image mj-timeline__card-image--top\"\n >\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 <!-- Custom Body Template -->\n @if (bodyTemplate) {\n <ng-container *ngTemplateOutlet=\"bodyTemplate; context: { event: event }\"></ng-container>\n } @else {\n <!-- Summary Fields (always visible) -->\n @if (getEffectiveCardConfig(event).summaryFields?.length) {\n <div\n class=\"mj-timeline__card-fields mj-timeline__card-fields--summary\"\n >\n @for (field of getEffectiveCardConfig(event).summaryFields; track field) {\n <div class=\"mj-timeline__card-field\" [ngClass]=\"field.cssClass\">\n @if (field.icon) {\n <i [ngClass]=\"field.icon\" class=\"mj-timeline__card-field-icon\"></i>\n }\n @if (!field.hideLabel && field.label) {\n <span class=\"mj-timeline__card-field-label\">{{ field.label }}:</span>\n }\n <span class=\"mj-timeline__card-field-value\">{{ getFieldValue(event, field) }}</span>\n </div>\n }\n </div>\n }\n <!-- Description (expanded view) -->\n @if (event.description && event.isExpanded) {\n <div\n class=\"mj-timeline__card-description\"\n [class.mj-timeline__card-description--clamped]=\"(getEffectiveCardConfig(event).descriptionMaxLines ?? 0) > 0\"\n [style.-webkit-line-clamp]=\"getEffectiveCardConfig(event).descriptionMaxLines || null\">\n @if (getEffectiveCardConfig(event).allowHtmlDescription) {\n <div [innerHTML]=\"event.description\"></div>\n } @else {\n {{ event.description }}\n }\n </div>\n }\n <!-- Expanded Fields -->\n @if (event.isExpanded && getEffectiveCardConfig(event).expandedFields?.length) {\n <div\n class=\"mj-timeline__card-fields mj-timeline__card-fields--expanded\"\n >\n @for (field of getEffectiveCardConfig(event).expandedFields; track field) {\n <div class=\"mj-timeline__card-field\" [ngClass]=\"field.cssClass\">\n @if (field.icon) {\n <i [ngClass]=\"field.icon\" class=\"mj-timeline__card-field-icon\"></i>\n }\n @if (!field.hideLabel) {\n <span class=\"mj-timeline__card-field-label\">{{ field.label || field.fieldName }}:</span>\n }\n <span class=\"mj-timeline__card-field-value\">{{ getFieldValue(event, field) }}</span>\n </div>\n }\n </div>\n }\n }\n </div>\n <!-- Card Actions -->\n @if (getActions(event).length > 0) {\n <div\n class=\"mj-timeline__card-actions\"\n [class.mj-timeline__card-actions--hover-only]=\"getEffectiveCardConfig(event).actionsOnHover\"\n >\n <!-- Custom Actions Template -->\n @if (actionsTemplate) {\n <ng-container *ngTemplateOutlet=\"actionsTemplate; context: {\n event: event,\n actions: getActions(event)\n }\"></ng-container>\n } @else {\n @for (action of getActions(event); track action) {\n <button\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 @if (action.icon) {\n <i [ngClass]=\"action.icon\"></i>\n }\n <span>{{ action.label }}</span>\n </button>\n }\n }\n </div>\n }\n }\n\n <!-- Default Card 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: var(--mj-border-default);\n --mj-timeline-marker-bg: var(--mj-bg-surface);\n --mj-timeline-marker-border: var(--mj-brand-primary);\n --mj-timeline-marker-fill: var(--mj-brand-primary);\n --mj-timeline-card-bg: var(--mj-bg-surface);\n --mj-timeline-card-border: var(--mj-border-default);\n --mj-timeline-card-shadow: var(--mj-shadow-sm);\n --mj-timeline-card-shadow-hover: var(--mj-shadow-md);\n --mj-timeline-card-radius: var(--mj-radius-md);\n --mj-timeline-text-primary: var(--mj-text-primary);\n --mj-timeline-text-secondary: var(--mj-text-muted);\n --mj-timeline-text-muted: var(--mj-text-disabled);\n --mj-timeline-accent: var(--mj-brand-primary);\n --mj-timeline-accent-light: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n --mj-timeline-segment-bg: var(--mj-brand-primary);\n --mj-timeline-segment-text: var(--mj-text-inverse);\n --mj-timeline-focus-ring: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\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 handled automatically by --mj-* semantic tokens */\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: var(--mj-radius-full);\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: var(--mj-text-sm);\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: var(--mj-text-xs);\n}\n\n@keyframes mj-timeline-spin {\n to { transform: rotate(360deg); }\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: var(--mj-radius-sm);\n font-weight: 600;\n font-size: var(--mj-text-sm);\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: var(--mj-text-xs);\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: var(--mj-radius-full);\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: var(--mj-text-sm);\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 color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\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 color-mix(in srgb, var(--mj-brand-primary) 50%, transparent);\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: var(--mj-radius-full);\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: var(--mj-text-base);\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: var(--mj-text-sm);\n color: var(--mj-timeline-text-secondary);\n margin-top: 4px;\n}\n\n.mj-timeline__card-date {\n display: block;\n font-size: var(--mj-text-xs);\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: var(--mj-text-sm);\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: var(--mj-radius-sm);\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: var(--mj-text-sm);\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: var(--mj-text-xs);\n}\n\n.mj-timeline__card-field-icon {\n color: var(--mj-timeline-text-muted);\n font-size: var(--mj-text-xs);\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: var(--mj-text-xs);\n font-weight: 500;\n border: 1px solid;\n border-radius: var(--mj-radius-sm);\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: var(--mj-text-xs);\n}\n\n.mj-timeline__action--primary {\n background: var(--mj-timeline-accent);\n border-color: var(--mj-timeline-accent);\n color: var(--mj-text-inverse);\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: var(--mj-status-error);\n border-color: var(--mj-status-error);\n color: var(--mj-text-inverse);\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: var(--mj-text-xs);\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: var(--mj-text-sm);\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"] }]
1955
+ args: [{ standalone: false, selector: 'mj-timeline', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!--\nMJ Timeline Component Template\n\nStructure:\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 @if (isLoading && !isInitialized) {\n @if (loadingTemplate) {\n <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n } @else {\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 }\n }\n\n <!-- Empty State -->\n @if (isInitialized && allEvents.length === 0 && !isLoading) {\n @if (emptyTemplate) {\n <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n } @else {\n <mj-empty-state\n [Icon]=\"emptyIcon\"\n [Title]=\"emptyMessage\" />\n }\n }\n\n <!-- Timeline Content -->\n @if (isInitialized && allEvents.length > 0) {\n <!-- Segmented View -->\n @if (segmentGrouping !== 'none') {\n @for (segment of segments; track trackBySegmentLabel(segmentIndex, segment); let segmentIndex = $index) {\n <div\n class=\"mj-timeline__segment\"\n [class.mj-timeline__segment--collapsed]=\"!segment.isExpanded\"\n [attr.data-segment-label]=\"segment.label\">\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 @if (segmentHeaderTemplate) {\n <ng-container *ngTemplateOutlet=\"segmentHeaderTemplate; context: { segment: segment }\"></ng-container>\n } @else {\n @if (segmentsCollapsible) {\n <span class=\"mj-timeline__segment-toggle\">\n <i [class]=\"segment.isExpanded ? 'fa-solid fa-chevron-down' : 'fa-solid fa-chevron-right'\"></i>\n </span>\n }\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 }\n </div>\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 <div class=\"mj-timeline__axis\">\n <!-- Events in Segment -->\n @for (event of segment.events; track trackByEventId(eventIndex, event); 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 }\n </div>\n </div>\n </div>\n }\n }\n <!-- Flat View (no segments) -->\n @if (segmentGrouping === 'none') {\n <div class=\"mj-timeline__axis\">\n @for (event of allEvents; track trackByEventId(eventIndex, event); 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 }\n </div>\n }\n }\n\n <!-- Virtual Scroll Sentinel -->\n @if (virtualScroll.enabled && scrollState.hasMore) {\n <div\n class=\"mj-timeline-scroll-sentinel\"\n >\n </div>\n }\n\n <!-- Loading More Indicator -->\n @if (scrollState.isLoading && virtualScroll.showLoadingIndicator) {\n <div\n class=\"mj-timeline__loading-more\"\n >\n <div class=\"mj-timeline__loading-spinner mj-timeline__loading-spinner--small\"></div>\n <span>{{ virtualScroll.loadingMessage }}</span>\n </div>\n }\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 @if (layout === 'alternating') {\n <div class=\"mj-timeline__date-label\">\n {{ formatDate(event.date) }}\n </div>\n }\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 @if (cardTemplate) {\n <ng-container *ngTemplateOutlet=\"cardTemplate; context: {\n event: event,\n group: groups[event.groupIndex]\n }\"></ng-container>\n } @else {\n <!-- Card Header -->\n <div class=\"mj-timeline__card-header\">\n <!-- Image (left position) -->\n @if (event.imageUrl && getEffectiveCardConfig(event).imagePosition === 'left') {\n <div\n class=\"mj-timeline__card-image mj-timeline__card-image--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 @if (headerTemplate) {\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { event: event }\"></ng-container>\n } @else {\n <!-- Icon -->\n @if (getEffectiveCardConfig(event).showIcon) {\n <span\n class=\"mj-timeline__card-icon\"\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 @if (event.subtitle && getEffectiveCardConfig(event).showSubtitle) {\n <span\n class=\"mj-timeline__card-subtitle\"\n >\n {{ event.subtitle }}\n </span>\n }\n @if (getEffectiveCardConfig(event).showDate && layout !== 'alternating') {\n <span\n class=\"mj-timeline__card-date\"\n >\n {{ formatDate(event.date, getEffectiveCardConfig(event).dateFormat) }}\n </span>\n }\n </div>\n <!-- Expand/Collapse Toggle -->\n @if (getEffectiveCardConfig(event).collapsible) {\n <button\n class=\"mj-timeline__card-toggle\"\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 }\n }\n </div>\n </div>\n <!-- Image (top position) -->\n @if (event.imageUrl && getEffectiveCardConfig(event).imagePosition === 'top') {\n <div\n class=\"mj-timeline__card-image mj-timeline__card-image--top\"\n >\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 <!-- Custom Body Template -->\n @if (bodyTemplate) {\n <ng-container *ngTemplateOutlet=\"bodyTemplate; context: { event: event }\"></ng-container>\n } @else {\n <!-- Summary Fields (always visible) -->\n @if (getEffectiveCardConfig(event).summaryFields?.length) {\n <div\n class=\"mj-timeline__card-fields mj-timeline__card-fields--summary\"\n >\n @for (field of getEffectiveCardConfig(event).summaryFields; track field) {\n <div class=\"mj-timeline__card-field\" [ngClass]=\"field.cssClass\">\n @if (field.icon) {\n <i [ngClass]=\"field.icon\" class=\"mj-timeline__card-field-icon\"></i>\n }\n @if (!field.hideLabel && field.label) {\n <span class=\"mj-timeline__card-field-label\">{{ field.label }}:</span>\n }\n <span class=\"mj-timeline__card-field-value\">{{ getFieldValue(event, field) }}</span>\n </div>\n }\n </div>\n }\n <!-- Description (expanded view) -->\n @if (event.description && event.isExpanded) {\n <div\n class=\"mj-timeline__card-description\"\n [class.mj-timeline__card-description--clamped]=\"(getEffectiveCardConfig(event).descriptionMaxLines ?? 0) > 0\"\n [style.-webkit-line-clamp]=\"getEffectiveCardConfig(event).descriptionMaxLines || null\">\n @if (getEffectiveCardConfig(event).allowHtmlDescription) {\n <div [innerHTML]=\"event.description\"></div>\n } @else {\n {{ event.description }}\n }\n </div>\n }\n <!-- Expanded Fields -->\n @if (event.isExpanded && getEffectiveCardConfig(event).expandedFields?.length) {\n <div\n class=\"mj-timeline__card-fields mj-timeline__card-fields--expanded\"\n >\n @for (field of getEffectiveCardConfig(event).expandedFields; track field) {\n <div class=\"mj-timeline__card-field\" [ngClass]=\"field.cssClass\">\n @if (field.icon) {\n <i [ngClass]=\"field.icon\" class=\"mj-timeline__card-field-icon\"></i>\n }\n @if (!field.hideLabel) {\n <span class=\"mj-timeline__card-field-label\">{{ field.label || field.fieldName }}:</span>\n }\n <span class=\"mj-timeline__card-field-value\">{{ getFieldValue(event, field) }}</span>\n </div>\n }\n </div>\n }\n }\n </div>\n <!-- Card Actions -->\n @if (getActions(event).length > 0) {\n <div\n class=\"mj-timeline__card-actions\"\n [class.mj-timeline__card-actions--hover-only]=\"getEffectiveCardConfig(event).actionsOnHover\"\n >\n <!-- Custom Actions Template -->\n @if (actionsTemplate) {\n <ng-container *ngTemplateOutlet=\"actionsTemplate; context: {\n event: event,\n actions: getActions(event)\n }\"></ng-container>\n } @else {\n @for (action of getActions(event); track action) {\n <button\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 @if (action.icon) {\n <i [ngClass]=\"action.icon\"></i>\n }\n <span>{{ action.label }}</span>\n </button>\n }\n }\n </div>\n }\n }\n\n <!-- Default Card 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: var(--mj-border-default);\n --mj-timeline-marker-bg: var(--mj-bg-surface);\n --mj-timeline-marker-border: var(--mj-brand-primary);\n --mj-timeline-marker-fill: var(--mj-brand-primary);\n --mj-timeline-card-bg: var(--mj-bg-surface);\n --mj-timeline-card-border: var(--mj-border-default);\n --mj-timeline-card-shadow: var(--mj-shadow-sm);\n --mj-timeline-card-shadow-hover: var(--mj-shadow-md);\n --mj-timeline-card-radius: var(--mj-radius-md);\n --mj-timeline-text-primary: var(--mj-text-primary);\n --mj-timeline-text-secondary: var(--mj-text-muted);\n --mj-timeline-text-muted: var(--mj-text-disabled);\n --mj-timeline-accent: var(--mj-brand-primary);\n --mj-timeline-accent-light: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n --mj-timeline-segment-bg: var(--mj-brand-primary);\n --mj-timeline-segment-text: var(--mj-text-inverse);\n --mj-timeline-focus-ring: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\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 handled automatically by --mj-* semantic tokens */\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: var(--mj-radius-full);\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: var(--mj-text-sm);\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: var(--mj-text-xs);\n}\n\n@keyframes mj-timeline-spin {\n to { transform: rotate(360deg); }\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: var(--mj-radius-sm);\n font-weight: 600;\n font-size: var(--mj-text-sm);\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: var(--mj-text-xs);\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: var(--mj-radius-full);\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: var(--mj-text-sm);\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 color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\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 color-mix(in srgb, var(--mj-brand-primary) 50%, transparent);\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: var(--mj-radius-full);\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: var(--mj-text-base);\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: var(--mj-text-sm);\n color: var(--mj-timeline-text-secondary);\n margin-top: 4px;\n}\n\n.mj-timeline__card-date {\n display: block;\n font-size: var(--mj-text-xs);\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: var(--mj-text-sm);\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: var(--mj-radius-sm);\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 object-position: center;\n}\n\n.mj-timeline__card-image--left.mj-timeline__card-image--small {\n width: 40px;\n height: 40px;\n border-radius: 50%;\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: var(--mj-text-sm);\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: var(--mj-text-xs);\n}\n\n.mj-timeline__card-field-icon {\n color: var(--mj-timeline-text-muted);\n font-size: var(--mj-text-xs);\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: var(--mj-text-xs);\n font-weight: 500;\n border: 1px solid;\n border-radius: var(--mj-radius-sm);\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: var(--mj-text-xs);\n}\n\n.mj-timeline__action--primary {\n background: var(--mj-timeline-accent);\n border-color: var(--mj-timeline-accent);\n color: var(--mj-text-inverse);\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: var(--mj-status-error);\n border-color: var(--mj-status-error);\n color: var(--mj-text-inverse);\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: var(--mj-text-xs);\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: var(--mj-text-sm);\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"] }]
1957
1956
  }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], { groups: [{
1958
1957
  type: Input
1959
1958
  }], allowLoad: [{