@memberjunction/ng-timeline 5.43.0 → 5.44.0

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 (15) hide show
  1. package/dist/lib/component/timeline.component.js +84 -90
  2. package/dist/lib/component/timeline.component.js.map +1 -1
  3. package/dist/lib/module.d.ts +2 -1
  4. package/dist/lib/module.d.ts.map +1 -1
  5. package/dist/lib/module.js +7 -3
  6. package/dist/lib/module.js.map +1 -1
  7. package/package.json +4 -2
  8. package/dist/__tests__/index.test.d.ts +0 -2
  9. package/dist/__tests__/index.test.d.ts.map +0 -1
  10. package/dist/__tests__/index.test.js +0 -7
  11. package/dist/__tests__/index.test.js.map +0 -1
  12. package/dist/__tests__/types.test.d.ts +0 -2
  13. package/dist/__tests__/types.test.d.ts.map +0 -1
  14. package/dist/__tests__/types.test.js +0 -121
  15. package/dist/__tests__/types.test.js.map +0 -1
package/dist/lib/component/timeline.component.js CHANGED
@@ -18,6 +18,7 @@ import { DEFAULT_CARD_CONFIG, DEFAULT_VIRTUAL_SCROLL_CONFIG, DEFAULT_VIRTUAL_SCR
18
18
  import { getFieldValue } from '../timeline-group';
19
19
  import * as i0 from "@angular/core";
20
20
  import * as i1 from "@angular/common";
21
+ import * as i2 from "@memberjunction/ng-ui-components";
21
22
  const _c0 = ["cardTemplate"];
22
23
  const _c1 = ["headerTemplate"];
23
24
  const _c2 = ["bodyTemplate"];
@@ -67,20 +68,13 @@ function TimelineComponent_Conditional_3_Conditional_0_Template(rf, ctx) { if (r
67
68
  i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.emptyTemplate);
68
69
  } }
69
70
  function TimelineComponent_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
70
- i0.ɵɵelementStart(0, "div", 9);
71
- i0.ɵɵelement(1, "i", 10);
72
- i0.ɵɵelementStart(2, "span", 11);
73
- i0.ɵɵtext(3);
74
- i0.ɵɵelementEnd()();
71
+ i0.ɵɵelement(0, "mj-empty-state", 9);
75
72
  } if (rf & 2) {
76
73
  const ctx_r1 = i0.ɵɵnextContext(2);
77
- i0.ɵɵadvance();
78
- i0.ɵɵclassMap(ctx_r1.emptyIcon);
79
- i0.ɵɵadvance(2);
80
- i0.ɵɵtextInterpolate(ctx_r1.emptyMessage);
74
+ i0.ɵɵproperty("Icon", ctx_r1.emptyIcon)("Title", ctx_r1.emptyMessage);
81
75
  } }
82
76
  function TimelineComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
83
- i0.ɵɵconditionalCreate(0, TimelineComponent_Conditional_3_Conditional_0_Template, 1, 1, "ng-container")(1, TimelineComponent_Conditional_3_Conditional_1_Template, 4, 3, "div", 9);
77
+ 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);
84
78
  } if (rf & 2) {
85
79
  const ctx_r1 = i0.ɵɵnextContext();
86
80
  i0.ɵɵconditional(ctx_r1.emptyTemplate ? 0 : 1);
@@ -89,14 +83,14 @@ function TimelineComponent_Conditional_4_Conditional_0_For_1_Conditional_2_ng_co
89
83
  i0.ɵɵelementContainer(0);
90
84
  } }
91
85
  function TimelineComponent_Conditional_4_Conditional_0_For_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
92
- i0.ɵɵtemplate(0, TimelineComponent_Conditional_4_Conditional_0_For_1_Conditional_2_ng_container_0_Template, 1, 0, "ng-container", 17);
86
+ i0.ɵɵtemplate(0, TimelineComponent_Conditional_4_Conditional_0_For_1_Conditional_2_ng_container_0_Template, 1, 0, "ng-container", 15);
93
87
  } if (rf & 2) {
94
88
  const segment_r4 = i0.ɵɵnextContext().$implicit;
95
89
  const ctx_r1 = i0.ɵɵnextContext(3);
96
90
  i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.segmentHeaderTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c8, segment_r4));
97
91
  } }
98
92
  function TimelineComponent_Conditional_4_Conditional_0_For_1_Conditional_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
99
- i0.ɵɵelementStart(0, "span", 18);
93
+ i0.ɵɵelementStart(0, "span", 16);
100
94
  i0.ɵɵelement(1, "i");
101
95
  i0.ɵɵelementEnd();
102
96
  } if (rf & 2) {
@@ -105,14 +99,14 @@ function TimelineComponent_Conditional_4_Conditional_0_For_1_Conditional_3_Condi
105
99
  i0.ɵɵclassMap(segment_r4.isExpanded ? "fa-solid fa-chevron-down" : "fa-solid fa-chevron-right");
106
100
  } }
107
101
  function TimelineComponent_Conditional_4_Conditional_0_For_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
