@memberjunction/ng-timeline 3.4.0 → 4.1.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 (5) hide show
  1. package/README.md +79 -393
  2. package/dist/lib/component/timeline.component.d.ts.map +1 -1
  3. package/dist/lib/component/timeline.component.js +307 -364
  4. package/dist/lib/component/timeline.component.js.map +1 -1
  5. package/package.json +8 -8
package/dist/lib/component/timeline.component.js CHANGED
@@ -31,22 +31,19 @@ const _c9 = (a0, a1, a2, a3) => ({ event: a0, index: a1, isOdd: a2, globalIndex:
31
31
  const _c10 = (a0, a1) => ({ event: a0, group: a1 });
32
32
  const _c11 = a0 => ({ event: a0 });
33
33
  const _c12 = (a0, a1) => ({ event: a0, actions: a1 });
34
- function TimelineComponent_ng_container_2_ng_container_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
34
+ function TimelineComponent_Conditional_2_Conditional_0_ng_container_0_Template(rf, ctx) { if (rf & 1) {
35
35
  i0.ɵɵelementContainer(0);
36
36
  } }
37
- function TimelineComponent_ng_container_2_ng_container_1_Template(rf, ctx) { if (rf & 1) {
38
- i0.ɵɵelementContainerStart(0);
39
- i0.ɵɵtemplate(1, TimelineComponent_ng_container_2_ng_container_1_ng_container_1_Template, 1, 0, "ng-container", 15);
40
- i0.ɵɵelementContainerEnd();
37
+ function TimelineComponent_Conditional_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
38
+ i0.ɵɵtemplate(0, TimelineComponent_Conditional_2_Conditional_0_ng_container_0_Template, 1, 0, "ng-container", 6);
41
39
  } if (rf & 2) {
42
40
  const ctx_r1 = i0.ɵɵnextContext(2);
43
- i0.ɵɵadvance();
44
41
  i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.loadingTemplate);
45
42
  } }
46
- function TimelineComponent_ng_container_2_ng_template_2_Template(rf, ctx) { if (rf & 1) {
47
- i0.ɵɵelementStart(0, "div", 16);
48
- i0.ɵɵelement(1, "div", 17);
49
- i0.ɵɵelementStart(2, "span", 18);
43
+ function TimelineComponent_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
44
+ i0.ɵɵelementStart(0, "div", 5);
45
+ i0.ɵɵelement(1, "div", 7);
46
+ i0.ɵɵelementStart(2, "span", 8);
50
47
  i0.ɵɵtext(3);
51
48
  i0.ɵɵelementEnd()();
52
49
  } if (rf & 2) {
@@ -54,32 +51,25 @@ function TimelineComponent_ng_container_2_ng_template_2_Template(rf, ctx) { if (
54
51
  i0.ɵɵadvance(3);
55
52
  i0.ɵɵtextInterpolate(ctx_r1.loadingMessage);
56
53
  } }
57
- function TimelineComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
58
- i0.ɵɵelementContainerStart(0);
59
- i0.ɵɵtemplate(1, TimelineComponent_ng_container_2_ng_container_1_Template, 2, 1, "ng-container", 14)(2, TimelineComponent_ng_container_2_ng_template_2_Template, 4, 1, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
60
- i0.ɵɵelementContainerEnd();
54
+ function TimelineComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
55
+ i0.ɵɵconditionalCreate(0, TimelineComponent_Conditional_2_Conditional_0_Template, 1, 1, "ng-container")(1, TimelineComponent_Conditional_2_Conditional_1_Template, 4, 1, "div", 5);
61
56
  } if (rf & 2) {
62
- const defaultLoading_r3 = i0.ɵɵreference(3);
63
57
  const ctx_r1 = i0.ɵɵnextContext();
64
- i0.ɵɵadvance();
65
- i0.ɵɵproperty("ngIf", ctx_r1.loadingTemplate)("ngIfElse", defaultLoading_r3);
58
+ i0.ɵɵconditional(ctx_r1.loadingTemplate ? 0 : 1);
66
59
  } }
67
- function TimelineComponent_ng_container_3_ng_container_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
60
+ function TimelineComponent_Conditional_3_Conditional_0_ng_container_0_Template(rf, ctx) { if (rf & 1) {
68
61
  i0.ɵɵelementContainer(0);
69
62
  } }
70
- function TimelineComponent_ng_container_3_ng_container_1_Template(rf, ctx) { if (rf & 1) {
71
- i0.ɵɵelementContainerStart(0);
72
- i0.ɵɵtemplate(1, TimelineComponent_ng_container_3_ng_container_1_ng_container_1_Template, 1, 0, "ng-container", 15);
73
- i0.ɵɵelementContainerEnd();
63
+ function TimelineComponent_Conditional_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
64
+ i0.ɵɵtemplate(0, TimelineComponent_Conditional_3_Conditional_0_ng_container_0_Template, 1, 0, "ng-container", 6);
74
65
  } if (rf & 2) {
75
66
  const ctx_r1 = i0.ɵɵnextContext(2);
76
- i0.ɵɵadvance();
77
67
  i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.emptyTemplate);
78
68
  } }
79
- function TimelineComponent_ng_container_3_ng_template_2_Template(rf, ctx) { if (rf & 1) {
80
- i0.ɵɵelementStart(0, "div", 19);
81
- i0.ɵɵelement(1, "i", 20);
82
- i0.ɵɵelementStart(2, "span", 21);
69
+ 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);
83
73
  i0.ɵɵtext(3);
84
74
  i0.ɵɵelementEnd()();
85
75
  } if (rf & 2) {
@@ -89,152 +79,129 @@ function TimelineComponent_ng_container_3_ng_template_2_Template(rf, ctx) { if (
89
79
  i0.ɵɵadvance(2);
90
80
  i0.ɵɵtextInterpolate(ctx_r1.emptyMessage);
91
81
  } }
92
- function TimelineComponent_ng_container_3_Template(rf, ctx) { if (rf & 1) {
93
- i0.ɵɵelementContainerStart(0);
94
- i0.ɵɵtemplate(1, TimelineComponent_ng_container_3_ng_container_1_Template, 2, 1, "ng-container", 14)(2, TimelineComponent_ng_container_3_ng_template_2_Template, 4, 3, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
95
- i0.ɵɵelementContainerEnd();
82
+ 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);
96
84
  } if (rf & 2) {
97
- const defaultEmpty_r4 = i0.ɵɵreference(3);
98
85
  const ctx_r1 = i0.ɵɵnextContext();
99
- i0.ɵɵadvance();
100
- i0.ɵɵproperty("ngIf", ctx_r1.emptyTemplate)("ngIfElse", defaultEmpty_r4);
86
+ i0.ɵɵconditional(ctx_r1.emptyTemplate ? 0 : 1);
101
87
  } }
102
- function TimelineComponent_ng_container_4_ng_container_1_div_1_ng_container_2_ng_container_1_Template(rf, ctx) { if (rf & 1) {
88
+ function TimelineComponent_Conditional_4_Conditional_0_For_1_Conditional_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
103
89
  i0.ɵɵelementContainer(0);
104
90
  } }
105
- function TimelineComponent_ng_container_4_ng_container_1_div_1_ng_container_2_Template(rf, ctx) { if (rf & 1) {
106
- i0.ɵɵelementContainerStart(0);
107
- i0.ɵɵtemplate(1, TimelineComponent_ng_container_4_ng_container_1_div_1_ng_container_2_ng_container_1_Template, 1, 0, "ng-container", 28);
108
- i0.ɵɵelementContainerEnd();
91
+ 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);
109
93
  } if (rf & 2) {
110
- const segment_r6 = i0.ɵɵnextContext().$implicit;
94
+ const segment_r4 = i0.ɵɵnextContext().$implicit;
111
95
  const ctx_r1 = i0.ɵɵnextContext(3);
112
- i0.ɵɵadvance();
113
- i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.segmentHeaderTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c8, segment_r6));
96
+ i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.segmentHeaderTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c8, segment_r4));
114
97
  } }
115
- function TimelineComponent_ng_container_4_ng_container_1_div_1_ng_template_3_span_0_Template(rf, ctx) { if (rf & 1) {
116
- i0.ɵɵelementStart(0, "span", 33);
98
+ function TimelineComponent_Conditional_4_Conditional_0_For_1_Conditional_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
99
+ i0.ɵɵelementStart(0, "span", 18);
117
100
  i0.ɵɵelement(1, "i");
118
101
  i0.ɵɵelementEnd();
119
102
  } if (rf & 2) {
120
- const segment_r6 = i0.ɵɵnextContext(2).$implicit;
103
+ const segment_r4 = i0.ɵɵnextContext(2).$implicit;
121
104
  i0.ɵɵadvance();
122
- i0.ɵɵclassMap(segment_r6.isExpanded ? "fa-solid fa-chevron-down" : "fa-solid fa-chevron-right");
105
+ i0.ɵɵclassMap(segment_r4.isExpanded ? "fa-solid fa-chevron-down" : "fa-solid fa-chevron-right");
123
106
  } }
124
- function TimelineComponent_ng_container_4_ng_container_1_div_1_ng_template_3_Template(rf, ctx) { if (rf & 1) {
125
- i0.ɵɵtemplate(0, TimelineComponent_ng_container_4_ng_container_1_div_1_ng_template_3_span_0_Template, 2, 2, "span", 29);
126
- i0.ɵɵelementStart(1, "span", 30);
107
+ 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);
127
110
  i0.ɵɵtext(2);
128
111
  i0.ɵɵelementEnd();
129
- i0.ɵɵelementStart(3, "span", 31);
112
+ i0.ɵɵelementStart(3, "span", 20);
130
113
  i0.ɵɵtext(4);
131
114
  i0.ɵɵelementEnd();
132
- i0.ɵɵelement(5, "span", 32);
115
+ i0.ɵɵelement(5, "span", 21);
133
116
  } if (rf & 2) {
134
- const segment_r6 = i0.ɵɵnextContext().$implicit;
117
+ const segment_r4 = i0.ɵɵnextContext().$implicit;
135
118
  const ctx_r1 = i0.ɵɵnextContext(3);
136
- i0.ɵɵproperty("ngIf", ctx_r1.segmentsCollapsible);
119
+ i0.ɵɵconditional(ctx_r1.segmentsCollapsible ? 0 : -1);
137
120
  i0.ɵɵadvance(2);
138
- i0.ɵɵtextInterpolate(segment_r6.label);
121
+ i0.ɵɵtextInterpolate(segment_r4.label);
139
122
  i0.ɵɵadvance(2);
140
- i0.ɵɵtextInterpolate2("(", segment_r6.eventCount, " ", segment_r6.eventCount === 1 ? "event" : "events", ")");
123
+ i0.ɵɵtextInterpolate2("(", segment_r4.eventCount, " ", segment_r4.eventCount === 1 ? "event" : "events", ")");
141
124
  } }
142
- function TimelineComponent_ng_container_4_ng_container_1_div_1_ng_container_7_ng_container_1_Template(rf, ctx) { if (rf & 1) {
125
+ function TimelineComponent_Conditional_4_Conditional_0_For_1_For_7_ng_container_0_Template(rf, ctx) { if (rf & 1) {
143
126
  i0.ɵɵelementContainer(0);
144
127
  } }
145
- function TimelineComponent_ng_container_4_ng_container_1_div_1_ng_container_7_Template(rf, ctx) { if (rf & 1) {
146
- i0.ɵɵelementContainerStart(0);
147
- i0.ɵɵtemplate(1, TimelineComponent_ng_container_4_ng_container_1_div_1_ng_container_7_ng_container_1_Template, 1, 0, "ng-container", 28);
148
- i0.ɵɵelementContainerEnd();
128
+ 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);
149
130
  } if (rf & 2) {
150
- const event_r7 = ctx.$implicit;
151
- const eventIndex_r8 = ctx.index;
152
- const isOdd_r9 = ctx.odd;
131
+ const event_r5 = ctx.$implicit;
132
+ const ɵ$index_61_r6 = ctx.$index;
153
133
  const ctx_r1 = i0.ɵɵnextContext(4);
154
- const eventCard_r10 = i0.ɵɵreference(8);
155
- i0.ɵɵadvance();
156
- i0.ɵɵproperty("ngTemplateOutlet", eventCard_r10)("ngTemplateOutletContext", i0.ɵɵpureFunction4(2, _c9, event_r7, eventIndex_r8, isOdd_r9, ctx_r1.getGlobalIndex(event_r7)));
134
+ 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)));
157
136
  } }
158
- function TimelineComponent_ng_container_4_ng_container_1_div_1_Template(rf, ctx) { if (rf & 1) {
159
- const _r5 = i0.ɵɵgetCurrentView();
160
- i0.ɵɵelementStart(0, "div", 23)(1, "div", 24);
161
- i0.ɵɵlistener("click", function TimelineComponent_ng_container_4_ng_container_1_div_1_Template_div_click_1_listener() { const segment_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onSegmentClick(segment_r6)); });
162
- i0.ɵɵtemplate(2, TimelineComponent_ng_container_4_ng_container_1_div_1_ng_container_2_Template, 2, 4, "ng-container", 14)(3, TimelineComponent_ng_container_4_ng_container_1_div_1_ng_template_3_Template, 6, 4, "ng-template", null, 4, i0.ɵɵtemplateRefExtractor);
137
+ function TimelineComponent_Conditional_4_Conditional_0_For_1_Template(rf, ctx) { if (rf & 1) {
138
+ const _r3 = i0.ɵɵgetCurrentView();
139
+ i0.ɵɵelementStart(0, "div", 14)(1, "div", 15);
140
+ 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
+ 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);
163
142
  i0.ɵɵelementEnd();
164
- i0.ɵɵelementStart(5, "div", 25)(6, "div", 26);
165
- i0.ɵɵtemplate(7, TimelineComponent_ng_container_4_ng_container_1_div_1_ng_container_7_Template, 2, 7, "ng-container", 27);
143
+ i0.ɵɵelementStart(4, "div", 16)(5, "div", 12);
144
+ i0.ɵɵrepeaterCreate(6, TimelineComponent_Conditional_4_Conditional_0_For_1_For_7_Template, 1, 7, "ng-container", null, i0.ɵɵcomponentInstance().trackByEventId, true);
166
145
  i0.ɵɵelementEnd()()();
167
146
  } if (rf & 2) {
168
- const segment_r6 = ctx.$implicit;
169
- const segmentIndex_r11 = ctx.index;
170
- const defaultSegmentHeader_r12 = i0.ɵɵreference(4);
147
+ const segment_r4 = ctx.$implicit;
148
+ const ɵ$index_33_r8 = ctx.$index;
171
149
  const ctx_r1 = i0.ɵɵnextContext(3);
172
- i0.ɵɵclassProp("mj-timeline__segment--collapsed", !segment_r6.isExpanded);
173
- i0.ɵɵattribute("data-segment-label", segment_r6.label);
150
+ i0.ɵɵclassProp("mj-timeline__segment--collapsed", !segment_r4.isExpanded);
151
+ i0.ɵɵattribute("data-segment-label", segment_r4.label);
174
152
  i0.ɵɵadvance();
175
153
  i0.ɵɵclassProp("mj-timeline__segment-header--clickable", ctx_r1.segmentsCollapsible);
176
- i0.ɵɵattribute("aria-expanded", segment_r6.isExpanded)("aria-controls", "segment-content-" + segmentIndex_r11);
154
+ i0.ɵɵattribute("aria-expanded", segment_r4.isExpanded)("aria-controls", "segment-content-" + ɵ$index_33_r8);
177
155
  i0.ɵɵadvance();
178
- i0.ɵɵproperty("ngIf", ctx_r1.segmentHeaderTemplate)("ngIfElse", defaultSegmentHeader_r12);
179
- i0.ɵɵadvance(3);
180
- i0.ɵɵclassProp("mj-timeline__segment-content--hidden", !segment_r6.isExpanded);
181
- i0.ɵɵproperty("id", "segment-content-" + segmentIndex_r11);
156
+ i0.ɵɵconditional(ctx_r1.segmentHeaderTemplate ? 2 : 3);
182
157
  i0.ɵɵadvance(2);
183
- i0.ɵɵproperty("ngForOf", segment_r6.events)("ngForTrackBy", ctx_r1.trackByEventId);
158
+ i0.ɵɵclassProp("mj-timeline__segment-content--hidden", !segment_r4.isExpanded);
159
+ i0.ɵɵproperty("id", "segment-content-" + ɵ$index_33_r8);
160
+ i0.ɵɵadvance(2);
161
+ i0.ɵɵrepeater(segment_r4.events);
184
162
  } }
185
- function TimelineComponent_ng_container_4_ng_container_1_Template(rf, ctx) { if (rf & 1) {
186
- i0.ɵɵelementContainerStart(0);
187
- i0.ɵɵtemplate(1, TimelineComponent_ng_container_4_ng_container_1_div_1_Template, 8, 14, "div", 22);
188
- i0.ɵɵelementContainerEnd();
163
+ 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);
189
165
  } if (rf & 2) {
190
166
  const ctx_r1 = i0.ɵɵnextContext(2);
191
- i0.ɵɵadvance();
192
- i0.ɵɵproperty("ngForOf", ctx_r1.segments)("ngForTrackBy", ctx_r1.trackBySegmentLabel);
167
+ i0.ɵɵrepeater(ctx_r1.segments);
193
168
  } }
194
- function TimelineComponent_ng_container_4_ng_container_2_ng_container_2_ng_container_1_Template(rf, ctx) { if (rf & 1) {
169
+ function TimelineComponent_Conditional_4_Conditional_1_For_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
195
170
  i0.ɵɵelementContainer(0);
196
171
  } }
197
- function TimelineComponent_ng_container_4_ng_container_2_ng_container_2_Template(rf, ctx) { if (rf & 1) {
198
- i0.ɵɵelementContainerStart(0);
199
- i0.ɵɵtemplate(1, TimelineComponent_ng_container_4_ng_container_2_ng_container_2_ng_container_1_Template, 1, 0, "ng-container", 28);
200
- i0.ɵɵelementContainerEnd();
172
+ 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);
201
174
  } if (rf & 2) {
202
- const event_r13 = ctx.$implicit;
203
- const eventIndex_r14 = ctx.index;
204
- const isOdd_r15 = ctx.odd;
175
+ const event_r9 = ctx.$implicit;
176
+ const ɵ$index_69_r10 = ctx.$index;
205
177
  i0.ɵɵnextContext(3);
206
- const eventCard_r10 = i0.ɵɵreference(8);
207
- i0.ɵɵadvance();
208
- i0.ɵɵproperty("ngTemplateOutlet", eventCard_r10)("ngTemplateOutletContext", i0.ɵɵpureFunction4(2, _c9, event_r13, eventIndex_r14, isOdd_r15, eventIndex_r14));
178
+ 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));
209
180
  } }
210
- function TimelineComponent_ng_container_4_ng_container_2_Template(rf, ctx) { if (rf & 1) {
211
- i0.ɵɵelementContainerStart(0);
212
- i0.ɵɵelementStart(1, "div", 26);
213
- i0.ɵɵtemplate(2, TimelineComponent_ng_container_4_ng_container_2_ng_container_2_Template, 2, 7, "ng-container", 27);
181
+ function TimelineComponent_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
182
+ i0.ɵɵelementStart(0, "div", 12);
183
+ i0.ɵɵrepeaterCreate(1, TimelineComponent_Conditional_4_Conditional_1_For_2_Template, 1, 7, "ng-container", null, i0.ɵɵcomponentInstance().trackByEventId, true);
214
184
  i0.ɵɵelementEnd();
215
- i0.ɵɵelementContainerEnd();
216
185
  } if (rf & 2) {
217
186
  const ctx_r1 = i0.ɵɵnextContext(2);
218
- i0.ɵɵadvance(2);
219
- i0.ɵɵproperty("ngForOf", ctx_r1.allEvents)("ngForTrackBy", ctx_r1.trackByEventId);
187
+ i0.ɵɵadvance();
188
+ i0.ɵɵrepeater(ctx_r1.allEvents);
220
189
  } }
221
- function TimelineComponent_ng_container_4_Template(rf, ctx) { if (rf & 1) {
222
- i0.ɵɵelementContainerStart(0);
223
- i0.ɵɵtemplate(1, TimelineComponent_ng_container_4_ng_container_1_Template, 2, 2, "ng-container", 11)(2, TimelineComponent_ng_container_4_ng_container_2_Template, 3, 2, "ng-container", 11);
224
- i0.ɵɵelementContainerEnd();
190
+ function TimelineComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
191
+ 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);
225
193
  } if (rf & 2) {
226
194
  const ctx_r1 = i0.ɵɵnextContext();
195
+ i0.ɵɵconditional(ctx_r1.segmentGrouping !== "none" ? 0 : -1);
227
196
  i0.ɵɵadvance();
228
- i0.ɵɵproperty("ngIf", ctx_r1.segmentGrouping !== "none");
229
- i0.ɵɵadvance();
230
- i0.ɵɵproperty("ngIf", ctx_r1.segmentGrouping === "none");
197
+ i0.ɵɵconditional(ctx_r1.segmentGrouping === "none" ? 1 : -1);
231
198
  } }
232
- function TimelineComponent_div_5_Template(rf, ctx) { if (rf & 1) {
233
- i0.ɵɵelement(0, "div", 34);
199
+ function TimelineComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
200
+ i0.ɵɵelement(0, "div", 3);
234
201
  } }
235
- function TimelineComponent_div_6_Template(rf, ctx) { if (rf & 1) {
236
- i0.ɵɵelementStart(0, "div", 35);
237
- i0.ɵɵelement(1, "div", 36);
202
+ function TimelineComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
203
+ i0.ɵɵelementStart(0, "div", 4);
204
+ i0.ɵɵelement(1, "div", 22);
238
205
  i0.ɵɵelementStart(2, "span");
239
206
  i0.ɵɵtext(3);
240
207
  i0.ɵɵelementEnd()();
@@ -243,388 +210,366 @@ function TimelineComponent_div_6_Template(rf, ctx) { if (rf & 1) {
243
210
  i0.ɵɵadvance(3);
244
211
  i0.ɵɵtextInterpolate(ctx_r1.virtualScroll.loadingMessage);
245
212
  } }
246
- function TimelineComponent_ng_template_7_div_4_Template(rf, ctx) { if (rf & 1) {
247
- i0.ɵɵelementStart(0, "div", 43);
213
+ function TimelineComponent_ng_template_7_Conditional_4_Template(rf, ctx) { if (rf & 1) {
214
+ i0.ɵɵelementStart(0, "div", 27);
248
215
  i0.ɵɵtext(1);
249
216
  i0.ɵɵelementEnd();
250
217
  } if (rf & 2) {
251
- const event_r17 = i0.ɵɵnextContext().event;
218
+ const event_r12 = i0.ɵɵnextContext().event;
252
219
  const ctx_r1 = i0.ɵɵnextContext();
253
220
  i0.ɵɵadvance();
254
- i0.ɵɵtextInterpolate1(" ", ctx_r1.formatDate(event_r17.date), " ");
221
+ i0.ɵɵtextInterpolate1(" ", ctx_r1.formatDate(event_r12.date), " ");
255
222
  } }
256
- function TimelineComponent_ng_template_7_ng_container_6_ng_container_1_Template(rf, ctx) { if (rf & 1) {
223
+ function TimelineComponent_ng_template_7_Conditional_6_ng_container_0_Template(rf, ctx) { if (rf & 1) {
257
224
  i0.ɵɵelementContainer(0);
258
225
  } }
259
- function TimelineComponent_ng_template_7_ng_container_6_Template(rf, ctx) { if (rf & 1) {
260
- i0.ɵɵelementContainerStart(0);
261
- i0.ɵɵtemplate(1, TimelineComponent_ng_template_7_ng_container_6_ng_container_1_Template, 1, 0, "ng-container", 28);
262
- i0.ɵɵelementContainerEnd();
226
+ 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);
263
228
  } if (rf & 2) {
264
- const event_r17 = i0.ɵɵnextContext().event;
229
+ const event_r12 = i0.ɵɵnextContext().event;
265
230
  const ctx_r1 = i0.ɵɵnextContext();
266
- i0.ɵɵadvance();
267
- i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.cardTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c10, event_r17, ctx_r1.groups[event_r17.groupIndex]));
231
+ i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.cardTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c10, event_r12, ctx_r1.groups[event_r12.groupIndex]));
268
232
  } }
269
- function TimelineComponent_ng_template_7_ng_template_7_div_1_Template(rf, ctx) { if (rf & 1) {
270
- i0.ɵɵelementStart(0, "div", 50);
271
- i0.ɵɵelement(1, "img", 51);
233
+ 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);
272
236
  i0.ɵɵelementEnd();
273
237
  } if (rf & 2) {
274
- const event_r17 = i0.ɵɵnextContext(2).event;
238
+ const event_r12 = i0.ɵɵnextContext(2).event;
275
239
  const ctx_r1 = i0.ɵɵnextContext();
276
- i0.ɵɵclassProp("mj-timeline__card-image--small", ctx_r1.getEffectiveCardConfig(event_r17).imageSize === "small")("mj-timeline__card-image--medium", ctx_r1.getEffectiveCardConfig(event_r17).imageSize === "medium")("mj-timeline__card-image--large", ctx_r1.getEffectiveCardConfig(event_r17).imageSize === "large");
240
+ i0.ɵɵclassProp("mj-timeline__card-image--small", ctx_r1.getEffectiveCardConfig(event_r12).imageSize === "small")("mj-timeline__card-image--medium", ctx_r1.getEffectiveCardConfig(event_r12).imageSize === "medium")("mj-timeline__card-image--large", ctx_r1.getEffectiveCardConfig(event_r12).imageSize === "large");
277
241
  i0.ɵɵadvance();
278
- i0.ɵɵproperty("src", event_r17.imageUrl, i0.ɵɵsanitizeUrl)("alt", event_r17.title);
242
+ i0.ɵɵproperty("src", event_r12.imageUrl, i0.ɵɵsanitizeUrl)("alt", event_r12.title);
279
243
  } }