108
- i0.ɵɵconditionalCreate(0, TimelineComponent_Conditional_4_Conditional_0_For_1_Conditional_3_Conditional_0_Template, 2, 2, "span", 18);
109
- i0.ɵɵelementStart(1, "span", 19);
102
+ i0.ɵɵconditionalCreate(0, TimelineComponent_Conditional_4_Conditional_0_For_1_Conditional_3_Conditional_0_Template, 2, 2, "span", 16);
103
+ i0.ɵɵelementStart(1, "span", 17);
110
104
  i0.ɵɵtext(2);
111
105
  i0.ɵɵelementEnd();
112
- i0.ɵɵelementStart(3, "span", 20);
106
+ i0.ɵɵelementStart(3, "span", 18);
113
107
  i0.ɵɵtext(4);
114
108
  i0.ɵɵelementEnd();
115
- i0.ɵɵelement(5, "span", 21);
109
+ i0.ɵɵelement(5, "span", 19);
116
110
  } if (rf & 2) {
117
111
  const segment_r4 = i0.ɵɵnextContext().$implicit;
118
112
  const ctx_r1 = i0.ɵɵnextContext(3);
@@ -126,42 +120,42 @@ function TimelineComponent_Conditional_4_Conditional_0_For_1_For_7_ng_container_
126
120
  i0.ɵɵelementContainer(0);
127
121
  } }
128
122
  function TimelineComponent_Conditional_4_Conditional_0_For_1_For_7_Template(rf, ctx) { if (rf & 1) {
129
- i0.ɵɵtemplate(0, TimelineComponent_Conditional_4_Conditional_0_For_1_For_7_ng_container_0_Template, 1, 0, "ng-container", 17);
123
+ i0.ɵɵtemplate(0, TimelineComponent_Conditional_4_Conditional_0_For_1_For_7_ng_container_0_Template, 1, 0, "ng-container", 15);
130
124
  } if (rf & 2) {
131
125
  const event_r5 = ctx.$implicit;
132
- const ɵ$index_61_r6 = ctx.$index;
126
+ const ɵ$index_56_r6 = ctx.$index;
133
127
  const ctx_r1 = i0.ɵɵnextContext(4);
134
128
  const eventCard_r7 = i0.ɵɵreference(8);
135
- i0.ɵɵproperty("ngTemplateOutlet", eventCard_r7)("ngTemplateOutletContext", i0.ɵɵpureFunction4(2, _c9, event_r5, ɵ$index_61_r6, ɵ$index_61_r6 % 2 !== 0, ctx_r1.getGlobalIndex(event_r5)));
129
+ 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)));
136
130
  } }
137
131
  function TimelineComponent_Conditional_4_Conditional_0_For_1_Template(rf, ctx) { if (rf & 1) {
138
132
  const _r3 = i0.ɵɵgetCurrentView();
139
- i0.ɵɵelementStart(0, "div", 14)(1, "div", 15);
133
+ i0.ɵɵelementStart(0, "div", 12)(1, "div", 13);
140
134
  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)); });
141
135
  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);
142
136
  i0.ɵɵelementEnd();
143
- i0.ɵɵelementStart(4, "div", 16)(5, "div", 12);
137
+ i0.ɵɵelementStart(4, "div", 14)(5, "div", 10);
144
138
  i0.ɵɵrepeaterCreate(6, TimelineComponent_Conditional_4_Conditional_0_For_1_For_7_Template, 1, 7, "ng-container", null, i0.ɵɵcomponentInstance().trackByEventId, true);
145
139
  i0.ɵɵelementEnd()()();
146
140
  } if (rf & 2) {
147
141
  const segment_r4 = ctx.$implicit;
148
- const ɵ$index_33_r8 = ctx.$index;
142
+ const ɵ$index_28_r8 = ctx.$index;
149
143
  const ctx_r1 = i0.ɵɵnextContext(3);
150
144
  i0.ɵɵclassProp("mj-timeline__segment--collapsed", !segment_r4.isExpanded);
151
145
  i0.ɵɵattribute("data-segment-label", segment_r4.label);
152
146
  i0.ɵɵadvance();
153
147
  i0.ɵɵclassProp("mj-timeline__segment-header--clickable", ctx_r1.segmentsCollapsible);
154
- i0.ɵɵattribute("aria-expanded", segment_r4.isExpanded)("aria-controls", "segment-content-" + ɵ$index_33_r8);
148
+ i0.ɵɵattribute("aria-expanded", segment_r4.isExpanded)("aria-controls", "segment-content-" + ɵ$index_28_r8);
155
149
  i0.ɵɵadvance();
156
150
  i0.ɵɵconditional(ctx_r1.segmentHeaderTemplate ? 2 : 3);
157
151
  i0.ɵɵadvance(2);
158
152
  i0.ɵɵclassProp("mj-timeline__segment-content--hidden", !segment_r4.isExpanded);
159
- i0.ɵɵproperty("id", "segment-content-" + ɵ$index_33_r8);
153
+ i0.ɵɵproperty("id", "segment-content-" + ɵ$index_28_r8);
160
154
  i0.ɵɵadvance(2);
161
155
  i0.ɵɵrepeater(segment_r4.events);
162
156
  } }
163
157
  function TimelineComponent_Conditional_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
164
- i0.ɵɵrepeaterCreate(0, TimelineComponent_Conditional_4_Conditional_0_For_1_Template, 8, 11, "div", 13, i0.ɵɵcomponentInstance().trackBySegmentLabel, true);
158
+ i0.ɵɵrepeaterCreate(0, TimelineComponent_Conditional_4_Conditional_0_For_1_Template, 8, 11, "div", 11, i0.ɵɵcomponentInstance().trackBySegmentLabel, true);
165
159
  } if (rf & 2) {
166
160
  const ctx_r1 = i0.ɵɵnextContext(2);
167
161
  i0.ɵɵrepeater(ctx_r1.segments);
@@ -170,16 +164,16 @@ function TimelineComponent_Conditional_4_Conditional_1_For_2_ng_container_0_Temp
170
164
  i0.ɵɵelementContainer(0);
171
165
  } }
172
166
  function TimelineComponent_Conditional_4_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
173
- i0.ɵɵtemplate(0, TimelineComponent_Conditional_4_Conditional_1_For_2_ng_container_0_Template, 1, 0, "ng-container", 17);
167
+ i0.ɵɵtemplate(0, TimelineComponent_Conditional_4_Conditional_1_For_2_ng_container_0_Template, 1, 0, "ng-container", 15);
174
168
  } if (rf & 2) {
175
169
  const event_r9 = ctx.$implicit;
176
- const ɵ$index_69_r10 = ctx.$index;
170
+ const ɵ$index_64_r10 = ctx.$index;
177
171
  i0.ɵɵnextContext(3);
178
172
  const eventCard_r7 = i0.ɵɵreference(8);
179
- i0.ɵɵproperty("ngTemplateOutlet", eventCard_r7)("ngTemplateOutletContext", i0.ɵɵpureFunction4(2, _c9, event_r9, ɵ$index_69_r10, ɵ$index_69_r10 % 2 !== 0, ɵ$index_69_r10));
173
+ i0.ɵɵproperty("ngTemplateOutlet", eventCard_r7)("ngTemplateOutletContext", i0.ɵɵpureFunction4(2, _c9, event_r9, ɵ$index_64_r10, ɵ$index_64_r10 % 2 !== 0, ɵ$index_64_r10));
180
174
  } }
181
175
  function TimelineComponent_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
182
- i0.ɵɵelementStart(0, "div", 12);
176
+ i0.ɵɵelementStart(0, "div", 10);
183
177
  i0.ɵɵrepeaterCreate(1, TimelineComponent_Conditional_4_Conditional_1_For_2_Template, 1, 7, "ng-container", null, i0.ɵɵcomponentInstance().trackByEventId, true);
184
178
  i0.ɵɵelementEnd();
185
179
  } if (rf & 2) {
@@ -189,7 +183,7 @@ function TimelineComponent_Conditional_4_Conditional_1_Template(rf, ctx) { if (r
189
183
  } }
190
184
  function TimelineComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
191
185
  i0.ɵɵconditionalCreate(0, TimelineComponent_Conditional_4_Conditional_0_Template, 2, 0);
192
- i0.ɵɵconditionalCreate(1, TimelineComponent_Conditional_4_Conditional_1_Template, 3, 0, "div", 12);
186
+ i0.ɵɵconditionalCreate(1, TimelineComponent_Conditional_4_Conditional_1_Template, 3, 0, "div", 10);
193
187
  } if (rf & 2) {
194
188
  const ctx_r1 = i0.ɵɵnextContext();
195
189
  i0.ɵɵconditional(ctx_r1.segmentGrouping !== "none" ? 0 : -1);
@@ -201,7 +195,7 @@ function TimelineComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
201
195
  } }
202
196
  function TimelineComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
203
197
  i0.ɵɵelementStart(0, "div", 4);
204
- i0.ɵɵelement(1, "div", 22);
198
+ i0.ɵɵelement(1, "div", 20);
205
199
  i0.ɵɵelementStart(2, "span");
206
200
  i0.ɵɵtext(3);
207
201
  i0.ɵɵelementEnd()();
@@ -211,7 +205,7 @@ function TimelineComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
211
205
  i0.ɵɵtextInterpolate(ctx_r1.virtualScroll.loadingMessage);
212
206
  } }
213
207
  function TimelineComponent_ng_template_7_Conditional_4_Template(rf, ctx) { if (rf & 1) {
214
- i0.ɵɵelementStart(0, "div", 27);
208
+ i0.ɵɵelementStart(0, "div", 25);
215
209
  i0.ɵɵtext(1);
216
210
  i0.ɵɵelementEnd();
217
211
  } if (rf & 2) {
@@ -224,15 +218,15 @@ function TimelineComponent_ng_template_7_Conditional_6_ng_container_0_Template(r
224
218
  i0.ɵɵelementContainer(0);
225
219
  } }
226
220
  function TimelineComponent_ng_template_7_Conditional_6_Template(rf, ctx) { if (rf & 1) {
227
- i0.ɵɵtemplate(0, TimelineComponent_ng_template_7_Conditional_6_ng_container_0_Template, 1, 0, "ng-container", 17);
221
+ i0.ɵɵtemplate(0, TimelineComponent_ng_template_7_Conditional_6_ng_container_0_Template, 1, 0, "ng-container", 15);
228
222
  } if (rf & 2) {
229
223
  const event_r12 = i0.ɵɵnextContext().event;
230
224
  const ctx_r1 = i0.ɵɵnextContext();
231
225
  i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.cardTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c10, event_r12, ctx_r1.groups[event_r12.groupIndex]));
232
226
  } }