280
- function TimelineComponent_ng_template_7_ng_template_7_ng_container_3_ng_container_1_Template(rf, ctx) { if (rf & 1) {
244
+ function TimelineComponent_ng_template_7_Conditional_7_Conditional_3_ng_container_0_Template(rf, ctx) { if (rf & 1) {
281
245
  i0.ɵɵelementContainer(0);
282
246
  } }
283
- function TimelineComponent_ng_template_7_ng_template_7_ng_container_3_Template(rf, ctx) { if (rf & 1) {
284
- i0.ɵɵelementContainerStart(0);
285
- i0.ɵɵtemplate(1, TimelineComponent_ng_template_7_ng_template_7_ng_container_3_ng_container_1_Template, 1, 0, "ng-container", 28);
286
- i0.ɵɵelementContainerEnd();
247
+ 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);
287
249
  } if (rf & 2) {
288
- const event_r17 = i0.ɵɵnextContext(2).event;
250
+ const event_r12 = i0.ɵɵnextContext(2).event;
289
251
  const ctx_r1 = i0.ɵɵnextContext();
290
- i0.ɵɵadvance();
291
- i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.headerTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c11, event_r17));
252
+ i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.headerTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c11, event_r12));
292
253
  } }
293
- function TimelineComponent_ng_template_7_ng_template_7_ng_template_4_span_0_Template(rf, ctx) { if (rf & 1) {
294
- i0.ɵɵelementStart(0, "span", 58);
254
+ function TimelineComponent_ng_template_7_Conditional_7_Conditional_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
255
+ i0.ɵɵelementStart(0, "span", 43);
295
256
  i0.ɵɵelement(1, "i");
296
257
  i0.ɵɵelementEnd();
297
258
  } if (rf & 2) {
298
- const event_r17 = i0.ɵɵnextContext(3).event;
259
+ const event_r12 = i0.ɵɵnextContext(3).event;
299
260
  const ctx_r1 = i0.ɵɵnextContext();
300
- i0.ɵɵstyleProp("color", ctx_r1.getColor(event_r17));
261
+ i0.ɵɵstyleProp("color", ctx_r1.getColor(event_r12));
301
262
  i0.ɵɵadvance();
302
- i0.ɵɵclassMap(ctx_r1.getIcon(event_r17));
263
+ i0.ɵɵclassMap(ctx_r1.getIcon(event_r12));
303
264
  } }
304
- function TimelineComponent_ng_template_7_ng_template_7_ng_template_4_span_4_Template(rf, ctx) { if (rf & 1) {
305
- i0.ɵɵelementStart(0, "span", 59);
265
+ function TimelineComponent_ng_template_7_Conditional_7_Conditional_4_Conditional_4_Template(rf, ctx) { if (rf & 1) {
266
+ i0.ɵɵelementStart(0, "span", 40);
306
267
  i0.ɵɵtext(1);
307
268
  i0.ɵɵelementEnd();
308
269
  } if (rf & 2) {
309
- const event_r17 = i0.ɵɵnextContext(3).event;
270
+ const event_r12 = i0.ɵɵnextContext(3).event;
310
271
  i0.ɵɵadvance();
311
- i0.ɵɵtextInterpolate1(" ", event_r17.subtitle, " ");
272
+ i0.ɵɵtextInterpolate1(" ", event_r12.subtitle, " ");
312
273
  } }
313
- function TimelineComponent_ng_template_7_ng_template_7_ng_template_4_span_5_Template(rf, ctx) { if (rf & 1) {
314
- i0.ɵɵelementStart(0, "span", 60);
274
+ function TimelineComponent_ng_template_7_Conditional_7_Conditional_4_Conditional_5_Template(rf, ctx) { if (rf & 1) {
275
+ i0.ɵɵelementStart(0, "span", 41);
315
276
  i0.ɵɵtext(1);
316
277
  i0.ɵɵelementEnd();
317
278
  } if (rf & 2) {
318
- const event_r17 = i0.ɵɵnextContext(3).event;
279
+ const event_r12 = i0.ɵɵnextContext(3).event;
319
280
  const ctx_r1 = i0.ɵɵnextContext();
320
281
  i0.ɵɵadvance();
321
- i0.ɵɵtextInterpolate1(" ", ctx_r1.formatDate(event_r17.date, ctx_r1.getEffectiveCardConfig(event_r17).dateFormat), " ");
282
+ i0.ɵɵtextInterpolate1(" ", ctx_r1.formatDate(event_r12.date, ctx_r1.getEffectiveCardConfig(event_r12).dateFormat), " ");
322
283
  } }
323
- function TimelineComponent_ng_template_7_ng_template_7_ng_template_4_button_6_Template(rf, ctx) { if (rf & 1) {
324
- const _r22 = i0.ɵɵgetCurrentView();
325
- i0.ɵɵelementStart(0, "button", 61);
326
- i0.ɵɵlistener("click", function TimelineComponent_ng_template_7_ng_template_7_ng_template_4_button_6_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r22 = i0.ɵɵnextContext(3); const event_r17 = ctx_r22.event; const globalIndex_r19 = ctx_r22.globalIndex; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onToggleExpand(event_r17, globalIndex_r19, $event)); });
284
+ function TimelineComponent_ng_template_7_Conditional_7_Conditional_4_Conditional_6_Template(rf, ctx) { if (rf & 1) {
285
+ const _r17 = i0.ɵɵgetCurrentView();
286
+ i0.ɵɵelementStart(0, "button", 44);
287
+ 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)); });
327
288
  i0.ɵɵelement(1, "i");
328
289
  i0.ɵɵelementEnd();
329
290
  } if (rf & 2) {
330
- const event_r17 = i0.ɵɵnextContext(3).event;
331
- i0.ɵɵattribute("aria-label", event_r17.isExpanded ? "Collapse" : "Expand");
291
+ const event_r12 = i0.ɵɵnextContext(3).event;
292
+ i0.ɵɵattribute("aria-label", event_r12.isExpanded ? "Collapse" : "Expand");
332
293
  i0.ɵɵadvance();
333
- i0.ɵɵclassMap(event_r17.isExpanded ? "fa-solid fa-chevron-up" : "fa-solid fa-chevron-down");
294
+ i0.ɵɵclassMap(event_r12.isExpanded ? "fa-solid fa-chevron-up" : "fa-solid fa-chevron-down");
334
295
  } }
335
- function TimelineComponent_ng_template_7_ng_template_7_ng_template_4_Template(rf, ctx) { if (rf & 1) {
336
- i0.ɵɵtemplate(0, TimelineComponent_ng_template_7_ng_template_7_ng_template_4_span_0_Template, 2, 4, "span", 52);
337
- i0.ɵɵelementStart(1, "div", 53)(2, "h4", 54);
296
+ 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);
338
299
  i0.ɵɵtext(3);
339
300
  i0.ɵɵelementEnd();
340
- i0.ɵɵtemplate(4, TimelineComponent_ng_template_7_ng_template_7_ng_template_4_span_4_Template, 2, 1, "span", 55)(5, TimelineComponent_ng_template_7_ng_template_7_ng_template_4_span_5_Template, 2, 1, "span", 56);
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);
341
303
  i0.ɵɵelementEnd();
342
- i0.ɵɵtemplate(6, TimelineComponent_ng_template_7_ng_template_7_ng_template_4_button_6_Template, 2, 3, "button", 57);
304
+ i0.ɵɵconditionalCreate(6, TimelineComponent_ng_template_7_Conditional_7_Conditional_4_Conditional_6_Template, 2, 3, "button", 42);
343
305
  } if (rf & 2) {
344
- const event_r17 = i0.ɵɵnextContext(2).event;
306
+ const event_r12 = i0.ɵɵnextContext(2).event;
345
307
  const ctx_r1 = i0.ɵɵnextContext();
346
- i0.ɵɵproperty("ngIf", ctx_r1.getEffectiveCardConfig(event_r17).showIcon);
308
+ i0.ɵɵconditional(ctx_r1.getEffectiveCardConfig(event_r12).showIcon ? 0 : -1);
347
309
  i0.ɵɵadvance(3);
348
- i0.ɵɵtextInterpolate(event_r17.title);
310
+ i0.ɵɵtextInterpolate(event_r12.title);
349
311
  i0.ɵɵadvance();
350
- i0.ɵɵproperty("ngIf", event_r17.subtitle && ctx_r1.getEffectiveCardConfig(event_r17).showSubtitle);
312
+ i0.ɵɵconditional(event_r12.subtitle && ctx_r1.getEffectiveCardConfig(event_r12).showSubtitle ? 4 : -1);
351
313
  i0.ɵɵadvance();
352
- i0.ɵɵproperty("ngIf", ctx_r1.getEffectiveCardConfig(event_r17).showDate && ctx_r1.layout !== "alternating");
314
+ i0.ɵɵconditional(ctx_r1.getEffectiveCardConfig(event_r12).showDate && ctx_r1.layout !== "alternating" ? 5 : -1);
353
315
  i0.ɵɵadvance();
354
- i0.ɵɵproperty("ngIf", ctx_r1.getEffectiveCardConfig(event_r17).collapsible);
316
+ i0.ɵɵconditional(ctx_r1.getEffectiveCardConfig(event_r12).collapsible ? 6 : -1);
355
317
  } }
356
- function TimelineComponent_ng_template_7_ng_template_7_div_6_Template(rf, ctx) { if (rf & 1) {
357
- i0.ɵɵelementStart(0, "div", 62);
358
- i0.ɵɵelement(1, "img", 51);
318
+ 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);
359
321
  i0.ɵɵelementEnd();
360
322
  } if (rf & 2) {
361
- const event_r17 = i0.ɵɵnextContext(2).event;
323
+ const event_r12 = i0.ɵɵnextContext(2).event;
362
324
  i0.ɵɵadvance();
363
- i0.ɵɵproperty("src", event_r17.imageUrl, i0.ɵɵsanitizeUrl)("alt", event_r17.title);
325
+ i0.ɵɵproperty("src", event_r12.imageUrl, i0.ɵɵsanitizeUrl)("alt", event_r12.title);
364
326
  } }
365
- function TimelineComponent_ng_template_7_ng_template_7_ng_container_8_ng_container_1_Template(rf, ctx) { if (rf & 1) {
327
+ function TimelineComponent_ng_template_7_Conditional_7_Conditional_7_ng_container_0_Template(rf, ctx) { if (rf & 1) {
366
328
  i0.ɵɵelementContainer(0);
367
329
  } }
368
- function TimelineComponent_ng_template_7_ng_template_7_ng_container_8_Template(rf, ctx) { if (rf & 1) {
369
- i0.ɵɵelementContainerStart(0);
370
- i0.ɵɵtemplate(1, TimelineComponent_ng_template_7_ng_template_7_ng_container_8_ng_container_1_Template, 1, 0, "ng-container", 28);
371
- i0.ɵɵelementContainerEnd();
330
+ 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);
372
332
  } if (rf & 2) {
373
- const event_r17 = i0.ɵɵnextContext(2).event;
333
+ const event_r12 = i0.ɵɵnextContext(2).event;
374
334
  const ctx_r1 = i0.ɵɵnextContext();
375
- i0.ɵɵadvance();
376
- i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.bodyTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c11, event_r17));
335
+ i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.bodyTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c11, event_r12));
377
336
  } }
378
- function TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_0_ng_container_1_i_2_Template(rf, ctx) { if (rf & 1) {
379
- i0.ɵɵelement(0, "i", 72);
337
+ 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);
380
339
  } if (rf & 2) {
381
- const field_r24 = i0.ɵɵnextContext().$implicit;
382
- i0.ɵɵproperty("ngClass", field_r24.icon);
340
+ const field_r19 = i0.ɵɵnextContext().$implicit;
341
+ i0.ɵɵproperty("ngClass", field_r19.icon);
383
342
  } }
384
- function TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_0_ng_container_1_span_3_Template(rf, ctx) { if (rf & 1) {
385
- i0.ɵɵelementStart(0, "span", 73);
343
+ 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);
386
345
  i0.ɵɵtext(1);
387
346
  i0.ɵɵelementEnd();
388
347
  } if (rf & 2) {
389
- const field_r24 = i0.ɵɵnextContext().$implicit;
348
+ const field_r19 = i0.ɵɵnextContext().$implicit;
390
349
  i0.ɵɵadvance();
391
- i0.ɵɵtextInterpolate1("", field_r24.label, ":");
350
+ i0.ɵɵtextInterpolate1("", field_r19.label, ":");
392
351
  } }
393
- function TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_0_ng_container_1_Template(rf, ctx) { if (rf & 1) {
394
- i0.ɵɵelementContainerStart(0);
395
- i0.ɵɵelementStart(1, "div", 68);
396
- i0.ɵɵtemplate(2, TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_0_ng_container_1_i_2_Template, 1, 1, "i", 69)(3, TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_0_ng_container_1_span_3_Template, 2, 1, "span", 70);
397
- i0.ɵɵelementStart(4, "span", 71);
398
- i0.ɵɵtext(5);
352
+ 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);
357
+ i0.ɵɵtext(4);
399
358
  i0.ɵɵelementEnd()();
400
- i0.ɵɵelementContainerEnd();
401
359
  } if (rf & 2) {
402
- const field_r24 = ctx.$implicit;
403
- const event_r17 = i0.ɵɵnextContext(4).event;
360
+ const field_r19 = ctx.$implicit;
361
+ const event_r12 = i0.ɵɵnextContext(4).event;
404
362
  const ctx_r1 = i0.ɵɵnextContext();
363
+ i0.ɵɵproperty("ngClass", field_r19.cssClass);
405
364
  i0.ɵɵadvance();
406
- i0.ɵɵproperty("ngClass", field_r24.cssClass);
407
- i0.ɵɵadvance();
408
- i0.ɵɵproperty("ngIf", field_r24.icon);
365
+ i0.ɵɵconditional(field_r19.icon ? 1 : -1);
409
366
  i0.ɵɵadvance();
410
- i0.ɵɵproperty("ngIf", !field_r24.hideLabel && field_r24.label);
367
+ i0.ɵɵconditional(!field_r19.hideLabel && field_r19.label ? 2 : -1);
411
368
  i0.ɵɵadvance(2);
412
- i0.ɵɵtextInterpolate(ctx_r1.getFieldValue(event_r17, field_r24));
369
+ i0.ɵɵtextInterpolate(ctx_r1.getFieldValue(event_r12, field_r19));
413
370
  } }
414
- function TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_0_Template(rf, ctx) { if (rf & 1) {
415
- i0.ɵɵelementStart(0, "div", 66);
416
- i0.ɵɵtemplate(1, TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_0_ng_container_1_Template, 6, 4, "ng-container", 67);
371
+ 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);
417
374
  i0.ɵɵelementEnd();
418
375
  } if (rf & 2) {
419
- const event_r17 = i0.ɵɵnextContext(3).event;
376
+ const event_r12 = i0.ɵɵnextContext(3).event;
420
377
  const ctx_r1 = i0.ɵɵnextContext();
421
378
  i0.ɵɵadvance();
422
- i0.ɵɵproperty("ngForOf", ctx_r1.getEffectiveCardConfig(event_r17).summaryFields);
379
+ i0.ɵɵrepeater(ctx_r1.getEffectiveCardConfig(event_r12).summaryFields);
423
380
  } }
424
- function TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
425
- i0.ɵɵelementContainerStart(0);
426
- i0.ɵɵelement(1, "div", 75);
427
- i0.ɵɵelementContainerEnd();
381
+ 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);
428
383
  } if (rf & 2) {
429
- const event_r17 = i0.ɵɵnextContext(4).event;
430
- i0.ɵɵadvance();
431
- i0.ɵɵproperty("innerHTML", event_r17.description, i0.ɵɵsanitizeHtml);
384
+ const event_r12 = i0.ɵɵnextContext(4).event;
385
+ i0.ɵɵproperty("innerHTML", event_r12.description, i0.ɵɵsanitizeHtml);
432
386
  } }
433
- function TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_1_ng_template_2_Template(rf, ctx) { if (rf & 1) {
387
+ function TimelineComponent_ng_template_7_Conditional_7_Conditional_8_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
434
388
  i0.ɵɵtext(0);
435
389
  } if (rf & 2) {
436
- const event_r17 = i0.ɵɵnextContext(4).event;
437
- i0.ɵɵtextInterpolate1(" ", event_r17.description, " ");
390
+ const event_r12 = i0.ɵɵnextContext(4).event;
391
+ i0.ɵɵtextInterpolate1(" ", event_r12.description, " ");
438
392
  } }
439
- function TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_1_Template(rf, ctx) { if (rf & 1) {
440
- i0.ɵɵelementStart(0, "div", 74);
441
- i0.ɵɵtemplate(1, TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_1_ng_container_1_Template, 2, 1, "ng-container", 14)(2, TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_1_ng_template_2_Template, 1, 1, "ng-template", null, 8, i0.ɵɵtemplateRefExtractor);
393
+ 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);
442
396
  i0.ɵɵelementEnd();
443
397
  } if (rf & 2) {
444
- let tmp_15_0;
445
- const plainDescription_r25 = i0.ɵɵreference(3);
446
- const event_r17 = i0.ɵɵnextContext(3).event;
398
+ const event_r12 = i0.ɵɵnextContext(3).event;
447
399
  const ctx_r1 = i0.ɵɵnextContext();
448
- i0.ɵɵstyleProp("-webkit-line-clamp", ctx_r1.getEffectiveCardConfig(event_r17).descriptionMaxLines || null);
449
- i0.ɵɵclassProp("mj-timeline__card-description--clamped", ((tmp_15_0 = ctx_r1.getEffectiveCardConfig(event_r17).descriptionMaxLines) !== null && tmp_15_0 !== undefined ? tmp_15_0 : 0) > 0);
400
+ i0.ɵɵstyleProp("-webkit-line-clamp", ctx_r1.getEffectiveCardConfig(event_r12).descriptionMaxLines || null);
401
+ i0.ɵɵclassProp("mj-timeline__card-description--clamped", (ctx_r1.getEffectiveCardConfig(event_r12).descriptionMaxLines ?? 0) > 0);
450
402
  i0.ɵɵadvance();
451
- i0.ɵɵproperty("ngIf", ctx_r1.getEffectiveCardConfig(event_r17).allowHtmlDescription)("ngIfElse", plainDescription_r25);
403
+ i0.ɵɵconditional(ctx_r1.getEffectiveCardConfig(event_r12).allowHtmlDescription ? 1 : 2);
452
404
  } }
453
- function TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_2_ng_container_1_i_2_Template(rf, ctx) { if (rf & 1) {
454
- i0.ɵɵelement(0, "i", 72);
405
+ 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);
455
407
  } if (rf & 2) {
456
- const field_r26 = i0.ɵɵnextContext().$implicit;
457
- i0.ɵɵproperty("ngClass", field_r26.icon);
408
+ const field_r20 = i0.ɵɵnextContext().$implicit;
409
+ i0.ɵɵproperty("ngClass", field_r20.icon);
458
410
  } }
459
- function TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_2_ng_container_1_span_3_Template(rf, ctx) { if (rf & 1) {
460
- i0.ɵɵelementStart(0, "span", 73);
411
+ 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);
461
413
  i0.ɵɵtext(1);
462
414
  i0.ɵɵelementEnd();
463
415
  } if (rf & 2) {
464
- const field_r26 = i0.ɵɵnextContext().$implicit;
416
+ const field_r20 = i0.ɵɵnextContext().$implicit;
465
417
  i0.ɵɵadvance();
466
- i0.ɵɵtextInterpolate1("", field_r26.label || field_r26.fieldName, ":");
418
+ i0.ɵɵtextInterpolate1("", field_r20.label || field_r20.fieldName, ":");
467
419
  } }
468
- function TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_2_ng_container_1_Template(rf, ctx) { if (rf & 1) {
469
- i0.ɵɵelementContainerStart(0);
470
- i0.ɵɵelementStart(1, "div", 68);
471
- i0.ɵɵtemplate(2, TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_2_ng_container_1_i_2_Template, 1, 1, "i", 69)(3, TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_2_ng_container_1_span_3_Template, 2, 1, "span", 70);
472
- i0.ɵɵelementStart(4, "span", 71);
473
- i0.ɵɵtext(5);
420
+ 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);
425
+ i0.ɵɵtext(4);
474
426
  i0.ɵɵelementEnd()();
475
- i0.ɵɵelementContainerEnd();
476
427
  } if (rf & 2) {
477
- const field_r26 = ctx.$implicit;
478
- const event_r17 = i0.ɵɵnextContext(4).event;
428
+ const field_r20 = ctx.$implicit;
429
+ const event_r12 = i0.ɵɵnextContext(4).event;
479
430
  const ctx_r1 = i0.ɵɵnextContext();
431
+ i0.ɵɵproperty("ngClass", field_r20.cssClass);
480
432
  i0.ɵɵadvance();
481
- i0.ɵɵproperty("ngClass", field_r26.cssClass);
433
+ i0.ɵɵconditional(field_r20.icon ? 1 : -1);
482
434
  i0.ɵɵadvance();
483
- i0.ɵɵproperty("ngIf", field_r26.icon);
484
- i0.ɵɵadvance();
485
- i0.ɵɵproperty("ngIf", !field_r26.hideLabel);
435
+ i0.ɵɵconditional(!field_r20.hideLabel ? 2 : -1);
486
436
  i0.ɵɵadvance(2);
487
- i0.ɵɵtextInterpolate(ctx_r1.getFieldValue(event_r17, field_r26));
437
+ i0.ɵɵtextInterpolate(ctx_r1.getFieldValue(event_r12, field_r20));
488
438
  } }
489
- function TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_2_Template(rf, ctx) { if (rf & 1) {
490
- i0.ɵɵelementStart(0, "div", 76);
491
- i0.ɵɵtemplate(1, TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_2_ng_container_1_Template, 6, 4, "ng-container", 67);
439
+ 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);
492
442
  i0.ɵɵelementEnd();
493
443
  } if (rf & 2) {
494
- const event_r17 = i0.ɵɵnextContext(3).event;
444
+ const event_r12 = i0.ɵɵnextContext(3).event;
495
445
  const ctx_r1 = i0.ɵɵnextContext();
496
446
  i0.ɵɵadvance();
497
- i0.ɵɵproperty("ngForOf", ctx_r1.getEffectiveCardConfig(event_r17).expandedFields);
447
+ i0.ɵɵrepeater(ctx_r1.getEffectiveCardConfig(event_r12).expandedFields);
498
448
  } }