233
227
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_1_Template(rf, ctx) { if (rf & 1) {
234
- i0.ɵɵelementStart(0, "div", 35);
235
- i0.ɵɵelement(1, "img", 36);
228
+ i0.ɵɵelementStart(0, "div", 33);
229
+ i0.ɵɵelement(1, "img", 34);
236
230
  i0.ɵɵelementEnd();
237
231
  } if (rf & 2) {
238
232
  const event_r12 = i0.ɵɵnextContext(2).event;
@@ -245,14 +239,14 @@ function TimelineComponent_ng_template_7_Conditional_7_Conditional_3_ng_containe
245
239
  i0.ɵɵelementContainer(0);
246
240
  } }
247
241
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_3_Template(rf, ctx) { if (rf & 1) {
248
- i0.ɵɵtemplate(0, TimelineComponent_ng_template_7_Conditional_7_Conditional_3_ng_container_0_Template, 1, 0, "ng-container", 17);
242
+ i0.ɵɵtemplate(0, TimelineComponent_ng_template_7_Conditional_7_Conditional_3_ng_container_0_Template, 1, 0, "ng-container", 15);
249
243
  } if (rf & 2) {
250
244
  const event_r12 = i0.ɵɵnextContext(2).event;
251
245
  const ctx_r1 = i0.ɵɵnextContext();
252
246
  i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.headerTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c11, event_r12));
253
247
  } }
254
248
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
255
- i0.ɵɵelementStart(0, "span", 43);
249
+ i0.ɵɵelementStart(0, "span", 41);
256
250
  i0.ɵɵelement(1, "i");
257
251
  i0.ɵɵelementEnd();
258
252
  } if (rf & 2) {
@@ -263,7 +257,7 @@ function TimelineComponent_ng_template_7_Conditional_7_Conditional_4_Conditional
263
257
  i0.ɵɵclassMap(ctx_r1.getIcon(event_r12));
264
258
  } }
265
259
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_4_Conditional_4_Template(rf, ctx) { if (rf & 1) {
266
- i0.ɵɵelementStart(0, "span", 40);
260
+ i0.ɵɵelementStart(0, "span", 38);
267
261
  i0.ɵɵtext(1);
268
262
  i0.ɵɵelementEnd();
269
263
  } if (rf & 2) {
@@ -272,7 +266,7 @@ function TimelineComponent_ng_template_7_Conditional_7_Conditional_4_Conditional
272
266
  i0.ɵɵtextInterpolate1(" ", event_r12.subtitle, " ");
273
267
  } }
274
268
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_4_Conditional_5_Template(rf, ctx) { if (rf & 1) {
275
- i0.ɵɵelementStart(0, "span", 41);
269
+ i0.ɵɵelementStart(0, "span", 39);
276
270
  i0.ɵɵtext(1);
277
271
  i0.ɵɵelementEnd();
278
272
  } if (rf & 2) {
@@ -283,7 +277,7 @@ function TimelineComponent_ng_template_7_Conditional_7_Conditional_4_Conditional
283
277
  } }
284
278
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_4_Conditional_6_Template(rf, ctx) { if (rf & 1) {
285
279
  const _r17 = i0.ɵɵgetCurrentView();
286
- i0.ɵɵelementStart(0, "button", 44);
280
+ i0.ɵɵelementStart(0, "button", 42);
287
281
  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)); });
288
282
  i0.ɵɵelement(1, "i");
289
283
  i0.ɵɵelementEnd();
@@ -294,14 +288,14 @@ function TimelineComponent_ng_template_7_Conditional_7_Conditional_4_Conditional
294
288
  i0.ɵɵclassMap(event_r12.isExpanded ? "fa-solid fa-chevron-up" : "fa-solid fa-chevron-down");
295
289
  } }
296
290
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_4_Template(rf, ctx) { if (rf & 1) {
297
- i0.ɵɵconditionalCreate(0, TimelineComponent_ng_template_7_Conditional_7_Conditional_4_Conditional_0_Template, 2, 4, "span", 37);
298
- i0.ɵɵelementStart(1, "div", 38)(2, "h4", 39);
291
+ i0.ɵɵconditionalCreate(0, TimelineComponent_ng_template_7_Conditional_7_Conditional_4_Conditional_0_Template, 2, 4, "span", 35);
292
+ i0.ɵɵelementStart(1, "div", 36)(2, "h4", 37);
299
293
  i0.ɵɵtext(3);
300
294
  i0.ɵɵelementEnd();
301
- i0.ɵɵconditionalCreate(4, TimelineComponent_ng_template_7_Conditional_7_Conditional_4_Conditional_4_Template, 2, 1, "span", 40);
302
- i0.ɵɵconditionalCreate(5, TimelineComponent_ng_template_7_Conditional_7_Conditional_4_Conditional_5_Template, 2, 1, "span", 41);
295
+ i0.ɵɵconditionalCreate(4, TimelineComponent_ng_template_7_Conditional_7_Conditional_4_Conditional_4_Template, 2, 1, "span", 38);
296
+ i0.ɵɵconditionalCreate(5, TimelineComponent_ng_template_7_Conditional_7_Conditional_4_Conditional_5_Template, 2, 1, "span", 39);
303
297
  i0.ɵɵelementEnd();
304
- i0.ɵɵconditionalCreate(6, TimelineComponent_ng_template_7_Conditional_7_Conditional_4_Conditional_6_Template, 2, 3, "button", 42);
298
+ i0.ɵɵconditionalCreate(6, TimelineComponent_ng_template_7_Conditional_7_Conditional_4_Conditional_6_Template, 2, 3, "button", 40);
305
299
  } if (rf & 2) {
306
300
  const event_r12 = i0.ɵɵnextContext(2).event;
307
301
  const ctx_r1 = i0.ɵɵnextContext();
@@ -316,8 +310,8 @@ function TimelineComponent_ng_template_7_Conditional_7_Conditional_4_Template(rf
316
310
  i0.ɵɵconditional(ctx_r1.getEffectiveCardConfig(event_r12).collapsible ? 6 : -1);
317
311
  } }
318
312
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_5_Template(rf, ctx) { if (rf & 1) {
319
- i0.ɵɵelementStart(0, "div", 32);
320
- i0.ɵɵelement(1, "img", 36);
313
+ i0.ɵɵelementStart(0, "div", 30);
314
+ i0.ɵɵelement(1, "img", 34);
321
315
  i0.ɵɵelementEnd();
322
316
  } if (rf & 2) {
323
317
  const event_r12 = i0.ɵɵnextContext(2).event;
@@ -328,20 +322,20 @@ function TimelineComponent_ng_template_7_Conditional_7_Conditional_7_ng_containe
328
322
  i0.ɵɵelementContainer(0);
329
323
  } }
330
324
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_7_Template(rf, ctx) { if (rf & 1) {
331
- i0.ɵɵtemplate(0, TimelineComponent_ng_template_7_Conditional_7_Conditional_7_ng_container_0_Template, 1, 0, "ng-container", 17);
325
+ i0.ɵɵtemplate(0, TimelineComponent_ng_template_7_Conditional_7_Conditional_7_ng_container_0_Template, 1, 0, "ng-container", 15);
332
326
  } if (rf & 2) {
333
327
  const event_r12 = i0.ɵɵnextContext(2).event;
334
328
  const ctx_r1 = i0.ɵɵnextContext();
335
329
  i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.bodyTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c11, event_r12));
336
330
  } }
337
331
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_0_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
338
- i0.ɵɵelement(0, "i", 49);
332
+ i0.ɵɵelement(0, "i", 47);
339
333
  } if (rf & 2) {
340
334
  const field_r19 = i0.ɵɵnextContext().$implicit;
341
335
  i0.ɵɵproperty("ngClass", field_r19.icon);
342
336
  } }
343
337
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_0_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
344
- i0.ɵɵelementStart(0, "span", 50);
338
+ i0.ɵɵelementStart(0, "span", 48);
345
339
  i0.ɵɵtext(1);
346
340
  i0.ɵɵelementEnd();
347
341
  } if (rf & 2) {
@@ -350,10 +344,10 @@ function TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional
350
344
  i0.ɵɵtextInterpolate1("", field_r19.label, ":");
351
345
  } }
352
346
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
353
- i0.ɵɵelementStart(0, "div", 48);
354
- i0.ɵɵconditionalCreate(1, TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_0_For_2_Conditional_1_Template, 1, 1, "i", 49);
355
- i0.ɵɵconditionalCreate(2, TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_0_For_2_Conditional_2_Template, 2, 1, "span", 50);
356
- i0.ɵɵelementStart(3, "span", 51);
347
+ i0.ɵɵelementStart(0, "div", 46);
348
+ i0.ɵɵconditionalCreate(1, TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_0_For_2_Conditional_1_Template, 1, 1, "i", 47);
349
+ i0.ɵɵconditionalCreate(2, TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_0_For_2_Conditional_2_Template, 2, 1, "span", 48);
350
+ i0.ɵɵelementStart(3, "span", 49);
357
351
  i0.ɵɵtext(4);
358
352
  i0.ɵɵelementEnd()();
359
353
  } if (rf & 2) {
@@ -369,8 +363,8 @@ function TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional
369
363
  i0.ɵɵtextInterpolate(ctx_r1.getFieldValue(event_r12, field_r19));
370
364
  } }
371
365
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_0_Template(rf, ctx) { if (rf & 1) {
372
- i0.ɵɵelementStart(0, "div", 45);
373
- i0.ɵɵrepeaterCreate(1, TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_0_For_2_Template, 5, 4, "div", 48, i0.ɵɵrepeaterTrackByIdentity);
366
+ i0.ɵɵelementStart(0, "div", 43);
367
+ i0.ɵɵrepeaterCreate(1, TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_0_For_2_Template, 5, 4, "div", 46, i0.ɵɵrepeaterTrackByIdentity);
374
368
  i0.ɵɵelementEnd();
375
369
  } if (rf & 2) {
376
370
  const event_r12 = i0.ɵɵnextContext(3).event;
@@ -379,7 +373,7 @@ function TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional
379
373
  i0.ɵɵrepeater(ctx_r1.getEffectiveCardConfig(event_r12).summaryFields);
380
374
  } }