499
- function TimelineComponent_ng_template_7_ng_template_7_ng_template_9_Template(rf, ctx) { if (rf & 1) {
500
- i0.ɵɵtemplate(0, TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_0_Template, 2, 1, "div", 63)(1, TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_1_Template, 4, 6, "div", 64)(2, TimelineComponent_ng_template_7_ng_template_7_ng_template_9_div_2_Template, 2, 1, "div", 65);
449
+ 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);
501
453
  } if (rf & 2) {
502
- let tmp_12_0;
503
- let tmp_14_0;
504
- const event_r17 = i0.ɵɵnextContext(2).event;
454
+ let tmp_9_0;
455
+ let tmp_11_0;
456
+ const event_r12 = i0.ɵɵnextContext(2).event;
505
457
  const ctx_r1 = i0.ɵɵnextContext();
506
- i0.ɵɵproperty("ngIf", (tmp_12_0 = ctx_r1.getEffectiveCardConfig(event_r17).summaryFields) == null ? null : tmp_12_0.length);
458
+ i0.ɵɵconditional(((tmp_9_0 = ctx_r1.getEffectiveCardConfig(event_r12).summaryFields) == null ? null : tmp_9_0.length) ? 0 : -1);
507
459
  i0.ɵɵadvance();
508
- i0.ɵɵproperty("ngIf", event_r17.description && event_r17.isExpanded);
460
+ i0.ɵɵconditional(event_r12.description && event_r12.isExpanded ? 1 : -1);
509
461
  i0.ɵɵadvance();
510
- i0.ɵɵproperty("ngIf", event_r17.isExpanded && ((tmp_14_0 = ctx_r1.getEffectiveCardConfig(event_r17).expandedFields) == null ? null : tmp_14_0.length));
462
+ i0.ɵɵconditional(event_r12.isExpanded && ((tmp_11_0 = ctx_r1.getEffectiveCardConfig(event_r12).expandedFields) == null ? null : tmp_11_0.length) ? 2 : -1);
511
463
  } }
512
- function TimelineComponent_ng_template_7_ng_template_7_div_11_ng_container_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
464
+ function TimelineComponent_ng_template_7_Conditional_7_Conditional_9_Conditional_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
513
465
  i0.ɵɵelementContainer(0);
514
466
  } }
515
- function TimelineComponent_ng_template_7_ng_template_7_div_11_ng_container_1_Template(rf, ctx) { if (rf & 1) {
516
- i0.ɵɵelementContainerStart(0);
517
- i0.ɵɵtemplate(1, TimelineComponent_ng_template_7_ng_template_7_div_11_ng_container_1_ng_container_1_Template, 1, 0, "ng-container", 28);
518
- i0.ɵɵelementContainerEnd();
467
+ 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);
519
469
  } if (rf & 2) {
520
- const event_r17 = i0.ɵɵnextContext(3).event;
470
+ const event_r12 = i0.ɵɵnextContext(3).event;
521
471
  const ctx_r1 = i0.ɵɵnextContext();
522
- i0.ɵɵadvance();
523
- i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.actionsTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c12, event_r17, ctx_r1.getActions(event_r17)));
472
+ i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.actionsTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c12, event_r12, ctx_r1.getActions(event_r12)));
524
473
  } }
525
- function TimelineComponent_ng_template_7_ng_template_7_div_11_ng_template_2_button_0_i_1_Template(rf, ctx) { if (rf & 1) {
526
- i0.ɵɵelement(0, "i", 81);
474
+ 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);
527
476
  } if (rf & 2) {
528
- const action_r28 = i0.ɵɵnextContext().$implicit;
529
- i0.ɵɵproperty("ngClass", action_r28.icon);
477
+ const action_r22 = i0.ɵɵnextContext().$implicit;
478
+ i0.ɵɵproperty("ngClass", action_r22.icon);
530
479
  } }
531
- function TimelineComponent_ng_template_7_ng_template_7_div_11_ng_template_2_button_0_Template(rf, ctx) { if (rf & 1) {
532
- const _r27 = i0.ɵɵgetCurrentView();
533
- i0.ɵɵelementStart(0, "button", 79);
534
- i0.ɵɵlistener("click", function TimelineComponent_ng_template_7_ng_template_7_div_11_ng_template_2_button_0_Template_button_click_0_listener($event) { const action_r28 = i0.ɵɵrestoreView(_r27).$implicit; const ctx_r22 = i0.ɵɵnextContext(4); const event_r17 = ctx_r22.event; const globalIndex_r19 = ctx_r22.globalIndex; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onActionClick(event_r17, action_r28, globalIndex_r19, $event)); });
535
- i0.ɵɵtemplate(1, TimelineComponent_ng_template_7_ng_template_7_div_11_ng_template_2_button_0_i_1_Template, 1, 1, "i", 80);
480
+ function TimelineComponent_ng_template_7_Conditional_7_Conditional_9_Conditional_2_For_1_Template(rf, ctx) { if (rf & 1) {
481
+ const _r21 = i0.ɵɵgetCurrentView();
482
+ i0.ɵɵelementStart(0, "button", 56);
483
+ 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);
536
485
  i0.ɵɵelementStart(2, "span");
537
486
  i0.ɵɵtext(3);
538
487
  i0.ɵɵelementEnd()();
539
488
  } if (rf & 2) {
540
- const action_r28 = ctx.$implicit;
541
- i0.ɵɵclassProp("mj-timeline__action--primary", action_r28.variant === "primary")("mj-timeline__action--secondary", action_r28.variant === "secondary" || !action_r28.variant)("mj-timeline__action--danger", action_r28.variant === "danger")("mj-timeline__action--link", action_r28.variant === "link");
542
- i0.ɵɵproperty("ngClass", action_r28.cssClass)("disabled", action_r28.disabled)("title", action_r28.tooltip || "");
489
+ const action_r22 = ctx.$implicit;
490
+ i0.ɵɵclassProp("mj-timeline__action--primary", action_r22.variant === "primary")("mj-timeline__action--secondary", action_r22.variant === "secondary" || !action_r22.variant)("mj-timeline__action--danger", action_r22.variant === "danger")("mj-timeline__action--link", action_r22.variant === "link");
491
+ i0.ɵɵproperty("ngClass", action_r22.cssClass)("disabled", action_r22.disabled)("title", action_r22.tooltip || "");
543
492
  i0.ɵɵadvance();
544
- i0.ɵɵproperty("ngIf", action_r28.icon);
493
+ i0.ɵɵconditional(action_r22.icon ? 1 : -1);
545
494
  i0.ɵɵadvance(2);
546
- i0.ɵɵtextInterpolate(action_r28.label);
495
+ i0.ɵɵtextInterpolate(action_r22.label);
547
496
  } }
548
- function TimelineComponent_ng_template_7_ng_template_7_div_11_ng_template_2_Template(rf, ctx) { if (rf & 1) {
549
- i0.ɵɵtemplate(0, TimelineComponent_ng_template_7_ng_template_7_div_11_ng_template_2_button_0_Template, 4, 13, "button", 78);
497
+ 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);
550
499
  } if (rf & 2) {
551
- const event_r17 = i0.ɵɵnextContext(3).event;
500
+ const event_r12 = i0.ɵɵnextContext(3).event;
552
501
  const ctx_r1 = i0.ɵɵnextContext();
553
- i0.ɵɵproperty("ngForOf", ctx_r1.getActions(event_r17));
502
+ i0.ɵɵrepeater(ctx_r1.getActions(event_r12));
554
503
  } }
555
- function TimelineComponent_ng_template_7_ng_template_7_div_11_Template(rf, ctx) { if (rf & 1) {
556
- i0.ɵɵelementStart(0, "div", 77);
557
- i0.ɵɵtemplate(1, TimelineComponent_ng_template_7_ng_template_7_div_11_ng_container_1_Template, 2, 5, "ng-container", 14)(2, TimelineComponent_ng_template_7_ng_template_7_div_11_ng_template_2_Template, 1, 1, "ng-template", null, 9, i0.ɵɵtemplateRefExtractor);
504
+ function TimelineComponent_ng_template_7_Conditional_7_Conditional_9_Template(rf, ctx) { if (rf & 1) {
505
+ i0.ɵɵelementStart(0, "div", 54);
506
+ 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);
558
507
  i0.ɵɵelementEnd();
559
508
  } if (rf & 2) {
560
- const defaultActions_r29 = i0.ɵɵreference(3);
561
- const event_r17 = i0.ɵɵnextContext(2).event;
509
+ const event_r12 = i0.ɵɵnextContext(2).event;
562
510
  const ctx_r1 = i0.ɵɵnextContext();
563
- i0.ɵɵclassProp("mj-timeline__card-actions--hover-only", ctx_r1.getEffectiveCardConfig(event_r17).actionsOnHover);
511
+ i0.ɵɵclassProp("mj-timeline__card-actions--hover-only", ctx_r1.getEffectiveCardConfig(event_r12).actionsOnHover);
564
512
  i0.ɵɵadvance();
565
- i0.ɵɵproperty("ngIf", ctx_r1.actionsTemplate)("ngIfElse", defaultActions_r29);
513
+ i0.ɵɵconditional(ctx_r1.actionsTemplate ? 1 : 2);
566
514
  } }
567
- function TimelineComponent_ng_template_7_ng_template_7_Template(rf, ctx) { if (rf & 1) {
568
- i0.ɵɵelementStart(0, "div", 44);
569
- i0.ɵɵtemplate(1, TimelineComponent_ng_template_7_ng_template_7_div_1_Template, 2, 8, "div", 45);
570
- i0.ɵɵelementStart(2, "div", 46);
571
- i0.ɵɵtemplate(3, TimelineComponent_ng_template_7_ng_template_7_ng_container_3_Template, 2, 4, "ng-container", 14)(4, TimelineComponent_ng_template_7_ng_template_7_ng_template_4_Template, 7, 5, "ng-template", null, 6, i0.ɵɵtemplateRefExtractor);
515
+ 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);
519
+ 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);
572
520
  i0.ɵɵelementEnd()();
573
- i0.ɵɵtemplate(6, TimelineComponent_ng_template_7_ng_template_7_div_6_Template, 2, 2, "div", 47);
574
- i0.ɵɵelementStart(7, "div", 48);
575
- i0.ɵɵtemplate(8, TimelineComponent_ng_template_7_ng_template_7_ng_container_8_Template, 2, 4, "ng-container", 14)(9, TimelineComponent_ng_template_7_ng_template_7_ng_template_9_Template, 3, 3, "ng-template", null, 7, i0.ɵɵtemplateRefExtractor);
521
+ i0.ɵɵconditionalCreate(5, TimelineComponent_ng_template_7_Conditional_7_Conditional_5_Template, 2, 2, "div", 32);
522
+ i0.ɵɵelementStart(6, "div", 33);
523
+ 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);
576
524
  i0.ɵɵelementEnd();
577
- i0.ɵɵtemplate(11, TimelineComponent_ng_template_7_ng_template_7_div_11_Template, 4, 4, "div", 49);
525
+ i0.ɵɵconditionalCreate(9, TimelineComponent_ng_template_7_Conditional_7_Conditional_9_Template, 3, 3, "div", 34);
578
526
  } if (rf & 2) {
579
- const defaultHeader_r30 = i0.ɵɵreference(5);
580
- const defaultBody_r31 = i0.ɵɵreference(10);
581
- const event_r17 = i0.ɵɵnextContext().event;
527
+ const event_r12 = i0.ɵɵnextContext().event;
582
528
  const ctx_r1 = i0.ɵɵnextContext();
583
529
  i0.ɵɵadvance();
584
- i0.ɵɵproperty("ngIf", event_r17.imageUrl && ctx_r1.getEffectiveCardConfig(event_r17).imagePosition === "left");
530
+ i0.ɵɵconditional(event_r12.imageUrl && ctx_r1.getEffectiveCardConfig(event_r12).imagePosition === "left" ? 1 : -1);
585
531
  i0.ɵɵadvance(2);
586
- i0.ɵɵproperty("ngIf", ctx_r1.headerTemplate)("ngIfElse", defaultHeader_r30);
587
- i0.ɵɵadvance(3);
588
- i0.ɵɵproperty("ngIf", event_r17.imageUrl && ctx_r1.getEffectiveCardConfig(event_r17).imagePosition === "top");
532
+ i0.ɵɵconditional(ctx_r1.headerTemplate ? 3 : 4);
533
+ i0.ɵɵadvance(2);
534
+ i0.ɵɵconditional(event_r12.imageUrl && ctx_r1.getEffectiveCardConfig(event_r12).imagePosition === "top" ? 5 : -1);
589
535
  i0.ɵɵadvance();
590
- i0.ɵɵclassProp("mj-timeline__card-body--collapsed", !event_r17.isExpanded && ctx_r1.getEffectiveCardConfig(event_r17).collapsible);
536
+ i0.ɵɵclassProp("mj-timeline__card-body--collapsed", !event_r12.isExpanded && ctx_r1.getEffectiveCardConfig(event_r12).collapsible);
591
537
  i0.ɵɵadvance();
592
- i0.ɵɵproperty("ngIf", ctx_r1.bodyTemplate)("ngIfElse", defaultBody_r31);
593
- i0.ɵɵadvance(3);
594
- i0.ɵɵproperty("ngIf", ctx_r1.getActions(event_r17).length > 0);
538
+ i0.ɵɵconditional(ctx_r1.bodyTemplate ? 7 : 8);
539
+ i0.ɵɵadvance(2);
540
+ i0.ɵɵconditional(ctx_r1.getActions(event_r12).length > 0 ? 9 : -1);
595
541
  } }
596
542
  function TimelineComponent_ng_template_7_Template(rf, ctx) { if (rf & 1) {
597
- const _r16 = i0.ɵɵgetCurrentView();
598
- i0.ɵɵelementStart(0, "div", 37)(1, "div", 38);
599
- i0.ɵɵelement(2, "i", 39);
543
+ const _r11 = i0.ɵɵgetCurrentView();
544
+ i0.ɵɵelementStart(0, "div", 23)(1, "div", 24);
545
+ i0.ɵɵelement(2, "i", 25);
600
546
  i0.ɵɵelementEnd();
601
- i0.ɵɵelement(3, "div", 40);
602
- i0.ɵɵtemplate(4, TimelineComponent_ng_template_7_div_4_Template, 2, 1, "div", 41);
603
- i0.ɵɵelementStart(5, "div", 42);
604
- i0.ɵɵlistener("click", function TimelineComponent_ng_template_7_Template_div_click_5_listener($event) { const ctx_r17 = i0.ɵɵrestoreView(_r16); const event_r17 = ctx_r17.event; const globalIndex_r19 = ctx_r17.globalIndex; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onEventClick(event_r17, globalIndex_r19, $event)); })("mouseenter", function TimelineComponent_ng_template_7_Template_div_mouseenter_5_listener($event) { const ctx_r19 = i0.ɵɵrestoreView(_r16); const event_r17 = ctx_r19.event; const globalIndex_r19 = ctx_r19.globalIndex; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onEventMouseEnter(event_r17, globalIndex_r19, $event)); })("mouseleave", function TimelineComponent_ng_template_7_Template_div_mouseleave_5_listener($event) { const ctx_r20 = i0.ɵɵrestoreView(_r16); const event_r17 = ctx_r20.event; const globalIndex_r19 = ctx_r20.globalIndex; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onEventMouseLeave(event_r17, globalIndex_r19, $event)); });
605
- i0.ɵɵtemplate(6, TimelineComponent_ng_template_7_ng_container_6_Template, 2, 5, "ng-container", 14)(7, TimelineComponent_ng_template_7_ng_template_7_Template, 12, 9, "ng-template", null, 5, i0.ɵɵtemplateRefExtractor);
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);
550
+ 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
+ i0.ɵɵconditionalCreate(6, TimelineComponent_ng_template_7_Conditional_6_Template, 1, 5, "ng-container")(7, TimelineComponent_ng_template_7_Conditional_7_Template, 10, 7);
606
552
  i0.ɵɵelementEnd()();
607
553
  } if (rf & 2) {
608
- const event_r17 = ctx.event;
609
- const isOdd_r32 = ctx.isOdd;
610
- const globalIndex_r19 = ctx.globalIndex;
611
- const defaultCard_r33 = i0.ɵɵreference(8);
554
+ const event_r12 = ctx.event;
555
+ const isOdd_r23 = ctx.isOdd;
556
+ const globalIndex_r14 = ctx.globalIndex;
612
557
  const ctx_r1 = i0.ɵɵnextContext();
613
- i0.ɵɵclassProp("mj-timeline__event--odd", isOdd_r32 && ctx_r1.layout === "alternating")("mj-timeline__event--even", !isOdd_r32 && ctx_r1.layout === "alternating")("mj-timeline__event--expanded", event_r17.isExpanded)("mj-timeline__event--focused", ctx_r1.isEventSelected(event_r17, globalIndex_r19));
614
- i0.ɵɵattribute("data-event-id", event_r17.id)("aria-expanded", event_r17.isExpanded);
558
+ i0.ɵɵclassProp("mj-timeline__event--odd", isOdd_r23 && ctx_r1.layout === "alternating")("mj-timeline__event--even", !isOdd_r23 && ctx_r1.layout === "alternating")("mj-timeline__event--expanded", event_r12.isExpanded)("mj-timeline__event--focused", ctx_r1.isEventSelected(event_r12, globalIndex_r14));
559
+ i0.ɵɵattribute("data-event-id", event_r12.id)("aria-expanded", event_r12.isExpanded);
615
560
  i0.ɵɵadvance();
616
- i0.ɵɵstyleProp("background-color", ctx_r1.getColor(event_r17));
561
+ i0.ɵɵstyleProp("background-color", ctx_r1.getColor(event_r12));
617
562
  i0.ɵɵadvance();
618
- i0.ɵɵclassMap(ctx_r1.getIcon(event_r17));
563
+ i0.ɵɵclassMap(ctx_r1.getIcon(event_r12));
619
564
  i0.ɵɵadvance();
620
- i0.ɵɵstyleProp("background-color", ctx_r1.getColor(event_r17));
565
+ i0.ɵɵstyleProp("background-color", ctx_r1.getColor(event_r12));
621
566
  i0.ɵɵadvance();
622
- i0.ɵɵproperty("ngIf", ctx_r1.layout === "alternating");
567
+ i0.ɵɵconditional(ctx_r1.layout === "alternating" ? 4 : -1);
623
568
  i0.ɵɵadvance();
624
- i0.ɵɵstyleProp("max-width", ctx_r1.getEffectiveCardConfig(event_r17).maxWidth)("min-width", ctx_r1.getEffectiveCardConfig(event_r17).minWidth)("border-left-color", ctx_r1.getColor(event_r17));
625
- i0.ɵɵproperty("ngClass", ctx_r1.getEffectiveCardConfig(event_r17).cssClass);
569
+ i0.ɵɵstyleProp("max-width", ctx_r1.getEffectiveCardConfig(event_r12).maxWidth)("min-width", ctx_r1.getEffectiveCardConfig(event_r12).minWidth)("border-left-color", ctx_r1.getColor(event_r12));
570
+ i0.ɵɵproperty("ngClass", ctx_r1.getEffectiveCardConfig(event_r12).cssClass);
626
571
  i0.ɵɵadvance();
627
- i0.ɵɵproperty("ngIf", ctx_r1.cardTemplate)("ngIfElse", defaultCard_r33);
572
+ i0.ɵɵconditional(ctx_r1.cardTemplate ? 6 : 7);
628
573
  } }
629
574
  // ============================================================================
630
575
  // AUTO-ASSIGNED COLORS FOR GROUPS
@@ -1958,13 +1903,7 @@ export class TimelineComponent {
1958
1903
  }
1959
1904
  static ɵfac = function TimelineComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TimelineComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.NgZone)); };
1960
1905
  static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TimelineComponent, selectors: [["mj-timeline"]], contentQueries: function TimelineComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
1961
- i0.ɵɵcontentQuery(dirIndex, _c0, 5);
1962
- i0.ɵɵcontentQuery(dirIndex, _c1, 5);
1963
- i0.ɵɵcontentQuery(dirIndex, _c2, 5);
1964
- i0.ɵɵcontentQuery(dirIndex, _c3, 5);
1965
- i0.ɵɵcontentQuery(dirIndex, _c4, 5);
1966
- i0.ɵɵcontentQuery(dirIndex, _c5, 5);
1967
- i0.ɵɵcontentQuery(dirIndex, _c6, 5);
1906
+ i0.ɵɵcontentQuery(dirIndex, _c0, 5)(dirIndex, _c1, 5)(dirIndex, _c2, 5)(dirIndex, _c3, 5)(dirIndex, _c4, 5)(dirIndex, _c5, 5)(dirIndex, _c6, 5);
1968
1907
  } if (rf & 2) {
1969
1908
  let _t;
1970
1909
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.cardTemplate = _t.first);
@@ -1979,31 +1918,35 @@ export class TimelineComponent {
1979
1918
  } if (rf & 2) {
1980
1919
  let _t;
1981
1920
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.scrollContainer = _t.first);
1982
- } }, inputs: { groups: "groups", allowLoad: "allowLoad", orientation: "orientation", layout: "layout", sortOrder: "sortOrder", segmentGrouping: "segmentGrouping", defaultCardConfig: "defaultCardConfig", virtualScroll: "virtualScroll", segmentsCollapsible: "segmentsCollapsible", segmentsDefaultExpanded: "segmentsDefaultExpanded", emptyMessage: "emptyMessage", emptyIcon: "emptyIcon", loadingMessage: "loadingMessage", ariaLabel: "ariaLabel", enableKeyboardNavigation: "enableKeyboardNavigation", selectedEventId: "selectedEventId" }, outputs: { beforeEventClick: "beforeEventClick", beforeEventExpand: "beforeEventExpand", beforeEventCollapse: "beforeEventCollapse", beforeEventHover: "beforeEventHover", beforeActionClick: "beforeActionClick", beforeSegmentExpand: "beforeSegmentExpand", beforeSegmentCollapse: "beforeSegmentCollapse", beforeLoad: "beforeLoad", afterEventClick: "afterEventClick", afterEventExpand: "afterEventExpand", afterEventCollapse: "afterEventCollapse", afterEventHover: "afterEventHover", afterActionClick: "afterActionClick", afterSegmentExpand: "afterSegmentExpand", afterSegmentCollapse: "afterSegmentCollapse", afterLoad: "afterLoad" }, decls: 9, vars: 14, consts: [["scrollContainer", ""], ["eventCard", ""], ["defaultLoading", ""], ["defaultEmpty", ""], ["defaultSegmentHeader", ""], ["defaultCard", ""], ["defaultHeader", ""], ["defaultBody", ""], ["plainDescription", ""], ["defaultActions", ""], ["role", "list", "tabindex", "0", 1, "mj-timeline", 3, "keydown", "scroll"], [4, "ngIf"], ["class", "mj-timeline-scroll-sentinel", 4, "ngIf"], ["class", "mj-timeline__loading-more", 4, "ngIf"], [4, "ngIf", "ngIfElse"], [4, "ngTemplateOutlet"], [1, "mj-timeline__loading"], [1, "mj-timeline__loading-spinner"], [1, "mj-timeline__loading-text"], [1, "mj-timeline__empty"], [1, "mj-timeline__empty-icon"], [1, "mj-timeline__empty-text"], ["class", "mj-timeline__segment", 3, "mj-timeline__segment--collapsed", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "mj-timeline__segment"], ["role", "button", 1, "mj-timeline__segment-header", 3, "click"], [1, "mj-timeline__segment-content", 3, "id"], [1, "mj-timeline__axis"], [4, "ngFor", "ngForOf", "ngForTrackBy"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["class", "mj-timeline__segment-toggle", 4, "ngIf"], [1, "mj-timeline__segment-label"], [1, "mj-timeline__segment-count"], [1, "mj-timeline__segment-line"], [1, "mj-timeline__segment-toggle"], [1, "mj-timeline-scroll-sentinel"], [1, "mj-timeline__loading-more"], [1, "mj-timeline__loading-spinner", "mj-timeline__loading-spinner--small"], ["role", "listitem", 1, "mj-timeline__event"], [1, "mj-timeline__marker"], [1, "mj-timeline__marker-icon"], [1, "mj-timeline__connector"], ["class", "mj-timeline__date-label", 4, "ngIf"], [1, "mj-timeline__card", 3, "click", "mouseenter", "mouseleave", "ngClass"], [1, "mj-timeline__date-label"], [1, "mj-timeline__card-header"], ["class", "mj-timeline__card-image mj-timeline__card-image--left", 3, "mj-timeline__card-image--small", "mj-timeline__card-image--medium", "mj-timeline__card-image--large", 4, "ngIf"], [1, "mj-timeline__card-header-content"], ["class", "mj-timeline__card-image mj-timeline__card-image--top", 4, "ngIf"], [1, "mj-timeline__card-body"], ["class", "mj-timeline__card-actions", 3, "mj-timeline__card-actions--hover-only", 4, "ngIf"], [1, "mj-timeline__card-image", "mj-timeline__card-image--left"], [3, "src", "alt"], ["class", "mj-timeline__card-icon", 3, "color", 4, "ngIf"], [1, "mj-timeline__card-titles"], [1, "mj-timeline__card-title"], ["class", "mj-timeline__card-subtitle", 4, "ngIf"], ["class", "mj-timeline__card-date", 4, "ngIf"], ["class", "mj-timeline__card-toggle", "type", "button", 3, "click", 4, "ngIf"], [1, "mj-timeline__card-icon"], [1, "mj-timeline__card-subtitle"], [1, "mj-timeline__card-date"], ["type", "button", 1, "mj-timeline__card-toggle", 3, "click"], [1, "mj-timeline__card-image", "mj-timeline__card-image--top"], ["class", "mj-timeline__card-fields mj-timeline__card-fields--summary", 4, "ngIf"], ["class", "mj-timeline__card-description", 3, "mj-timeline__card-description--clamped", "-webkit-line-clamp", 4, "ngIf"], ["class", "mj-timeline__card-fields mj-timeline__card-fields--expanded", 4, "ngIf"], [1, "mj-timeline__card-fields", "mj-timeline__card-fields--summary"], [4, "ngFor", "ngForOf"], [1, "mj-timeline__card-field", 3, "ngClass"], ["class", "mj-timeline__card-field-icon", 3, "ngClass", 4, "ngIf"], ["class", "mj-timeline__card-field-label", 4, "ngIf"], [1, "mj-timeline__card-field-value"], [1, "mj-timeline__card-field-icon", 3, "ngClass"], [1, "mj-timeline__card-field-label"], [1, "mj-timeline__card-description"], [3, "innerHTML"], [1, "mj-timeline__card-fields", "mj-timeline__card-fields--expanded"], [1, "mj-timeline__card-actions"], ["class", "mj-timeline__action", "type", "button", 3, "mj-timeline__action--primary", "mj-timeline__action--secondary", "mj-timeline__action--danger", "mj-timeline__action--link", "ngClass", "disabled", "title", "click", 4, "ngFor", "ngForOf"], ["type", "button", 1, "mj-timeline__action", 3, "click", "ngClass", "disabled", "title"], [3, "ngClass", 4, "ngIf"], [3, "ngClass"]], template: function TimelineComponent_Template(rf, ctx) { if (rf & 1) {
1921
+ } }, 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) {
1983
1922
  const _r1 = i0.ɵɵgetCurrentView();
1984
- i0.ɵɵelementStart(0, "div", 10, 0);
1923
+ i0.ɵɵelementStart(0, "div", 2, 0);
1985
1924
  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)); });