381
375
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
382
- i0.ɵɵelement(0, "div", 53);
376
+ i0.ɵɵelement(0, "div", 51);
383
377
  } if (rf & 2) {
384
378
  const event_r12 = i0.ɵɵnextContext(4).event;
385
379
  i0.ɵɵproperty("innerHTML", event_r12.description, i0.ɵɵsanitizeHtml);
@@ -391,8 +385,8 @@ function TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional
391
385
  i0.ɵɵtextInterpolate1(" ", event_r12.description, " ");
392
386
  } }
393
387
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_1_Template(rf, ctx) { if (rf & 1) {
394
- i0.ɵɵelementStart(0, "div", 52);
395
- i0.ɵɵconditionalCreate(1, TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_1_Conditional_1_Template, 1, 1, "div", 53)(2, TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_1_Conditional_2_Template, 1, 1);
388
+ i0.ɵɵelementStart(0, "div", 50);
389
+ 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);
396
390
  i0.ɵɵelementEnd();
397
391
  } if (rf & 2) {
398
392
  const event_r12 = i0.ɵɵnextContext(3).event;
@@ -403,13 +397,13 @@ function TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional
403
397
  i0.ɵɵconditional(ctx_r1.getEffectiveCardConfig(event_r12).allowHtmlDescription ? 1 : 2);
404
398
  } }
405
399
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_2_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
406
- i0.ɵɵelement(0, "i", 49);
400
+ i0.ɵɵelement(0, "i", 47);
407
401
  } if (rf & 2) {
408
402
  const field_r20 = i0.ɵɵnextContext().$implicit;
409
403
  i0.ɵɵproperty("ngClass", field_r20.icon);
410
404
  } }
411
405
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_2_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
412
- i0.ɵɵelementStart(0, "span", 50);
406
+ i0.ɵɵelementStart(0, "span", 48);
413
407
  i0.ɵɵtext(1);
414
408
  i0.ɵɵelementEnd();
415
409
  } if (rf & 2) {
@@ -418,10 +412,10 @@ function TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional
418
412
  i0.ɵɵtextInterpolate1("", field_r20.label || field_r20.fieldName, ":");
419
413
  } }
420
414
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
421
- i0.ɵɵelementStart(0, "div", 48);
422
- i0.ɵɵconditionalCreate(1, TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_2_For_2_Conditional_1_Template, 1, 1, "i", 49);
423
- i0.ɵɵconditionalCreate(2, TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_2_For_2_Conditional_2_Template, 2, 1, "span", 50);
424
- i0.ɵɵelementStart(3, "span", 51);
415
+ i0.ɵɵelementStart(0, "div", 46);
416
+ i0.ɵɵconditionalCreate(1, TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_2_For_2_Conditional_1_Template, 1, 1, "i", 47);
417
+ i0.ɵɵconditionalCreate(2, TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_2_For_2_Conditional_2_Template, 2, 1, "span", 48);
418
+ i0.ɵɵelementStart(3, "span", 49);
425
419
  i0.ɵɵtext(4);
426
420
  i0.ɵɵelementEnd()();
427
421
  } if (rf & 2) {
@@ -437,8 +431,8 @@ function TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional
437
431
  i0.ɵɵtextInterpolate(ctx_r1.getFieldValue(event_r12, field_r20));
438
432
  } }
439
433
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_2_Template(rf, ctx) { if (rf & 1) {
440
- i0.ɵɵelementStart(0, "div", 47);
441
- i0.ɵɵrepeaterCreate(1, TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_2_For_2_Template, 5, 4, "div", 48, i0.ɵɵrepeaterTrackByIdentity);
434
+ i0.ɵɵelementStart(0, "div", 45);
435
+ i0.ɵɵrepeaterCreate(1, TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_2_For_2_Template, 5, 4, "div", 46, i0.ɵɵrepeaterTrackByIdentity);
442
436
  i0.ɵɵelementEnd();
443
437
  } if (rf & 2) {
444
438
  const event_r12 = i0.ɵɵnextContext(3).event;
@@ -447,9 +441,9 @@ function TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional
447
441
  i0.ɵɵrepeater(ctx_r1.getEffectiveCardConfig(event_r12).expandedFields);
448
442
  } }
449
443
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Template(rf, ctx) { if (rf & 1) {
450
- i0.ɵɵconditionalCreate(0, TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_0_Template, 3, 0, "div", 45);
451
- i0.ɵɵconditionalCreate(1, TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_1_Template, 3, 5, "div", 46);
452
- i0.ɵɵconditionalCreate(2, TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_2_Template, 3, 0, "div", 47);
444
+ i0.ɵɵconditionalCreate(0, TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_0_Template, 3, 0, "div", 43);
445
+ i0.ɵɵconditionalCreate(1, TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_1_Template, 3, 5, "div", 44);
446
+ i0.ɵɵconditionalCreate(2, TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_2_Template, 3, 0, "div", 45);
453
447
  } if (rf & 2) {
454
448
  let tmp_9_0;
455
449
  let tmp_11_0;
@@ -465,23 +459,23 @@ function TimelineComponent_ng_template_7_Conditional_7_Conditional_9_Conditional
465
459
  i0.ɵɵelementContainer(0);
466
460
  } }