1986
- i0.ɵɵtemplate(2, TimelineComponent_ng_container_2_Template, 4, 2, "ng-container", 11)(3, TimelineComponent_ng_container_3_Template, 4, 2, "ng-container", 11)(4, TimelineComponent_ng_container_4_Template, 3, 2, "ng-container", 11)(5, TimelineComponent_div_5_Template, 1, 0, "div", 12)(6, TimelineComponent_div_6_Template, 4, 1, "div", 13);
1925
+ i0.ɵɵconditionalCreate(2, TimelineComponent_Conditional_2_Template, 2, 1);
1926
+ i0.ɵɵconditionalCreate(3, TimelineComponent_Conditional_3_Template, 2, 1);
1927
+ i0.ɵɵconditionalCreate(4, TimelineComponent_Conditional_4_Template, 2, 2);
1928
+ i0.ɵɵconditionalCreate(5, TimelineComponent_Conditional_5_Template, 1, 0, "div", 3);
1929
+ i0.ɵɵconditionalCreate(6, TimelineComponent_Conditional_6_Template, 4, 1, "div", 4);
1987
1930
  i0.ɵɵelementEnd();
1988
- i0.ɵɵtemplate(7, TimelineComponent_ng_template_7_Template, 9, 26, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
1931
+ i0.ɵɵtemplate(7, TimelineComponent_ng_template_7_Template, 8, 25, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
1989
1932
  } if (rf & 2) {
1990
1933
  i0.ɵɵclassProp("mj-timeline--vertical", ctx.orientation === "vertical")("mj-timeline--horizontal", ctx.orientation === "horizontal")("mj-timeline--single", ctx.layout === "single")("mj-timeline--alternating", ctx.layout === "alternating");
1991
1934
  i0.ɵɵattribute("aria-label", ctx.ariaLabel);
1992
1935
  i0.ɵɵadvance(2);
1993
- i0.ɵɵproperty("ngIf", ctx.isLoading && !ctx.isInitialized);
1936
+ i0.ɵɵconditional(ctx.isLoading && !ctx.isInitialized ? 2 : -1);
1994
1937
  i0.ɵɵadvance();
1995
- i0.ɵɵproperty("ngIf", ctx.isInitialized && ctx.allEvents.length === 0 && !ctx.isLoading);
1938
+ i0.ɵɵconditional(ctx.isInitialized && ctx.allEvents.length === 0 && !ctx.isLoading ? 3 : -1);
1996
1939
  i0.ɵɵadvance();
1997
- i0.ɵɵproperty("ngIf", ctx.isInitialized && ctx.allEvents.length > 0);
1940
+ i0.ɵɵconditional(ctx.isInitialized && ctx.allEvents.length > 0 ? 4 : -1);
1998
1941
  i0.ɵɵadvance();
1999
- i0.ɵɵproperty("ngIf", ctx.virtualScroll.enabled && ctx.scrollState.hasMore);
1942
+ i0.ɵɵconditional(ctx.virtualScroll.enabled && ctx.scrollState.hasMore ? 5 : -1);
2000
1943
  i0.ɵɵadvance();
2001
- i0.ɵɵproperty("ngIf", ctx.scrollState.isLoading && ctx.virtualScroll.showLoadingIndicator);
2002
- } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet], styles: ["/**\n * MJ Timeline Component Styles\n * Kendo-inspired design with vertical alternating and horizontal layouts\n */\n\n/* ============================================================================\n CSS VARIABLES (Theming)\n ============================================================================ */\n\nmj-timeline {\n /* Colors */\n --mj-timeline-bg: transparent;\n --mj-timeline-line-color: #d0d7de;\n --mj-timeline-marker-bg: #ffffff;\n --mj-timeline-marker-border: #4678a8;\n --mj-timeline-marker-fill: #4678a8;\n --mj-timeline-card-bg: #ffffff;\n --mj-timeline-card-border: #d0d7de;\n --mj-timeline-card-shadow: 0 1px 3px rgba(31, 35, 40, 0.08);\n --mj-timeline-card-shadow-hover: 0 4px 12px rgba(31, 35, 40, 0.12);\n --mj-timeline-card-radius: 6px;\n --mj-timeline-text-primary: #1f2328;\n --mj-timeline-text-secondary: #656d76;\n --mj-timeline-text-muted: #8c959f;\n --mj-timeline-accent: #4678a8;\n --mj-timeline-accent-light: rgba(70, 120, 168, 0.08);\n --mj-timeline-segment-bg: #4678a8;\n --mj-timeline-segment-text: #ffffff;\n --mj-timeline-focus-ring: 0 0 0 2px rgba(70, 120, 168, 0.3);\n\n /* Sizing */\n --mj-timeline-line-width: 2px;\n --mj-timeline-marker-size: 14px;\n --mj-timeline-card-padding: 16px;\n --mj-timeline-card-max-width: 400px;\n --mj-timeline-card-min-width: 200px;\n --mj-timeline-gap: 24px;\n --mj-timeline-segment-gap: 16px;\n --mj-timeline-axis-offset: 50%;\n\n /* Animation */\n --mj-timeline-transition: 0.15s ease;\n\n display: block;\n width: 100%;\n height: 100%;\n}\n\n/* Dark mode */\n.dark-theme mj-timeline,\n[data-theme=\"dark\"] mj-timeline {\n --mj-timeline-line-color: #3d444d;\n --mj-timeline-card-bg: #161b22;\n --mj-timeline-card-border: #3d444d;\n --mj-timeline-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\n --mj-timeline-text-primary: #e6edf3;\n --mj-timeline-text-secondary: #8b949e;\n --mj-timeline-text-muted: #6e7681;\n --mj-timeline-accent: #58a6ff;\n --mj-timeline-accent-light: rgba(88, 166, 255, 0.1);\n --mj-timeline-marker-border: #58a6ff;\n --mj-timeline-marker-fill: #58a6ff;\n --mj-timeline-segment-bg: #58a6ff;\n}\n\n/* ============================================================================\n MAIN CONTAINER\n ============================================================================ */\n\n.mj-timeline {\n position: relative;\n width: 100%;\n height: 100%;\n padding: 0;\n background: var(--mj-timeline-bg);\n outline: none;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n/* Subtle scrollbar */\n.mj-timeline::-webkit-scrollbar {\n width: 6px;\n}\n\n.mj-timeline::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.mj-timeline::-webkit-scrollbar-thumb {\n background: rgba(0, 0, 0, 0.15);\n border-radius: 3px;\n}\n\n.mj-timeline::-webkit-scrollbar-thumb:hover {\n background: rgba(0, 0, 0, 0.25);\n}\n\n.mj-timeline:focus-visible {\n box-shadow: inset var(--mj-timeline-focus-ring);\n}\n\n/* ============================================================================\n LOADING & EMPTY STATES\n ============================================================================ */\n\n.mj-timeline__loading {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 48px 24px;\n gap: 12px;\n}\n\n.mj-timeline__loading-spinner {\n width: 24px;\n height: 24px;\n border: 2px solid var(--mj-timeline-line-color);\n border-top-color: var(--mj-timeline-accent);\n border-radius: 50%;\n animation: mj-timeline-spin 0.6s linear infinite;\n}\n\n.mj-timeline__loading-spinner--small {\n width: 14px;\n height: 14px;\n}\n\n.mj-timeline__loading-text {\n color: var(--mj-timeline-text-muted);\n font-size: 13px;\n}\n\n.mj-timeline__loading-more {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px;\n gap: 8px;\n color: var(--mj-timeline-text-muted);\n font-size: 12px;\n}\n\n@keyframes mj-timeline-spin {\n to { transform: rotate(360deg); }\n}\n\n.mj-timeline__empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 64px 24px;\n gap: 8px;\n text-align: center;\n}\n\n.mj-timeline__empty-icon {\n font-size: 32px;\n color: var(--mj-timeline-text-muted);\n opacity: 0.4;\n}\n\n.mj-timeline__empty-text {\n color: var(--mj-timeline-text-secondary);\n font-size: 13px;\n}\n\n/* ============================================================================\n TIME SEGMENTS - Year/Month badges on the axis\n ============================================================================ */\n\n.mj-timeline__segment {\n margin-bottom: var(--mj-timeline-segment-gap);\n position: relative;\n}\n\n.mj-timeline__segment:last-child {\n margin-bottom: 0;\n}\n\n.mj-timeline__segment-header {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 6px 16px;\n margin-bottom: var(--mj-timeline-gap);\n background: var(--mj-timeline-segment-bg);\n border-radius: 4px;\n font-weight: 600;\n font-size: 13px;\n color: var(--mj-timeline-segment-text);\n user-select: none;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n position: relative;\n z-index: 10;\n}\n\n.mj-timeline__segment-header--clickable {\n cursor: pointer;\n transition: all var(--mj-timeline-transition);\n}\n\n.mj-timeline__segment-header--clickable:hover {\n filter: brightness(1.1);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);\n}\n\n.mj-timeline__segment-toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n color: inherit;\n font-size: 10px;\n opacity: 0.9;\n transition: transform var(--mj-timeline-transition);\n}\n\n.mj-timeline__segment--collapsed .mj-timeline__segment-toggle {\n transform: rotate(-90deg);\n}\n\n.mj-timeline__segment-label {\n font-size: inherit;\n font-weight: inherit;\n color: inherit;\n}\n\n.mj-timeline__segment-count {\n display: none;\n}\n\n.mj-timeline__segment-line {\n display: none;\n}\n\n.mj-timeline__segment-content {\n overflow: visible;\n transition: max-height 0.25s ease, opacity 0.2s ease;\n padding-top: 8px;\n}\n\n.mj-timeline__segment-content--hidden {\n max-height: 0;\n opacity: 0;\n pointer-events: none;\n}\n\n/* ============================================================================\n TIMELINE AXIS - Vertical line in center\n ============================================================================ */\n\n.mj-timeline__axis {\n position: relative;\n padding-left: 0;\n}\n\n/* Vertical center line */\n.mj-timeline__axis::before {\n content: '';\n position: absolute;\n left: 50%;\n top: 0;\n bottom: 0;\n width: var(--mj-timeline-line-width);\n background: var(--mj-timeline-line-color);\n transform: translateX(-50%);\n}\n\n/* ============================================================================\n TIMELINE EVENT - Alternating left/right by default\n ============================================================================ */\n\n.mj-timeline__event {\n position: relative;\n display: flex;\n align-items: flex-start;\n margin-bottom: var(--mj-timeline-gap);\n width: 100%;\n}\n\n/* Even events (0, 2, 4...) - card on LEFT, date on RIGHT */\n.mj-timeline__event {\n padding-right: calc(50% + 32px);\n justify-content: flex-end;\n}\n\n/* Odd events (1, 3, 5...) - card on RIGHT, date on LEFT */\n.mj-timeline__event--odd {\n padding-right: 0;\n padding-left: calc(50% + 32px);\n justify-content: flex-start;\n flex-direction: row;\n}\n\n.mj-timeline__event:last-child {\n margin-bottom: 0;\n}\n\n/* ============================================================================\n MARKER - Circular dot on the axis\n ============================================================================ */\n\n.mj-timeline__marker {\n position: absolute;\n left: 50%;\n top: 12px;\n transform: translateX(-50%);\n width: var(--mj-timeline-marker-size);\n height: var(--mj-timeline-marker-size);\n background: var(--mj-timeline-marker-fill);\n border: 2px solid var(--mj-timeline-marker-bg);\n border-radius: 50%;\n box-shadow: 0 0 0 2px var(--mj-timeline-marker-fill);\n z-index: 5;\n transition: transform var(--mj-timeline-transition);\n}\n\n.mj-timeline__marker-icon {\n display: none;\n}\n\n.mj-timeline__event:hover .mj-timeline__marker {\n transform: translateX(-50%) scale(1.2);\n}\n\n.mj-timeline__connector {\n display: none;\n}\n\n/* ============================================================================\n DATE LABEL - Positioned opposite the card\n ============================================================================ */\n\n.mj-timeline__date-label {\n position: absolute;\n top: 10px;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-timeline-text-secondary);\n white-space: nowrap;\n}\n\n/* Even events - date on RIGHT side of axis */\n.mj-timeline__event:not(.mj-timeline__event--odd) .mj-timeline__date-label {\n left: calc(50% + 24px);\n text-align: left;\n}\n\n/* Odd events - date on LEFT side of axis */\n.mj-timeline__event--odd .mj-timeline__date-label {\n right: calc(50% + 24px);\n text-align: right;\n}\n\n/* ============================================================================\n EVENT CARD - Clean design matching Kendo\n ============================================================================ */\n\n.mj-timeline__card {\n background: var(--mj-timeline-card-bg);\n border: 1px solid var(--mj-timeline-card-border);\n border-radius: var(--mj-timeline-card-radius);\n box-shadow: var(--mj-timeline-card-shadow);\n overflow: hidden;\n transition: all var(--mj-timeline-transition);\n cursor: pointer;\n max-width: var(--mj-timeline-card-max-width);\n min-width: var(--mj-timeline-card-min-width);\n width: 100%;\n}\n\n/* Card arrow/pointer toward the axis */\n.mj-timeline__card::before {\n content: '';\n position: absolute;\n top: 14px;\n width: 10px;\n height: 10px;\n background: var(--mj-timeline-card-bg);\n border: 1px solid var(--mj-timeline-card-border);\n transform: rotate(45deg);\n}\n\n/* Even events - arrow points RIGHT toward axis */\n.mj-timeline__event:not(.mj-timeline__event--odd) .mj-timeline__card::before {\n right: -6px;\n border-left: none;\n border-bottom: none;\n}\n\n/* Odd events - arrow points LEFT toward axis */\n.mj-timeline__event--odd .mj-timeline__card::before {\n left: -6px;\n border-right: none;\n border-top: none;\n}\n\n/* Hover state */\n.mj-timeline__card:hover {\n box-shadow: var(--mj-timeline-card-shadow-hover);\n border-color: var(--mj-timeline-accent);\n}\n\n/* Selected/Focused state - prominent highlight with animation */\n.mj-timeline__event--focused .mj-timeline__card {\n background: var(--mj-timeline-accent-light);\n border-color: var(--mj-timeline-accent);\n box-shadow:\n 0 0 0 3px var(--mj-timeline-accent),\n 0 8px 24px rgba(70, 120, 168, 0.25);\n transform: scale(1.02);\n}\n\n/* Selected marker - larger and more prominent */\n.mj-timeline__event--focused .mj-timeline__marker {\n transform: translateX(-50%) scale(1.4);\n box-shadow:\n 0 0 0 3px var(--mj-timeline-marker-fill),\n 0 0 12px rgba(70, 120, 168, 0.5);\n}\n\n/* Pulse animation for selected marker */\n.mj-timeline__event--focused .mj-timeline__marker::after {\n content: '';\n position: absolute;\n top: -4px;\n left: -4px;\n right: -4px;\n bottom: -4px;\n border-radius: 50%;\n border: 2px solid var(--mj-timeline-accent);\n animation: mj-timeline-pulse 1.5s ease-out infinite;\n}\n\n@keyframes mj-timeline-pulse {\n 0% {\n transform: scale(1);\n opacity: 0.8;\n }\n 100% {\n transform: scale(1.8);\n opacity: 0;\n }\n}\n\n/* Selected date label - bolder */\n.mj-timeline__event--focused .mj-timeline__date-label {\n color: var(--mj-timeline-accent);\n font-weight: 600;\n}\n\n/* Card arrow gets accent color when selected */\n.mj-timeline__event--focused .mj-timeline__card::before {\n border-color: var(--mj-timeline-accent);\n background: var(--mj-timeline-accent-light);\n}\n\n/* ============================================================================\n CARD HEADER\n ============================================================================ */\n\n.mj-timeline__card-header {\n display: flex;\n align-items: flex-start;\n padding: var(--mj-timeline-card-padding);\n gap: 10px;\n}\n\n.mj-timeline__card-header-content {\n flex: 1;\n display: flex;\n align-items: flex-start;\n gap: 10px;\n min-width: 0;\n}\n\n.mj-timeline__card-icon {\n display: none;\n}\n\n.mj-timeline__card-titles {\n flex: 1;\n min-width: 0;\n}\n\n.mj-timeline__card-title {\n margin: 0;\n font-size: 15px;\n font-weight: 600;\n color: var(--mj-timeline-text-primary);\n line-height: 1.35;\n}\n\n.mj-timeline__card-subtitle {\n display: block;\n font-size: 13px;\n color: var(--mj-timeline-text-secondary);\n margin-top: 4px;\n}\n\n.mj-timeline__card-date {\n display: block;\n font-size: 12px;\n color: var(--mj-timeline-text-muted);\n margin-top: 6px;\n}\n\n.mj-timeline__card-date::before {\n display: none;\n}\n\n.mj-timeline__card-toggle {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border: none;\n background: transparent;\n color: var(--mj-timeline-text-muted);\n border-radius: 4px;\n cursor: pointer;\n transition: all var(--mj-timeline-transition);\n font-size: 14px;\n}\n\n.mj-timeline__card-toggle:hover {\n background: var(--mj-timeline-accent-light);\n color: var(--mj-timeline-accent);\n}\n\n/* ============================================================================\n CARD IMAGE\n ============================================================================ */\n\n.mj-timeline__card-image {\n overflow: hidden;\n border-radius: 4px;\n flex-shrink: 0;\n}\n\n.mj-timeline__card-image img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.mj-timeline__card-image--left.mj-timeline__card-image--small {\n width: 48px;\n height: 48px;\n}\n\n.mj-timeline__card-image--left.mj-timeline__card-image--medium {\n width: 72px;\n height: 72px;\n}\n\n.mj-timeline__card-image--left.mj-timeline__card-image--large {\n width: 96px;\n height: 96px;\n}\n\n.mj-timeline__card-image--top {\n width: calc(100% - 32px);\n max-height: 180px;\n margin: 0 16px 12px;\n}\n\n/* ============================================================================\n CARD BODY\n ============================================================================ */\n\n.mj-timeline__card-body {\n padding: 0 var(--mj-timeline-card-padding) var(--mj-timeline-card-padding);\n}\n\n.mj-timeline__card-body--collapsed {\n display: none;\n}\n\n.mj-timeline__card-description {\n font-size: 13px;\n line-height: 1.6;\n color: var(--mj-timeline-text-secondary);\n margin-bottom: 12px;\n}\n\n.mj-timeline__card-description--clamped {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.mj-timeline__card-description:last-child {\n margin-bottom: 0;\n}\n\n/* ============================================================================\n CARD FIELDS\n ============================================================================ */\n\n.mj-timeline__card-fields {\n display: flex;\n flex-wrap: wrap;\n gap: 4px 12px;\n}\n\n.mj-timeline__card-fields--summary {\n padding-top: 12px;\n border-top: 1px solid var(--mj-timeline-line-color);\n margin-top: 12px;\n}\n\n.mj-timeline__card-fields--expanded {\n margin-top: 12px;\n padding-top: 12px;\n border-top: 1px solid var(--mj-timeline-line-color);\n}\n\n.mj-timeline__card-field {\n display: flex;\n align-items: center;\n gap: 5px;\n font-size: 12px;\n}\n\n.mj-timeline__card-field-icon {\n color: var(--mj-timeline-text-muted);\n font-size: 10px;\n}\n\n.mj-timeline__card-field-label {\n color: var(--mj-timeline-text-muted);\n}\n\n.mj-timeline__card-field-value {\n color: var(--mj-timeline-text-secondary);\n font-weight: 500;\n}\n\n/* ============================================================================\n CARD ACTIONS\n ============================================================================ */\n\n.mj-timeline__card-actions {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n padding: 0 var(--mj-timeline-card-padding) var(--mj-timeline-card-padding);\n justify-content: flex-end;\n}\n\n.mj-timeline__card-actions--hover-only {\n opacity: 0;\n transition: opacity var(--mj-timeline-transition);\n}\n\n.mj-timeline__card:hover .mj-timeline__card-actions--hover-only,\n.mj-timeline__card:focus-within .mj-timeline__card-actions--hover-only {\n opacity: 1;\n}\n\n.mj-timeline__action {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 6px 12px;\n font-size: 12px;\n font-weight: 500;\n border: 1px solid;\n border-radius: 4px;\n cursor: pointer;\n transition: all var(--mj-timeline-transition);\n}\n\n.mj-timeline__action:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.mj-timeline__action i {\n font-size: 10px;\n}\n\n.mj-timeline__action--primary {\n background: var(--mj-timeline-accent);\n border-color: var(--mj-timeline-accent);\n color: #ffffff;\n}\n\n.mj-timeline__action--primary:hover:not(:disabled) {\n filter: brightness(1.1);\n}\n\n.mj-timeline__action--secondary {\n background: transparent;\n border-color: var(--mj-timeline-card-border);\n color: var(--mj-timeline-text-primary);\n}\n\n.mj-timeline__action--secondary:hover:not(:disabled) {\n background: var(--mj-timeline-accent-light);\n border-color: var(--mj-timeline-accent);\n color: var(--mj-timeline-accent);\n}\n\n.mj-timeline__action--danger {\n background: #cf222e;\n border-color: #cf222e;\n color: #ffffff;\n}\n\n.mj-timeline__action--link {\n background: transparent;\n border-color: transparent;\n color: var(--mj-timeline-accent);\n}\n\n.mj-timeline__action--link:hover:not(:disabled) {\n text-decoration: underline;\n}\n\n/* ============================================================================\n VIRTUAL SCROLL\n ============================================================================ */\n\n.mj-timeline-scroll-sentinel {\n height: 1px;\n width: 100%;\n visibility: hidden;\n}\n\n/* ============================================================================\n SINGLE LAYOUT - Cards only on right side\n ============================================================================ */\n\n.mj-timeline--single .mj-timeline__axis::before {\n left: 24px;\n transform: none;\n}\n\n.mj-timeline--single .mj-timeline__segment-header {\n margin-left: 12px;\n}\n\n.mj-timeline--single .mj-timeline__event {\n padding-right: 0;\n padding-left: 56px;\n justify-content: flex-start;\n}\n\n.mj-timeline--single .mj-timeline__event--odd {\n padding-left: 56px;\n flex-direction: row;\n}\n\n.mj-timeline--single .mj-timeline__marker {\n left: 24px;\n transform: translateX(-50%);\n}\n\n.mj-timeline--single .mj-timeline__date-label {\n display: none;\n}\n\n.mj-timeline--single .mj-timeline__card::before {\n left: -6px;\n right: auto;\n border-right: none;\n border-top: none;\n border-left: 1px solid var(--mj-timeline-card-border);\n border-bottom: 1px solid var(--mj-timeline-card-border);\n}\n\n.mj-timeline--single .mj-timeline__card {\n max-width: none;\n}\n\n/* ============================================================================\n ALTERNATING LAYOUT - Explicit class (same as default vertical)\n ============================================================================ */\n\n.mj-timeline--alternating .mj-timeline__segment-header {\n left: 50%;\n transform: translateX(-50%);\n}\n\n/* ============================================================================\n HORIZONTAL LAYOUT\n ============================================================================ */\n\n.mj-timeline--horizontal {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: flex-start;\n overflow-x: auto;\n overflow-y: hidden;\n padding: 80px 40px 24px;\n min-width: 100%;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment {\n flex: 0 0 auto;\n display: flex;\n flex-direction: column;\n margin-bottom: 0;\n margin-right: 40px;\n position: relative;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment:last-child {\n margin-right: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment-header {\n position: absolute;\n top: -56px;\n left: 0;\n margin-bottom: 0;\n white-space: nowrap;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment-content {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n}\n\n.mj-timeline--horizontal .mj-timeline__axis {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding-left: 0;\n min-width: max-content;\n gap: 0;\n}\n\n/* Horizontal axis line */\n.mj-timeline--horizontal .mj-timeline__axis::before {\n left: 0;\n right: 0;\n top: 0;\n bottom: auto;\n width: 100%;\n height: var(--mj-timeline-line-width);\n transform: none;\n}\n\n.mj-timeline--horizontal .mj-timeline__event {\n flex-direction: column;\n align-items: center;\n margin-bottom: 0;\n margin-right: 48px;\n padding: 0;\n padding-top: 32px;\n min-width: 180px;\n max-width: 280px;\n width: auto;\n}\n\n.mj-timeline--horizontal .mj-timeline__event--odd {\n padding-left: 0;\n flex-direction: column;\n}\n\n.mj-timeline--horizontal .mj-timeline__event:last-child {\n margin-right: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__marker {\n position: absolute;\n left: 50%;\n /* Position so marker is centered on the axis line (top: 0 of axis) */\n /* Event has padding-top: 32px, marker is 14px, so top: -(32 + 7) = -39px for center */\n top: calc(-32px - var(--mj-timeline-marker-size) / 2);\n transform: translateX(-50%);\n margin: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__event:hover .mj-timeline__marker {\n transform: translateX(-50%) scale(1.2);\n}\n\n.mj-timeline--horizontal .mj-timeline__date-label {\n position: absolute;\n top: -40px;\n left: 50%;\n right: auto;\n transform: translateX(-50%);\n text-align: center;\n font-size: 12px;\n}\n\n.mj-timeline--horizontal .mj-timeline__card {\n max-width: none;\n width: 100%;\n min-width: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__card::before {\n display: none;\n}\n\n/* Horizontal focused marker override */\n.mj-timeline--horizontal .mj-timeline__event--focused .mj-timeline__marker {\n transform: translateX(-50%) scale(1.4);\n}\n\n/* Horizontal collapsed segment - rotate 90\u00B0 CCW and compress */\n.mj-timeline--horizontal .mj-timeline__segment--collapsed {\n flex: 0 0 auto;\n width: 32px;\n min-width: 32px;\n margin-right: 4px;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment--collapsed .mj-timeline__segment-header {\n writing-mode: vertical-rl;\n text-orientation: mixed;\n transform: rotate(180deg);\n white-space: nowrap;\n padding: 8px 4px;\n margin: 0;\n top: 0;\n position: relative;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment--collapsed .mj-timeline__segment-content {\n display: none;\n}\n\n/* ============================================================================\n RESPONSIVE\n ============================================================================ */\n\n@media (max-width: 900px) {\n /* Force single layout on smaller screens */\n .mj-timeline--alternating .mj-timeline__axis::before {\n left: 24px;\n transform: none;\n }\n\n .mj-timeline--alternating .mj-timeline__segment-header {\n left: auto;\n transform: none;\n margin-left: 12px;\n }\n\n .mj-timeline--alternating .mj-timeline__event {\n padding-right: 0;\n padding-left: 56px;\n justify-content: flex-start;\n }\n\n .mj-timeline--alternating .mj-timeline__event--odd {\n padding-left: 56px;\n padding-right: 0;\n flex-direction: row;\n }\n\n .mj-timeline--alternating .mj-timeline__marker {\n left: 24px;\n transform: translateX(-50%);\n }\n\n .mj-timeline--alternating .mj-timeline__event:hover .mj-timeline__marker {\n transform: translateX(-50%) scale(1.2);\n }\n\n .mj-timeline--alternating .mj-timeline__date-label {\n display: none;\n }\n\n .mj-timeline--alternating .mj-timeline__card::before {\n left: -6px;\n right: auto;\n border-right: none;\n border-top: none;\n border-left: 1px solid var(--mj-timeline-card-border);\n border-bottom: 1px solid var(--mj-timeline-card-border);\n }\n\n .mj-timeline--alternating .mj-timeline__card {\n max-width: none;\n }\n}\n\n@media (max-width: 600px) {\n mj-timeline {\n --mj-timeline-card-padding: 12px;\n --mj-timeline-gap: 16px;\n --mj-timeline-marker-size: 12px;\n }\n\n .mj-timeline {\n padding: 16px 12px;\n }\n\n .mj-timeline__card-title {\n font-size: 14px;\n }\n\n .mj-timeline--horizontal .mj-timeline__event {\n min-width: 160px;\n max-width: 220px;\n margin-right: 32px;\n }\n}\n\n/* Touch devices */\n@media (hover: none) and (pointer: coarse) {\n .mj-timeline__card-actions--hover-only {\n opacity: 1;\n }\n\n .mj-timeline__action {\n min-height: 40px;\n }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n .mj-timeline__card,\n .mj-timeline__marker,\n .mj-timeline__segment-toggle {\n transition: none;\n }\n}\n"], encapsulation: 2, changeDetection: 0 });
1944
+ i0.ɵɵconditional(ctx.scrollState.isLoading && ctx.virtualScroll.showLoadingIndicator ? 6 : -1);
1945
+ } }, 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: #d0d7de;\n --mj-timeline-marker-bg: #ffffff;\n --mj-timeline-marker-border: #4678a8;\n --mj-timeline-marker-fill: #4678a8;\n --mj-timeline-card-bg: #ffffff;\n --mj-timeline-card-border: #d0d7de;\n --mj-timeline-card-shadow: 0 1px 3px rgba(31, 35, 40, 0.08);\n --mj-timeline-card-shadow-hover: 0 4px 12px rgba(31, 35, 40, 0.12);\n --mj-timeline-card-radius: 6px;\n --mj-timeline-text-primary: #1f2328;\n --mj-timeline-text-secondary: #656d76;\n --mj-timeline-text-muted: #8c959f;\n --mj-timeline-accent: #4678a8;\n --mj-timeline-accent-light: rgba(70, 120, 168, 0.08);\n --mj-timeline-segment-bg: #4678a8;\n --mj-timeline-segment-text: #ffffff;\n --mj-timeline-focus-ring: 0 0 0 2px rgba(70, 120, 168, 0.3);\n\n /* Sizing */\n --mj-timeline-line-width: 2px;\n --mj-timeline-marker-size: 14px;\n --mj-timeline-card-padding: 16px;\n --mj-timeline-card-max-width: 400px;\n --mj-timeline-card-min-width: 200px;\n --mj-timeline-gap: 24px;\n --mj-timeline-segment-gap: 16px;\n --mj-timeline-axis-offset: 50%;\n\n /* Animation */\n --mj-timeline-transition: 0.15s ease;\n\n display: block;\n width: 100%;\n height: 100%;\n}\n\n/* Dark mode */\n.dark-theme mj-timeline,\n[data-theme=\"dark\"] mj-timeline {\n --mj-timeline-line-color: #3d444d;\n --mj-timeline-card-bg: #161b22;\n --mj-timeline-card-border: #3d444d;\n --mj-timeline-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\n --mj-timeline-text-primary: #e6edf3;\n --mj-timeline-text-secondary: #8b949e;\n --mj-timeline-text-muted: #6e7681;\n --mj-timeline-accent: #58a6ff;\n --mj-timeline-accent-light: rgba(88, 166, 255, 0.1);\n --mj-timeline-marker-border: #58a6ff;\n --mj-timeline-marker-fill: #58a6ff;\n --mj-timeline-segment-bg: #58a6ff;\n}\n\n/* ============================================================================\n MAIN CONTAINER\n ============================================================================ */\n\n.mj-timeline {\n position: relative;\n width: 100%;\n height: 100%;\n padding: 0;\n background: var(--mj-timeline-bg);\n outline: none;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n/* Subtle scrollbar */\n.mj-timeline::-webkit-scrollbar {\n width: 6px;\n}\n\n.mj-timeline::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.mj-timeline::-webkit-scrollbar-thumb {\n background: rgba(0, 0, 0, 0.15);\n border-radius: 3px;\n}\n\n.mj-timeline::-webkit-scrollbar-thumb:hover {\n background: rgba(0, 0, 0, 0.25);\n}\n\n.mj-timeline:focus-visible {\n box-shadow: inset var(--mj-timeline-focus-ring);\n}\n\n/* ============================================================================\n LOADING & EMPTY STATES\n ============================================================================ */\n\n.mj-timeline__loading {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 48px 24px;\n gap: 12px;\n}\n\n.mj-timeline__loading-spinner {\n width: 24px;\n height: 24px;\n border: 2px solid var(--mj-timeline-line-color);\n border-top-color: var(--mj-timeline-accent);\n border-radius: 50%;\n animation: mj-timeline-spin 0.6s linear infinite;\n}\n\n.mj-timeline__loading-spinner--small {\n width: 14px;\n height: 14px;\n}\n\n.mj-timeline__loading-text {\n color: var(--mj-timeline-text-muted);\n font-size: 13px;\n}\n\n.mj-timeline__loading-more {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px;\n gap: 8px;\n color: var(--mj-timeline-text-muted);\n font-size: 12px;\n}\n\n@keyframes mj-timeline-spin {\n to { transform: rotate(360deg); }\n}\n\n.mj-timeline__empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 64px 24px;\n gap: 8px;\n text-align: center;\n}\n\n.mj-timeline__empty-icon {\n font-size: 32px;\n color: var(--mj-timeline-text-muted);\n opacity: 0.4;\n}\n\n.mj-timeline__empty-text {\n color: var(--mj-timeline-text-secondary);\n font-size: 13px;\n}\n\n/* ============================================================================\n TIME SEGMENTS - Year/Month badges on the axis\n ============================================================================ */\n\n.mj-timeline__segment {\n margin-bottom: var(--mj-timeline-segment-gap);\n position: relative;\n}\n\n.mj-timeline__segment:last-child {\n margin-bottom: 0;\n}\n\n.mj-timeline__segment-header {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 6px 16px;\n margin-bottom: var(--mj-timeline-gap);\n background: var(--mj-timeline-segment-bg);\n border-radius: 4px;\n font-weight: 600;\n font-size: 13px;\n color: var(--mj-timeline-segment-text);\n user-select: none;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n position: relative;\n z-index: 10;\n}\n\n.mj-timeline__segment-header--clickable {\n cursor: pointer;\n transition: all var(--mj-timeline-transition);\n}\n\n.mj-timeline__segment-header--clickable:hover {\n filter: brightness(1.1);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);\n}\n\n.mj-timeline__segment-toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n color: inherit;\n font-size: 10px;\n opacity: 0.9;\n transition: transform var(--mj-timeline-transition);\n}\n\n.mj-timeline__segment--collapsed .mj-timeline__segment-toggle {\n transform: rotate(-90deg);\n}\n\n.mj-timeline__segment-label {\n font-size: inherit;\n font-weight: inherit;\n color: inherit;\n}\n\n.mj-timeline__segment-count {\n display: none;\n}\n\n.mj-timeline__segment-line {\n display: none;\n}\n\n.mj-timeline__segment-content {\n overflow: visible;\n transition: max-height 0.25s ease, opacity 0.2s ease;\n padding-top: 8px;\n}\n\n.mj-timeline__segment-content--hidden {\n max-height: 0;\n opacity: 0;\n pointer-events: none;\n}\n\n/* ============================================================================\n TIMELINE AXIS - Vertical line in center\n ============================================================================ */\n\n.mj-timeline__axis {\n position: relative;\n padding-left: 0;\n}\n\n/* Vertical center line */\n.mj-timeline__axis::before {\n content: '';\n position: absolute;\n left: 50%;\n top: 0;\n bottom: 0;\n width: var(--mj-timeline-line-width);\n background: var(--mj-timeline-line-color);\n transform: translateX(-50%);\n}\n\n/* ============================================================================\n TIMELINE EVENT - Alternating left/right by default\n ============================================================================ */\n\n.mj-timeline__event {\n position: relative;\n display: flex;\n align-items: flex-start;\n margin-bottom: var(--mj-timeline-gap);\n width: 100%;\n}\n\n/* Even events (0, 2, 4...) - card on LEFT, date on RIGHT */\n.mj-timeline__event {\n padding-right: calc(50% + 32px);\n justify-content: flex-end;\n}\n\n/* Odd events (1, 3, 5...) - card on RIGHT, date on LEFT */\n.mj-timeline__event--odd {\n padding-right: 0;\n padding-left: calc(50% + 32px);\n justify-content: flex-start;\n flex-direction: row;\n}\n\n.mj-timeline__event:last-child {\n margin-bottom: 0;\n}\n\n/* ============================================================================\n MARKER - Circular dot on the axis\n ============================================================================ */\n\n.mj-timeline__marker {\n position: absolute;\n left: 50%;\n top: 12px;\n transform: translateX(-50%);\n width: var(--mj-timeline-marker-size);\n height: var(--mj-timeline-marker-size);\n background: var(--mj-timeline-marker-fill);\n border: 2px solid var(--mj-timeline-marker-bg);\n border-radius: 50%;\n box-shadow: 0 0 0 2px var(--mj-timeline-marker-fill);\n z-index: 5;\n transition: transform var(--mj-timeline-transition);\n}\n\n.mj-timeline__marker-icon {\n display: none;\n}\n\n.mj-timeline__event:hover .mj-timeline__marker {\n transform: translateX(-50%) scale(1.2);\n}\n\n.mj-timeline__connector {\n display: none;\n}\n\n/* ============================================================================\n DATE LABEL - Positioned opposite the card\n ============================================================================ */\n\n.mj-timeline__date-label {\n position: absolute;\n top: 10px;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-timeline-text-secondary);\n white-space: nowrap;\n}\n\n/* Even events - date on RIGHT side of axis */\n.mj-timeline__event:not(.mj-timeline__event--odd) .mj-timeline__date-label {\n left: calc(50% + 24px);\n text-align: left;\n}\n\n/* Odd events - date on LEFT side of axis */\n.mj-timeline__event--odd .mj-timeline__date-label {\n right: calc(50% + 24px);\n text-align: right;\n}\n\n/* ============================================================================\n EVENT CARD - Clean design matching Kendo\n ============================================================================ */\n\n.mj-timeline__card {\n background: var(--mj-timeline-card-bg);\n border: 1px solid var(--mj-timeline-card-border);\n border-radius: var(--mj-timeline-card-radius);\n box-shadow: var(--mj-timeline-card-shadow);\n overflow: hidden;\n transition: all var(--mj-timeline-transition);\n cursor: pointer;\n max-width: var(--mj-timeline-card-max-width);\n min-width: var(--mj-timeline-card-min-width);\n width: 100%;\n}\n\n/* Card arrow/pointer toward the axis */\n.mj-timeline__card::before {\n content: '';\n position: absolute;\n top: 14px;\n width: 10px;\n height: 10px;\n background: var(--mj-timeline-card-bg);\n border: 1px solid var(--mj-timeline-card-border);\n transform: rotate(45deg);\n}\n\n/* Even events - arrow points RIGHT toward axis */\n.mj-timeline__event:not(.mj-timeline__event--odd) .mj-timeline__card::before {\n right: -6px;\n border-left: none;\n border-bottom: none;\n}\n\n/* Odd events - arrow points LEFT toward axis */\n.mj-timeline__event--odd .mj-timeline__card::before {\n left: -6px;\n border-right: none;\n border-top: none;\n}\n\n/* Hover state */\n.mj-timeline__card:hover {\n box-shadow: var(--mj-timeline-card-shadow-hover);\n border-color: var(--mj-timeline-accent);\n}\n\n/* Selected/Focused state - prominent highlight with animation */\n.mj-timeline__event--focused .mj-timeline__card {\n background: var(--mj-timeline-accent-light);\n border-color: var(--mj-timeline-accent);\n box-shadow:\n 0 0 0 3px var(--mj-timeline-accent),\n 0 8px 24px rgba(70, 120, 168, 0.25);\n transform: scale(1.02);\n}\n\n/* Selected marker - larger and more prominent */\n.mj-timeline__event--focused .mj-timeline__marker {\n transform: translateX(-50%) scale(1.4);\n box-shadow:\n 0 0 0 3px var(--mj-timeline-marker-fill),\n 0 0 12px rgba(70, 120, 168, 0.5);\n}\n\n/* Pulse animation for selected marker */\n.mj-timeline__event--focused .mj-timeline__marker::after {\n content: '';\n position: absolute;\n top: -4px;\n left: -4px;\n right: -4px;\n bottom: -4px;\n border-radius: 50%;\n border: 2px solid var(--mj-timeline-accent);\n animation: mj-timeline-pulse 1.5s ease-out infinite;\n}\n\n@keyframes mj-timeline-pulse {\n 0% {\n transform: scale(1);\n opacity: 0.8;\n }\n 100% {\n transform: scale(1.8);\n opacity: 0;\n }\n}\n\n/* Selected date label - bolder */\n.mj-timeline__event--focused .mj-timeline__date-label {\n color: var(--mj-timeline-accent);\n font-weight: 600;\n}\n\n/* Card arrow gets accent color when selected */\n.mj-timeline__event--focused .mj-timeline__card::before {\n border-color: var(--mj-timeline-accent);\n background: var(--mj-timeline-accent-light);\n}\n\n/* ============================================================================\n CARD HEADER\n ============================================================================ */\n\n.mj-timeline__card-header {\n display: flex;\n align-items: flex-start;\n padding: var(--mj-timeline-card-padding);\n gap: 10px;\n}\n\n.mj-timeline__card-header-content {\n flex: 1;\n display: flex;\n align-items: flex-start;\n gap: 10px;\n min-width: 0;\n}\n\n.mj-timeline__card-icon {\n display: none;\n}\n\n.mj-timeline__card-titles {\n flex: 1;\n min-width: 0;\n}\n\n.mj-timeline__card-title {\n margin: 0;\n font-size: 15px;\n font-weight: 600;\n color: var(--mj-timeline-text-primary);\n line-height: 1.35;\n}\n\n.mj-timeline__card-subtitle {\n display: block;\n font-size: 13px;\n color: var(--mj-timeline-text-secondary);\n margin-top: 4px;\n}\n\n.mj-timeline__card-date {\n display: block;\n font-size: 12px;\n color: var(--mj-timeline-text-muted);\n margin-top: 6px;\n}\n\n.mj-timeline__card-date::before {\n display: none;\n}\n\n.mj-timeline__card-toggle {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border: none;\n background: transparent;\n color: var(--mj-timeline-text-muted);\n border-radius: 4px;\n cursor: pointer;\n transition: all var(--mj-timeline-transition);\n font-size: 14px;\n}\n\n.mj-timeline__card-toggle:hover {\n background: var(--mj-timeline-accent-light);\n color: var(--mj-timeline-accent);\n}\n\n/* ============================================================================\n CARD IMAGE\n ============================================================================ */\n\n.mj-timeline__card-image {\n overflow: hidden;\n border-radius: 4px;\n flex-shrink: 0;\n}\n\n.mj-timeline__card-image img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.mj-timeline__card-image--left.mj-timeline__card-image--small {\n width: 48px;\n height: 48px;\n}\n\n.mj-timeline__card-image--left.mj-timeline__card-image--medium {\n width: 72px;\n height: 72px;\n}\n\n.mj-timeline__card-image--left.mj-timeline__card-image--large {\n width: 96px;\n height: 96px;\n}\n\n.mj-timeline__card-image--top {\n width: calc(100% - 32px);\n max-height: 180px;\n margin: 0 16px 12px;\n}\n\n/* ============================================================================\n CARD BODY\n ============================================================================ */\n\n.mj-timeline__card-body {\n padding: 0 var(--mj-timeline-card-padding) var(--mj-timeline-card-padding);\n}\n\n.mj-timeline__card-body--collapsed {\n display: none;\n}\n\n.mj-timeline__card-description {\n font-size: 13px;\n line-height: 1.6;\n color: var(--mj-timeline-text-secondary);\n margin-bottom: 12px;\n}\n\n.mj-timeline__card-description--clamped {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.mj-timeline__card-description:last-child {\n margin-bottom: 0;\n}\n\n/* ============================================================================\n CARD FIELDS\n ============================================================================ */\n\n.mj-timeline__card-fields {\n display: flex;\n flex-wrap: wrap;\n gap: 4px 12px;\n}\n\n.mj-timeline__card-fields--summary {\n padding-top: 12px;\n border-top: 1px solid var(--mj-timeline-line-color);\n margin-top: 12px;\n}\n\n.mj-timeline__card-fields--expanded {\n margin-top: 12px;\n padding-top: 12px;\n border-top: 1px solid var(--mj-timeline-line-color);\n}\n\n.mj-timeline__card-field {\n display: flex;\n align-items: center;\n gap: 5px;\n font-size: 12px;\n}\n\n.mj-timeline__card-field-icon {\n color: var(--mj-timeline-text-muted);\n font-size: 10px;\n}\n\n.mj-timeline__card-field-label {\n color: var(--mj-timeline-text-muted);\n}\n\n.mj-timeline__card-field-value {\n color: var(--mj-timeline-text-secondary);\n font-weight: 500;\n}\n\n/* ============================================================================\n CARD ACTIONS\n ============================================================================ */\n\n.mj-timeline__card-actions {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n padding: 0 var(--mj-timeline-card-padding) var(--mj-timeline-card-padding);\n justify-content: flex-end;\n}\n\n.mj-timeline__card-actions--hover-only {\n opacity: 0;\n transition: opacity var(--mj-timeline-transition);\n}\n\n.mj-timeline__card:hover .mj-timeline__card-actions--hover-only,\n.mj-timeline__card:focus-within .mj-timeline__card-actions--hover-only {\n opacity: 1;\n}\n\n.mj-timeline__action {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 6px 12px;\n font-size: 12px;\n font-weight: 500;\n border: 1px solid;\n border-radius: 4px;\n cursor: pointer;\n transition: all var(--mj-timeline-transition);\n}\n\n.mj-timeline__action:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.mj-timeline__action i {\n font-size: 10px;\n}\n\n.mj-timeline__action--primary {\n background: var(--mj-timeline-accent);\n border-color: var(--mj-timeline-accent);\n color: #ffffff;\n}\n\n.mj-timeline__action--primary:hover:not(:disabled) {\n filter: brightness(1.1);\n}\n\n.mj-timeline__action--secondary {\n background: transparent;\n border-color: var(--mj-timeline-card-border);\n color: var(--mj-timeline-text-primary);\n}\n\n.mj-timeline__action--secondary:hover:not(:disabled) {\n background: var(--mj-timeline-accent-light);\n border-color: var(--mj-timeline-accent);\n color: var(--mj-timeline-accent);\n}\n\n.mj-timeline__action--danger {\n background: #cf222e;\n border-color: #cf222e;\n color: #ffffff;\n}\n\n.mj-timeline__action--link {\n background: transparent;\n border-color: transparent;\n color: var(--mj-timeline-accent);\n}\n\n.mj-timeline__action--link:hover:not(:disabled) {\n text-decoration: underline;\n}\n\n/* ============================================================================\n VIRTUAL SCROLL\n ============================================================================ */\n\n.mj-timeline-scroll-sentinel {\n height: 1px;\n width: 100%;\n visibility: hidden;\n}\n\n/* ============================================================================\n SINGLE LAYOUT - Cards only on right side\n ============================================================================ */\n\n.mj-timeline--single .mj-timeline__axis::before {\n left: 24px;\n transform: none;\n}\n\n.mj-timeline--single .mj-timeline__segment-header {\n margin-left: 12px;\n}\n\n.mj-timeline--single .mj-timeline__event {\n padding-right: 0;\n padding-left: 56px;\n justify-content: flex-start;\n}\n\n.mj-timeline--single .mj-timeline__event--odd {\n padding-left: 56px;\n flex-direction: row;\n}\n\n.mj-timeline--single .mj-timeline__marker {\n left: 24px;\n transform: translateX(-50%);\n}\n\n.mj-timeline--single .mj-timeline__date-label {\n display: none;\n}\n\n.mj-timeline--single .mj-timeline__card::before {\n left: -6px;\n right: auto;\n border-right: none;\n border-top: none;\n border-left: 1px solid var(--mj-timeline-card-border);\n border-bottom: 1px solid var(--mj-timeline-card-border);\n}\n\n.mj-timeline--single .mj-timeline__card {\n max-width: none;\n}\n\n/* ============================================================================\n ALTERNATING LAYOUT - Explicit class (same as default vertical)\n ============================================================================ */\n\n.mj-timeline--alternating .mj-timeline__segment-header {\n left: 50%;\n transform: translateX(-50%);\n}\n\n/* ============================================================================\n HORIZONTAL LAYOUT\n ============================================================================ */\n\n.mj-timeline--horizontal {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: flex-start;\n overflow-x: auto;\n overflow-y: hidden;\n padding: 80px 40px 24px;\n min-width: 100%;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment {\n flex: 0 0 auto;\n display: flex;\n flex-direction: column;\n margin-bottom: 0;\n margin-right: 40px;\n position: relative;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment:last-child {\n margin-right: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment-header {\n position: absolute;\n top: -56px;\n left: 0;\n margin-bottom: 0;\n white-space: nowrap;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment-content {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n}\n\n.mj-timeline--horizontal .mj-timeline__axis {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding-left: 0;\n min-width: max-content;\n gap: 0;\n}\n\n/* Horizontal axis line */\n.mj-timeline--horizontal .mj-timeline__axis::before {\n left: 0;\n right: 0;\n top: 0;\n bottom: auto;\n width: 100%;\n height: var(--mj-timeline-line-width);\n transform: none;\n}\n\n.mj-timeline--horizontal .mj-timeline__event {\n flex-direction: column;\n align-items: center;\n margin-bottom: 0;\n margin-right: 48px;\n padding: 0;\n padding-top: 32px;\n min-width: 180px;\n max-width: 280px;\n width: auto;\n}\n\n.mj-timeline--horizontal .mj-timeline__event--odd {\n padding-left: 0;\n flex-direction: column;\n}\n\n.mj-timeline--horizontal .mj-timeline__event:last-child {\n margin-right: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__marker {\n position: absolute;\n left: 50%;\n /* Position so marker is centered on the axis line (top: 0 of axis) */\n /* Event has padding-top: 32px, marker is 14px, so top: -(32 + 7) = -39px for center */\n top: calc(-32px - var(--mj-timeline-marker-size) / 2);\n transform: translateX(-50%);\n margin: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__event:hover .mj-timeline__marker {\n transform: translateX(-50%) scale(1.2);\n}\n\n.mj-timeline--horizontal .mj-timeline__date-label {\n position: absolute;\n top: -40px;\n left: 50%;\n right: auto;\n transform: translateX(-50%);\n text-align: center;\n font-size: 12px;\n}\n\n.mj-timeline--horizontal .mj-timeline__card {\n max-width: none;\n width: 100%;\n min-width: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__card::before {\n display: none;\n}\n\n/* Horizontal focused marker override */\n.mj-timeline--horizontal .mj-timeline__event--focused .mj-timeline__marker {\n transform: translateX(-50%) scale(1.4);\n}\n\n/* Horizontal collapsed segment - rotate 90\u00B0 CCW and compress */\n.mj-timeline--horizontal .mj-timeline__segment--collapsed {\n flex: 0 0 auto;\n width: 32px;\n min-width: 32px;\n margin-right: 4px;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment--collapsed .mj-timeline__segment-header {\n writing-mode: vertical-rl;\n text-orientation: mixed;\n transform: rotate(180deg);\n white-space: nowrap;\n padding: 8px 4px;\n margin: 0;\n top: 0;\n position: relative;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment--collapsed .mj-timeline__segment-content {\n display: none;\n}\n\n/* ============================================================================\n RESPONSIVE\n ============================================================================ */\n\n@media (max-width: 900px) {\n /* Force single layout on smaller screens */\n .mj-timeline--alternating .mj-timeline__axis::before {\n left: 24px;\n transform: none;\n }\n\n .mj-timeline--alternating .mj-timeline__segment-header {\n left: auto;\n transform: none;\n margin-left: 12px;\n }\n\n .mj-timeline--alternating .mj-timeline__event {\n padding-right: 0;\n padding-left: 56px;\n justify-content: flex-start;\n }\n\n .mj-timeline--alternating .mj-timeline__event--odd {\n padding-left: 56px;\n padding-right: 0;\n flex-direction: row;\n }\n\n .mj-timeline--alternating .mj-timeline__marker {\n left: 24px;\n transform: translateX(-50%);\n }\n\n .mj-timeline--alternating .mj-timeline__event:hover .mj-timeline__marker {\n transform: translateX(-50%) scale(1.2);\n }\n\n .mj-timeline--alternating .mj-timeline__date-label {\n display: none;\n }\n\n .mj-timeline--alternating .mj-timeline__card::before {\n left: -6px;\n right: auto;\n border-right: none;\n border-top: none;\n border-left: 1px solid var(--mj-timeline-card-border);\n border-bottom: 1px solid var(--mj-timeline-card-border);\n }\n\n .mj-timeline--alternating .mj-timeline__card {\n max-width: none;\n }\n}\n\n@media (max-width: 600px) {\n mj-timeline {\n --mj-timeline-card-padding: 12px;\n --mj-timeline-gap: 16px;\n --mj-timeline-marker-size: 12px;\n }\n\n .mj-timeline {\n padding: 16px 12px;\n }\n\n .mj-timeline__card-title {\n font-size: 14px;\n }\n\n .mj-timeline--horizontal .mj-timeline__event {\n min-width: 160px;\n max-width: 220px;\n margin-right: 32px;\n }\n}\n\n/* Touch devices */\n@media (hover: none) and (pointer: coarse) {\n .mj-timeline__card-actions--hover-only {\n opacity: 1;\n }\n\n .mj-timeline__action {\n min-height: 40px;\n }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n .mj-timeline__card,\n .mj-timeline__marker,\n .mj-timeline__segment-toggle {\n transition: none;\n }\n}\n"], encapsulation: 2, changeDetection: 0 });
2003
1946
  }