467
461
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_9_Conditional_1_Template(rf, ctx) { if (rf & 1) {
468
- i0.ɵɵtemplate(0, TimelineComponent_ng_template_7_Conditional_7_Conditional_9_Conditional_1_ng_container_0_Template, 1, 0, "ng-container", 17);
462
+ i0.ɵɵtemplate(0, TimelineComponent_ng_template_7_Conditional_7_Conditional_9_Conditional_1_ng_container_0_Template, 1, 0, "ng-container", 15);
469
463
  } if (rf & 2) {
470
464
  const event_r12 = i0.ɵɵnextContext(3).event;
471
465
  const ctx_r1 = i0.ɵɵnextContext();
472
466
  i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.actionsTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c12, event_r12, ctx_r1.getActions(event_r12)));
473
467
  } }
474
468
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_9_Conditional_2_For_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
475
- i0.ɵɵelement(0, "i", 57);
469
+ i0.ɵɵelement(0, "i", 55);
476
470
  } if (rf & 2) {
477
471
  const action_r22 = i0.ɵɵnextContext().$implicit;
478
472
  i0.ɵɵproperty("ngClass", action_r22.icon);
479
473
  } }
480
474
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_9_Conditional_2_For_1_Template(rf, ctx) { if (rf & 1) {
481
475
  const _r21 = i0.ɵɵgetCurrentView();
482
- i0.ɵɵelementStart(0, "button", 56);
476
+ i0.ɵɵelementStart(0, "button", 54);
483
477
  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)); });
484
- i0.ɵɵconditionalCreate(1, TimelineComponent_ng_template_7_Conditional_7_Conditional_9_Conditional_2_For_1_Conditional_1_Template, 1, 1, "i", 57);
478
+ i0.ɵɵconditionalCreate(1, TimelineComponent_ng_template_7_Conditional_7_Conditional_9_Conditional_2_For_1_Conditional_1_Template, 1, 1, "i", 55);
485
479
  i0.ɵɵelementStart(2, "span");
486
480
  i0.ɵɵtext(3);
487
481
  i0.ɵɵelementEnd()();
@@ -495,14 +489,14 @@ function TimelineComponent_ng_template_7_Conditional_7_Conditional_9_Conditional
495
489
  i0.ɵɵtextInterpolate(action_r22.label);
496
490
  } }
497
491
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_9_Conditional_2_Template(rf, ctx) { if (rf & 1) {
498
- i0.ɵɵrepeaterCreate(0, TimelineComponent_ng_template_7_Conditional_7_Conditional_9_Conditional_2_For_1_Template, 4, 13, "button", 55, i0.ɵɵrepeaterTrackByIdentity);
492
+ i0.ɵɵrepeaterCreate(0, TimelineComponent_ng_template_7_Conditional_7_Conditional_9_Conditional_2_For_1_Template, 4, 13, "button", 53, i0.ɵɵrepeaterTrackByIdentity);
499
493
  } if (rf & 2) {
500
494
  const event_r12 = i0.ɵɵnextContext(3).event;
501
495
  const ctx_r1 = i0.ɵɵnextContext();
502
496
  i0.ɵɵrepeater(ctx_r1.getActions(event_r12));
503
497
  } }
504
498
  function TimelineComponent_ng_template_7_Conditional_7_Conditional_9_Template(rf, ctx) { if (rf & 1) {
505
- i0.ɵɵelementStart(0, "div", 54);
499
+ i0.ɵɵelementStart(0, "div", 52);
506
500
  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);
507
501
  i0.ɵɵelementEnd();
508
502
  } if (rf & 2) {
@@ -513,16 +507,16 @@ function TimelineComponent_ng_template_7_Conditional_7_Conditional_9_Template(rf
513
507
  i0.ɵɵconditional(ctx_r1.actionsTemplate ? 1 : 2);
514
508
  } }