2004
1947
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimelineComponent, [{
2005
1948
  type: Component,
2006
- args: [{ selector: 'mj-timeline', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!--\n MJ Timeline Component Template\n\n Structure:\n - Loading state\n - Empty state\n - Timeline container (vertical/horizontal)\n - Time segments (collapsible)\n - Segment header\n - Event cards within segment\n - Or flat list of events (when segmentGrouping='none')\n - Virtual scroll sentinel\n-->\n\n<div\n class=\"mj-timeline\"\n [class.mj-timeline--vertical]=\"orientation === 'vertical'\"\n [class.mj-timeline--horizontal]=\"orientation === 'horizontal'\"\n [class.mj-timeline--single]=\"layout === 'single'\"\n [class.mj-timeline--alternating]=\"layout === 'alternating'\"\n [attr.aria-label]=\"ariaLabel\"\n role=\"list\"\n tabindex=\"0\"\n (keydown)=\"onKeyDown($event)\"\n #scrollContainer\n (scroll)=\"onScroll($event)\">\n\n <!-- Loading State -->\n <ng-container *ngIf=\"isLoading && !isInitialized\">\n <ng-container *ngIf=\"loadingTemplate; else defaultLoading\">\n <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n </ng-container>\n <ng-template #defaultLoading>\n <div class=\"mj-timeline__loading\">\n <div class=\"mj-timeline__loading-spinner\"></div>\n <span class=\"mj-timeline__loading-text\">{{ loadingMessage }}</span>\n </div>\n </ng-template>\n </ng-container>\n\n <!-- Empty State -->\n <ng-container *ngIf=\"isInitialized && allEvents.length === 0 && !isLoading\">\n <ng-container *ngIf=\"emptyTemplate; else defaultEmpty\">\n <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n </ng-container>\n <ng-template #defaultEmpty>\n <div class=\"mj-timeline__empty\">\n <i [class]=\"emptyIcon\" class=\"mj-timeline__empty-icon\"></i>\n <span class=\"mj-timeline__empty-text\">{{ emptyMessage }}</span>\n </div>\n </ng-template>\n </ng-container>\n\n <!-- Timeline Content -->\n <ng-container *ngIf=\"isInitialized && allEvents.length > 0\">\n\n <!-- Segmented View -->\n <ng-container *ngIf=\"segmentGrouping !== 'none'\">\n <div\n *ngFor=\"let segment of segments; trackBy: trackBySegmentLabel; let segmentIndex = index\"\n class=\"mj-timeline__segment\"\n [class.mj-timeline__segment--collapsed]=\"!segment.isExpanded\"\n [attr.data-segment-label]=\"segment.label\">\n\n <!-- Segment Header -->\n <div\n class=\"mj-timeline__segment-header\"\n [class.mj-timeline__segment-header--clickable]=\"segmentsCollapsible\"\n (click)=\"onSegmentClick(segment)\"\n role=\"button\"\n [attr.aria-expanded]=\"segment.isExpanded\"\n [attr.aria-controls]=\"'segment-content-' + segmentIndex\">\n\n <ng-container *ngIf=\"segmentHeaderTemplate; else defaultSegmentHeader\">\n <ng-container *ngTemplateOutlet=\"segmentHeaderTemplate; context: { segment: segment }\"></ng-container>\n </ng-container>\n\n <ng-template #defaultSegmentHeader>\n <span class=\"mj-timeline__segment-toggle\" *ngIf=\"segmentsCollapsible\">\n <i [class]=\"segment.isExpanded ? 'fa-solid fa-chevron-down' : 'fa-solid fa-chevron-right'\"></i>\n </span>\n <span class=\"mj-timeline__segment-label\">{{ segment.label }}</span>\n <span class=\"mj-timeline__segment-count\">({{ segment.eventCount }} {{ segment.eventCount === 1 ? 'event' : 'events' }})</span>\n <span class=\"mj-timeline__segment-line\"></span>\n </ng-template>\n </div>\n\n <!-- Segment Content -->\n <div\n class=\"mj-timeline__segment-content\"\n [id]=\"'segment-content-' + segmentIndex\"\n [class.mj-timeline__segment-content--hidden]=\"!segment.isExpanded\">\n\n <div class=\"mj-timeline__axis\">\n <!-- Events in Segment -->\n <ng-container *ngFor=\"let event of segment.events; trackBy: trackByEventId; let eventIndex = index; let isOdd = odd\">\n <ng-container *ngTemplateOutlet=\"eventCard; context: {\n event: event,\n index: eventIndex,\n isOdd: isOdd,\n globalIndex: getGlobalIndex(event)\n }\"></ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- Flat View (no segments) -->\n <ng-container *ngIf=\"segmentGrouping === 'none'\">\n <div class=\"mj-timeline__axis\">\n <ng-container *ngFor=\"let event of allEvents; trackBy: trackByEventId; let eventIndex = index; let isOdd = odd\">\n <ng-container *ngTemplateOutlet=\"eventCard; context: {\n event: event,\n index: eventIndex,\n isOdd: isOdd,\n globalIndex: eventIndex\n }\"></ng-container>\n </ng-container>\n </div>\n </ng-container>\n\n </ng-container>\n\n <!-- Virtual Scroll Sentinel -->\n <div\n class=\"mj-timeline-scroll-sentinel\"\n *ngIf=\"virtualScroll.enabled && scrollState.hasMore\">\n </div>\n\n <!-- Loading More Indicator -->\n <div\n class=\"mj-timeline__loading-more\"\n *ngIf=\"scrollState.isLoading && virtualScroll.showLoadingIndicator\">\n <div class=\"mj-timeline__loading-spinner mj-timeline__loading-spinner--small\"></div>\n <span>{{ virtualScroll.loadingMessage }}</span>\n </div>\n\n</div>\n\n<!-- Event Card Template -->\n<ng-template #eventCard let-event=\"event\" let-index=\"index\" let-isOdd=\"isOdd\" let-globalIndex=\"globalIndex\">\n <div\n class=\"mj-timeline__event\"\n [class.mj-timeline__event--odd]=\"isOdd && layout === 'alternating'\"\n [class.mj-timeline__event--even]=\"!isOdd && layout === 'alternating'\"\n [class.mj-timeline__event--expanded]=\"event.isExpanded\"\n [class.mj-timeline__event--focused]=\"isEventSelected(event, globalIndex)\"\n [attr.data-event-id]=\"event.id\"\n role=\"listitem\"\n [attr.aria-expanded]=\"event.isExpanded\">\n\n <!-- Timeline Marker -->\n <div class=\"mj-timeline__marker\" [style.background-color]=\"getColor(event)\">\n <i [class]=\"getIcon(event)\" class=\"mj-timeline__marker-icon\"></i>\n </div>\n\n <!-- Connector Line -->\n <div class=\"mj-timeline__connector\" [style.background-color]=\"getColor(event)\"></div>\n\n <!-- Date Label (for alternating layout) -->\n <div class=\"mj-timeline__date-label\" *ngIf=\"layout === 'alternating'\">\n {{ formatDate(event.date) }}\n </div>\n\n <!-- Event Card -->\n <div\n class=\"mj-timeline__card\"\n [ngClass]=\"getEffectiveCardConfig(event).cssClass\"\n [style.max-width]=\"getEffectiveCardConfig(event).maxWidth\"\n [style.min-width]=\"getEffectiveCardConfig(event).minWidth\"\n [style.border-left-color]=\"getColor(event)\"\n (click)=\"onEventClick(event, globalIndex, $event)\"\n (mouseenter)=\"onEventMouseEnter(event, globalIndex, $event)\"\n (mouseleave)=\"onEventMouseLeave(event, globalIndex, $event)\">\n\n <!-- Custom Card Template -->\n <ng-container *ngIf=\"cardTemplate; else defaultCard\">\n <ng-container *ngTemplateOutlet=\"cardTemplate; context: {\n event: event,\n group: groups[event.groupIndex]\n }\"></ng-container>\n </ng-container>\n\n <!-- Default Card Template -->\n <ng-template #defaultCard>\n <!-- Card Header -->\n <div class=\"mj-timeline__card-header\">\n <!-- Image (left position) -->\n <div\n class=\"mj-timeline__card-image mj-timeline__card-image--left\"\n *ngIf=\"event.imageUrl && getEffectiveCardConfig(event).imagePosition === 'left'\"\n [class.mj-timeline__card-image--small]=\"getEffectiveCardConfig(event).imageSize === 'small'\"\n [class.mj-timeline__card-image--medium]=\"getEffectiveCardConfig(event).imageSize === 'medium'\"\n [class.mj-timeline__card-image--large]=\"getEffectiveCardConfig(event).imageSize === 'large'\">\n <img [src]=\"event.imageUrl\" [alt]=\"event.title\" />\n </div>\n\n <div class=\"mj-timeline__card-header-content\">\n <!-- Custom Header Template -->\n <ng-container *ngIf=\"headerTemplate; else defaultHeader\">\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { event: event }\"></ng-container>\n </ng-container>\n\n <ng-template #defaultHeader>\n <!-- Icon -->\n <span\n class=\"mj-timeline__card-icon\"\n *ngIf=\"getEffectiveCardConfig(event).showIcon\"\n [style.color]=\"getColor(event)\">\n <i [class]=\"getIcon(event)\"></i>\n </span>\n\n <!-- Title & Subtitle -->\n <div class=\"mj-timeline__card-titles\">\n <h4 class=\"mj-timeline__card-title\">{{ event.title }}</h4>\n <span\n class=\"mj-timeline__card-subtitle\"\n *ngIf=\"event.subtitle && getEffectiveCardConfig(event).showSubtitle\">\n {{ event.subtitle }}\n </span>\n <span\n class=\"mj-timeline__card-date\"\n *ngIf=\"getEffectiveCardConfig(event).showDate && layout !== 'alternating'\">\n {{ formatDate(event.date, getEffectiveCardConfig(event).dateFormat) }}\n </span>\n </div>\n\n <!-- Expand/Collapse Toggle -->\n <button\n class=\"mj-timeline__card-toggle\"\n *ngIf=\"getEffectiveCardConfig(event).collapsible\"\n (click)=\"onToggleExpand(event, globalIndex, $event)\"\n [attr.aria-label]=\"event.isExpanded ? 'Collapse' : 'Expand'\"\n type=\"button\">\n <i [class]=\"event.isExpanded ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'\"></i>\n </button>\n </ng-template>\n </div>\n </div>\n\n <!-- Image (top position) -->\n <div\n class=\"mj-timeline__card-image mj-timeline__card-image--top\"\n *ngIf=\"event.imageUrl && getEffectiveCardConfig(event).imagePosition === 'top'\">\n <img [src]=\"event.imageUrl\" [alt]=\"event.title\" />\n </div>\n\n <!-- Card Body -->\n <div\n class=\"mj-timeline__card-body\"\n [class.mj-timeline__card-body--collapsed]=\"!event.isExpanded && getEffectiveCardConfig(event).collapsible\">\n\n <!-- Custom Body Template -->\n <ng-container *ngIf=\"bodyTemplate; else defaultBody\">\n <ng-container *ngTemplateOutlet=\"bodyTemplate; context: { event: event }\"></ng-container>\n </ng-container>\n\n <ng-template #defaultBody>\n <!-- Summary Fields (always visible) -->\n <div\n class=\"mj-timeline__card-fields mj-timeline__card-fields--summary\"\n *ngIf=\"getEffectiveCardConfig(event).summaryFields?.length\">\n <ng-container *ngFor=\"let field of getEffectiveCardConfig(event).summaryFields\">\n <div class=\"mj-timeline__card-field\" [ngClass]=\"field.cssClass\">\n <i *ngIf=\"field.icon\" [ngClass]=\"field.icon\" class=\"mj-timeline__card-field-icon\"></i>\n <span *ngIf=\"!field.hideLabel && field.label\" class=\"mj-timeline__card-field-label\">{{ field.label }}:</span>\n <span class=\"mj-timeline__card-field-value\">{{ getFieldValue(event, field) }}</span>\n </div>\n </ng-container>\n </div>\n\n <!-- Description (expanded view) -->\n <div\n class=\"mj-timeline__card-description\"\n *ngIf=\"event.description && event.isExpanded\"\n [class.mj-timeline__card-description--clamped]=\"(getEffectiveCardConfig(event).descriptionMaxLines ?? 0) > 0\"\n [style.-webkit-line-clamp]=\"getEffectiveCardConfig(event).descriptionMaxLines || null\">\n <ng-container *ngIf=\"getEffectiveCardConfig(event).allowHtmlDescription; else plainDescription\">\n <div [innerHTML]=\"event.description\"></div>\n </ng-container>\n <ng-template #plainDescription>\n {{ event.description }}\n </ng-template>\n </div>\n\n <!-- Expanded Fields -->\n <div\n class=\"mj-timeline__card-fields mj-timeline__card-fields--expanded\"\n *ngIf=\"event.isExpanded && getEffectiveCardConfig(event).expandedFields?.length\">\n <ng-container *ngFor=\"let field of getEffectiveCardConfig(event).expandedFields\">\n <div class=\"mj-timeline__card-field\" [ngClass]=\"field.cssClass\">\n <i *ngIf=\"field.icon\" [ngClass]=\"field.icon\" class=\"mj-timeline__card-field-icon\"></i>\n <span *ngIf=\"!field.hideLabel\" class=\"mj-timeline__card-field-label\">{{ field.label || field.fieldName }}:</span>\n <span class=\"mj-timeline__card-field-value\">{{ getFieldValue(event, field) }}</span>\n </div>\n </ng-container>\n </div>\n </ng-template>\n </div>\n\n <!-- Card Actions -->\n <div\n class=\"mj-timeline__card-actions\"\n [class.mj-timeline__card-actions--hover-only]=\"getEffectiveCardConfig(event).actionsOnHover\"\n *ngIf=\"getActions(event).length > 0\">\n\n <!-- Custom Actions Template -->\n <ng-container *ngIf=\"actionsTemplate; else defaultActions\">\n <ng-container *ngTemplateOutlet=\"actionsTemplate; context: {\n event: event,\n actions: getActions(event)\n }\"></ng-container>\n </ng-container>\n\n <ng-template #defaultActions>\n <button\n *ngFor=\"let action of getActions(event)\"\n class=\"mj-timeline__action\"\n [class.mj-timeline__action--primary]=\"action.variant === 'primary'\"\n [class.mj-timeline__action--secondary]=\"action.variant === 'secondary' || !action.variant\"\n [class.mj-timeline__action--danger]=\"action.variant === 'danger'\"\n [class.mj-timeline__action--link]=\"action.variant === 'link'\"\n [ngClass]=\"action.cssClass\"\n [disabled]=\"action.disabled\"\n [title]=\"action.tooltip || ''\"\n (click)=\"onActionClick(event, action, globalIndex, $event)\"\n type=\"button\">\n <i *ngIf=\"action.icon\" [ngClass]=\"action.icon\"></i>\n <span>{{ action.label }}</span>\n </button>\n </ng-template>\n </div>\n </ng-template>\n </div>\n </div>\n</ng-template>\n", styles: ["/**\n * MJ Timeline Component Styles\n * Kendo-inspired design with vertical alternating and horizontal layouts\n */\n\n/* ============================================================================\n CSS VARIABLES (Theming)\n ============================================================================ */\n\nmj-timeline {\n /* Colors */\n --mj-timeline-bg: transparent;\n --mj-timeline-line-color: #d0d7de;\n --mj-timeline-marker-bg: #ffffff;\n --mj-timeline-marker-border: #4678a8;\n --mj-timeline-marker-fill: #4678a8;\n --mj-timeline-card-bg: #ffffff;\n --mj-timeline-card-border: #d0d7de;\n --mj-timeline-card-shadow: 0 1px 3px rgba(31, 35, 40, 0.08);\n --mj-timeline-card-shadow-hover: 0 4px 12px rgba(31, 35, 40, 0.12);\n --mj-timeline-card-radius: 6px;\n --mj-timeline-text-primary: #1f2328;\n --mj-timeline-text-secondary: #656d76;\n --mj-timeline-text-muted: #8c959f;\n --mj-timeline-accent: #4678a8;\n --mj-timeline-accent-light: rgba(70, 120, 168, 0.08);\n --mj-timeline-segment-bg: #4678a8;\n --mj-timeline-segment-text: #ffffff;\n --mj-timeline-focus-ring: 0 0 0 2px rgba(70, 120, 168, 0.3);\n\n /* Sizing */\n --mj-timeline-line-width: 2px;\n --mj-timeline-marker-size: 14px;\n --mj-timeline-card-padding: 16px;\n --mj-timeline-card-max-width: 400px;\n --mj-timeline-card-min-width: 200px;\n --mj-timeline-gap: 24px;\n --mj-timeline-segment-gap: 16px;\n --mj-timeline-axis-offset: 50%;\n\n /* Animation */\n --mj-timeline-transition: 0.15s ease;\n\n display: block;\n width: 100%;\n height: 100%;\n}\n\n/* Dark mode */\n.dark-theme mj-timeline,\n[data-theme=\"dark\"] mj-timeline {\n --mj-timeline-line-color: #3d444d;\n --mj-timeline-card-bg: #161b22;\n --mj-timeline-card-border: #3d444d;\n --mj-timeline-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\n --mj-timeline-text-primary: #e6edf3;\n --mj-timeline-text-secondary: #8b949e;\n --mj-timeline-text-muted: #6e7681;\n --mj-timeline-accent: #58a6ff;\n --mj-timeline-accent-light: rgba(88, 166, 255, 0.1);\n --mj-timeline-marker-border: #58a6ff;\n --mj-timeline-marker-fill: #58a6ff;\n --mj-timeline-segment-bg: #58a6ff;\n}\n\n/* ============================================================================\n MAIN CONTAINER\n ============================================================================ */\n\n.mj-timeline {\n position: relative;\n width: 100%;\n height: 100%;\n padding: 0;\n background: var(--mj-timeline-bg);\n outline: none;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n/* Subtle scrollbar */\n.mj-timeline::-webkit-scrollbar {\n width: 6px;\n}\n\n.mj-timeline::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.mj-timeline::-webkit-scrollbar-thumb {\n background: rgba(0, 0, 0, 0.15);\n border-radius: 3px;\n}\n\n.mj-timeline::-webkit-scrollbar-thumb:hover {\n background: rgba(0, 0, 0, 0.25);\n}\n\n.mj-timeline:focus-visible {\n box-shadow: inset var(--mj-timeline-focus-ring);\n}\n\n/* ============================================================================\n LOADING & EMPTY STATES\n ============================================================================ */\n\n.mj-timeline__loading {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 48px 24px;\n gap: 12px;\n}\n\n.mj-timeline__loading-spinner {\n width: 24px;\n height: 24px;\n border: 2px solid var(--mj-timeline-line-color);\n border-top-color: var(--mj-timeline-accent);\n border-radius: 50%;\n animation: mj-timeline-spin 0.6s linear infinite;\n}\n\n.mj-timeline__loading-spinner--small {\n width: 14px;\n height: 14px;\n}\n\n.mj-timeline__loading-text {\n color: var(--mj-timeline-text-muted);\n font-size: 13px;\n}\n\n.mj-timeline__loading-more {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px;\n gap: 8px;\n color: var(--mj-timeline-text-muted);\n font-size: 12px;\n}\n\n@keyframes mj-timeline-spin {\n to { transform: rotate(360deg); }\n}\n\n.mj-timeline__empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 64px 24px;\n gap: 8px;\n text-align: center;\n}\n\n.mj-timeline__empty-icon {\n font-size: 32px;\n color: var(--mj-timeline-text-muted);\n opacity: 0.4;\n}\n\n.mj-timeline__empty-text {\n color: var(--mj-timeline-text-secondary);\n font-size: 13px;\n}\n\n/* ============================================================================\n TIME SEGMENTS - Year/Month badges on the axis\n ============================================================================ */\n\n.mj-timeline__segment {\n margin-bottom: var(--mj-timeline-segment-gap);\n position: relative;\n}\n\n.mj-timeline__segment:last-child {\n margin-bottom: 0;\n}\n\n.mj-timeline__segment-header {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 6px 16px;\n margin-bottom: var(--mj-timeline-gap);\n background: var(--mj-timeline-segment-bg);\n border-radius: 4px;\n font-weight: 600;\n font-size: 13px;\n color: var(--mj-timeline-segment-text);\n user-select: none;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n position: relative;\n z-index: 10;\n}\n\n.mj-timeline__segment-header--clickable {\n cursor: pointer;\n transition: all var(--mj-timeline-transition);\n}\n\n.mj-timeline__segment-header--clickable:hover {\n filter: brightness(1.1);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);\n}\n\n.mj-timeline__segment-toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n color: inherit;\n font-size: 10px;\n opacity: 0.9;\n transition: transform var(--mj-timeline-transition);\n}\n\n.mj-timeline__segment--collapsed .mj-timeline__segment-toggle {\n transform: rotate(-90deg);\n}\n\n.mj-timeline__segment-label {\n font-size: inherit;\n font-weight: inherit;\n color: inherit;\n}\n\n.mj-timeline__segment-count {\n display: none;\n}\n\n.mj-timeline__segment-line {\n display: none;\n}\n\n.mj-timeline__segment-content {\n overflow: visible;\n transition: max-height 0.25s ease, opacity 0.2s ease;\n padding-top: 8px;\n}\n\n.mj-timeline__segment-content--hidden {\n max-height: 0;\n opacity: 0;\n pointer-events: none;\n}\n\n/* ============================================================================\n TIMELINE AXIS - Vertical line in center\n ============================================================================ */\n\n.mj-timeline__axis {\n position: relative;\n padding-left: 0;\n}\n\n/* Vertical center line */\n.mj-timeline__axis::before {\n content: '';\n position: absolute;\n left: 50%;\n top: 0;\n bottom: 0;\n width: var(--mj-timeline-line-width);\n background: var(--mj-timeline-line-color);\n transform: translateX(-50%);\n}\n\n/* ============================================================================\n TIMELINE EVENT - Alternating left/right by default\n ============================================================================ */\n\n.mj-timeline__event {\n position: relative;\n display: flex;\n align-items: flex-start;\n margin-bottom: var(--mj-timeline-gap);\n width: 100%;\n}\n\n/* Even events (0, 2, 4...) - card on LEFT, date on RIGHT */\n.mj-timeline__event {\n padding-right: calc(50% + 32px);\n justify-content: flex-end;\n}\n\n/* Odd events (1, 3, 5...) - card on RIGHT, date on LEFT */\n.mj-timeline__event--odd {\n padding-right: 0;\n padding-left: calc(50% + 32px);\n justify-content: flex-start;\n flex-direction: row;\n}\n\n.mj-timeline__event:last-child {\n margin-bottom: 0;\n}\n\n/* ============================================================================\n MARKER - Circular dot on the axis\n ============================================================================ */\n\n.mj-timeline__marker {\n position: absolute;\n left: 50%;\n top: 12px;\n transform: translateX(-50%);\n width: var(--mj-timeline-marker-size);\n height: var(--mj-timeline-marker-size);\n background: var(--mj-timeline-marker-fill);\n border: 2px solid var(--mj-timeline-marker-bg);\n border-radius: 50%;\n box-shadow: 0 0 0 2px var(--mj-timeline-marker-fill);\n z-index: 5;\n transition: transform var(--mj-timeline-transition);\n}\n\n.mj-timeline__marker-icon {\n display: none;\n}\n\n.mj-timeline__event:hover .mj-timeline__marker {\n transform: translateX(-50%) scale(1.2);\n}\n\n.mj-timeline__connector {\n display: none;\n}\n\n/* ============================================================================\n DATE LABEL - Positioned opposite the card\n ============================================================================ */\n\n.mj-timeline__date-label {\n position: absolute;\n top: 10px;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-timeline-text-secondary);\n white-space: nowrap;\n}\n\n/* Even events - date on RIGHT side of axis */\n.mj-timeline__event:not(.mj-timeline__event--odd) .mj-timeline__date-label {\n left: calc(50% + 24px);\n text-align: left;\n}\n\n/* Odd events - date on LEFT side of axis */\n.mj-timeline__event--odd .mj-timeline__date-label {\n right: calc(50% + 24px);\n text-align: right;\n}\n\n/* ============================================================================\n EVENT CARD - Clean design matching Kendo\n ============================================================================ */\n\n.mj-timeline__card {\n background: var(--mj-timeline-card-bg);\n border: 1px solid var(--mj-timeline-card-border);\n border-radius: var(--mj-timeline-card-radius);\n box-shadow: var(--mj-timeline-card-shadow);\n overflow: hidden;\n transition: all var(--mj-timeline-transition);\n cursor: pointer;\n max-width: var(--mj-timeline-card-max-width);\n min-width: var(--mj-timeline-card-min-width);\n width: 100%;\n}\n\n/* Card arrow/pointer toward the axis */\n.mj-timeline__card::before {\n content: '';\n position: absolute;\n top: 14px;\n width: 10px;\n height: 10px;\n background: var(--mj-timeline-card-bg);\n border: 1px solid var(--mj-timeline-card-border);\n transform: rotate(45deg);\n}\n\n/* Even events - arrow points RIGHT toward axis */\n.mj-timeline__event:not(.mj-timeline__event--odd) .mj-timeline__card::before {\n right: -6px;\n border-left: none;\n border-bottom: none;\n}\n\n/* Odd events - arrow points LEFT toward axis */\n.mj-timeline__event--odd .mj-timeline__card::before {\n left: -6px;\n border-right: none;\n border-top: none;\n}\n\n/* Hover state */\n.mj-timeline__card:hover {\n box-shadow: var(--mj-timeline-card-shadow-hover);\n border-color: var(--mj-timeline-accent);\n}\n\n/* Selected/Focused state - prominent highlight with animation */\n.mj-timeline__event--focused .mj-timeline__card {\n background: var(--mj-timeline-accent-light);\n border-color: var(--mj-timeline-accent);\n box-shadow:\n 0 0 0 3px var(--mj-timeline-accent),\n 0 8px 24px rgba(70, 120, 168, 0.25);\n transform: scale(1.02);\n}\n\n/* Selected marker - larger and more prominent */\n.mj-timeline__event--focused .mj-timeline__marker {\n transform: translateX(-50%) scale(1.4);\n box-shadow:\n 0 0 0 3px var(--mj-timeline-marker-fill),\n 0 0 12px rgba(70, 120, 168, 0.5);\n}\n\n/* Pulse animation for selected marker */\n.mj-timeline__event--focused .mj-timeline__marker::after {\n content: '';\n position: absolute;\n top: -4px;\n left: -4px;\n right: -4px;\n bottom: -4px;\n border-radius: 50%;\n border: 2px solid var(--mj-timeline-accent);\n animation: mj-timeline-pulse 1.5s ease-out infinite;\n}\n\n@keyframes mj-timeline-pulse {\n 0% {\n transform: scale(1);\n opacity: 0.8;\n }\n 100% {\n transform: scale(1.8);\n opacity: 0;\n }\n}\n\n/* Selected date label - bolder */\n.mj-timeline__event--focused .mj-timeline__date-label {\n color: var(--mj-timeline-accent);\n font-weight: 600;\n}\n\n/* Card arrow gets accent color when selected */\n.mj-timeline__event--focused .mj-timeline__card::before {\n border-color: var(--mj-timeline-accent);\n background: var(--mj-timeline-accent-light);\n}\n\n/* ============================================================================\n CARD HEADER\n ============================================================================ */\n\n.mj-timeline__card-header {\n display: flex;\n align-items: flex-start;\n padding: var(--mj-timeline-card-padding);\n gap: 10px;\n}\n\n.mj-timeline__card-header-content {\n flex: 1;\n display: flex;\n align-items: flex-start;\n gap: 10px;\n min-width: 0;\n}\n\n.mj-timeline__card-icon {\n display: none;\n}\n\n.mj-timeline__card-titles {\n flex: 1;\n min-width: 0;\n}\n\n.mj-timeline__card-title {\n margin: 0;\n font-size: 15px;\n font-weight: 600;\n color: var(--mj-timeline-text-primary);\n line-height: 1.35;\n}\n\n.mj-timeline__card-subtitle {\n display: block;\n font-size: 13px;\n color: var(--mj-timeline-text-secondary);\n margin-top: 4px;\n}\n\n.mj-timeline__card-date {\n display: block;\n font-size: 12px;\n color: var(--mj-timeline-text-muted);\n margin-top: 6px;\n}\n\n.mj-timeline__card-date::before {\n display: none;\n}\n\n.mj-timeline__card-toggle {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border: none;\n background: transparent;\n color: var(--mj-timeline-text-muted);\n border-radius: 4px;\n cursor: pointer;\n transition: all var(--mj-timeline-transition);\n font-size: 14px;\n}\n\n.mj-timeline__card-toggle:hover {\n background: var(--mj-timeline-accent-light);\n color: var(--mj-timeline-accent);\n}\n\n/* ============================================================================\n CARD IMAGE\n ============================================================================ */\n\n.mj-timeline__card-image {\n overflow: hidden;\n border-radius: 4px;\n flex-shrink: 0;\n}\n\n.mj-timeline__card-image img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.mj-timeline__card-image--left.mj-timeline__card-image--small {\n width: 48px;\n height: 48px;\n}\n\n.mj-timeline__card-image--left.mj-timeline__card-image--medium {\n width: 72px;\n height: 72px;\n}\n\n.mj-timeline__card-image--left.mj-timeline__card-image--large {\n width: 96px;\n height: 96px;\n}\n\n.mj-timeline__card-image--top {\n width: calc(100% - 32px);\n max-height: 180px;\n margin: 0 16px 12px;\n}\n\n/* ============================================================================\n CARD BODY\n ============================================================================ */\n\n.mj-timeline__card-body {\n padding: 0 var(--mj-timeline-card-padding) var(--mj-timeline-card-padding);\n}\n\n.mj-timeline__card-body--collapsed {\n display: none;\n}\n\n.mj-timeline__card-description {\n font-size: 13px;\n line-height: 1.6;\n color: var(--mj-timeline-text-secondary);\n margin-bottom: 12px;\n}\n\n.mj-timeline__card-description--clamped {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.mj-timeline__card-description:last-child {\n margin-bottom: 0;\n}\n\n/* ============================================================================\n CARD FIELDS\n ============================================================================ */\n\n.mj-timeline__card-fields {\n display: flex;\n flex-wrap: wrap;\n gap: 4px 12px;\n}\n\n.mj-timeline__card-fields--summary {\n padding-top: 12px;\n border-top: 1px solid var(--mj-timeline-line-color);\n margin-top: 12px;\n}\n\n.mj-timeline__card-fields--expanded {\n margin-top: 12px;\n padding-top: 12px;\n border-top: 1px solid var(--mj-timeline-line-color);\n}\n\n.mj-timeline__card-field {\n display: flex;\n align-items: center;\n gap: 5px;\n font-size: 12px;\n}\n\n.mj-timeline__card-field-icon {\n color: var(--mj-timeline-text-muted);\n font-size: 10px;\n}\n\n.mj-timeline__card-field-label {\n color: var(--mj-timeline-text-muted);\n}\n\n.mj-timeline__card-field-value {\n color: var(--mj-timeline-text-secondary);\n font-weight: 500;\n}\n\n/* ============================================================================\n CARD ACTIONS\n ============================================================================ */\n\n.mj-timeline__card-actions {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n padding: 0 var(--mj-timeline-card-padding) var(--mj-timeline-card-padding);\n justify-content: flex-end;\n}\n\n.mj-timeline__card-actions--hover-only {\n opacity: 0;\n transition: opacity var(--mj-timeline-transition);\n}\n\n.mj-timeline__card:hover .mj-timeline__card-actions--hover-only,\n.mj-timeline__card:focus-within .mj-timeline__card-actions--hover-only {\n opacity: 1;\n}\n\n.mj-timeline__action {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 6px 12px;\n font-size: 12px;\n font-weight: 500;\n border: 1px solid;\n border-radius: 4px;\n cursor: pointer;\n transition: all var(--mj-timeline-transition);\n}\n\n.mj-timeline__action:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.mj-timeline__action i {\n font-size: 10px;\n}\n\n.mj-timeline__action--primary {\n background: var(--mj-timeline-accent);\n border-color: var(--mj-timeline-accent);\n color: #ffffff;\n}\n\n.mj-timeline__action--primary:hover:not(:disabled) {\n filter: brightness(1.1);\n}\n\n.mj-timeline__action--secondary {\n background: transparent;\n border-color: var(--mj-timeline-card-border);\n color: var(--mj-timeline-text-primary);\n}\n\n.mj-timeline__action--secondary:hover:not(:disabled) {\n background: var(--mj-timeline-accent-light);\n border-color: var(--mj-timeline-accent);\n color: var(--mj-timeline-accent);\n}\n\n.mj-timeline__action--danger {\n background: #cf222e;\n border-color: #cf222e;\n color: #ffffff;\n}\n\n.mj-timeline__action--link {\n background: transparent;\n border-color: transparent;\n color: var(--mj-timeline-accent);\n}\n\n.mj-timeline__action--link:hover:not(:disabled) {\n text-decoration: underline;\n}\n\n/* ============================================================================\n VIRTUAL SCROLL\n ============================================================================ */\n\n.mj-timeline-scroll-sentinel {\n height: 1px;\n width: 100%;\n visibility: hidden;\n}\n\n/* ============================================================================\n SINGLE LAYOUT - Cards only on right side\n ============================================================================ */\n\n.mj-timeline--single .mj-timeline__axis::before {\n left: 24px;\n transform: none;\n}\n\n.mj-timeline--single .mj-timeline__segment-header {\n margin-left: 12px;\n}\n\n.mj-timeline--single .mj-timeline__event {\n padding-right: 0;\n padding-left: 56px;\n justify-content: flex-start;\n}\n\n.mj-timeline--single .mj-timeline__event--odd {\n padding-left: 56px;\n flex-direction: row;\n}\n\n.mj-timeline--single .mj-timeline__marker {\n left: 24px;\n transform: translateX(-50%);\n}\n\n.mj-timeline--single .mj-timeline__date-label {\n display: none;\n}\n\n.mj-timeline--single .mj-timeline__card::before {\n left: -6px;\n right: auto;\n border-right: none;\n border-top: none;\n border-left: 1px solid var(--mj-timeline-card-border);\n border-bottom: 1px solid var(--mj-timeline-card-border);\n}\n\n.mj-timeline--single .mj-timeline__card {\n max-width: none;\n}\n\n/* ============================================================================\n ALTERNATING LAYOUT - Explicit class (same as default vertical)\n ============================================================================ */\n\n.mj-timeline--alternating .mj-timeline__segment-header {\n left: 50%;\n transform: translateX(-50%);\n}\n\n/* ============================================================================\n HORIZONTAL LAYOUT\n ============================================================================ */\n\n.mj-timeline--horizontal {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: flex-start;\n overflow-x: auto;\n overflow-y: hidden;\n padding: 80px 40px 24px;\n min-width: 100%;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment {\n flex: 0 0 auto;\n display: flex;\n flex-direction: column;\n margin-bottom: 0;\n margin-right: 40px;\n position: relative;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment:last-child {\n margin-right: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment-header {\n position: absolute;\n top: -56px;\n left: 0;\n margin-bottom: 0;\n white-space: nowrap;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment-content {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n}\n\n.mj-timeline--horizontal .mj-timeline__axis {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding-left: 0;\n min-width: max-content;\n gap: 0;\n}\n\n/* Horizontal axis line */\n.mj-timeline--horizontal .mj-timeline__axis::before {\n left: 0;\n right: 0;\n top: 0;\n bottom: auto;\n width: 100%;\n height: var(--mj-timeline-line-width);\n transform: none;\n}\n\n.mj-timeline--horizontal .mj-timeline__event {\n flex-direction: column;\n align-items: center;\n margin-bottom: 0;\n margin-right: 48px;\n padding: 0;\n padding-top: 32px;\n min-width: 180px;\n max-width: 280px;\n width: auto;\n}\n\n.mj-timeline--horizontal .mj-timeline__event--odd {\n padding-left: 0;\n flex-direction: column;\n}\n\n.mj-timeline--horizontal .mj-timeline__event:last-child {\n margin-right: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__marker {\n position: absolute;\n left: 50%;\n /* Position so marker is centered on the axis line (top: 0 of axis) */\n /* Event has padding-top: 32px, marker is 14px, so top: -(32 + 7) = -39px for center */\n top: calc(-32px - var(--mj-timeline-marker-size) / 2);\n transform: translateX(-50%);\n margin: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__event:hover .mj-timeline__marker {\n transform: translateX(-50%) scale(1.2);\n}\n\n.mj-timeline--horizontal .mj-timeline__date-label {\n position: absolute;\n top: -40px;\n left: 50%;\n right: auto;\n transform: translateX(-50%);\n text-align: center;\n font-size: 12px;\n}\n\n.mj-timeline--horizontal .mj-timeline__card {\n max-width: none;\n width: 100%;\n min-width: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__card::before {\n display: none;\n}\n\n/* Horizontal focused marker override */\n.mj-timeline--horizontal .mj-timeline__event--focused .mj-timeline__marker {\n transform: translateX(-50%) scale(1.4);\n}\n\n/* Horizontal collapsed segment - rotate 90\u00B0 CCW and compress */\n.mj-timeline--horizontal .mj-timeline__segment--collapsed {\n flex: 0 0 auto;\n width: 32px;\n min-width: 32px;\n margin-right: 4px;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment--collapsed .mj-timeline__segment-header {\n writing-mode: vertical-rl;\n text-orientation: mixed;\n transform: rotate(180deg);\n white-space: nowrap;\n padding: 8px 4px;\n margin: 0;\n top: 0;\n position: relative;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment--collapsed .mj-timeline__segment-content {\n display: none;\n}\n\n/* ============================================================================\n RESPONSIVE\n ============================================================================ */\n\n@media (max-width: 900px) {\n /* Force single layout on smaller screens */\n .mj-timeline--alternating .mj-timeline__axis::before {\n left: 24px;\n transform: none;\n }\n\n .mj-timeline--alternating .mj-timeline__segment-header {\n left: auto;\n transform: none;\n margin-left: 12px;\n }\n\n .mj-timeline--alternating .mj-timeline__event {\n padding-right: 0;\n padding-left: 56px;\n justify-content: flex-start;\n }\n\n .mj-timeline--alternating .mj-timeline__event--odd {\n padding-left: 56px;\n padding-right: 0;\n flex-direction: row;\n }\n\n .mj-timeline--alternating .mj-timeline__marker {\n left: 24px;\n transform: translateX(-50%);\n }\n\n .mj-timeline--alternating .mj-timeline__event:hover .mj-timeline__marker {\n transform: translateX(-50%) scale(1.2);\n }\n\n .mj-timeline--alternating .mj-timeline__date-label {\n display: none;\n }\n\n .mj-timeline--alternating .mj-timeline__card::before {\n left: -6px;\n right: auto;\n border-right: none;\n border-top: none;\n border-left: 1px solid var(--mj-timeline-card-border);\n border-bottom: 1px solid var(--mj-timeline-card-border);\n }\n\n .mj-timeline--alternating .mj-timeline__card {\n max-width: none;\n }\n}\n\n@media (max-width: 600px) {\n mj-timeline {\n --mj-timeline-card-padding: 12px;\n --mj-timeline-gap: 16px;\n --mj-timeline-marker-size: 12px;\n }\n\n .mj-timeline {\n padding: 16px 12px;\n }\n\n .mj-timeline__card-title {\n font-size: 14px;\n }\n\n .mj-timeline--horizontal .mj-timeline__event {\n min-width: 160px;\n max-width: 220px;\n margin-right: 32px;\n }\n}\n\n/* Touch devices */\n@media (hover: none) and (pointer: coarse) {\n .mj-timeline__card-actions--hover-only {\n opacity: 1;\n }\n\n .mj-timeline__action {\n min-height: 40px;\n }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n .mj-timeline__card,\n .mj-timeline__marker,\n .mj-timeline__segment-toggle {\n transition: none;\n }\n}\n"] }]
1949
+ 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: #d0d7de;\n --mj-timeline-marker-bg: #ffffff;\n --mj-timeline-marker-border: #4678a8;\n --mj-timeline-marker-fill: #4678a8;\n --mj-timeline-card-bg: #ffffff;\n --mj-timeline-card-border: #d0d7de;\n --mj-timeline-card-shadow: 0 1px 3px rgba(31, 35, 40, 0.08);\n --mj-timeline-card-shadow-hover: 0 4px 12px rgba(31, 35, 40, 0.12);\n --mj-timeline-card-radius: 6px;\n --mj-timeline-text-primary: #1f2328;\n --mj-timeline-text-secondary: #656d76;\n --mj-timeline-text-muted: #8c959f;\n --mj-timeline-accent: #4678a8;\n --mj-timeline-accent-light: rgba(70, 120, 168, 0.08);\n --mj-timeline-segment-bg: #4678a8;\n --mj-timeline-segment-text: #ffffff;\n --mj-timeline-focus-ring: 0 0 0 2px rgba(70, 120, 168, 0.3);\n\n /* Sizing */\n --mj-timeline-line-width: 2px;\n --mj-timeline-marker-size: 14px;\n --mj-timeline-card-padding: 16px;\n --mj-timeline-card-max-width: 400px;\n --mj-timeline-card-min-width: 200px;\n --mj-timeline-gap: 24px;\n --mj-timeline-segment-gap: 16px;\n --mj-timeline-axis-offset: 50%;\n\n /* Animation */\n --mj-timeline-transition: 0.15s ease;\n\n display: block;\n width: 100%;\n height: 100%;\n}\n\n/* Dark mode */\n.dark-theme mj-timeline,\n[data-theme=\"dark\"] mj-timeline {\n --mj-timeline-line-color: #3d444d;\n --mj-timeline-card-bg: #161b22;\n --mj-timeline-card-border: #3d444d;\n --mj-timeline-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\n --mj-timeline-text-primary: #e6edf3;\n --mj-timeline-text-secondary: #8b949e;\n --mj-timeline-text-muted: #6e7681;\n --mj-timeline-accent: #58a6ff;\n --mj-timeline-accent-light: rgba(88, 166, 255, 0.1);\n --mj-timeline-marker-border: #58a6ff;\n --mj-timeline-marker-fill: #58a6ff;\n --mj-timeline-segment-bg: #58a6ff;\n}\n\n/* ============================================================================\n MAIN CONTAINER\n ============================================================================ */\n\n.mj-timeline {\n position: relative;\n width: 100%;\n height: 100%;\n padding: 0;\n background: var(--mj-timeline-bg);\n outline: none;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n/* Subtle scrollbar */\n.mj-timeline::-webkit-scrollbar {\n width: 6px;\n}\n\n.mj-timeline::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.mj-timeline::-webkit-scrollbar-thumb {\n background: rgba(0, 0, 0, 0.15);\n border-radius: 3px;\n}\n\n.mj-timeline::-webkit-scrollbar-thumb:hover {\n background: rgba(0, 0, 0, 0.25);\n}\n\n.mj-timeline:focus-visible {\n box-shadow: inset var(--mj-timeline-focus-ring);\n}\n\n/* ============================================================================\n LOADING & EMPTY STATES\n ============================================================================ */\n\n.mj-timeline__loading {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 48px 24px;\n gap: 12px;\n}\n\n.mj-timeline__loading-spinner {\n width: 24px;\n height: 24px;\n border: 2px solid var(--mj-timeline-line-color);\n border-top-color: var(--mj-timeline-accent);\n border-radius: 50%;\n animation: mj-timeline-spin 0.6s linear infinite;\n}\n\n.mj-timeline__loading-spinner--small {\n width: 14px;\n height: 14px;\n}\n\n.mj-timeline__loading-text {\n color: var(--mj-timeline-text-muted);\n font-size: 13px;\n}\n\n.mj-timeline__loading-more {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px;\n gap: 8px;\n color: var(--mj-timeline-text-muted);\n font-size: 12px;\n}\n\n@keyframes mj-timeline-spin {\n to { transform: rotate(360deg); }\n}\n\n.mj-timeline__empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 64px 24px;\n gap: 8px;\n text-align: center;\n}\n\n.mj-timeline__empty-icon {\n font-size: 32px;\n color: var(--mj-timeline-text-muted);\n opacity: 0.4;\n}\n\n.mj-timeline__empty-text {\n color: var(--mj-timeline-text-secondary);\n font-size: 13px;\n}\n\n/* ============================================================================\n TIME SEGMENTS - Year/Month badges on the axis\n ============================================================================ */\n\n.mj-timeline__segment {\n margin-bottom: var(--mj-timeline-segment-gap);\n position: relative;\n}\n\n.mj-timeline__segment:last-child {\n margin-bottom: 0;\n}\n\n.mj-timeline__segment-header {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 6px 16px;\n margin-bottom: var(--mj-timeline-gap);\n background: var(--mj-timeline-segment-bg);\n border-radius: 4px;\n font-weight: 600;\n font-size: 13px;\n color: var(--mj-timeline-segment-text);\n user-select: none;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n position: relative;\n z-index: 10;\n}\n\n.mj-timeline__segment-header--clickable {\n cursor: pointer;\n transition: all var(--mj-timeline-transition);\n}\n\n.mj-timeline__segment-header--clickable:hover {\n filter: brightness(1.1);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);\n}\n\n.mj-timeline__segment-toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n color: inherit;\n font-size: 10px;\n opacity: 0.9;\n transition: transform var(--mj-timeline-transition);\n}\n\n.mj-timeline__segment--collapsed .mj-timeline__segment-toggle {\n transform: rotate(-90deg);\n}\n\n.mj-timeline__segment-label {\n font-size: inherit;\n font-weight: inherit;\n color: inherit;\n}\n\n.mj-timeline__segment-count {\n display: none;\n}\n\n.mj-timeline__segment-line {\n display: none;\n}\n\n.mj-timeline__segment-content {\n overflow: visible;\n transition: max-height 0.25s ease, opacity 0.2s ease;\n padding-top: 8px;\n}\n\n.mj-timeline__segment-content--hidden {\n max-height: 0;\n opacity: 0;\n pointer-events: none;\n}\n\n/* ============================================================================\n TIMELINE AXIS - Vertical line in center\n ============================================================================ */\n\n.mj-timeline__axis {\n position: relative;\n padding-left: 0;\n}\n\n/* Vertical center line */\n.mj-timeline__axis::before {\n content: '';\n position: absolute;\n left: 50%;\n top: 0;\n bottom: 0;\n width: var(--mj-timeline-line-width);\n background: var(--mj-timeline-line-color);\n transform: translateX(-50%);\n}\n\n/* ============================================================================\n TIMELINE EVENT - Alternating left/right by default\n ============================================================================ */\n\n.mj-timeline__event {\n position: relative;\n display: flex;\n align-items: flex-start;\n margin-bottom: var(--mj-timeline-gap);\n width: 100%;\n}\n\n/* Even events (0, 2, 4...) - card on LEFT, date on RIGHT */\n.mj-timeline__event {\n padding-right: calc(50% + 32px);\n justify-content: flex-end;\n}\n\n/* Odd events (1, 3, 5...) - card on RIGHT, date on LEFT */\n.mj-timeline__event--odd {\n padding-right: 0;\n padding-left: calc(50% + 32px);\n justify-content: flex-start;\n flex-direction: row;\n}\n\n.mj-timeline__event:last-child {\n margin-bottom: 0;\n}\n\n/* ============================================================================\n MARKER - Circular dot on the axis\n ============================================================================ */\n\n.mj-timeline__marker {\n position: absolute;\n left: 50%;\n top: 12px;\n transform: translateX(-50%);\n width: var(--mj-timeline-marker-size);\n height: var(--mj-timeline-marker-size);\n background: var(--mj-timeline-marker-fill);\n border: 2px solid var(--mj-timeline-marker-bg);\n border-radius: 50%;\n box-shadow: 0 0 0 2px var(--mj-timeline-marker-fill);\n z-index: 5;\n transition: transform var(--mj-timeline-transition);\n}\n\n.mj-timeline__marker-icon {\n display: none;\n}\n\n.mj-timeline__event:hover .mj-timeline__marker {\n transform: translateX(-50%) scale(1.2);\n}\n\n.mj-timeline__connector {\n display: none;\n}\n\n/* ============================================================================\n DATE LABEL - Positioned opposite the card\n ============================================================================ */\n\n.mj-timeline__date-label {\n position: absolute;\n top: 10px;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-timeline-text-secondary);\n white-space: nowrap;\n}\n\n/* Even events - date on RIGHT side of axis */\n.mj-timeline__event:not(.mj-timeline__event--odd) .mj-timeline__date-label {\n left: calc(50% + 24px);\n text-align: left;\n}\n\n/* Odd events - date on LEFT side of axis */\n.mj-timeline__event--odd .mj-timeline__date-label {\n right: calc(50% + 24px);\n text-align: right;\n}\n\n/* ============================================================================\n EVENT CARD - Clean design matching Kendo\n ============================================================================ */\n\n.mj-timeline__card {\n background: var(--mj-timeline-card-bg);\n border: 1px solid var(--mj-timeline-card-border);\n border-radius: var(--mj-timeline-card-radius);\n box-shadow: var(--mj-timeline-card-shadow);\n overflow: hidden;\n transition: all var(--mj-timeline-transition);\n cursor: pointer;\n max-width: var(--mj-timeline-card-max-width);\n min-width: var(--mj-timeline-card-min-width);\n width: 100%;\n}\n\n/* Card arrow/pointer toward the axis */\n.mj-timeline__card::before {\n content: '';\n position: absolute;\n top: 14px;\n width: 10px;\n height: 10px;\n background: var(--mj-timeline-card-bg);\n border: 1px solid var(--mj-timeline-card-border);\n transform: rotate(45deg);\n}\n\n/* Even events - arrow points RIGHT toward axis */\n.mj-timeline__event:not(.mj-timeline__event--odd) .mj-timeline__card::before {\n right: -6px;\n border-left: none;\n border-bottom: none;\n}\n\n/* Odd events - arrow points LEFT toward axis */\n.mj-timeline__event--odd .mj-timeline__card::before {\n left: -6px;\n border-right: none;\n border-top: none;\n}\n\n/* Hover state */\n.mj-timeline__card:hover {\n box-shadow: var(--mj-timeline-card-shadow-hover);\n border-color: var(--mj-timeline-accent);\n}\n\n/* Selected/Focused state - prominent highlight with animation */\n.mj-timeline__event--focused .mj-timeline__card {\n background: var(--mj-timeline-accent-light);\n border-color: var(--mj-timeline-accent);\n box-shadow:\n 0 0 0 3px var(--mj-timeline-accent),\n 0 8px 24px rgba(70, 120, 168, 0.25);\n transform: scale(1.02);\n}\n\n/* Selected marker - larger and more prominent */\n.mj-timeline__event--focused .mj-timeline__marker {\n transform: translateX(-50%) scale(1.4);\n box-shadow:\n 0 0 0 3px var(--mj-timeline-marker-fill),\n 0 0 12px rgba(70, 120, 168, 0.5);\n}\n\n/* Pulse animation for selected marker */\n.mj-timeline__event--focused .mj-timeline__marker::after {\n content: '';\n position: absolute;\n top: -4px;\n left: -4px;\n right: -4px;\n bottom: -4px;\n border-radius: 50%;\n border: 2px solid var(--mj-timeline-accent);\n animation: mj-timeline-pulse 1.5s ease-out infinite;\n}\n\n@keyframes mj-timeline-pulse {\n 0% {\n transform: scale(1);\n opacity: 0.8;\n }\n 100% {\n transform: scale(1.8);\n opacity: 0;\n }\n}\n\n/* Selected date label - bolder */\n.mj-timeline__event--focused .mj-timeline__date-label {\n color: var(--mj-timeline-accent);\n font-weight: 600;\n}\n\n/* Card arrow gets accent color when selected */\n.mj-timeline__event--focused .mj-timeline__card::before {\n border-color: var(--mj-timeline-accent);\n background: var(--mj-timeline-accent-light);\n}\n\n/* ============================================================================\n CARD HEADER\n ============================================================================ */\n\n.mj-timeline__card-header {\n display: flex;\n align-items: flex-start;\n padding: var(--mj-timeline-card-padding);\n gap: 10px;\n}\n\n.mj-timeline__card-header-content {\n flex: 1;\n display: flex;\n align-items: flex-start;\n gap: 10px;\n min-width: 0;\n}\n\n.mj-timeline__card-icon {\n display: none;\n}\n\n.mj-timeline__card-titles {\n flex: 1;\n min-width: 0;\n}\n\n.mj-timeline__card-title {\n margin: 0;\n font-size: 15px;\n font-weight: 600;\n color: var(--mj-timeline-text-primary);\n line-height: 1.35;\n}\n\n.mj-timeline__card-subtitle {\n display: block;\n font-size: 13px;\n color: var(--mj-timeline-text-secondary);\n margin-top: 4px;\n}\n\n.mj-timeline__card-date {\n display: block;\n font-size: 12px;\n color: var(--mj-timeline-text-muted);\n margin-top: 6px;\n}\n\n.mj-timeline__card-date::before {\n display: none;\n}\n\n.mj-timeline__card-toggle {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border: none;\n background: transparent;\n color: var(--mj-timeline-text-muted);\n border-radius: 4px;\n cursor: pointer;\n transition: all var(--mj-timeline-transition);\n font-size: 14px;\n}\n\n.mj-timeline__card-toggle:hover {\n background: var(--mj-timeline-accent-light);\n color: var(--mj-timeline-accent);\n}\n\n/* ============================================================================\n CARD IMAGE\n ============================================================================ */\n\n.mj-timeline__card-image {\n overflow: hidden;\n border-radius: 4px;\n flex-shrink: 0;\n}\n\n.mj-timeline__card-image img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.mj-timeline__card-image--left.mj-timeline__card-image--small {\n width: 48px;\n height: 48px;\n}\n\n.mj-timeline__card-image--left.mj-timeline__card-image--medium {\n width: 72px;\n height: 72px;\n}\n\n.mj-timeline__card-image--left.mj-timeline__card-image--large {\n width: 96px;\n height: 96px;\n}\n\n.mj-timeline__card-image--top {\n width: calc(100% - 32px);\n max-height: 180px;\n margin: 0 16px 12px;\n}\n\n/* ============================================================================\n CARD BODY\n ============================================================================ */\n\n.mj-timeline__card-body {\n padding: 0 var(--mj-timeline-card-padding) var(--mj-timeline-card-padding);\n}\n\n.mj-timeline__card-body--collapsed {\n display: none;\n}\n\n.mj-timeline__card-description {\n font-size: 13px;\n line-height: 1.6;\n color: var(--mj-timeline-text-secondary);\n margin-bottom: 12px;\n}\n\n.mj-timeline__card-description--clamped {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.mj-timeline__card-description:last-child {\n margin-bottom: 0;\n}\n\n/* ============================================================================\n CARD FIELDS\n ============================================================================ */\n\n.mj-timeline__card-fields {\n display: flex;\n flex-wrap: wrap;\n gap: 4px 12px;\n}\n\n.mj-timeline__card-fields--summary {\n padding-top: 12px;\n border-top: 1px solid var(--mj-timeline-line-color);\n margin-top: 12px;\n}\n\n.mj-timeline__card-fields--expanded {\n margin-top: 12px;\n padding-top: 12px;\n border-top: 1px solid var(--mj-timeline-line-color);\n}\n\n.mj-timeline__card-field {\n display: flex;\n align-items: center;\n gap: 5px;\n font-size: 12px;\n}\n\n.mj-timeline__card-field-icon {\n color: var(--mj-timeline-text-muted);\n font-size: 10px;\n}\n\n.mj-timeline__card-field-label {\n color: var(--mj-timeline-text-muted);\n}\n\n.mj-timeline__card-field-value {\n color: var(--mj-timeline-text-secondary);\n font-weight: 500;\n}\n\n/* ============================================================================\n CARD ACTIONS\n ============================================================================ */\n\n.mj-timeline__card-actions {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n padding: 0 var(--mj-timeline-card-padding) var(--mj-timeline-card-padding);\n justify-content: flex-end;\n}\n\n.mj-timeline__card-actions--hover-only {\n opacity: 0;\n transition: opacity var(--mj-timeline-transition);\n}\n\n.mj-timeline__card:hover .mj-timeline__card-actions--hover-only,\n.mj-timeline__card:focus-within .mj-timeline__card-actions--hover-only {\n opacity: 1;\n}\n\n.mj-timeline__action {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 6px 12px;\n font-size: 12px;\n font-weight: 500;\n border: 1px solid;\n border-radius: 4px;\n cursor: pointer;\n transition: all var(--mj-timeline-transition);\n}\n\n.mj-timeline__action:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.mj-timeline__action i {\n font-size: 10px;\n}\n\n.mj-timeline__action--primary {\n background: var(--mj-timeline-accent);\n border-color: var(--mj-timeline-accent);\n color: #ffffff;\n}\n\n.mj-timeline__action--primary:hover:not(:disabled) {\n filter: brightness(1.1);\n}\n\n.mj-timeline__action--secondary {\n background: transparent;\n border-color: var(--mj-timeline-card-border);\n color: var(--mj-timeline-text-primary);\n}\n\n.mj-timeline__action--secondary:hover:not(:disabled) {\n background: var(--mj-timeline-accent-light);\n border-color: var(--mj-timeline-accent);\n color: var(--mj-timeline-accent);\n}\n\n.mj-timeline__action--danger {\n background: #cf222e;\n border-color: #cf222e;\n color: #ffffff;\n}\n\n.mj-timeline__action--link {\n background: transparent;\n border-color: transparent;\n color: var(--mj-timeline-accent);\n}\n\n.mj-timeline__action--link:hover:not(:disabled) {\n text-decoration: underline;\n}\n\n/* ============================================================================\n VIRTUAL SCROLL\n ============================================================================ */\n\n.mj-timeline-scroll-sentinel {\n height: 1px;\n width: 100%;\n visibility: hidden;\n}\n\n/* ============================================================================\n SINGLE LAYOUT - Cards only on right side\n ============================================================================ */\n\n.mj-timeline--single .mj-timeline__axis::before {\n left: 24px;\n transform: none;\n}\n\n.mj-timeline--single .mj-timeline__segment-header {\n margin-left: 12px;\n}\n\n.mj-timeline--single .mj-timeline__event {\n padding-right: 0;\n padding-left: 56px;\n justify-content: flex-start;\n}\n\n.mj-timeline--single .mj-timeline__event--odd {\n padding-left: 56px;\n flex-direction: row;\n}\n\n.mj-timeline--single .mj-timeline__marker {\n left: 24px;\n transform: translateX(-50%);\n}\n\n.mj-timeline--single .mj-timeline__date-label {\n display: none;\n}\n\n.mj-timeline--single .mj-timeline__card::before {\n left: -6px;\n right: auto;\n border-right: none;\n border-top: none;\n border-left: 1px solid var(--mj-timeline-card-border);\n border-bottom: 1px solid var(--mj-timeline-card-border);\n}\n\n.mj-timeline--single .mj-timeline__card {\n max-width: none;\n}\n\n/* ============================================================================\n ALTERNATING LAYOUT - Explicit class (same as default vertical)\n ============================================================================ */\n\n.mj-timeline--alternating .mj-timeline__segment-header {\n left: 50%;\n transform: translateX(-50%);\n}\n\n/* ============================================================================\n HORIZONTAL LAYOUT\n ============================================================================ */\n\n.mj-timeline--horizontal {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: flex-start;\n overflow-x: auto;\n overflow-y: hidden;\n padding: 80px 40px 24px;\n min-width: 100%;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment {\n flex: 0 0 auto;\n display: flex;\n flex-direction: column;\n margin-bottom: 0;\n margin-right: 40px;\n position: relative;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment:last-child {\n margin-right: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment-header {\n position: absolute;\n top: -56px;\n left: 0;\n margin-bottom: 0;\n white-space: nowrap;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment-content {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n}\n\n.mj-timeline--horizontal .mj-timeline__axis {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding-left: 0;\n min-width: max-content;\n gap: 0;\n}\n\n/* Horizontal axis line */\n.mj-timeline--horizontal .mj-timeline__axis::before {\n left: 0;\n right: 0;\n top: 0;\n bottom: auto;\n width: 100%;\n height: var(--mj-timeline-line-width);\n transform: none;\n}\n\n.mj-timeline--horizontal .mj-timeline__event {\n flex-direction: column;\n align-items: center;\n margin-bottom: 0;\n margin-right: 48px;\n padding: 0;\n padding-top: 32px;\n min-width: 180px;\n max-width: 280px;\n width: auto;\n}\n\n.mj-timeline--horizontal .mj-timeline__event--odd {\n padding-left: 0;\n flex-direction: column;\n}\n\n.mj-timeline--horizontal .mj-timeline__event:last-child {\n margin-right: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__marker {\n position: absolute;\n left: 50%;\n /* Position so marker is centered on the axis line (top: 0 of axis) */\n /* Event has padding-top: 32px, marker is 14px, so top: -(32 + 7) = -39px for center */\n top: calc(-32px - var(--mj-timeline-marker-size) / 2);\n transform: translateX(-50%);\n margin: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__event:hover .mj-timeline__marker {\n transform: translateX(-50%) scale(1.2);\n}\n\n.mj-timeline--horizontal .mj-timeline__date-label {\n position: absolute;\n top: -40px;\n left: 50%;\n right: auto;\n transform: translateX(-50%);\n text-align: center;\n font-size: 12px;\n}\n\n.mj-timeline--horizontal .mj-timeline__card {\n max-width: none;\n width: 100%;\n min-width: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__card::before {\n display: none;\n}\n\n/* Horizontal focused marker override */\n.mj-timeline--horizontal .mj-timeline__event--focused .mj-timeline__marker {\n transform: translateX(-50%) scale(1.4);\n}\n\n/* Horizontal collapsed segment - rotate 90\u00B0 CCW and compress */\n.mj-timeline--horizontal .mj-timeline__segment--collapsed {\n flex: 0 0 auto;\n width: 32px;\n min-width: 32px;\n margin-right: 4px;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment--collapsed .mj-timeline__segment-header {\n writing-mode: vertical-rl;\n text-orientation: mixed;\n transform: rotate(180deg);\n white-space: nowrap;\n padding: 8px 4px;\n margin: 0;\n top: 0;\n position: relative;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment--collapsed .mj-timeline__segment-content {\n display: none;\n}\n\n/* ============================================================================\n RESPONSIVE\n ============================================================================ */\n\n@media (max-width: 900px) {\n /* Force single layout on smaller screens */\n .mj-timeline--alternating .mj-timeline__axis::before {\n left: 24px;\n transform: none;\n }\n\n .mj-timeline--alternating .mj-timeline__segment-header {\n left: auto;\n transform: none;\n margin-left: 12px;\n }\n\n .mj-timeline--alternating .mj-timeline__event {\n padding-right: 0;\n padding-left: 56px;\n justify-content: flex-start;\n }\n\n .mj-timeline--alternating .mj-timeline__event--odd {\n padding-left: 56px;\n padding-right: 0;\n flex-direction: row;\n }\n\n .mj-timeline--alternating .mj-timeline__marker {\n left: 24px;\n transform: translateX(-50%);\n }\n\n .mj-timeline--alternating .mj-timeline__event:hover .mj-timeline__marker {\n transform: translateX(-50%) scale(1.2);\n }\n\n .mj-timeline--alternating .mj-timeline__date-label {\n display: none;\n }\n\n .mj-timeline--alternating .mj-timeline__card::before {\n left: -6px;\n right: auto;\n border-right: none;\n border-top: none;\n border-left: 1px solid var(--mj-timeline-card-border);\n border-bottom: 1px solid var(--mj-timeline-card-border);\n }\n\n .mj-timeline--alternating .mj-timeline__card {\n max-width: none;\n }\n}\n\n@media (max-width: 600px) {\n mj-timeline {\n --mj-timeline-card-padding: 12px;\n --mj-timeline-gap: 16px;\n --mj-timeline-marker-size: 12px;\n }\n\n .mj-timeline {\n padding: 16px 12px;\n }\n\n .mj-timeline__card-title {\n font-size: 14px;\n }\n\n .mj-timeline--horizontal .mj-timeline__event {\n min-width: 160px;\n max-width: 220px;\n margin-right: 32px;\n }\n}\n\n/* Touch devices */\n@media (hover: none) and (pointer: coarse) {\n .mj-timeline__card-actions--hover-only {\n opacity: 1;\n }\n\n .mj-timeline__action {\n min-height: 40px;\n }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n .mj-timeline__card,\n .mj-timeline__marker,\n .mj-timeline__segment-toggle {\n transition: none;\n }\n}\n"] }]
2007
1950
  }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], { groups: [{
2008
1951
  type: Input
2009
1952
  }], allowLoad: [{
@@ -2093,5 +2036,5 @@ export class TimelineComponent {
2093
2036
  type: ViewChild,
2094
2037
  args: ['scrollContainer']
2095
2038
  }] }); })();
2096
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TimelineComponent, { className: "TimelineComponent", filePath: "src/lib/component/timeline.component.ts", lineNumber: 143 }); })();
2039
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TimelineComponent, { className: "TimelineComponent", filePath: "src/lib/component/timeline.component.ts", lineNumber: 144 }); })();
2097
2040
  //# sourceMappingURL=timeline.component.js.map