515
509
  function TimelineComponent_ng_template_7_Conditional_7_Template(rf, ctx) { if (rf & 1) {
516
- i0.ɵɵelementStart(0, "div", 29);
517
- i0.ɵɵconditionalCreate(1, TimelineComponent_ng_template_7_Conditional_7_Conditional_1_Template, 2, 8, "div", 30);
518
- i0.ɵɵelementStart(2, "div", 31);
510
+ i0.ɵɵelementStart(0, "div", 27);
511
+ i0.ɵɵconditionalCreate(1, TimelineComponent_ng_template_7_Conditional_7_Conditional_1_Template, 2, 8, "div", 28);
512
+ i0.ɵɵelementStart(2, "div", 29);
519
513
  i0.ɵɵconditionalCreate(3, TimelineComponent_ng_template_7_Conditional_7_Conditional_3_Template, 1, 4, "ng-container")(4, TimelineComponent_ng_template_7_Conditional_7_Conditional_4_Template, 7, 5);
520
514
  i0.ɵɵelementEnd()();
521
- i0.ɵɵconditionalCreate(5, TimelineComponent_ng_template_7_Conditional_7_Conditional_5_Template, 2, 2, "div", 32);
522
- i0.ɵɵelementStart(6, "div", 33);
515
+ i0.ɵɵconditionalCreate(5, TimelineComponent_ng_template_7_Conditional_7_Conditional_5_Template, 2, 2, "div", 30);
516
+ i0.ɵɵelementStart(6, "div", 31);
523
517
  i0.ɵɵconditionalCreate(7, TimelineComponent_ng_template_7_Conditional_7_Conditional_7_Template, 1, 4, "ng-container")(8, TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Template, 3, 3);
524
518
  i0.ɵɵelementEnd();
525
- i0.ɵɵconditionalCreate(9, TimelineComponent_ng_template_7_Conditional_7_Conditional_9_Template, 3, 3, "div", 34);
519
+ i0.ɵɵconditionalCreate(9, TimelineComponent_ng_template_7_Conditional_7_Conditional_9_Template, 3, 3, "div", 32);
526
520
  } if (rf & 2) {
527
521
  const event_r12 = i0.ɵɵnextContext().event;
528
522
  const ctx_r1 = i0.ɵɵnextContext();
@@ -541,12 +535,12 @@ function TimelineComponent_ng_template_7_Conditional_7_Template(rf, ctx) { if (r
541
535
  } }
542
536
  function TimelineComponent_ng_template_7_Template(rf, ctx) { if (rf & 1) {
543
537
  const _r11 = i0.ɵɵgetCurrentView();
544
- i0.ɵɵelementStart(0, "div", 23)(1, "div", 24);
545
- i0.ɵɵelement(2, "i", 25);
538
+ i0.ɵɵelementStart(0, "div", 21)(1, "div", 22);
539
+ i0.ɵɵelement(2, "i", 23);
546
540
  i0.ɵɵelementEnd();
547
- i0.ɵɵelement(3, "div", 26);
548
- i0.ɵɵconditionalCreate(4, TimelineComponent_ng_template_7_Conditional_4_Template, 2, 1, "div", 27);
549
- i0.ɵɵelementStart(5, "div", 28);
541
+ i0.ɵɵelement(3, "div", 24);
542
+ i0.ɵɵconditionalCreate(4, TimelineComponent_ng_template_7_Conditional_4_Template, 2, 1, "div", 25);
543
+ i0.ɵɵelementStart(5, "div", 26);
550
544
  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)); });
551
545
  i0.ɵɵconditionalCreate(6, TimelineComponent_ng_template_7_Conditional_6_Template, 1, 5, "ng-container")(7, TimelineComponent_ng_template_7_Conditional_7_Template, 10, 7);
552
546
  i0.ɵɵelementEnd()();
@@ -1929,7 +1923,7 @@ export class TimelineComponent {
1929
1923
  } if (rf & 2) {
1930
1924
  let _t;
1931
1925
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.scrollContainer = _t.first);
1932
- } }, 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, 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"], [1, "mj-timeline__empty"], [1, "mj-timeline__empty-icon"], [1, "mj-timeline__empty-text"], [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) {
1926
+ } }, 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, 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) {
1933
1927
  const _r1 = i0.ɵɵgetCurrentView();
1934
1928
  i0.ɵɵelementStart(0, "div", 2, 0);
1935
1929
  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)); });
@@ -1953,11 +1947,11 @@ export class TimelineComponent {
1953
1947
  i0.ɵɵconditional(ctx.virtualScroll.enabled && ctx.scrollState.hasMore ? 5 : -1);
1954
1948
  i0.ɵɵadvance();
1955
1949
  i0.ɵɵconditional(ctx.scrollState.isLoading && ctx.virtualScroll.showLoadingIndicator ? 6 : -1);
1956
- } }, dependencies: [i1.NgClass, i1.NgTemplateOutlet], styles: ["/**\n * MJ Timeline Component Styles\n * Kendo-inspired design with vertical alternating and horizontal layouts\n */\n\n/* ============================================================================\n CSS VARIABLES (Theming)\n ============================================================================ */\n\nmj-timeline {\n /* Colors */\n --mj-timeline-bg: transparent;\n --mj-timeline-line-color: 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.mj-timeline__empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 64px 24px;\n gap: 8px;\n text-align: center;\n}\n\n.mj-timeline__empty-icon {\n font-size: 32px;\n color: var(--mj-timeline-text-muted);\n opacity: 0.4;\n}\n\n.mj-timeline__empty-text {\n color: var(--mj-timeline-text-secondary);\n font-size: var(--mj-text-sm);\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 });
1950
+ } }, 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 });
1957
1951
  }
1958
1952
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimelineComponent, [{
1959
1953
  type: Component,
1960
- 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 <div class=\"mj-timeline__empty\">\n <i [class]=\"emptyIcon\" class=\"mj-timeline__empty-icon\"></i>\n <span class=\"mj-timeline__empty-text\">{{ emptyMessage }}</span>\n </div>\n }\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.mj-timeline__empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 64px 24px;\n gap: 8px;\n text-align: center;\n}\n\n.mj-timeline__empty-icon {\n font-size: 32px;\n color: var(--mj-timeline-text-muted);\n opacity: 0.4;\n}\n\n.mj-timeline__empty-text {\n color: var(--mj-timeline-text-secondary);\n font-size: var(--mj-text-sm);\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"] }]
1954
+ 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"] }]
1961
1955
  }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], { groups: [{
1962
1956
  type: Input
1963
1957
  }], allowLoad: [{